From 7ad42ccf1601af397a80d0443f813a7ffe0bf44d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=91=A3=E5=AE=8F=E5=87=AF?= Date: Sun, 31 May 2026 16:48:43 +0800 Subject: [PATCH] =?UTF-8?q?ui=E8=A7=84=E8=8C=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend-web/docs/ui修改-深蓝.md | 2467 +++++++++++++++++++++++ frontend-web/docs/上游升级对比与建议.md | 156 ++ git-clone/deer-flow | 1 + 3 files changed, 2624 insertions(+) create mode 100644 frontend-web/docs/上游升级对比与建议.md create mode 160000 git-clone/deer-flow diff --git a/frontend-web/docs/ui修改-深蓝.md b/frontend-web/docs/ui修改-深蓝.md index 54fec496..6bff7edf 100644 --- a/frontend-web/docs/ui修改-深蓝.md +++ b/frontend-web/docs/ui修改-深蓝.md @@ -2205,3 +2205,2470 @@ Hover 弹出 Tooltip（沿用 §9.3.3 Tooltip 配色），承载完整说明文 --date-footer-divider: #1A2F5A; } ``` + +--- + +## 18. 穿梭框（Transfer） + +> 对应设计稿「5.18 输入-穿梭框」。用于在「源列表 / 目标列表」两栏之间搬移条目，中间用 `‹ ›` 方向按钮转移选中项。覆盖**基础用法**与**可搜索**两种变体；左栏可为**树形**（带层级 + 复选框），右栏为**已选平铺列表**。配色全部从 §1.1.3 渐蓝系（ZS-002）与 §1.1.5 深蓝系（ZS-004）取，与 §14 搜索框 / §15 选择器 / §16 复选框完全对齐。 + +### 18.1 整体结构 + +``` +┌─ 列表(0/13) ──────┐ ┌─ 已选(6/49) ──────┐ +│ ▸ ☐ XXXX公司 │ │ ☐ 李宏洋 │ +│ ▸ ☐ 总裁办 │ ┌──┐ │ ☐ 舒敌 │ +│ ▸ ☐ 人事部 │ │ ‹ │ │ ☑ 宴青 │ +│ ▸ ☐ 技术部 │ ├──┤ │ ☐ 陈平 │ +│ ☐ 张小刚 │ │ › │ │ ☐ 张小凡 │ +│ ☐ 李小红 │ └──┘ │ ☐ 李小红 │ +└───────────────────┘ └───────────────────┘ + 源栏（可树形） 方向按钮组 目标栏（已选平铺） +``` + +- 左 = **源列表**（待选），右 = **目标列表**（已选）；中间两颗上下排列的方向按钮 `‹`（移回源）/ `›`（移入目标）。 +- 两栏顶部各有一条**标题栏**，显示名称 + 计数 `(已选/总数)`，如 `列表(0/13)`、`已选(6/49)`。 +- 源栏支持**树形结构**（部门层级 + 叶子节点），目标栏为**平铺列表**。 + +### 18.2 外层容器与栏规格 + +| 属性 | 取值 | 来源 | +|------|------|------| +| 外层分栏框背景 | `#0C1836` (ZS-004-09) | §3.1.1 | +| 外层分栏框圆角 | `4px` | §4.1 | +| 外层内边距 | `--spacing-5` (24px) | §7.1 | +| 单栏宽度 | `≥ 240px`，两栏等宽 | — | +| 单栏背景 | `#122347` (ZS-004-08) | §3.1.2 卡片 | +| 单栏边框 | `1px solid #1A2F5A` (ZS-004-07) | — | +| 单栏圆角 | `4px` | §4.1 | +| 栏体最小高度 | `360px`（不足时撑满，超出滚动） | — | +| 两栏与方向按钮组间距 | `--spacing-3` (12px) | §7.1 | + +### 18.3 栏标题栏（Header） + +标题栏是**实心主色蓝**横条，承载栏名 + 计数。 + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 背景 | `#1677FF` (ZS-002-06) | §1.1.6 主色 | +| 高度 | `40px` | — | +| 水平 padding | `--spacing-4` (16px) | §7.1 | +| 标题文字（如「列表」「已选」） | `14px Medium`，`#FFFFFF` | — | +| 计数文字 `(0/13)` | `14px Regular`，`rgba(255,255,255,0.85)` | — | +| 圆角 | 上方两角 `4px`，与栏体顶部贴合 | §4.1 | + +### 18.4 栏内条目 + +#### 18.4.1 平铺列表项（目标栏 / 源栏叶子） + +每行 = 复选框 + 文字，整行可点击切换勾选。复选框规格复用 §16.3。 + +| 状态 | 背景 | 复选框 | 文字 | +|------|------|--------|------| +| 默认 | `transparent` | 未选：`1px solid #6E88B0` (ZS-004-04) | `#C5CFE0` (ZS-004-02) | +| Hover | `rgba(22,119,255,0.08)` | hover 边框 `#4096FF` (ZS-002-05) | `#FFFFFF` | +| 已选 | `transparent` | 实心填充 `#1677FF` (ZS-002-06) + 白勾 ✓ | `#FFFFFF` | +| 禁用 | `transparent` | `1px solid #4A6491` (ZS-004-05) + 背景 `rgba(22,119,255,0.04)` | `#4A6491` | + +| 属性 | 取值 | +|------|------| +| 行高 | `36px` | +| 水平 padding | `--spacing-3` (12px) | +| 复选框 → 文字间距 | `--spacing-2` (8px) | +| 项之间分隔 | 无分割线（靠 hover 背景区分） | + +#### 18.4.2 树形节点（源栏） + +源栏按部门层级缩进，父节点带展开箭头 `▸ / ▾`。 + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 展开箭头 `▸ / ▾` | `12px`，`#6E88B0` (ZS-004-04)，hover `#4096FF` | ZS-002-05 | +| 每级缩进 | `--spacing-4` (16px) | §7.1 | +| 父节点复选框 | 支持**半选**（部分子项选中），中央 `8px × 2px` 白色横线，填充 `#1677FF` | §16.3 半选 | +| 箭头 → 复选框间距 | `--spacing-1` (4px) | — | +| 节点文字 | 同 §18.4.1 平铺列表项配色 | — | + +> 勾选父节点 = 勾选其全部子孙；子项部分选中时父节点显示半选态（同 §15.2.3 全选逻辑）。 + +### 18.5 中间方向按钮组 + +两颗上下排列的小尺寸图标按钮，控制条目在两栏间转移。 + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 按钮尺寸 | `28px × 28px`（小号） | §5.1 | +| 圆角 | `2px` | §4.1 | +| 两按钮纵向间距 | `--spacing-2` (8px) | §7.1 | +| 图标 `‹` `›` | `14px`，`#FFFFFF` | — | +| **可用态**背景 | `#1677FF` (ZS-002-06) | §5.2.1 主按钮 | +| 可用态 Hover | `#0958D9` (ZS-002-07) | — | +| 可用态 Active | `#003EB3` (ZS-002-08) | — | +| **禁用态**背景 | `rgba(22,119,255,0.35)`，图标 `#6E88B0` (ZS-004-04) | §5.2.1 失效 | + +行为： +- `›`：把**源栏选中项**移入目标栏；源栏无选中时按钮禁用。 +- `‹`：把**目标栏选中项**移回源栏；目标栏无选中时按钮禁用。 +- 转移后两栏标题计数 `(已选/总数)` 同步刷新。 + +### 18.6 可搜索变体 + +在**两栏标题栏下方各嵌入一行搜索框**，输入时实时过滤本栏条目；树形栏过滤后保留命中项的祖先路径。 + +| 属性 | 取值 | 来源 | +|------|------|------| +| 搜索框规格 | 沿用 §14.1 公共规格**小号**（高 `28px`） | §14.1 | +| 占位符 | "请输入"，`#6E88B0` (ZS-004-04) | — | +| 右侧 🔍 图标 | `14px`，`#6E88B0`，hover `#4096FF` | ZS-002-05 | +| 搜索框背景 | `#0C1836` (ZS-004-09，比栏体深一档) | — | +| 搜索框水平外边距 | `--spacing-3` (12px)（与栏体左右留白对齐） | — | +| 搜索框 → 列表纵向间距 | `--spacing-2` (8px) | §7.1 | + +### 18.7 选用决策 + +| 场景 | 选择 | +|------|------| +| 候选项 ≤ 20、无层级 | §18.1 基础用法（两栏平铺） | +| 候选项有部门 / 分类层级 | 源栏启用 §18.4.2 树形节点 | +| 候选项较多 / 需快速定位 | §18.6 可搜索变体 | +| 仅单选搬移、候选少 | 不必用穿梭框，改用 §15 选择器 | + +### 18.8 CSS Token 参考 + +```css +:root { + /* 外层与栏 */ + --transfer-frame-bg: #0C1836; /* ZS-004-09 外层分栏 */ + --transfer-col-bg: #122347; /* ZS-004-08 单栏 */ + --transfer-col-border: #1A2F5A; /* ZS-004-07 */ + --transfer-col-radius: 4px; + + /* 标题栏 */ + --transfer-header-bg: #1677FF; /* ZS-002-06 */ + --transfer-header-text: #FFFFFF; + --transfer-header-count: rgba(255,255,255,0.85); + --transfer-header-h: 40px; + + /* 条目 */ + --transfer-item-h: 36px; + --transfer-item-text: #C5CFE0; /* ZS-004-02 */ + --transfer-item-text-on: #FFFFFF; + --transfer-item-hover-bg: rgba(22,119,255,0.08); + --transfer-item-disabled: #4A6491; /* ZS-004-05 */ + --transfer-tree-indent: 16px; + --transfer-tree-arrow: #6E88B0; /* ZS-004-04 */ + --transfer-tree-arrow-hover: #4096FF; /* ZS-002-05 */ + + /* 复选框（复用 §16.3） */ + --transfer-check-border: #6E88B0; /* ZS-004-04 */ + --transfer-check-fill: #1677FF; /* ZS-002-06 */ + --transfer-check-mark: #FFFFFF; + + /* 方向按钮 */ + --transfer-btn-size: 28px; + --transfer-btn-bg: #1677FF; /* ZS-002-06 */ + --transfer-btn-hover: #0958D9; /* ZS-002-07 */ + --transfer-btn-active: #003EB3; /* ZS-002-08 */ + --transfer-btn-disabled: rgba(22,119,255,0.35); + --transfer-btn-icon: #FFFFFF; + --transfer-btn-icon-disabled: #6E88B0; + + /* 搜索框（复用 §14.1 小号） */ + --transfer-search-h: 28px; + --transfer-search-bg: #0C1836; /* ZS-004-09 */ + --transfer-search-border: #1A2F5A; /* ZS-004-07 */ +} +``` + +--- + +## 19. 树选择（TreeSelect） + +> 对应设计稿「5.19 输入-树选择」。触发器即一个「请选择 ▾」控件，下拉展开一棵**可折叠树**，叶子 / 节点可被选中。按值数分**单选 / 多选**，按是否带过滤分**无搜索 / 有搜索**，共 4 种组合。触发器规格复用 §15.1.1 选择器触发器；面板规格复用 §15.1.2 下拉面板；多选 Tag、复选框分别复用 §15.2.1、§16.3。配色全部从 §1.1.3 渐蓝系（ZS-002）与 §1.1.5 深蓝系（ZS-004）取。 + +### 19.1 触发器（Trigger） + +| 变体 | 触发器内容 | 来源 | +|------|-----------|------| +| 单选 | 单行文字（已选节点名，如 `PC终端`）；占位 "请选择" | §15.1.1 | +| 多选 | 渲染已选 Tag 列表（`n1 × n1 ×`），超宽折叠成 `+N ×` | §15.2.1 | + +| 属性 | 取值 | 来源 | +|------|------|------| +| 高度 | `32px` | §14.1 | +| 圆角 | `2px` | §4.1 | +| 背景 | `#0C1836` (ZS-004-09) | — | +| 边框 | `1px solid #1A2F5A`（默认）；状态机复用 §14.1.1 | ZS-004-07 | +| 右侧箭头 | 收起 `▾` / 展开 `▴`，`12px`，`#6E88B0`，hover `#4096FF` | ZS-002-05 | + +### 19.2 下拉面板（Panel） + +| 属性 | 取值 | 来源 | +|------|------|------| +| 背景 | `#122347` (ZS-004-08) | §15.1.2 | +| 边框 | `1px solid #1A2F5A` (ZS-004-07) | — | +| 阴影 | `0 4px 16px rgba(6, 14, 36, 0.6)`（§3.1.4 三级阴影） | — | +| 圆角 | `2px` | — | +| 内边距 | 上下 `--spacing-2` (8px) | §7.1 | +| 与触发器纵向间距 | `--spacing-1` (4px) | — | +| 面板宽度 | 与触发器等宽（最小 `220px`） | — | + +### 19.3 树节点（公共） + +``` +[-] 全部终端 + └ [-] 本级中心 + └ [-] PC终端 + ├ ─ 研发管理部 + ├ [-] 产品线 + │ ├ ▓ 开发小组 ← 选中（整行高亮） + │ └ ─ 测试小组 + └ ─ 未分组用户终端 + └ [+] 下级中心 ← 折叠（含未展开子树） +``` + +#### 19.3.1 节点规格 + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 节点行高 | `32px` | — | +| 每级缩进 | `--spacing-4` (16px) | §7.1 | +| 展开 / 折叠图标 | 方形 `[-]` / `[+]`（含子树时显示），`12px`，描边 `1px solid #6E88B0`，符号 `#6E88B0` | ZS-004-04 | +| 图标 Hover | 描边 + 符号 `#4096FF` (ZS-002-05) | — | +| 叶子前缀 | 短横 `─`（占位对齐），`#4A6491` (ZS-004-05) | — | +| 图标 → 文字间距 | `--spacing-2` (8px) | — | +| 文字 | `14px Regular` | — | + +#### 19.3.2 节点状态配色 + +| 状态 | 行背景 | 文字 | 来源 | +|------|--------|------|------| +| 默认 | `transparent` | `#C5CFE0` (ZS-004-02) | — | +| Hover | `rgba(22,119,255,0.08)` | `#FFFFFF` | — | +| 选中（单选 / 命中叶子） | **整行实心高亮** `#1677FF` (ZS-002-06) | `#FFFFFF` | §1.1.6 主色 | +| 父级（含选中子项，未自身选中） | `transparent` | `#FFFFFF` | — | +| 禁用 | `transparent` | `#4A6491` (ZS-004-05) | — | + +> 单选选中态用**整行通栏蓝底**（不是仅文字变色），与下拉联想项的局部 hover 区分；点击节点空白处 = 选中该节点（父节点亦可选）。 + +### 19.4 单选变体 + +| 维度 | 规则 | +|------|------| +| 选中表现 | 点击节点 → 整行 `#1677FF` 高亮，回填触发器文字，**关闭面板** | +| 同时可选数 | 1（再选其它节点替换原值） | +| 触发器 | 单行文字 | +| 节点前缀 | 无复选框，仅展开图标 + 叶子短横 | + +### 19.5 多选变体 + +| 维度 | 规则 | +|------|------| +| 节点前缀 | 展开图标后增加**复选框**（规格复用 §16.3） | +| 选中表现 | 勾选复选框；命中行可叠加 `#1677FF` 整行高亮强调当前焦点 | +| 父子联动 | 勾父节点 → 勾全部子孙；子项部分选中 → 父节点**半选**（中央白横线） | +| 触发器 | 渲染已选 Tag（`n1 ×`），溢出折叠 `+N ×`（§15.2.1） | +| 关闭时机 | 多选**不关闭**面板，点触发器外部或箭头收起 | + +| 复选框状态 | 外观 | 来源 | +|-----------|------|------| +| 未选 | `1px solid #6E88B0` (ZS-004-04) + 透明底 | §16.5（面板内用灰描边） | +| 已选 | 实心 `#1677FF` (ZS-002-06) + 白勾 ✓ | §16.3 | +| 半选 | 实心 `#1677FF` + 中央 `8px × 2px` 白横线 | §16.3 | +| 禁用 | `1px solid #4A6491` (ZS-004-05) + 背景 `rgba(22,119,255,0.04)` | — | + +### 19.6 有搜索变体 + +面板顶部嵌入一行搜索框，输入时实时过滤树节点，**保留命中节点的祖先链**并自动展开。 + +| 属性 | 取值 | 来源 | +|------|------|------| +| 搜索框规格 | 沿用 §14.1 公共规格**小号**（高 `28px`） | §14.1 | +| 占位符 | "搜索"，`#6E88B0` (ZS-004-04) | — | +| 右侧 🔍 图标 | `14px`，`#6E88B0`，hover `#4096FF` | ZS-002-05 | +| 搜索框背景 | `#0C1836` (ZS-004-09) | — | +| 搜索框 → 树主体间距 | `--spacing-2` (8px) + 分割线 `1px solid #1A2F5A` | §6.1 | +| 命中文字高亮（可选） | 关键字片段 `#4096FF` (ZS-002-05) | — | + +### 19.7 交互与动画 + +| 行为 | 动效 | 来源 | +|------|------|------| +| 面板展开 | `scaleY(0.95) → 1`，`opacity 0 → 1`，`200ms ease-out` | §8.5 | +| 节点展开 / 折叠 | 子树高度 `0 → auto`，`[+]/[-]` 切换，`200ms ease-out` | — | +| 触发器箭头 | `▾ → ▴` 旋转 `180deg`，`200ms ease-out` | — | +| Hover 背景过渡 | `120ms ease-out` | §8.5 | + +### 19.8 选用决策 + +| 场景 | 选择 | +|------|------| +| 层级数据、选单个节点 | §19.4 单选 | +| 层级数据、选多个节点（含父子联动） | §19.5 多选 | +| 树节点多 / 需快速定位 | 叠加 §19.6 有搜索 | +| 需要在两栏之间搬移而非单纯选取 | 改用 §18 穿梭框 | +| 无层级的平铺多选 | 改用 §15.2 多项选择 | + +### 19.9 CSS Token 参考 + +```css +:root { + /* 触发器（复用 §15.1.1 / §14.1） */ + --tree-trigger-bg: #0C1836; /* ZS-004-09 */ + --tree-trigger-border: #1A2F5A; /* ZS-004-07 */ + --tree-trigger-text: #C5CFE0; /* ZS-004-02 */ + --tree-trigger-arrow: #6E88B0; /* ZS-004-04 */ + --tree-trigger-arrow-hover: #4096FF; /* ZS-002-05 */ + + /* 面板（复用 §15.1.2） */ + --tree-panel-bg: #122347; /* ZS-004-08 */ + --tree-panel-border: #1A2F5A; /* ZS-004-07 */ + + /* 节点 */ + --tree-node-h: 32px; + --tree-indent: 16px; + --tree-node-text: #C5CFE0; /* ZS-004-02 */ + --tree-node-text-on: #FFFFFF; + --tree-node-hover-bg: rgba(22,119,255,0.08); + --tree-node-selected-bg: #1677FF; /* ZS-002-06 整行高亮 */ + --tree-node-disabled: #4A6491; /* ZS-004-05 */ + --tree-toggle-border: #6E88B0; /* [+]/[-] 描边 */ + --tree-toggle-hover: #4096FF; /* ZS-002-05 */ + --tree-leaf-dash: #4A6491; /* 叶子短横 */ + + /* 多选复选框（复用 §16） */ + --tree-check-border: #6E88B0; /* ZS-004-04 面板内灰描边 */ + --tree-check-fill: #1677FF; /* ZS-002-06 */ + --tree-check-mark: #FFFFFF; + + /* 多选 Tag（复用 §15.2.1） */ + --tree-tag-bg: #1677FF; /* ZS-002-06 */ + --tree-tag-text: #FFFFFF; + --tree-tag-close: rgba(255,255,255,0.72); + + /* 搜索框（复用 §14.1 小号） */ + --tree-search-h: 28px; + --tree-search-bg: #0C1836; /* ZS-004-09 */ + --tree-search-border: #1A2F5A; /* ZS-004-07 */ +} +``` + +--- + +## 20. 上传（Upload） + +> 对应设计稿「5.20 输入-上传（上）」。覆盖三种形态：**上传组件**（label + 触发按钮 + 文件名回填框）、**批量上传**（拖拽区 + 文件表格 + 底部操作）、**批量上传中**（带状态列的文件列表）。按钮复用 §5.2，输入框复用 §14.1，表格分割线复用 §6，状态色取 §1.1.2 渐红系（错误）与 §1.1.4 渐青系（成功）。其余配色从渐蓝系（ZS-002）与深蓝系（ZS-004）取。 + +### 20.1 上传组件（单文件 · 表单内） + +表单字段形态：左 `label` + 触发按钮 + 说明 + 文件名回填框。 + +``` +label [ ⬆ 上传文件 ] + 支持 DOCX/ZIP/PDF 格式，文件大小不超过 2 MB。 + 下载示例文件 +label [ 未选择文件 ] [ 选择文件 ] +``` + +#### 20.1.1 元素规格 + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| `label` 文字 | `14px Regular`，`#6E88B0` (ZS-004-04) | §12.2.2 | +| 「⬆ 上传文件」按钮 | 沿用 §5.2.2 默认按钮（描边 `#6E88B0` + 透明底 + `#C5CFE0` 文字），前缀上传图标同文字色 | §5.3.2 | +| 帮助说明文字 | `14px Regular`，`#4096FF` (ZS-002-05) | §1.1.6 | +| 「下载示例文件」链接 | `14px Regular`，`#4096FF`，hover `#1677FF` + 下划线 | §5.2.3 文本按钮 | +| 文件名回填框 | 沿用 §14.1 输入框（高 `32px`，只读），占位 "未选择文件" `#6E88B0` | §14.1 | +| 「选择文件」按钮 | 沿用 §5.2.1 主按钮（实心 `#1677FF` + 白字） | §5.2.1 | +| 回填框 → 按钮间距 | `--spacing-2` (8px) | §7.1 | +| 行与行纵向间距 | `--spacing-3` (12px) | §7.1 | + +### 20.2 批量上传（拖拽区 + 文件表格） + +``` +[ ⬆ 上传文件 ] 支持批量上传，上传格式为txt文件 +┌───────────────────────────────────────────────┐ +│ 文件名 大小 状态 操作 │ ← 表头 +├╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌┤ +│ │ +│ 释放鼠标 │ ← 空态 / 拖拽提示 +│ │ +└───────────────────────────────────────────────┘ + [ 取消 ] [ 开始上传 ] +``` + +#### 20.2.1 触发区 + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 「⬆ 上传文件」按钮 | 沿用 §5.2.1 主按钮（实心 `#1677FF`），前缀上传图标白色 | §5.3.2 | +| 右侧格式说明 | `14px Regular`，`#6E88B0` (ZS-004-04) | — | +| 按钮 → 说明间距 | `--spacing-3` (12px) | §7.1 | + +#### 20.2.2 拖拽区 / 文件表格容器 + +| 属性 | 取值 | 来源 | +|------|------|------| +| 容器背景 | `#0C1836` (ZS-004-09) | §3.1.3（凹陷感） | +| 容器边框 | `1px dashed #1A2F5A`（空闲）；**拖拽悬停时** `1px dashed #4096FF` (ZS-002-05) | §6.1 虚线 | +| 圆角 | `4px` | §4.1 | +| 空态提示文字「释放鼠标」 | `14px Regular`，`#4096FF` (ZS-002-05)，居中 | — | +| 容器最小高度 | `200px` | — | + +#### 20.2.3 表头 + +| 属性 | 取值 | 来源 | +|------|------|------| +| 列 | `文件名 / 大小 / 状态 / 操作` | — | +| 文字 | `14px Medium`，`#C5CFE0` (ZS-004-02) | — | +| 表头底分割线 | `1px dashed #4A6491` (ZS-004-05) | §6.1 虚线 | +| 行高 | `40px` | — | +| 水平 padding | `--spacing-4` (16px) | §7.1 | + +#### 20.2.4 底部操作 + +| 元素 | 规格 | 来源 | +|------|------|------| +| 「取消」 | 沿用 §5.2.2 默认按钮 | §5.2.2 | +| 「开始上传」 | 沿用 §5.2.1 主按钮 | §5.2.1 | +| 按钮排列 | 默认按钮在左、主按钮在右 | §5.3.4 | +| 按钮间距 | `--spacing-2` (8px) | §7.1 | +| 操作区与表格间距 | `--spacing-4` (16px)，右对齐 | §7.1 | + +### 20.3 批量上传中（带状态列） + +文件入列后逐行显示上传状态，状态色按结果区分。 + +``` +┌───────────────────────────────────────────────────────┐ +│ 文件名 大小 状态 操作 │ +├╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌┤ +│ 文件名.txt ✓ 上传成功 删除 │ +│ 文件名是六个字…txt 40K ⊘ 文件格式有误 删除 │ +│ 文件名.txt 40K ◌ 上传40%… 删除 │ +│ 文件名.txt 40K ◌ 上传40%… 删除 │ +│ 文件名.txt 40K ◷ 待上传 删除 │ +└───────────────────────────────────────────────────────┘ + [ 取消 ] [ 开始上传 ] +``` + +#### 20.3.1 数据行规格 + +| 属性 | 取值 | 来源 | +|------|------|------| +| 行高 | `40px` | — | +| 行间分割线 | `1px dashed #2D4473` (ZS-004-06，弱化) | §6.1 | +| 文件名文字 | `14px Regular`，`#C5CFE0` (ZS-004-02)，过长 `…` 省略中部 | — | +| 大小文字（数字） | `14px Regular`（D-DIN / Arial），`#6E88B0` (ZS-004-04) | §2.1.2 | +| 「删除」操作 | 沿用 §5.2.3 文本按钮，默认 `#4096FF`，hover `#1677FF` + 下划线 | §5.2.3 | + +#### 20.3.2 状态列配色 + +| 状态 | 图标 | 图标 / 文字色 | 来源 | +|------|------|--------------|------| +| 上传成功 | ✓（实心圆勾） | `#13C2C2` (ZS-003-06，渐青/成功) | §1.1.4 | +| 文件格式有误 / 失败 | ⊘（实心圆叹号） | `#F5222D` (ZS-001-06，渐红/错误) | §1.1.2 | +| 上传中（带百分比） | ◌（旋转环） | `#1677FF` (ZS-002-06)，环旋转 `1.2s linear infinite` | §5.4.2 加载 | +| 待上传（排队） | ◷（时钟） | `#4096FF` (ZS-002-05) | §1.1.6 | + +| 属性 | 取值 | +|------|------| +| 状态图标尺寸 | `16px` | +| 图标 → 文字间距 | `--spacing-2` (8px) | +| 状态文字字号 | `14px Regular` | +| 进度文字（"上传40%…"） | 与所在状态图标同色 | + +> 进度可叠加细进度条：行底 `2px` 高，已传段 `#1677FF` (ZS-002-06)，未传段 `#1A2F5A` (ZS-004-07)，宽度按百分比。 + +### 20.4 状态流转 + +| 流转 | 触发 | +|------|------| +| 待上传 → 上传中 | 点击「开始上传」，按队列依次启动 | +| 上传中 → 上传成功 | 服务端返回 2xx，图标切 ✓，行可保留或淡出 | +| 上传中 → 失败 | 网络 / 服务端错误，图标切 ⊘，文字 `#F5222D`，可点「删除」或重试 | +| 校验即失败 | 入列时格式 / 大小不符，直接标「文件格式有误」，不进入上传 | +| 任意态 → 移除 | 点「删除」从列表移除（上传中则中断请求） | + +### 20.5 选用决策 + +| 场景 | 选择 | +|------|------| +| 表单内单文件（头像 / 附件） | §20.1 上传组件 | +| 多文件批量、需拖拽 | §20.2 批量上传 | +| 多文件需逐条看进度 / 结果 | §20.3 批量上传中 | +| 仅展示已传文件、不再上传 | 用只读文件列表，去掉状态列与底部操作 | + +### 20.6 CSS Token 参考 + +```css +:root { + /* 触发按钮（复用 §5.2） */ + --upload-btn-primary-bg: #1677FF; /* ZS-002-06 主按钮 */ + --upload-btn-outline-border: #6E88B0; /* ZS-004-04 默认按钮 */ + --upload-btn-outline-text: #C5CFE0; /* ZS-004-02 */ + + /* 说明 / 链接 */ + --upload-help-text: #4096FF; /* ZS-002-05 */ + --upload-tip-text: #6E88B0; /* ZS-004-04 */ + --upload-link: #4096FF; /* ZS-002-05 */ + --upload-link-hover: #1677FF; /* ZS-002-06 */ + + /* 文件名回填框（复用 §14.1） */ + --upload-input-bg: #0C1836; /* ZS-004-09 */ + --upload-input-border: #1A2F5A; /* ZS-004-07 */ + --upload-input-placeholder:#6E88B0; /* ZS-004-04 */ + + /* 拖拽区 / 表格容器 */ + --upload-drop-bg: #0C1836; /* ZS-004-09 */ + --upload-drop-border: #1A2F5A; /* ZS-004-07 虚线 */ + --upload-drop-border-active:#4096FF; /* ZS-002-05 拖拽悬停 */ + --upload-drop-hint: #4096FF; /* "释放鼠标" */ + + /* 表格 */ + --upload-th-text: #C5CFE0; /* ZS-004-02 */ + --upload-th-divider: #4A6491; /* ZS-004-05 表头虚线 */ + --upload-row-divider: #2D4473; /* ZS-004-06 行间虚线 */ + --upload-filename-text: #C5CFE0; /* ZS-004-02 */ + --upload-size-text: #6E88B0; /* ZS-004-04 */ + --upload-action-text: #4096FF; /* ZS-002-05 删除 */ + + /* 状态列 */ + --upload-status-success: #13C2C2; /* ZS-003-06 成功 */ + --upload-status-error: #F5222D; /* ZS-001-06 失败 */ + --upload-status-loading: #1677FF; /* ZS-002-06 上传中 */ + --upload-status-pending: #4096FF; /* ZS-002-05 待上传 */ + + /* 进度条 */ + --upload-progress-done: #1677FF; /* ZS-002-06 */ + --upload-progress-track: #1A2F5A; /* ZS-004-07 */ +} +``` + +--- + +## 21. 弹出式窗口（Modal / Dialog） + +> 对应设计稿「弹出式窗口」。居中模态弹窗，承载多步表单 / 编辑流程。结构 = 遮罩 + 标题栏（含关闭）+ 可选 Tabs + 可选步骤条 + 表单主体 + 底部操作。Tabs 复用 §9.1.1、步骤条复用 §10.2、各表单控件复用 §14~17；本节额外定义弹窗容器、表单项布局，以及截图中出现但前文未覆盖的几个表单原子（分段按钮组 / 密码框 / 文本域 / 数字+单位 / 错误态）。配色从 §1.1.2 渐红系（错误）、§1.1.3 渐蓝系（ZS-002）、§1.1.5 深蓝系（ZS-004）取。 + +### 21.1 遮罩与容器 + +| 属性 | 取值 | 来源 | +|------|------|------| +| 遮罩背景 | `rgba(6, 14, 36, 0.6)`（基于 ZS-004-10） | §3.1.4 | +| 遮罩动画 | `opacity 0 → 1`，`200ms ease-out` | — | +| 容器背景 | `linear-gradient(180deg, #122347 0%, #0C1836 100%)`（ZS-004-08 → ZS-004-09） | §8.2.1 | +| 容器边框 | `1px solid #1A2F5A` (ZS-004-07) | — | +| 容器圆角 | `4px`（§4.1 Modal/Drawer） | §4.1 | +| 容器阴影 | `0 8px 32px rgba(6, 14, 36, 0.6)`（§3.1.4 三级阴影） | §3.1.4 | +| 容器内边距 | `--spacing-6` (32px) | §7.1 | +| 弹出动画 | `scale(0.96) → 1` + `opacity 0 → 1`，`200ms ease-out` | — | +| 宽度档位 | 小 `480px` / 中 `640px` / 大 `800px`（按内容选） | — | + +### 21.2 标题栏 + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 标题文字 | `20px Bold`，`#FFFFFF`，**水平居中** | §2.1.2 | +| 标题下分隔线 | `linear-gradient(90deg, transparent 0%, #1677FF 50%, transparent 100%)`，`1px` 高 | §8.2.4 | +| 关闭按钮 `×` | `16px`，`#6E88B0` (ZS-004-04)，hover `#4096FF` (ZS-002-05) | §5.2.4 | +| 关闭按钮位置 | 右上角，距容器上 / 右内边距对齐 | — | +| 标题栏 → 主体间距 | `--spacing-5` (24px) | §7.1 | + +### 21.3 内嵌 Tabs 与步骤条 + +| 组件 | 复用 | 备注 | +|------|------|------| +| 顶部 Tabs（`Tab1选中 / Tab2默认`） | §9.1.1 横向页签 | 激活 `#4096FF` + `2px` 下划线，下方通栏基线 `1px solid #1A2F5A` | +| 步骤条（`第一步 ✓ / 第二步 ② / 第三步 ③`） | §10.2 弹窗步骤条 | 完成态描边圆 + 蓝勾，当前态实心 `#1677FF` + 白字，未开始描边 `#4A6491`；连接线 `1px dashed` | +| Tabs → 步骤条间距 | `--spacing-5` (24px) | — | +| 步骤条 → 表单间距 | `--spacing-5` (24px) | — | + +### 21.4 表单项布局 + +弹窗内表单采用**左 label + 右控件**横向布局。 + +| 元素 | 规格 | 来源 | +|------|------|------| +| label 文字 | `14px Regular`，`#C5CFE0` (ZS-004-02)，**右对齐** | — | +| label 列宽 | 固定（如 `96px`），右侧留 `--spacing-3` (12px) 到控件 | §7.1 | +| 必填星号 `*` | `#F5222D` (ZS-001-06)，置于 label 前 | §1.1.2 | +| 表单项纵向间距 | `--spacing-4` (16px) | §7.1 | +| 控件默认宽度 | 撑满 label 右侧剩余区 | — | +| label 与控件垂直对齐 | 控件首行基线居中 | — | + +#### 21.4.1 错误态与校验信息 + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 错误边框 | `1px solid #F5222D` + 外发光 `0 0 0 2px rgba(245,34,45,0.16)` | §14.1.1 错误 | +| 错误提示文字（如「输入表单内容报错」） | `12px Regular`，`#F5222D` (ZS-001-06) | §1.1.2 | +| 提示文字位置 | 控件正下方，左对齐于控件 | — | +| 控件 → 提示文字间距 | `--spacing-1` (4px) | §7.1 | + +### 21.5 表单控件补充 + +截图中出现、前文未单列的控件原子： + +#### 21.5.1 分段按钮组（Segmented，如「一级风险 / 二级风险」） + +并排互斥按钮，选中态高亮。 + +| 状态 | 背景 | 边框 | 文字 | +|------|------|------|------| +| 未选 | `transparent` | `1px solid #6E88B0` (ZS-004-04) | `#C5CFE0` (ZS-004-02) | +| 选中 | `rgba(22,119,255,0.16)` | `1px solid #1677FF` (ZS-002-06) | `#4096FF` (ZS-002-05) | +| Hover（未选） | `rgba(22,119,255,0.08)` | `#4096FF` | `#4096FF` | +| 禁用 | `transparent` | `#4A6491` (ZS-004-05) | `#4A6491` | + +- 高度 `32px`，圆角 `2px`（§4.1），内边距 `0 14px` +- 相邻项间距 `--spacing-2` (8px)（独立按钮形态）；若做无缝连体段则共用一条 `1px #1A2F5A` 分隔 + +#### 21.5.2 密码输入框（可见性切换） + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 输入框 | 沿用 §14.1 公共规格 | §14.1 | +| 掩码字符 | `●` / `*`，`#C5CFE0` | — | +| 右侧眼睛图标 `👁 / 👁‍🗨` | `16px`，`#6E88B0`，hover `#4096FF` | ZS-002-05 | +| 切换行为 | 点击图标在「明文 / 掩码」间切换 | — | + +#### 21.5.3 禁用输入框（「未填-禁用」） + +| 属性 | 取值 | 来源 | +|------|------|------| +| 边框 | `1px solid #2D4473` (ZS-004-06) | §14.1.1 失效 | +| 背景 | `rgba(22,119,255,0.04)` | — | +| 占位 / 文字 | `#4A6491` (ZS-004-05) | — | +| 光标 | `not-allowed` | — | + +#### 21.5.4 文本域（Textarea） + +| 属性 | 取值 | 来源 | +|------|------|------| +| 边框 / 背景 / 状态机 | 同 §14.1 输入框 | §14.1 | +| 最小高度 | `96px`（约 4 行） | — | +| 内边距 | `--spacing-3` (12px) | §7.1 | +| 占位文字 | "请输入"，`#6E88B0` | — | +| 圆角 | `2px` | §4.1 | +| 右下角缩放手柄 | 可选，`#4A6491` | — | + +#### 21.5.5 数字 + 单位输入（「100 天」） + +输入框右侧无缝拼一个**实心主色蓝单位块**。 + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 数字输入区 | 沿用 §14.1，右边框去除（与单位块拼接） | §14.1 | +| 单位块背景 | `#1677FF` (ZS-002-06) | §14.3 后台搜索框按钮 | +| 单位块文字 | `14px Regular`，`#FFFFFF` | — | +| 单位块内边距 | `0 --spacing-3`（12px） | — | +| 整体高度 | `32px`，右侧两角圆角 `2px` | §4.1 | + +#### 21.5.6 行内日期 / 范围 / 下拉 / 复选 + +| 控件 | 复用 | +|------|------| +| 「威胁类型 请选择 ▾」 | §15.1 选择器触发器 | +| 「首发时间」日期时间 | §17.1 日期触发器（错误态见 §21.4.1） | +| 「周期 … 至 …」范围 | §17.1 范围触发器变体 | +| 「该账户仅允许…」复选框 | §16.3 多选 | + +### 21.6 底部操作 + +| 元素 | 规格 | 来源 | +|------|------|------| +| 区域顶部间距 | `--spacing-5` (24px)（与主体留白） | §7.1 | +| 按钮对齐 | 右对齐（也可整体居中，跟随设计稿——本稿居中） | §5.3.4 | +| 「取消」 | 沿用 §5.2.2 默认按钮 | §5.2.2 | +| 「保存」/「确定」 | 沿用 §5.2.1 主按钮 | §5.2.1 | +| 排列顺序 | 默认按钮在左、主按钮在右 | §5.3.4 | +| 按钮间距 | `--spacing-2` (8px) | §7.1 | + +### 21.7 交互 + +| 行为 | 规则 | +|------|------| +| 打开 | 遮罩淡入 + 容器 `scale(0.96)→1`，焦点落到首个可输入控件 | +| 关闭 | 点 `×` / 「取消」 / 遮罩外 / `Esc`；有未保存改动时可二次确认 | +| 提交 | 「保存」前做校验，失败项标 §21.4.1 错误态并滚动到首个错误 | +| 焦点陷阱 | `Tab` 循环限制在弹窗内（不泄漏到背景页面） | + +### 21.8 CSS Token 参考 + +```css +:root { + /* 遮罩与容器 */ + --modal-mask: rgba(6,14,36,0.6); /* ZS-004-10 */ + --modal-bg-top: #122347; /* ZS-004-08 */ + --modal-bg-bottom: #0C1836; /* ZS-004-09 */ + --modal-border: #1A2F5A; /* ZS-004-07 */ + --modal-radius: 4px; + --modal-shadow: 0 8px 32px rgba(6,14,36,0.6); + + /* 标题 */ + --modal-title-text: #FFFFFF; + --modal-title-line: linear-gradient(90deg, transparent, #1677FF, transparent); + --modal-close: #6E88B0; /* ZS-004-04 */ + --modal-close-hover: #4096FF; /* ZS-002-05 */ + + /* 表单项 */ + --form-label: #C5CFE0; /* ZS-004-02 */ + --form-required: #F5222D; /* ZS-001-06 */ + --form-error-border: #F5222D; + --form-error-ring: 0 0 0 2px rgba(245,34,45,0.16); + --form-error-text: #F5222D; + + /* 分段按钮组 */ + --seg-border: #6E88B0; /* ZS-004-04 未选 */ + --seg-selected-bg: rgba(22,119,255,0.16); + --seg-selected-border: #1677FF; /* ZS-002-06 */ + --seg-selected-text: #4096FF; /* ZS-002-05 */ + + /* 数字+单位 */ + --unit-addon-bg: #1677FF; /* ZS-002-06 */ + --unit-addon-text: #FFFFFF; + + /* 禁用输入 */ + --input-disabled-border:#2D4473; /* ZS-004-06 */ + --input-disabled-bg: rgba(22,119,255,0.04); + --input-disabled-text: #4A6491; /* ZS-004-05 */ +} +``` + +--- + +## 22. 卡片（Card） + +> 对应设计稿「卡片」基本形式与组合（分组信息卡片）。覆盖**基础卡片**（标题 + 操作）、**新增占位卡片**、**信息卡片**（头像 + 字段 + 标签 + 统计）三类。容器 / 阴影 / 占位卡片配色直接沿用 §3.1，按钮 / 文本按钮沿用 §5，标签沿用 §15.2.1。配色从 §1.1.3 渐蓝系（ZS-002）与 §1.1.5 深蓝系（ZS-004）取。 + +### 22.1 基础卡片（标题 + 操作） + +``` +┌───────────────────────────┐ +│ ▎标题16PX ✏️ ⋯ │ ← 标题栏（左竖条 + 标题 + 右操作） +├───────────────────────────┤ +│ 卡片内容 … │ +└───────────────────────────┘ +``` + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 卡片背景 | `#122347` (ZS-004-08) | §3.1.2 | +| 卡片边框 | `1px solid #1A2F5A` (ZS-004-07) | — | +| 卡片圆角 | `4px` | §4.1 | +| 卡片阴影 | `0 2px 8px rgba(22,119,255,0.12)`（§3.1.4 一级） | §3.1.4 | +| 标题文字 | `16px Bold`，`#C5CFE0` (ZS-004-02) | §3.1.2 | +| 标题左竖条 | `3px × 14px`，`#1677FF` (ZS-002-06) | §1.1.6 | +| 编辑图标 ✏️ | `16px`，`#6E88B0` (ZS-004-04)，hover `#4096FF` | §3.1.2 | +| 更多图标 ⋯ | `16px`，`#6E88B0`，hover `#4096FF` | — | +| 标题栏内边距 | `--spacing-4` (16px) | §7.1 | +| 标题栏底分割线 | `1px solid #1A2F5A` | §6.1 | +| 内容区内边距 | `--spacing-4` (16px) | §7.1 | +| 卡片 hover | 阴影升二级 `0 4px 16px rgba(22,119,255,0.24)` | §3.1.4 | + +### 22.2 新增占位卡片 + +虚线描边的「+ 新增」入口，沿用 §3.1.3。 + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 背景 | `#0C1836` (ZS-004-09，与外层同色营造凹陷) | §3.1.3 | +| 虚线边框 | `1px dashed #4096FF` (ZS-002-05) | §3.1.3 | +| 加号图标 `+` | `24px`，`#4096FF`，居中 | §3.1.3 | +| 圆角 | `4px` | §4.1 | +| Hover | 边框 + 加号 `#1677FF` (ZS-002-06)，背景 `rgba(22,119,255,0.08)` | — | +| 尺寸 | 与同行内容卡片等高等宽 | — | + +### 22.3 信息卡片（头像 + 字段 + 标签 + 统计） + +用于「分组信息卡片」——展示个体 / 媒体 / 人物等档案条目。 + +``` +┌──────────────────────────────────────┐ +│ ▎个体 ✏️ 标签 ✕ │ ← 头部：类型标识 + 操作 +│ 👤 姓名（Name-name） 🔖 在线标签 │ ← 头像 + 主名 + 状态标签 +│ 基本信息 样下功能▾ 线上发声▾ │ ← 字段/操作行 +│ 国家/地区：国家恒及 │ +│ 职能：职务职务 │ +│ 关注度排行：#话题二 #话题二 #话题二 │ ← 标签组 +└──────────────────────────────────────┘ +``` + +#### 22.3.1 结构与配色 + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 卡片容器 | 同 §22.1（背景 `#122347` / 边框 `#1A2F5A` / 圆角 `4px` / 一级阴影） | — | +| 类型标识（个体 / 媒体）左竖条 | `3px × 14px`，`#1677FF` (ZS-002-06) | §22.1 | +| 类型标识文字 | `14px Medium`，`#C5CFE0` (ZS-004-02) | — | +| 头像占位 | 方/圆 `40px`，底色 `#1A2F5A` (ZS-004-07)，图标 `#6E88B0` | — | +| 主名文字 | `16px Medium`，`#FFFFFF` | — | +| 字段标签（"国家/地区：") | `14px Regular`，`#6E88B0` (ZS-004-04) | — | +| 字段值 | `14px Regular`，`#C5CFE0` (ZS-004-02) | — | +| 行内操作（"线上发声 ▾"） | 沿用 §5.3.1 文字+下拉按钮（默认 Outline） | §5.3.1 | +| 状态标签（"在线"等） | 沿用 §15.2.1 Tag（实心 `#1677FF` + 白字）或成功态 `#13C2C2`（ZS-003-06） | §15.2.1 / §1.1.4 | +| 话题标签（`#话题`） | `12px`，文字 `#4096FF` (ZS-002-05)，背景 `rgba(22,119,255,0.12)`，圆角 `2px` | — | +| 头部操作图标 ✏️ / ✕ | `16px`，`#6E88B0`，hover `#4096FF` | §22.1 | +| 字段行纵向间距 | `--spacing-2` (8px) | §7.1 | +| 区块之间间距 | `--spacing-3` (12px) | §7.1 | + +#### 22.3.2 带统计的媒体卡片变体 + +媒体类卡片在字段区下方追加「平台 + 数值」统计行（如 Facebook 群组数量）： + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 平台图标 | `16px`，原色或 `#4096FF` 单色化 | — | +| 统计标签（"群组数量"） | `14px Regular`，`#6E88B0` (ZS-004-04) | — | +| 统计数值（数字） | `16px Bold`（D-DIN），`#C5CFE0` (ZS-004-02) | §2.1.2 | +| 统计行分隔 | `1px solid #2D4473`（弱化） | §6.1 | + +### 22.4 卡片栅格与间距 + +| 规则 | 取值 | 来源 | +|------|------|------| +| 卡片之间横向间距 | `--spacing-6` (32px) | §7.1 | +| 卡片之间纵向间距 | `--spacing-6` (32px) | §7.1 | +| 卡片内容内边距 | `--spacing-4` (16px) | §7.1 | +| 分组标题（"分组信息卡片"）→ 卡片区 | `--spacing-5` (24px) | §7.1 | + +### 22.5 CSS Token 参考 + +```css +:root { + /* 卡片容器 */ + --card-bg: #122347; /* ZS-004-08 */ + --card-border: #1A2F5A; /* ZS-004-07 */ + --card-radius: 4px; + --card-shadow: 0 2px 8px rgba(22,119,255,0.12); + --card-shadow-hover: 0 4px 16px rgba(22,119,255,0.24); + + /* 标题 */ + --card-title-text: #C5CFE0; /* ZS-004-02 */ + --card-title-bar: #1677FF; /* ZS-002-06 左竖条 */ + --card-action-icon: #6E88B0; /* ZS-004-04 */ + --card-action-hover: #4096FF; /* ZS-002-05 */ + + /* 新增占位 */ + --card-add-bg: #0C1836; /* ZS-004-09 */ + --card-add-border: #4096FF; /* ZS-002-05 虚线 */ + --card-add-hover: #1677FF; /* ZS-002-06 */ + + /* 信息卡片 */ + --card-avatar-bg: #1A2F5A; /* ZS-004-07 */ + --card-name-text: #FFFFFF; + --card-field-label: #6E88B0; /* ZS-004-04 */ + --card-field-value: #C5CFE0; /* ZS-004-02 */ + --card-topic-tag-text:#4096FF; /* ZS-002-05 */ + --card-topic-tag-bg: rgba(22,119,255,0.12); + --card-stat-num: #C5CFE0; /* ZS-004-02 */ + --card-stat-divider: #2D4473; /* ZS-004-06 */ +} +``` + +--- + +## 23. 折叠面板（Collapse / 手风琴） + +> 对应设计稿「折叠」。覆盖**基础折叠**（标题 + 描述）、**列表概览折叠 + 图标**、**手风琴折叠**（同时仅一项展开）、**列表项折叠**（右侧带计数 + 展开链接）四类。配色从 §1.1.3 渐蓝系（ZS-002）与 §1.1.5 深蓝系（ZS-004）取，与 §8 导航下拉 / §9.2 锚点一致。 + +### 23.1 基础折叠（标题 + 描述） + +``` +收起态: 展开态: +┌────────────────────────┐ ┌────────────────────────┐ +│ 标题 ▾ │ │ 标题 ▴ │ +│ 描述文字说明 │ │ 描述文字说明 │ +└────────────────────────┘ ├────────────────────────┤ + │ 展开后的内容区 … │ + └────────────────────────┘ +``` + +#### 23.1.1 头部规格 + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 头部背景 | `#122347` (ZS-004-08) | §3.1.2 | +| 头部边框 | `1px solid #1A2F5A` (ZS-004-07) | — | +| 头部圆角 | `4px`（展开时下两角变直角） | §4.1 | +| 标题文字 | `16px Medium`，`#C5CFE0` (ZS-004-02)；展开时 `#FFFFFF` | — | +| 描述文字 | `14px Regular`，`#6E88B0` (ZS-004-04) | — | +| 展开箭头 `▾ / ▴` | `14px`，`#6E88B0`，hover `#4096FF` (ZS-002-05) | ZS-002-05 | +| 头部高度 | `≥ 48px`（含描述时自适应） | — | +| 头部内边距 | `--spacing-4` (16px) | §7.1 | +| 头部 Hover 背景 | `rgba(22,119,255,0.08)` | §8.4.3 | + +#### 23.1.2 内容区 + +| 属性 | 取值 | +|------|------| +| 背景 | `#0C1836` (ZS-004-09，比头部深一档) | +| 内边距 | `--spacing-4` (16px) | +| 顶部分割线 | `1px solid #1A2F5A` (ZS-004-07) | +| 文字 | `14px Regular`，`#C5CFE0` | + +### 23.2 列表概览折叠 + 图标 + +头部标题前增加一个小图标（业务图标），其余同 §23.1。 + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 前缀小图标 | `16px`，`#4096FF` (ZS-002-05) | — | +| 图标 → 标题间距 | `--spacing-2` (8px) | §7.1 | + +### 23.3 手风琴折叠（互斥单开） + +多个折叠项垂直堆叠，**同一时刻仅允许一项展开**，展开新项时自动收起其它项。 + +``` +┌────────────────────────────────────────┐ +│ ▸ 把了 1300 多万元！他们靠卖「口罩」… 收起 │ ← 展开项（高亮） +│ 描述正文段落描述正文段落 … │ +├────────────────────────────────────────┤ +│ ▸ 某条新闻标题某条新闻标题 … 展开 │ +├────────────────────────────────────────┤ +│ ▸ 某科学家�证据曝光为何争不下 … 展开 │ +└────────────────────────────────────────┘ +``` + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 项之间分隔 | `1px solid #1A2F5A` (ZS-004-07) | §6.1 | +| 收起项标题 | `14px Regular`，`#C5CFE0` (ZS-004-02) | — | +| 展开项标题 | `14px Medium`，`#FFFFFF` | — | +| 展开项左强调条 | 可选 `2px solid #1677FF` (ZS-002-06)，贴左缘 | §8.3.2 激活 | +| 右侧「展开 / 收起」文字按钮 | 沿用 §5.2.3 文本按钮，`#4096FF` → hover `#1677FF` | §5.2.3 | +| 行高 | `≥ 40px` | — | + +### 23.4 列表项折叠（右侧计数 + 展开） + +紧凑列表，每行右侧带一个计数徽标 + 「展开」链接（常用于评论 / 回复折叠）。 + +``` +收起的折叠标题某某某某某 🔺 6405 展开 +``` + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 标题文字 | `14px Regular`，`#C5CFE0` (ZS-004-02)，过长省略 | — | +| 计数图标 | `12px`，`#F5222D`（热度红，ZS-001-06）或 `#4096FF` | §1.1.2 / §1.1.6 | +| 计数数字 | `14px Regular`（D-DIN），`#6E88B0` (ZS-004-04) | §2.1.2 | +| 「展开 / 收起」 | 沿用 §5.2.3 文本按钮 | §5.2.3 | +| 行高 | `36px` | — | +| 行间分割线 | `1px solid #2D4473`（弱化） | §6.1 | +| 行 Hover 背景 | `rgba(22,119,255,0.08)` | — | + +### 23.5 交互与动画 + +| 行为 | 动效 | 来源 | +|------|------|------| +| 展开 / 收起 | 内容高度 `0 → auto`，`opacity 0 → 1`，`200ms ease-out` | §8.5 | +| 箭头旋转 | `▾ → ▴`（`rotate 180deg`），`200ms ease-out` | §8.5 | +| 手风琴互斥 | 展开新项时旧项同步收起，两者动画并行 | — | +| Hover 背景过渡 | `120ms ease-out` | §8.5 | + +### 23.6 三种折叠的选用决策 + +| 场景 | 选择 | +|------|------| +| 单个区块「展开看详情」 | §23.1 基础折叠 | +| 带分类图标的概览块 | §23.2 列表概览折叠 + 图标 | +| 多块互斥、节省纵向空间 | §23.3 手风琴折叠 | +| 长列表内逐条折叠（评论 / 回复） | §23.4 列表项折叠 | + +### 23.7 CSS Token 参考 + +```css +:root { + /* 头部 */ + --collapse-head-bg: #122347; /* ZS-004-08 */ + --collapse-head-border: #1A2F5A; /* ZS-004-07 */ + --collapse-title: #C5CFE0; /* ZS-004-02 */ + --collapse-title-open: #FFFFFF; + --collapse-desc: #6E88B0; /* ZS-004-04 */ + --collapse-arrow: #6E88B0; + --collapse-arrow-hover: #4096FF; /* ZS-002-05 */ + --collapse-head-hover-bg: rgba(22,119,255,0.08); + --collapse-icon: #4096FF; /* 前缀图标 */ + + /* 内容区 */ + --collapse-body-bg: #0C1836; /* ZS-004-09 */ + --collapse-body-divider: #1A2F5A; /* ZS-004-07 */ + + /* 手风琴 / 列表项 */ + --collapse-item-divider: #1A2F5A; /* ZS-004-07 */ + --collapse-item-active-bar:#1677FF; /* ZS-002-06 */ + --collapse-toggle-text: #4096FF; /* ZS-002-05 文本按钮 */ + --collapse-toggle-hover: #1677FF; /* ZS-002-06 */ + --collapse-count-icon: #F5222D; /* ZS-001-06 热度 */ + --collapse-count-num: #6E88B0; /* ZS-004-04 */ + --collapse-row-divider: #2D4473; /* ZS-004-06 */ +} +``` + +--- + +## 24. 描述列表（Descriptions） + +> 对应设计稿「6.7 数据展示-描述」。用于档案 / 详情页的**键值对表格**展示（账号名 / 密码等字段）。整体是一张带边框的两列表格：左列字段名、右列字段值，行底色**斑马交替**。配色从 §1.1.3 渐蓝系（ZS-002）与 §1.1.5 深蓝系（ZS-004）取。 + +### 24.1 区块标题 + +``` +▎资源信息 +──────────────────────── +``` + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 标题左竖条 | `3px × 16px`，`#1677FF` (ZS-002-06) | §22.1 | +| 标题文字 | `16px Bold`，`#C5CFE0` (ZS-004-02) | §3.1.2 | +| 标题下分隔线 | `1px solid #1A2F5A` (ZS-004-07)，通栏 | §6.1 | +| 标题 → 表格间距 | `--spacing-4` (16px) | §7.1 | + +### 24.2 表格容器与单元格 + +| 属性 | 取值 | 来源 | +|------|------|------| +| 外层容器背景 | `#0C1836` (ZS-004-09) | §3.1.1 | +| 表格边框 | `1px solid #1A2F5A` (ZS-004-07)（外框 + 单元格描边） | §6.1 | +| 单元格行高 | `44px` | — | +| 单元格水平 padding | `--spacing-4` (16px) | §7.1 | +| 标签列（左）宽度 | 固定 `≥ 120px` | — | +| 圆角 | 外层 `4px`，内部单元格直角 | §4.1 | + +### 24.3 行配色（斑马交替） + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 标签列文字（"账号名 / 密码"） | `14px Medium`，`#C5CFE0` (ZS-004-02) | — | +| 值列文字 | `14px Regular`，`#C5CFE0` (ZS-004-02) | — | +| 奇数行背景 | `#122347` (ZS-004-08) | §3.1.2 | +| 偶数行背景 | `#0C1836` (ZS-004-09，略深，形成斑马) | §3.1.1 | +| 行 Hover 背景 | `rgba(22,119,255,0.08)` | §8.4.3 | +| 行间 / 列间分割线 | `1px solid #1A2F5A` (ZS-004-07) | §6.1 | + +### 24.4 值内操作（如密码「查看」） + +值列可内嵌文本按钮（如密码掩码后的「查看」切换明文）。 + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 掩码字符 | `*` / `●`，`#C5CFE0` (ZS-004-02) | — | +| 「查看 / 隐藏」 | 沿用 §5.2.3 文本按钮，`#4096FF` → hover `#1677FF` + 下划线 | §5.2.3 | +| 掩码 → 操作间距 | `--spacing-2` (8px) | §7.1 | + +### 24.5 布局变体 + +| 变体 | 说明 | 来源 | +|------|------|------| +| 单列（一问一答竖排） | 每行一个字段，标签列固定宽，值列撑满（本节默认） | — | +| 双列（一行两组键值） | 宽容器下并排两组「标签+值」，组间分割线 `1px solid #1A2F5A` | §6.2 | +| 纯展示无边框 | 去掉单元格描边，仅保留行间细线 `1px solid #2D4473`，用于轻量详情 | §6.1 | + +### 24.6 选用决策 + +| 场景 | 选择 | +|------|------| +| 档案 / 详情字段（键值对） | §24 描述列表 | +| 多行同结构数据（可排序 / 翻页） | 改用数据表格 Table（另见表格规范） | +| 字段数 ≤ 4 且轻量 | §24.5 纯展示无边框变体 | + +### 24.7 CSS Token 参考 + +```css +:root { + /* 区块标题 */ + --desc-title-bar: #1677FF; /* ZS-002-06 左竖条 */ + --desc-title-text: #C5CFE0; /* ZS-004-02 */ + --desc-title-divider: #1A2F5A; /* ZS-004-07 */ + + /* 表格 */ + --desc-wrap-bg: #0C1836; /* ZS-004-09 */ + --desc-border: #1A2F5A; /* ZS-004-07 */ + --desc-row-h: 44px; + --desc-label-text: #C5CFE0; /* ZS-004-02 */ + --desc-value-text: #C5CFE0; /* ZS-004-02 */ + --desc-row-odd-bg: #122347; /* ZS-004-08 斑马奇行 */ + --desc-row-even-bg: #0C1836; /* ZS-004-09 斑马偶行 */ + --desc-row-hover-bg: rgba(22,119,255,0.08); + + /* 值内操作 */ + --desc-action-text: #4096FF; /* ZS-002-05 查看 */ + --desc-action-hover: #1677FF; /* ZS-002-06 */ + + /* 无边框变体 */ + --desc-light-divider: #2D4473; /* ZS-004-06 */ +} +``` + +--- + +## 25. 列表（List） + +> 对应设计稿「6.9 数据展示-列表」。用于信息流 / 评论 / 动态等条目列表，每条 = 头像 + 主名 + 来源标识 + 时间 + 正文。整体包在一个卡片容器内，条目之间用细分割线隔开。配色从 §1.1.3 渐蓝系（ZS-002）与 §1.1.5 深蓝系（ZS-004）取。 + +### 25.1 容器 + +| 属性 | 取值 | 来源 | +|------|------|------| +| 容器背景 | `#0C1836` (ZS-004-09) | §3.1.1 | +| 容器边框 | `1px solid #1A2F5A` (ZS-004-07) | — | +| 容器圆角 | `4px` | §4.1 | +| 容器内边距 | `--spacing-5` (24px) | §7.1 | +| 区块标题「列表」 | `16px Bold`，`#FFFFFF`，置于容器外上方 | §12.2.1 | + +### 25.2 列表条目 + +``` +👤ⓕ Speaker Kevin McCarthy 2023-12-31 18:00:00 + 48923056 + 当我们的退伍军人重新进入平民生活时，他们应该得到最好的职业机会…… +────────────────────────────────────────────────────────────────────── +``` + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 头像 | `40px` 方/圆，底色 `#1A2F5A` (ZS-004-07) | §22.3.1 | +| 来源角标（如 Ⓕ Facebook） | `14px`，叠在头像右下角，原色或 `#4096FF` 单色化 | — | +| 主名文字 | `16px Bold`，`#FFFFFF` | — | +| 副 ID（如 `48923056`） | `14px Regular`，`#4096FF` (ZS-002-05) | §1.1.6 | +| 时间文字（右上角） | `14px Regular`（D-DIN 数字），`#4096FF` (ZS-002-05) | §2.1.2 | +| 正文文字 | `14px Regular`，`#C5CFE0` (ZS-004-02)，行高 `1.6` | — | +| 头像 → 文字间距 | `--spacing-3` (12px) | §7.1 | +| 主名 → 副 ID 间距 | `--spacing-1` (4px) | §7.1 | +| 副 ID → 正文间距 | `--spacing-2` (8px) | §7.1 | +| 条目内边距 | 上下 `--spacing-4` (16px) | §7.1 | +| 条目间分割线 | `1px solid #1A2F5A` (ZS-004-07) | §6.1 | +| 条目 Hover 背景 | `rgba(22,119,255,0.08)` | §8.4.3 | + +### 25.3 变体与状态 + +| 变体 / 状态 | 规则 | +|------------|------| +| 带操作的条目 | 右侧追加文本按钮区（点赞 / 评论 / 更多），沿用 §5.2.3、§5.3.3 | +| 正文折叠 | 超过 N 行用「展开」收起，沿用 §23.4 列表项折叠 | +| 空列表 | 居中提示「暂无数据」，`14px Regular`，`#6E88B0` (ZS-004-04) | +| 加载更多 | 底部「加载更多 »」文本按钮（§5.3.3）或滚动自动加载 | + +### 25.4 CSS Token 参考 + +```css +:root { + --list-wrap-bg: #0C1836; /* ZS-004-09 */ + --list-wrap-border: #1A2F5A; /* ZS-004-07 */ + --list-avatar-bg: #1A2F5A; /* ZS-004-07 */ + --list-name-text: #FFFFFF; + --list-subid-text: #4096FF; /* ZS-002-05 */ + --list-time-text: #4096FF; /* ZS-002-05 */ + --list-body-text: #C5CFE0; /* ZS-004-02 */ + --list-divider: #1A2F5A; /* ZS-004-07 */ + --list-row-hover-bg: rgba(22,119,255,0.08); + --list-empty-text: #6E88B0; /* ZS-004-04 */ +} +``` + +--- + +## 26. 时间轴（Timeline） + +> 对应设计稿「6.11 数据展示」左半与「全局时间轴」。覆盖**基础时间轴点**、**卡片式时间轴**、**全局时间轴**（横向刻度 + 区间滑块）三类。节点圆 / 连接线沿用 §10 步骤条逻辑，配色从 §1.1.3 渐蓝系（ZS-002）与 §1.1.5 深蓝系（ZS-004）取。 + +### 26.1 基础时间轴点（纵向） + +``` +● WirdPress多处绝对路径泄漏 +┊ 12-03 02:21:47 +● WirdPress多处绝对路径泄漏 +┊ 12-03 02:21:47 +● WirdPress多处绝对路径泄漏 +``` + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 容器背景 | `#122347` (ZS-004-08) | §3.1.2 | +| 容器边框 | `1px solid #1A2F5A` (ZS-004-07) | — | +| 节点圆点 | 实心圆 `8px`，`#1677FF` (ZS-002-06)；外可加 `2px` 同色半透明光圈 | §10.1 | +| 连接线 | `1px solid #2D4473` (ZS-004-06)，垂直贯穿节点 | §10.1 | +| 标题文字 | `14px Regular`，`#C5CFE0` (ZS-004-02) | — | +| 时间文字 | `12px Regular`（D-DIN），`#6E88B0` (ZS-004-04) | §2.1.2 | +| 节点圆 → 文字间距 | `--spacing-2` (8px) | §7.1 | +| 节点垂直间距 | `--spacing-5` (24px)，圆心到圆心 | §10.4.2 | +| 当前 / 最新节点 | 圆点加亮 `#4096FF` + 外光圈 | — | + +### 26.2 卡片式时间轴 + +每个时间节点挂一张内容卡片（时间在卡外、内容在卡内）。 + +``` +● 2021-12-03 14:25:44 +┊ ┌──────────────────────────┐ +┊ │ 零报告上报 │ +┊ │ 安全状况： 今日无安全风险 │ +┊ └──────────────────────────┘ +``` + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 节点圆点 / 连接线 | 同 §26.1 | — | +| 时间标题 | `14px Regular`，`#C5CFE0` (ZS-004-02) | — | +| 卡片背景 | `#0C1836` (ZS-004-09，比容器深一档) | §3.1.3 | +| 卡片边框 | `1px solid #1A2F5A` (ZS-004-07) | — | +| 卡片圆角 | `4px` | §4.1 | +| 卡片内边距 | `--spacing-3` (12px) | §7.1 | +| 卡片标题（"零报告上报"） | `14px Medium`，`#C5CFE0` | — | +| 字段标签（"安全状况："） | `14px Regular`，`#6E88B0` (ZS-004-04) | — | +| 字段值（"今日无安全风险"） | `14px Regular`，`#4096FF` (ZS-002-05) | — | +| 时间 → 卡片间距 | `--spacing-2` (8px) | §7.1 | + +### 26.3 全局时间轴（横向刻度 + 区间滑块） + +顶部横条，承载连续时间刻度与一个可拖拽的**区间选择滑块**。 + +``` + ● +├──┬──┬──┬──┬──┬──┬──┬──┬──┬──┬──┬──┬──┬──┤ +04-03 04-04 04-03 04-04 ▓▓▓▓▓▓▓▓ 04-04 04-03 … + └─区间滑块（蓝色高亮段）─┘ +``` + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 轨道背景 | `#0C1836` (ZS-004-09) | — | +| 刻度基线 | `1px solid #1A2F5A` (ZS-004-07) | §6.1 | +| 刻度文字（日期） | `12px Regular`，`#6E88B0` (ZS-004-04) | — | +| 游标点（顶部 ●） | 实心圆 `8px`，`#FFFFFF` + `1px #1677FF` 描边 | — | +| 选中区间段 | `rgba(22,119,255,0.32)` 矩形底 + 上下边 `1px solid #1677FF` | §1.1.6 | +| 区间两端手柄 | `4px × 全高` 实心 `#1677FF` (ZS-002-06) | — | +| 轨道高度 | `≥ 56px`（含刻度文字） | — | +| Hover 刻度 | 文字 `#4096FF` | §1.1.6 | + +### 26.4 选用决策 + +| 场景 | 选择 | +|------|------| +| 纯事件流（标题 + 时间） | §26.1 基础时间轴点 | +| 每个节点带结构化内容 | §26.2 卡片式时间轴 | +| 长跨度时间筛选 / 缩放 | §26.3 全局时间轴（区间滑块） | + +### 26.5 CSS Token 参考 + +```css +:root { + --timeline-wrap-bg: #122347; /* ZS-004-08 */ + --timeline-wrap-border: #1A2F5A; /* ZS-004-07 */ + --timeline-dot: #1677FF; /* ZS-002-06 */ + --timeline-dot-active: #4096FF; /* ZS-002-05 */ + --timeline-line: #2D4473; /* ZS-004-06 */ + --timeline-title: #C5CFE0; /* ZS-004-02 */ + --timeline-time: #6E88B0; /* ZS-004-04 */ + + /* 卡片式 */ + --timeline-card-bg: #0C1836; /* ZS-004-09 */ + --timeline-card-border: #1A2F5A; /* ZS-004-07 */ + --timeline-field-label: #6E88B0; /* ZS-004-04 */ + --timeline-field-value: #4096FF; /* ZS-002-05 */ + + /* 全局时间轴 */ + --gtimeline-track-bg: #0C1836; /* ZS-004-09 */ + --gtimeline-baseline: #1A2F5A; /* ZS-004-07 */ + --gtimeline-tick: #6E88B0; /* ZS-004-04 */ + --gtimeline-range-fill: rgba(22,119,255,0.32); + --gtimeline-range-edge: #1677FF; /* ZS-002-06 */ + --gtimeline-cursor: #FFFFFF; +} +``` + +--- + +## 27. 进度条（Progress） + +> 对应设计稿「6.11 数据展示-进度条」右半。覆盖**标准线性进度条**、**小型进度条**、**环形进度条**三类。进度色按语义分**成功 / 进行中 / 失败**三态。 +> +> ⚠️ **语义色说明**：成功「绿」与进行中「橙」在 §1 标准色四系（渐红 / 渐蓝 / 渐青 / 深蓝）中**无直接对应**。本节按设计稿实际取色，并标注与 §1 的关系；建议在 §1 增补一组**功能语义色**（成功绿 / 警告橙）以统一管理。详见 §27.4。 + +### 27.1 标准线性进度条 + +``` +████████████████████████ 100% ✓ ← 成功（绿） +██████████████░░░░░░░░░░ 80% ✗ ← 失败（红） +██████████████░░░░░░░░░░ 80% ← 进行中（橙） +``` + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 轨道（未完成段） | `#1A2F5A` (ZS-004-07) | §6.1 | +| 已完成段-成功 | `#52C41A`（成功绿，§1 待补） / 近似 `#13C2C2`(ZS-003-06) | §27.4 | +| 已完成段-失败 | `#F5222D` (ZS-001-06) | §1.1.2 | +| 已完成段-进行中 | `#FAAD14`（警告橙，§1 待补） | §27.4 | +| 条高 | `8px`，圆角 `4px`（两端半圆） | §4.1 | +| 百分比文字 | `14px Regular`（D-DIN），`#C5CFE0` (ZS-004-02) | §2.1.2 | +| 尾部状态图标 | 成功 ✓（绿圆）/ 失败 ✗（红圆），`16px` | §20.3.2 | +| 条 → 百分比间距 | `--spacing-2` (8px) | §7.1 | + +### 27.2 小型进度条 + +用于较窄区域（如表格单元格内）。规格同 §27.1，仅尺寸收缩： + +| 属性 | 取值 | +|------|------| +| 条高 | `4px` | +| 百分比文字 | `12px Regular` | +| 尾部状态图标 | `12px` | +| 条宽 | 自适应容器（最小 `48px`） | + +### 27.3 环形进度条 + +``` + ╭───╮ ╭───╮ ╭───╮ + │22.4%│ │47.8%│ │82.0%│ + │ 名称│ │ 名称│ │ 名称│ + ╰───╯ ╰───╯ ╰───╯ + (蓝) (橙) (红/混) +``` + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 环轨道（底） | `#1A2F5A` (ZS-004-07) | — | +| 环进度段 | 按语义取 成功绿 / 进行中橙 / 失败红 / 主色蓝 `#1677FF` | §27.4 | +| 环宽 | `6px`，端点圆头（`stroke-linecap: round`） | — | +| 中心百分比 | `16px Bold`（D-DIN），`#FFFFFF` | §2.1.2 | +| 中心名称 | `12px Regular`，`#6E88B0` (ZS-004-04) | — | +| 直径 | `72px`（默认） | — | +| 起始角 | 顶部 12 点钟，顺时针填充 | — | + +### 27.4 状态语义色（与 §1 的关系 / 增补建议） + +| 语义 | 设计稿取色 | §1 现有最近色 | 建议 | +|------|-----------|--------------|------| +| 成功 / 已完成 | `#52C41A`（绿） | ZS-003-06 `#13C2C2`（青，偏色） | §1 增补「成功绿」`#52C41A` | +| 进行中 / 警告 | `#FAAD14`（橙） | —（无） | §1 增补「警告橙」`#FAAD14` | +| 失败 / 错误 | `#F5222D` | ZS-001-06 `#F5222D` ✓ | 直接用 ZS-001-06 | +| 信息 / 默认 | `#1677FF` / `#4096FF` | ZS-002-06 / ZS-002-05 ✓ | 直接用 ZS-002 | +| 处理中 / 等待 | `#13C2C2` | ZS-003-06 ✓ | 直接用 ZS-003 | + +> 在 §1 增补语义色前，本节及 §29 状态标签暂用上表「设计稿取色」列的 HEX，并集中定义为 `--func-success` / `--func-warning` 两个 Token，便于后续统一替换。 + +### 27.5 CSS Token 参考 + +```css +:root { + /* 功能语义色（§1 待正式收录） */ + --func-success: #52C41A; /* 成功绿（建议补入 §1） */ + --func-warning: #FAAD14; /* 警告橙（建议补入 §1） */ + --func-error: #F5222D; /* ZS-001-06 */ + --func-info: #1677FF; /* ZS-002-06 */ + --func-processing: #13C2C2; /* ZS-003-06 */ + + /* 进度条 */ + --progress-track: #1A2F5A; /* ZS-004-07 */ + --progress-success: var(--func-success); + --progress-error: var(--func-error); + --progress-active: var(--func-warning); + --progress-num: #C5CFE0; /* ZS-004-02 */ + + /* 环形 */ + --circle-track: #1A2F5A; /* ZS-004-07 */ + --circle-num: #FFFFFF; + --circle-label: #6E88B0; /* ZS-004-04 */ +} +``` + +--- + +## 28. 表格（Table） + +> 对应设计稿「6.13 数据展示-表格」。后台列表主力组件：表头 + 数据行（斑马 / hover / 选中）+ 勾选列 + 内联编辑 + 状态列（复用 §29 标签）+ 操作列（复用 §5.2.3 文本按钮）。表头 / 边框 / 斑马沿用 §24 描述列表与 §6 分割线规则。配色从 §1.1.3 渐蓝系（ZS-002）与 §1.1.5 深蓝系（ZS-004）取。 + +### 28.1 表格容器 + +| 属性 | 取值 | 来源 | +|------|------|------| +| 容器背景 | `#0C1836` (ZS-004-09) | §3.1.1 | +| 外边框 | `1px solid #1A2F5A` (ZS-004-07) | §6.1 | +| 圆角 | `4px` | §4.1 | + +### 28.2 表头（Header） + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 表头背景 | `#122347` (ZS-004-08) | §3.1.2 | +| 表头文字 | `14px Medium`，`#C5CFE0` (ZS-004-02) | — | +| 表头行高 | `44px` | — | +| 列水平 padding | `--spacing-4` (16px) | §7.1 | +| 表头底分割线 | `1px solid #1A2F5A` (ZS-004-07) | §6.1 | +| 排序图标 `▲▼` | `12px`，默认 `#4A6491`，激活 `#4096FF` | §1.1.6 | +| 列分割线（可选） | `1px solid #2D4473`（弱化） | §6.2 | + +### 28.3 数据行（Body） + +| 状态 | 背景 | 来源 | +|------|------|------| +| 奇数行 | `#0C1836` (ZS-004-09) | §24.3 | +| 偶数行 | `#122347` (ZS-004-08) | §24.3 | +| Hover | `rgba(22,119,255,0.08)` | §8.4.3 | +| 选中行 | `rgba(22,119,255,0.16)` + 左 `2px solid #1677FF` | §8.3.2 | + +| 元素 | 色值 / 规格 | +|------|-------------| +| 单元格文字 | `14px Regular`，`#C5CFE0` (ZS-004-02) | +| 行高 | `44px` | +| 数字列（手机号 / 卡号等） | D-DIN / Arial，`#C5CFE0`，可右对齐 | +| 行间分割线 | `1px solid #1A2F5A` (ZS-004-07) | + +### 28.4 勾选列（Selection） + +| 元素 | 规格 | 来源 | +|------|------|------| +| 复选框 | 沿用 §16.3（面板内灰描边变体 §16.5） | §16 | +| 表头全选框 | 支持半选（部分行选中） | §15.2.3 | +| 列宽 | `48px`，居中 | — | +| 选中行联动 | 勾选 → 行底色切换为「选中行」态 | §28.3 | + +### 28.5 内联编辑单元格 + +单元格可切换为输入态（如「卡池地址 100 M」可编辑），校验失败显示红框 + 气泡。 + +| 状态 | 规格 | 来源 | +|------|------|------| +| 可编辑态 | 单元格内嵌 §14.1 小号输入框（高 `28px`） | §14.1 | +| 带单位 | 数字 + 单位块（§21.5.5），单位 `M` 实心蓝 | §21.5.5 | +| 错误态 | `1px solid #F5222D` + 外发光，下方 / 悬浮气泡提示「Table约束输入提示」`#F5222D` | §14.1.1 / §21.4.1 | +| 气泡背景 | `#F5222D` 或暗底 `#122347` + 红字 | §1.1.2 | + +### 28.6 状态列与操作列 + +| 列 | 规格 | 来源 | +|------|------|------| +| 状态（`● 普通` / `● 特殊`） | 圆点 + 文字标签，沿用 §29.3 圆点标签 | §29.3 | +| 整体状态（`已完成` / `已失败`） | 实心 / 描边状态标签，沿用 §29.4 | §29.4 | +| 操作（`查看 / 编辑 / 重置`） | §5.2.3 文本按钮，间距 `--spacing-3` (12px)，无分隔符 | §5.3.3 | +| 操作列对齐 | 通常右对齐或固定列 | — | + +### 28.7 固定列 / 滚动 / 空态 + +| 行为 | 规则 | +|------|------| +| 横向滚动 | 列总宽超容器时横向滚动；首列（勾选）/ 末列（操作）可 `position: sticky` 固定 | +| 固定列阴影 | 固定列边缘加 `4px` 渐变阴影 `rgba(6,14,36,0.6)` 提示可滚动 | +| 空数据 | 表体居中「暂无数据」，`#6E88B0` (ZS-004-04) | +| 加载中 | 表体覆盖半透明遮罩 `rgba(6,14,36,0.4)` + 居中旋转图标 `#1677FF` | +| 分页 | 表格下方接 §13 分页 | + +### 28.8 CSS Token 参考 + +```css +:root { + --table-wrap-bg: #0C1836; /* ZS-004-09 */ + --table-border: #1A2F5A; /* ZS-004-07 */ + + /* 表头 */ + --table-head-bg: #122347; /* ZS-004-08 */ + --table-head-text: #C5CFE0; /* ZS-004-02 */ + --table-sort-idle: #4A6491; /* ZS-004-05 */ + --table-sort-active: #4096FF; /* ZS-002-05 */ + + /* 数据行 */ + --table-row-odd: #0C1836; /* ZS-004-09 */ + --table-row-even: #122347; /* ZS-004-08 */ + --table-row-hover: rgba(22,119,255,0.08); + --table-row-selected: rgba(22,119,255,0.16); + --table-row-selected-bar:#1677FF; /* ZS-002-06 */ + --table-cell-text: #C5CFE0; /* ZS-004-02 */ + --table-row-divider: #1A2F5A; /* ZS-004-07 */ + + /* 内联编辑错误 */ + --table-edit-error: #F5222D; /* ZS-001-06 */ + + /* 操作列 */ + --table-action-text: #4096FF; /* ZS-002-05 */ + --table-action-hover: #1677FF; /* ZS-002-06 */ + + /* 空 / 加载 */ + --table-empty-text: #6E88B0; /* ZS-004-04 */ + --table-loading-mask: rgba(6,14,36,0.4); +} +``` + +--- + +## 29. 标签（Tag） + +> 对应设计稿「6.14 数据展示-标签」。分两大类：**标签形式**（文字按钮标签 / 图标+文字标签 / 圆点+文字标签 / 动态标签）与**状态标签**（描边 / 实心 / 图标三种风格，覆盖 未开始·等待中·进行中·已完成·已失败·待更新 六语义）。功能语义色见 §27.4（成功绿 / 警告橙建议补入 §1）。 + +### 29.1 文字按钮标签 + +可点击的属性标签，用于重点突出标记。 + +| 状态 | 背景 | 文字 | 来源 | +|------|------|------|------| +| 默认 | `rgba(22,119,255,0.12)` | `#4096FF` (ZS-002-05) | — | +| 禁用 | `rgba(22,119,255,0.06)` | `#4A6491` (ZS-004-05) | — | +| 激活 / 选中 | `#1677FF` (ZS-002-06) | `#FFFFFF` | §1.1.6 | + +| 属性 | 取值 | +|------|------| +| 高度 | `24px` | +| 圆角 | `2px`（§4.1） | +| 内边距 | `2px 8px` | +| 字号 | `12px Regular` | + +### 29.2 图标 + 文字标签 + +前缀业务图标增强辨识（如 Ⓣ Twitter、✓ 完成）。 + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 默认（描边） | 背景 `rgba(22,119,255,0.12)`，图标+文字 `#4096FF` | §29.1 | +| 选中（实心） | 背景 `#1677FF` (ZS-002-06)，图标+文字 `#FFFFFF` | — | +| 图标 → 文字间距 | `--spacing-1` (4px) | §7.1 | +| 图标尺寸 | `14px` | — | + +### 29.3 圆点 + 文字标签 + +无底色，靠前缀圆点区分语义（属性多 / 复杂、又不需突出时用）。 + +| 语义 | 圆点色 | 文字 | 来源 | +|------|--------|------|------| +| 普通 | `#13C2C2` (ZS-003-06) | `#C5CFE0` (ZS-004-02) | §1.1.4 | +| 特殊 | `#FAAD14`（警告橙，§27.4） | `#C5CFE0` | §27.4 | +| 异常 | `#F5222D` (ZS-001-06) | `#C5CFE0` | §1.1.2 | + +| 属性 | 取值 | +|------|------| +| 圆点尺寸 | `6px`，正圆 | +| 圆点 → 文字间距 | `--spacing-2` (8px) | +| 字号 | `14px Regular` | + +### 29.4 动态标签（可增删） + +可动态添加 / 删除的标签集合（如筛选列表、关键词）。 + +``` +[ people.com.cn × ] [ +1 × ] [ + 标签 ] +``` + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 标签底 | `rgba(22,119,255,0.12)`，文字 `#C5CFE0` (ZS-004-02) | — | +| 关闭 `×` | `12px`，`#6E88B0`，hover `#FFFFFF` | §15.2.1 | +| 折叠 `+N ×` | 溢出折叠（同 §15.2.1） | §15.2.1 | +| 「+ 标签」新增钮 | `1px dashed #4096FF` (ZS-002-05) + 透明底 + `+ 标签` 蓝字 | §3.1.3 | +| 新增钮 hover | 边框 + 文字 `#1677FF` (ZS-002-06) | — | +| 标签间距 | `--spacing-1` (4px) | §7.1 | + +### 29.5 状态标签（三风格 × 六语义） + +六个语义统一映射到功能语义色（§27.4）： + +| 语义 | 主色 | 来源 | +|------|------|------| +| 未开始 | `#4096FF` (ZS-002-05) 或中性灰 `#6E88B0` | §1.1.6 / ZS-004-04 | +| 等待中 | `#13C2C2` (ZS-003-06) | §1.1.4 | +| 进行中 | `#FAAD14`（警告橙，§27.4） | §27.4 | +| 已完成 | `#52C41A`（成功绿，§27.4） | §27.4 | +| 已失败 | `#F5222D` (ZS-001-06) | §1.1.2 | +| 待更新 | `#1677FF` (ZS-002-06) | §1.1.6 | + +#### 29.5.1 风格 A — 描边（Outline） + +| 元素 | 规格 | +|------|------| +| 背景 | `transparent` 或语义色 `12%` 透明底 | +| 边框 | `1px solid` 语义色 | +| 文字 | 语义色 | +| 高度 / 圆角 | `24px` / `2px` | + +#### 29.5.2 风格 B — 实心（Filled） + +| 元素 | 规格 | +|------|------| +| 背景 | 语义色 `24%`~`100%`（截图为浅色实心底） | +| 文字 | 深色语义场用 `#FFFFFF`；浅底场用语义深色 | +| 高度 / 圆角 | `24px` / `2px` | + +#### 29.5.3 风格 C — 图标 + 文字 + +前缀语义图标（⊖ 就绪 / ◷ 等待 / ◐ 进行 / ✓ 成功 / ✗ 失败 / ◷ 待更）： + +| 元素 | 规格 | 来源 | +|------|------|------| +| 图标色 | 同语义色 | §27.4 | +| 文字色 | 语义色或 `#C5CFE0` | — | +| 图标尺寸 | `14px` | — | +| 图标 → 文字间距 | `--spacing-1` (4px) | §7.1 | + +### 29.6 CSS Token 参考 + +```css +:root { + /* 语义色复用 §27.4 */ + /* --func-success / --func-warning / --func-error / --func-info / --func-processing */ + + /* 文字 / 图标 / 圆点标签 */ + --tag-soft-bg: rgba(22,119,255,0.12); + --tag-soft-text: #4096FF; /* ZS-002-05 */ + --tag-active-bg: #1677FF; /* ZS-002-06 */ + --tag-active-text: #FFFFFF; + --tag-disabled-text: #4A6491; /* ZS-004-05 */ + --tag-dot-normal: #13C2C2; /* ZS-003-06 普通 */ + --tag-dot-special: var(--func-warning); /* 特殊 */ + --tag-dot-error: #F5222D; /* ZS-001-06 异常 */ + + /* 动态标签 */ + --tag-close: #6E88B0; /* ZS-004-04 */ + --tag-close-hover: #FFFFFF; + --tag-add-border: #4096FF; /* ZS-002-05 虚线 */ + --tag-add-hover: #1677FF; /* ZS-002-06 */ + + /* 状态标签语义 */ + --status-pending: #4096FF; /* 未开始 ZS-002-05 */ + --status-waiting: #13C2C2; /* 等待中 ZS-003-06 */ + --status-running: var(--func-warning); /* 进行中 */ + --status-done: var(--func-success); /* 已完成 */ + --status-failed: #F5222D; /* 已失败 ZS-001-06 */ + --status-update: #1677FF; /* 待更新 ZS-002-06 */ +} +``` + +--- + +## 30. 树形控件（Tree · 展示型） + +> 对应设计稿「6.16 数据展示-树形控件」。区别于 §19 树选择（下拉触发器形态），本节是**直接平铺在页面中的树**：带**虚线连接线**、`[+] / [-]` 方框展开器、节点复选框，且节点可**内联挂表单控件**（单选 / 日期 / 数字+单位）。节点状态与复选框沿用 §19 / §16，配色从 §1.1.3 渐蓝系（ZS-002）与 §1.1.5 深蓝系（ZS-004）取。 + +### 30.1 容器 + +| 属性 | 取值 | 来源 | +|------|------|------| +| 容器背景 | `#0C1836` (ZS-004-09) | §3.1.1 | +| 容器边框 | `1px solid #1A2F5A` (ZS-004-07) | — | +| 容器圆角 | `4px` | §4.1 | +| 容器内边距 | `--spacing-5` (24px) | §7.1 | + +### 30.2 节点与连接线 + +``` +☐ 一级 +├╌ ☐ 主账号贴文 ● 按照发文起始时间 [2021-12-09 📅] ○ 按照条数 前[最多24]条 +│ ├╌ ☐ 贴文评论 前 [最多24] 条 +│ ├╌ ☐ 评论账号列表 前 [最多24] 条 +│ └╌ ☐ 转发账号列表 前 [最多24] 条 +│ ├╌ ☐ 粉丝列表 前 [最多24] 条 +│ └╌ ☐ 好友列表 前 [最多24] 条 +``` + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 连接线 | `1px dashed #4A6491` (ZS-004-05)，L 形连父子 | §6.1 虚线 | +| 每级缩进 | `--spacing-5` (24px) | §7.1 | +| 节点复选框 | 沿用 §16.3（面板内灰描边 §16.5） | §16 | +| 节点文字 | `14px Regular`，`#C5CFE0` (ZS-004-02) | §19.3.2 | +| 节点行高 | `≥ 40px`（含内联控件时自适应） | — | +| 复选框 → 文字间距 | `--spacing-2` (8px) | §7.1 | + +### 30.3 方框展开器（`[+] / [-]`） + +带子树的节点用方框图标，区别于 §19 的纯三角箭头。 + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 方框尺寸 | `14px × 14px`，`1px solid #6E88B0` (ZS-004-04) | §19.3.1 | +| 方框背景 | `transparent` | — | +| 符号 `+` / `-` | `#6E88B0`，居中 | — | +| Hover | 边框 + 符号 `#4096FF` (ZS-002-05) | §1.1.6 | +| 折叠态 `+` / 展开态 `-` | 点击切换子树显隐 | — | +| 方框 → 连接线 | 方框压在虚线连接点上 | — | + +### 30.4 节点内联表单控件 + +节点右侧可挂载与该节点关联的配置控件，全部复用既有规范： + +| 控件 | 复用 | 备注 | +|------|------|------| +| 单选（`● 按照发文起始时间` / `○ 按照条数`） | §16.2 Radio | 未选 `#4096FF` 描边，已选实心 `#1677FF` | +| 日期（`2021-12-09 📅`） | §17.1 日期触发器 | 高 `28px` 小号 | +| 数字 + 单位（`前 [最多24] 条`） | §14.1 输入 + §21.5.5 单位 | 前后缀文字「前」「条」`#6E88B0` | +| 前后缀文字 | `14px Regular`，`#6E88B0` (ZS-004-04) | — | +| 控件与节点文字横向间距 | `--spacing-3` (12px) | §7.1 | +| 多控件之间间距 | `--spacing-4` (16px) | §7.1 | + +### 30.5 复选父子联动 + +| 行为 | 规则 | 来源 | +|------|------|------| +| 勾父节点 | 勾选其全部子孙 | §18.4.2 | +| 子项部分选中 | 父节点显示**半选**（中央 `8px×2px` 白横线） | §16.3 | +| 全选 / 全不选 | 顶层「一级」节点等价全选开关 | §15.2.3 | + +### 30.6 纯展示树变体（右图） + +无内联控件、仅 `[+]/[-]` + 复选框 + 「一级 / 二级」层级的精简树： + +| 元素 | 规格 | +|------|------| +| 节点 | 复选框 + 文字（`一级` / `二级`） | +| 展开器 | `[+] / [-]` 方框（同 §30.3） | +| 连接线 | `1px dashed #4A6491` | +| 选中 | 复选框实心 `#1677FF` + 白勾；行可叠 `rgba(22,119,255,0.08)` hover | +| 节点行高 | `36px` | + +### 30.7 与 §19 树选择的差异 + +| 维度 | §19 树选择（TreeSelect） | §30 树形控件（Tree） | +|------|--------------------------|----------------------| +| 形态 | 触发器 + 下拉面板 | 直接平铺页面 | +| 展开器 | 三角 `▸ / ▾` | 方框 `[+] / [-]` | +| 连接线 | 无（靠缩进） | 有，`1px dashed` | +| 选中表现 | 整行蓝底高亮 | 复选框示态为主 | +| 内联控件 | 无 | 支持（单选 / 日期 / 数字+单位） | +| 用途 | 表单取值 | 数据展示 / 多维配置 | + +### 30.8 CSS Token 参考 + +```css +:root { + --tree2-wrap-bg: #0C1836; /* ZS-004-09 */ + --tree2-wrap-border: #1A2F5A; /* ZS-004-07 */ + --tree2-line: #4A6491; /* ZS-004-05 虚线连接 */ + --tree2-indent: 24px; + --tree2-node-text: #C5CFE0; /* ZS-004-02 */ + --tree2-row-hover: rgba(22,119,255,0.08); + + /* 方框展开器 */ + --tree2-toggle-border: #6E88B0; /* ZS-004-04 */ + --tree2-toggle-symbol: #6E88B0; + --tree2-toggle-hover: #4096FF; /* ZS-002-05 */ + + /* 复选框（复用 §16） */ + --tree2-check-border: #6E88B0; /* ZS-004-04 */ + --tree2-check-fill: #1677FF; /* ZS-002-06 */ + --tree2-check-mark: #FFFFFF; + + /* 内联控件前后缀文字 */ + --tree2-affix-text: #6E88B0; /* ZS-004-04 */ +} +``` + +--- + +## 31. 时间轴（长文本：横向 / 纵向） + +> 对应设计稿「6.19 数据展示-时间轴（上）/（下）」。在 §26 时间轴基础上扩展两种**承载长文本**的形态：**横向时间轴**（节点沿水平轴上下交替展开长文本）与**纵向长文本时间轴**（日期 + 富内容卡片）。节点圆 / 连接线 / 全局时间轴沿用 §26，配色从 §1.1.3 渐蓝系（ZS-002）与 §1.1.5 深蓝系（ZS-004）取，年份强调点引入 §1.1.2 渐红系。 + +### 31.1 横向时间轴（横向长文本） + +节点挂在一条水平主轴上，文本块**上下交替**分布，避免拥挤；轴上按时间标注年份 / 日期锚点。 + +``` + 2023年1月7日 2021年7月18日 2002年1月 + 长文本说明… 长文本说明… 长文本说明… + ▲ ▲ ▲ +───┼──────────┼─────────┼──────────┼─────────┼──── ← 水平主轴 + │ ▼ │ ▼ │ + 长文本… 长文本… + 2021年 2016年8月 +``` + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 水平主轴 | `1px solid #2D4473` (ZS-004-06) | §6.1 | +| 节点三角 / 圆点 | `8px`，`#1677FF` (ZS-002-06)；指向轴的小三角 | §26.1 | +| 年份 / 日期锚点（强调） | `14px Bold`，`#F5222D`（红，ZS-001-06）或 `#4096FF`（蓝） | §1.1.2 / §1.1.6 | +| 普通时间标题 | `14px Medium`，`#C5CFE0` (ZS-004-02) | — | +| 长文本正文 | `14px Regular`，`#6E88B0` (ZS-004-04)，行高 `1.6` | — | +| 文本块背景（可选卡片） | `#122347` (ZS-004-08) + `1px solid #1A2F5A` + 圆角 `4px` | §3.1.2 | +| 节点水平间距 | 自适应等分，最小 `--spacing-7` (40px) | §7.1 | +| 文本块 → 轴间距 | `--spacing-3` (12px) | §7.1 | +| 横向滚动 | 节点超容器宽时横向滚动，可配 §26.3 全局时间轴联动缩放 | §26.3 | + +### 31.2 纵向长文本时间轴 + +左侧时间轴线，每个节点对应一张**富内容卡片**（缩略图 / 头像 + 标签 + 长正文）。 + +``` +● 2023-09-09 +┊ ┌──────────────────────────────────────────┐ +┊ │ 👤 人物名 [标签] │ +┊ │ 长正文长正文长正文长正文长正文长正文… │ +┊ └──────────────────────────────────────────┘ +● 2023-09-09 +┊ ┌──────────────────────────────────────────┐ +┊ │ 🖼 缩略图 [标签] │ +┊ │ 长正文… │ +┊ └──────────────────────────────────────────┘ +``` + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 轴线 | `1px solid #2D4473` (ZS-004-06)，纵向贯穿 | §26.1 | +| 节点圆点 | 实心 `8px`，`#1677FF` (ZS-002-06) | §26.1 | +| 日期标题 | `14px Medium`，`#4096FF` (ZS-002-05) | §1.1.6 | +| 卡片容器 | `#122347` (ZS-004-08) + `1px solid #1A2F5A` + 圆角 `4px` | §3.1.2 | +| 卡片内边距 | `--spacing-3` (12px) | §7.1 | +| 头像 / 缩略图 | `40px`（头像圆 / 缩略方），底 `#1A2F5A` | §22.3.1 | +| 主名 / 来源 | `14px Medium`，`#C5CFE0` (ZS-004-02) | — | +| 状态标签 | 沿用 §29 标签（语义色见 §27.4） | §29 | +| 长正文 | `14px Regular`，`#6E88B0` (ZS-004-04)，行高 `1.6`，可「展开」折叠（§23.4） | §23.4 | +| 日期 → 卡片间距 | `--spacing-2` (8px) | §7.1 | +| 节点垂直间距 | `--spacing-6` (32px) | §7.1 | + +### 31.3 选用决策 + +| 场景 | 选择 | +|------|------| +| 短事件流（标题 + 时间） | §26.1 基础时间轴点 | +| 节点带结构化小卡 | §26.2 卡片式时间轴 | +| 跨度大、按时间轴铺陈长文本 | §31.1 横向时间轴 | +| 每节点是图文长内容（资讯 / 档案） | §31.2 纵向长文本时间轴 | +| 需缩放 / 区间筛选 | 叠加 §26.3 全局时间轴 | + +### 31.4 CSS Token 参考 + +```css +:root { + /* 横向长文本 */ + --htl-axis: #2D4473; /* ZS-004-06 主轴 */ + --htl-node: #1677FF; /* ZS-002-06 */ + --htl-anchor-emph: #F5222D; /* ZS-001-06 年份强调 */ + --htl-anchor-blue: #4096FF; /* ZS-002-05 */ + --htl-title: #C5CFE0; /* ZS-004-02 */ + --htl-body: #6E88B0; /* ZS-004-04 */ + --htl-card-bg: #122347; /* ZS-004-08 */ + --htl-card-border: #1A2F5A; /* ZS-004-07 */ + + /* 纵向长文本 */ + --vtl-line: #2D4473; /* ZS-004-06 */ + --vtl-node: #1677FF; /* ZS-002-06 */ + --vtl-date: #4096FF; /* ZS-002-05 */ + --vtl-card-bg: #122347; /* ZS-004-08 */ + --vtl-card-border: #1A2F5A; /* ZS-004-07 */ + --vtl-avatar-bg: #1A2F5A; /* ZS-004-07 */ + --vtl-name: #C5CFE0; /* ZS-004-02 */ + --vtl-body: #6E88B0; /* ZS-004-04 */ +} +``` + +--- + +## 32. 对话框（Dialog / 确认框） + +> 对应设计稿「7.1 消息提醒-对话框」。轻量确认弹窗，承载一句提示 + 「取消 / 确定」。是 §21 弹出式窗口的**精简变体**：标题用**左竖条**而非居中、主体仅一行信息、无 Tabs / 步骤条 / 表单。遮罩 / 容器 / 底部按钮沿用 §21，配色从 §1.1.3 渐蓝系（ZS-002）与 §1.1.5 深蓝系（ZS-004）取。 + +### 32.1 容器与遮罩 + +| 属性 | 取值 | 来源 | +|------|------|------| +| 遮罩 | `rgba(6,14,36,0.6)` | §21.1 | +| 容器背景 | `#0C1836` (ZS-004-09)（也可用 §21 渐变） | §21.1 | +| 容器边框 | `1px solid #1A2F5A` (ZS-004-07) | — | +| 圆角 | `4px` | §4.1 | +| 阴影 | `0 8px 32px rgba(6,14,36,0.6)`（三级） | §3.1.4 | +| 宽度 | `400px`（小） | — | +| 内边距 | `0`（标题栏 / 主体 / 底部各自带 padding） | — | + +### 32.2 标题栏 + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 标题栏背景 | `#122347` (ZS-004-08) | §3.1.2 | +| 标题左竖条 | `3px × 14px`，`#1677FF` (ZS-002-06) | §22.1 | +| 标题文字（"提示"） | `16px Medium`，`#FFFFFF` | — | +| 关闭 `×` | `16px`，`#6E88B0`，hover `#4096FF` | §5.2.4 | +| 标题栏高度 | `48px` | — | +| 标题栏底分割线 | `1px solid #1A2F5A` (ZS-004-07) | §6.1 | +| 水平 padding | `--spacing-4` (16px) | §7.1 | + +### 32.3 主体与底部 + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 主体文字（"这是一段信息"） | `14px Regular`，`#C5CFE0` (ZS-004-02) | — | +| 主体内边距 | `--spacing-4` (16px) | §7.1 | +| 主体最小高度 | `80px` | — | +| 底部按钮区 | 右对齐，右内 padding `--spacing-4` (16px)，下内 padding `--spacing-4` | §7.1 | +| 「取消」 | §5.2.2 默认按钮，小号 `28px` | §5.2.2 | +| 「确定」 | §5.2.1 主按钮，小号 `28px` | §5.2.1 | +| 按钮间距 | `--spacing-2` (8px) | §7.1 | + +### 32.4 类型变体 + +对话框可携带语义图标（同 §27.4 / §33 语义色）置于主体文字前： + +| 类型 | 图标 | 主色 | +|------|------|------| +| 信息（默认） | ⓘ `#1677FF` (ZS-002-06) | 蓝 | +| 成功 | ✓ `--func-success` | 绿 | +| 警告 | ! `--func-warning` | 橙 | +| 错误 | ✗ `#F5222D` (ZS-001-06) | 红 | + +### 32.5 与 §21 的差异 / CSS Token + +| 维度 | §21 弹出式窗口 | §32 对话框 | +|------|---------------|-----------| +| 标题 | 居中 + 渐变下划线 | 左竖条 + 左对齐 | +| 内容 | Tabs / 步骤条 / 多字段表单 | 一句提示（可带语义图标） | +| 宽度 | `480~800px` | `400px` | +| 用途 | 编辑 / 多步流程 | 确认 / 告知 | + +```css +:root { + --dialog-bg: #0C1836; /* ZS-004-09 */ + --dialog-border: #1A2F5A; /* ZS-004-07 */ + --dialog-head-bg: #122347; /* ZS-004-08 */ + --dialog-title-bar: #1677FF; /* ZS-002-06 左竖条 */ + --dialog-title-text: #FFFFFF; + --dialog-close: #6E88B0; /* ZS-004-04 */ + --dialog-close-hover: #4096FF; /* ZS-002-05 */ + --dialog-body-text: #C5CFE0; /* ZS-004-02 */ + --dialog-divider: #1A2F5A; /* ZS-004-07 */ +} +``` + +--- + +## 33. 全局提示（Message / Alert） + +> 对应设计稿「7.3 消息提醒-全局提示」。顶部居中、自动消失、不打断操作的轻量级反馈。覆盖**信息 / 成功 / 警告 / 错误**四语义，每条分**带关闭 ×** 与 **带「查看详情」操作** 两变体。语义色统一引用 §27.4 功能语义色（成功绿 / 警告橙建议补入 §1）。 + +### 33.1 触发按钮（语义实心钮） + +页面侧触发演示用的四颗实心语义按钮： + +| 类型 | 背景 | 图标 + 文字 | 来源 | +|------|------|------------|------| +| 信息提示 | `#1677FF` (ZS-002-06) | ⓘ + 白字 | §1.1.6 | +| 成功提示 | `--func-success`（绿） | ✓ + 白字 | §27.4 | +| 警告提示 | `--func-warning`（橙） | ! + 白字 | §27.4 | +| 错误提示 | `#F5222D` (ZS-001-06) | ✗ + 白字 | §1.1.2 | + +按钮规格沿用 §5.2.1（高 `32px`，圆角 `2px`，前缀图标 `--spacing-1` 间距）。 + +### 33.2 提示条（Message 单条） + +``` +┌────────────────────────────────────────────────┐ +│ ✓ 恭喜！你所提交的信息已经审核通过。 × │ ← 变体 A：带关闭 +└────────────────────────────────────────────────┘ +┌────────────────────────────────────────────────┐ +│ ✓ 恭喜！你所提交的信息已经审核通过。 查看详情 │ ← 变体 B：带操作 +└────────────────────────────────────────────────┘ +``` + +#### 33.2.1 通用规格 + +| 属性 | 取值 | 来源 | +|------|------|------| +| 高度 | `40px`（单行） | — | +| 圆角 | `2px` | §4.1 | +| 水平 padding | `--spacing-4` (16px) | §7.1 | +| 语义图标 | `16px`，置于最左，语义色 | §27.4 | +| 图标 → 文字间距 | `--spacing-2` (8px) | §7.1 | +| 正文文字 | `14px Regular`，`#C5CFE0` (ZS-004-02) | — | +| 左侧强调边 | `3px solid` 语义色（可选，增强辨识） | §6.1 | +| 顶部弹出动画 | 顶部居中 `translateY(-100%) → 0` + `opacity`，`200ms ease-out` | §8.5 | +| 自动消失 | 默认 `3s` 后淡出（错误类可设不自动消失） | — | + +#### 33.2.2 四语义底色 + +| 语义 | 背景（约 12~16% 透明语义底） | 图标 / 强调色 | 来源 | +|------|------------------------------|--------------|------| +| 成功 | `rgba(82,196,26,0.16)` | `--func-success` ✓ | §27.4 | +| 错误 | `rgba(245,34,45,0.16)` | `#F5222D` ✗ (ZS-001-06) | §1.1.2 | +| 信息 | `rgba(22,119,255,0.16)` | `#1677FF` ⓘ (ZS-002-06) | §1.1.6 | +| 警告 | `rgba(250,173,20,0.16)` | `--func-warning` ! | §27.4 | + +> 底色叠在页面深蓝背景上呈低饱和语义色块；文字保持 `#C5CFE0` 高可读，仅图标与边用满饱和语义色。 + +#### 33.2.3 右侧元素（二选一） + +| 变体 | 元素 | 规格 | 来源 | +|------|------|------|------| +| A 带关闭 | `×` | `14px`，`#6E88B0`，hover `#FFFFFF` | §15.2.1 | +| B 带操作 | 「查看详情」 | §5.2.3 文本按钮，**颜色取所在语义色**（成功=绿 / 错误=红 / 信息=蓝 / 警告=橙），hover 加深 | §5.2.3 | + +### 33.3 多条堆叠 + +| 规则 | 取值 | +|------|------| +| 堆叠方向 | 顶部居中，新消息在下 / 旧消息上推（或反之，跟随实现） | +| 条间距 | `--spacing-2` (8px) | +| 最大同时显示 | 建议 `≤ 5` 条，超出排队 | + +### 33.4 与 §32 对话框的区别 + +| 维度 | §33 全局提示 | §32 对话框 | +|------|-------------|-----------| +| 打断性 | 不打断（自动消失） | 打断（需用户确认） | +| 位置 | 顶部居中悬浮 | 屏幕居中 + 遮罩 | +| 操作 | 至多一个「查看详情」 | 取消 / 确定 | +| 用途 | 操作结果即时反馈 | 二次确认 / 重要告知 | + +### 33.5 CSS Token 参考 + +```css +:root { + /* 语义色复用 §27.4：--func-success / --func-warning / --func-error / --func-info */ + + /* 提示条通用 */ + --msg-text: #C5CFE0; /* ZS-004-02 */ + --msg-close: #6E88B0; /* ZS-004-04 */ + --msg-close-hover: #FFFFFF; + + /* 四语义底色 */ + --msg-success-bg: rgba(82,196,26,0.16); + --msg-success-fg: #52C41A; /* --func-success */ + --msg-error-bg: rgba(245,34,45,0.16); + --msg-error-fg: #F5222D; /* ZS-001-06 */ + --msg-info-bg: rgba(22,119,255,0.16); + --msg-info-fg: #1677FF; /* ZS-002-06 */ + --msg-warning-bg: rgba(250,173,20,0.16); + --msg-warning-fg: #FAAD14; /* --func-warning */ +} +``` + +--- + +## 34. 气泡确认（Popconfirm） + +> 对应设计稿「7.4 消息提醒-气泡确认」。锚定在触发元素（如「删除」按钮）上的小型确认气泡，带指向箭头 + 问号图标 + 一句确认语 + 「取消 / 确定」。比 §32 对话框更轻、无遮罩、就地确认。配色从 §1.1.3 渐蓝系（ZS-002）与 §1.1.5 深蓝系（ZS-004）取，问号图标用 §27.4 警告橙。 + +### 34.1 结构 + +``` + [ 删除 ] ← 触发按钮 + ▲ ← 指向箭头 +┌─────────────────────┐ +│ ❓ 这是一段内容确定删除吗？│ +│ 取消 [确定] │ +└─────────────────────┘ +``` + +### 34.2 气泡容器 + +| 属性 | 取值 | 来源 | +|------|------|------| +| 背景 | `#0C1836` (ZS-004-09)（或 `#122347`） | §3.1 | +| 边框 | `1px solid #1A2F5A` (ZS-004-07) | — | +| 圆角 | `4px` | §4.1 | +| 阴影 | `0 4px 16px rgba(6,14,36,0.6)`（三级阴影变体） | §3.1.4 | +| 内边距 | `--spacing-3` (12px) | §7.1 | +| 最小宽度 | `200px` | — | +| 指向箭头 | `8px` 三角，与容器同底色 + 同边框，指向触发元素 | — | +| 与触发元素间距 | `--spacing-2` (8px) | §7.1 | + +### 34.3 内容与按钮 + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 问号图标 ❓ | `16px`，圆形实心 `--func-warning`（橙），白色 `?` | §27.4 | +| 图标 → 文字间距 | `--spacing-2` (8px) | §7.1 | +| 确认文字 | `14px Regular`，`#C5CFE0` (ZS-004-02) | — | +| 文字 → 按钮区纵向间距 | `--spacing-3` (12px) | §7.1 | +| 按钮区对齐 | 右对齐 | — | +| 「取消」 | §5.2.3 文本按钮（`#4096FF`，hover `#1677FF`）或 §5.2.2 默认按钮小号 | §5.2.3 | +| 「确定」 | §5.2.1 主按钮，小号 `28px` | §5.2.1 | +| 按钮间距 | `--spacing-2` (8px) | §7.1 | + +### 34.4 弹出方位与交互 + +| 行为 | 规则 | +|------|------| +| 方位 | 默认在触发元素**正下方**（`top` 箭头）；空间不足时自动翻转到上 / 左 / 右 | +| 打开 | `scale(0.95)→1` + `opacity 0→1`，`transform-origin` 指向箭头，`200ms ease-out` | +| 关闭 | 点「取消」/「确定」/ 点击气泡外部 / `Esc` | +| 「确定」 | 执行危险操作（如删除）后关闭；可在确认按钮上叠 §5.4.2 Loading | +| 无遮罩 | 不阻塞背景，仅就地确认 | + +### 34.5 与 §32 对话框的区别 + +| 维度 | §34 气泡确认 | §32 对话框 | +|------|-------------|-----------| +| 锚定 | 贴触发元素（带箭头） | 屏幕居中 | +| 遮罩 | 无 | 有 | +| 体量 | 极小（一句话 + 两钮） | 小弹窗（标题栏 + 主体 + 底部） | +| 用途 | 行内危险操作就地确认（删除 / 重置） | 较正式的确认 / 告知 | + +### 34.6 CSS Token 参考 + +```css +:root { + --popconfirm-bg: #0C1836; /* ZS-004-09 */ + --popconfirm-border: #1A2F5A; /* ZS-004-07 */ + --popconfirm-shadow: 0 4px 16px rgba(6,14,36,0.6); + --popconfirm-icon: #FAAD14; /* --func-warning 问号 */ + --popconfirm-text: #C5CFE0; /* ZS-004-02 */ + --popconfirm-cancel: #4096FF; /* ZS-002-05 文本按钮 */ + --popconfirm-cancel-hover: #1677FF;/* ZS-002-06 */ + --popconfirm-ok-bg: #1677FF; /* ZS-002-06 主按钮 */ +} +``` + +--- + +## 35. 图表通用规范（Chart 基础） + +> 对应设计稿「8. 图表」系列（柱状图 / 折线图 / 甘特图）。本节先约定**所有图表共用**的容器、标题、坐标轴、网格、图例、Tooltip、配色与空状态；§36 起按图表类型补充各自细则。配色一律取自 §1.1.8 图表配色与 §1.1.5 深蓝系，不另造色。 + +### 35.1 图表容器 + +| 属性 | 取值 | 来源 | +|------|------|------| +| 背景 | `#0C1836` (ZS-004-09)，嵌入卡片时随 §22 卡片 `#122347` | §3.1 | +| 圆角 | `4px` | §4.1 | +| 内边距 | `--spacing-5` (24px) | §7.1 | +| 多图并排间距 | `--spacing-6` (32px) | §7.1 | +| 边框（可选） | `1px solid #1A2F5A` (ZS-004-07) | — | + +### 35.2 图表标题 + +设计稿中标题统一为「**主色蓝竖条 ▌ + 文字**」的小标题样式。 + +| 元素 | 规格 | 来源 | +|------|------|------| +| 左侧竖条 | `3px × 14px`，`#1677FF` (ZS-002-06)，圆角 `1px` | §1.1.6 | +| 竖条 → 文字间距 | `--spacing-2` (8px) | §7.1 | +| 标题文字 | `16px Bold`，`#FFFFFF`（或 `#C5CFE0`） | §2.1.2 | +| 标题 → 图表区间距 | `--spacing-4` (16px) | §7.1 | +| 副标题 / 单位 | `12px Regular`，`#6E88B0` (ZS-004-04) | — | + +> 部分卡片标题不带竖条（如「标题（BW）」「数据采集XXX」），此时直接用 `16px Bold #C5CFE0`，与 §22 卡片标题一致。 + +### 35.3 坐标轴 + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 轴线（X / Y 基线） | `1px solid #2D4473` (ZS-004-06) | §6.1 | +| 刻度文字（轴标签） | `12px Regular`，`#6E88B0` (ZS-004-04) | — | +| 轴标题 / 类目名（如「类型」「2012」） | `12px Regular`，`#4096FF` (ZS-002-05) 或 `#6E88B0` | — | +| 刻度线（tick） | 通常隐藏，仅留网格线 | — | +| 轴名称单位 | `12px`，`#6E88B0`，置于轴末端 | — | + +### 35.4 网格线（splitLine） + +| 类型 | 色值 | 样式 | 使用场景 | +|------|------|------|----------| +| 主网格（默认） | `#2D4473` (ZS-004-06) | `1px dashed` | 柱状 / 折线的 Y 向参考线 | +| 弱化网格 | `#1A2F5A` (ZS-004-07) | `1px dashed` | 密集图表、次要参考 | + +> 深色背景下网格一律用**虚线**且低对比，避免抢戏；纵向类目方向通常不画网格。 + +### 35.5 图例（Legend） + +| 属性 | 取值 | 来源 | +|------|------|------| +| 位置 | 右上角（多数）或顶部居中 | — | +| 色块（marker） | `10px` 方块 / 圆点，取系列色 | §1.1.8 | +| 色块 → 文字间距 | `--spacing-1` (4px) | §7.1 | +| 图例文字 | `12px Regular`，`#C5CFE0` (ZS-004-02) | — | +| 项间距 | `--spacing-3` (12px) | §7.1 | +| 未选中态（点击隐藏系列） | 色块 + 文字置灰 `#4A6491` (ZS-004-05) | §1.1.5 | + +### 35.6 Tooltip（悬浮提示） + +鼠标悬停时跟随的浮层（如折线图「1月10日 异常率12.9%」、「5.32」）。 + +| 属性 | 取值 | 来源 | +|------|------|------| +| 背景 | `rgba(12,24,54,0.92)`（ZS-004-09 92%） | §3.1 | +| 边框 | `1px solid #1A2F5A` (ZS-004-07) | — | +| 圆角 | `4px` | §4.1 | +| 阴影 | `0 4px 16px rgba(6,14,36,0.6)` | §3.1.4 | +| 内边距 | 上下 `--spacing-2`，左右 `--spacing-3` | §7.1 | +| 标题行（日期 / 类目） | `12px Medium`，`#FFFFFF` | — | +| 数值行 | `12px Regular`，色块（系列色）+ 名称 `#6E88B0` + 数值 `#C5CFE0` | — | +| 指示线（axisPointer） | `1px dashed #4096FF` (ZS-002-05)，或半透明竖向高亮带 `rgba(22,119,255,0.12)` | §6.1 | + +> 设计稿中数据点 hover 常显示一个**实心小标签**（如圆点 + 数值 `5.32`）：标签背景 `#122347`，文字 `#FFFFFF`，圆点取系列色，圆角 `2px`。 + +### 35.7 数据点与标记 + +| 元素 | 规格 | 来源 | +|------|------|------| +| 折线拐点（默认） | 不显示或 `2px` 实心点 | — | +| 折线拐点（hover / 强调） | `空心圆`，描边 `2px` 系列色，填充 `#0C1836`，直径 `6px` | — | +| 高亮竖带（选中区间） | `rgba(22,119,255,0.12)` 矩形，无边框 | §3.1 | + +### 35.8 图表配色引用 + +| 用途 | 色序 | 来源 | +|------|------|------| +| 多系列（面积大：柱 / 折线 / 饼） | `#1677FF → #13C2C2 → #4096FF → #36CFC9 → #69B1FF → #5CDBD3 → #91CAFF → #87E8DE` | §1.1.8 通用图表色序 | +| 小面积（散点 / 迷你图 / 徽标） | `#4096FF → #36CFC9 → #FF4D4F → #FFA39E → #6388FF → #478880` | §1.1.8 小面积色序 | +| 语义系列（成功 / 警告 / 错误） | 绿 `--func-success` / 橙 `--func-warning` / 红 `#F5222D` | §27.4 / §1.1.2 | + +> 设计稿柱状图出现的「绿(Paper) / 橙(Project) / 蓝(Book)」三系列，对应**语义化分类**：绿取 §27.4 成功绿、橙取 §27.4 警告橙、蓝取主色 `#1677FF`；若为无语义的并列分类，应改用通用图表色序避免误读。 + +### 35.9 空状态 / 加载 + +| 状态 | 表现 | +|------|------| +| 加载中 | 图表区居中显示旋转图标 `#4096FF` + 文字「加载中…」`12px #6E88B0`（沿用 §5.4.2） | +| 无数据 | 居中占位插画 / 文字「暂无数据」`14px #6E88B0` | + +--- + +## 36. 柱状图（Column / Bar） + +> 对应设计稿「8.1 图表-柱状图」。涵盖**堆叠柱 / 分组柱 / 条形图（横向）/ 排行进度条**四种形态。容器、坐标轴、网格、图例、Tooltip 全部沿用 §35。 + +### 36.1 通用规格 + +| 属性 | 取值 | 来源 | +|------|------|------| +| 柱体圆角 | 顶部 `2px`（堆叠柱仅最顶段圆角） | §4.1 | +| 柱宽 | 类目宽度的 `40%~60%` | — | +| 同组柱间距 | `--spacing-1` (4px) | §7.1 | +| 类目（组）间距 | 自适应等分 | — | +| 数值标签（可选） | `12px Regular`，`#C5CFE0`，置柱顶上方 `--spacing-1` | — | + +### 36.2 堆叠柱状图（如「标题」Paper/Project/Book） + +| 元素 | 配色 | 来源 | +|------|------|------| +| 系列 1（Book / 底段） | `#69B1FF` (ZS-002-04) 或主色 `#1677FF` | §1.1.3 | +| 系列 2（Project / 中段） | `--func-warning`（橙） | §27.4 | +| 系列 3（Paper / 顶段） | `--func-success`（绿） | §27.4 | +| 段间分隔 | `1px` 容器底色 `#0C1836` 描边，制造堆叠缝隙 | — | +| Y 轴类目标签「类型」 | `12px`，`#4096FF` (ZS-002-05) | §35.3 | + +### 36.3 分组柱状图（如「标题（BW）」「标题」双系列） + +| 元素 | 配色 | 来源 | +|------|------|------| +| 系列依次取色 | 通用图表色序 `#1677FF / #13C2C2 / #4096FF …` | §1.1.8 | +| 设计稿 BW 三色变体 | 蓝 `#69B1FF` / 绿 `--func-success` / 橙 `--func-warning` | §35.8 | +| 双系列变体 | 蓝 `#69B1FF`(ZS-002-04) + 橙 `--func-warning` | — | + +### 36.4 条形图（横向，如「标题」x 轴 0–400） + +| 属性 | 取值 | 来源 | +|------|------|------| +| 方向 | 水平，类目在 Y 轴、数值在 X 轴 | — | +| 条体颜色 | `#69B1FF` (ZS-002-04)（单系列）或图表色序 | §1.1.3 | +| 条体圆角 | 右端 `2px` | §4.1 | +| 类目标签「类型」 | 左对齐，`12px #6E88B0` | §35.3 | +| X 轴刻度 | `0 / 100 / 200 / 300 / 400`，`12px #6E88B0` | §35.3 | + +### 36.5 排行进度条（如「数据采集XXX」TOP1–5） + +横向「标签 + 渐变进度条 + 数值」的榜单形态。 + +``` +TOP1 项目任务名称一 15,465 +■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■▓▓▓▓▓▓▓▓ +TOP2 项目任务名称二 15,234 +■■■■■■■■■■■■■■■■■■■■■■■■■▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ +``` + +| 元素 | 规格 / 配色 | 来源 | +|------|-------------|------| +| 排名 + 名称（TOPn 项目任务名称） | `14px Regular`，`#C5CFE0` (ZS-004-02) | — | +| 数值（右对齐） | `16px D-DIN Regular`，`#FFFFFF` | §2.1.2 | +| 进度条高度 | `8px`，圆角 `4px` | §4.1 | +| 进度填充 | 渐变 `linear-gradient(90deg, #1677FF 0%, #13C2C2 100%)`（主色蓝→主色青） | §1.1.8 | +| 进度轨道（底槽） | `#1A2F5A` (ZS-004-07) | §1.1.5 | +| 行间距 | `--spacing-4` (16px) | §7.1 | +| 名称行 → 进度条间距 | `--spacing-2` (8px) | §7.1 | + +### 36.6 交互 + +| 行为 | 动效 | +|------|------| +| 入场 | 柱体由 `0` 向目标高度 / 长度增长，`scaleY/scaleX 0→1`，`400ms ease-out`，按系列依次 `60ms` 错峰 | +| Hover 柱 | 该柱亮度 `+8%`，弹出 §35.6 Tooltip，axisPointer 高亮该类目竖带 | +| Hover 进度条 | 数值放大或显示绝对值 Tooltip | + +--- + +## 37. 折线图（Line / Area） + +> 对应设计稿「8.2 图表-折线图」与「8.3 多系列折线」。涵盖**迷你面积图 / 单线（含异常点 Tooltip）/ 长时序面积图（带缩略轴）/ 多系列折线**。容器、轴、网格、图例、Tooltip 沿用 §35。 + +### 37.1 线条与面积 + +| 元素 | 规格 | 来源 | +|------|------|------| +| 线宽 | `2px` | — | +| 线条颜色 | 取图表色序，单线默认 `#1677FF` (ZS-002-06) | §1.1.8 | +| 平滑 | `smooth`（曲线）或折线，按数据性质选用 | — | +| 面积填充（单线） | 自顶向下渐变 `rgba(22,119,255,0.32) → rgba(22,119,255,0)` | §3.1 | +| 拐点 | 默认隐藏，hover 显示空心圆（§35.7） | — | + +### 37.2 迷你面积图（如左上「图表标题」+ 已选/未选 标签） + +| 元素 | 规格 / 配色 | 来源 | +|------|-------------|------| +| 顶部切换标签（已选 / 未选） | §29 标签：选中 `#1677FF` 实心白字 / 未选 `transparent` + `1px #6E88B0` 边、`#6E88B0` 字 | §29 | +| 线条 | `2px #4096FF` (ZS-002-05) | — | +| 面积渐变 | `rgba(64,150,255,0.32) → 0` | — | +| 当前值标签（如 `59.32`） | 实心小牌 `#122347` 背景 / `#FFFFFF` 文字，圆角 `2px`，定位于末端点 | §35.6 | +| 轴标签（日期） | `12px #6E88B0` | §35.3 | + +### 37.3 单线异常点图（如中部「5-1…5-12」+「1月10日 异常率12.9%」） + +| 元素 | 规格 / 配色 | 来源 | +|------|-------------|------| +| 主线 | `2px #1677FF` | — | +| 面积渐变 | `rgba(22,119,255,0.32) → 0` | — | +| 选中竖带 | `rgba(22,119,255,0.12)` 矩形高亮当前 X 区间 | §35.7 | +| 异常点标记 | 空心圆 `6px`，描边 `#FAAD14`（警告橙），填充 `#0C1836` | §27.4 | +| Tooltip（日期 + 指标） | §35.6；指标行如「异常率 12.9%」用 `--func-warning` 橙强调 | §35.6 | +| Y 轴（0–2500） | `12px #6E88B0`，虚线网格 `#2D4473` | §35.3 / §35.4 | + +### 37.4 长时序面积图 + 缩略轴（如底部「图表标题」1986–2024） + +| 元素 | 规格 / 配色 | 来源 | +|------|-------------|------| +| 主线 | `2px #36CFC9`（标准青）或 `#4096FF` | §1.1.4 | +| 面积渐变 | `rgba(54,207,201,0.24) → 0` | — | +| 数据点标签（如 `2.43`） | 实心小牌（§35.6），定位于选中点上方 | — | +| 缩略轴（dataZoom，右下迷你图） | 缩略折线 `#4A6491`；滑窗手柄 `#1677FF`，选中区 `rgba(22,119,255,0.16)` | §1.1.5 / §1.1.6 | +| X 轴年份 | `12px #6E88B0`，密集时隔项显示 | §35.3 | + +### 37.5 多系列折线图（如「图表标题」XXX/XXX/都是/无反应） + +| 元素 | 规格 / 配色 | 来源 | +|------|-------------|------| +| 图例（顶部居中） | 方块 marker + 文字，项间距 `--spacing-3` | §35.5 | +| 系列 1（XXX） | 红 `#FF4D4F` (ZS-001-05) | §1.1.2 | +| 系列 2（XXX） | 蓝 `#1677FF` (ZS-002-06) | §1.1.3 | +| 系列 3（都是） | 橙 `--func-warning` | §27.4 | +| 系列 4（无反应） | 绿 `--func-success` 或青 `#36CFC9` | §27.4 / §1.1.4 | +| 线宽 | `2px`，多系列**不填充面积**（避免互相遮挡） | — | +| 拐点 | 全程显示 `4px` 空心圆（描边系列色，填充 `#0C1836`） | §35.7 | +| 选中竖带 + Tooltip | hover 竖带 `rgba(22,119,255,0.12)`，Tooltip 列出各系列值（如 `5.32`） | §35.6 | +| Y 轴（0–10） / X 轴（年份） | `12px #6E88B0`，横向虚线网格 `#2D4473` | §35.3 / §35.4 | + +### 37.6 交互 + +| 行为 | 动效 | +|------|------| +| 入场 | 线条沿路径绘制 `stroke-dashoffset` 动画，`600ms ease-out`；面积同步淡入 | +| Hover | 显示 §35.6 Tooltip + 竖向 axisPointer 高亮带；对应拐点放大为空心圆 | +| 图例点击 | 切换系列显隐，隐藏态图例置灰 `#4A6491`（§35.5） | +| 缩略轴拖拽 | 主图 X 轴范围实时联动，`100ms` 节流 | + +--- + +## 38. 甘特图（Gantt） + +> 对应设计稿「甘特图」。以时间为横轴、任务行为纵轴的进度条排期图。深蓝背景上以**交替行底纹 + 渐变任务条 + 箭头收尾**呈现，配色取 §1.1.8 图表色序与语义色。 + +### 38.1 结构 + +``` + 1 2 3 … 15 16 17 … 31 ← 时间刻度表头 + Jan ▐▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▶ ← 任务条（带箭头收尾） + Feb ▐▓▓▓▓▓▓▓▓▓▶ + Mar ▐▓▓▓▓▓▓▓▶ + … + Dec ▐▓▓▓▓▓▓▓▓▓▓▓▶ + ● Lorem ipsum 1 ● Lorem ipsum 2 … ← 底部图例 +``` + +### 38.2 表格框架 + +| 元素 | 规格 / 配色 | 来源 | +|------|-------------|------| +| 容器背景 | `#0C1836` (ZS-004-09) | §35.1 | +| 时间刻度表头（1–31 / 月） | `12px Regular`，`#C5CFE0` (ZS-004-02) | §35.3 | +| 行标签（Jan…Dec） | `14px Regular`，`#C5CFE0` | — | +| 行高 | `28px`，行间距 `--spacing-1` (4px) | §7.1 | +| 行底纹（轨道） | `#122347` (ZS-004-08)，整行通栏，圆角 `2px` | §1.1.5 | +| 行底纹（隔行可选） | 奇偶交替 `#122347` / `#0F1C3D` | — | +| 列分隔（可选） | `1px dashed #1A2F5A` (ZS-004-07) | §6.2 | + +### 38.3 任务条 + +| 元素 | 规格 / 配色 | 来源 | +|------|-------------|------| +| 条高 | `16px`，垂直居中于行内 | — | +| 圆角 | `2px`（左端）；右端收**箭头**三角表示方向 | §4.1 | +| 填充 | 沿条向右渐变（系列色 `0%` → 同色 70% 透明 `100%`），叠加斜纹/点纹理增强层次 | §1.1.8 | +| 纹理 | `repeating-linear-gradient(45deg, rgba(255,255,255,0.06) 0 4px, transparent 4px 8px)` | — | +| 箭头收尾 | 与条同色实心三角，`6px`，指向时间推进方向 | — | +| 进度（可选） | 条内再叠一段高饱和系列色表示完成比例 | — | + +### 38.4 任务分类配色（对应底部图例 Lorem ipsum 1–5） + +| 图例 | 圆点 / 任务条主色 | 来源 | +|------|------------------|------| +| Lorem ipsum 1 | 橙 `--func-warning` | §27.4 | +| Lorem ipsum 2 | 红 `#FF4D4F` (ZS-001-05) | §1.1.2 | +| Lorem ipsum 3 | 青绿 `#36CFC9` (ZS-003-05) | §1.1.4 | +| Lorem ipsum 4 | 浅蓝 `#91CAFF` (ZS-002-03) | §1.1.3 | +| Lorem ipsum 5 | 主色蓝 `#1677FF` (ZS-002-06) | §1.1.3 | + +### 38.5 图例与表头 + +| 元素 | 规格 | 来源 | +|------|------|------| +| 底部图例圆点 | `10px` 圆形，取 §38.4 分类色 | §35.5 | +| 图例文字 | `14px Regular`，`#C5CFE0` | — | +| 图例项间距 | `--spacing-5` (24px) | §7.1 | +| 表头 → 首行间距 | `--spacing-3` (12px) | §7.1 | + +### 38.6 交互 + +| 行为 | 动效 | +|------|------| +| 入场 | 任务条由左端起点向右展开 `scaleX 0→1`（`transform-origin:left`），`400ms ease-out`，按行错峰 `60ms` | +| Hover 任务条 | 整条亮度 `+8%`，弹出 §35.6 Tooltip（任务名 / 起止日期 / 进度） | +| Hover 行 | 行底纹由 `#122347` → `#1A2F5A` (ZS-004-07) | +| 今日线（可选） | 一条 `1px dashed #4096FF` (ZS-002-05) 竖线标注当前日期 | §6.2 | + +### 38.7 CSS Token 参考（§35–§38 共用） + +```css +:root { + /* 图表容器与标题 */ + --chart-bg: #0C1836; /* ZS-004-09 */ + --chart-title-bar: #1677FF; /* ZS-002-06 标题竖条 */ + --chart-title-text: #FFFFFF; + --chart-subtitle: #6E88B0; /* ZS-004-04 */ + + /* 坐标轴与网格 */ + --chart-axis-line: #2D4473; /* ZS-004-06 */ + --chart-axis-label: #6E88B0; /* ZS-004-04 */ + --chart-axis-cat: #4096FF; /* ZS-002-05 类目名 */ + --chart-grid: #2D4473; /* ZS-004-06 虚线网格 */ + --chart-grid-weak: #1A2F5A; /* ZS-004-07 */ + + /* 图例 / Tooltip */ + --chart-legend-text: #C5CFE0; /* ZS-004-02 */ + --chart-legend-off: #4A6491; /* ZS-004-05 未选中 */ + --chart-tooltip-bg: rgba(12,24,54,0.92); + --chart-tooltip-border:#1A2F5A; /* ZS-004-07 */ + --chart-tooltip-title: #FFFFFF; + --chart-tooltip-value: #C5CFE0; + --chart-axispointer: #4096FF; /* ZS-002-05 */ + --chart-highlight-band:rgba(22,119,255,0.12); + + /* 通用图表色序（面积大） */ + --chart-c1: #1677FF; --chart-c2: #13C2C2; --chart-c3: #4096FF; --chart-c4: #36CFC9; + --chart-c5: #69B1FF; --chart-c6: #5CDBD3; --chart-c7: #91CAFF; --chart-c8: #87E8DE; + + /* 小面积图表色序 */ + --chart-s1: #4096FF; --chart-s2: #36CFC9; --chart-s3: #FF4D4F; + --chart-s4: #FFA39E; --chart-s5: #6388FF; --chart-s6: #478880; + + /* 排行进度条（§36.5） */ + --rank-bar-fill: linear-gradient(90deg, #1677FF 0%, #13C2C2 100%); + --rank-bar-track: #1A2F5A; /* ZS-004-07 */ + --rank-value: #FFFFFF; + + /* 甘特图（§38） */ + --gantt-track: #122347; /* ZS-004-08 行底纹 */ + --gantt-row-hover: #1A2F5A; /* ZS-004-07 */ + --gantt-c1: #FAAD14; /* 警告橙 */ + --gantt-c2: #FF4D4F; /* ZS-001-05 */ + --gantt-c3: #36CFC9; /* ZS-003-05 */ + --gantt-c4: #91CAFF; /* ZS-002-03 */ + --gantt-c5: #1677FF; /* ZS-002-06 */ + --gantt-today: #4096FF; /* ZS-002-05 今日线 */ +} +``` + +> 项目当前未引入图表库；若后续接入 ECharts，可将以上 token 注入主题（`backgroundColor` / `axisLine.lineStyle.color` / `splitLine.lineStyle` / `color[]` 色序 / `tooltip.backgroundColor` 等），保持与本规范一致。 diff --git a/frontend-web/docs/上游升级对比与建议.md b/frontend-web/docs/上游升级对比与建议.md new file mode 100644 index 00000000..1e1f13b3 --- /dev/null +++ b/frontend-web/docs/上游升级对比与建议.md @@ -0,0 +1,156 @@ +# DeerFlow 上游升级对比与回合建议 + +> 对比对象：`bytedance/deer-flow`（上游，HEAD `9f3be2a` @ 2026-05-30）vs 本仓库 fork。 +> 生成日期：2026-05-31。 +> 说明：按用户要求，**多语言 (i18n)** 与 **播客 / TTS (podcast)** 不在本次升级范围内，已剔除。 + +--- + +## 0. 背景与对比结论 + +| 项 | 结论 | +|---|---| +| fork 切出时间 | **≈ 2026-05-12**（与目录名 `offline-backend-20260512` 吻合） | +| 上游当前 HEAD | `9f3be2a` @ 2026-05-30，完整历史 2186 提交 | +| fork 之后上游新增 | **95 个提交**（7 feat / 1 perf / 60 fix / 依赖与文档若干） | +| 后端核心框架 `packages/harness/deerflow/` | **高度同源、目录结构完全一致**，差异主要来自这 95 个提交 | +| 前端 | 技术栈已分道扬镳：上游仍是 **Next.js**，本仓库已迁到 **Vite + React Router**，文件几乎全不同 | + +「升级」分两类，本文都覆盖： +- **A 类**：fork 之后上游真正新增的（95 提交）——同源、可 cherry-pick，**优先回合**。 +- **B 类**：fork 时就裁掉/换了路线、上游一直保留的能力——成本高、按业务取舍。 + +--- + +## 1. 后端升级（A 类：fork 后上游新增） + +### 1.1 新能力（feat / perf） + +| 日期 | 升级 | 提交 | 说明 | +|---|---|---|---| +| 05-29 | ToolOutputBudgetMiddleware | #3303 | 给超大工具输出做预算保护，防止单个结果撑爆上下文 | +| 05-28 | MiMo reasoning 支持 | #3298 | 兼容小米 MiMo 模型思维链回传 | +| 05-21 | 链路追踪命名优化 | #3101 | 图名改 `lead_agent`、用自定义 agent 名作 run_name | +| 05-21 | 循环检测延迟告警 | #2752 | 警告延迟注入，减少对正常多轮对话的误打断 | +| 05-20 | Sandbox 下载文件接口 | #3038 | 可把沙箱内产物取回 | +| 05-15 | Discord 渠道增强 | #2842 | 仅@提及、thread 路由、typing 指示 | +| 05-13 | 子代理 token 用量流式上报 | #2882 | subagent 消耗实时汇总到 header，利于展示/计费 | +| 05-12 | perf：线程元数据过滤下推 SQL | #2865 | 线程列表筛选走 SQL，性能提升 | + +能力性增强（fix 前缀实为增强）：MCP 跨调用持久化会话、支持有状态 server（#3089 / #3203）；摘要触发阈值调优（#3174）。 + +### 1.2 重要稳定性修复 + +| 主题 | 提交 | 价值 | +|---|---|---| +| 摘要压缩后保留消息 | #3280 | 数据正确性关键 | +| 重启后从持久化恢复 runs / interrupted 状态 | #2932(破坏性)、#2989、#3152、#3155 | 网关重启不丢运行 | +| JWT secret 持久化、多 worker 共享网关 token | #2933、#3184 | 重启/多进程登录态不失效 | +| memory 更新按 agent 隔离 + 包裹 JSON 解析健壮性 | #2941、#3252 | 记忆串号/解析修复 | +| MCP 配置接口脱敏 | #2667 | 防密钥泄露 | +| 阻塞 IO 移出事件循环 | #3311、#2822（+检测门禁 #3229） | 消除事件循环阻塞 | + +### 1.3 依赖升级 +- Python：`langsmith 0.7.36 → 0.8.0`、`idna 3.13 → 3.15` + +### 1.4 怎么做（回合 A 类后端升级） + +> 前提：本仓库 `packages/harness/deerflow/` 与上游高度同源，cherry-pick 冲突面小。 + +1. **加上游为远程并拉取历史**（在后端所在 git 仓库根执行）： + ```bash + git remote add upstream https://github.com/bytedance/deer-flow.git + git fetch upstream + ``` +2. **逐条预览某个提交的改动范围**： + ```bash + git show --stat + git show -- backend/packages/harness/deerflow/... + ``` +3. **单条回合**（推荐用 `-x` 记录来源；如路径前缀不一致需先确认）： + ```bash + git cherry-pick -x + # 冲突时：解决后 + git cherry-pick --continue + ``` + > 注意：上游后端在 `backend/` 子目录，本仓库后端在 `offline-backend-20260512/backend/`。若 cherry-pick 因路径不匹配失败，改用按文件打补丁： + > ```bash + > git show -- backend/ | git apply --directory=offline-backend-20260512/backend -p2 -3 + > ``` +4. **回合后必跑校验**（在 `offline-backend-20260512/backend/`）： + ```bash + make test # PYTHONPATH=. uv run pytest tests/ -v + make lint + ``` + 重点确认 `tests/test_harness_boundary.py`（harness→app 防火墙）与中间件链顺序未被破坏。 +5. **依赖升级**：同步上游 `pyproject.toml` 对应行后执行 `uv lock && make install`；离线环境需同步更新 `requirements-offline.txt` / `wheelhouse`。 + +--- + +## 2. 前端升级（B 类：上游有、本仓库缺） + +> 已剔除多语言、播客。下表为关键词核验结果（本仓库 vs 上游命中文件数）。 + +| 功能 | 本仓库 | 上游 | 状态 | +|---|---|---|---| +| Prose 文本润色 | 0 | 8 | 上游独有 | +| Replay 研究回放 | 2 | 29 | 上游完整，本仓库近乎无 | +| PPT / PPTX 生成 | 2 | 14 | 上游完整，本仓库近乎无 | +| Landing 落地页 | 0 | 11 | 上游独有（营销/介绍页，按需） | +| 静态 demo 模式 | 无 | #3170 | fork 后上游新增 | + +前端体验类修复（可参考实现）：流式渲染、消息去重、历史消息 Mermaid 预览、新建会话即时入侧栏。 +前端依赖升级：`brace-expansion 1.x → 5.0.5`（安全）、`uuid 10 → 14`。 + +### 2.1 怎么做（前端能力移植） + +> 前端技术栈已不同（Next.js → Vite + React Router），**不能直接 cherry-pick**，需按"读上游实现 → 适配到本仓库"的方式重写。 + +通用步骤： +1. 在上游 `frontend/src/` 定位目标功能的页面/组件/hook 与对应的后端 API 调用。 +2. 后端能力是否具备：Prose / PPT / Replay 依赖后端相应接口，先确认本仓库后端有无对应路由（多为 deep_research/skills 相关），**没有则前端无法独立完成**，需连带回合后端。 +3. 适配差异点： + - 路由：上游 app router (`src/app/...`) → 本仓库 `src/pages/` + `PageRoutes.tsx` / `WorkspaceRoutes.tsx`。 + - 导航 API：用本仓库 `src/shims/`（`next/link`、`next/navigation` 已 polyfill）。 + - 数据流：沿用本仓库 TanStack Query + `@langchain/langgraph-sdk` 流式。 +4. 验证：`pnpm typecheck` + `pnpm dev` 实测。 + +--- + +## 3. 推荐升级清单（按优先级） + +### P0 — 强烈建议（低风险、高价值，A 类） +- **摘要压缩后保留消息 #3280** —— 数据正确性，直接影响长对话可用性。 +- **重启后恢复 runs / interrupted #2932 #2989 #3152 #3155** —— 生产稳定性核心。 +- **JWT secret 持久化 / 多 worker 共享 token #2933 #3184** —— 否则重启或多进程部署会掉登录态。 +- **阻塞 IO 移出事件循环 #3311 #2822** —— 并发吞吐与响应延迟改善。 + +### P1 — 建议（实用增强） +- **ToolOutputBudgetMiddleware #3303** —— 防超大工具输出拖垮上下文，对 agent 稳定性有实际帮助。 +- **MCP 持久化会话 / 有状态 server #3089 #3203** —— 若用到有状态 MCP server 则必需。 +- **MCP 配置接口脱敏 #2667** —— 安全加固。 +- **子代理 token 用量流式上报 #2882** —— 计费/可观测。 +- **线程元数据过滤下推 SQL #2865（perf）** —— 列表性能。 + +### P2 — 按需（看是否用到对应模型/渠道） +- MiMo reasoning #3298（用小米模型才需要） +- Discord 渠道增强 #2842（用 Discord 才需要） +- Sandbox 下载文件接口 #3038、追踪命名 #3101、循环检测延迟告警 #2752 + +### 前端（按业务价值） +- **Replay 研究回放** —— 对"深研/写作"类产品体验提升明显，建议优先（需后端配合）。 +- **Prose 文本润色** —— 与写作工作台契合，建议评估接入。 +- **PPT 生成** —— 若有汇报/导出诉求再做。 +- **Landing 落地页** —— 仅当面向外部用户时考虑。 + +### 暂不做 +- 多语言 i18n（本次明确排除） +- 播客 / TTS（本次明确排除） + +--- + +## 4. 建议执行节奏 +1. 先做 **P0 后端 4 项** + 跑全量测试，单独提交一个"上游稳定性回合"分支。 +2. 再做 **P1**，逐条 cherry-pick、逐条验证。 +3. 前端 **Replay / Prose** 立项评估（确认后端依赖），单独排期重写适配。 +4. 依赖升级随回合同步，离线包 (`wheelhouse` / `requirements-offline.txt`) 一并更新。 diff --git a/git-clone/deer-flow b/git-clone/deer-flow new file mode 160000 index 00000000..9f3be2a9 --- /dev/null +++ b/git-clone/deer-flow @@ -0,0 +1 @@ +Subproject commit 9f3be2a9fa8b86f5e27a76c13e8373542dabda9d