feat: 优化技能编辑页UI布局 - 新增概览卡片、信息卡片重构
重构技能编辑页面为四层结构:技能概览卡片(两行布局)→ 详细信息卡片 → 操作按钮区 → 版本管理 主要改进: - 技能概览卡片:左侧80x80图标,右侧两行结构(技能名称 + 关键指标) - 关键指标图标化:👥 订阅数、📦 当前版本、⭐ 评分 - 详细信息卡片:网格布局展示状态、分类、标签、技能描述、版本说明 - 操作按钮区:独立区域,视觉层次更清晰 - 响应式设计:移动端自适应布局
This commit is contained in:
52
README.md
52
README.md
@@ -813,6 +813,58 @@ pendingUnlistReviews = [{
|
||||
|
||||
#### 技能详情页(SkillEditorPage)
|
||||
|
||||
**优化后的页面结构(两行布局):**
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────┐
|
||||
│ 技能编辑页面优化 │
|
||||
├─────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ ┌───────────────────────────────────────────────────┐ │
|
||||
│ │ 技能概览卡片 (两行结构) │ │
|
||||
│ ├───────────────────────────────────────────────────┤ │
|
||||
│ │ [图标] ┌─────────────────────────────────────┐ │ │
|
||||
│ │ │ 第一行:技能名称 │ │ │
|
||||
│ │ │ 第二行:👥 156 📦 v1.2.0 ⭐ 4.7 │ │ │
|
||||
│ │ └─────────────────────────────────────┘ │ │
|
||||
│ └───────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ ┌───────────────────────────────────────────────────┐ │
|
||||
│ │ 详细信息卡片 (普通卡片) │ │
|
||||
│ ├───────────────────────────────────────────────────┤ │
|
||||
│ │ 状态:已上架 │ │
|
||||
│ │ 分类:信息查询 │ │
|
||||
│ │ 标签:天气 查询 生活 │ │
|
||||
│ │ 技能描述:根据城市名称查询当前天气和未来预报... │ │
|
||||
│ │ 版本说明:新增支持未来7天预报 │ │
|
||||
│ └───────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ ┌───────────────────────────────────────────────────┐ │
|
||||
│ │ 操作按钮区 │ │
|
||||
│ ├───────────────────────────────────────────────────┤ │
|
||||
│ │ [更新基本信息] [下架技能] [删除技能] │ │
|
||||
│ └───────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ ┌───────────────────────────────────────────────────┐ │
|
||||
│ │ 技能包管理区 (保持不变) │ │
|
||||
│ ├───────────────────────────────────────────────────┤ │
|
||||
│ │ [上传新版本] 按钮 │ │
|
||||
│ │ 版本历史表格 │ │
|
||||
│ └───────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**关键改进:**
|
||||
1. **两行布局设计**:左侧技能图标,右侧两行信息结构
|
||||
2. **图标化指标**:👥 订阅数、📦 当前版本、⭐ 评分,使用图标库图标
|
||||
3. **信息分层**:
|
||||
- 第一行:技能名称
|
||||
- 第二行:关键指标(带图标)
|
||||
4. **详细信息卡片**:包含状态、分类、标签、技能描述和版本说明
|
||||
5. **优化视觉层次**:四层结构:技能概览 → 详细信息 → 操作按钮 → 版本管理
|
||||
6. **简化交互**:详细信息卡片为普通卡片,不可折叠
|
||||
|
||||
**版本历史表格:**
|
||||
|
||||
| 版本号 | 版本说明 | 状态 | 更新时间 | 操作 |
|
||||
|
||||
Reference in New Issue
Block a user