239 lines
10 KiB
HTML
239 lines
10 KiB
HTML
<!-- 🚀 YM-COLLAB-20260307-001 · CD 端到端验证标记 · 铸渊部署 -->
|
||
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>光湖系统 · 开发状态看板</title>
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body>
|
||
<div class="dashboard">
|
||
<!-- 顶部标题栏 -->
|
||
<header class="header">
|
||
<div class="logo">
|
||
<span class="logo-icon">🌊</span>
|
||
<h1>光湖系统 · 开发状态看板</h1>
|
||
</div>
|
||
<div class="status-indicator">
|
||
<span class="dot green"></span>
|
||
<span>系统运行中</span>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- ===== 环节2新增：API数据区域 ===== -->
|
||
<div id="conn-status" class="conn-status"></div>
|
||
|
||
<section class="data-section">
|
||
<h2 class="section-title">⚙️ 系统状态</h2>
|
||
<div id="sys-status" class="data-container">加载中...</div>
|
||
</section>
|
||
|
||
<section class="data-section">
|
||
<h2 class="section-title">👥 开发者进度</h2>
|
||
<div id="dev-list" class="data-container">加载中...</div>
|
||
</section>
|
||
|
||
<section class="data-section">
|
||
<h2 class="section-title">📡 广播动态</h2>
|
||
<div id="bc-list" class="data-container">加载中...</div>
|
||
</section>
|
||
|
||
<!-- 原有的团队成员卡片区（可保留作对比） -->
|
||
<section class="team-cards">
|
||
<h2>👥 团队成员状态（静态）</h2>
|
||
<div class="card-grid">
|
||
<div class="card" data-dev="DEV-001">
|
||
<div class="card-header">
|
||
<span class="dev-id">DEV-001</span>
|
||
<span class="status-badge status-active">活跃</span>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="dev-name">页页</div>
|
||
<div class="dev-module">后端中间层</div>
|
||
<div class="update-time">更新: 10:32</div>
|
||
</div>
|
||
</div>
|
||
<div class="card" data-dev="DEV-002">
|
||
<div class="card-header">
|
||
<span class="dev-id">DEV-002</span>
|
||
<span class="status-badge status-active">活跃</span>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="dev-name">肥猫</div>
|
||
<div class="dev-module">飞书机器人</div>
|
||
<div class="update-time">更新: 10:15</div>
|
||
</div>
|
||
</div>
|
||
<div class="card" data-dev="DEV-003">
|
||
<div class="card-header">
|
||
<span class="dev-id">DEV-003</span>
|
||
<span class="status-badge status-standby">等待</span>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="dev-name">燕樊</div>
|
||
<div class="dev-module">对话UI</div>
|
||
<div class="update-time">更新: 09:47</div>
|
||
</div>
|
||
</div>
|
||
<div class="card" data-dev="DEV-004">
|
||
<div class="card-header">
|
||
<span class="dev-id">DEV-004</span>
|
||
<span class="status-badge status-active">活跃</span>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="dev-name">小幸运</div>
|
||
<div class="dev-module">钉钉打通</div>
|
||
<div class="update-time">更新: 11:02</div>
|
||
</div>
|
||
</div>
|
||
<div class="card" data-dev="DEV-005">
|
||
<div class="card-header">
|
||
<span class="dev-id">DEV-005</span>
|
||
<span class="status-badge status-coding">编码中</span>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="dev-name">小草莓</div>
|
||
<div class="dev-module">系统状态看板</div>
|
||
<div class="update-time">更新: 刚刚</div>
|
||
</div>
|
||
</div>
|
||
<div class="card" data-dev="DEV-006">
|
||
<div class="card-header">
|
||
<span class="dev-id">DEV-006</span>
|
||
<span class="status-badge status-standby">等待</span>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="dev-name">小蔡同学</div>
|
||
<div class="dev-module">工单管理</div>
|
||
<div class="update-time">更新: 09:20</div>
|
||
</div>
|
||
</div>
|
||
<div class="card" data-dev="DEV-007">
|
||
<div class="card-header">
|
||
<span class="dev-id">DEV-007</span>
|
||
<span class="status-badge status-coding">编码中</span>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="dev-name">四月</div>
|
||
<div class="dev-module">用户中心</div>
|
||
<div class="update-time">更新: 10:55</div>
|
||
</div>
|
||
</div>
|
||
<div class="card" data-dev="DEV-008">
|
||
<div class="card-header">
|
||
<span class="dev-id">DEV-008</span>
|
||
<span class="status-badge status-standby">等待</span>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="dev-name">小锋</div>
|
||
<div class="dev-module">待分配</div>
|
||
<div class="update-time">更新: 08:30</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 原有的广播列表（可保留） -->
|
||
<section class="broadcast-list">
|
||
<h2>📢 最近广播（静态）</h2>
|
||
<div class="list-container">
|
||
<div class="list-item">
|
||
<span class="broadcast-id">BC-001</span>
|
||
<span class="broadcast-title">HoloLake桌面UI框架</span>
|
||
<span class="broadcast-time">10:45</span>
|
||
<span class="broadcast-status status-done">已完成</span>
|
||
</div>
|
||
<div class="list-item">
|
||
<span class="broadcast-id">BC-002</span>
|
||
<span class="broadcast-title">对话界面设计</span>
|
||
<span class="broadcast-time">10:20</span>
|
||
<span class="broadcast-status status-progress">进行中</span>
|
||
</div>
|
||
<div class="list-item">
|
||
<span class="broadcast-id">BC-003</span>
|
||
<span class="broadcast-title">人格体选择器</span>
|
||
<span class="broadcast-time">09:55</span>
|
||
<span class="broadcast-status status-progress">进行中</span>
|
||
</div>
|
||
<div class="list-item">
|
||
<span class="broadcast-id">BC-004</span>
|
||
<span class="broadcast-title">云盘授权界面</span>
|
||
<span class="broadcast-time">09:30</span>
|
||
<span class="broadcast-status status-pending">待处理</span>
|
||
</div>
|
||
<div class="list-item">
|
||
<span class="broadcast-id">BC-005</span>
|
||
<span class="broadcast-title">用户中心设计</span>
|
||
<span class="broadcast-time">08:50</span>
|
||
<span class="broadcast-status status-pending">待处理</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 底部信息栏 -->
|
||
<footer class="footer">
|
||
<div class="footer-left">光湖系统 · HoloLake Era AGE OS</div>
|
||
<div class="footer-right">v2.1.0 · 2026-03-02 17:50</div>
|
||
</footer>
|
||
</div>
|
||
|
||
<!-- 核心脚本 -->
|
||
<script src="api-config.js"></script>
|
||
<script src="api.js"></script>
|
||
<script src="render.js"></script>
|
||
<script src="ws-client.js"></script>
|
||
<!-- 原有的交互脚本 -->
|
||
<script src="script.js"></script>
|
||
|
||
<!-- ===== WebSocket 实时推送初始化 ===== -->
|
||
<script>
|
||
(function() {
|
||
// 自动检测 WebSocket 地址：生产环境走 Nginx 反向代理，本地开发直连 8080
|
||
var wsProtocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
|
||
var wsUrl = (location.hostname === 'localhost' || location.hostname === '127.0.0.1')
|
||
? 'ws://localhost:8080'
|
||
: wsProtocol + '//' + location.host + '/ws';
|
||
|
||
var wsClient = new WebSocketClient(wsUrl, {
|
||
onMessage: function(data) {
|
||
if (data.type === 'dashboard_update' && data.data) {
|
||
if (data.data.system) renderSystemStatus(data.data.system);
|
||
if (data.data.developers) renderDevelopers(data.data.developers);
|
||
if (data.data.broadcasts) renderBroadcasts(data.data.broadcasts);
|
||
}
|
||
},
|
||
onStatusChange: function(status) {
|
||
var el = document.getElementById('conn-status');
|
||
if (!el) return;
|
||
var text = '', className = '';
|
||
switch(status) {
|
||
case 'connected':
|
||
text = '🔵 实时连接 (WebSocket)';
|
||
className = 'conn-dot on';
|
||
break;
|
||
case 'connecting':
|
||
text = '⏳ 连接中...';
|
||
className = 'conn-dot connecting';
|
||
break;
|
||
case 'reconnecting':
|
||
text = '🔄 重连中...';
|
||
className = 'conn-dot reconnecting';
|
||
break;
|
||
case 'disconnected':
|
||
case 'offline':
|
||
default:
|
||
text = '⚪ 离线模式 (降级轮询)';
|
||
className = 'conn-dot off';
|
||
if (typeof refreshDashboard === 'function') refreshDashboard();
|
||
break;
|
||
}
|
||
el.innerHTML = '<span class="' + className + '"></span> ' + text;
|
||
}
|
||
});
|
||
wsClient.connect();
|
||
window.addEventListener('beforeunload', function() { wsClient.disconnect(); });
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html> |