|
|
---
|
|
|
name: ink-training-theme
|
|
|
description: Apply the ink-minimal visual style to student training pages (Vue 3 + Element Plus + student-training.scss). Use when restyling or redesigning student practical-training pages, buttons, tables, or type scale in this repo. Do not use for admin/management pages or business-logic changes.
|
|
|
---
|
|
|
|
|
|
# 墨黑极简 · 学生实训页设计规范
|
|
|
|
|
|
本技能用于把学生端实训页（`.student-training-shell` 体系）统一为当前已在
|
|
|
`src/views/foundation/new-product-survey.vue` 落地的「墨黑极简」风格：纯白画布、
|
|
|
墨黑主操作、中性灰层次、紧凑排版。该 Vue 文件是整体标准样例；**步骤导航**
|
|
|
以本规范「步骤导航：杂志章节风」一节为准（已在 `product-development-factors.vue`、
|
|
|
`product-development-process.vue` 落地），拿不准时先读这三个文件。
|
|
|
|
|
|
## 边界
|
|
|
|
|
|
- 只动 template 结构与样式；script 业务逻辑（判题/保存/草稿/上传/接口）一律不碰。
|
|
|
- 仅作用于当前页根类，不得影响其他页面；不修改全局 `student-training.scss`。
|
|
|
- 表格类内容区不铺任何底色，对错只靠文字反馈，不靠行背景。
|
|
|
|
|
|
## 实施流程
|
|
|
|
|
|
1. 读目标页，确认根类（如 `.xxx-page.student-training-shell`）和现有 DOM。
|
|
|
2. 在页面 scoped 样式的根类块内定义全部令牌（见下），让所有
|
|
|
`var(--student-*)` 规则自动重着色，不要逐处打补丁。
|
|
|
3. 新增一个非 scoped `<style lang="scss">` 块，选择器全部以页面根类为锚：
|
|
|
- 覆盖祖先 `app-main` 画布背景（scoped 触及不到祖先）；
|
|
|
- 重写步骤导航（全局规则带 `!important`，scoped 无法取胜，见步骤导航一节）；
|
|
|
- 给子组件（AI 侧栏、工具栏等）换肤。
|
|
|
4. 按按钮四级层级、字号梯度、间距规则逐区收紧。
|
|
|
5. 完成后用 GetDiagnostics 校验，并全文搜索蓝色旧值确认无残留。
|
|
|
|
|
|
## 颜色令牌
|
|
|
|
|
|
在页面根类中定义：
|
|
|
|
|
|
```scss
|
|
|
.xxx-page {
|
|
|
/* 主色：墨黑 */
|
|
|
--student-accent: #1f2937;
|
|
|
--student-accent-deep: #111827;
|
|
|
--student-accent-light: #4b5563;
|
|
|
--student-accent-soft: #f3f4f6;
|
|
|
/* 点缀：暖橙，仅极小面积 */
|
|
|
--student-terracotta: #e8953c;
|
|
|
/* 语义色 */
|
|
|
--student-danger: #d9554c;
|
|
|
--student-success: #4a9d6e;
|
|
|
/* 三层次标识：石墨 / 青灰 / 灰紫（仅小色条，不做行底色） */
|
|
|
--student-layer-1: #374151;
|
|
|
--student-layer-2: #43a294;
|
|
|
--student-layer-3: #8b6fc0;
|
|
|
/* 结构色 */
|
|
|
--student-panel-border: #e5e7eb;
|
|
|
--student-card-bg: #ffffff;
|
|
|
--student-panel-bg: #fafbfc;
|
|
|
--student-text: #1f2937;
|
|
|
--student-text-secondary: #6b7280;
|
|
|
}
|
|
|
```
|
|
|
|
|
|
非 scoped 块中的画布与行高：
|
|
|
|
|
|
```scss
|
|
|
#app .studentLayout .app-main:has(.xxx-page) {
|
|
|
background: #ffffff !important; /* 纯白，无渐变 */
|
|
|
}
|
|
|
#app .studentLayout .app-main:has(.xxx-page) .xxx-page {
|
|
|
line-height: 1.55 !important; /* 全局为 1.8，本页收紧 */
|
|
|
}
|
|
|
```
|
|
|
|
|
|
## 字号层级（紧凑）
|
|
|
|
|
|
覆盖全局字号令牌，整体下调一档：
|
|
|
|
|
|
| 令牌 | 值 | 用途 |
|
|
|
|------|----|------|
|
|
|
| --student-fs-display | 17px | 页面主标题（700，行高 1.35） |
|
|
|
| --student-fs-h1 | 15px | 步骤大标题（700） |
|
|
|
| --student-fs-h2 | 14px | 面板/行标题（600） |
|
|
|
| --student-fs-h3 | 13px | 区块小标题 |
|
|
|
| --student-fs-body | 13px | 正文 |
|
|
|
| --student-fs-body-sm | 12px | 表格/次要文字 |
|
|
|
| --student-fs-caption | 11px | 标签/徽章 |
|
|
|
| --student-fs-button / -lg | 13px | 按钮文字 |
|
|
|
| --student-fs-data | 14px | 数字/成绩，配等宽字体 |
|
|
|
|
|
|
标题区三级关系：上方灰色宽字距小标签（11px，`#6b7280`，letter-spacing 0.12em，
|
|
|
无底色胶囊）→ 黑色步骤标题 → 灰色说明文字。禁止再用实底色 "STEP 01" 胶囊。
|
|
|
|
|
|
## 步骤导航：杂志章节风
|
|
|
|
|
|
大号编号做视觉主角，像书籍目录页。无底色、无边框、无凹槽、无连接线。
|
|
|
已落地样例：`product-development-factors.vue`、`product-development-process.vue`。
|
|
|
|
|
|
### 结构
|
|
|
|
|
|
```html
|
|
|
<nav class="step-indicator" aria-label="实训步骤">
|
|
|
<button
|
|
|
v-for="(step, index) in trainingSteps"
|
|
|
:key="`${step}-${index}`"
|
|
|
type="button"
|
|
|
:class="['step-tab', { active: /* 当前 */, complete: /* 已完成 */ }]"
|
|
|
@click="/* 切换步骤 */"
|
|
|
>
|
|
|
<span class="step-bar" aria-hidden="true"></span>
|
|
|
<span class="step-no">{{ String(index + 1).padStart(2, '0') }}</span>
|
|
|
<span class="step-name">{{ step }}</span>
|
|
|
</button>
|
|
|
</nav>
|
|
|
```
|
|
|
|
|
|
编号**常显**，不随完成态切 ✓。注意各页 `currentStep` 基准不同
|
|
|
（factors 为 0-based、process 为 1-based），只改模板/样式时不要动这个逻辑。
|
|
|
|
|
|
### 视觉规格
|
|
|
|
|
|
| 元素 | 规格 |
|
|
|
|------|------|
|
|
|
| `.step-indicator` | flex 水平居中，gap 28px；无 border/底色/阴影；margin `2px 0 20px` |
|
|
|
| `.step-tab` | `flex: 1 1 0`，max-width 160px；纵向排列（引导线→编号→名称），左对齐，gap 8px；无 border/底色 |
|
|
|
| `.step-bar` | 24×3px；默认透明，仅当前步骤 `#1f2937` |
|
|
|
| `.step-no` | **32px**、800 字重、等宽字体、letter-spacing -1px |
|
|
|
| `.step-name` | 12px，左对齐、允许换行 |
|
|
|
|
|
|
三态：
|
|
|
|
|
|
- **未到达**：编号 `#d1d5db`，名称 `#9ca3af`；hover 编号与名称转 `#6b7280`，无底色。
|
|
|
- **已完成**：编号与名称 `#6b7280`（名称 600）；编号右上角缀 7px 绿色小圆点
|
|
|
（`.step-no::after`，top -3px / right -8px，`--student-success`）。
|
|
|
- **当前**：引导线墨黑，编号 `#1f2937`，名称 `#1f2937`、700。
|
|
|
|
|
|
### 覆盖机制（不做这步，页面仍是浅蓝大胶囊）
|
|
|
|
|
|
全局 `student-training.scss` 对 `.student-training-shell .step-indicator` 与
|
|
|
`.step-tab` 全部以 `!important` 锁定浅蓝底（`#f0f6fd`）、全胶囊圆角、固定高度、
|
|
|
`white-space: nowrap`，并在 ≤1100px 用 `!important` 强制纵向堆叠。
|
|
|
**scoped 样式无论怎么写特异性都打不赢**（scoped 属性选择器不增加 id 级特异性）。
|
|
|
|
|
|
正确做法——规则放进页面**非 scoped** 块，选择器带 id 锚点且每条声明 `!important`：
|
|
|
|
|
|
```scss
|
|
|
#app .studentLayout section.app-main:has(.xxx-page) .step-indicator { /* … */ !important; }
|
|
|
#app .studentLayout section.app-main:has(.xxx-page) .step-indicator .step-tab { /* … */ !important; }
|
|
|
```
|
|
|
|
|
|
必须显式重置的全局残留：容器的 `padding / border / border-radius / background /
|
|
|
box-shadow`；tab 的 `min-height / height / padding / border / border-radius /
|
|
|
white-space`（改回 `normal` 以允许步骤名换行）。
|
|
|
|
|
|
窄屏在非 scoped 块自行处理，**不要**接受全局 1100px 纵向规则：
|
|
|
|
|
|
```scss
|
|
|
@media (max-width: 900px) {
|
|
|
#app …:has(.xxx-page) .step-indicator {
|
|
|
justify-content: flex-start;
|
|
|
overflow-x: auto; /* 横向滑动 */
|
|
|
}
|
|
|
#app …:has(.xxx-page) .step-tab { flex: 0 0 112px; max-width: none; }
|
|
|
}
|
|
|
```
|
|
|
|
|
|
## 按钮规范
|
|
|
|
|
|
扁平无渐变，强制 `text-shadow: none`；圆角矩形而非全胶囊。标准页有两个按钮位置，
|
|
|
规格不同，不要混用：
|
|
|
|
|
|
### 四级层级
|
|
|
|
|
|
1. **一级主操作**：墨黑实底 `#1f2937` 白字 + 中性柔影，hover `#111827`。
|
|
|
用于下一步/提交任务/AI 发送/智能评分。
|
|
|
2. **二级描边**：白底 + 描边 + `#1f2937` 字，hover 墨黑描边 + `#f3f4f6` 底。
|
|
|
用于上一步/下载/重新实训/导出/清空。
|
|
|
3. **三级浅灰底**：`#f3f4f6` 底 + `#374151` 字，hover `#e9ecef`。用于保存草稿。
|
|
|
4. **危险文字**：无底色，`#d9554c` 文字链接，hover 深红加下划线。用于删除。
|
|
|
|
|
|
禁用态统一 `opacity: 0.5` + `not-allowed`，`transform: none`、去掉阴影，形状不跳变。
|
|
|
loading 态保持原配色。
|
|
|
|
|
|
### 位置 A：底部步骤导航（40px 标准按钮）
|
|
|
|
|
|
结构（原生 `<button>`，容器 `.step-navigation` 居中 flex，gap 14px）：
|
|
|
|
|
|
```html
|
|
|
<div class="step-navigation">
|
|
|
<button class="btn-nav btn-ghost" @click="prevStep"><el-icon><ArrowLeft /></el-icon>上一步</button>
|
|
|
<button class="btn-nav btn-save" @click="saveCurrentProgress"><el-icon><CircleCheck /></el-icon>保存当前进度</button>
|
|
|
<button class="btn-nav btn-primary" @click="nextStep">下一步<el-icon><ArrowRight /></el-icon></button>
|
|
|
<span class="step-progress">Step 01 / 04</span>
|
|
|
</div>
|
|
|
```
|
|
|
|
|
|
- 三按钮统一 **40px 高、10px 圆角、700 字重、13px 字、gap 8px**；
|
|
|
ghost/primary 横向 padding 18px（primary 可 22px）。
|
|
|
- 次按钮基类（`.outline-action, .btn-nav` 共用）：白底，描边
|
|
|
`1px solid rgba(31, 41, 55, 0.4)`，字色 `var(--student-accent)`。
|
|
|
- hover：`translateY(-1px)` + 描边变实色墨黑 + 底变 `var(--student-accent-soft)`
|
|
|
+ 阴影 `0 3px 10px rgba(31,41,55,.12)`；active 回落 `translateY(0)`。
|
|
|
- primary：墨黑实底 + 阴影 `0 3px 10px rgba(31,41,55,.28)`，hover 加深为
|
|
|
`#111827`、阴影 `0 5px 14px rgba(31,41,55,.32)`。
|
|
|
- save：`#f3f4f6` 底、`#e5e7eb` 描边、`#374151` 字，无重投影；视觉权重
|
|
|
低于 ghost，形成 实底黑 > 描边白 > 浅灰底 的层级。
|
|
|
- `.step-progress`：绝对定位右侧，12px 等宽数字、`#6b7280`、800 字重；
|
|
|
≤1100px 时改为静态独占一行居中。
|
|
|
- ≤900px：导航纵向排列，`.btn-nav` 全部 `width: 100%`。
|
|
|
|
|
|
### 位置 B：顶部任务工具栏（36px 紧凑小按钮）
|
|
|
|
|
|
工具栏是子组件（Element Plus `.el-button`），在页面非 scoped 块中以页面根类为锚
|
|
|
换肤（如 `.xxx-page .task-toolbar-button.el-button`），容器 gap 8px：
|
|
|
|
|
|
- 次按钮（下载案例资料/重新实训/导出实训成果）：**36px 高、8px 圆角、600 字重、
|
|
|
13px 字**，白底 + `#d1d5db` 描边 + `#374151` 字；hover 描边和字变 `#1f2937`、
|
|
|
底 `#f9fafb`、阴影 `0 2px 6px rgba(17,24,39,.1)`。图标 14px 且 `color: inherit`。
|
|
|
- 提交按钮（`.task-toolbar-button--submit`）：墨黑实底白字 +
|
|
|
`0 2px 8px rgba(17,24,39,.22)`，hover `#111827` + 阴影加深。
|
|
|
- loading 态强制保持白底灰描边，不随 Element Plus 默认变蓝。
|
|
|
- 无资料时的 plain 态：字色 `#9ca3af`，hover 只到 `#6b7280` + `#f9fafb`。
|
|
|
- 步骤标题行内的小号导出按钮可再缩到 32px 高、12px 字。
|
|
|
|
|
|
## 表格规则
|
|
|
|
|
|
- 表头、单元格、外容器一律不设 background（默认透明白），包括 hover、选中、判题后。
|
|
|
- 表头仅用 12–13px、800–900 字重，无渐变底。
|
|
|
- 只保留 `#e5e7eb` 浅灰边框与行间分隔线。
|
|
|
- 序号用 22px 浅灰圆角方块（`#f3f4f6`）+ 等宽数字。
|
|
|
- 判题结果：单元格内文字反馈（绿/红）+ 底部汇总横幅（8–10px 圆角、8% 同色底）。
|
|
|
- 三层次概念仅靠维度名前 3–4px 小色条标识。
|
|
|
|
|
|
## 间距（紧凑）
|
|
|
|
|
|
- 主列 gap 10px；卡片内 padding 12px；字段组 padding 12px。
|
|
|
- 步骤标题下 10px、说明下 14px、字段块间 12px、表格上 14px。
|
|
|
- 行高：页面 1.55，标题 1.35，说明 1.6，表格次要文字 1.55。
|
|
|
|
|
|
## 子组件换肤要点
|
|
|
|
|
|
- AI 侧栏面板、气泡、输入框、发送按钮全部中性灰白；其内部 Element Plus
|
|
|
主色按钮通过覆盖组件内 CSS 变量或 `.el-button--primary` 改墨黑。
|
|
|
- 工具栏 `TrainingTaskToolbar` / `TrainingMaterialButton` 按「按钮规范 · 位置 B」
|
|
|
换肤；提交按钮保留墨黑实底作为主操作。
|
|
|
- Element Plus 单选：选中圆点 `#1f2937` 填充白勾，覆盖默认蓝；带边框单选项
|
|
|
选中墨黑描边黑字。下拉选中值用深色 + `-webkit-text-fill-color` 防透明。
|