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

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

主要改进：
- 技能概览卡片：左侧80x80图标，右侧两行结构（技能名称 + 关键指标）
- 关键指标图标化：👥 订阅数、📦 当前版本、⭐ 评分
- 详细信息卡片：网格布局展示状态、分类、标签、技能描述、版本说明
- 操作按钮区：独立区域，视觉层次更清晰
- 响应式设计：移动端自适应布局

src/styles/pages/_developer.scss

@@ -132,3 +132,174 @@
   background: #FEF2F2;
   border-radius: 4px;
 }
+
+/* ============ 技能编辑页面优化样式 ============ */
+
+/* 技能概览卡片（两行结构） */
+.skill-overview-card {
+  display: flex;
+  gap: 20px;
+  padding: 24px;
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  margin-bottom: 16px;
+  
+  align-items: center;
+  
+  .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;
+    flex-shrink: 0;
+  }
+  
+  .skill-header {
+    flex: 1;
+    
+    /* 第一行：技能名称 */
+    .skill-name {
+      margin: 0 0 12px 0;
+      font-size: 24px;
+      font-weight: 700;
+      color: #1E293B;
+    }
+    
+    /* 第二行：关键指标 */
+    .skill-metrics-row {
+      display: flex;
+      align-items: center;
+      gap: 24px;
+      
+      .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;
+          color: #1E293B;
+        }
+      }
+    }
+  }
+}
+
+/* 详细信息卡片（普通卡片） */
+.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;
+    }
+  }
+  
+  .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;
+        }
+      }
+    }
+  }
+}
+
+/* 操作按钮区 */
+.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;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .skill-overview-card {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+    
+    .skill-icon {
+      width: 60px;
+      height: 60px;
+      font-size: 28px;
+    }
+    
+    .skill-header {
+      .skill-name {
+        font-size: 20px;
+      }
+      
+      .skill-metrics-row {
+        flex-wrap: wrap;
+        gap: 16px;
+      }
+    }
+  }
+  
+  .info-grid {
+    grid-template-columns: 1fr !important;
+  }
+  
+  .action-buttons {
+    flex-direction: column;
+  }
+}