refactor(客户管理): 完成客户管理模块UI与架构全面调整

1.  调整菜单与路由：重命名客户信息/客户账号为客户档案管理/客户小程序授权管理，移除客户建筑/房间路由，新增空间拓扑路由
2.  后端新增客户统计接口`/customers/stats`，前端同步API与类型定义
3.  重构客户档案与小程序授权页面，仅保留数据库支持字段，移除无支撑功能
4.  新增空间拓扑页面，合并建筑与房间管理为树形拓扑视图
5.  更新数据库种子数据与权限配置，清理废弃菜单与绑定关系
6.  补充UI设计文档与规范说明

系统设计/UI/客户小程序授权管理/DESIGN.md

@@ -0,0 +1,200 @@
+---
+name: Industrial Precision
+colors:
+  surface: '#ffffff'
+  surface-dim: '#ccdbf1'
+  surface-bright: '#f8f9ff'
+  surface-container-lowest: '#ffffff'
+  surface-container-low: '#eef4ff'
+  surface-container: '#e5efff'
+  surface-container-high: '#dbe9ff'
+  surface-container-highest: '#d5e4fa'
+  on-surface: '#0d1c2c'
+  on-surface-variant: '#424655'
+  inverse-surface: '#233142'
+  inverse-on-surface: '#e9f1ff'
+  outline: '#727787'
+  outline-variant: '#c2c6d8'
+  surface-tint: '#0056d2'
+  primary: '#0054cd'
+  on-primary: '#ffffff'
+  primary-container: '#136bfb'
+  on-primary-container: '#fefcff'
+  inverse-primary: '#b2c5ff'
+  secondary: '#712ae2'
+  on-secondary: '#ffffff'
+  secondary-container: '#8a4cfc'
+  on-secondary-container: '#fffbff'
+  tertiary: '#00685f'
+  on-tertiary: '#ffffff'
+  tertiary-container: '#008378'
+  on-tertiary-container: '#f4fffc'
+  error: '#ba1a1a'
+  on-error: '#ffffff'
+  error-container: '#ffdad6'
+  on-error-container: '#93000a'
+  primary-fixed: '#dae2ff'
+  primary-fixed-dim: '#b2c5ff'
+  on-primary-fixed: '#001847'
+  on-primary-fixed-variant: '#0040a1'
+  secondary-fixed: '#eaddff'
+  secondary-fixed-dim: '#d2bbff'
+  on-secondary-fixed: '#25005a'
+  on-secondary-fixed-variant: '#5a00c6'
+  tertiary-fixed: '#89f5e7'
+  tertiary-fixed-dim: '#6bd8cb'
+  on-tertiary-fixed: '#00201d'
+  on-tertiary-fixed-variant: '#005049'
+  background: '#f8f9ff'
+  on-background: '#0d1c2c'
+  surface-variant: '#d5e4fa'
+  bg-page: '#eef3f8'
+  text-muted: '#5b6b7e'
+  border-rule: '#dbe4ee'
+  status-warn: '#e0852b'
+  status-error: '#dc2626'
+  accent-subtle: rgba(29,111,255,0.08)
+typography:
+  display-lg:
+    fontFamily: hankenGrotesk
+    fontSize: 32px
+    fontWeight: '700'
+    lineHeight: 40px
+  headline-md:
+    fontFamily: hankenGrotesk
+    fontSize: 23px
+    fontWeight: '700'
+    lineHeight: 28px
+  title-sm:
+    fontFamily: hankenGrotesk
+    fontSize: 17px
+    fontWeight: '700'
+    lineHeight: 24px
+  body-md:
+    fontFamily: hankenGrotesk
+    fontSize: 15px
+    fontWeight: '400'
+    lineHeight: 24px
+  label-bold:
+    fontFamily: hankenGrotesk
+    fontSize: 13px
+    fontWeight: '700'
+    lineHeight: 16px
+  data-mono:
+    fontFamily: jetbrainsMono
+    fontSize: 12px
+    fontWeight: '500'
+    lineHeight: 16px
+  caption-sm:
+    fontFamily: hankenGrotesk
+    fontSize: 12px
+    fontWeight: '700'
+    lineHeight: 14px
+  headline-md-mobile:
+    fontFamily: hankenGrotesk
+    fontSize: 20px
+    fontWeight: '700'
+    lineHeight: 26px
+rounded:
+  sm: 0.25rem
+  DEFAULT: 0.5rem
+  md: 0.75rem
+  lg: 1rem
+  xl: 1.5rem
+  full: 9999px
+spacing:
+  base: 4px
+  xs: 8px
+  sm: 12px
+  md: 16px
+  lg: 24px
+  xl: 40px
+  container-max: 1200px
+  gutter: 16px
+---
+
+## Brand & Style
+
+The design system is engineered for the **Xintong Smart Power Operation Management APP**, targeting power engineers and grid operators. The brand personality is **Professional, Efficient, and Industrial Tech**. It emphasizes reliability through a structured, high-density interface that transforms complex electrical data into actionable insights.
+
+The design style is a blend of **Corporate Modern** and **Information-Dense Minimalism**. It utilizes a "Layered Surface" approach where data is organized into logical card blocks, using subtle elevations and clear semantic color-coding to denote system status. The aesthetic is clean and functional, avoiding decorative elements in favor of technical precision and rapid scanability.
+
+- **Professionalism:** High-contrast typography and a restrained color palette.
+- **Efficiency:** Condensed layouts that prioritize data visualization and task status.
+- **Reliability:** Solid borders, consistent spacing, and clear state indicators.
+
+## Colors
+
+The color architecture is strictly functional, mapping specifically to the operation layers of the power management system. 
+
+- **Primary (Deep Blue):** Reserved for core branding, navigation, and "Client" layer interactions.
+- **Secondary (Purple):** Dedicated to "Gateway" operations and task-specific management.
+- **Tertiary (Teal):** Used for "Service" layer success states and optimized performance indicators.
+- **Neutral (Ink):** Used for primary text to ensure maximum legibility against light surfaces.
+
+**Semantic Usage:**
+- Use **status-warn (Amber)** for non-critical alerts or data synchronization states.
+- Use **status-error (Red)** for critical power failures or permission denials.
+- The **bg-page** provides a soft, low-strain canvas for long-duration monitoring, while **surface** (White) distinguishes interactive cards and data containers.
+
+## Typography
+
+This design system uses **Hanken Grotesk** as the primary typeface for its sharp, contemporary feel that bridges the gap between industrial and tech. **JetBrains Mono** is employed for technical data, device IDs, and numerical values to emphasize the system's engineering DNA.
+
+- **Hierarchy:** Use `display-lg` for dashboard summaries. `title-sm` is the default for card headers.
+- **Data Visualization:** All tabular data and technical strings must use `data-mono` for character alignment and clarity.
+- **Mobile Adaptation:** For mobile screens, headlines should scale down to `headline-md-mobile` to maintain visual balance while preserving authority.
+
+## Layout & Spacing
+
+The layout utilizes a **Flexible Grid System** with a focus on logical grouping through card-based containment.
+
+- **Grid:** A 12-column grid is used for desktop views, transitioning to a single-column stacked layout for mobile.
+- **Rhythm:** An 8px-based spacing scale ensures vertical consistency. Use `lg (24px)` for outer card padding and `md (16px)` for internal element spacing.
+- **Mobile Margins:** Standard mobile side margins are set to `md (16px)` to maximize screen real estate for dense data tables.
+- **Sectioning:** Distinct operational modules should be separated by `xl (40px)` of vertical space to prevent cognitive overload.
+
+## Elevation & Depth
+
+This design system conveys hierarchy through **Tonal Layering** and **Subtle Ambient Shadows**. We avoid heavy skeuomorphism in favor of a "Flat-Plus" approach.
+
+- **Base Layer:** The page background (`bg-page`) sits at the lowest elevation.
+- **Mid Layer (Cards):** UI cards use a white surface with a subtle shadow (`0 4px 14px rgba(0,0,0,.07)`) to appear slightly lifted.
+- **Interactive Layer:** On hover or active state, cards may transition to a higher elevation (`0 8px 28px rgba(0,0,0,.1)`) with a slight upward translation of -2px.
+- **Overlays:** Modals and dropdowns use the highest z-index with a distinct backdrop blur to maintain focus on the task at hand.
+- **Gradients:** Use soft radial gradients in the background (Blue/Purple) to create environmental depth without interfering with content legibility.
+
+## Shapes
+
+The shape language is **Rounded**, balancing industrial rigidity with modern software approachability.
+
+- **Cards & Sections:** Use the standard `rounded-lg (1rem)` for primary containers.
+- **Nodes & Blocks:** Architecture and data nodes use `rounded (0.5rem)` to fit more compactly within layouts.
+- **Interactive Elements:** Buttons and tags use a "Pill-shape" (`rounded-xl` or 999px) to distinguish them from structural containers.
+- **Borders:** Use `1px solid` with the `border-rule` color for most containers. Active states or primary focus areas may increase to `1.5px`.
+
+## Components
+
+**Buttons:**
+- **Primary:** Solid `primary_color` with white text. Pill-shaped.
+- **Secondary:** Transparent with `primary_color` border or subtle purple tint for operation tasks.
+- **Danger:** Solid `status-error` for irreversible actions.
+
+**Cards:**
+- White background, `1px` border-rule, and `rounded-lg` corners. 
+- Headers should have a `18px` internal padding and a bottom border to separate from the content body.
+
+**Input Fields:**
+- Soft white background with `1px` border. 
+- Focused states should use a `primary_color` border with a subtle outer glow.
+
+**Chips & Tags:**
+- Used for status (e.g., "Active", "Offline").
+- Backgrounds should use `8% opacity` versions of the semantic colors (Blue, Green, Red) with bolded text in the 100% opacity color.
+
+**Data Visualization:**
+- Charts should use the primary blue and secondary purple as the main data series colors.
+- Use `data-mono` for all axis labels and tooltips to ensure technical accuracy.
+
+**Status Indicators:**
+- Small `7px` circular dots used within lists or architecture nodes to show real-time connectivity status.

系统设计/UI/客户小程序授权管理/code.html

@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+
+<html lang="zh-CN"><head><meta charset="utf-8"/><meta content="width=device-width, initial-scale=1.0" name="viewport"/><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;display=swap" rel="stylesheet"/><style>@layer base{html,body{margin:0;padding:0;}body{overscroll-behavior:none;}main>:first-child{margin-top:0!important;}main>:last-child{margin-bottom:0!important;}}::-webkit-scrollbar{display:none;}</style><script src="https://cdn.tailwindcss.com"></script><script id="tailwind-config">tailwind.config={"darkMode":"class","theme":{"extend":{"colors":{"secondary-fixed-dim":"#d2bbff","secondary":"#712ae2","secondary-fixed":"#eaddff","on-primary":"#ffffff","surface-container-lowest":"#ffffff","error":"#ba1a1a","on-error":"#ffffff","on-surface":"#0d1c2c","on-primary-fixed-variant":"#0040a1","outline-variant":"#c2c6d8","tertiary-fixed-dim":"#6bd8cb","on-secondary-fixed-variant":"#5a00c6","tertiary-container":"#008378","primary-container":"#136bfb","secondary-container":"#8a4cfc","tertiary":"#00685f","on-tertiary-fixed-variant":"#005049","on-secondary-fixed":"#25005a","surface-container-highest":"#d5e4fa","surface-container-low":"#eef4ff","background":"#f8f9ff","on-error-container":"#93000a","inverse-primary":"#b2c5ff","surface-dim":"#ccdbf1","on-primary-fixed":"#001847","surface-container-high":"#dbe9ff","outline":"#727787","status-warn":"#e0852b","on-secondary":"#ffffff","surface-tint":"#0056d2","bg-page":"#eef3f8","surface-variant":"#d5e4fa","primary":"#0054cd","on-tertiary-container":"#f4fffc","inverse-surface":"#233142","text-muted":"#5b6b7e","on-tertiary":"#ffffff","accent-subtle":"rgba(29,111,255,0.08)","primary-fixed":"#dae2ff","tertiary-fixed":"#89f5e7","surface-bright":"#f8f9ff","on-primary-container":"#fefcff","on-background":"#0d1c2c","primary-fixed-dim":"#b2c5ff","border-rule":"#dbe4ee","status-error":"#dc2626","inverse-on-surface":"#e9f1ff","error-container":"#ffdad6","on-tertiary-fixed":"#00201d","on-secondary-container":"#fffbff","on-surface-variant":"#424655","surface":"#ffffff","surface-container":"#e5efff"},"borderRadius":{"DEFAULT":"0.25rem","lg":"0.5rem","xl":"0.75rem","full":"9999px"},"spacing":{"md":"16px","sm":"12px","xl":"40px","container-max":"1200px","base":"4px","xs":"8px","gutter":"16px","lg":"24px"},"fontFamily":{"body-md":["hankenGrotesk"],"headline-md-mobile":["hankenGrotesk"],"caption-sm":["hankenGrotesk"],"label-bold":["hankenGrotesk"],"headline-md":["hankenGrotesk"],"title-sm":["hankenGrotesk"],"data-mono":["jetbrainsMono"],"display-lg":["hankenGrotesk"]},"fontSize":{"body-md":["15px",{"lineHeight":"24px","fontWeight":"400"}],"headline-md-mobile":["20px",{"lineHeight":"26px","fontWeight":"700"}],"caption-sm":["12px",{"lineHeight":"14px","fontWeight":"700"}],"label-bold":["13px",{"lineHeight":"16px","fontWeight":"700"}],"headline-md":["23px",{"lineHeight":"28px","fontWeight":"700"}],"title-sm":["17px",{"lineHeight":"24px","fontWeight":"700"}],"data-mono":["12px",{"lineHeight":"16px","fontWeight":"500"}],"display-lg":["32px",{"lineHeight":"40px","fontWeight":"700"}]}}}}</script></head><body class="bg-background font-body-md text-body-md text-on-surface antialiased"><aside class="fixed left-0 top-0 h-full w-72 bg-inverse-surface text-inverse-on-surface z-50 flex flex-col justify-between shadow-[0_1px_8px_rgba(0,0,0,0.04)]"><div class="flex flex-col flex-1 min-h-0"><div class="h-16 px-md flex items-center gap-sm bg-inverse-surface"><div class="w-10 h-10 rounded-lg bg-primary flex items-center justify-center text-on-primary shadow-sm"><span class="material-symbols-outlined text-[24px]">bolt</span></div><div class="flex flex-col"><div class="flex items-center gap-xs"><span class="font-headline-md text-headline-md text-white tracking-wide">XT-POWER</span><span class="font-caption-sm text-caption-sm bg-primary px-xs py-0.5 rounded text-white">OS</span></div><span class="font-caption-sm text-caption-sm text-outline-variant tracking-wider">鑫潼智电 · 智能配用电中枢</span></div></div><div class="flex-1 overflow-y-auto px-xs py-md"><nav class="flex flex-col gap-1" data-active-classes="bg-primary text-white font-label-bold rounded-lg shadow-sm"><a class="flex items-center gap-sm px-md py-sm rounded-lg text-outline-variant hover:bg-surface-container-highest/10 hover:text-white transition-colors" data-path="workbench" href="#"><span class="material-symbols-outlined text-[20px]">dashboard</span><span class="font-label-bold text-label-bold">运营工作台</span></a><div class="flex flex-col"><a class="flex items-center justify-between px-md py-sm rounded-lg bg-primary text-white font-label-bold shadow-sm transition-colors" data-path="customer-management" href="#"><div class="flex items-center gap-sm"><span class="material-symbols-outlined text-[20px]">apartment</span><span class="font-label-bold text-label-bold">客户管理</span></div><span class="material-symbols-outlined text-[16px]">expand_more</span></a><div class="flex flex-col ml-lg pl-md mt-1 mb-1 gap-1 border-l border-outline/30"><a class="px-sm py-1.5 rounded text-white font-label-bold text-caption-sm bg-Line truncated
+<!-- Top Navigation Bar & Action Header -->
+<div class="flex flex-col gap-sm mb-lg">
+<!-- Breadcrumb & Architecture Tag -->
+<div class="flex items-center justify-between"><div class="flex items-center gap-xs font-caption-sm text-caption-sm text-text-muted"><span>运营管控体系</span><span class="material-symbols-outlined text-[14px]">chevron_right</span><span>客户管理</span><span class="material-symbols-outlined text-[14px]">chevron_right</span><span class="text-primary font-bold">客户小程序邀请与账号绑定</span></div><div class="flex items-center gap-xs px-sm py-0.5 rounded-full bg-surface-container-high text-on-surface-variant font-data-mono text-data-mono"><span class="w-1.5 h-1.5 rounded-full bg-tertiary"></span><span>Invitation-Token Engine · 72h Dynamic Signed</span></div></div>
+<!-- Page Title & CTA Controls -->
+<div class="flex flex-col md:flex-row md:items-center justify-between gap-md mt-1"><div class="flex flex-col"><div class="flex items-center gap-sm"><h1 class="font-headline-md text-headline-md text-on-surface tracking-tight">客户小程序邀请与账号绑定</h1><span class="px-xs py-0.5 rounded font-data-mono text-caption-sm bg-primary/10 text-primary uppercase font-bold">定向邀请准入制</span></div><p class="font-caption-sm text-caption-sm text-text-muted mt-0.5">基于定向邀请制 · 运营后台生成带签名专属激活链接与二维码 · 客户受邀扫码绑定微信 OpenID 与 customer_id 硬隔离</p></div><div class="flex flex-wrap items-center gap-xs"><button class="flex items-center gap-xs px-md py-2 rounded-full bg-surface-container-low text-on-surface-variant hover:bg-surface-container hover:text-on-surface transition-all font-label-bold text-label-bold shadow-sm" id="btn-export-records" onclick="showToast('正在导出全部有效邀请码、二维码与凭证时效明细清单...')"><span class="material-symbols-outlined text-[18px]">qr_code_scanner</span><span>导出邀请凭证与二维码</span></button><button class="flex items-center gap-xs px-md py-2 rounded-full bg-surface-container text-primary hover:bg-primary/10 transition-all font-label-bold text-label-bold shadow-sm" id="btn-batch-sms" onclick="showToast('已向 27 位待激活受邀客户批量重发短信邀请通知')"><span class="material-symbols-outlined text-[18px]">forward_to_inbox</span><span>批量发送邀请短信</span></button><button class="flex items-center gap-xs px-lg py-2 rounded-full bg-primary text-on-primary hover:bg-primary-container transition-all font-label-bold text-label-bold shadow-sm" id="btn-add-account" onclick="openAccountModal()"><span class="material-symbols-outlined text-[18px]">share</span><span>发起客户邀请 (Generate Invitation)</span></button></div></div>
+<!-- Guiding Protocol Banner -->
+<div class="mt-2 p-md rounded-lg bg-surface-container-low flex items-start gap-md shadow-sm"><div class="w-9 h-9 rounded-lg bg-primary/10 flex items-center justify-center text-primary shrink-0"><span class="material-symbols-outlined text-[22px]">mark_email_read</span></div><div class="flex-1 min-w-0"><div class="flex items-center gap-xs"><span class="font-label-bold text-label-bold text-on-surface">严格实行定向邀请制安全机制 (客户小程序不设公开注册)</span><span class="px-1.5 py-0.2 rounded font-data-mono text-[10px] bg-tertiary-container/10 text-tertiary font-bold">一客一码防冒领</span></div><p class="font-body-md text-body-md text-text-muted mt-0.5 leading-relaxed text-sm">运营方通过录入托管客户单位、受邀人姓名与联系手机发起邀请，系统自动生成具 72 小时安全签名的专属激活链接与小程序太阳码。受邀客户微信扫码授权或点击短信链接后，平台秒级完成 <code class="font-data-mono text-data-mono bg-surface px-1 py-0.5 rounded text-primary">customer_id</code> 逻辑租户隔离与 OpenID 唯一映射，未经邀请的外部人员无法接入。</p></div><div class="hidden lg:flex flex-col gap-1 shrink-0 font-data-mono text-data-mono text-right text-text-muted"><div class="flex items-center justify-end gap-1.5"><span class="px-2 py-0.5 rounded bg-tertiary/10 text-tertiary font-bold text-[11px] flex items-center gap-1"><span class="w-1.5 h-1.5 rounded-full bg-tertiary"></span>72小时凭证时效</span><span class="px-2 py-0.5 rounded bg-primary/10 text-primary font-bold text-[11px]">端上免复杂配置</span></div><div class="text-[11px] text-text-muted">支持未激活一键重发 · 随时作废失效</div></div></div>
+</div>
+<!-- KPI Metric Strip (4 Cards) -->
+<div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-md mb-lg"><!-- KPI 1 --><div class="p-lg rounded-lg bg-surface shadow-sm flex flex-col justify-between relative overflow-hidden group hover:shadow-md transition-shadow"><div class="flex items-center justify-between"><span class="font-label-bold text-label-bold text-text-muted">已发出邀请总数</span><div class="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center text-primary"><span class="material-symbols-outlined text-[20px]">outgoing_mail</span></div></div><div class="mt-md flex items-baseline gap-xs"><span class="font-display-lg text-display-lg text-on-surface tracking-tight font-bold">216</span><span class="font-caption-sm text-caption-sm text-text-muted">人次邀请</span></div><div class="mt-sm flex items-center justify-between font-caption-sm text-caption-sm text-text-muted"><span>覆盖托管客户单位</span><span class="font-data-mono text-data-mono font-bold text-on-surface">128 家</span></div><div class="w-full bg-surface-container h-1 rounded-full mt-xs overflow-hidden"><div class="bg-primary h-full rounded-full" style="width: 100%"></div></div></div><!-- KPI 2 --><div class="p-lg rounded-lg bg-surface shadow-sm flex flex-col justify-between relative overflow-hidden group hover:shadow-md transition-shadow"><div class="flex items-center justify-between"><span class="font-label-bold text-label-bold text-text-muted">已接受邀请并绑定微信</span><div class="w-8 h-8 rounded-lg bg-tertiary/10 flex items-center justify-center text-tertiary"><span class="material-symbols-outlined text-[20px]">verified_user</span></div></div><div class="mt-md flex items-baseline gap-xs"><span class="font-display-lg text-display-lg text-tertiary tracking-tight font-bold">189</span><span class="font-caption-sm text-caption-sm text-text-muted">人成功受邀</span></div><div class="mt-sm flex items-center justify-between font-caption-sm text-caption-sm text-text-muted"><span>微信 OpenID 绑定率</span><span class="font-data-mono text-data-mono font-bold text-tertiary">87.5%</span></div><div class="w-full bg-surface-container h-1 rounded-full mt-xs overflow-hidden"><div class="bg-tertiary h-full rounded-full" style="width: 87.5%"></div></div></div><!-- KPI 3 --><div class="p-lg rounded-lg bg-surface shadow-sm flex flex-col justify-between relative overflow-hidden group hover:shadow-md transition-shadow"><div class="flex items-center justify-between"><span class="font-label-bold text-label-bold text-text-muted">待扫码激活 / 邀请中</span><div class="w-8 h-8 rounded-lg bg-status-warn/10 flex items-center justify-center text-status-warn"><span class="material-symbols-outlined text-[20px]">hourglass_top</span></div></div><div class="mt-md flex items-baseline gap-xs"><span class="font-display-lg text-display-lg text-status-warn tracking-tight font-bold">27</span><span class="font-caption-sm text-caption-sm text-text-muted">人待激活</span></div><div class="mt-sm flex items-center justify-between font-caption-sm text-caption-sm"><span class="text-text-muted"><span class="text-status-warn font-bold">5人</span> 凭证即将超期</span><button class="text-primary font-bold hover:underline" onclick="showToast('已向5位即将超期客户发送催办提醒')">批量催办</button></div><div class="w-full bg-surface-container h-1 rounded-full mt-xs overflow-hidden"><div class="bg-status-warn h-full rounded-full" style="width: 12.5%"></div></div></div><!-- KPI 4 --><div class="p-lg rounded-lg bg-surface shadow-sm flex flex-col justify-between relative overflow-hidden group hover:shadow-md transition-shadow"><div class="flex items-center justify-between"><span class="font-label-bold text-label-bold text-text-muted">已失效 / 已撤回邀请</span><div class="w-8 h-8 rounded-lg bg-outline/10 flex items-center justify-center text-outline"><span class="material-symbols-outlined text-[20px]">cancel_presentation</span></div></div><div class="mt-md flex items-baseline gap-xs"><span class="font-display-lg text-display-lg text-text-muted tracking-tight font-bold">8</span><span class="font-caption-sm text-caption-sm text-text-muted">条失效凭证</span></div><div class="mt-sm flex items-center justify-between font-caption-sm text-caption-sm text-text-muted"><span>超期自动阻断率</span><span class="font-data-mono text-data-mono font-bold text-text-muted">100%</span></div><div class="w-full bg-surface-container h-1 rounded-full mt-xs overflow-hidden"><div class="bg-outline/40 h-full rounded-full" style="width: 100%"></div></div></div></div>
+<!-- Main Workstation Layout: Left Filtering & Accounts Table, Right Detail Drawer/Drawer Shell -->
+<div class="flex flex-col gap-md">
+<!-- Multi-dimensional Filter Bar -->
+<div class="p-md rounded-lg bg-surface shadow-sm flex flex-col md:flex-row md:items-center justify-between gap-md"><div class="flex flex-wrap items-center gap-sm flex-1"><div class="relative min-w-[220px]"><select class="w-full pl-sm pr-8 py-2 rounded-lg bg-background text-body-md font-body-md text-on-surface appearance-none focus:outline-none focus:border-primary border border-border-rule" id="filter-client"><option value="ALL">全部托管客户 (128家)</option><option value="WH_EDU_01">武汉软件工程职业学院</option><option value="WH_HOSP_01">武汉市第一人民医院</option><option value="OPTICS_PARK_04">光谷生物城创新基地</option><option value="HSR_STATION_E">武汉高铁东站枢纽</option></select><span class="material-symbols-outlined absolute right-2 top-1/2 -translate-y-1/2 text-text-muted pointer-events-none text-[18px]">unfold_more</span></div><div class="relative min-w-[180px]"><select class="w-full pl-sm pr-8 py-2 rounded-lg bg-background text-body-md font-body-md text-on-surface appearance-none focus:outline-none focus:border-primary border border-border-rule" id="filter-status"><option value="ALL">全部邀请状态</option><option value="PENDING">待微信扫码激活 (27)</option><option value="BOUND">已绑定正常运行 (189)</option><option value="EXPIRED">邀请凭证已过期 (5)</option><option value="REVOKED">已作废 / 已解绑 (3)</option></select><span class="material-symbols-outlined absolute right-2 top-1/2 -translate-y-1/2 text-text-muted pointer-events-none text-[18px]">unfold_more</span></div><div class="relative flex-1 min-w-[240px]"><span class="material-symbols-outlined absolute left-2.5 top-1/2 -translate-y-1/2 text-text-muted text-[18px]">search</span><input class="w-full pl-8 pr-sm py-2 rounded-lg bg-background text-body-md font-body-md text-on-surface placeholder:text-text-muted focus:outline-none focus:border-primary border border-border-rule" placeholder="输入受邀人姓名、手机号、邀请凭证号或单位检索..." type="text"/></div></div><div class="flex items-center gap-xs shrink-0"><button class="px-md py-2 rounded-lg bg-surface-container text-on-surface-variant font-label-bold text-caption-sm hover:bg-surface-container-high transition-colors" onclick="showToast('已重置筛选条件')">重置</button><button class="px-lg py-2 rounded-lg bg-primary text-on-primary font-label-bold text-caption-sm hover:bg-primary-container transition-colors shadow-sm" onclick="showToast('已按当前条件刷新邀请记录')">查询</button></div></div>
+<!-- Account Table Card (Full Width Ant-Design style) -->
+<div class="rounded-lg bg-surface shadow-sm overflow-hidden flex flex-col border border-border-rule/40">
+<!-- Table Header Info Bar -->
+<div class="p-md bg-surface-container-low/40 flex items-center justify-between border-b border-border-rule/40"><div class="flex items-center gap-sm"><span class="font-title-sm text-title-sm text-on-surface">受邀客户名单与微信绑定凭证台账</span><span class="px-2 py-0.5 rounded-full font-data-mono text-caption-sm bg-primary/10 text-primary font-bold">共 216 项邀请记录</span><span class="text-caption-sm text-text-muted hidden sm:inline-block">（凭证均含数字防伪签名，扫码自动绑定 customer_id 隔离空间）</span></div><div class="flex items-center gap-xs font-caption-sm text-text-muted"><span class="w-2 h-2 rounded-full bg-tertiary"></span><span class="font-data-mono">邀请制数字签名链正常</span></div></div>
+<!-- Table Content -->
+<div class="overflow-x-auto">
+<table class="w-full text-left border-collapse"><thead><tr class="bg-surface-container-low/60 font-caption-sm text-caption-sm text-text-muted tracking-wide border-b border-border-rule/40"><th class="py-sm px-md font-bold">所属托管客户单位</th><th class="py-sm px-md font-bold">受邀人姓名与联系手机</th><th class="py-sm px-md font-bold">业务角色 / 岗位</th><th class="py-sm px-md font-bold">邀请方式与凭证状态</th><th class="py-sm px-md font-bold">微信绑定状态</th><th class="py-sm px-md font-bold">账号状态</th><th class="py-sm px-md font-bold">邀请 / 绑定时间</th><th class="py-sm px-md font-bold text-right">操作</th></tr></thead><tbody class="divide-y divide-border-rule/40 font-body-md text-body-md text-on-surface"><!-- Row 1: Bound User --><tr class="hover:bg-surface-container-low/50 transition-colors group"><td class="py-md px-md"><div class="flex flex-col"><span class="font-label-bold text-label-bold text-on-surface">武汉软件工程职业学院</span><span class="font-data-mono text-[11px] text-text-muted">ID: WH_EDU_01 · 高校科研</span></div></td><td class="py-md px-md"><div class="flex items-center gap-sm"><div class="w-8 h-8 rounded-full bg-primary/10 text-primary flex items-center justify-center font-bold text-sm">德</div><div class="flex flex-col"><span class="font-label-bold text-label-bold text-on-surface">张德全</span><span class="font-data-mono text-data-mono text-text-muted">139-8821-9901</span></div></div></td><td class="py-md px-md"><span class="px-2 py-0.5 rounded font-caption-sm text-caption-sm bg-surface-container text-on-surface-variant font-medium">总务处主任 / 负责人</span></td><td class="py-md px-md"><div class="flex flex-col"><span class="font-caption-sm text-caption-sm text-on-surface flex items-center gap-1"><span class="material-symbols-outlined text-[15px] text-tertiary">qr_code_2</span>扫码激活成功</span><span class="font-data-mono text-[11px] text-text-muted">凭证号: INV-EDU-9901</span></div></td><td class="py-md px-md"><div class="flex items-center gap-xs"><span class="w-1.5 h-1.5 rounded-full bg-tertiary"></span><span class="font-label-bold text-label-bold text-tertiary">已绑定</span><span class="text-text-muted font-caption-sm text-caption-sm">(德全-后勤)</span></div></td><td class="py-md px-md"><span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full font-caption-sm text-caption-sm bg-tertiary/10 text-tertiary font-bold"><span class="w-1.5 h-1.5 rounded-full bg-tertiary"></span>正常</span></td><td class="py-md px-md font-data-mono text-caption-sm text-text-muted"><div>发: 03-22 09:15</div><div class="text-tertiary">绑: 03-22 09:30</div></td><td class="py-md px-md text-right"><div class="flex items-center justify-end gap-xs"><button class="px-2 py-1 rounded hover:bg-surface-container text-primary font-label-bold text-caption-sm transition-colors" onclick="showInvitePreviewModal('张德全', '139-8821-9901', '武汉软件工程职业学院', 'INV-EDU-9901', '已核销已绑定')">查看凭证</button><button class="px-2 py-1 rounded hover:bg-surface-container text-on-surface-variant font-label-bold text-caption-sm transition-colors" onclick="openAccountModal('武汉软件工程职业学院', '张德全', '139-8821-9901', '总务处主任 / 负责人')">重新邀请</button><button class="px-2 py-1 rounded hover:bg-status-error/10 text-status-error font-label-bold text-caption-sm transition-colors" onclick="showToast('已解除张德全的微信关联并重置邀请凭证')">解绑微信</button></div></td></tr><!-- Row 2: Hospital Lead (Bound) --><tr class="hover:bg-surface-container-low/50 transition-colors group"><td class="py-md px-md"><div class="flex flex-col"><span class="font-label-bold text-label-bold text-on-surface">武汉市第一人民医院</span><span class="font-data-mono text-[11px] text-text-muted">ID: WH_HOSP_01 · 三甲医疗</span></div></td><td class="py-md px-md"><div class="flex items-center gap-sm"><div class="w-8 h-8 rounded-full bg-secondary/10 text-secondary flex items-center justify-center font-bold text-sm">李</div><div class="flex flex-col"><span class="font-label-bold text-label-bold text-on-surface">李晓明</span><span class="font-data-mono text-data-mono text-text-muted">135-4491-0283</span></div></div></td><td class="py-md px-md"><span class="px-2 py-0.5 rounded font-caption-sm text-caption-sm bg-surface-container text-on-surface-variant font-medium">动力科班长 / 运维主管</span></td><td class="py-md px-md"><div class="flex flex-col"><span class="font-caption-sm text-caption-sm text-on-surface flex items-center gap-1"><span class="material-symbols-outlined text-[15px] text-tertiary">sms</span>短信专属链接</span><span class="font-data-mono text-[11px] text-text-muted">凭证号: INV-HOSP-0283</span></div></td><td class="py-md px-md"><div class="flex items-center gap-xs"><span class="w-1.5 h-1.5 rounded-full bg-tertiary"></span><sLine truncated
+</div>
+<!-- Table Pagination -->
+<div class="p-md bg-surface-container-low/40 flex flex-col sm:flex-row items-center justify-between gap-sm border-t border-border-rule/40">
+<div class="font-caption-sm text-caption-sm text-text-muted">
+        显示第 1 至 5 条，共计 <span class="font-data-mono font-bold text-on-surface">216</span> 条小程序客户记录
+      </div>
+<div class="flex items-center gap-1">
+<button class="w-7 h-7 rounded flex items-center justify-center bg-surface hover:bg-surface-container text-text-muted shadow-sm border border-border-rule/40">
+<span class="material-symbols-outlined text-[16px]">chevron_left</span>
+</button>
+<button class="w-7 h-7 rounded flex items-center justify-center bg-primary text-on-primary font-data-mono text-caption-sm font-bold shadow-sm">1</button>
+<button class="w-7 h-7 rounded flex items-center justify-center bg-surface hover:bg-surface-container text-on-surface font-data-mono text-caption-sm shadow-sm border border-border-rule/40">2</button>
+<button class="w-7 h-7 rounded flex items-center justify-center bg-surface hover:bg-surface-container text-on-surface font-data-mono text-caption-sm shadow-sm border border-border-rule/40">3</button>
+<span class="px-1 text-text-muted">...</span>
+<button class="w-7 h-7 rounded flex items-center justify-center bg-surface hover:bg-surface-container text-on-surface font-data-mono text-caption-sm shadow-sm border border-border-rule/40">44</button>
+<button class="w-7 h-7 rounded flex items-center justify-center bg-surface hover:bg-surface-container text-text-muted shadow-sm border border-border-rule/40">
+<span class="material-symbols-outlined text-[16px]">chevron_right</span>
+</button>
+</div>
+</div>
+</div>
+<!-- Simplified Modal for Add/Edit Account (Coarse-Grained customer_id scoping) -->
+<div class="fixed inset-0 z-50 flex items-center justify-center bg-inverse-surface/40 backdrop-blur-sm hidden" id="account-edit-modal"><div class="w-full max-w-2xl bg-surface rounded-xl shadow-xl overflow-hidden border border-border-rule/50 mx-4"><!-- Modal Header --><div class="px-lg py-md bg-surface-container-low flex items-center justify-between border-b border-border-rule/40"><div class="flex items-center gap-sm"><div class="w-8 h-8 rounded-lg bg-primary/10 text-primary flex items-center justify-center"><span class="material-symbols-outlined text-[20px]">forward_to_inbox</span></div><div class="flex flex-col"><h3 class="font-title-sm text-title-sm text-on-surface" id="modal-title">发起客户小程序定向邀请</h3><span class="font-caption-sm text-caption-sm text-text-muted">后台录入单位与联系人 · 生成专属扫码凭证绑定微信</span></div></div><button class="p-1 rounded-lg text-text-muted hover:text-on-surface hover:bg-surface-container transition-colors" onclick="closeAccountModal()"><span class="material-symbols-outlined text-[20px]">close</span></button></div><!-- Modal Body --><div class="p-lg flex flex-col gap-md"><!-- Process Steps Breadcrumb --><div class="p-sm rounded-lg bg-surface-container-low/60 border border-border-rule/40"><div class="grid grid-cols-4 gap-2 text-center text-caption-sm"><div class="flex flex-col items-center gap-1"><span class="w-5 h-5 rounded-full bg-primary text-white flex items-center justify-center font-bold text-[11px]">1</span><span class="font-bold text-primary">录入客户单位</span></div><div class="flex flex-col items-center gap-1"><span class="w-5 h-5 rounded-full bg-surface-container text-on-surface-variant flex items-center justify-center font-bold text-[11px]">2</span><span class="text-text-muted">生成带签名凭证</span></div><div class="flex flex-col items-center gap-1"><span class="w-5 h-5 rounded-full bg-surface-container text-on-surface-variant flex items-center justify-center font-bold text-[11px]">3</span><span class="text-text-muted">短信/二维码通知</span></div><div class="flex flex-col items-center gap-1"><span class="w-5 h-5 rounded-full bg-surface-container text-on-surface-variant flex items-center justify-center font-bold text-[11px]">4</span><span class="text-text-muted">扫码秒级开通</span></div></div></div><!-- Customer ID Assignment --><div class="flex flex-col gap-1"><label class="font-label-bold text-caption-sm text-on-surface flex items-center gap-1"><span>受邀客户归属用电单位</span><span class="text-status-error">*</span></label><div class="relative"><select class="w-full pl-sm pr-8 py-2 rounded-lg bg-background text-body-md font-body-md text-on-surface appearance-none focus:outline-none focus:border-primary border border-border-rule" id="modal-input-org"><option value="WH_EDU_01">武汉软件工程职业学院 (WH_EDU_01)</option><option value="WH_HOSP_01">武汉市第一人民医院 (WH_HOSP_01)</option><option value="OPTICS_PARK_04">光谷生物城创新基地 (OPTICS_PARK_04)</option><option value="HSR_STATION_E">武汉高铁东站枢纽 (HSR_STATION_E)</option></select><span class="material-symbols-outlined absolute right-2 top-1/2 -translate-y-1/2 text-text-muted pointer-events-none text-[18px]">unfold_more</span></div><span class="font-caption-sm text-[11px] text-text-muted">受邀人员扫码后将严格绑定该单位的客端数据边界 (customer_id 隔离)。</span></div><!-- User Name & Phone Number --><div class="grid grid-cols-1 sm:grid-cols-2 gap-md"><div class="flex flex-col gap-1"><label class="font-label-bold text-caption-sm text-on-surface flex items-center gap-1"><span>受邀客户联系人</span><span class="text-status-error">*</span></label><input class="w-full px-sm py-2 rounded-lg bg-background text-body-md font-body-md text-on-surface focus:outline-none focus:border-primary border border-border-rule" id="modal-input-name" placeholder="例如：张德全" type="text" value="李晓明"/></div><div class="flex flex-col gap-1"><label class="font-label-bold text-caption-sm text-on-surface flex items-center gap-1"><span>受邀人手机号</span><span class="text-status-error">*</span></label><input class="w-full px-sm py-2 rounded-lg bg-background text-body-md font-body-md text-on-surface focus:outline-none focus:border-primary border border-border-rule font-data-mono" id="modal-input-phone" placeholder="用于下发短信激活链接" type="text" value="135-4491-0283"/></div></div><!-- Role & Token Validity Duration --><div class="grid grid-cols-1 sm:grid-cols-2 gap-md"><div class="flex flex-col gap-1"><label class="font-label-bold text-caption-sm text-on-surface">业务岗位 / 职责备注</label><input class="w-full px-sm py-2 rounded-lg bg-background text-body-md font-body-md text-on-surface focus:outline-none focus:border-primary border border-border-rule" id="modal-input-role" placeholder="例如：动力科班长 / 总务主任" type="text" value="动力科班Line truncated
+</div>
+<!-- Notification Toast Modal Simulation Container (Dynamic via JS) -->
+<div class="fixed bottom-6 right-6 z-50 transform translate-y-20 opacity-0 transition-all duration-300 pointer-events-none" id="toast-message">
+<div class="px-md py-sm rounded-lg bg-inverse-surface text-inverse-on-surface shadow-xl flex items-center gap-sm">
+<span class="material-symbols-outlined text-tertiary-fixed text-[20px]">check_circle</span>
+<span class="font-body-md text-caption-sm" id="toast-text">授权策略已生效，API网关已同步刷新该OpenID权限缓存。</span>
+</div>
+</div>
+</div>
+<script>
+  // Micro-interaction handlers for client-side feedback
+  function showToast(text) {
+    const toast = document.getElementById('toast-message');
+    const toastText = document.getElementById('toast-text');
+    if (toast && toastText) {
+      toastText.innerText = text;
+      toast.classList.remove('translate-y-20', 'opacity-0', 'pointer-events-none');
+      setTimeout(() => {
+        toast.classList.add('translate-y-20', 'opacity-0', 'pointer-events-none');
+      }, 3200);
+    }
+  }
+
+  function selectAccountForEdit(name, role, phone, org, scope) {
+    const nameEl = document.getElementById('drawer-user-name');
+    const roleEl = document.getElementById('drawer-user-role');
+    const phoneEl = document.getElementById('drawer-user-phone');
+    const orgEl = document.getElementById('drawer-user-org');
+    
+    if (nameEl) nameEl.innerText = name;
+    if (roleEl) roleEl.innerText = role;
+    if (phoneEl) phoneEl.innerText = '关联手机号: ' + phone;
+    if (orgEl) orgEl.innerText = org;
+
+    showToast(`已载入 ${name} (${role}) 的RBAC权限配置`);
+  }
+
+  document.getElementById('btn-save-policy')?.addEventListener('click', () => {
+    showToast('策略保存成功：已热更新 Redis 缓存与 L2 访问契约！');
+  });
+
+  document.getElementById('btn-notify-wechat')?.addEventListener('click', () => {
+    showToast('微信服务号模板消息已推送至用户手机终端！');
+  });
+
+  document.getElementById('btn-batch-sms')?.addEventListener('click', () => {
+    showToast('已向待初登的 27 位客户工程师发送一次性激活凭证短信。');
+  });
+
+  document.getElementById('btn-export-records')?.addEventListener('click', () => {
+    showToast('正在生成客户小程序 RBAC 权限矩阵报告 (.xlsx)...');
+  });
+
+  document.getElementById('btn-add-account')?.addEventListener('click', () => {
+    showToast('已唤起快速新建客户小程序账号向导。');
+  });
+</script></main></div></body></html>

系统设计/UI/客户档案管理/DESIGN.md

@@ -0,0 +1,200 @@
+---
+name: Industrial Precision
+colors:
+  surface: '#ffffff'
+  surface-dim: '#ccdbf1'
+  surface-bright: '#f8f9ff'
+  surface-container-lowest: '#ffffff'
+  surface-container-low: '#eef4ff'
+  surface-container: '#e5efff'
+  surface-container-high: '#dbe9ff'
+  surface-container-highest: '#d5e4fa'
+  on-surface: '#0d1c2c'
+  on-surface-variant: '#424655'
+  inverse-surface: '#233142'
+  inverse-on-surface: '#e9f1ff'
+  outline: '#727787'
+  outline-variant: '#c2c6d8'
+  surface-tint: '#0056d2'
+  primary: '#0054cd'
+  on-primary: '#ffffff'
+  primary-container: '#136bfb'
+  on-primary-container: '#fefcff'
+  inverse-primary: '#b2c5ff'
+  secondary: '#712ae2'
+  on-secondary: '#ffffff'
+  secondary-container: '#8a4cfc'
+  on-secondary-container: '#fffbff'
+  tertiary: '#00685f'
+  on-tertiary: '#ffffff'
+  tertiary-container: '#008378'
+  on-tertiary-container: '#f4fffc'
+  error: '#ba1a1a'
+  on-error: '#ffffff'
+  error-container: '#ffdad6'
+  on-error-container: '#93000a'
+  primary-fixed: '#dae2ff'
+  primary-fixed-dim: '#b2c5ff'
+  on-primary-fixed: '#001847'
+  on-primary-fixed-variant: '#0040a1'
+  secondary-fixed: '#eaddff'
+  secondary-fixed-dim: '#d2bbff'
+  on-secondary-fixed: '#25005a'
+  on-secondary-fixed-variant: '#5a00c6'
+  tertiary-fixed: '#89f5e7'
+  tertiary-fixed-dim: '#6bd8cb'
+  on-tertiary-fixed: '#00201d'
+  on-tertiary-fixed-variant: '#005049'
+  background: '#f8f9ff'
+  on-background: '#0d1c2c'
+  surface-variant: '#d5e4fa'
+  bg-page: '#eef3f8'
+  text-muted: '#5b6b7e'
+  border-rule: '#dbe4ee'
+  status-warn: '#e0852b'
+  status-error: '#dc2626'
+  accent-subtle: rgba(29,111,255,0.08)
+typography:
+  display-lg:
+    fontFamily: hankenGrotesk
+    fontSize: 32px
+    fontWeight: '700'
+    lineHeight: 40px
+  headline-md:
+    fontFamily: hankenGrotesk
+    fontSize: 23px
+    fontWeight: '700'
+    lineHeight: 28px
+  title-sm:
+    fontFamily: hankenGrotesk
+    fontSize: 17px
+    fontWeight: '700'
+    lineHeight: 24px
+  body-md:
+    fontFamily: hankenGrotesk
+    fontSize: 15px
+    fontWeight: '400'
+    lineHeight: 24px
+  label-bold:
+    fontFamily: hankenGrotesk
+    fontSize: 13px
+    fontWeight: '700'
+    lineHeight: 16px
+  data-mono:
+    fontFamily: jetbrainsMono
+    fontSize: 12px
+    fontWeight: '500'
+    lineHeight: 16px
+  caption-sm:
+    fontFamily: hankenGrotesk
+    fontSize: 12px
+    fontWeight: '700'
+    lineHeight: 14px
+  headline-md-mobile:
+    fontFamily: hankenGrotesk
+    fontSize: 20px
+    fontWeight: '700'
+    lineHeight: 26px
+rounded:
+  sm: 0.25rem
+  DEFAULT: 0.5rem
+  md: 0.75rem
+  lg: 1rem
+  xl: 1.5rem
+  full: 9999px
+spacing:
+  base: 4px
+  xs: 8px
+  sm: 12px
+  md: 16px
+  lg: 24px
+  xl: 40px
+  container-max: 1200px
+  gutter: 16px
+---
+
+## Brand & Style
+
+The design system is engineered for the **Xintong Smart Power Operation Management APP**, targeting power engineers and grid operators. The brand personality is **Professional, Efficient, and Industrial Tech**. It emphasizes reliability through a structured, high-density interface that transforms complex electrical data into actionable insights.
+
+The design style is a blend of **Corporate Modern** and **Information-Dense Minimalism**. It utilizes a "Layered Surface" approach where data is organized into logical card blocks, using subtle elevations and clear semantic color-coding to denote system status. The aesthetic is clean and functional, avoiding decorative elements in favor of technical precision and rapid scanability.
+
+- **Professionalism:** High-contrast typography and a restrained color palette.
+- **Efficiency:** Condensed layouts that prioritize data visualization and task status.
+- **Reliability:** Solid borders, consistent spacing, and clear state indicators.
+
+## Colors
+
+The color architecture is strictly functional, mapping specifically to the operation layers of the power management system. 
+
+- **Primary (Deep Blue):** Reserved for core branding, navigation, and "Client" layer interactions.
+- **Secondary (Purple):** Dedicated to "Gateway" operations and task-specific management.
+- **Tertiary (Teal):** Used for "Service" layer success states and optimized performance indicators.
+- **Neutral (Ink):** Used for primary text to ensure maximum legibility against light surfaces.
+
+**Semantic Usage:**
+- Use **status-warn (Amber)** for non-critical alerts or data synchronization states.
+- Use **status-error (Red)** for critical power failures or permission denials.
+- The **bg-page** provides a soft, low-strain canvas for long-duration monitoring, while **surface** (White) distinguishes interactive cards and data containers.
+
+## Typography
+
+This design system uses **Hanken Grotesk** as the primary typeface for its sharp, contemporary feel that bridges the gap between industrial and tech. **JetBrains Mono** is employed for technical data, device IDs, and numerical values to emphasize the system's engineering DNA.
+
+- **Hierarchy:** Use `display-lg` for dashboard summaries. `title-sm` is the default for card headers.
+- **Data Visualization:** All tabular data and technical strings must use `data-mono` for character alignment and clarity.
+- **Mobile Adaptation:** For mobile screens, headlines should scale down to `headline-md-mobile` to maintain visual balance while preserving authority.
+
+## Layout & Spacing
+
+The layout utilizes a **Flexible Grid System** with a focus on logical grouping through card-based containment.
+
+- **Grid:** A 12-column grid is used for desktop views, transitioning to a single-column stacked layout for mobile.
+- **Rhythm:** An 8px-based spacing scale ensures vertical consistency. Use `lg (24px)` for outer card padding and `md (16px)` for internal element spacing.
+- **Mobile Margins:** Standard mobile side margins are set to `md (16px)` to maximize screen real estate for dense data tables.
+- **Sectioning:** Distinct operational modules should be separated by `xl (40px)` of vertical space to prevent cognitive overload.
+
+## Elevation & Depth
+
+This design system conveys hierarchy through **Tonal Layering** and **Subtle Ambient Shadows**. We avoid heavy skeuomorphism in favor of a "Flat-Plus" approach.
+
+- **Base Layer:** The page background (`bg-page`) sits at the lowest elevation.
+- **Mid Layer (Cards):** UI cards use a white surface with a subtle shadow (`0 4px 14px rgba(0,0,0,.07)`) to appear slightly lifted.
+- **Interactive Layer:** On hover or active state, cards may transition to a higher elevation (`0 8px 28px rgba(0,0,0,.1)`) with a slight upward translation of -2px.
+- **Overlays:** Modals and dropdowns use the highest z-index with a distinct backdrop blur to maintain focus on the task at hand.
+- **Gradients:** Use soft radial gradients in the background (Blue/Purple) to create environmental depth without interfering with content legibility.
+
+## Shapes
+
+The shape language is **Rounded**, balancing industrial rigidity with modern software approachability.
+
+- **Cards & Sections:** Use the standard `rounded-lg (1rem)` for primary containers.
+- **Nodes & Blocks:** Architecture and data nodes use `rounded (0.5rem)` to fit more compactly within layouts.
+- **Interactive Elements:** Buttons and tags use a "Pill-shape" (`rounded-xl` or 999px) to distinguish them from structural containers.
+- **Borders:** Use `1px solid` with the `border-rule` color for most containers. Active states or primary focus areas may increase to `1.5px`.
+
+## Components
+
+**Buttons:**
+- **Primary:** Solid `primary_color` with white text. Pill-shaped.
+- **Secondary:** Transparent with `primary_color` border or subtle purple tint for operation tasks.
+- **Danger:** Solid `status-error` for irreversible actions.
+
+**Cards:**
+- White background, `1px` border-rule, and `rounded-lg` corners. 
+- Headers should have a `18px` internal padding and a bottom border to separate from the content body.
+
+**Input Fields:**
+- Soft white background with `1px` border. 
+- Focused states should use a `primary_color` border with a subtle outer glow.
+
+**Chips & Tags:**
+- Used for status (e.g., "Active", "Offline").
+- Backgrounds should use `8% opacity` versions of the semantic colors (Blue, Green, Red) with bolded text in the 100% opacity color.
+
+**Data Visualization:**
+- Charts should use the primary blue and secondary purple as the main data series colors.
+- Use `data-mono` for all axis labels and tooltips to ensure technical accuracy.
+
+**Status Indicators:**
+- Small `7px` circular dots used within lists or architecture nodes to show real-time connectivity status.

系统设计/UI/客户档案管理/code.html

@@ -0,0 +1,177 @@
+<!DOCTYPE html><html lang="zh-CN" style=""><head><meta charset="utf-8"><meta content="width=device-width, initial-scale=1.0" name="viewport"><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;display=swap" rel="stylesheet"><style>@layer base{html,body{margin:0;padding:0;}body{overscroll-behavior:none;}main>:first-child{margin-top:0!important;}main>:last-child{margin-bottom:0!important;}}::-webkit-scrollbar{display:none;}</style><script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script><script id="tailwind-config">tailwind.config={"darkMode":"class","theme":{"extend":{"colors":{"surface-container-low":"#eef4ff","inverse-primary":"#b2c5ff","on-tertiary-fixed":"#00201d","on-error-container":"#93000a","primary":"#0054cd","on-secondary-container":"#fffbff","secondary-fixed-dim":"#d2bbff","on-tertiary-container":"#f4fffc","border-rule":"#dbe4ee","error":"#ba1a1a","surface-bright":"#f8f9ff","on-error":"#ffffff","tertiary-fixed":"#89f5e7","tertiary-container":"#008378","text-muted":"#5b6b7e","outline-variant":"#c2c6d8","inverse-surface":"#233142","surface":"#ffffff","on-primary":"#ffffff","status-error":"#dc2626","on-primary-container":"#fefcff","status-warn":"#e0852b","surface-container":"#e5efff","error-container":"#ffdad6","bg-page":"#eef3f8","primary-fixed":"#dae2ff","on-tertiary":"#ffffff","on-secondary":"#ffffff","tertiary-fixed-dim":"#6bd8cb","surface-variant":"#d5e4fa","on-primary-fixed":"#001847","surface-container-lowest":"#ffffff","on-background":"#0d1c2c","secondary":"#712ae2","on-primary-fixed-variant":"#0040a1","on-tertiary-fixed-variant":"#005049","tertiary":"#00685f","secondary-container":"#8a4cfc","surface-tint":"#0056d2","inverse-on-surface":"#e9f1ff","on-surface":"#0d1c2c","surface-container-high":"#dbe9ff","on-secondary-fixed-variant":"#5a00c6","background":"#f8f9ff","surface-container-highest":"#d5e4fa","primary-fixed-dim":"#b2c5ff","outline":"#727787","secondary-fixed":"#eaddff","accent-subtle":"rgba(29,111,255,0.08)","primary-container":"#136bfb","on-surface-variant":"#424655","surface-dim":"#ccdbf1","on-secondary-fixed":"#25005a"},"borderRadius":{"DEFAULT":"0.25rem","lg":"0.5rem","xl":"0.75rem","full":"9999px"},"spacing":{"gutter":"16px","sm":"12px","base":"4px","xl":"40px","lg":"24px","container-max":"1200px","md":"16px","xs":"8px"},"fontFamily":{"data-mono":["jetbrainsMono"],"headline-md-mobile":["hankenGrotesk"],"body-md":["hankenGrotesk"],"label-bold":["hankenGrotesk"],"display-lg":["hankenGrotesk"],"caption-sm":["hankenGrotesk"],"headline-md":["hankenGrotesk"],"title-sm":["hankenGrotesk"]},"fontSize":{"data-mono":["12px",{"lineHeight":"16px","fontWeight":"500"}],"headline-md-mobile":["20px",{"lineHeight":"26px","fontWeight":"700"}],"body-md":["15px",{"lineHeight":"24px","fontWeight":"400"}],"label-bold":["13px",{"lineHeight":"16px","fontWeight":"700"}],"display-lg":["32px",{"lineHeight":"40px","fontWeight":"700"}],"caption-sm":["12px",{"lineHeight":"14px","fontWeight":"700"}],"headline-md":["23px",{"lineHeight":"28px","fontWeight":"700"}],"title-sm":["17px",{"lineHeight":"24px","fontWeight":"700"}]}}}}</script></head><body class="bg-bg-page font-body-md text-body-md text-on-surface antialiased"><aside class="fixed left-0 top-0 h-full w-64 bg-inverse-surface z-50 flex flex-col justify-between shadow-[0_1px_8px_rgba(0,0,0,0.04)]"><div class="flex flex-col"><div class="h-16 px-md flex items-center gap-xs bg-inverse-surface"><img alt="Xintong Power logo, industrial technology style, electric bolt and smart connectivity icon, professional, modern, high precision, deep blue palette.. Design context: - Primary color: #1d6fff
+- Font: hankenGrotesk
+- Mode: light
+- Roundness: rounded-md
+. The logo should be visually consistent with these brand tokens." class="h-8 w-auto object-contain" src="https://lh3.googleusercontent.com/aida/AEtjO1VpTaoSkZCyImEBOewVJbw8cN4OK_4XN0nYWf-d6prkZBdtwy8_i4RFQPli9kdGdwctP8bUQgQk3yLHoUJzYawS5_rm4a_iDAdFxgEcJm0oLqXiMHJ4KIqg8lTf2EdzS9w08_C-fdfalXZmfY_o9mNwGjr7KB5oPG_MHTU9vVSLrJTz4e0Lv7VNEf16_F81a5fH6QJk6fVBQhWTCesvcyO9LLqZ3nOoMdpFh4_7nHayUU88Ni14Re8Q80c"><div class="flex flex-col ml-xs"><span class="font-label-bold text-label-bold text-inverse-on-surface tracking-wide">鑫潼智电</span><span class="font-caption-sm text-caption-sm text-inverse-primary tracking-wider">XT-POWER OS</span></div></div><nav class="flex flex-col gap-base px-sm pt-md" data-active-classes="bg-primary text-on-primary font-label-bold rounded-lg shadow-sm"><a class="flex items-center gap-sm px-sm py-xs rounded-lg text-inverse-on-surface/80 hover:bg-inverse-surface/80 hover:text-inverse-on-surface transition-colors" data-path="workbench" href="#"><span class="material-symbols-outlined text-[20px]">space_dashboard</span><span class="font-body-md text-body-md">运营工作台</span></a><a aria-current="page" class="flex items-center gap-sm px-sm py-xs transition-colors bg-primary text-on-primary font-label-bold rounded-lg shadow-sm" data-path="customer-management" href="#"><span class="material-symbols-outlined text-[20px]">groups</span><span class="font-body-md text-body-md">客户管理</span></a><a class="flex items-center gap-sm px-sm py-xs rounded-lg text-inverse-on-surface/80 hover:bg-inverse-surface/80 hover:text-inverse-on-surface transition-colors" data-path="project-management" href="#"><span class="material-symbols-outlined text-[20px]">lan</span><span class="font-body-md text-body-md">项目管理</span></a><a class="flex items-center gap-sm px-sm py-xs rounded-lg text-inverse-on-surface/80 hover:bg-inverse-surface/80 hover:text-inverse-on-surface transition-colors" data-path="dispatch-orders" href="#"><span class="material-symbols-outlined text-[20px]">assignment</span><span class="font-body-md text-body-md">运营派单</span></a><a class="flex items-center gap-sm px-sm py-xs rounded-lg text-inverse-on-surface/80 hover:bg-inverse-surface/80 hover:text-inverse-on-surface transition-colors" data-path="device-monitoring" href="#"><span class="material-symbols-outlined text-[20px]">bolt</span><span class="font-body-md text-body-md">设备监控</span></a><a class="flex items-center gap-sm px-sm py-xs rounded-lg text-inverse-on-surface/80 hover:bg-inverse-surface/80 hover:text-inverse-on-surface transition-colors" data-path="statistics-reports" href="#"><span class="material-symbols-outlined text-[20px]">analytics</span><span class="font-body-md text-body-md">统计报表</span></a><a class="flex items-center gap-sm px-sm py-xs rounded-lg text-inverse-on-surface/80 hover:bg-inverse-surface/80 hover:text-inverse-on-surface transition-colors" data-path="system-settings" href="#"><span class="material-symbols-outlined text-[20px]">settings</span><span class="font-body-md text-body-md">系统管理</span></a></nav></div><div class="p-sm m-sm rounded-lg bg-surface-container-low/10 flex flex-col gap-xs"><div class="flex items-center justify-between"><span class="font-caption-sm text-caption-sm text-inverse-on-surface/70">边缘网关通信</span><span class="flex h-2 w-2 relative"><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-tertiary-fixed"></span></span></div><div class="flex items-baseline justify-between"><span class="font-data-mono text-data-mono text-tertiary-fixed">在线 99.98%</span><span class="font-caption-sm text-caption-sm text-inverse-on-surface/50">ICC链路</span></div></div></aside><div class="pl-64"><header class="fixed top-0 left-64 right-0 h-16 bg-surface/95 backdrop-blur-xl shadow-[0_1px_8px_rgba(0,0,0,0.04)] z-40 flex items-center justify-between px-lg"><div class="flex items-center gap-md"><div class="flex items-center gap-xs px-sm py-base rounded-full bg-surface-container-low"><span class="w-2 h-2 rounded-full bg-tertiary"></span><span class="font-caption-sm text-caption-sm text-tertiary">ICC 实时数据同步正常</span></div><div class="relative flex items-center"><span class="material-symbols-outlined absolute left-sm text-text-muted text-[18px]">search</span><input class="w-80 h-9 pl-xl pr-sm rounded-lg bg-surface-container-low text-on-surface placeholder:text-text-muted placeholder:text-[13px] text-body-md outline-none focus:bg-surface focus:shadow-sm transition-all" placeholder="按项目号 / 客户 / 变电站 / 工单号检索..." type="text"></div></div><div class="flex items-center gap-md"><button class="relative flex items-center justify-center w-9 h-9 rounded-lg hover:bg-surface-container-low hover:text-on-surface text-on-surface-variant transition-colors" type="button"><span class="material-symbols-outlined text-[20px]">notificatLine truncated
+<!-- Top Command & KPI Header Section -->
+<div class="px-lg pt-lg pb-lg flex flex-col gap-lg bg-surface/60 backdrop-blur-md">
+<!-- Breadcrumb & Main Actions -->
+<div class="flex flex-wrap items-center justify-between gap-md">
+<div class="flex flex-col">
+<div class="flex items-center gap-xs font-caption-sm text-caption-sm text-text-muted mb-base">
+<span class="">运营管控体系</span>
+<span class="material-symbols-outlined text-[14px]">chevron_right</span>
+<span class="">L3 业务服务层</span>
+<span class="material-symbols-outlined text-[14px]">chevron_right</span>
+<span class="text-primary font-label-bold">客户档案与空间拓扑</span>
+</div>
+<div class="flex items-center gap-sm">
+<h1 class="font-headline-md text-headline-md text-on-surface tracking-tight">客户档案管理</h1>
+<span class="px-2.5 py-1 rounded-full bg-primary/10 text-primary font-data-mono text-data-mono font-medium">Customer Directory &amp; Tenant Topology</span>
+</div>
+<p class="font-body-md text-body-md text-text-muted mt-1.5 max-w-3xl leading-relaxed">
+          集中统管全省电力托管单位、用电建筑空间三级拓扑、大华 ICC 边缘物联网设备映射及终端微信小程序访问权限。
+        </p>
+</div>
+<!-- Action Buttons -->
+<div class="flex items-center gap-sm">
+<button class="h-10 px-md rounded-full bg-surface-container text-on-surface hover:bg-surface-variant font-label-bold text-label-bold flex items-center gap-xs shadow-sm transition-all duration-150" type="button">
+<span class="material-symbols-outlined text-[18px]">file_download</span>
+<span class="">导出客户档案</span>
+</button>
+<button class="h-10 px-md rounded-full bg-surface-container text-primary hover:bg-surface-container-high font-label-bold text-label-bold flex items-center gap-xs shadow-sm transition-all duration-150" type="button">
+<span class="material-symbols-outlined text-[18px] animate-spin" id="syncIcon">sync</span>
+<span class="">从大华 ICC 同步</span>
+</button>
+<button class="h-10 px-lg rounded-full bg-primary hover:bg-primary-container text-on-primary font-label-bold text-label-bold flex items-center gap-xs shadow-md hover:shadow-lg transition-all duration-200" type="button">
+<span class="material-symbols-outlined text-[18px]">add</span>
+<span class="">+ 新增托管客户</span>
+</button>
+</div>
+</div>
+<!-- 4 Industrial Metric KPI Cards -->
+
+<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mt-1"><div class="p-4 rounded-xl bg-surface shadow-sm border border-border-rule/40 flex items-center justify-between"><div class="flex flex-col gap-1"><span class="font-caption-sm text-caption-sm text-text-muted">托管客户总数</span><div class="flex items-baseline gap-2"><span class="font-headline-md text-headline-md font-bold text-on-surface tracking-tight">128</span><span class="font-caption-sm text-caption-sm text-text-muted">家</span></div><div class="flex items-center gap-1 font-caption-sm text-[12px] text-tertiary font-medium"><span class="material-symbols-outlined text-[14px]">trending_up</span><span class="">本月新增 +4 · 覆盖全省 8 地市</span></div></div><div class="w-10 h-10 rounded-xl bg-primary/10 text-primary flex items-center justify-center shrink-0"><span class="material-symbols-outlined text-[22px]">domain</span></div></div><div class="p-4 rounded-xl bg-surface shadow-sm border border-border-rule/40 flex items-center justify-between"><div class="flex flex-col gap-1"><span class="font-caption-sm text-caption-sm text-text-muted">接入智能建筑数</span><div class="flex items-baseline gap-2"><span class="font-headline-md text-headline-md font-bold text-on-surface tracking-tight">342</span><span class="font-caption-sm text-caption-sm text-text-muted">栋</span></div><div class="flex items-center gap-1 font-caption-sm text-[12px] text-text-muted"><span class="material-symbols-outlined text-[14px] text-primary">verified</span><span class="">高校·三甲·园区 100% 空间建模</span></div></div><div class="w-10 h-10 rounded-xl bg-secondary/10 text-secondary flex items-center justify-center shrink-0"><span class="material-symbols-outlined text-[22px]">apartment</span></div></div><div class="p-4 rounded-xl bg-surface shadow-sm border border-border-rule/40 flex items-center justify-between"><div class="flex flex-col gap-1"><span class="font-caption-sm text-caption-sm text-text-muted">监控配电回路</span><div class="flex items-baseline gap-2"><span class="font-headline-md text-headline-md font-bold text-on-surface tracking-tight">3,676</span><span class="font-caption-sm text-caption-sm text-text-muted">路</span></div><div class="flex items-center gap-1 font-caption-sm text-[12px] text-tertiary font-medium"><span class="w-2 h-2 rounded-full bg-tertiary inline-block mr-0.5"></span><span class="">在线监测率 99.1% · 34 闭环</span></div></div><div class="w-10 h-10 rounded-xl bg-tertiary/10 text-tertiary flex items-center justify-center shrink-0"><span class="material-symbols-outlined text-[22px]">bolt</span></div></div><div class="p-4 rounded-xl bg-surface shadow-sm border border-border-rule/40 flex items-center justify-between"><div class="flex flex-col gap-1"><span class="font-caption-sm text-caption-sm text-text-muted">小程序授权客户</span><div class="flex items-baseline gap-2"><span class="font-headline-md text-headline-md font-bold text-on-surface tracking-tight">216</span><span class="font-caption-sm text-caption-sm text-text-muted">人</span></div><div class="flex items-center gap-1 font-caption-sm text-[12px] text-text-muted"><span class="material-symbols-outlined text-[14px] text-secondary">smartphone</span><span class="">7日活跃 189 人 · JWT认证正常</span></div></div><div class="w-10 h-10 rounded-xl bg-surface-container text-on-surface-variant flex items-center justify-center shrink-0"><span class="material-symbols-outlined text-[22px]">group</span></div></div></div></div>
+<!-- Main Work Area (Filter + Split View) -->
+<div class="p-lg flex flex-col gap-lg">
+<!-- Filter Card -->
+<div class="rounded-xl bg-surface p-5 shadow-sm flex flex-col gap-4">
+<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
+<!-- Search Keyword -->
+<div class="flex flex-col gap-1.5">
+<label class="font-caption-sm text-caption-sm text-text-muted">关键词检索</label>
+<div class="relative flex items-center">
+<span class="material-symbols-outlined absolute left-sm text-text-muted text-[18px]">search</span>
+<input class="w-full h-10 pl-xl pr-sm rounded-lg bg-surface-container-low text-on-surface placeholder:text-text-muted text-body-md outline-none focus:ring-1 focus:ring-primary focus:bg-surface transition-all" placeholder="客户名称 / 统一代码 / 负责人" type="text" value="武汉软件工程">
+</div>
+</div>
+<!-- Province / Region Cascader -->
+<div class="flex flex-col gap-1.5">
+<label class="font-caption-sm text-caption-sm text-text-muted">所属行政区划</label>
+<div class="relative flex items-center">
+<span class="material-symbols-outlined absolute left-sm text-text-muted text-[18px]">location_on</span>
+<select class="w-full h-10 pl-xl pr-md rounded-lg bg-surface-container-low text-on-surface text-body-md outline-none appearance-none focus:ring-1 focus:ring-primary">
+<option>全省范围 (湖北省)</option>
+<option selected="">武汉市 · 江夏区</option>
+<option>武汉市 · 洪山区</option>
+<option>武汉市 · 武昌区</option>
+<option>宜昌市 · 西陵区</option>
+<option>襄阳市 · 襄城区</option>
+</select>
+<span class="material-symbols-outlined absolute right-sm text-text-muted pointer-events-none text-[18px]">expand_more</span>
+</div>
+</div>
+<!-- Industry Type -->
+<div class="flex flex-col gap-1.5">
+<label class="font-caption-sm text-caption-sm text-text-muted">行业属性</label>
+<div class="relative flex items-center">
+<span class="material-symbols-outlined absolute left-sm text-text-muted text-[18px]">category</span>
+<select class="w-full h-10 pl-xl pr-md rounded-lg bg-surface-container-low text-on-surface text-body-md outline-none appearance-none focus:ring-1 focus:ring-primary">
+<option>全部行业大类</option>
+<option selected="">教育科研 (高校 / 职业院校)</option>
+<option>医疗卫生 (三甲 / 专科)</option>
+<option>高新产业园 (光谷)</option>
+<option>商业综合体</option>
+<option>党政机关 / 市政公用</option>
+</select>
+<span class="material-symbols-outlined absolute right-sm text-text-muted pointer-events-none text-[18px]">expand_more</span>
+</div>
+</div>
+<!-- Contract Status -->
+<div class="flex flex-col gap-1.5">
+<label class="font-caption-sm text-caption-sm text-text-muted">托管服务状态</label>
+<div class="relative flex items-center">
+<span class="material-symbols-outlined absolute left-sm text-text-muted text-[18px]">verified</span>
+<select class="w-full h-10 pl-xl pr-md rounded-lg bg-surface-container-low text-on-surface text-body-md outline-none appearance-none focus:ring-1 focus:ring-primary">
+<option>全部状态</option>
+<option selected="">正常托管中</option>
+<option>方案施工 / 网关调试</option>
+<option>竣工待验收</option>
+<option>合同即将到期 (30天内)</option>
+</select>
+<span class="material-symbols-outlined absolute right-sm text-text-muted pointer-events-none text-[18px]">expand_more</span>
+</div>
+</div>
+<!-- Sales Rep & Operations -->
+<div class="flex flex-col gap-1.5">
+<label class="font-caption-sm text-caption-sm text-text-muted">责任业务经理</label>
+<div class="relative flex items-center">
+<span class="material-symbols-outlined absolute left-sm text-text-muted text-[18px]">person_pin</span>
+<select class="w-full h-10 pl-xl pr-md rounded-lg bg-surface-container-low text-on-surface text-body-md outline-none appearance-none focus:ring-1 focus:ring-primary">
+<option>全部工程师/业务经理</option>
+<option selected="">陈建军 (业务一部)</option>
+<option>李明 (医疗保障组)</option>
+<option>王工 (园区电务)</option>
+</select>
+<span class="material-symbols-outlined absolute right-sm text-text-muted pointer-events-none text-[18px]">expand_more</span>
+</div>
+</div>
+</div>
+<!-- Action Bottom in Filter -->
+<div class="flex items-center justify-between pt-2 border-t border-border-rule/40 flex-wrap gap-2">
+<div class="flex items-center gap-2 flex-wrap">
+<span class="font-caption-sm text-caption-sm text-text-muted mr-1">快速标签过滤:</span>
+<span class="px-2.5 py-1 rounded-full bg-primary text-on-primary font-caption-sm text-[12px] cursor-pointer whitespace-nowrap shadow-xs">全部重点单位 (48)</span>
+<span class="px-2.5 py-1 rounded-full bg-surface-container text-on-surface-variant hover:bg-surface-variant font-caption-sm text-[12px] cursor-pointer whitespace-nowrap transition-colors">含高压一次配电</span>
+<span class="px-2.5 py-1 rounded-full bg-surface-container text-on-surface-variant hover:bg-surface-variant font-caption-sm text-[12px] cursor-pointer whitespace-nowrap transition-colors">大华边缘网关异常 (0)</span>
+</div>
+<div class="flex items-center gap-sm ml-auto">
+<button class="px-4 py-1.5 rounded-lg bg-surface hover:bg-surface-container-low text-text-muted font-label-bold text-label-bold transition-colors" type="button">重置</button>
+<button class="px-5 py-1.5 rounded-lg bg-primary text-on-primary hover:bg-primary-container font-label-bold text-label-bold flex items-center gap-xs shadow-sm transition-colors" type="button">
+<span class="material-symbols-outlined text-[16px]">tune</span>
+<span class="">查询检索</span>
+</button>
+</div>
+</div>
+</div>
+<!-- Split Master-Detail Layout (Optimized ratio: 69% / 31% on 2xl, 8 cols / 4 cols on xl) -->
+<div class="w-full flex flex-col gap-sm"><div class="bg-surface rounded-xl shadow-sm overflow-hidden flex flex-col"><div class="p-4 bg-surface flex items-center justify-between border-b border-border-rule/50"><div class="flex items-center gap-3"><span class="font-title-sm text-title-sm text-on-surface">托管客户清单</span><span class="px-2 py-0.5 rounded bg-surface-container text-on-surface-variant font-data-mono text-[12px]">共 128 家 / 当前显示 4 家</span></div><div class="flex items-center gap-1.5 text-text-muted"><button class="p-1.5 rounded-lg hover:bg-surface-container-low text-on-surface-variant transition-colors" title="刷新列表"><span class="material-symbols-outlined text-[18px]">refresh</span></button><button class="p-1.5 rounded-lg hover:bg-surface-container-low text-on-surface-variant transition-colors" title="自定义表头列"><span class="material-symbols-outlined text-[18px]">view_column</span></button></div></div><div class="overflow-x-auto"><table class="w-full text-left border-collapse min-w-[760px]"><thead><tr class="bg-surface-container-low/70 text-text-muted font-caption-sm text-caption-sm border-b border-border-rule/40"><th class="py-3.5 px-5 font-semibold w-[26%]">客户主体与性质</th><th class="py-3.5 px-4 font-semibold w-[25%]">建筑/配电拓扑</th><th class="py-3.5 px-4 font-semibold w-[18%]">托管周期 &amp; 费用</th><th class="py-3.5 px-4 font-semibold w-[16%]">ICC设备状态</th><th class="py-3.5 px-5 font-semibold w-[15%] text-right pr-5">空间拓扑与操作</th></tr></thead><tbody class="divide-y divide-border-rule/30 text-body-md text-on-surface"><tr class="bg-surface-container/30 hover:bg-surface-container/60 transition-colors cursor-pointer"><td class="py-4 px-5 align-top"><div class="flex items-start gap-3"><div class="w-10 h-10 rounded-xl bg-primary/10 text-primary flex-shrink-0 flex items-center justify-center"><span class="material-symbols-outlined text-[22px]">school</span></div><div class="flex flex-col gap-1 min-w-0"><div class="flex items-center gap-2 flex-wrap"><span class="font-label-bold text-[14px] text-on-surface hover:text-primary whitespace-nowrap">武汉软件工程职业学院</span><span class="px-2 py-0.5 rounded bg-primary text-on-primary font-caption-sm text-[11px] whitespace-nowrap">A级重要</span></div><span class="font-data-mono text-[12px] text-text-muted">PRJ-HB-WH-00192 · 高教职业本科</span><span class="font-caption-sm text-[12px] text-text-muted flex items-center gap-1"><span class="material-symbols-outlined text-[14px] text-primary/70 shrink-0">place</span><span class="truncate">江夏区藏龙岛科技园光谷大道117号</span></span></div></div></td><td class="py-4 px-4 align-top"><div class="flex flex-col gap-1.5"><div class="flex items-center gap-2"><span class="font-label-bold text-[13px] text-on-surface">5 栋建筑空间</span><span class="px-1.5 py-0.5 bg-surface-container-high rounded text-text-muted font-data-mono text-[11px]">36回路</span></div><span class="font-caption-sm text-[12px] text-text-muted">宿舍楼、实训中心A/B、配电总房</span><div class="flex items-center gap-2 mt-0.5 font-data-mono text-[11px] text-text-muted"><span class="px-1.5 py-0.5 bg-surface-container-low rounded">48台断路器</span><span class="px-1.5 py-0.5 bg-surface-container-low rounded">4台网关</span></div></div></td><td class="py-4 px-4 align-top"><div class="flex flex-col gap-1"><span class="font-data-mono text-label-bold text-on-surface text-[13px]">2024.03 - 2027.03</span><span class="font-caption-sm text-[12px] text-text-muted">3年全托管 · ¥18.6万/年</span><span class="font-caption-sm text-[12px] text-on-surface-variant flex items-center gap-1"><span class="material-symbols-outlined text-[13px] text-text-muted">badge</span><span class="">经理: 陈建军</span></span></div></td><td class="py-4 px-4 align-top"><div class="flex flex-col gap-1"><div class="flex items-center gap-1.5"><span class="w-2 h-2 rounded-full bg-tertiary"></span><span class="font-label-bold text-[12px] text-tertiary whitespace-nowrap">已联通 4/4 台</span></div><span class="font-data-mono text-[11px] text-text-muted">ICC: 192.168.10.88</span><span class="px-2 py-0.5 rounded bg-tertiary/10 text-tertiary font-caption-sm text-[11px] inline-flex items-center w-fit gap-1 mt-1"><span class="w-1.5 h-1.5 rounded-full bg-tertiary"></span><span class="whitespace-nowrap">正常托管中</span></span></div></td><td class="py-4 px-5 align-top text-right"><div class="flex flex-col items-end gap-1.5"><div class="flex items-center gap-1.5"><button class="px-3 py-1.5 rounded-lg bg-primary text-on-primary font-label-bold text-[12px] hover:bg-primary-container shadow-xs whitespace-nowrap transition-colors flex items-center gap-1"><span class="material-symbols-outlined text-[14px]">account_tree</span><span class="">空间拓扑</span></button><button class="px-2.5 py-1.5 rounded-lg bg-surface-container hover:bg-surface-variant teLine truncated
+</div>
+</div>
+<script>
+  function switchTab(tabIndex) {
+    // Buttons styling
+    const tabs = [1, 2, 3];
+    tabs.forEach(i => {
+      const btn = document.getElementById('tabBtn' + i);
+      const content = document.getElementById('tabContent' + i);
+      if (i === tabIndex) {
+        btn.classList.add('text-primary', 'border-primary');
+        btn.classList.remove('text-text-muted', 'border-transparent');
+        content.classList.remove('hidden');
+      } else {
+        btn.classList.remove('text-primary', 'border-primary');
+        btn.classList.add('text-text-muted', 'border-transparent');
+        content.classList.add('hidden');
+      }
+    });
+  }
+
+  function toggleDrawer() {
+    const drawer = document.getElementById('detailDrawer');
+    drawer.scrollIntoView({ behavior: 'smooth', block: 'start' });
+  }
+
+  function selectRow(index) {
+    // Visual feedback micro-interaction
+    const syncIcon = document.getElementById('syncIcon');
+    syncIcon.classList.add('animate-spin');
+    setTimeout(() => {
+      syncIcon.classList.remove('animate-spin');
+    }, 400);
+  }
+</script></main></div>
+
+</body></html>

系统设计/UI/客户档案编辑/DESIGN.md

@@ -0,0 +1,200 @@
+---
+name: Industrial Precision
+colors:
+  surface: '#ffffff'
+  surface-dim: '#ccdbf1'
+  surface-bright: '#f8f9ff'
+  surface-container-lowest: '#ffffff'
+  surface-container-low: '#eef4ff'
+  surface-container: '#e5efff'
+  surface-container-high: '#dbe9ff'
+  surface-container-highest: '#d5e4fa'
+  on-surface: '#0d1c2c'
+  on-surface-variant: '#424655'
+  inverse-surface: '#233142'
+  inverse-on-surface: '#e9f1ff'
+  outline: '#727787'
+  outline-variant: '#c2c6d8'
+  surface-tint: '#0056d2'
+  primary: '#0054cd'
+  on-primary: '#ffffff'
+  primary-container: '#136bfb'
+  on-primary-container: '#fefcff'
+  inverse-primary: '#b2c5ff'
+  secondary: '#712ae2'
+  on-secondary: '#ffffff'
+  secondary-container: '#8a4cfc'
+  on-secondary-container: '#fffbff'
+  tertiary: '#00685f'
+  on-tertiary: '#ffffff'
+  tertiary-container: '#008378'
+  on-tertiary-container: '#f4fffc'
+  error: '#ba1a1a'
+  on-error: '#ffffff'
+  error-container: '#ffdad6'
+  on-error-container: '#93000a'
+  primary-fixed: '#dae2ff'
+  primary-fixed-dim: '#b2c5ff'
+  on-primary-fixed: '#001847'
+  on-primary-fixed-variant: '#0040a1'
+  secondary-fixed: '#eaddff'
+  secondary-fixed-dim: '#d2bbff'
+  on-secondary-fixed: '#25005a'
+  on-secondary-fixed-variant: '#5a00c6'
+  tertiary-fixed: '#89f5e7'
+  tertiary-fixed-dim: '#6bd8cb'
+  on-tertiary-fixed: '#00201d'
+  on-tertiary-fixed-variant: '#005049'
+  background: '#f8f9ff'
+  on-background: '#0d1c2c'
+  surface-variant: '#d5e4fa'
+  bg-page: '#eef3f8'
+  text-muted: '#5b6b7e'
+  border-rule: '#dbe4ee'
+  status-warn: '#e0852b'
+  status-error: '#dc2626'
+  accent-subtle: rgba(29,111,255,0.08)
+typography:
+  display-lg:
+    fontFamily: hankenGrotesk
+    fontSize: 32px
+    fontWeight: '700'
+    lineHeight: 40px
+  headline-md:
+    fontFamily: hankenGrotesk
+    fontSize: 23px
+    fontWeight: '700'
+    lineHeight: 28px
+  title-sm:
+    fontFamily: hankenGrotesk
+    fontSize: 17px
+    fontWeight: '700'
+    lineHeight: 24px
+  body-md:
+    fontFamily: hankenGrotesk
+    fontSize: 15px
+    fontWeight: '400'
+    lineHeight: 24px
+  label-bold:
+    fontFamily: hankenGrotesk
+    fontSize: 13px
+    fontWeight: '700'
+    lineHeight: 16px
+  data-mono:
+    fontFamily: jetbrainsMono
+    fontSize: 12px
+    fontWeight: '500'
+    lineHeight: 16px
+  caption-sm:
+    fontFamily: hankenGrotesk
+    fontSize: 12px
+    fontWeight: '700'
+    lineHeight: 14px
+  headline-md-mobile:
+    fontFamily: hankenGrotesk
+    fontSize: 20px
+    fontWeight: '700'
+    lineHeight: 26px
+rounded:
+  sm: 0.25rem
+  DEFAULT: 0.5rem
+  md: 0.75rem
+  lg: 1rem
+  xl: 1.5rem
+  full: 9999px
+spacing:
+  base: 4px
+  xs: 8px
+  sm: 12px
+  md: 16px
+  lg: 24px
+  xl: 40px
+  container-max: 1200px
+  gutter: 16px
+---
+
+## Brand & Style
+
+The design system is engineered for the **Xintong Smart Power Operation Management APP**, targeting power engineers and grid operators. The brand personality is **Professional, Efficient, and Industrial Tech**. It emphasizes reliability through a structured, high-density interface that transforms complex electrical data into actionable insights.
+
+The design style is a blend of **Corporate Modern** and **Information-Dense Minimalism**. It utilizes a "Layered Surface" approach where data is organized into logical card blocks, using subtle elevations and clear semantic color-coding to denote system status. The aesthetic is clean and functional, avoiding decorative elements in favor of technical precision and rapid scanability.
+
+- **Professionalism:** High-contrast typography and a restrained color palette.
+- **Efficiency:** Condensed layouts that prioritize data visualization and task status.
+- **Reliability:** Solid borders, consistent spacing, and clear state indicators.
+
+## Colors
+
+The color architecture is strictly functional, mapping specifically to the operation layers of the power management system. 
+
+- **Primary (Deep Blue):** Reserved for core branding, navigation, and "Client" layer interactions.
+- **Secondary (Purple):** Dedicated to "Gateway" operations and task-specific management.
+- **Tertiary (Teal):** Used for "Service" layer success states and optimized performance indicators.
+- **Neutral (Ink):** Used for primary text to ensure maximum legibility against light surfaces.
+
+**Semantic Usage:**
+- Use **status-warn (Amber)** for non-critical alerts or data synchronization states.
+- Use **status-error (Red)** for critical power failures or permission denials.
+- The **bg-page** provides a soft, low-strain canvas for long-duration monitoring, while **surface** (White) distinguishes interactive cards and data containers.
+
+## Typography
+
+This design system uses **Hanken Grotesk** as the primary typeface for its sharp, contemporary feel that bridges the gap between industrial and tech. **JetBrains Mono** is employed for technical data, device IDs, and numerical values to emphasize the system's engineering DNA.
+
+- **Hierarchy:** Use `display-lg` for dashboard summaries. `title-sm` is the default for card headers.
+- **Data Visualization:** All tabular data and technical strings must use `data-mono` for character alignment and clarity.
+- **Mobile Adaptation:** For mobile screens, headlines should scale down to `headline-md-mobile` to maintain visual balance while preserving authority.
+
+## Layout & Spacing
+
+The layout utilizes a **Flexible Grid System** with a focus on logical grouping through card-based containment.
+
+- **Grid:** A 12-column grid is used for desktop views, transitioning to a single-column stacked layout for mobile.
+- **Rhythm:** An 8px-based spacing scale ensures vertical consistency. Use `lg (24px)` for outer card padding and `md (16px)` for internal element spacing.
+- **Mobile Margins:** Standard mobile side margins are set to `md (16px)` to maximize screen real estate for dense data tables.
+- **Sectioning:** Distinct operational modules should be separated by `xl (40px)` of vertical space to prevent cognitive overload.
+
+## Elevation & Depth
+
+This design system conveys hierarchy through **Tonal Layering** and **Subtle Ambient Shadows**. We avoid heavy skeuomorphism in favor of a "Flat-Plus" approach.
+
+- **Base Layer:** The page background (`bg-page`) sits at the lowest elevation.
+- **Mid Layer (Cards):** UI cards use a white surface with a subtle shadow (`0 4px 14px rgba(0,0,0,.07)`) to appear slightly lifted.
+- **Interactive Layer:** On hover or active state, cards may transition to a higher elevation (`0 8px 28px rgba(0,0,0,.1)`) with a slight upward translation of -2px.
+- **Overlays:** Modals and dropdowns use the highest z-index with a distinct backdrop blur to maintain focus on the task at hand.
+- **Gradients:** Use soft radial gradients in the background (Blue/Purple) to create environmental depth without interfering with content legibility.
+
+## Shapes
+
+The shape language is **Rounded**, balancing industrial rigidity with modern software approachability.
+
+- **Cards & Sections:** Use the standard `rounded-lg (1rem)` for primary containers.
+- **Nodes & Blocks:** Architecture and data nodes use `rounded (0.5rem)` to fit more compactly within layouts.
+- **Interactive Elements:** Buttons and tags use a "Pill-shape" (`rounded-xl` or 999px) to distinguish them from structural containers.
+- **Borders:** Use `1px solid` with the `border-rule` color for most containers. Active states or primary focus areas may increase to `1.5px`.
+
+## Components
+
+**Buttons:**
+- **Primary:** Solid `primary_color` with white text. Pill-shaped.
+- **Secondary:** Transparent with `primary_color` border or subtle purple tint for operation tasks.
+- **Danger:** Solid `status-error` for irreversible actions.
+
+**Cards:**
+- White background, `1px` border-rule, and `rounded-lg` corners. 
+- Headers should have a `18px` internal padding and a bottom border to separate from the content body.
+
+**Input Fields:**
+- Soft white background with `1px` border. 
+- Focused states should use a `primary_color` border with a subtle outer glow.
+
+**Chips & Tags:**
+- Used for status (e.g., "Active", "Offline").
+- Backgrounds should use `8% opacity` versions of the semantic colors (Blue, Green, Red) with bolded text in the 100% opacity color.
+
+**Data Visualization:**
+- Charts should use the primary blue and secondary purple as the main data series colors.
+- Use `data-mono` for all axis labels and tooltips to ensure technical accuracy.
+
+**Status Indicators:**
+- Small `7px` circular dots used within lists or architecture nodes to show real-time connectivity status.

系统设计/UI/客户档案编辑/code.html

@@ -0,0 +1,788 @@
+<!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>

系统设计/UI/客户档案详情/DESIGN.md

@@ -0,0 +1,200 @@
+---
+name: Industrial Precision
+colors:
+  surface: '#ffffff'
+  surface-dim: '#ccdbf1'
+  surface-bright: '#f8f9ff'
+  surface-container-lowest: '#ffffff'
+  surface-container-low: '#eef4ff'
+  surface-container: '#e5efff'
+  surface-container-high: '#dbe9ff'
+  surface-container-highest: '#d5e4fa'
+  on-surface: '#0d1c2c'
+  on-surface-variant: '#424655'
+  inverse-surface: '#233142'
+  inverse-on-surface: '#e9f1ff'
+  outline: '#727787'
+  outline-variant: '#c2c6d8'
+  surface-tint: '#0056d2'
+  primary: '#0054cd'
+  on-primary: '#ffffff'
+  primary-container: '#136bfb'
+  on-primary-container: '#fefcff'
+  inverse-primary: '#b2c5ff'
+  secondary: '#712ae2'
+  on-secondary: '#ffffff'
+  secondary-container: '#8a4cfc'
+  on-secondary-container: '#fffbff'
+  tertiary: '#00685f'
+  on-tertiary: '#ffffff'
+  tertiary-container: '#008378'
+  on-tertiary-container: '#f4fffc'
+  error: '#ba1a1a'
+  on-error: '#ffffff'
+  error-container: '#ffdad6'
+  on-error-container: '#93000a'
+  primary-fixed: '#dae2ff'
+  primary-fixed-dim: '#b2c5ff'
+  on-primary-fixed: '#001847'
+  on-primary-fixed-variant: '#0040a1'
+  secondary-fixed: '#eaddff'
+  secondary-fixed-dim: '#d2bbff'
+  on-secondary-fixed: '#25005a'
+  on-secondary-fixed-variant: '#5a00c6'
+  tertiary-fixed: '#89f5e7'
+  tertiary-fixed-dim: '#6bd8cb'
+  on-tertiary-fixed: '#00201d'
+  on-tertiary-fixed-variant: '#005049'
+  background: '#f8f9ff'
+  on-background: '#0d1c2c'
+  surface-variant: '#d5e4fa'
+  bg-page: '#eef3f8'
+  text-muted: '#5b6b7e'
+  border-rule: '#dbe4ee'
+  status-warn: '#e0852b'
+  status-error: '#dc2626'
+  accent-subtle: rgba(29,111,255,0.08)
+typography:
+  display-lg:
+    fontFamily: hankenGrotesk
+    fontSize: 32px
+    fontWeight: '700'
+    lineHeight: 40px
+  headline-md:
+    fontFamily: hankenGrotesk
+    fontSize: 23px
+    fontWeight: '700'
+    lineHeight: 28px
+  title-sm:
+    fontFamily: hankenGrotesk
+    fontSize: 17px
+    fontWeight: '700'
+    lineHeight: 24px
+  body-md:
+    fontFamily: hankenGrotesk
+    fontSize: 15px
+    fontWeight: '400'
+    lineHeight: 24px
+  label-bold:
+    fontFamily: hankenGrotesk
+    fontSize: 13px
+    fontWeight: '700'
+    lineHeight: 16px
+  data-mono:
+    fontFamily: jetbrainsMono
+    fontSize: 12px
+    fontWeight: '500'
+    lineHeight: 16px
+  caption-sm:
+    fontFamily: hankenGrotesk
+    fontSize: 12px
+    fontWeight: '700'
+    lineHeight: 14px
+  headline-md-mobile:
+    fontFamily: hankenGrotesk
+    fontSize: 20px
+    fontWeight: '700'
+    lineHeight: 26px
+rounded:
+  sm: 0.25rem
+  DEFAULT: 0.5rem
+  md: 0.75rem
+  lg: 1rem
+  xl: 1.5rem
+  full: 9999px
+spacing:
+  base: 4px
+  xs: 8px
+  sm: 12px
+  md: 16px
+  lg: 24px
+  xl: 40px
+  container-max: 1200px
+  gutter: 16px
+---
+
+## Brand & Style
+
+The design system is engineered for the **Xintong Smart Power Operation Management APP**, targeting power engineers and grid operators. The brand personality is **Professional, Efficient, and Industrial Tech**. It emphasizes reliability through a structured, high-density interface that transforms complex electrical data into actionable insights.
+
+The design style is a blend of **Corporate Modern** and **Information-Dense Minimalism**. It utilizes a "Layered Surface" approach where data is organized into logical card blocks, using subtle elevations and clear semantic color-coding to denote system status. The aesthetic is clean and functional, avoiding decorative elements in favor of technical precision and rapid scanability.
+
+- **Professionalism:** High-contrast typography and a restrained color palette.
+- **Efficiency:** Condensed layouts that prioritize data visualization and task status.
+- **Reliability:** Solid borders, consistent spacing, and clear state indicators.
+
+## Colors
+
+The color architecture is strictly functional, mapping specifically to the operation layers of the power management system. 
+
+- **Primary (Deep Blue):** Reserved for core branding, navigation, and "Client" layer interactions.
+- **Secondary (Purple):** Dedicated to "Gateway" operations and task-specific management.
+- **Tertiary (Teal):** Used for "Service" layer success states and optimized performance indicators.
+- **Neutral (Ink):** Used for primary text to ensure maximum legibility against light surfaces.
+
+**Semantic Usage:**
+- Use **status-warn (Amber)** for non-critical alerts or data synchronization states.
+- Use **status-error (Red)** for critical power failures or permission denials.
+- The **bg-page** provides a soft, low-strain canvas for long-duration monitoring, while **surface** (White) distinguishes interactive cards and data containers.
+
+## Typography
+
+This design system uses **Hanken Grotesk** as the primary typeface for its sharp, contemporary feel that bridges the gap between industrial and tech. **JetBrains Mono** is employed for technical data, device IDs, and numerical values to emphasize the system's engineering DNA.
+
+- **Hierarchy:** Use `display-lg` for dashboard summaries. `title-sm` is the default for card headers.
+- **Data Visualization:** All tabular data and technical strings must use `data-mono` for character alignment and clarity.
+- **Mobile Adaptation:** For mobile screens, headlines should scale down to `headline-md-mobile` to maintain visual balance while preserving authority.
+
+## Layout & Spacing
+
+The layout utilizes a **Flexible Grid System** with a focus on logical grouping through card-based containment.
+
+- **Grid:** A 12-column grid is used for desktop views, transitioning to a single-column stacked layout for mobile.
+- **Rhythm:** An 8px-based spacing scale ensures vertical consistency. Use `lg (24px)` for outer card padding and `md (16px)` for internal element spacing.
+- **Mobile Margins:** Standard mobile side margins are set to `md (16px)` to maximize screen real estate for dense data tables.
+- **Sectioning:** Distinct operational modules should be separated by `xl (40px)` of vertical space to prevent cognitive overload.
+
+## Elevation & Depth
+
+This design system conveys hierarchy through **Tonal Layering** and **Subtle Ambient Shadows**. We avoid heavy skeuomorphism in favor of a "Flat-Plus" approach.
+
+- **Base Layer:** The page background (`bg-page`) sits at the lowest elevation.
+- **Mid Layer (Cards):** UI cards use a white surface with a subtle shadow (`0 4px 14px rgba(0,0,0,.07)`) to appear slightly lifted.
+- **Interactive Layer:** On hover or active state, cards may transition to a higher elevation (`0 8px 28px rgba(0,0,0,.1)`) with a slight upward translation of -2px.
+- **Overlays:** Modals and dropdowns use the highest z-index with a distinct backdrop blur to maintain focus on the task at hand.
+- **Gradients:** Use soft radial gradients in the background (Blue/Purple) to create environmental depth without interfering with content legibility.
+
+## Shapes
+
+The shape language is **Rounded**, balancing industrial rigidity with modern software approachability.
+
+- **Cards & Sections:** Use the standard `rounded-lg (1rem)` for primary containers.
+- **Nodes & Blocks:** Architecture and data nodes use `rounded (0.5rem)` to fit more compactly within layouts.
+- **Interactive Elements:** Buttons and tags use a "Pill-shape" (`rounded-xl` or 999px) to distinguish them from structural containers.
+- **Borders:** Use `1px solid` with the `border-rule` color for most containers. Active states or primary focus areas may increase to `1.5px`.
+
+## Components
+
+**Buttons:**
+- **Primary:** Solid `primary_color` with white text. Pill-shaped.
+- **Secondary:** Transparent with `primary_color` border or subtle purple tint for operation tasks.
+- **Danger:** Solid `status-error` for irreversible actions.
+
+**Cards:**
+- White background, `1px` border-rule, and `rounded-lg` corners. 
+- Headers should have a `18px` internal padding and a bottom border to separate from the content body.
+
+**Input Fields:**
+- Soft white background with `1px` border. 
+- Focused states should use a `primary_color` border with a subtle outer glow.
+
+**Chips & Tags:**
+- Used for status (e.g., "Active", "Offline").
+- Backgrounds should use `8% opacity` versions of the semantic colors (Blue, Green, Red) with bolded text in the 100% opacity color.
+
+**Data Visualization:**
+- Charts should use the primary blue and secondary purple as the main data series colors.
+- Use `data-mono` for all axis labels and tooltips to ensure technical accuracy.
+
+**Status Indicators:**
+- Small `7px` circular dots used within lists or architecture nodes to show real-time connectivity status.

系统设计/UI/客户档案详情/code.html

@@ -0,0 +1,553 @@
+<!DOCTYPE html>
+
+<html lang="zh-CN"><head><meta charset="utf-8"/><meta content="width=device-width, initial-scale=1.0" name="viewport"/><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&display=swap" rel="stylesheet"/><style>@layer base { html, body { margin: 0; padding: 0; } body { overscroll-behavior: none; } main > :first-child { margin-top: 0 !important; } main > :last-child { margin-bottom: 0 !important; } } ::-webkit-scrollbar { display: none; }</style><script src="https://cdn.tailwindcss.com"></script><script id="tailwind-config">tailwind.config = { darkMode: "class", theme: { extend: { "colors": { "bg-page": "#eef3f8", "text-muted": "#5b6b7e", "surface-bright": "#f8f9ff", "primary-fixed-dim": "#b2c5ff", "accent-subtle": "rgba(29,111,255,0.08)", "on-surface-variant": "#424655", "on-surface": "#0d1c2c", "outline": "#727787", "outline-variant": "#c2c6d8", "secondary-fixed": "#eaddff", "status-error": "#dc2626", "on-tertiary-container": "#f4fffc", "inverse-primary": "#b2c5ff", "surface-container-low": "#eef4ff", "on-secondary-container": "#fffbff", "error": "#ba1a1a", "surface-container-high": "#dbe9ff", "on-primary-container": "#fefcff", "on-secondary-fixed": "#25005a", "on-secondary": "#ffffff", "surface-tint": "#0056d2", "inverse-surface": "#233142", "on-tertiary": "#ffffff", "on-secondary-fixed-variant": "#5a00c6", "secondary": "#712ae2", "on-tertiary-fixed-variant": "#005049", "primary-fixed": "#dae2ff", "inverse-on-surface": "#e9f1ff", "on-primary": "#ffffff", "status-warn": "#e0852b", "on-primary-fixed": "#001847", "on-background": "#0d1c2c", "secondary-fixed-dim": "#d2bbff", "surface-dim": "#ccdbf1", "surface-variant": "#d5e4fa", "surface-container": "#e5efff", "on-tertiary-fixed": "#00201d", "tertiary": "#00685f", "primary": "#0054cd", "on-primary-fixed-variant": "#0040a1", "primary-container": "#136bfb", "secondary-container": "#8a4cfc", "background": "#f8f9ff", "surface-container-highest": "#d5e4fa", "tertiary-fixed-dim": "#6bd8cb", "surface": "#ffffff", "on-error": "#ffffff", "surface-container-lowest": "#ffffff", "border-rule": "#dbe4ee", "error-container": "#ffdad6", "tertiary-fixed": "#89f5e7", "on-error-container": "#93000a", "tertiary-container": "#008378" }, "borderRadius": { "DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px" }, "spacing": { "xs": "8px", "md": "16px", "container-max": "1200px", "sm": "12px", "lg": "24px", "base": "4px", "gutter": "16px", "xl": "40px" }, "fontFamily": { "body-md": ["hankenGrotesk"], "headline-md-mobile": ["hankenGrotesk"], "label-bold": ["hankenGrotesk"], "title-sm": ["hankenGrotesk"], "display-lg": ["hankenGrotesk"], "headline-md": ["hankenGrotesk"], "caption-sm": ["hankenGrotesk"], "data-mono": ["jetbrainsMono"] }, "fontSize": { "body-md": ["15px", { "lineHeight": "24px", "fontWeight": "400" }], "headline-md-mobile": ["20px", { "lineHeight": "26px", "fontWeight": "700" }], "label-bold": ["13px", { "lineHeight": "16px", "fontWeight": "700" }], "title-sm": ["17px", { "lineHeight": "24px", "fontWeight": "700" }], "display-lg": ["32px", { "lineHeight": "40px", "fontWeight": "700" }], "headline-md": ["23px", { "lineHeight": "28px", "fontWeight": "700" }], "caption-sm": ["12px", { "lineHeight": "14px", "fontWeight": "700" }], "data-mono": ["12px", { "lineHeight": "16px", "fontWeight": "500" }] } } } }</script></head><body class="bg-bg-page font-body-md text-body-md text-on-surface"><aside class="fixed left-0 top-0 h-full w-64 bg-inverse-surface z-50 flex flex-col justify-between select-none shadow-[0_1px_8px_rgba(0,0,0,0.04)]"><div class="flex flex-col"><div class="h-16 px-md flex items-center gap-sm bg-inverse-surface"><img alt="Xintong Power logo, industrial technology style, electric bolt and smart connectivity icon, professional, modern, high precision, deep blue palette.. Design context: - Primary color: #1d6fff
+- Font: hankenGrotesk
+- Mode: light
+- Roundness: rounded-md
+. The logo should be visually consistent with these brand tokens." class="h-8 w-auto object-contain" src="https://lh3.googleusercontent.com/aida/AEtjO1VpTaoSkZCyImEBOewVJbw8cN4OK_4XN0nYWf-d6prkZBdtwy8_i4RFQPli9kdGdwctP8bUQgQk3yLHoUJzYawS5_rm4a_iDAdFxgEcJm0oLqXiMHJ4KIqg8lTf2EdzS9w08_C-fdfalXZmfY_o9mNwGjr7KB5oPG_MHTU9vVSLrJTz4e0Lv7VNEf16_F81a5fH6QJk6fVBQhWTCesvcyO9LLqZ3nOoMdpFh4_7nHayUU88Ni14Re8Q80c"/><div class="flex flex-col"><span class="font-title-sm text-title-sm text-inverse-on-surface tracking-tight leading-tight">鑫潼智电</span><span class="font-data-mono text-data-mono text-outline tracking-wider">XT-POWER OS</span></div></div><div class="px-md py-xs"><div class="font-caption-sm text-caption-sm text-outline uppercase tracking-wider px-xs py-base">综合运营管控</div></div><nav class="flex flex-col gap-base px-md" data-active-classes="bg-primary text-on-primary font-label-bold rounded-lg shadow-sm"><a aria-current="page" class="flex items-center gap-sm px-md py-xs transition-all group bg-primary text-on-primary font-label-bold rounded-lg shadow-sm" data-path="dashboard" href="#"><span class="material-symbols-outlined text-[20px] transition-transform group-hover:scale-105">monitoring</span><span class="font-body-md text-body-md">运营工作台</span></a><a class="flex items-center gap-sm px-md py-xs rounded-lg text-inverse-on-surface hover:bg-surface-variant hover:text-on-surface transition-all group" data-path="client-management" href="#"><span class="material-symbols-outlined text-[20px] transition-transform group-hover:scale-105">corporate_fare</span><span class="font-body-md text-body-md">客户管理</span></a><a class="flex items-center gap-sm px-md py-xs rounded-lg text-inverse-on-surface hover:bg-surface-variant hover:text-on-surface transition-all group" data-path="project-management" href="#"><span class="material-symbols-outlined text-[20px] transition-transform group-hover:scale-105">lan</span><span class="font-body-md text-body-md">项目管理</span></a><a class="flex items-center gap-sm px-md py-xs rounded-lg text-inverse-on-surface hover:bg-surface-variant hover:text-on-surface transition-all group" data-path="dispatch-orders" href="#"><span class="material-symbols-outlined text-[20px] transition-transform group-hover:scale-105">assignment_turned_in</span><span class="font-body-md text-body-md">运营派单</span></a><a class="flex items-center gap-sm px-md py-xs rounded-lg text-inverse-on-surface hover:bg-surface-variant hover:text-on-surface transition-all group" data-path="device-telemetry" href="#"><span class="material-symbols-outlined text-[20px] transition-transform group-hover:scale-105">precision_manufacturing</span><span class="font-body-md text-body-md">设备监控</span></a><a class="flex items-center gap-sm px-md py-xs rounded-lg text-inverse-on-surface hover:bg-surface-variant hover:text-on-surface transition-all group" data-path="analytics-reports" href="#"><span class="material-symbols-outlined text-[20px] transition-transform group-hover:scale-105">query_stats</span><span class="font-body-md text-body-md">统计报表</span></a><a class="flex items-center gap-sm px-md py-xs rounded-lg text-inverse-on-surface hover:bg-surface-variant hover:text-on-surface transition-all group" data-path="system-settings" href="#"><span class="material-symbols-outlined text-[20px] transition-transform group-hover:scale-105">settings_suggest</span><span class="font-body-md text-body-md">系统管理</span></a></nav></div><div class="p-md m-md rounded-lg bg-surface-variant flex flex-col gap-xs"><div class="flex items-center justify-between"><span class="font-caption-sm text-caption-sm text-on-surface font-bold">边缘网关通信</span><span class="flex h-2 w-2 relative"><span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-tertiary opacity-75"></span><span class="relative inline-flex rounded-full h-2 w-2 bg-tertiary"></span></span></div><div class="flex items-center justify-between font-data-mono text-data-mono text-text-muted"><span>ICC Node #04</span><span>99.98%</span></div></div></aside><div class="pl-64 flex flex-col min-h-screen"><header class="fixed top-0 left-64 right-0 h-16 bg-surface/90 backdrop-blur-xl shadow-[0_1px_8px_rgba(0,0,0,0.04)] z-40 flex items-center justify-between px-lg"><div class="flex items-center gap-md"><div class="flex items-center gap-xs px-sm py-xs rounded-full bg-surface-container"><span class="h-2 w-2 rounded-full bg-tertiary"></span><span class="font-caption-sm text-caption-sm text-on-surface">ICC 实时数据同步正常</span></div><div class="h-4 w-px bg-outline-variant"></div><div class="relative flex items-center"><span class="material-symbols-outlined absolute left-sm text-outline text-[18px]">search</span><input class="w-72 pl-9 pr-md py-xs rounded-lg bg-surface-container-low font-body-md text-body-md text-on-surface placeholder:text-outline focus:outline-none focus:ring-1 focus:ring-primary" placeholder="按项目Line truncated
+<!-- Top Navigation & Header Breadcrumb -->
+<div class="flex flex-col gap-sm mb-lg">
+<div class="flex items-center gap-xs font-caption-sm text-caption-sm text-text-muted">
+<span class="hover:text-primary cursor-pointer transition-colors">运营管控体系</span>
+<span class="material-symbols-outlined text-[14px]">chevron_right</span>
+<span class="hover:text-primary cursor-pointer transition-colors">客户管理</span>
+<span class="material-symbols-outlined text-[14px]">chevron_right</span>
+<span class="hover:text-primary cursor-pointer transition-colors">客户档案列表</span>
+<span class="material-symbols-outlined text-[14px]">chevron_right</span>
+<span class="text-primary font-bold">新增客户档案</span>
+</div>
+<div class="flex flex-col lg:flex-row lg:items-center justify-between gap-md">
+<div class="flex flex-col gap-base">
+<div class="flex items-center gap-sm flex-wrap">
+<h1 class="font-headline-md text-headline-md text-on-surface tracking-tight">新增客户档案</h1>
+<span class="font-data-mono text-data-mono px-xs py-0.5 rounded bg-surface-container-high text-primary font-bold">CREATE CUSTOMER PROFILE</span>
+<span class="flex items-center gap-1 px-sm py-0.5 rounded-full bg-surface-container font-caption-sm text-caption-sm text-tertiary">
+<span class="w-1.5 h-1.5 rounded-full bg-tertiary"></span>
+            架构解耦机制已激活
+          </span>
+</div>
+<p class="font-body-md text-body-md text-text-muted">
+          纯粹客户基础信息建档 · 聚焦主体资质与基础用电参数，后续拓扑与设备配置已完全解耦。
+        </p>
+</div>
+<div class="flex items-center gap-sm flex-wrap">
+<button class="flex items-center gap-xs px-md py-xs rounded-full bg-surface-container-low hover:bg-surface-container text-primary font-label-bold text-label-bold transition-all shadow-sm group" type="button">
+<span class="material-symbols-outlined text-[18px] transition-transform group-hover:scale-110">document_scanner</span>
+<span>导入营业执照智能识别</span>
+</button>
+<button class="flex items-center gap-xs px-md py-xs rounded-full bg-surface-container-low hover:bg-surface-container text-on-surface-variant font-label-bold text-label-bold transition-all shadow-sm" type="button">
+<span class="material-symbols-outlined text-[18px]">sync_alt</span>
+<span>从意向客户导入</span>
+</button>
+<button class="px-md py-xs rounded-full bg-surface text-on-surface hover:bg-surface-container font-label-bold text-label-bold transition-colors shadow-sm" type="button">
+          保存草稿
+        </button>
+<button class="flex items-center gap-xs px-lg py-xs rounded-full bg-primary hover:bg-primary-container text-on-primary font-label-bold text-label-bold transition-all shadow-md shadow-primary/20" type="button">
+<span>完成建档并进入空间拓扑</span>
+<span class="material-symbols-outlined text-[18px]">arrow_forward</span>
+</button>
+</div>
+</div>
+</div>
+<!-- Main Grid: 8:4 Two-column layout -->
+<div class="grid grid-cols-12 gap-lg pb-xl">
+<!-- Left Column: Master Form (8 cols) -->
+<div class="col-span-12 lg:col-span-8 flex flex-col gap-lg">
+<!-- Module 01: Customer Entity & Legal Qualification -->
+<section class="bg-surface rounded-lg shadow-sm p-lg flex flex-col gap-md transition-shadow hover:shadow-md">
+<div class="flex items-center justify-between pb-sm border-b-0">
+<div class="flex items-center gap-sm">
+<div class="w-8 h-8 rounded-lg bg-surface-container-low flex items-center justify-center text-primary">
+<span class="material-symbols-outlined text-[20px]">badge</span>
+</div>
+<div class="flex flex-col">
+<div class="flex items-center gap-xs">
+<span class="font-data-mono text-data-mono text-text-muted">SECTION 01</span>
+<span class="font-title-sm text-title-sm text-on-surface">客户主体与工商资质</span>
+</div>
+<span class="font-caption-sm text-caption-sm text-text-muted">国家发改委及国家电网要求之真实用电主体工商底册</span>
+</div>
+</div>
+<span class="px-sm py-base rounded bg-surface-container text-primary font-caption-sm text-caption-sm font-bold flex items-center gap-1">
+<span class="material-symbols-outlined text-[14px]">verified</span>
+            全国工商业信息库直联已就绪
+          </span>
+</div>
+<div class="grid grid-cols-1 md:grid-cols-2 gap-md pt-xs">
+<!-- Institution Full Name -->
+<div class="md:col-span-2 flex flex-col gap-xs">
+<label class="font-label-bold text-label-bold text-on-surface flex items-center justify-between">
+<span>机构全称 (工商登记法定全称) <span class="text-status-error">*</span></span>
+<span class="text-tertiary font-caption-sm text-caption-sm 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-md pr-28 py-xs rounded bg-surface-container-lowest font-body-md text-body-md text-on-surface shadow-sm focus:outline-none focus:bg-surface focus:shadow-md transition-all" type="text" value="武汉华星光电半导体显示技术有限公司"/>
+<div class="absolute right-xs flex items-center gap-1">
+<span class="px-xs py-0.5 rounded bg-surface-container-high font-data-mono text-data-mono text-primary">已验资</span>
+</div>
+</div>
+</div>
+<!-- USCC -->
+<div class="flex flex-col gap-xs">
+<label class="font-label-bold text-label-bold text-on-surface flex items-center justify-between">
+<span>统一社会信用代码 (18位) <span class="text-status-error">*</span></span>
+<button class="text-primary font-caption-sm text-caption-sm flex items-center gap-0.5 hover:underline" type="button">
+<span class="material-symbols-outlined text-[14px]">center_focus_strong</span>
+                OCR识别
+              </button>
+</label>
+<input class="w-full px-md py-xs rounded bg-surface-container-lowest font-data-mono text-data-mono text-on-surface tracking-wider shadow-sm focus:outline-none focus:bg-surface focus:shadow-md transition-all" type="text" value="91420100MA4KMYXU72"/>
+</div>
+<!-- Industry Category -->
+<div class="flex flex-col gap-xs">
+<label class="font-label-bold text-label-bold text-on-surface">
+              所属行业门类 <span class="text-status-error">*</span>
+</label>
+<div class="relative flex items-center">
+<select class="w-full px-md py-xs rounded bg-surface-container-lowest font-body-md text-body-md text-on-surface appearance-none shadow-sm focus:outline-none focus:bg-surface focus:shadow-md transition-all">
+<option selected="">先进制造 · 半导体与精密光电</option>
+<option>生物医药 · 基因工程产业基地</option>
+<option>高校科研 · 重点实验中心</option>
+<option>医疗卫生 · 三级甲等综合医院</option>
+<option>商务楼宇 · 超甲级智能总部大厦</option>
+</select>
+<span class="material-symbols-outlined absolute right-sm text-outline pointer-events-none text-[18px]">unfold_more</span>
+</div>
+</div>
+<!-- Legal Person -->
+<div class="flex flex-col gap-xs">
+<label class="font-label-bold text-label-bold text-on-surface">
+              法定代表人姓名 <span class="text-status-error">*</span>
+</label>
+<input class="w-full px-md py-xs rounded bg-surface-container-lowest font-body-md text-body-md text-on-surface shadow-sm focus:outline-none focus:bg-surface focus:shadow-md transition-all" type="text" value="赵宏伟"/>
+</div>
+<!-- Legal Person Phone -->
+<div class="flex flex-col gap-xs">
+<label class="font-label-bold text-label-bold text-on-surface">
+              法定代表人联系电话
+            </label>
+<input class="w-full px-md py-xs rounded bg-surface-container-lowest font-data-mono text-data-mono text-on-surface shadow-sm focus:outline-none focus:bg-surface focus:shadow-md transition-all" type="tel" value="027-8790-8800"/>
+</div>
+<!-- Administrative Division (3-level) -->
+<div class="md:col-span-2 flex flex-col gap-xs">
+<label class="font-label-bold text-label-bold text-on-surface">
+              所属行政区划 (三级联动) <span class="text-status-error">*</span>
+</label>
+<div class="grid grid-cols-3 gap-sm">
+<div class="relative">
+<select class="w-full px-md py-xs rounded bg-surface-container-lowest font-body-md text-body-md text-on-surface appearance-none shadow-sm focus:outline-none">
+<option selected="">湖北省</option>
+</select>
+<span class="material-symbols-outlined absolute right-xs top-2.5 text-outline pointer-events-none text-[16px]">expand_more</span>
+</div>
+<div class="relative">
+<select class="w-full px-md py-xs rounded bg-surface-container-lowest font-body-md text-body-md text-on-surface appearance-none shadow-sm focus:outline-none">
+<option selected="">武汉市</option>
+</select>
+<span class="material-symbols-outlined absolute right-xs top-2.5 text-outline pointer-events-none text-[16px]">expand_more</span>
+</div>
+<div class="relative">
+<select class="w-full px-md py-xs rounded bg-surface-container-lowest font-body-md text-body-md text-on-surface appearance-none shadow-sm focus:outline-none">
+<option selected="">洪山区 (东湖新技术开发区)</option>
+</select>
+<span class="material-symbols-outlined absolute right-xs top-2.5 text-outline pointer-events-none text-[16px]">expand_more</span>
+</div>
+</div>
+</div>
+<!-- Physical Power Site Address with Map trigger -->
+<div class="md:col-span-2 flex flex-col gap-xs">
+<label class="font-label-bold text-label-bold text-on-surface flex items-center justify-between">
+<span>实际用电厂区/建筑地址 <span class="text-status-error">*</span></span>
+<span class="text-text-muted font-caption-sm text-caption-sm 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-md pr-28 py-xs rounded bg-surface-container-lowest font-body-md text-body-md text-on-surface shadow-sm focus:outline-none focus:bg-surface focus:shadow-md transition-all" type="text" value="光谷智能制造产业园高新大道999号 华星光电武汉光谷显示基地 T3/T4厂区"/>
+<button class="absolute right-xs px-sm py-1 rounded bg-surface-container-high hover:bg-surface-variant font-label-bold text-label-bold text-primary flex items-center gap-1 transition-colors" type="button">
+<span class="material-symbols-outlined text-[16px]">map</span>
+<span>地图定标</span>
+</button>
+</div>
+</div>
+</div>
+</section>
+<!-- Module 02: Grid Power Filing Parameters -->
+<section class="bg-surface rounded-lg shadow-sm p-lg flex flex-col gap-md transition-shadow hover:shadow-md">
+<div class="flex items-center justify-between pb-sm">
+<div class="flex items-center gap-sm">
+<div class="w-8 h-8 rounded-lg bg-surface-container-low flex items-center justify-center text-primary">
+<span class="material-symbols-outlined text-[20px]">bolt</span>
+</div>
+<div class="flex flex-col">
+<div class="flex items-center gap-xs">
+<span class="font-data-mono text-data-mono text-text-muted">SECTION 02</span>
+<span class="font-title-sm text-title-sm text-on-surface">基础用电申报参数</span>
+</div>
+<span class="font-caption-sm text-caption-sm text-text-muted">电网报装装见容量、受电电压与应急安全责任底册</span>
+</div>
+</div>
+<span class="px-sm py-base rounded bg-surface-container-low text-on-surface-variant font-caption-sm text-caption-sm">
+            用于负荷容量规划与越限告警基线
+          </span>
+</div>
+<div class="grid grid-cols-1 md:grid-cols-3 gap-md pt-xs">
+<!-- Power Consumer Account Number -->
+<div class="flex flex-col gap-xs">
+<label class="font-label-bold text-label-bold text-on-surface flex items-center justify-between">
+<span>供电局电网用电户号 <span class="text-status-error">*</span></span>
+<span class="text-tertiary font-caption-sm text-caption-sm flex items-center gap-0.5">
+<span class="material-symbols-outlined text-[13px]">verified_user</span>
+                户名校验一致
+              </span>
+</label>
+<input class="w-full px-md py-xs rounded bg-surface-container-lowest font-data-mono text-data-mono text-on-surface tracking-wider shadow-sm focus:outline-none focus:bg-surface focus:shadow-md transition-all" type="text" value="0982736192"/>
+</div>
+<!-- Incomer Voltage Level -->
+<div class="flex flex-col gap-xs">
+<label class="font-label-bold text-label-bold text-on-surface">
+              进线受电电压等级 <span class="text-status-error">*</span>
+</label>
+<div class="relative flex items-center">
+<select class="w-full px-md py-xs rounded bg-surface-container-lowest font-body-md text-body-md text-on-surface appearance-none shadow-sm focus:outline-none focus:bg-surface focus:shadow-md transition-all">
+<option selected="">10kV 高压专线供电</option>
+<option>35kV 变电站高压受电</option>
+<option>110kV 专用变电站</option>
+<option>380V 低压综合动力</option>
+</select>
+<span class="material-symbols-outlined absolute right-sm text-outline pointer-events-none text-[18px]">unfold_more</span>
+</div>
+</div>
+<!-- Total Installed Capacity -->
+<div class="flex flex-col gap-xs">
+<label class="font-label-bold text-label-bold text-on-surface">
+              报装装见总容量 <span class="text-status-error">*</span>
+</label>
+<div class="relative flex items-center">
+<input class="w-full pl-md pr-14 py-xs rounded bg-surface-container-lowest font-data-mono text-data-mono text-on-surface shadow-sm focus:outline-none focus:bg-surface focus:shadow-md transition-all" type="number" value="16000"/>
+<span class="absolute right-sm text-outline font-data-mono text-data-mono pointer-events-none">kVA</span>
+</div>
+</div>
+<!-- Distribution Rooms Planned -->
+<div class="flex flex-col gap-xs">
+<label class="font-label-bold text-label-bold text-on-surface">
+              变配电室规划总数
+            </label>
+<div class="relative flex items-center">
+<input class="w-full pl-md pr-12 py-xs rounded bg-surface-container-lowest font-data-mono text-data-mono text-on-surface shadow-sm focus:outline-none" type="number" value="3"/>
+<span class="absolute right-sm text-outline font-caption-sm text-caption-sm pointer-events-none">处所</span>
+</div>
+</div>
+<!-- Planned Buildings -->
+<div class="flex flex-col gap-xs">
+<label class="font-label-bold text-label-bold text-on-surface">
+              规划用电建筑栋数
+            </label>
+<div class="relative flex items-center">
+<input class="w-full pl-md pr-12 py-xs rounded bg-surface-container-lowest font-data-mono text-data-mono text-on-surface shadow-sm focus:outline-none" type="number" value="5"/>
+<span class="absolute right-sm text-outline font-caption-sm text-caption-sm pointer-events-none">栋</span>
+</div>
+</div>
+<!-- Planned Monitored Circuits -->
+<div class="flex flex-col gap-xs">
+<label class="font-label-bold text-label-bold text-on-surface">
+              计划监测回路预估数
+            </label>
+<div class="relative flex items-center">
+<input class="w-full pl-md pr-12 py-xs rounded bg-surface-container-lowest font-data-mono text-data-mono text-on-surface shadow-sm focus:outline-none" type="number" value="84"/>
+<span class="absolute right-sm text-outline font-caption-sm text-caption-sm pointer-events-none">回路</span>
+</div>
+</div>
+<!-- Customer Electrical Safety Officer -->
+<div class="flex flex-col gap-xs">
+<label class="font-label-bold text-label-bold text-on-surface">
+              客户方电气第一责任人 <span class="text-status-error">*</span>
+</label>
+<input class="w-full px-md py-xs rounded bg-surface-container-lowest font-body-md text-body-md text-on-surface shadow-sm focus:outline-none" type="text" value="陈明德 (动力部总监)"/>
+</div>
+<!-- 24h Emergency Phone -->
+<div class="md:col-span-2 flex flex-col gap-xs">
+<label class="font-label-bold text-label-bold text-on-surface flex items-center justify-between">
+<span>24小时应急值班手机号 <span class="text-status-error">*</span></span>
+<span class="text-text-muted font-caption-sm text-caption-sm">用于接收调度令与严重故障短信推送</span>
+</label>
+<div class="relative flex items-center">
+<span class="material-symbols-outlined absolute left-sm text-outline text-[18px]">phone_in_talk</span>
+<input class="w-full pl-10 pr-md py-xs rounded bg-surface-container-lowest font-data-mono text-data-mono text-on-surface shadow-sm focus:outline-none focus:bg-surface focus:shadow-md transition-all" type="tel" value="139-7128-9921"/>
+</div>
+</div>
+</div>
+</section>
+<!-- Module 03: Business Contract & SLA Service Tier -->
+<section class="bg-surface rounded-lg shadow-sm p-lg flex flex-col gap-md transition-shadow hover:shadow-md">
+<div class="flex items-center justify-between pb-sm">
+<div class="flex items-center gap-sm">
+<div class="w-8 h-8 rounded-lg bg-surface-container-low flex items-center justify-center text-primary">
+<span class="material-symbols-outlined text-[20px]">handshake</span>
+</div>
+<div class="flex flex-col">
+<div class="flex items-center gap-xs">
+<span class="font-data-mono text-data-mono text-text-muted">SECTION 03</span>
+<span class="font-title-sm text-title-sm text-on-surface">商务签约与托管服务级别</span>
+</div>
+<span class="font-caption-sm text-caption-sm text-text-muted">界定响应时限、巡检频次与责任客户经理权责</span>
+</div>
+</div>
+</div>
+<div class="flex flex-col gap-md pt-xs">
+<!-- SLA Tier Selection Cards -->
+<div class="flex flex-col gap-xs">
+<label class="font-label-bold text-label-bold text-on-surface">
+              鑫潼智电智能运维保障等级 (SLA) <span class="text-status-error">*</span>
+</label>
+<div class="grid grid-cols-1 md:grid-cols-4 gap-sm">
+<!-- Tier 1: A+ -->
+<div class="relative p-md rounded-lg bg-surface-container-low cursor-pointer hover:bg-surface-container transition-all flex flex-col gap-xs group">
+<div class="flex items-center justify-between">
+<span class="font-label-bold text-label-bold text-primary">A+ 特级保电托管</span>
+<span class="material-symbols-outlined text-[18px] text-primary" style="font-variation-settings: 'FILL' 1;">radio_button_checked</span>
+</div>
+<p class="font-caption-sm text-caption-sm text-text-muted leading-relaxed">
+                  15分钟应急到场 · 7×24小时专家派单巡检 · 关键负荷双电源容灾
+                </p>
+</div>
+<!-- Tier 2: A -->
+<div class="p-md rounded-lg bg-surface-container-lowest cursor-pointer hover:bg-surface-container-low transition-all flex flex-col gap-xs">
+<div class="flex items-center justify-between">
+<span class="font-label-bold text-label-bold text-on-surface">A 级重大用电保障</span>
+<span class="material-symbols-outlined text-[18px] text-outline">radio_button_unchecked</span>
+</div>
+<p class="font-caption-sm text-caption-sm text-text-muted leading-relaxed">
+                  30分钟响应 · 每周常规物理巡检 · 负荷越限动态调优
+                </p>
+</div>
+<!-- Tier 3: B -->
+<div class="p-md rounded-lg bg-surface-container-lowest cursor-pointer hover:bg-surface-container-low transition-all flex flex-col gap-xs">
+<div class="flex items-center justify-between">
+<span class="font-label-bold text-label-bold text-on-surface">B 级标准集中托管</span>
+<span class="material-symbols-outlined text-[18px] text-outline">radio_button_unchecked</span>
+</div>
+<p class="font-caption-sm text-caption-sm text-text-muted leading-relaxed">
+                  2小时响应 · 每月预防性预防性维护 · 报表定期抄送
+                </p>
+</div>
+<!-- Tier 4: C -->
+<div class="p-md rounded-lg bg-surface-container-lowest cursor-pointer hover:bg-surface-container-low transition-all flex flex-col gap-xs">
+<div class="flex items-center justify-between">
+<span class="font-label-bold text-label-bold text-on-surface">C 级基础数据监测</span>
+<span class="material-symbols-outlined text-[18px] text-outline">radio_button_unchecked</span>
+</div>
+<p class="font-caption-sm text-caption-sm text-text-muted leading-relaxed">
+                  仅云端数据上报与告警 · 不含线下人工巡维派遣
+                </p>
+</div>
+</div>
+</div>
+<!-- Contract Dates & Responsible Manager -->
+<div class="grid grid-cols-1 md:grid-cols-3 gap-md">
+<div class="flex flex-col gap-xs">
+<label class="font-label-bold text-label-bold text-on-surface">
+                托管服务生效起始日 <span class="text-status-error">*</span>
+</label>
+<input class="w-full px-md py-xs rounded bg-surface-container-lowest font-data-mono text-data-mono text-on-surface shadow-sm focus:outline-none" type="date" value="2025-01-01"/>
+</div>
+<div class="flex flex-col gap-xs">
+<label class="font-label-bold text-label-bold text-on-surface">
+                托管服务协议终止日 <span class="text-status-error">*</span>
+</label>
+<input class="w-full px-md py-xs rounded bg-surface-container-lowest font-data-mono text-data-mono text-on-surface shadow-sm focus:outline-none" type="date" value="2027-12-31"/>
+</div>
+<div class="flex flex-col gap-xs">
+<label class="font-label-bold text-label-bold text-on-surface">
+                鑫潼责任客户经理 <span class="text-status-error">*</span>
+</label>
+<div class="relative flex items-center">
+<select class="w-full px-md py-xs rounded bg-surface-container-lowest font-body-md text-body-md text-on-surface appearance-none shadow-sm focus:outline-none">
+<option selected="">张峻 (华中区域大客户一部 · 资深总监)</option>
+<option>孙楚 (工业园区服务专班 · 客户经理)</option>
+<option>郭少峰 (智能配电交付部 · 主管)</option>
+</select>
+<span class="material-symbols-outlined absolute right-sm text-outline pointer-events-none text-[18px]">unfold_more</span>
+</div>
+</div>
+</div>
+</div>
+</section>
+</div>
+<!-- Right Column: Decoupling Guide & Compliance Sidebar (4 cols) -->
+<div class="col-span-12 lg:col-span-4 flex flex-col gap-lg">
+<!-- Card 1: Decoupling Architecture Guide -->
+<aside class="bg-surface rounded-lg shadow-sm p-lg flex flex-col gap-md">
+<div class="flex items-center gap-sm">
+<div class="w-8 h-8 rounded-lg bg-surface-container flex items-center justify-center text-primary">
+<span class="material-symbols-outlined text-[20px]">account_tree</span>
+</div>
+<div>
+<h2 class="font-title-sm text-title-sm text-on-surface">系统模块解耦指引</h2>
+<p class="font-caption-sm text-caption-sm text-text-muted">Decoupled Lifecycle Architecture</p>
+</div>
+</div>
+<div class="p-sm rounded-lg bg-surface-container-low text-on-surface-variant font-caption-sm text-caption-sm leading-relaxed flex items-start gap-xs">
+<span class="material-symbols-outlined text-primary text-[18px] shrink-0 mt-0.5">info</span>
+<span>
+            本界面<strong>仅负责用电主体工商与基础电气资质建档</strong>。保存后将自动生成全局唯一 <code class="font-data-mono text-primary font-bold">customer_id</code>，后续各环节已完全解耦，由专属工作流承接：
+          </span>
+</div>
+<!-- Sequential decoupled steps -->
+<div class="flex flex-col gap-md">
+<!-- Node 1 -->
+<div class="flex gap-sm items-start relative">
+<div class="w-7 h-7 rounded-full bg-primary text-on-primary font-data-mono text-data-mono flex items-center justify-center font-bold shrink-0 shadow-sm">
+              01
+            </div>
+<div class="flex flex-col gap-base">
+<span class="font-label-bold text-label-bold text-on-surface">空间拓扑与用电架构搭建</span>
+<p class="font-caption-sm text-caption-sm text-text-muted leading-normal">
+                建档完成后即刻引导进入。按厂区、建筑、10kV 配电室层级绘制一次电气单线图与母线拓扑。
+              </p>
+<div class="flex items-center gap-1 font-caption-sm text-caption-sm text-primary">
+<span class="w-1.5 h-1.5 rounded-full bg-primary"></span>
+<span>建档后首要下一步</span>
+</div>
+</div>
+</div>
+<!-- Node 2 -->
+<div class="flex gap-sm items-start relative">
+<div class="w-7 h-7 rounded-full bg-surface-container-high text-on-surface-variant font-data-mono text-data-mono flex items-center justify-center font-bold shrink-0">
+              02
+            </div>
+<div class="flex flex-col gap-base">
+<span class="font-label-bold text-label-bold text-on-surface">大华 ICC 物联网智能接入</span>
+<p class="font-caption-sm text-caption-sm text-text-muted leading-normal">
+                在独立的<strong>【设备监控】</strong>模块指派网关硬件。配置 ICC 专网隧道、Modbus/IEC 104 采集频率及国密传输通道。
+              </p>
+<span class="font-caption-sm text-caption-sm text-outline">已完全从当前页面剥离</span>
+</div>
+</div>
+<!-- Node 3 -->
+<div class="flex gap-sm items-start relative">
+<div class="w-7 h-7 rounded-full bg-surface-container-high text-on-surface-variant font-data-mono text-data-mono flex items-center justify-center font-bold shrink-0">
+              03
+            </div>
+<div class="flex flex-col gap-base">
+<span class="font-label-bold text-label-bold text-on-surface">微信小程序权限与人员授权</span>
+<p class="font-caption-sm text-caption-sm text-text-muted leading-normal">
+                由<strong>【系统管理 > 权限分配】</strong>独立派发。按岗位角色（企业法定代表人、值班电工、运维班长）绑码下发微信消息推送。
+              </p>
+<span class="font-caption-sm text-caption-sm text-outline">已完全从当前页面剥离</span>
+</div>
+</div>
+</div>
+</aside>
+<!-- Card 2: Filing Completeness & Real-time Verification -->
+<aside class="bg-surface rounded-lg shadow-sm p-lg flex flex-col gap-md">
+<div class="flex items-center justify-between">
+<div class="flex items-center gap-sm">
+<div class="w-8 h-8 rounded-lg bg-surface-container flex items-center justify-center text-primary">
+<span class="material-symbols-outlined text-[20px]">fact_check</span>
+</div>
+<span class="font-title-sm text-title-sm text-on-surface">建档规范与完整度</span>
+</div>
+<span class="font-data-mono text-title-sm text-primary font-bold">85%</span>
+</div>
+<!-- Visual Ring/Bar Gauge -->
+<div class="flex flex-col gap-xs">
+<div class="w-full bg-surface-container 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-caption-sm text-text-muted">
+<span>基础准入阈值: 70%</span>
+<span class="text-tertiary font-bold">已达成建档标准</span>
+</div>
+</div>
+<!-- Verification Checklist -->
+<div class="flex flex-col gap-sm pt-xs">
+<div class="flex items-center justify-between p-xs rounded bg-surface-container-lowest">
+<div class="flex items-center gap-xs">
+<span class="material-symbols-outlined text-tertiary text-[18px]">check_circle</span>
+<span class="font-body-md text-body-md text-on-surface">统一社会信用代码合规</span>
+</div>
+<span class="font-caption-sm text-caption-sm text-tertiary font-bold">已核验</span>
+</div>
+<div class="flex items-center justify-between p-xs rounded bg-surface-container-lowest">
+<div class="flex items-center gap-xs">
+<span class="material-symbols-outlined text-tertiary text-[18px]">check_circle</span>
+<span class="font-body-md text-body-md text-on-surface">电网户号与电压等级匹配</span>
+</div>
+<span class="font-caption-sm text-caption-sm text-tertiary font-bold">已核验</span>
+</div>
+<div class="flex items-center justify-between p-xs rounded bg-surface-container-lowest">
+<div class="flex items-center gap-xs">
+<span class="material-symbols-outlined text-tertiary text-[18px]">check_circle</span>
+<span class="font-body-md text-body-md text-on-surface">变电室规划总数已录入</span>
+</div>
+<span class="font-data-mono text-data-mono text-on-surface">3 处所</span>
+</div>
+<div class="flex items-center justify-between p-xs rounded bg-surface-container-low">
+<div class="flex items-center gap-xs">
+<span class="material-symbols-outlined text-status-warn text-[18px]">pending</span>
+<span class="font-body-md text-body-md text-text-muted">托管协议盖章扫描件</span>
+</div>
+<span class="font-caption-sm text-caption-sm text-text-muted">建档后补录</span>
+</div>
+</div>
+</aside>
+<!-- Card 3: Quick Helper & Auxiliary Import Tools -->
+<aside class="bg-surface rounded-lg shadow-sm p-lg flex flex-col gap-md">
+<div class="flex items-center gap-sm">
+<div class="w-8 h-8 rounded-lg bg-surface-container flex items-center justify-center text-primary">
+<span class="material-symbols-outlined text-[20px]">electric_bolt</span>
+</div>
+<span class="font-title-sm text-title-sm text-on-surface">快捷输入辅助工具</span>
+</div>
+<div class="flex flex-col gap-sm">
+<button class="w-full flex items-center justify-between p-sm rounded-lg bg-surface-container-lowest hover:bg-surface-container-low transition-colors text-left group" type="button">
+<div class="flex items-center gap-sm">
+<span class="material-symbols-outlined text-primary text-[22px]">contact_page</span>
+<div class="flex flex-col">
+<span class="font-label-bold text-label-bold text-on-surface">导入企业营业执照副本</span>
+<span class="font-caption-sm text-caption-sm text-text-muted">支持 PDF/JPG/PNG 格式快速解析</span>
+</div>
+</div>
+<span class="material-symbols-outlined text-outline group-hover:text-primary transition-colors text-[18px]">chevron_right</span>
+</button>
+<button class="w-full flex items-center justify-between p-sm rounded-lg bg-surface-container-lowest hover:bg-surface-container-low transition-colors text-left group" type="button">
+<div class="flex items-center gap-sm">
+<span class="material-symbols-outlined text-secondary text-[22px]">hub</span>
+<div class="flex flex-col">
+<span class="font-label-bold text-label-bold text-on-surface">同步意向客户 (CRM商机)</span>
+<span class="font-caption-sm text-caption-sm text-text-muted">转正前期签约备忘录主体</span>
+</div>
+</div>
+<span class="material-symbols-outlined text-outline group-hover:text-secondary transition-colors text-[18px]">chevron_right</span>
+</button>
+</div>
+</aside>
+</div>
+</div>
+<!-- Sticky Bottom Action Bar -->
+<div class="sticky bottom-0 -mx-lg px-lg py-md bg-surface/95 backdrop-blur-md shadow-[0_-4px_16px_rgba(0,0,0,0.06)] z-30 flex flex-col sm:flex-row items-center justify-between gap-md">
+<div class="flex items-center gap-xs text-text-muted font-caption-sm text-caption-sm">
+<span class="material-symbols-outlined text-tertiary text-[18px]">shield</span>
+<span>系统安全声明：基础客户档案录入后将自动生成独立全局 <code class="font-data-mono text-on-surface font-bold">customer_id</code> 并实施行级多租户数据隔离。</span>
+</div>
+<div class="flex items-center gap-sm w-full sm:w-auto justify-end">
+<button class="px-lg py-xs rounded-full bg-surface-container-low hover:bg-surface-container text-on-surface font-label-bold text-label-bold transition-colors" type="button">
+        返回客户列表
+      </button>
+<button class="px-lg py-xs rounded-full bg-surface-container hover:bg-surface-container-high text-on-surface font-label-bold text-label-bold transition-colors" type="button">
+        保存为草稿
+      </button>
+<button class="flex items-center gap-xs px-xl py-xs rounded-full bg-primary hover:bg-primary-container text-on-primary font-label-bold text-label-bold transition-all shadow-md shadow-primary/20" type="button">
+<span>完成建档并进入空间拓扑</span>
+<span class="material-symbols-outlined text-[18px]">arrow_forward</span>
+</button>
+</div>
+</div>
+</div></main></div></body></html>

系统设计/UI/空间拓扑与用电架构/DESIGN.md

@@ -0,0 +1,200 @@
+---
+name: Industrial Precision
+colors:
+  surface: '#ffffff'
+  surface-dim: '#ccdbf1'
+  surface-bright: '#f8f9ff'
+  surface-container-lowest: '#ffffff'
+  surface-container-low: '#eef4ff'
+  surface-container: '#e5efff'
+  surface-container-high: '#dbe9ff'
+  surface-container-highest: '#d5e4fa'
+  on-surface: '#0d1c2c'
+  on-surface-variant: '#424655'
+  inverse-surface: '#233142'
+  inverse-on-surface: '#e9f1ff'
+  outline: '#727787'
+  outline-variant: '#c2c6d8'
+  surface-tint: '#0056d2'
+  primary: '#0054cd'
+  on-primary: '#ffffff'
+  primary-container: '#136bfb'
+  on-primary-container: '#fefcff'
+  inverse-primary: '#b2c5ff'
+  secondary: '#712ae2'
+  on-secondary: '#ffffff'
+  secondary-container: '#8a4cfc'
+  on-secondary-container: '#fffbff'
+  tertiary: '#00685f'
+  on-tertiary: '#ffffff'
+  tertiary-container: '#008378'
+  on-tertiary-container: '#f4fffc'
+  error: '#ba1a1a'
+  on-error: '#ffffff'
+  error-container: '#ffdad6'
+  on-error-container: '#93000a'
+  primary-fixed: '#dae2ff'
+  primary-fixed-dim: '#b2c5ff'
+  on-primary-fixed: '#001847'
+  on-primary-fixed-variant: '#0040a1'
+  secondary-fixed: '#eaddff'
+  secondary-fixed-dim: '#d2bbff'
+  on-secondary-fixed: '#25005a'
+  on-secondary-fixed-variant: '#5a00c6'
+  tertiary-fixed: '#89f5e7'
+  tertiary-fixed-dim: '#6bd8cb'
+  on-tertiary-fixed: '#00201d'
+  on-tertiary-fixed-variant: '#005049'
+  background: '#f8f9ff'
+  on-background: '#0d1c2c'
+  surface-variant: '#d5e4fa'
+  bg-page: '#eef3f8'
+  text-muted: '#5b6b7e'
+  border-rule: '#dbe4ee'
+  status-warn: '#e0852b'
+  status-error: '#dc2626'
+  accent-subtle: rgba(29,111,255,0.08)
+typography:
+  display-lg:
+    fontFamily: hankenGrotesk
+    fontSize: 32px
+    fontWeight: '700'
+    lineHeight: 40px
+  headline-md:
+    fontFamily: hankenGrotesk
+    fontSize: 23px
+    fontWeight: '700'
+    lineHeight: 28px
+  title-sm:
+    fontFamily: hankenGrotesk
+    fontSize: 17px
+    fontWeight: '700'
+    lineHeight: 24px
+  body-md:
+    fontFamily: hankenGrotesk
+    fontSize: 15px
+    fontWeight: '400'
+    lineHeight: 24px
+  label-bold:
+    fontFamily: hankenGrotesk
+    fontSize: 13px
+    fontWeight: '700'
+    lineHeight: 16px
+  data-mono:
+    fontFamily: jetbrainsMono
+    fontSize: 12px
+    fontWeight: '500'
+    lineHeight: 16px
+  caption-sm:
+    fontFamily: hankenGrotesk
+    fontSize: 12px
+    fontWeight: '700'
+    lineHeight: 14px
+  headline-md-mobile:
+    fontFamily: hankenGrotesk
+    fontSize: 20px
+    fontWeight: '700'
+    lineHeight: 26px
+rounded:
+  sm: 0.25rem
+  DEFAULT: 0.5rem
+  md: 0.75rem
+  lg: 1rem
+  xl: 1.5rem
+  full: 9999px
+spacing:
+  base: 4px
+  xs: 8px
+  sm: 12px
+  md: 16px
+  lg: 24px
+  xl: 40px
+  container-max: 1200px
+  gutter: 16px
+---
+
+## Brand & Style
+
+The design system is engineered for the **Xintong Smart Power Operation Management APP**, targeting power engineers and grid operators. The brand personality is **Professional, Efficient, and Industrial Tech**. It emphasizes reliability through a structured, high-density interface that transforms complex electrical data into actionable insights.
+
+The design style is a blend of **Corporate Modern** and **Information-Dense Minimalism**. It utilizes a "Layered Surface" approach where data is organized into logical card blocks, using subtle elevations and clear semantic color-coding to denote system status. The aesthetic is clean and functional, avoiding decorative elements in favor of technical precision and rapid scanability.
+
+- **Professionalism:** High-contrast typography and a restrained color palette.
+- **Efficiency:** Condensed layouts that prioritize data visualization and task status.
+- **Reliability:** Solid borders, consistent spacing, and clear state indicators.
+
+## Colors
+
+The color architecture is strictly functional, mapping specifically to the operation layers of the power management system. 
+
+- **Primary (Deep Blue):** Reserved for core branding, navigation, and "Client" layer interactions.
+- **Secondary (Purple):** Dedicated to "Gateway" operations and task-specific management.
+- **Tertiary (Teal):** Used for "Service" layer success states and optimized performance indicators.
+- **Neutral (Ink):** Used for primary text to ensure maximum legibility against light surfaces.
+
+**Semantic Usage:**
+- Use **status-warn (Amber)** for non-critical alerts or data synchronization states.
+- Use **status-error (Red)** for critical power failures or permission denials.
+- The **bg-page** provides a soft, low-strain canvas for long-duration monitoring, while **surface** (White) distinguishes interactive cards and data containers.
+
+## Typography
+
+This design system uses **Hanken Grotesk** as the primary typeface for its sharp, contemporary feel that bridges the gap between industrial and tech. **JetBrains Mono** is employed for technical data, device IDs, and numerical values to emphasize the system's engineering DNA.
+
+- **Hierarchy:** Use `display-lg` for dashboard summaries. `title-sm` is the default for card headers.
+- **Data Visualization:** All tabular data and technical strings must use `data-mono` for character alignment and clarity.
+- **Mobile Adaptation:** For mobile screens, headlines should scale down to `headline-md-mobile` to maintain visual balance while preserving authority.
+
+## Layout & Spacing
+
+The layout utilizes a **Flexible Grid System** with a focus on logical grouping through card-based containment.
+
+- **Grid:** A 12-column grid is used for desktop views, transitioning to a single-column stacked layout for mobile.
+- **Rhythm:** An 8px-based spacing scale ensures vertical consistency. Use `lg (24px)` for outer card padding and `md (16px)` for internal element spacing.
+- **Mobile Margins:** Standard mobile side margins are set to `md (16px)` to maximize screen real estate for dense data tables.
+- **Sectioning:** Distinct operational modules should be separated by `xl (40px)` of vertical space to prevent cognitive overload.
+
+## Elevation & Depth
+
+This design system conveys hierarchy through **Tonal Layering** and **Subtle Ambient Shadows**. We avoid heavy skeuomorphism in favor of a "Flat-Plus" approach.
+
+- **Base Layer:** The page background (`bg-page`) sits at the lowest elevation.
+- **Mid Layer (Cards):** UI cards use a white surface with a subtle shadow (`0 4px 14px rgba(0,0,0,.07)`) to appear slightly lifted.
+- **Interactive Layer:** On hover or active state, cards may transition to a higher elevation (`0 8px 28px rgba(0,0,0,.1)`) with a slight upward translation of -2px.
+- **Overlays:** Modals and dropdowns use the highest z-index with a distinct backdrop blur to maintain focus on the task at hand.
+- **Gradients:** Use soft radial gradients in the background (Blue/Purple) to create environmental depth without interfering with content legibility.
+
+## Shapes
+
+The shape language is **Rounded**, balancing industrial rigidity with modern software approachability.
+
+- **Cards & Sections:** Use the standard `rounded-lg (1rem)` for primary containers.
+- **Nodes & Blocks:** Architecture and data nodes use `rounded (0.5rem)` to fit more compactly within layouts.
+- **Interactive Elements:** Buttons and tags use a "Pill-shape" (`rounded-xl` or 999px) to distinguish them from structural containers.
+- **Borders:** Use `1px solid` with the `border-rule` color for most containers. Active states or primary focus areas may increase to `1.5px`.
+
+## Components
+
+**Buttons:**
+- **Primary:** Solid `primary_color` with white text. Pill-shaped.
+- **Secondary:** Transparent with `primary_color` border or subtle purple tint for operation tasks.
+- **Danger:** Solid `status-error` for irreversible actions.
+
+**Cards:**
+- White background, `1px` border-rule, and `rounded-lg` corners. 
+- Headers should have a `18px` internal padding and a bottom border to separate from the content body.
+
+**Input Fields:**
+- Soft white background with `1px` border. 
+- Focused states should use a `primary_color` border with a subtle outer glow.
+
+**Chips & Tags:**
+- Used for status (e.g., "Active", "Offline").
+- Backgrounds should use `8% opacity` versions of the semantic colors (Blue, Green, Red) with bolded text in the 100% opacity color.
+
+**Data Visualization:**
+- Charts should use the primary blue and secondary purple as the main data series colors.
+- Use `data-mono` for all axis labels and tooltips to ensure technical accuracy.
+
+**Status Indicators:**
+- Small `7px` circular dots used within lists or architecture nodes to show real-time connectivity status.

系统设计/UI/空间拓扑与用电架构/code.html

@@ -0,0 +1,898 @@
+<!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:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=hankenGrotesk:wght@300;400;500;600;700&amp;family=JetBrains+Mono:wght@400;500;600;700&amp;display=swap" rel="stylesheet"/>
+<style>
+    @layer base {
+      html, body { margin: 0; padding: 0; }
+      body { overscroll-behavior: none; }
+    }
+    ::-webkit-scrollbar { width: 6px; height: 6px; }
+    ::-webkit-scrollbar-track { background: transparent; }
+    ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; }
+    ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
+    .canvas-grid-bg {
+      background-color: #f8fafc;
+      background-image: radial-gradient(#cbd5e1 1px, transparent 1px);
+      background-size: 20px 20px;
+    }
+  </style>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<script id="tailwind-config">
+    tailwind.config = {
+      darkMode: "class",
+      theme: {
+        extend: {
+          colors: {
+            "border-rule": "#dbe4ee",
+            "surface-container-lowest": "#ffffff",
+            "outline-variant": "#c2c6d8",
+            "surface-dim": "#ccdbf1",
+            "on-primary-fixed-variant": "#0040a1",
+            "on-tertiary-fixed-variant": "#005049",
+            "text-muted": "#5b6b7e",
+            "accent-subtle": "rgba(29,111,255,0.08)",
+            "outline": "#727787",
+            "secondary-fixed-dim": "#d2bbff",
+            "surface-container-low": "#eef4ff",
+            "primary-fixed-dim": "#b2c5ff",
+            "on-surface": "#0d1c2c",
+            "secondary-fixed": "#eaddff",
+            "on-tertiary-fixed": "#00201d",
+            "on-tertiary": "#ffffff",
+            "error-container": "#ffdad6",
+            "tertiary": "#00685f",
+            "on-secondary": "#ffffff",
+            "on-secondary-fixed": "#25005a",
+            "on-primary-fixed": "#001847",
+            "tertiary-fixed-dim": "#6bd8cb",
+            "surface-container": "#e5efff",
+            "on-error-container": "#93000a",
+            "surface-container-highest": "#d5e4fa",
+            "on-surface-variant": "#424655",
+            "inverse-primary": "#b2c5ff",
+            "inverse-surface": "#1e293b",
+            "tertiary-fixed": "#89f5e7",
+            "bg-page": "#f1f5f9",
+            "on-tertiary-container": "#f4fffc",
+            "surface-tint": "#0056d2",
+            "surface-container-high": "#dbe9ff",
+            "surface-variant": "#d5e4fa",
+            "primary-container": "#136bfb",
+            "on-secondary-container": "#fffbff",
+            "on-error": "#ffffff",
+            "primary-fixed": "#dae2ff",
+            "primary": "#0054cd",
+            "status-warn": "#e0852b",
+            "tertiary-container": "#008378",
+            "secondary": "#6366f1",
+            "on-primary": "#ffffff",
+            "on-background": "#0d1c2c",
+            "surface-bright": "#f8f9ff",
+            "inverse-on-surface": "#e9f1ff",
+            "on-secondary-fixed-variant": "#5a00c6",
+            "background": "#f1f5f9",
+            "secondary-container": "#8a4cfc",
+            "error": "#ba1a1a",
+            "on-primary-container": "#fefcff",
+            "surface": "#ffffff",
+            "status-error": "#dc2626"
+          },
+          fontFamily: {
+            "body-md": ["hankenGrotesk", "sans-serif"],
+            "data-mono": ["JetBrains Mono", "monospace"]
+          }
+        }
+      }
+    }
+  </script>
+</head>
+<body class="bg-bg-page font-body-md text-[14px] text-on-surface antialiased min-h-screen flex">
+<!-- ==================== 1. 左侧固定全高全局导航栏 ==================== -->
+<aside class="fixed left-0 top-0 h-full w-64 bg-inverse-surface text-inverse-on-surface z-50 flex flex-col justify-between shadow-xl">
+<div class="flex flex-col flex-1 min-h-0">
+<!-- 平台 Brand Logo -->
+<div class="h-16 px-4 flex items-center gap-3 border-b border-slate-700/60 bg-slate-900/40">
+<div class="w-9 h-9 rounded-lg bg-primary flex items-center justify-center text-white shadow-md shadow-blue-500/20">
+<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-bold text-[17px] text-white tracking-wide">XT-POWER</span>
+<span class="text-[10px] font-semibold bg-primary text-white px-1.5 py-0.5 rounded leading-none">OS</span>
+</div>
+<span class="text-[11px] text-slate-400 tracking-tight">鑫潼智电 · 智能配用电中枢</span>
+</div>
+</div>
+<!-- 导航功能菜单 -->
+<div class="flex-1 overflow-y-auto px-3 py-4 space-y-1">
+<a class="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-300 hover:bg-slate-800 hover:text-white transition-colors" href="#">
+<span class="material-symbols-outlined text-[20px]">dashboard</span>
+<span class="font-medium text-[13.5px]">运营工作台</span>
+</a>
+<!-- 激活的客户管理父节点 -->
+<div class="space-y-1">
+<div class="flex items-center justify-between px-3 py-2 rounded-lg bg-slate-800/80 text-white font-semibold">
+<div class="flex items-center gap-3">
+<span class="material-symbols-outlined text-[20px] text-blue-400">apartment</span>
+<span class="text-[13.5px]">客户管理</span>
+</div>
+<span class="material-symbols-outlined text-[18px] text-slate-400">expand_more</span>
+</div>
+<!-- 二级菜单 -->
+<div class="pl-4 pr-1 py-1 space-y-1 border-l-2 border-slate-700 ml-4">
+<a class="flex items-center gap-2 px-3 py-1.5 rounded text-[13px] text-slate-400 hover:text-white hover:bg-slate-800 transition-colors" href="#">
+<span class="w-1.5 h-1.5 rounded-full bg-slate-500"></span>
+              客户档案列表
+            </a>
+<a class="flex items-center gap-2 px-3 py-1.5 rounded-lg text-[13px] font-semibold bg-primary text-white shadow-sm" href="#">
+<span class="w-1.5 h-1.5 rounded-full bg-cyan-300"></span>
+              空间拓扑与用电架构
+            </a>
+<a class="flex items-center gap-2 px-3 py-1.5 rounded text-[13px] text-slate-400 hover:text-white hover:bg-slate-800 transition-colors" href="#">
+<span class="w-1.5 h-1.5 rounded-full bg-slate-500"></span>
+              微信小程序授权
+            </a>
+</div>
+</div>
+<a class="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-300 hover:bg-slate-800 hover:text-white transition-colors" href="#">
+<span class="material-symbols-outlined text-[20px]">assignment</span>
+<span class="font-medium text-[13.5px]">项目管理</span>
+</a>
+<a class="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-300 hover:bg-slate-800 hover:text-white transition-colors" href="#">
+<span class="material-symbols-outlined text-[20px]">send_time_extension</span>
+<span class="font-medium text-[13.5px]">运营派单</span>
+</a>
+<a class="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-300 hover:bg-slate-800 hover:text-white transition-colors" href="#">
+<span class="material-symbols-outlined text-[20px]">sensors</span>
+<span class="font-medium text-[13.5px]">设备监控</span>
+</a>
+<a class="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-300 hover:bg-slate-800 hover:text-white transition-colors" href="#">
+<span class="material-symbols-outlined text-[20px]">query_stats</span>
+<span class="font-medium text-[13.5px]">统计报表</span>
+</a>
+<a class="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-300 hover:bg-slate-800 hover:text-white transition-colors" href="#">
+<span class="material-symbols-outlined text-[20px]">settings</span>
+<span class="font-medium text-[13.5px]">系统管理</span>
+</a>
+</div>
+</div>
+<!-- 侧栏底端通信链路卡 -->
+<div class="p-3 m-3 rounded-lg bg-slate-800/80 border border-slate-700">
+<div class="flex items-center justify-between mb-1.5">
+<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-emerald-400 opacity-75"></span>
+<span class="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
+</span>
+<span class="text-[11px] font-medium text-slate-200">边缘网关链路</span>
+</div>
+<span class="font-data-mono text-[11px] text-emerald-400 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>
+<!-- ==================== 右侧主视窗区域 (pl-64) ==================== -->
+<div class="pl-64 flex-1 flex flex-col min-h-screen bg-bg-page">
+<!-- 顶部固定系统 Header -->
+<header class="fixed top-0 left-64 right-0 h-16 bg-white/95 backdrop-blur-md z-40 border-b border-border-rule px-6 flex items-center justify-between">
+<div class="flex items-center gap-5 flex-1 max-w-2xl">
+<!-- 实时同步状态 Badge -->
+<div class="flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-emerald-50 border border-emerald-200 text-emerald-700 shrink-0">
+<span class="material-symbols-outlined text-emerald-600 text-[16px]">sync</span>
+<span class="text-[12px] font-semibold">ICC 实时数据正常同步</span>
+<span class="font-data-mono text-[11px] text-emerald-600/80 font-medium ml-1">120FPS</span>
+</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-4 py-1.5 rounded-lg bg-slate-50 border border-slate-200 text-[13px] text-on-surface placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all" placeholder="按变电所编码、变压器回路或客户名称全局检索 (Ctrl + K)..." type="text"/>
+</div>
+</div>
+<!-- 右侧工程师账户操作 -->
+<div class="flex items-center gap-3">
+<button class="relative p-2 rounded-lg hover:bg-slate-100 text-slate-600 transition-colors" title="消息通知">
+<span class="material-symbols-outlined text-[20px]">notifications</span>
+<span class="absolute top-1.5 right-1.5 w-2 h-2 rounded-full bg-status-error"></span>
+</button>
+<button class="p-2 rounded-lg hover:bg-slate-100 text-slate-600 transition-colors" title="工程工具">
+<span class="material-symbols-outlined text-[20px]">apps</span>
+</button>
+<div class="h-4 w-[1px] bg-slate-200 mx-1"></div>
+<div class="flex items-center gap-2.5 pl-1 cursor-pointer">
+<div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center shadow-sm text-white font-semibold text-[13px]">
+            李
+          </div>
+<div class="flex flex-col text-left">
+<span class="font-semibold text-[13px] text-slate-800 leading-tight">李工</span>
+<span class="font-data-mono text-[11px] text-slate-400 leading-tight">主控工程师 · 调度中心</span>
+</div>
+<span class="material-symbols-outlined text-slate-400 text-[18px]">expand_more</span>
+</div>
+</div>
+</header>
+<!-- 主工作区内容 (pt-16) -->
+<main class="pt-16 p-5 flex-1 flex flex-col gap-4">
+<!-- ================= 顶栏：面包屑导航 + 客户信息与项目指标主栏 ================= -->
+<div class="flex flex-col gap-2.5">
+<!-- 路径导航与总线协议状态 -->
+<div class="flex items-center justify-between">
+<div class="flex items-center gap-1.5 font-data-mono text-[12px] text-slate-500">
+<span>运营管控体系</span>
+<span class="material-symbols-outlined text-[14px]">chevron_right</span>
+<span>客户管理</span>
+<span class="material-symbols-outlined text-[14px]">chevron_right</span>
+<span class="text-primary font-semibold">空间拓扑与用电架构</span>
+</div>
+<div class="flex items-center gap-2 px-3 py-1 rounded-full bg-slate-100 border border-slate-200 text-slate-600 text-[11.5px] font-data-mono">
+<span class="relative flex h-2 w-2">
+<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
+<span class="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
+</span>
+<span>ICC 网关总线协议 (L3 API): 同步畅通 (102 pkt/s)</span>
+</div>
+</div>
+<!-- 客户综合管理卡片 (水平一览化排布) -->
+<div class="bg-white rounded-xl border border-border-rule shadow-sm px-5 py-3.5 flex flex-wrap items-center justify-between gap-4">
+<!-- 客户切换与重点标签 -->
+<div class="flex items-center gap-4">
+<div class="flex items-center gap-3 bg-slate-50 border border-slate-200 px-3 py-2 rounded-lg hover:border-primary/40 cursor-pointer transition-colors group">
+<div class="w-9 h-9 rounded bg-blue-50 text-primary flex items-center justify-center">
+<span class="material-symbols-outlined text-[22px]">school</span>
+</div>
+<div class="flex flex-col">
+<div class="flex items-center gap-2">
+<span class="font-bold text-[15px] text-slate-900 group-hover:text-primary transition-colors">武汉软件工程职业学院</span>
+<span class="material-symbols-outlined text-slate-400 text-[16px]">unfold_more</span>
+</div>
+<span class="font-data-mono text-[11.5px] text-slate-500">PRJ-HB-WH-00192 · 高校科研园区</span>
+</div>
+</div>
+<!-- 业务标签 -->
+<div class="flex items-center gap-1.5">
+<span class="px-2 py-0.5 rounded bg-blue-50 text-blue-700 text-[11px] font-semibold border border-blue-200/60">A级重要负荷</span>
+<span class="px-2 py-0.5 rounded bg-teal-50 text-teal-700 text-[11px] font-semibold border border-teal-200/60">双回路主供</span>
+<span class="px-2 py-0.5 rounded bg-indigo-50 text-indigo-700 text-[11px] font-semibold border border-indigo-200/60">ICC物联映射中</span>
+</div>
+</div>
+<!-- 关键工程指标 (5项指标) -->
+<div class="flex items-center gap-6 bg-slate-50 border border-slate-100 rounded-lg px-4 py-2">
+<div class="flex flex-col">
+<span class="text-[11px] text-slate-500 font-medium">已接入建筑</span>
+<div class="flex items-baseline gap-1">
+<span class="font-bold text-[18px] text-slate-800 leading-tight">5</span>
+<span class="text-[11px] text-slate-500">栋</span>
+</div>
+</div>
+<div class="h-6 w-[1px] bg-slate-200"></div>
+<div class="flex flex-col">
+<span class="text-[11px] text-slate-500 font-medium">变电所/配电室</span>
+<div class="flex items-baseline gap-1">
+<span class="font-bold text-[18px] text-slate-800 leading-tight">4</span>
+<span class="text-[11px] text-slate-500">处</span>
+</div>
+</div>
+<div class="h-6 w-[1px] bg-slate-200"></div>
+<div class="flex flex-col">
+<span class="text-[11px] text-slate-500 font-medium">监测用电回路</span>
+<div class="flex items-baseline gap-1">
+<span class="font-bold text-[18px] text-primary leading-tight font-data-mono">36</span>
+<span class="text-[11px] text-slate-500">路</span>
+</div>
+</div>
+<div class="h-6 w-[1px] bg-slate-200"></div>
+<div class="flex flex-col">
+<span class="text-[11px] text-slate-500 font-medium">ICC边缘网关</span>
+<div class="flex items-baseline gap-1">
+<span class="font-bold text-[18px] text-emerald-600 leading-tight font-data-mono">4</span>
+<span class="text-[11px] text-emerald-600 font-medium">台在线</span>
+</div>
+</div>
+<div class="h-6 w-[1px] bg-slate-200"></div>
+<div class="flex flex-col">
+<span class="text-[11px] text-slate-500 font-medium">空间建模覆盖率</span>
+<div class="flex items-center gap-1">
+<span class="font-bold text-[18px] text-slate-800 leading-tight font-data-mono">100%</span>
+<span class="material-symbols-outlined text-emerald-500 text-[18px]">verified</span>
+</div>
+</div>
+</div>
+<!-- 右侧操作按钮组 -->
+<div class="flex items-center gap-2">
+<button class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-slate-100 hover:bg-slate-200 text-slate-700 text-[12.5px] font-semibold transition-colors border border-slate-200">
+<span class="material-symbols-outlined text-[17px] text-primary">cloud_sync</span>
+<span>从ICC同步拓扑</span>
+</button>
+<button class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-slate-100 hover:bg-slate-200 text-slate-700 text-[12.5px] font-semibold transition-colors border border-slate-200">
+<span class="material-symbols-outlined text-[17px]">file_upload</span>
+<span>CAD/BIM导入</span>
+</button>
+<button class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-slate-100 hover:bg-slate-200 text-slate-700 text-[12.5px] font-semibold transition-colors border border-slate-200">
+<span class="material-symbols-outlined text-[17px]">download</span>
+<span>导出高清拓扑图</span>
+</button>
+<button class="flex items-center gap-1 px-3.5 py-1.5 rounded-lg bg-primary hover:bg-blue-700 text-white text-[12.5px] font-semibold shadow-sm transition-all hover:shadow">
+<span class="material-symbols-outlined text-[17px]">add</span>
+<span>新增空间节点</span>
+</button>
+</div>
+</div>
+</div>
+<!-- ================= 核心工作区：三栏严谨布局 ================= -->
+<!-- 左：280px 空间树 | 中：自适应宽度配电单线拓扑流 | 右：320px 属性检查与映射 -->
+<div class="grid grid-cols-12 gap-4 flex-1 items-start">
+<!-- ======================= LEFT COLUMN: 空间与建筑导航树 (280px左右 -> 3 cols) ======================= -->
+<div class="col-span-12 lg:col-span-3 xl:col-span-3 bg-white rounded-xl border border-border-rule shadow-sm flex flex-col h-[780px] overflow-hidden">
+<!-- 树顶控制栏 -->
+<div class="p-3.5 border-b border-border-rule bg-slate-50/70 flex flex-col gap-2.5">
+<div class="flex items-center justify-between">
+<div class="flex items-center gap-2">
+<span class="material-symbols-outlined text-primary text-[20px]">account_tree</span>
+<span class="font-bold text-[14px] text-slate-800">空间用电多维架构树</span>
+</div>
+<div class="flex items-center gap-1">
+<button class="p-1 rounded hover:bg-slate-200 text-slate-500 hover:text-slate-800 transition-colors" title="折叠/展开全部">
+<span class="material-symbols-outlined text-[17px]">unfold_less</span>
+</button>
+<button class="p-1 rounded hover:bg-slate-200 text-slate-500 hover:text-slate-800 transition-colors" title="快速定位">
+<span class="material-symbols-outlined text-[17px]">my_location</span>
+</button>
+</div>
+</div>
+<!-- 搜索框 -->
+<div class="relative">
+<span class="material-symbols-outlined absolute left-2.5 top-1/2 -translate-y-1/2 text-slate-400 text-[16px]">search</span>
+<input class="w-full pl-8 pr-3 py-1.5 rounded-lg bg-white border border-slate-200 text-[12.5px] placeholder:text-slate-400 focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary" placeholder="快速过滤建筑/配电柜/回路..." type="text"/>
+</div>
+</div>
+<!-- 树形层级滚动容器 -->
+<div class="flex-1 overflow-y-auto p-2.5 space-y-1 text-[13px]">
+<!-- 根节点：武汉软件工程职业学院 (总校区) -->
+<div class="flex items-center justify-between p-2 rounded-lg bg-blue-50/70 border border-blue-100 text-slate-900 font-semibold cursor-pointer">
+<div class="flex items-center gap-1.5">
+<span class="material-symbols-outlined text-primary text-[18px]">hub</span>
+<span>武汉软件工程职业学院</span>
+</div>
+<span class="font-data-mono text-[10px] text-blue-600 bg-white px-1.5 py-0.5 rounded border border-blue-200">根节点</span>
+</div>
+<!-- Level 1 缩进列表 -->
+<div class="pl-2.5 space-y-1 mt-1 border-l-2 border-slate-100 ml-3">
+<!-- 1. 变电所节点 -->
+<div class="flex items-center justify-between p-1.5 rounded-lg hover:bg-slate-100 text-slate-700 cursor-pointer group">
+<div class="flex items-center gap-1.5">
+<span class="material-symbols-outlined text-slate-400 text-[16px]">chevron_right</span>
+<span class="material-symbols-outlined text-amber-600 text-[16px]">electrical_services</span>
+<span class="text-[12.5px]">10kV 开闭所 / 变配电总房</span>
+</div>
+<span class="font-data-mono text-[11px] text-slate-400">主变 2台</span>
+</div>
+<!-- 2. 建筑节点：学生宿舍 12 号楼 (当前选中高亮展开) -->
+<div class="rounded-lg border border-blue-200/80 bg-blue-50/30 overflow-hidden">
+<div class="flex items-center justify-between p-1.5 bg-blue-100/50 text-primary font-bold cursor-pointer">
+<div class="flex items-center gap-1.5">
+<span class="material-symbols-outlined text-primary text-[16px]">arrow_drop_down</span>
+<span class="material-symbols-outlined text-primary text-[16px]">domain</span>
+<span class="text-[12.5px]">学生宿舍 12 号楼</span>
+</div>
+<div class="flex items-center gap-1">
+<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
+<span class="font-data-mono text-[10px] bg-primary text-white px-1.5 py-0.2 rounded font-medium">36回路</span>
+</div>
+</div>
+<!-- 12号楼子节点 -->
+<div class="pl-3 pr-1 py-1 space-y-0.5 text-[12px]">
+<!-- 1F -->
+<div class="flex items-center justify-between p-1 rounded hover:bg-slate-100 text-slate-600 cursor-pointer">
+<div class="flex items-center gap-1.5">
+<span class="material-symbols-outlined text-slate-400 text-[14px]">chevron_right</span>
+<span class="material-symbols-outlined text-slate-400 text-[15px]">inventory_2</span>
+<span>1F 楼层配电总箱 (DB-1E)</span>
+</div>
+<span class="font-data-mono text-[10.5px] text-slate-400">6 回路</span>
+</div>
+<!-- 2F (展开选中) -->
+<div class="space-y-0.5">
+<div class="flex items-center justify-between p-1 rounded bg-blue-100/70 text-slate-900 font-semibold cursor-pointer">
+<div class="flex items-center gap-1.5">
+<span class="material-symbols-outlined text-slate-600 text-[14px]">arrow_drop_down</span>
+<span class="material-symbols-outlined text-indigo-600 text-[15px]">view_in_ar</span>
+<span>2F 东分配电箱 (DB-2E)</span>
+</div>
+<span class="font-data-mono text-[10px] text-emerald-700 bg-emerald-100/80 px-1 py-0.2 rounded font-medium">已绑定</span>
+</div>
+<!-- 2F 下属各回路 -->
+<div class="pl-4 space-y-0.5 border-l border-blue-200 ml-2">
+<!-- 聚焦回路 -->
+<div class="flex items-center justify-between p-1.5 rounded bg-primary text-white font-semibold shadow-sm cursor-pointer">
+<div class="flex items-center gap-1">
+<span class="material-symbols-outlined text-amber-300 text-[14px]">bolt</span>
+<span class="text-[11.5px] truncate">201-208 宿舍照明与空调</span>
+</div>
+<span class="font-data-mono text-[10px] bg-white/20 px-1 rounded">焦点</span>
+</div>
+<!-- 其它回路 -->
+<div class="flex items-center justify-between p-1 rounded hover:bg-slate-100 text-slate-600 cursor-pointer">
+<div class="flex items-center gap-1">
+<span class="material-symbols-outlined text-slate-400 text-[14px]">bolt</span>
+<span class="text-[11.5px] truncate">2F 走廊应急指示与消防</span>
+</div>
+<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
+</div>
+</div>
+</div>
+<!-- 3F - 6F -->
+<div class="flex items-center justify-between p-1 rounded hover:bg-slate-100 text-slate-600 cursor-pointer">
+<div class="flex items-center gap-1.5">
+<span class="material-symbols-outlined text-slate-400 text-[14px]">chevron_right</span>
+<span class="material-symbols-outlined text-slate-400 text-[15px]">folder</span>
+<span>3F-6F 配电箱与各回路</span>
+</div>
+<span class="font-data-mono text-[10.5px] text-slate-400">24 回路</span>
+</div>
+</div>
+</div>
+<!-- 3. 数控智造实训中心 B座 -->
+<div class="flex items-center justify-between p-1.5 rounded-lg hover:bg-slate-100 text-slate-700 cursor-pointer group">
+<div class="flex items-center gap-1.5">
+<span class="material-symbols-outlined text-slate-400 text-[16px]">chevron_right</span>
+<span class="material-symbols-outlined text-amber-600 text-[16px]">precision_manufacturing</span>
+<span class="text-[12.5px]">数控智造实训中心 B座</span>
+</div>
+<span class="font-data-mono text-[10px] text-amber-700 bg-amber-50 border border-amber-200 px-1.5 py-0.2 rounded font-medium">动力重载 ⚠️</span>
+</div>
+<!-- 4. 笃学图书馆 -->
+<div class="flex items-center justify-between p-1.5 rounded-lg hover:bg-slate-100 text-slate-700 cursor-pointer group">
+<div class="flex items-center gap-1.5">
+<span class="material-symbols-outlined text-slate-400 text-[16px]">chevron_right</span>
+<span class="material-symbols-outlined text-blue-500 text-[16px]">local_library</span>
+<span class="text-[12.5px]">笃学图书馆 (主机房)</span>
+</div>
+<span class="text-[10.5px] text-slate-400">恒温恒湿</span>
+</div>
+<!-- 5. 师生第一餐饮中心 -->
+<div class="flex items-center justify-between p-1.5 rounded-lg hover:bg-slate-100 text-slate-700 cursor-pointer group">
+<div class="flex items-center gap-1.5">
+<span class="material-symbols-outlined text-slate-400 text-[16px]">chevron_right</span>
+<span class="material-symbols-outlined text-emerald-600 text-[16px]">restaurant</span>
+<span class="text-[12.5px]">师生第一餐饮中心</span>
+</div>
+<span class="font-data-mono text-[10px] text-emerald-700 bg-emerald-50 border border-emerald-200 px-1.5 py-0.2 rounded">厨房排烟</span>
+</div>
+</div>
+</div>
+<!-- 树底状态小卡片 -->
+<div class="p-3 border-t border-border-rule bg-slate-50 flex items-center justify-between">
+<span class="text-[11.5px] text-slate-500">拓扑完整度校验:</span>
+<div class="flex items-center gap-1 text-emerald-600 font-semibold text-[11.5px] font-data-mono">
+<span class="material-symbols-outlined text-[15px]">check_circle</span>
+<span>100% 完整无环路</span>
+</div>
+</div>
+</div>
+<!-- ======================= CENTER COLUMN: 配电拓扑全景流图 (6 cols) ======================= -->
+<div class="col-span-12 lg:col-span-6 xl:col-span-6 bg-white rounded-xl border border-border-rule shadow-sm flex flex-col h-[780px] overflow-hidden">
+<!-- 画布顶部工具栏 -->
+<div class="px-4 py-2.5 border-b border-border-rule bg-slate-50/90 flex items-center justify-between">
+<!-- 视图切换与当前焦点 -->
+<div class="flex items-center gap-3">
+<div class="flex items-center bg-slate-200/80 p-0.5 rounded-lg">
+<button class="px-3 py-1 rounded-md bg-white text-primary text-[12px] font-semibold shadow-xs">
+                  电气单线拓扑流
+                </button>
+<button class="px-3 py-1 rounded-md text-slate-600 hover:text-slate-900 text-[12px] font-medium transition-colors">
+                  空间三维映射
+                </button>
+</div>
+<div class="h-4 w-[1px] bg-slate-300"></div>
+<div class="flex items-center gap-1 text-[12px]">
+<span class="text-slate-500">焦点:</span>
+<span class="font-semibold text-slate-800 bg-blue-50 text-primary px-2 py-0.5 rounded border border-blue-100">学生宿舍 12# · 2F配电系统</span>
+</div>
+</div>
+<!-- 画布控制器 -->
+<div class="flex items-center gap-1">
+<button class="p-1 rounded hover:bg-slate-200 text-slate-600" title="缩小画布">
+<span class="material-symbols-outlined text-[18px]">zoom_out</span>
+</button>
+<span class="font-data-mono text-[11.5px] font-semibold text-slate-700 px-1">100%</span>
+<button class="p-1 rounded hover:bg-slate-200 text-slate-600" title="放大画布">
+<span class="material-symbols-outlined text-[18px]">zoom_in</span>
+</button>
+<button class="p-1 rounded hover:bg-slate-200 text-slate-600" title="适应窗口">
+<span class="material-symbols-outlined text-[18px]">fit_screen</span>
+</button>
+<div class="h-4 w-[1px] bg-slate-300 mx-1"></div>
+<!-- 告警高亮标签 -->
+<div class="flex items-center gap-1 px-2.5 py-1 rounded-md bg-amber-50 border border-amber-200 text-amber-700 text-[11px] font-semibold cursor-pointer hover:bg-amber-100 transition-colors">
+<span class="material-symbols-outlined text-[15px] text-amber-600">warning</span>
+<span>高亮预警 (1)</span>
+</div>
+</div>
+</div>
+<!-- 画布内容区 (工业微网格工程底图 + 自上而下层次严谨拓扑) -->
+<div class="flex-1 canvas-grid-bg relative overflow-y-auto p-4 flex flex-col items-center select-none">
+<!-- SVG 层：贯穿上下层次的母线与分支流线 -->
+<svg class="absolute inset-0 w-full h-full pointer-events-none z-0" xmlns="http://www.w3.org/2000/svg">
+<defs>
+<!-- 箭头标记 -->
+<marker id="bus-arrow" markerheight="6" markerwidth="6" orient="auto" refx="3" refy="3">
+<path d="M0,0 L6,3 L0,6 Z" fill="#0054cd"></path>
+</marker>
+<marker id="bus-arrow-warn" markerheight="6" markerwidth="6" orient="auto" refx="3" refy="3">
+<path d="M0,0 L6,3 L0,6 Z" fill="#e0852b"></path>
+</marker>
+</defs>
+<!-- Level 1 -> Level 2 进线引下母线 -->
+<line stroke="#0054cd" stroke-dasharray="4 2" stroke-width="2.5" x1="50%" x2="50%" y1="58" y2="88"></line>
+<!-- Level 2 -> Level 3 变压器引出到 ICC 边缘网关 -->
+<line stroke="#0054cd" stroke-width="2.5" x1="50%" x2="50%" y1="150" y2="182"></line>
+<!-- Level 3 -> 低压总分配横向母线 (Busbar) -->
+<line stroke="#0054cd" stroke-width="2.5" x1="50%" x2="50%" y1="262" y2="295"></line>
+<line stroke="#0054cd" stroke-width="3" x1="18%" x2="82%" y1="295" y2="295"></line>
+<!-- 低压母线分别引下到末端 3 组出线卡片 -->
+<!-- 出线 1: 学生宿舍 (当前聚焦) -->
+<line marker-end="url(#bus-arrow)" stroke="#0054cd" stroke-width="2.5" x1="18%" x2="18%" y1="295" y2="330"></line>
+<!-- 出线 2: 实训中心 (动力重载预警) -->
+<line marker-end="url(#bus-arrow-warn)" stroke="#e0852b" stroke-dasharray="3 2" stroke-width="2.5" x1="50%" x2="50%" y1="295" y2="330"></line>
+<!-- 出线 3: 餐饮中心 -->
+<line marker-end="url(#bus-arrow)" stroke="#0054cd" stroke-width="2.5" x1="82%" x2="82%" y1="295" y2="330"></line>
+</svg>
+<!-- ================= LEVEL 1: 10kV 高压进线段 ================= -->
+<div class="relative z-10 w-full max-w-md bg-white border border-slate-200 rounded-lg shadow-sm px-4 py-2 flex items-center justify-between">
+<div class="flex items-center gap-2">
+<span class="w-2.5 h-2.5 rounded-full bg-emerald-500 shadow-sm"></span>
+<span class="font-bold text-[12.5px] text-slate-800">10kV 高压进线柜 (开闭所 AH1/AH2)</span>
+</div>
+<div class="flex items-center gap-2 font-data-mono text-[11px] text-slate-500">
+<span class="bg-slate-100 px-1.5 py-0.5 rounded">10.45 kV</span>
+<span class="bg-slate-100 px-1.5 py-0.5 rounded">50.02 Hz</span>
+<span class="text-emerald-600 font-semibold">正常</span>
+</div>
+</div>
+<!-- 垂直间隔 -->
+<div class="h-7"></div>
+<!-- ================= LEVEL 2: 变压段 ================= -->
+<div class="relative z-10 w-full max-w-lg bg-white border-2 border-primary/40 rounded-xl shadow-md p-3 flex items-center justify-between bg-gradient-to-r from-blue-50/50 via-white to-blue-50/30">
+<div class="flex items-center gap-3">
+<div class="w-10 h-10 rounded-lg bg-primary text-white flex items-center justify-center shadow-sm">
+<span class="material-symbols-outlined text-[24px]">transform</span>
+</div>
+<div class="flex flex-col">
+<div class="flex items-center gap-2">
+<span class="font-bold text-[13.5px] text-slate-900">#1 变压器</span>
+<span class="text-[11px] font-data-mono bg-blue-100 text-primary px-1.5 py-0.2 rounded font-medium">SCB13-1250kVA</span>
+</div>
+<span class="text-[11.5px] text-slate-500 font-data-mono">10kV 降 0.4kV 低压主母排供电</span>
+</div>
+</div>
+<div class="flex items-center gap-3 font-data-mono">
+<div class="flex flex-col items-end">
+<span class="text-[10px] text-slate-400">负荷率</span>
+<span class="text-[14px] font-bold text-primary">54.3%</span>
+</div>
+<div class="h-6 w-[1px] bg-slate-200"></div>
+<div class="flex flex-col items-end">
+<span class="text-[10px] text-slate-400">变压器温升</span>
+<span class="text-[13px] font-semibold text-slate-700">42.0 ℃</span>
+</div>
+</div>
+</div>
+<!-- 垂直间隔 -->
+<div class="h-8"></div>
+<!-- ================= LEVEL 3: 大华 ICC 边缘网关层 ================= -->
+<div class="relative z-10 w-full max-w-xl bg-white border border-indigo-200 rounded-xl shadow-sm p-3 flex items-center justify-between bg-gradient-to-r from-indigo-50/40 via-white to-indigo-50/20">
+<div class="flex items-center gap-3">
+<div class="w-9 h-9 rounded-lg bg-indigo-600 text-white flex items-center justify-center shadow-sm">
+<span class="material-symbols-outlined text-[20px]">router</span>
+</div>
+<div class="flex flex-col">
+<div class="flex items-center gap-2">
+<span class="font-bold text-[13px] text-slate-900">大华 ICC 物联网边缘网关 #4</span>
+<span class="font-data-mono text-[10px] bg-indigo-100 text-indigo-700 px-1.5 py-0.2 rounded font-medium">ICC-GW-V3.2</span>
+</div>
+<span class="font-data-mono text-[11px] text-slate-500">IP: 192.168.10.88 · RS485 总线 · 挂载36只智能微断</span>
+</div>
+</div>
+<div class="flex items-center gap-3 font-data-mono text-[11px]">
+<div class="flex flex-col items-end">
+<span class="text-[10px] text-slate-400">通信在线率</span>
+<span class="font-bold text-emerald-600">99.98%</span>
+</div>
+<div class="flex flex-col items-end">
+<span class="text-[10px] text-slate-400">轮询周期</span>
+<span class="font-semibold text-slate-700">1000ms</span>
+</div>
+</div>
+</div>
+<!-- 垂直间隔 -->
+<div class="h-14"></div>
+<!-- ================= LEVEL 4: 末端配电箱与监测回路卡片 (并列网格展现，绝不错位) ================= -->
+<div class="relative z-10 w-full grid grid-cols-3 gap-3.5 pt-1">
+<!-- 卡片 1: 学生宿舍 12# 2F东配电箱回路 (当前选中/焦点) -->
+<div class="bg-white rounded-xl p-3 border-2 border-primary shadow-md flex flex-col justify-between relative cursor-pointer ring-4 ring-primary/10">
+<!-- 顶部焦点标记与编码 -->
+<div class="flex items-start justify-between pb-1 border-b border-slate-100">
+<div class="flex items-center gap-1.5">
+<span class="w-2 h-2 rounded-full bg-emerald-500"></span>
+<span class="font-bold text-[12.5px] text-slate-900">宿舍照明空调回路</span>
+</div>
+<span class="font-data-mono text-[10px] bg-primary text-white px-1.5 py-0.5 rounded font-semibold">#CIR-0219</span>
+</div>
+<span class="text-[11px] text-slate-500 my-1 font-medium truncate">学生宿舍12号楼 · 2F东分配电箱</span>
+<!-- 实时电气指标网格 (2x2) -->
+<div class="grid grid-cols-2 gap-1.5 p-2 bg-slate-50 rounded-lg font-data-mono text-[11px] my-1.5 border border-slate-100">
+<div class="flex justify-between">
+<span class="text-slate-400">电压(U):</span>
+<span class="font-bold text-slate-800">223.5 V</span>
+</div>
+<div class="flex justify-between">
+<span class="text-slate-400">电流(I):</span>
+<span class="font-bold text-slate-800">18.2 A</span>
+</div>
+<div class="flex justify-between">
+<span class="text-slate-400">有功(P):</span>
+<span class="font-bold text-primary">3.82 kW</span>
+</div>
+<div class="flex justify-between">
+<span class="text-slate-400">功率因数:</span>
+<span class="font-bold text-slate-800">0.94</span>
+</div>
+</div>
+<!-- 运行状态与微断型号 -->
+<div class="flex items-center justify-between text-[11px] font-data-mono pt-1 text-slate-600">
+<span class="flex items-center gap-0.5">
+<span class="material-symbols-outlined text-[13px] text-slate-400">thermostat</span>
+<span>38.2℃</span>
+</span>
+<span class="text-emerald-700 font-semibold bg-emerald-50 px-1 rounded">正常 (62%载)</span>
+</div>
+<div class="mt-1 text-[10px] font-data-mono text-slate-400 border-t border-slate-100 pt-1 truncate">
+                  ICC映射: DH-MCB-202409-9821
+                </div>
+</div>
+<!-- 卡片 2: 实训中心 B座 · 1F MCC-1 数控机床动力回路 (重载预警) -->
+<div class="bg-white rounded-xl p-3 border border-amber-300 shadow-sm flex flex-col justify-between relative cursor-pointer hover:border-amber-400 transition-all">
+<div class="flex items-start justify-between pb-1 border-b border-slate-100">
+<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-amber-400 opacity-75"></span>
+<span class="relative inline-flex rounded-full h-2 w-2 bg-amber-500"></span>
+</span>
+<span class="font-bold text-[12.5px] text-slate-900">数控机床组动力专线</span>
+</div>
+<span class="font-data-mono text-[10px] bg-amber-100 text-amber-800 px-1.5 py-0.5 rounded font-semibold">#CIR-0881</span>
+</div>
+<span class="text-[11px] text-slate-500 my-1 font-medium truncate">实训中心 B座 · 1F MCC-1</span>
+<div class="grid grid-cols-2 gap-1.5 p-2 bg-amber-50/50 rounded-lg font-data-mono text-[11px] my-1.5 border border-amber-100">
+<div class="flex justify-between">
+<span class="text-slate-400">电压(U):</span>
+<span class="font-bold text-slate-800">382.1 V</span>
+</div>
+<div class="flex justify-between">
+<span class="text-slate-400">电流(I):</span>
+<span class="font-bold text-amber-700">58.4 A</span>
+</div>
+<div class="flex justify-between">
+<span class="text-slate-400">瞬时(P):</span>
+<span class="font-bold text-amber-700">38.4 kW</span>
+</div>
+<div class="flex justify-between">
+<span class="text-slate-400">三相平衡:</span>
+<span class="font-bold text-slate-800">98.2%</span>
+</div>
+</div>
+<div class="flex items-center justify-between text-[11px] font-data-mono pt-1 text-slate-600">
+<span class="flex items-center gap-0.5">
+<span class="material-symbols-outlined text-[13px] text-slate-400">thermostat</span>
+<span>54.8℃</span>
+</span>
+<span class="text-amber-700 font-semibold bg-amber-100 px-1 rounded">⚠️ 负荷率 76%</span>
+</div>
+<div class="mt-1 text-[10px] font-data-mono text-slate-400 border-t border-slate-100 pt-1 truncate">
+                  ICC映射: DH-MCB-202409-1142
+                </div>
+</div>
+<!-- 卡片 3: 第一餐饮中心 · 动力配电箱厨房排烟风机 -->
+<div class="bg-white rounded-xl p-3 border border-slate-200 shadow-sm flex flex-col justify-between relative cursor-pointer hover:border-slate-300 transition-all">
+<div class="flex items-start justify-between pb-1 border-b border-slate-100">
+<div class="flex items-center gap-1.5">
+<span class="w-2 h-2 rounded-full bg-emerald-500"></span>
+<span class="font-bold text-[12.5px] text-slate-900">厨房高压排烟风机</span>
+</div>
+<span class="font-data-mono text-[10px] bg-slate-100 text-slate-700 px-1.5 py-0.5 rounded font-semibold">#CIR-0402</span>
+</div>
+<span class="text-[11px] text-slate-500 my-1 font-medium truncate">第一餐饮中心 · 动力配电箱</span>
+<div class="grid grid-cols-2 gap-1.5 p-2 bg-slate-50 rounded-lg font-data-mono text-[11px] my-1.5 border border-slate-100">
+<div class="flex justify-between">
+<span class="text-slate-400">电压(U):</span>
+<span class="font-bold text-slate-800">380.4 V</span>
+</div>
+<div class="flex justify-between">
+<span class="text-slate-400">电流(I):</span>
+<span class="font-bold text-slate-800">14.1 A</span>
+</div>
+<div class="flex justify-between">
+<span class="text-slate-400">瞬时(P):</span>
+<span class="font-bold text-emerald-700">7.2 kW</span>
+</div>
+<div class="flex justify-between">
+<span class="text-slate-400">燃气闭锁:</span>
+<span class="font-bold text-emerald-700">闭合正常</span>
+</div>
+</div>
+<div class="flex items-center justify-between text-[11px] font-data-mono pt-1 text-slate-600">
+<span class="flex items-center gap-0.5">
+<span class="material-symbols-outlined text-[13px] text-slate-400">thermostat</span>
+<span>32.1℃</span>
+</span>
+<span class="text-emerald-700 font-semibold bg-emerald-50 px-1 rounded">负荷 38%</span>
+</div>
+<div class="mt-1 text-[10px] font-data-mono text-slate-400 border-t border-slate-100 pt-1 truncate">
+                  ICC映射: DH-MCB-202409-5509
+                </div>
+</div>
+</div>
+</div>
+</div>
+<!-- ======================= RIGHT COLUMN: 选中测点属性与映射配置 (320px固定 -> 3 cols) ======================= -->
+<div class="col-span-12 lg:col-span-3 xl:col-span-3 bg-white rounded-xl border border-border-rule shadow-sm flex flex-col h-[780px] overflow-hidden">
+<!-- 检查器头部 -->
+<div class="p-3.5 border-b border-border-rule bg-slate-50/80 flex flex-col gap-1">
+<div class="flex items-center justify-between">
+<span class="text-[11px] font-bold text-slate-500 uppercase tracking-wider">节点属性与物联映射</span>
+<span class="text-[11px] font-semibold bg-emerald-100 text-emerald-800 px-2 py-0.5 rounded-full flex items-center gap-1">
+<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
+                已完成大华ICC映射
+              </span>
+</div>
+<h3 class="font-bold text-[14.5px] text-slate-900 mt-1 leading-tight">2F东分配电箱-照明回路</h3>
+<span class="font-data-mono text-[11px] text-slate-500">#CIR-HB-WH00192-DB2E-01</span>
+</div>
+<!-- 属性滚动区域 -->
+<div class="flex-1 overflow-y-auto p-3.5 space-y-3.5 text-[12.5px]">
+<!-- 模块 1: 空间物理归属 -->
+<div class="space-y-2">
+<div class="flex items-center gap-1.5 text-primary font-bold text-[12px]">
+<span class="material-symbols-outlined text-[16px]">apartment</span>
+<span>空间物理归属信息</span>
+</div>
+<div class="bg-slate-50 border border-slate-200/70 rounded-lg p-2.5 space-y-1.5 text-[12px]">
+<div class="flex justify-between">
+<span class="text-slate-500">所属建筑:</span>
+<span class="font-semibold text-slate-800">学生宿舍 12 号楼</span>
+</div>
+<div class="flex justify-between">
+<span class="text-slate-500">所在楼层:</span>
+<span class="font-semibold text-slate-800 font-data-mono">2 层 (Floor 02)</span>
+</div>
+<div class="flex justify-between">
+<span class="text-slate-500">物理箱体:</span>
+<span class="text-slate-800">东侧强电井 DB-2E 箱</span>
+</div>
+<div class="flex justify-between">
+<span class="text-slate-500">覆盖房间:</span>
+<span class="text-slate-800 font-semibold font-data-mono">201 ~ 208 宿舍房间</span>
+</div>
+</div>
+</div>
+<!-- 模块 2: 用电责任与能耗归属 -->
+<div class="space-y-2">
+<div class="flex items-center gap-1.5 text-indigo-600 font-bold text-[12px]">
+<span class="material-symbols-outlined text-[16px]">corporate_fare</span>
+<span>用电责任与能耗归属</span>
+</div>
+<div class="bg-slate-50 border border-slate-200/70 rounded-lg p-2.5 space-y-2">
+<div class="space-y-1">
+<label class="text-[11px] text-slate-500 font-medium">责任部门</label>
+<select class="w-full px-2.5 py-1.5 bg-white border border-slate-200 rounded text-[12px] text-slate-800 font-medium focus:ring-1 focus:ring-primary focus:outline-none">
+<option selected="">后勤物业管理处 - 宿管科</option>
+<option>教务处 - 实验实训管理中心</option>
+<option>保卫处 - 消防安全微型站</option>
+<option>信息化办公室 - 网络数据中心</option>
+</select>
+</div>
+<div class="grid grid-cols-2 gap-2">
+<div class="space-y-1">
+<label class="text-[11px] text-slate-500">责任人</label>
+<input class="w-full px-2 py-1 bg-white border border-slate-200 rounded text-[12px] text-slate-800" type="text" value="王主管 (宿管)"/>
+</div>
+<div class="space-y-1">
+<label class="text-[11px] text-slate-500">联系电话</label>
+<input class="w-full px-2 py-1 bg-white border border-slate-200 rounded text-[11.5px] font-data-mono text-slate-800" type="text" value="138****5621"/>
+</div>
+</div>
+<div class="flex items-center justify-between pt-1 border-t border-slate-200/60 text-[11.5px]">
+<span class="text-slate-500">考核方式:</span>
+<span class="text-primary font-semibold bg-blue-50 px-1.5 py-0.2 rounded border border-blue-100">定额包干 / 梯度考核</span>
+</div>
+</div>
+</div>
+<!-- 模块 3: 大华 ICC 边缘物联网映射 -->
+<div class="space-y-2">
+<div class="flex items-center gap-1.5 text-emerald-700 font-bold text-[12px]">
+<span class="material-symbols-outlined text-[16px]">sensors</span>
+<span>大华 ICC 边缘物联网映射</span>
+</div>
+<div class="bg-slate-50 border border-slate-200/70 rounded-lg p-2.5 space-y-1.5 font-data-mono text-[11.5px]">
+<div class="flex justify-between items-center">
+<span class="text-slate-500">绑定ICC设备码:</span>
+<span class="font-bold text-slate-800">DH-MCB-202409-9821</span>
+</div>
+<div class="flex justify-between items-center">
+<span class="text-slate-500">上联网关:</span>
+<span class="text-indigo-600 font-semibold">ICC-GW-04 (192.168.10.88)</span>
+</div>
+<div class="flex justify-between items-center">
+<span class="text-slate-500">采集轮询频率:</span>
+<span class="text-slate-800 font-medium">5分钟主动拉取 (L3)</span>
+</div>
+<div class="flex justify-between items-center">
+<span class="text-slate-500">额定电气规格:</span>
+<span class="text-slate-800">63A / 220V 单相</span>
+</div>
+</div>
+</div>
+<!-- 模块 4: 告警联动阈值设置 -->
+<div class="space-y-2">
+<div class="flex items-center gap-1.5 text-amber-700 font-bold text-[12px]">
+<span class="material-symbols-outlined text-[16px]">shield</span>
+<span>告警联动阈值设置</span>
+</div>
+<div class="grid grid-cols-3 gap-1.5 text-center font-data-mono">
+<div class="bg-slate-50 border border-slate-200 rounded p-1.5 flex flex-col">
+<span class="text-[10px] text-slate-500">过载保护</span>
+<span class="font-bold text-[12.5px] text-amber-700">&gt; 50.0 A</span>
+<span class="text-[9px] text-slate-400">(80%额定)</span>
+</div>
+<div class="bg-slate-50 border border-slate-200 rounded p-1.5 flex flex-col">
+<span class="text-[10px] text-slate-500">温升预警</span>
+<span class="font-bold text-[12.5px] text-rose-600">&gt; 60.0 ℃</span>
+<span class="text-[9px] text-slate-400">探头温度</span>
+</div>
+<div class="bg-slate-50 border border-slate-200 rounded p-1.5 flex flex-col">
+<span class="text-[10px] text-slate-500">漏电动作</span>
+<span class="font-bold text-[12.5px] text-primary">&gt; 30 mA</span>
+<span class="text-[9px] text-slate-400">瞬时速断</span>
+</div>
+</div>
+</div>
+</div>
+<!-- 右侧底部固定操作栏 -->
+<div class="p-3 border-t border-border-rule bg-slate-50/90 flex flex-col gap-2 mt-auto">
+<button class="w-full py-2 rounded-lg bg-primary hover:bg-blue-700 text-white font-semibold text-[13px] shadow-sm transition-all text-center">
+              保存节点与 ICC 映射配置
+            </button>
+<button class="w-full py-1.5 rounded-lg bg-white hover:bg-slate-100 border border-slate-200 text-slate-700 font-semibold text-[12px] transition-colors text-center">
+              下发 ICC 采集同步
+            </button>
+</div>
+</div>
+</div>
+<!-- ================= 底部微状态栏 (严谨工业级指标) ================= -->
+<footer class="bg-white rounded-lg border border-border-rule px-4 py-2 flex flex-wrap items-center justify-between text-[11.5px] font-data-mono text-slate-500 shadow-xs">
+<div class="flex items-center gap-5">
+<div class="flex items-center gap-1.5">
+<span class="w-2 h-2 rounded-full bg-emerald-500"></span>
+<span>拓扑校验状态: <span class="text-emerald-700 font-semibold">100% 完整无环路</span></span>
+</div>
+<span>•</span>
+<span>当前坐标引擎: <span class="text-slate-700">Graph-Core v2.4</span></span>
+<span>•</span>
+<span>NTP同步偏差: <span class="text-slate-700 font-semibold">&lt; 2μs (NTP-CHENGDU-PTP)</span></span>
+</div>
+<div class="flex items-center gap-4">
+<span class="text-emerald-700 font-medium">边缘通信: 在线 24/24 链路正常</span>
+<span class="text-slate-400">|</span>
+<span class="text-slate-700 font-semibold">鑫潼智电 · XT-POWER OS</span>
+</div>
+</footer>
+</main>
+</div>
+</body></html>

系统设计/db_design.html

@@ -806,9 +806,11 @@ erDiagram
   <div class="table-wrap"><table><thead><tr><th>字段</th><th>类型</th><th>键</th><th>说明</th></tr></thead><tbody>
     <tr><td><code>id</code></td><td>BIGSERIAL</td><td><span class="pill p-pk">PK</span></td><td>自增主键</td></tr>
     <tr><td><code>worker_name</code></td><td>VARCHAR(64)</td><td></td><td>电工姓名</td></tr>
-    <tr><td><code>phone</code></td><td>VARCHAR(20)</td><td><span class="pill p-pi">IDX</span></td><td>手机号</td></tr>
+    <tr><td><code>phone</code></td><td>VARCHAR(20)</td><td><span class="pill p-uk">UNIQUE</span></td><td>手机号（登录帐号）</td></tr>
+    <tr><td><code>password_hash</code></td><td>VARCHAR(255)</td><td></td><td>密码哈希（BCrypt）</td></tr>
     <tr><td><code>id_card</code></td><td>VARCHAR(18)</td><td></td><td>身份证号</td></tr>
     <tr><td><code>status</code></td><td>SMALLINT</td><td></td><td>状态：1在岗 0离职</td></tr>
+    <tr><td><code>last_login_at</code></td><td>TIMESTAMPTZ</td><td></td><td>最后登录时间</td></tr>
     <tr><td><code>created_at</code></td><td>TIMESTAMPTZ</td><td></td><td>创建时间</td></tr>
     <tr><td><code>updated_at</code></td><td>TIMESTAMPTZ</td><td></td><td>更新时间</td></tr>
   </tbody></table></div>