1. 调整菜单与路由:重命名客户信息/客户账号为客户档案管理/客户小程序授权管理,移除客户建筑/房间路由,新增空间拓扑路由 2. 后端新增客户统计接口`/customers/stats`,前端同步API与类型定义 3. 重构客户档案与小程序授权页面,仅保留数据库支持字段,移除无支撑功能 4. 新增空间拓扑页面,合并建筑与房间管理为树形拓扑视图 5. 更新数据库种子数据与权限配置,清理废弃菜单与绑定关系 6. 补充UI设计文档与规范说明
788 lines
44 KiB
HTML
788 lines
44 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html lang="zh-CN"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>新增客户档案 - 鑫潼智电 XT-POWER OS</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=hankenGrotesk:wght@100..900&family=JetBrains+Mono:wght@400..700&display=swap" rel="stylesheet"/>
|
|
<style>
|
|
@layer base {
|
|
html, body { margin: 0; padding: 0; height: 100%; }
|
|
body { overscroll-behavior: none; }
|
|
}
|
|
::-webkit-scrollbar { width: 6px; height: 6px; }
|
|
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 4px; }
|
|
::-webkit-scrollbar-track { background: transparent; }
|
|
</style>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
"surface": "#ffffff",
|
|
"primary": "#0054cd",
|
|
"primary-container": "#136bfb",
|
|
"primary-fixed": "#dae2ff",
|
|
"primary-fixed-dim": "#b2c5ff",
|
|
"on-primary": "#ffffff",
|
|
"on-primary-container": "#fefcff",
|
|
"bg-page": "#eef3f8",
|
|
"background": "#f8f9ff",
|
|
"border-rule": "#e2e8f0",
|
|
"outline": "#727787",
|
|
"outline-variant": "#c2c6d8",
|
|
"text-muted": "#5b6b7e",
|
|
"on-surface": "#0d1c2c",
|
|
"on-surface-variant": "#424655",
|
|
"surface-container": "#e5efff",
|
|
"surface-container-low": "#eef4ff",
|
|
"surface-container-lowest": "#ffffff",
|
|
"surface-container-high": "#dbe9ff",
|
|
"surface-container-highest": "#d5e4fa",
|
|
"surface-variant": "#d5e4fa",
|
|
"inverse-surface": "#0f172a",
|
|
"inverse-on-surface": "#e2e8f0",
|
|
"tertiary": "#00685f",
|
|
"tertiary-container": "#008378",
|
|
"tertiary-fixed": "#89f5e7",
|
|
"secondary": "#712ae2",
|
|
"secondary-container": "#8a4cfc",
|
|
"status-warn": "#e0852b",
|
|
"status-error": "#dc2626",
|
|
"error": "#ba1a1a"
|
|
},
|
|
borderRadius: {
|
|
DEFAULT: "0.25rem",
|
|
lg: "0.5rem",
|
|
xl: "0.75rem",
|
|
full: "9999px"
|
|
},
|
|
fontFamily: {
|
|
"body-md": ["hankenGrotesk", "sans-serif"],
|
|
"headline-md": ["hankenGrotesk", "sans-serif"],
|
|
"label-bold": ["hankenGrotesk", "sans-serif"],
|
|
"title-sm": ["hankenGrotesk", "sans-serif"],
|
|
"display-lg": ["hankenGrotesk", "sans-serif"],
|
|
"caption-sm": ["hankenGrotesk", "sans-serif"],
|
|
"data-mono": ["JetBrains Mono", "monospace"]
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
</head>
|
|
<body class="bg-bg-page font-body-md text-on-surface antialiased flex">
|
|
<!-- Left Sidebar (240px wide, deep industrial dark navy) -->
|
|
<aside class="fixed left-0 top-0 bottom-0 w-60 bg-inverse-surface text-inverse-on-surface z-50 flex flex-col justify-between select-none shadow-[0_1px_8px_rgba(0,0,0,0.08)] border-r border-slate-800">
|
|
<div class="flex flex-col flex-1 min-h-0">
|
|
<!-- Logo Branding Header -->
|
|
<div class="h-16 px-4 flex items-center gap-3 bg-inverse-surface border-b border-slate-800">
|
|
<div class="w-9 h-9 rounded-lg bg-primary flex items-center justify-center text-white shadow-md shadow-primary/30">
|
|
<span class="material-symbols-outlined text-[22px]">bolt</span>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<div class="flex items-center gap-1.5">
|
|
<span class="font-headline-md text-base font-bold text-white tracking-wide">XT-POWER</span>
|
|
<span class="font-caption-sm text-[10px] bg-primary px-1.5 py-0.5 rounded text-white font-bold leading-none">OS</span>
|
|
</div>
|
|
<span class="font-caption-sm text-[11px] text-slate-400 tracking-wider mt-0.5">鑫潼智电 · 智能配用电中枢</span>
|
|
</div>
|
|
</div>
|
|
<!-- Navigation Tree -->
|
|
<div class="flex-1 overflow-y-auto px-2 py-3">
|
|
<div class="px-3 py-1 mb-1">
|
|
<span class="font-caption-sm text-[11px] text-slate-400 font-bold uppercase tracking-wider">综合运营管控</span>
|
|
</div>
|
|
<nav class="flex flex-col gap-1">
|
|
<!-- 运营工作台 -->
|
|
<a class="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-400 hover:bg-slate-800/60 hover:text-white transition-colors group" href="#">
|
|
<span class="material-symbols-outlined text-[19px] group-hover:text-white">dashboard</span>
|
|
<span class="font-label-bold text-xs">运营工作台</span>
|
|
</a>
|
|
<!-- 客户管理 (Active Accordion) -->
|
|
<div class="flex flex-col">
|
|
<a class="flex items-center justify-between px-3 py-2 rounded-lg bg-primary text-white font-label-bold text-xs shadow-sm transition-colors" href="#">
|
|
<div class="flex items-center gap-3">
|
|
<span class="material-symbols-outlined text-[19px]">corporate_fare</span>
|
|
<span>客户管理</span>
|
|
</div>
|
|
<span class="material-symbols-outlined text-[16px]">expand_more</span>
|
|
</a>
|
|
<!-- Submenu Items -->
|
|
<div class="flex flex-col ml-4 pl-3 mt-1 mb-1 gap-1 border-l border-slate-700">
|
|
<a class="px-2.5 py-1.5 rounded-md text-slate-300 hover:text-white font-label-bold text-[12px] transition-colors flex items-center gap-2" href="#">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-slate-500"></span>
|
|
<span>客户档案列表</span>
|
|
</a>
|
|
<a class="px-2.5 py-1.5 rounded-md bg-white/10 text-white font-label-bold text-[12px] transition-colors flex items-center gap-2 shadow-xs" href="#">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-tertiary-fixed"></span>
|
|
<span>新增客户档案</span>
|
|
</a>
|
|
<a class="px-2.5 py-1.5 rounded-md text-slate-400 hover:text-white font-label-bold text-[12px] transition-colors flex items-center gap-2" href="#">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-slate-600"></span>
|
|
<span>空间拓扑与用电架构</span>
|
|
</a>
|
|
<a class="px-2.5 py-1.5 rounded-md text-slate-400 hover:text-white font-label-bold text-[12px] transition-colors flex items-center gap-2" href="#">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-slate-600"></span>
|
|
<span>微信小程序授权</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- 项目管理 -->
|
|
<a class="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-400 hover:bg-slate-800/60 hover:text-white transition-colors group" href="#">
|
|
<span class="material-symbols-outlined text-[19px] group-hover:text-white">lan</span>
|
|
<span class="font-label-bold text-xs">项目管理</span>
|
|
</a>
|
|
<!-- 运营派单 -->
|
|
<a class="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-400 hover:bg-slate-800/60 hover:text-white transition-colors group" href="#">
|
|
<span class="material-symbols-outlined text-[19px] group-hover:text-white">assignment_turned_in</span>
|
|
<span class="font-label-bold text-xs">运营派单</span>
|
|
</a>
|
|
<!-- 设备监控 -->
|
|
<a class="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-400 hover:bg-slate-800/60 hover:text-white transition-colors group" href="#">
|
|
<span class="material-symbols-outlined text-[19px] group-hover:text-white">sensors</span>
|
|
<span class="font-label-bold text-xs">设备监控</span>
|
|
</a>
|
|
<!-- 统计报表 -->
|
|
<a class="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-400 hover:bg-slate-800/60 hover:text-white transition-colors group" href="#">
|
|
<span class="material-symbols-outlined text-[19px] group-hover:text-white">query_stats</span>
|
|
<span class="font-label-bold text-xs">统计报表</span>
|
|
</a>
|
|
<!-- 系统管理 -->
|
|
<a class="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-400 hover:bg-slate-800/60 hover:text-white transition-colors group" href="#">
|
|
<span class="material-symbols-outlined text-[19px] group-hover:text-white">settings</span>
|
|
<span class="font-label-bold text-xs">系统管理</span>
|
|
</a>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
<!-- Sidebar Bottom Telemetry Micro-Card -->
|
|
<div class="p-3 m-2.5 rounded-lg bg-slate-800/80 border border-slate-700/60 flex flex-col gap-1.5">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-1.5">
|
|
<span class="relative flex h-2 w-2">
|
|
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-tertiary-fixed opacity-75"></span>
|
|
<span class="relative inline-flex rounded-full h-2 w-2 bg-emerald-400"></span>
|
|
</span>
|
|
<span class="font-caption-sm text-[11px] text-slate-200 font-medium">边缘网关通信链路</span>
|
|
</div>
|
|
<span class="font-data-mono text-[11px] text-tertiary-fixed font-semibold">在线 24/24</span>
|
|
</div>
|
|
<div class="flex items-center justify-between font-data-mono text-[11px] text-slate-400">
|
|
<span>时延: 14ms</span>
|
|
<span>丢包: 0.00%</span>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
<!-- Right Application Canvas -->
|
|
<div class="pl-60 flex flex-col flex-1 min-h-screen">
|
|
<!-- Top Professional Header Bar -->
|
|
<header class="fixed top-0 left-60 right-0 h-16 bg-surface/95 backdrop-blur-md z-40 border-b border-border-rule px-6 flex items-center justify-between gap-4 shadow-[0_1px_4px_rgba(0,0,0,0.03)]">
|
|
<!-- Search & Status Section -->
|
|
<div class="flex items-center gap-4 flex-1 max-w-2xl">
|
|
<div class="flex items-center gap-1.5 px-3 py-1 rounded-full bg-emerald-50 border border-emerald-200/80 shrink-0">
|
|
<span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
|
|
<span class="font-caption-sm text-[12px] text-emerald-700 font-bold">ICC 实时数据同步正常</span>
|
|
<span class="font-data-mono text-[11px] text-slate-400 ml-1">120FPS</span>
|
|
</div>
|
|
<div class="h-4 w-px bg-slate-200"></div>
|
|
<div class="relative flex-1">
|
|
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-[18px]">search</span>
|
|
<input class="w-full pl-9 pr-16 py-1.5 rounded-lg bg-slate-50 border border-slate-200 text-xs text-on-surface placeholder:text-slate-400 focus:outline-none focus:bg-white focus:border-primary transition-all shadow-xs" placeholder="按项目号 / 变电站 / 工单编号检索..." type="text"/>
|
|
<span class="absolute right-2.5 top-1/2 -translate-y-1/2 px-1.5 py-0.5 rounded bg-slate-200/70 text-[10px] font-data-mono text-slate-500">Ctrl + K</span>
|
|
</div>
|
|
</div>
|
|
<!-- User Profile & Auxiliary Tools -->
|
|
<div class="flex items-center gap-3">
|
|
<button class="relative p-2 rounded-lg text-slate-600 hover:bg-slate-100 transition-colors" title="通知提醒" type="button">
|
|
<span class="material-symbols-outlined text-[20px]">notifications</span>
|
|
<span class="absolute top-1 right-1 flex h-4 w-4 items-center justify-center rounded-full bg-status-error text-[10px] font-bold text-white">3</span>
|
|
</button>
|
|
<button class="p-2 rounded-lg text-slate-600 hover:bg-slate-100 transition-colors" title="应用矩阵" type="button">
|
|
<span class="material-symbols-outlined text-[20px]">apps</span>
|
|
</button>
|
|
<div class="h-5 w-px bg-slate-200"></div>
|
|
<div class="flex items-center gap-2 cursor-pointer p-1.5 rounded-lg hover:bg-slate-100 transition-colors">
|
|
<div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center text-white shadow-xs">
|
|
<span class="material-symbols-outlined text-[18px]">person</span>
|
|
</div>
|
|
<div class="flex flex-col text-left">
|
|
<span class="font-label-bold text-xs text-on-surface leading-tight">李工</span>
|
|
<span class="font-caption-sm text-[11px] text-slate-500 leading-tight">主控工程师 · 调度中心</span>
|
|
</div>
|
|
<span class="material-symbols-outlined text-slate-400 text-[16px]">keyboard_arrow_down</span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<!-- Main Workspace Container -->
|
|
<main class="w-full pt-20 px-6 pb-28 flex-1 bg-bg-page">
|
|
<div class="w-full max-w-[1400px] mx-auto flex flex-col gap-5">
|
|
<!-- Breadcrumbs & Master Header Section -->
|
|
<div class="flex flex-col gap-2">
|
|
<!-- Breadcrumb -->
|
|
<div class="flex items-center gap-1.5 text-xs text-slate-500">
|
|
<span class="hover:text-primary cursor-pointer transition-colors">运营管控体系</span>
|
|
<span class="material-symbols-outlined text-[13px]">chevron_right</span>
|
|
<span class="hover:text-primary cursor-pointer transition-colors">客户管理</span>
|
|
<span class="material-symbols-outlined text-[13px]">chevron_right</span>
|
|
<span class="hover:text-primary cursor-pointer transition-colors">客户档案列表</span>
|
|
<span class="material-symbols-outlined text-[13px]">chevron_right</span>
|
|
<span class="text-primary font-bold">新增客户档案</span>
|
|
</div>
|
|
<!-- Master Title & Quick Action Toolbar -->
|
|
<div class="flex flex-col lg:flex-row lg:items-center justify-between gap-4 bg-surface p-5 rounded-xl border border-border-rule shadow-sm">
|
|
<div class="flex flex-col gap-1">
|
|
<div class="flex items-center gap-2.5 flex-wrap">
|
|
<div class="w-2.5 h-6 bg-primary rounded-full"></div>
|
|
<h1 class="font-headline-md text-xl font-bold text-on-surface tracking-tight">新增客户档案</h1>
|
|
<span class="font-data-mono text-xs px-2 py-0.5 rounded bg-surface-container-high text-primary font-bold">CREATE CUSTOMER PROFILE</span>
|
|
<span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full bg-emerald-50 text-emerald-700 border border-emerald-200 text-xs font-semibold">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
|
|
架构解耦机制已激活
|
|
</span>
|
|
</div>
|
|
<p class="font-body-md text-xs text-slate-500 pl-3.5">
|
|
纯粹客户基础信息建档 · 聚焦主体资质与基础用电参数,后续拓扑与设备配置已完全解耦。
|
|
</p>
|
|
</div>
|
|
<!-- Top Actions -->
|
|
<div class="flex items-center gap-2.5 flex-wrap">
|
|
<button class="inline-flex items-center gap-1.5 px-3.5 py-1.5 rounded-lg bg-surface-container-low hover:bg-surface-container-high text-primary font-label-bold text-xs border border-primary/20 transition-all shadow-xs group" type="button">
|
|
<span class="material-symbols-outlined text-[17px] group-hover:scale-105 transition-transform">document_scanner</span>
|
|
<span>导入营业执照智能识别</span>
|
|
</button>
|
|
<button class="inline-flex items-center gap-1.5 px-3.5 py-1.5 rounded-lg bg-slate-100 hover:bg-slate-200 text-slate-700 font-label-bold text-xs border border-slate-200 transition-all shadow-xs" type="button">
|
|
<span class="material-symbols-outlined text-[17px]">sync_alt</span>
|
|
<span>从意向客户导入</span>
|
|
</button>
|
|
<button class="px-3.5 py-1.5 rounded-lg bg-white border border-slate-200 text-slate-700 hover:bg-slate-50 font-label-bold text-xs transition-colors shadow-xs" type="button">
|
|
保存草稿
|
|
</button>
|
|
<button class="inline-flex items-center gap-1.5 px-4 py-1.5 rounded-lg bg-primary hover:bg-primary-container text-white font-label-bold text-xs transition-all shadow-sm shadow-primary/25" type="button">
|
|
<span>完成建档并进入空间拓扑</span>
|
|
<span class="material-symbols-outlined text-[16px]">arrow_forward</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Two-column Layout: 8:4 Grid -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-12 gap-5 items-start">
|
|
<!-- Left Column (8 cols): Decoupled Core Form Cards -->
|
|
<div class="lg:col-span-8 flex flex-col gap-5">
|
|
<!-- SECTION 01: 客户主体与工商资质 -->
|
|
<section class="bg-surface rounded-xl border border-border-rule shadow-sm p-6 flex flex-col gap-4 transition-all hover:border-slate-300">
|
|
<div class="flex items-center justify-between pb-3 border-b border-border-rule">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center text-primary font-data-mono font-bold text-xs">
|
|
01
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<div class="flex items-center gap-2">
|
|
<span class="font-data-mono text-xs font-bold text-slate-400 uppercase tracking-wide">SECTION 01</span>
|
|
<h2 class="font-title-sm text-base font-bold text-on-surface">客户主体与工商资质</h2>
|
|
</div>
|
|
<span class="font-caption-sm text-[11px] text-slate-500">国家发改委及国家电网要求之真实用电主体工商底册</span>
|
|
</div>
|
|
</div>
|
|
<span class="px-2.5 py-1 rounded bg-emerald-50 text-emerald-700 border border-emerald-200 text-xs font-semibold flex items-center gap-1">
|
|
<span class="material-symbols-outlined text-[14px]">verified</span>
|
|
全国工商业信息库直联已就绪
|
|
</span>
|
|
</div>
|
|
<!-- Form Inputs -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 pt-1">
|
|
<!-- 机构全称 -->
|
|
<div class="md:col-span-2 flex flex-col gap-1.5">
|
|
<label class="font-label-bold text-xs text-on-surface flex items-center justify-between">
|
|
<span>机构全称 (工商登记法定全称) <span class="text-status-error">*</span></span>
|
|
<span class="text-emerald-700 text-[11px] font-semibold flex items-center gap-0.5">
|
|
<span class="material-symbols-outlined text-[14px]">check_circle</span>
|
|
工商联网核验通过
|
|
</span>
|
|
</label>
|
|
<div class="relative flex items-center">
|
|
<input class="w-full pl-3 pr-20 py-2 rounded-lg bg-slate-50/70 border border-slate-200 text-xs text-on-surface focus:outline-none focus:bg-white focus:border-primary transition-all font-medium" type="text" value="武汉华星光电半导体显示技术有限公司"/>
|
|
<span class="absolute right-2 px-2 py-0.5 rounded bg-blue-100 text-primary font-data-mono text-[11px] font-semibold">已验资</span>
|
|
</div>
|
|
</div>
|
|
<!-- 统一社会信用代码 -->
|
|
<div class="flex flex-col gap-1.5">
|
|
<label class="font-label-bold text-xs text-on-surface flex items-center justify-between">
|
|
<span>统一社会信用代码 (18位) <span class="text-status-error">*</span></span>
|
|
<button class="text-primary text-[11px] font-semibold flex items-center gap-0.5 hover:underline" type="button">
|
|
<span class="material-symbols-outlined text-[13px]">center_focus_strong</span>
|
|
OCR识别
|
|
</button>
|
|
</label>
|
|
<input class="w-full px-3 py-2 rounded-lg bg-slate-50/70 border border-slate-200 font-data-mono text-xs text-on-surface uppercase focus:outline-none focus:bg-white focus:border-primary transition-all" maxlength="18" type="text" value="91420100MA4KMYXU72"/>
|
|
</div>
|
|
<!-- 所属行业门类 -->
|
|
<div class="flex flex-col gap-1.5">
|
|
<label class="font-label-bold text-xs text-on-surface">
|
|
所属行业门类 <span class="text-status-error">*</span>
|
|
</label>
|
|
<div class="relative flex items-center">
|
|
<select class="w-full px-3 py-2 rounded-lg bg-slate-50/70 border border-slate-200 text-xs text-on-surface appearance-none focus:outline-none focus:bg-white focus:border-primary transition-all">
|
|
<option selected="">先进制造 · 半导体与精密光电</option>
|
|
<option>生物医药 · 基因工程产业基地</option>
|
|
<option>高校科研 · 重点实验中心</option>
|
|
<option>医疗卫生 · 三级甲等综合医院</option>
|
|
<option>商务楼宇 · 超甲级智能总部大厦</option>
|
|
<option>市政交通 · 特级轨道交通枢纽</option>
|
|
</select>
|
|
<span class="material-symbols-outlined absolute right-2.5 text-slate-400 pointer-events-none text-[18px]">unfold_more</span>
|
|
</div>
|
|
</div>
|
|
<!-- 法定代表人姓名 -->
|
|
<div class="flex flex-col gap-1.5">
|
|
<label class="font-label-bold text-xs text-on-surface">
|
|
法定代表人姓名 <span class="text-status-error">*</span>
|
|
</label>
|
|
<input class="w-full px-3 py-2 rounded-lg bg-slate-50/70 border border-slate-200 text-xs text-on-surface focus:outline-none focus:bg-white focus:border-primary transition-all" placeholder="输入法定代表人姓名" type="text" value="赵宏伟"/>
|
|
</div>
|
|
<!-- 法定代表人联系电话 -->
|
|
<div class="flex flex-col gap-1.5">
|
|
<label class="font-label-bold text-xs text-on-surface">
|
|
法定代表人联系电话
|
|
</label>
|
|
<input class="w-full px-3 py-2 rounded-lg bg-slate-50/70 border border-slate-200 font-data-mono text-xs text-on-surface focus:outline-none focus:bg-white focus:border-primary transition-all" placeholder="座机或移动手机" type="tel" value="027-8790-8800"/>
|
|
</div>
|
|
<!-- 所属行政区划 (三级联动) -->
|
|
<div class="md:col-span-2 flex flex-col gap-1.5">
|
|
<label class="font-label-bold text-xs text-on-surface">
|
|
所属行政区划 (三级联动) <span class="text-status-error">*</span>
|
|
</label>
|
|
<div class="grid grid-cols-3 gap-3">
|
|
<div class="relative">
|
|
<select class="w-full px-3 py-2 rounded-lg bg-slate-50/70 border border-slate-200 text-xs text-on-surface appearance-none focus:outline-none focus:bg-white focus:border-primary">
|
|
<option selected="">湖北省</option>
|
|
</select>
|
|
<span class="material-symbols-outlined absolute right-2.5 top-2.5 text-slate-400 pointer-events-none text-[16px]">expand_more</span>
|
|
</div>
|
|
<div class="relative">
|
|
<select class="w-full px-3 py-2 rounded-lg bg-slate-50/70 border border-slate-200 text-xs text-on-surface appearance-none focus:outline-none focus:bg-white focus:border-primary">
|
|
<option selected="">武汉市</option>
|
|
</select>
|
|
<span class="material-symbols-outlined absolute right-2.5 top-2.5 text-slate-400 pointer-events-none text-[16px]">expand_more</span>
|
|
</div>
|
|
<div class="relative">
|
|
<select class="w-full px-3 py-2 rounded-lg bg-slate-50/70 border border-slate-200 text-xs text-on-surface appearance-none focus:outline-none focus:bg-white focus:border-primary">
|
|
<option selected="">洪山区 (东湖新技术开发区)</option>
|
|
<option>江夏区</option>
|
|
<option>武昌区</option>
|
|
</select>
|
|
<span class="material-symbols-outlined absolute right-2.5 top-2.5 text-slate-400 pointer-events-none text-[16px]">expand_more</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 实际用电厂区/建筑地址 -->
|
|
<div class="md:col-span-2 flex flex-col gap-1.5">
|
|
<label class="font-label-bold text-xs text-on-surface flex items-center justify-between">
|
|
<span>实际用电厂区/建筑地址 <span class="text-status-error">*</span></span>
|
|
<span class="text-slate-500 text-[11px] flex items-center gap-1">
|
|
<span class="material-symbols-outlined text-[14px] text-primary">pin_drop</span>
|
|
经纬度坐标点选已锁定
|
|
</span>
|
|
</label>
|
|
<div class="relative flex items-center">
|
|
<input class="w-full pl-3 pr-24 py-2 rounded-lg bg-slate-50/70 border border-slate-200 text-xs text-on-surface focus:outline-none focus:bg-white focus:border-primary transition-all font-medium" type="text" value="光谷智能制造产业园高新大道999号 华星光电武汉光谷显示基地 T3/T4厂区"/>
|
|
<button class="absolute right-1.5 px-2.5 py-1 rounded bg-blue-50 hover:bg-blue-100 text-primary font-label-bold text-[11px] flex items-center gap-1 border border-primary/20 transition-colors" type="button">
|
|
<span class="material-symbols-outlined text-[15px]">map</span>
|
|
<span>地图定标</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- SECTION 02: 基础用电申报参数 -->
|
|
<section class="bg-surface rounded-xl border border-border-rule shadow-sm p-6 flex flex-col gap-4 transition-all hover:border-slate-300">
|
|
<div class="flex items-center justify-between pb-3 border-b border-border-rule">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded-lg bg-amber-500/10 flex items-center justify-center text-amber-600 font-data-mono font-bold text-xs">
|
|
02
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<div class="flex items-center gap-2">
|
|
<span class="font-data-mono text-xs font-bold text-slate-400 uppercase tracking-wide">SECTION 02</span>
|
|
<h2 class="font-title-sm text-base font-bold text-on-surface">基础用电申报参数</h2>
|
|
</div>
|
|
<span class="font-caption-sm text-[11px] text-slate-500">电网报装装见容量、受电电压与应急安全责任底册</span>
|
|
</div>
|
|
</div>
|
|
<span class="px-2.5 py-1 rounded bg-slate-100 text-slate-600 text-[11px] font-medium">
|
|
用于负荷容量规划与越限告警基线
|
|
</span>
|
|
</div>
|
|
<!-- Form Inputs -->
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 pt-1">
|
|
<!-- 供电局电网用电户号 -->
|
|
<div class="flex flex-col gap-1.5">
|
|
<label class="font-label-bold text-xs text-on-surface flex items-center justify-between">
|
|
<span>供电局电网用电户号 <span class="text-status-error">*</span></span>
|
|
<span class="text-emerald-700 text-[11px] font-semibold flex items-center gap-0.5">
|
|
<span class="material-symbols-outlined text-[13px]">verified_user</span>
|
|
户名校验一致
|
|
</span>
|
|
</label>
|
|
<input class="w-full px-3 py-2 rounded-lg bg-slate-50/70 border border-slate-200 font-data-mono text-xs text-on-surface tracking-wider focus:outline-none focus:bg-white focus:border-primary transition-all" placeholder="例如: 0982736192" type="text" value="0982736192"/>
|
|
</div>
|
|
<!-- 进线受电电压等级 -->
|
|
<div class="flex flex-col gap-1.5">
|
|
<label class="font-label-bold text-xs text-on-surface">
|
|
进线受电电压等级 <span class="text-status-error">*</span>
|
|
</label>
|
|
<div class="relative flex items-center">
|
|
<select class="w-full px-3 py-2 rounded-lg bg-slate-50/70 border border-slate-200 text-xs text-on-surface appearance-none focus:outline-none focus:bg-white focus:border-primary transition-all">
|
|
<option selected="">10kV 高压专线供电</option>
|
|
<option>35kV 变电站高压受电</option>
|
|
<option>110kV 专用变电站</option>
|
|
<option>380V 低压综合动力</option>
|
|
</select>
|
|
<span class="material-symbols-outlined absolute right-2.5 text-slate-400 pointer-events-none text-[18px]">unfold_more</span>
|
|
</div>
|
|
</div>
|
|
<!-- 报装装见总容量 -->
|
|
<div class="flex flex-col gap-1.5">
|
|
<label class="font-label-bold text-xs text-on-surface">
|
|
报装装见总容量 <span class="text-status-error">*</span>
|
|
</label>
|
|
<div class="relative flex items-center">
|
|
<input class="w-full pl-3 pr-12 py-2 rounded-lg bg-slate-50/70 border border-slate-200 font-data-mono text-xs text-on-surface focus:outline-none focus:bg-white focus:border-primary transition-all" type="number" value="16000"/>
|
|
<span class="absolute right-3 text-slate-400 font-data-mono text-xs pointer-events-none">kVA</span>
|
|
</div>
|
|
</div>
|
|
<!-- 变配电室规划总数 -->
|
|
<div class="flex flex-col gap-1.5">
|
|
<label class="font-label-bold text-xs text-on-surface">
|
|
变配电室规划总数 <span class="text-status-error">*</span>
|
|
</label>
|
|
<div class="relative flex items-center">
|
|
<input class="w-full pl-3 pr-12 py-2 rounded-lg bg-slate-50/70 border border-slate-200 font-data-mono text-xs text-on-surface focus:outline-none focus:bg-white focus:border-primary transition-all" type="number" value="3"/>
|
|
<span class="absolute right-3 text-slate-400 text-xs pointer-events-none">处所</span>
|
|
</div>
|
|
</div>
|
|
<!-- 规划用电建筑栋数 -->
|
|
<div class="flex flex-col gap-1.5">
|
|
<label class="font-label-bold text-xs text-on-surface">
|
|
规划用电建筑栋数 <span class="text-status-error">*</span>
|
|
</label>
|
|
<div class="relative flex items-center">
|
|
<input class="w-full pl-3 pr-12 py-2 rounded-lg bg-slate-50/70 border border-slate-200 font-data-mono text-xs text-on-surface focus:outline-none focus:bg-white focus:border-primary transition-all" type="number" value="5"/>
|
|
<span class="absolute right-3 text-slate-400 text-xs pointer-events-none">栋</span>
|
|
</div>
|
|
</div>
|
|
<!-- 计划监测回路预估数 -->
|
|
<div class="flex flex-col gap-1.5">
|
|
<label class="font-label-bold text-xs text-on-surface">
|
|
计划监测回路预估数 <span class="text-status-error">*</span>
|
|
</label>
|
|
<div class="relative flex items-center">
|
|
<input class="w-full pl-3 pr-12 py-2 rounded-lg bg-slate-50/70 border border-slate-200 font-data-mono text-xs text-on-surface focus:outline-none focus:bg-white focus:border-primary transition-all" type="number" value="84"/>
|
|
<span class="absolute right-3 text-slate-400 text-xs pointer-events-none">回路</span>
|
|
</div>
|
|
</div>
|
|
<!-- 客户方电气第一责任人 -->
|
|
<div class="flex flex-col gap-1.5">
|
|
<label class="font-label-bold text-xs text-on-surface">
|
|
客户方电气第一责任人 <span class="text-status-error">*</span>
|
|
</label>
|
|
<input class="w-full px-3 py-2 rounded-lg bg-slate-50/70 border border-slate-200 text-xs text-on-surface focus:outline-none focus:bg-white focus:border-primary transition-all" placeholder="例如: 陈明德 (动力部总监)" type="text" value="陈明德 (动力部总监)"/>
|
|
</div>
|
|
<!-- 24小时应急值班手机号 -->
|
|
<div class="md:col-span-2 flex flex-col gap-1.5">
|
|
<label class="font-label-bold text-xs text-on-surface flex items-center justify-between">
|
|
<span>24小时应急值班手机号 <span class="text-status-error">*</span></span>
|
|
<span class="text-slate-400 text-[11px]">用于接收调度令与严重故障短信推送</span>
|
|
</label>
|
|
<div class="relative flex items-center">
|
|
<span class="material-symbols-outlined absolute left-3 text-slate-400 text-[18px]">phone_in_talk</span>
|
|
<input class="w-full pl-9 pr-3 py-2 rounded-lg bg-slate-50/70 border border-slate-200 font-data-mono text-xs text-on-surface focus:outline-none focus:bg-white focus:border-primary transition-all" type="tel" value="139-7128-9921"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- SECTION 03: 商务签约与托管服务级别 -->
|
|
<section class="bg-surface rounded-xl border border-border-rule shadow-sm p-6 flex flex-col gap-4 transition-all hover:border-slate-300">
|
|
<div class="flex items-center justify-between pb-3 border-b border-border-rule">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded-lg bg-purple-500/10 flex items-center justify-center text-purple-600 font-data-mono font-bold text-xs">
|
|
03
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<div class="flex items-center gap-2">
|
|
<span class="font-data-mono text-xs font-bold text-slate-400 uppercase tracking-wide">SECTION 03</span>
|
|
<h2 class="font-title-sm text-base font-bold text-on-surface">商务签约与托管服务级别</h2>
|
|
</div>
|
|
<span class="font-caption-sm text-[11px] text-slate-500">界定响应时限、巡检频次与责任客户经理权责</span>
|
|
</div>
|
|
</div>
|
|
<span class="px-2.5 py-1 rounded bg-purple-50 text-purple-700 border border-purple-200 text-xs font-semibold">
|
|
年度托管协议 (SLA)
|
|
</span>
|
|
</div>
|
|
<!-- SLA Tier Selection Cards -->
|
|
<div class="flex flex-col gap-2 pt-1">
|
|
<label class="font-label-bold text-xs text-on-surface">
|
|
鑫潼智电智能运维保障等级 (SLA 服务策略) <span class="text-status-error">*</span>
|
|
</label>
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-3">
|
|
<!-- A+ 特级保电 (Active) -->
|
|
<div class="relative p-3.5 rounded-xl border-2 border-primary bg-blue-50/50 flex flex-col gap-1.5 cursor-pointer transition-all shadow-xs">
|
|
<div class="flex items-center justify-between">
|
|
<span class="px-2 py-0.5 rounded bg-primary text-white font-data-mono text-[11px] font-bold">A+ 级</span>
|
|
<span class="material-symbols-outlined text-primary text-[18px]">radio_button_checked</span>
|
|
</div>
|
|
<span class="font-label-bold text-xs font-bold text-on-surface">特级保电托管</span>
|
|
<p class="font-caption-sm text-[11px] text-slate-500 leading-relaxed">
|
|
15分钟应急到场 · 7×24小时专家派单巡检 · 关键负荷双电源容灾
|
|
</p>
|
|
</div>
|
|
<!-- A 级重大保电 -->
|
|
<div class="relative p-3.5 rounded-xl border border-slate-200 hover:border-slate-300 bg-white flex flex-col gap-1.5 cursor-pointer transition-all">
|
|
<div class="flex items-center justify-between">
|
|
<span class="px-2 py-0.5 rounded bg-slate-100 text-slate-600 font-data-mono text-[11px] font-bold">A 级</span>
|
|
<span class="material-symbols-outlined text-slate-400 text-[18px]">radio_button_unchecked</span>
|
|
</div>
|
|
<span class="font-label-bold text-xs font-bold text-on-surface">重大用电保障</span>
|
|
<p class="font-caption-sm text-[11px] text-slate-500 leading-relaxed">
|
|
30分钟响应 · 每周常规物理巡检 · 负荷越限动态调优
|
|
</p>
|
|
</div>
|
|
<!-- B 级标准托管 -->
|
|
<div class="relative p-3.5 rounded-xl border border-slate-200 hover:border-slate-300 bg-white flex flex-col gap-1.5 cursor-pointer transition-all">
|
|
<div class="flex items-center justify-between">
|
|
<span class="px-2 py-0.5 rounded bg-slate-100 text-slate-600 font-data-mono text-[11px] font-bold">B 级</span>
|
|
<span class="material-symbols-outlined text-slate-400 text-[18px]">radio_button_unchecked</span>
|
|
</div>
|
|
<span class="font-label-bold text-xs font-bold text-on-surface">标准集中托管</span>
|
|
<p class="font-caption-sm text-[11px] text-slate-500 leading-relaxed">
|
|
2小时响应 · 每月预防性预防性维护 · 报表定期抄送
|
|
</p>
|
|
</div>
|
|
<!-- C 级基础监测 -->
|
|
<div class="relative p-3.5 rounded-xl border border-slate-200 hover:border-slate-300 bg-white flex flex-col gap-1.5 cursor-pointer transition-all">
|
|
<div class="flex items-center justify-between">
|
|
<span class="px-2 py-0.5 rounded bg-slate-100 text-slate-600 font-data-mono text-[11px] font-bold">C 级</span>
|
|
<span class="material-symbols-outlined text-slate-400 text-[18px]">radio_button_unchecked</span>
|
|
</div>
|
|
<span class="font-label-bold text-xs font-bold text-on-surface">基础数据监测</span>
|
|
<p class="font-caption-sm text-[11px] text-slate-500 leading-relaxed">
|
|
仅云端数据上报与告警 · 不含线下人工巡维派遣
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Contract Dates & Responsible Manager -->
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 pt-1">
|
|
<div class="flex flex-col gap-1.5">
|
|
<label class="font-label-bold text-xs text-on-surface">
|
|
托管服务生效起始日 <span class="text-status-error">*</span>
|
|
</label>
|
|
<input class="w-full px-3 py-2 rounded-lg bg-slate-50/70 border border-slate-200 font-data-mono text-xs text-on-surface focus:outline-none focus:bg-white focus:border-primary transition-all" type="date" value="2025-01-01"/>
|
|
</div>
|
|
<div class="flex flex-col gap-1.5">
|
|
<label class="font-label-bold text-xs text-on-surface">
|
|
托管服务协议终止日 <span class="text-status-error">*</span>
|
|
</label>
|
|
<input class="w-full px-3 py-2 rounded-lg bg-slate-50/70 border border-slate-200 font-data-mono text-xs text-on-surface focus:outline-none focus:bg-white focus:border-primary transition-all" type="date" value="2027-12-31"/>
|
|
</div>
|
|
<div class="flex flex-col gap-1.5">
|
|
<label class="font-label-bold text-xs text-on-surface">
|
|
鑫潼责任客户经理 <span class="text-status-error">*</span>
|
|
</label>
|
|
<div class="relative flex items-center">
|
|
<select class="w-full px-3 py-2 rounded-lg bg-slate-50/70 border border-slate-200 text-xs text-on-surface appearance-none focus:outline-none focus:bg-white focus:border-primary transition-all">
|
|
<option selected="">张峻 (华中区域大客户一部 · 资深总监)</option>
|
|
<option>孙楚 (工业园区服务专班 · 客户经理)</option>
|
|
<option>郭少峰 (智能配电交付部 · 主管)</option>
|
|
</select>
|
|
<span class="material-symbols-outlined absolute right-2.5 text-slate-400 pointer-events-none text-[18px]">unfold_more</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<!-- Right Column (4 cols): Guiding Rail & Completeness Sidebar -->
|
|
<div class="lg:col-span-4 flex flex-col gap-5 sticky top-20">
|
|
<!-- Card 1: Decoupling Architecture Guide -->
|
|
<div class="bg-surface rounded-xl border border-border-rule shadow-sm p-5 flex flex-col gap-3.5">
|
|
<div class="flex items-center gap-2.5">
|
|
<div class="w-8 h-8 rounded-lg bg-blue-50 text-primary flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-[20px]">account_tree</span>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<h3 class="font-label-bold text-xs font-bold text-on-surface">系统模块解耦指引</h3>
|
|
<span class="font-caption-sm text-[11px] text-slate-400">Decoupled Lifecycle Architecture</span>
|
|
</div>
|
|
</div>
|
|
<div class="p-3 rounded-lg bg-slate-50 border border-slate-200/80 text-xs text-slate-600 leading-relaxed flex items-start gap-2">
|
|
<span class="material-symbols-outlined text-primary text-[17px] shrink-0 mt-0.5">info</span>
|
|
<span>
|
|
本界面<strong>仅负责用电主体工商与基础电气申报资质</strong>。保存后将自动生成全局唯一 <code class="font-data-mono text-primary font-bold bg-white px-1 py-0.5 rounded border border-slate-200">customer_id</code>,后续环节已完全独立解耦:
|
|
</span>
|
|
</div>
|
|
<!-- Sequential decoupled steps -->
|
|
<div class="flex flex-col gap-3 pt-1">
|
|
<!-- Step 1 -->
|
|
<div class="flex gap-2.5 items-start p-2.5 rounded-lg bg-slate-50/60 border border-slate-200/60">
|
|
<div class="w-6 h-6 rounded-full bg-primary text-white font-data-mono text-[11px] flex items-center justify-center font-bold shrink-0 shadow-xs mt-0.5">
|
|
01
|
|
</div>
|
|
<div class="flex flex-col gap-0.5">
|
|
<span class="font-label-bold text-xs text-on-surface">空间拓扑与用电架构搭建</span>
|
|
<p class="font-caption-sm text-[11px] text-slate-500 leading-normal">
|
|
建档完成后即刻引导进入。按厂区/建筑/10kV配电室搭建一次电气单线图与母线拓扑。
|
|
</p>
|
|
<div class="flex items-center gap-1 text-[11px] text-primary font-medium mt-0.5">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-primary"></span>
|
|
<span>建档后首要下一步</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Step 2 -->
|
|
<div class="flex gap-2.5 items-start p-2.5 rounded-lg bg-slate-50/60 border border-slate-200/60">
|
|
<div class="w-6 h-6 rounded-full bg-slate-200 text-slate-600 font-data-mono text-[11px] flex items-center justify-center font-bold shrink-0 mt-0.5">
|
|
02
|
|
</div>
|
|
<div class="flex flex-col gap-0.5">
|
|
<span class="font-label-bold text-xs text-on-surface">大华 ICC 物联网智能接入</span>
|
|
<p class="font-caption-sm text-[11px] text-slate-500 leading-normal">
|
|
在独立的【设备监控】模块指派边缘网关硬件,配置 ICC 专网隧道与通信协议。
|
|
</p>
|
|
<span class="text-[11px] text-slate-400">已完全从当前页面剥离</span>
|
|
</div>
|
|
</div>
|
|
<!-- Step 3 -->
|
|
<div class="flex gap-2.5 items-start p-2.5 rounded-lg bg-slate-50/60 border border-slate-200/60">
|
|
<div class="w-6 h-6 rounded-full bg-slate-200 text-slate-600 font-data-mono text-[11px] flex items-center justify-center font-bold shrink-0 mt-0.5">
|
|
03
|
|
</div>
|
|
<div class="flex flex-col gap-0.5">
|
|
<span class="font-label-bold text-xs text-on-surface">微信小程序权限与人员授权</span>
|
|
<p class="font-caption-sm text-[11px] text-slate-500 leading-normal">
|
|
由【系统管理 > 权限分配】独立派发,指派企业法人、运维电工及主管查看权限。
|
|
</p>
|
|
<span class="text-[11px] text-slate-400">已完全从当前页面剥离</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Card 2: Filing Completeness & Real-time Verification -->
|
|
<div class="bg-surface rounded-xl border border-border-rule shadow-sm p-5 flex flex-col gap-3.5">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-8 h-8 rounded-lg bg-emerald-50 text-emerald-600 flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-[20px]">fact_check</span>
|
|
</div>
|
|
<span class="font-title-sm text-xs font-bold text-on-surface">建档规范与完整度</span>
|
|
</div>
|
|
<span class="font-data-mono text-base text-primary font-bold">85%</span>
|
|
</div>
|
|
<!-- Progress Bar -->
|
|
<div class="flex flex-col gap-1">
|
|
<div class="w-full bg-slate-100 h-2 rounded-full overflow-hidden">
|
|
<div class="bg-primary h-full rounded-full transition-all duration-500" style="width: 85%;"></div>
|
|
</div>
|
|
<div class="flex justify-between font-caption-sm text-[11px] text-slate-400 pt-0.5">
|
|
<span>基础准入阈值: 70%</span>
|
|
<span class="text-emerald-700 font-bold">已达成建档标准</span>
|
|
</div>
|
|
</div>
|
|
<!-- Verification Checklist -->
|
|
<div class="flex flex-col gap-2 pt-1">
|
|
<div class="flex items-center justify-between p-2 rounded-lg bg-slate-50 border border-slate-100">
|
|
<div class="flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-emerald-600 text-[17px]">check_circle</span>
|
|
<span class="text-xs text-slate-700">统一社会信用代码合规</span>
|
|
</div>
|
|
<span class="font-caption-sm text-[11px] text-emerald-700 font-bold">已核验</span>
|
|
</div>
|
|
<div class="flex items-center justify-between p-2 rounded-lg bg-slate-50 border border-slate-100">
|
|
<div class="flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-emerald-600 text-[17px]">check_circle</span>
|
|
<span class="text-xs text-slate-700">电网户号与电压等级匹配</span>
|
|
</div>
|
|
<span class="font-caption-sm text-[11px] text-emerald-700 font-bold">已核验</span>
|
|
</div>
|
|
<div class="flex items-center justify-between p-2 rounded-lg bg-slate-50 border border-slate-100">
|
|
<div class="flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-emerald-600 text-[17px]">check_circle</span>
|
|
<span class="text-xs text-slate-700">变电室规划总数已录入</span>
|
|
</div>
|
|
<span class="font-data-mono text-[11px] text-slate-600">3 处所</span>
|
|
</div>
|
|
<div class="flex items-center justify-between p-2 rounded-lg bg-amber-50/50 border border-amber-100">
|
|
<div class="flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-amber-500 text-[17px]">pending</span>
|
|
<span class="text-xs text-slate-600">托管协议盖章扫描件</span>
|
|
</div>
|
|
<span class="font-caption-sm text-[11px] text-amber-600 font-medium">建档后补录</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Card 3: Quick Input Auxiliary Tools -->
|
|
<div class="bg-surface rounded-xl border border-border-rule shadow-sm p-5 flex flex-col gap-3">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-8 h-8 rounded-lg bg-blue-50 text-primary flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-[20px]">electric_bolt</span>
|
|
</div>
|
|
<span class="font-title-sm text-xs font-bold text-on-surface">快捷输入辅助工具</span>
|
|
</div>
|
|
<div class="flex flex-col gap-2">
|
|
<button class="w-full flex items-center justify-between p-3 rounded-lg border border-slate-200 hover:border-primary hover:bg-blue-50/30 transition-all text-left group" type="button">
|
|
<div class="flex items-center gap-2.5">
|
|
<div class="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center text-primary group-hover:scale-105 transition-transform">
|
|
<span class="material-symbols-outlined text-[19px]">contact_page</span>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<span class="font-label-bold text-xs text-on-surface font-bold">导入企业营业执照副本</span>
|
|
<span class="font-caption-sm text-[11px] text-slate-400">支持 PDF / JPG / PNG 格式解析</span>
|
|
</div>
|
|
</div>
|
|
<span class="material-symbols-outlined text-slate-400 group-hover:text-primary transition-colors text-[17px]">chevron_right</span>
|
|
</button>
|
|
<button class="w-full flex items-center justify-between p-3 rounded-lg border border-slate-200 hover:border-purple-400 hover:bg-purple-50/30 transition-all text-left group" type="button">
|
|
<div class="flex items-center gap-2.5">
|
|
<div class="w-8 h-8 rounded-lg bg-purple-50 flex items-center justify-center text-secondary group-hover:scale-105 transition-transform">
|
|
<span class="material-symbols-outlined text-[19px]">hub</span>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<span class="font-label-bold text-xs text-on-surface font-bold">同步意向客户 (CRM商机)</span>
|
|
<span class="font-caption-sm text-[11px] text-slate-400">转正前期签约备忘录主体</span>
|
|
</div>
|
|
</div>
|
|
<span class="material-symbols-outlined text-slate-400 group-hover:text-secondary transition-colors text-[17px]">chevron_right</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<!-- Sticky Bottom Fixed Action Bar -->
|
|
<div class="fixed bottom-0 left-60 right-0 bg-surface/95 backdrop-blur-md border-t border-border-rule py-3 px-6 flex flex-col sm:flex-row items-center justify-between gap-3 z-40 shadow-[0_-4px_16px_rgba(0,0,0,0.05)]">
|
|
<!-- Left Safety Statement -->
|
|
<div class="flex items-center gap-2 text-slate-500 font-caption-sm text-xs">
|
|
<span class="material-symbols-outlined text-emerald-600 text-[18px]">verified_user</span>
|
|
<span>系统安全声明:基础客户档案录入后将自动生成独立全局 <code class="font-data-mono text-on-surface font-bold">customer_id</code> 并实施行级多租户数据隔离。</span>
|
|
</div>
|
|
<!-- Right Action Buttons -->
|
|
<div class="flex items-center gap-2.5 w-full sm:w-auto justify-end">
|
|
<button class="px-4 py-2 rounded-lg text-slate-600 hover:text-on-surface hover:bg-slate-100 font-label-bold text-xs transition-colors" type="button">
|
|
返回客户列表
|
|
</button>
|
|
<button class="px-4 py-2 rounded-lg border border-slate-200 bg-white hover:bg-slate-50 text-slate-700 font-label-bold text-xs transition-colors shadow-xs" type="button">
|
|
保存为草稿
|
|
</button>
|
|
<button class="flex items-center gap-1.5 px-5 py-2 rounded-lg bg-primary hover:bg-primary-container text-white font-label-bold text-xs transition-all shadow-sm shadow-primary/25" type="button">
|
|
<span>完成建档并进入空间拓扑</span>
|
|
<span class="material-symbols-outlined text-[16px]">arrow_forward</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body></html> |