bot_ym/iAOP
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
组件审查结论：全站组件为自绘 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:
bot_dev1
2026-08-06 08:20:17 +08:00
parent cfa976cac3
commit 8b68d015c2
12 changed files with 98 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/admin/admin.css
+11 -9
View File
@@ -1,7 +1,9 @@
/* iAOP 管理控制台样式（issue #135）。深色主题，与 cockpit/studio 一致。 */
/* iAOP 管理控制台样式（issue #135）。Ant Design 5 token 调色（2026-08 全站 AntD Pro 重构）。 */
:root {
--bg: #0b1220; --surface: #13203a; --fg: #e6edf6; --muted: #8aa0bd;
--accent: #18d3c8; --warn: #f5a623; --line: rgba(255,255,255,.06);
/* 默认值 = Ant Design 5 亮色 token（pro.css 在后加载再次确认） */
--bg: #f0f2f5; --surface: #ffffff; --fg: rgba(0,0,0,0.88);
--muted: rgba(0,0,0,0.45);
--accent: #1677ff; --warn: #faad14; --line: rgba(5,5,5,0.06);
}
* { box-sizing: border-box; }
body { margin: 0; font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
@@ -13,7 +15,7 @@ h1 { font-size: 18px; color: var(--accent); margin: 0; }
h1 .sub { font-size: 12px; color: var(--muted); font-weight: 400; }
#topbar-right { display: flex; gap: 14px; align-items: center; font-size: 13px; }
#topbar-right a { color: var(--accent); text-decoration: none; }
.hint { font-size: 11px; color: #64748b; }
.hint { font-size: 11px; color: rgba(0,0,0,0.45); }
#tabs { display: flex; gap: 4px; padding: 8px 16px 0; }
.tab { padding: 8px 18px; border: 1px solid var(--line); border-bottom: none;
@@ -32,7 +34,7 @@ select, input { padding: 7px 10px; border-radius: 6px; font-size: 13px;
border: 1px solid var(--line); background: var(--bg); color: var(--fg); }
button { padding: 6px 14px; border: none; border-radius: 6px; cursor: pointer;
background: #1e293b; color: var(--fg); font-size: 12px; }
button.primary { background: var(--accent); color: #04202a; }
button.primary { background: var(--accent); color: #ffffff; }
button:disabled { opacity: .4; cursor: not-allowed; }
table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13px; }
@@ -41,14 +43,14 @@ th { color: var(--muted); font-weight: 400; }
/* 模型阶段徽标 */
.stage { padding: 2px 10px; border-radius: 10px; font-size: 12px; }
.stage-dev { background: rgba(138,160,189,.15); color: var(--muted); }
.stage-staging { background: rgba(245,166,35,.15); color: var(--warn); }
.stage-prod { background: rgba(46,204,113,.15); color: #2ecc71; }
.stage-dev { background: rgba(0,0,0,0.06); color: var(--muted); }
.stage-staging { background: rgba(250,173,20,.15); color: var(--warn); }
.stage-prod { background: rgba(82,196,26,.15); color: #52c41a; }
/* 知识库 */
.detail { margin-top: 12px; background: var(--bg); border-radius: 6px; padding: 10px;
font-size: 12px; color: var(--muted); max-height: 260px; overflow-y: auto; }
.idx-ok { color: #2ecc71; }
.idx-ok { color: #52c41a; }
.idx-pending { color: var(--warn); }
/* 告警 */
web/admin/admin.js
+3 -3
View File
@@ -20,9 +20,9 @@ var KB_KEY = "iaop.admin.kb.v1";
var currentUserName = "anonymous";
var severityStyles = {
P0: { fg: "#ff3b30", bg: "rgba(255,59,48,0.12)", border: "#ff3b30" },
P1: { fg: "#f5a623", bg: "rgba(245,166,35,0.12)", border: "#f5a623" },
P2: { fg: "#3aa0ff", bg: "rgba(58,160,255,0.10)" }
P0: { fg: "#ff4d4f", bg: "rgba(255,77,79,0.12)", border: "#ff4d4f" },
P1: { fg: "#faad14", bg: "rgba(250,173,20,0.12)", border: "#faad14" },
P2: { fg: "#1677ff", bg: "rgba(22,119,255,0.10)" }
};
/* ---------------- 工具 ---------------- */
web/auth/auth.css
-71
View File
@@ -1,71 +0,0 @@
/* iAOP 登录页（issue #150 / PRD 8.2）—— 深色主题，对齐 web/cockpit、web/studio 调色 */
:root {
--auth-bg: #0f172a;
--auth-surface: #111c33;
--auth-surface-2: #0b1526;
--auth-border: #1e293b;
--auth-fg: #e2e8f0;
--auth-fg-muted: #94a3b8;
--auth-accent: #0ea5e9;
--auth-accent-2: #38bdf8;
--auth-danger: #ff3b30;
--auth-ok: #22c55e;
}
* { box-sizing: border-box; }
html, body {
margin: 0; padding: 0; height: 100%;
font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
background: var(--auth-bg); color: var(--auth-fg);
}
body { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
a { color: var(--auth-accent-2); }
.auth-card {
width: 360px; max-width: 92vw;
background: var(--auth-surface);
border: 1px solid var(--auth-border);
border-radius: 10px;
padding: 28px 26px 22px;
box-shadow: 0 10px 40px rgba(0,0,0,0.45);
}
.auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.auth-logo {
width: 30px; height: 30px; border-radius: 7px;
background: linear-gradient(135deg, var(--auth-accent), var(--auth-accent-2));
display: flex; align-items: center; justify-content: center;
font-weight: 700; color: #fff; font-size: 16px;
}
.auth-brand h1 { margin: 0; font-size: 17px; color: var(--auth-accent-2); font-weight: 600; }
.auth-sub { color: var(--auth-fg-muted); font-size: 12px; margin: 4px 0 22px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 12px; color: var(--auth-fg-muted); margin-bottom: 6px; }
.field input {
width: 100%; padding: 10px 12px;
background: var(--auth-surface-2);
border: 1px solid var(--auth-border);
border-radius: 7px; color: var(--auth-fg); font-size: 14px;
outline: none; transition: border-color .15s;
}
.field input:focus { border-color: var(--auth-accent); }
.field input[aria-invalid="true"] { border-color: var(--auth-danger); }
.auth-actions { display: flex; gap: 10px; margin-top: 6px; }
.btn {
flex: 1; padding: 10px 16px; border: none; border-radius: 7px;
font-size: 14px; cursor: pointer; font-weight: 500;
}
.btn-primary { background: var(--auth-accent); color: #fff; }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; }
.btn-ghost { background: transparent; color: var(--auth-fg-muted); border: 1px solid var(--auth-border); flex: 0 0 auto; }
.alert {
font-size: 12px; padding: 8px 10px; border-radius: 6px; margin-bottom: 14px;
display: none;
}
.alert.show { display: block; }
.alert-error { background: rgba(255,59,48,0.12); color: var(--auth-danger); border: 1px solid rgba(255,59,48,0.3); }
.alert-ok { background: rgba(34,197,94,0.12); color: var(--auth-ok); border: 1px solid rgba(34,197,94,0.3); }
.auth-foot { margin-top: 18px; font-size: 11px; color: var(--auth-fg-muted); text-align: center; line-height: 1.6; }
.role-hint { margin-top: 14px; font-size: 11px; color: var(--auth-fg-muted); background: var(--auth-surface-2); border: 1px dashed var(--auth-border); border-radius: 6px; padding: 8px 10px; }
web/auth/users.html
+2 -2
View File
@@ -32,8 +32,8 @@
background:var(--bg); color:var(--fg); font-size:13px; }
button { padding:5px 12px; border:none; border-radius:5px; cursor:pointer;
background:#1e293b; color:var(--fg); font-size:12px; }
button.primary { background:var(--accent); color:#04202a; }
button.danger { background:#7a1f1a; color:#ffb4ad; }
button.primary { background:var(--accent); color:#ffffff; }
button.danger { background:#ff4d4f; color:#cf1322; }
.row { display:flex; gap:8px; margin:10px 0; flex-wrap:wrap; align-items:center; }
.hint { font-size:11px; color:rgba(0,0,0,.45); }
.role-readonly { color:rgba(0,0,0,.45); } .role-engineer { color:#237804; }
web/auth/users.js
+1 -1
View File
@@ -138,7 +138,7 @@
["view", "edit", "publish", "manage"].forEach(function (a) {
var c = document.createElement("td");
c.textContent = PERM_MATRIX[r][a] ? "✓" : "✗";
c.style.color = PERM_MATRIX[r][a] ? "#2ecc71" : "#64748b";
c.style.color = PERM_MATRIX[r][a] ? "#52c41a" : "rgba(0,0,0,0.45)";
tr.appendChild(c);
});
tbody.appendChild(tr);
web/chat/assistant.css
+18 -16
View File
@@ -1,7 +1,9 @@
/* iAOP 对话助手增强版样式（issue #133）。深色主题，与 chat_widget.html / cockpit 一致。 */
/* iAOP 对话助手增强版样式（issue #133）。Ant Design 5 token 调色（2026-08 全站 AntD Pro 重构）。 */
:root {
--bg: #0f172a; --surface: #111c33; --surface-2: #1e293b;
--fg: #e2e8f0; --fg-muted: #94a3b8; --accent: #38bdf8; --warn: #f5a623;
/* 默认值 = Ant Design 5 亮色 token（pro.css 在后加载再次确认） */
--bg: #f0f2f5; --surface: #ffffff; --surface-2: rgba(0,0,0,0.04);
--fg: rgba(0,0,0,0.88); --fg-muted: rgba(0,0,0,0.45);
--accent: #1677ff; --warn: #faad14;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
@@ -11,10 +13,10 @@ body { margin: 0; font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
#topbar { display: flex; align-items: center; justify-content: space-between; }
h1 { font-size: 18px; color: var(--accent); margin: 0; }
h1 .sub { font-size: 12px; color: var(--fg-muted); font-weight: 400; }
.hint { font-size: 11px; color: #64748b; }
.hint { font-size: 11px; color: rgba(0,0,0,0.45); }
.dot { font-size: 13px; }
.dot.ok { color: #2ecc71; }
.dot.down { color: #ff3b30; }
.dot.ok { color: #52c41a; }
.dot.down { color: #ff4d4f; }
#messages { height: 480px; overflow-y: auto; border: 1px solid var(--surface-2);
border-radius: 8px; padding: 12px; background: var(--surface); margin-top: 10px; }
@@ -22,17 +24,17 @@ h1 .sub { font-size: 12px; color: var(--fg-muted); font-weight: 400; }
.msg .who { font-size: 12px; color: var(--fg-muted); }
.msg .text { display: inline-block; max-width: 88%; padding: 8px 12px; border-radius: 8px;
white-space: pre-wrap; font-size: 14px; line-height: 1.6; }
.user .text { background: #1d4ed8; }
.user .text { background: #1677ff; }
.bot .text { background: var(--surface-2); }
.meta { font-size: 11px; color: #64748b; margin-top: 3px; display: flex; gap: 8px;
.meta { font-size: 11px; color: rgba(0,0,0,0.45); margin-top: 3px; display: flex; gap: 8px;
flex-wrap: wrap; align-items: center; }
/* 路由分级标签（本地/云端/拦截） */
.route-tag { padding: 1px 8px; border-radius: 10px; font-size: 11px; }
.route-local { background: rgba(46,204,113,.15); color: #2ecc71; }
.route-local { background: rgba(82,196,26,.15); color: #52c41a; }
.route-cloud { background: rgba(56,189,248,.15); color: var(--accent); }
.route-block { background: rgba(255,59,48,.15); color: #ff3b30; }
.human-tag { background: rgba(245,166,35,.15); color: var(--warn);
.route-block { background: rgba(255,77,79,.15); color: #ff4d4f; }
.human-tag { background: rgba(250,173,20,.15); color: var(--warn);
padding: 1px 8px; border-radius: 10px; font-size: 11px; }
/* RAG 引用溯源（PRD 5.4 强制） */
@@ -40,7 +42,7 @@ h1 .sub { font-size: 12px; color: var(--fg-muted); font-weight: 400; }
padding: 4px 10px; background: rgba(56,189,248,.06); border-radius: 0 6px 6px 0; }
.citations .cite-title { color: var(--accent); font-size: 11px; margin-bottom: 2px; }
.citations .cite-item { color: var(--fg-muted); margin: 2px 0; }
.no-citation { margin-top: 6px; font-size: 11px; color: #64748b; }
.no-citation { margin-top: 6px; font-size: 11px; color: rgba(0,0,0,0.45); }
/* 场景输入区 */
.scenario-inputs { display: flex; gap: 8px; margin-top: 10px; align-items: center; }
@@ -48,16 +50,16 @@ h1 .sub { font-size: 12px; color: var(--fg-muted); font-weight: 400; }
/* DLP 拦截反馈条 */
#dlp-banner { margin-top: 10px; padding: 10px 12px; border-radius: 8px; font-size: 13px;
background: rgba(255,59,48,.10); border: 1px solid #ff3b30; color: #ffb4ad; }
background: rgba(255,77,79,.10); border: 1px solid #ff4d4f; color: #cf1322; }
#dlp-banner button { margin-left: 8px; padding: 4px 10px; font-size: 12px; border: none;
border-radius: 5px; cursor: pointer; background: var(--surface-2);
color: var(--fg); }
#panel { margin-top: 10px; display: flex; gap: 8px; }
select, input { padding: 8px; border-radius: 6px; border: 1px solid #334155;
background: #0b1526; color: var(--fg); }
select, input { padding: 8px; border-radius: 6px; border: 1px solid #d9d9d9;
background: #ffffff; color: var(--fg); }
input { flex: 1; }
button#send { padding: 8px 16px; border: none; border-radius: 6px; background: #0ea5e9;
button#send { padding: 8px 16px; border: none; border-radius: 6px; background: #1677ff;
color: #fff; cursor: pointer; }
button#send:disabled { opacity: .5; }
#footer-hint { margin-top: 8px; }
web/chat/chat_widget.html
+4 -4
View File
@@ -13,13 +13,13 @@
.msg { margin: 8px 0; }
.msg .who { font-size:12px; color:#94a3b8; }
.msg .text { display:inline-block; max-width:85%; padding:8px 12px; border-radius:8px; white-space:pre-wrap; }
.user .text { background:#1d4ed8; }
.user .text { background:#1677ff; }
.bot .text { background:#1e293b; }
.meta { font-size:11px; color:#64748b; margin-top:2px; }
.meta { font-size:11px; color:rgba(0,0,0,0.45); margin-top:2px; }
#panel { margin-top:10px; display:flex; gap:8px; }
select, input { padding:8px; border-radius:6px; border:1px solid #334155; background:#0b1526; color:#e2e8f0; }
select, input { padding:8px; border-radius:6px; border:1px solid #d9d9d9; background:#ffffff; color:#e2e8f0; }
input { flex:1; }
button { padding:8px 16px; border:none; border-radius:6px; background:#0ea5e9; color:#fff; cursor:pointer; }
button { padding:8px 16px; border:none; border-radius:6px; background:#1677ff; color:#fff; cursor:pointer; }
button:disabled { opacity:.5; }
</style>
</head>
web/cockpit/cockpit.css
+10 -10
View File
@@ -32,8 +32,8 @@ body {
#template-select { padding: 6px 10px; border-radius: 6px; border: 1px solid var(--cockpit-grid-line);
background: var(--cockpit-bg); color: var(--cockpit-fg); }
.status-dot { font-size: 14px; }
.status-dot.ok { color: #2ecc71; }
.status-dot.down { color: #ff3b30; }
.status-dot.ok { color: #52c41a; }
.status-dot.down { color: #ff4d4f; }
/* ---- 驾驶舱栅格（12 列基线，行高固定，widget 按 plan 的 grid.style 落位） -- */
#cockpit-grid {
@@ -70,14 +70,14 @@ body {
.stage .stage-state { font-size: 11px; margin-top: 6px; padding: 2px 8px; border-radius: 10px; }
.stage-arrow { align-self: center; color: var(--cockpit-fg-muted); font-size: 18px; }
/* 四状态配色（running/warning/alarm/offline，对齐 #51 states 语义） */
.state-running { box-shadow: inset 0 0 0 1px #2ecc71; }
.state-running .stage-state { background: rgba(46,204,113,.15); color: #2ecc71; }
.state-running { box-shadow: inset 0 0 0 1px #52c41a; }
.state-running .stage-state { background: rgba(82,196,26,.15); color: #52c41a; }
.state-warning { box-shadow: inset 0 0 0 1px var(--cockpit-warn); }
.state-warning .stage-state { background: rgba(245,166,35,.15); color: var(--cockpit-warn); }
.state-alarm { box-shadow: inset 0 0 0 1px #ff3b30; }
.state-alarm .stage-state { background: rgba(255,59,48,.15); color: #ff3b30; }
.state-warning .stage-state { background: rgba(250,173,20,.15); color: var(--cockpit-warn); }
.state-alarm { box-shadow: inset 0 0 0 1px #ff4d4f; }
.state-alarm .stage-state { background: rgba(255,77,79,.15); color: #ff4d4f; }
.state-offline { opacity: .55; }
.state-offline .stage-state { background: rgba(138,160,189,.15); color: var(--cockpit-fg-muted); }
.state-offline .stage-state { background: rgba(0,0,0,0.06); color: var(--cockpit-fg-muted); }
/* ---- TrendChart --------------------------------------------------------- */
.trend-bind { font-size: 11px; color: var(--cockpit-fg-muted); margin-bottom: 4px; }
@@ -95,7 +95,7 @@ body {
.alarm-item .sev { font-weight: 700; }
.alarm-item .msg { flex: 1; }
.alarm-item .ack-btn { padding: 2px 10px; border: none; border-radius: 4px; cursor: pointer;
background: var(--cockpit-accent); color: #04202a; font-size: 11px; }
background: var(--cockpit-accent); color: #ffffff; font-size: 11px; }
.alarm-item .acked { color: var(--cockpit-fg-muted); font-size: 11px; }
.alarm-sop { font-size: 11px; color: var(--cockpit-fg-muted); margin-top: 2px; }
@@ -108,7 +108,7 @@ body {
border: 1px solid var(--cockpit-grid-line);
background: var(--cockpit-bg); color: var(--cockpit-fg); }
.nl-input-row button { padding: 6px 12px; border: none; border-radius: 6px; cursor: pointer;
background: var(--cockpit-accent); color: #04202a; font-size: 12px; }
background: var(--cockpit-accent); color: #ffffff; font-size: 12px; }
.nl-input-row button:disabled { opacity: .5; }
/* ---- 底栏 ---------------------------------------------------------------- */
web/mobile/mobile.css
+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; }
/* 底部页签 */
web/mobile/mobile.js
+3 -3
View File
@@ -19,9 +19,9 @@ var PLAN_URL = "../cockpit/plans/ti-cl4.json";
var ALARM_PLAN_URL = "../cockpit/plans/alarm_panel.ti.json";
var severityStyles = {
P0: { fg: "#ff3b30", bg: "rgba(255,59,48,0.12)", border: "#ff3b30" },
P1: { fg: "#f5a623", bg: "rgba(245,166,35,0.12)", border: "#f5a623" },
P2: { fg: "#3aa0ff", bg: "rgba(58,160,255,0.10)" }
P0: { fg: "#ff4d4f", bg: "rgba(255,77,79,0.12)", border: "#ff4d4f" },
P1: { fg: "#faad14", bg: "rgba(250,173,20,0.12)", border: "#faad14" },
P2: { fg: "#1677ff", bg: "rgba(22,119,255,0.10)" }
};
var brief = null; // 当前交接班摘要 props（render_handover_brief 同构）
web/shared/pro-header.js
+14 -4
View File
@@ -75,11 +75,21 @@
window.addEventListener("hashchange", function () {
activate(activeChildKey());
});
// 等页面自身脚本（studio.js/admin.js）绑好点击事件后再做初始激活
window.addEventListener("load", function () {
// 等页面自身脚本（studio.js/admin.js）绑好点击事件后再做初始激活。
// 注意：studio.js/admin.js 的 Tab 事件在异步 boot(user) 里绑定，
// window load 时可能尚未就绪——带重试地激活，直到 Tab 真的点亮。
var activateTries = 0;
function activateInitial() {
var h = activeChildKey();
if (h) activate(h);
});
if (!h) return;
var btn = tabsBar.querySelector('.tab[data-page="' + h + '"]');
if (!btn) return;
btn.click();
if (!btn.classList.contains("active") && ++activateTries < 40) {
setTimeout(activateInitial, 250); // 最多重试 10s
}
}
window.addEventListener("load", activateInitial);
// 页内 Tab 点击回写 hash（保持 URL 可分享）
tabsBar.addEventListener("click", function (e) {
var t = e.target.closest(".tab[data-page]");
web/studio/studio.css
+16 -14
View File
@@ -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) {