From 568d8fdf4791476ea8bef3c61a4a02bdb395ffe6 Mon Sep 17 00:00:00 2001
From: yuk255 <yuk255@qq.com>
Date: Tue, 16 Sep 2025 19:41:56 +0800
Subject: [PATCH] =?UTF-8?q?refactor=EF=BC=9A=E9=87=8D=E6=9E=84=E7=AB=A0?=
 =?UTF-8?q?=E8=8A=82=E6=96=B0=E5=A2=9E=E7=BC=96=E8=BE=91=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                          |   28 +-
 package.json                               |    4 +-
 src/views/teacher/course/ChapterEditor.vue | 2100 +++++++++-----------
 3 files changed, 930 insertions(+), 1202 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index bfdb2f1..2afec29 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "study-online-platform",
       "version": "0.0.0",
       "dependencies": {
+        "@types/sortablejs": "^1.15.8",
         "@vicons/ionicons5": "^0.13.0",
         "@wangeditor/editor": "^5.1.23",
         "@wangeditor/editor-for-vue": "^5.1.12",
@@ -24,7 +25,8 @@
         "vue-echarts": "7.0.3",
         "vue-i18n": "^9.14.5",
         "vue-quill-editor": "^3.0.6",
-        "vue-router": "^4.5.1"
+        "vue-router": "^4.5.1",
+        "vuedraggable": "^4.1.0"
       },
       "devDependencies": {
         "@types/dplayer": "^1.25.5",
@@ -1472,6 +1474,12 @@
         "undici-types": "~7.8.0"
       }
     },
+    "node_modules/@types/sortablejs": {
+      "version": "1.15.8",
+      "resolved": "https://registry.npmjs.org/@types/sortablejs/-/sortablejs-1.15.8.tgz",
+      "integrity": "sha512-b79830lW+RZfwaztgs1aVPgbasJ8e7AXtZYHTELNXZPsERt4ymJdjV4OccDbHQAvHrCcFpbF78jkm0R6h/pZVg==",
+      "license": "MIT"
+    },
     "node_modules/@uppy/companion-client": {
       "version": "2.2.2",
       "resolved": "https://registry.npmmirror.com/@uppy/companion-client/-/companion-client-2.2.2.tgz",
@@ -4020,6 +4028,12 @@
         "node": ">=12.17.0"
       }
     },
+    "node_modules/sortablejs": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.14.0.tgz",
+      "integrity": "sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==",
+      "license": "MIT"
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -4579,6 +4593,18 @@
         "typescript": ">=5.0.0"
       }
     },
+    "node_modules/vuedraggable": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-4.1.0.tgz",
+      "integrity": "sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==",
+      "license": "MIT",
+      "dependencies": {
+        "sortablejs": "1.14.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.1"
+      }
+    },
     "node_modules/vueuc": {
       "version": "0.4.64",
       "resolved": "https://registry.npmmirror.com/vueuc/-/vueuc-0.4.64.tgz",
diff --git a/package.json b/package.json
index 0a8629c..adab33d 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "test:ui": "vitest --ui"
   },
   "dependencies": {
+    "@types/sortablejs": "^1.15.8",
     "@vicons/ionicons5": "^0.13.0",
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "^5.1.12",
@@ -29,7 +30,8 @@
     "vue-echarts": "7.0.3",
     "vue-i18n": "^9.14.5",
     "vue-quill-editor": "^3.0.6",
-    "vue-router": "^4.5.1"
+    "vue-router": "^4.5.1",
+    "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
     "@types/dplayer": "^1.25.5",
diff --git a/src/views/teacher/course/ChapterEditor.vue b/src/views/teacher/course/ChapterEditor.vue
index 91281a7..ba4521c 100644
--- a/src/views/teacher/course/ChapterEditor.vue
+++ b/src/views/teacher/course/ChapterEditor.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="block_3 flex-row justify-between" :class="{
+  <div class="block_3" :class="{
     'mobile-layout': isMobile,
     'tablet-layout': isTablet,
     'sidebar-collapsed': sidebarCollapsed
@@ -19,32 +19,51 @@
         <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>
+      <div class="title-bar">
+        <n-button quaternary circle size="large" @click="goBack">
+          <template #icon>
+            <n-icon>
+              <ArrowBackOutline />
+            </n-icon>
+          </template>
+        </n-button>
+        <div class="title" v-if="isAddMode">新建章节</div>
+        <div class="title" v-else>编辑章节</div>
+      </div>
+
 
       <div class="single-chapter-container">
         <div class="chapter-item flex-row">
           <span class="chapter-title">{{ currentChapter.name || '暂未设置章节名' }}</span>
         </div>
-        <div v-for="section in currentChapter.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.lessonName || '未命名小节' }}</span>
-            <span class="content-description">{{ section.contentDescription || '暂无描述' }}</span>
-          </div>
-        </div>
+        <draggable v-model="currentChapter.sections" item-key="id" class="sortable-section-list"
+          handle=".section-drag-handle" animation="200" ghost-class="ghost" drag-class="drag" chosen-class="chosen"
+          :delay="0" :delay-on-touch-start="0" :touch-start-threshold="0" :force-fallback="false" @start="onDragStart"
+          @end="onDragEnd">
+          <template #item="{ element: section }">
+            <div class="chapter-content-item flex-row section-drag-item"
+              :class="{ 'active': activeCollapsePanels.includes(section.id.toString()) }"
+              @click="expandSection(section.id)">
+              <div class="section-drag-handle">
+                <n-icon size="16">
+                  <ReorderThreeOutline />
+                </n-icon>
+              </div>
+              <div class="content-text-group flex-col justify-between justify-between">
+                <span class="content-title">{{ section.lessonName || '未命名小节' }}</span>
+                <!-- <span class="content-description">{{ section.contentDescription || '暂无描述' }}</span> -->
+              </div>
+              <n-button quaternary circle @click.stop="removeLessonSection(section.id)">
+                <template #icon>
+                  <n-icon>
+                    <Close />
+                  </n-icon>
+                </template>
+              </n-button>
+            </div>
+          </template>
+        </draggable>
       </div>
-
-       <!-- 保存按钮 -->
-      <n-button class="save-chapter-btn" type="primary"
-        @click="saveChapter" :loading="saving">
-        <span class="save-text">保存章节</span>
-      </n-button>
     </div>
 
 
@@ -57,101 +76,180 @@
       <div class="chapter-container" v-if="currentChapter">
         <div class="chapter-header flex-row justify-between2">
           <span class="chapter-title-text">{{ currentChapter.name ? currentChapter.name : '暂未设置章节名' }}</span>
+          <!-- 保存按钮 -->
+          <n-button class="save-chapter-btn" type="primary" @click="saveChapter" :loading="saving">
+            <span class="save-text">保存章节</span>
+          </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="currentChapter.name" class="chapter-name-input"
-              placeholder="请输入本章名称" @blur="handleChapterNameBlur" @focus="handleChapterNameFocus" />
-          </div>
+          <n-input ref="chapterInputRef" v-model:value="currentChapter.name" placeholder="请输入本章名称"
+            @blur="handleChapterNameBlur" @focus="handleChapterNameFocus" />
         </div>
 
-        <div v-for="(section, index) in currentChapter.sections" :key="section.id"
-          class="chapter-content-container">
-          <n-divider class="chapter-divider" />
+        <n-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(section)" @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>
+        <!-- 使用折叠面板展示小节 -->
+        <n-collapse v-model:expanded-names="activeCollapsePanels" accordion>
+          <n-collapse-item v-for="(section, index) in currentChapter.sections" :key="section.id"
+            :name="section.id.toString()" class="section-collapse-item">
+            <template #header>
+              <div class="section-header-content">
+                <span class="section-number">第{{ ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十'][index] || (index +
+                  1) }}节</span>
+                <span class="section-name">{{ section.lessonName || '未命名小节' }}</span>
+                <n-tag :type="getSectionTypeStyle(section.sectionType)" size="small" class="section-type-tag">
+                  {{ getSectionTypeLabel(section.sectionType) }}
+                </n-tag>
+              </div>
+            </template>
+
+            <template #header-extra>
+              <n-button quaternary circle size="small" @click.stop="removeLessonSection(section.id)"
+                class="section-delete-btn">
+                <template #icon>
+                  <n-icon>
+                    <Close />
+                  </n-icon>
                 </template>
-              </n-input>
-            </div>
-          </div>
+              </n-button>
+            </template>
 
-          <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 class="section-content">
+              <div class="lesson-section flex-row justify-end">
+                <span class="lesson-label-text required">小节名称：</span>
+                <div class="lesson-input-container">
+                  <n-input v-model:value="section.lessonName" placeholder="请输入小节名称"
+                    @blur="() => handleLessonBlur(section)" @focus="handleLessonFocus" />
+                </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 class="courseware-section flex-row justify-end">
+                <span class="courseware-label required">选择小节类型：</span>
+                <n-space>
+                  <n-button v-for="type in sectionTypes" :key="type.value"
+                    :type="section.sectionType === type.value ? 'primary' : 'default'"
+                    @click="() => handleSectionTypeChange(section, type.value)">
+                    {{ type.label }}
+                  </n-button>
+                </n-space>
+              </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 v-if="section.sectionType === 'video'" class="section-content-area">
+                <div class="courseware-section flex-row justify-end">
+                  <span class="courseware-label required">选择视频：</span>
+                  <div class="courseware-input-container">
+                    <CustomDropdown v-model="section.videoUploadOption" :options="videoUploadOptions"
+                      placeholder="请选择视频文件" @change="(value: any) => handleVideoUploadOptionChange(section, value)" />
+                    <!-- 隐藏的视频文件输入框 -->
+                    <input type="file" :id="`video-file-upload-${section.id}`" class="file-input"
+                      accept=".mp4,.avi,.mov,.wmv,.flv,.mkv" @change="handleVideoFileUpload($event, section)" />
+                  </div>
+                </div>
+                <!-- 显示已选择的视频文件 -->
+                <div v-if="section.videoFiles && section.videoFiles.length > 0"
+                  class="uploaded-files-section flex-row justify-end">
+                  <span class="uploaded-files-label required">已选择视频：</span>
+                  <div class="uploaded-files-container">
+                    <div v-for="(file, fileIndex) in section.videoFiles" :key="fileIndex" class="file-item">
+                      <span class="file-name">{{ file.name }}</span>
+                      <button class="remove-file-btn" @click="removeVideoFile(section, fileIndex)">
+                        <img src="/images/teacher/关闭-灰.png" alt="删除" style="width: 12px; height: 12px;" />
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 资料类型 -->
+              <div v-else-if="section.sectionType === 'material'" class="section-content-area">
+                <div class="courseware-section flex-row justify-end">
+                  <span class="courseware-label required">选择资料：</span>
+                  <div class="courseware-input-container">
+                    <CustomDropdown v-model="section.materialUploadOption" :options="materialUploadOptions"
+                      placeholder="请选择资料文件"
+                      @change="(value: any) => handleMaterialUploadOptionChange(section, value)" />
+                    <!-- 隐藏的资料文件输入框 -->
+                    <input type="file" :id="`material-file-upload-${section.id}`" class="file-input"
+                      accept=".pdf,.doc,.docx,.ppt,.pptx,.txt,.xls,.xlsx"
+                      @change="handleMaterialFileUpload($event, section)" multiple />
+                  </div>
+                </div>
+                <!-- 显示已选择的资料文件 -->
+                <div v-if="section.materialFiles && section.materialFiles.length > 0"
+                  class="uploaded-files-section flex-row justify-end">
+                  <span class="uploaded-files-label required">已选择资料：</span>
+                  <div class="uploaded-files-container">
+                    <div v-for="(file, fileIndex) in section.materialFiles" :key="fileIndex" class="file-item">
+                      <span class="file-name">{{ file.name }}</span>
+                      <button class="remove-file-btn" @click="removeMaterialFile(section, fileIndex)">
+                        <img src="/images/teacher/关闭-灰.png" alt="删除" style="width: 12px; height: 12px;" />
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 练习题类型 -->
+              <div v-else-if="section.sectionType === 'exercise'" class="section-content-area">
+                <div class="courseware-section flex-row justify-end">
+                  <span class="courseware-label required">选择练习题：</span>
+                  <div class="courseware-button-container">
+                    <n-button type="primary" @click="openExerciseLibrary(section)">
+                      从练习题库选择
+                    </n-button>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 作业类型 -->
+              <div v-else-if="section.sectionType === 'homework'" class="section-content-area">
+                <div class="courseware-section flex-row justify-end">
+                  <span class="courseware-label required">选择作业：</span>
+                  <div class="courseware-button-container">
+                    <n-button type="primary" @click="openHomeworkLibrary(section)">
+                      从作业库选择
+                    </n-button>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 考试类型 -->
+              <div v-else-if="section.sectionType === 'exam'" class="section-content-area">
+                <div class="courseware-section flex-row justify-end">
+                  <span class="courseware-label required">选择考试：</span>
+                  <div class="courseware-button-container">
+                    <n-button type="primary" @click="openExamLibrary(section)">
+                      从考试库选择
+                    </n-button>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 讨论类型 -->
+              <div v-else-if="section.sectionType === 'discussion'" class="section-content-area">
+                <div class="courseware-section flex-row justify-end">
+                  <span class="courseware-label required">选择讨论：</span>
+                  <div class="courseware-button-container">
+                    <n-button type="primary" @click="openDiscussionCreator(section)">
+                      选择讨论话题
+                    </n-button>
+                  </div>
+                </div>
               </div>
             </div>
-          </div>
-
-          <div class="exam-section flex-row justify-end">
-            <span class="exam-label">添加考试/练习：</span>
-            <div class="exam-button-container">
-              <n-button type="primary" @click="openExamLibrary(section)">
-                从考试/练习选择
-              </n-button>
-            </div>
-          </div>
-
-          <div class="homework-section flex-row justify-end">
-            <span class="homework-label">添加作业：</span>
-            <div class="homework-button-container">
-              <n-button type="primary" @click="openHomeworkLibrary(section)">
-                从作业库选择
-              </n-button>
-            </div>
-          </div>
-        </div>
+          </n-collapse-item>
+        </n-collapse>
       </div>
 
-      <n-button class="add-section-btn flex-row justify-between"
-        quaternary @click="addSection">
+      <n-button class="add-section-btn flex-row justify-between" type="default" @click="addSection">
         <template #icon>
-          <img class="add-section-icon" referrerpolicy="no-referrer" src="/images/teacher/加号(2).png" />
+          <AddCircle></AddCircle>
         </template>
         <span class="add-section-text">添加小节</span>
       </n-button>
@@ -221,6 +319,23 @@
 
     <!-- 资源库模态框 -->
     <ResourceLibraryModal v-model:show="showResourceLibraryModal" @confirm="handleResourceLibraryConfirm" />
+
+    <!-- 删除小节确认对话框 -->
+    <n-modal v-model:show="showDeleteSectionModal" :mask-closable="false" preset="dialog" title="确认删除"
+      :positive-text="'确定删除'" :negative-text="'取消'" @positive-click="confirmDeleteSection"
+      @negative-click="cancelDeleteSection">
+      <template #header>
+        <span>确认删除小节</span>
+      </template>
+      <div v-if="sectionToDelete" style="margin-top: 12px;">
+        <p style="margin: 0; color: #666;">
+          即将删除小节：<strong style="color: #d03050;">{{ sectionToDelete.sectionName }}</strong>
+        </p>
+        <p style="margin: 8px 0 0 0; font-size: 14px; color: #999;">
+          删除后将无法恢复，请确认操作。
+        </p>
+      </div>
+    </n-modal>
   </div>
 </template>
 
@@ -230,11 +345,12 @@ import CustomDropdown from '@/components/CustomDropdown.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, useRoute } from 'vue-router';
 import TeachCourseApi from '@/api/modules/teachCourse';
 import { useUserStore } from '@/stores/user';
 import { useMessage } from 'naive-ui';
+import { ArrowBackOutline, Close, AddCircle, ReorderThreeOutline } from '@vicons/ionicons5';
+import draggable from 'vuedraggable';
 
 const router = useRouter();
 const route = useRoute();
@@ -251,12 +367,21 @@ const saving = ref(false);
 // 控制删除确认模态框的显示状态
 const showDeleteModal = ref(false);
 
+// 控制删除小节确认模态框的显示状态
+const showDeleteSectionModal = ref(false);
+
 // 要删除的章节信息
 const chapterToDelete = ref<{
   index: number;
   chapter: any;
 } | null>(null);
 
+// 要删除的小节信息
+const sectionToDelete = ref<{
+  sectionId: number;
+  sectionName: string;
+} | null>(null);
+
 // 删除加载状态
 const deleting = ref(false);
 
@@ -274,6 +399,9 @@ const isMobile = ref(false);
 const isTablet = ref(false);
 const sidebarCollapsed = ref(false);
 
+// 折叠面板状态 - 默认展开第一个小节
+const activeCollapsePanels = ref<string[]>(['1']);
+
 
 // 定义章节的类型
 interface Chapter {
@@ -290,11 +418,19 @@ const chapter = ref<Chapter>({
     {
       id: 1,
       lessonName: '开课彩蛋新开始',
+      sectionType: 'video', // 小节类型字段，默认为视频
+      // 视频相关字段
+      videoUploadOption: '',
+      videoFiles: [],
+      // 资料相关字段
+      materialUploadOption: '',
+      materialFiles: [],
+      // 原有字段（保持兼容性）
       coursewareName: '课件准备PPT',
       coursewareUploadOption: '',
       coursewareFiles: [],
       contentTitle: '1.开课彩蛋：新开始',
-      contentDescription: '第一节课程定位程定位与目标'
+      // contentDescription: '第一节课程定位程定位与目标'
     }
   ]
 });
@@ -302,14 +438,27 @@ const chapter = ref<Chapter>({
 // 当前章节的计算属性
 const currentChapter = computed(() => chapter.value);
 
-// 课件选项
-const coursewareOptions = [
-  { label: '课件准备PPT', value: '课件准备PPT' },
-  { label: '视频课件', value: '视频课件' },
+// 当前页面编辑模式 新增or编辑
+const isAddMode = computed(() => route.query.mode === 'add');
+
+// 小节类型选项
+const sectionTypes = [
+  { label: '视频', value: 'video' },
+  { label: '资料', value: 'material' },
+  { label: '练习题', value: 'exercise' },
+  { label: '作业', value: 'homework' },
+  { label: '考试', value: 'exam' },
+  { label: '讨论', value: 'discussion' }
 ];
 
-// 课件上传选项
-const coursewareUploadOptions = [
+// 视频上传选项
+const videoUploadOptions = [
+  { label: '本地上传', value: '本地上传' },
+  { label: '从课件库选择', value: '从课件库选择' }
+];
+
+// 资料上传选项
+const materialUploadOptions = [
   { label: '本地上传', value: '本地上传' },
   { label: '从资源库选择', value: '从资源库选择' }
 ];
@@ -370,9 +519,8 @@ const saveChapter = async () => {
       message.error('课程ID不存在');
       return;
     }
-    
+
     // 检测模式：通过路由查询参数判断
-    const isAddMode = route.query.mode === 'add';
     const editChapterId = route.query.chapterId as string;
 
     console.log('📋 课程ID:', courseId);
@@ -462,6 +610,20 @@ const toggleSidebar = () => {
   sidebarCollapsed.value = !sidebarCollapsed.value;
 };
 
+// 自动展开第一个小节
+const autoExpandFirstSection = () => {
+  if (currentChapter.value && currentChapter.value.sections.length > 0) {
+    activeCollapsePanels.value = [currentChapter.value.sections[0].id.toString()];
+  }
+};
+
+// 展开指定小节
+const expandSection = (sectionId: number) => {
+  // 设置为当前小节ID，accordion模式会自动关闭其他面板
+  activeCollapsePanels.value = [sectionId.toString()];
+  console.log('展开小节:', sectionId);
+};
+
 // 加载章节列表
 const loadChapters = async () => {
   try {
@@ -482,7 +644,6 @@ const loadChapters = async () => {
     console.log('📋 课程ID:', courseId);
 
     // 检查是否为新增模式
-    const isAddMode = route.query.mode === 'add';
     if (isAddMode) {
       console.log('🆕 新增模式：创建空白章节');
       // 创建空的章节用于编辑
@@ -492,14 +653,26 @@ const loadChapters = async () => {
         sections: [{
           id: 0,
           lessonName: '',
+          sectionType: 'video', // 默认为视频类型
+          // 视频相关字段
+          videoUploadOption: '',
+          videoFiles: [],
+          // 资料相关字段
+          materialUploadOption: '',
+          materialFiles: [],
+          // 原有字段（保持兼容性）
           coursewareName: '',
           coursewareUploadOption: '',
           coursewareFiles: [],
           contentTitle: '',
-          contentDescription: ''
+          // contentDescription: ''
         }]
       };
       chapter.value = defaultChapter;
+
+      // 默认展开第一个小节
+      autoExpandFirstSection();
+
       return;
     }
 
@@ -510,7 +683,7 @@ const loadChapters = async () => {
     } else {
       console.log('✏️ 编辑模式：加载第一个章节数据');
     }
-    
+
     // 使用新的章节接口
     const response = await TeachCourseApi.getCourseSections(courseId);
 
@@ -540,7 +713,7 @@ const loadChapters = async () => {
       // 构建章节结构 - 根据是否指定章节ID来处理
       if (chaptersData.length > 0) {
         let targetChapterData = null;
-        
+
         if (editChapterId) {
           // 查找指定ID的章节
           targetChapterData = chaptersData.find((ch: any) => ch.id === editChapterId);
@@ -555,7 +728,7 @@ const loadChapters = async () => {
           targetChapterData = chaptersData[0];
           console.log('📚 加载第一个章节:', targetChapterData);
         }
-        
+
         const newChapter: Chapter = {
           id: parseInt(targetChapterData.id || '0'),
           name: targetChapterData.name || '未命名章节',
@@ -568,16 +741,28 @@ const loadChapters = async () => {
           newChapter.sections.push({
             id: parseInt(sectionData.id || '0'),
             lessonName: sectionData.name || '未命名小节',
+            sectionType: 'video', // 默认为视频类型
+            // 视频相关字段
+            videoUploadOption: '',
+            videoFiles: [],
+            // 资料相关字段
+            materialUploadOption: '',
+            materialFiles: [],
+            // 原有字段（保持兼容性）
             coursewareName: '课件准备PPT',
             coursewareUploadOption: '',
             coursewareFiles: [],
             contentTitle: sectionData.name || '未命名小节',
-            contentDescription: '节描述'
+            // contentDescription: '节描述'
           });
         });
 
         // 更新单个章节
         chapter.value = newChapter;
+
+        // 默认展开第一个小节
+        autoExpandFirstSection();
+
         message.success(`成功加载章节：${chapter.value.name}`);
       } else {
         // 如果没有找到章节数据，可能是新课程，创建默认空章节
@@ -594,7 +779,7 @@ const loadChapters = async () => {
       console.warn('⚠️ 没有获取到章节数据');
       console.warn('⚠️ 响应结构:', response);
       console.warn('⚠️ 响应数据:', response.data);
-      
+
       // 创建默认空章节
       const defaultChapter: Chapter = {
         id: 0,
@@ -607,7 +792,7 @@ const loadChapters = async () => {
   } catch (error) {
     console.error('❌ 加载章节失败:', error);
     console.error('❌ 错误详情:', error);
-    
+
     // 出错时也创建默认空章节，允许用户继续操作
     const defaultChapter: Chapter = {
       id: 0,
@@ -633,6 +818,84 @@ onUnmounted(() => {
 
 // 删除不再需要的作业相关方法，现在使用下拉框
 
+// 处理小节类型变化
+const handleSectionTypeChange = (section: any, sectionType: string) => {
+  console.log('小节类型变化:', sectionType, 'section:', section);
+  section.sectionType = sectionType;
+};
+
+// 视频相关处理方法
+const handleVideoUploadOptionChange = (section: any, value: any) => {
+  console.log('视频上传选项变化:', value, 'section id:', section.id);
+  if (value === '本地上传') {
+    const fileInput = document.getElementById(`video-file-upload-${section.id}`) as HTMLInputElement;
+    if (fileInput) {
+      fileInput.click();
+    }
+  } else if (value === '从课件库选择') {
+    // 显示课件库模态框
+    showResourceLibraryModal.value = true;
+  }
+};
+
+const handleVideoFileUpload = (event: Event, section: any) => {
+  const target = event.target as HTMLInputElement;
+  if (target.files) {
+    const files = Array.from(target.files);
+    section.videoFiles = files;
+    console.log('视频文件已上传:', files);
+  }
+};
+
+const removeVideoFile = (section: any, fileIndex: number) => {
+  section.videoFiles.splice(fileIndex, 1);
+};
+
+// 资料相关处理方法
+const handleMaterialUploadOptionChange = (section: any, value: any) => {
+  console.log('资料上传选项变化:', value, 'section id:', section.id);
+  if (value === '本地上传') {
+    const fileInput = document.getElementById(`material-file-upload-${section.id}`) as HTMLInputElement;
+    if (fileInput) {
+      fileInput.click();
+    }
+  } else if (value === '从资源库选择') {
+    // 显示资源库模态框
+    showResourceLibraryModal.value = true;
+  }
+};
+
+const handleMaterialFileUpload = (event: Event, section: any) => {
+  const target = event.target as HTMLInputElement;
+  if (target.files) {
+    const files = Array.from(target.files);
+    section.materialFiles = files;
+    console.log('资料文件已上传:', files);
+  }
+};
+
+const removeMaterialFile = (section: any, fileIndex: number) => {
+  section.materialFiles.splice(fileIndex, 1);
+};
+
+// 其他类型的处理方法
+const openExerciseLibrary = (section: any) => {
+  console.log('打开练习题库，section:', section);
+  showExamLibraryModal.value = true;
+};
+
+const openDiscussionCreator = (section: any) => {
+  console.log('打开讨论创建器，section:', section);
+  // 这里可以添加讨论创建的逻辑
+  message.info('讨论功能开发中...');
+};
+
+// 获取小节类型标签
+// const getSectionTypeLabel = (value: string) => {
+//   const type = sectionTypes.find(t => t.value === value);
+//   return type ? type.label : value;
+// };
+
 // 课节相关方法
 const handleLessonBlur = async (section: any) => {
   console.log('课节名称已更新:', section.lessonName);
@@ -653,15 +916,26 @@ const addSection = () => {
   const sectionCount = currentChapter.value.sections.length + 1;
   const lessonName = `新小节${sectionCount}`;
   const newSection: any = {
-    id: 0, // 新增小节时ID设为0，这样保存时会调用创建API
+    id: Date.now(), // 使用时间戳作为临时ID，确保唯一性
     lessonName: lessonName,
+    sectionType: 'video', // 默认为视频类型
+    // 视频相关字段
+    videoUploadOption: '',
+    videoFiles: [],
+    // 资料相关字段
+    materialUploadOption: '',
+    materialFiles: [],
+    // 原有字段（保持兼容性）
     coursewareName: '课件准备PPT',
     coursewareUploadOption: '',
     coursewareFiles: [],
     contentTitle: lessonName, // 与 lessonName 保持一致
-    contentDescription: '新小节描述'
+    // contentDescription: '新小节描述'
   };
   currentChapter.value.sections.push(newSection);
+
+  // 自动展开新添加的小节（accordion模式下会自动关闭其他面板）
+  activeCollapsePanels.value = [newSection.id.toString()];
 };
 
 // 新增的按钮点击方法
@@ -677,41 +951,6 @@ const openHomeworkLibrary = (section: any) => {
   showHomeworkLibraryModal.value = true;
 };
 
-// 处理课件上传选项变化
-const handleCoursewareUploadOptionChange = (section: any, 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 handleCoursewareFileUpload = (event: Event, section: any) => {
-  const target = event.target as HTMLInputElement;
-  if (target.files) {
-    const files = Array.from(target.files);
-    section.coursewareFiles = files;
-    console.log('课件文件已上传:', files);
-  }
-};
-
-// 删除课件文件
-const removeCoursewareFile = (section: any, fileIndex: number) => {
-  section.coursewareFiles.splice(fileIndex, 1);
-};
-
 // 处理试卷库选择确认
 const handleExamLibraryConfirm = (selectedExams: any[]) => {
   console.log('选择的试卷:', selectedExams);
@@ -738,10 +977,88 @@ const handleResourceLibraryConfirm = (selectedResources: any[]) => {
 
 // 删除课节
 const removeLessonSection = (sectionId: number) => {
-  const index = currentChapter.value.sections.findIndex((section: any) => section.id === sectionId);
-  if (index > -1 && currentChapter.value.sections.length > 1) {
-    currentChapter.value.sections.splice(index, 1);
+  const section = currentChapter.value.sections.find((s: any) => s.id === sectionId);
+  if (!section) {
+    message.error('未找到要删除的小节');
+    return;
   }
+
+  if (currentChapter.value.sections.length <= 1) {
+    message.warning('至少需要保留一个小节');
+    return;
+  }
+
+  // 设置要删除的小节信息并显示确认对话框
+  sectionToDelete.value = {
+    sectionId: sectionId,
+    sectionName: section.lessonName || '未命名小节'
+  };
+  showDeleteSectionModal.value = true;
+};
+
+// 确认删除小节
+const confirmDeleteSection = () => {
+  if (!sectionToDelete.value) {
+    message.error('删除信息丢失');
+    return;
+  }
+
+  const index = currentChapter.value.sections.findIndex((section: any) => section.id === sectionToDelete.value!.sectionId);
+  if (index > -1) {
+    currentChapter.value.sections.splice(index, 1);
+    message.success('小节删除成功');
+
+    // 如果删除的是当前展开的小节，自动展开第一个小节
+    if (activeCollapsePanels.value.includes(sectionToDelete.value.sectionId.toString())) {
+      autoExpandFirstSection();
+    }
+  }
+
+  // 清理状态
+  showDeleteSectionModal.value = false;
+  sectionToDelete.value = null;
+};
+
+// 取消删除小节
+const cancelDeleteSection = () => {
+  showDeleteSectionModal.value = false;
+  sectionToDelete.value = null;
+};
+
+// 拖拽排序相关状态
+const isDragging = ref(false);
+
+// 拖拽开始事件
+const onDragStart = () => {
+  isDragging.value = true;
+  console.log('开始拖拽小节');
+};
+
+// 拖拽结束事件
+const onDragEnd = (event: any) => {
+  isDragging.value = false;
+  console.log('拖拽结束', event);
+  console.log('新的小节顺序:', currentChapter.value.sections.map(s => s.lessonName));
+  message.success('小节顺序已更新');
+};
+
+// 获取小节类型标签
+const getSectionTypeLabel = (value: string) => {
+  const type = sectionTypes.find(t => t.value === value);
+  return type ? type.label : value;
+};
+
+// 获取小节类型标签样式
+const getSectionTypeStyle = (value: string) => {
+  const typeStyles: { [key: string]: string } = {
+    'video': 'info',
+    'material': 'success',
+    'exercise': 'warning',
+    'homework': 'default',
+    'exam': 'error',
+    'discussion': 'tertiary'
+  };
+  return typeStyles[value] || 'default';
 };
 
 const goBack = () => {
@@ -753,348 +1070,43 @@ const goBack = () => {
 
 
 <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;
+  height: 100%;
   margin: 15px auto 0;
   position: relative;
   transition: all 0.3s ease;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+}
+
+.flex-col {
+  display: flex;
+  flex-direction: column;
+}
+
+.flex-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.justify-between {
+  display: flex;
+  justify-content: center;
+}
+
+.justify-between2 {
+  display: flex;
+  justify-content: space-between;
+}
+
+.justify-end {
+  display: flex;
+  justify-content: flex-end;
 }
 
 /* 移动端菜单按钮 */
@@ -1141,14 +1153,24 @@ const goBack = () => {
   color: #666;
 }
 
-.flex-col {
+.title-bar{
   display: flex;
-  flex-direction: column;
+  /* justify-content: center; */
+  align-items: center;
+  margin: 10px;
 }
 
+.title-bar .title{
+  margin: 0 16px;
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+}
+
+/* 章节编辑器侧边栏样式 */
 .chapter-editor {
   width: 273px;
-  min-height: 100vh;
+  height: 100%;
   border: none;
   border-right: 1px solid #E6E6E6;
   border-radius: 4px;
@@ -1159,61 +1181,11 @@ const goBack = () => {
   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;
-}
-
-.single-chapter-container {
-  margin-top: 20px;
-}
-
 .chapter-item {
-  width: 240px;
   height: 54px;
   background: #F5F8FB 100% no-repeat;
   background-size: 100% 100%;
-  margin: 23px 0 0 16px;
+  margin: 8px;
   justify-content: center;
   align-items: center;
   border-radius: 6px;
@@ -1235,20 +1207,24 @@ const goBack = () => {
 }
 
 .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);
 }
 
+.chapter-content-item.active {
+  background: rgba(2, 136, 209, 0.15);
+  border-left: 3px solid #0288D1;
+}
+
 .content-text-group {
   width: 100%;
   height: auto;
@@ -1300,22 +1276,52 @@ const goBack = () => {
   word-break: break-word;
 }
 
-/* 删除未使用的样式 */
+/* 保存按钮样式 */
+.save-chapter-btn {
+  margin: 20px;
+}
 
+.save-text {
+  width: 80px;
+  height: 18px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 14px;
+  font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
+  font-weight: normal;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 18px;
+}
+
+/* 主内容区域样式 */
 .chapter-detail-container {
   position: relative;
   flex: 1;
-  min-height: 100vh;
+  height: 100%;
   background: #ffffff;
   padding: 0 20px;
   box-sizing: border-box;
   transition: margin-left 0.3s ease;
-  max-width: calc(100% - 273px);
+  overflow: auto;
+  /* 隐藏滚动条但保持滚动功能 */
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE 和 Edge */
+}
+
+/* Webkit浏览器（Chrome、Safari等）隐藏滚动条 */
+.chapter-detail-container::-webkit-scrollbar {
+  display: none;
+}
+
+.chapter-container {
+  margin-top: 20px;
+  border: 1px solid #EDEDED;
+  padding-bottom: 20px;
 }
 
 .chapter-header {
-  height: 22px;
-  margin: 46px 0 0 20px;
+  margin: 20px 0 0 20px;
 }
 
 .chapter-title-text {
@@ -1332,10 +1338,8 @@ const goBack = () => {
 }
 
 .chapter-name-section {
-  width: 100%;
-  max-width: 540px;
   height: 42px;
-  margin: 21px 0 0 20px;
+  margin: 20px;
   display: flex;
   justify-content: flex-end;
   align-items: center;
@@ -1351,7 +1355,6 @@ const goBack = () => {
   text-align: right;
   white-space: nowrap;
   line-height: 18px;
-  margin-top: 9px;
   flex-shrink: 0;
 }
 
@@ -1383,287 +1386,146 @@ const goBack = () => {
   flex-shrink: 0;
 }
 
-.chapter-name-input-container {
-  width: 400px;
-  height: 42px;
-}
-
 .chapter-name-input:focus {
   background: rgba(240, 248, 255, 0.5);
 }
 
-/* 课件输入框容器 */
+/* 小节内容样式 */
+.chapter-content-container {
+  position: relative;
+  width: 100%;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  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;
+}
+
+.lesson-section {
+  position: relative;
+  width: 100%;
+  height: 42px;
+  margin-bottom: 16px;
+  display: flex;
+  justify-content: flex-start;
+  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;
+}
+
+.lesson-input-container {
+  margin-left: 4px;
+  width: 400px;
+}
+
+/* 课件相关样式 */
+.courseware-section {
+  width: 100%;
+  max-width: 540px;
+  height: 43px;
+  margin-bottom: 20px;
+  display: flex;
+  justify-content: flex-start;
+  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;
+}
+
+.required::before {
+  content: '*';
+  color: #ff4d4f;
+  margin-right: 4px;
+}
+
 .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 {
+.courseware-button-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;
-}
-
-/* 考试/练习按钮容器 */
-.exam-button-container {
-  width: 400px;
-  height: 42px;
-  margin: 1px 0 0 5px;
-}
-
-.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;
-}
-
-.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;
-}
-
-.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;
-}
-
-.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;
-}
-
-/* 课节输入框容器 */
-.lesson-input-container {
-  margin-left: 4px;
-  width: 400px;
-  height: 42px;
-}
-
-/* 作业按钮容器 */
-.homework-button-container {
-  width: 400px;
-  height: 42px;
-  margin: 1px 0 0 5px;
-}
-
-/* 作业输入框容器 */
-.homework-input-container {
-  width: 400px;
-  height: 42px;
-  margin: 1px 0 0 5px;
-}
-
-.chapter-container {
-  margin-top: 20px;
-  border: 1px solid #EDEDED;
-  padding-bottom: 20px;
-}
-
-.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;
-}
-
-/* 文件上传相关样式 */
+/* 文件上传和显示样式 */
 .file-input {
   display: none;
 }
@@ -1729,376 +1591,19 @@ const goBack = () => {
   padding: 2px;
   border-radius: 2px;
   transition: background-color 0.3s ease;
-}
-
-.remove-file-btn:hover {
-  background: rgba(255, 77, 79, 0.1);
-}
-
-.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;
-}
-
-/* 保存按钮样式 */
-.save-chapter-btn {
-  margin: 20px;
-}
-
-.save-text {
-  width: 80px;
-  height: 18px;
-  overflow-wrap: break-word;
-  color: rgba(255, 255, 255, 1);
-  font-size: 14px;
-  font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
-  font-weight: normal;
-  text-align: center;
-  white-space: nowrap;
-  line-height: 18px;
-}
-
-.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;
+.remove-file-btn:hover {
+  background: rgba(255, 77, 79, 0.1);
 }
 
+/* 添加小节按钮样式 */
 .add-section-btn {
-  width: 94px;
-  height: 23px;
-  margin: 49px 0 342px 65px;
+  margin: 20px;
+  color: rgba(2, 136, 209, 1);
 }
 
 .add-section-icon {
@@ -2111,7 +1616,6 @@ const goBack = () => {
   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;
@@ -2120,22 +1624,9 @@ const goBack = () => {
   line-height: 18px;
 }
 
-.save-icon {
-  width: 18px;
-  height: 18px;
-}
-
-.save-text {
-  width: 80px;
-  height: 18px;
-  overflow-wrap: break-word;
-  color: rgba(255, 255, 255, 1);
-  font-size: 14px;
-  font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
-  font-weight: normal;
-  text-align: center;
-  white-space: nowrap;
-  line-height: 18px;
+/* 小节内容区域样式 */
+.section-content-area {
+  margin-bottom: 16px;
 }
 
 /* 删除确认对话框样式 */
@@ -2152,6 +1643,66 @@ const goBack = () => {
   font-size: 20px;
 }
 
+/* 已上传文件显示样式（覆盖重复样式） */
+.uploaded-files-section {
+  margin-top: 10px;
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.uploaded-files-label {
+  font-size: 14px;
+  color: #666;
+  margin-right: 12px;
+  min-width: 100px;
+}
+
+.uploaded-files-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.file-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 12px;
+  background-color: #fff;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  font-size: 13px;
+}
+
+.file-name {
+  color: #333;
+  max-width: 150px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.remove-file-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 2px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 2px;
+}
+
+.remove-file-btn:hover {
+  background-color: #f5f5f5;
+}
+
+/* 隐藏文件输入框 */
+.file-input {
+  display: none;
+}
+
 :deep(.n-dialog__icon svg) {
   fill: #ff4d4f;
 }
@@ -2159,4 +1710,153 @@ const goBack = () => {
 :deep(.n-dialog__icon svg path) {
   fill: #ff4d4f;
 }
+
+
+/* 拖拽排序样式 */
+.sortable-section-list {
+  min-height: 20px;
+}
+
+.section-drag-item {
+  position: relative;
+  user-select: none;
+  transition: all 0.2s ease;
+}
+
+.section-drag-handle {
+  width: 30px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: grab;
+  color: #999;
+  margin-right: 8px;
+  opacity: 0.6;
+  transition: all 0.2s ease;
+  flex-shrink: 0;
+  padding: 8px 4px;
+}
+
+.section-drag-handle:hover {
+  opacity: 1;
+  background-color: rgba(2, 136, 209, 0.1);
+  border-radius: 4px;
+  color: #0288D1;
+}
+
+.section-drag-handle:active {
+  cursor: grabbing;
+  background-color: rgba(2, 136, 209, 0.2);
+}
+
+/* 拖拽状态样式 */
+.ghost {
+  opacity: 0.5;
+  background: #f0f8ff;
+  border: 2px dashed #0288D1;
+  border-radius: 6px;
+}
+
+.drag {
+  opacity: 0.8;
+  transform: rotate(2deg);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
+  z-index: 1000;
+}
+
+.chosen {
+  background: rgba(2, 136, 209, 0.15);
+  border-radius: 6px;
+  transform: scale(1.02);
+}
+
+/* 折叠面板样式 */
+.section-collapse-item {
+  margin-bottom: 16px;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.section-header-content {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex: 1;
+}
+
+.section-number {
+  color: #0288D1;
+  font-weight: 600;
+  font-size: 14px;
+  min-width: 60px;
+}
+
+.section-name {
+  color: #333;
+  font-size: 16px;
+  font-weight: 500;
+  flex: 1;
+}
+
+.section-type-tag {
+  margin-left: auto;
+}
+
+.section-delete-btn {
+  margin-left: 8px;
+  color: #999;
+  transition: all 0.2s ease;
+}
+
+.section-delete-btn:hover {
+  color: #ff4d4f;
+  background-color: rgba(255, 77, 79, 0.1);
+}
+
+.section-content {
+  padding: 20px;
+}
+
+/* 覆盖 Naive UI 折叠面板默认样式 */
+:deep(.n-collapse) {
+  background: transparent;
+}
+
+:deep(.n-collapse .n-collapse-item) {
+  background: #ffffff;
+  border-radius: 8px;
+  margin-bottom: 16px;
+  overflow: hidden;
+}
+
+:deep(.n-collapse .n-collapse-item__header) {
+  padding: 16px !important;
+  background: #ffffff;
+  border-bottom: none;
+  transition: all 0.3s ease;
+}
+
+:deep(.n-collapse .n-collapse-item__header:hover) {
+  background: #f8fbff;
+}
+
+:deep(.n-collapse .n-collapse-item__header-main) {
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
+
+:deep(.n-collapse .n-collapse-item__content-wrapper) {
+  border-top: 1px solid #f0f0f0;
+}
+
+:deep(.n-collapse .n-collapse-item__content-inner) {
+  padding: 0;
+}
+
+:deep(.n-collapse .n-collapse-item__arrow) {
+  color: #0288D1;
+  transition: all 0.3s ease;
+}
 </style>