From aa87b0e8e4a5e5b9b3da48fc79f46dcb825fd3f6 Mon Sep 17 00:00:00 2001
From: yuk255 <yuk255@qq.com>
Date: Thu, 18 Sep 2025 19:52:57 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=AF=BE=E4=BB=B6=E7=95=8C=E9=9D=A2?=
 =?UTF-8?q?=E9=87=8D=E6=9E=84=EF=BC=8C=E5=AF=B9=E6=8E=A5=E6=8E=A5=E5=8F=A3?=
 =?UTF-8?q?=EF=BC=9B=E7=AB=A0=E8=8A=82=E9=A1=B5=E9=9D=A2=E5=9F=BA=E7=A1=80?=
 =?UTF-8?q?=E6=A1=86=E6=9E=B6=E6=8E=A5=E5=8F=A3=E5=AF=B9=E6=8E=A5=EF=BC=9B?=
 =?UTF-8?q?=E4=B8=80=E4=BA=9B=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/modules/teachCourse.ts                |  130 +-
 src/components/admin/MyResources.vue          |   12 +-
 src/utils/download.ts                         |   37 +
 src/views/teacher/course/AddDiscussion.vue    |   54 +-
 src/views/teacher/course/AddHomework.vue      |    3 +-
 src/views/teacher/course/ChapterEditor.vue    |  397 ++++-
 .../teacher/course/ChapterManagement.vue      |  330 +++-
 src/views/teacher/course/CourseEditor.vue     |    6 +-
 .../teacher/course/CoursewareManagement.vue   |  295 +++-
 .../course/CoursewareManagementBackup.vue     | 1543 -----------------
 src/views/teacher/course/FileViewer.vue       |  727 +++++---
 src/views/teacher/course/FolderBrowser.vue    |  949 ++++++++--
 .../teacher/course/HomeworkReviewView.vue     |   78 +-
 13 files changed, 2518 insertions(+), 2043 deletions(-)
 create mode 100644 src/utils/download.ts
 delete mode 100644 src/views/teacher/course/CoursewareManagementBackup.vue

diff --git a/src/api/modules/teachCourse.ts b/src/api/modules/teachCourse.ts
index 5788fe3..d51eb15 100644
--- a/src/api/modules/teachCourse.ts
+++ b/src/api/modules/teachCourse.ts
@@ -373,9 +373,7 @@ export class TeachCourseApi {
     try {
       console.log('🚀 发送删除课程章节请求:', { url: '/aiol/aiolCourseSection/delete', id })
       
-      const response = await ApiRequest.delete<any>('/aiol/aiolCourseSection/delete', {
-        params: { id }
-      })
+      const response = await ApiRequest.delete<any>('/aiol/aiolCourseSection/delete', {id})
       
       console.log('🗑️ 删除课程章节响应:', response)
       return response
@@ -405,6 +403,94 @@ export class TeachCourseApi {
       throw error
     }
   }
+
+    /**
+   * 查询课程课件列表
+   */
+  static async queryCourseMaterials(params: { courseId: string; resourceType: number|string; name?:string }): Promise<ApiResponseWithResult<any[]>> {
+    try {
+      const response = await ApiRequest.get<{ result: any[] }>(`/aiol/aiolResource/course_materials`, params)
+
+      console.log('📑 查询课程课件响应:', response)
+      return response
+    } catch (error) {
+      console.error('❌ 查询课程课件失败:', error)
+      throw error
+    }
+  }
+
+
+  /**
+   * 上传视频课件
+   */
+  static async uploadCursorVideo(data: { courseId: string; file: File; name:string }): Promise<ApiResponseWithResult<any[]>> {
+    try {
+      const formData = new FormData()
+      formData.append('courseId', data.courseId)
+      formData.append('file', data.file)
+      formData.append('name', data.name)
+      
+      const response = await ApiRequest.post<{ result: any[] }>(`/aiol/aiolResource/video_upload`, formData, {
+        headers: {
+          'Content-Type': 'multipart/form-data'
+        }
+      })
+
+      console.log('📑 上传视频课件响应:', response)
+      return response
+    } catch (error) {
+      console.error('❌ 上传视频课件失败:', error)
+      throw error
+    }
+  }
+
+  /**
+   * 文档上传
+   */
+  static async uploadCursorDocument(data: { courseId: string; file: File; name:string }): Promise<ApiResponseWithResult<any[]>> {
+    try {
+      const formData = new FormData()
+      formData.append('courseId', data.courseId)
+      formData.append('file', data.file)
+      formData.append('name', data.name)
+      
+      const response = await ApiRequest.post<{ result: any[] }>(`/aiol/aiolResource/document_upload`, formData, {
+        headers: {
+          'Content-Type': 'multipart/form-data'
+        }
+      })
+
+      console.log('📑 上传文档课件响应:', response)
+      return response
+    } catch (error) {
+      console.error('❌ 上传文档课件失败:', error)
+      throw error
+    }
+  }
+
+  /**
+   * 图片上传
+   */
+  static async uploadCursorImage(data: { courseId: string; file: File; name:string }): Promise<ApiResponseWithResult<any[]>> {
+    try {
+      const formData = new FormData()
+      formData.append('courseId', data.courseId)
+      formData.append('file', data.file)
+      formData.append('name', data.name)
+      
+      const response = await ApiRequest.post<{ result: any[] }>(`/aiol/aiolResource/image_upload`, formData, {
+        headers: {
+          'Content-Type': 'multipart/form-data'
+        }
+      })
+
+      console.log('📑 上传图片课件响应:', response)
+      return response
+    } catch (error) {
+      console.error('❌ 上传图片课件失败:', error)
+      throw error
+    }
+  }
 }
 
 // 默认导出
@@ -507,4 +593,42 @@ export class ClassApi {
       headers: { 'Content-Type': 'multipart/form-data' }
     });
   }
+
+  /**
+   * 获取文件下载链接
+   */
+  static async getFileDownloadUrl(fileId: string | number): Promise<ApiResponseWithResult<{ downloadUrl: string }>> {
+    try {
+      const response = await ApiRequest.get<{ result: { downloadUrl: string } }>(`/aiol/aiolResource/${fileId}/download_url`)
+      console.log('📥 获取文件下载链接响应:', response)
+      return response
+    } catch (error) {
+      console.error('❌ 获取文件下载链接失败:', error)
+      throw error
+    }
+  }
+
+  /**
+   * 直接下载文件
+   */
+  static async downloadFile(fileId: string | number): Promise<Response> {
+    try {
+      const response = await fetch(`/api/aiol/aiolResource/${fileId}/download`, {
+        method: 'GET',
+        headers: {
+          'Authorization': `Bearer ${localStorage.getItem('token') || ''}`
+        }
+      })
+      
+      if (!response.ok) {
+        throw new Error(`下载失败: ${response.statusText}`)
+      }
+      
+      console.log('📥 文件下载响应:', response)
+      return response
+    } catch (error) {
+      console.error('❌ 文件下载失败:', error)
+      throw error
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/components/admin/MyResources.vue b/src/components/admin/MyResources.vue
index b798c3e..b1644f0 100644
--- a/src/components/admin/MyResources.vue
+++ b/src/components/admin/MyResources.vue
@@ -12,12 +12,12 @@
                 <n-button @click="handleNewFolder">
                     新建文件夹
                 </n-button>
-                <n-button @click="handleRecycleBin">
+                <!-- <n-button @click="handleRecycleBin">
                     <template #icon>
                         <img src="/images/teacher/delete2.png" alt="回收站" class="action-icon">
                     </template>
                     回收站
-                </n-button>
+                </n-button> -->
                 <div class="search-container">
                     <n-input 
                         v-model:value="searchKeyword" 
@@ -120,6 +120,8 @@ import FileInfoCard from '@/components/admin/FileInfoCard.vue'
 import UploadFileModal from '@/views/teacher/course/UploadFileModal.vue'
 import RecycleConfirmModal from '@/views/teacher/resource/RecycleConfirmModal.vue'
 import { Search } from '@vicons/ionicons5'
+// import { useRoute } from 'vue-router'
+// const route = useRoute()
 
 // 文件类型定义
 interface FileItem {
@@ -265,9 +267,9 @@ const handleNewFolder = () => {
     showNewFolderModal.value = true
 }
 
-const handleRecycleBin = () => {
-    window.location.href = '/teacher/recycle-bin'
-}
+// const handleRecycleBin = () => {
+    // route.push('/teacher/recycle-bin')
+// }
 
 const closeNewFolderModal = () => {
     showNewFolderModal.value = false
diff --git a/src/utils/download.ts b/src/utils/download.ts
new file mode 100644
index 0000000..9af63e0
--- /dev/null
+++ b/src/utils/download.ts
@@ -0,0 +1,37 @@
+/**
+ * 文件下载工具
+ */
+
+/**
+ * 通过 URL 下载文件
+ * @param url 文件下载地址
+ * @param filename 保存的文件名
+ */
+export const downloadFileFromUrl = (url: string, filename?: string) => {
+  try {
+    const link = document.createElement('a')
+    link.href = url
+    link.target = '_blank'
+    
+    if (filename) {
+      link.download = filename
+    }
+    
+    // 添加到DOM，触发下载，然后移除
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+  } catch (error) {
+    console.error('下载文件失败:', error)
+    throw error
+  }
+}
+
+/**
+ * 获取文件扩展名
+ * @param filename 文件名或URL
+ */
+export const getFileExtension = (filename: string): string => {
+  const lastDotIndex = filename.lastIndexOf('.')
+  return lastDotIndex !== -1 ? filename.slice(lastDotIndex) : ''
+}
diff --git a/src/views/teacher/course/AddDiscussion.vue b/src/views/teacher/course/AddDiscussion.vue
index cac3f04..a5ccbbe 100644
--- a/src/views/teacher/course/AddDiscussion.vue
+++ b/src/views/teacher/course/AddDiscussion.vue
@@ -1,7 +1,16 @@
 <template>
   <div class="add-discussion">
     <!-- 页面标题 -->
-    <h1 class="page-title">添加讨论</h1>
+    <div class="header-section">
+      <n-button quaternary circle size="large" @click="goBack">
+        <template #icon>
+          <n-icon>
+            <ArrowBackOutline />
+          </n-icon>
+        </template>
+      </n-button>
+      <h1 class="page-title">添加讨论</h1>
+    </div>
 
     <!-- 讨论表单 -->
     <div class="discussion-form">
@@ -13,19 +22,10 @@
       <!-- 富文本编辑器 -->
       <div class="rich-editor">
         <div style="border: 1px solid #ccc">
-          <Toolbar
-            style="border-bottom: 1px solid #ccc"
-            :editor="editorRef"
-            :defaultConfig="toolbarConfig"
-            :mode="mode"
-          />
-          <Editor
-            style="height: 300px; overflow-y: hidden;"
-            v-model="discussionContent"
-            :defaultConfig="editorConfig"
-            :mode="mode"
-            @onCreated="handleCreated"
-          />
+          <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
+            :mode="mode" />
+          <Editor style="height: 300px; overflow-y: hidden;" v-model="discussionContent" :defaultConfig="editorConfig"
+            :mode="mode" @onCreated="handleCreated" />
         </div>
       </div>
 
@@ -37,7 +37,8 @@
       <div class="section-selector-wrapper">
         <button @click="toggleSectionSelector" class="section-selector" :class="{ active: showSectionSelector }">
           <span>{{ selectedSection || '选择章节' }}</span>
-          <img :src="showSectionSelector ? '/images/teacher/箭头-蓝.png' : '/images/teacher/箭头-灰.png'" alt="箭头" class="arrow-icon" />
+          <img :src="showSectionSelector ? '/images/teacher/箭头-蓝.png' : '/images/teacher/箭头-灰.png'" alt="箭头"
+            class="arrow-icon" />
         </button>
 
         <!-- 章节选择弹窗 -->
@@ -56,11 +57,11 @@
         </div>
       </div>
 
-              <!-- 操作按钮 -->
-        <div class="form-actions">
-          <n-button @click="cancelDiscussion">取消</n-button>
-          <n-button type="primary" @click="publishDiscussion">发布</n-button>
-        </div>
+      <!-- 操作按钮 -->
+      <div class="form-actions">
+        <n-button @click="cancelDiscussion">取消</n-button>
+        <n-button type="primary" @click="publishDiscussion">发布</n-button>
+      </div>
     </div>
 
     <!-- 用户协议 -->
@@ -77,10 +78,15 @@ import { NButton } from 'naive-ui'
 import '@wangeditor/editor/dist/css/style.css'
 // @ts-ignore
 import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
+import { ArrowBackOutline } from '@vicons/ionicons5'
 
 const router = useRouter()
 const route = useRoute()
 
+const goBack = () => {
+  router.back()
+}
+
 // 编辑器实例，必须用 shallowRef
 const editorRef = shallowRef()
 
@@ -177,11 +183,17 @@ onMounted(() => {
   padding: 20px;
 }
 
+.header-section{
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 20px;
+}
+
 .page-title {
   font-size: 16px;
   font-weight: normal;
   color: #333;
-  margin-bottom: 20px;
 }
 
 .discussion-form {
diff --git a/src/views/teacher/course/AddHomework.vue b/src/views/teacher/course/AddHomework.vue
index b0bf6f2..0f000d1 100644
--- a/src/views/teacher/course/AddHomework.vue
+++ b/src/views/teacher/course/AddHomework.vue
@@ -60,6 +60,7 @@
             
             <!-- 补交时间选择器 -->
             <div class="form-item" v-if="formData.allowLateSubmission">
+              <label class="form-label"></label>
               <n-date-picker 
                 v-model:value="formData.lateSubmissionTime"
                 type="datetime"
@@ -73,7 +74,7 @@
           <div class="form-column">
             <!-- 所属章节 -->
             <div class="form-item">
-              <label class="form-label required">所属章节:</label>
+              <label class="form-label">所属章节:</label>
               <n-select 
                 v-model:value="formData.chapter"
                 :options="chapterOptions"
diff --git a/src/views/teacher/course/ChapterEditor.vue b/src/views/teacher/course/ChapterEditor.vue
index ba4521c..da0e175 100644
--- a/src/views/teacher/course/ChapterEditor.vue
+++ b/src/views/teacher/course/ChapterEditor.vue
@@ -28,18 +28,21 @@
           </template>
         </n-button>
         <div class="title" v-if="isAddMode">新建章节</div>
-        <div class="title" v-else>编辑章节</div>
+        <div class="title" v-else-if="isEditMode">编辑章节</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>
+          <!-- 排序更新加载指示器 -->
+          <n-spin v-if="updatingSectionSort" size="small" class="sort-loading-indicator" />
         </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">
+          :delay="0" :delay-on-touch-start="0" :touch-start-threshold="0" :force-fallback="false" 
+          :disabled="updatingSectionSort" @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()) }"
@@ -363,6 +366,7 @@ const message = useMessage();
 // 加载状态
 // const loading = ref(false); // 已删除，不再使用
 const saving = ref(false);
+const updatingSectionSort = ref(false); // 小节排序更新状态
 
 // 控制删除确认模态框的显示状态
 const showDeleteModal = ref(false);
@@ -405,7 +409,7 @@ const activeCollapsePanels = ref<string[]>(['1']);
 
 // 定义章节的类型
 interface Chapter {
-  id: number;
+  id: number | string; // 支持数字和字符串ID
   name: string;
   sections: any[];
 }
@@ -440,6 +444,7 @@ const currentChapter = computed(() => chapter.value);
 
 // 当前页面编辑模式 新增or编辑
 const isAddMode = computed(() => route.query.mode === 'add');
+const isEditMode = computed(() => route.query.mode === 'edit');
 
 // 小节类型选项
 const sectionTypes = [
@@ -526,27 +531,41 @@ const saveChapter = async () => {
     console.log('📋 课程ID:', courseId);
     console.log('🔍 模式检测:', { isAddMode, editChapterId, currentChapterId: currentChapter.value.id });
 
+    // 获取章节的sortOrder（如果是编辑模式）
+    const editChapterData = history.state?.editChapterData;
+    const chapterSortOrder = isEditMode.value && editChapterData ? editChapterData.sortOrder : null;
+
     // 构建保存数据 - 使用新API的数据结构
     const chapterData = {
-      course_id: courseId,
+      courseId: courseId,
       name: currentChapter.value.name.trim(),
-      type: 0, // 视频类型
-      sort_order: 10, // 固定排序
-      parent_id: '0', // 章的父ID为0
-      level: 1 // 1=章
+      type: null, // 章节没有类型，只有小节有
+      sortOrder: chapterSortOrder, // 使用从编辑数据中获取的排序
+      parentId: null, // 章的父ID为null
+      level: 1 // 1=章 2=节
     };
 
-    console.log('� 保存章节数据:', chapterData);
+    console.log('📊 保存章节数据:', chapterData);
     let response;
-    if (isAddMode || currentChapter.value.id === 0) {
+    
+    // 判断是新增还是编辑模式 - 保持ID的原始类型
+    if (isAddMode.value || !currentChapter.value.id || currentChapter.value.id === 0 || currentChapter.value.id === '0') {
       // 新增章节
       console.log('🆕 创建新章节');
       response = await TeachCourseApi.createCourseSection(chapterData);
+
+      console.log('🔍 创建章节响应:', response);
+      
+      // 如果创建成功，更新章节ID
+      if (response.data && response.data.success) {
+        currentChapter.value.id = response.data.result;
+        console.log('✅ 章节创建成功，新ID:', currentChapter.value.id);
+      }
     } else {
-      // 编辑现有章节
+      // 编辑现有章节 - 确保ID是字符串类型
       console.log('✏️ 编辑现有章节，ID:', currentChapter.value.id);
       response = await TeachCourseApi.editCourseSection({
-        id: currentChapter.value.id.toString(),
+        id: String(currentChapter.value.id), // 转换为字符串但不改变原始数据
         ...chapterData
       });
     }
@@ -555,10 +574,41 @@ const saveChapter = async () => {
 
     // 检查不同的成功响应格式
     if (response.data && (response.data.success === true || response.data.code === 200 || response.data.code === 0)) {
-      message.success('章节保存成功！');
-
-      // 移除自动返回，让用户可以继续编辑
-      console.log('✅ 章节保存成功');
+      console.log('✅ 章节保存成功，开始保存小节...');
+      
+      // 如果是新增章节，更新所有小节的父ID
+      if (isAddMode.value || !currentChapter.value.id || currentChapter.value.id === 0 || currentChapter.value.id === '0') {
+        if (response.data.success && response.data.result) {
+          const newChapterId = response.data.result;
+          currentChapter.value.sections.forEach(section => {
+            // 如果是新创建的小节，更新其父ID引用
+            if (!section.id || section.id === 0 || section.id === '0') {
+              section.parentChapterId = newChapterId;
+            }
+          });
+        }
+      }
+      
+      // 章节保存成功后，批量保存所有小节
+      let allSectionsSaved = true;
+      for (let i = 0; i < currentChapter.value.sections.length; i++) {
+        const section = currentChapter.value.sections[i];
+        if (section.lessonName && section.lessonName.trim()) {
+          const sectionSaved = await saveSection(section, i + 1); // 传递排序号，从1开始
+          if (!sectionSaved) {
+            allSectionsSaved = false;
+          }
+        }
+      }
+      
+      if (allSectionsSaved) {
+        message.success('章节和所有小节保存成功！');
+        router.back(); // 保存成功后返回上一页
+      } else {
+        message.warning('章节保存成功，但部分小节保存失败');
+      }
+      
+      console.log('✅ 章节和小节保存完成');
     } else {
       console.error('❌ 章节保存失败，响应数据:', response.data);
       message.error('章节保存失败：' + (response.data?.message || '未知错误'));
@@ -571,6 +621,115 @@ const saveChapter = async () => {
   }
 };
 
+// 保存单个小节
+const saveSection = async (section: any, sortOrder: number = 1) => {
+  console.log('💾 保存小节函数被调用', section, 'sortOrder:', sortOrder);
+  
+  try {
+    if (!userStore.user?.id) {
+      console.log('❌ 用户未登录');
+      message.error('用户未登录，无法保存小节');
+      return false;
+    }
+
+    if (!section.lessonName || !section.lessonName.trim()) {
+      console.log('⚠️ 小节名称为空');
+      message.error('小节名称不能为空');
+      return false;
+    }
+
+    const courseId = route.params.courseId as string;
+    if (!courseId) {
+      console.error('❌ 课程ID不存在');
+      message.error('课程ID不存在');
+      return false;
+    }
+
+    // 确保父章节存在且已保存
+    if (!currentChapter.value.id || currentChapter.value.id === 0 || currentChapter.value.id === '0') {
+      console.log('⚠️ 父章节尚未保存，先保存章节');
+      message.warning('请先保存章节');
+      return false;
+    }
+
+    const sectionData = {
+      courseId: courseId,
+      name: section.lessonName.trim(),
+      type: 0, // 基础类型，暂不传递具体的小节类型
+      sortOrder: sortOrder, // 使用传入的排序号
+      parentId: String(currentChapter.value.id), // 确保父章节ID是字符串
+      level: 2 // 2=节
+    };
+
+    console.log('📋 保存小节数据:', sectionData);
+    console.log('🔍 小节ID信息:', { 
+      id: section.id, 
+      idType: typeof section.id, 
+      idValue: section.id 
+    });
+    
+    let response;
+    // 判断是新增还是编辑：
+    // 新增条件：
+    // 1. section.id不存在 (!section.id)
+    // 2. section.id为0 (section.id === 0)
+    // 3. section.id为字符串'0' (section.id === '0')
+    // 4. section.id为null或undefined
+    // 5. section.id是临时ID (以'temp_'开头的字符串)
+    
+    const isTemporaryId = typeof section.id === 'string' && section.id.startsWith('temp_');
+    const hasValidId = section.id && 
+                      section.id !== 0 && 
+                      section.id !== '0' &&
+                      !isTemporaryId; // 排除临时ID
+    
+    const isNewSection = !hasValidId;
+    
+    console.log('🔍 小节模式判断:', { 
+      hasValidId, 
+      isNewSection, 
+      isTemporaryId,
+      sectionId: section.id,
+      idType: typeof section.id 
+    });
+    
+    if (isNewSection) {
+      // 新增小节 - 不传递ID
+      console.log('🆕 创建新小节');
+      response = await TeachCourseApi.createCourseSection(sectionData);
+      
+      // 如果创建成功，更新小节ID
+      if (response.data && response.data.success && response.data.result) {
+        section.id = response.data.result;
+        console.log('✅ 小节创建成功，新ID:', section.id);
+      }
+    } else {
+      // 编辑现有小节 - 确保ID是字符串类型
+      console.log('✏️ 编辑现有小节，ID:', section.id);
+      response = await TeachCourseApi.editCourseSection({
+        id: String(section.id), // 转换为字符串但不改变原始数据
+        ...sectionData
+      });
+    }
+
+    console.log('🔍 保存小节完整响应:', response);
+
+    // 检查响应格式
+    if (response.data && (response.data.success === true || response.data.code === 200 || response.data.code === 0)) {
+      console.log('✅ 小节保存成功');
+      return true;
+    } else {
+      console.error('❌ 小节保存失败，响应数据:', response.data);
+      message.error('小节保存失败：' + (response.data?.message || '未知错误'));
+      return false;
+    }
+  } catch (error: any) {
+    console.error('❌ 保存小节失败:', error);
+    message.error('保存小节失败：' + (error.message || '网络错误'));
+    return false;
+  }
+};
+
 // 处理删除确认
 const handleDeleteConfirm = async () => {
   if (!chapterToDelete.value) {
@@ -644,7 +803,7 @@ const loadChapters = async () => {
     console.log('📋 课程ID:', courseId);
 
     // 检查是否为新增模式
-    if (isAddMode) {
+    if (isAddMode.value) {
       console.log('🆕 新增模式：创建空白章节');
       // 创建空的章节用于编辑
       const defaultChapter: Chapter = {
@@ -676,7 +835,78 @@ const loadChapters = async () => {
       return;
     }
 
-    // 编辑模式：加载现有章节数据
+    // 检查是否为编辑模式且有传递的数据
+    if (isEditMode.value) {
+      console.log('✏️ 编辑模式：从路由state获取数据');
+      const editChapterData = history.state?.editChapterData;
+      
+      if (editChapterData) {
+        console.log('📋 从state获取的章节数据:', editChapterData);
+        
+        // 构建章节结构 - 保持原始ID类型
+        const newChapter: Chapter = {
+          id: editChapterData.id, // 不进行类型转换，保持原始字符串ID
+          name: editChapterData.name || '未命名章节',
+          sections: []
+        };
+
+        // 转换小节数据
+        if (editChapterData.sections && Array.isArray(editChapterData.sections)) {
+          console.log('🔍 原始小节数据:', editChapterData.sections);
+          editChapterData.sections.forEach((sectionData: any) => {
+            const sectionId = sectionData.id; // 保持原始ID类型
+            console.log('🔍 处理小节:', { originalId: sectionData.id, name: sectionData.name });
+            
+            newChapter.sections.push({
+              id: sectionId, // 直接使用原始ID，不进行类型转换
+              lessonName: sectionData.name || '未命名小节',
+              sectionType: 'video', // 默认为视频类型
+              // 视频相关字段
+              videoUploadOption: '',
+              videoFiles: [],
+              // 资料相关字段
+              materialUploadOption: '',
+              materialFiles: [],
+              // 原有字段（保持兼容性）
+              coursewareName: '课件准备PPT',
+              coursewareUploadOption: '',
+              coursewareFiles: [],
+              contentTitle: sectionData.name || '未命名小节',
+              // contentDescription: '节描述'
+            });
+          });
+          console.log('🔍 转换后的小节数据:', newChapter.sections);
+        }
+
+        // 如果没有小节，添加一个空的小节用于编辑
+        if (newChapter.sections.length === 0) {
+          newChapter.sections.push({
+            id: 0,
+            lessonName: '',
+            sectionType: 'video',
+            videoUploadOption: '',
+            videoFiles: [],
+            materialUploadOption: '',
+            materialFiles: [],
+            coursewareName: '',
+            coursewareUploadOption: '',
+            coursewareFiles: [],
+            contentTitle: '',
+          });
+        }
+
+        // 更新章节数据
+        chapter.value = newChapter;
+
+        // 默认展开第一个小节
+        autoExpandFirstSection();
+
+        message.success(`成功加载章节：${chapter.value.name}`);
+        return;
+      }
+    }
+
+    // 编辑模式：加载现有章节数据（兼容旧版本URL参数方式）
     const editChapterId = route.query.chapterId as string;
     if (editChapterId) {
       console.log('✏️ 编辑特定章节模式，章节ID:', editChapterId);
@@ -814,6 +1044,11 @@ onMounted(() => {
 
 onUnmounted(() => {
   window.removeEventListener('resize', checkScreenSize);
+  // 清理排序更新定时器
+  if (sortUpdateTimeout) {
+    clearTimeout(sortUpdateTimeout);
+    sortUpdateTimeout = null;
+  }
 });
 
 // 删除不再需要的作业相关方法，现在使用下拉框
@@ -902,7 +1137,20 @@ const handleLessonBlur = async (section: any) => {
   if (section.lessonName && section.lessonName.trim()) {
     // 同步更新 contentTitle，使侧边栏显示的名称与编辑的名称一致
     section.contentTitle = section.lessonName;
-    // 移除自动保存，只有点击保存按钮才保存
+    
+    // 如果章节已经保存(有有效ID)，则自动保存小节
+    if (currentChapter.value.id && currentChapter.value.id !== 0) {
+      console.log('📝 章节已存在，自动保存小节');
+      // 找到当前小节在数组中的索引，用于确定排序号
+      const sectionIndex = currentChapter.value.sections.findIndex((s: any) => s.id === section.id);
+      const sortOrder = sectionIndex >= 0 ? sectionIndex + 1 : 1;
+      const saved = await saveSection(section, sortOrder);
+      if (saved) {
+        message.success('小节保存成功');
+      }
+    } else {
+      console.log('📝 章节尚未保存，小节将在章节保存时一并保存');
+    }
   }
 };
 
@@ -916,7 +1164,7 @@ const addSection = () => {
   const sectionCount = currentChapter.value.sections.length + 1;
   const lessonName = `新小节${sectionCount}`;
   const newSection: any = {
-    id: Date.now(), // 使用时间戳作为临时ID，确保唯一性
+    id: `temp_${Date.now()}`, // 使用字符串前缀+时间戳作为临时ID，确保唯一性且易识别
     lessonName: lessonName,
     sectionType: 'video', // 默认为视频类型
     // 视频相关字段
@@ -935,7 +1183,7 @@ const addSection = () => {
   currentChapter.value.sections.push(newSection);
 
   // 自动展开新添加的小节（accordion模式下会自动关闭其他面板）
-  activeCollapsePanels.value = [newSection.id.toString()];
+  activeCollapsePanels.value = [newSection.id]; // 临时ID已经是字符串，不需要toString()
 };
 
 // 新增的按钮点击方法
@@ -1028,18 +1276,100 @@ const cancelDeleteSection = () => {
 // 拖拽排序相关状态
 const isDragging = ref(false);
 
+// 更新小节排序的函数
+const updateSectionSort = async () => {
+  try {
+    console.log('🔄 开始更新小节排序...');
+    updatingSectionSort.value = true;
+    
+    const courseId = route.params.courseId as string;
+    
+    if (!courseId) {
+      console.error('❌ 课程ID不存在');
+      message.error('课程ID不存在');
+      return false;
+    }
+
+    if (!currentChapter.value?.id) {
+      console.error('❌ 章节ID不存在');
+      message.error('章节ID不存在');
+      return false;
+    }
+
+    // 遍历所有小节，更新它们的排序
+    const updatePromises = currentChapter.value.sections.map(async (section, index) => {
+      // 跳过临时ID的小节（还没有保存的新小节）
+      const isTemporaryId = typeof section.id === 'string' && section.id.startsWith('temp_');
+      if (!section.id || section.id === 0 || section.id === '0' || isTemporaryId) {
+        console.log('⏭️ 跳过临时小节:', section.lessonName);
+        return Promise.resolve(); // 跳过临时小节
+      }
+
+      console.log(`📝 更新小节 "${section.lessonName}" 排序为: ${index + 1}`);
+      
+      const sectionData = {
+        id: String(section.id),
+        courseId: courseId,
+        name: section.lessonName.trim(),
+        type: 0,
+        sortOrder: index + 1, // 从1开始的排序号
+        parentId: String(currentChapter.value.id),
+        level: 2
+      };
+
+      return TeachCourseApi.editCourseSection(sectionData);
+    });
+
+    // 等待所有更新完成
+    const results = await Promise.allSettled(updatePromises);
+    
+    // 检查结果
+    const failedCount = results.filter(result => 
+      result.status === 'rejected' || 
+      (result.status === 'fulfilled' && result.value && !result.value.data?.success)
+    ).length;
+
+    if (failedCount === 0) {
+      console.log('✅ 所有小节排序更新成功');
+      message.success('小节顺序已更新');
+      return true;
+    } else {
+      console.log(`⚠️ ${failedCount} 个小节排序更新失败`);
+      message.warning(`部分小节排序更新失败 (${failedCount}个)`);
+      return false;
+    }
+  } catch (error: any) {
+    console.error('❌ 更新小节排序失败:', error);
+    message.error('更新小节排序失败：' + (error.message || '网络错误'));
+    return false;
+  } finally {
+    updatingSectionSort.value = false;
+  }
+};
+
 // 拖拽开始事件
 const onDragStart = () => {
   isDragging.value = true;
   console.log('开始拖拽小节');
 };
 
-// 拖拽结束事件
-const onDragEnd = (event: any) => {
+// 拖拽结束事件 - 添加防抖功能
+let sortUpdateTimeout: NodeJS.Timeout | null = null;
+const onDragEnd = async (event: any) => {
   isDragging.value = false;
   console.log('拖拽结束', event);
   console.log('新的小节顺序:', currentChapter.value.sections.map(s => s.lessonName));
-  message.success('小节顺序已更新');
+  
+  // 清除之前的定时器（如果存在）
+  if (sortUpdateTimeout) {
+    clearTimeout(sortUpdateTimeout);
+  }
+  
+  // 设置300ms延迟，避免快速拖动时多次调用API
+  sortUpdateTimeout = setTimeout(async () => {
+    await updateSectionSort();
+    sortUpdateTimeout = null;
+  }, 300);
 };
 
 // 获取小节类型标签
@@ -1859,4 +2189,21 @@ const goBack = () => {
   color: #0288D1;
   transition: all 0.3s ease;
 }
+
+/* 排序加载指示器样式 */
+.sort-loading-indicator {
+  margin-left: 8px;
+  opacity: 0.8;
+}
+
+/* 拖动禁用状态 */
+.sortable-section-list[disabled] {
+  pointer-events: none;
+  opacity: 0.7;
+}
+
+.sortable-section-list[disabled] .section-drag-handle {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
 </style>
diff --git a/src/views/teacher/course/ChapterManagement.vue b/src/views/teacher/course/ChapterManagement.vue
index 7dd1172..e466875 100644
--- a/src/views/teacher/course/ChapterManagement.vue
+++ b/src/views/teacher/course/ChapterManagement.vue
@@ -8,7 +8,7 @@
           <n-button type="primary" @click="addChapter">添加章节</n-button>
           <n-button @click="importChapters">导入</n-button>
           <n-button @click="exportChapters">导出</n-button>
-          <n-button type="error" :disabled="selectedChapters.length === 0" @click="deleteSelected">删除</n-button>
+          <!-- <n-button type="error" :disabled="selectedChapters.length === 0" @click="deleteSelected">删除</n-button> -->
           <div class="search-container">
             <n-input v-model:value="searchKeyword" placeholder="请输入想要搜索的内容" style="width: 200px;">
             </n-input>
@@ -64,14 +64,16 @@
 
 <script setup lang="ts">
 import { ref, computed, onMounted, h } from 'vue'
-import { NButton, useMessage, NDataTable, NInput, NSpace } from 'naive-ui'
+import { NButton, useMessage, NDataTable, NInput, NSpace, NIcon, useDialog } from 'naive-ui'
 import type { DataTableColumns } from 'naive-ui'
 import { useRouter, useRoute } from 'vue-router'
+import { ChevronForwardOutline } from '@vicons/ionicons5'
 import ImportModal from '@/components/common/ImportModal.vue'
 import TeachCourseApi from '@/api/modules/teachCourse'
 
 const router = useRouter()
 const route = useRoute()
+const dialog = useDialog()
 
 // 获取当前课程ID
 const courseId = ref(route.params.id as string)
@@ -90,6 +92,7 @@ interface Chapter {
   expanded?: boolean
   level?: number
   parentId?: string
+  sortOrder?: number | null // 添加sortOrder字段用于排序
 }
 
 const showImportModal = ref(false)
@@ -117,6 +120,9 @@ const selectedChapters = ref<string[]>([])
 // 章节列表数据
 const chapterList = ref<Chapter[]>([])
 
+// 章节排序输入值（用于双向绑定）
+const chapterSortValues = ref<Record<string, string>>({})
+
 // 扁平化章节列表（用于显示和分页）
 const flattenedChapters = computed(() => {
   const result: Chapter[] = []
@@ -125,9 +131,27 @@ const flattenedChapters = computed(() => {
   const chapters = chapterList.value.filter(item => item.level === 1)
   const sections = chapterList.value.filter(item => item.level === 2)
 
+  // 对章节按sortOrder排序，null值排在最后
+  const sortedChapters = chapters.sort((a, b) => {
+    if (a.sortOrder === null && b.sortOrder === null) return 0
+    if (a.sortOrder === null) return 1
+    if (b.sortOrder === null) return -1
+    return (a.sortOrder || 0) - (b.sortOrder || 0)
+  })
+
   // 为每个章节添加其子节
-  chapters.forEach(chapter => {
-    chapter.children = sections.filter(section => section.parentId === chapter.id)
+  sortedChapters.forEach(chapter => {
+    const chapterSections = sections.filter(section => section.parentId === chapter.id)
+    
+    // 对子节按sortOrder排序，null值排在最后
+    const sortedSections = chapterSections.sort((a, b) => {
+      if (a.sortOrder === null && b.sortOrder === null) return 0
+      if (a.sortOrder === null) return 1
+      if (b.sortOrder === null) return -1
+      return (a.sortOrder || 0) - (b.sortOrder || 0)
+    })
+    
+    chapter.children = sortedSections
     result.push(chapter)
 
     // 如果章节展开，添加其子节
@@ -248,31 +272,180 @@ const exportChapters = () => {
   message.info('导出章节功能')
 }
 
-const deleteSelected = async () => {
-  if (selectedChapters.value.length === 0) return
-  // 删除逻辑
-  message.info('删除选中章节')
-}
+// const deleteSelected = async () => {
+//   if (selectedChapters.value.length === 0) return
+//   // 删除逻辑
+//   message.info('删除选中章节')
+// }
 
 const searchChapters = async () => {
   // 搜索逻辑
   message.info('搜索章节')
 }
 
-const editChapter = (chapter: Chapter) => {
+const editChapter = async (chapter: Chapter) => {
   console.log('编辑章节:', chapter)
-  // 跳转到章节编辑器页面，传递章节ID参数表示编辑模式
-  const courseId = route.params.id
-  if (courseId) {
-    router.push(`/teacher/chapter-editor-teacher/${courseId}?chapterId=${chapter.id}`)
-  } else {
+
+  const courseId = route.params.id as string
+  if (!courseId) {
     message.error('课程ID不存在')
+    return
+  }
+
+  try {
+    // 获取该章节下的所有小节数据
+    const sectionsResponse = await TeachCourseApi.getCourseSections(courseId)
+    const allSections = sectionsResponse.data.result || []
+
+    // 筛选出属于当前章节的小节
+    const chapterSections = allSections.filter((section: any) =>
+      section.level === 2 && section.parentId === chapter.id
+    )
+
+    // 构建完整的章节数据结构
+    const editChapterData = {
+      id: chapter.id,
+      name: chapter.name,
+      type: chapter.type,
+      level: chapter.level,
+      parentId: chapter.parentId,
+      sortOrder: chapter.sortOrder, // 添加章节的sortOrder
+      sections: chapterSections.map((section: any) => ({
+        id: section.id,
+        name: section.name,
+        type: section.type,
+        sortOrder: section.sortOrder,
+        parentId: section.parentId,
+        level: section.level,
+        createTime: section.createTime
+      }))
+    }
+
+    console.log('编辑章节完整数据:', editChapterData)
+
+    // 通过路由state传递数据，而不是URL参数
+    router.push({
+      path: `/teacher/chapter-editor-teacher/${courseId}`,
+      query: { mode: 'edit' },
+      state: { editChapterData }
+    })
+
+  } catch (error) {
+    console.error('获取章节数据失败:', error)
+    message.error('获取章节数据失败，请重试')
   }
 }
 
 const deleteChapter = async (chapter: Chapter) => {
-  // 删除单个章节
-  message.info(`删除章节: ${chapter.name}`)
+  const isChapterLevel = chapter.level === 1; // 是否为章节（level=1）
+  const chapterName = chapter.name;
+  
+  // 如果是章节，需要检查是否有下属小节
+  let confirmMessage = `确定要删除"${chapterName}"吗？`;
+  if (isChapterLevel) {
+    // 查找该章节下的所有小节
+    const childSections = chapterList.value.filter(item => 
+      item.level === 2 && item.parentId === chapter.id
+    );
+    
+    if (childSections.length > 0) {
+      confirmMessage = `确定要删除章节"${chapterName}"吗？\n\n删除章节将同时删除其下的 ${childSections.length} 个小节：\n${childSections.map(s => s.name).join('、')}`;
+    }
+  }
+
+  // 二次确认弹窗
+  dialog.warning({
+    title: '删除确认',
+    content: confirmMessage,
+    positiveText: '确定删除',
+    negativeText: '取消',
+    onPositiveClick: async () => {
+      try {
+        loading.value = true;
+        
+        if (isChapterLevel) {
+          // 如果是章节，需要先删除其下的所有小节，再删除章节本身
+          const childSections = chapterList.value.filter(item => 
+            item.level === 2 && item.parentId === chapter.id
+          );
+          
+          // 先删除所有子小节
+          for (const section of childSections) {
+            console.log('删除小节:', section.name, 'ID:', section.id);
+            await TeachCourseApi.deleteCourseSection(section.id);
+          }
+          
+          // 再删除章节本身
+          console.log('删除章节:', chapter.name, 'ID:', chapter.id);
+          await TeachCourseApi.deleteCourseSection(chapter.id);
+          
+          message.success(`章节"${chapterName}"及其下属小节删除成功`);
+        } else {
+          // 如果是小节，直接删除
+          console.log('删除小节:', chapter.name, 'ID:', chapter.id);
+          await TeachCourseApi.deleteCourseSection(chapter.id);
+          
+          message.success(`小节"${chapterName}"删除成功`);
+        }
+        
+        // 重新加载章节列表
+        await fetchCourseChapters();
+        
+      } catch (error: any) {
+        console.error('删除失败:', error);
+        message.error(`删除失败：${error.message || '未知错误'}`);
+      } finally {
+        loading.value = false;
+      }
+    },
+    onNegativeClick: () => {
+      message.info('已取消删除');
+    }
+  });
+}
+
+// 更新章节排序
+const updateChapterSort = async (chapter: Chapter, newSortOrder: number | null) => {
+  console.log('更新章节排序:', chapter.name, '新排序:', newSortOrder)
+
+  if (chapter.sortOrder === newSortOrder) {
+    // 排序没有变化，不需要更新
+    return
+  }
+
+  try {
+    // 构建更新数据
+    const updateData = {
+      id: chapter.id,
+      courseId: courseId.value,
+      name: chapter.name,
+      type: chapter.type === '-' ? null : parseInt(chapter.type) || null,
+      sortOrder: newSortOrder,
+      parentId: chapter.parentId || null,
+      level: chapter.level || 1
+    }
+
+    console.log('发送章节排序更新请求:', updateData)
+
+    // 调用编辑接口更新排序
+    const response = await TeachCourseApi.editCourseSection(updateData)
+
+    if (response.data && (response.data.success === true || response.data.code === 200 || response.data.code === 0)) {
+      // 更新成功，更新本地数据
+      chapter.sortOrder = newSortOrder
+      chapterSortValues.value[chapter.id] = newSortOrder?.toString() || ''
+      message.success(`章节 "${chapter.name}" 排序更新成功`)
+
+      // 重新加载数据以确保排序正确
+      fetchCourseChapters()
+    } else {
+      console.error('章节排序更新失败:', response.data)
+      message.error('章节排序更新失败：' + (response.data?.message || '未知错误'))
+    }
+  } catch (error: any) {
+    console.error('更新章节排序失败:', error)
+    message.error('更新章节排序失败：' + (error.message || '网络错误'))
+  }
 }
 
 // 表格列配置 - 使用 minWidth 实现响应式
@@ -295,22 +468,24 @@ const columns: DataTableColumns<Chapter> = [
         style: {
           display: 'flex',
           alignItems: 'center',
-          cursor: isChapter ? 'pointer' : 'default',
+          cursor: (isChapter && row.children && row.children.length > 0) ? 'pointer' : 'default',
           marginLeft: isChapter ? '0px' : '-3px'
         },
-        onClick: isChapter ? () => toggleChapter(row) : undefined
+        onClick: (isChapter && row.children && row.children.length > 0) ? () => toggleChapter(row) : undefined
       }, [
-        isChapter ? h('i', {
+        // 只有章节且有子节时才显示箭头
+        (isChapter && row.children && row.children.length > 0) ? h(NIcon, {
+          size: 14,
           style: {
             marginRight: '8px',
-            fontSize: '12px',
             color: '#999',
             transition: 'transform 0.2s',
-            transform: row.expanded ? 'rotate(90deg)' : 'rotate(0deg)'
+            transform: row.expanded ? 'rotate(90deg)' : 'rotate(0deg)',
+            cursor: 'pointer'
           }
-        }, [
-          '▶'
-        ]) : null,
+        }, {
+          default: () => h(ChevronForwardOutline)
+        }) : (isChapter ? h('span', { style: { marginRight: '22px' } }) : null),
         h('span', {
           style: { color: '#062333', fontSize: '13px' }
         }, row.name)
@@ -340,13 +515,46 @@ const columns: DataTableColumns<Chapter> = [
   {
     title: '排序',
     key: 'sort',
-    minWidth: 50,
+    minWidth: 100,
     render: (row: Chapter) => {
       const isChapter = row.level === 1; // level=1 表示章
       if (isChapter) {
-        return h('span', { style: { color: '#BABABA' } }, '-')
+        // 章节显示可编辑的排序输入框
+        return h('div', {
+          style: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center'
+          }
+        }, [
+          h(NInput, {
+            value: chapterSortValues.value[row.id] ?? (row.sortOrder?.toString() || ''),
+            size: 'small',
+            style: { width: '60px', textAlign: 'center' },
+            placeholder: '排序',
+            'onUpdate:value': (value: string) => {
+              // 实时更新输入框的值
+              chapterSortValues.value[row.id] = value;
+            },
+            onBlur: () => {
+              const inputValue = chapterSortValues.value[row.id];
+              const newSortOrder = inputValue ? parseInt(inputValue) || null : null;
+              updateChapterSort(row, newSortOrder);
+            },
+            onKeydown: (e: KeyboardEvent) => {
+              if (e.key === 'Enter') {
+                const inputValue = chapterSortValues.value[row.id];
+                const newSortOrder = inputValue ? parseInt(inputValue) || null : null;
+                updateChapterSort(row, newSortOrder);
+                (e.target as HTMLInputElement).blur(); // 失去焦点
+              }
+            }
+          })
+        ])
+      } else {
+        // 小节显示固定的排序值
+        return h('span', { style: { color: '#062333', fontSize: '12px' } }, row.sort)
       }
-      return h('span', { style: { color: '#062333', fontSize: '12px' } }, row.sort)
     }
   },
   {
@@ -362,41 +570,72 @@ const columns: DataTableColumns<Chapter> = [
     key: 'actions',
     minWidth: 160,
     render: (row: Chapter) => {
-      return h('div', { style: { display: 'flex', gap: '16px', alignItems: 'center', justifyContent: 'center' } }, [
-        h(NButton, {
-          size: 'small',
-          type: 'info',
-          secondary: true,
-          onClick: () => editChapter(row)
-        }, { default: () => '编辑' }),
-        h(NButton, {
-          size: 'small',
-          type: 'error',
-          secondary: true,
-          onClick: () => deleteChapter(row)
-        }, { default: () => '删除' })
-      ])
+      const isChapter = row.level === 1; // level=1 表示章
+
+      if (isChapter) {
+        // 章节显示编辑和删除按钮
+        return h('div', { style: { display: 'flex', gap: '16px', alignItems: 'center', justifyContent: 'center' } }, [
+          h(NButton, {
+            size: 'small',
+            type: 'info',
+            secondary: true,
+            onClick: () => editChapter(row)
+          }, { default: () => '编辑' }),
+          h(NButton, {
+            size: 'small',
+            type: 'error',
+            secondary: true,
+            onClick: () => deleteChapter(row)
+          }, { default: () => '删除' })
+        ])
+      } else {
+        // 小节只显示删除按钮
+        return h('div', { style: { display: 'flex', gap: '16px', alignItems: 'center', justifyContent: 'center' } }, [
+          h(NButton, {
+            size: 'small',
+            type: 'error',
+            secondary: true,
+            onClick: () => deleteChapter(row)
+          }, { default: () => '删除' })
+        ])
+      }
     }
   }
 ]
 
 const fetchCourseChapters = () => {
+  loading.value = true
   TeachCourseApi.getCourseSections(courseId.value).then(res => {
     console.log('章节数据:', res.data)
     // 将API返回的CourseSection数据映射为本地Chapter格式
     const sections = res.data.result || []
-    chapterList.value = sections.map((section): Chapter => ({
+    chapterList.value = sections.map((section: any): Chapter => ({
       id: section.id || '0',
       name: section.name || '',
       type: section.type?.toString() || '-',
-      sort: section.sort_order?.toString() || '-',
+      sort: section.sortOrder?.toString() || '-', // 根据API数据使用sortOrder
+      createTime: section.createTime || '', // 根据API数据使用createTime
       isParent: (section.level || 0) === 1,
       expanded: false,
+      level: section.level || 0, // 添加level字段
+      parentId: section.parentId || '', // 根据API数据使用parentId
+      sortOrder: section.sortOrder || null, // 添加sortOrder字段用于排序功能
       children: []
     }))
+    console.log('处理后的章节数据:', chapterList.value)
+
+    // 初始化章节排序输入值
+    chapterSortValues.value = {}
+    chapterList.value.forEach(chapter => {
+      if (chapter.level === 1) {
+        chapterSortValues.value[chapter.id] = chapter.sortOrder?.toString() || ''
+      }
+    })
   }).catch(error => {
     console.error('获取章节数据失败:', error)
     message.error('获取章节数据失败')
+  }).finally(() => {
+    loading.value = false
   })
 }
 
@@ -410,6 +649,9 @@ onMounted(() => {
   width: 100%;
   background: #fff;
   overflow: auto;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
 /* 顶部工具栏 */
diff --git a/src/views/teacher/course/CourseEditor.vue b/src/views/teacher/course/CourseEditor.vue
index 1ad44ef..47cfaf0 100644
--- a/src/views/teacher/course/CourseEditor.vue
+++ b/src/views/teacher/course/CourseEditor.vue
@@ -147,13 +147,13 @@ const hideSidebar = computed(() => {
   // 定义需要隐藏侧边栏的页面路径
   const hideSidebarPaths = [
     'add-question',      // 新增试题页面
-    'add-homework',       // 添加作业页面
+    // 'add-homework',       // 添加作业页面
     'template-import',
-    'review/',
+    // 'review/',
     'certificate/detail/',
     'certificate/add',
     'comment/',           // 查看讨论页面
-    'discussion/add'
+    // 'discussion/add'
   ]
 
   // 检查当前路径是否包含需要隐藏侧边栏的路径
diff --git a/src/views/teacher/course/CoursewareManagement.vue b/src/views/teacher/course/CoursewareManagement.vue
index 4ba00bf..77fea33 100644
--- a/src/views/teacher/course/CoursewareManagement.vue
+++ b/src/views/teacher/course/CoursewareManagement.vue
@@ -1,20 +1,301 @@
 <template>
-  <div class="courseware-management">
-    <MyResources></MyResources>
+  <div class="chapter-management">
+    <!-- 头部操作区域 -->
+    <div class="resources-header">
+        <div class="resources-title">
+            <h1>课件资源</h1>
+        </div>
+        <div class="resources-actions">
+            <!-- <n-button @click="importChapters">导入</n-button>
+            <n-button @click="exportChapters">导出</n-button> -->
+            <!-- <n-button @click="">上传文件</n-button> -->
+            <div class="search-container">
+                <n-input 
+                    v-model:value="searchKeyword" 
+                    placeholder="请输入关键字" 
+                    @keyup.enter="handleSearch">
+                    <template #suffix>
+                         <n-icon>
+                            <Search />
+                        </n-icon>
+                    </template>
+                </n-input>
+            </div>
+        </div>
+    </div>
+
+    <!-- 文件网格 -->
+    <div class="files-grid">
+        <div v-for="folder in filteredFolders" :key="folder.id" class="file-item"
+            @click="handleFolderClick(folder)">
+            <!-- 文件图标 -->
+            <div class="file-icon" @mouseenter.stop="showInfoCard(folder, $event)" @mouseleave.stop="hideInfoCard">
+                <img src="/images/profile/folder.png" alt="文件夹图标" class="folder-icon">
+            </div>
+            <!-- 文件名称 -->
+            <div class="file-name" :title="folder.name">
+                {{ folder.name }}
+            </div>
+        </div>
+    </div>
+
+    <!-- 悬停信息卡片（固定定位，显示在文件图标右侧） -->
+    <!-- <FileInfoCard v-if="infoCardVisible && currentHoverFolder" :name="currentHoverFolder.name"
+        :size="formatFileSize(currentHoverFolder.fileCount)" :modified="formatDate(currentHoverFolder.modifiedAt)"
+        :style="{ position: 'fixed', top: infoCardPosition.top + 'px', left: infoCardPosition.left + 'px', zIndex: 3000 }" /> -->
+    <!-- <ImportModal v-model:show="showImportModal" template-name="custom_template.xlsx" import-type="custom"
+      @success="handleImportSuccess" @template-download="handleTemplateDownload" /> -->
   </div>
 </template>
 
 <script setup lang="ts">
-import MyResources from '@/components/admin/MyResources.vue'
+import { ref, computed, onMounted } from 'vue'
+import { NInput, NIcon } from 'naive-ui'
+import { useRouter, useRoute } from 'vue-router'
+import { Search } from '@vicons/ionicons5'
+// import ImportModal from '@/components/common/ImportModal.vue'
+// import FileInfoCard from '@/components/admin/FileInfoCard.vue'
 
+const router = useRouter()
+const route = useRoute()
+
+// 文件夹类型定义
+interface FolderItem {
+    id: string|number
+    name: string
+    type: 'folder'
+    fileCount: number
+    modifiedAt: string
+}
+
+// const showImportModal = ref(false)
+
+// const handleImportSuccess = () => {
+//   message.success('章节导入成功')
+// }
+
+// const handleTemplateDownload = () => {
+//   message.success('模板下载成功')
+// }
+
+// 搜索关键词
+const searchKeyword = ref('')
+
+// 响应式数据
+// const hoveredFolder = ref<string | null>(null)
+const infoCardVisible = ref(false)
+const currentHoverFolder = ref<FolderItem | null>(null)
+const infoCardPosition = ref<{ top: number; left: number }>({ top: 0, left: 0 })
+
+// 固定的三个文件夹数据（与FolderBrowser中的数据结构保持一致）
+const folders = ref<FolderItem[]>([
+    {
+        id: '0',
+        name: '视频',
+        type: 'folder',
+        fileCount: 8,
+        modifiedAt: '2024-01-14 14:30'
+    },
+    {
+        id: '1',
+        name: '图片',
+        type: 'folder',
+        fileCount: 12,
+        modifiedAt: '2024-01-15 09:25'
+    },
+    {
+        id: '2',
+        name: '文档',
+        type: 'folder',
+        fileCount: 25,
+        modifiedAt: '2024-01-13 16:45'
+    }
+])
+
+// 计算属性：过滤后的文件夹列表
+const filteredFolders = computed(() => {
+    if (!searchKeyword.value) {
+        return folders.value
+    }
+    return folders.value.filter((folder: FolderItem) =>
+        folder.name.toLowerCase().includes(searchKeyword.value.toLowerCase())
+    )
+})
+
+// 方法
+// const formatFileSize = (count: number) => {
+//     return `${count} 个文件`
+// }
+
+// const formatDate = (dateString: string) => {
+//     return dateString
+// }
+
+const handleSearch = () => {
+    console.log('搜索:', searchKeyword.value)
+}
+
+const handleFolderClick = (folder: FolderItem) => {
+    console.log('点击文件夹:', folder.name)
+    // 跳转到文件夹浏览页面
+    router.push({
+        name: 'FolderBrowser',
+        params: { 
+            id: route.params.id, // 传递当前课程ID
+            folderId: folder.id 
+        }
+    })
+}
+
+// 悬浮信息卡片定位到图标右侧
+const showInfoCard = (folder: FolderItem, event: MouseEvent) => {
+    const target = event.currentTarget as HTMLElement
+    const iconRect = target.getBoundingClientRect()
+    currentHoverFolder.value = folder
+    infoCardPosition.value = {
+        top: iconRect.top + window.scrollY,
+        left: iconRect.right + window.scrollX + 12
+    }
+    infoCardVisible.value = true
+}
+
+const hideInfoCard = () => {
+    infoCardVisible.value = false
+    currentHoverFolder.value = null
+}
+
+// const handleItemMouseLeave = () => {
+//     hideInfoCard()
+//     hoveredFolder.value = null
+// }
+
+// const importChapters = () => {
+//   showImportModal.value = true
+// }
+
+// const exportChapters = () => {
+//   message.info('导出章节')
+// }
+
+// 生命周期
+onMounted(() => {
+  // 可以在这里加载文件夹信息
+})
 </script>
 
 <style scoped>
-.courseware-management {
-  width: 100%;
+.chapter-management {
+  padding: 0;
   background: #fff;
-  height: 100%;;
+  width: 100%;
+  height: 100%;
+}
+
+/* 头部操作区域 */
+.resources-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0;
+  background: white;
+  padding: 20px 30px;
+  border-bottom: 1px solid #E8E8E8;
+  width: 100%;
+}
+
+.resources-title h1 {
+  margin: 0;
+  color: #333;
+  font-size: 20px;
+  font-weight: 500;
+}
+
+.resources-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.search-container {
+  width: 200px;
+}
+
+/* 文件网格 */
+.files-grid {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  gap: 20px;
+  background: white;
+  padding: 30px;
+  margin: 0;
+}
+
+.file-item {
+  position: relative;
   display: flex;
   flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 20px 15px;
+  border-radius: 2px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  border: 1.5px solid #D8D8D8;
+  background: white;
+  min-height: 200px;
 }
-</style>
+
+.file-item:hover {
+  background: #F5F8FB;
+}
+
+.folder-icon {
+  width: 110px;
+  height: 110px;
+}
+
+.file-name {
+  margin-top: -20px;
+  font-size: 14px;
+  color: #333;
+  text-align: center;
+  word-break: break-all;
+  max-width: 100px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .resources-header {
+    flex-direction: column;
+    gap: 15px;
+    padding: 20px;
+  }
+
+  .resources-actions {
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+
+  .search-container {
+    width: 150px;
+  }
+
+  .files-grid {
+    grid-template-columns: repeat(4, 1fr);
+    gap: 15px;
+    padding: 20px;
+  }
+}
+
+/* 更小屏幕的响应式设计 */
+@media (max-width: 480px) {
+  .files-grid {
+    grid-template-columns: repeat(3, 1fr);
+    gap: 10px;
+    padding: 15px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/teacher/course/CoursewareManagementBackup.vue b/src/views/teacher/course/CoursewareManagementBackup.vue
deleted file mode 100644
index 7faf3aa..0000000
--- a/src/views/teacher/course/CoursewareManagementBackup.vue
+++ /dev/null
@@ -1,1543 +0,0 @@
-<template>
-  <div class="courseware-management">
-    <!-- 顶部操作栏 -->
-    <div class="toolbar">
-      <h2>全部资源库</h2>
-      <div class="toolbar-actions">
-        <!-- 分类筛选器 -->
-        <div class="category-filter">
-          <n-select 
-            v-model:value="selectedCategory" 
-            :options="categoryOptions"
-            @update:value="filterByCategory"
-            placeholder="选择分类"
-            clearable
-            class="category-select"
-            style="width: 140px;"
-          />
-        </div>
-        
-        <n-button type="primary" @click="addCourseware">
-          添加资源
-        </n-button>
-        <!-- <n-button 
-          :disabled="selectedFiles.length === 0"
-          @click="moveFiles"
-        >
-          移动
-        </n-button> -->
-        <n-button 
-          type="error" 
-          :disabled="selectedFiles.length === 0"
-          @click="deleteSelected"
-        >
-          删除
-        </n-button>
-
-        <div class="search-box">
-          <n-input 
-            v-model:value="searchKeyword" 
-            placeholder="请输入想要搜索的内容"
-            clearable
-            style="width: 200px;"
-          >
-            <template #suffix>
-              <n-button 
-                text 
-                @click="searchFiles"
-                style="padding: 0; margin: 0;"
-              >
-                <n-icon>
-                  <search />
-                </n-icon>
-              </n-button>
-            </template>
-          </n-input>
-        </div>
-      </div>
-    </div>
-
-    <!-- 文件列表表格 -->
-    <div class="table-box">
-      <div style="flex: 1;">
-          <n-data-table :columns="columns" :data="paginatedFiles" :row-key="rowKey" :checked-row-keys="selectedFiles"
-            @update:checked-row-keys="handleCheck" :bordered="false" :single-line="false" size="medium"
-            class="file-data-table" :row-class-name="rowClassName" style="width: 100%" />
-      </div>
-
-      <!-- 自定义分页器 -->
-      <div class="custom-pagination">
-        <div class="pagination-content">
-          <div class="page-numbers">
-            <span class="page-number nav-button" :class="{ disabled: currentPage === 1 }" @click="goToPage('first')">
-              首页
-            </span>
-            <span class="page-number nav-button" :class="{ disabled: currentPage === 1 }" @click="goToPage('prev')">
-              上一页
-            </span>
-
-            <span v-for="page in visiblePages" :key="page" class="page-number page-number-bordered"
-              :class="{ active: page === currentPage }" @click="goToPage(page)">
-              {{ page }}
-            </span>
-
-            <span v-if="showRightEllipsis" class="page-number">...</span>
-            <span v-if="totalPages > 1" class="page-number page-number-bordered" @click="goToPage(totalPages)">
-              {{ totalPages }}
-            </span>
-
-            <span class="page-number nav-button" :class="{ disabled: currentPage === totalPages }"
-              @click="goToPage('next')">
-              下一页
-            </span>
-            <span class="page-number nav-button" :class="{ disabled: currentPage === totalPages }"
-              @click="goToPage('last')">
-              尾页
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- 添加课件模态框 -->
-    <div v-if="showAddCoursewareModal" class="modal-overlay">
-      <AddCoursewareModal @close="closeAddCoursewareModal" />
-    </div>
-
-    <!-- 删除确认模态框 -->
-    <DeleteFolderConfirmModal v-if="showDeleteConfirmModal" :show="showDeleteConfirmModal" @confirm="confirmDelete"
-      @cancel="cancelDelete" />
-
-    <!-- 移动文件模态框 -->
-    <CommonModal :visible="showMoveFileModal" title="移动文件" @close="closeMoveFileModal" @confirm="handleMoveFiles">
-      <template #content="{ getValue }">
-        <MoveFileContent :visible="showMoveFileModal" :available-folders="[]"
-          :get-value="getValue" />
-      </template>
-    </CommonModal>
-
-    <!-- 重命名模态框 -->
-    <CommonModal :visible="showRenameModal" title="重命名" @close="closeRenameModal" @confirm="handleRename">
-      <template #content>
-        <div class="rename-content">
-          <n-input
-            v-model:value="renameInputValue"
-            placeholder="请输入新的文件名"
-            style="width: 100%"
-            ref="renameInputRef"
-            @keyup.enter="handleRename"
-          />
-        </div>
-      </template>
-    </CommonModal>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, h, onMounted, onUnmounted, nextTick } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { 
-  NButton, 
-  NDropdown, 
-  NTag, 
-  NInput, 
-  NSelect, 
-  useMessage, 
-  NDataTable,
-  NIcon
-} from 'naive-ui'
-import {
-  DocumentText as DocumentIcon,
-  Grid as ExcelIcon, 
-  Document as PdfIcon,
-  Easel as PptIcon,
-  VideocamOutline as VideoIcon,
-  ImageOutline as ImageIcon,
-  MusicalNotesOutline as AudioIcon
-} from '@vicons/ionicons5'
-import type { DataTableColumns, DropdownOption, SelectOption } from 'naive-ui'
-import AddCoursewareModal from './AddCoursewareModal.vue'
-import DeleteFolderConfirmModal from '@/components/common/DeleteFolderConfirmModal.vue'
-import CommonModal from '@/components/common/CommonModal.vue'
-import MoveFileContent from '@/components/common/MoveFileContent.vue'
-
-const message = useMessage()
-const route = useRoute()
-const router = useRouter()
-
-// 资源类型定义
-interface ResourceItem {
-  id: number
-  name: string
-  type: string // 文件类型：word, excel, pdf, ppt, video, image, audio
-  category: string // 分类：document, video, image, audio
-  size: string
-  creator: string
-  createTime: string
-  isTop: boolean
-  description?: string // 资源描述
-  fileExtension?: string // 文件扩展名
-}
-
-// 搜索关键词
-const searchKeyword = ref('')
-
-// 分类筛选
-const selectedCategory = ref('')
-
-// 分类选项数据
-const categoryOptions: SelectOption[] = [
-  { label: '全部分类', value: '' },
-  { label: '文档', value: 'document' },
-  { label: '视频', value: 'video' },
-  { label: '图片', value: 'image' },
-  { label: '音频', value: 'audio' }
-]
-
-// 选中的资源行
-const selectedFiles = ref<number[]>([])
-
-// 控制模态框显示
-const showAddCoursewareModal = ref(false)
-const showDeleteConfirmModal = ref(false)
-const showMoveFileModal = ref(false)
-const showRenameModal = ref(false)
-
-// 存储待删除的项目信息
-const itemsToDelete = ref<{ type: 'single' | 'multiple', data: any }>({ type: 'single', data: null })
-
-// 存储当前要重命名的资源
-const currentRenameFile = ref<ResourceItem | null>(null)
-// 重命名输入值
-const renameInputValue = ref('')
-
-// 重命名输入框引用
-const renameInputRef = ref<InstanceType<typeof NInput> | null>(null)
-
-// 资源列表数据
-const fileList = ref<ResourceItem[]>([
-  {
-    id: 1,
-    name: '课程介绍文档.docx',
-    type: 'word',
-    category: 'document',
-    size: '2.5MB',
-    creator: '王建国',
-    createTime: '2025.07.25 09:20',
-    isTop: true,
-    description: '课程基本介绍和教学大纲',
-    fileExtension: 'docx'
-  },
-  {
-    id: 2,
-    name: '学习计划表.xlsx',
-    type: 'excel',
-    category: 'document',
-    size: '1.2MB',
-    creator: '王建国',
-    createTime: '2025.07.24 14:30',
-    isTop: false,
-    description: '本学期学习计划安排',
-    fileExtension: 'xlsx'
-  },
-  {
-    id: 3,
-    name: '第一讲：基础知识.pdf',
-    type: 'pdf',
-    category: 'document',
-    size: '5.8MB',
-    creator: '李华',
-    createTime: '2025.07.23 16:45',
-    isTop: false,
-    description: '基础知识点讲解',
-    fileExtension: 'pdf'
-  },
-  {
-    id: 4,
-    name: '课程演示PPT.pptx',
-    type: 'ppt',
-    category: 'document',
-    size: '8.3MB',
-    creator: '张三',
-    createTime: '2025.07.22 11:15',
-    isTop: false,
-    description: '课程重点内容演示',
-    fileExtension: 'pptx'
-  },
-  {
-    id: 5,
-    name: '教学视频1.mp4',
-    type: 'video',
-    category: 'video',
-    size: '125MB',
-    creator: '王建国',
-    createTime: '2025.07.21 10:00',
-    isTop: true,
-    description: '第一章教学视频',
-    fileExtension: 'mp4'
-  },
-  {
-    id: 6,
-    name: '实验演示.avi',
-    type: 'video',
-    category: 'video',
-    size: '89MB',
-    creator: '李华',
-    createTime: '2025.07.20 15:30',
-    isTop: false,
-    description: '实验操作演示视频',
-    fileExtension: 'avi'
-  },
-  {
-    id: 7,
-    name: '课程配图1.jpg',
-    type: 'image',
-    category: 'image',
-    size: '3.2MB',
-    creator: '张三',
-    createTime: '2025.07.19 09:45',
-    isTop: false,
-    description: '课程相关配图',
-    fileExtension: 'jpg'
-  },
-  {
-    id: 8,
-    name: '流程图示意.png',
-    type: 'image',
-    category: 'image',
-    size: '1.8MB',
-    creator: '王建国',
-    createTime: '2025.07.18 13:20',
-    isTop: false,
-    description: '教学流程图示',
-    fileExtension: 'png'
-  },
-  {
-    id: 9,
-    name: '课程背景音乐.mp3',
-    type: 'audio',
-    category: 'audio',
-    size: '4.5MB',
-    creator: '李华',
-    createTime: '2025.07.17 17:10',
-    isTop: false,
-    description: '课程介绍背景音乐',
-    fileExtension: 'mp3'
-  },
-  {
-    id: 10,
-    name: '录音讲解.wav',
-    type: 'audio',
-    category: 'audio',
-    size: '12.3MB',
-    creator: '张三',
-    createTime: '2025.07.16 08:30',
-    isTop: false,
-    description: '重点内容录音讲解',
-    fileExtension: 'wav'
-  }
-])
-
-// 过滤后的资源列表（优化版，置顶资源优先显示，支持分类筛选）
-const filteredFiles = computed(() => {
-  let filtered = fileList.value
-
-  // 如果选择了分类，先按分类过滤
-  if (selectedCategory.value) {
-    filtered = filtered.filter((resource: ResourceItem) =>
-      resource.category === selectedCategory.value
-    )
-  }
-
-  // 如果有搜索关键词，再按关键词过滤
-  if (searchKeyword.value) {
-    filtered = filtered.filter((resource: ResourceItem) =>
-      resource.name.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
-      resource.description?.toLowerCase().includes(searchKeyword.value.toLowerCase())
-    )
-  }
-
-  // 对过滤后的资源进行排序：置顶资源在前，其他资源按创建时间倒序排列
-  return filtered.sort((a: ResourceItem, b: ResourceItem) => {
-    if (a.isTop && !b.isTop) return -1
-    if (!a.isTop && b.isTop) return 1
-    // 如果都是置顶或都不是置顶，按创建时间倒序
-    return new Date(b.createTime).getTime() - new Date(a.createTime).getTime()
-  })
-})
-
-// 获取资源图标组件
-const getFileIconComponent = (type: string) => {
-  const iconMap: { [key: string]: any } = {
-    word: DocumentIcon,
-    excel: ExcelIcon,
-    pdf: PdfIcon,
-    ppt: PptIcon,
-    video: VideoIcon,
-    image: ImageIcon,
-    audio: AudioIcon
-  }
-  return iconMap[type] || DocumentIcon
-}
-
-// 获取文件类型对应的图标颜色
-const getFileIconColor = (type: string) => {
-  const colorMap: { [key: string]: string } = {
-    word: '#2B579A',   // Word蓝色
-    excel: '#217346',  // Excel绿色
-    pdf: '#D83B01',    // PDF红色
-    ppt: '#D24726',    // PowerPoint橙红色
-    video: '#FF6B35',  // 视频橙色
-    image: '#8E44AD',  // 图片紫色
-    audio: '#3498DB'   // 音频蓝色
-  }
-  return colorMap[type] || '#666'
-}
-
-// 获取分类标签颜色
-const getCategoryColor = (category: string) => {
-  const colorMap: { [key: string]: string } = {
-    document: 'blue',
-    video: 'green',
-    image: 'orange',
-    audio: 'purple'
-  }
-  return colorMap[category] || 'default'
-}
-
-// 获取分类显示名称
-const getCategoryName = (category: string) => {
-  const nameMap: { [key: string]: string } = {
-    document: '文档',
-    video: '视频',
-    image: '图片',
-    audio: '音频'
-  }
-  return nameMap[category] || '其他'
-}
-
-// 分类筛选方法
-const filterByCategory = () => {
-  // 筛选后重置到第一页
-  currentPage.value = 1
-}
-
-// 表格行键
-const rowKey = (row: ResourceItem) => row.id
-
-// 表格选择处理
-const handleCheck = (rowKeys: number[]) => {
-  selectedFiles.value = rowKeys
-}
-
-// 行样式名称
-const rowClassName = () => {
-  return 'file-table-row'
-}
-
-// 分页相关状态
-const currentPage = ref(1)
-const pageSize = ref(10)
-const totalPages = computed(() => Math.ceil(filteredFiles.value.length / pageSize.value))
-
-// 可见的页码范围
-const visiblePages = computed(() => {
-  const pages = []
-  const current = currentPage.value
-  const total = totalPages.value
-
-  if (total <= 7) {
-    // 如果总页数小于等于7，显示所有页码
-    for (let i = 1; i <= total; i++) {
-      pages.push(i)
-    }
-  } else {
-    // 显示当前页附近的页码
-    const start = Math.max(1, current - 2)
-    const end = Math.min(total, current + 2)
-
-    for (let i = start; i <= end; i++) {
-      pages.push(i)
-    }
-  }
-
-  return pages
-})
-
-// 是否显示右侧省略号
-const showRightEllipsis = computed(() => {
-  return currentPage.value < totalPages.value - 3
-})
-
-// 分页方法
-const goToPage = (page: string | number) => {
-  if (typeof page === 'string') {
-    switch (page) {
-      case 'first':
-        currentPage.value = 1
-        break
-      case 'prev':
-        if (currentPage.value > 1) currentPage.value--
-        break
-      case 'next':
-        if (currentPage.value < totalPages.value) currentPage.value++
-        break
-      case 'last':
-        currentPage.value = totalPages.value
-        break
-    }
-  } else {
-    currentPage.value = page
-  }
-}
-
-// 分页后的数据
-const paginatedFiles = computed(() => {
-  const start = (currentPage.value - 1) * pageSize.value
-  const end = start + pageSize.value
-  return filteredFiles.value.slice(start, end)
-})
-
-// 更多操作菜单选项
-const getMoreOptions = (row: ResourceItem): DropdownOption[] => [
-  {
-    label: '重命名',
-    key: 'rename',
-    icon: () => h('img', {
-      src: '/images/teacher/重命名.png',
-      alt: '重命名',
-      style: { width: '16px', height: '16px' }
-    })
-  },
-  {
-    label: row.isTop ? '取消置顶' : '置顶',
-    key: 'toggle-top',
-    icon: () => h('img', {
-      src: '/images/teacher/置顶.png',
-      alt: '置顶',
-      style: { width: '16px', height: '16px' }
-    })
-  },
-  {
-    label: '权限设置',
-    key: 'permissions',
-    icon: () => h('img', {
-      src: '/images/teacher/权限设置.png',
-      alt: '权限设置',
-      style: { width: '16px', height: '16px' }
-    })
-  },
-  {
-    label: '下载',
-    key: 'download',
-    icon: () => h('img', {
-      src: '/images/teacher/下载.png',
-      alt: '下载',
-      style: { width: '16px', height: '16px' }
-    })
-  }
-]
-
-// 处理更多操作
-const handleMoreAction = (key: string, row: ResourceItem) => {
-  switch (key) {
-    case 'rename':
-      renameFile(row)
-      break
-    case 'toggle-top':
-      toggleTop(row)
-      break
-    case 'permissions':
-      setPermissions(row)
-      break
-    case 'download':
-      downloadFile(row)
-      break
-  }
-}
-
-// 响应式列宽计算
-// const getResponsiveColumns = () => {
-//   const screenWidth = window.innerWidth
-
-//   // 基础列宽配置
-//   const baseColumns = {
-//     selection: 40,
-//     index: 80,
-//     name: 270,
-//     size: 100,
-//     creator: 120,
-//     createTime: 180,
-//     actions: 320
-//   }
-
-//   // 根据屏幕宽度调整列宽
-//   if (screenWidth < 1200) {
-//     // 小屏幕：减少各列宽度
-//     return {
-//       selection: 35,
-//       index: 60,
-//       name: Math.max(200, screenWidth * 0.25),
-//       size: 80,
-//       creator: 100,
-//       createTime: 140,
-//       actions: Math.max(280, screenWidth * 0.3)
-//     }
-//   } else if (screenWidth < 1600) {
-//     // 中等屏幕：保持基础宽度
-//     return baseColumns
-//   } else {
-//     // 大屏幕：适当增加宽度
-//     return {
-//       selection: 45,
-//       index: 90,
-//       name: 320,
-//       size: 110,
-//       creator: 130,
-//       createTime: 200,
-//       actions: 360
-//     }
-//   }
-// }
-
-// 屏幕宽度响应式数据
-const screenWidth = ref(window.innerWidth)
-
-// 监听窗口大小变化
-const handleResize = () => {
-  screenWidth.value = window.innerWidth
-}
-
-// 响应式列配置计算属性
-// const responsiveColumns = computed(() => {
-//   const width = screenWidth.value
-
-//   // 基础列宽配置 - 根据内容合理分配
-//   const baseColumns = {
-//     selection: 50,
-//     index: 70,
-//     name: 400,  // 名称列需要更宽，因为文件名可能很长
-//     size: 80,   // 大小列缩小
-//     creator: 100,  // 创建人列缩小
-//     createTime: 160,  // 创建时间列稍微缩小
-//     actions: 300  // 操作列稍微缩小
-//   }
-
-//   // 根据屏幕宽度调整列宽
-//   if (width < 1200) {
-//     // 小屏幕：减少各列宽度，但保持比例
-//     return {
-//       selection: 40,
-//       index: 60,
-//       name: Math.max(250, width * 0.35),  // 名称列保持较大比例
-//       size: 70,
-//       creator: 80,
-//       createTime: 130,
-//       actions: Math.max(250, width * 0.25)
-//     }
-//   } else if (width < 1600) {
-//     // 中等屏幕：保持基础宽度
-//     return baseColumns
-//   } else {
-//     // 大屏幕：适当增加宽度，但保持合理比例
-//     return {
-//       selection: 50,
-//       index: 80,
-//       name: 500,  // 名称列在大屏幕上更宽
-//       size: 90,
-//       creator: 120,
-//       createTime: 180,
-//       actions: 350
-//     }
-//   }
-// })
-
-// 在组件挂载时添加事件监听器
-onMounted(() => {
-  window.addEventListener('resize', handleResize)
-})
-
-// 在组件卸载时移除事件监听器
-onUnmounted(() => {
-  window.removeEventListener('resize', handleResize)
-})
-
-// 表格列配置
-const columns = computed((): DataTableColumns<ResourceItem> => [
-  {
-    type: 'selection',
-    width: 50  // 选择框固定宽度
-  },
-  {
-    title: '序号',
-    key: 'index',
-    width: 70,  // 序号固定宽度
-    render: (_row: ResourceItem, index: number) => index + 1
-  },
-  {
-    title: '资源名称',
-    key: 'name',
-    // 不设置宽度，让这列自动占用剩余空间
-    ellipsis: {
-      tooltip: true
-    },
-    render: (row: ResourceItem) => {
-      return h('div', { style: { display: 'flex', alignItems: 'center', gap: '8px', justifyContent: 'center' } }, [
-        h(NIcon, {
-          size: 16,
-          color: getFileIconColor(row.type)
-        }, {
-          default: () => h(getFileIconComponent(row.type))
-        }),
-        h('div', { style: { display: 'flex', alignItems: 'center', gap: '8px' } }, [
-          h('span', { style: { color: '#062333' } }, row.name),
-          row.isTop ? h(NTag, { type: 'info', size: 'small' }, { default: () => '置顶' }) : null
-        ])
-      ])
-    }
-  },
-  {
-    title: '分类',
-    key: 'category',
-    width: 100,
-    render: (row: ResourceItem) => {
-      return h(NTag, { 
-        type: getCategoryColor(row.category) as any, 
-        size: 'small' 
-      }, { 
-        default: () => getCategoryName(row.category) 
-      })
-    }
-  },
-  {
-    title: '大小',
-    key: 'size',
-    width: 80  // 大小列固定较小宽度
-  },
-  {
-    title: '创建人',
-    key: 'creator',
-    width: 100  // 创建人列固定较小宽度
-  },
-  {
-    title: '创建时间',
-    key: 'createTime',
-    width: 160  // 创建时间列固定宽度
-  },
-  {
-    title: '操作',
-    key: 'actions',
-    width: 250,  // 操作列固定宽度，减少宽度因为移除了上传按钮
-    render: (row: ResourceItem) => {
-      const buttons = [
-        h(NButton, {
-          size: 'small',
-          type: 'primary',
-          secondary: true,
-          onClick: () => viewFile(row)
-        }, { default: () => '查看' }),
-        h(NButton, {
-          size: 'small',
-          type: 'error',
-          secondary: true,
-          onClick: () => deleteFile(row)
-        }, { default: () => '删除' }),
-        h(NDropdown, {
-          options: getMoreOptions(row),
-          onSelect: (key: string) => handleMoreAction(key, row)
-        }, {
-          default: () => h(NButton, { size: 'small', secondary: true }, { default: () => '更多' })
-        })
-      ]
-
-      return h('div', { style: { display: 'flex', gap: '8px', alignItems: 'center', flexWrap: 'wrap', justifyContent: 'center' } }, buttons)
-    }
-  }
-])
-
-// 资源操作方法
-const addCourseware = () => {
-  showAddCoursewareModal.value = true
-}
-
-// 关闭添加课件模态框
-const closeAddCoursewareModal = () => {
-  showAddCoursewareModal.value = false
-}
-
-// const moveFiles = () => {
-//   if (selectedFiles.value.length === 0) return
-//   showMoveFileModal.value = true
-// }
-
-// 关闭移动文件模态框
-const closeMoveFileModal = () => {
-  showMoveFileModal.value = false
-}
-
-// 处理移动文件
-const handleMoveFiles = (targetFolder: any) => {
-  // 这里实现移动文件的逻辑
-  message.success(`成功移动 ${selectedFiles.value.length} 个文件到 "${targetFolder.name}"`)
-  selectedFiles.value = [] // 清空选择
-
-  // 关闭模态框
-  showMoveFileModal.value = false
-}
-
-const deleteSelected = () => {
-  if (selectedFiles.value.length === 0) return
-  // 存储要删除的文件信息
-  itemsToDelete.value = {
-    type: 'multiple',
-    data: selectedFiles.value
-  }
-  showDeleteConfirmModal.value = true
-}
-
-const searchFiles = () => {
-  message.info('搜索文件: ' + searchKeyword.value)
-}
-
-const viewFile = (file: ResourceItem) => {
-  // 跳转到文件查看页面
-  router.push({
-    name: 'FileViewer',
-    params: { 
-      id: route.params.id, // 课程ID
-      fileId: file.id.toString() 
-    }
-  })
-}
-
-const deleteFile = (file: ResourceItem) => {
-  // 存储要删除的文件信息
-  itemsToDelete.value = {
-    type: 'single',
-    data: file
-  }
-  showDeleteConfirmModal.value = true
-}
-
-// 确认删除
-const confirmDelete = () => {
-  if (itemsToDelete.value.type === 'multiple') {
-    // 批量删除
-    const idsToDelete = itemsToDelete.value.data as number[]
-    idsToDelete.forEach((id: number) => {
-      const index = fileList.value.findIndex((f: ResourceItem) => f.id === id)
-      if (index > -1) {
-        fileList.value.splice(index, 1)
-      }
-    })
-    selectedFiles.value = []
-    message.success(`成功删除 ${idsToDelete.length} 个文件`)
-  } else {
-    // 单个删除
-    const file = itemsToDelete.value.data as ResourceItem
-    const index = fileList.value.findIndex((f: ResourceItem) => f.id === file.id)
-    if (index > -1) {
-      fileList.value.splice(index, 1)
-      message.success('删除成功')
-    }
-  }
-  showDeleteConfirmModal.value = false
-  itemsToDelete.value = { type: 'single', data: null }
-}
-
-// 取消删除
-const cancelDelete = () => {
-  showDeleteConfirmModal.value = false
-  itemsToDelete.value = { type: 'single', data: null }
-}
-
-const renameFile = (file: ResourceItem) => {
-  // 存储当前要重命名的文件
-  currentRenameFile.value = file
-  // 设置输入框的初始值
-  renameInputValue.value = file.name
-  showRenameModal.value = true
-  
-  // 使用 nextTick 确保模态框渲染后再聚焦输入框
-  nextTick(() => {
-    renameInputRef.value?.focus()
-  })
-}
-
-// 关闭重命名模态框
-const closeRenameModal = () => {
-  showRenameModal.value = false
-  currentRenameFile.value = null
-  renameInputValue.value = ''
-}
-
-// 处理重命名
-const handleRename = () => {
-  if (!currentRenameFile.value || !renameInputValue.value.trim()) {
-    message.error('文件名不能为空')
-    return
-  }
-
-  const newName = renameInputValue.value.trim()
-  const oldName = currentRenameFile.value.name
-  
-  // 检查名称是否有变化
-  if (newName === oldName) {
-    message.info('文件名未发生变化')
-    closeRenameModal()
-    return
-  }
-
-  // 查找原文件并更新名称
-  const originalFile = findFileById(fileList.value, currentRenameFile.value.id)
-  if (originalFile) {
-    originalFile.name = newName
-    message.success(`文件重命名成功："${oldName}" → "${newName}"`)
-  } else {
-    message.error('未找到要重命名的文件')
-  }
-
-  closeRenameModal()
-}
-
-// 递归查找资源
-const findFileById = (files: ResourceItem[], id: number): ResourceItem | null => {
-  for (const file of files) {
-    if (file.id === id) {
-      return file
-    }
-  }
-  return null
-}
-
-// 简化的置顶功能（平铺结构下直接排序）
-const toggleTop = (file: ResourceItem) => {
-  file.isTop = !file.isTop
-
-  if (file.isTop) {
-    message.success('已置顶')
-  } else {
-    message.success('已取消置顶')
-  }
-}
-
-const setPermissions = (file: ResourceItem) => {
-  message.info('权限设置: ' + file.name)
-}
-
-const downloadFile = (file: ResourceItem) => {
-  message.info('下载文件: ' + file.name)
-}
-</script>
-
-<style scoped>
-.courseware-management {
-  width: 100%;
-  background: #fff;
-  overflow: auto;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-}
-
-/* 顶部工具栏 */
-.toolbar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-right: 25px;
-  background: #fff;
-  padding: 30px 0 20px 30px;
-  border-bottom: 2px solid #F6F6F6;
-}
-
-.toolbar h2 {
-  margin: 0;
-  font-size: 18px;
-  color: #333;
-}
-
-.toolbar-actions {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-/* 分类筛选器样式 */
-.category-filter {
-  margin-right: 10px;
-}
-
-/* 搜索框样式 */
-.search-box {
-  display: flex;
-  align-items: center;
-}
-
-/* 模态框遮罩层样式 */
-.modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 1000;
-}
-
-/* 重命名模态框内容样式 */
-.rename-content {
-  padding: 10px 0;
-}
-
-.table-box {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  justify-content: space-between;
-  flex: 1;
-}
-
-/* Naive UI 表格样式定制 */
-:deep(.file-data-table) {
-  background: #fff;
-  border-radius: 8px;
-  padding: 40px;
-}
-
-/* 表格自适应布局 */
-:deep(.file-data-table .n-data-table-wrapper) {
-  overflow-x: auto;
-}
-
-:deep(.file-data-table .n-data-table-base-table) {
-  width: 100%;
-  table-layout: fixed;
-}
-
-/* 名称列自动占用剩余空间 */
-:deep(.file-data-table .n-data-table-td[data-col-key="name"]),
-:deep(.file-data-table .n-data-table-th[data-col-key="name"]) {
-  max-width: 0;
-  width: auto;
-}
-
-/* 表格头部样式 */
-:deep(.file-data-table .n-data-table-thead) {
-  background: #fafafa;
-}
-
-:deep(.file-data-table .n-data-table-th) {
-  background: #fafafa;
-  font-weight: 500;
-  color: #062333;
-  font-size: 14px;
-  border-bottom: 1px solid #e8e8e8;
-  padding: 12px 8px;
-  text-align: center;
-}
-
-/* 表格行样式 */
-:deep(.file-data-table .n-data-table-td) {
-  font-size: 13px;
-  color: #062333;
-  border-bottom: 1px solid #f0f0f0;
-  padding: 12px 8px;
-  vertical-align: middle;
-  text-align: center;
-  word-break: break-word;
-  white-space: normal;
-}
-
-/* 分类列样式 */
-:deep(.file-data-table .n-data-table-td[data-col-key="category"]),
-:deep(.file-data-table .n-data-table-th[data-col-key="category"]) {
-  text-align: center !important;
-}
-
-/* 分类标签样式优化 */
-:deep(.file-data-table .n-tag) {
-  font-size: 11px;
-  padding: 2px 8px;
-  border-radius: 12px;
-  font-weight: 500;
-}
-
-/* 序号列居中对齐 */
-:deep(.file-data-table .n-data-table-td[data-col-key="index"]) {
-  text-align: center !important;
-}
-
-/* 隐藏序号列的展开占位符，避免影响居中 */
-:deep(.file-data-table .n-data-table-td[data-col-key="index"] .n-data-table-expand-placeholder) {
-  display: none;
-}
-
-/* 确保序号列的展开触发器也居中 */
-:deep(.file-data-table .n-data-table-td[data-col-key="index"] .n-data-table-expand-trigger) {
-  margin-right: 4px;
-}
-
-:deep(.file-data-table .n-data-table-th[data-col-key="index"]) {
-  text-align: center !important;
-}
-
-/* 名称列居中对齐 */
-:deep(.file-data-table .n-data-table-td[data-col-key="name"]) {
-  text-align: center;
-}
-
-:deep(.file-data-table .n-data-table-th[data-col-key="name"]) {
-  text-align: center;
-}
-
-/* 其他列居中对齐 */
-:deep(.file-data-table .n-data-table-td[data-col-key="size"]),
-:deep(.file-data-table .n-data-table-td[data-col-key="creator"]),
-:deep(.file-data-table .n-data-table-td[data-col-key="createTime"]),
-:deep(.file-data-table .n-data-table-td[data-col-key="actions"]) {
-  text-align: center !important;
-}
-
-:deep(.file-data-table .n-data-table-th[data-col-key="size"]),
-:deep(.file-data-table .n-data-table-th[data-col-key="creator"]),
-:deep(.file-data-table .n-data-table-th[data-col-key="createTime"]),
-:deep(.file-data-table .n-data-table-th[data-col-key="actions"]) {
-  text-align: center !important;
-}
-
-:deep(.file-data-table .n-data-table-tr:hover) {
-  background: #fafafa;
-}
-
-/* 复选框样式 */
-:deep(.file-data-table .n-checkbox) {
-  --n-size: 16px;
-}
-
-/* 按钮组样式调整 */
-:deep(.file-data-table .n-button) {
-  font-size: 12px;
-  height: 28px;
-  padding: 0 12px;
-  margin: 2px;
-}
-
-/* 下拉菜单样式 */
-:deep(.n-dropdown-option) {
-  font-size: 12px;
-  padding: 8px 12px;
-}
-
-/* 分页样式 */
-:deep(.n-data-table__pagination) {
-  position: relative;
-  padding: 20px 0;
-  margin-top: 20px;
-  background: #fff;
-}
-
-:deep(.n-pagination) {
-  justify-content: center;
-  margin: 0;
-}
-
-/* 当前页面颜色调整 */
-:deep(.n-pagination-item--active) {
-  background-color: #0088D1 !important;
-  border-color: #0088D1 !important;
-  color: #fff !important;
-}
-
-:deep(.n-pagination-item--active:hover) {
-  background-color: #0077B8 !important;
-  border-color: #0077B8 !important;
-}
-
-/* 分页按钮悬停效果 */
-:deep(.n-pagination-item:hover:not(.n-pagination-item--disabled):not(.n-pagination-item--active)) {
-  background-color: #f5f5f5;
-  border-color: #0088D1;
-  color: #0088D1;
-}
-
-/* 快速跳转输入框样式 */
-:deep(.n-pagination-quick-jumper .n-input) {
-  width: 50px;
-}
-
-
-
-/* 页面大小选择器样式 */
-:deep(.n-select .n-base-selection) {
-  border-color: #e0e0e0;
-}
-
-:deep(.n-select .n-base-selection:hover) {
-  border-color: #0088D1;
-}
-
-/* 标签样式 */
-:deep(.n-tag) {
-  font-size: 10px;
-  height: 18px;
-  line-height: 16px;
-  padding: 0 6px;
-}
-
-/* 输入框样式 */
-:deep(.n-input) {
-  font-size: 14px;
-}
-
-/* 表格行样式 */
-:deep(.file-table-row) {
-  transition: background-color 0.2s;
-}
-
-:deep(.file-table-row:hover) {
-  background-color: #f8f9fa;
-}
-
-/* 操作按钮容器 */
-:deep(.file-data-table .n-data-table-td:last-child) {
-  padding: 8px;
-}
-
-:deep(.file-data-table .n-data-table-table) {
-  border-spacing: 0;
-}
-
-:deep(.file-data-table .n-data-table-th:first-child),
-:deep(.file-data-table .n-data-table-td:first-child) {
-  padding-left: 16px;
-}
-
-:deep(.file-data-table .n-data-table-th:last-child),
-:deep(.file-data-table .n-data-table-td:last-child) {
-  padding-right: 16px;
-}
-
-/* 表格边框 */
-:deep(.file-data-table .n-data-table-table) {
-  border: 1px solid #f0f0f0;
-  border-radius: 8px;
-}
-
-/* 隐藏序号列中的展开图标 */
-:deep(.file-data-table .n-data-table-expand-trigger) {
-  display: none !important;
-}
-
-/* 操作按钮样式 - 只有边框和文字颜色，无背景色 */
-:deep(.file-data-table .n-button--info-type.n-button--secondary) {
-  background-color: transparent !important;
-  border: 1px solid #0288D1;
-  color: #0288D1;
-}
-
-:deep(.file-data-table .n-button--info-type.n-button--secondary:hover) {
-  background-color: rgba(32, 128, 240, 0.05) !important;
-  border: 1px solid #0288D1;
-  color: #248DD3;
-}
-
-:deep(.file-data-table .n-button--primary-type.n-button--secondary) {
-  background-color: transparent !important;
-  border: 1px solid #0288D1;
-  color: #0288D1;
-}
-
-:deep(.file-data-table .n-button--primary-type.n-button--secondary:hover) {
-  background-color: rgba(24, 160, 88, 0.05) !important;
-  border: 1px solid #0288D1;
-  color: #0288D1;
-}
-
-:deep(.file-data-table .n-button--error-type.n-button--secondary) {
-  background-color: transparent !important;
-  border: 1px solid #FF4D4F;
-  color: #FD8485;
-}
-
-:deep(.file-data-table .n-button--error-type.n-button--secondary:hover) {
-  background-color: rgba(208, 48, 80, 0.05) !important;
-  border: 1px solid #FF4D4F;
-  color: #FD8485;
-}
-
-:deep(.file-data-table .n-button--default-type.n-button--secondary) {
-  background-color: transparent !important;
-  border: 1px solid #4165D7;
-  color: #4165D7;
-}
-
-:deep(.file-data-table .n-button--default-type.n-button--secondary:hover) {
-  background-color: rgba(0, 0, 0, 0.02) !important;
-  border: 1px solid #4165D7;
-  color: #4165D7;
-}
-
-/* 下拉菜单图标悬停效果 */
-:deep(.n-dropdown-option:hover img[alt="重命名"]) {
-  content: url('/images/teacher/重命名-选中.png');
-}
-
-:deep(.n-dropdown-option:hover img[alt="置顶"]) {
-  content: url('/images/teacher/置顶-选中.png');
-}
-
-:deep(.n-dropdown-option:hover img[alt="权限设置"]) {
-  content: url('/images/teacher/权限设置-选中.png');
-}
-
-:deep(.n-dropdown-option:hover img[alt="下载"]) {
-  content: url('/images/teacher/下载-选中.png');
-}
-
-/* 自定义分页器样式 */
-.custom-pagination {
-  display: flex;
-  justify-content: center;
-  background: #fff;
-  padding: 20px 0;
-  margin-top: auto;
-  width: 100%;
-}
-
-.pagination-content {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin: 0 auto;
-  padding: 0 10px;
-}
-
-.page-numbers {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0;
-  white-space: nowrap;
-}
-
-.page-number {
-  display: inline-block;
-  min-width: 38px;
-  height: 38px;
-  line-height: 38px;
-  text-align: center;
-  color: #333;
-  text-decoration: none;
-  font-size: 14px;
-  padding: 0 5px;
-  margin: 0 4px;
-  border-radius: 5px;
-  cursor: pointer;
-  transition: all 0.3s ease;
-}
-
-.page-number-bordered {
-  border: 1px solid #d9d9d9;
-}
-
-.page-number.active {
-  background-color: #0088D1;
-  color: white;
-  border-color: #0088D1;
-}
-
-.page-number:hover:not(.disabled) {
-  border-color: #0088D1;
-}
-
-.page-number.disabled {
-  color: #ccc;
-  cursor: not-allowed;
-}
-
-.page-number.disabled:hover {
-  color: #ccc;
-  border-color: #d9d9d9;
-}
-
-.nav-button {
-  padding: 0 8px;
-  border: none;
-}
-
-.nav-button:hover:not(.disabled) {
-  color: #0088D1;
-}
-
-/* 响应式样式 */
-@media (max-width: 1200px) {
-  .toolbar {
-    flex-direction: column;
-    gap: 15px;
-    align-items: flex-start;
-  }
-
-  .toolbar-actions {
-    flex-wrap: wrap;
-    gap: 8px;
-  }
-
-  .search-box :deep(.n-input) {
-    width: 150px !important;
-  }
-
-  /* 表格在小屏幕下的优化 */
-  :deep(.file-data-table) {
-    padding: 20px;
-  }
-
-  /* 确保表格横向滚动正常 */
-  :deep(.file-data-table .n-data-table-wrapper) {
-    overflow-x: auto;
-    -webkit-overflow-scrolling: touch;
-  }
-  /* 操作按钮在小屏幕下换行 */
-  :deep(.file-data-table .n-data-table-td:last-child .n-button) {
-    margin: 2px;
-    font-size: 11px;
-    padding: 0 8px;
-  }
-}
-
-@media (max-width: 768px) {
-  .toolbar {
-    padding: 20px 15px;
-  }
-
-  .toolbar h2 {
-    font-size: 16px;
-  }
-
-  .category-filter :deep(.n-base-selection) {
-    min-width: 100px !important;
-    font-size: 12px;
-  }
-
-  .search-box :deep(.n-input) {
-    width: 120px !important;
-    font-size: 12px;
-  }
-
-  /* 表格在移动端的优化 */
-  :deep(.file-data-table) {
-    padding: 10px;
-  }
-
-  /* 隐藏分类列在移动端 */
-  :deep(.file-data-table .n-data-table-th[data-col-key="category"]),
-  :deep(.file-data-table .n-data-table-td[data-col-key="category"]) {
-    display: none;
-  }
-
-  /* 隐藏创建人列在移动端 */
-  :deep(.file-data-table .n-data-table-th[data-col-key="creator"]),
-  :deep(.file-data-table .n-data-table-td[data-col-key="creator"]) {
-    display: none;
-  }
-
-  /* 操作按钮在移动端垂直排列 */
-  :deep(.file-data-table .n-data-table-td:last-child > div) {
-    flex-direction: column;
-    gap: 4px;
-  }
-
-  :deep(.file-data-table .n-data-table-td:last-child .n-button) {
-    width: 100%;
-    margin: 1px 0;
-  }
-
-  /* 分页器在移动端的优化 */
-  .page-numbers {
-    flex-wrap: wrap;
-    gap: 4px;
-  }
-
-  .page-number {
-    min-width: 32px;
-    height: 32px;
-    line-height: 32px;
-    font-size: 12px;
-    margin: 0 2px;
-  }
-}
-
-@media (max-width: 480px) {
-  .toolbar-actions {
-    flex-direction: column;
-    width: 100%;
-    gap: 8px;
-  }
-
-  .search-box {
-    width: 100%;
-  }
-
-  .search-box :deep(.n-input) {
-    width: 100% !important;
-  }
-
-  .category-filter {
-    width: 100%;
-  }
-
-  .category-filter :deep(.n-base-selection) {
-    width: 100% !important;
-  }
-
-  /* 进一步隐藏列 */
-  :deep(.file-data-table .n-data-table-th[data-col-key="createTime"]),
-  :deep(.file-data-table .n-data-table-td[data-col-key="createTime"]) {
-    display: none;
-  }
-
-  /* 确保分类列也被隐藏 */
-  :deep(.file-data-table .n-data-table-th[data-col-key="category"]),
-  :deep(.file-data-table .n-data-table-td[data-col-key="category"]) {
-    display: none;
-  }
-
-  /* 表格内容在超小屏幕下的优化 */
-  :deep(.file-data-table .n-data-table-td) {
-    padding: 8px 4px;
-    font-size: 12px;
-  }
-
-  :deep(.file-data-table .n-data-table-th) {
-    padding: 8px 4px;
-    font-size: 12px;
-  }
-}
-
-/* 表格横向滚动优化 */
-:deep(.file-data-table .n-data-table-wrapper) {
-  overflow-x: auto;
-}
-
-:deep(.file-data-table .n-data-table-base-table) {
-  min-width: 100%;
-}
-
-/* 确保表格内容不会溢出 */
-:deep(.file-data-table .n-data-table-td) {
-  word-break: break-word;
-  white-space: normal;
-}
-
-/* 名称列文本溢出处理 */
-:deep(.file-data-table .n-data-table-td[data-col-key="name"] span) {
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  display: inline-block;
-}
-</style>
diff --git a/src/views/teacher/course/FileViewer.vue b/src/views/teacher/course/FileViewer.vue
index 673365c..142627b 100644
--- a/src/views/teacher/course/FileViewer.vue
+++ b/src/views/teacher/course/FileViewer.vue
@@ -31,57 +31,17 @@
 
     <!-- 内容区域 -->
     <div class="content">
-      <!-- 文件夹视图 -->
-      <div v-if="currentFile && currentFile.type === 'folder'" class="folder-view">
-        <div class="folder-header">
-          <h3>{{ currentFile.name }}</h3>
-          <div class="folder-info">
-            <span>创建时间：{{ currentFile.createTime }}</span>
-            <span>创建人：{{ currentFile.creator }}</span>
-          </div>
-        </div>
-        
-        <!-- 文件夹内容列表 -->
-        <div class="folder-content">
-          <div class="file-grid">
-            <div 
-              v-for="item in folderItems" 
-              :key="item.id"
-              class="file-item"
-              @click="viewItem(item)"
-              @dblclick="openItem(item)"
-            >
-              <div class="file-icon">
-                <img :src="getFileIcon(item.type)" :alt="item.type" />
-                <div v-if="item.isTop" class="top-badge">置顶</div>
-              </div>
-              <div class="file-name" :title="item.name">{{ item.name }}</div>
-              <div class="file-meta">
-                <span class="file-size">{{ item.size }}</span>
-                <span class="file-time">{{ formatTime(item.createTime) }}</span>
-              </div>
-            </div>
-          </div>
-          
-          <!-- 空状态 -->
-          <div v-if="folderItems.length === 0" class="empty-state">
-            <div class="empty-icon">📁</div>
-            <p>该文件夹暂无内容</p>
-          </div>
-        </div>
-      </div>
-
       <!-- 文件预览视图 -->
-      <div v-else-if="currentFile" class="file-preview">
+      <div v-if="currentFile" class="file-preview">
         <div class="file-header">
           <div class="file-info">
-            <img :src="getFileIcon(currentFile.type)" :alt="currentFile.type" class="file-type-icon" />
+            <div class="file-type-icon">
+              <n-icon size="64" :component="getFileIcon(currentFile.type)" />
+            </div>
             <div class="file-details">
-              <h3>{{ currentFile.name }}</h3>
+              <h3>{{ getDisplayFileName(currentFile) }}</h3>
               <div class="file-meta">
                 <span>文件大小：{{ currentFile.size }}</span>
-                <span>创建时间：{{ currentFile.createTime }}</span>
-                <span>创建人：{{ currentFile.creator }}</span>
               </div>
             </div>
           </div>
@@ -91,14 +51,14 @@
         <div class="preview-content">
           <!-- 图片预览 -->
           <div v-if="isImage(currentFile.type)" class="image-preview">
-            <img :src="getPreviewUrl(currentFile)" :alt="currentFile.name" />
+            <img :src="getPreviewUrl(currentFile)" :alt="getDisplayFileName(currentFile)" />
           </div>
 
           <!-- 视频预览 -->
           <div v-else-if="isVideo(currentFile.type)" class="video-preview">
-            <video controls :src="getPreviewUrl(currentFile)">
-              您的浏览器不支持视频播放
-            </video>
+            <div class="video-container">
+              <div ref="dplayerRef" class="dplayer-container"></div>
+            </div>
           </div>
 
           <!-- PDF预览 -->
@@ -110,10 +70,10 @@
           <div v-else-if="isDocument(currentFile.type)" class="document-preview">
             <div class="document-placeholder">
               <div class="file-preview-icon">
-                <img :src="getFileIcon(currentFile.type)" :alt="currentFile.type" />
+                <n-icon size="64" :component="getFileIcon(currentFile.type)" />
               </div>
               <div class="file-preview-info">
-                <h4>{{ currentFile.name }}</h4>
+                <h4>{{ getDisplayFileName(currentFile) }}</h4>
                 <p class="file-description">该文件类型暂不支持在线预览</p>
                 <n-button type="primary" @click="downloadFile">下载查看</n-button>
               </div>
@@ -124,10 +84,10 @@
           <div v-else class="unsupported-preview">
             <div class="unsupported-placeholder">
               <div class="file-preview-icon">
-                <img :src="getFileIcon(currentFile.type)" :alt="currentFile.type" />
+                <n-icon size="64" :component="getFileIcon(currentFile.type)" />
               </div>
               <div class="file-preview-info">
-                <h4>{{ currentFile.name }}</h4>
+                <h4>{{ getDisplayFileName(currentFile) }}</h4>
                 <p class="file-description">该文件类型暂不支持预览</p>
                 <n-button type="primary" @click="downloadFile">下载查看</n-button>
               </div>
@@ -146,12 +106,29 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+import { useRouter } from 'vue-router'
 import { useMessage } from 'naive-ui'
 import { ArrowBackOutline } from '@vicons/ionicons5'
+import { downloadFileFromUrl, getFileExtension } from '@/utils/download'
+import { 
+  FolderOutline,
+  VideocamOutline,
+  ImageOutline,
+  DocumentTextOutline,
+  GridOutline,
+  EaselOutline,
+  AttachOutline
+} from '@vicons/ionicons5'
+
+// 声明全局 DPlayer 类型
+declare global {
+  interface Window {
+    DPlayer: any
+    Hls: any
+  }
+}
 
-const route = useRoute()
 const router = useRouter()
 const message = useMessage()
 
@@ -166,92 +143,93 @@ interface FileItem {
   isTop: boolean
   children?: FileItem[]
   parentId?: number
+  originalData?: any // 保存API返回的原始数据
 }
 
 // 当前查看的文件/文件夹
 const currentFile = ref<FileItem | null>(null)
 // 面包屑导航
 const breadcrumbs = ref<FileItem[]>([])
-// 文件夹内容
-const folderItems = ref<FileItem[]>([])
 
-// 模拟文件数据（实际项目中应该从API获取）
-const mockFileData: FileItem[] = [
-  {
-    id: 1,
-    name: '教学资料文件夹',
-    type: 'folder',
-    size: '1MB',
-    creator: '王建国',
-    createTime: '2025.07.25 09:20',
-    isTop: true,
-    children: [
-      {
-        id: 2,
-        name: '课程大纲.xlsx',
-        type: 'excel',
-        size: '1MB',
-        creator: '王建国',
-        createTime: '2025.07.25 09:20',
-        isTop: false,
-        parentId: 1
-      },
-      {
-        id: 3,
-        name: '教学计划.docx',
-        type: 'word',
-        size: '2MB',
-        creator: '王建国',
-        createTime: '2025.07.25 09:20',
-        isTop: false,
-        parentId: 1
-      },
-      {
-        id: 4,
-        name: '教学PPT.pptx',
-        type: 'ppt',
-        size: '5MB',
-        creator: '王建国',
-        createTime: '2025.07.25 09:20',
-        isTop: false,
-        parentId: 1
-      },
-      {
-        id: 5,
-        name: '教学视频.mp4',
-        type: 'video',
-        size: '100MB',
-        creator: '王建国',
-        createTime: '2025.07.25 09:20',
-        isTop: false,
-        parentId: 1
-      },
-      {
-        id: 6,
-        name: '学习指南.pdf',
-        type: 'pdf',
-        size: '3MB',
-        creator: '王建国',
-        createTime: '2025.07.25 09:20',
-        isTop: false,
-        parentId: 1
-      }
-    ]
+// 视频播放器相关
+const dplayerRef = ref<HTMLElement | null>(null)
+const dplayer = ref<any>(null)
+const videoQualities = ref<VideoQuality[]>([])
+const currentQuality = ref<string>('')
+
+// 视频画质类型定义
+interface VideoQuality {
+  name: string
+  url: string
+  type?: string
+}
+
+// 获取文件扩展名并格式化显示名称
+const getDisplayFileName = (item: FileItem): string => {
+  if (item.type === 'folder') {
+    return item.name
   }
-]
+  
+  // 从原始数据的fileUrl中提取文件扩展名
+  const fileUrl = item.originalData?.fileUrl || ''
+  let extension = ''
+  
+  if (fileUrl) {
+    // 尝试从URL中提取扩展名
+    const urlMatch = fileUrl.match(/\.([a-zA-Z0-9]+)(?:\?|$)/)
+    if (urlMatch) {
+      extension = urlMatch[1].toLowerCase()
+    }
+  }
+  
+  // 如果URL中没有扩展名，根据文件类型推断
+  if (!extension) {
+    switch (item.type) {
+      case 'video':
+        extension = 'mp4'
+        break
+      case 'image':
+        extension = 'jpg'
+        break
+      case 'pdf':
+        extension = 'pdf'
+        break
+      case 'word':
+        extension = 'docx'
+        break
+      case 'excel':
+        extension = 'xlsx'
+        break
+      case 'ppt':
+        extension = 'pptx'
+        break
+      default:
+        extension = 'file'
+    }
+  }
+  
+  // 检查文件名是否已经包含扩展名
+  const nameHasExtension = /\.[a-zA-Z0-9]+$/.test(item.name)
+  
+  if (nameHasExtension) {
+    return item.name
+  } else {
+    return `${item.name}.${extension}`
+  }
+}
 
 // 获取文件图标
 const getFileIcon = (type: string) => {
-  const iconMap: { [key: string]: string } = {
-    folder: '/images/teacher/folder.jpg',
-    excel: '/images/activity/xls.png',
-    word: '/images/activity/wrod.png',
-    pdf: '/images/activity/pdf.png',
-    ppt: '/images/activity/ppt.png',
-    video: '/images/activity/file.png',
-    image: '/images/activity/image.png'
+  const iconMap: { [key: string]: any } = {
+    folder: FolderOutline,
+    excel: GridOutline,
+    word: DocumentTextOutline,
+    pdf: DocumentTextOutline,
+    ppt: EaselOutline,
+    video: VideocamOutline,
+    image: ImageOutline
   }
-  return iconMap[type] || '/images/activity/file.png'
+  return iconMap[type] || AttachOutline
 }
 
 // 判断文件类型
@@ -260,90 +238,318 @@ const isVideo = (type: string) => ['mp4', 'avi', 'mov', 'wmv', 'flv', 'webm', 'v
 const isPdf = (type: string) => type === 'pdf'
 const isDocument = (type: string) => ['word', 'excel', 'ppt', 'txt'].includes(type)
 
-// 获取预览URL（实际项目中应该是真实的文件URL）
+// 获取预览URL
 const getPreviewUrl = (file: FileItem) => {
-  // 这里应该返回实际的文件预览URL
-  return `/api/files/preview/${file.id}`
+  // 使用原始数据中的 fileUrl
+  return file.originalData?.fileUrl || ''
 }
 
-// 格式化时间
-const formatTime = (timeStr: string) => {
-  return timeStr.replace(/\./g, '-')
+// 解析视频多画质URL
+const parseVideoQualities = (fileUrl: string): VideoQuality[] => {
+  if (!fileUrl) return []
+
+  // 按逗号分割URL
+  const urls = fileUrl.split(',').map(url => url.trim()).filter(url => url)
+  
+  if (urls.length <= 1) {
+    return [{
+      name: '原画',
+      url: fileUrl,
+      type: fileUrl.includes('.m3u8') ? 'hls' : 'normal'
+    }]
+  }
+
+  const qualities: VideoQuality[] = []
+  
+  for (const url of urls) {
+    const quality = extractQualityFromUrl(url)
+    qualities.push({
+      name: quality,
+      url: url,
+      type: url.includes('.m3u8') ? 'hls' : 'normal'
+    })
+  }
+
+  // 按画质排序（从高到低）
+  return qualities.sort((a, b) => {
+    const aRes = getResolutionValue(a.name)
+    const bRes = getResolutionValue(b.name)
+    return bRes - aRes
+  })
 }
 
-// 根据ID查找文件
-const findFileById = (files: FileItem[], id: number): FileItem | null => {
-  for (const file of files) {
-    if (file.id === id) {
-      return file
-    }
-    if (file.children) {
-      const found = findFileById(file.children, id)
-      if (found) return found
+// 从URL中提取画质信息
+const extractQualityFromUrl = (url: string): string => {
+  const patterns = [
+    { pattern: /\/(\d+p)\//i, extract: (match: RegExpMatchArray) => match[1] },
+    { pattern: /\/(\d+)\//i, extract: (match: RegExpMatchArray) => `${match[1]}p` }
+  ]
+
+  for (const { pattern, extract } of patterns) {
+    const match = url.match(pattern)
+    if (match) {
+      return extract(match).toUpperCase()
     }
   }
-  return null
+
+  // 尝试从路径推断
+  if (url.includes('1080')) return '1080P'
+  if (url.includes('720')) return '720P'
+  if (url.includes('480')) return '480P'
+  if (url.includes('360')) return '360P'
+  
+  return '原画'
 }
 
-// 构建面包屑导航
-const buildBreadcrumbs = (file: FileItem) => {
-  const crumbs: FileItem[] = []
-  let current = file
+// 获取分辨率数值（用于排序）
+const getResolutionValue = (quality: string): number => {
+  const resolutionMap: { [key: string]: number } = {
+    '1080P': 1080,
+    '720P': 720,
+    '480P': 480,
+    '360P': 360,
+    '原画': 9999
+  }
+  return resolutionMap[quality] || 0
+}
+
+// 获取默认画质
+const getDefaultQuality = (qualities: VideoQuality[]): VideoQuality | null => {
+  if (qualities.length === 0) return null
   
-  while (current) {
-    crumbs.unshift(current)
-    if (current.parentId) {
-      current = findFileById(mockFileData, current.parentId) as FileItem
-    } else {
-      break
+  // 优先选择720P
+  const preferred = qualities.find(q => q.name === '720P')
+  if (preferred) return preferred
+  
+  // 其次选择1080P
+  const fallback = qualities.find(q => q.name === '1080P')
+  if (fallback) return fallback
+  
+  // 最后返回第一个
+  return qualities[0]
+}
+
+// 获取视频画质选项
+const getVideoQualities = (file: FileItem): VideoQuality[] => {
+  const fileUrl = getPreviewUrl(file)
+  if (!fileUrl || !isVideo(file.type)) {
+    return []
+  }
+  
+  return parseVideoQualities(fileUrl)
+}
+
+// 初始化视频播放器
+const initVideoPlayer = async (file: FileItem) => {
+  await nextTick()
+  
+  if (!dplayerRef.value) {
+    console.error('视频容器未找到')
+    return
+  }
+
+  // 销毁之前的播放器
+  if (dplayer.value) {
+    try {
+      dplayer.value.destroy()
+    } catch (e) {
+      console.warn('销毁播放器失败:', e)
     }
+    dplayer.value = null
+  }
+
+  const fileUrl = getPreviewUrl(file)
+  if (!fileUrl) {
+    console.error('视频URL不存在')
+    return
+  }
+
+  const qualities = getVideoQualities(file)
+  videoQualities.value = qualities
+  
+  // 设置默认画质
+  const defaultQuality = getDefaultQuality(qualities)
+  let videoUrl = fileUrl
+  
+  if (defaultQuality) {
+    currentQuality.value = defaultQuality.name
+    videoUrl = defaultQuality.url
+  }
+
+  // 检查是否需要加载HLS.js
+  const isHLS = videoUrl.includes('.m3u8')
+  if (isHLS && !window.Hls && !(window as any).Hls) {
+    await loadHLSScript()
+  }
+
+  try {
+    // 检查DPlayer是否存在
+    if (!window.DPlayer) {
+      await loadDPlayerScript()
+    }
+
+    const options: any = {
+      container: dplayerRef.value,
+      autoplay: false,
+      theme: '#1890ff',
+      loop: false,
+      lang: 'zh-cn',
+      screenshot: true,
+      hotkey: true,
+      preload: 'auto',
+      volume: 0.8,
+      video: {
+        url: videoUrl,
+        type: isHLS ? 'hls' : 'normal'
+      }
+    }
+
+    // 如果有多个画质，添加画质选择
+    if (qualities.length > 1) {
+      options.video.quality = qualities.map(q => ({
+        name: q.name,
+        url: q.url,
+        type: q.type || (q.url.includes('.m3u8') ? 'hls' : 'normal')
+      }))
+      options.video.defaultQuality = 0 // 默认选择第一个（最高画质）
+    }
+
+    // HLS特殊处理
+    if (isHLS && (window as any).Hls && (window as any).Hls.isSupported()) {
+      options.video.customType = {
+        hls: function(video: HTMLVideoElement, _player: any) {
+          const hls = new (window as any).Hls({
+            debug: false,
+            enableWorker: true,
+            lowLatencyMode: false
+          })
+          hls.loadSource(video.src)
+          hls.attachMedia(video)
+        }
+      }
+    }
+
+    dplayer.value = new window.DPlayer(options)
+    
+    // 监听画质切换
+    dplayer.value.on('quality_end', (quality: any) => {
+      currentQuality.value = quality.name
+      console.log('画质切换到:', quality.name)
+    })
+
+    console.log('✅ DPlayer 初始化成功')
+  } catch (error) {
+    console.error('❌ 初始化DPlayer失败:', error)
+  }
+}
+
+// 加载DPlayer脚本
+const loadDPlayerScript = (): Promise<void> => {
+  return new Promise((resolve, reject) => {
+    if (window.DPlayer) {
+      resolve()
+      return
+    }
+
+    const script = document.createElement('script')
+    script.src = 'https://cdn.jsdelivr.net/npm/dplayer@1.27.1/dist/DPlayer.min.js'
+    script.onload = () => {
+      console.log('✅ DPlayer脚本加载成功')
+      resolve()
+    }
+    script.onerror = (error) => {
+      console.error('❌ DPlayer脚本加载失败:', error)
+      reject(new Error('Failed to load DPlayer'))
+    }
+    document.head.appendChild(script)
+  })
+}
+
+// 加载HLS.js脚本
+const loadHLSScript = (): Promise<void> => {
+  return new Promise((resolve, reject) => {
+    if ((window as any).Hls) {
+      resolve()
+      return
+    }
+
+    const script = document.createElement('script')
+    script.src = 'https://cdn.jsdelivr.net/npm/hls.js@1.5.15/dist/hls.min.js'
+    script.onload = () => {
+      console.log('✅ HLS.js脚本加载成功')
+      resolve()
+    }
+    script.onerror = (error) => {
+      console.error('❌ HLS.js脚本加载失败:', error)
+      reject(new Error('Failed to load HLS.js'))
+    }
+    document.head.appendChild(script)
+  })
+}
+// 构建面包屑导航
+const buildBreadcrumbs = (file: FileItem, folderData?: FileItem) => {
+  const crumbs: FileItem[] = []
+  
+  // 如果有文件夹数据，添加到面包屑
+  if (folderData) {
+    crumbs.push(folderData)
+  }
+  
+  // 添加当前文件
+  if (file.type !== 'folder') {
+    crumbs.push(file)
   }
   
   breadcrumbs.value = crumbs
 }
 
+// 画质切换处理
+// const onQualityChange = () => {
+//   if (currentFile.value && dplayer.value) {
+//     const selectedQuality = videoQualities.value.find(q => q.name === currentQuality.value)
+//     if (selectedQuality) {
+//       dplayer.value.switchQuality(selectedQuality.url)
+//       console.log('切换画质到:', selectedQuality.name)
+//     }
+//   }
+// }
+
 // 加载文件数据
-const loadFile = (fileId: number) => {
-  const file = findFileById(mockFileData, fileId)
-  if (file) {
-    currentFile.value = file
-    buildBreadcrumbs(file)
+const loadFile = async () => {
+  try {
+    // 从 router state 获取数据
+    const state = history.state as any
     
-    if (file.type === 'folder' && file.children) {
-      // 对文件夹内容进行排序：置顶文件在前
-      folderItems.value = [...file.children].sort((a, b) => {
-        if (a.isTop && !b.isTop) return -1
-        if (!a.isTop && b.isTop) return 1
-        return 0
-      })
+    if (state?.fileData) {
+      const fileData = JSON.parse(state.fileData) as FileItem
+      const folderData = state.folderData ? JSON.parse(state.folderData) as FileItem : undefined
+      
+      currentFile.value = fileData
+      buildBreadcrumbs(fileData, folderData)
+      
+      console.log('📄 加载文件数据:', fileData)
+      
+      // 如果是视频文件，初始化播放器
+      if (isVideo(fileData.type)) {
+        await nextTick()
+        await initVideoPlayer(fileData)
+      }
+    } else {
+      message.error('文件数据不存在')
+      router.back()
     }
-  } else {
-    message.error('文件不存在')
+  } catch (error) {
+    console.error('解析文件数据失败:', error)
+    message.error('加载文件数据失败')
     router.back()
   }
 }
 
-// 查看文件/文件夹项目
-const viewItem = (_item: FileItem) => {
-  // 选中效果等功能待实现
-
-}
-
-// 打开文件/文件夹
-const openItem = (item: FileItem) => {
-  router.push({
-    name: 'FileViewer',
-    params: { fileId: item.id.toString() }
-  })
-}
-
 // 导航到面包屑位置
 const navigateTo = (crumb: FileItem) => {
   if (crumb.id !== currentFile.value?.id) {
-    router.push({
-      name: 'FileViewer',
-      params: { fileId: crumb.id.toString() }
-    })
+    // 使用 router.back() 回到上一级
+    router.back()
   }
 }
 
@@ -355,44 +561,71 @@ const goBack = () => {
 // 下载文件
 const downloadFile = () => {
   if (currentFile.value) {
-    // 这里实现文件下载逻辑
-    message.success(`开始下载：${currentFile.value.name}`)
-    
-    // 模拟下载
-    const link = document.createElement('a')
-    link.href = getPreviewUrl(currentFile.value)
-    link.download = currentFile.value.name
-    link.click()
+    try {
+      let fileUrl = currentFile.value.originalData?.fileUrl
+      if (!fileUrl) {
+        message.error('文件下载地址不存在')
+        return
+      }
+
+      // 如果是视频文件，选择最高画质进行下载
+      if (isVideo(currentFile.value.type)) {
+        const qualities = getVideoQualities(currentFile.value)
+        if (qualities.length > 0) {
+          // 获取最高画质（第一个，因为已经按从高到低排序）
+          const highestQuality = qualities[0]
+          fileUrl = highestQuality.url
+          console.log('🎬 选择最高画质下载:', highestQuality.name, highestQuality.url)
+        }
+      }
+
+      message.info(`正在准备下载：${currentFile.value.name}`)
+      
+      // 生成下载文件名
+      let downloadFileName = currentFile.value.name
+      const urlExtension = getFileExtension(fileUrl)
+      const nameExtension = getFileExtension(currentFile.value.name)
+      
+      // 如果文件名没有扩展名，但URL有扩展名，则添加扩展名
+      if (!nameExtension && urlExtension) {
+        downloadFileName = currentFile.value.name + urlExtension
+      }
+      
+      // 使用工具函数进行下载
+      downloadFileFromUrl(fileUrl, downloadFileName)
+      
+      message.success(`开始下载：${downloadFileName}`)
+    } catch (error) {
+      console.error('下载文件失败:', error)
+      message.error('文件下载失败，请重试')
+    }
   }
 }
 
 // 组件挂载时加载数据
 onMounted(() => {
-  const fileId = parseInt(route.params.fileId as string)
-  if (fileId) {
-    loadFile(fileId)
-  }
+  loadFile()
 })
 
-// 监听路由参数变化
-const unwatchRoute = router.afterEach(() => {
-  const fileId = parseInt(route.params.fileId as string)
-  if (fileId) {
-    loadFile(fileId)
-  }
-})
-
-// 组件卸载时清理监听器
+// 组件卸载时清理播放器
 onUnmounted(() => {
-  unwatchRoute()
+  if (dplayer.value) {
+    try {
+      dplayer.value.destroy()
+    } catch (e) {
+      console.warn('销毁播放器失败:', e)
+    }
+    dplayer.value = null
+  }
 })
+
 </script>
 
 <style scoped>
 .file-viewer {
   display: flex;
   flex-direction: column;
-  height: 100vh;
+  height: 100%;
   background: #fff;
 }
 
@@ -632,8 +865,9 @@ onUnmounted(() => {
 
 .preview-content {
   background: #f5f6fa;
+  width: 100%;
   border-radius: 8px;
-  padding: 32px 24px;
+  padding: 10px 24px;
   min-height: 500px;
   display: flex;
   align-items: center;
@@ -649,10 +883,77 @@ onUnmounted(() => {
 }
 
 /* 视频预览 */
-.video-preview video {
+.video-preview {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 400px;
+  max-height: 70vh; /* 限制最大高度为视口的70% */
+}
+
+.video-container {
   width: 100%;
   max-width: 800px;
+  max-height: 60vh; /* 限制视频容器最大高度 */
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.dplayer-container {
+  width: 100%;
+  max-height: 60vh; /* 确保播放器不超过60%视口高度 */
   border-radius: 4px;
+  overflow: hidden;
+  background: #000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* DPlayer 内部样式优化 */
+.dplayer-container :deep(.dplayer-video-wrap) {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  max-height: 60vh !important;
+}
+
+.dplayer-container :deep(.dplayer-video) {
+  max-height: 60vh !important;
+  max-width: 100% !important;
+  width: auto !important;
+  height: auto !important;
+  object-fit: contain !important;
+}
+
+.quality-selector {
+  margin-top: 16px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.quality-selector label {
+  font-size: 14px;
+  color: #333;
+}
+
+.quality-selector select {
+  padding: 4px 8px;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  font-size: 14px;
+  background: white;
+  cursor: pointer;
+}
+
+.quality-selector select:focus {
+  outline: none;
+  border-color: #0288d1;
 }
 
 /* PDF预览 */
diff --git a/src/views/teacher/course/FolderBrowser.vue b/src/views/teacher/course/FolderBrowser.vue
index 8341618..65e3bde 100644
--- a/src/views/teacher/course/FolderBrowser.vue
+++ b/src/views/teacher/course/FolderBrowser.vue
@@ -32,14 +32,6 @@
     <!-- 内容区域 -->
     <div class="content">
       <div class="folder-view">
-        <div class="folder-header">
-          <h3>{{ currentFolder?.name || '文件夹' }}</h3>
-          <div class="folder-info" v-if="currentFolder">
-            <span>创建时间：{{ currentFolder.createTime }}</span>
-            <span>创建人：{{ currentFolder.creator }}</span>
-          </div>
-        </div>
-        
         <!-- 文件夹内容列表 -->
         <div class="folder-content">
           <div class="file-grid">
@@ -47,22 +39,37 @@
               v-for="item in folderItems" 
               :key="item.id"
               class="file-item"
+              :data-type="item.type"
               @click="selectItem(item)"
               @dblclick="openItem(item)"
               :class="{ 'selected': selectedItem?.id === item.id }"
             >
               <div class="file-icon">
-                <img :src="getFileIcon(item.type)" :alt="item.type" />
+                <n-icon size="48" :component="getFileIcon(item.type)" />
                 <div v-if="item.isTop" class="top-badge">置顶</div>
               </div>
-              <div class="file-name" :title="item.name">{{ item.name }}</div>
+              <div class="file-name" :title="getDisplayFileName(item)">{{ getDisplayFileName(item) }}</div>
               <div class="file-meta">
                 <span class="file-size">{{ item.size }}</span>
                 <span class="file-time">{{ formatTime(item.createTime) }}</span>
               </div>
               <div class="file-actions">
-                <n-button @click.stop="viewItem(item)">查看</n-button>
-                <n-button @click.stop="downloadItem(item)" v-if="item.type !== 'folder'">下载</n-button>
+                <n-button @click.stop="viewItem(item)" size="small">
+                  <template #icon>
+                    <n-icon>
+                      <EyeOutline />
+                    </n-icon>
+                  </template>
+                  查看
+                </n-button>
+                <n-button @click.stop="downloadItem(item)" v-if="item.type !== 'folder'" size="small">
+                  <template #icon>
+                    <n-icon>
+                      <DownloadOutline />
+                    </n-icon>
+                  </template>
+                  下载
+                </n-button>
               </div>
             </div>
           </div>
@@ -81,14 +88,149 @@
         <p>加载中...</p>
       </div>
     </div>
+
+    <!-- 文件上传弹窗 -->
+    <n-modal 
+      v-model:show="showUploadModal" 
+      preset="dialog" 
+      title="上传文件"
+      style="width: 700px;"
+    >
+      <template #header>
+        <div class="upload-modal-header">
+          <h3>上传文件到「{{ currentFolder?.name }}」</h3>
+        </div>
+      </template>
+      
+      <div class="upload-modal-content">
+        <!-- 文件类型选择 -->
+        <div class="file-type-section">
+          <label class="form-label">文件类型：</label>
+          <n-radio-group v-model:value="uploadFileType" class="file-type-radio">
+            <n-radio-button 
+              v-for="type in getAvailableFileTypes()" 
+              :key="type.value" 
+              :value="type.value"
+            >
+              {{ type.label }}
+            </n-radio-button>
+          </n-radio-group>
+        </div>
+
+        <!-- 文件上传区域 -->
+        <div class="file-upload-section">
+          <label class="form-label">选择文件：</label>
+          <n-upload
+            ref="uploadRef"
+            :max="5"
+            :default-upload="false"
+            :file-list="fileList"
+            @update:file-list="handleFileListChange"
+            :accept="getFileAccept()"
+            multiple
+          >
+            <n-upload-dragger>
+              <div class="upload-dragger-content">
+                <n-icon size="48" :depth="3">
+                  <CloudUploadOutline />
+                </n-icon>
+                <n-text class="upload-text">
+                  点击或者拖动文件到该区域来上传
+                </n-text>
+                <n-p depth="3" class="upload-hint">
+                  {{ getUploadHint() }}
+                </n-p>
+                <n-p depth="3" style="color: #666; font-size: 12px;">
+                  最多可上传 5 个文件
+                </n-p>
+              </div>
+            </n-upload-dragger>
+          </n-upload>
+        </div>
+
+        <!-- 文件名编辑区域 -->
+        <div v-if="fileList.length > 0" class="file-name-section">
+          <label class="form-label">文件名设置：</label>
+          <div class="file-name-list">
+            <div 
+              v-for="(file, index) in fileList" 
+              :key="index"
+              class="file-name-item"
+            >
+              <div class="file-info">
+                <n-icon size="16" style="color: #666;">
+                  <DocumentOutline />
+                </n-icon>
+                <span class="original-name">{{ file.file?.name }}</span>
+              </div>
+              <n-input 
+                v-model:value="fileNameMap[index]" 
+                :placeholder="getFileNamePlaceholder()"
+                clearable
+                size="small"
+                style="flex: 1; margin-left: 12px;"
+              />
+            </div>
+          </div>
+        </div>
+
+        <!-- 提示信息 -->
+        <div v-if="fileList.length === 0" class="upload-tip">
+          <n-alert type="info" show-icon="false">
+            请先选择要上传的文件，然后可以为每个文件设置自定义名称
+          </n-alert>
+        </div>
+
+        <!-- 上传进度 -->
+        <div v-if="uploading" class="upload-progress-section">
+          <n-progress type="line" :percentage="uploadProgress" :show-indicator="true" />
+          <p class="upload-status">{{ uploadStatus }}</p>
+        </div>
+      </div>
+
+      <template #action>
+        <div class="upload-modal-actions">
+          <n-button @click="cancelUpload">取消</n-button>
+          <n-button 
+            type="primary" 
+            :loading="uploading"
+            :disabled="!canUpload"
+            @click="startUpload"
+          >
+            {{ 
+              uploading 
+                ? '上传中...' 
+                : fileList.length > 1 
+                  ? `上传 ${fileList.length} 个文件` 
+                  : '开始上传' 
+            }}
+          </n-button>
+        </div>
+      </template>
+    </n-modal>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, computed, watch, nextTick } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useMessage } from 'naive-ui'
-import { ArrowBackOutline } from '@vicons/ionicons5'
+import { 
+  ArrowBackOutline, 
+  CloudUploadOutline, 
+  DocumentOutline,
+  FolderOutline,
+  VideocamOutline,
+  ImageOutline,
+  DocumentTextOutline,
+  GridOutline,
+  EaselOutline,
+  AttachOutline,
+  DownloadOutline,
+  EyeOutline
+} from '@vicons/ionicons5'
+import TeachCourseApi from '@/api/modules/teachCourse'
+import { downloadFileFromUrl, getFileExtension } from '@/utils/download'
 
 
 const route = useRoute()
@@ -106,6 +248,7 @@ interface FileItem {
   isTop: boolean
   children?: FileItem[]
   parentId?: number
+  originalData?: any // 保存API返回的原始数据
 }
 
 // 当前文件夹
@@ -119,75 +262,84 @@ const selectedItem = ref<FileItem | null>(null)
 // 加载状态
 const loading = ref(false)
 
-// 模拟文件数据
-const mockFileData: FileItem[] = [
-  {
-    id: 1,
-    name: '教学资料文件夹',
-    type: 'folder',
-    size: '1MB',
-    creator: '王建国',
-    createTime: '2025.07.25 09:20',
-    isTop: true,
-    children: [
-      {
-        id: 2,
-        name: '课程大纲.xlsx',
-        type: 'excel',
-        size: '1MB',
-        creator: '王建国',
-        createTime: '2025.07.25 09:20',
-        isTop: false,
-        parentId: 1
-      },
-      {
-        id: 3,
-        name: '教学计划.docx',
-        type: 'word',
-        size: '2MB',
-        creator: '王建国',
-        createTime: '2025.07.25 09:20',
-        isTop: false,
-        parentId: 1
-      },
-      {
-        id: 4,
-        name: '子文件夹',
-        type: 'folder',
-        size: '0B',
-        creator: '王建国',
-        createTime: '2025.07.25 10:30',
-        isTop: false,
-        parentId: 1,
-        children: [
-          {
-            id: 5,
-            name: '深层文件.pdf',
-            type: 'pdf',
-            size: '3MB',
-            creator: '王建国',
-            createTime: '2025.07.25 11:00',
-            isTop: false,
-            parentId: 4
-          }
-        ]
-      }
-    ]
-  }
-]
+// 文件上传相关变量
+const showUploadModal = ref(false)
+const uploadFileType = ref<number>(0) // 0:视频, 1:图片, 2:文档
+const fileList = ref<any[]>([])
+const uploading = ref(false)
+const uploadProgress = ref(0)
+const uploadStatus = ref('')
+const uploadRef = ref()
+
+// 文件名映射，key为文件的索引，value为自定义的文件名
+const fileNameMap = ref<Record<number, string>>({})
 
 // 获取文件图标
 const getFileIcon = (type: string) => {
-  const iconMap: { [key: string]: string } = {
-    folder: '/images/teacher/folder.jpg',
-    excel: '/images/activity/xls.png',
-    word: '/images/activity/wrod.png',
-    pdf: '/images/activity/pdf.png',
-    ppt: '/images/activity/ppt.png',
-    video: '/images/activity/file.png',
-    image: '/images/activity/image.png'
+  const iconMap: { [key: string]: any } = {
+    folder: FolderOutline,
+    excel: GridOutline,
+    word: DocumentTextOutline,
+    pdf: DocumentOutline,
+    ppt: EaselOutline,
+    video: VideocamOutline,
+    image: ImageOutline
+  }
+  return iconMap[type] || AttachOutline
+}
+
+// 获取文件扩展名并格式化显示名称
+const getDisplayFileName = (item: FileItem): string => {
+  if (item.type === 'folder') {
+    return item.name
+  }
+  
+  // 从原始数据的fileUrl中提取文件扩展名
+  const fileUrl = item.originalData?.fileUrl || ''
+  let extension = ''
+  
+  if (fileUrl) {
+    // 尝试从URL中提取扩展名
+    const urlMatch = fileUrl.match(/\.([a-zA-Z0-9]+)(?:\?|$)/)
+    if (urlMatch) {
+      extension = urlMatch[1].toLowerCase()
+    }
+  }
+  
+  // 如果URL中没有扩展名，根据文件类型推断
+  if (!extension) {
+    switch (item.type) {
+      case 'video':
+        extension = 'mp4'
+        break
+      case 'image':
+        extension = 'jpg'
+        break
+      case 'pdf':
+        extension = 'pdf'
+        break
+      case 'word':
+        extension = 'docx'
+        break
+      case 'excel':
+        extension = 'xlsx'
+        break
+      case 'ppt':
+        extension = 'pptx'
+        break
+      default:
+        extension = 'file'
+    }
+  }
+  
+  // 检查文件名是否已经包含扩展名
+  const nameHasExtension = /\.[a-zA-Z0-9]+$/.test(item.name)
+  
+  if (nameHasExtension) {
+    return item.name
+  } else {
+    return `${item.name}.${extension}`
   }
-  return iconMap[type] || '/images/activity/file.png'
 }
 
 // 格式化时间
@@ -195,7 +347,69 @@ const formatTime = (timeStr: string) => {
   return timeStr.replace(/\./g, '-')
 }
 
-// 根据ID查找文件
+// 根据资源类型获取文件类型
+const getFileTypeByResourceType = (resourceType: number, fileName?: string): string => {
+  switch (resourceType) {
+    case 0:
+      return 'video'
+    case 1:
+      return 'image'
+    case 2:
+      // 根据文件扩展名判断具体的文档类型
+      if (fileName) {
+        const ext = fileName.split('.').pop()
+        switch (ext) {
+          case 'pdf':
+            return 'pdf'
+          case 'doc':
+          case 'docx':
+            return 'word'
+          case 'xls':
+          case 'xlsx':
+            return 'excel'
+          case 'ppt':
+          case 'pptx':
+            return 'ppt'
+          default:
+            return 'word'
+        }
+      }
+      return 'word'
+    default:
+      return 'file'
+  }
+}
+
+// 格式化文件大小
+const formatFileSize = (bytes: number): string => {
+  if (bytes === 0) return '0 B'
+  
+  const k = 1024
+  const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
+}
+
+// 格式化创建时间
+const formatCreateTime = (timeStr: string): string => {
+  if (!timeStr) return ''
+  
+  try {
+    const date = new Date(timeStr)
+    const year = date.getFullYear()
+    const month = String(date.getMonth() + 1).padStart(2, '0')
+    const day = String(date.getDate()).padStart(2, '0')
+    const hour = String(date.getHours()).padStart(2, '0')
+    const minute = String(date.getMinutes()).padStart(2, '0')
+    
+    return `${year}.${month}.${day} ${hour}:${minute}`
+  } catch (error) {
+    return timeStr
+  }
+}
+
+// 根据ID查找文件（现在主要用于面包屑导航）
 const findFileById = (files: FileItem[], id: number): FileItem | null => {
   for (const file of files) {
     if (file.id === id) {
@@ -209,49 +423,98 @@ const findFileById = (files: FileItem[], id: number): FileItem | null => {
   return null
 }
 
-// 构建面包屑导航
-const buildBreadcrumbs = (folder: FileItem) => {
-  const crumbs: FileItem[] = []
-  let current = folder
-  
-  while (current) {
-    crumbs.unshift(current)
-    if (current.parentId) {
-      current = findFileById(mockFileData, current.parentId) as FileItem
-    } else {
-      break
-    }
+// 加载文件夹数据
+const loadFolder = async (folderId: number) => {
+  // 防止重复加载同一个文件夹
+  if (loading.value || (currentFolder.value && currentFolder.value.id === folderId)) {
+    console.log('🔄 跳过重复加载，folderId:', folderId)
+    return
   }
   
-  breadcrumbs.value = crumbs
-}
-
-// 加载文件夹数据
-const loadFolder = (folderId: number) => {
+  console.log('📂 开始加载文件夹，folderId:', folderId)
   loading.value = true
   
-  setTimeout(() => {
-    const folder = findFileById(mockFileData, folderId)
-    if (folder && folder.type === 'folder') {
-      currentFolder.value = folder
-      buildBreadcrumbs(folder)
-      
-      if (folder.children) {
-        // 对文件夹内容进行排序：置顶文件在前
-        folderItems.value = [...folder.children].sort((a, b) => {
-          if (a.isTop && !b.isTop) return -1
-          if (!a.isTop && b.isTop) return 1
-          return 0
-        })
-      } else {
-        folderItems.value = []
-      }
-    } else {
-      message.error('文件夹不存在或不是有效的文件夹')
-      router.back()
+  try {
+    // 获取课程ID
+    const courseId = route.params.id as string
+    
+    // 根据文件夹ID设置对应的资源类型和文件夹信息
+    let resourceType: number
+    let folderName: string
+    
+    switch (folderId) {
+      case 0:
+        resourceType = 0
+        folderName = '视频'
+        break
+      case 1:
+        resourceType = 1
+        folderName = '图片'
+        break
+      case 2:
+        resourceType = 2
+        folderName = '文档'
+        break
+      default:
+        message.error('不支持的文件夹类型')
+        router.back()
+        return
     }
+    
+    // 设置当前文件夹信息
+    currentFolder.value = {
+      id: folderId,
+      name: folderName,
+      type: 'folder',
+      size: '',
+      creator: '',
+      createTime: '',
+      isTop: false
+    }
+    
+    // 构建面包屑（只有一级，因为是根据类型直接展示文件）
+    breadcrumbs.value = [currentFolder.value]
+    
+    // 调用API获取课程资料列表
+    const response:any = await TeachCourseApi.queryCourseMaterials({
+      courseId,
+      resourceType
+    })
+
+    if (response.data.code === 200 && response.data?.result) {
+      // 将API返回的数据转换为组件需要的格式
+      folderItems.value = response.data.result.map((item: any, index: number) => {
+        const fileName = item.name || item.fileName || `文件${index + 1}`
+        return {
+          id: item.id, // 确保有唯一ID
+          name: fileName,
+          type: getFileTypeByResourceType(item.type, item.fileUrl),
+          size: formatFileSize(item.fileSize || 0),
+          creator: item.creator || item.author || '未知',
+          createTime: formatCreateTime(item.createTime || item.createdAt),
+          isTop: item.isTop || false,
+          parentId: folderId,
+          // 保存原始数据，可能在查看文件时需要
+          originalData: item
+        } as FileItem
+      }).sort((a: FileItem, b: FileItem) => {
+        // 置顶文件在前
+        if (a.isTop && !b.isTop) return -1
+        if (!a.isTop && b.isTop) return 1
+        return 0
+      })
+    } else {
+      folderItems.value = []
+      console.warn('获取课程资料列表失败:', response)
+    }
+    
+  } catch (error) {
+    console.error('加载文件夹数据失败:', error)
+    message.error('加载文件列表失败，请重试')
+    folderItems.value = []
+  } finally {
     loading.value = false
-  }, 500)
+  }
 }
 
 // 选中项目
@@ -284,24 +547,50 @@ const openItem = (item: FileItem) => {
 
 // 查看项目
 const viewItem = (item: FileItem) => {
-  if (item.type === 'folder') {
-    openItem(item)
-  } else {
-    // 跳转到文件查看页面
-    router.push({
-      name: 'FileViewer',
-      params: { 
-        id: route.params.id,
-        fileId: item.id.toString() 
-      }
-    })
-  }
+  // 使用 router 的 state 携带文件数据
+  router.push({
+    name: 'FileViewer',
+    params: { 
+      id: route.params.id,
+      fileId: item.id.toString() 
+    },
+    state: {
+      fileData: JSON.stringify(item),
+      folderData: JSON.stringify(currentFolder.value)
+    }
+  })
 }
 
 // 下载项目
-const downloadItem = (item: FileItem) => {
-  message.success(`开始下载：${item.name}`)
-  // 这里实现下载逻辑
+const downloadItem = async (item: FileItem) => {
+  try {
+    // 检查是否有文件URL
+    const fileUrl = item.originalData?.fileUrl
+    if (!fileUrl) {
+      message.error('文件下载地址不存在')
+      return
+    }
+
+    message.info(`正在准备下载：${item.name}`)
+    
+    // 生成下载文件名
+    let downloadFileName = item.name
+    const urlExtension = getFileExtension(fileUrl)
+    const nameExtension = getFileExtension(item.name)
+    
+    // 如果文件名没有扩展名，但URL有扩展名，则添加扩展名
+    if (!nameExtension && urlExtension) {
+      downloadFileName = item.name + urlExtension
+    }
+    
+    // 使用工具函数进行下载
+    downloadFileFromUrl(fileUrl, downloadFileName)
+    
+    message.success(`开始下载：${downloadFileName}`)
+  } catch (error) {
+    console.error('下载文件失败:', error)
+    message.error('文件下载失败，请重试')
+  }
 }
 
 // 导航到面包屑位置
@@ -324,32 +613,263 @@ const goBack = () => {
 
 // 添加文件
 const addFile = () => {
-  message.info('添加文件功能')
-  // 这里可以打开文件上传模态框
+  // 根据当前文件夹类型设置默认上传类型
+  if (currentFolder.value) {
+    switch (currentFolder.value.name) {
+      case '视频':
+        uploadFileType.value = 0
+        break
+      case '图片':
+        uploadFileType.value = 1
+        break
+      case '文档':
+        uploadFileType.value = 2
+        break
+      default:
+        uploadFileType.value = 0
+    }
+  }
+  
+  // 重置上传状态
+  fileList.value = []
+  fileNameMap.value = {}
+  uploading.value = false
+  uploadProgress.value = 0
+  uploadStatus.value = ''
+  
+  showUploadModal.value = true
+}
+
+// 文件类型定义
+interface FileTypeOption {
+  value: number
+  label: string
+}
+
+// 获取可用的文件类型选项
+const getAvailableFileTypes = (): FileTypeOption[] => {
+  if (!currentFolder.value) return []
+  
+  const allTypes = [
+    { value: 0, label: '视频' },
+    { value: 1, label: '图片' },
+    { value: 2, label: '文档' }
+  ]
+  
+  // 根据当前文件夹类型过滤
+  switch (currentFolder.value.name) {
+    case '视频':
+      return allTypes.filter(type => type.value === 0)
+    case '图片':
+      return allTypes.filter(type => type.value === 1)
+    case '文档':
+      return allTypes.filter(type => type.value === 2)
+    default:
+      return allTypes
+  }
+}
+
+// 获取文件接受类型
+const getFileAccept = (): string => {
+  switch (uploadFileType.value) {
+    case 0: // 视频
+      return '.mp4,.avi,.mov,.wmv,.flv,.webm'
+    case 1: // 图片
+      return '.jpg,.jpeg,.png,.gif,.bmp,.webp'
+    case 2: // 文档
+      return '.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt'
+    default:
+      return '*'
+  }
+}
+
+// 获取上传提示文本
+const getUploadHint = (): string => {
+  switch (uploadFileType.value) {
+    case 0:
+      return '支持 MP4、AVI、MOV、WMV、FLV、WebM 等视频格式'
+    case 1:
+      return '支持 JPG、PNG、GIF、BMP、WebP 等图片格式'
+    case 2:
+      return '支持 PDF、Word、Excel、PowerPoint、TXT 等文档格式'
+    default:
+      return '请选择要上传的文件'
+  }
+}
+
+// 获取文件名占位符
+const getFileNamePlaceholder = (): string => {
+  return '请输入文件名（不含扩展名）'
+}
+
+// 处理文件列表变化
+const handleFileListChange = async (files: any[]) => {
+  fileList.value = files
+  
+  // 使用 nextTick 确保响应式更新完成后再设置文件名
+  await nextTick()
+  
+  // 创建新的文件名映射对象
+  const newFileNameMap: Record<number, string> = {}
+  
+  // 为新添加的文件初始化文件名映射
+  files.forEach((file, index) => {
+    if (file.file) {
+      const fileName = file.file.name
+      const lastDotIndex = fileName.lastIndexOf('.')
+      // 优先使用已存在的自定义名称，否则使用文件名（去扩展名）
+      newFileNameMap[index] = fileNameMap.value[index] || 
+        (lastDotIndex > 0 ? fileName.substring(0, lastDotIndex) : fileName)
+    }
+  })
+  
+  // 更新文件名映射
+  fileNameMap.value = newFileNameMap
+}
+
+// 计算属性：是否可以上传
+const canUpload = computed(() => {
+  if (fileList.value.length === 0 || uploading.value) return false
+  
+  // 检查是否所有文件都有名称
+  return fileList.value.every((_, index) => {
+    const customName = fileNameMap.value[index]
+    return customName && customName.trim() !== ''
+  })
+})
+
+// 开始上传
+const startUpload = async () => {
+  if (!canUpload.value || !currentFolder.value) return
+  
+  if (fileList.value.length === 0) {
+    message.error('请选择要上传的文件')
+    return
+  }
+  
+  uploading.value = true
+  uploadProgress.value = 0
+  uploadStatus.value = '准备上传...'
+  
+  try {
+    // 获取课程ID
+    const courseId = route.params.id as string
+    
+    const totalFiles = fileList.value.length
+    let completedFiles = 0
+    
+    uploadStatus.value = `上传中... (0/${totalFiles})`
+    
+    // 逐个上传文件
+    for (let i = 0; i < fileList.value.length; i++) {
+      const fileItem = fileList.value[i]
+      const file = fileItem.file
+      const customName = fileNameMap.value[i]
+      
+      if (!file || !customName) {
+        console.warn(`跳过文件 ${i}：文件或名称缺失`)
+        continue
+      }
+      
+      uploadStatus.value = `正在上传 "${customName}"... (${completedFiles + 1}/${totalFiles})`
+      
+      // 根据文件类型调用不同的上传接口
+      switch (uploadFileType.value) {
+        case 0: // 视频
+          await TeachCourseApi.uploadCursorVideo({
+            courseId,
+            file,
+            name: customName
+          })
+          break
+        case 1: // 图片
+          await TeachCourseApi.uploadCursorImage({
+            courseId,
+            file,
+            name: customName
+          })
+          break
+        case 2: // 文档
+          await TeachCourseApi.uploadCursorDocument({
+            courseId,
+            file,
+            name: customName
+          })
+          break
+        default:
+          message.error('不支持的文件类型')
+          return
+      }
+      
+      completedFiles++
+      uploadProgress.value = Math.round((completedFiles / totalFiles) * 100)
+      uploadStatus.value = `已完成 ${completedFiles}/${totalFiles} 个文件`
+    }
+    
+    uploadStatus.value = '所有文件上传完成'
+    
+    message.success(`成功上传 ${completedFiles} 个文件`)
+    
+    // 关闭弹窗
+    showUploadModal.value = false
+    
+    // 刷新当前文件夹内容
+    if (currentFolder.value) {
+      loadFolder(currentFolder.value.id)
+    }
+    
+  } catch (error) {
+    console.error('文件上传失败:', error)
+    message.error('文件上传失败，请重试')
+    uploadStatus.value = '上传失败'
+  } finally {
+    uploading.value = false
+  }
+}
+
+// 取消上传
+const cancelUpload = () => {
+  if (uploading.value) {
+    message.info('正在上传中，无法取消')
+    return
+  }
+  
+  showUploadModal.value = false
+  fileList.value = []
+  fileNameMap.value = {}
+  uploadProgress.value = 0
+  uploadStatus.value = ''
 }
 
 // 组件挂载时加载数据
 onMounted(() => {
   const folderId = parseInt(route.params.folderId as string)
-  if (folderId) {
+  if ([0, 1, 2].includes(folderId)) {
     loadFolder(folderId)
   }
 })
 
 // 监听路由参数变化
-router.afterEach(() => {
-  const folderId = parseInt(route.params.folderId as string)
-  if (folderId && folderId !== currentFolder.value?.id) {
-    loadFolder(folderId)
-  }
-})
+watch(
+  () => route.params.folderId,
+  (newFolderId) => {
+    console.log('🔄 路由参数变化，新的 folderId:', newFolderId)
+    if (newFolderId) {
+      const folderId = parseInt(newFolderId as string)
+      if ([0, 1, 2].includes(folderId)) {
+        loadFolder(folderId)
+      }
+    }
+  },
+  { immediate: false } // 不立即执行，因为 onMounted 已经处理了初始加载
+)
 </script>
 
 <style scoped>
 .folder-browser {
   display: flex;
   flex-direction: column;
-  height: 100vh;
+  height: 100%;
   background: #fff;
 }
 
@@ -442,7 +962,6 @@ router.afterEach(() => {
 }
 
 .folder-view {
-  max-width: 1200px;
   margin: 0 auto;
 }
 
@@ -500,11 +1019,12 @@ router.afterEach(() => {
 .file-icon {
   position: relative;
   margin-bottom: 12px;
+  color: #666;
+  transition: color 0.3s ease;
 }
 
-.file-icon img {
-  width: 48px;
-  height: 48px;
+.file-item:hover .file-icon {
+  color: #0288d1;
 }
 
 .top-badge {
@@ -541,14 +1061,9 @@ router.afterEach(() => {
 .file-actions {
   display: flex;
   gap: 8px;
-  opacity: 0;
   transition: opacity 0.3s;
 }
 
-.file-item:hover .file-actions {
-  opacity: 1;
-}
-
 .action-btn {
   padding: 4px 8px;
   border: 1px solid #0288d1;
@@ -605,6 +1120,138 @@ router.afterEach(() => {
   100% { transform: rotate(360deg); }
 }
 
+/* 文件上传弹窗样式 */
+.upload-modal-header h3 {
+  margin: 0;
+  color: #333;
+  font-size: 18px;
+  font-weight: 500;
+}
+
+.upload-modal-content {
+  padding: 20px 0;
+}
+
+.file-type-section,
+.file-upload-section,
+.file-name-section {
+  margin-bottom: 20px;
+}
+
+.file-name-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.file-name-item {
+  display: flex;
+  align-items: center;
+  padding: 12px;
+  background: #f8f9fa;
+  border: 1px solid #e8e9ea;
+  border-radius: 6px;
+}
+
+.file-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 200px;
+  max-width: 50%;
+  color: #666;
+}
+
+.original-name {
+  font-size: 13px;
+  color: #666;
+  word-break: break-all;
+}
+
+.upload-tip {
+  margin-bottom: 20px;
+}
+
+.form-label {
+  display: block;
+  margin-bottom: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #333;
+}
+
+.file-type-radio {
+  width: 100%;
+}
+
+.upload-dragger-content {
+  padding: 40px 20px;
+  text-align: center;
+}
+
+.upload-text {
+  display: block;
+  margin: 16px 0 8px 0;
+  font-size: 16px;
+  color: #333;
+}
+
+.upload-hint {
+  margin: 0;
+  font-size: 12px;
+  color: #666;
+}
+
+.upload-progress-section {
+  margin: 20px 0;
+  padding: 16px;
+  background: #f5f5f5;
+  border-radius: 6px;
+}
+
+.upload-status {
+  margin: 8px 0 0 0;
+  font-size: 14px;
+  color: #666;
+  text-align: center;
+}
+
+.upload-modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  margin-top: 16px;
+}
+
+/* 文件类型特定颜色 */
+.file-item[data-type="folder"] .file-icon {
+  color: #faad14;
+}
+
+.file-item[data-type="video"] .file-icon {
+  color: #722ed1;
+}
+
+.file-item[data-type="image"] .file-icon {
+  color: #52c41a;
+}
+
+.file-item[data-type="pdf"] .file-icon {
+  color: #ff4d4f;
+}
+
+.file-item[data-type="word"] .file-icon {
+  color: #1890ff;
+}
+
+.file-item[data-type="excel"] .file-icon {
+  color: #13c2c2;
+}
+
+.file-item[data-type="ppt"] .file-icon {
+  color: #fa8c16;
+}
+
 /* 响应式设计 */
 @media (max-width: 768px) {
   .content {
diff --git a/src/views/teacher/course/HomeworkReviewView.vue b/src/views/teacher/course/HomeworkReviewView.vue
index 79443a7..48d3687 100644
--- a/src/views/teacher/course/HomeworkReviewView.vue
+++ b/src/views/teacher/course/HomeworkReviewView.vue
@@ -4,9 +4,19 @@
     <div class="header-section">
       <!-- 左侧：头像、名称、时间 -->
       <div class="user-info">
-        <div class="avatar">
-          <img src="/images/activity/1.png" alt="头像" />
+        <div class="avatar-section">
+          <n-button quaternary circle size="large" @click="goBack">
+            <template #icon>
+              <n-icon>
+                <ArrowBackOutline />
+              </n-icon>
+            </template>
+          </n-button>
+          <div class="avatar">
+            <img src="/images/activity/1.png" alt="头像" />
+          </div>
         </div>
+
         <div class="user-details">
           <div class="user-name">王伦国</div>
           <div class="submit-time">2025-07-21</div>
@@ -65,36 +75,44 @@
         回复
       </n-button>
 
-             <!-- 回复输入区域 -->
-       <div class="reply-input-section" v-if="showReplyInput">
-         <div class="reply-input-container">
-           <textarea v-model="replyContent" placeholder="请输入回复内容" class="reply-input"></textarea>
-           <div class="reply-actions">
-             <n-button type="primary" class="send-btn" @click="sendReply">
-               发送
-             </n-button>
-           </div>
-         </div>
-       </div>
-     </div>
+      <!-- 回复输入区域 -->
+      <div class="reply-input-section" v-if="showReplyInput">
+        <div class="reply-input-container">
+          <textarea v-model="replyContent" placeholder="请输入回复内容" class="reply-input"></textarea>
+          <div class="reply-actions">
+            <n-button type="primary" class="send-btn" @click="sendReply">
+              发送
+            </n-button>
+          </div>
+        </div>
+      </div>
+    </div>
 
-     <!-- 我的回复区域 -->
-     <div class="my-reply-section" v-if="myReply">
-       <h3 class="reply-title">我的回复</h3>
-       <div class="reply-item">
-         <div class="reply-content">
-           <span class="user-tag">本人</span>
-           <span class="user-name">{{ myReply.userName }}:</span>
-           <span class="reply-text">{{ myReply.content }}</span>
-         </div>
-       </div>
-     </div>
-   </div>
- </template>
+    <!-- 我的回复区域 -->
+    <div class="my-reply-section" v-if="myReply">
+      <h3 class="reply-title">我的回复</h3>
+      <div class="reply-item">
+        <div class="reply-content">
+          <span class="user-tag">本人</span>
+          <span class="user-name">{{ myReply.userName }}:</span>
+          <span class="reply-text">{{ myReply.content }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
 
 <script setup lang="ts">
 import { ref } from 'vue'
 import { NButton, NDivider } from 'naive-ui'
+import { ArrowBackOutline } from '@vicons/ionicons5'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+const goBack = () => {
+  router.back()
+}
 
 // 作业信息
 const homeworkInfo = ref({
@@ -172,6 +190,12 @@ const sendReply = () => {
   gap: 15px;
 }
 
+.avatar-section{
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
 .avatar {
   width: 50px;
   height: 50px;