feat: 优化技能编辑页UI布局 - 新增概览卡片、信息卡片重构

重构技能编辑页面为四层结构:技能概览卡片(两行布局)→ 详细信息卡片 → 操作按钮区 → 版本管理

主要改进:
- 技能概览卡片:左侧80x80图标,右侧两行结构(技能名称 + 关键指标)
- 关键指标图标化:👥 订阅数、📦 当前版本、 评分
- 详细信息卡片:网格布局展示状态、分类、标签、技能描述、版本说明
- 操作按钮区:独立区域,视觉层次更清晰
- 响应式设计:移动端自适应布局
This commit is contained in:
2026-03-21 13:11:04 +08:00
parent fb9616a10f
commit 07b6d99054
7 changed files with 373 additions and 53 deletions

View File

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