改进端口状态检测逻辑

- 修复误报问题：默认为停止状态，需要确认后才显示运行中
- 简化检测逻辑，使用更可靠的Promise处理
- 添加简化版状态检测页面 status-checker.html
- 减少误判，提高检测准确性

.claude/settings.local.json

@@ -16,7 +16,9 @@
       "Bash(git add:*)",
       "Bash(git rm:*)",
       "Bash(git push:*)",
-      "Bash(git commit:*)"
+      "Bash(git commit:*)",
+      "Bash(for port in 5150 5151 5152 5153 5154 5155 5156 5157 5158 5159 5160 5161)",
+      "Bash(do echo -n \"Port $port: \")"
     ],
     "deny": [],
     "ask": []

index.html

@@ -502,98 +502,86 @@
         async function checkStatus(port) {
             const statusEl = document.getElementById(`status-${port}`);
 
-            // 使用多种方法检测端口状态
+            // 默认设置为停止状态
-            try {
+            let isRunning = false;
-                // 方法1: 创建一个script标签来测试
-                const testScript = document.createElement('script');
-                testScript.src = `http://localhost:${port}/vite.svg?t=${Date.now()}`;
-                testScript.onerror = () => {
-                    // 方法2: 使用Image对象检测
-                    const img = new Image();
-                    let isResolved = false;
 
-                    const checkTimeout = setTimeout(() => {
+            // 创建一个Promise来处理超时
-                        if (!isResolved) {
+            const checkPromise = new Promise((resolve) => {
-                            isResolved = true;
+                // 使用Image对象检测，这是最可靠的跨域方法
-                            statusEl.className = 'status status-stopped';
+                const img = new Image();
-                            statusEl.innerHTML = '<span class="status-dot"></span> 已停止';
+                let hasResponded = false;
-                        }
-                    }, 2000);
 
-                    img.onload = () => {
+                // 设置超时
-                        if (!isResolved) {
+                const timeout = setTimeout(() => {
-                            isResolved = true;
+                    if (!hasResponded) {
-                            clearTimeout(checkTimeout);
+                        hasResponded = true;
-                            statusEl.className = 'status status-running';
+                        resolve(false); // 超时则认为服务停止
-                            statusEl.innerHTML = '<span class="status-dot"></span> 运行中';
+                    }
-                        }
+                }, 1500);
-                    };
 
-                    img.onerror = () => {
+                img.onload = () => {
-                        // 方法3: 尝试使用XMLHttpRequest
+                    if (!hasResponded) {
-                        const xhr = new XMLHttpRequest();
+                        hasResponded = true;
-                        xhr.open('HEAD', `http://localhost:${port}/`, true);
+                        clearTimeout(timeout);
-                        xhr.timeout = 2000;
+                        resolve(true); // 加载成功说明服务运行中
-
+                    }
-                        xhr.onreadystatechange = function() {
-                            if (!isResolved && xhr.readyState === 4) {
-                                isResolved = true;
-                                clearTimeout(checkTimeout);
-                                // 即使有CORS错误，如果收到响应就说明服务在运行
-                                if (xhr.status === 0 || xhr.status === 200) {
-                                    // status为0通常表示CORS阻止，但服务器确实响应了
-                                    statusEl.className = 'status status-running';
-                                    statusEl.innerHTML = '<span class="status-dot"></span> 运行中';
-                                } else {
-                                    statusEl.className = 'status status-stopped';
-                                    statusEl.innerHTML = '<span class="status-dot"></span> 已停止';
-                                }
-                            }
-                        };
-
-                        xhr.onerror = function() {
-                            if (!isResolved) {
-                                isResolved = true;
-                                clearTimeout(checkTimeout);
-                                // 网络错误通常意味着服务未运行
-                                statusEl.className = 'status status-stopped';
-                                statusEl.innerHTML = '<span class="status-dot"></span> 已停止';
-                            }
-                        };
-
-                        try {
-                            xhr.send();
-                        } catch(e) {
-                            // 发送失败，但这可能是因为CORS
-                            if (!isResolved) {
-                                isResolved = true;
-                                clearTimeout(checkTimeout);
-                                statusEl.className = 'status status-running';
-                                statusEl.innerHTML = '<span class="status-dot"></span> 运行中';
-                            }
-                        }
-                    };
-
-                    // 尝试加载各种可能的静态资源
-                    const possiblePaths = [
-                        '/favicon.ico',
-                        '/vite.svg',
-                        '/index.html',
-                        '/assets/index.css'
-                    ];
-
-                    img.src = `http://localhost:${port}${possiblePaths[0]}?t=${Date.now()}`;
                 };
 
-                testScript.onload = () => {
+                img.onerror = () => {
-                    statusEl.className = 'status status-running';
+                    if (!hasResponded) {
-                    statusEl.innerHTML = '<span class="status-dot"></span> 运行中';
+                        hasResponded = true;
+                        clearTimeout(timeout);
+                        // 图片加载失败，尝试fetch检测
+                        fetch(`http://localhost:${port}/`, {
+                            mode: 'no-cors',
+                            cache: 'no-cache'
+                        }).then(() => {
+                            // 如果fetch没有抛出错误，说明服务可能在运行
+                            // 但由于CORS，我们无法获取响应内容
+                            // 这种情况下我们需要更谨慎的判断
+
+                            // 创建一个iframe来尝试加载页面
+                            const iframe = document.createElement('iframe');
+                            iframe.style.display = 'none';
+                            iframe.src = `http://localhost:${port}/`;
+
+                            const iframeTimeout = setTimeout(() => {
+                                document.body.removeChild(iframe);
+                                resolve(false); // iframe也无法加载，服务停止
+                            }, 1000);
+
+                            iframe.onload = () => {
+                                clearTimeout(iframeTimeout);
+                                document.body.removeChild(iframe);
+                                resolve(true); // iframe加载成功，服务运行中
+                            };
+
+                            iframe.onerror = () => {
+                                clearTimeout(iframeTimeout);
+                                document.body.removeChild(iframe);
+                                resolve(false); // iframe加载失败，服务停止
+                            };
+
+                            document.body.appendChild(iframe);
+                        }).catch(() => {
+                            // fetch失败，服务未运行
+                            resolve(false);
+                        });
+                    }
                 };
 
-                document.head.appendChild(testScript);
+                // 尝试加载favicon或vite.svg
-                setTimeout(() => document.head.removeChild(testScript), 100);
+                img.src = `http://localhost:${port}/vite.svg?t=${Date.now()}`;
+            });
 
-            } catch (error) {
+            // 等待检测结果
+            isRunning = await checkPromise;
+
+            // 更新UI
+            if (isRunning) {
+                statusEl.className = 'status status-running';
+                statusEl.innerHTML = '<span class="status-dot"></span> 运行中';
+            } else {
                 statusEl.className = 'status status-stopped';
                 statusEl.innerHTML = '<span class="status-dot"></span> 已停止';
             }

status-checker.html

@@ -0,0 +1,189 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>教务系统 - 简化状态检测</title>
+    <style>
+        body {
+            font-family: 'Microsoft YaHei', sans-serif;
+            padding: 20px;
+            background: #f0f2f5;
+        }
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+        h1 {
+            text-align: center;
+            color: #333;
+        }
+        .status-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 20px;
+            margin-top: 30px;
+        }
+        .status-card {
+            background: white;
+            padding: 20px;
+            border-radius: 10px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+            transition: all 0.3s;
+        }
+        .status-card.running {
+            border-left: 5px solid #4caf50;
+        }
+        .status-card.stopped {
+            border-left: 5px solid #f44336;
+        }
+        .status-card.checking {
+            border-left: 5px solid #2196f3;
+        }
+        .industry-name {
+            font-size: 18px;
+            font-weight: bold;
+            margin-bottom: 10px;
+        }
+        .port-info {
+            color: #666;
+            margin-bottom: 10px;
+        }
+        .status-badge {
+            display: inline-block;
+            padding: 5px 15px;
+            border-radius: 20px;
+            font-size: 14px;
+            font-weight: 500;
+        }
+        .status-badge.running {
+            background: #4caf50;
+            color: white;
+        }
+        .status-badge.stopped {
+            background: #f44336;
+            color: white;
+        }
+        .status-badge.checking {
+            background: #2196f3;
+            color: white;
+        }
+        .refresh-btn {
+            display: block;
+            margin: 30px auto;
+            padding: 12px 30px;
+            background: #667eea;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            font-size: 16px;
+            cursor: pointer;
+        }
+        .refresh-btn:hover {
+            background: #5569d0;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>🎓 教务系统产业状态监控</h1>
+
+        <div class="status-grid" id="statusGrid"></div>
+
+        <button class="refresh-btn" onclick="checkAllStatus()">刷新状态</button>
+    </div>
+
+    <script>
+        const industries = [
+            { name: '文旅产业', port: 5150 },
+            { name: '智能制造', port: 5151 },
+            { name: '智能开发', port: 5152 },
+            { name: '财经商贸', port: 5153 },
+            { name: '视觉设计', port: 5154 },
+            { name: '交通物流', port: 5155 },
+            { name: '大健康', port: 5156 },
+            { name: '土木水利', port: 5157 },
+            { name: '食品产业', port: 5158 },
+            { name: '化工产业', port: 5159 },
+            { name: '能源产业', port: 5160 },
+            { name: '环保产业', port: 5161 }
+        ];
+
+        function initGrid() {
+            const grid = document.getElementById('statusGrid');
+            grid.innerHTML = industries.map(industry => `
+                <div class="status-card checking" id="card-${industry.port}">
+                    <div class="industry-name">${industry.name}</div>
+                    <div class="port-info">端口: ${industry.port}</div>
+                    <span class="status-badge checking" id="badge-${industry.port}">检查中...</span>
+                </div>
+            `).join('');
+        }
+
+        async function checkPort(port) {
+            const card = document.getElementById(`card-${port}`);
+            const badge = document.getElementById(`badge-${port}`);
+
+            // 重置状态
+            card.className = 'status-card checking';
+            badge.className = 'status-badge checking';
+            badge.textContent = '检查中...';
+
+            try {
+                // 使用简单的图片加载测试
+                const result = await new Promise((resolve) => {
+                    const img = new Image();
+                    const timeout = setTimeout(() => {
+                        resolve(false);
+                    }, 2000);
+
+                    img.onload = () => {
+                        clearTimeout(timeout);
+                        resolve(true);
+                    };
+
+                    img.onerror = () => {
+                        clearTimeout(timeout);
+                        resolve(false);
+                    };
+
+                    // Vite开发服务器通常有这个文件
+                    img.src = `http://localhost:${port}/vite.svg?t=${Date.now()}`;
+                });
+
+                if (result) {
+                    card.className = 'status-card running';
+                    badge.className = 'status-badge running';
+                    badge.textContent = '运行中';
+                } else {
+                    card.className = 'status-card stopped';
+                    badge.className = 'status-badge stopped';
+                    badge.textContent = '已停止';
+                }
+            } catch (error) {
+                card.className = 'status-card stopped';
+                badge.className = 'status-badge stopped';
+                badge.textContent = '已停止';
+            }
+        }
+
+        async function checkAllStatus() {
+            console.log('开始检查所有端口状态...');
+            initGrid();
+
+            // 并行检查所有端口
+            const promises = industries.map(industry => checkPort(industry.port));
+            await Promise.all(promises);
+
+            console.log('状态检查完成');
+        }
+
+        // 页面加载时自动检查
+        window.onload = () => {
+            checkAllStatus();
+            // 每30秒自动刷新
+            setInterval(checkAllStatus, 30000);
+        };
+    </script>
+</body>
+</html>