fmq/DCTS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(server,dashboard): 引入多工作流数据隔离、安全中间件与前端 ESM 模块化重构

Browse Source 
- server: 实现按 workflow_name 的多工作流数据隔离与旧数据库平滑迁移机制
- server: 新增 API Key 认证(auth)、限流中间件(rate_limit)与运维备份接口(admin)
- server: 统一 AppError 错误处理体系，重构调度器 scheduler 支持工作流级重置与抢占
- node: 节点 ID 缺失时自动生成随机 UUID，原生支持 `docker compose --scale node=N` 动态扩容
- dashboard: 前端模块化重构(state/api/components)，升级 CSS 变量设计系统与 Toast 通知
- docker/docs: 更新 /healthz 健康检查、部署脚本 IP 配置及数据库设计文档
This commit is contained in:
fmq
2026-07-28 21:54:02 +08:00
parent 4b4238d702
commit b91f1e4fa5
59 changed files with 7697 additions and 1490 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard/index.html
+107 -49
View File
@@ -11,12 +11,37 @@
</head>
<body>
<div id="app">
<!-- ===== 登录遮罩（鉴权） ===== -->
<div id="login-overlay" class="login-overlay">
<div class="login-card glass">
<div class="login-header">
<h2>DCTS 控制台登录</h2>
<p>请输入管理员密码以访问管理控制台</p>
</div>
<form id="form-login" class="stack-col stack-col-md">
<div class="form-group">
<label for="input-admin-token">管理员密码</label>
<input type="password" id="input-admin-token" class="form-input" placeholder="输入管理员密码..." required autocomplete="off" />
</div>
<div id="login-error-msg" class="login-error-msg alert-error hidden"></div>
<button type="submit" id="btn-submit-login" class="btn btn-primary">登录</button>
</form>
</div>
</div>
<!-- 顶部导航栏 (Header) -->
<header class="header">
<div class="logo-container">
<div class="logo-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2">
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
<!-- 恒星大气星核 (TLUSTY Stellar Core) -->
<path d="M12 3c0 4.5-4.5 9-9 9 4.5 0 9 4.5 9 9 0-4.5 4.5-9 9-9-4.5 0-9-4.5-9-9z" fill="currentColor" fill-opacity="0.35" stroke-width="1.5" />
<!-- 分布式计算集群网格轨道与算力节点 (Distributed Computing Grid Nodes) -->
<circle cx="12" cy="12" r="9.5" stroke-width="1.4" stroke-dasharray="4 2.5" />
<circle cx="12" cy="2.5" r="1.5" fill="currentColor" />
<circle cx="21.5" cy="12" r="1.5" fill="currentColor" />
<circle cx="12" cy="21.5" r="1.5" fill="currentColor" />
<circle cx="2.5" cy="12" r="1.5" fill="currentColor" />
</svg>
</div>
<div>
@@ -44,6 +69,14 @@
</svg>
刷新
</button>
<button id="btn-logout" class="btn btn-secondary hidden" title="登出并清除 Token">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
<polyline points="16 17 21 12 16 7"></polyline>
<line x1="21" y1="12" x2="9" y2="12"></line>
</svg>
登出
</button>
</div>
</header>
@@ -87,7 +120,7 @@
<div class="metric-card glass">
<div class="metric-header">
<span class="metric-title">已收敛网格模型</span>
<span class="metric-title">已计算网格模型</span>
<div class="metric-icon success-icon">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
@@ -97,7 +130,7 @@
</div>
<div class="metric-body">
<span class="metric-value" id="val-completed-tasks">0</span>
<span class="metric-sub" id="val-completion-rate">全网网格总数: 0</span>
<span class="metric-sub" id="val-completion-rate">网格总数: 0</span>
</div>
</div>
@@ -121,40 +154,44 @@
<!-- 主要内容双栏 -->
<div class="content-grid">
<!-- 节点集群状态 -->
<!-- 左侧：计算节点集群与凭据管理 (统一全功能控制大表) -->
<div class="panel glass">
<div class="panel-header">
<h2>计算节点集群 (Worker Nodes)</h2>
<span class="badge" id="node-count-badge">0 个节点</span>
<h2>计算节点集群与凭据管理</h2>
<div class="row-wrap" style="align-items: center; gap: 0.5rem;">
<span class="badge" id="node-count-badge">0 个节点</span>
<button id="btn-refresh-nodes" class="btn btn-secondary btn-sm">刷新</button>
</div>
</div>
<div class="panel-body table-responsive">
<table class="data-table">
<thead>
<tr>
<th>节点 ID</th>
<th>主机名</th>
<th>CPU 槽位</th>
<th>CPU 使用率</th>
<th>内存使用率</th>
<th>心跳时间</th>
<th>状态</th>
<th class="col-node-id">节点 ID</th>
<th class="col-hostname">主机名</th>
<th class="col-slots">CPU 槽位</th>
<th class="col-usage">CPU/内存</th>
<th class="col-status">节点状态</th>
<th class="col-token">Token 凭据</th>
<th class="col-heartbeat">心跳时间</th>
<th class="col-actions">管理操作</th>
</tr>
</thead>
<tbody id="nodes-table-body">
<tr>
<td colspan="7" class="empty-cell">正在连接服务端获取计算节点...</td>
<td colspan="8" class="empty-cell">正在连接服务端获取计算节点...</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- 右侧：工作流管理与数据资源下载 -->
<div style="display: flex; flex-direction: column; gap: 1.5rem;">
<!-- 右侧：工作流管理 -->
<div class="stack-col stack-col-lg">
<!-- 工作流面板 -->
<div class="panel glass">
<div class="panel-header">
<h2>恒星大气网格工作流 (Workflows)</h2>
<h2>恒星大气网格工作流</h2>
</div>
<div class="panel-body">
<div id="workflows-list" class="workflows-container">
@@ -162,40 +199,20 @@
</div>
</div>
</div>
<!-- 系统资源与数据下载 -->
<div class="panel glass">
<div class="panel-header">
<h2>大气与谱线数据资源 (Data Resources)</h2>
</div>
<div class="panel-body" style="display: flex; flex-direction: column; gap: 0.75rem;">
<p style="font-size: 0.85rem; color: var(--text-secondary);">
如需本地运行计算节点或检验谱线列表，可直接通过服务端 API 获取静态配分函数及原子文件：
</p>
<div style="display: flex; gap: 0.75rem; flex-wrap: wrap;">
<a href="/api/data/linelist" target="_blank" class="btn btn-secondary btn-sm">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
<polyline points="7 10 12 15 17 10"></polyline>
<line x1="12" y1="15" x2="12" y2="3"></line>
</svg>
下载 原子谱线列表 (Line List)
</a>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- 创建 / 编辑工作流 模态弹窗 -->
<div id="modal-workflow" class="modal-backdrop hidden">
<div id="modal-create-wf" class="modal-backdrop hidden">
<div class="modal-card">
<div class="modal-header">
<h3 id="modal-title">注册新的计算工作流</h3>
<button id="modal-close-btn" class="modal-close">&times;</button>
<button id="close-create-wf" class="modal-close" aria-label="关闭">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
</button>
</div>
<form id="form-workflow" style="display: flex; flex-direction: column; gap: 1rem;">
<form id="form-create-wf" class="stack-col stack-col-md">
<div class="form-group">
<label for="input-wf-name">工作流名称 (Identifier)</label>
<input type="text" id="input-wf-name" class="form-input" placeholder="例如: sdB_cno" required />
@@ -209,7 +226,7 @@
<textarea id="input-wf-yaml" class="form-textarea" required placeholder="请粘贴工作流 YAML 参数网格定义..."></textarea>
</div>
<div class="modal-footer">
<button type="button" id="btn-cancel-modal" class="btn btn-secondary">取消</button>
<button type="button" id="cancel-create-wf" class="btn btn-secondary">取消</button>
<button type="submit" class="btn btn-primary">提交保存</button>
</div>
</form>
@@ -217,15 +234,39 @@
</div>
<!-- 查看 YAML 模态弹窗 -->
<div id="modal-view-yaml" class="modal-backdrop hidden">
<div id="modal-view-wf" class="modal-backdrop hidden">
<div class="modal-card">
<div class="modal-header">
<h3 id="view-yaml-title">工作流 YAML 配置详情</h3>
<button id="view-yaml-close-btn" class="modal-close">&times;</button>
<h3 id="view-wf-title">工作流 YAML 配置详情</h3>
<button id="close-view-wf" class="modal-close" aria-label="关闭">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
</button>
</div>
<pre id="view-yaml-content" style="background: var(--bg-sunken); padding: 1rem; border-radius: 6px; font-family: var(--font-mono); font-size: 0.85rem; overflow-x: auto; max-height: 350px;"></pre>
<pre id="view-wf-yaml" class="code-pre"></pre>
<div class="modal-footer">
<button type="button" id="btn-close-yaml-modal" class="btn btn-secondary">关闭</button>
<button type="button" id="btn-close-view-wf" class="btn btn-secondary">关闭</button>
</div>
</div>
</div>
<!-- 重发 Token 结果展示模态弹窗 -->
<div id="modal-reissue-token" class="modal-backdrop hidden">
<div class="modal-card">
<div class="modal-header">
<h3>节点专属 Token 已重新颁发</h3>
<button id="reissue-close-btn" class="modal-close" aria-label="关闭">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
</button>
</div>
<div class="modal-body">
<p class="text-hint-mb">
旧 Token 已立即失效。请复制下方新 Token 并同步到该节点的本地 <code>.node_token</code> 文件后重启节点：
</p>
<pre id="reissue-token-content" class="code-pre-wrap"></pre>
</div>
<div class="modal-footer">
<button type="button" id="btn-copy-token" class="btn btn-primary">复制 Token</button>
<button type="button" id="btn-close-reissue-modal" class="btn btn-secondary">关闭</button>
</div>
</div>
</div>
@@ -234,6 +275,23 @@
<footer class="footer">
<p>DCTS 分布式恒星大气计算系统 &copy; 2026 TLUSTY/SYNSPEC Project</p>
</footer>
<!-- ===== 全局 Toast 提示容器 ===== -->
<div id="toast-container" class="toast-container"></div>
<!-- ===== 通用自定义 Confirm 模态弹窗 ===== -->
<div id="modal-confirm" class="login-overlay hidden">
<div class="login-card glass modal-card">
<div class="login-header">
<h3 id="confirm-modal-title" class="confirm-modal-title">确认操作</h3>
<p id="confirm-modal-msg" class="confirm-modal-msg">您确定要执行此操作吗？</p>
</div>
<div class="modal-footer confirm-modal-footer">
<button type="button" id="btn-confirm-cancel" class="btn btn-secondary">取消</button>
<button type="button" id="btn-confirm-ok" class="btn btn-primary">确定</button>
</div>
</div>
</div>
</div>
<script type="module" src="/src/main.js"></script>