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,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>