feat: 重构成长路径编辑页面布局 - 上方基本信息/阶段/统计，下方左右分栏课程配置

frontend/src/views/manager/growth-path-management.vue

@@ -138,27 +138,21 @@
         </div>
       </div>
 
-      <div class="path-editor">
+      <div class="path-editor-new">
-        <!-- 左侧：基本信息 + 阶段配置 -->
+        <!-- 上方：基本信息 + 学习阶段 + 路径统计 -->
-        <div class="editor-sidebar">
+        <div class="editor-top">
-          <div class="sidebar-section">
+          <!-- 基本信息 -->
+          <div class="top-section basic-info">
             <h3>基本信息</h3>
-            <el-form label-position="top" :model="editingPath">
+            <el-form label-position="top" :model="editingPath" size="small">
-              <el-form-item label="路径名称" required>
+              <div class="form-row">
+                <el-form-item label="路径名称" required class="form-item-half">
                   <el-input v-model="editingPath.name" placeholder="请输入路径名称" />
                 </el-form-item>
-              <el-form-item label="路径描述">
+                <el-form-item label="关联岗位" class="form-item-half">
-                <el-input 
-                  v-model="editingPath.description" 
-                  type="textarea" 
-                  :rows="3"
-                  placeholder="请输入路径描述" 
-                />
-              </el-form-item>
-              <el-form-item label="关联岗位">
                   <el-select 
                     v-model="editingPath.position_ids" 
-                  placeholder="选择关联岗位（可多选）" 
+                    placeholder="选择关联岗位" 
                     multiple
                     collapse-tags
                     collapse-tags-tooltip
@@ -173,7 +167,19 @@
                     />
                   </el-select>
                 </el-form-item>
-              <el-form-item label="预计完成天数">
+              </div>
+              <div class="form-row">
+                <el-form-item label="路径描述" class="form-item-full">
+                  <el-input 
+                    v-model="editingPath.description" 
+                    type="textarea" 
+                    :rows="2"
+                    placeholder="请输入路径描述" 
+                  />
+                </el-form-item>
+              </div>
+              <div class="form-row">
+                <el-form-item label="预计天数" class="form-item-small">
                   <el-input-number 
                     v-model="editingPath.estimated_duration_days" 
                     :min="1" 
@@ -181,38 +187,41 @@
                     style="width: 100%"
                   />
                 </el-form-item>
-              <el-form-item label="状态">
+                <el-form-item label="状态" class="form-item-small">
                   <el-switch 
                     v-model="editingPath.is_active" 
                     active-text="启用" 
                     inactive-text="禁用"
                   />
                 </el-form-item>
+              </div>
             </el-form>
           </div>
 
-          <div class="sidebar-section">
+          <!-- 学习阶段 -->
+          <div class="top-section stages-section">
             <div class="section-header">
               <h3>学习阶段</h3>
               <el-button link type="primary" size="small" @click="addStage">
-                <el-icon><Plus /></el-icon> 添加阶段
+                <el-icon><Plus /></el-icon> 添加
               </el-button>
             </div>
-            <div class="stages-list">
+            <div class="stages-list-horizontal">
               <div 
                 v-for="(stage, index) in editingPath.stages" 
                 :key="index"
-                class="stage-item"
+                class="stage-tag"
               >
                 <el-input 
                   v-model="stage.name" 
                   placeholder="阶段名称"
                   size="small"
+                  style="width: 100px"
                 >
                   <template #prefix>
                     <span class="stage-order">{{ index + 1 }}</span>
                   </template>
-                  <template #suffix>
+                </el-input>
                 <el-button 
                   link 
                   type="danger" 
@@ -222,24 +231,23 @@
                 >
                   <el-icon><Delete /></el-icon>
                 </el-button>
-                  </template>
-                </el-input>
               </div>
             </div>
           </div>
 
-          <div class="sidebar-section">
+          <!-- 路径统计 -->
+          <div class="top-section stats-section">
             <h3>路径统计</h3>
-            <div class="stats-grid">
+            <div class="stats-row">
-              <div class="stat-item">
+              <div class="stat-box">
                 <span class="stat-value">{{ editingPath.nodes?.length || 0 }}</span>
                 <span class="stat-label">课程总数</span>
               </div>
-              <div class="stat-item">
+              <div class="stat-box">
                 <span class="stat-value">{{ requiredCount }}</span>
                 <span class="stat-label">必修课程</span>
               </div>
-              <div class="stat-item">
+              <div class="stat-box">
                 <span class="stat-value">{{ totalDuration }}</span>
                 <span class="stat-label">总学时(h)</span>
               </div>
@@ -247,24 +255,18 @@
           </div>
         </div>
 
-        <!-- 右侧：课程配置 -->
+        <!-- 下方：左右分栏 -->
-        <div class="editor-main">
+        <div class="editor-bottom">
-          <div class="course-config-panel">
+          <!-- 左侧 1/3：可选课程 -->
+          <div class="course-library-panel">
             <div class="panel-header">
-              <h3>课程配置</h3>
-            </div>
-
-            <!-- 课程库 -->
-            <div class="course-library">
-              <div class="library-header">
               <span>可选课程</span>
               <el-tag size="small">{{ filteredCourses.length }} 门</el-tag>
             </div>
-              <!-- 搜索和筛选 -->
             <div class="course-filter">
               <el-input 
                 v-model="courseSearch" 
-                  placeholder="搜索课程名称..." 
+                placeholder="搜索课程..." 
                 clearable
                 size="small"
               >
@@ -274,10 +276,10 @@
               </el-input>
               <el-select 
                 v-model="courseCategory" 
-                  placeholder="分类筛选" 
+                placeholder="分类" 
                 clearable 
                 size="small"
-                  style="width: 120px"
+                style="width: 100px"
               >
                 <el-option 
                   v-for="cat in courseCategories" 
@@ -287,7 +289,7 @@
                 />
               </el-select>
             </div>
-              <div class="library-content" v-loading="coursesLoading">
+            <div class="course-list" v-loading="coursesLoading">
               <div 
                 v-for="course in filteredCourses" 
                 :key="course.id"
@@ -300,21 +302,20 @@
                 <div class="course-info">
                   <span class="course-name">{{ course.name || course.title }}</span>
                   <span class="course-meta">
-                      {{ course.duration_hours || course.estimatedDuration || 0 }}h · 
+                    {{ course.duration_hours || course.estimatedDuration || 0 }}h · {{ course.category || '未分类' }}
-                      {{ course.category || '未分类' }}
                   </span>
                 </div>
                 <el-icon v-if="isNodeAdded(course.id)" color="#67c23a"><Check /></el-icon>
                 <el-icon v-else><Plus /></el-icon>
               </div>
-                <el-empty v-if="filteredCourses.length === 0" description="暂无课程" :image-size="60" />
+              <el-empty v-if="filteredCourses.length === 0" description="暂无课程" :image-size="50" />
             </div>
           </div>
 
-            <!-- 已选课程（按阶段分组） -->
+          <!-- 右侧 2/3：已选课程配置 -->
-            <div class="selected-courses">
+          <div class="selected-courses-panel">
-              <div class="library-header">
+            <div class="panel-header">
-                <span>已选课程</span>
+              <span>已选课程配置</span>
               <el-tag size="small" type="success">{{ editingPath.nodes?.length || 0 }} 门</el-tag>
             </div>
             <div 
@@ -363,7 +364,7 @@
                         <el-select 
                           v-model="node.stage_name" 
                           size="small" 
-                            style="width: 100px"
+                          style="width: 90px"
                           placeholder="阶段"
                         >
                           <el-option 
@@ -392,9 +393,9 @@
                   </div>
                 </div>
               </template>
-                <el-empty v-else description="请从左侧添加课程" :image-size="80">
+              <el-empty v-else description="请从左侧添加课程" :image-size="60">
                 <template #description>
-                    <p>从左侧课程库拖拽或点击添加课程</p>
+                  <p>点击或拖拽左侧课程添加</p>
                 </template>
               </el-empty>
               </div>
@@ -995,92 +996,151 @@ onMounted(() => {
     }
   }
 
-  .path-editor {
+  // 新布局样式
+  .path-editor-new {
     flex: 1;
     display: flex;
-    gap: 20px;
-    min-height: 0;
-
-    .editor-sidebar {
-      width: 320px;
-      display: flex;
     flex-direction: column;
     gap: 16px;
-      overflow-y: auto;
+    min-height: 0;
 
-      .sidebar-section {
+    // 上方区域
+    .editor-top {
+      display: flex;
+      gap: 16px;
+      flex-shrink: 0;
+
+      .top-section {
         background: #fff;
         border-radius: 8px;
         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-        padding: 20px;
+        padding: 16px;
 
         h3 {
-          font-size: 16px;
+          font-size: 14px;
           font-weight: 600;
           color: #333;
-          margin: 0 0 16px 0;
+          margin: 0 0 12px 0;
+          padding-bottom: 8px;
+          border-bottom: 1px solid #ebeef5;
         }
+      }
+
+      .basic-info {
+        flex: 2;
+
+        .form-row {
+          display: flex;
+          gap: 16px;
+          margin-bottom: 8px;
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+        }
+
+        .form-item-half {
+          flex: 1;
+          margin-bottom: 0;
+        }
+
+        .form-item-full {
+          flex: 1;
+          margin-bottom: 0;
+        }
+
+        .form-item-small {
+          width: 120px;
+          margin-bottom: 0;
+        }
+
+        :deep(.el-form-item) {
+          margin-bottom: 0;
+        }
+      }
+
+      .stages-section {
+        flex: 1;
+        min-width: 280px;
 
         .section-header {
           display: flex;
           justify-content: space-between;
           align-items: center;
-          margin-bottom: 16px;
+          margin-bottom: 12px;
+          padding-bottom: 8px;
+          border-bottom: 1px solid #ebeef5;
 
           h3 {
             margin: 0;
+            padding: 0;
+            border: none;
           }
         }
 
-        .stages-list {
+        .stages-list-horizontal {
           display: flex;
-          flex-direction: column;
+          flex-wrap: wrap;
           gap: 8px;
 
-          .stage-item {
+          .stage-tag {
+            display: flex;
+            align-items: center;
+            gap: 4px;
+
             .stage-order {
               color: #667eea;
               font-weight: 600;
-              margin-right: 4px;
+              font-size: 12px;
+            }
           }
         }
       }
 
-        .stats-grid {
+      .stats-section {
-          display: grid;
+        width: 200px;
-          grid-template-columns: repeat(3, 1fr);
+        flex-shrink: 0;
-          gap: 12px;
 
-          .stat-item {
+        .stats-row {
+          display: flex;
+          gap: 8px;
+
+          .stat-box {
+            flex: 1;
             text-align: center;
-            padding: 12px 8px;
+            padding: 8px 4px;
             background: #f5f7fa;
             border-radius: 6px;
 
             .stat-value {
               display: block;
-              font-size: 20px;
+              font-size: 18px;
               font-weight: 600;
               color: #667eea;
             }
 
             .stat-label {
               display: block;
-              font-size: 12px;
+              font-size: 11px;
               color: #909399;
-              margin-top: 4px;
+              margin-top: 2px;
             }
           }
         }
       }
     }
 
-    .editor-main {
+    // 下方区域
+    .editor-bottom {
       flex: 1;
-      min-width: 0;
+      display: flex;
+      gap: 16px;
+      min-height: 0;
 
-      .course-config-panel {
+      // 左侧课程库 1/3
-        height: 100%;
+      .course-library-panel {
+        width: 33%;
+        min-width: 280px;
         background: #fff;
         border-radius: 8px;
         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
@@ -1091,49 +1151,17 @@ onMounted(() => {
           display: flex;
           justify-content: space-between;
           align-items: center;
-          padding: 16px 20px;
+          padding: 12px 16px;
-          border-bottom: 1px solid #ebeef5;
-
-          h3 {
-            font-size: 16px;
-            font-weight: 600;
-            color: #333;
-            margin: 0;
-          }
-        }
-
-        .course-library {
-          flex: 2;  // 课程库占更多空间
-          display: flex;
-          flex-direction: column;
-          min-height: 300px;
-          border-bottom: 1px solid #ebeef5;
-        }
-
-        .selected-courses {
-          flex: 1;
-          display: flex;
-          flex-direction: column;
-          min-height: 200px;
-          border-bottom: none;
-        }
-
-        .course-library,
-        .selected-courses {
-
-          .library-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 12px 20px;
           background: #fafafa;
+          border-radius: 8px 8px 0 0;
           font-weight: 500;
+          border-bottom: 1px solid #ebeef5;
         }
 
         .course-filter {
           display: flex;
           gap: 8px;
-            padding: 12px 16px;
+          padding: 10px 12px;
           background: #f5f7fa;
           border-bottom: 1px solid #ebeef5;
 
@@ -1142,59 +1170,22 @@ onMounted(() => {
           }
         }
 
-          .library-content {
+        .course-list {
           flex: 1;
           overflow-y: auto;
           padding: 8px;
-            max-height: 450px;
-            display: grid;
-            grid-template-columns: repeat(2, 1fr);  // 双列布局
-            gap: 4px;
-            align-content: start;
-          }
-
-          .selected-content {
-            flex: 1;
-            overflow-y: auto;
-            padding: 12px;
-            transition: all 0.3s ease;
-          }
-
-          .selected-content {
-            border: 2px dashed transparent;
-            
-            &.is-dragging-over {
-              background: #ecf5ff;
-              border-color: #667eea;
-              
-              &::before {
-                content: '松开鼠标添加课程';
-                display: block;
-                text-align: center;
-                padding: 12px;
-                color: #667eea;
-                font-weight: 500;
-                animation: pulse 1s infinite;
-              }
-            }
-          }
-          
-          @keyframes pulse {
-            0%, 100% { opacity: 1; }
-            50% { opacity: 0.6; }
-          }
 
           .course-item {
             display: flex;
             align-items: center;
             justify-content: space-between;
-            padding: 6px 8px;
+            padding: 8px 10px;
+            margin-bottom: 6px;
             background: #f5f7fa;
             border-radius: 4px;
             cursor: grab;
             transition: all 0.15s;
             border: 1px solid #e4e7ed;
-            height: fit-content;
 
             &:hover {
               background: #e6e8eb;
@@ -1205,11 +1196,6 @@ onMounted(() => {
               cursor: grabbing;
             }
 
-            &.is-dragging {
-              opacity: 0.5;
-              border-color: #667eea;
-            }
-
             &.is-added {
               background: #f0f9eb;
               border-color: #67c23a;
@@ -1233,12 +1219,56 @@ onMounted(() => {
 
               .course-meta {
                 display: block;
-                font-size: 12px;
+                font-size: 11px;
                 color: #909399;
                 margin-top: 2px;
               }
             }
           }
+        }
+      }
+
+      // 右侧已选课程 2/3
+      .selected-courses-panel {
+        flex: 1;
+        background: #fff;
+        border-radius: 8px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        display: flex;
+        flex-direction: column;
+
+        .panel-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: 12px 16px;
+          background: #fafafa;
+          border-radius: 8px 8px 0 0;
+          font-weight: 500;
+          border-bottom: 1px solid #ebeef5;
+        }
+
+        .selected-content {
+          flex: 1;
+          overflow-y: auto;
+          padding: 12px;
+          border: 2px dashed transparent;
+          transition: all 0.3s ease;
+
+          &.is-dragging-over {
+            background: #ecf5ff;
+            border-color: #667eea;
+
+            &::before {
+              content: '松开鼠标添加课程';
+              display: block;
+              text-align: center;
+              padding: 12px;
+              color: #667eea;
+              font-weight: 500;
+              animation: pulse 1s infinite;
+            }
+          }
 
           .stage-section {
             margin-bottom: 16px;
@@ -1260,7 +1290,7 @@ onMounted(() => {
               border-top: none;
               border-radius: 0 0 6px 6px;
               padding: 8px;
-              min-height: 60px;
+              min-height: 50px;
 
               .node-item {
                 display: flex;
@@ -1313,7 +1343,7 @@ onMounted(() => {
 
               .stage-empty {
                 text-align: center;
-                padding: 20px;
+                padding: 16px;
                 color: #909399;
                 font-size: 13px;
               }
@@ -1322,24 +1352,39 @@ onMounted(() => {
         }
       }
     }
+
+    @keyframes pulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.6; }
+    }
   }
 }
 
 // 响应式
 @media (max-width: 1200px) {
   .growth-path-management-container {
-    .path-editor {
+    .path-editor-new {
+      .editor-top {
+        flex-wrap: wrap;
+
+        .basic-info {
+          width: 100%;
+          flex: none;
+        }
+
+        .stages-section,
+        .stats-section {
+          flex: 1;
+          min-width: 200px;
+        }
+      }
+
+      .editor-bottom {
         flex-direction: column;
 
-      .editor-sidebar {
+        .course-library-panel {
           width: 100%;
-        flex-direction: row;
+          max-height: 300px;
-        flex-wrap: wrap;
-        overflow: visible;
-
-        .sidebar-section {
-          flex: 1;
-          min-width: 280px;
         }
       }
     }