refactor(客户管理): 完成客户管理模块UI与架构全面调整
1. 调整菜单与路由:重命名客户信息/客户账号为客户档案管理/客户小程序授权管理,移除客户建筑/房间路由,新增空间拓扑路由 2. 后端新增客户统计接口`/customers/stats`,前端同步API与类型定义 3. 重构客户档案与小程序授权页面,仅保留数据库支持字段,移除无支撑功能 4. 新增空间拓扑页面,合并建筑与房间管理为树形拓扑视图 5. 更新数据库种子数据与权限配置,清理废弃菜单与绑定关系 6. 补充UI设计文档与规范说明
This commit is contained in:
1 parent
2a06cfea6d
commit
c60caa4770
35 files changed
+7524
-1961
No files matched your search
@@ -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>
|
||||
Reference in new issue
Block a user