Files
iAOP/web/cockpit
bot_dev1 7a2e45e7c4 feat: 全站 Ant Design Pro 风格重构 + 登录守卫与角色门户(issue #131/#134)
- 新增 web/shared:pro.css(AntD 5 设计系统,旧 CSS 变量统一映射 AntD 色板)、
  session.js(后端优先+本地账号降级双轨会话,IAOP_AUTH 兼容层)、
  pro-header.js(全站统一 Pro 导航条:logo/页题/用户角色 Tag/退出)
- 门户 web/index.html:未登录跳登录页(next 回跳),登录后按角色过滤
  可见模块(readonly→驾驶舱/助手/移动端;engineer→+配置台;admin→全部)
- 登录页 auth/login.html 重写为 Ant Design Pro 风格,本地降级模式自动
  播种演示账号(admin/engineer/viewer),保留 OIDC SSO 双轨入口
- user_store.js 新增 verify() + seedDefaults() 默认账号播种
- 六模块页统一接入 pro.css + 统一导航条 + 登录守卫(PRD 8.2)
- 驾驶舱主题 dark→light(Ant Design 5 色板):renderer.py THEME_TOKENS、
  ti-cl4/resin 模板 theme、告警三级配色对齐 AntD(P0 #ff4d4f/P1 #faad14/
  P2 #1677ff),渲染计划已重编(build_plans.py)
- 验证:core/cockpit 86 单测通过;JS 语法检查通过;静态冒烟全 200
2026-08-05 14:17:37 +08:00
..

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(#52 render_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 模块/构建依赖。