refactor: 优化技能编辑器页面布局 - 三段式设计
- 将两行布局改为三段式布局：技能概览卡片、版本历史卡片、管理操作卡片 - 合并技能概览信息，删除独立的详细信息卡片 - 更新状态标签样式，移除图标，纯文字颜色区分 - 优化技能概览卡片结构：图标、名称行、指标行、标签区、描述 - 分类标签使用蓝色背景突出显示 - 操作按钮重新分组：编辑按钮在概览右上角，上传按钮在版本历史标题旁，删除下架在管理卡片 - 添加完整响应式支持
This commit is contained in:
86
README.md
86
README.md
@@ -813,57 +813,55 @@ pendingUnlistReviews = [{
|
||||
|
||||
#### 技能详情页（SkillEditorPage）
|
||||
|
||||
**优化后的页面结构（两行布局）：**
|
||||
**优化后的页面结构（三段式布局）：**
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────┐
|
||||
│ 技能编辑页面优化 │
|
||||
├─────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ ┌───────────────────────────────────────────────────┐ │
|
||||
│ │ 技能概览卡片 (两行结构) │ │
|
||||
│ ├───────────────────────────────────────────────────┤ │
|
||||
│ │ [图标] ┌─────────────────────────────────────┐ │ │
|
||||
│ │ │ 第一行：技能名称 │ │ │
|
||||
│ │ │ 第二行：👥 156 📦 v1.2.0 ⭐ 4.7 │ │ │
|
||||
│ │ └─────────────────────────────────────┘ │ │
|
||||
│ └───────────────────────────────────────────────────┘ │
|
||||
│ ┌─────────────────────────────────────────────────────┐ │
|
||||
│ │ 技能概览卡片 │ │
|
||||
│ ├─────────────────────────────────────────────────────┤ │
|
||||
│ │ ┌────┐ 技能名称 [状态] [编辑基本信息] │ │
|
||||
│ │ │图标│ ─────────────────────────────────────────── │ │
|
||||
│ │ │80px│ 👤 1,234 ⭐ 4.8 📦 v1.2.0 │ │
|
||||
│ │ │x80 │ [分类] [标签1] [标签2] [标签3] │ │
|
||||
│ │ └────┘ 技能描述... │ │
|
||||
│ └─────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ ┌───────────────────────────────────────────────────┐ │
|
||||
│ │ 详细信息卡片 (普通卡片) │ │
|
||||
│ ├───────────────────────────────────────────────────┤ │
|
||||
│ │ 状态：已上架 │ │
|
||||
│ │ 分类：信息查询 │ │
|
||||
│ │ 标签：天气 查询 生活 │ │
|
||||
│ │ 技能描述：根据城市名称查询当前天气和未来预报... │ │
|
||||
│ │ 版本说明：新增支持未来7天预报 │ │
|
||||
│ └───────────────────────────────────────────────────┘ │
|
||||
│ ┌─────────────────────────────────────────────────────┐ │
|
||||
│ │ 版本历史卡片 │ │
|
||||
│ ├─────────────────────────────────────────────────────┤ │
|
||||
│ │ 版本历史 [上传新版本] │ │
|
||||
│ │ ┌───────────────────────────────────────────────┐ │ │
|
||||
│ │ │ 版本号 │ 状态 │ 说明 │ 时间 │ 操作 │ │ │
|
||||
│ │ │ v1.3.0 │ 通过 │ ... │ ... │ [下载] │ │ │
|
||||
│ │ │ v1.2.0 │ 拒绝 │ ... │ ... │ [下载] │ │ │
|
||||
│ │ └───────────────────────────────────────────────┘ │ │
|
||||
│ └─────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ ┌───────────────────────────────────────────────────┐ │
|
||||
│ │ 操作按钮区 │ │
|
||||
│ ├───────────────────────────────────────────────────┤ │
|
||||
│ │ [更新基本信息] [下架技能] [删除技能] │ │
|
||||
│ └───────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ ┌───────────────────────────────────────────────────┐ │
|
||||
│ │ 技能包管理区 (保持不变) │ │
|
||||
│ ├───────────────────────────────────────────────────┤ │
|
||||
│ │ [上传新版本] 按钮 │ │
|
||||
│ │ 版本历史表格 │ │
|
||||
│ └───────────────────────────────────────────────────┘ │
|
||||
│ ┌─────────────────────────────────────────────────────┐ │
|
||||
│ │ 管理操作卡片 │ │
|
||||
│ ├─────────────────────────────────────────────────────┤ │
|
||||
│ │ 管理 │ │
|
||||
│ │ [下架技能] [删除技能] │ │
|
||||
│ └─────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**关键改进：**
|
||||
1. **两行布局设计**：左侧技能图标，右侧两行信息结构
|
||||
2. **图标化指标**：👥 订阅数、📦 当前版本、⭐ 评分，使用图标库图标
|
||||
3. **信息分层**：
|
||||
- 第一行：技能名称
|
||||
- 第二行：关键指标（带图标）
|
||||
4. **详细信息卡片**：包含状态、分类、标签、技能描述和版本说明
|
||||
5. **优化视觉层次**：四层结构：技能概览 → 详细信息 → 操作按钮 → 版本管理
|
||||
6. **简化交互**：详细信息卡片为普通卡片，不可折叠
|
||||
1. **三段式布局**：头部概览、版本历史、管理操作三个独立卡片
|
||||
2. **图标简化**：移除渐变背景，直接显示图标或首字母
|
||||
3. **信息整合**：
|
||||
- 第一行：技能名称、状态标签、编辑按钮
|
||||
- 第二行：指标行（图标+数值，无文字说明）
|
||||
- 第三行：标签区（分类标签在前，蓝色背景区分）
|
||||
- 第四行：技能描述
|
||||
4. **操作按钮分组**：编辑操作在右上角，危险操作在底部管理区
|
||||
5. **上传按钮单一入口**：只在版本历史卡片标题旁显示
|
||||
6. **状态标签纯文字**：移除图标，通过颜色区分状态
|
||||
|
||||
**版本历史表格：**
|
||||
|
||||
@@ -873,11 +871,11 @@ pendingUnlistReviews = [{
|
||||
| v1.2.0 | 优化性能... | 审核拒绝 | 2026-03-08 | [下载] 拒绝理由: 测试用例不完整 |
|
||||
| v1.1.0 | 新增支持... | 审核中 | 2026-02-20 | [撤回审核] [下载] |
|
||||
|
||||
**技能操作按钮：**
|
||||
- 更新基本信息：始终可用
|
||||
- 上传新版本：有审核中版本时禁用，提示"存在审核中的版本，请先撤回后再上传新版本"
|
||||
- 下架技能：技能状态为已上架且无审核中版本时可用
|
||||
- 删除技能：技能状态为开发中或已下架时可用，已上架时禁用并提示"已上架的技能需要先下架才能删除"
|
||||
**技能操作规则：**
|
||||
- 编辑基本信息：始终可用，位置在概览卡片右上角
|
||||
- 上传新版本：有审核中版本时禁用，位置在版本历史卡片标题旁
|
||||
- 下架技能：技能状态为已上架且无审核中版本时可用，位置在管理卡片
|
||||
- 删除技能：技能状态为开发中或已下架时可用，已上架时禁用，位置在管理卡片
|
||||
|
||||
#### 我的技能列表页（MySkillsPage）
|
||||
|
||||
@@ -956,4 +954,4 @@ const versionStatusMap = {
|
||||
4. **Modal 确认**：删除和下架操作需要二次确认，使用 Modal 组件展示确认对话框
|
||||
5. **Toast 提示**：操作完成后显示 Toast 提示，展示操作结果（成功/失败）
|
||||
|
||||
*最后更新：2026-03-20*
|
||||
*最后更新：2026-03-21*
|
||||
|
||||
91
openspec/specs/skill-detail-page-layout/spec.md
Normal file
91
openspec/specs/skill-detail-page-layout/spec.md
Normal file
@@ -0,0 +1,91 @@
|
||||
## Purpose
|
||||
技能详情页面布局规范定义了技能开发台详情页的三段式布局结构，确保信息层级清晰，用户能够快速定位基本信息和版本历史。
|
||||
|
||||
## ADDED Requirements
|
||||
|
||||
### Requirement: 三段式页面布局
|
||||
技能详情页面 SHALL 采用三段式卡片布局结构，依次展示头部概览、版本历史、管理操作。
|
||||
|
||||
#### Scenario: 页面结构展示
|
||||
- **WHEN** 用户打开技能详情页面
|
||||
- **THEN** 页面从上到下依次显示：头部概览卡片、版本历史卡片、管理操作卡片
|
||||
|
||||
### Requirement: 返回按钮
|
||||
技能详情页面 SHALL 在页面顶部显示返回按钮，允许用户返回上一级页面。
|
||||
|
||||
#### Scenario: 返回按钮显示
|
||||
- **WHEN** 用户查看技能详情页面
|
||||
- **THEN** 页面顶部显示返回按钮，点击后返回"我的技能"页面
|
||||
|
||||
### Requirement: 头部概览卡片
|
||||
技能详情页面 SHALL 在页面顶部显示头部概览卡片，整合展示技能的核心信息。
|
||||
|
||||
#### Scenario: 概览卡片信息展示
|
||||
- **WHEN** 用户查看技能详情页面
|
||||
- **THEN** 头部概览卡片包含：技能图标（80x80，无背景）、技能名称、状态标签、指标行、标签区、技能描述
|
||||
|
||||
#### Scenario: 概览卡片第一行布局
|
||||
- **WHEN** 用户查看头部概览卡片
|
||||
- **THEN** 第一行显示：技能名称、状态标签、右上角"编辑基本信息"按钮
|
||||
|
||||
#### Scenario: 概览卡片图标样式
|
||||
- **WHEN** 用户查看头部概览卡片
|
||||
- **THEN** 技能图标为 80x80 像素，无渐变背景，直接显示图标或首字母
|
||||
|
||||
### Requirement: 指标行布局
|
||||
头部概览卡片 SHALL 在名称下方显示指标行，展示关键数据。
|
||||
|
||||
#### Scenario: 指标行内容
|
||||
- **WHEN** 用户查看头部概览卡片
|
||||
- **THEN** 指标行依次显示：订阅数（图标+数值）、评分（图标+数值）、当前版本号（图标+版本号）
|
||||
|
||||
#### Scenario: 指标行样式
|
||||
- **WHEN** 用户查看头部概览卡片
|
||||
- **THEN** 指标行与名称之间有分隔线，指标项之间用空格分隔
|
||||
|
||||
### Requirement: 标签区布局
|
||||
头部概览卡片 SHALL 在指标行下方显示标签区。
|
||||
|
||||
#### Scenario: 标签区内容
|
||||
- **WHEN** 用户查看头部概览卡片
|
||||
- **THEN** 标签区第一个位置显示分类标签（蓝色背景），后面跟随技能的所有标签
|
||||
|
||||
#### Scenario: 分类标签样式
|
||||
- **WHEN** 用户查看标签区
|
||||
- **THEN** 分类标签使用蓝色背景（#EFF6FF）和蓝色文字（#3B82F6），圆角样式
|
||||
|
||||
### Requirement: 技能描述
|
||||
头部概览卡片 SHALL 在标签区下方显示技能描述。
|
||||
|
||||
#### Scenario: 技能描述展示
|
||||
- **WHEN** 用户查看头部概览卡片
|
||||
- **THEN** 标签区下方显示技能描述文字
|
||||
|
||||
### Requirement: 版本历史卡片
|
||||
技能详情页面 SHALL 在头部概览卡片下方显示版本历史卡片。
|
||||
|
||||
#### Scenario: 版本历史卡片展示
|
||||
- **WHEN** 用户查看技能详情页面
|
||||
- **THEN** 版本历史卡片包含标题"版本历史"和版本历史表格
|
||||
|
||||
#### Scenario: 版本历史操作按钮
|
||||
- **WHEN** 用户查看版本历史卡片
|
||||
- **THEN** 卡片标题栏右侧显示"上传新版本"按钮
|
||||
|
||||
### Requirement: 管理操作卡片
|
||||
技能详情页面 SHALL 在版本历史卡片下方显示管理操作卡片。
|
||||
|
||||
#### Scenario: 管理操作卡片展示
|
||||
- **WHEN** 用户查看技能详情页面
|
||||
- **THEN** 管理操作卡片包含标题"管理"和操作按钮区
|
||||
|
||||
#### Scenario: 管理操作按钮展示
|
||||
- **WHEN** 用户查看管理操作卡片
|
||||
- **THEN** 卡片内直接展示"下架技能"和"删除技能"按钮
|
||||
|
||||
### Requirement: 卡片间距规范
|
||||
技能详情页面的卡片之间 SHALL 保持一致的间距。
|
||||
|
||||
#### Scenario: 卡片间距
|
||||
- **WHEN** 用户查看技能详情页面
|
||||
- **THEN** 每个卡片之间有 16px 的垂直间距
|
||||
@@ -1,35 +0,0 @@
|
||||
## Purpose
|
||||
技能信息折叠面板用于组织技能详细信息，解决信息重复显示问题，提供更好的信息组织和用户体验。
|
||||
|
||||
## ADDED Requirements
|
||||
|
||||
### Requirement: 技能信息折叠面板
|
||||
技能编辑页面 SHALL 提供可折叠的信息面板，用于组织技能详细信息，解决信息重复显示问题。
|
||||
|
||||
#### Scenario: 折叠面板默认状态
|
||||
- **WHEN** 用户打开技能编辑页面
|
||||
- **THEN** 基本信息折叠面板默认展开，显示技能分类、标签、当前版本、版本说明和技能描述
|
||||
|
||||
#### Scenario: 折叠面板收起/展开交互
|
||||
- **WHEN** 用户点击折叠面板的"收起"按钮
|
||||
- **THEN** 面板内容隐藏，按钮文字变为"展开"
|
||||
|
||||
#### Scenario: 折叠面板展开交互
|
||||
- **WHEN** 用户点击折叠面板的"展开"按钮
|
||||
- **THEN** 面板内容显示，按钮文字变为"收起"
|
||||
|
||||
#### Scenario: 信息网格布局
|
||||
- **WHEN** 用户查看展开的折叠面板
|
||||
- **THEN** 信息以网格布局展示，包含分类、标签、当前版本、版本说明和技能描述字段
|
||||
|
||||
#### Scenario: 标签显示格式
|
||||
- **WHEN** 用户查看折叠面板中的标签字段
|
||||
- **THEN** 标签以圆角标签样式显示，多个标签之间用空格分隔
|
||||
|
||||
#### Scenario: 版本说明显示
|
||||
- **WHEN** 用户查看折叠面板中的版本说明字段
|
||||
- **THEN** 显示当前版本的说明文字
|
||||
|
||||
#### Scenario: 技能描述显示
|
||||
- **WHEN** 用户查看折叠面板中的技能描述字段
|
||||
- **THEN** 显示完整的技能描述文字，支持多行显示
|
||||
@@ -8,28 +8,48 @@
|
||||
|
||||
#### Scenario: 卡片布局结构
|
||||
- **WHEN** 用户打开技能编辑页面
|
||||
- **THEN** 页面顶部显示技能概览卡片，包含技能图标、名称、状态标签和关键指标
|
||||
- **THEN** 页面顶部显示技能概览卡片，包含技能图标、名称、状态标签、指标行、标签区（含分类）、技能描述和右上角操作按钮
|
||||
|
||||
#### Scenario: 技能图标显示
|
||||
- **WHEN** 用户查看技能概览卡片
|
||||
- **THEN** 卡片左侧显示技能图标，图标尺寸为80x80像素，圆角16像素
|
||||
- **THEN** 卡片左侧显示技能图标，图标尺寸为80x80像素，无背景，直接显示图标或首字母
|
||||
|
||||
#### Scenario: 技能名称显示
|
||||
#### Scenario: 技能名称和状态显示
|
||||
- **WHEN** 用户查看技能概览卡片
|
||||
- **THEN** 卡片右侧顶部显示技能名称，字体大小为24px，字体加粗
|
||||
- **THEN** 卡片右侧第一行显示技能名称、状态标签，名称右侧显示"编辑基本信息"按钮
|
||||
|
||||
#### Scenario: 状态标签显示
|
||||
#### Scenario: 状态标签样式
|
||||
- **WHEN** 用户查看技能概览卡片
|
||||
- **THEN** 技能名称下方显示状态标签，标签样式与现有状态标签系统保持一致
|
||||
- **THEN** 状态标签为纯文字样式，不使用图标，通过颜色区分状态类型
|
||||
|
||||
#### Scenario: 关键指标显示
|
||||
#### Scenario: 指标行显示
|
||||
- **WHEN** 用户查看技能概览卡片
|
||||
- **THEN** 状态标签右侧显示关键指标，包括订阅数和评分，指标之间用分隔符分隔
|
||||
- **THEN** 名称下方显示指标行，包含订阅数（图标+数值）、评分（图标+数值）、当前版本号（图标+版本号）
|
||||
|
||||
#### Scenario: 指标行样式
|
||||
- **WHEN** 用户查看技能概览卡片
|
||||
- **THEN** 指标行与名称之间有分隔线，指标项不显示文字说明（如"订阅"、"评分"），图标本身已足够表达含义
|
||||
|
||||
#### Scenario: 标签区显示
|
||||
- **WHEN** 用户查看技能概览卡片
|
||||
- **THEN** 指标行下方显示标签区，第一个位置显示分类标签（蓝色背景），后面跟随技能的所有标签
|
||||
|
||||
#### Scenario: 分类标签样式
|
||||
- **WHEN** 用户查看标签区
|
||||
- **THEN** 分类标签使用蓝色背景（#EFF6FF）和蓝色文字（#3B82F6），圆角胶囊样式，与其他标签区分
|
||||
|
||||
#### Scenario: 技能描述显示
|
||||
- **WHEN** 用户查看技能概览卡片
|
||||
- **THEN** 标签区下方显示技能描述
|
||||
|
||||
#### Scenario: 操作按钮显示
|
||||
- **WHEN** 用户查看技能概览卡片
|
||||
- **THEN** 卡片右上角只显示"编辑基本信息"操作按钮
|
||||
|
||||
#### Scenario: 卡片视觉样式
|
||||
- **WHEN** 用户查看技能概览卡片
|
||||
- **THEN** 卡片具有白色背景、圆角12像素、轻微阴影效果，与页面其他卡片样式一致
|
||||
- **THEN** 卡片具有白色背景、圆角12像素、轻微阴影效果
|
||||
|
||||
#### Scenario: 响应式布局
|
||||
- **WHEN** 用户在较小屏幕设备上查看技能概览卡片
|
||||
- **THEN** 卡片内容自动调整布局，确保信息清晰可读
|
||||
- **THEN** 卡片内容自动调整布局，确保信息清晰可读
|
||||
|
||||
@@ -53,99 +53,66 @@ function SkillEditorPage({ skillId, onBack, onUploadNewVersion, onUpdateInfo })
|
||||
<FiChevronLeft /> 返回我的技能
|
||||
</div>
|
||||
|
||||
{/* 1. 技能概览卡片（两行结构） */}
|
||||
{/* 1. 技能概览卡片（三段式布局第一段） */}
|
||||
<div className="skill-overview-card">
|
||||
<div className="skill-icon">{skill.icon || skill.name.charAt(0)}</div>
|
||||
<div className="skill-header">
|
||||
{/* 第一行：技能名称 */}
|
||||
<h2 className="skill-name">{skill.name}</h2>
|
||||
|
||||
{/* 第二行：关键指标（带图标） */}
|
||||
{/* 第一行：技能名称 + 状态 + 右上角操作按钮 */}
|
||||
<div className="skill-name-row">
|
||||
<h2 className="skill-name">{skill.name}</h2>
|
||||
<span className={`status ${skillStatusMap[skill.status]?.className || 'status-stopped'}`}>
|
||||
{skillStatusMap[skill.status]?.text || skill.status}
|
||||
</span>
|
||||
<div className="skill-actions">
|
||||
<button className="btn btn-primary btn-sm" onClick={() => onUpdateInfo && onUpdateInfo(skill.id)}>编辑基本信息</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 第二行：指标行（带分隔线） */}
|
||||
<div className="skill-metrics-row">
|
||||
<div className="metric-item">
|
||||
<FiUsers className="metric-icon" />
|
||||
<span className="metric-value">{skill.installs || 0}</span>
|
||||
</div>
|
||||
<div className="metric-item">
|
||||
<FiPackage className="metric-icon" />
|
||||
<span className="metric-value">{skill.version || 'v1.0.0'}</span>
|
||||
</div>
|
||||
<div className="metric-item">
|
||||
<FiStar className="metric-icon" />
|
||||
<span className="metric-value">{skill.rating || 0}</span>
|
||||
</div>
|
||||
<div className="metric-item">
|
||||
<FiPackage className="metric-icon" />
|
||||
<span className="metric-value">{skill.version || 'v1.0.0'}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 第三行：标签区 */}
|
||||
<div className="skill-tags-row">
|
||||
<span className="skill-category-tag">{skill.category}</span>
|
||||
{skill.tags.map(tag => (
|
||||
<span key={tag} className="dev-detail-tag">{tag}</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 第四行：技能描述 */}
|
||||
<div className="skill-desc-row">
|
||||
<p className="skill-desc-text">{skill.desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 2. 详细信息卡片（普通卡片，不可折叠） */}
|
||||
<div className="info-card">
|
||||
{/* 2. 版本历史卡片（三段式布局第二段） */}
|
||||
<div className="card" style={{ marginTop: '16px' }}>
|
||||
<div className="card-header">
|
||||
<h3>详细信息</h3>
|
||||
<div className="card-title">版本历史</div>
|
||||
<button
|
||||
className="btn btn-primary btn-sm"
|
||||
onClick={() => onUploadNewVersion(skill.name)}
|
||||
disabled={skill.hasPendingReview}
|
||||
title={skill.hasPendingReview ? '存在审核中的版本，请先撤回后再上传新版本' : ''}
|
||||
>
|
||||
<FiUpload /> 上传新版本
|
||||
</button>
|
||||
</div>
|
||||
<div className="card-body">
|
||||
<div className="info-grid">
|
||||
<div className="info-item">
|
||||
<label>状态</label>
|
||||
<span className={`status ${skillStatusMap[skill.status]?.className || 'status-stopped'}`}>
|
||||
{skillStatusMap[skill.status]?.text || skill.status}
|
||||
</span>
|
||||
</div>
|
||||
<div className="info-item">
|
||||
<label>分类</label>
|
||||
<span>{skill.category}</span>
|
||||
</div>
|
||||
<div className="info-item full-width">
|
||||
<label>标签</label>
|
||||
<div className="tags">
|
||||
{skill.tags.map(tag => (
|
||||
<span key={tag} className="dev-detail-tag">{tag}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="info-item full-width">
|
||||
<label>技能描述</label>
|
||||
<p>{skill.desc}</p>
|
||||
</div>
|
||||
<div className="info-item full-width">
|
||||
<label>版本说明</label>
|
||||
<span>{currentVersion?.desc || '暂无版本说明'}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 3. 操作按钮区 */}
|
||||
<div className="action-buttons">
|
||||
<button className="btn btn-primary" onClick={() => onUpdateInfo && onUpdateInfo(skill.id)}>更新基本信息</button>
|
||||
{skill.status === 'published' && (
|
||||
<button className="btn btn-danger" onClick={handleTogglePublish}>下架技能</button>
|
||||
)}
|
||||
<button
|
||||
className="btn btn-danger"
|
||||
onClick={() => setDeleteSkillModal(true)}
|
||||
disabled={skill.status === 'published'}
|
||||
title={skill.status === 'published' ? '已上架的技能需要先下架才能删除' : ''}
|
||||
>
|
||||
删除技能
|
||||
</button>
|
||||
</div>
|
||||
<div className="card" style={{ marginTop: '24px' }}>
|
||||
<div className="card-header">
|
||||
<div className="card-title">技能包管理</div>
|
||||
</div>
|
||||
<div className="card-body">
|
||||
<div style={{ display: 'flex', gap: '12px', marginBottom: '24px' }}>
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
onClick={() => onUploadNewVersion(skill.name)}
|
||||
disabled={skill.hasPendingReview}
|
||||
title={skill.hasPendingReview ? '存在审核中的版本，请先撤回后再上传新版本' : ''}
|
||||
>
|
||||
<FiUpload /> 上传新版本
|
||||
</button>
|
||||
</div>
|
||||
<h4 style={{ marginBottom: '12px' }}>版本历史</h4>
|
||||
<div className="table-wrapper" style={{ margin: 0, padding: 0 }}>
|
||||
<table className="table" style={{ tableLayout: 'fixed' }}>
|
||||
<colgroup>
|
||||
@@ -200,6 +167,29 @@ function SkillEditorPage({ skillId, onBack, onUploadNewVersion, onUpdateInfo })
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 3. 管理操作卡片（三段式布局第三段） */}
|
||||
<div className="card manage-card" style={{ marginTop: '16px' }}>
|
||||
<div className="card-header">
|
||||
<div className="card-title">管理</div>
|
||||
</div>
|
||||
<div className="card-body">
|
||||
<div className="manage-actions">
|
||||
{skill.status === 'published' && (
|
||||
<button className="btn btn-danger" onClick={handleTogglePublish}>下架技能</button>
|
||||
)}
|
||||
<button
|
||||
className="btn btn-danger"
|
||||
onClick={() => setDeleteSkillModal(true)}
|
||||
disabled={skill.status === 'published'}
|
||||
title={skill.status === 'published' ? '已上架的技能需要先下架才能删除' : ''}
|
||||
>
|
||||
删除技能
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Modal
|
||||
visible={deleteSkillModal}
|
||||
title="确认删除"
|
||||
|
||||
@@ -474,71 +474,37 @@
|
||||
|
||||
/* ============ 状态标签组件 ============ */
|
||||
.status {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
display: inline-block;
|
||||
padding: 4px 10px;
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.status::before {
|
||||
content: '';
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
/* 移除 gap 和 ::before 伪元素图标 */
|
||||
}
|
||||
|
||||
.status-running {
|
||||
background: var(--color-success-light);
|
||||
color: var(--color-success);
|
||||
}
|
||||
|
||||
.status-running::before {
|
||||
background: var(--color-success);
|
||||
background: #D1FAE5;
|
||||
color: #065F46;
|
||||
}
|
||||
|
||||
.status-stopped {
|
||||
background: var(--color-bg-3);
|
||||
color: var(--color-text-3);
|
||||
}
|
||||
|
||||
.status-stopped::before {
|
||||
background: var(--color-text-4);
|
||||
background: #F1F5F9;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.status-starting {
|
||||
background: var(--color-warning-light);
|
||||
color: var(--color-warning);
|
||||
}
|
||||
|
||||
.status-starting::before {
|
||||
background: var(--color-warning);
|
||||
animation: pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; transform: scale(1); }
|
||||
50% { opacity: 0.5; transform: scale(0.8); }
|
||||
background: #DBEAFE;
|
||||
color: #1E40AF;
|
||||
}
|
||||
|
||||
.status-error {
|
||||
background: var(--color-danger-light);
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
.status-error::before {
|
||||
background: var(--color-danger);
|
||||
background: #FEE2E2;
|
||||
color: #991B1B;
|
||||
}
|
||||
|
||||
.status-warning {
|
||||
background: var(--color-warning-light);
|
||||
color: var(--color-warning);
|
||||
}
|
||||
|
||||
.status-warning::before {
|
||||
background: var(--color-warning);
|
||||
background: #FEF3C7;
|
||||
color: #92400E;
|
||||
}
|
||||
|
||||
/* 成员角色标签 */
|
||||
|
||||
@@ -135,7 +135,7 @@
|
||||
|
||||
/* ============ 技能编辑页面优化样式 ============ */
|
||||
|
||||
/* 技能概览卡片（两行结构） */
|
||||
/* 技能概览卡片（三段式布局第一段） */
|
||||
.skill-overview-card {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
@@ -144,51 +144,68 @@
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
margin-bottom: 16px;
|
||||
|
||||
align-items: center;
|
||||
|
||||
align-items: flex-start;
|
||||
|
||||
.skill-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 16px;
|
||||
background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
font-size: 36px;
|
||||
font-size: 48px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
|
||||
.skill-header {
|
||||
flex: 1;
|
||||
|
||||
/* 第一行：技能名称 */
|
||||
.skill-name {
|
||||
margin: 0 0 12px 0;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #1E293B;
|
||||
min-width: 0;
|
||||
display: block !important; /* 覆盖全局样式，确保子元素垂直排列 */
|
||||
|
||||
/* 第一行：技能名称 + 状态 + 作者 + 操作按钮 */
|
||||
.skill-name-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px 12px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.skill-name {
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #1E293B;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.skill-actions {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 第二行：关键指标 */
|
||||
|
||||
/* 第二行：指标行（带分隔线） */
|
||||
.skill-metrics-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
|
||||
gap: 20px;
|
||||
padding: 12px 0;
|
||||
border-top: 1px solid #E2E8F0;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.metric-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
|
||||
|
||||
.metric-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
opacity: 0.7;
|
||||
color: #64748B;
|
||||
}
|
||||
|
||||
|
||||
.metric-value {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
@@ -196,78 +213,46 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 详细信息卡片（普通卡片） */
|
||||
.info-card {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
margin-bottom: 16px;
|
||||
overflow: hidden;
|
||||
|
||||
.card-header {
|
||||
padding: 16px 24px;
|
||||
border-bottom: 1px solid #E2E8F0;
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #1E293B;
|
||||
/* 第三行：标签区 */
|
||||
.skill-tags-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.skill-category-tag {
|
||||
padding: 4px 12px;
|
||||
background: #EFF6FF;
|
||||
color: #3B82F6;
|
||||
border-radius: 999px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 24px;
|
||||
|
||||
.info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 20px;
|
||||
|
||||
.info-item {
|
||||
&.full-width {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #64748B;
|
||||
margin-bottom: 6px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
span, p {
|
||||
font-size: 14px;
|
||||
color: #1E293B;
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
/* 第四行：技能描述 */
|
||||
.skill-desc-row {
|
||||
.skill-desc-text {
|
||||
font-size: 14px;
|
||||
color: #475569;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 操作按钮区 */
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
margin-bottom: 24px;
|
||||
/* 管理操作卡片（三段式布局第三段） */
|
||||
.manage-card {
|
||||
.card-body {
|
||||
.manage-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@@ -276,30 +261,108 @@
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
|
||||
|
||||
.skill-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
font-size: 28px;
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
|
||||
.skill-header {
|
||||
.skill-name {
|
||||
font-size: 20px;
|
||||
width: 100%;
|
||||
|
||||
.skill-name-row {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
|
||||
.skill-name {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.skill-actions {
|
||||
margin-left: 0;
|
||||
margin-top: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.skill-actions .btn {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.skill-metrics-row {
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.skill-tags-row {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info-grid {
|
||||
grid-template-columns: 1fr !important;
|
||||
|
||||
.manage-card {
|
||||
.manage-actions {
|
||||
flex-direction: column;
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.skill-overview-card {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
|
||||
.skill-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.skill-header {
|
||||
width: 100%;
|
||||
|
||||
.skill-name-row {
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
|
||||
.skill-name {
|
||||
font-size: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.skill-actions {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.skill-metrics-row {
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.skill-tags-row {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.manage-card {
|
||||
.manage-actions {
|
||||
flex-direction: column;
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user