moki
/
ai-status-light


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OpenCode Monitor</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; padding: 20px; }
        .container { max-width: 1200px; margin: 0 auto; }
        h1 { color: #333; margin-bottom: 20px; }
        .status-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
        .status-card { padding: 16px 0; }
        .status-card h2 { color: #666; font-size: 14px; margin-bottom: 8px; }
        .status-value { font-size: 32px; font-weight: bold; margin-bottom: 8px; }
        .status-time { color: #999; font-size: 12px; }
        .status-空闲 { color: #52c41a; }
        .status-工作中 { color: #ff4d4f; }
        .status-思考中 { color: #faad14; }
        .status-运行中 { color: #1890ff; }
        .status-完成 { color: #52c41a; }
        .status-错误 { color: #ff4d4f; }
        .status-重试中 { color: #faad14; }
        .status-修改中 { color: #722ed1; }
        .log { margin-top: 20px; }
        .log h2 { color: #666; font-size: 14px; margin-bottom: 12px; }
        .log-list { max-height: 300px; overflow-y: auto; }
        .log-item { padding: 8px 0; border-bottom: 1px solid #f0f0f0; font-size: 14px; }
        .log-item:last-child { border-bottom: none; }
        .log-time { color: #999; margin-right: 8px; }
        .log-port { color: #1890ff; margin-right: 8px; }
        .connected { color: #52c41a; font-size: 12px; margin-left: 10px; }
        .disconnected { color: #ff4d4f; font-size: 12px; margin-left: 10px; }
    </style>
</head>
<body>
    <div class="container">
        <h1>OpenCode Monitor <span id="connectionStatus" class="disconnected">● 未连接</span></h1>
        <div class="status-grid" id="statusGrid">
            <div class="status-card">
                <h2>当前状态</h2>
                <div class="status-value" id="currentStatus">等待中...</div>
                <div class="status-time" id="statusTime"></div>
            </div>
        </div>
        <div class="log">
            <h2>状态日志</h2>
            <div class="log-list" id="logList"></div>
        </div>
    </div>

    <script>
        const statusGrid = document.getElementById('statusGrid');
        const logList = document.getElementById('logList');
        const currentStatus = document.getElementById('currentStatus');
        const statusTime = document.getElementById('statusTime');
        const connectionStatus = document.getElementById('connectionStatus');
        
        let ws = null;
        let reconnectTimer = null;

        function connect() {
            const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
            ws = new WebSocket(protocol + '//' + window.location.host + '/ws');

            ws.onopen = function() {
                connectionStatus.textContent = '● 已连接';
                connectionStatus.className = 'connected';
                if (reconnectTimer) {
                    clearTimeout(reconnectTimer);
                    reconnectTimer = null;
                }
            };

            ws.onmessage = function(event) {
                try {
                    const data = JSON.parse(event.data);
                    updateStatus(data);
                    addLog(data);
                } catch (e) {
                    console.error('解析消息失败:', e);
                }
            };

            ws.onclose = function() {
                connectionStatus.textContent = '● 未连接';
                connectionStatus.className = 'disconnected';
                reconnectTimer = setTimeout(connect, 3000);
            };

            ws.onerror = function() {
                ws.close();
            };
        }

        function updateStatus(data) {
            currentStatus.textContent = data.status;
            currentStatus.className = 'status-value status-' + data.status;
            statusTime.textContent = '端口: ' + data.port + ' | 更新时间: ' + new Date().toLocaleTimeString();
        }

        function addLog(data) {
            const item = document.createElement('div');
            item.className = 'log-item';
            item.innerHTML = '<span class="log-time">' + new Date().toLocaleTimeString() + '</span>' +
                           '<span class="log-port">[:' + data.port + ']</span>' +
                           '<span class="status-' + data.status + '">' + data.status + '</span>';
            logList.insertBefore(item, logList.firstChild);
            
            while (logList.children.length > 50) {
                logList.removeChild(logList.lastChild);
            }
        }

        connect();
    </script>
</body>
</html>