dianshang-qianduan/docs/student-training-ui-standard.md

# 学生端实训页面 UI 标准

## 1. 标准来源与适用范围

- **唯一标准页**：`/foundation/new-product-survey`（新产品调查与分析）。
- **实现来源**：`src/views/foundation/new-product-survey.vue`。
- **适用对象**：学生端全部实训任务页，包括产品、渠道、评估、测试等模块；不适用于教师端、平台管理端和登录页。
- **目标**：所有实训页面在布局层级、深色主题、文本对比度、表单、表格、按钮及 AI 侧栏上，呈现与标准页同一套产品体验。

> 以后页面改造以本文件为验收依据。若现有页面的业务结构不同，保留业务内容和交互，只将视觉组件收敛到本规范；不使用旧的图片按钮、白底内容卡或浅色文字配浅色背景。

## 2. 视觉方向

**深海蓝实验工作台**：以近黑蓝为主背景，以半透明蓝黑卡片建立层级，以青蓝描边和渐变作为交互强调；文字保持冷白高对比，信息密度高但不压迫。

- 主背景不使用纯白或中性灰。
- 卡片不使用大面积纯黑，必须有边框或内阴影区分层级。
- 强调色只用于选中态、主要操作、步骤进度和可交互边框。
- 所有正文、输入内容、提示文字必须在当前背景上清晰可读。

## 3. 设计令牌

| 类别 | 标准值 | 用途 |
| --- | --- | --- |
| 页面主文字 | `#eef5ff` | 默认正文与整体文字基色 |
| 强正文 | `#ffffff` | 标题、激活步骤、关键操作 |
| 次正文 | `#d7ecff` / `#dff5ff` | 说明、表格内容、字段标签 |
| 弱提示 | `#9ab3d0` / `#8299aa` | 未选中步骤、占位符 |
| 青蓝强调 | `#71dfff` / `#5ce0ff` | 标签、焦点、交互边框 |
| 主按钮渐变 | `#0b84bd → #096491` | 下一步、保存、提交等主要操作 |
| 激活标签渐变 | `#0a6b9e → #0a5c86` | 当前步骤、选中的单选项 |
| 输入底色 | `#0f1a24` | 原生输入框、文本域 |
| 深卡片底色 | `rgba(0, 25, 42, .64)` | 实训卡、步骤卡 |
| 表格底色 | `rgba(1, 14, 26, .72)` | 表格外层 |
| 表格表头 | `rgba(8, 55, 82, .98)` | 表头 |
| 常规描边 | `rgba(82, 174, 226, .42)` | 卡片、表单容器 |
| 交互描边 | `rgba(99, 217, 255, .55)` | 按钮、焦点、选中边框 |
| 外层圆角 | `36px` | 主工作区 |
| 内容卡圆角 | `26px` | 任务卡、步骤卡 |
| 输入圆角 | `14px` | 输入框、选项 |
| 胶囊圆角 | `999px` | 小按钮、状态标签、步骤标签 |

## 4. 页面框架

### 4.1 主布局

- 桌面端采用“主实训区 + AI 侧栏”双栏：`minmax(720px, 1fr) 340px`，间距 `24px`。
- 主实训区为半透明深色工作台：内边距 `28px`，圆角 `36px`，描边 `rgba(0,180,255,.25)`。
- 工作台阴影：`0 22px 48px rgba(0,0,0,.22)`；可使用轻微内高光 `inset 0 1px 0 rgba(169,229,255,.08)`。
- 页面底部保留至少 `32px` 空间；不让内容紧贴浏览器边缘。
- 视口小于 `1100px` 时，AI 侧栏下移为单列；小于 `900px` 时，所有横向操作组改为纵向全宽布局。
- **导航与主工作台之间的沟槽：** 主内容区的外层留白属于学生端页面画布，固定使用 `#06111d`，并与 `.student-training-shell` 背景连续衔接；不得暴露历史 `app-main` 的黑色渐变、独立矩形色块、阴影或边框。侧栏右侧至工作台左侧只保留布局规定的自然间距，不得形成可见“黑框”。
- **页面根容器横向间距：** 所有学生实训页面的 `.student-training-shell` 必须统一使用 `grid-template-columns: minmax(720px, 1fr) 340px`、`gap: 24px`、`margin: 0`、`padding: 24px 24px 32px`。不得在单个页面保留 `padding: 0`、额外的左/右 `margin` 或另一套列宽；因此左侧导航后的页面起点在每个任务中必须一致。小于等于 `1100px` 改为单列；小于等于 `900px` 统一为 `padding: 14px 14px 18px`。
- **左侧菜单切换可靠性：** 菜单点击后必须立即挂载目标路由页面；不得使用会让旧页面先卸载、而新异步页面尚未挂载的阻塞式 `out-in` 路由过渡。连续点击不同菜单时，主内容区不得出现空白页；加载失败时应保留可见的目标页面加载/错误状态，而不是仅依赖浏览器强制刷新恢复。

### 4.2 标题区

- 顶部可使用任务归属胶囊：字号 `12px`，字重 `700`，内边距 `4px 14px`，圆角 `30px`。
- 页面主标题：`30px / 1.3 / 900`，允许使用 `#ffffff → #8bcbff` 的文字渐变；禁止灰色大标题。
- “Training Task”“Step 01”等眉题：`12px / 800`，颜色 `#71dfff`。
- 实训工作台标题：`26px / 800`；步骤标题：`22px / 900`。

### 4.3 实训说明区

- 使用 `TrainingTaskBrief` 或视觉等价的深色说明卡。
- 说明标签保持四等分横向排列；选中项使用青蓝描边与深蓝底，非选中项保持透明深色底。
- 内容面板必须使用深色底和描边，正文 `14px`，行高 `1.8`，文字颜色 `#d7ecff`。

#### 实训说明区底色与层级（强制色值）

实训说明区必须是“外层说明卡 → 内层内容面板”的两级深色结构。红框中可见的边距区域属于外层说明卡，必须保留统一底色，不能透明、不能继承页面底色，也不能因页面不同改成另一种蓝黑色。

| 区域 | 固定样式 | 作用 |
| --- | --- | --- |
| 外层说明卡（`.training-task-brief` / `.goal-bg`） | 背景 `rgba(0,25,42,.64)`；边框 `1px solid rgba(82,174,226,.42)`；圆角 `26px`；内边距 `18px 22px` | 承载页签、内层面板及其四周留白；所有学生端页面必须一致。 |
| 内层内容面板（`.brief-panel`） | 背景 `rgba(0,20,35,.65)`；边框 `1px solid rgba(0,200,255,.20)`；圆角 `20px` | 承载当前背景、目标或要求的正文内容；与外层形成可辨识但不过强的两级深度。 |
| 内容区分隔线 | `1px solid rgba(0,180,255,.20)` | 用于标题与正文、工作台头部等低对比层级分隔；不得使用白线。 |

- 外层卡与内层面板之间仅通过上述 `18px 22px` 外层内边距露出外层底色；禁止额外增加第三种底色、渐变底、灰白底或无边界色块。
- 外层与内层的透明度、圆角和边框必须成组使用。不得只改其中一个背景色，导致左右留白、底部留白或圆角内侧出现与标准页不同的色带。
- 当复用 `TrainingTaskBrief` 时，页面局部样式不得覆盖其外层背景为 `rgba(0,35,55,.60)`、纯色或透明；如发生历史样式覆盖，以本节固定值为准。

### 4.4 任务工作台

- 外层任务卡、步骤卡：内边距 `18px 22px`，圆角 `26px`，背景 `rgba(0,25,42,.64)`，描边使用常规描边。
- 工作台头部和步骤内容之间使用 `1px` 的低对比蓝色分割线。
- 工作台操作区放在右上角；桌面端右对齐，移动端改为全宽纵向。

#### 4.4.1 案例文档与导出实训成果的位置（硬性约束）

- “案例文档”和“导出实训成果”属于**任务工作台头部操作区**，固定放在标题组右侧：桌面端右上角横向排列，顺序为“案例文档 → 导出实训成果”，组内间距 `10px`。
- 两个按钮必须位于工作台头部分割线之上，不得放入步骤内容、表格下方、底部大操作区或 AI 侧栏。
- “导出实训成果”在每个任务工作台只出现一次；底部大操作区仅保留保存、提交、清空/重置等与填写流程直接相关的操作，禁止重复放置导出按钮。
- 窄屏下，头部改为纵向布局时，操作组在标题组下方全宽排列；两个按钮保持同高，并按内容自然宽度排列或在极窄屏各占一行。

### 4.5 中央主工作台（必选规范）

> 本节对应学生端中间主界面，即页面标题、实训说明、任务实训、步骤栏和步骤内容所在的整块区域。所有学生实训页必须有清晰的同级结构；业务内容可以不同，但不能随意增加白底、灰底或无层级容器。

#### 层级与区域顺序

中央主工作台固定为以下五个视觉层级，自上而下排列：

1. **任务识别区**：任务归属胶囊与任务标题。
2. **实训说明区**：背景、目标、要求等由配置驱动的说明内容。
3. **任务工作台头部**：`Training Task` 眉题、实训标题和辅助操作按钮。
4. **步骤导航区**：仅承载配置驱动的步骤，具体样式见第 5 节。
5. **当前步骤内容区**：当前步骤的说明、表单、表格、提示卡与操作区。

- 区域之间的标准纵向间距：任务识别区到说明区 `24px`；说明区到任务工作台 `28px`；工作台头部到步骤栏 `22px`；步骤栏到内容区 `32px`。
- 不得将步骤内容直接贴在实训说明区之后；必须先经过任务工作台头部和步骤导航形成层级过渡。
- 同一页面只保留一个主工作台；嵌套业务内容通过步骤卡、表格容器和提示卡分层，禁止再出现第二个无边界的大型灰色底板。

#### 外层工作台尺寸与材质

| 元素 | 标准尺寸与样式 |
| --- | --- |
| 主工作台（`training-core`） | 内边距 `28px`；圆角 `36px`；边框 `1px solid rgba(0,180,255,.25)`；背景 `rgba(8,18,28,.60)`；阴影 `0 22px 48px rgba(0,0,0,.22)` + 内高光 `inset 0 1px 0 rgba(169,229,255,.08)` |
| 任务工作台（`task-card`） | 内边距 `18px 22px`；圆角 `26px`；背景 `rgba(0,25,42,.64)`；边框 `1px solid rgba(82,174,226,.42)`；与下一同级区域间距 `28px` |
| 步骤内容卡（`step-card`） | 内边距 `18px 22px`；圆角 `26px`；背景与任务工作台一致；边框使用常规描边；不使用纯黑或白色底 |
| 表格/长内容容器 | 仅作为步骤内容卡内部的第三级容器；不得突破步骤卡圆角和边界 |

#### 任务工作台头部

- 采用左右分栏：左侧为“眉题 + 任务标题”，右侧为辅助操作；两端对齐，间距 `18px`。
- 头部底部间距 `22px`，底部内边距 `18px`，并使用 `1px solid rgba(0,180,255,.2)` 分割线。
- 工作台标题：`26px / 800 / #ffffff`，上间距 `4px`；不使用渐变或过大字号抢占页面主标题层级。
- 眉题：`12px / 800 / #71dfff`；任务名称由业务或配置提供，样式不得依赖具体文本。
- 右侧辅助操作按第 6.1 节的小型轮廓按钮规则排列：间距 `10px`，允许换行，桌面端右对齐。

#### 工作台标题组与说明文字（强制文字规范）

工作台头部左侧的文字只能按“眉题 → 标题 → 任务说明”顺序出现，三者必须使用下表的固定层级；不得因页面不同随意改字号、改颜色、改字重或插入未定义的副标题。

| 文本层级 | 字号 / 字重 / 行高 | 颜色 | 间距与展示规则 |
| --- | --- | --- | --- |
| 眉题（如 `Training Task`） | `12px / 800 / 1.4` | `#71dfff` | `margin: 0`；仅作为标题的视觉眉题，不承载业务说明，不超过一行。 |
| 任务标题（如“任务实训”） | `26px / 800 / 1.3` | `#ffffff` | `margin: 4px 0 8px`；不使用渐变、描边或阴影，不得大于页面主标题。 |
| 任务说明 | `15px / 400 / 1.8` | `#d7ecff` | `margin: 0`；位于任务标题下方；内容来自任务配置或业务数据，不写死为某个页面的文案。 |

- 任务说明必须是工作台标题组中唯一的正文说明：只用于概括本任务的操作目标、提交要求或学习产出；不得重复实训背景、目标和要求面板中的整段内容。
- 有有效任务说明时必须显示，并与标题的 `8px` 间距保持一致；无有效说明时不渲染空段落，也不得为了占位保留额外高度。
- 桌面端说明最大宽度不超过工作台左侧可用宽度；长文本按自然换行显示。说明与右侧按钮不重叠，在窄屏时与按钮组一起改为纵向布局。
- 禁止将任务说明做成灰白文字、白底提示条、带图标的第二标签或额外卡片；它始终属于工作台标题组，并在头部分割线之上结束。

#### 任务工作台头部一致性（硬性约束）

- 一个任务工作台只能保留**一套**身份标题：左侧的“眉题 + 任务标题”即为唯一标题层。不得在工作台顶部、标题上方或 `::before`/`::after` 中再次生成“任务实训”等视觉标签。
- 标准化页面不得把工作台套用带有历史伪元素标题的通用容器（例如 `.training-step-area`）。如历史结构确实无法移除，页面局部必须显式禁用其伪元素：`.training-step-area::before { display: none; }`；不得让该标签与工作台标题同时出现。
- 工作台头部始终按同一结构排版：`display: flex`、`justify-content: space-between`、`align-items: flex-start`、`gap: 18px`、`margin-bottom: 22px`、`padding-bottom: 18px`，并保留底部分割线。说明文字仅作为标题下的辅助正文，使用 `15px / 1.8 / #d7ecff`。
- 头部右侧的“案例文档 / 导出实训成果 / 下载数据”等均为同一组**小型轮廓按钮**：最小高度 `40px`、左右内边距 `18px`、圆角 `999px`、字号 `14px`、字重 `800`、边框 `rgba(99,217,255,.55)`、背景 `rgba(17,126,178,.36)`。同一操作组内不得混入亮蓝色实心主按钮、图片按钮或不同高度的按钮。
- 主工作台外层、任务工作台、步骤内容卡各自只承担一层边框与阴影；禁止再叠加第二个无语义的大型容器、重复圆角或竞争性的重阴影。页面视觉必须保持“外层工作台 → 任务工作台 → 步骤内容卡”的三级结构。

#### 当前步骤内容区

- 步骤标题行采用左右布局：左侧为眉题与步骤标题，右侧可放一个业务状态芯片；间距 `18px`，底部间距 `14px`。
- 步骤标题：`22px / 900 / #ffffff`；眉题：`12px / 800 / #71dfff`；状态芯片按第 9 节执行。
- 步骤说明：`15px / 1.8 / #d7ecff`，与首个字段或表格的间距 `20px`。
- 字段与字段之间默认间距 `16px`；同组字段使用网格，桌面端列间距 `16px`，小于 `900px` 时改为一列。
- 长文本、表格、图表和结果提示均限制在步骤内容卡内部；任何业务内容不得覆盖工作台边框或 AI 侧栏。

#### 主工作台响应式规则

- 大于 `1100px`：主实训区与 AI 侧栏保持双栏，中央工作台连续展示。
- `901px–1100px`：主工作台仍可保持横向工具栏和步骤栏，但辅助操作允许换行。
- 小于等于 `900px`：主工作台内边距降为 `18px`，外层圆角降为 `24px`；工作台头部、辅助操作、步骤标题行、字段网格都改为纵向全宽布局。
- 任意尺寸下，中央主工作台最小可用宽度不得低于其父容器宽度；禁止固定像素宽度造成横向页面滚动。

## 5. 步骤导航

### 5.1 适用边界

- 本节**只定义样式**，不定义、不修改、不校验步骤名称、步骤数量和步骤顺序。
- 步骤文字、图标和可用状态必须继续由任务配置或现有业务逻辑提供；样式实现不得写死任何步骤文案。
- 标准页中的功能步骤栏与旧页面的阶段步骤栏均使用本节的视觉规则。
- **无有效步骤数据时不显示步骤条**：当任务配置中 `steps` 缺失、为空、解析后为空数组或无可展示步骤时，必须完全不渲染步骤导航容器及其占位间距；不得用默认步骤、固定文案、空胶囊或禁用占位项补齐。当前步骤内容仍按原有业务结构展示。
- **有效步骤必须可操作**：当任务配置返回一个或多个可用步骤时，每个步骤项必须使用语义化 `button`（或等价可访问控件），具备键盘可达和点击事件；点击后必须切换当前步骤及对应内容区，并同步当前激活态。禁止将可用步骤渲染为静态 `span`、`div` 或仅有视觉选中态的伪按钮。
- 如某步骤因业务前置条件暂不可进入，必须由业务逻辑显式标记为禁用并说明原因；不得静默吞掉点击事件或展示“可点击外观”的不可用项。

### 5.2 桌面端尺寸与布局

- 步骤栏采用**流程式导航**：步骤卡、圆形编号节点、步骤间连线与箭头共同构成流程；不得退回为只有文字的胶囊标签。

#### 截图视觉基准（标准步骤条）

标准步骤条必须呈现为一条完整的深色胶囊流程轨道。每一步从左到右依次为两位编号圆点、步骤名称和状态提示，步骤之间保留青蓝色连线与右向箭头。默认和已完成步骤直接置于整条轨道上，**不得**再绘制独立的深色矩形卡片、边框或背景块；只有当前步骤使用完整的蓝色渐变胶囊、带光晕的蓝色编号圆点和“当前步骤”提示。已完成步骤仅将编号圆点和前置连线改为青绿色，编号不得被勾选图标替代。

```text
(01) 步骤名称 / 点击切换 →   →   [ (02) 步骤名称 / 当前步骤 ]   →   (03) 步骤名称 / 点击切换 →
```

实现必须保留 `.step-marker`、`.step-copy`（含 `.step-name` 和 `.step-action`）以及 `.step-connector` 四类元素；不得通过隐藏编号、状态文案或连接箭头把流程步骤条简化为纯文字胶囊导航。

- 为避免与工作台内容区过于局促，桌面端步骤栏可相对内容区向左右各扩展 `12px`：`width: calc(100% + 24px)`、`margin-left/right: -12px`。扩展范围只能位于主工作台内，不得突破主工作台边框。
- 容器内边距 `10px 18px`，圆角 `999px`，边框 `1px solid rgba(0,180,255,.3)`；使用深青蓝背景与轻微内高光，作为所有步骤共用的一条轨道。
- 每个步骤项使用 `flex: 1 1 0` 分配宽度，最小宽度 `150px`、最小高度 `72px`、内边距 `8px 12px`、圆角 `999px`。默认背景和描边均透明；仅当前步骤使用蓝色渐变背景与青色描边。步骤名称不同不得改变统一的最小可用宽度。
- 步骤项左侧为 `56px` 圆形编号节点；节点始终显示两位步骤编号（如 `01`），**已完成步骤不得替换为勾选符号**。已完成态只能通过节点和连线颜色表达。
- 步骤项依次显示“步骤名称”和操作提示；不得显示 `STAGE` 或其他英文阶段眉题。未激活项常驻显示“点击切换 →”，当前项显示“当前步骤”。
- 步骤项之间使用低饱和青蓝 `2px` 连线与右箭头表达先后关系；已完成区段可提高亮度，连线不承担点击区域。
- **桌面端步骤间距（硬性值）：** 单段连接线使用 `flex: 0 1 72px`、`min-width: 40px`、`height: 2px`、`margin: 0 12px`；箭头使用 `8px × 8px` 的右向描边。连线位于整条轨道内，用于区分透明的默认步骤与当前步骤。
- 步骤名称由配置提供，最多显示两行，超出后使用省略号截断；必须保留完整名称的悬停提示（如 `title`）和可访问名称。不得因长名称压缩编号节点、操作提示或相邻步骤卡。
- 当全部步骤的最小宽度无法容纳时，步骤栏允许横向滚动；禁止把步骤卡、文字或连线压缩变形。

### 5.3 交互状态

| 状态 | 文字 | 背景 | 描边与效果 |
| --- | --- | --- | --- |
| 默认/待完成 | `#9ab3d0` | 透明 | 无独立描边；显示“点击切换 →” |
| Hover（可点击） | `#ffffff` | 透明或轻微青蓝半透明 | 仅以胶囊圆角高亮反馈；上移 `2px`、强化“点击切换”颜色 |
| 当前/激活 | `#ffffff` | `#0eaae4 → #0572ac` 蓝色渐变胶囊 | `#36d9ff` 描边；节点使用蓝色渐变与青色光晕，提示为“当前步骤” |
| 已完成（如业务提供） | `#dffbff` | 透明 | 编号节点和已完成连线使用青绿色；编号仍可见，不显示勾选 |
| 禁用（如业务提供） | `#8299aa` | 透明 | `opacity: .45`；无指针手势，且不显示“点击切换” |

- 过渡仅用于 `transform`、颜色、背景、描边和阴影，时长 `0.2s`；不得做闪烁、跳动或自动轮播动画。
- 激活状态只表现当前业务状态，不根据名称、索引或固定第一个项目推断。

### 5.4 响应式规则

- 视口宽度大于 `900px`：保持横向流程布局；内容不足时横向滚动，不能挤压变形。
- 视口宽度小于等于 `900px`：步骤栏取消左右扩展，改为纵向排列，步骤项宽度 `100%`；连线改为节点左侧的竖向短线与向下箭头，容器圆角收敛为 `20px`。
- 任何尺寸下均保留完整的可点击面积；不因名称长度缩小步骤按钮高度至 `66px` 以下。

## 6. 公共按钮规范

### 6.1 小型轮廓按钮

用于“案例文档”“导出实训成果”“下载数据”等辅助操作。

- 高度：`40px`（固定；不得被 Element Plus 默认高度或页面局部规则改写）
- 宽度：由图标、文字和 `18px` 左右内边距自然决定；`min-width: 0`，不设置 `146px`、`164px` 等历史固定最小宽度。
- 左右内边距：`18px`
- 图标与文字间距：`8px`
- 圆角：`999px`（完整胶囊；不得使用 `6px`、`8px` 的矩形圆角）
- 字重：`800`
- 文字：`#e9fbff`
- 边框：`1px solid rgba(99,217,255,.55)`
- 背景：`rgba(17,126,178,.36)`
- Hover：上移 `1px`，边框变为 `rgba(116,235,255,.85)`，背景变为 `rgba(18,146,204,.5)`
- 禁用：`opacity: .45`，无指针手势。

> “案例文档”和“导出实训成果”以产品开发关键因素页的紧凑胶囊样式为唯一实物标准：两者必须等高、同字体、同描边、同圆角、同背景，只允许因文字长度产生自然宽度差异。公共 `TrainingMaterialButton`（`.material-download`）和页面内 `.ghost-action` / `.outline-action` 必须使用同一套公共样式，禁止组件自身或全局 Element Plus 样式覆盖为矩形按钮。

**实现约束：** 页头操作组必须只使用公共 `.workbench-actions` 容器，桌面端固定为任务工作台标题区的右上角（`margin-left: auto`、右对齐、组内间距 `10px`）；其直接子按钮不得在页面局部 CSS 中设置宽度、高度、`margin`、定位或另一套颜色。公共样式以 `height/min-height/max-height: 40px` 为最终覆盖规则；任何例外组件须先补写本规范后才可使用。

### 6.2 常规主按钮

用于“下一步”“保存当前进度”“提交任务”等流程操作。

- 最小高度：`40px`
- 左右内边距：`18px`
- 圆角：`999px`
- 字重：`800`
- 渐变：`#0b84bd → #096491`
- 文字：纯白
- 描边：`rgba(92,224,255,.7)`
- Hover 同小型轮廓按钮的上移规则，不能切换为白底。

### 6.3 底部大操作按钮

用于最终“提交任务 / 清空填写 / 导出实训成果”。

- 最小宽度：`172px`
- 高度：`64px`
- 左右内边距：`28px`
- 圆角：`6px`
- 字号：`24px`
- 字重：`900`
- 文字：`#dff7ff`
- 背景：`rgba(13,64,88,.62)`
- 描边：`#2c83aa`
- 组内间距：桌面端 `52px`，小屏改为 `14px` 且全宽。
- 图标可隐藏，以保证大按钮文字居中、稳定；禁止继续使用 PNG 背景图片按钮。

### 6.4 业务内联操作按钮

旧页面中的“提交、下载、添加组合”等小型业务操作统一使用**小型轮廓按钮**或**常规主按钮**，高度推荐 `34–40px`，圆角 `7–999px`。不得出现橙色、青色贴图按钮与主按钮混用。

### 6.5 步骤操作区（上一步 / 保存当前进度 / 下一步）

用于所有**存在有效配置步骤**的任务。它是步骤导航的必需操作区，不是底部成果操作；不得被业务页面改造成左右分散、贴边或与表格并列的按钮组。

- **渲染条件与固定位置**：只要任务配置中存在有效 `steps`，就必须渲染完整的“上一步 / 保存当前进度 / 下一步”三个按钮；位于当前可见步骤内容卡之后、底部大操作区之前，与步骤内容卡间距 `22px`，与底部大操作区间距 `36px`。没有有效步骤数据时，步骤栏和步骤操作区都不渲染且不保留占位。
- **固定排版**：桌面端三个按钮水平居中，组内间距 `14px`，顺序固定为“上一步 → 保存当前进度 → 下一步”；不得一左一右贴在内容卡两端，不得放入任务工作台头部、表格行内或 AI 侧栏。小于等于 `900px` 时改为纵向全宽排列，间距 `14px`。
- **按钮尺寸与默认态**：三个按钮均为 `min-height: 40px`、内边距 `0 18px`、圆角 `999px`、`14px / 800`。上一步为轮廓态：`rgba(17,126,178,.36)` 背景和 `rgba(99,217,255,.55)` 描边；保存当前进度和下一步为主按钮态：`#0b84bd → #096491` 渐变、白字和 `rgba(92,224,255,.7)` 描边。图标与文字间距 `8px`，上一步/下一步可分别使用左/右箭头，保存使用确认图标。
- **状态与交互**：首步禁用上一步，末步禁用下一步；禁用态 `opacity: .45` 且不可点击。保存当前进度始终可用（保存请求进行中除外），并调用该任务既有保存逻辑。上一步/下一步每次点击必须切换当前步骤内容、顶部步骤栏激活态及持久化的当前步骤值；不允许只改变颜色或只滚动页面。

> 底部大操作区仅承载“提交任务”和“清空填写/重置”等成果操作，继续使用第 6.3 节 `64px` 大按钮；其桌面端固定居中、组内间距 `52px`，位置始终在步骤操作区之后（无有效步骤时紧随最后一个内容卡）。案例文档和导出成果仍只位于工作台头部右侧，禁止在步骤操作区或底部重复出现。

## 7. 表单与选择控件

### 7.1 字段标签与说明

- 字段标签：`14px / 800 / #dff5ff`，与输入框间距 `8px`。
- 长说明文本：`15px / 1.8 / #d7ecff`。
- 字段区块下间距：`16px`。

### 7.2 输入框与文本域

- 背景：`#0f1a24`
- 文字：`#eef5ff`
- 占位符：`#8299aa`
- 描边：`1px solid rgba(45,95,126,.95)`
- 圆角：`14px`
- 单行输入高度：至少 `42px`，内边距 `0 14px`。
- 文本域：至少 `110px`，内边距 `12px 14px`，行高 `1.65`，允许垂直调整。
- Focus：描边 `rgba(92,224,255,.7)`，外发光 `0 0 0 3px rgba(0,174,255,.13)`。

### 7.3 选项按钮与下拉框

- 选项组采用网格排列，间距 `8px`；三选项使用三列，小屏改一列。
- 非选中项：深色底、弱文字 `#b9d6e8`、常规表单描边。
- 选中项：与步骤激活态一致的蓝色渐变、白字、青蓝描边。
- Element Plus 的 `el-select`、`el-input` 必须覆盖为本规范的深色底、浅色文字和焦点描边；下拉浮层同样不得白底。

### 7.4 文件上传组件

用于上传甘特图、数据附件、截图或任务佐证；上传组件只能位于当前步骤内容卡内，并由业务规则决定允许的文件类型与文件数量。

- 原生文件输入框保持隐藏；对外只展示一个可点击的上传按钮和已选文件名，不额外暴露浏览器默认文件控件。
- 上传按钮使用常规主按钮：最小高度 `40px`、左右内边距 `18px`、圆角 `999px`、字重 `800`、文字白色、背景 `linear-gradient(95deg, #0b84bd, #096491)`、边框 `rgba(92,224,255,.7)`。
- 上传中状态保留原有业务文案，但按钮不可重复点击；颜色可降低亮度，不得变成白底或灰色图片按钮。
- 已选文件名使用 `13px / 700 / #9fe8ff`，自然换行且不得挤压上传按钮；在小于等于 `900px` 时与按钮改为纵向全宽排列。
- 上传区与上方说明的间距为 `22px`，与步骤卡边界保持一致；禁止新增与步骤卡不一致的独立白底或高亮大面板。

## 8. 表格规范

- 表格外层允许横向滚动，圆角 `22px`，背景 `rgba(1,14,26,.72)`，描边 `rgba(0,180,255,.22)`。
- 表头：`14px / 900 / #eaffff`，背景 `rgba(8,55,82,.98)`，内容居中。
- 单元格：文字 `#d7f1ff`，背景 `rgba(1,14,26,.48)`，边框 `rgba(77,167,220,.2)`，内边距 `12px`，顶部对齐。
- 可编辑单元格内输入框：最小高度 `38px`，内边距 `0 10px`。
- 重点维度单元格可使用 `#eafaff / 900`；示例说明可使用暖浅黄 `#f5d99d`，但仅限参考信息，不能用于一般正文。
- 表格行 Hover 仅可提高深蓝透明度；禁止变成白色或浅灰色。

## 9. 信息卡、提示与分隔线

- 步骤芯片：`12px / 800`，内边距 `6px 12px`，胶囊圆角，背景 `rgba(0,127,184,.25)`，描边 `rgba(106,226,255,.45)`。
- 普通提示卡：使用深蓝透明底，文字 `#d7ecff`，不得使用米白底配浅蓝字。
- 警示/参考提示可用低饱和暖黄：背景 `rgba(120,92,8,.16)`、文字 `#f6e5a7`、描边 `rgba(250,204,21,.28)`。
- 分隔线：`1px solid rgba(0,180,255,.2)` 或同等低对比蓝线；禁止高亮纯白分割线。

### 9.1 步骤内资料信息块与分析维度卡

适用于行业背景、题干资料、案例事实等需要在当前步骤内逐条阅读的内容，以及 PEST、SWOT 等并列分析维度；它们只能作为“步骤内容卡”中的第三级组件，不能脱离步骤卡另起大面板。

| 组件 | 结构与间距 | 文字 | 背景与边界 | 窄屏规则 |
| --- | --- | --- | --- | --- |
| 资料信息块 | 标题后 `12px` 正文间距；内边距 `16px`；连续资料行间距 `8px` | 标题 `15px / 800 / #dff5ff`；资料正文 `14px / 1.72 / #d7ecff` | 背景 `rgba(1,14,26,.72)`；`1px solid rgba(0,180,255,.22)`；圆角 `22px` | 宽度 `100%`，自然换行；不得设置固定高度或横向溢出。 |
| 分析维度卡组 | 桌面端两列网格，列/行间距 `16px`，与前后字段间距 `20px` | 卡片标题 `15px / 800 / #ffffff`；字段说明与占位符按第 7 节 | 单卡内边距 `16px`；背景 `rgba(1,14,26,.72)`；`1px solid rgba(0,180,255,.22)`；圆角 `20px` | 小于等于 `900px` 改为一列；不保留大于 `16px` 的人为列间距。 |

### 9.2 访谈记录切换与详情弹层

适用于用户访谈、案例角色或多份资料的查看与填写；仅能位于当前步骤内容卡中，不能作为工作台头部或页面级导航。

| 组件 | 结构与间距 | 文字 | 背景与边界 | 交互与窄屏规则 |
| --- | --- | --- | --- | --- |
| 访谈切换项 | 横向排列，间距 `10px`；最小高度 `40px`，内边距 `0 18px` | `14px / 800 / #e9fbff` | 圆角 `999px`；默认背景 `rgba(17,126,178,.36)`、边框 `rgba(99,217,255,.55)` | 当前项使用激活标签渐变与白色文字；小于等于 `900px` 时纵向全宽。 |
| 访谈详情弹层 | 遮罩只覆盖当前浏览视图；内容卡最大宽度 `880px`，内边距 `24px` | 正文 `15px / 1.8 / #d7ecff`，小标题 `16px / 800 / #fff` | 遮罩 `rgba(0,0,0,.52)`；内容卡 `rgba(0,25,42,.96)`、常规描边、圆角 `26px` | 关闭按钮使用小型轮廓按钮；弹层内容可滚动，窄屏宽度为可用宽度。 |

- 分析维度卡内的输入框与文本域必须复用第 7.2 节的背景、描边、焦点态与字体；不允许再使用渐变背景、重阴影或独立配色。
- 资料信息和分析维度的标题、正文均由业务数据提供；规范只约束承载结构与视觉，不固化字段名、资料内容、维度数量或排列顺序。
- 两类容器均为非点击的信息层，默认即为唯一状态；不增加 Hover 高亮、点击态或自动动画。其内部可编辑控件的 Focus、禁用和校验状态仍以第 7 节为准。

### 9.3 用户旅程地图、阶段匹配与参考图

适用于消费场景、服务蓝图等需要把用户行为串成旅程的任务；只能位于当前步骤内容卡内，不能脱离工作台单独成为第二个页面级面板。

| 组件 | 结构与间距 | 文字 | 背景与边框 | 响应式与交互 |
| --- | --- | --- | --- | --- |
| 旅程阶段流 | 使用等分网格展示业务提供的阶段，节点最小高度 `78px`、内边距 `14px 16px`、节点间距 `28px`；连接线仅表达先后关系 | `14px / 800 / #dff8ff`，居中 | 节点使用 `rgba(1,14,26,.72)`、`1px solid rgba(0,180,255,.22)`、圆角 `14px`；连接线使用低饱和青蓝色，不使用贴图 | 阶段名称和数量由业务数据提供；小于等于 `900px` 时改为单列并隐藏连接线 |
| 场景阶段匹配行 | 文字说明与选择控件组成两列：左侧自适应、右侧 `220px`，行距 `10px`；与旅程表之间至少 `18px` | 说明 `14px / 1.7 / #d7ecff` | 选择控件复用第 7.3 节深色选择样式 | 小于等于 `900px` 时改为单列，选择控件全宽；选项文字及正确性判断仍由业务控制 |
| 用户旅程填写表 | 使用第 8 节表格容器；首列可为 `120px` 维度列，编辑格内使用第 7.2 节文本域 | 表头 `14px / 900 / #eaffff`，维度列 `#eafaff / 900` | 外层 `rgba(1,14,26,.72)`、常规青蓝边框；禁止白色表格和独立浅色输入格 | 允许横向滚动；行、列名称和填空数量由业务数据提供 |
| 用户旅程参考图 | 位于填写表之后，顶部间距 `28px`；由阶段、目标、行为、触点、情绪与机会点等信息格组成 | 标题 `15px / 800 / #dff5ff`；信息正文 `12px / 1.55 / #d7ecff` | 参考图容器 `rgba(1,14,26,.72)`、`1px solid rgba(0,180,255,.22)`、圆角 `22px`、内边距 `16px`；内部信息格同色系弱边框 | 情绪曲线和行为节点仅作只读参考，不添加可点击状态；小于等于 `900px` 时信息格改为单列 |

- 参考图中的阶段、节点、情绪点和说明均由业务数据或任务配置提供；规范只定义承载层级与视觉，不固定任何业务文案、阶段数量或排列顺序。
- 情绪曲线的线条、填充和节点可使用低饱和青蓝色，但不得采用高亮紫色、白底图表或与深海蓝工作台冲突的独立配色。

### 9.4 需求转化与优先级评估工作区

适用于将用户反馈转写为功能定义、验收标准并开展优先级评估的实训任务。它仅位于当前步骤内容卡内；原始反馈、示例说明、转化表、打分表和优先级决策均不得脱离步骤卡形成第二个页面级面板。

| 组件 | 结构与间距 | 文字 | 背景、边框与交互 |
| --- | --- | --- | --- |
| 原始反馈双栏 | 桌面端两列网格，列间距 `16px`；每列为独立信息块，内边距 `16px`；小于等于 `900px` 时改为单列 | 小标题 `15px / 800 / #dff5ff`；编号反馈 `14px / 1.72 / #d7ecff`，列表项间距 `8px` | `rgba(1,14,26,.72)` 背景、`1px solid rgba(0,180,255,.22)` 边框、`20px` 圆角；只读信息块不提供伪点击态 |
| 需求转化/评分表 | 使用第 8 节的可横向滚动表格容器；表前说明与表格间距 `12px`，多张表之间间距 `20px` | 表头、单元格沿用第 8 节；表内可编辑文本域沿用第 7.2 节，不因表格而改为浅色底 | 表格外层 `rgba(1,14,26,.72)`、常规青蓝边框、`22px` 圆角；编辑焦点沿用第 7.2 节 |
| 优先级决策字段组 | 每个优先级字段为“标签 + 文本域”的纵向块，字段间距 `16px`；文本域最小高度 `110px` | 标签 `14px / 800 / #dff5ff`；说明 `15px / 1.8 / #d7ecff` | 文本域沿用第 7.2 节；不以 P0/P1/P2/P3 等具体业务名称绑定视觉样式 |

- 反馈内容、示例、表头、优先级名称及数量均由任务业务数据提供；规范只约束承载结构与视觉，不得将其写死为页面样式的一部分。
- 若存在配置步骤，步骤栏必须是可键盘操作的语义按钮，点击后切换当前步骤内容和激活态；若不存在有效配置步骤，隐藏步骤栏且上述业务区按连续内容显示。

### 9.5 同一步骤内的业务分析工具切换

适用于 ABC/帕累托分析、购物篮分析等同一实训内存在多套业务工具的场景。它不是任务配置步骤栏的替代品，只能位于当前步骤内容卡内，用于切换并列的业务工作区。

| 项目 | 规范 |
| --- | --- |
| 层级与位置 | 位于步骤标题与业务工作区之间，距标题区下方 `14px`，距业务工作区 `18px`；不得移至工作台头部、AI 侧栏或底部操作区。 |
| 容器 | `display:flex`，允许换行，间距 `10px`；不另起白底、灰底或无边界的大卡片。 |
| 工具切换按钮 | 必须使用语义化 `button`；最小高度 `40px`、左右内边距 `18px`、圆角 `999px`、`14px / 800`。默认态为小型轮廓按钮，激活态使用 `#0a6b9e → #0a5c86` 渐变、白字与 `rgba(92,224,255,.7)` 描边。 |
| 交互 | 点击、键盘焦点和激活态必须同步切换对应业务工作区；不得只改变按钮颜色。当前工具选择应沿用任务现有保存逻辑或与当前步骤一起持久化。 |
| 业务内操作 | “下载数据 / 提交 / 添加组合”等保留既有业务动作，但必须按第 6.1、6.2、6.4 节收敛为深色轮廓/主按钮，禁止图片按钮。最终的“提交任务 / 清空填写”只保留在工作台底部标准操作区，业务组件内部不得重复渲染任务页脚。 |
| 窄屏 | 按钮可换行；空间不足时每项占满可用宽度，点击面积不低于 `40px`。 |

## 10. AI 侧栏

- 宽度：桌面端 `340px`。
- 与主区保持相同深蓝玻璃卡片体系；标题、建议正文、输入区和评分区分层清晰。
- AI 标题 `h3` 保持白色高对比；说明文本使用 `#d7ecff`；输入区为深色、可聚焦。
- 侧栏不能使用白色输入框、白色空面板或与主区冲突的紫色按钮。

## 11. 禁止项

1. 不使用 `#fff`、`#f5f5f5`、`#fff8ee` 作为实训主内容、表格行或提示卡背景。
2. 不使用背景图片承载普通文字按钮；图片仅用于内容插图或有明确语义的图标。
3. 不使用浅蓝、灰白文字放在白色、米白色或浅灰色容器上。
4. 不将 Element Plus 默认白色表格、输入框、下拉框直接暴露在深色实训页中。
5. 不用不同页面各自定义一套按钮颜色、圆角和高度。
6. 不通过单纯加 `!important` 覆盖所有问题；优先采用共享变量和组件类，必要时再做局部兼容覆盖。

## 12. 页面改造与验收清单

每次改造学生端页面，逐项检查：

- [ ] 主内容和所有嵌套任务组件均无白底、灰白底和旧图片按钮。
- [ ] 标题、正文、弱提示、占位符在各自背景上清晰可读。
- [ ] 页面包含的所有按钮均落入本规范的三类按钮之一。
- [ ] 任务工作台仅有一套“眉题 + 标题”，不存在 `.training-step-area::before` 等重复生成的任务标签；同组辅助操作均为同尺寸的小型轮廓按钮。
- [ ] 表格表头、表体、Hover、编辑输入框、下拉浮层均为深色主题。
- [ ] 输入、文本域、单选、多选和选择框具备统一焦点态。
- [ ] 实训说明、任务卡、步骤导航、底部操作区、AI 侧栏视觉一致。
- [ ] 页面中使用的每个可见组件均能在本规范中找到对应的结构、文字、色值和交互状态；未登记组件已先补充规范后再使用。
- [ ] 宽度小于 `1100px` 与 `900px` 时，不出现重叠、固定宽度溢出或不可点击控件。
- [ ] 不修改任务题干、计算逻辑、接口、保存与提交行为，除非需求明确要求。
- [ ] 修改后至少验证对应 Vue 模块能被本地 Vite 正常编译；可登录时使用学生端实际页面检查关键区域。

## 13. 后续执行约定

### 13.1 组件缺失时必须先补充规范

- 改造页面前，先盘点页面中的可见组件（如说明卡、工作台、步骤栏、表单控件、表格、提示卡、上传区、图表、弹窗和 AI 侧栏）。每个组件必须能映射到本规范中的对应章节。
- 如果目标页面出现的组件在本规范、标准页或已有公共组件规则中找不到对应项，**不得直接临时定样式**；必须先将该组件补充到本规范，再进行页面实现或改造。
- 新增组件条目至少包含：适用场景、层级位置、结构组成、尺寸与间距、字体与色值、背景/边框/圆角、默认与交互状态、窄屏规则，以及是否由配置驱动文本或数据。
- 补充组件规范时应优先复用现有视觉令牌和公共组件；只有确有差异化业务语义时才允许增加新样式，并在文档中说明原因与适用边界。
- 页面验收时，如发现“页面有组件、规范无条目”或“规范有条目、页面未按条目实现”，均视为未完成，需要先补齐规范或完成对齐。

用户说“按标准页修复 `页面地址`”时，执行顺序固定为：

1. 读取本规范和目标页面源码。
2. 对照标准页检查页面框架、卡片、文字、表单、表格、按钮、提示和侧栏。
3. 只改视觉与布局，不改业务逻辑和持久化。
4. 在本地 Vite 中编译目标页面；可登录时实际检查关键视图。
5. 报告已对齐的项目与仍受业务结构限制的差异。