1998 lines
51 KiB
Vue
1998 lines
51 KiB
Vue
<template>
|
||
<n-config-provider :theme-overrides="themeOverrides">
|
||
<div class="block_3 flex-row justify-between" :class="{
|
||
'mobile-layout': isMobile,
|
||
'tablet-layout': isTablet,
|
||
'sidebar-collapsed': sidebarCollapsed
|
||
}">
|
||
|
||
<!-- 移动端菜单按钮 -->
|
||
<n-button v-if="isMobile" class="mobile-menu-toggle" quaternary @click="toggleSidebar">
|
||
<span class="menu-icon">☰</span>
|
||
</n-button>
|
||
|
||
<div class="chapter-editor flex-col" :class="{
|
||
'mobile-sidebar': isMobile,
|
||
'collapsed': sidebarCollapsed && isMobile
|
||
}">
|
||
<!-- 移动端关闭按钮 -->
|
||
<n-button v-if="isMobile" class="mobile-close" quaternary @click="toggleSidebar">
|
||
<span class="close-icon">×</span>
|
||
</n-button>
|
||
|
||
<n-button quaternary circle size="large" @click="goBack" class="back-button">
|
||
<template #icon>
|
||
<n-icon>
|
||
<ArrowBackOutline />
|
||
</n-icon>
|
||
</template>
|
||
</n-button>
|
||
|
||
<n-button class="header-section flex-row justify-between" type="primary" @click="addChapter">
|
||
<template #icon>
|
||
<img class="chapter-icon" referrerpolicy="no-referrer" src="/images/teacher/加号_4.png" />
|
||
</template>
|
||
<span class="section-title">添加章节</span>
|
||
</n-button>
|
||
|
||
<template v-for="(chapter, chapterIndex) in chapters" :key="chapter.id">
|
||
<div class="chapter-item flex-row" @click="toggleChapterExpansion(chapterIndex)" :class="{ 'collapsed': !chapter.expanded }">
|
||
<img class="chapter-arrow-icon" :class="{ 'rotated': !chapter.expanded }" referrerpolicy="no-referrer"
|
||
:src="chapter.expanded ? '/images/teacher/路径18.png' : '/images/teacher/collapse.png'" />
|
||
<span class="chapter-title">第{{ chapterIndex + 1 }}章 {{ chapter.name }}</span>
|
||
<n-dropdown v-show="chapter.expanded" :options="chapterMenuOptions" @select="(key: string) => handleChapterMenuSelect(key, chapterIndex)">
|
||
<img class="chapter-options-icon" :class="{ 'transparent': !chapter.expanded }"
|
||
referrerpolicy="no-referrer" src="/images/teacher/分组76.png" />
|
||
</n-dropdown>
|
||
</div>
|
||
<div v-show="chapter.expanded" v-for="section in chapter.sections" :key="section.id" class="chapter-content-item flex-row">
|
||
<div class="content-text-group flex-col justify-between justify-between">
|
||
<span class="content-title">{{ section.contentTitle }}</span>
|
||
<span class="content-description">{{ section.contentDescription }}</span>
|
||
</div>
|
||
<div class="action-menu flex-col" :class="{ 'visible': isMenuVisible }">
|
||
<span class="action-rename">重命名</span>
|
||
<span class="action-delete" @click="openDeleteModal">删除</span>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
<div class="chapter-detail-container flex-col" :class="{
|
||
'mobile-content': isMobile,
|
||
'tablet-content': isTablet,
|
||
'sidebar-collapsed-content': sidebarCollapsed && isMobile
|
||
}">
|
||
<div class="chapter-container" v-if="chapters.length">
|
||
<div class="chapter-header flex-row justify-between2">
|
||
<span class="chapter-title-text">第{{ currentChapterIndex + 1 }}章</span>
|
||
<n-button class="collapse-button flex-row justify-between" quaternary @click="toggleChapterExpansion()">
|
||
<span class="collapse-text">{{ chapters[currentChapterIndex].expanded ? '收起' : '展开' }}</span>
|
||
<img class="collapse-icon" :class="{ 'rotated': !chapters[currentChapterIndex].expanded }" referrerpolicy="no-referrer"
|
||
src="/images/teacher/箭头-灰.png" />
|
||
</n-button>
|
||
</div>
|
||
<div class="chapter-name-section flex-row justify-between">
|
||
<div class="chapter-name-label">
|
||
<span class="required-mark">*</span>
|
||
<span class="label-text">本章名称：</span>
|
||
</div>
|
||
<div class="chapter-name-input-container flex-row">
|
||
<n-input ref="chapterInputRef" v-model:value="chapters[currentChapterIndex].name" class="chapter-name-input"
|
||
placeholder="请输入本章名称" @blur="handleChapterNameBlur" @focus="handleChapterNameFocus" />
|
||
</div>
|
||
</div>
|
||
|
||
<div v-show="chapters[currentChapterIndex].expanded" v-for="(section, index) in chapters[currentChapterIndex].sections" :key="section.id"
|
||
class="chapter-content-container">
|
||
<n-divider class="chapter-divider" />
|
||
|
||
<div class="lesson-section flex-row justify-end">
|
||
<div class="lesson-label-wrapper">
|
||
<span class="lesson-required-mark">*</span>
|
||
<span class="lesson-label-text">第{{ ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十'][index] || (index
|
||
+ 1) }}节：</span>
|
||
</div>
|
||
<div class="lesson-input-container">
|
||
<n-input v-model:value="section.lessonName" class="lesson-input" placeholder="请输入章节"
|
||
@blur="handleLessonBlur" @focus="handleLessonFocus">
|
||
<template #suffix>
|
||
<n-button quaternary size="small" @click="() => removeLessonSection(section.id)">
|
||
<template #icon>
|
||
<img src="/images/teacher/关闭-灰.png" alt="关闭" style="width: 10px; height: 10px; padding: 0;" />
|
||
</template>
|
||
</n-button>
|
||
</template>
|
||
</n-input>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="courseware-section flex-row justify-end">
|
||
<span class="courseware-label">添加课件：</span>
|
||
<div class="courseware-input-container">
|
||
<n-select v-model:value="section.coursewareName" class="courseware-input" placeholder="课件准备PPT"
|
||
:options="coursewareOptions" filterable tag />
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 如果选择了课件类型，显示上传选项 -->
|
||
<div v-if="section.coursewareName" class="courseware-upload-section flex-row justify-end">
|
||
<span class="courseware-upload-label">选择文件：</span>
|
||
<div class="courseware-upload-container">
|
||
<CustomDropdown v-model="section.coursewareUploadOption" :options="coursewareUploadOptions" placeholder="请选择文件来源"
|
||
@change="(value: any) => handleCoursewareUploadOptionChange(section, value)" />
|
||
<!-- 隐藏的课件文件输入框 -->
|
||
<input type="file" :id="`courseware-file-upload-${section.id}`" class="file-input"
|
||
accept=".pdf,.doc,.docx,.ppt,.pptx,.mp4,.avi,.mov,.wmv"
|
||
@change="handleCoursewareFileUpload($event, section)" multiple />
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 显示已上传的课件文件列表 -->
|
||
<div v-if="section.coursewareFiles && section.coursewareFiles.length > 0"
|
||
class="uploaded-courseware-files-section flex-row justify-end">
|
||
<span class="uploaded-courseware-files-label">已选择课件：</span>
|
||
<div class="uploaded-files-container">
|
||
<div v-for="(file, fileIndex) in section.coursewareFiles" :key="fileIndex" class="file-item">
|
||
<span class="file-name">{{ file.name }}</span>
|
||
<button class="remove-file-btn" @click="removeCoursewareFile(section, fileIndex)">
|
||
<img src="/images/teacher/关闭-灰.png" alt="删除" style="width: 12px; height: 12px;" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="exam-section flex-row justify-end">
|
||
<span class="exam-label">添加考试/练习：</span>
|
||
<div class="exam-dropdown-container">
|
||
<CustomDropdown v-model="section.selectedExamOption" :options="examOptions" placeholder="请添加考试/练习"
|
||
@change="(value: any) => handleExamOptionChange(section, value)" />
|
||
<!-- 隐藏的文件输入框 -->
|
||
<input type="file" :id="`file-upload-${section.id}`" class="file-input"
|
||
accept=".pdf,.doc,.docx,.ppt,.pptx,.xls,.xlsx,.txt,.zip,.rar"
|
||
@change="handleFileUpload($event, section)" multiple ref="fileInputRef" />
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 显示已上传的文件列表 -->
|
||
<div v-if="section.uploadedFiles && section.uploadedFiles.length > 0"
|
||
class="uploaded-files-section flex-row justify-end">
|
||
<span class="uploaded-files-label">已上传文件：</span>
|
||
<div class="uploaded-files-container">
|
||
<div v-for="(file, fileIndex) in section.uploadedFiles" :key="fileIndex" class="file-item">
|
||
<span class="file-name">{{ file.name }}</span>
|
||
<button class="remove-file-btn" @click="removeFile(section, fileIndex)">
|
||
<img src="/images/teacher/关闭-灰.png" alt="删除" style="width: 12px; height: 12px;" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="homework-section flex-row justify-end">
|
||
<span class="homework-label">添加作业：</span>
|
||
<div class="homework-input-container">
|
||
<HomeworkDropdown v-model="section.homeworkName" :options="homeworkOptions" placeholder="请添加作业"
|
||
@change="(value: any) => handleHomeworkOptionChange(section, value)" />
|
||
<!-- 隐藏的文件输入框用于作业上传 -->
|
||
<input type="file" :id="`homework-file-upload-${section.id}`" style="display: none;" multiple
|
||
accept=".pdf,.doc,.docx,.txt" @change="(event: any) => handleHomeworkFileUpload(event, section)" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<n-button v-show="chapters[currentChapterIndex].expanded" class="add-section-btn flex-row justify-between" quaternary
|
||
@click="addSection">
|
||
<template #icon>
|
||
<img class="add-section-icon" referrerpolicy="no-referrer" src="/images/teacher/加号(2).png" />
|
||
</template>
|
||
<span class="add-section-text">添加小节</span>
|
||
</n-button>
|
||
</div>
|
||
|
||
<n-modal v-model:show="showDeleteModal" preset="dialog" title="确认删除" content="确定要删除这个章节吗？" positive-text="确认"
|
||
negative-text="取消" @positive-click="handleDeleteConfirm" @negative-click="handleDeleteCancel" />
|
||
|
||
<!-- 试卷库模态框 -->
|
||
<ExamPaperLibraryModal v-model:show="showExamLibraryModal" @confirm="handleExamLibraryConfirm" />
|
||
|
||
<!-- 作业库模态框 -->
|
||
<HomeworkLibraryModal v-model:show="showHomeworkLibraryModal" @confirm="handleHomeworkLibraryConfirm" />
|
||
|
||
<!-- 资源库模态框 -->
|
||
<ResourceLibraryModal v-model:show="showResourceLibraryModal" @confirm="handleResourceLibraryConfirm" />
|
||
</div>
|
||
|
||
</n-config-provider>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, onMounted, onUnmounted } from 'vue';
|
||
import type { GlobalThemeOverrides } from 'naive-ui';
|
||
import CustomDropdown from '@/components/CustomDropdown.vue';
|
||
import HomeworkDropdown from '@/components/HomeworkDropdown.vue';
|
||
import ExamPaperLibraryModal from '@/components/ExamPaperLibraryModal.vue';
|
||
import HomeworkLibraryModal from '@/components/HomeworkLibraryModal.vue';
|
||
import ResourceLibraryModal from '@/components/ResourceLibraryModal.vue';
|
||
import { ArrowBackOutline } from '@vicons/ionicons5';
|
||
import { useRouter } from 'vue-router';
|
||
|
||
const router = useRouter();
|
||
|
||
// 控制菜单显示状态的响应式变量
|
||
const isMenuVisible = ref(false);
|
||
|
||
// 控制删除确认模态框的显示状态
|
||
const showDeleteModal = ref(false);
|
||
|
||
// 控制试卷库模态框的显示状态
|
||
const showExamLibraryModal = ref(false);
|
||
|
||
// 控制作业库模态框的显示状态
|
||
const showHomeworkLibraryModal = ref(false);
|
||
|
||
// 控制资源库模态框的显示状态
|
||
const showResourceLibraryModal = ref(false);
|
||
|
||
// 响应式相关状态
|
||
const isMobile = ref(false);
|
||
const isTablet = ref(false);
|
||
const sidebarCollapsed = ref(false);
|
||
|
||
// 定义section的类型
|
||
interface Section {
|
||
id: number;
|
||
lessonName: string;
|
||
coursewareName: string;
|
||
coursewareUploadOption: string;
|
||
coursewareFiles: File[];
|
||
selectedExamOption: string;
|
||
homeworkName: string;
|
||
uploadedFiles: File[];
|
||
homeworkFiles: File[];
|
||
contentTitle: string;
|
||
contentDescription: string;
|
||
}
|
||
|
||
// 定义章节的类型
|
||
interface Chapter {
|
||
id: number;
|
||
name: string;
|
||
expanded: boolean;
|
||
sections: Section[];
|
||
}
|
||
|
||
// 章节数据结构
|
||
const chapters = ref<Chapter[]>([
|
||
{
|
||
id: 1,
|
||
name: '课前准备',
|
||
expanded: true,
|
||
sections: [
|
||
{
|
||
id: 1,
|
||
lessonName: '开课彩蛋新开始',
|
||
coursewareName: '课件准备PPT',
|
||
coursewareUploadOption: '',
|
||
coursewareFiles: [],
|
||
selectedExamOption: '',
|
||
homeworkName: '请添加作业',
|
||
uploadedFiles: [],
|
||
homeworkFiles: [],
|
||
contentTitle: '1.开课彩蛋：新开始',
|
||
contentDescription: '第一节课程定位程定位与目标'
|
||
},
|
||
{
|
||
id: 2,
|
||
lessonName: '开课彩蛋新开始',
|
||
coursewareName: '课件准备PPT',
|
||
coursewareUploadOption: '',
|
||
coursewareFiles: [],
|
||
selectedExamOption: '',
|
||
homeworkName: '请添加作业',
|
||
uploadedFiles: [],
|
||
homeworkFiles: [],
|
||
contentTitle: '2.课程内容：扩展知识',
|
||
contentDescription: '第二节课程扩展内容'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
id: 2,
|
||
name: '课前准备',
|
||
expanded: false,
|
||
sections: [
|
||
{
|
||
id: 1,
|
||
lessonName: '课程导入基础知识',
|
||
coursewareName: '课件准备PPT',
|
||
coursewareUploadOption: '',
|
||
coursewareFiles: [],
|
||
selectedExamOption: '',
|
||
homeworkName: '请添加作业',
|
||
uploadedFiles: [],
|
||
homeworkFiles: [],
|
||
contentTitle: '2.课程导入：基础知识',
|
||
contentDescription: '第二节课程基础知识讲解'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
id: 3,
|
||
name: '课前准备',
|
||
expanded: false,
|
||
sections: [
|
||
{
|
||
id: 1,
|
||
lessonName: '实践操作技能训练',
|
||
coursewareName: '课件准备PPT',
|
||
coursewareUploadOption: '',
|
||
coursewareFiles: [],
|
||
selectedExamOption: '',
|
||
homeworkName: '请添加作业',
|
||
uploadedFiles: [],
|
||
homeworkFiles: [],
|
||
contentTitle: '3.实践操作：技能训练',
|
||
contentDescription: '第三节实践操作技能训练'
|
||
}
|
||
]
|
||
}
|
||
]);
|
||
|
||
// 当前选中的章节索引
|
||
const currentChapterIndex = ref(0);
|
||
|
||
// 下一个章节的ID
|
||
const nextChapterId = ref(4);
|
||
|
||
// 课件选项
|
||
const coursewareOptions = [
|
||
{ label: '课件准备PPT', value: '课件准备PPT' },
|
||
{ label: '视频课件', value: '视频课件' },
|
||
];
|
||
|
||
// 课件上传选项
|
||
const coursewareUploadOptions = [
|
||
{ label: '本地上传', value: '本地上传' },
|
||
{ label: '从资源库选择', value: '从资源库选择' }
|
||
];
|
||
|
||
// 作业选项
|
||
const homeworkOptions = [
|
||
{ label: '从作业库选择', value: '从作业库选择' },
|
||
{ label: '本地上传', value: '本地上传' }
|
||
];
|
||
|
||
// 输入框引用
|
||
const chapterInputRef = ref();
|
||
|
||
// Naive UI 主题配置
|
||
const themeOverrides: GlobalThemeOverrides = {
|
||
common: {
|
||
primaryColor: '#0288D1',
|
||
primaryColorHover: '#0277BD',
|
||
primaryColorPressed: '#01579B',
|
||
},
|
||
Button: {
|
||
textColorGhostPrimary: '#0288D1',
|
||
borderPrimary: '1px solid #0288D1',
|
||
},
|
||
Input: {
|
||
borderHover: '#0288D1',
|
||
borderFocus: '#0288D1',
|
||
},
|
||
Select: {
|
||
peers: {
|
||
InternalSelection: {
|
||
borderHover: '#0288D1',
|
||
borderFocus: '#0288D1',
|
||
}
|
||
}
|
||
}
|
||
};
|
||
|
||
// 章节菜单选项
|
||
const chapterMenuOptions = [
|
||
{
|
||
label: '重命名',
|
||
key: 'rename'
|
||
},
|
||
{
|
||
label: '删除',
|
||
key: 'delete'
|
||
}
|
||
];
|
||
|
||
// 考试选项
|
||
const examOptions = [
|
||
{
|
||
label: '从考试/练习选择',
|
||
value: '从考试/练习选择'
|
||
},
|
||
{
|
||
label: '本地上传',
|
||
value: '本地上传'
|
||
}
|
||
];
|
||
|
||
// 处理章节菜单选择
|
||
const handleChapterMenuSelect = (key: string, chapterIndex?: number) => {
|
||
const targetIndex = chapterIndex !== undefined ? chapterIndex : currentChapterIndex.value;
|
||
if (key === 'delete') {
|
||
deleteChapter(targetIndex);
|
||
} else if (key === 'rename') {
|
||
// 处理重命名逻辑
|
||
console.log('重命名章节', targetIndex);
|
||
}
|
||
};
|
||
|
||
// 处理章节名称失去焦点
|
||
const handleChapterNameBlur = () => {
|
||
// 可以在这里添加保存逻辑
|
||
console.log('章节名称已更新:', chapters.value[currentChapterIndex.value].name);
|
||
};
|
||
|
||
// 处理章节名称获得焦点
|
||
const handleChapterNameFocus = () => {
|
||
// 可以在这里添加获得焦点时的逻辑
|
||
console.log('开始编辑章节名称');
|
||
};
|
||
|
||
// 添加章节
|
||
const addChapter = () => {
|
||
// 先关闭所有现有章节
|
||
chapters.value.forEach((chapter) => {
|
||
chapter.expanded = false;
|
||
});
|
||
|
||
const newChapter: Chapter = {
|
||
id: nextChapterId.value,
|
||
name: `新章节${nextChapterId.value}`,
|
||
expanded: true,
|
||
sections: [
|
||
{
|
||
id: 1,
|
||
lessonName: '新小节',
|
||
coursewareName: '课件准备PPT',
|
||
coursewareUploadOption: '',
|
||
coursewareFiles: [],
|
||
selectedExamOption: '',
|
||
homeworkName: '请添加作业',
|
||
uploadedFiles: [],
|
||
homeworkFiles: [],
|
||
contentTitle: '1.新小节',
|
||
contentDescription: '新小节描述'
|
||
}
|
||
]
|
||
};
|
||
chapters.value.push(newChapter);
|
||
currentChapterIndex.value = chapters.value.length - 1;
|
||
nextChapterId.value++;
|
||
};
|
||
|
||
// 删除章节
|
||
const deleteChapter = (chapterIndex: number) => {
|
||
if (chapters.value.length > 1) {
|
||
chapters.value.splice(chapterIndex, 1);
|
||
|
||
// 调整当前章节索引
|
||
if (currentChapterIndex.value >= chapters.value.length) {
|
||
currentChapterIndex.value = chapters.value.length - 1;
|
||
} else if (currentChapterIndex.value > chapterIndex) {
|
||
currentChapterIndex.value--;
|
||
}
|
||
|
||
// 确保至少有一个章节是展开的
|
||
const hasExpandedChapter = chapters.value.some(chapter => chapter.expanded);
|
||
if (!hasExpandedChapter && chapters.value.length > 0) {
|
||
chapters.value[currentChapterIndex.value].expanded = true;
|
||
}
|
||
}
|
||
};
|
||
|
||
// 打开删除确认模态框
|
||
const openDeleteModal = () => {
|
||
showDeleteModal.value = true;
|
||
isMenuVisible.value = false; // 关闭操作菜单
|
||
};
|
||
|
||
// 处理删除确认
|
||
const handleDeleteConfirm = () => {
|
||
console.log('确认删除章节');
|
||
// 这里添加实际的删除逻辑
|
||
showDeleteModal.value = false;
|
||
};
|
||
|
||
// 处理删除取消
|
||
const handleDeleteCancel = () => {
|
||
console.log('取消删除章节');
|
||
showDeleteModal.value = false;
|
||
};
|
||
|
||
// 删除不再需要的课件相关方法，现在使用下拉框
|
||
|
||
// 检查屏幕尺寸
|
||
const checkScreenSize = () => {
|
||
const width = window.innerWidth;
|
||
isMobile.value = width <= 768;
|
||
isTablet.value = width > 768 && width <= 1024;
|
||
|
||
// 移动端自动收起侧边栏
|
||
if (isMobile.value) {
|
||
sidebarCollapsed.value = true;
|
||
}
|
||
};
|
||
|
||
// 切换侧边栏
|
||
const toggleSidebar = () => {
|
||
sidebarCollapsed.value = !sidebarCollapsed.value;
|
||
};
|
||
|
||
// 切换章节展开/收起状态
|
||
const toggleChapterExpansion = (chapterIndex?: number) => {
|
||
if (chapterIndex !== undefined) {
|
||
// 如果点击的章节已经展开，则关闭它
|
||
if (chapters.value[chapterIndex].expanded) {
|
||
chapters.value[chapterIndex].expanded = false;
|
||
} else {
|
||
// 关闭所有章节
|
||
chapters.value.forEach((chapter) => {
|
||
chapter.expanded = false;
|
||
});
|
||
// 展开点击的章节
|
||
chapters.value[chapterIndex].expanded = true;
|
||
currentChapterIndex.value = chapterIndex;
|
||
}
|
||
} else {
|
||
// 如果没有传递索引，则切换当前选中章节的状态
|
||
const currentExpanded = chapters.value[currentChapterIndex.value].expanded;
|
||
if (currentExpanded) {
|
||
chapters.value[currentChapterIndex.value].expanded = false;
|
||
} else {
|
||
// 关闭所有章节
|
||
chapters.value.forEach((chapter) => {
|
||
chapter.expanded = false;
|
||
});
|
||
// 展开当前章节
|
||
chapters.value[currentChapterIndex.value].expanded = true;
|
||
}
|
||
}
|
||
};
|
||
|
||
// 生命周期钩子
|
||
onMounted(() => {
|
||
checkScreenSize();
|
||
window.addEventListener('resize', checkScreenSize);
|
||
});
|
||
|
||
onUnmounted(() => {
|
||
window.removeEventListener('resize', checkScreenSize);
|
||
});
|
||
|
||
// 删除不再需要的作业相关方法，现在使用下拉框
|
||
|
||
// 课节相关方法
|
||
const handleLessonBlur = () => {
|
||
console.log('课节名称已更新');
|
||
};
|
||
|
||
const handleLessonFocus = () => {
|
||
console.log('开始编辑课节名称');
|
||
};
|
||
|
||
// 添加小节
|
||
const addSection = () => {
|
||
const currentChapter = chapters.value[currentChapterIndex.value];
|
||
const newSectionId = Math.max(...currentChapter.sections.map(s => s.id), 0) + 1;
|
||
const newSection: Section = {
|
||
id: newSectionId,
|
||
lessonName: '新小节',
|
||
coursewareName: '课件准备PPT',
|
||
coursewareUploadOption: '',
|
||
coursewareFiles: [],
|
||
selectedExamOption: '',
|
||
homeworkName: '请添加作业',
|
||
uploadedFiles: [],
|
||
homeworkFiles: [],
|
||
contentTitle: `${newSectionId}.新小节`,
|
||
contentDescription: '新小节描述'
|
||
};
|
||
currentChapter.sections.push(newSection);
|
||
};
|
||
|
||
// 处理考试选项变化
|
||
const handleExamOptionChange = (section: Section, value: any) => {
|
||
console.log('选项变化:', value, 'section id:', section.id);
|
||
// 如果选择的是"本地上传"，直接触发文件选择
|
||
if (value === '本地上传') {
|
||
console.log('触发文件选择');
|
||
const fileInput = document.getElementById(`file-upload-${section.id}`) as HTMLInputElement;
|
||
if (fileInput) {
|
||
fileInput.click();
|
||
} else {
|
||
console.error('找不到文件输入框:', `file-upload-${section.id}`);
|
||
}
|
||
} else if (value === '从考试/练习选择') {
|
||
// 如果选择的是"从考试/练习选择"，显示试卷库模态框
|
||
console.log('准备显示试卷库模态框');
|
||
showExamLibraryModal.value = true;
|
||
console.log('showExamLibraryModal.value:', showExamLibraryModal.value);
|
||
}
|
||
};
|
||
|
||
// 处理课件上传选项变化
|
||
const handleCoursewareUploadOptionChange = (section: Section, value: any) => {
|
||
console.log('课件上传选项变化:', value, 'section id:', section.id);
|
||
// 如果选择的是"本地上传"，直接触发文件选择
|
||
if (value === '本地上传') {
|
||
console.log('触发课件文件选择');
|
||
const fileInput = document.getElementById(`courseware-file-upload-${section.id}`) as HTMLInputElement;
|
||
if (fileInput) {
|
||
fileInput.click();
|
||
} else {
|
||
console.error('找不到课件文件输入框:', `courseware-file-upload-${section.id}`);
|
||
}
|
||
} else if (value === '从资源库选择') {
|
||
// 如果选择的是"从资源库选择"，显示资源库模态框
|
||
console.log('准备显示资源库模态框');
|
||
showResourceLibraryModal.value = true;
|
||
console.log('showResourceLibraryModal.value:', showResourceLibraryModal.value);
|
||
}
|
||
};
|
||
|
||
// 处理作业选项变化
|
||
const handleHomeworkOptionChange = (section: Section, value: any) => {
|
||
console.log('作业选项变化:', value, 'section id:', section.id);
|
||
// 如果选择的是"本地上传"，直接触发文件选择
|
||
if (value === '本地上传') {
|
||
console.log('触发作业文件选择');
|
||
const fileInput = document.getElementById(`homework-file-upload-${section.id}`) as HTMLInputElement;
|
||
if (fileInput) {
|
||
fileInput.click();
|
||
} else {
|
||
console.error('找不到作业文件输入框:', `homework-file-upload-${section.id}`);
|
||
}
|
||
} else if (value === '从作业库选择') {
|
||
// 如果选择的是"从作业库选择"，显示作业库模态框
|
||
console.log('准备显示作业库模态框');
|
||
showHomeworkLibraryModal.value = true;
|
||
console.log('showHomeworkLibraryModal.value:', showHomeworkLibraryModal.value);
|
||
showHomeworkLibraryModal.value = true;
|
||
console.log('showHomeworkLibraryModal.value:', showHomeworkLibraryModal.value);
|
||
}
|
||
};
|
||
|
||
// 处理文件上传
|
||
const handleFileUpload = (event: Event, section: Section) => {
|
||
const target = event.target as HTMLInputElement;
|
||
if (target.files) {
|
||
const files = Array.from(target.files);
|
||
section.uploadedFiles = files;
|
||
console.log('文件已上传:', files);
|
||
}
|
||
};
|
||
|
||
// 处理课件文件上传
|
||
const handleCoursewareFileUpload = (event: Event, section: Section) => {
|
||
const target = event.target as HTMLInputElement;
|
||
if (target.files) {
|
||
const files = Array.from(target.files);
|
||
section.coursewareFiles = files;
|
||
console.log('课件文件已上传:', files);
|
||
}
|
||
};
|
||
|
||
// 处理作业文件上传
|
||
const handleHomeworkFileUpload = (event: any, section: Section) => {
|
||
const target = event.target as HTMLInputElement;
|
||
if (target.files) {
|
||
const files = Array.from(target.files);
|
||
section.homeworkFiles = files;
|
||
console.log('作业文件已上传:', files);
|
||
}
|
||
};
|
||
|
||
// 删除文件
|
||
const removeFile = (section: Section, fileIndex: number) => {
|
||
section.uploadedFiles.splice(fileIndex, 1);
|
||
};
|
||
|
||
// 删除课件文件
|
||
const removeCoursewareFile = (section: Section, fileIndex: number) => {
|
||
section.coursewareFiles.splice(fileIndex, 1);
|
||
};
|
||
|
||
// 处理试卷库选择确认
|
||
const handleExamLibraryConfirm = (selectedExams: any[]) => {
|
||
console.log('选择的试卷:', selectedExams);
|
||
// 这里可以处理选择的试卷，比如更新当前section的数据
|
||
// 暂时只是关闭模态框
|
||
showExamLibraryModal.value = false;
|
||
};
|
||
|
||
// 处理作业库选择确认
|
||
const handleHomeworkLibraryConfirm = (selectedHomework: any[]) => {
|
||
console.log('选择的作业:', selectedHomework);
|
||
// 这里可以处理选择的作业，比如更新当前section的数据
|
||
// 暂时只是关闭模态框
|
||
showHomeworkLibraryModal.value = false;
|
||
};
|
||
|
||
// 处理资源库选择确认
|
||
const handleResourceLibraryConfirm = (selectedResources: any[]) => {
|
||
console.log('选择的资源:', selectedResources);
|
||
// 这里可以处理选择的资源，比如更新当前section的数据
|
||
// 暂时只是关闭模态框
|
||
showResourceLibraryModal.value = false;
|
||
};
|
||
|
||
// 删除课节
|
||
const removeLessonSection = (sectionId: number, chapterIndex?: number) => {
|
||
const targetChapterIndex = chapterIndex !== undefined ? chapterIndex : currentChapterIndex.value;
|
||
const chapter = chapters.value[targetChapterIndex];
|
||
const index = chapter.sections.findIndex((section: Section) => section.id === sectionId);
|
||
if (index > -1 && chapter.sections.length > 1) {
|
||
chapter.sections.splice(index, 1);
|
||
}
|
||
};
|
||
|
||
const goBack = () => {
|
||
router.back();
|
||
}
|
||
|
||
// 删除未使用的方法
|
||
</script>
|
||
|
||
|
||
<style scoped>
|
||
/* Naive UI 组件样式覆盖 */
|
||
:deep(.n-button.mobile-menu-toggle) {
|
||
position: fixed;
|
||
top: 20px;
|
||
left: 20px;
|
||
z-index: 1001;
|
||
background: #0288D1 !important;
|
||
color: white !important;
|
||
border: none !important;
|
||
border-radius: 4px !important;
|
||
padding: 10px !important;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
|
||
width: auto !important;
|
||
height: auto !important;
|
||
}
|
||
|
||
.back-button{
|
||
margin: 10px 0 0 10px;
|
||
}
|
||
|
||
:deep(.n-button.mobile-close) {
|
||
position: absolute;
|
||
top: 15px;
|
||
right: 15px;
|
||
background: #f5f5f5 !important;
|
||
border: none !important;
|
||
border-radius: 50% !important;
|
||
width: 30px !important;
|
||
height: 30px !important;
|
||
z-index: 1002;
|
||
color: #666 !important;
|
||
}
|
||
|
||
:deep(.n-button.header-section) {
|
||
background-color: #0288D1 !important;
|
||
border-radius: 4px !important;
|
||
margin: 31px 0 0 40px !important;
|
||
border: none !important;
|
||
padding: 0 !important;
|
||
}
|
||
|
||
:deep(.n-button.collapse-button) {
|
||
width: 54px !important;
|
||
height: 22px !important;
|
||
background: transparent !important;
|
||
border: none !important;
|
||
padding: 0 !important;
|
||
color: rgba(102, 102, 102, 1) !important;
|
||
}
|
||
|
||
:deep(.n-button.collapse-button .n-button__content) {
|
||
display: flex !important;
|
||
align-items: center !important;
|
||
gap: 10px !important;
|
||
}
|
||
|
||
/* 全局输入框样式重置 */
|
||
:deep(.n-input) {
|
||
box-sizing: border-box !important;
|
||
}
|
||
|
||
:deep(.n-input .n-input-wrapper) {
|
||
box-sizing: border-box !important;
|
||
display: flex !important;
|
||
align-items: center !important;
|
||
min-height: 40px !important;
|
||
}
|
||
|
||
:deep(.n-input .n-input__input-el) {
|
||
box-sizing: border-box !important;
|
||
vertical-align: middle !important;
|
||
}
|
||
|
||
:deep(.n-input .n-input__suffix) {
|
||
box-sizing: border-box !important;
|
||
display: flex !important;
|
||
align-items: center !important;
|
||
justify-content: center !important;
|
||
height: 100% !important;
|
||
}
|
||
|
||
:deep(.n-select .n-base-selection) {
|
||
box-sizing: border-box !important;
|
||
display: flex !important;
|
||
align-items: center !important;
|
||
}
|
||
|
||
:deep(.n-select .n-base-selection-input) {
|
||
box-sizing: border-box !important;
|
||
display: flex !important;
|
||
align-items: center !important;
|
||
}
|
||
|
||
:deep(.n-select .n-base-suffix) {
|
||
display: flex !important;
|
||
align-items: center !important;
|
||
justify-content: center !important;
|
||
height: 100% !important;
|
||
}
|
||
|
||
:deep(.n-input.chapter-name-input) {
|
||
width: 100% !important;
|
||
height: 42px !important;
|
||
border: 1px solid #e0e0e0 !important;
|
||
border-radius: 4px !important;
|
||
}
|
||
|
||
:deep(.n-input.chapter-name-input .n-input-wrapper) {
|
||
padding: 0 12px !important;
|
||
}
|
||
|
||
:deep(.n-input.chapter-name-input .n-input__input-el) {
|
||
line-height: 40px !important;
|
||
font-size: 14px !important;
|
||
color: #333 !important;
|
||
}
|
||
|
||
:deep(.n-input.chapter-name-input .n-input__suffix) {
|
||
display: flex !important;
|
||
align-items: center !important;
|
||
justify-content: center !important;
|
||
height: 100% !important;
|
||
min-width: 24px !important;
|
||
}
|
||
|
||
:deep(.n-input.lesson-input) {
|
||
width: 100% !important;
|
||
height: 42px !important;
|
||
border: 1px solid #e0e0e0 !important;
|
||
border-radius: 4px !important;
|
||
}
|
||
|
||
:deep(.n-input.lesson-input .n-input-wrapper) {
|
||
padding: 0 12px !important;
|
||
}
|
||
|
||
:deep(.n-input.lesson-input .n-input__input-el) {
|
||
line-height: 40px !important;
|
||
font-size: 14px !important;
|
||
color: #333 !important;
|
||
}
|
||
|
||
:deep(.n-input.lesson-input .n-input__suffix) {
|
||
display: flex !important;
|
||
align-items: center !important;
|
||
justify-content: center !important;
|
||
height: 100% !important;
|
||
min-width: 24px !important;
|
||
}
|
||
|
||
:deep(.n-input.courseware-input) {
|
||
width: 100% !important;
|
||
height: 42px !important;
|
||
border: 1px solid #e0e0e0 !important;
|
||
border-radius: 4px !important;
|
||
}
|
||
|
||
:deep(.n-input.courseware-input .n-input-wrapper) {
|
||
padding: 0 12px !important;
|
||
}
|
||
|
||
:deep(.n-input.courseware-input .n-input__input-el) {
|
||
line-height: 40px !important;
|
||
font-size: 14px !important;
|
||
color: #333 !important;
|
||
}
|
||
|
||
:deep(.n-input.courseware-input .n-input__suffix) {
|
||
display: flex !important;
|
||
align-items: center !important;
|
||
justify-content: center !important;
|
||
height: 100% !important;
|
||
min-width: 24px !important;
|
||
}
|
||
|
||
:deep(.n-input.homework-input) {
|
||
width: 100% !important;
|
||
height: 42px !important;
|
||
border: 1px solid #e0e0e0 !important;
|
||
border-radius: 4px !important;
|
||
}
|
||
|
||
:deep(.n-input.homework-input .n-input-wrapper) {
|
||
padding: 0 12px !important;
|
||
}
|
||
|
||
:deep(.n-input.homework-input .n-input__input-el) {
|
||
line-height: 40px !important;
|
||
font-size: 14px !important;
|
||
color: #333 !important;
|
||
}
|
||
|
||
:deep(.n-input.homework-input .n-input__suffix) {
|
||
display: flex !important;
|
||
align-items: center !important;
|
||
justify-content: center !important;
|
||
height: 100% !important;
|
||
min-width: 24px !important;
|
||
}
|
||
|
||
:deep(.n-select.exam-dropdown-display) {
|
||
width: 100% !important;
|
||
height: 42px !important;
|
||
border: 1px solid #e0e0e0 !important;
|
||
border-radius: 4px !important;
|
||
}
|
||
|
||
:deep(.n-select.exam-dropdown-display .n-base-selection) {
|
||
height: 42px !important;
|
||
border: none !important;
|
||
}
|
||
|
||
:deep(.n-select.exam-dropdown-display .n-base-selection-input) {
|
||
height: 40px !important;
|
||
line-height: 40px !important;
|
||
padding: 0 12px !important;
|
||
}
|
||
|
||
:deep(.n-select.exam-dropdown-display .n-base-selection-input__content) {
|
||
font-size: 14px !important;
|
||
color: #333 !important;
|
||
}
|
||
|
||
:deep(.n-select.exam-dropdown-display .n-base-suffix) {
|
||
display: flex !important;
|
||
align-items: center !important;
|
||
justify-content: center !important;
|
||
height: 100% !important;
|
||
padding-right: 12px !important;
|
||
min-width: 24px !important;
|
||
}
|
||
|
||
/* 课件下拉框样式 */
|
||
:deep(.n-select.courseware-input) {
|
||
width: 100% !important;
|
||
height: 42px !important;
|
||
}
|
||
|
||
:deep(.n-select.courseware-input .n-base-selection) {
|
||
height: 42px !important;
|
||
border: 1px solid #e0e0e0 !important;
|
||
border-radius: 4px !important;
|
||
box-shadow: none !important;
|
||
background: #ffffff !important;
|
||
}
|
||
|
||
:deep(.n-select.courseware-input .n-base-selection-label) {
|
||
border: none !important;
|
||
box-shadow: none !important;
|
||
background: transparent !important;
|
||
}
|
||
|
||
:deep(.n-select.courseware-input .n-base-selection-input) {
|
||
height: 40px !important;
|
||
line-height: 40px !important;
|
||
padding: 0 12px !important;
|
||
border: none !important;
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
:deep(.n-select.courseware-input .n-base-selection-input__content) {
|
||
font-size: 14px !important;
|
||
color: #333 !important;
|
||
}
|
||
|
||
:deep(.n-select.courseware-input .n-base-suffix) {
|
||
display: flex !important;
|
||
align-items: center !important;
|
||
justify-content: center !important;
|
||
height: 100% !important;
|
||
padding-right: 12px !important;
|
||
min-width: 24px !important;
|
||
}
|
||
|
||
/* 作业下拉框样式 */
|
||
:deep(.n-select.homework-input) {
|
||
width: 100% !important;
|
||
height: 42px !important;
|
||
}
|
||
|
||
:deep(.n-select.homework-input .n-base-selection) {
|
||
height: 42px !important;
|
||
border: 1px solid #e0e0e0 !important;
|
||
border-radius: 4px !important;
|
||
box-shadow: none !important;
|
||
background: #ffffff !important;
|
||
}
|
||
|
||
:deep(.n-select.homework-input .n-base-selection-label) {
|
||
border: none !important;
|
||
box-shadow: none !important;
|
||
background: transparent !important;
|
||
}
|
||
|
||
:deep(.n-select.homework-input .n-base-selection-input) {
|
||
height: 40px !important;
|
||
line-height: 40px !important;
|
||
padding: 0 12px !important;
|
||
border: none !important;
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
:deep(.n-select.homework-input .n-base-selection-input__content) {
|
||
font-size: 14px !important;
|
||
color: #333 !important;
|
||
}
|
||
|
||
:deep(.n-select.homework-input .n-base-suffix) {
|
||
display: flex !important;
|
||
align-items: center !important;
|
||
justify-content: center !important;
|
||
height: 100% !important;
|
||
padding-right: 12px !important;
|
||
min-width: 24px !important;
|
||
}
|
||
|
||
:deep(.n-divider.chapter-divider) {
|
||
margin: 31px auto 0 !important;
|
||
width: 100% !important;
|
||
max-width: 1420px !important;
|
||
height: 1px !important;
|
||
background: #fff !important;
|
||
opacity: 1 !important;
|
||
padding: 0 30px;
|
||
}
|
||
|
||
:deep(.n-button.add-section-btn) {
|
||
width: 94px !important;
|
||
height: 23px !important;
|
||
margin: 49px 0 342px 65px !important;
|
||
background: transparent !important;
|
||
border: none !important;
|
||
padding: 0 !important;
|
||
color: rgba(2, 136, 209, 1) !important;
|
||
}
|
||
|
||
.block_3 {
|
||
width: 100%;
|
||
min-height: 100vh;
|
||
margin: 15px auto 0;
|
||
position: relative;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
/* 移动端菜单按钮 */
|
||
.mobile-menu-toggle {
|
||
display: none;
|
||
position: fixed;
|
||
top: 20px;
|
||
left: 20px;
|
||
z-index: 1001;
|
||
background: #0288D1;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 4px;
|
||
padding: 10px;
|
||
cursor: pointer;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
.menu-icon {
|
||
font-size: 18px;
|
||
font-style: normal;
|
||
}
|
||
|
||
/* 移动端关闭按钮 */
|
||
.mobile-close {
|
||
display: none;
|
||
position: absolute;
|
||
top: 15px;
|
||
right: 15px;
|
||
background: #f5f5f5;
|
||
border: none;
|
||
border-radius: 50%;
|
||
width: 30px;
|
||
height: 30px;
|
||
cursor: pointer;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 1002;
|
||
}
|
||
|
||
.close-icon {
|
||
font-size: 20px;
|
||
font-style: normal;
|
||
color: #666;
|
||
}
|
||
|
||
.flex-col {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.chapter-editor {
|
||
width: 273px;
|
||
min-height: 100vh;
|
||
border: none;
|
||
border-right: 1px solid #E6E6E6;
|
||
border-radius: 4px;
|
||
background: #FFFFFF 100% no-repeat;
|
||
background-size: 100% 100%;
|
||
transition: transform 0.3s ease;
|
||
position: relative;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.header-section {
|
||
width: 194px;
|
||
height: 48px;
|
||
background-color: #0288D1;
|
||
border-radius: 4px;
|
||
margin: 31px 0 0 40px;
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 4px;
|
||
align-items: center;
|
||
}
|
||
|
||
.chapter-icon {
|
||
width: 18px;
|
||
height: 18px;
|
||
}
|
||
|
||
.justify-between {
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.justify-between2 {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.flex-row {
|
||
display: flex;
|
||
flex-direction: row;
|
||
}
|
||
|
||
.section-title {
|
||
width: 64px;
|
||
height: 18px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(255, 255, 255, 1);
|
||
font-size: 16px;
|
||
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
|
||
font-weight: normal;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 18px;
|
||
}
|
||
|
||
.chapter-item {
|
||
width: 240px;
|
||
height: 54px;
|
||
background: #F5F8FB 100% no-repeat;
|
||
background-size: 100% 100%;
|
||
margin: 23px 0 0 16px;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
}
|
||
|
||
.chapter-item.collapsed {
|
||
background: transparent;
|
||
}
|
||
|
||
.chapter-item:hover {
|
||
background: rgba(2, 136, 209, 0.05);
|
||
}
|
||
|
||
.chapter-arrow-icon {
|
||
margin-left: 10px;
|
||
width: 9px;
|
||
height: 11px;
|
||
transform: rotate(180deg);
|
||
transition: transform 0.3s ease;
|
||
/* 旋转图标180度 */
|
||
}
|
||
|
||
.chapter-arrow-icon.rotated {
|
||
width: 11px;
|
||
height: 9px;
|
||
transform: rotate(0deg);
|
||
}
|
||
|
||
.chapter-title {
|
||
width: 131px;
|
||
height: 21px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(2, 136, 209, 1);
|
||
font-size: 18px;
|
||
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
|
||
font-weight: normal;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 21px;
|
||
transition: color 0.3s ease;
|
||
margin-right: 40px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.chapter-item.collapsed .chapter-title {
|
||
color: rgba(51, 51, 51, 1);
|
||
}
|
||
|
||
.chapter-options-icon {
|
||
width: 6px;
|
||
height: 20px;
|
||
margin-right: 5px;
|
||
transition: opacity 0.3s ease;
|
||
}
|
||
|
||
.chapter-options-icon.transparent {
|
||
opacity: 0 !important;
|
||
}
|
||
|
||
.chapter-item:hover .chapter-options-icon.transparent {
|
||
opacity: 0.8 !important;
|
||
}
|
||
|
||
.chapter-content-item {
|
||
/* width: 234px; */
|
||
height: auto;
|
||
/* min-height: 90px; */
|
||
margin: 8px 8px 0 31px;
|
||
padding: 12px 8px;
|
||
border-radius: 6px;
|
||
transition: all 0.3s ease;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.chapter-content-item:hover {
|
||
background: rgba(2, 136, 209, 0.08);
|
||
}
|
||
|
||
.content-text-group {
|
||
width: 100%;
|
||
height: auto;
|
||
margin: 0;
|
||
padding: 4px 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
}
|
||
|
||
.content-title {
|
||
height: auto;
|
||
overflow-wrap: break-word;
|
||
color: rgba(51, 51, 51, 1);
|
||
font-size: 15px;
|
||
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
|
||
font-weight: 600;
|
||
text-align: left;
|
||
line-height: 20px;
|
||
margin: 0;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
letter-spacing: 0.2px;
|
||
word-break: break-word;
|
||
}
|
||
|
||
.content-description {
|
||
height: auto;
|
||
overflow-wrap: break-word;
|
||
color: rgba(153, 153, 153, 1);
|
||
font-size: 13px;
|
||
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
|
||
font-weight: normal;
|
||
text-align: left;
|
||
line-height: 18px;
|
||
margin: 0;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
opacity: 0.75;
|
||
font-style: italic;
|
||
word-break: break-word;
|
||
}
|
||
|
||
.action-menu {
|
||
width: 102px;
|
||
height: 82px;
|
||
background-color: #FFFFFF;
|
||
border: 1px solid #E6E6E6;
|
||
border-radius: 4px;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
margin-left: -13px;
|
||
padding: 10px;
|
||
box-sizing: border-box;
|
||
display: none;
|
||
/* 默认隐藏菜单 */
|
||
}
|
||
|
||
/* 当菜单可见时显示 */
|
||
.action-menu.visible {
|
||
display: flex;
|
||
}
|
||
|
||
.action-rename {
|
||
width: 42px;
|
||
height: 17px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(51, 51, 51, 1);
|
||
font-size: 14px;
|
||
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
|
||
font-weight: normal;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 17px;
|
||
margin: 3px 0 0 20px;
|
||
}
|
||
|
||
.action-delete {
|
||
width: 28px;
|
||
height: 17px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(51, 51, 51, 1);
|
||
font-size: 14px;
|
||
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
|
||
font-weight: normal;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 17px;
|
||
margin: 14px 0 0 20px;
|
||
}
|
||
|
||
|
||
|
||
.chapter-detail-container {
|
||
position: relative;
|
||
flex: 1;
|
||
min-height: 100vh;
|
||
background: #ffffff;
|
||
padding: 0 20px;
|
||
box-sizing: border-box;
|
||
transition: margin-left 0.3s ease;
|
||
max-width: calc(100% - 273px);
|
||
}
|
||
|
||
.chapter-header {
|
||
height: 22px;
|
||
margin: 46px 0 0 20px;
|
||
}
|
||
|
||
.chapter-title-text {
|
||
width: 54px;
|
||
height: 21px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(51, 51, 51, 1);
|
||
font-size: 20px;
|
||
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
|
||
font-weight: 600;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 21px;
|
||
}
|
||
|
||
.collapse-button {
|
||
width: 54px;
|
||
height: 22px;
|
||
position: relative;
|
||
right: 20px;
|
||
}
|
||
|
||
.collapse-text {
|
||
width: 32px;
|
||
height: 18px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(102, 102, 102, 1);
|
||
font-size: 16px;
|
||
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
|
||
font-weight: normal;
|
||
text-align: center;
|
||
white-space: nowrap;
|
||
line-height: 18px;
|
||
}
|
||
|
||
|
||
.chapter-name-section {
|
||
width: 100%;
|
||
max-width: 540px;
|
||
height: 42px;
|
||
margin: 21px 0 0 20px;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
}
|
||
|
||
.chapter-name-label {
|
||
width: 120px;
|
||
height: 18px;
|
||
overflow-wrap: break-word;
|
||
font-size: 0;
|
||
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
|
||
font-weight: normal;
|
||
text-align: right;
|
||
white-space: nowrap;
|
||
line-height: 18px;
|
||
margin-top: 9px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.required-mark {
|
||
width: 120px;
|
||
height: 18px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(255, 77, 79, 1);
|
||
font-size: 16px;
|
||
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
|
||
font-weight: normal;
|
||
text-align: right;
|
||
white-space: nowrap;
|
||
line-height: 18px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.label-text {
|
||
width: 120px;
|
||
height: 18px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(51, 51, 51, 1);
|
||
font-size: 16px;
|
||
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
|
||
font-weight: normal;
|
||
text-align: right;
|
||
white-space: nowrap;
|
||
line-height: 18px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.chapter-name-input-container {
|
||
width: 400px;
|
||
height: 42px;
|
||
}
|
||
|
||
/* 删除旧的章节名称输入框样式，使用 Naive UI 样式 */
|
||
|
||
.chapter-name-input:focus {
|
||
background: rgba(240, 248, 255, 0.5);
|
||
}
|
||
|
||
/* 编辑图标容器 */
|
||
/* 删除未使用的编辑图标相关样式 */
|
||
|
||
/* 课件输入框容器 */
|
||
.courseware-input-container {
|
||
width: 400px;
|
||
height: 42px;
|
||
margin: 1px 0 0 5px;
|
||
}
|
||
|
||
/* 课件上传选项部分 */
|
||
.courseware-upload-section {
|
||
width: 100%;
|
||
max-width: 540px;
|
||
height: 42px;
|
||
margin: 10px 0 0 20px;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
}
|
||
|
||
.courseware-upload-label {
|
||
width: 120px;
|
||
height: 18px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(51, 51, 51, 1);
|
||
font-size: 16px;
|
||
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
|
||
font-weight: normal;
|
||
text-align: right;
|
||
white-space: nowrap;
|
||
line-height: 18px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.courseware-upload-container {
|
||
width: 400px;
|
||
height: 42px;
|
||
margin: 1px 0 0 5px;
|
||
position: relative;
|
||
}
|
||
|
||
/* 已上传课件文件部分 */
|
||
.uploaded-courseware-files-section {
|
||
width: 100%;
|
||
max-width: 540px;
|
||
height: auto;
|
||
margin: 10px 0 0 20px;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.uploaded-courseware-files-label {
|
||
width: 120px;
|
||
height: 18px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(51, 51, 51, 1);
|
||
font-size: 16px;
|
||
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
|
||
font-weight: normal;
|
||
text-align: right;
|
||
white-space: nowrap;
|
||
line-height: 18px;
|
||
flex-shrink: 0;
|
||
margin-top: 12px;
|
||
}
|
||
|
||
/* 删除旧的课件输入框样式，使用 Naive UI 样式 */
|
||
|
||
.courseware-dropdown-icon {
|
||
position: absolute;
|
||
right: 2px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
width: 16px;
|
||
height: 16px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
/* 删除未使用的 svg 样式 */
|
||
|
||
/* 考试/练习下拉框容器 */
|
||
.exam-dropdown-container {
|
||
width: 400px;
|
||
height: 42px;
|
||
margin: 1px 0 0 5px;
|
||
position: relative;
|
||
}
|
||
|
||
/* 删除多余的下拉框样式，使用 Naive UI 原生样式 */
|
||
|
||
.exam-dropdown-text {
|
||
color: rgba(102, 102, 102, 1);
|
||
font-size: 16px;
|
||
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
|
||
font-weight: normal;
|
||
text-align: left;
|
||
line-height: 18px;
|
||
flex: 1;
|
||
}
|
||
|
||
.exam-dropdown-icon {
|
||
width: 16px;
|
||
height: 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: transform 0.3s;
|
||
}
|
||
|
||
.exam-dropdown-icon.rotated {
|
||
transform: rotate(180deg);
|
||
}
|
||
|
||
/* 删除未使用的 svg 样式 */
|
||
|
||
.exam-dropdown-menu {
|
||
position: absolute;
|
||
top: 100%;
|
||
left: 0;
|
||
right: 0;
|
||
background: #ffffff;
|
||
border: 1px solid #e0e0e0;
|
||
border-radius: 4px;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
z-index: 1000;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.exam-dropdown-option {
|
||
padding: 12px;
|
||
color: rgba(102, 102, 102, 1);
|
||
font-size: 16px;
|
||
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
|
||
font-weight: normal;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
|
||
.exam-dropdown-option:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.exam-dropdown-option:hover {
|
||
background: rgba(24, 144, 255, 0.1);
|
||
color: #1890ff;
|
||
}
|
||
|
||
/* 删除未使用的 text_26 和 thumbnail_16 样式 */
|
||
|
||
.collapse-icon {
|
||
width: 13px;
|
||
height: 8px;
|
||
transition: transform 0.3s ease;
|
||
flex-shrink: 0;
|
||
object-fit: contain;
|
||
transform: rotate(180deg);
|
||
}
|
||
|
||
.collapse-icon.rotated {
|
||
transform: rotate(0deg);
|
||
}
|
||
|
||
.chapter-content-container {
|
||
position: relative;
|
||
width: 100%;
|
||
margin-bottom: 40px;
|
||
padding: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 30px;
|
||
transition: all 0.3s ease;
|
||
animation: fadeInUp 0.3s ease-out;
|
||
}
|
||
|
||
@keyframes fadeInUp {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
}
|
||
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
.chapter-divider {
|
||
margin: 31px auto 0;
|
||
width: 100%;
|
||
max-width: 540px;
|
||
height: 1px;
|
||
background: #CCCCCC;
|
||
display: block;
|
||
opacity: 1;
|
||
}
|
||
|
||
|
||
/* 删除未使用的 thumbnail_17 样式 */
|
||
|
||
.courseware-section {
|
||
width: 100%;
|
||
max-width: 540px;
|
||
height: 43px;
|
||
margin: 0 0 0 20px;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
}
|
||
|
||
.courseware-label {
|
||
width: 120px;
|
||
height: 18px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(51, 51, 51, 1);
|
||
font-size: 16px;
|
||
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
|
||
font-weight: normal;
|
||
text-align: right;
|
||
white-space: nowrap;
|
||
line-height: 18px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
|
||
/* 删除未使用的样式 */
|
||
|
||
.exam-section {
|
||
width: 100%;
|
||
max-width: 540px;
|
||
height: 42px;
|
||
margin: 0 0 0 20px;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
}
|
||
|
||
.exam-label {
|
||
width: 120px;
|
||
height: 18px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(51, 51, 51, 1);
|
||
font-size: 16px;
|
||
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
|
||
font-weight: normal;
|
||
text-align: right;
|
||
white-space: nowrap;
|
||
line-height: 18px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* 删除未使用的样式 */
|
||
|
||
|
||
.homework-section {
|
||
width: 100%;
|
||
max-width: 540px;
|
||
height: 42px;
|
||
margin: 0 0 0 20px;
|
||
margin-bottom: -30px;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
}
|
||
|
||
.homework-label {
|
||
width: 120px;
|
||
height: 18px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(51, 51, 51, 1);
|
||
font-size: 16px;
|
||
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
|
||
font-weight: normal;
|
||
text-align: right;
|
||
white-space: nowrap;
|
||
line-height: 18px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* 文件上传相关样式 */
|
||
.file-input {
|
||
display: none;
|
||
}
|
||
|
||
.uploaded-files-section {
|
||
width: 100%;
|
||
max-width: 540px;
|
||
height: auto;
|
||
margin: 10px 0 0 20px;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.uploaded-files-label {
|
||
width: 120px;
|
||
height: 18px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(51, 51, 51, 1);
|
||
font-size: 16px;
|
||
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
|
||
font-weight: normal;
|
||
text-align: right;
|
||
white-space: nowrap;
|
||
line-height: 18px;
|
||
flex-shrink: 0;
|
||
margin-top: 12px;
|
||
}
|
||
|
||
.uploaded-files-container {
|
||
width: 400px;
|
||
margin: 1px 0 0 5px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
|
||
.file-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 8px 12px;
|
||
background: #f5f5f5;
|
||
border-radius: 4px;
|
||
border: 1px solid #e0e0e0;
|
||
}
|
||
|
||
.file-name {
|
||
color: #333;
|
||
font-size: 14px;
|
||
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
|
||
flex: 1;
|
||
margin-right: 10px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.remove-file-btn {
|
||
background: none;
|
||
border: none;
|
||
cursor: pointer;
|
||
padding: 2px;
|
||
border-radius: 2px;
|
||
transition: background-color 0.3s ease;
|
||
}
|
||
|
||
.remove-file-btn:hover {
|
||
background: rgba(255, 77, 79, 0.1);
|
||
}
|
||
|
||
/* 删除未使用的样式 */
|
||
|
||
|
||
/* 删除未使用的 text-group_9 样式 */
|
||
|
||
.lesson-section {
|
||
position: relative;
|
||
width: 100%;
|
||
max-width: 540px;
|
||
height: 42px;
|
||
margin: 0 0 0 20px;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
}
|
||
|
||
.lesson-label-wrapper {
|
||
width: 120px;
|
||
height: 18px;
|
||
overflow-wrap: break-word;
|
||
font-size: 0;
|
||
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
|
||
font-weight: normal;
|
||
text-align: right;
|
||
white-space: nowrap;
|
||
line-height: 18px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.lesson-required-mark {
|
||
width: 120px;
|
||
height: 18px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(255, 77, 79, 1);
|
||
font-size: 16px;
|
||
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
|
||
font-weight: normal;
|
||
text-align: right;
|
||
white-space: nowrap;
|
||
line-height: 18px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.lesson-label-text {
|
||
width: 120px;
|
||
height: 18px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(51, 51, 51, 1);
|
||
font-size: 16px;
|
||
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
|
||
font-weight: normal;
|
||
text-align: right;
|
||
white-space: nowrap;
|
||
line-height: 18px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
|
||
/* 作业输入框容器 */
|
||
.homework-input-container {
|
||
width: 400px;
|
||
height: 42px;
|
||
margin: 1px 0 0 5px;
|
||
}
|
||
|
||
.homework-input {
|
||
width: calc(100% - 40px);
|
||
height: 100%;
|
||
border: none;
|
||
background: transparent;
|
||
color: rgba(102, 102, 102, 1);
|
||
font-size: 16px;
|
||
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
|
||
font-weight: normal;
|
||
text-align: left;
|
||
line-height: 18px;
|
||
outline: none;
|
||
}
|
||
|
||
.homework-dropdown-icon {
|
||
position: absolute;
|
||
right: 0px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
width: 16px;
|
||
height: 16px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
|
||
/* 课节输入框容器 */
|
||
.lesson-input-container {
|
||
margin-left: 4px;
|
||
width: 400px;
|
||
height: 42px;
|
||
}
|
||
|
||
/* 课节图片样式 */
|
||
.lesson-icon {
|
||
position: absolute;
|
||
right: 15px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
width: 16px;
|
||
height: 16px;
|
||
}
|
||
|
||
.chapter-container {
|
||
margin-top: 20px;
|
||
border: 1px solid #EDEDED;
|
||
padding-bottom: 20px;
|
||
}
|
||
|
||
.add-section-btn {
|
||
width: 94px;
|
||
height: 23px;
|
||
margin: 49px 0 342px 65px;
|
||
}
|
||
|
||
.add-section-icon {
|
||
width: 22px;
|
||
height: 22px;
|
||
margin-top: 1px;
|
||
}
|
||
|
||
.add-section-text {
|
||
width: 64px;
|
||
height: 18px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(2, 136, 209, 1);
|
||
font-size: 16px;
|
||
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
|
||
font-weight: normal;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 18px;
|
||
}
|
||
</style>
|