refactor: 优化技能编辑器页面布局 - 三段式设计

- 将两行布局改为三段式布局：技能概览卡片、版本历史卡片、管理操作卡片
- 合并技能概览信息，删除独立的详细信息卡片
- 更新状态标签样式，移除图标，纯文字颜色区分
- 优化技能概览卡片结构：图标、名称行、指标行、标签区、描述
- 分类标签使用蓝色背景突出显示
- 操作按钮重新分组：编辑按钮在概览右上角，上传按钮在版本历史标题旁，删除下架在管理卡片
- 添加完整响应式支持

openspec/specs/skill-overview-card/spec.md

@@ -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** 卡片内容自动调整布局，确保信息清晰可读