wonder/xinfra
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 新增 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:
hezhaohui
2026-07-15 14:38:58 +08:00
parent 392637fb6b
commit f1a63ee473
17 changed files with 402 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/cluster/ClusterList.vue
+13 -13
View File
@@ -86,9 +86,9 @@ const clusters = ref([
])
const nodes = ref([
{ name: 'bj-node-014', ip: '10.21.4.14', label: 'business-line=kodo', labelColor: '#8EC8FF', labelBorder: '#1C3A5C', taint: 'kodo:NoSchedule', spec: '64C/256G', cpu: 58, cpuClass: '', status: 'Ready', statusClass: 'ok' },
{ name: 'bj-node-015', ip: '10.21.4.15', label: 'business-line=kodo', labelColor: '#8EC8FF', labelBorder: '#1C3A5C', taint: 'kodo:NoSchedule', spec: '64C/256G', cpu: 62, cpuClass: '', status: 'Ready', statusClass: 'ok' },
{ name: 'bj-node-031', ip: '10.21.4.31', label: 'business-line=las', labelColor: '#C9A6FF', labelBorder: '#3A2C5C', taint: 'las:NoSchedule', spec: '32C/128G', cpu: 88, cpuClass: 'warn', status: '资源告警', statusClass: 'warn' },
{ name: 'bj-node-014', ip: '10.21.4.14', label: 'business-line=kodo', labelColor: 'var(--tag-blue-text)', labelBorder: 'var(--tag-blue-border)', taint: 'kodo:NoSchedule', spec: '64C/256G', cpu: 58, cpuClass: '', status: 'Ready', statusClass: 'ok' },
{ name: 'bj-node-015', ip: '10.21.4.15', label: 'business-line=kodo', labelColor: 'var(--tag-blue-text)', labelBorder: 'var(--tag-blue-border)', taint: 'kodo:NoSchedule', spec: '64C/256G', cpu: 62, cpuClass: '', status: 'Ready', statusClass: 'ok' },
{ name: 'bj-node-031', ip: '10.21.4.31', label: 'business-line=las', labelColor: 'var(--tag-purple-text)', labelBorder: 'var(--tag-purple-border)', taint: 'las:NoSchedule', spec: '32C/128G', cpu: 88, cpuClass: 'warn', status: '资源告警', statusClass: 'warn' },
{ name: 'bj-node-048', ip: '10.21.4.48', label: '未分配', labelColor: 'var(--text-dim)', labelBorder: 'var(--line)', taint: '—', spec: '32C/128G', cpu: 4, cpuClass: '', status: 'Ready · 空闲', statusClass: 'ok' },
])
</script>
@@ -197,21 +197,21 @@ tr.tr-hover:hover td {
}
.tag.zone-a {
color: #8EC8FF;
border-color: #1C3A5C;
background: #0E1C2C;
color: var(--tag-blue-text);
border-color: var(--tag-blue-border);
background: var(--tag-blue-bg);
}
.tag.zone-b {
color: #C9A6FF;
border-color: #3A2C5C;
background: #1A1430;
color: var(--tag-purple-text);
border-color: var(--tag-purple-border);
background: var(--tag-purple-bg);
}
.tag.zone-c {
color: #FFC97A;
border-color: #5C4A1C;
background: #241B0A;
color: var(--tag-amber-text);
border-color: var(--tag-amber-border);
background: var(--tag-amber-bg);
}
.tag.biz {
@@ -221,7 +221,7 @@ tr.tr-hover:hover td {
.bar-wrap {
width: 90px;
height: 5px;
background: #262C38;
background: var(--bar-bg);
border-radius: 3px;
overflow: hidden;
display: inline-block;