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

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

openspec/specs/skill-detail-page-layout/spec.md

@@ -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 的垂直间距

openspec/specs/skill-info-collapsible-panel/spec.md

@@ -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** 显示完整的技能描述文字，支持多行显示

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