refactor: 重构我的技能页面表格布局
- 移除版本、安装量、评分三列 - 将技能名称和描述分为两列显示 - 移除技能名称加粗样式 - 修复状态显示逻辑,只显示技能整体状态,不再额外显示审核中徽章 - 同步下架按钮禁用逻辑,详情页也添加 hasPendingReview 检查 - 移除技能描述字体特殊样式
This commit is contained in:
62
openspec/specs/developer-my-skills-table/spec.md
Normal file
62
openspec/specs/developer-my-skills-table/spec.md
Normal file
@@ -0,0 +1,62 @@
|
||||
# 开发者我的技能列表 - 规格说明
|
||||
|
||||
## 功能描述
|
||||
|
||||
展示开发者自己创建的技能列表,支持筛选和操作,提供清晰的表格布局。
|
||||
|
||||
## 表格列定义
|
||||
|
||||
表格必须包含以下列:
|
||||
|
||||
| 列名 | 内容 | 显示要求 |
|
||||
|------|------|----------|
|
||||
| 技能名称 | `skill.name` | 普通字重,不加粗 |
|
||||
| 技能描述 | `skill.desc` | 正常显示 |
|
||||
| 分类 | `skill.category` | 正常显示 |
|
||||
| 状态 | `skill.status` | 使用 `skillStatusMap` 映射显示中文状态和对应样式,**只显示技能整体状态** |
|
||||
| 操作 | 编辑/下架/删除按钮 | 保持按钮组布局 |
|
||||
|
||||
**移除以下列:**
|
||||
- 版本 (`version`)
|
||||
- 安装量 (`installs`)
|
||||
- 评分 (`rating`)
|
||||
|
||||
## 状态显示规则
|
||||
|
||||
1. **只显示技能的整体状态**,使用 `skillStatusMap` 映射:
|
||||
- `dev` → 开发中
|
||||
- `published` → 已上架
|
||||
- `unlisting` → 下架审核中
|
||||
- `unlisted` → 已下架
|
||||
|
||||
2. **不再额外显示** `skill.hasPendingReview` 的"审核中"徽章。版本审核状态在技能详情页展示即可。
|
||||
|
||||
## 操作按钮规则
|
||||
|
||||
### 下架按钮
|
||||
- 只在 `skill.status === 'published'` 时显示
|
||||
- 当 `skill.hasPendingReview === true` 时禁用,提示"存在审核中的版本,请先撤回后再下架"
|
||||
- 点击触发出下架操作
|
||||
|
||||
### 删除按钮
|
||||
- 当 `skill.status === 'published'` 时禁用,提示"已上架的技能需要先下架才能删除"
|
||||
- 点击触发确认删除弹框
|
||||
- 确认后执行删除操作
|
||||
|
||||
### 编辑按钮
|
||||
- 始终显示
|
||||
- 点击跳转到技能详情编辑页
|
||||
|
||||
以上规则必须与**技能详情页**的按钮逻辑保持完全一致。
|
||||
|
||||
## 交互行为
|
||||
|
||||
- 点击表格行任意位置跳转到技能详情编辑页(保持不变)
|
||||
- 筛选功能保持不变,支持关键词、分类、状态筛选
|
||||
- 分页保持不变
|
||||
|
||||
## 样式要求
|
||||
|
||||
- 保持现有表格样式体系
|
||||
- 不引入新的样式类名
|
||||
- 技能名称使用正常字重(移除 `fontWeight: 600`)
|
||||
@@ -110,33 +110,23 @@ function MySkillsPage({ onSkillClick }) {
|
||||
<thead>
|
||||
<tr>
|
||||
<th>技能名称</th>
|
||||
<th>技能描述</th>
|
||||
<th>分类</th>
|
||||
<th>版本</th>
|
||||
<th>状态</th>
|
||||
<th>安装量</th>
|
||||
<th>评分</th>
|
||||
<th style={{ width: '200px' }}>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{filteredList.map(skill => (
|
||||
<tr key={skill.id} onClick={() => onSkillClick(skill.id)} style={{ cursor: 'pointer' }}>
|
||||
<td>
|
||||
<div style={{ fontWeight: 600 }}>{skill.name}</div>
|
||||
<div style={{ fontSize: '12px', color: '#94A3B8' }}>{skill.desc}</div>
|
||||
</td>
|
||||
<td>{skill.category}</td>
|
||||
<td>{skill.version}</td>
|
||||
<td>
|
||||
<span className={`status ${skillStatusMap[skill.status]?.className || 'status-stopped'}`}>
|
||||
{skillStatusMap[skill.status]?.text || skill.status}
|
||||
</span>
|
||||
{skill.hasPendingReview && (
|
||||
<span className="status status-warning" style={{ marginLeft: '6px' }}>审核中</span>
|
||||
)}
|
||||
</td>
|
||||
<td>{skill.installs}</td>
|
||||
<td>{skill.rating || '-'}</td>
|
||||
{filteredList.map(skill => (
|
||||
<tr key={skill.id} onClick={() => onSkillClick(skill.id)} style={{ cursor: 'pointer' }}>
|
||||
<td>{skill.name}</td>
|
||||
<td>{skill.desc}</td>
|
||||
<td>{skill.category}</td>
|
||||
<td>
|
||||
<span className={`status ${skillStatusMap[skill.status]?.className || 'status-stopped'}`}>
|
||||
{skillStatusMap[skill.status]?.text || skill.status}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div style={{ display: 'flex', gap: '8px' }}>
|
||||
<button className="text-btn text-btn-primary" onClick={e => { e.stopPropagation(); onSkillClick(skill.id); }}>
|
||||
|
||||
@@ -174,16 +174,23 @@ function SkillEditorPage({ skillId, onBack, onUploadNewVersion, onUpdateInfo })
|
||||
<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' ? '已上架的技能需要先下架才能删除' : ''}
|
||||
>
|
||||
<div className="manage-actions">
|
||||
{skill.status === 'published' && (
|
||||
<button
|
||||
className="btn btn-danger"
|
||||
onClick={handleTogglePublish}
|
||||
disabled={skill.hasPendingReview}
|
||||
title={skill.hasPendingReview ? '存在审核中的版本,请先撤回后再下架' : ''}
|
||||
>
|
||||
下架技能
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
className="btn btn-danger"
|
||||
onClick={() => setDeleteSkillModal(true)}
|
||||
disabled={skill.status === 'published'}
|
||||
title={skill.status === 'published' ? '已上架的技能需要先下架才能删除' : ''}
|
||||
>
|
||||
删除技能
|
||||
</button>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user