🐛 修复亮色主题下导航栏等组件的样式问题

- 添加亮色主题导航栏样式覆盖（白色半透明背景）
- 修复导航项悬停效果在亮色主题下的显示
- 修复用户信息区域的亮色主题样式
- 添加卡片、表格、模态框、输入框的亮色主题样式

这个修复解决了亮色主题下导航栏变黑、文字不可见的问题。

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

frontend/app.html

@@ -154,6 +154,49 @@
         linear-gradient(135deg, #e0e7ff 0%, #f0f4f8 50%, #fdf2f8 100%);
     }
 
+    /* 亮色主题导航栏 */
+    body.light-theme .navbar {
+      background: rgba(255, 255, 255, 0.85);
+      border-bottom: 1px solid rgba(102, 126, 234, 0.15);
+    }
+
+    body.light-theme .nav-item:hover {
+      background: rgba(102, 126, 234, 0.1);
+    }
+
+    body.light-theme .user-info {
+      background: rgba(102, 126, 234, 0.08);
+      border-color: rgba(102, 126, 234, 0.2);
+    }
+
+    /* 亮色主题卡片 */
+    body.light-theme .card {
+      background: rgba(255, 255, 255, 0.7);
+      box-shadow: 0 8px 32px rgba(102, 126, 234, 0.1);
+    }
+
+    /* 亮色主题表格 */
+    body.light-theme table tr:hover {
+      background: rgba(102, 126, 234, 0.05);
+    }
+
+    /* 亮色主题模态框 */
+    body.light-theme .modal-content {
+      background: rgba(255, 255, 255, 0.95);
+      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
+    }
+
+    /* 亮色主题输入框 */
+    body.light-theme .form-input {
+      background: rgba(255, 255, 255, 0.8);
+      border-color: rgba(102, 126, 234, 0.2);
+    }
+
+    body.light-theme .form-input:focus {
+      background: rgba(255, 255, 255, 0.95);
+      border-color: var(--accent-1);
+    }
+
     /* 防止 Vue 初始化前显示原始模板 */
     [v-cloak] { display: none !important; }