组件审查结论:全站组件为自绘 HTML+CSS 仿 AntD(纯静态无组件库), pro.css 已统一设计 token,但各页 CSS/JS 残留一批旧配色硬编码, pro.css 覆盖不到,本次全部清理: - 旧 iOS 红 #ff3b30 → --ant-error #ff4d4f(告警 P0/严重度/DLP 条/ 工艺 alarm 态/diff 删除行) - 旧橙 #f5a623 → --ant-warning #faad14(P1 告警/warning 态/暂存徽章) - 旧 iOS 绿 #2ecc71 → --ant-success #52c41a(running 态/prod 徽章/ 索引完成/路由本地标签/权限矩阵) - 杂色蓝统一 → --ant-primary #1677ff:发送键 #0ea5e9、P2 告警 #3aa0ff、编排画布残留青 rgba(24,211,200)、旧气泡 #1d4ed8 - 主色按钮上的深色文字 #04202a → #fff(对比度修正) - 灰 #64748b → --ant-text-tertiary rgba(0,0,0,0.45) - 各页 CSS :root 深色默认变量值(#0b1220/#13203a/#18d3c8 等死值) 对齐为 AntD 亮色默认值,修正"深色主题"过时注释 - 删除已无任何引用的旧深色登录页样式 auth/auth.css 顺带修复实测发现的 bug:SPA 外壳内直达 admin/studio 子页时页签 不切换——studio.js/admin.js 的 Tab 事件在异步 boot(user) 中绑定, bindPageTabs 的 window load 初始激活可能早于绑定完成,改为带重试 的激活(直到 Tab 点亮,最多 10s)。实测 #/admin/#alerts 直达后 page-alerts 正确激活。
web/cockpit — iAOP 配置化驾驶舱 Web 前端
issue #131 / PRD 5.5「⑤ 配置化驾驶舱」。纯静态 HTML + 原生 JS(无构建链), 按布局资产渲染:四状态工艺流程视图、实时趋势、KPI 卡片、告警面板、NL 查询入口。
目录
web/cockpit/
├── index.html # 驾驶舱页面(顶栏模板切换 + 栅格容器)
├── cockpit.css # 样式(调色由 themeTokens CSS 变量注入)
├── cockpit.js # 渲染客户端:组件注册表 + WidgetHost + 推理服务对接
├── plans/ # 编译产物(前端唯一数据源,fetch 加载)
│ ├── ti-cl4.json # ← templates/ti-cl4/dashboard/cockpit.ti.yaml
│ ├── resin.json # ← templates/resin/dashboard/cockpit.resin.yaml
│ └── alarm_panel.ti.json # ← templates/ti-cl4/dashboard/alarm_panel.ti.yaml
└── scripts/
└── build_plans.py # 布局/告警 YAML → RenderPlan JSON 编译脚本
使用
# 1) 模板资产变更后重新编译渲染计划(开发期依赖 PyYAML)
python web/cockpit/scripts/build_plans.py
# 2) 本地起静态服务(首屏全本地资源,≤ 2s,PRD 9)
cd web/cockpit && python -m http.server 8080
# 浏览器打开 http://localhost:8080 (Chrome / Edge 最新两版)
设计要点
- 切换模板零改码(PRD 5.5 验收):前端只消费
plans/*.json渲染计划, 组件注册表(ProcessView/TrendChart/KpiCard/AlarmPanel/NlQuery,键名对齐core/cockpit/renderer.py的WIDGET_COMPONENT)+ 通用 WidgetHost 逐个挂载; ti-cl4 ↔ resin 切换 = 加载另一份 plan JSON,布局/主题/绑定全部随之重排。 - 主题:
theme: dark的调色由 plan JSON 的themeTokens注入 CSS 变量, 切主题 = 换一套变量,组件样式不动。 - 告警面板:severity P0/P1/P2 配色、
requireAck确认、showSop处置建议、 排序与最大条数全部来自alarm_panel.ti.json(#52render_alarm_panel_props)。 - 推理服务对接:
http://39.101.182.167:30800——/health(顶栏状态灯)、/v1/models(取模型名)、/v1/chat/completions(NL 查询)。 - 模拟数据:时序总线尚未提供点位订阅接口,趋势/KPI/告警暂用按 bind 点 ID
确定性播种的模拟源(
DataFeed),接入真实总线只需替换该对象的三个方法。
浏览器兼容
Chrome / Edge 最新两版(PRD 9):使用了 fetch、Promise、classList、
CSS Grid、String.prototype.replaceWith 等基准特性,无 ES 模块/构建依赖。