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

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

src/pages/developer/SkillEditorPage.jsx

@@ -53,99 +53,66 @@ function SkillEditorPage({ skillId, onBack, onUploadNewVersion, onUpdateInfo })
                 <FiChevronLeft /> 返回我的技能
             </div>
             
-            {/* 1. 技能概览卡片（两行结构） */}
+            {/* 1. 技能概览卡片（三段式布局第一段） */}
             <div className="skill-overview-card">
                 <div className="skill-icon">{skill.icon || skill.name.charAt(0)}</div>
                 <div className="skill-header">
-                    {/* 第一行：技能名称 */}
-                    <h2 className="skill-name">{skill.name}</h2>
-                    
-                    {/* 第二行：关键指标（带图标） */}
+                    {/* 第一行：技能名称 + 状态 + 右上角操作按钮 */}
+                    <div className="skill-name-row">
+                        <h2 className="skill-name">{skill.name}</h2>
+                        <span className={`status ${skillStatusMap[skill.status]?.className || 'status-stopped'}`}>
+                            {skillStatusMap[skill.status]?.text || skill.status}
+                        </span>
+                        <div className="skill-actions">
+                            <button className="btn btn-primary btn-sm" onClick={() => onUpdateInfo && onUpdateInfo(skill.id)}>编辑基本信息</button>
+                        </div>
+                    </div>
+
+                    {/* 第二行：指标行（带分隔线） */}
                     <div className="skill-metrics-row">
                         <div className="metric-item">
                             <FiUsers className="metric-icon" />
                             <span className="metric-value">{skill.installs || 0}</span>
                         </div>
-                        <div className="metric-item">
-                            <FiPackage className="metric-icon" />
-                            <span className="metric-value">{skill.version || 'v1.0.0'}</span>
-                        </div>
                         <div className="metric-item">
                             <FiStar className="metric-icon" />
                             <span className="metric-value">{skill.rating || 0}</span>
                         </div>
+                        <div className="metric-item">
+                            <FiPackage className="metric-icon" />
+                            <span className="metric-value">{skill.version || 'v1.0.0'}</span>
+                        </div>
+                    </div>
+
+                    {/* 第三行：标签区 */}
+                    <div className="skill-tags-row">
+                        <span className="skill-category-tag">{skill.category}</span>
+                        {skill.tags.map(tag => (
+                            <span key={tag} className="dev-detail-tag">{tag}</span>
+                        ))}
+                    </div>
+
+                    {/* 第四行：技能描述 */}
+                    <div className="skill-desc-row">
+                        <p className="skill-desc-text">{skill.desc}</p>
                     </div>
                 </div>
             </div>
 
-            {/* 2. 详细信息卡片（普通卡片，不可折叠） */}
-            <div className="info-card">
+            {/* 2. 版本历史卡片（三段式布局第二段） */}
+            <div className="card" style={{ marginTop: '16px' }}>
                 <div className="card-header">
-                    <h3>详细信息</h3>
+                    <div className="card-title">版本历史</div>
+                    <button
+                        className="btn btn-primary btn-sm"
+                        onClick={() => onUploadNewVersion(skill.name)}
+                        disabled={skill.hasPendingReview}
+                        title={skill.hasPendingReview ? '存在审核中的版本，请先撤回后再上传新版本' : ''}
+                    >
+                        <FiUpload /> 上传新版本
+                    </button>
                 </div>
                 <div className="card-body">
-                    <div className="info-grid">
-                        <div className="info-item">
-                            <label>状态</label>
-                            <span className={`status ${skillStatusMap[skill.status]?.className || 'status-stopped'}`}>
-                                {skillStatusMap[skill.status]?.text || skill.status}
-                            </span>
-                        </div>
-                        <div className="info-item">
-                            <label>分类</label>
-                            <span>{skill.category}</span>
-                        </div>
-                        <div className="info-item full-width">
-                            <label>标签</label>
-                            <div className="tags">
-                                {skill.tags.map(tag => (
-                                    <span key={tag} className="dev-detail-tag">{tag}</span>
-                                ))}
-                            </div>
-                        </div>
-                        <div className="info-item full-width">
-                            <label>技能描述</label>
-                            <p>{skill.desc}</p>
-                        </div>
-                        <div className="info-item full-width">
-                            <label>版本说明</label>
-                            <span>{currentVersion?.desc || '暂无版本说明'}</span>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            {/* 3. 操作按钮区 */}
-            <div className="action-buttons">
-                <button className="btn btn-primary" onClick={() => onUpdateInfo && onUpdateInfo(skill.id)}>更新基本信息</button>
-                {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' ? '已上架的技能需要先下架才能删除' : ''}
-                >
-                    删除技能
-                </button>
-            </div>
-            <div className="card" style={{ marginTop: '24px' }}>
-                <div className="card-header">
-                    <div className="card-title">技能包管理</div>
-                </div>
-                <div className="card-body">
-                    <div style={{ display: 'flex', gap: '12px', marginBottom: '24px' }}>
-                        <button
-                            className="btn btn-primary"
-                            onClick={() => onUploadNewVersion(skill.name)}
-                            disabled={skill.hasPendingReview}
-                            title={skill.hasPendingReview ? '存在审核中的版本，请先撤回后再上传新版本' : ''}
-                        >
-                            <FiUpload /> 上传新版本
-                        </button>
-                    </div>
-                    <h4 style={{ marginBottom: '12px' }}>版本历史</h4>
                     <div className="table-wrapper" style={{ margin: 0, padding: 0 }}>
                         <table className="table" style={{ tableLayout: 'fixed' }}>
                             <colgroup>
@@ -200,6 +167,29 @@ function SkillEditorPage({ skillId, onBack, onUploadNewVersion, onUpdateInfo })
                     </div>
                 </div>
             </div>
+
+            {/* 3. 管理操作卡片（三段式布局第三段） */}
+            <div className="card manage-card" style={{ marginTop: '16px' }}>
+                <div className="card-header">
+                    <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' ? '已上架的技能需要先下架才能删除' : ''}
+                        >
+                            删除技能
+                        </button>
+                    </div>
+                </div>
+            </div>
+
             <Modal
                 visible={deleteSkillModal}
                 title="确认删除"

src/styles/global.scss

@@ -474,71 +474,37 @@
 
 /* ============ 状态标签组件 ============ */
 .status {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
+    display: inline-block;
     padding: 4px 10px;
-    border-radius: 999px;
-    font-size: 12px;
-    font-weight: 600;
-}
-
-.status::before {
-    content: '';
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
+    border-radius: 6px;
+    font-size: 13px;
+    font-weight: 500;
+    /* 移除 gap 和 ::before 伪元素图标 */
 }
 
 .status-running {
-    background: var(--color-success-light);
-    color: var(--color-success);
-}
-
-.status-running::before {
-    background: var(--color-success);
+    background: #D1FAE5;
+    color: #065F46;
 }
 
 .status-stopped {
-    background: var(--color-bg-3);
-    color: var(--color-text-3);
-}
-
-.status-stopped::before {
-    background: var(--color-text-4);
+    background: #F1F5F9;
+    color: #475569;
 }
 
 .status-starting {
-    background: var(--color-warning-light);
-    color: var(--color-warning);
-}
-
-.status-starting::before {
-    background: var(--color-warning);
-    animation: pulse 1.5s ease-in-out infinite;
-}
-
-@keyframes pulse {
-    0%, 100% { opacity: 1; transform: scale(1); }
-    50% { opacity: 0.5; transform: scale(0.8); }
+    background: #DBEAFE;
+    color: #1E40AF;
 }
 
 .status-error {
-    background: var(--color-danger-light);
-    color: var(--color-danger);
-}
-
-.status-error::before {
-    background: var(--color-danger);
+    background: #FEE2E2;
+    color: #991B1B;
 }
 
 .status-warning {
-    background: var(--color-warning-light);
-    color: var(--color-warning);
-}
-
-.status-warning::before {
-    background: var(--color-warning);
+    background: #FEF3C7;
+    color: #92400E;
 }
 
 /* 成员角色标签 */

src/styles/pages/_developer.scss

@@ -135,7 +135,7 @@
 
 /* ============ 技能编辑页面优化样式 ============ */
 
-/* 技能概览卡片（两行结构） */
+/* 技能概览卡片（三段式布局第一段） */
 .skill-overview-card {
   display: flex;
   gap: 20px;
@@ -144,51 +144,68 @@
   border-radius: 12px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   margin-bottom: 16px;
-  
-  align-items: center;
-  
+  align-items: flex-start;
+
   .skill-icon {
     width: 80px;
     height: 80px;
-    border-radius: 16px;
-    background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
     display: flex;
     align-items: center;
     justify-content: center;
-    color: #fff;
-    font-size: 36px;
+    font-size: 48px;
     flex-shrink: 0;
   }
-  
+
   .skill-header {
     flex: 1;
-    
-    /* 第一行：技能名称 */
-    .skill-name {
-      margin: 0 0 12px 0;
-      font-size: 24px;
-      font-weight: 700;
-      color: #1E293B;
+    min-width: 0;
+    display: block !important; /* 覆盖全局样式，确保子元素垂直排列 */
+
+    /* 第一行：技能名称 + 状态 + 作者 + 操作按钮 */
+    .skill-name-row {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 8px 12px;
+      margin-bottom: 16px;
+
+      .skill-name {
+        margin: 0;
+        font-size: 24px;
+        font-weight: 700;
+        color: #1E293B;
+        flex-shrink: 0;
+      }
+
+      .skill-actions {
+        margin-left: auto;
+        display: flex;
+        gap: 8px;
+        flex-shrink: 0;
+      }
     }
-    
-    /* 第二行：关键指标 */
+
+    /* 第二行：指标行（带分隔线） */
     .skill-metrics-row {
       display: flex;
       align-items: center;
-      gap: 24px;
-      
+      gap: 20px;
+      padding: 12px 0;
+      border-top: 1px solid #E2E8F0;
+      margin-bottom: 16px;
+
       .metric-item {
         display: flex;
         align-items: center;
         gap: 6px;
-        
+
         .metric-icon {
           width: 16px;
           height: 16px;
           opacity: 0.7;
           color: #64748B;
         }
-        
+
         .metric-value {
           font-size: 14px;
           font-weight: 500;
@@ -196,78 +213,46 @@
         }
       }
     }
-  }
-}
 
-/* 详细信息卡片（普通卡片） */
-.info-card {
-  background: #fff;
-  border-radius: 12px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-  margin-bottom: 16px;
-  overflow: hidden;
-  
-  .card-header {
-    padding: 16px 24px;
-    border-bottom: 1px solid #E2E8F0;
-    
-    h3 {
-      margin: 0;
-      font-size: 16px;
-      font-weight: 600;
-      color: #1E293B;
+    /* 第三行：标签区 */
+    .skill-tags-row {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      flex-wrap: wrap;
+      margin-bottom: 16px;
+
+      .skill-category-tag {
+        padding: 4px 12px;
+        background: #EFF6FF;
+        color: #3B82F6;
+        border-radius: 999px;
+        font-size: 13px;
+        font-weight: 500;
+      }
     }
-  }
-  
-  .card-body {
-    padding: 24px;
-    
-    .info-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-      gap: 20px;
-      
-      .info-item {
-        &.full-width {
-          grid-column: 1 / -1;
-        }
-        
-        label {
-          display: block;
-          font-size: 13px;
-          font-weight: 500;
-          color: #64748B;
-          margin-bottom: 6px;
-          text-transform: uppercase;
-          letter-spacing: 0.5px;
-        }
-        
-        span, p {
-          font-size: 14px;
-          color: #1E293B;
-          line-height: 1.5;
-          margin: 0;
-        }
-        
-        .tags {
-          display: flex;
-          flex-wrap: wrap;
-          gap: 6px;
-        }
+
+    /* 第四行：技能描述 */
+    .skill-desc-row {
+      .skill-desc-text {
+        font-size: 14px;
+        color: #475569;
+        line-height: 1.6;
+        margin: 0;
       }
     }
   }
 }
 
-/* 操作按钮区 */
-.action-buttons {
-  display: flex;
-  gap: 12px;
-  padding: 16px;
-  background: #fff;
-  border-radius: 12px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-  margin-bottom: 24px;
+/* 管理操作卡片（三段式布局第三段） */
+.manage-card {
+  .card-body {
+    .manage-actions {
+      display: flex;
+      gap: 12px;
+      justify-content: flex-start;
+    }
+  }
 }
 
 /* 响应式设计 */
@@ -276,30 +261,108 @@
     flex-direction: column;
     align-items: flex-start;
     gap: 16px;
-    
+
     .skill-icon {
       width: 60px;
       height: 60px;
-      font-size: 28px;
+      font-size: 36px;
     }
-    
+
     .skill-header {
-      .skill-name {
-        font-size: 20px;
+      width: 100%;
+
+      .skill-name-row {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 12px;
+
+        .skill-name {
+          font-size: 20px;
+        }
+
+        .skill-actions {
+          margin-left: 0;
+          margin-top: 8px;
+          width: 100%;
+        }
+
+        .skill-actions .btn {
+          flex: 1;
+        }
       }
-      
+
       .skill-metrics-row {
         flex-wrap: wrap;
-        gap: 16px;
+        gap: 12px;
+      }
+
+      .skill-tags-row {
+        flex-direction: column;
+        align-items: flex-start;
       }
     }
   }
-  
-  .info-grid {
-    grid-template-columns: 1fr !important;
+
+  .manage-card {
+    .manage-actions {
+      flex-direction: column;
+
+      .btn {
+        width: 100%;
+      }
+    }
   }
-  
-  .action-buttons {
+}
+@media (max-width: 768px) {
+  .skill-overview-card {
     flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+
+    .skill-icon {
+      width: 60px;
+      height: 60px;
+      font-size: 36px;
+    }
+
+    .skill-header {
+      width: 100%;
+
+      .skill-name-row {
+        flex-wrap: wrap;
+        gap: 8px;
+
+        .skill-name {
+          font-size: 20px;
+          width: 100%;
+        }
+
+        .skill-actions {
+          width: 100%;
+          margin-left: 0;
+          margin-top: 8px;
+        }
+      }
+
+      .skill-metrics-row {
+        flex-wrap: wrap;
+        gap: 12px;
+      }
+
+      .skill-tags-row {
+        flex-direction: column;
+        align-items: flex-start;
+      }
+    }
+  }
+
+  .manage-card {
+    .manage-actions {
+      flex-direction: column;
+
+      .btn {
+        width: 100%;
+      }
+    }
   }
 }