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:
+16
-14
@@ -1,12 +1,14 @@
|
||||
/* iAOP 模板配置台样式(issue #132 / PRD 5.7)。深色主题,与 web/cockpit 一致。 */
|
||||
/* iAOP 模板配置台样式(issue #132 / PRD 5.7)。Ant Design 5 token 调色(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(与 shared/pro.css 一致;
|
||||
pro.css 在后加载会再次确认,plan themeTokens 可运行时覆盖) */
|
||||
--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);
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
body { margin: 0; font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
|
||||
@@ -40,9 +42,9 @@ select, input, textarea { padding: 7px 10px; border-radius: 6px; font-size: 13px
|
||||
textarea { width: 100%; font-family: Consolas, monospace; }
|
||||
button { padding: 7px 16px; border: none; border-radius: 6px; cursor: pointer;
|
||||
background: #1e293b; color: var(--cockpit-fg); font-size: 13px; }
|
||||
button.primary { background: var(--cockpit-accent); color: #04202a; }
|
||||
button.primary { background: var(--cockpit-accent); color: #ffffff; }
|
||||
button:disabled { opacity: .4; cursor: not-allowed; }
|
||||
button.danger { background: #7a1f1a; color: #ffb4ad; }
|
||||
button.danger { background: #ff4d4f; color: #cf1322; }
|
||||
|
||||
/* 三栏布局(超参页 / 编排页) */
|
||||
.split { display: grid; grid-template-columns: 220px 1fr 320px; gap: 12px; }
|
||||
@@ -61,7 +63,7 @@ table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 12p
|
||||
th, td { padding: 6px 8px; border-bottom: 1px solid var(--cockpit-grid-line);
|
||||
text-align: left; }
|
||||
th { color: var(--cockpit-fg-muted); font-weight: 400; }
|
||||
.sev-error { color: #ff3b30; }
|
||||
.sev-error { color: #ff4d4f; }
|
||||
.sev-warning { color: var(--cockpit-warn); }
|
||||
#import-summary { margin-top: 10px; font-size: 13px; }
|
||||
|
||||
@@ -87,7 +89,7 @@ th { color: var(--cockpit-fg-muted); font-weight: 400; }
|
||||
gap: 6px; min-height: 320px; background: var(--cockpit-bg); border-radius: 8px;
|
||||
padding: 8px; }
|
||||
.canvas-widget { border: 1px solid var(--cockpit-accent); border-radius: 6px;
|
||||
background: rgba(24,211,200,.08); font-size: 12px; padding: 4px 6px;
|
||||
background: rgba(22,119,255,.08); font-size: 12px; padding: 4px 6px;
|
||||
cursor: pointer; overflow: hidden; position: relative; }
|
||||
.canvas-widget.selected { outline: 2px solid var(--cockpit-warn); }
|
||||
.canvas-widget .ops { position: absolute; right: 4px; top: 2px; }
|
||||
@@ -97,8 +99,8 @@ th { color: var(--cockpit-fg-muted); font-weight: 400; }
|
||||
/* ④ 版本页 */
|
||||
.status-published { color: var(--cockpit-accent); }
|
||||
.status-rolledback { color: var(--cockpit-warn); }
|
||||
.diff-add { color: #2ecc71; }
|
||||
.diff-del { color: #ff3b30; }
|
||||
.diff-add { color: #52c41a; }
|
||||
.diff-del { color: #ff4d4f; }
|
||||
.diff-ctx { color: var(--cockpit-fg-muted); }
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
|
||||
Reference in New Issue
Block a user