# 数据中台原型 · V4 样式与交互指南
> 面向 Wave B 的 8 个子代理 & 任何后续页面作者。
> **读完再动手，写完对照复查。** 页面出厂前必须过"自检清单"。
---
## 一、基础设计令牌
### 1.1 颜色
| 变量 | 值 | 用途 |
| --- | --- | --- |
| `--brand` | `#2E63E8` | 主品牌（蓝） |
| `--brand-600` / `--brand-700` | 深一度蓝 | 按钮 hover/active |
| `--brand-50` / `--brand-100` | 淡蓝 | 悬浮底色、选中行 |
| `--bg-app` | `#F5F8FD` | 页面底 **（一点点淡蓝，非纯白）** |
| `--bg-soft` | `#FAFCFF` | 卡片里的小分组 |
| `--ink-1..5` | 由深至浅 | 正文、次要、提示、弱提示 |
| `--success / warning / danger / info` | 语义色 | KPI、告警、Toast |
**禁用**纯蓝大色块背景做装饰。大屏改用"玻璃毛玻璃"+ 浅色科技感（`screen-light.css`）。
### 1.2 尺寸（V4 已放大）
| 变量 | V3 | **V4** | 说明 |
| --- | --- | --- | --- |
| `--header-h` | 52 | **56** | 顶栏 |
| `--tab-h` | 36 | **40** | 页签 |
| `--row-h` | 32 | **36** | 表格行、下拉项 |
| `--input-h` | - | **36** | 输入、下拉、日期、上传 |
| `--btn-h` | 30 | **34** | 主按钮 |
| `--radius` | 7 | **8** | 全局圆角 |
| `--fs-body` | 13 | **14** | 正文 |
| `--fs-kpi` | 26 | **30** | KPI 数字 |
禁止自行 hardcode 覆盖密度，除非场景必须（编辑器工具栏可 -2px）。
### 1.3 字体
- 正文：系统默认 + PingFang SC / Microsoft YaHei。
- 数字、时间、ID、金额：`var(--font-num)`（JetBrains Mono/等宽）。
---
## 二、必须引入的资源
每个**内页**（iframe 内）模板头部：
```html
```
- `controls.css` 由 `layout.js` 自动注入，**无需手工 link**。
- 页面入口脚本调用 `DT.mountInner({ breadcrumb: [...] })`。
- 编辑器/大屏入口改用 `DT.mountEditor()`。**绝不能**在内页再调 `DT.mountShell()`（会出现两个侧边菜单）。
---
## 三、页面骨架
### 3.1 内页模板
```html
```
- `.inner-page` 自带淡入动画，禁止再写自定义 `fadeIn`。
- `.page-inner-nav` 黏性顶部、模糊背景；内容滚动时**不消失**。
- 首页（home.html）才可以用 ``，`.hero` 仅在 home 生效。
### 3.2 列表页三件套（凡是列表必须）
1. 顶部筛选条 `.toolbar` + `.chips`（类型筛选不用下拉）。
2. 表格 `.tbl`，首列 `` 支持全选/反选。
3. 底部 `DT.Pagination({ total, pageSize:10, pageSizeOptions:[10,20,50,100], showPageTotal:true })`。
禁止裸露的 `` 或 `native select/date/file`。
---
## 四、控件与交互
### 4.1 表单控件 — 全部使用自定义样式
- `.input / .select / .textarea`：高度 36，圆角 8，focus 蓝边 + 淡蓝阴影。
- `textarea` 默认 min-height **120px**（不要再写 40px）。
- **禁止**出现浏览器原生下拉/日期/文件样式：
- 下拉：``（`layout.js` 会升级为 `DT.Select`）
- 日期：`` 自动套皮肤；复杂场景用 `DT.DatePicker`。
- 文件：`` 自动套皮肤；拖拽上传用 `DT.Upload`。
- 校验：`DT.validate(formEl, { field: {required, minLen, email, pattern, ...} })`。
- 实时提示红边 + `.form-error` 文字。
- 下一步/提交按钮自动禁用直到通过。
### 4.2 按钮
- 主按钮 `btn btn-primary`、次按钮 `btn`、危险 `btn btn-danger`、链接 `btn btn-text`。
- 尺寸：`btn-sm`（列表操作）、`btn-xs`（表格内）、`btn-lg`（着重 CTA）。
- **所有按钮 hover 必须**有阴影/颜色变化（`base.css` 已统一）。
### 4.3 Tab / 标签页
- 顶部页签 `.tab-chip`：支持右键菜单（关闭本页/其他/全部、刷新、新窗口、固定），已由 `DT.TabManager` 统一绑定在 `index.html`。
- 页内 Tab 用 `.itab-bar + .itab`。BI 字段配置/SQL 必须是 Tab 切换。
### 4.4 反馈
- 成功/失败/警告统一 `DT.toast({ title, msg, type, duration })`，顶部右侧。
- 二次确认 `DT.confirm({ title, content, type, onOk })`；弃用 `window.confirm`。
- 列表操作后必须 toast 反馈条数/结果；筛选后显示"命中 X 条"。
### 4.5 Tooltip / 提示
- 悬浮提示加 `data-tip="..."`，由 `layout.js` 全局接管。
- 图表 hover：轴线跟随 + 数据点高亮 + 富 tooltip（title + color dot + name + value + unit）。
---
## 五、图表（必须用 `charts.js`，禁用 ECharts）
### 5.1 可用类型（19 种）
Line / Bar / StackedBar / Area / Pie / Donut / Rose / Gauge / Funnel / Radar / Scatter / Heatmap / Sankey / DAG / Lineage / Spark / Number / Progress / Candle
### 5.2 交互规范
- 折线/柱/面积：鼠标移入**必须**显示垂直轴线 + 同 x 位所有系列的 tooltip。
- Legend：点击可切换单系列显隐（通过 `data-si` 实现，不改数据）。
- DAG/Sankey/Lineage：方向性连线必须有流光（`.flow-line + .flow-glow`）。
- 载入动画：至少一种（`setAnim('draw'|'rise'|'sweep'|'fade')`）。
- 空态：`.dt-chart.is-empty` 显示"暂无数据" + 轻微插画。
- 加载态：`chart.showLoading('分析中...')` / `hideLoading()`。
### 5.3 配色
折线/柱形系列色板已在 `charts.css` 定义 8 色（蓝 / 青 / 紫 / 橙 / 绿 / 粉 / 黄 / 红），不要自行覆盖。
---
## 六、可视化资产中心（组件/模板/模型/组态）
- 每个中心顶部**移除**数据统计条（不要再放"总数 / 本周新增"）。
- 筛选：左侧**通用/自定义** Tab 切换；中部"类型"用按钮组（`.chips .chip`），不要下拉。
- 列表：卡片网格，悬浮阴影 + 提升，支持"复制 / 使用 / 预览"。
- 模板中心：
- 必须按**行业**（医药、汽车、3C、食品、化工）和**类型**（孪生 / 组态 / BI / 报表）双筛选。
- 案例内容写"医药行业 / 注射剂车间"**不写**"太极制药"。
- "使用"→ 跳转对应编辑器并预加载模板数据；"复制"→ 生成我的副本。
- 组件中心：`btn btn-primary` "新建组件" → 打开 HTML/CSS/JS 三 Tab 在线编辑器（Monaco）。
---
## 七、大屏（`dashboards/`）
- **单屏 1920×1080，禁止滚动**。
- 字号最小 13px，大字号 36/48/64；关键数字用渐变填色。
- 所有面板统一 `.screen-panel`（玻璃质感 `screen-light.css`）。
- 动效：呼吸灯、流光、数字滚动、轻微扫描线（见 `twin-preview.html`）。
- **元素不可拖动**（区别于 BI 大屏编辑器内）。
- 必须在 `template-center.html` 有对应模板、在 `component-center.html` 有对应组件。
---
## 八、编辑器（`viz/*-editor.html`）
- **全部通过 `window.open(..., '_blank')` 打开**，`DT.mountEditor()`，不放在 iframe 里。
- 编辑器**默认进入空画布**（孪生已经是 `EMPTY_SCENE`）；
- 孪生：支持上传 2 个模型（`.glb/.gltf`），或从模型库拖入。
- BI/报表：默认无组件，右侧"添加图表"按钮。
- 画布：
- 编辑器内支持无限拖动 + 缩放（`DT.canvasPan`，`bounded:false`）。
- 非编辑器的拓扑/血缘画布：`bounded:true`（只能拖到内容范围 + padding）。
- BI 编辑器：
- 字段配置 / SQL 必须为 **Tab 切换**。
- 图表分类面板支持折叠 + 滚动（单侧 >5 时）。
---
## 九、内容管理 / 版本 / 发布
- 已**删除**独立的"内容管理"组（数据集/版本/发布）。
- 版本与发布能力下沉到**每个模块内部**：
- BI 报表编辑器：右上角"保存 / 发布"按钮 + 版本列表抽屉。
- 孪生编辑器：同上。
- 数据资产、指标标准：各自内页提供"版本历史"Tab。
---
## 十、自检清单（提交前逐条打勾）
1. [ ] 页面**没有**用 `DT.mountShell`（除 `index.html`）。
2. [ ] 没有原生 `select/date/file`（除 type=number/text/email 等）。
3. [ ] `textarea` min-height ≥ 120px。
4. [ ] 所有列表都有分页（`DT.Pagination`、默认 10/页、显示总条数与总页数）。
5. [ ] 所有表单都接入 `DT.validate`，下一步按钮在未通过前 disabled。
6. [ ] 图表全部 `charts.js`，**grep 不到 `echarts`**。
7. [ ] 所有操作均有 Toast 反馈（新建/编辑/删除/筛选）。
8. [ ] 鼠标悬浮：行/卡片/按钮/标签都有阴影或底色变化。
9. [ ] DAG/Sankey/Lineage 有流光。
10. [ ] 大屏 1 屏（JS：`document.body.scrollHeight <= 1080`）。
11. [ ] 编辑器通过 `window.open` 打开，**不**出现第二个侧边菜单。
12. [ ] 表格首列支持全选/反选（`DT.checkboxGroup`）。
13. [ ] 右键顶部页签可以"关闭其他/关闭全部/关闭本页"。
14. [ ] 内页二级导航随内容滚动**仍然置顶**（`.page-inner-nav`）。
15. [ ] 没有协作者头像、协作光标、"4 位协作者在线"残留。
16. [ ] 没有"太极制药"字样；统一为"医药行业 / XX 车间"。
17. [ ] 页面引入顺序正确：`base.css → charts.css → iconify → layout.js → mock.js → charts.js → 其他 js`。
若有任何一项不过，回炉。