五套 UI 方案 · Demo 对比
全部使用你项目的真实业务内容（8 类关键部件、预警队列、六层闭环、流水线），零外部依赖，双击即可离线打开。
五套共用同一份数据层 demo/wd-data.js 与自绘 SVG 图表库 demo/wd-chart.js，便于横向对比。
一、五套方案速览
点开「打开 Demo」逐个查看，重点看导航形态、信息密度、配色语义三处差异。
方案 A
浅色后台暗色驾驶舱
浅色专业后台 + 驾驶舱单页暗色化
管理视图走 Ant Design Pro 观感的浅色后台，顶部「管理视图 / 驾驶舱视图」一键切到暗色大屏。技术栈零改造，汇报时冲击力强。
- 导航
- 顶部横向 + 左侧 208px 二级
- 密度
- 中等，AntD 标准间距
- 主色
- #1677ff（AntD 蓝）
方案 B
全浅色现代 SaaS
全站浅色现代 SaaS
Tabler 浅色范式：白底、1px 细边框、单主色、零装饰。窄图标侧栏 + 顶部搜索，部件卡片化铺开，最稳妥。
- 导航
- 64px 图标栏 + 顶部搜索
- 密度
- 高，每卡一个职责
- 主色
- #206bc4
方案 C
全暗色工业大屏
全站暗色工业大屏
深蓝网格底 + 发光描边 + 科技蓝，中心 12 台风机 SVG 孪生，KPI 环绕。评审最震撼，但工单表单体验差。
- 导航
- 无侧栏，纯大屏布局
- 密度
- 极高，工业监控范式
- 主色
- #3ba9ff + #ffb84d 点缀
方案 D
深色侧栏表格优先
深色侧栏 + 浅色内容区
左侧深色树形导航（含部件二级），右侧浅色工作区，上图表下宽表。工程工具感强，表格型工作流效率最高。
- 导航
- 236px 深色树形，两级
- 密度
- 高，宽表承载明细
- 主色
- #2563eb
方案 E
双主题双布局
双主题 + 布局可切换
浅色/暗色 + 工作台/大屏两套切换，一套 token 驱动全部。最专业也最费工，适合长期演进的平台。
- 导航
- 232px 可折叠，暗色可切换
- 密度
- 随布局自适应
- 主色
- #4f46e5（可换）
方案 F
指定参考睿铂范式
睿铂数字孪生驾驶舱
你指定的参考原型，已改造成风电关键部件版：8 部件健康度矩阵 + RAG 溯源 + 六层闭环导航。
- 导航
- 七段横向层导航
- 密度
- 高，12px 小字
- 主色
- #1565C0
二、逐项量化对比
★ 标记的是该项的推荐选择。
| 维度 | A 混合 | B 浅色 SaaS | C 暗色大屏 | D 深侧栏 | E 双主题 | F 睿铂范式 |
|---|---|---|---|---|---|---|
| 视觉气质 | 沉稳 + 冲击并存 | 干净、克制 | 科技、工业、震撼 | 工程、专业 | 现代、灵活 | 紧凑、专业 |
| 导航形态 | 顶部横 + 左侧 208px | 64px 图标栏 | 无侧栏 | 236px 深色树形 | 232px 可折叠 | 七段横向 |
| 信息密度 | 中 | 中高 | 极高 | 高 | 可调 | 高 |
| 表单/工单友好度 | ★★★★ | ★★★★ | ★★ | ★★★★★ | ★★★★ | ★★★ |
| 投屏/打印 | ★★★★ | ★★★★★ | ★★ | ★★★★ | ★★★★ | ★★★★ |
| 中控室值守 | ★★★★ | ★★★ | ★★★★★ | ★★★ | ★★★★ | ★★★★ |
| 评审演示效果 | ★★★★★ | ★★★ | ★★★★★ | ★★★ | ★★★★ | ★★★★ |
| 开发成本 | 低 | 最低 | 高（需三维资产） | 低 | 最高（需先建 token 体系） | 中 |
| 与现有 AntD 5 契合 | ★★★★★ | ★★★★★ | ★★ | ★★★★ | ★★★ | ★★★★★ |
| 需要新增依赖 | 图表库 | 图表库 | 图表库 | 图表库 | 图表库 + token 体系 | 图表库 |
三、可以直接并排看的对比
下面是把两个 Demo 同屏嵌入，方便直接比对同一块内容的两种处理方式。
方案 A · 浅色后台 + 暗色驾驶舱独立打开 →
方案 C · 全站暗色工业大屏独立打开 →
方案 D · 深色侧栏 + 浅色内容区独立打开 →
方案 E · 双主题 + 双布局独立打开 →
四、五套都遵守的硬约束
- 状态色语义锁定且不串味：绿=正常/运行、黄=预警/待处理、红=故障/严重、灰=停机/禁用、蓝=已确认/信息。全站不超过一个品牌主色加一个强调色。涨跌另有箭头与中性色，不复用状态色。
- 告警三重编码：颜色 + 文字 + 形状/角标，绝不只靠颜色区分（色盲友好）。
- 工业可读性硬指标：核心告警数值 ≥ 24px，常规标签 ≥ 14px，正文与背景对比度 ≥ 4.5:1。
- 六层闭环在导航上一一对应：数据融合 · 智能诊断 · 预测评估 · 知识沉淀 · 交互赋能 · 集成呈现，不增设无归属菜单。
- 实时性可见：时间戳与脉冲指示常驻，运维随时知道是不是活数据。
- 表格即真相：诊断记录、工单、模型清单以结构化表格为主，图表只做趋势摘要。
- 孪生视图零三维依赖：沿用睿铂原型的纯 SVG 手绘手法，不引入 three.js，不需要模型资产。
技术前提提醒：现有前端是 React + TypeScript + Vite + Ant Design 5，样式为手写 CSS（
落地到生产代码时，无论选哪套都需要先做三件事： ① 引入
选定方向后我可以直接把这三步落到
frontend/src/styles.css 仅 63 行），
页面基本是 Card + Form + Table 裸用 AntD，package.json 里没有图表库。
落地到生产代码时，无论选哪套都需要先做三件事： ① 引入
ConfigProvider + theme.token 把颜色、字阶、圆角、间距沉淀成全局 token；
② 新增图表依赖（ECharts 或 Recharts，二选一）；
③ 把 AppLayout.tsx 与 styles.css 重写为对应的布局与主题层。
选定方向后我可以直接把这三步落到
C:\project\gxu_wind_fault_warning\frontend\，并对接现有 frontend/src/api/ 下的接口层。