feat: 重构成长路径编辑页面布局 - 上方基本信息/阶段/统计，下方左右分栏课程配置
Some checks failed
continuous-integration/drone/push Build is failing
Some checks failed
continuous-integration/drone/push Build is failing
This commit is contained in:
yuliang_guo
@@ -138,108 +138,116 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="path-editor">
|
||||
<!-- 左侧：基本信息 + 阶段配置 -->
|
||||
<div class="editor-sidebar">
|
||||
<div class="sidebar-section">
|
||||
<div class="path-editor-new">
|
||||
<!-- 上方：基本信息 + 学习阶段 + 路径统计 -->
|
||||
<div class="editor-top">
|
||||
<!-- 基本信息 -->
|
||||
<div class="top-section basic-info">
|
||||
<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_ids"
|
||||
placeholder="选择关联岗位（可多选）"
|
||||
multiple
|
||||
collapse-tags
|
||||
collapse-tags-tooltip
|
||||
clearable
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="pos in positions"
|
||||
:key="pos.id"
|
||||
:label="pos.name"
|
||||
:value="pos.id"
|
||||
<el-form label-position="top" :model="editingPath" size="small">
|
||||
<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="关联岗位" class="form-item-half">
|
||||
<el-select
|
||||
v-model="editingPath.position_ids"
|
||||
placeholder="选择关联岗位"
|
||||
multiple
|
||||
collapse-tags
|
||||
collapse-tags-tooltip
|
||||
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>
|
||||
</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-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-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"
|
||||
:max="365"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<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-button
|
||||
link
|
||||
type="danger"
|
||||
size="small"
|
||||
@click="removeStage(index)"
|
||||
:disabled="editingPath.stages.length <= 1"
|
||||
>
|
||||
<el-icon><Delete /></el-icon>
|
||||
</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
<el-button
|
||||
link
|
||||
type="danger"
|
||||
size="small"
|
||||
@click="removeStage(index)"
|
||||
:disabled="editingPath.stages.length <= 1"
|
||||
>
|
||||
<el-icon><Delete /></el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-section">
|
||||
<!-- 路径统计 -->
|
||||
<div class="top-section stats-section">
|
||||
<h3>路径统计</h3>
|
||||
<div class="stats-grid">
|
||||
<div class="stat-item">
|
||||
<div class="stats-row">
|
||||
<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,156 +255,149 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧：课程配置 -->
|
||||
<div class="editor-main">
|
||||
<div class="course-config-panel">
|
||||
<!-- 下方：左右分栏 -->
|
||||
<div class="editor-bottom">
|
||||
<!-- 左侧 1/3：可选课程 -->
|
||||
<div class="course-library-panel">
|
||||
<div class="panel-header">
|
||||
<h3>课程配置</h3>
|
||||
<span>可选课程</span>
|
||||
<el-tag size="small">{{ filteredCourses.length }} 门</el-tag>
|
||||
</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="搜索课程名称..."
|
||||
clearable
|
||||
size="small"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon><Search /></el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
<el-select
|
||||
v-model="courseCategory"
|
||||
placeholder="分类筛选"
|
||||
clearable
|
||||
size="small"
|
||||
style="width: 120px"
|
||||
>
|
||||
<el-option
|
||||
v-for="cat in courseCategories"
|
||||
:key="cat"
|
||||
:label="cat"
|
||||
:value="cat"
|
||||
/>
|
||||
</el-select>
|
||||
</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="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"
|
||||
:class="{ 'is-dragging-over': isDraggingOver }"
|
||||
@dragover.prevent="handleDragOver"
|
||||
@dragleave="handleDragLeave"
|
||||
@drop="handleDrop"
|
||||
<div class="course-filter">
|
||||
<el-input
|
||||
v-model="courseSearch"
|
||||
placeholder="搜索课程..."
|
||||
clearable
|
||||
size="small"
|
||||
>
|
||||
<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>
|
||||
<template #prefix>
|
||||
<el-icon><Search /></el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
<el-select
|
||||
v-model="courseCategory"
|
||||
placeholder="分类"
|
||||
clearable
|
||||
size="small"
|
||||
style="width: 100px"
|
||||
>
|
||||
<el-option
|
||||
v-for="cat in courseCategories"
|
||||
:key="cat"
|
||||
:label="cat"
|
||||
:value="cat"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="course-list" 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="50" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧 2/3：已选课程配置 -->
|
||||
<div class="selected-courses-panel">
|
||||
<div class="panel-header">
|
||||
<span>已选课程配置</span>
|
||||
<el-tag size="small" type="success">{{ editingPath.nodes?.length || 0 }} 门</el-tag>
|
||||
</div>
|
||||
<div
|
||||
class="selected-content"
|
||||
:class="{ 'is-dragging-over': isDraggingOver }"
|
||||
@dragover.prevent="handleDragOver"
|
||||
@dragleave="handleDragLeave"
|
||||
@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: 90px"
|
||||
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 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
|
||||
v-if="getStageNodes(stage.name).length === 0"
|
||||
class="stage-empty"
|
||||
>
|
||||
拖拽或点击课程添加到此阶段
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<el-empty v-else description="请从左侧添加课程" :image-size="60">
|
||||
<template #description>
|
||||
<p>点击或拖拽左侧课程添加</p>
|
||||
</template>
|
||||
<el-empty v-else description="请从左侧添加课程" :image-size="80">
|
||||
<template #description>
|
||||
<p>从左侧课程库拖拽或点击添加课程</p>
|
||||
</template>
|
||||
</el-empty>
|
||||
</el-empty>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -995,92 +996,151 @@ onMounted(() => {
|
||||
}
|
||||
}
|
||||
|
||||
.path-editor {
|
||||
// 新布局样式
|
||||
.path-editor-new {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
min-height: 0;
|
||||
|
||||
.editor-sidebar {
|
||||
width: 320px;
|
||||
// 上方区域
|
||||
.editor-top {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
overflow-y: auto;
|
||||
flex-shrink: 0;
|
||||
|
||||
.sidebar-section {
|
||||
.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 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 12px;
|
||||
.stats-section {
|
||||
width: 200px;
|
||||
flex-shrink: 0;
|
||||
|
||||
.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 {
|
||||
height: 100%;
|
||||
// 左侧课程库 1/3
|
||||
.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,110 +1151,41 @@ onMounted(() => {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px 20px;
|
||||
padding: 12px 16px;
|
||||
background: #fafafa;
|
||||
border-radius: 8px 8px 0 0;
|
||||
font-weight: 500;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
}
|
||||
|
||||
.course-filter {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 10px 12px;
|
||||
background: #f5f7fa;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
.el-input {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.course-library {
|
||||
flex: 2; // 课程库占更多空间
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 300px;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
}
|
||||
|
||||
.selected-courses {
|
||||
.course-list {
|
||||
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;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.course-filter {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 12px 16px;
|
||||
background: #f5f7fa;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
|
||||
.el-input {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.library-content {
|
||||
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; }
|
||||
}
|
||||
overflow-y: auto;
|
||||
padding: 8px;
|
||||
|
||||
.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 {
|
||||
flex-direction: column;
|
||||
|
||||
.editor-sidebar {
|
||||
width: 100%;
|
||||
flex-direction: row;
|
||||
.path-editor-new {
|
||||
.editor-top {
|
||||
flex-wrap: wrap;
|
||||
overflow: visible;
|
||||
|
||||
.sidebar-section {
|
||||
.basic-info {
|
||||
width: 100%;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.stages-section,
|
||||
.stats-section {
|
||||
flex: 1;
|
||||
min-width: 280px;
|
||||
min-width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
.editor-bottom {
|
||||
flex-direction: column;
|
||||
|
||||
.course-library-panel {
|
||||
width: 100%;
|
||||
max-height: 300px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user