feat(frontend): 支持深色/浅色模式切换,统一主题变量体系

- 新增 useTheme composable,支持 light/dark 双主题,默认浅色模式
- 主题偏好持久化到 localStorage,支持跟随系统主题
- AppHeader 顶栏添加 Moon/Sunny 切换图标,带旋转过渡动效
- variables.css 重构为 :root(浅色)/:root.dark(深色)双套变量
- 新增标签色系(蓝/紫/琥珀/绿)、节点色系、阴影、发光效果等语义化变量
- 全组件硬编码颜色替换为 CSS 变量,消除跨主题不一致
- global.css 添加主题切换过渡动画(background/border/box-shadow)
- 涉及组件:AppHeader、AppSidebar、SubsystemCard、AuditLogTable
- 涉及页面:Dashboard、Resource、Cluster、Config、Task、Service、Login
This commit is contained in:
2026-07-15 14:38:58 +08:00
parent 392637fb6b
commit f1a63ee473
17 changed files with 402 additions and 106 deletions
+4 -4
View File
@@ -135,7 +135,7 @@ const handleLogin = async () => {
font-family: var(--mono);
font-size: 16px;
font-weight: 600;
color: #08140F;
color: var(--bg-deep);
}
.login-header h2 {
@@ -174,7 +174,7 @@ const handleLogin = async () => {
}
:deep(.el-input__wrapper:hover) {
border-color: #3A4356;
border-color: var(--hover-border);
}
:deep(.el-input__wrapper.is-focus) {
@@ -188,11 +188,11 @@ const handleLogin = async () => {
:deep(.el-button--primary) {
background: var(--accent);
border-color: var(--accent);
color: #06150F;
color: var(--bg-deep);
font-weight: 600;
}
:deep(.el-button--primary:hover) {
background: #55E8B3;
opacity: 0.9;
}
</style>