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:
@@ -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; }
|
||||
+2
-2
@@ -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; }
|
||||
|
||||
+1
-1
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user