Files
smart_grid_iot/系统设计/UI/客户档案编辑/code.html
T
andyesfly c60caa4770 refactor(客户管理): 完成客户管理模块UI与架构全面调整
1.  调整菜单与路由:重命名客户信息/客户账号为客户档案管理/客户小程序授权管理,移除客户建筑/房间路由,新增空间拓扑路由
2.  后端新增客户统计接口`/customers/stats`,前端同步API与类型定义
3.  重构客户档案与小程序授权页面,仅保留数据库支持字段,移除无支撑功能
4.  新增空间拓扑页面,合并建筑与房间管理为树形拓扑视图
5.  更新数据库种子数据与权限配置,清理废弃菜单与绑定关系
6.  补充UI设计文档与规范说明
2026-09-09 17:31:24 +08:00

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&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=hankenGrotesk:wght@100..900&amp;family=JetBrains+Mono:wght@400..700&amp;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">
由【系统管理 &gt; 权限分配】独立派发,指派企业法人、运维电工及主管查看权限。
</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>