feat: 新增深色模式支持；修复已知问题；样式优化

web/tailwind.config.js

@@ -4,8 +4,64 @@ export default {
     "./index.html",
     "./src/**/*.{vue,js,ts,jsx,tsx}",
   ],
+  darkMode: 'class',
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        // Primary brand colors / 主品牌色
+        primary: {
+          50: '#f0f9ff',
+          100: '#e0f2fe',
+          200: '#bae6fd',
+          300: '#7dd3fc',
+          400: '#38bdf8',
+          500: '#0ea5e9',
+          600: '#0284c7',
+          700: '#0369a1',
+          800: '#075985',
+          900: '#0c4a6e',
+        },
+        // Neutral colors for backgrounds / 中性色背景
+        surface: {
+          light: '#ffffff',
+          DEFAULT: '#f8fafc',
+          dark: '#0f172a',
+        },
+        // Card backgrounds / 卡片背景
+        card: {
+          light: '#ffffff',
+          dark: '#1e293b',
+        },
+        // Border colors / 边框色
+        border: {
+          light: '#e2e8f0',
+          dark: '#334155',
+        },
+        // Text colors / 文字色
+        content: {
+          primary: '#0f172a',
+          secondary: '#64748b',
+          muted: '#94a3b8',
+          'primary-dark': '#f1f5f9',
+          'secondary-dark': '#94a3b8',
+          'muted-dark': '#64748b',
+        },
+      },
+      boxShadow: {
+        'card': '0 1px 3px 0 rgb(0 0 0 / 0.05), 0 1px 2px -1px rgb(0 0 0 / 0.05)',
+        'card-hover': '0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.05)',
+        'card-dark': '0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.3)',
+        'card-hover-dark': '0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3)',
+      },
+      borderRadius: {
+        'xl': '0.875rem',
+        '2xl': '1rem',
+        '3xl': '1.5rem',
+      },
+      transitionTimingFunction: {
+        'bounce-in': 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',
+      },
+    },
   },
   plugins: [],
 }