From bc4537b3bc6c7410583800293734a2298435f3f7 Mon Sep 17 00:00:00 2001 From: lanyuanxiaoyao Date: Thu, 26 Mar 2026 18:10:08 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E7=BB=9F=E4=B8=80=E4=BA=8C?= =?UTF-8?q?=E7=BA=A7=E9=A1=B5=E9=9D=A2=E8=BF=94=E5=9B=9E=E6=8C=89=E9=92=AE?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 新增 page-back-btn 统一样式类，替换 dev-back-btn 和 console-back-btn - 所有二级页面返回按钮移至页面左上角 - 表单页面补充底部取消按钮 - 新增 page-navigation spec 文档 - 补充工作台 mySkills 和 skillConfig 页面标题配置 --- openspec/specs/page-navigation/spec.md | 65 +++++++++++++++++++ src/constants/pages.js | 2 + src/pages/admin/AddDepartmentPage.jsx | 14 ++-- src/pages/admin/AddModelConfigPage.jsx | 14 ++-- src/pages/admin/AddProjectPage.jsx | 14 ++-- src/pages/admin/AddUserPage.jsx | 14 ++-- src/pages/console/AddMemberPage.jsx | 46 +++++++------ src/pages/console/ConsoleReviewDetailPage.jsx | 7 +- src/pages/console/MemberConfigPage.jsx | 19 +++--- src/pages/console/SkillConfigPage.jsx | 12 ++-- src/pages/console/TaskDetailPage.jsx | 34 ++++++---- src/pages/developer/NewVersionPage.jsx | 7 +- src/pages/developer/SkillEditorPage.jsx | 7 +- src/pages/developer/UpdateSkillInfoPage.jsx | 6 +- src/pages/developer/UploadSkillPage.jsx | 14 ++-- src/pages/developer/UploadVersionPage.jsx | 7 +- src/styles/components/_index.scss | 10 +++ src/styles/pages/_developer.scss | 11 ---- 18 files changed, 213 insertions(+), 90 deletions(-) create mode 100644 openspec/specs/page-navigation/spec.md diff --git a/openspec/specs/page-navigation/spec.md b/openspec/specs/page-navigation/spec.md new file mode 100644 index 0000000..e041319 --- /dev/null +++ b/openspec/specs/page-navigation/spec.md @@ -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** 不位于任何页面级样式文件 diff --git a/src/constants/pages.js b/src/constants/pages.js index fbc2cd4..df214f3 100644 --- a/src/constants/pages.js +++ b/src/constants/pages.js @@ -7,6 +7,8 @@ export const CONSOLE_PAGES = { chat: { title: '智能助手', icon: 'FiMessageSquare' }, skills: { title: '技能市场', icon: 'FaPuzzlePiece' }, skillDetail: { title: '技能详情', icon: null }, + mySkills: { title: '我的技能', icon: 'FiBox' }, + skillConfig: { title: '技能配置', icon: null }, logs: { title: '日志查询', icon: 'FiList' }, scheduledTasks: { title: '定时任务', icon: 'FiClock' }, taskDetail: { title: '任务详情', icon: null }, diff --git a/src/pages/admin/AddDepartmentPage.jsx b/src/pages/admin/AddDepartmentPage.jsx index ec82536..4293dc3 100644 --- a/src/pages/admin/AddDepartmentPage.jsx +++ b/src/pages/admin/AddDepartmentPage.jsx @@ -21,10 +21,15 @@ function AddDepartmentPage({ onBack, editData }) { : null; return ( -
-
-
{isEdit ? '编辑部门' : '新增部门'}
+ <> +
+ ← + 返回部门列表
+
+
+
{isEdit ? '编辑部门' : '新增部门'}
+
@@ -52,7 +57,8 @@ function AddDepartmentPage({ onBack, editData }) {
-
+
+ ); } diff --git a/src/pages/admin/AddModelConfigPage.jsx b/src/pages/admin/AddModelConfigPage.jsx index cf8b2a5..f33077e 100644 --- a/src/pages/admin/AddModelConfigPage.jsx +++ b/src/pages/admin/AddModelConfigPage.jsx @@ -106,10 +106,15 @@ function AddModelConfigPage({ onBack, editData }) { const configTypeList = getConfigTypeList(); return ( -
-
-
{isEdit ? '编辑配置' : '新增配置'}
+ <> +
+ ← + 返回配置列表
+
+
+
{isEdit ? '编辑配置' : '新增配置'}
+
{/* 基础信息 */}
@@ -214,7 +219,8 @@ function AddModelConfigPage({ onBack, editData }) {
-
+
+ ); } diff --git a/src/pages/admin/AddProjectPage.jsx b/src/pages/admin/AddProjectPage.jsx index f314bf6..64507b8 100644 --- a/src/pages/admin/AddProjectPage.jsx +++ b/src/pages/admin/AddProjectPage.jsx @@ -21,10 +21,15 @@ function AddProjectPage({ onBack, editData }) { : null; return ( -
-
-
{isEdit ? '编辑项目' : '新增项目'}
+ <> +
+ ← + 返回项目列表
+
+
+
{isEdit ? '编辑项目' : '新增项目'}
+
@@ -52,7 +57,8 @@ function AddProjectPage({ onBack, editData }) {
-
+
+ ); } diff --git a/src/pages/admin/AddUserPage.jsx b/src/pages/admin/AddUserPage.jsx index 11f0109..66ef137 100644 --- a/src/pages/admin/AddUserPage.jsx +++ b/src/pages/admin/AddUserPage.jsx @@ -23,10 +23,15 @@ function AddUserPage({ onBack, editData }) { : null; return ( -
-
-
{isEdit ? '编辑用户' : '新增用户'}
+ <> +
+ ← + 返回用户列表
+
+
+
{isEdit ? '编辑用户' : '新增用户'}
+
@@ -66,7 +71,8 @@ function AddUserPage({ onBack, editData }) {
-
+
+ ); } diff --git a/src/pages/console/AddMemberPage.jsx b/src/pages/console/AddMemberPage.jsx index 969a6c2..0e578c9 100644 --- a/src/pages/console/AddMemberPage.jsx +++ b/src/pages/console/AddMemberPage.jsx @@ -30,29 +30,35 @@ function AddMemberPage({ onBack }) { }; return ( -
-
-
增加成员
- + <> +
+ ← + 返回成员列表
-
- setSelectedMembers([])} - /> -
- +
+
+
增加成员
+
+
+ setSelectedMembers([])} + /> +
+ + +
-
+ ); } diff --git a/src/pages/console/ConsoleReviewDetailPage.jsx b/src/pages/console/ConsoleReviewDetailPage.jsx index 88ff7ee..624fc7f 100644 --- a/src/pages/console/ConsoleReviewDetailPage.jsx +++ b/src/pages/console/ConsoleReviewDetailPage.jsx @@ -1,5 +1,5 @@ import { useState } from 'react'; -import { FiChevronLeft, FiFile } from 'react-icons/fi'; +import { FiFile } from 'react-icons/fi'; import { pendingVersionReviews, pendingUnlistReviews, skillFiles } from '../../data/skills.js'; import Toast from '../../components/common/Toast.jsx'; @@ -34,8 +34,9 @@ function ConsoleReviewDetailPage({ type, reviewId, onBack }) { return ( <> -
- 返回审核列表 +
+ ← + 返回审核列表
diff --git a/src/pages/console/MemberConfigPage.jsx b/src/pages/console/MemberConfigPage.jsx index 1980bce..5f04b88 100644 --- a/src/pages/console/MemberConfigPage.jsx +++ b/src/pages/console/MemberConfigPage.jsx @@ -1,16 +1,19 @@ function MemberConfigPage({ onBack }) { return ( -
-
-
+ <> +
+ ← + 返回成员列表 +
+
+
成员配置
- +
+
+

成员配置页面内容

-
-

成员配置页面内容

-
-
+ ); } diff --git a/src/pages/console/SkillConfigPage.jsx b/src/pages/console/SkillConfigPage.jsx index d7fdcb0..9b1d303 100644 --- a/src/pages/console/SkillConfigPage.jsx +++ b/src/pages/console/SkillConfigPage.jsx @@ -1,5 +1,5 @@ import { useState, useEffect } from 'react'; -import { FiChevronLeft, FiPlus, FiX, FiUsers, FiStar, FiPackage } from 'react-icons/fi'; +import { FiPlus, FiX, FiUsers, FiStar, FiPackage } from 'react-icons/fi'; import { skills, userSubscriptions } from '../../data/skills.js'; import Toast from '../../components/common/Toast.jsx'; @@ -94,8 +94,9 @@ function SkillConfigPage({ subscriptionId, onBack }) { return ( <> -
- 返回我的技能 +
+ ← + 返回我的技能
{/* 技能基本信息卡片 */} @@ -205,7 +206,10 @@ function SkillConfigPage({ subscriptionId, onBack }) { 暂无配置项，点击右上角"新增配置"添加
)} -
+
+ diff --git a/src/pages/console/TaskDetailPage.jsx b/src/pages/console/TaskDetailPage.jsx index f2b58d7..1dfbcc8 100644 --- a/src/pages/console/TaskDetailPage.jsx +++ b/src/pages/console/TaskDetailPage.jsx @@ -5,24 +5,33 @@ function TaskDetailPage({ taskId, onBack }) { if (!task) { return ( -
-
-
任务详情
+ <> +
+ ← + 返回任务列表
-
-

任务不存在

- +
+
+
任务详情
+
+
+

任务不存在

+
-
+ ); } return ( -
-
-
任务详情
- + <> +
+ ← + 返回任务列表
+
+
+
任务详情
+
@@ -82,7 +91,8 @@ function TaskDetailPage({ taskId, onBack }) {
-
+
+ ); } diff --git a/src/pages/developer/NewVersionPage.jsx b/src/pages/developer/NewVersionPage.jsx index d36f9b2..c272130 100644 --- a/src/pages/developer/NewVersionPage.jsx +++ b/src/pages/developer/NewVersionPage.jsx @@ -1,5 +1,5 @@ import { useState } from 'react'; -import { FiUpload, FiChevronLeft } from 'react-icons/fi'; +import { FiUpload } from 'react-icons/fi'; import Toast from '../../components/common/Toast.jsx'; function NewVersionPage({ skillName, onBack }) { @@ -14,8 +14,9 @@ function NewVersionPage({ skillName, onBack }) { return ( <> -
- 返回技能详情 +
+ ← + 返回技能详情
diff --git a/src/pages/developer/SkillEditorPage.jsx b/src/pages/developer/SkillEditorPage.jsx index e1c544b..c0ce267 100644 --- a/src/pages/developer/SkillEditorPage.jsx +++ b/src/pages/developer/SkillEditorPage.jsx @@ -1,5 +1,5 @@ import { useState } from 'react'; -import { FiChevronLeft, FiUpload, FiUsers, FiPackage, FiStar, FiRotateCcw } from 'react-icons/fi'; +import { FiUpload, FiUsers, FiPackage, FiStar, FiRotateCcw } from 'react-icons/fi'; import { api } from '../../services/api.js'; import Modal from '../../components/common/Modal.jsx'; import Toast from '../../components/common/Toast.jsx'; @@ -50,8 +50,9 @@ function SkillEditorPage({ skillId, onBack, onUploadNewVersion, onUpdateInfo }) return ( <> -
- 返回我的技能 +
+ ← + 返回我的技能
{/* 1. 开发者内部信息概览卡片 */} diff --git a/src/pages/developer/UpdateSkillInfoPage.jsx b/src/pages/developer/UpdateSkillInfoPage.jsx index 7d54c88..cf17f29 100644 --- a/src/pages/developer/UpdateSkillInfoPage.jsx +++ b/src/pages/developer/UpdateSkillInfoPage.jsx @@ -1,4 +1,3 @@ -import { FiChevronLeft } from 'react-icons/fi'; import { useState } from 'react'; import Toast from '../../components/common/Toast.jsx'; @@ -16,8 +15,9 @@ function UpdateSkillInfoPage({ skill, onBack }) { return ( <> -
- 返回技能详情 +
+ ← + 返回技能详情
diff --git a/src/pages/developer/UploadSkillPage.jsx b/src/pages/developer/UploadSkillPage.jsx index dbb27e2..09b5520 100644 --- a/src/pages/developer/UploadSkillPage.jsx +++ b/src/pages/developer/UploadSkillPage.jsx @@ -9,10 +9,15 @@ function UploadSkillPage({ onBack }) { }; return ( -
-
-
创建技能
+ <> +
+ ← + 返回技能管理
+
+
+
创建技能
+
提示：此处填写的信息仅供开发者自己管理使用，不会在技能商店展示。商店展示信息需要在上传版本时填写。 @@ -30,13 +35,14 @@ function UploadSkillPage({ onBack }) {
+
setShowToast(false)} /> -
+ ); } diff --git a/src/pages/developer/UploadVersionPage.jsx b/src/pages/developer/UploadVersionPage.jsx index 28bd707..df212b6 100644 --- a/src/pages/developer/UploadVersionPage.jsx +++ b/src/pages/developer/UploadVersionPage.jsx @@ -1,4 +1,4 @@ -import { FiUpload, FiChevronLeft, FiX } from 'react-icons/fi'; +import { FiUpload, FiX } from 'react-icons/fi'; import { useState } from 'react'; import { api } from '../../services/api.js'; import Toast from '../../components/common/Toast.jsx'; @@ -44,8 +44,9 @@ function UploadVersionPage({ skill, onBack }) { return ( <> -
- 返回技能详情 +
+ ← + 返回技能详情
diff --git a/src/styles/components/_index.scss b/src/styles/components/_index.scss index 92765e6..793b025 100644 --- a/src/styles/components/_index.scss +++ b/src/styles/components/_index.scss @@ -16,3 +16,13 @@ @forward 'password-input'; @forward 'search-bar'; @forward 'stat-card'; + +.page-back-btn { + display: inline-flex; + align-items: center; + gap: 6px; + cursor: pointer; + color: var(--color-primary); + font-weight: 600; + margin-bottom: 16px; +} diff --git a/src/styles/pages/_developer.scss b/src/styles/pages/_developer.scss index 07ea32e..56b3cb9 100644 --- a/src/styles/pages/_developer.scss +++ b/src/styles/pages/_developer.scss @@ -2,17 +2,6 @@ @use '../tokens' as *; -// 开发台返回按钮 -.dev-back-btn { - display: inline-flex; - align-items: center; - gap: 6px; - cursor: pointer; - color: var(--color-primary); - font-weight: 600; - margin-bottom: 16px; -} - // 开发台详情 .dev-detail-header { display: flex;