From 925576d38e28e63cf3be0d428dd46e3c100efef1 Mon Sep 17 00:00:00 2001
From: yuliang_guo <anonymous@qq.com>
Date: Fri, 30 Jan 2026 15:53:47 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=87=8D=E6=9E=84=E6=88=90=E9=95=BF?=
 =?UTF-8?q?=E8=B7=AF=E5=BE=84=E7=AE=A1=E7=90=86=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 改为列表+编辑双视图模式
- 岗位列表从后端 API 动态获取
- 课程库从后端 API 动态获取
- 支持按岗位/状态筛选路径
- 支持动态添加/删除学习阶段
- 支持拖拽或点击添加课程节点
---
 .../views/manager/growth-path-management.vue  | 1797 ++++++++++-------
 1 file changed, 1013 insertions(+), 784 deletions(-)

diff --git a/frontend/src/views/manager/growth-path-management.vue b/frontend/src/views/manager/growth-path-management.vue
index e898c2e..8863ce9 100644
--- a/frontend/src/views/manager/growth-path-management.vue
+++ b/frontend/src/views/manager/growth-path-management.vue
@@ -1,671 +1,833 @@
 <template>
   <div class="growth-path-management-container">
-    <div class="page-header">
-      <h1 class="page-title">成长路径管理</h1>
-      <div class="header-actions">
-        <el-select v-model="selectedPosition" placeholder="选择岗位" @change="handlePositionChange">
-          <el-option label="全部岗位" value="" />
-          <el-option label="销售专员" value="sales" />
-          <el-option label="销售主管" value="sales_manager" />
-          <el-option label="客服专员" value="service" />
-          <el-option label="技术支持" value="tech" />
-        </el-select>
-        <el-button type="primary" @click="saveCurrentPath" :disabled="!hasChanges">
-          <el-icon class="el-icon--left"><DocumentChecked /></el-icon>
-          保存路径
-        </el-button>
-      </div>
-    </div>
-
-    <!-- 提示信息 -->
-    <el-alert
-      title="操作提示"
-      type="info"
-      :closable="false"
-      show-icon
-      style="margin-bottom: 20px"
-    >
-      从左侧课程库拖拽课程到右侧画布，设计岗位的学习路径。可以设置课程之间的前置依赖关系。
-    </el-alert>
-
-    <div class="path-designer">
-      <!-- 左侧课程库 -->
-      <div class="course-library card">
-        <div class="library-header">
-          <h3>课程库</h3>
-          <el-input
-            v-model="searchText"
-            placeholder="搜索课程"
-            clearable
-            size="small"
+    <!-- 路径列表视图 -->
+    <template v-if="!editingPath">
+      <div class="page-header">
+        <h1 class="page-title">成长路径管理</h1>
+        <div class="header-actions">
+          <el-select 
+            v-model="filters.position_id" 
+            placeholder="筛选岗位" 
+            clearable 
+            style="width: 180px"
+            @change="loadGrowthPaths"
           >
-            <template #prefix>
-              <el-icon><Search /></el-icon>
-            </template>
-          </el-input>
-        </div>
-        
-        <div class="library-content">
-          <el-collapse v-model="activeNames">
-            <el-collapse-item title="销售技巧" name="sales">
-              <div class="course-list">
-                <div
-                  v-for="course in filteredSalesCourses"
-                  :key="course.id"
-                  class="course-item"
-                  draggable="true"
-                  @dragstart="handleDragStart($event, course)"
-                >
-                  <el-icon><Reading /></el-icon>
-                  <span>{{ course.title }}</span>
-                  <el-tag size="small" type="info">{{ course.duration }}分钟</el-tag>
-                </div>
-              </div>
-            </el-collapse-item>
-            <el-collapse-item title="产品知识" name="product">
-              <div class="course-list">
-                <div
-                  v-for="course in filteredProductCourses"
-                  :key="course.id"
-                  class="course-item"
-                  draggable="true"
-                  @dragstart="handleDragStart($event, course)"
-                >
-                  <el-icon><Reading /></el-icon>
-                  <span>{{ course.title }}</span>
-                  <el-tag size="small" type="info">{{ course.duration }}分钟</el-tag>
-                </div>
-              </div>
-            </el-collapse-item>
-            <el-collapse-item title="客户服务" name="service">
-              <div class="course-list">
-                <div
-                  v-for="course in filteredServiceCourses"
-                  :key="course.id"
-                  class="course-item"
-                  draggable="true"
-                  @dragstart="handleDragStart($event, course)"
-                >
-                  <el-icon><Reading /></el-icon>
-                  <span>{{ course.title }}</span>
-                  <el-tag size="small" type="info">{{ course.duration }}分钟</el-tag>
-                </div>
-              </div>
-            </el-collapse-item>
-            <el-collapse-item title="通用能力" name="general">
-              <div class="course-list">
-                <div
-                  v-for="course in filteredGeneralCourses"
-                  :key="course.id"
-                  class="course-item"
-                  draggable="true"
-                  @dragstart="handleDragStart($event, course)"
-                >
-                  <el-icon><Reading /></el-icon>
-                  <span>{{ course.title }}</span>
-                  <el-tag size="small" type="info">{{ course.duration }}分钟</el-tag>
-                </div>
-              </div>
-            </el-collapse-item>
-          </el-collapse>
+            <el-option label="全部岗位" :value="undefined" />
+            <el-option 
+              v-for="pos in positions" 
+              :key="pos.id" 
+              :label="pos.name" 
+              :value="pos.id" 
+            />
+          </el-select>
+          <el-select 
+            v-model="filters.is_active" 
+            placeholder="状态" 
+            clearable 
+            style="width: 120px"
+            @change="loadGrowthPaths"
+          >
+            <el-option label="全部状态" :value="undefined" />
+            <el-option label="已启用" :value="true" />
+            <el-option label="已禁用" :value="false" />
+          </el-select>
+          <el-button type="primary" @click="handleCreatePath">
+            <el-icon class="el-icon--left"><Plus /></el-icon>
+            新建路径
+          </el-button>
         </div>
       </div>
 
-      <!-- 右侧画布 -->
-      <div class="path-canvas card">
-        <div class="canvas-header">
-          <h3>{{ selectedPosition ? getPositionName(selectedPosition) : '请选择岗位' }} - 成长路径</h3>
-          <div class="canvas-actions">
-            <el-button link type="primary" size="small" @click="clearCanvas">
-              <el-icon><Delete /></el-icon>
-              清空画布
-            </el-button>
-            <el-button link type="primary" size="small" @click="autoLayout">
-              <el-icon><Grid /></el-icon>
-              自动布局
-            </el-button>
-          </div>
-        </div>
-        
-        <div 
-          class="canvas-content"
-          @dragover.prevent
-          @drop="handleDrop"
-          ref="canvasRef"
+      <!-- 路径列表 -->
+      <div class="path-list-card">
+        <el-table 
+          :data="growthPaths" 
+          v-loading="loading"
+          stripe
         >
-          <div class="canvas-inner">
-            <!-- 阶段分隔线 -->
-            <div class="stage-divider" v-for="stage in stages" :key="stage.id" :style="{ top: stage.position + 'px' }">
-              <span class="stage-label">{{ stage.name }}</span>
-            </div>
+          <el-table-column prop="name" label="路径名称" min-width="200">
+            <template #default="{ row }">
+              <div class="path-name-cell">
+                <span class="path-name">{{ row.name }}</span>
+                <el-tag v-if="!row.is_active" size="small" type="info">已禁用</el-tag>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="position_name" label="关联岗位" width="150">
+            <template #default="{ row }">
+              <el-tag v-if="row.position_name" type="primary" size="small">
+                {{ row.position_name }}
+              </el-tag>
+              <span v-else class="text-muted">未关联</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="node_count" label="课程数" width="100" align="center">
+            <template #default="{ row }">
+              <span class="node-count">{{ row.node_count || 0 }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="estimated_duration_days" label="预计天数" width="100" align="center">
+            <template #default="{ row }">
+              {{ row.estimated_duration_days || '-' }} 天
+            </template>
+          </el-table-column>
+          <el-table-column prop="created_at" label="创建时间" width="180">
+            <template #default="{ row }">
+              {{ formatDateTime(row.created_at) }}
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="200" fixed="right">
+            <template #default="{ row }">
+              <el-button link type="primary" @click="handleEditPath(row)">
+                编辑
+              </el-button>
+              <el-button link type="primary" @click="handleToggleStatus(row)">
+                {{ row.is_active ? '禁用' : '启用' }}
+              </el-button>
+              <el-button link type="danger" @click="handleDeletePath(row)">
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
 
-            <!-- 空状态 -->
-            <div v-if="pathNodes.length === 0" class="empty-state">
-              <el-icon :size="64" color="#c0c4cc"><FolderOpened /></el-icon>
-              <p>拖拽课程到这里开始设计成长路径</p>
-            </div>
+        <!-- 分页 -->
+        <div class="pagination-wrapper" v-if="total > 0">
+          <el-pagination
+            v-model:current-page="pagination.page"
+            v-model:page-size="pagination.page_size"
+            :total="total"
+            :page-sizes="[10, 20, 50]"
+            layout="total, sizes, prev, pager, next"
+            @size-change="loadGrowthPaths"
+            @current-change="loadGrowthPaths"
+          />
+        </div>
 
-            <!-- 路径节点 -->
-            <div
-              v-for="node in pathNodes"
-              :key="node.id"
-              class="path-node"
-              :class="{ 'is-required': node.required }"
-              :style="{ left: node.x + 'px', top: node.y + 'px' }"
-              @mousedown="startDrag($event, node)"
-              @contextmenu.prevent="showNodeMenu($event, node)"
-            >
-              <div class="node-header">
-                <span class="node-title">{{ node.title }}</span>
-                <el-dropdown trigger="click" @command="handleNodeCommand($event, node)">
-                  <el-button link size="small">
-                    <el-icon><More /></el-icon>
-                  </el-button>
-                  <template #dropdown>
-                    <el-dropdown-menu>
-                      <el-dropdown-item command="required">
-                        {{ node.required ? '设为选修' : '设为必修' }}
-                      </el-dropdown-item>
-                      <el-dropdown-item command="dependency">设置前置课程</el-dropdown-item>
-                      <el-dropdown-item command="delete" divided>删除节点</el-dropdown-item>
-                    </el-dropdown-menu>
+        <!-- 空状态 -->
+        <el-empty v-if="!loading && growthPaths.length === 0" description="暂无成长路径">
+          <el-button type="primary" @click="handleCreatePath">创建第一个路径</el-button>
+        </el-empty>
+      </div>
+    </template>
+
+    <!-- 路径编辑视图 -->
+    <template v-else>
+      <div class="page-header">
+        <div class="header-left">
+          <el-button link @click="handleBack">
+            <el-icon><ArrowLeft /></el-icon>
+            返回列表
+          </el-button>
+          <h1 class="page-title">{{ editingPath.id ? '编辑成长路径' : '新建成长路径' }}</h1>
+        </div>
+        <div class="header-actions">
+          <el-button @click="handleBack">取消</el-button>
+          <el-button type="primary" @click="handleSavePath" :loading="saving">
+            <el-icon class="el-icon--left"><Check /></el-icon>
+            保存
+          </el-button>
+        </div>
+      </div>
+
+      <div class="path-editor">
+        <!-- 左侧：基本信息 + 阶段配置 -->
+        <div class="editor-sidebar">
+          <div class="sidebar-section">
+            <h3>基本信息</h3>
+            <el-form label-position="top" :model="editingPath">
+              <el-form-item label="路径名称" required>
+                <el-input v-model="editingPath.name" placeholder="请输入路径名称" />
+              </el-form-item>
+              <el-form-item label="路径描述">
+                <el-input 
+                  v-model="editingPath.description" 
+                  type="textarea" 
+                  :rows="3"
+                  placeholder="请输入路径描述" 
+                />
+              </el-form-item>
+              <el-form-item label="关联岗位">
+                <el-select 
+                  v-model="editingPath.position_id" 
+                  placeholder="选择关联岗位（可选）" 
+                  clearable 
+                  style="width: 100%"
+                >
+                  <el-option 
+                    v-for="pos in positions" 
+                    :key="pos.id" 
+                    :label="pos.name" 
+                    :value="pos.id" 
+                  />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="预计完成天数">
+                <el-input-number 
+                  v-model="editingPath.estimated_duration_days" 
+                  :min="1" 
+                  :max="365"
+                  style="width: 100%"
+                />
+              </el-form-item>
+              <el-form-item label="状态">
+                <el-switch 
+                  v-model="editingPath.is_active" 
+                  active-text="启用" 
+                  inactive-text="禁用"
+                />
+              </el-form-item>
+            </el-form>
+          </div>
+
+          <div class="sidebar-section">
+            <div class="section-header">
+              <h3>学习阶段</h3>
+              <el-button link type="primary" size="small" @click="addStage">
+                <el-icon><Plus /></el-icon> 添加阶段
+              </el-button>
+            </div>
+            <div class="stages-list">
+              <div 
+                v-for="(stage, index) in editingPath.stages" 
+                :key="index"
+                class="stage-item"
+              >
+                <el-input 
+                  v-model="stage.name" 
+                  placeholder="阶段名称"
+                  size="small"
+                >
+                  <template #prefix>
+                    <span class="stage-order">{{ index + 1 }}</span>
                   </template>
-                </el-dropdown>
-              </div>
-              <div class="node-info">
-                <el-tag size="small" :type="node.required ? 'danger' : ''">
-                  {{ node.required ? '必修' : '选修' }}
-                </el-tag>
-                <span class="node-duration">{{ node.duration }}分钟</span>
+                  <template #suffix>
+                    <el-button 
+                      link 
+                      type="danger" 
+                      size="small" 
+                      @click="removeStage(index)"
+                      :disabled="editingPath.stages.length <= 1"
+                    >
+                      <el-icon><Delete /></el-icon>
+                    </el-button>
+                  </template>
+                </el-input>
               </div>
             </div>
+          </div>
 
-            <!-- 连接线 -->
-            <svg class="connections" v-if="connections.length > 0">
-              <defs>
-                <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
-                  <polygon points="0 0, 10 3.5, 0 7" fill="#667eea" />
-                </marker>
-              </defs>
-              <path
-                v-for="conn in connections"
-                :key="`${conn.from}-${conn.to}`"
-                :d="getConnectionPath(conn)"
-                stroke="#667eea"
-                stroke-width="2"
-                fill="none"
-                marker-end="url(#arrowhead)"
-              />
-            </svg>
+          <div class="sidebar-section">
+            <h3>路径统计</h3>
+            <div class="stats-grid">
+              <div class="stat-item">
+                <span class="stat-value">{{ editingPath.nodes?.length || 0 }}</span>
+                <span class="stat-label">课程总数</span>
+              </div>
+              <div class="stat-item">
+                <span class="stat-value">{{ requiredCount }}</span>
+                <span class="stat-label">必修课程</span>
+              </div>
+              <div class="stat-item">
+                <span class="stat-value">{{ totalDuration }}</span>
+                <span class="stat-label">总学时(h)</span>
+              </div>
+            </div>
           </div>
         </div>
 
-        <!-- 路径统计 -->
-        <div class="canvas-footer">
-          <div class="path-stats">
-            <div class="stat-item">
-              <span class="stat-label">课程总数：</span>
-              <span class="stat-value">{{ pathNodes.length }}</span>
+        <!-- 右侧：课程配置 -->
+        <div class="editor-main">
+          <div class="course-config-panel">
+            <div class="panel-header">
+              <h3>课程配置</h3>
+              <el-input 
+                v-model="courseSearch" 
+                placeholder="搜索课程" 
+                clearable
+                style="width: 200px"
+                @input="handleCourseSearch"
+              >
+                <template #prefix>
+                  <el-icon><Search /></el-icon>
+                </template>
+              </el-input>
             </div>
-            <div class="stat-item">
-              <span class="stat-label">必修课程：</span>
-              <span class="stat-value">{{ requiredCount }}</span>
+
+            <!-- 课程库 -->
+            <div class="course-library">
+              <div class="library-header">
+                <span>可选课程</span>
+                <el-tag size="small">{{ filteredCourses.length }} 门</el-tag>
+              </div>
+              <div class="library-content" v-loading="coursesLoading">
+                <div 
+                  v-for="course in filteredCourses" 
+                  :key="course.id"
+                  class="course-item"
+                  :class="{ 'is-added': isNodeAdded(course.id) }"
+                  draggable="true"
+                  @dragstart="handleDragStart($event, course)"
+                  @click="handleAddCourse(course)"
+                >
+                  <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.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" />
+              </div>
             </div>
-            <div class="stat-item">
-              <span class="stat-label">总时长：</span>
-              <span class="stat-value">{{ totalDuration }} 分钟</span>
-            </div>
-            <div class="stat-item">
-              <span class="stat-label">预计完成天数：</span>
-              <span class="stat-value">{{ estimatedDays }} 天</span>
+
+            <!-- 已选课程（按阶段分组） -->
+            <div class="selected-courses">
+              <div class="library-header">
+                <span>已选课程</span>
+                <el-tag size="small" type="success">{{ editingPath.nodes?.length || 0 }} 门</el-tag>
+              </div>
+              <div 
+                class="selected-content"
+                @dragover.prevent
+                @drop="handleDrop"
+              >
+                <template v-if="editingPath.nodes && editingPath.nodes.length > 0">
+                  <div 
+                    v-for="(stage, stageIndex) in editingPath.stages" 
+                    :key="stageIndex"
+                    class="stage-section"
+                  >
+                    <div class="stage-header">
+                      <span>{{ stage.name }}</span>
+                      <el-tag size="small" type="info">
+                        {{ getStageNodes(stage.name).length }} 门
+                      </el-tag>
+                    </div>
+                    <div class="stage-nodes">
+                      <div 
+                        v-for="(node, nodeIndex) in getStageNodes(stage.name)" 
+                        :key="node.course_id"
+                        class="node-item"
+                      >
+                        <div class="node-drag-handle">
+                          <el-icon><Rank /></el-icon>
+                        </div>
+                        <div class="node-content">
+                          <span class="node-title">{{ node.title }}</span>
+                          <div class="node-meta">
+                            <el-tag 
+                              :type="node.is_required ? 'danger' : 'info'" 
+                              size="small"
+                              @click="toggleRequired(node)"
+                              style="cursor: pointer"
+                            >
+                              {{ node.is_required ? '必修' : '选修' }}
+                            </el-tag>
+                            <span>{{ node.estimated_days || 1 }}天</span>
+                          </div>
+                        </div>
+                        <div class="node-actions">
+                          <el-select 
+                            v-model="node.stage_name" 
+                            size="small" 
+                            style="width: 100px"
+                            placeholder="阶段"
+                          >
+                            <el-option 
+                              v-for="s in editingPath.stages" 
+                              :key="s.name" 
+                              :label="s.name" 
+                              :value="s.name" 
+                            />
+                          </el-select>
+                          <el-button 
+                            link 
+                            type="danger" 
+                            size="small"
+                            @click="removeNode(node)"
+                          >
+                            <el-icon><Delete /></el-icon>
+                          </el-button>
+                        </div>
+                      </div>
+                      <div 
+                        v-if="getStageNodes(stage.name).length === 0" 
+                        class="stage-empty"
+                      >
+                        拖拽或点击课程添加到此阶段
+                      </div>
+                    </div>
+                  </div>
+                </template>
+                <el-empty v-else description="请从左侧添加课程" :image-size="80">
+                  <template #description>
+                    <p>从左侧课程库拖拽或点击添加课程</p>
+                  </template>
+                </el-empty>
+              </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-
-    <!-- 设置前置课程弹窗 -->
-    <el-dialog
-      v-model="dependencyDialogVisible"
-      title="设置前置课程"
-      width="500px"
-    >
-      <div class="dependency-content">
-        <p>为课程 <strong>{{ currentNode?.title }}</strong> 设置前置课程：</p>
-        <el-checkbox-group v-model="selectedDependencies">
-          <el-checkbox
-            v-for="node in availableDependencies"
-            :key="node.id"
-            :label="node.id"
-          >
-            {{ node.title }}
-          </el-checkbox>
-        </el-checkbox-group>
-      </div>
-      <template #footer>
-        <span class="dialog-footer">
-          <el-button @click="dependencyDialogVisible = false">取消</el-button>
-          <el-button type="primary" @click="saveDependencies">确定</el-button>
-        </span>
-      </template>
-    </el-dialog>
+    </template>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
+import { 
+  Plus, ArrowLeft, Check, Delete, Search, Rank 
+} from '@element-plus/icons-vue'
+import { 
+  getGrowthPathConfigs, 
+  getGrowthPathDetail,
+  createGrowthPath, 
+  updateGrowthPath, 
+  deleteGrowthPath,
+  getManagerCourses,
+  type GrowthPathListItem,
+  type GrowthPathConfig,
+  type CreateGrowthPathNode,
+  type StageConfig,
+} from '@/api/manager'
+import request from '@/api/request'
 
-// 选中的岗位
-const selectedPosition = ref('sales')
-const hasChanges = ref(false)
+// 岗位接口
+interface Position {
+  id: number
+  name: string
+  code: string
+  status: string
+}
 
-// 搜索文本
-const searchText = ref('')
-const activeNames = ref(['sales'])
+// 课程接口
+interface Course {
+  id: number
+  name?: string
+  title?: string
+  description?: string
+  category?: string
+  duration_hours?: number
+  estimatedDuration?: number
+}
 
-// 画布相关
-const canvasRef = ref()
-const pathNodes = ref<any[]>([])
-const connections = ref<any[]>([])
-const draggedNode = ref<any>(null)
-const dragOffset = ref({ x: 0, y: 0 })
+// 编辑用的路径结构
+interface EditingPath {
+  id?: number
+  name: string
+  description?: string
+  position_id?: number
+  stages: StageConfig[]
+  estimated_duration_days?: number
+  is_active: boolean
+  sort_order?: number
+  nodes: CreateGrowthPathNode[]
+}
 
-// 前置课程设置
-const dependencyDialogVisible = ref(false)
-const currentNode = ref<any>(null)
-const selectedDependencies = ref<string[]>([])
+// ========== 状态 ==========
+const loading = ref(false)
+const saving = ref(false)
+const coursesLoading = ref(false)
 
-// 阶段分隔线
-const stages = ref([
-  { id: 1, name: '入门阶段', position: 100 },
-  { id: 2, name: '提升阶段', position: 300 },
-  { id: 3, name: '进阶阶段', position: 500 },
-  { id: 4, name: '专家阶段', position: 700 }
-])
+// 路径列表
+const growthPaths = ref<GrowthPathListItem[]>([])
+const total = ref(0)
+const pagination = ref({
+  page: 1,
+  page_size: 20,
+})
+const filters = ref<{
+  position_id?: number
+  is_active?: boolean
+}>({})
 
-// 课程数据
-const salesCourses = ref([
-  { id: 'c1', title: '客户沟通技巧', duration: 120 },
-  { id: 'c2', title: '需求挖掘方法', duration: 90 },
-  { id: 'c3', title: '异议处理技巧', duration: 60 },
-  { id: 'c4', title: '成交技巧', duration: 90 }
-])
+// 编辑状态
+const editingPath = ref<EditingPath | null>(null)
+const courseSearch = ref('')
 
-const productCourses = ref([
-  { id: 'c5', title: '产品基础知识', duration: 180 },
-  { id: 'c6', title: '产品对比分析', duration: 120 },
-  { id: 'c7', title: '产品演示技巧', duration: 90 }
-])
+// 基础数据
+const positions = ref<Position[]>([])
+const courses = ref<Course[]>([])
 
-const serviceCourses = ref([
-  { id: 'c8', title: '客户服务礼仪', duration: 60 },
-  { id: 'c9', title: '投诉处理技巧', duration: 90 },
-  { id: 'c10', title: '客户关系维护', duration: 120 }
-])
-
-// 过滤后的课程数据
-const filteredSalesCourses = computed(() => {
-  if (!searchText.value) return salesCourses.value
-  const keyword = searchText.value.toLowerCase()
-  return salesCourses.value.filter(course => 
-    course.title.toLowerCase().includes(keyword)
+// ========== 计算属性 ==========
+const filteredCourses = computed(() => {
+  if (!courseSearch.value) return courses.value
+  const keyword = courseSearch.value.toLowerCase()
+  return courses.value.filter(c => 
+    (c.name || c.title || '').toLowerCase().includes(keyword) ||
+    (c.category || '').toLowerCase().includes(keyword)
   )
 })
 
-const filteredProductCourses = computed(() => {
-  if (!searchText.value) return productCourses.value
-  const keyword = searchText.value.toLowerCase()
-  return productCourses.value.filter(course => 
-    course.title.toLowerCase().includes(keyword)
-  )
+const requiredCount = computed(() => {
+  return editingPath.value?.nodes?.filter(n => n.is_required).length || 0
 })
 
-const filteredServiceCourses = computed(() => {
-  if (!searchText.value) return serviceCourses.value
-  const keyword = searchText.value.toLowerCase()
-  return serviceCourses.value.filter(course => 
-    course.title.toLowerCase().includes(keyword)
-  )
+const totalDuration = computed(() => {
+  if (!editingPath.value?.nodes) return 0
+  return editingPath.value.nodes.reduce((sum, node) => {
+    const course = courses.value.find(c => c.id === node.course_id)
+    return sum + (course?.duration_hours || course?.estimatedDuration || 0)
+  }, 0)
 })
 
-const generalCourses = ref([
-  { id: 'c11', title: '时间管理', duration: 60 },
-  { id: 'c12', title: '商务礼仪', duration: 45 },
-  { id: 'c13', title: '团队协作', duration: 90 }
-])
-
-const filteredGeneralCourses = computed(() => {
-  if (!searchText.value) return generalCourses.value
-  const keyword = searchText.value.toLowerCase()
-  return generalCourses.value.filter(course => 
-    course.title.toLowerCase().includes(keyword)
-  )
-})
-
-// 计算属性
-const requiredCount = computed(() => pathNodes.value.filter(n => n.required).length)
-const totalDuration = computed(() => pathNodes.value.reduce((sum, n) => sum + n.duration, 0))
-const estimatedDays = computed(() => Math.ceil(totalDuration.value / 180)) // 假设每天学习3小时
-const availableDependencies = computed(() => 
-  pathNodes.value.filter(n => n.id !== currentNode.value?.id)
-)
+// ========== 方法 ==========
 
 /**
- * 获取岗位名称
+ * 格式化日期时间
  */
-const getPositionName = (position: string) => {
-  const positionMap: Record<string, string> = {
-    sales: '销售专员',
-    sales_manager: '销售主管',
-    service: '客服专员',
-    tech: '技术支持'
-  }
-  return positionMap[position] || position
+const formatDateTime = (dateStr: string) => {
+  if (!dateStr) return '-'
+  const date = new Date(dateStr)
+  return date.toLocaleDateString('zh-CN', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+  })
 }
 
 /**
- * 岗位切换
+ * 加载岗位列表
  */
-const handlePositionChange = () => {
-  if (hasChanges.value) {
-    ElMessageBox.confirm(
-      '当前路径尚未保存，切换岗位将丢失未保存的更改，是否继续？',
-      '提示',
+const loadPositions = async () => {
+  try {
+    const res = await request.get<{ data: { items: Position[] } }>('/api/v1/admin/positions', {
+      params: { page_size: 100 }
+    })
+    positions.value = res.data?.items || []
+  } catch (error) {
+    console.error('加载岗位列表失败:', error)
+  }
+}
+
+/**
+ * 加载课程列表
+ */
+const loadCourses = async () => {
+  coursesLoading.value = true
+  try {
+    const res = await getManagerCourses({ page: 1, size: 200 })
+    courses.value = res.items || []
+  } catch (error) {
+    console.error('加载课程列表失败:', error)
+  } finally {
+    coursesLoading.value = false
+  }
+}
+
+/**
+ * 加载成长路径列表
+ */
+const loadGrowthPaths = async () => {
+  loading.value = true
+  try {
+    const res = await getGrowthPathConfigs({
+      page: pagination.value.page,
+      page_size: pagination.value.page_size,
+      position_id: filters.value.position_id,
+      is_active: filters.value.is_active,
+    })
+    growthPaths.value = res.items || []
+    total.value = res.total || 0
+  } catch (error) {
+    console.error('加载成长路径列表失败:', error)
+    ElMessage.error('加载失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+/**
+ * 创建新路径
+ */
+const handleCreatePath = () => {
+  editingPath.value = {
+    name: '',
+    description: '',
+    position_id: undefined,
+    stages: [
+      { name: '入门阶段', order: 1 },
+      { name: '提升阶段', order: 2 },
+      { name: '进阶阶段', order: 3 },
+    ],
+    estimated_duration_days: 30,
+    is_active: true,
+    nodes: [],
+  }
+}
+
+/**
+ * 编辑路径
+ */
+const handleEditPath = async (row: GrowthPathListItem) => {
+  loading.value = true
+  try {
+    const detail = await getGrowthPathDetail(row.id)
+    editingPath.value = {
+      id: detail.id,
+      name: detail.name,
+      description: detail.description,
+      position_id: detail.position_id,
+      stages: detail.stages || [
+        { name: '入门阶段', order: 1 },
+        { name: '提升阶段', order: 2 },
+        { name: '进阶阶段', order: 3 },
+      ],
+      estimated_duration_days: detail.estimated_duration_days,
+      is_active: detail.is_active,
+      sort_order: detail.sort_order,
+      nodes: detail.nodes?.map(n => ({
+        course_id: n.course_id,
+        stage_name: n.stage_name,
+        title: n.title,
+        description: n.description,
+        order_num: n.order_num,
+        is_required: n.is_required,
+        prerequisites: n.prerequisites,
+        estimated_days: n.estimated_days,
+      })) || [],
+    }
+  } catch (error) {
+    console.error('加载路径详情失败:', error)
+    ElMessage.error('加载路径详情失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+/**
+ * 返回列表
+ */
+const handleBack = () => {
+  ElMessageBox.confirm('确定要返回吗？未保存的更改将丢失。', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(() => {
+    editingPath.value = null
+  }).catch(() => {})
+}
+
+/**
+ * 保存路径
+ */
+const handleSavePath = async () => {
+  if (!editingPath.value) return
+
+  if (!editingPath.value.name?.trim()) {
+    ElMessage.warning('请输入路径名称')
+    return
+  }
+
+  saving.value = true
+  try {
+    // 重新计算 order_num
+    const nodesWithOrder = editingPath.value.nodes.map((node, index) => ({
+      ...node,
+      order_num: index + 1,
+    }))
+
+    const payload = {
+      name: editingPath.value.name,
+      description: editingPath.value.description,
+      position_id: editingPath.value.position_id,
+      stages: editingPath.value.stages,
+      estimated_duration_days: editingPath.value.estimated_duration_days,
+      is_active: editingPath.value.is_active,
+      sort_order: editingPath.value.sort_order || 0,
+      nodes: nodesWithOrder,
+    }
+
+    if (editingPath.value.id) {
+      await updateGrowthPath(editingPath.value.id, payload)
+      ElMessage.success('更新成功')
+    } else {
+      await createGrowthPath(payload)
+      ElMessage.success('创建成功')
+    }
+
+    editingPath.value = null
+    loadGrowthPaths()
+  } catch (error: any) {
+    console.error('保存失败:', error)
+    ElMessage.error(error.message || '保存失败')
+  } finally {
+    saving.value = false
+  }
+}
+
+/**
+ * 切换启用状态
+ */
+const handleToggleStatus = async (row: GrowthPathListItem) => {
+  try {
+    await updateGrowthPath(row.id, { is_active: !row.is_active })
+    ElMessage.success(row.is_active ? '已禁用' : '已启用')
+    loadGrowthPaths()
+  } catch (error) {
+    console.error('切换状态失败:', error)
+    ElMessage.error('操作失败')
+  }
+}
+
+/**
+ * 删除路径
+ */
+const handleDeletePath = async (row: GrowthPathListItem) => {
+  try {
+    await ElMessageBox.confirm(
+      `确定要删除路径"${row.name}"吗？此操作不可恢复。`,
+      '删除确认',
       {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
-        type: 'warning'
+        type: 'warning',
       }
-    ).then(() => {
-      loadPathData()
-      hasChanges.value = false
-    }).catch(() => {
-      // 恢复原选择
-    })
-  } else {
-    loadPathData()
+    )
+    await deleteGrowthPath(row.id)
+    ElMessage.success('删除成功')
+    loadGrowthPaths()
+  } catch (error: any) {
+    if (error !== 'cancel') {
+      console.error('删除失败:', error)
+      ElMessage.error('删除失败')
+    }
   }
 }
 
 /**
- * 加载路径数据
+ * 添加阶段
  */
-const loadPathData = () => {
-  // 模拟加载不同岗位的路径数据
-  if (selectedPosition.value === 'sales') {
-    pathNodes.value = [
-      { id: 'n1', courseId: 'c5', title: '产品基础知识', duration: 180, required: true, x: 100, y: 50 },
-      { id: 'n2', courseId: 'c1', title: '客户沟通技巧', duration: 120, required: true, x: 350, y: 50 },
-      { id: 'n3', courseId: 'c2', title: '需求挖掘方法', duration: 90, required: true, x: 100, y: 250 },
-      { id: 'n4', courseId: 'c3', title: '异议处理技巧', duration: 60, required: false, x: 350, y: 250 }
-    ]
-    connections.value = [
-      { from: 'n1', to: 'n2' },
-      { from: 'n2', to: 'n3' },
-      { from: 'n2', to: 'n4' }
-    ]
-  } else {
-    pathNodes.value = []
-    connections.value = []
-  }
+const addStage = () => {
+  if (!editingPath.value) return
+  const order = editingPath.value.stages.length + 1
+  editingPath.value.stages.push({
+    name: `阶段${order}`,
+    order,
+  })
 }
 
 /**
- * 开始拖拽课程
+ * 移除阶段
  */
-const handleDragStart = (event: DragEvent, course: any) => {
+const removeStage = (index: number) => {
+  if (!editingPath.value) return
+  const stageName = editingPath.value.stages[index].name
+  
+  // 检查是否有课程在此阶段
+  const hasNodes = editingPath.value.nodes.some(n => n.stage_name === stageName)
+  if (hasNodes) {
+    ElMessage.warning('请先移除该阶段下的所有课程')
+    return
+  }
+  
+  editingPath.value.stages.splice(index, 1)
+}
+
+/**
+ * 课程搜索
+ */
+const handleCourseSearch = () => {
+  // 由计算属性自动处理
+}
+
+/**
+ * 检查课程是否已添加
+ */
+const isNodeAdded = (courseId: number) => {
+  return editingPath.value?.nodes?.some(n => n.course_id === courseId)
+}
+
+/**
+ * 获取某阶段的节点
+ */
+const getStageNodes = (stageName: string) => {
+  return editingPath.value?.nodes?.filter(n => n.stage_name === stageName) || []
+}
+
+/**
+ * 添加课程
+ */
+const handleAddCourse = (course: Course) => {
+  if (!editingPath.value) return
+  if (isNodeAdded(course.id)) {
+    ElMessage.warning('该课程已添加')
+    return
+  }
+
+  const defaultStage = editingPath.value.stages[0]?.name || '入门阶段'
+  editingPath.value.nodes.push({
+    course_id: course.id,
+    stage_name: defaultStage,
+    title: course.name || course.title || '',
+    description: course.description,
+    order_num: editingPath.value.nodes.length + 1,
+    is_required: true,
+    estimated_days: Math.ceil((course.duration_hours || course.estimatedDuration || 2) / 2),
+  })
+  ElMessage.success('已添加')
+}
+
+/**
+ * 拖拽开始
+ */
+const handleDragStart = (event: DragEvent, course: Course) => {
   event.dataTransfer!.effectAllowed = 'copy'
   event.dataTransfer!.setData('course', JSON.stringify(course))
 }
 
 /**
- * 处理放置
+ * 放置处理
  */
 const handleDrop = (event: DragEvent) => {
   event.preventDefault()
   const courseData = event.dataTransfer!.getData('course')
   if (!courseData) return
 
-  const course = JSON.parse(courseData)
-  const rect = canvasRef.value.getBoundingClientRect()
-  const scrollLeft = canvasRef.value.scrollLeft
-  const scrollTop = canvasRef.value.scrollTop
-  const x = event.clientX - rect.left + scrollLeft - 75 // 节点宽度的一半
-  const y = event.clientY - rect.top + scrollTop - 40 // 节点高度的一半
-
-  // 检查是否已存在
-  if (pathNodes.value.some(n => n.courseId === course.id)) {
-    ElMessage.warning('该课程已在路径中')
-    return
-  }
-
-  // 添加新节点
-  const newNode = {
-    id: `n${Date.now()}`,
-    courseId: course.id,
-    title: course.title,
-    duration: course.duration,
-    required: true,
-    x: Math.max(0, x), // 不限制最大值，让用户可以在更大的画布上放置
-    y: Math.max(0, y)
-  }
-
-  pathNodes.value.push(newNode)
-  hasChanges.value = true
-  ElMessage.success('课程添加成功')
+  const course = JSON.parse(courseData) as Course
+  handleAddCourse(course)
 }
 
 /**
- * 开始拖拽节点
+ * 切换必修/选修
  */
-const startDrag = (event: MouseEvent, node: any) => {
-  draggedNode.value = node
-  const rect = canvasRef.value.getBoundingClientRect()
-  const scrollLeft = canvasRef.value.scrollLeft
-  const scrollTop = canvasRef.value.scrollTop
-  dragOffset.value = {
-    x: event.clientX - rect.left + scrollLeft - node.x,
-    y: event.clientY - rect.top + scrollTop - node.y
-  }
-
-  const handleMouseMove = (e: MouseEvent) => {
-    if (!draggedNode.value) return
-    const rect = canvasRef.value.getBoundingClientRect()
-    const scrollLeft = canvasRef.value.scrollLeft
-    const scrollTop = canvasRef.value.scrollTop
-    draggedNode.value.x = Math.max(0, e.clientX - rect.left + scrollLeft - dragOffset.value.x)
-    draggedNode.value.y = Math.max(0, e.clientY - rect.top + scrollTop - dragOffset.value.y)
-    hasChanges.value = true
-  }
-
-  const handleMouseUp = () => {
-    draggedNode.value = null
-    document.removeEventListener('mousemove', handleMouseMove)
-    document.removeEventListener('mouseup', handleMouseUp)
-  }
-
-  document.addEventListener('mousemove', handleMouseMove)
-  document.addEventListener('mouseup', handleMouseUp)
+const toggleRequired = (node: CreateGrowthPathNode) => {
+  node.is_required = !node.is_required
 }
 
 /**
- * 显示节点菜单
+ * 移除节点
  */
-const showNodeMenu = (_event: MouseEvent, _node: any) => {
-  // 右键菜单逻辑
-}
-
-/**
- * 处理节点命令
- */
-const handleNodeCommand = (command: string, node: any) => {
-  switch (command) {
-    case 'required':
-      node.required = !node.required
-      hasChanges.value = true
-      break
-    case 'dependency':
-      currentNode.value = node
-      selectedDependencies.value = connections.value
-        .filter(c => c.to === node.id)
-        .map(c => c.from)
-      dependencyDialogVisible.value = true
-      break
-    case 'delete':
-      deleteNode(node)
-      break
+const removeNode = (node: CreateGrowthPathNode) => {
+  if (!editingPath.value) return
+  const index = editingPath.value.nodes.findIndex(n => n.course_id === node.course_id)
+  if (index > -1) {
+    editingPath.value.nodes.splice(index, 1)
+    ElMessage.success('已移除')
   }
 }
 
-/**
- * 删除节点
- */
-const deleteNode = (node: any) => {
-  ElMessageBox.confirm(
-    `确定要删除课程"${node.title}"吗？`,
-    '删除确认',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning'
-    }
-  ).then(() => {
-    // 删除节点
-    const index = pathNodes.value.findIndex(n => n.id === node.id)
-    if (index > -1) {
-      pathNodes.value.splice(index, 1)
-    }
-    // 删除相关连接
-    connections.value = connections.value.filter(c => c.from !== node.id && c.to !== node.id)
-    hasChanges.value = true
-    ElMessage.success('删除成功')
-  }).catch(() => {})
-}
-
-/**
- * 保存前置课程设置
- */
-const saveDependencies = () => {
-  if (!currentNode.value) return
-
-  // 移除旧的连接
-  connections.value = connections.value.filter(c => c.to !== currentNode.value.id)
-  
-  // 添加新的连接
-  selectedDependencies.value.forEach(fromId => {
-    connections.value.push({ from: fromId, to: currentNode.value.id })
-  })
-
-  hasChanges.value = true
-  dependencyDialogVisible.value = false
-  ElMessage.success('前置课程设置成功')
-}
-
-/**
- * 获取连接路径
- */
-const getConnectionPath = (conn: any) => {
-  const fromNode = pathNodes.value.find(n => n.id === conn.from)
-  const toNode = pathNodes.value.find(n => n.id === conn.to)
-  
-  if (!fromNode || !toNode) return ''
-
-  const x1 = fromNode.x + 75 // 节点中心
-  const y1 = fromNode.y + 80 // 节点底部
-  const x2 = toNode.x + 75 // 节点中心
-  const y2 = toNode.y // 节点顶部
-
-  // 贝塞尔曲线
-  const cx = (x1 + x2) / 2
-  const cy = (y1 + y2) / 2
-
-  return `M ${x1} ${y1} Q ${cx} ${cy} ${x2} ${y2}`
-}
-
-/**
- * 清空画布
- */
-const clearCanvas = () => {
-  ElMessageBox.confirm(
-    '确定要清空画布吗？此操作不可恢复。',
-    '清空确认',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning'
-    }
-  ).then(() => {
-    pathNodes.value = []
-    connections.value = []
-    hasChanges.value = true
-    ElMessage.success('画布已清空')
-  }).catch(() => {})
-}
-
-/**
- * 自动布局
- */
-const autoLayout = () => {
-  if (pathNodes.value.length === 0) {
-    ElMessage.warning('画布为空，无需布局')
-    return
-  }
-
-  // 简单的网格布局
-  const cols = 3
-  const xSpacing = 200
-  const ySpacing = 150
-  const startX = 50
-  const startY = 50
-
-  pathNodes.value.forEach((node, index) => {
-    const row = Math.floor(index / cols)
-    const col = index % cols
-    node.x = startX + col * xSpacing
-    node.y = startY + row * ySpacing
-  })
-
-  hasChanges.value = true
-  ElMessage.success('自动布局完成')
-}
-
-/**
- * 保存当前路径
- */
-const saveCurrentPath = () => {
-  if (!selectedPosition.value) {
-    ElMessage.warning('请先选择岗位')
-    return
-  }
-
-  ElMessageBox.confirm(
-    '确定要保存当前的成长路径吗？',
-    '保存确认',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'info'
-    }
-  ).then(() => {
-    // 模拟保存
-    setTimeout(() => {
-      hasChanges.value = false
-      ElMessage.success('成长路径保存成功')
-    }, 1000)
-  }).catch(() => {})
-}
-
-// 初始化
-loadPathData()
+// ========== 生命周期 ==========
+onMounted(() => {
+  loadPositions()
+  loadCourses()
+  loadGrowthPaths()
+})
 </script>
 
 <style lang="scss" scoped>
 .growth-path-management-container {
+  padding: 20px;
   height: calc(100vh - 60px);
   display: flex;
   flex-direction: column;
-  padding: 20px;
   box-sizing: border-box;
 
   .page-header {
@@ -673,281 +835,348 @@ loadPathData()
     justify-content: space-between;
     align-items: center;
     margin-bottom: 20px;
+    flex-shrink: 0;
+
+    .header-left {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+    }
 
     .page-title {
       font-size: 24px;
       font-weight: 600;
       color: #333;
+      margin: 0;
     }
 
     .header-actions {
       display: flex;
       gap: 12px;
-
-      .el-button {
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        border: none;
-      }
+      align-items: center;
     }
   }
 
-  .path-designer {
+  .path-list-card {
+    background: #fff;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    padding: 20px;
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+
+    .el-table {
+      flex: 1;
+    }
+
+    .path-name-cell {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+
+      .path-name {
+        font-weight: 500;
+      }
+    }
+
+    .node-count {
+      font-weight: 600;
+      color: #667eea;
+    }
+
+    .text-muted {
+      color: #909399;
+    }
+
+    .pagination-wrapper {
+      margin-top: 16px;
+      display: flex;
+      justify-content: flex-end;
+    }
+  }
+
+  .path-editor {
     flex: 1;
     display: flex;
     gap: 20px;
     min-height: 0;
-    height: 100%;
 
-    .card {
-      background: #fff;
-      border-radius: 8px;
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-      overflow: hidden;
-    }
-
-    .course-library {
+    .editor-sidebar {
       width: 320px;
       display: flex;
       flex-direction: column;
-      height: 100%;
+      gap: 16px;
+      overflow-y: auto;
 
-      .library-header {
-        padding: 16px 20px;
-        border-bottom: 1px solid #ebeef5;
+      .sidebar-section {
+        background: #fff;
+        border-radius: 8px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        padding: 20px;
 
         h3 {
           font-size: 16px;
           font-weight: 600;
           color: #333;
-          margin-bottom: 12px;
+          margin: 0 0 16px 0;
         }
-      }
 
-      .library-content {
-        flex: 1;
-        overflow-y: auto;
-        padding: 16px;
-        min-height: 0;
+        .section-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 16px;
 
-        .course-list {
+          h3 {
+            margin: 0;
+          }
+        }
+
+        .stages-list {
           display: flex;
           flex-direction: column;
           gap: 8px;
 
+          .stage-item {
+            .stage-order {
+              color: #667eea;
+              font-weight: 600;
+              margin-right: 4px;
+            }
+          }
+        }
+
+        .stats-grid {
+          display: grid;
+          grid-template-columns: repeat(3, 1fr);
+          gap: 12px;
+
+          .stat-item {
+            text-align: center;
+            padding: 12px 8px;
+            background: #f5f7fa;
+            border-radius: 6px;
+
+            .stat-value {
+              display: block;
+              font-size: 20px;
+              font-weight: 600;
+              color: #667eea;
+            }
+
+            .stat-label {
+              display: block;
+              font-size: 12px;
+              color: #909399;
+              margin-top: 4px;
+            }
+          }
+        }
+      }
+    }
+
+    .editor-main {
+      flex: 1;
+      min-width: 0;
+
+      .course-config-panel {
+        height: 100%;
+        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: 16px 20px;
+          border-bottom: 1px solid #ebeef5;
+
+          h3 {
+            font-size: 16px;
+            font-weight: 600;
+            color: #333;
+            margin: 0;
+          }
+        }
+
+        .course-library,
+        .selected-courses {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          min-height: 0;
+          border-bottom: 1px solid #ebeef5;
+
+          &:last-child {
+            border-bottom: none;
+          }
+
+          .library-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 12px 20px;
+            background: #fafafa;
+            font-weight: 500;
+          }
+
+          .library-content,
+          .selected-content {
+            flex: 1;
+            overflow-y: auto;
+            padding: 12px;
+          }
+
           .course-item {
             display: flex;
             align-items: center;
-            gap: 8px;
-            padding: 12px;
+            justify-content: space-between;
+            padding: 10px 12px;
+            margin-bottom: 8px;
             background: #f5f7fa;
             border-radius: 6px;
-            cursor: grab;
-            transition: all 0.3s ease;
+            cursor: pointer;
+            transition: all 0.2s;
 
             &:hover {
               background: #e6e8eb;
               transform: translateX(4px);
             }
 
-            &:active {
-              cursor: grabbing;
+            &.is-added {
+              background: #f0f9eb;
+              border: 1px solid #67c23a;
             }
 
-            > span {
+            .course-info {
               flex: 1;
-              font-size: 14px;
-              color: #333;
+              min-width: 0;
+
+              .course-name {
+                display: block;
+                font-size: 14px;
+                color: #333;
+                font-weight: 500;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+              }
+
+              .course-meta {
+                display: block;
+                font-size: 12px;
+                color: #909399;
+                margin-top: 2px;
+              }
             }
           }
-        }
-      }
-    }
 
-    .path-canvas {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      height: 100%;
+          .stage-section {
+            margin-bottom: 16px;
 
-      .canvas-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 16px 20px;
-        border-bottom: 1px solid #ebeef5;
-
-        h3 {
-          font-size: 16px;
-          font-weight: 600;
-          color: #333;
-        }
-
-        .canvas-actions {
-          display: flex;
-          gap: 12px;
-        }
-      }
-
-      .canvas-content {
-        flex: 1;
-        position: relative;
-        background: #fafafa;
-        overflow: auto;
-        min-height: 0;
-
-        .canvas-inner {
-          position: relative;
-          width: 100%;
-          min-width: 800px;
-          min-height: 900px;
-          background-image: 
-            linear-gradient(rgba(0, 0, 0, .05) 1px, transparent 1px),
-            linear-gradient(90deg, rgba(0, 0, 0, .05) 1px, transparent 1px);
-          background-size: 20px 20px;
-        }
-
-        .stage-divider {
-          position: absolute;
-          left: 0;
-          right: 0;
-          height: 1px;
-          background: #dcdfe6;
-
-          .stage-label {
-            position: absolute;
-            left: 20px;
-            top: -10px;
-            background: #fafafa;
-            padding: 0 8px;
-            font-size: 12px;
-            color: #909399;
-          }
-        }
-
-        .empty-state {
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          transform: translate(-50%, -50%);
-          text-align: center;
-
-          p {
-            margin-top: 16px;
-            font-size: 14px;
-            color: #909399;
-          }
-        }
-
-        .path-node {
-          position: absolute;
-          width: 150px;
-          padding: 16px;
-          background: #fff;
-          border: 2px solid #e4e7ed;
-          border-radius: 8px;
-          cursor: move;
-          transition: box-shadow 0.3s ease;
-          user-select: none;
-
-          &:hover {
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-          }
-
-          &.is-required {
-            border-color: #f56c6c;
-          }
-
-          .node-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: flex-start;
-            margin-bottom: 8px;
-
-            .node-title {
-              font-size: 14px;
+            .stage-header {
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              padding: 8px 12px;
+              background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+              color: #fff;
+              border-radius: 6px 6px 0 0;
               font-weight: 500;
-              color: #333;
-              flex: 1;
-              line-height: 1.4;
-            }
-          }
-
-          .node-info {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-
-            .node-duration {
-              font-size: 12px;
-              color: #909399;
-            }
-          }
-        }
-
-        .connections {
-          position: absolute;
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
-          pointer-events: none;
-        }
-      }
-
-      .canvas-footer {
-        padding: 16px 20px;
-        border-top: 1px solid #ebeef5;
-        background: #fff;
-
-        .path-stats {
-          display: flex;
-          gap: 32px;
-
-          .stat-item {
-            display: flex;
-            align-items: center;
-            gap: 4px;
-
-            .stat-label {
-              font-size: 14px;
-              color: #666;
             }
 
-            .stat-value {
-              font-size: 16px;
-              font-weight: 600;
-              color: #333;
+            .stage-nodes {
+              background: #fafafa;
+              border: 1px solid #ebeef5;
+              border-top: none;
+              border-radius: 0 0 6px 6px;
+              padding: 8px;
+              min-height: 60px;
+
+              .node-item {
+                display: flex;
+                align-items: center;
+                gap: 8px;
+                padding: 10px;
+                background: #fff;
+                border: 1px solid #ebeef5;
+                border-radius: 6px;
+                margin-bottom: 8px;
+
+                &:last-child {
+                  margin-bottom: 0;
+                }
+
+                .node-drag-handle {
+                  color: #c0c4cc;
+                  cursor: move;
+                }
+
+                .node-content {
+                  flex: 1;
+                  min-width: 0;
+
+                  .node-title {
+                    display: block;
+                    font-weight: 500;
+                    color: #333;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                  }
+
+                  .node-meta {
+                    display: flex;
+                    align-items: center;
+                    gap: 8px;
+                    margin-top: 4px;
+                    font-size: 12px;
+                    color: #909399;
+                  }
+                }
+
+                .node-actions {
+                  display: flex;
+                  align-items: center;
+                  gap: 8px;
+                }
+              }
+
+              .stage-empty {
+                text-align: center;
+                padding: 20px;
+                color: #909399;
+                font-size: 13px;
+              }
             }
           }
         }
       }
     }
   }
-
-  .dependency-content {
-    p {
-      margin-bottom: 16px;
-      font-size: 14px;
-      color: #666;
-    }
-
-    .el-checkbox-group {
-      display: flex;
-      flex-direction: column;
-      gap: 12px;
-    }
-  }
 }
 
 // 响应式
-@media (max-width: 1024px) {
+@media (max-width: 1200px) {
   .growth-path-management-container {
-    .path-designer {
+    .path-editor {
       flex-direction: column;
 
-      .course-library {
+      .editor-sidebar {
         width: 100%;
-        height: 300px;
+        flex-direction: row;
+        flex-wrap: wrap;
+        overflow: visible;
+
+        .sidebar-section {
+          flex: 1;
+          min-width: 280px;
+        }
       }
     }
   }