feat: 全面UI优化 — 5套主题系统 + 设计体系 + 菜单重组 + 页面优化

1. 主题系统扩展 (5套主题)
   - ocean-deep(深海蓝) / light-professional(明亮白) / midnight-purple(午夜紫)
   - pine-green(松林绿) / orange-vitality(活力橙)
   - useTheme hook 重写支持5主题 + 向后兼容
   - AppearanceSettings 5主题预览卡片

2. 设计体系 (index.css)
   - 按钮系统: dg-btn-primary/secondary/ghost/danger + 尺寸变体
   - 徽章系统: dg-badge-* (8色)
   - 卡片/表格: dg-card-section, dg-table-row, dg-table-header
   - 状态点: dg-status-dot-* (4色)
   - 动效关键帧: slideInLeft, scaleIn

3. 菜单重组 (menu.ts)
   - 5分组: 概览/数据源/工单/权限/系统
   - 6个图标更新: Code2/FileEdit/ShieldCheck/FolderLock/ScrollText/Timer
   - 新增 permission 权限码字段

4. Layout 侧边栏增强
   - 左侧渐变指示条 + 发光效果
   - hover 微动画 + 图标变色
   - 面包屑导航头部
   - 主题切换循环5主题

5. 核心页面优化
   - TicketsPage: 设计系统类 + 颜色对齐
   - QueriesPage: 去Card依赖 + dg-table/dg-btn统一
   - Breadcrumb组件 + useBreadcrumb hook

frontend/src/index.css

@@ -3,8 +3,8 @@
 @tailwind utilities;
 
 @layer base {
+  /* ===== Theme 1: Ocean Deep (深蓝专业) — Default ===== */
   :root {
-    /* ===== Dark Theme (default) ===== */
     --background: 220 13% 5%;
     --foreground: 210 40% 98%;
     --card: 220 13% 7%;
@@ -33,7 +33,6 @@
     --sidebar-accent-foreground: 210 40% 98%;
     --sidebar-border: 220 13% 18%;
     --sidebar-ring: 217 91% 60%;
-
     --dg-bg-primary: #0d1117;
     --dg-bg-secondary: #161b22;
     --dg-bg-tertiary: #21262d;
@@ -50,7 +49,6 @@
     --dg-purple: #8957e5;
     --dg-cyan: #39c5cf;
     --dg-yellow: #d29922;
-
     --dg-card-hover-border: rgba(88, 166, 255, 0.5);
     --dg-gradient-start: #2563eb;
     --dg-gradient-end: #9333ea;
@@ -59,8 +57,62 @@
     --dg-input-focus-ring: rgba(96, 165, 250, 0.2);
   }
 
+  [data-theme="ocean-deep"] {
+    --background: 220 13% 5%;
+    --foreground: 210 40% 98%;
+    --card: 220 13% 7%;
+    --card-foreground: 210 40% 98%;
+    --popover: 220 13% 7%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 217 91% 60%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 220 13% 14%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 220 13% 14%;
+    --muted-foreground: 215 20% 55%;
+    --accent: 220 13% 14%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62% 50%;
+    --destructive-foreground: 0 0% 100%;
+    --border: 220 13% 18%;
+    --input: 220 13% 14%;
+    --ring: 217 91% 60%;
+    --radius: 0.625rem;
+    --sidebar-background: 220 13% 7%;
+    --sidebar-foreground: 210 40% 90%;
+    --sidebar-primary: 217 91% 60%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 220 13% 14%;
+    --sidebar-accent-foreground: 210 40% 98%;
+    --sidebar-border: 220 13% 18%;
+    --sidebar-ring: 217 91% 60%;
+    --dg-bg-primary: #0d1117;
+    --dg-bg-secondary: #161b22;
+    --dg-bg-tertiary: #21262d;
+    --dg-bg-hover: #30363d;
+    --dg-border: #30363d;
+    --dg-border-light: #21262d;
+    --dg-text-primary: #f0f6fc;
+    --dg-text-secondary: #8b949e;
+    --dg-text-muted: #6e7681;
+    --dg-blue: #58a6ff;
+    --dg-green: #3fb950;
+    --dg-red: #f85149;
+    --dg-orange: #f0883e;
+    --dg-purple: #8957e5;
+    --dg-cyan: #39c5cf;
+    --dg-yellow: #d29922;
+    --dg-card-hover-border: rgba(88, 166, 255, 0.5);
+    --dg-gradient-start: #2563eb;
+    --dg-gradient-end: #9333ea;
+    --dg-gradient-text-start: #60a5fa;
+    --dg-gradient-text-end: #c084fc;
+    --dg-input-focus-ring: rgba(96, 165, 250, 0.2);
+  }
+
+  /* ===== Theme 2: Light Professional (浅色商务) ===== */
+  [data-theme="light-professional"],
   [data-theme="light"] {
-    /* ===== Light Theme ===== */
     --background: 0 0% 100%;
     --foreground: 220 14% 10%;
     --card: 0 0% 100%;
@@ -89,7 +141,6 @@
     --sidebar-accent-foreground: 220 14% 10%;
     --sidebar-border: 220 13% 91%;
     --sidebar-ring: 217 91% 60%;
-
     --dg-bg-primary: #ffffff;
     --dg-bg-secondary: #f8f9fb;
     --dg-bg-tertiary: #f0f1f5;
@@ -106,7 +157,6 @@
     --dg-purple: #7c3aed;
     --dg-cyan: #0891b2;
     --dg-yellow: #ca8a04;
-
     --dg-card-hover-border: rgba(37, 99, 235, 0.3);
     --dg-gradient-start: #2563eb;
     --dg-gradient-end: #7c3aed;
@@ -114,6 +164,168 @@
     --dg-gradient-text-end: #6d28d9;
     --dg-input-focus-ring: rgba(37, 99, 235, 0.15);
   }
+
+  /* ===== Theme 3: Midnight Purple (午夜紫韵) ===== */
+  [data-theme="midnight-purple"] {
+    --background: 264 56% 4%;
+    --foreground: 280 100% 98%;
+    --card: 264 48% 8%;
+    --card-foreground: 280 100% 98%;
+    --popover: 264 48% 8%;
+    --popover-foreground: 280 100% 98%;
+    --primary: 270 91% 65%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 264 40% 20%;
+    --secondary-foreground: 280 100% 98%;
+    --muted: 264 40% 20%;
+    --muted-foreground: 280 30% 60%;
+    --accent: 264 40% 20%;
+    --accent-foreground: 280 100% 98%;
+    --destructive: 348 100% 72%;
+    --destructive-foreground: 264 56% 4%;
+    --border: 264 40% 20%;
+    --input: 264 40% 20%;
+    --ring: 270 91% 65%;
+    --radius: 0.625rem;
+    --sidebar-background: 264 48% 6%;
+    --sidebar-foreground: 280 100% 92%;
+    --sidebar-primary: 270 91% 65%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 264 40% 20%;
+    --sidebar-accent-foreground: 280 100% 98%;
+    --sidebar-border: 264 40% 20%;
+    --sidebar-ring: 270 91% 65%;
+    --dg-bg-primary: #0a0612;
+    --dg-bg-secondary: #130c21;
+    --dg-bg-tertiary: #1c1330;
+    --dg-bg-hover: #2d1f4a;
+    --dg-border: #2d1f4a;
+    --dg-border-light: #1c1330;
+    --dg-text-primary: #faf5ff;
+    --dg-text-secondary: #b794c7;
+    --dg-text-muted: #7c5a8a;
+    --dg-blue: #818cf8;
+    --dg-green: #34d399;
+    --dg-red: #fb7185;
+    --dg-orange: #fb923c;
+    --dg-purple: #c084fc;
+    --dg-cyan: #22d3ee;
+    --dg-yellow: #facc15;
+    --dg-card-hover-border: rgba(192, 132, 252, 0.5);
+    --dg-gradient-start: #9333ea;
+    --dg-gradient-end: #c084fc;
+    --dg-gradient-text-start: #a855f7;
+    --dg-gradient-text-end: #c084fc;
+    --dg-input-focus-ring: rgba(192, 132, 252, 0.2);
+  }
+
+  /* ===== Theme 4: Pine Green (松绿自然) ===== */
+  [data-theme="pine-green"] {
+    --background: 150 25% 5%;
+    --foreground: 140 60% 97%;
+    --card: 150 25% 9%;
+    --card-foreground: 140 60% 97%;
+    --popover: 150 25% 9%;
+    --popover-foreground: 140 60% 97%;
+    --primary: 142 71% 45%;
+    --primary-foreground: 150 25% 5%;
+    --secondary: 150 20% 18%;
+    --secondary-foreground: 140 60% 97%;
+    --muted: 150 20% 18%;
+    --muted-foreground: 150 20% 55%;
+    --accent: 150 20% 18%;
+    --accent-foreground: 140 60% 97%;
+    --destructive: 0 90% 72%;
+    --destructive-foreground: 150 25% 5%;
+    --border: 150 20% 18%;
+    --input: 150 20% 18%;
+    --ring: 142 71% 45%;
+    --radius: 0.625rem;
+    --sidebar-background: 150 25% 7%;
+    --sidebar-foreground: 140 40% 88%;
+    --sidebar-primary: 142 71% 45%;
+    --sidebar-primary-foreground: 150 25% 5%;
+    --sidebar-accent: 150 20% 18%;
+    --sidebar-accent-foreground: 140 60% 97%;
+    --sidebar-border: 150 20% 18%;
+    --sidebar-ring: 142 71% 45%;
+    --dg-bg-primary: #0a1210;
+    --dg-bg-secondary: #111f1a;
+    --dg-bg-tertiary: #192c24;
+    --dg-bg-hover: #253d32;
+    --dg-border: #253d32;
+    --dg-border-light: #192c24;
+    --dg-text-primary: #f0fdf4;
+    --dg-text-secondary: #86b8a0;
+    --dg-text-muted: #5a7c6b;
+    --dg-blue: #38bdf8;
+    --dg-green: #4ade80;
+    --dg-red: #f87171;
+    --dg-orange: #fb923c;
+    --dg-purple: #c084fc;
+    --dg-cyan: #2dd4bf;
+    --dg-yellow: #facc15;
+    --dg-card-hover-border: rgba(74, 222, 128, 0.5);
+    --dg-gradient-start: #059669;
+    --dg-gradient-end: #10b981;
+    --dg-gradient-text-start: #059669;
+    --dg-gradient-text-end: #34d399;
+    --dg-input-focus-ring: rgba(74, 222, 128, 0.2);
+  }
+
+  /* ===== Theme 5: Orange Vitality (橙光活力) ===== */
+  [data-theme="orange-vitality"] {
+    --background: 30 35% 5%;
+    --foreground: 30 100% 97%;
+    --card: 30 30% 9%;
+    --card-foreground: 30 100% 97%;
+    --popover: 30 30% 9%;
+    --popover-foreground: 30 100% 97%;
+    --primary: 25 95% 53%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 30 25% 18%;
+    --secondary-foreground: 30 100% 97%;
+    --muted: 30 25% 18%;
+    --muted-foreground: 30 25% 55%;
+    --accent: 30 25% 18%;
+    --accent-foreground: 30 100% 97%;
+    --destructive: 0 80% 70%;
+    --destructive-foreground: 30 35% 5%;
+    --border: 30 25% 18%;
+    --input: 30 25% 18%;
+    --ring: 25 95% 53%;
+    --radius: 0.625rem;
+    --sidebar-background: 30 30% 7%;
+    --sidebar-foreground: 30 80% 88%;
+    --sidebar-primary: 25 95% 53%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 30 25% 18%;
+    --sidebar-accent-foreground: 30 100% 97%;
+    --sidebar-border: 30 25% 18%;
+    --sidebar-ring: 25 95% 53%;
+    --dg-bg-primary: #110d08;
+    --dg-bg-secondary: #1d1610;
+    --dg-bg-tertiary: #2b1f16;
+    --dg-bg-hover: #3d2d20;
+    --dg-border: #3d2d20;
+    --dg-border-light: #2b1f16;
+    --dg-text-primary: #fef7ed;
+    --dg-text-secondary: #d4a574;
+    --dg-text-muted: #9c7a54;
+    --dg-blue: #60a5fa;
+    --dg-green: #4ade80;
+    --dg-red: #f87171;
+    --dg-orange: #fb923c;
+    --dg-purple: #a78bfa;
+    --dg-cyan: #2dd4bf;
+    --dg-yellow: #fcd34d;
+    --dg-card-hover-border: rgba(251, 146, 60, 0.5);
+    --dg-gradient-start: #ea580c;
+    --dg-gradient-end: #f59e0b;
+    --dg-gradient-text-start: #f97316;
+    --dg-gradient-text-end: #fbbf24;
+    --dg-input-focus-ring: rgba(251, 146, 60, 0.2);
+  }
 }
 
 @layer base {
@@ -179,12 +391,109 @@
   .scrollbar-thin::-webkit-scrollbar-thumb:hover {
     background: var(--dg-text-muted);
   }
+  [data-theme="light-professional"] .scrollbar-thin::-webkit-scrollbar-thumb,
   [data-theme="light"] .scrollbar-thin::-webkit-scrollbar-thumb {
     background: #d1d5db;
   }
+  [data-theme="light-professional"] .scrollbar-thin::-webkit-scrollbar-thumb:hover,
   [data-theme="light"] .scrollbar-thin::-webkit-scrollbar-thumb:hover {
     background: #9ca3af;
   }
+
+  /* ===== Design System Utilities ===== */
+
+  /* Buttons */
+  .dg-btn {
+    @apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200;
+  }
+  .dg-btn-primary {
+    @apply dg-btn dg-gradient-bg text-white hover:opacity-90 active:scale-[0.98];
+  }
+  .dg-btn-secondary {
+    @apply dg-btn bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)] active:scale-[0.98];
+  }
+  .dg-btn-ghost {
+    @apply dg-btn text-[var(--dg-text-secondary)] hover:bg-[var(--dg-bg-hover)] hover:text-[var(--dg-text-primary)];
+  }
+  .dg-btn-danger {
+    @apply dg-btn bg-red-500/10 text-red-400 hover:bg-red-500/20 active:scale-[0.98];
+  }
+  .dg-btn-sm {
+    @apply px-3 py-1.5 text-xs;
+  }
+  .dg-btn-lg {
+    @apply px-6 py-3 text-base;
+  }
+
+  /* Cards */
+  .dg-card-section {
+    @apply dg-card p-5;
+  }
+  .dg-card-header {
+    @apply text-sm font-semibold text-[var(--dg-text-primary)] mb-3;
+  }
+
+  /* Badges */
+  .dg-badge {
+    @apply inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium;
+  }
+  .dg-badge-blue {
+    @apply dg-badge bg-blue-500/10 text-blue-400;
+  }
+  .dg-badge-green {
+    @apply dg-badge bg-green-500/10 text-green-400;
+  }
+  .dg-badge-red {
+    @apply dg-badge bg-red-500/10 text-red-400;
+  }
+  .dg-badge-yellow {
+    @apply dg-badge bg-yellow-500/10 text-yellow-400;
+  }
+  .dg-badge-purple {
+    @apply dg-badge bg-purple-500/10 text-purple-400;
+  }
+  .dg-badge-orange {
+    @apply dg-badge bg-orange-500/10 text-orange-400;
+  }
+  .dg-badge-cyan {
+    @apply dg-badge bg-cyan-500/10 text-cyan-400;
+  }
+  .dg-badge-muted {
+    @apply dg-badge bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-secondary)];
+  }
+
+  /* Spacing helpers */
+  .dg-gap-section {
+    @apply gap-6;
+  }
+  .dg-gap-card {
+    @apply gap-4;
+  }
+
+  /* Table rows */
+  .dg-table-row {
+    @apply flex items-center px-4 py-3 border-b border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)] transition-colors duration-150;
+  }
+  .dg-table-header {
+    @apply flex items-center px-4 py-2.5 text-xs font-semibold text-[var(--dg-text-muted)] uppercase tracking-wider border-b border-[var(--dg-border)];
+  }
+
+  /* Status dot */
+  .dg-status-dot {
+    @apply w-2 h-2 rounded-full;
+  }
+  .dg-status-dot-green {
+    @apply dg-status-dot bg-green-400;
+  }
+  .dg-status-dot-red {
+    @apply dg-status-dot bg-red-400;
+  }
+  .dg-status-dot-yellow {
+    @apply dg-status-dot bg-yellow-400;
+  }
+  .dg-status-dot-blue {
+    @apply dg-status-dot bg-blue-400;
+  }
 }
 
 @keyframes fadeInUp {
@@ -197,3 +506,13 @@
     transform: translateY(0);
   }
 }
+
+@keyframes slideInLeft {
+  from { opacity: 0; transform: translateX(-8px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes scaleIn {
+  from { opacity: 0; transform: scale(0.95); }
+  to { opacity: 1; transform: scale(1); }
+}