feat(theme): 添加主题切换功能并优化UI样式

- 集成主题切换功能，支持浅色、深色和自动模式
- 添加SunnyOutline、MoonOutline、ContrastOutline图标用于主题选择
- 创建主题下拉菜单组件，允许用户切换不同主题模式
- 重构CSS样式使用CSS变量替代硬编码颜色值
- 优化导航栏、用户菜单、客户端卡片等组件的视觉效果
- 调整头部高度从60px到56px，修改品牌文字样式
- 更新按钮、下拉菜单、模态框等交互元素的样式
- 在客户端视图中添加心跳指示器显示连接状态
- 实现客户端页面数据自动轮询刷新功能
- 优化版本号显示逻辑，确保始终以v开头显示
- 修复更新检查按钮只在有可用更新时才显示的问题

web/src/style.css

@@ -1,5 +1,44 @@
 @import "tailwindcss";
 
+/* 深色主题（默认） */
+:root,
+[data-theme="dark"] {
+  --color-bg-primary: #0f1419;
+  --color-bg-secondary: #15202b;
+  --color-bg-tertiary: #1e2732;
+  --color-bg-elevated: #253341;
+  --color-border: #38444d;
+  --color-border-light: #2f3336;
+  --color-text-primary: #e7e9ea;
+  --color-text-secondary: #8b98a5;
+  --color-text-muted: #6e767d;
+  --color-accent: #1d9bf0;
+  --color-accent-hover: #1a8cd8;
+  --color-success: #00ba7c;
+  --color-warning: #f7931a;
+  --color-error: #f4212e;
+  --color-info: #1d9bf0;
+}
+
+/* 浅色主题 */
+[data-theme="light"] {
+  --color-bg-primary: #ffffff;
+  --color-bg-secondary: #f7f9fa;
+  --color-bg-tertiary: #eff3f4;
+  --color-bg-elevated: #e7e9ea;
+  --color-border: #cfd9de;
+  --color-border-light: #eff3f4;
+  --color-text-primary: #0f1419;
+  --color-text-secondary: #536471;
+  --color-text-muted: #8b98a5;
+  --color-accent: #1d9bf0;
+  --color-accent-hover: #1a8cd8;
+  --color-success: #00ba7c;
+  --color-warning: #f7931a;
+  --color-error: #f4212e;
+  --color-info: #1d9bf0;
+}
+
 * {
   margin: 0;
   padding: 0;
@@ -10,24 +49,21 @@ body {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  background: var(--color-bg-primary);
+  color: var(--color-text-primary);
 }
 
 #app {
   min-height: 100vh;
 }
 
-/* Glass morphism utilities */
+/* Card utilities */
 .glass-card {
-  background: rgba(255, 255, 255, 0.1);
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
-  border-radius: 16px;
-  border: 1px solid rgba(255, 255, 255, 0.18);
-  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+  background: var(--color-bg-tertiary);
+  border-radius: 12px;
+  border: 1px solid var(--color-border);
 }
 
 .glass-card-hover:hover {
-  background: rgba(255, 255, 255, 0.15);
-  box-shadow: 0 12px 48px 0 rgba(31, 38, 135, 0.45);
-  transform: translateY(-4px);
+  background: var(--color-bg-elevated);
 }