feat(webui): 重构WebUI样式并默认启用暗色主题

.claude/settings.local.json

@@ -2,7 +2,16 @@
   "permissions": {
     "allow": [
       "Bash(dir:*)",
-      "Bash(tree:*)"
+      "Bash(tree:*)",
+      "Bash(git checkout:*)",
+      "Bash(/home/congsh/.claude/plugins/cache/claude-plugins-official/ralph-loop/f1be96f0fb58/scripts/setup-ralph-loop.sh:*)",
+      "Bash(python3:*)",
+      "Bash(pip3 install:*)",
+      "Bash(playwright install:*)",
+      "mcp__plugin_playwright_playwright__browser_navigate",
+      "mcp__plugin_playwright_playwright__browser_install",
+      "Bash(./:*)",
+      "Bash(npx playwright install:*)"
     ]
   }
 }

docker-compose.yml

@@ -45,19 +45,19 @@ services:
       redis:
         condition: service_healthy
 
-  # ==================== Web TUI 服务 ====================
+  # ==================== Web UI 服务 ====================
-  webtui:
+  webui:
     build:
       context: .
       dockerfile: Dockerfile
-    container_name: minenasai-webtui
+    container_name: minenasai-webui
     restart: unless-stopped
     ports:
-      - "${WEBTUI_PORT:-8080}:8080"
+      - "${WEBUI_PORT:-8080}:8080"
     environment:
       - MINENASAI_ENV=production
-      - MINENASAI_WEBTUI_HOST=0.0.0.0
+      - MINENASAI_WEBUI_HOST=0.0.0.0
-      - MINENASAI_WEBTUI_PORT=8080
+      - MINENASAI_WEBUI_PORT=8080
     volumes:
       - /volume2/docker/mineNasAi/data:/app/data
       - /volume2/docker/mineNasAi/logs:/app/logs

src/minenasai/webtui/static/webui/index.html

@@ -4,10 +4,18 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>MineNASAI - 控制台</title>
+
+    <!-- Google Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Noto+Sans+SC:wght@400;500;600;700&family=Orbitron:wght@500;600;700&display=swap" rel="stylesheet">
+
     <!-- Element Plus CSS -->
     <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
+
     <!-- xterm.js CSS -->
     <link rel="stylesheet" href="https://unpkg.com/xterm@5.3.0/css/xterm.css">
+
     <!-- 自定义样式 -->
     <link rel="stylesheet" href="/webui/css/webui.css">
 </head>
@@ -25,9 +33,6 @@
                         :default-active="activeMenu"
                         :collapse="isCollapsed"
                         :collapse-transition="false"
-                        :background-color="theme === 'dark' ? '#1a1b26' : '#ffffff'"
-                        :text-color="theme === 'dark' ? '#c0caf5' : '#303133'"
-                        active-text-color="#7aa2f7"
                         @select="handleMenuSelect"
                     >
                         <el-menu-item index="dashboard">

src/minenasai/webtui/static/webui/js/app.js

@@ -54,8 +54,8 @@ const api = {
 // 创建 Vue 应用
 app = createApp({
     setup() {
-        // 主题状态
+        // 主题状态 - 默认暗色模式
-        const theme = ref(localStorage.getItem('minenasai-theme') || 'light');
+        const theme = ref(localStorage.getItem('minenasai-theme') || 'dark');
         
         // 组件状态
         const isCollapsed = ref(false);
@@ -218,14 +218,31 @@ app = createApp({
             }
         }
         
+        // 应用主题到全局（html/body），确保 Element Plus 弹层与透明容器生效
+        function applyThemeClass(value) {
+            const root = document.documentElement;
+            const body = document.body;
+            if (value === 'light') {
+                root.classList.add('theme-light');
+                body.classList.add('theme-light');
+            } else {
+                root.classList.remove('theme-light');
+                body.classList.remove('theme-light');
+            }
+        }
+        
         // 切换主题
         function toggleTheme() {
             theme.value = theme.value === 'dark' ? 'light' : 'dark';
             localStorage.setItem('minenasai-theme', theme.value);
+            applyThemeClass(theme.value);
         }
         
         // 初始化
         onMounted(() => {
+            // 根据存储应用主题到全局
+            applyThemeClass(theme.value);
+            
             loadConfig();
             loadStats();
             loadAgents();