你是一位资深的政企级数据可视化产品设计师 + 前端工程师。我已有一套**指挥中心暗色科技风**的前端原型，覆盖「态势总览 / 个人画像 / 关系图谱 / AI研判」4 个页面，设计系统见下方第三节（这是**唯一事实来源**，必须严格沿用，保证新页面与既有 4 页**像素级风格一致**）。现在原型里**缺少第 5 个顶级页面「统一工作台」**及其内部组件，请你**只补这一个页面**，产出可直接在浏览器打开预览的单文件 HTML 设计稿。

## 一、项目背景

- 项目名称：**未成年人侵财智能管控中枢**
- 用途：参加**省级数字侦查竞赛**，面向公安刑侦部门（未成年人侵财犯罪：盗窃、抢劫、抢夺、诈骗、敲诈勒索）。
- 使用者：一线侦查民警、研判人员、领导汇报演示。
- 「统一工作台」是平台的**技术运维与作业侧**（区别于前 4 个研判分析页），民警在这里做：数据巡检、本地素材研判、任务下发、模型训练、系统诊断。
- 语言：全中文界面（zh-CN）。
- **核心痛点**：当前工作台页面颜色、布局、组件与整体设计系统**严重不符**，本次必须让它彻底回归下方设计 Token 与组件规范，和其他 4 页浑然一体。

## 二、严格技术约束（离线内网，必须遵守）

1. **禁止任何外部资源**：无 Google Fonts / CDN / 外链图标 / 外链图片 / 外链 JS·CSS，全部内嵌或本地化。
2. **字体只用系统字体栈**：
   `font-family: "PingFang SC","Microsoft YaHei","Hiragino Sans GB",system-ui,-apple-system,sans-serif;`
   数字等宽：`ui-monospace,"SF Mono","Cascadia Mono",Consolas,monospace;`，大数字加 `font-variant-numeric: tabular-nums;`
3. 样式用 **Tailwind CSS v3 工具类**（项目已本地构建）；复杂效果（辉光、渐变边框、网格背景）写进一个 `<style>` 块。
4. 图表必须用 **ECharts**（本地打包，全局变量 `echarts`），给暗色主题 option；不要其它图表库。
5. **纯原生 JS（vanilla）**，不要 React/Vue/jQuery；最终嵌入 Flask + Jinja2。
6. **所有图标内联 SVG**（线性，1.5px 描边，`stroke="currentColor"`，24×24 viewBox）。**严禁 emoji 当图标**。
7. 适配 1920×1080，最低兼容 1366×768，无需移动端。
8. 服务器 CPU-only，避免大面积 `backdrop-filter: blur`，辉光用 `box-shadow`。

## 三、设计系统（唯一事实来源 —— 必须与既有 4 页完全一致）

### 配色 Token（:root CSS 变量，全程复用）

```
--bg-base:#0a0e1a  --bg-surface:#0f1729  --bg-elevated:#16203a
--border:rgba(56,189,248,0.14)  --border-strong:rgba(56,189,248,0.30)
--text-primary:#e6edf7  --text-second:#94a3b8  --text-muted:#5b6b80
--accent-cyan:#38bdf8  --accent-blue:#3b82f6
--glow-cyan:0 0 18px rgba(56,189,248,0.35)
```

风险等级配色（全站统一）：极高 #ef4444 / 高 #f97316 / 中 #eab308 / 低 #3b82f6 / 正常 #22c55e。
状态语义色：成功/在线 #22c55e、警告 #eab308、失败/错误 #ef4444、运行中 #38bdf8、未认证/停用 #5b6b80。
趋势：上升用红 ▲、下降用绿 ▼（犯罪上升是坏事）。

### 质感细节（与既有页一致）

- 卡片：`--bg-surface` + 1px `--border` + 12px 圆角；hover 描边转 `--border-strong` + 轻微 `--glow-cyan`。
- 关键数字：青色辉光 text-shadow、等宽、数字滚动进场动画。
- 全局：`--bg-base` 叠极淡网格点阵 SVG（透明度 ~0.03）；顶部 1px 青→蓝渐变高光线。
- 分区标题：小号、letter-spacing 加大、`--text-second`，左侧青色竖条 accent。
- 列表/队列项左侧 3px 语义色竖条。
- 动效克制：进场 fade+translateY、hover 150ms、图表 800ms；加载用骨架 shimmer，不用转圈 spinner。
- 空状态 / 加载态 / 错误态都要专门设计（SVG 占位 + 文案），不要只显示「--」。

### ECharts 暗色主题

`backgroundColor:'transparent'`；轴线 #1e293b、刻度文字 #94a3b8 11px、分割线 rgba(148,163,184,0.08)；柱状青蓝 linearGradient 圆角端；环形 radius ['45%','70%'] 中心放总数；tooltip 深色 #0f1729 + 青描边 + 白字。

### 统一顶部导航壳（关键一致性要求）

沿用既有 header 壳，**导航 Tab 由 4 项扩展为 5 项**：「态势总览 / 个人画像 / 关系图谱 / AI研判 / **统一工作台**」。当前页（统一工作台）高亮（青色底 + 辉光）。左侧盾形 SVG Logo + 标题「未成年人侵财智能管控中枢」+ 副标题「统一工作台」；右侧实时时钟（HH:MM:SS 等宽）+ 绿色脉冲在线点 + 刷新按钮。壳与其余 4 页完全相同。

## 四、需要补的页面：统一工作台（路由 /workbench）

整页暗色，套用统一 header 壳。**页面内有一条二级子导航**（与设计语言一致的分段 Tab，可用青色下划线/胶囊高亮），含 5 个子页，切换不跳路由（`/workbench?tab=xxx`，子导航当前项高亮）：

> 下面字段均为后端真实功能，请如实呈现；可补演示占位数据。每个子页都用本设计系统的卡片/按钮/徽章/表格/进度条/空态。

### 子页 1 · 数据巡检（tab=oracle）

按时间窗对存量数据做批量智能巡检。
- **配置检测参数**卡：开始时间 / 结束时间（datetime 输入，等宽数字）；研判模型（下拉）；检测提示词（多行 + 「常用预设」可点击标签）；置信度（滑块，实时显示数值）；批大小、图片尺寸（数字输入）；**附加时段过滤**（可「add」多条时段行，配「全选/清空」）。底部主按钮「开始巡检」。
- **任务进度**卡：状态徽章「运行中」（青色脉冲）+ 模型标签；青色辉光进度条 + 百分比；「下载摘要说明」「停止当前任务」按钮。
- **结果图身份识别**卡：结果图网格（缩略图，可多选，选中青色描边辉光）；工具条「全选/清空/加入数据集/识别身份」；空态 SVG + 「暂无结果图」。

### 子页 2 · 本地素材（tab=upload）

上传现场素材并研判。
- **上传现场素材**卡：大号拖拽上传区（虚线青色描边，「点击选择文件，或将文件拖放至此」，含上传 SVG 图标）；已选文件列表（文件名 + 大小 + 移除）。
- **研判模型与参数**卡：模型选择（下拉）；检测提示词（+ 常用预设标签）；置信度（滑块）；批大小；帧采样间隔。主按钮「开始素材研判」。
- **检测进度**卡：同子页1（运行中状态 + 进度条 + 「下载研判结果包」「停止任务」）。
- **结果图身份识别**卡：同子页1（网格 + 全选/清空/加入数据集/识别身份 + 空态）。
- 顶部一条「办理提示」信息条（青色左竖条 info 样式）。

### 子页 3 · 任务下发（tab=dispatch）

对接任务平台下发指令 + 短信提醒。建议两栏布局。
- **任务平台认证**卡：状态徽章「未认证」(灰) / 「已认证」(绿)；平台账号、平台密码输入；「刷新状态」「认证并缓存 Token」按钮。
- **待下发队列**卡：待下发对象列表（姓名 + 属地 + 风险标签）；「刷新显示」「重查属地」；折叠的「自动流转说明」。
- **任务下发草稿**卡（表单）：任务标题、业务负责人、负责人电话、任务内容（多行）、开始时间、截止时间、签收时限、反馈时限、市局代码/名称、分局代码/名称、派出所代码/名称、地址。
- **负载编辑区**：JSON 代码编辑框（等宽、深色、行号感）；工具条「恢复精简默认 / 格式化 JSON / 重新生成草稿」+ 主操作「通过任务平台下发」。
- **短信提醒配置**卡：短信号码、短信模板（多行）；预览框（空态「请选择左侧待下发对象后预览短信内容」）；「预览短信」「发送短信提醒」。
- **审计记录**卡：下发记录与短信记录表格 + 「刷新记录」；空态「暂无记录」。

### 子页 4 · 模型训练（tab=train）

样本沉淀 → 数据集 → 训练 → 版本管理的流水线（建议用「训练流程」步骤感的分区标题）。
- **样本沉淀与数据集管理**卡：数据集名称、类别列表（逗号分隔，占位 `no_helmet,wheelie,multi_rider`）、备注；「创建数据集」。
- **批量导入图片**卡：目标数据集（下拉）、ZIP 文件选择；「导入 ZIP」。
- **数据集列表**卡：现有数据集列表 + 「刷新」。
- **工作区概览**卡：四个指标块（数据集 / 图片数 / 已标注 / 已复核，大号等宽数字 + 青色辉光 + 滚动进场）。
- **发起训练任务**卡：训练数据集（下拉）、基础模型（下拉）、训练预设（下拉）、Epochs、imgsz、Batch（数字）；「刷新任务」「创建训练任务」。
- **最近训练任务**卡：任务列表（名称 / 状态徽章 / 进度 / 时间）+ 「刷新」。
- **模型版本管理**卡：入口块（说明 + 「管理页」按钮）。

### 子页 5 · 系统诊断（tab=diagnostics）

任务队列健康监控（最像「大屏监控」的子页，做出指挥中心质感）。
- 顶部「任务队列诊断」标题 + 「刷新诊断」按钮。
- **指标卡行**：队列总数 / 等待中 / 运行中 / 失败 / 陈旧运行 —— 五张语义色指标卡（运行中青、等待灰、失败红、陈旧橙），大号等宽数字 + 辉光 + 滚动进场。
- **系统健康**卡：健康摘要（整体状态徽章 + 关键项清单，正常绿/异常红）。
- **分布统计**卡：按状态分布环形图（ECharts，用语义色，中心放总数）。
- **最近队列任务**卡：表格列「任务 / 状态 / Job ID / 耗时 / Owner / 错误」，状态用语义色徽章，错误列可截断悬浮；按任务类型/状态聚合的小计行；空态「尚未刷新」。

## 五、顺手规避的旧问题（本页面必须做到）

1. 工作台原先与整体风格不符 → 本次严格套用第三节 Token 与组件，做到与其余 4 页一致。
2. 任何 emoji / 原生 `prompt()`·`alert()` → 全部替换为内联 SVG 图标 / 站内设计的弹窗或内联输入。
3. 子导航、卡片、按钮、徽章、表格、进度条、滑块、上传区、空/载/错三态 —— 全部统一设计 Token，集中在设计系统说明区列出。
4. 5 个子页之间风格、间距、圆角、留白必须一致；首屏关键信息不过度滚动。

## 六、交付物

一个**完整、可直接浏览器预览的单文件 HTML**：统一 header 壳（5 Tab，工作台高亮）+ 工作台二级子导航 + 5 个子页真实布局与组件 + 一个 `<style>` 设计系统 + 原生 JS（子页切换、时钟、进度条/数字进场、ECharts 占位）。要求：
- 顶部含简明设计系统说明区（复述配色 Token / 字体 / 卡片·按钮·徽章·表格·进度条·空载错三态规范），证明与既有 4 页同源。
- 5 个子页用合理演示假数据填充，效果接近真实可演示。
- 代码整洁、有注释，便于后续按 Flask + Jinja2 模板拆分（子页对应 `_oracle_tab/_upload_tab/_dispatch_tab/_train_tab/_task_queue_tab`）。
- 全内联 SVG 图标、无任何外链、中文界面。

请先用 2–3 句话说明设计思路（如何让工作台回归整体设计系统、5 子页信息架构如何组织），再给出完整 HTML 代码。