601 lines
17 KiB
Vue
601 lines
17 KiB
Vue
|
<template>
|
|||
|
|
<div class="course-add">
|
|||
|
|
<!-- 页面头部 -->
|
|||
|
|
<div class="page-header">
|
|||
|
|
<el-button @click="handleCancel" :icon="ArrowLeft">返回</el-button>
|
|||
|
|
<h2 class="page-title">{{ props.courseID ? '编辑课程' : '新增课程' }}</h2>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<el-form
|
|||
|
|
ref="formRef"
|
|||
|
|
:model="currentCourseVO"
|
|||
|
|
:rules="rules"
|
|||
|
|
label-width="120px"
|
|||
|
|
>
|
|||
|
|
<!-- 基本信息 -->
|
|||
|
|
<el-card class="info-card" shadow="never">
|
|||
|
|
<template #header>
|
|||
|
|
<span class="card-header">基本信息</span>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<el-form-item label="课程名称" prop="course.name">
|
|||
|
|
<el-input v-model="currentCourseVO.course.name" placeholder="请输入课程名称" />
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-form-item label="课程封面" prop="course.coverImage">
|
|||
|
|
<FileUpload
|
|||
|
|
:as-dialog="false"
|
|||
|
|
list-type="cover"
|
|||
|
|
v-model:cover-url="currentCourseVO.course.coverImage"
|
|||
|
|
accept="image/*"
|
|||
|
|
:max-size="2"
|
|||
|
|
module="course"
|
|||
|
|
tip="建议尺寸 800x600"
|
|||
|
|
@success="handleCoverUploadSuccess"
|
|||
|
|
@remove="handleCoverRemove"
|
|||
|
|
/>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-form-item label="授课老师" prop="course.teacher">
|
|||
|
|
<el-input v-model="currentCourseVO.course.teacher" placeholder="请输入授课老师" />
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-form-item label="课程时长" prop="course.duration">
|
|||
|
|
<el-input-number
|
|||
|
|
v-model="currentCourseVO.course.duration"
|
|||
|
|
:min="0"
|
|||
|
|
placeholder="分钟"
|
|||
|
|
/>
|
|||
|
|
<span class="ml-2">分钟</span>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-form-item label="课程描述" prop="course.description">
|
|||
|
|
<el-input
|
|||
|
|
v-model="currentCourseVO.course.description"
|
|||
|
|
type="textarea"
|
|||
|
|
:rows="3"
|
|||
|
|
placeholder="请输入课程描述"
|
|||
|
|
/>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-form-item label="排序号" prop="course.orderNum">
|
|||
|
|
<el-input-number v-model="currentCourseVO.course.orderNum" :min="0" />
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-form-item label="状态" prop="course.status">
|
|||
|
|
<el-radio-group v-model="currentCourseVO.course.status">
|
|||
|
|
<el-radio :label="0">未上线</el-radio>
|
|||
|
|
<el-radio :label="1">已上线</el-radio>
|
|||
|
|
<el-radio :label="2">已下架</el-radio>
|
|||
|
|
</el-radio-group>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-card>
|
|||
|
|
|
|||
|
|
<!-- 章节管理 -->
|
|||
|
|
<el-card class="chapter-card" shadow="never">
|
|||
|
|
<template #header>
|
|||
|
|
<div class="card-header-flex">
|
|||
|
|
<span class="card-header">章节管理</span>
|
|||
|
|
<el-button type="primary" size="small" @click="addChapter">
|
|||
|
|
<el-icon><Plus /></el-icon>
|
|||
|
|
添加章节
|
|||
|
|
</el-button>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<div v-if="currentCourseVO.courseChapters.length === 0" class="empty-tip">
|
|||
|
|
暂无章节，请点击"添加章节"按钮添加
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<el-collapse v-model="activeChapters">
|
|||
|
|
<el-collapse-item
|
|||
|
|
v-for="(chapterVO, chapterIndex) in currentCourseVO.courseChapters"
|
|||
|
|
:key="chapterIndex"
|
|||
|
|
:name="chapterIndex"
|
|||
|
|
>
|
|||
|
|
<template #title>
|
|||
|
|
<div class="chapter-title">
|
|||
|
|
<span>章节 {{ chapterIndex + 1 }}: {{ chapterVO.chapter.name || '未命名章节' }}</span>
|
|||
|
|
<div class="chapter-actions" @click.stop>
|
|||
|
|
<el-button
|
|||
|
|
type="danger"
|
|||
|
|
size="small"
|
|||
|
|
link
|
|||
|
|
@click="removeChapter(chapterIndex)"
|
|||
|
|
>
|
|||
|
|
删除章节
|
|||
|
|
</el-button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<!-- 章节信息 -->
|
|||
|
|
<el-form-item :label="`章节${chapterIndex + 1}名称`" :prop="`courseChapters.${chapterIndex}.chapter.name`">
|
|||
|
|
<el-input v-model="chapterVO.chapter.name" placeholder="请输入章节名称" />
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-form-item :label="`章节${chapterIndex + 1}排序`" :prop="`courseChapters.${chapterIndex}.chapter.orderNum`">
|
|||
|
|
<el-input-number v-model="chapterVO.chapter.orderNum" :min="0" />
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<!-- 学习节点 -->
|
|||
|
|
<div class="nodes-section">
|
|||
|
|
<div class="nodes-header">
|
|||
|
|
<span class="nodes-title">学习节点</span>
|
|||
|
|
<el-button type="primary" size="small" @click="addNode(chapterIndex)">
|
|||
|
|
<el-icon><Plus /></el-icon>
|
|||
|
|
添加节点
|
|||
|
|
</el-button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div v-if="chapterVO.nodes.length === 0" class="empty-tip">
|
|||
|
|
暂无学习节点
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div v-else class="nodes-list">
|
|||
|
|
<el-card
|
|||
|
|
v-for="(node, nodeIndex) in chapterVO.nodes"
|
|||
|
|
:key="nodeIndex"
|
|||
|
|
class="node-card"
|
|||
|
|
shadow="hover"
|
|||
|
|
>
|
|||
|
|
<template #header>
|
|||
|
|
<div class="node-header">
|
|||
|
|
<span>节点 {{ nodeIndex + 1 }}: {{ node.name || '未命名节点' }}</span>
|
|||
|
|
<el-button
|
|||
|
|
type="danger"
|
|||
|
|
size="small"
|
|||
|
|
link
|
|||
|
|
@click="removeNode(chapterIndex, nodeIndex)"
|
|||
|
|
>
|
|||
|
|
删除
|
|||
|
|
</el-button>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<el-form-item label="节点名称">
|
|||
|
|
<el-input v-model="node.name" placeholder="请输入节点名称" />
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-form-item label="节点类型">
|
|||
|
|
<el-radio-group v-model="node.nodeType">
|
|||
|
|
<el-radio :label="0">文章资源</el-radio>
|
|||
|
|
<el-radio :label="1">富文本</el-radio>
|
|||
|
|
<el-radio :label="2">上传文件</el-radio>
|
|||
|
|
</el-radio-group>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<!-- 文章资源选择 -->
|
|||
|
|
<el-form-item v-if="node.nodeType === 0" label="选择文章">
|
|||
|
|
<el-select
|
|||
|
|
v-model="node.resourceID"
|
|||
|
|
filterable
|
|||
|
|
remote
|
|||
|
|
placeholder="搜索并选择文章"
|
|||
|
|
:remote-method="getNodeSearchMethod(chapterIndex, nodeIndex)"
|
|||
|
|
:loading="getNodeLoading(chapterIndex, nodeIndex)"
|
|||
|
|
style="width: 100%"
|
|||
|
|
>
|
|||
|
|
<el-option
|
|||
|
|
v-for="article in getNodeArticleOptions(chapterIndex, nodeIndex)"
|
|||
|
|
:key="article.resourceID"
|
|||
|
|
:label="article.title"
|
|||
|
|
:value="article.resourceID"
|
|||
|
|
/>
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<!-- 富文本编辑 -->
|
|||
|
|
<el-form-item v-if="node.nodeType === 1" label="内容编辑">
|
|||
|
|
<RichTextComponent v-model="node.content" />
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<!-- 文件上传 -->
|
|||
|
|
<el-form-item v-if="node.nodeType === 2" label="上传文件">
|
|||
|
|
<FileUpload
|
|||
|
|
:as-dialog="false"
|
|||
|
|
:multiple="false"
|
|||
|
|
module="course-node"
|
|||
|
|
:max-size="100"
|
|||
|
|
tip="支持上传视频、音频、文档等文件，单个文件不超过100MB"
|
|||
|
|
@success="(files) => handleNodeFileUploadSuccess(files, chapterIndex, nodeIndex)"
|
|||
|
|
/>
|
|||
|
|
<div v-if="node.videoUrl" class="file-info-display">
|
|||
|
|
<span>已上传文件</span>
|
|||
|
|
<el-button type="text" @click="node.videoUrl = ''">删除</el-button>
|
|||
|
|
</div>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-form-item label="节点时长">
|
|||
|
|
<el-input-number v-model="node.duration" :min="0" />
|
|||
|
|
<span class="ml-2">分钟</span>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-form-item label="是否必修">
|
|||
|
|
<el-switch
|
|||
|
|
v-model="node.isRequired"
|
|||
|
|
:active-value="1"
|
|||
|
|
:inactive-value="0"
|
|||
|
|
/>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-form-item label="排序号">
|
|||
|
|
<el-input-number v-model="node.orderNum" :min="0" />
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-card>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</el-collapse-item>
|
|||
|
|
</el-collapse>
|
|||
|
|
</el-card>
|
|||
|
|
|
|||
|
|
<!-- 操作按钮 -->
|
|||
|
|
<el-form-item class="action-buttons">
|
|||
|
|
<el-button type="primary" @click="handleSubmit" :loading="submitting">
|
|||
|
|
{{ courseID ? '更新课程' : '创建课程' }}
|
|||
|
|
</el-button>
|
|||
|
|
<el-button @click="handleCancel">取消</el-button>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-form>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import { ref, onMounted } from 'vue';
|
|||
|
|
import { ElMessage } from 'element-plus';
|
|||
|
|
import { Plus, ArrowLeft } from '@element-plus/icons-vue';
|
|||
|
|
import { FileUpload } from '@/components/file';
|
|||
|
|
import { RichTextComponent } from '@/components/text';
|
|||
|
|
import { courseApi } from '@/apis/study';
|
|||
|
|
import { resourceApi } from '@/apis/resource';
|
|||
|
|
import type { CourseNode, CourseVO, ChapterVO } from '@/types/study';
|
|||
|
|
import type { Resource } from '@/types/resource';
|
|||
|
|
import type { SysFile } from '@/types';
|
|||
|
|
|
|||
|
|
defineOptions({
|
|||
|
|
name: 'CourseAdd'
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 节点扩展类型（用于前端交互）
|
|||
|
|
interface NodeWithExtras extends CourseNode {
|
|||
|
|
loading?: boolean;
|
|||
|
|
articleOptions?: Resource[];
|
|||
|
|
searchMethod?: (query: string) => void;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
interface Props {
|
|||
|
|
courseID?: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const props = defineProps<Props>();
|
|||
|
|
const emit = defineEmits<{
|
|||
|
|
success: [];
|
|||
|
|
cancel: [];
|
|||
|
|
}>();
|
|||
|
|
|
|||
|
|
const formRef = ref();
|
|||
|
|
const submitting = ref(false);
|
|||
|
|
const activeChapters = ref<number[]>([]);
|
|||
|
|
|
|||
|
|
// 原始数据（用于比对）
|
|||
|
|
const originalCourseVO = ref<CourseVO>();
|
|||
|
|
// 当前编辑的数据
|
|||
|
|
const currentCourseVO = ref<CourseVO>({
|
|||
|
|
course: {
|
|||
|
|
name: '',
|
|||
|
|
coverImage: '',
|
|||
|
|
description: '',
|
|||
|
|
teacher: '',
|
|||
|
|
duration: 0,
|
|||
|
|
status: 0,
|
|||
|
|
orderNum: 0
|
|||
|
|
},
|
|||
|
|
courseChapters: [],
|
|||
|
|
courseTags: []
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 表单验证规则
|
|||
|
|
const rules = {
|
|||
|
|
'course.name': [{ required: true, message: '请输入课程名称', trigger: 'blur' }],
|
|||
|
|
'course.teacher': [{ required: true, message: '请输入授课老师', trigger: 'blur' }]
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
onMounted(() => {
|
|||
|
|
if (props.courseID) {
|
|||
|
|
loadCourse();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 加载课程数据
|
|||
|
|
async function loadCourse() {
|
|||
|
|
try {
|
|||
|
|
const res = await courseApi.getCourseById(props.courseID!);
|
|||
|
|
if (res.success && res.data) {
|
|||
|
|
// 保存原始数据
|
|||
|
|
originalCourseVO.value = JSON.parse(JSON.stringify(res.data));
|
|||
|
|
// 设置当前编辑数据
|
|||
|
|
currentCourseVO.value = JSON.parse(JSON.stringify(res.data));
|
|||
|
|
console.log(currentCourseVO.value);
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('加载课程失败:', error);
|
|||
|
|
ElMessage.error('加载课程失败');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 添加章节
|
|||
|
|
function addChapter() {
|
|||
|
|
const newChapterVO: ChapterVO = {
|
|||
|
|
chapter: {
|
|||
|
|
chapterID: '',
|
|||
|
|
name: '',
|
|||
|
|
orderNum: currentCourseVO.value.courseChapters.length
|
|||
|
|
},
|
|||
|
|
nodes: []
|
|||
|
|
};
|
|||
|
|
currentCourseVO.value.courseChapters.push(newChapterVO);
|
|||
|
|
activeChapters.value.push(currentCourseVO.value.courseChapters.length - 1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 删除章节
|
|||
|
|
function removeChapter(index: number) {
|
|||
|
|
currentCourseVO.value.courseChapters.splice(index, 1);
|
|||
|
|
// 更新激活的章节索引
|
|||
|
|
activeChapters.value = activeChapters.value
|
|||
|
|
.filter(i => i !== index)
|
|||
|
|
.map(i => i > index ? i - 1 : i);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 添加节点
|
|||
|
|
function addNode(chapterIndex: number) {
|
|||
|
|
const nodeIndex = currentCourseVO.value.courseChapters[chapterIndex].nodes.length;
|
|||
|
|
const newNode: NodeWithExtras = {
|
|||
|
|
nodeID: '',
|
|||
|
|
name: '',
|
|||
|
|
nodeType: 0,
|
|||
|
|
content: '',
|
|||
|
|
duration: 0,
|
|||
|
|
isRequired: 1,
|
|||
|
|
orderNum: nodeIndex,
|
|||
|
|
loading: false,
|
|||
|
|
articleOptions: [],
|
|||
|
|
searchMethod: (query: string) => searchArticles(query, chapterIndex, nodeIndex)
|
|||
|
|
};
|
|||
|
|
currentCourseVO.value.courseChapters[chapterIndex].nodes.push(newNode);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 删除节点
|
|||
|
|
function removeNode(chapterIndex: number, nodeIndex: number) {
|
|||
|
|
currentCourseVO.value.courseChapters[chapterIndex].nodes.splice(nodeIndex, 1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 辅助函数：获取节点的 searchMethod
|
|||
|
|
function getNodeSearchMethod(chapterIndex: number, nodeIndex: number) {
|
|||
|
|
const node = currentCourseVO.value.courseChapters[chapterIndex].nodes[nodeIndex] as NodeWithExtras;
|
|||
|
|
return node.searchMethod;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 辅助函数：获取节点的 loading 状态
|
|||
|
|
function getNodeLoading(chapterIndex: number, nodeIndex: number) {
|
|||
|
|
const node = currentCourseVO.value.courseChapters[chapterIndex].nodes[nodeIndex] as NodeWithExtras;
|
|||
|
|
return node.loading || false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 辅助函数：获取节点的 articleOptions
|
|||
|
|
function getNodeArticleOptions(chapterIndex: number, nodeIndex: number) {
|
|||
|
|
const node = currentCourseVO.value.courseChapters[chapterIndex].nodes[nodeIndex] as NodeWithExtras;
|
|||
|
|
return node.articleOptions || [];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 搜索文章
|
|||
|
|
async function searchArticles(query: string, chapterIndex: number, nodeIndex: number) {
|
|||
|
|
const node = currentCourseVO.value.courseChapters[chapterIndex].nodes[nodeIndex] as NodeWithExtras;
|
|||
|
|
if (!query) {
|
|||
|
|
node.articleOptions = [];
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
node.loading = true;
|
|||
|
|
try {
|
|||
|
|
const res = await resourceApi.getResourceList({
|
|||
|
|
keyword: query
|
|||
|
|
});
|
|||
|
|
if (res.success && res.dataList) {
|
|||
|
|
node.articleOptions = res.dataList;
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('搜索文章失败:', error);
|
|||
|
|
} finally {
|
|||
|
|
node.loading = false;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 处理封面上传成功
|
|||
|
|
function handleCoverUploadSuccess(files: SysFile[]) {
|
|||
|
|
if (files && files.length > 0) {
|
|||
|
|
// coverUrl已经通过v-model:cover-url自动更新了
|
|||
|
|
// 这里可以做一些额外的处理，比如记录fileID
|
|||
|
|
console.log('封面上传成功:', files[0]);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 处理封面删除
|
|||
|
|
function handleCoverRemove() {
|
|||
|
|
currentCourseVO.value.course.coverImage = '';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 处理节点文件上传成功
|
|||
|
|
function handleNodeFileUploadSuccess(files: SysFile[], chapterIndex: number, nodeIndex: number) {
|
|||
|
|
if (files && files.length > 0) {
|
|||
|
|
currentCourseVO.value.courseChapters[chapterIndex].nodes[nodeIndex].videoUrl = files[0].filePath || '';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 提交表单
|
|||
|
|
async function handleSubmit() {
|
|||
|
|
try {
|
|||
|
|
await formRef.value.validate();
|
|||
|
|
|
|||
|
|
submitting.value = true;
|
|||
|
|
|
|||
|
|
// 先创建/更新课程
|
|||
|
|
let courseID = props.courseID;
|
|||
|
|
if (courseID) {
|
|||
|
|
const res = await courseApi.updateCourse({
|
|||
|
|
...currentCourseVO.value.course,
|
|||
|
|
courseID
|
|||
|
|
});
|
|||
|
|
if (!res.success) {
|
|||
|
|
throw new Error('更新课程失败');
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
const res = await courseApi.createCourse(currentCourseVO.value);
|
|||
|
|
if (!res.success || !res.data?.course.courseID) {
|
|||
|
|
throw new Error('创建课程失败');
|
|||
|
|
}
|
|||
|
|
courseID = res.data.course.courseID;
|
|||
|
|
}
|
|||
|
|
ElMessage.success(props.courseID ? '课程更新成功' : '课程创建成功');
|
|||
|
|
emit('success');
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('保存失败:', error);
|
|||
|
|
ElMessage.error('保存失败');
|
|||
|
|
} finally {
|
|||
|
|
submitting.value = false;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 取消
|
|||
|
|
function handleCancel() {
|
|||
|
|
emit('cancel');
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.course-add {
|
|||
|
|
padding: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.page-header {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 16px;
|
|||
|
|
margin-bottom: 24px;
|
|||
|
|
|
|||
|
|
.page-title {
|
|||
|
|
font-size: 24px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #303133;
|
|||
|
|
margin: 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-card,
|
|||
|
|
.chapter-card {
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
|
|||
|
|
:deep(.el-card__body) {
|
|||
|
|
padding: 20px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-header {
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #303133;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-header-flex {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.ml-2 {
|
|||
|
|
margin-left: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chapter-title {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
width: 100%;
|
|||
|
|
padding-right: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chapter-actions {
|
|||
|
|
margin-left: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.nodes-section {
|
|||
|
|
margin-top: 20px;
|
|||
|
|
padding: 15px;
|
|||
|
|
background: #f5f7fa;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.nodes-header {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 15px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.nodes-title {
|
|||
|
|
font-size: 14px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #606266;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.nodes-list {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 15px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.node-card {
|
|||
|
|
:deep(.el-card__header) {
|
|||
|
|
padding: 12px 15px;
|
|||
|
|
background: #fafafa;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:deep(.el-card__body) {
|
|||
|
|
padding: 15px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.node-header {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.empty-tip {
|
|||
|
|
text-align: center;
|
|||
|
|
padding: 40px;
|
|||
|
|
color: #909399;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-buttons {
|
|||
|
|
margin-top: 30px;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.file-info-display {
|
|||
|
|
margin-top: 10px;
|
|||
|
|
padding: 10px;
|
|||
|
|
background: #f5f7fa;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
span {
|
|||
|
|
color: #606266;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|