refactor: 统一二级页面返回按钮样式

- 新增 page-back-btn 统一样式类,替换 dev-back-btn 和 console-back-btn
- 所有二级页面返回按钮移至页面左上角
- 表单页面补充底部取消按钮
- 新增 page-navigation spec 文档
- 补充工作台 mySkills 和 skillConfig 页面标题配置
This commit is contained in:
2026-03-26 18:10:08 +08:00
parent 76d613c4fe
commit bc4537b3bc
18 changed files with 213 additions and 90 deletions

View File

@@ -0,0 +1,65 @@
# Capability: 页面导航返回按钮
提供统一的二级页面返回按钮样式规范,确保用户界面一致性。
### Requirement: 二级页面返回按钮样式统一
所有二级页面必须使用统一的 `page-back-btn` 样式类名作为返回按钮。
#### Scenario: 返回按钮位于页面左上角
- **WHEN** 用户访问任意二级页面
- **THEN** 返回按钮显示在页面内容区左上角
- **AND** 返回按钮使用 `page-back-btn` 类名
#### Scenario: 返回按钮样式一致性
- **WHEN** 用户查看返回按钮
- **THEN** 按钮显示为蓝色主题色文字
- **AND** 按钮带有左箭头图标
- **AND** 文字为粗体
- **AND** 与上级页面名称关联(如"返回技能市场"
### Requirement: 表单页面按钮组合完整
表单类二级页面必须同时具有左上角返回按钮和底部取消按钮。
#### Scenario: 表单页面包含返回和取消按钮
- **WHEN** 用户访问表单类二级页面(如新增、编辑页面)
- **THEN** 页面左上角显示返回按钮
- **AND** 页面底部显示"取消"和"确定/保存"按钮组合
#### Scenario: 点击返回按钮返回上级
- **WHEN** 用户点击左上角返回按钮
- **THEN** 页面返回至上级页面
- **AND** 不触发任何保存操作
#### Scenario: 点击取消按钮返回上级
- **WHEN** 用户点击底部取消按钮
- **THEN** 页面返回至上级页面
- **AND** 不触发任何保存操作
### Requirement: 详情页面仅保留返回按钮
只读详情类二级页面仅需左上角返回按钮,无需底部取消按钮。
#### Scenario: 详情页返回按钮
- **WHEN** 用户访问详情类二级页面(如任务详情、审核详情)
- **THEN** 页面左上角显示返回按钮
- **AND** 页面底部不显示取消按钮
### Requirement: 废弃旧样式类名
`dev-back-btn``console-back-btn` 样式类名不再使用,全部替换为 `page-back-btn`
#### Scenario: 样式类名替换
- **WHEN** 代码中使用返回按钮
- **THEN** 必须使用 `page-back-btn` 类名
- **AND** 不再使用 `dev-back-btn``console-back-btn`
### Requirement: 样式定义位置
`page-back-btn` 样式定义在组件样式层,而非页面样式层。
#### Scenario: 样式文件位置
- **WHEN** 开发者查找返回按钮样式定义
- **THEN** 样式定义位于 `src/styles/components/_index.scss`
- **AND** 不位于任何页面级样式文件