前端: 浅色模式 + 系统自动主题

- 引入语义化 CSS 变量令牌(bg/surface/edge/ink/muted/accent 等), data-theme 三态切换
- theme store(localStorage + 系统偏好跟随), 首屏内联脚本防主题闪烁
- ThemeToggle 组件(浅色/深色/跟随系统) 置于导航与控制台顶栏
- 全量替换硬编码 zinc/emerald/red 类为令牌, 图表基线/状态色随主题适配
- 浅色对比度校准(accent/err/warn 深浅各一套)

Co-Authored-By: Claude <noreply@anthropic.com>

web/src/components/ui/ThemeToggle.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { PhSun, PhMoon, PhMonitor } from '@phosphor-icons/vue'
+import { useThemeStore } from '@/stores/theme'
+
+const theme = useThemeStore()
+const icon = computed(() => {
+  switch (theme.resolved) {
+    case 'light':
+      return PhSun
+    case 'dark':
+      return PhMoon
+    default:
+      return PhMonitor
+  }
+})
+const label = computed(() => {
+  const names = { light: '浅色', dark: '深色', system: '跟随系统' }
+  return names[theme.mode]
+})
+</script>
+
+<template>
+  <button
+    class="inline-flex h-8 items-center gap-1.5 rounded-md px-2 text-muted transition hover:bg-surface2 hover:text-ink"
+    :title="`主题：${label}，点击切换`"
+    :aria-label="`主题：${label}，点击切换`"
+    @click="theme.cycle()"
+  >
+    <component :is="icon" :size="15" weight="bold" />
+  </button>
+</template>