fix: 组件配色全面对齐 Ant Design 5 token + 修复 iframe 内页签初始激活(issue #131)

组件审查结论:全站组件为自绘 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 正确激活。
This commit is contained in:
2026-08-06 08:20:17 +08:00
parent cfa976cac3
commit 8b68d015c2
12 changed files with 98 additions and 150 deletions
+16 -13
View File
@@ -1,9 +1,12 @@
/* iAOP 移动端样式(issue #136):竖屏卡片流,字号档 sm/md/lg 由配置驱动。
* 调色与 Web 驾驶舱 THEME_TOKENS dark 一致(共享 themeTokens 注入)。 */
* 调色 = Ant Design 5 亮色 token(共享 themeTokens 注入,2026-08 AntD Pro 重构)。 */
:root {
--cockpit-bg: #0b1220; --cockpit-surface: #13203a; --cockpit-fg: #e6edf6;
--cockpit-fg-muted: #8aa0bd; --cockpit-accent: #18d3c8; --cockpit-warn: #f5a623;
--cockpit-grid-line: rgba(255,255,255,0.06);
/* 默认值 = Ant Design 5 亮色 token(pro.css 在后加载再次确认) */
--cockpit-bg: #f0f2f5; --cockpit-surface: #ffffff;
--cockpit-fg: rgba(0,0,0,0.88);
--cockpit-fg-muted: rgba(0,0,0,0.45); --cockpit-accent: #1677ff;
--cockpit-warn: #faad14;
--cockpit-grid-line: rgba(5,5,5,0.06);
--fs-body: 14px;
}
.fontsize-sm { --fs-body: 12px; } .fontsize-lg { --fs-body: 16px; }
@@ -27,7 +30,7 @@ body { margin: 0; font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
.card { background: var(--cockpit-surface); border: 1px solid var(--cockpit-grid-line);
border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; }
.card-title { font-size: 13px; color: var(--cockpit-fg-muted); margin-bottom: 8px; }
.hint { font-size: 11px; color: #64748b; }
.hint { font-size: 11px; color: rgba(0,0,0,0.45); }
.row { display: flex; gap: 8px; align-items: center; }
/* 四状态工艺(横向滑动卡片) */
@@ -38,14 +41,14 @@ body { margin: 0; font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
.stage-chip .d { font-size: 11px; color: var(--cockpit-fg-muted); margin-top: 3px; }
.stage-chip .s { font-size: 11px; margin-top: 5px; padding: 1px 8px; border-radius: 9px;
display: inline-block; }
.s-running { box-shadow: inset 0 0 0 1px #2ecc71; }
.s-running .s { background: rgba(46,204,113,.15); color: #2ecc71; }
.s-running { box-shadow: inset 0 0 0 1px #52c41a; }
.s-running .s { background: rgba(82,196,26,.15); color: #52c41a; }
.s-warning { box-shadow: inset 0 0 0 1px var(--cockpit-warn); }
.s-warning .s { background: rgba(245,166,35,.15); color: var(--cockpit-warn); }
.s-alarm { box-shadow: inset 0 0 0 1px #ff3b30; }
.s-alarm .s { background: rgba(255,59,48,.15); color: #ff3b30; }
.s-warning .s { background: rgba(250,173,20,.15); color: var(--cockpit-warn); }
.s-alarm { box-shadow: inset 0 0 0 1px #ff4d4f; }
.s-alarm .s { background: rgba(255,77,79,.15); color: #ff4d4f; }
.s-offline { opacity: .55; }
.s-offline .s { background: rgba(138,160,189,.15); color: var(--cockpit-fg-muted); }
.s-offline .s { background: rgba(0,0,0,0.06); color: var(--cockpit-fg-muted); }
/* KPI 两列网格 */
.kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
@@ -71,13 +74,13 @@ body { margin: 0; font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
.todo .pri { color: var(--cockpit-warn); }
.fold-btn { background: none; border: none; color: var(--cockpit-accent);
font-size: 12px; padding: 4px 0; cursor: pointer; }
.confirm-tag { display: inline-block; background: rgba(245,166,35,.15); color: var(--cockpit-warn);
.confirm-tag { display: inline-block; background: rgba(250,173,20,.15); color: var(--cockpit-warn);
padding: 2px 8px; border-radius: 9px; font-size: 11px; margin-top: 6px; }
select, button { padding: 9px 12px; border-radius: 8px; font-size: 14px; }
select { border: 1px solid var(--cockpit-grid-line); background: var(--cockpit-bg);
color: var(--cockpit-fg); flex: 1; }
button.primary { border: none; background: var(--cockpit-accent); color: #04202a; }
button.primary { border: none; background: var(--cockpit-accent); color: #ffffff; }
button:disabled { opacity: .5; }
/* 底部页签 */