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

frontend/src/components/SubsystemCard.vue

@@ -27,26 +27,26 @@ const props = defineProps<{
 
 const bgColor = computed(() => {
   const colors: Record<string, string> = {
-    W: '#1C2A3A',
-    DM: '#1C3A2E',
-    CC: '#3A1C28',
-    AP: '#1C2A3A',
-    QP: '#241B0A',
-    GF: '#1B202B',
+    W: 'var(--logo-w-bg)',
+    DM: 'var(--logo-dm-bg)',
+    CC: 'var(--logo-cc-bg)',
+    AP: 'var(--logo-ap-bg)',
+    QP: 'var(--logo-qp-bg)',
+    GF: 'var(--logo-gf-bg)',
   }
-  return colors[props.system.icon] || '#262C38'
+  return colors[props.system.icon] || 'var(--bg-panel-2)'
 })
 
 const iconColor = computed(() => {
   const colors: Record<string, string> = {
-    W: '#7FB8FF',
-    DM: '#7FFFC2',
-    CC: '#FF8E9C',
-    AP: '#8EC8FF',
-    QP: '#FFC97A',
-    GF: '#F2B544',
+    W: 'var(--tag-blue-text)',
+    DM: 'var(--tag-green-text)',
+    CC: 'var(--err)',
+    AP: 'var(--tag-blue-text)',
+    QP: 'var(--tag-amber-text)',
+    GF: 'var(--warn)',
   }
-  return colors[props.system.icon] || '#9AA3B5'
+  return colors[props.system.icon] || 'var(--text-mid)'
 })
 
 const description = computed(() => {
@@ -85,7 +85,7 @@ const handleClick = async () => {
 }
 
 .ext-card:hover {
-  border-color: #3A4356;
+  border-color: var(--hover-border);
 }
 
 .ext-top {