diff --git a/src/api/index.ts b/src/api/index.ts
index a2a5407..e5eae4d 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -5,6 +5,7 @@ export * from './request'
 // 导出所有API模块
 export { default as AuthApi } from './modules/auth'
 export { default as CourseApi } from './modules/course'
+export { default as ChapterApi } from './modules/chapter'
 export { default as CommentApi } from './modules/comment'
 export { default as FavoriteApi } from './modules/favorite'
 export { default as OrderApi } from './modules/order'
diff --git a/src/api/modules/chapter.ts b/src/api/modules/chapter.ts
new file mode 100644
index 0000000..7f2ea51
--- /dev/null
+++ b/src/api/modules/chapter.ts
@@ -0,0 +1,314 @@
+// 课程章节相关API接口
+import { ApiRequest } from '../request'
+import type {
+  ApiResponse,
+  CourseSection,
+  CourseSectionListResponse,
+  BackendCourseSection,
+} from '../types'
+
+// 章节查询参数类型
+export interface ChapterQueryParams {
+  courseId: string
+  keyword?: string
+  page?: number
+  pageSize?: number
+  type?: number | null // 章节类型：0=视频、1=资料、2=考试、3=作业，null=全部
+  parentId?: string // 父章节ID，用于查询子章节
+  level?: number // 章节层级：0=一级章节、1=二级章节
+}
+
+/**
+ * 课程章节API模块
+ */
+export class ChapterApi {
+
+  /**
+   * 获取课程章节列表
+   * @param params 查询参数
+   * @returns 章节列表响应
+   */
+  static async getChapters(params: ChapterQueryParams): Promise<ApiResponse<CourseSectionListResponse>> {
+    try {
+      console.log('🚀 调用课程章节列表API，参数:', params)
+
+      // 构建查询参数 - courseId作为Path参数，其他作为Query参数
+      const queryParams: any = {}
+      
+      if (params.keyword) queryParams.keyword = params.keyword
+      if (params.type !== undefined) queryParams.type = params.type
+      if (params.parentId) queryParams.parentId = params.parentId
+      if (params.level !== undefined) queryParams.level = params.level
+      if (params.page) queryParams.page = params.page
+      if (params.pageSize) queryParams.pageSize = params.pageSize
+
+      console.log('🔍 Path参数 courseId (token):', params.courseId)
+      console.log('🔍 Query参数:', queryParams)
+
+      // 调用后端API - courseId作为Path参数，其他作为Query参数
+      const response = await ApiRequest.get<any>(`/aiol/aiolCourse/${params.courseId}/section`, queryParams)
+      console.log('🔍 章节列表API响应:', response)
+
+      // 处理后端响应格式
+      let rawData = null;
+      if (response.data && response.data.success && response.data.result) {
+        rawData = response.data.result;
+        console.log('✅ 响应数据来源: result字段');
+      } else if (response.data && response.data.list) {
+        rawData = response.data.list;
+        console.log('✅ 响应数据来源: list字段');
+      } else if (Array.isArray(response.data)) {
+        rawData = response.data;
+        console.log('✅ 响应数据来源: 直接数组');
+      }
+
+      if (rawData && Array.isArray(rawData)) {
+        console.log('✅ 原始章节数据:', rawData)
+        console.log('✅ 章节数据数量:', rawData.length)
+
+        // 适配数据格式 - 直接使用原始数据，因为字段名已经匹配
+        const adaptedSections: CourseSection[] = rawData.map((section: any) => ({
+          id: section.id,
+          lessonId: section.lessonId, // 直接使用原始字段
+          outline: section.outline || '', // 直接使用原始字段
+          name: section.name,
+          type: section.type, // 直接使用原始字段
+          parentId: section.parentId || '', // 直接使用原始字段
+          sort: section.sort, // 直接使用原始字段
+          level: section.level,
+          revision: section.revision || 1, // 直接使用原始字段
+          createdAt: section.createdAt, // 直接使用原始字段
+          updatedAt: section.updatedAt, // 直接使用原始字段
+          deletedAt: section.deletedAt,
+          completed: section.completed || false,
+          duration: section.duration
+        }))
+
+        console.log('✅ 适配后的章节数据:', adaptedSections)
+
+        return {
+          code: 200,
+          message: 'success',
+          data: {
+            list: adaptedSections,
+            timestamp: Date.now(),
+            traceId: ''
+          }
+        }
+      } else {
+        console.warn('⚠️ API返回的数据结构不正确:', response.data)
+        return {
+          code: 500,
+          message: '数据格式错误',
+          data: {
+            list: [],
+            timestamp: Date.now(),
+            traceId: ''
+          }
+        }
+      }
+    } catch (error) {
+      console.error('❌ 章节API调用失败:', error)
+      console.error('❌ 错误详情:', {
+        message: (error as Error).message,
+        stack: (error as Error).stack,
+        response: (error as any).response?.data,
+        status: (error as any).response?.status,
+        statusText: (error as any).response?.statusText
+      })
+
+      // 重新抛出错误，不使用模拟数据
+      throw error
+    }
+  }
+
+  /**
+   * 搜索课程章节
+   * @param params 搜索参数
+   * @returns 搜索结果
+   */
+  static async searchChapters(params: ChapterQueryParams): Promise<ApiResponse<CourseSectionListResponse>> {
+    try {
+      console.log('🔍 搜索课程章节，参数:', params)
+
+      // 构建搜索参数 - courseId作为Path参数，keyword等作为Query参数
+      const searchParams: any = {}
+      
+      if (params.keyword) searchParams.keyword = params.keyword
+      if (params.type !== undefined) searchParams.type = params.type
+      if (params.parentId) searchParams.parentId = params.parentId
+      if (params.level !== undefined) searchParams.level = params.level
+      if (params.page) searchParams.page = params.page
+      if (params.pageSize) searchParams.pageSize = params.pageSize
+
+      console.log('🔍 Path参数 courseId (token):', params.courseId)
+      console.log('🔍 Query参数 (包含keyword):', searchParams)
+
+      // 调用后端API - courseId作为Path参数，keyword等作为Query参数
+      const response = await ApiRequest.get<any>(`/aiol/aiolCourse/${params.courseId}/section`, searchParams)
+      console.log('🔍 章节搜索API响应:', response)
+
+      // 处理后端响应格式
+      if (response.data && response.data.success && response.data.result) {
+        console.log('✅ 搜索响应状态码:', response.data.code)
+        console.log('✅ 搜索响应消息:', response.data.message)
+        console.log('✅ 搜索结果数据:', response.data.result)
+        console.log('✅ 搜索结果数量:', response.data.result.length || 0)
+
+        // 适配数据格式 - 使用BackendCourseSection类型
+        const adaptedSections: CourseSection[] = response.data.result.map((section: BackendCourseSection) => ({
+          id: section.id,
+          lessonId: section.courseId, // 使用BackendCourseSection字段
+          outline: '',
+          name: section.name,
+          type: section.type,
+          parentId: section.parentId || '', // 使用BackendCourseSection字段
+          sort: section.sortOrder, // 使用BackendCourseSection字段
+          level: section.level,
+          revision: 1,
+          createdAt: section.createTime ? new Date(section.createTime).getTime() : null, // 使用BackendCourseSection字段
+          updatedAt: section.updateTime ? new Date(section.updateTime).getTime() : null, // 使用BackendCourseSection字段
+          deletedAt: null,
+          completed: false,
+          duration: undefined
+        }))
+
+        console.log('✅ 适配后的搜索结果:', adaptedSections)
+
+        return {
+          code: response.data.code,
+          message: response.data.message,
+          data: {
+            list: adaptedSections,
+            timestamp: Date.now(),
+            traceId: response.data.timestamp?.toString() || ''
+          }
+        }
+      } else {
+        console.warn('⚠️ 搜索API返回的数据结构不正确:', response.data)
+        return {
+          code: 500,
+          message: '搜索数据格式错误',
+          data: {
+            list: [],
+            timestamp: Date.now(),
+            traceId: ''
+          }
+        }
+      }
+    } catch (error) {
+      console.error('❌ 章节搜索API调用失败:', error)
+      throw error
+    }
+  }
+
+  /**
+   * 新建课程章节
+   * @param sectionData 章节数据
+   * @returns 创建结果
+   */
+  static async createChapter(sectionData: any): Promise<ApiResponse<any>> {
+    try {
+      console.log('🚀 调用新建章节API，数据:', sectionData)
+
+      // 包装数据为aiolCourseSectionDTO格式
+      const requestData = {
+        aiolCourseSectionDTO: sectionData
+      }
+
+      // 调用后端API - 新建章节
+      const response = await ApiRequest.post<any>('/aiol/aiolCourseSection/add', requestData)
+      console.log('🔍 新建章节API响应:', response)
+
+      return response
+    } catch (error) {
+      console.error('❌ 新建章节失败:', error)
+      throw error
+    }
+  }
+
+  /**
+   * 编辑课程章节
+   * @param sectionData 章节数据
+   * @returns 编辑结果
+   */
+  static async editChapter(sectionData: any): Promise<ApiResponse<any>> {
+    try {
+      console.log('🚀 调用编辑章节API，数据:', sectionData)
+
+      // 尝试不同的数据格式
+      const requestData = {
+        ...sectionData,
+        // 确保所有必要字段都存在
+        id: sectionData.id,
+        name: sectionData.name,
+        courseId: sectionData.courseId,
+        type: sectionData.type || 0,
+        sortOrder: sectionData.sortOrder || 10,
+        parentId: sectionData.parentId || '0',
+        level: sectionData.level || 1
+      }
+
+      console.log('🔍 发送给服务器的完整请求数据:', JSON.stringify(requestData, null, 2))
+      console.log('🔍 章节ID:', sectionData.id)
+      console.log('🔍 章节名称:', sectionData.name)
+      console.log('🔍 课程ID:', sectionData.courseId)
+
+      // 调用后端API - 编辑章节
+      // 使用原来的edit路径
+      const response = await ApiRequest.post<any>('/aiol/aiolCourseSection/edit', requestData)
+      console.log('🔍 编辑章节API响应:', response)
+
+      return response
+    } catch (error) {
+      console.error('❌ 编辑章节失败:', error)
+      throw error
+    }
+  }
+
+  /**
+   * 删除课程章节
+   * @param sectionId 章节ID
+   * @returns 删除结果
+   */
+  static async deleteChapter(sectionId: string): Promise<ApiResponse<any>> {
+    try {
+      console.log('🚀 调用删除章节API，章节ID:', sectionId)
+
+      // 调用后端API - 删除章节
+      const response = await ApiRequest.delete<any>('/aiol/aiolCourseSection/delete', {
+        id: sectionId
+      })
+      console.log('🔍 删除章节API响应:', response)
+
+      return response
+    } catch (error) {
+      console.error('❌ 删除章节失败:', error)
+      throw error
+    }
+  }
+
+  /**
+   * 批量删除课程章节
+   * @param sectionIds 章节ID数组
+   * @returns 删除结果
+   */
+  static async deleteChaptersBatch(sectionIds: string[]): Promise<ApiResponse<any>> {
+    try {
+      console.log('🚀 调用批量删除章节API，章节IDs:', sectionIds)
+
+      // 调用后端API - 批量删除章节
+      const response = await ApiRequest.delete<any>('/aiol/aiolCourseSection/deleteBatch', {
+        ids: sectionIds.join(',')
+      })
+      console.log('🔍 批量删除章节API响应:', response)
+
+      return response
+    } catch (error) {
+      console.error('❌ 批量删除章节失败:', error)
+      throw error
+    }
+  }
+}
+
+export default ChapterApi
diff --git a/src/api/types.ts b/src/api/types.ts
index cd0d1f4..ca85f3f 100644
--- a/src/api/types.ts
+++ b/src/api/types.ts
@@ -462,6 +462,17 @@ export interface BackendCourseSectionListResponse {
   timestamp: number
 }
 
+// 章节查询参数类型
+export interface ChapterQueryParams {
+  courseId: string
+  keyword?: string
+  page?: number
+  pageSize?: number
+  type?: number | null // 章节类型：0=视频、1=资料、2=考试、3=作业，null=全部
+  parentId?: string // 父章节ID，用于查询子章节
+  level?: number // 章节层级：0=一级章节、1=二级章节
+}
+
 // 后端讲师数据结构
 export interface BackendInstructor {
   id: string
diff --git a/src/components/admin/CourseComponents/CourseCategory.vue b/src/components/admin/CourseComponents/CourseCategory.vue
index ce102d2..43f63fb 100644
--- a/src/components/admin/CourseComponents/CourseCategory.vue
+++ b/src/components/admin/CourseComponents/CourseCategory.vue
@@ -415,7 +415,10 @@ const handleOfflineCourse = (course: CourseDisplayItem) => {
           id: course.id!,
           name: course.name,
           description: course.description,
-          status: 2 // 2=已结束状态
+          status: 2, // 2=已结束状态
+          pause_exit: '0', // 默认值
+          allow_speed: '0', // 默认值
+          show_subtitle: '0' // 默认值
         };
         
         await TeachCourseApi.editCourse(updatedData);
diff --git a/src/components/admin/CourseComponents/CourseCreate.vue b/src/components/admin/CourseComponents/CourseCreate.vue
index 275edb7..6d94c84 100644
--- a/src/components/admin/CourseComponents/CourseCreate.vue
+++ b/src/components/admin/CourseComponents/CourseCreate.vue
@@ -188,7 +188,6 @@ import {
 import '@wangeditor/editor/dist/css/style.css'
 // @ts-ignore
 import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
-import TeachCourseApi from '@/api/modules/teachCourse'
 
 const router = useRouter()
 const route = useRoute()
diff --git a/src/views/teacher/course/ChapterEditor.vue b/src/views/teacher/course/ChapterEditor.vue
index 638ee4f..478a72b 100644
--- a/src/views/teacher/course/ChapterEditor.vue
+++ b/src/views/teacher/course/ChapterEditor.vue
@@ -1,233 +1,311 @@
 <template>
-  <n-config-provider :theme-overrides="themeOverrides">
-    <div class="block_3 flex-row justify-between" :class="{
-      'mobile-layout': isMobile,
-      'tablet-layout': isTablet,
-      'sidebar-collapsed': sidebarCollapsed
-    }">
+  <div class="block_3 flex-row justify-between" :class="{
+    'mobile-layout': isMobile,
+    'tablet-layout': isTablet,
+    'sidebar-collapsed': sidebarCollapsed
+  }">
 
-      <!-- 移动端菜单按钮 -->
-      <n-button v-if="isMobile" class="mobile-menu-toggle" quaternary @click="toggleSidebar">
-        <span class="menu-icon">☰</span>
+    <!-- 移动端菜单按钮 -->
+    <n-button v-if="isMobile" class="mobile-menu-toggle" quaternary @click="toggleSidebar">
+      <span class="menu-icon">☰</span>
+    </n-button>
+
+    <div class="chapter-editor flex-col" :class="{
+      'mobile-sidebar': isMobile,
+      'collapsed': sidebarCollapsed && isMobile
+    }">
+      <!-- 移动端关闭按钮 -->
+      <n-button v-if="isMobile" class="mobile-close" quaternary @click="toggleSidebar">
+        <span class="close-icon">×</span>
       </n-button>
 
-      <div class="chapter-editor flex-col" :class="{
-        'mobile-sidebar': isMobile,
-        'collapsed': sidebarCollapsed && isMobile
-      }">
-        <!-- 移动端关闭按钮 -->
-        <n-button v-if="isMobile" class="mobile-close" quaternary @click="toggleSidebar">
-          <span class="close-icon">×</span>
-        </n-button>
-
-        <n-button quaternary circle size="large" @click="goBack" class="back-button">
-            <template #icon>
-                <n-icon>
-                    <ArrowBackOutline />
-                </n-icon>
-            </template>
-        </n-button>
-
-        <n-button class="header-section flex-row justify-between" type="primary" @click="addChapter">
-          <template #icon>
-            <img class="chapter-icon" referrerpolicy="no-referrer" src="/images/teacher/加号_4.png" />
-          </template>
-          <span class="section-title">添加章节</span>
-        </n-button>
-
-        <template v-for="(chapter, chapterIndex) in chapters" :key="chapter.id">
-          <div class="chapter-item flex-row" @click="toggleChapterExpansion(chapterIndex)" :class="{ 'collapsed': !chapter.expanded }">
-            <img class="chapter-arrow-icon" :class="{ 'rotated': !chapter.expanded }" referrerpolicy="no-referrer"
-              :src="chapter.expanded ? '/images/teacher/路径18.png' : '/images/teacher/collapse.png'" />
-            <span class="chapter-title">第{{ chapterIndex + 1 }}章&nbsp;{{ chapter.name }}</span>
-            <n-dropdown v-show="chapter.expanded" :options="chapterMenuOptions" @select="(key: string) => handleChapterMenuSelect(key, chapterIndex)">
-              <img class="chapter-options-icon" :class="{ 'transparent': !chapter.expanded }"
-                referrerpolicy="no-referrer" src="/images/teacher/分组76.png" />
-            </n-dropdown>
-          </div>
-          <div v-show="chapter.expanded" v-for="section in chapter.sections" :key="section.id" class="chapter-content-item flex-row">
-            <div class="content-text-group flex-col justify-between justify-between">
-              <span class="content-title">{{ section.contentTitle }}</span>
-              <span class="content-description">{{ section.contentDescription }}</span>
-            </div>
-            <div class="action-menu flex-col" :class="{ 'visible': isMenuVisible }">
-              <span class="action-rename">重命名</span>
-              <span class="action-delete" @click="openDeleteModal">删除</span>
-            </div>
-          </div>
+      <n-button quaternary circle size="large" @click="goBack" class="back-button">
+        <template #icon>
+          <n-icon>
+            <ArrowBackOutline />
+          </n-icon>
         </template>
+      </n-button>
 
+      <n-button class="header-section flex-row justify-between" type="primary" @click="addChapter" :loading="loading">
+        <template #icon>
+          <img class="chapter-icon" referrerpolicy="no-referrer" src="/images/teacher/加号_4.png" />
+        </template>
+        <span class="section-title">添加章节</span>
+      </n-button>
+
+      <template v-for="(chapter, chapterIndex) in chapters" :key="chapter.id">
+        <div class="chapter-item flex-row" @click="toggleChapterExpansion(chapterIndex)"
+          :class="{ 'collapsed': !chapter.expanded }">
+          <img class="chapter-arrow-icon" :class="{ 'rotated': !chapter.expanded }" referrerpolicy="no-referrer"
+            :src="chapter.expanded ? '/images/teacher/路径18.png' : '/images/teacher/collapse.png'" />
+          <span class="chapter-title">第{{ chapterIndex + 1 }}章&nbsp;{{ chapter.name }}</span>
+          <n-dropdown v-show="chapter.expanded" :options="chapterMenuOptions"
+            @select="(key: string) => handleChapterMenuSelect(key, chapterIndex)">
+            <img class="chapter-options-icon" :class="{ 'transparent': !chapter.expanded }" referrerpolicy="no-referrer"
+              src="/images/teacher/分组76.png" />
+          </n-dropdown>
+        </div>
+        <div v-show="chapter.expanded" v-for="section in chapter.sections" :key="section.id"
+          class="chapter-content-item flex-row">
+          <div class="content-text-group flex-col justify-between justify-between">
+            <span class="content-title">{{ section.contentTitle }}</span>
+            <span class="content-description">{{ section.contentDescription }}</span>
+          </div>
+          <div class="action-menu flex-col" :class="{ 'visible': isMenuVisible }">
+            <span class="action-rename">重命名</span>
+            <span class="action-delete" @click="openDeleteModal">删除</span>
+          </div>
+        </div>
+      </template>
+
+    </div>
+
+
+
+    <div class="chapter-detail-container flex-col" :class="{
+      'mobile-content': isMobile,
+      'tablet-content': isTablet,
+      'sidebar-collapsed-content': sidebarCollapsed && isMobile
+    }">
+      <div class="chapter-container" v-if="chapters.length">
+        <div class="chapter-header flex-row justify-between2">
+          <span class="chapter-title-text">第{{ currentChapterIndex + 1 }}章</span>
+          <n-button class="collapse-button flex-row justify-between" quaternary @click="toggleChapterExpansion()">
+            <span class="collapse-text">{{ chapters[currentChapterIndex].expanded ? '收起' : '展开' }}</span>
+            <img class="collapse-icon" :class="{ 'rotated': !chapters[currentChapterIndex].expanded }"
+              referrerpolicy="no-referrer" src="/images/teacher/箭头-灰.png" />
+          </n-button>
+        </div>
+        <div class="chapter-name-section flex-row justify-between">
+          <div class="chapter-name-label">
+            <span class="required-mark">*</span>
+            <span class="label-text">本章名称：</span>
+          </div>
+          <div class="chapter-name-input-container flex-row">
+            <n-input ref="chapterInputRef" v-model:value="currentChapterName" class="chapter-name-input"
+              placeholder="请输入本章名称" @blur="handleChapterNameBlur" @focus="handleChapterNameFocus" />
+          </div>
+        </div>
+
+        <div v-show="chapters[currentChapterIndex].expanded"
+          v-for="(section, index) in chapters[currentChapterIndex].sections" :key="section.id"
+          class="chapter-content-container">
+          <n-divider class="chapter-divider" />
+
+          <div class="lesson-section flex-row justify-end">
+            <div class="lesson-label-wrapper">
+              <span class="lesson-required-mark">*</span>
+              <span class="lesson-label-text">第{{ ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十'][index] || (index
+                + 1) }}节：</span>
+            </div>
+            <div class="lesson-input-container">
+              <n-input v-model:value="section.lessonName" class="lesson-input" placeholder="请输入章节"
+                @blur="() => handleLessonBlur(section)" @focus="handleLessonFocus">
+                <template #suffix>
+                  <n-button quaternary size="small" @click="() => removeLessonSection(section.id)">
+                    <template #icon>
+                      <img src="/images/teacher/关闭-灰.png" alt="关闭" style="width: 10px; height: 10px; padding: 0;" />
+                    </template>
+                  </n-button>
+                </template>
+              </n-input>
+            </div>
+          </div>
+
+          <div class="courseware-section flex-row justify-end">
+            <span class="courseware-label">添加课件：</span>
+            <div class="courseware-input-container">
+              <n-select v-model:value="section.coursewareName" class="courseware-input" placeholder="课件准备PPT"
+                :options="coursewareOptions" filterable tag />
+            </div>
+          </div>
+
+          <!-- 如果选择了课件类型，显示上传选项 -->
+          <div v-if="section.coursewareName" class="courseware-upload-section flex-row justify-end">
+            <span class="courseware-upload-label">选择文件：</span>
+            <div class="courseware-upload-container">
+              <CustomDropdown v-model="section.coursewareUploadOption" :options="coursewareUploadOptions"
+                placeholder="请选择文件来源" @change="(value: any) => handleCoursewareUploadOptionChange(section, value)" />
+              <!-- 隐藏的课件文件输入框 -->
+              <input type="file" :id="`courseware-file-upload-${section.id}`" class="file-input"
+                accept=".pdf,.doc,.docx,.ppt,.pptx,.mp4,.avi,.mov,.wmv"
+                @change="handleCoursewareFileUpload($event, section)" multiple />
+            </div>
+          </div>
+
+          <!-- 显示已上传的课件文件列表 -->
+          <div v-if="section.coursewareFiles && section.coursewareFiles.length > 0"
+            class="uploaded-courseware-files-section flex-row justify-end">
+            <span class="uploaded-courseware-files-label">已选择课件：</span>
+            <div class="uploaded-files-container">
+              <div v-for="(file, fileIndex) in section.coursewareFiles" :key="fileIndex" class="file-item">
+                <span class="file-name">{{ file.name }}</span>
+                <button class="remove-file-btn" @click="removeCoursewareFile(section, fileIndex)">
+                  <img src="/images/teacher/关闭-灰.png" alt="删除" style="width: 12px; height: 12px;" />
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <div class="exam-section flex-row justify-end">
+            <span class="exam-label">添加考试/练习：</span>
+            <div class="exam-dropdown-container">
+              <CustomDropdown v-model="section.selectedExamOption" :options="examOptions" placeholder="请添加考试/练习"
+                @change="(value: any) => handleExamOptionChange(section, value)" />
+              <!-- 隐藏的文件输入框 -->
+              <input type="file" :id="`file-upload-${section.id}`" class="file-input"
+                accept=".pdf,.doc,.docx,.ppt,.pptx,.xls,.xlsx,.txt,.zip,.rar"
+                @change="handleFileUpload($event, section)" multiple ref="fileInputRef" />
+            </div>
+          </div>
+
+          <!-- 显示已上传的文件列表 -->
+          <div v-if="section.uploadedFiles && section.uploadedFiles.length > 0"
+            class="uploaded-files-section flex-row justify-end">
+            <span class="uploaded-files-label">已上传文件：</span>
+            <div class="uploaded-files-container">
+              <div v-for="(file, fileIndex) in section.uploadedFiles" :key="fileIndex" class="file-item">
+                <span class="file-name">{{ file.name }}</span>
+                <button class="remove-file-btn" @click="removeFile(section, fileIndex)">
+                  <img src="/images/teacher/关闭-灰.png" alt="删除" style="width: 12px; height: 12px;" />
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <div class="homework-section flex-row justify-end">
+            <span class="homework-label">添加作业：</span>
+            <div class="homework-input-container">
+              <HomeworkDropdown v-model="section.homeworkName" :options="homeworkOptions" placeholder="请添加作业"
+                @change="(value: any) => handleHomeworkOptionChange(section, value)" />
+              <!-- 隐藏的文件输入框用于作业上传 -->
+              <input type="file" :id="`homework-file-upload-${section.id}`" style="display: none;" multiple
+                accept=".pdf,.doc,.docx,.txt" @change="(event: any) => handleHomeworkFileUpload(event, section)" />
+            </div>
+          </div>
+        </div>
       </div>
 
+      <n-button v-show="chapters[currentChapterIndex].expanded" class="add-section-btn flex-row justify-between"
+        quaternary @click="addSection">
+        <template #icon>
+          <img class="add-section-icon" referrerpolicy="no-referrer" src="/images/teacher/加号(2).png" />
+        </template>
+        <span class="add-section-text">添加小节</span>
+      </n-button>
 
+      <!-- 保存按钮 -->
+      <n-button v-show="chapters.length > 0" class="save-chapter-btn flex-row justify-between" type="primary"
+        @click="saveChapter" :loading="saving">
+        <span class="save-text">保存章节</span>
+      </n-button>
+    </div>
 
-      <div class="chapter-detail-container flex-col" :class="{
-        'mobile-content': isMobile,
-        'tablet-content': isTablet,
-        'sidebar-collapsed-content': sidebarCollapsed && isMobile
-      }">
-        <div class="chapter-container" v-if="chapters.length">
-          <div class="chapter-header flex-row justify-between2">
-            <span class="chapter-title-text">第{{ currentChapterIndex + 1 }}章</span>
-            <n-button class="collapse-button flex-row justify-between" quaternary @click="toggleChapterExpansion()">
-              <span class="collapse-text">{{ chapters[currentChapterIndex].expanded ? '收起' : '展开' }}</span>
-              <img class="collapse-icon" :class="{ 'rotated': !chapters[currentChapterIndex].expanded }" referrerpolicy="no-referrer"
-                src="/images/teacher/箭头-灰.png" />
-            </n-button>
-          </div>
-          <div class="chapter-name-section flex-row justify-between">
-            <div class="chapter-name-label">
-              <span class="required-mark">*</span>
-              <span class="label-text">本章名称：</span>
+    <n-modal v-model:show="showDeleteModal" preset="dialog" title="确认删除章节" @positive-click="handleDeleteConfirm"
+      @negative-click="handleDeleteCancel">
+      <template #header>
+        <div class="n-dialog__title">
+          <i class="n-base-icon n-dialog__icon">
+            <svg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg">
+              <g stroke="none" stroke-width="1" fill-rule="evenodd">
+                <g fill-rule="nonzero">
+                  <path
+                    d="M12,2 C17.523,2 22,6.478 22,12 C22,17.522 17.523,22 12,22 C6.477,22 2,17.522 2,12 C2,6.478 6.477,2 12,2 Z M12.0018002,15.0037242 C11.450254,15.0037242 11.0031376,15.4508407 11.0031376,16.0023869 C11.0031376,16.553933 11.450254,17.0010495 12.0018002,17.0010495 C12.5533463,17.0010495 13.0004628,16.553933 13.0004628,16.0023869 C13.0004628,15.4508407 12.5533463,15.0037242 12.0018002,15.0037242 Z M11.99964,7 C11.4868042,7.00018474 11.0642719,7.38637706 11.0066858,7.8837365 L11,8.00036004 L11.0018003,13.0012393 L11.00857,13.117858 C11.0665141,13.6151758 11.4893244,14.0010638 12.0021602,14.0008793 C12.514996,14.0006946 12.9375283,13.6145023 12.9951144,13.1171428 L13.0018002,13.0005193 L13,7.99964009 L12.9932303,7.8830214 C12.9352861,7.38570354 12.5124758,6.99981552 11.99964,7 Z">
+                  </path>
+                </g>
+              </g>
+            </svg>
+          </i>
+          确认删除章节
+        </div>
+      </template>
+
+      <div style="padding: 20px 0;">
+        <div style="margin-bottom: 16px;">
+          <p style="margin: 0 0 8px 0; color: #666; font-size: 14px;">您确定要删除以下章节吗？</p>
+          <div style="background: #f5f5f5; padding: 12px; border-radius: 6px; border-left: 4px solid #ff4d4f;">
+            <div style="font-weight: 600; color: #333; margin-bottom: 4px;">
+              {{ chapterToDelete?.chapter.name || '未知章节' }}
             </div>
-            <div class="chapter-name-input-container flex-row">
-              <n-input ref="chapterInputRef" v-model:value="chapters[currentChapterIndex].name" class="chapter-name-input"
-                placeholder="请输入本章名称" @blur="handleChapterNameBlur" @focus="handleChapterNameFocus" />
-            </div>
-          </div>
-
-          <div v-show="chapters[currentChapterIndex].expanded" v-for="(section, index) in chapters[currentChapterIndex].sections" :key="section.id"
-            class="chapter-content-container">
-            <n-divider class="chapter-divider" />
-
-            <div class="lesson-section flex-row justify-end">
-              <div class="lesson-label-wrapper">
-                <span class="lesson-required-mark">*</span>
-                <span class="lesson-label-text">第{{ ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十'][index] || (index
-                  + 1) }}节：</span>
-              </div>
-              <div class="lesson-input-container">
-                <n-input v-model:value="section.lessonName" class="lesson-input" placeholder="请输入章节"
-                  @blur="handleLessonBlur" @focus="handleLessonFocus">
-                  <template #suffix>
-                    <n-button quaternary size="small" @click="() => removeLessonSection(section.id)">
-                      <template #icon>
-                        <img src="/images/teacher/关闭-灰.png" alt="关闭" style="width: 10px; height: 10px; padding: 0;" />
-                      </template>
-                    </n-button>
-                  </template>
-                </n-input>
-              </div>
-            </div>
-
-            <div class="courseware-section flex-row justify-end">
-              <span class="courseware-label">添加课件：</span>
-              <div class="courseware-input-container">
-                <n-select v-model:value="section.coursewareName" class="courseware-input" placeholder="课件准备PPT"
-                  :options="coursewareOptions" filterable tag />
-              </div>
-            </div>
-
-            <!-- 如果选择了课件类型，显示上传选项 -->
-            <div v-if="section.coursewareName" class="courseware-upload-section flex-row justify-end">
-              <span class="courseware-upload-label">选择文件：</span>
-              <div class="courseware-upload-container">
-                <CustomDropdown v-model="section.coursewareUploadOption" :options="coursewareUploadOptions" placeholder="请选择文件来源"
-                  @change="(value: any) => handleCoursewareUploadOptionChange(section, value)" />
-                <!-- 隐藏的课件文件输入框 -->
-                <input type="file" :id="`courseware-file-upload-${section.id}`" class="file-input"
-                  accept=".pdf,.doc,.docx,.ppt,.pptx,.mp4,.avi,.mov,.wmv"
-                  @change="handleCoursewareFileUpload($event, section)" multiple />
-              </div>
-            </div>
-
-            <!-- 显示已上传的课件文件列表 -->
-            <div v-if="section.coursewareFiles && section.coursewareFiles.length > 0"
-              class="uploaded-courseware-files-section flex-row justify-end">
-              <span class="uploaded-courseware-files-label">已选择课件：</span>
-              <div class="uploaded-files-container">
-                <div v-for="(file, fileIndex) in section.coursewareFiles" :key="fileIndex" class="file-item">
-                  <span class="file-name">{{ file.name }}</span>
-                  <button class="remove-file-btn" @click="removeCoursewareFile(section, fileIndex)">
-                    <img src="/images/teacher/关闭-灰.png" alt="删除" style="width: 12px; height: 12px;" />
-                  </button>
-                </div>
-              </div>
-            </div>
-
-            <div class="exam-section flex-row justify-end">
-              <span class="exam-label">添加考试/练习：</span>
-              <div class="exam-dropdown-container">
-                <CustomDropdown v-model="section.selectedExamOption" :options="examOptions" placeholder="请添加考试/练习"
-                  @change="(value: any) => handleExamOptionChange(section, value)" />
-                <!-- 隐藏的文件输入框 -->
-                <input type="file" :id="`file-upload-${section.id}`" class="file-input"
-                  accept=".pdf,.doc,.docx,.ppt,.pptx,.xls,.xlsx,.txt,.zip,.rar"
-                  @change="handleFileUpload($event, section)" multiple ref="fileInputRef" />
-              </div>
-            </div>
-
-            <!-- 显示已上传的文件列表 -->
-            <div v-if="section.uploadedFiles && section.uploadedFiles.length > 0"
-              class="uploaded-files-section flex-row justify-end">
-              <span class="uploaded-files-label">已上传文件：</span>
-              <div class="uploaded-files-container">
-                <div v-for="(file, fileIndex) in section.uploadedFiles" :key="fileIndex" class="file-item">
-                  <span class="file-name">{{ file.name }}</span>
-                  <button class="remove-file-btn" @click="removeFile(section, fileIndex)">
-                    <img src="/images/teacher/关闭-灰.png" alt="删除" style="width: 12px; height: 12px;" />
-                  </button>
-                </div>
-              </div>
-            </div>
-
-            <div class="homework-section flex-row justify-end">
-              <span class="homework-label">添加作业：</span>
-              <div class="homework-input-container">
-                <HomeworkDropdown v-model="section.homeworkName" :options="homeworkOptions" placeholder="请添加作业"
-                  @change="(value: any) => handleHomeworkOptionChange(section, value)" />
-                <!-- 隐藏的文件输入框用于作业上传 -->
-                <input type="file" :id="`homework-file-upload-${section.id}`" style="display: none;" multiple
-                  accept=".pdf,.doc,.docx,.txt" @change="(event: any) => handleHomeworkFileUpload(event, section)" />
-              </div>
+            <div style="font-size: 12px; color: #999;">
+              包含 {{ chapterToDelete?.chapter.sections?.length || 0 }} 个小节
             </div>
           </div>
         </div>
 
-        <n-button v-show="chapters[currentChapterIndex].expanded" class="add-section-btn flex-row justify-between" quaternary
-          @click="addSection">
-          <template #icon>
-            <img class="add-section-icon" referrerpolicy="no-referrer" src="/images/teacher/加号(2).png" />
-          </template>
-          <span class="add-section-text">添加小节</span>
-        </n-button>
+        <div style="background: #fff7e6; padding: 12px; border-radius: 6px; border: 1px solid #ffd591;">
+          <div style="display: flex; align-items: flex-start; gap: 8px;">
+            <n-icon color="#fa8c16" size="16" style="margin-top: 2px;">
+              <svg viewBox="0 0 24 24" width="1em" height="1em">
+                <path fill="currentColor"
+                  d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
+              </svg>
+            </n-icon>
+            <div style="font-size: 13px; color: #d46b08; line-height: 1.4;">
+              <div style="font-weight: 600; margin-bottom: 4px;">注意：</div>
+              <div>删除后无法恢复，该章节下的所有小节和相关内容也将被删除。</div>
+            </div>
+          </div>
+        </div>
       </div>
 
-      <n-modal v-model:show="showDeleteModal" preset="dialog" title="确认删除" content="确定要删除这个章节吗？" positive-text="确认"
-        negative-text="取消" @positive-click="handleDeleteConfirm" @negative-click="handleDeleteCancel" />
+      <template #action>
+        <n-space>
+          <n-button @click="handleDeleteCancel" :disabled="deleting">取消</n-button>
+          <n-button type="error" @click="handleDeleteConfirm" :loading="deleting" :disabled="deleting">确认删除</n-button>
+        </n-space>
+      </template>
+    </n-modal>
 
-      <!-- 试卷库模态框 -->
-      <ExamPaperLibraryModal v-model:show="showExamLibraryModal" @confirm="handleExamLibraryConfirm" />
+    <!-- 试卷库模态框 -->
+    <ExamPaperLibraryModal v-model:show="showExamLibraryModal" @confirm="handleExamLibraryConfirm" />
 
-      <!-- 作业库模态框 -->
-      <HomeworkLibraryModal v-model:show="showHomeworkLibraryModal" @confirm="handleHomeworkLibraryConfirm" />
+    <!-- 作业库模态框 -->
+    <HomeworkLibraryModal v-model:show="showHomeworkLibraryModal" @confirm="handleHomeworkLibraryConfirm" />
 
-      <!-- 资源库模态框 -->
-      <ResourceLibraryModal v-model:show="showResourceLibraryModal" @confirm="handleResourceLibraryConfirm" />
-    </div>
-
-  </n-config-provider>
+    <!-- 资源库模态框 -->
+    <ResourceLibraryModal v-model:show="showResourceLibraryModal" @confirm="handleResourceLibraryConfirm" />
+  </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue';
-import type { GlobalThemeOverrides } from 'naive-ui';
+import { ref, computed, onMounted, onUnmounted } from 'vue';
 import CustomDropdown from '@/components/CustomDropdown.vue';
 import HomeworkDropdown from '@/components/HomeworkDropdown.vue';
 import ExamPaperLibraryModal from '@/components/ExamPaperLibraryModal.vue';
 import HomeworkLibraryModal from '@/components/HomeworkLibraryModal.vue';
 import ResourceLibraryModal from '@/components/ResourceLibraryModal.vue';
 import { ArrowBackOutline } from '@vicons/ionicons5';
-import { useRouter } from 'vue-router';
+import { useRouter, useRoute } from 'vue-router';
+import { ChapterApi } from '@/api';
+import { useUserStore } from '@/stores/user';
+import { useMessage } from 'naive-ui';
 
 const router = useRouter();
+const route = useRoute();
+const userStore = useUserStore();
+const message = useMessage();
 
 // 控制菜单显示状态的响应式变量
 const isMenuVisible = ref(false);
 
+// 加载状态
+const loading = ref(false);
+const saving = ref(false);
+
 // 控制删除确认模态框的显示状态
 const showDeleteModal = ref(false);
 
+// 要删除的章节信息
+const chapterToDelete = ref<{
+  index: number;
+  chapter: any;
+} | null>(null);
+
+// 删除加载状态
+const deleting = ref(false);
+
 // 控制试卷库模态框的显示状态
 const showExamLibraryModal = ref(false);
 
@@ -248,11 +326,11 @@ interface Section {
   lessonName: string;
   coursewareName: string;
   coursewareUploadOption: string;
-  coursewareFiles: File[];
+  coursewareFiles: any[];
   selectedExamOption: string;
   homeworkName: string;
-  uploadedFiles: File[];
-  homeworkFiles: File[];
+  uploadedFiles: any[];
+  homeworkFiles: any[];
   contentTitle: string;
   contentDescription: string;
 }
@@ -262,7 +340,7 @@ interface Chapter {
   id: number;
   name: string;
   expanded: boolean;
-  sections: Section[];
+  sections: any[];
 }
 
 // 章节数据结构
@@ -369,33 +447,40 @@ const homeworkOptions = [
 // 输入框引用
 const chapterInputRef = ref();
 
-// Naive UI 主题配置
-const themeOverrides: GlobalThemeOverrides = {
-  common: {
-    primaryColor: '#0288D1',
-    primaryColorHover: '#0277BD',
-    primaryColorPressed: '#01579B',
+// 当前章节名称的计算属性
+const currentChapterName = computed({
+  get: () => {
+    if (chapters.value.length > 0 && currentChapterIndex.value >= 0 && currentChapterIndex.value < chapters.value.length) {
+      return chapters.value[currentChapterIndex.value]?.name || '';
+    }
+    return '';
   },
-  Button: {
-    textColorGhostPrimary: '#0288D1',
-    borderPrimary: '1px solid #0288D1',
-  },
-  Input: {
-    borderHover: '#0288D1',
-    borderFocus: '#0288D1',
-  },
-  Select: {
-    peers: {
-      InternalSelection: {
-        borderHover: '#0288D1',
-        borderFocus: '#0288D1',
+  set: (value: string) => {
+    console.log('🔍 计算属性setter被调用，新值:', value);
+    console.log('🔍 当前章节索引:', currentChapterIndex.value);
+    console.log('🔍 章节数组长度:', chapters.value.length);
+
+    if (chapters.value.length > 0 && currentChapterIndex.value >= 0 && currentChapterIndex.value < chapters.value.length) {
+      if (chapters.value[currentChapterIndex.value]) {
+        console.log('📝 更新章节名称:', chapters.value[currentChapterIndex.value].name, '->', value);
+        chapters.value[currentChapterIndex.value].name = value;
+        console.log('✅ 章节名称已更新');
+      } else {
+        console.log('⚠️ 当前章节不存在');
       }
+    } else {
+      console.log('⚠️ 章节索引超出范围，无法更新');
     }
   }
-};
+});
+
 
 // 章节菜单选项
 const chapterMenuOptions = [
+  {
+    label: '添加节',
+    key: 'addSection'
+  },
   {
     label: '重命名',
     key: 'rename'
@@ -422,17 +507,49 @@ const examOptions = [
 const handleChapterMenuSelect = (key: string, chapterIndex?: number) => {
   const targetIndex = chapterIndex !== undefined ? chapterIndex : currentChapterIndex.value;
   if (key === 'delete') {
-    deleteChapter(targetIndex);
+    openDeleteModal(targetIndex);
   } else if (key === 'rename') {
     // 处理重命名逻辑
     console.log('重命名章节', targetIndex);
+    // 切换到目标章节并聚焦到输入框
+    if (targetIndex !== currentChapterIndex.value) {
+      currentChapterIndex.value = targetIndex;
+    }
+    // 确保章节是展开状态
+    chapters.value[targetIndex].expanded = true;
+    // 聚焦到输入框
+    setTimeout(() => {
+      if (chapterInputRef.value) {
+        chapterInputRef.value.focus();
+      }
+    }, 100);
+  } else if (key === 'addSection') {
+    // 处理添加节逻辑
+    addSectionToChapter(targetIndex);
   }
 };
 
 // 处理章节名称失去焦点
-const handleChapterNameBlur = () => {
-  // 可以在这里添加保存逻辑
-  console.log('章节名称已更新:', chapters.value[currentChapterIndex.value].name);
+const handleChapterNameBlur = async () => {
+  console.log('🔍 章节名称失去焦点事件触发');
+  console.log('🔍 当前章节索引:', currentChapterIndex.value);
+  console.log('🔍 章节数组长度:', chapters.value.length);
+
+  if (chapters.value.length > 0 && currentChapterIndex.value >= 0 && currentChapterIndex.value < chapters.value.length) {
+    const currentChapter = chapters.value[currentChapterIndex.value];
+    console.log('🔍 当前章节:', currentChapter);
+
+    if (currentChapter && currentChapter.name.trim()) {
+      console.log('📝 章节名称已更新:', currentChapter.name);
+      console.log('💾 开始自动保存章节...');
+      // 自动保存章节名称
+      await saveChapter();
+    } else {
+      console.log('⚠️ 章节名称为空，跳过保存');
+    }
+  } else {
+    console.log('⚠️ 章节索引超出范围，跳过保存');
+  }
 };
 
 // 处理章节名称获得焦点
@@ -441,50 +558,334 @@ const handleChapterNameFocus = () => {
   console.log('开始编辑章节名称');
 };
 
-// 添加章节
-const addChapter = () => {
-  // 先关闭所有现有章节
-  chapters.value.forEach((chapter) => {
-    chapter.expanded = false;
-  });
-  
-  const newChapter: Chapter = {
-    id: nextChapterId.value,
-    name: `新章节${nextChapterId.value}`,
-    expanded: true,
-    sections: [
-      {
-        id: 1,
-        lessonName: '新小节',
-        coursewareName: '课件准备PPT',
-        coursewareUploadOption: '',
-        coursewareFiles: [],
-        selectedExamOption: '',
-        homeworkName: '请添加作业',
-        uploadedFiles: [],
-        homeworkFiles: [],
-        contentTitle: '1.新小节',
-        contentDescription: '新小节描述'
-      }
-    ]
-  };
-  chapters.value.push(newChapter);
-  currentChapterIndex.value = chapters.value.length - 1;
-  nextChapterId.value++;
+// 添加节到指定章节
+const addSectionToChapter = async (chapterIndex: number) => {
+  try {
+    if (!userStore.user?.id) {
+      message.error('用户未登录，无法创建节');
+      return;
+    }
+
+    loading.value = true;
+
+    // 构建节数据
+    const now = new Date();
+    const formatDateTime = (date: Date) => {
+      const year = date.getFullYear();
+      const month = String(date.getMonth() + 1).padStart(2, '0');
+      const day = String(date.getDate()).padStart(2, '0');
+      const hours = String(date.getHours()).padStart(2, '0');
+      const minutes = String(date.getMinutes()).padStart(2, '0');
+      const seconds = String(date.getSeconds()).padStart(2, '0');
+      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+    }
+
+    const chapter = chapters.value[chapterIndex];
+    const sectionCount = chapter.sections.length + 1;
+
+    const sectionData = {
+      // 不传递id字段，让服务器自动生成
+      courseId: route.params.id || userStore.user.id, // 使用课程ID
+      name: `${chapterIndex + 1}.${sectionCount} 新节`,
+      type: 0, // 视频类型
+      sortOrder: sectionCount * 10, // 步长10
+      parentId: chapter.id.toString(), // 父章节ID（章）
+      level: 2, // 2=节
+      createBy: userStore.user.id,
+      createTime: formatDateTime(now),
+      updateBy: userStore.user.id,
+      updateTime: formatDateTime(now),
+      targetId: '', // 资源ID，暂时为空
+      targetType: '' // 资源类型，暂时为空
+    };
+
+    console.log('📝 创建节数据:', sectionData);
+
+    const response = await ChapterApi.createChapter(sectionData);
+
+    if (response.data && response.data.success) {
+      message.success('节创建成功！');
+
+      // 重新加载章节列表以获取最新数据
+      await loadChapters();
+
+      console.log('✅ 节创建成功，已重新加载章节列表');
+    } else {
+      message.error('节创建失败，请重试');
+      console.error('❌ 节创建失败:', response);
+    }
+  } catch (error) {
+    console.error('❌ 创建节时出错:', error);
+    message.error('创建节失败，请重试');
+  } finally {
+    loading.value = false;
+  }
 };
 
-// 删除章节
-const deleteChapter = (chapterIndex: number) => {
+// 添加章节
+const addChapter = async () => {
+  try {
+    if (!userStore.user?.id) {
+      message.error('用户未登录，无法创建章节');
+      return;
+    }
+
+    loading.value = true;
+
+    // 构建章节数据
+    const now = new Date();
+    const formatDateTime = (date: Date) => {
+      const year = date.getFullYear();
+      const month = String(date.getMonth() + 1).padStart(2, '0');
+      const day = String(date.getDate()).padStart(2, '0');
+      const hours = String(date.getHours()).padStart(2, '0');
+      const minutes = String(date.getMinutes()).padStart(2, '0');
+      const seconds = String(date.getSeconds()).padStart(2, '0');
+      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+    }
+
+    const chapterData = {
+      // 不传递id字段，让服务器自动生成
+      courseId: route.params.id || userStore.user.id, // 使用课程ID
+      name: `第${nextChapterId.value}章 新章节`,
+      type: 0, // 视频类型
+      sortOrder: nextChapterId.value * 10, // 步长10，方便后续插入
+      parentId: '0', // 章使用"0"
+      level: 1, // 1=章
+      createBy: userStore.user.id,
+      createTime: formatDateTime(now),
+      updateBy: userStore.user.id,
+      updateTime: formatDateTime(now),
+      targetId: '', // 资源ID，暂时为空
+      targetType: '' // 资源类型，暂时为空
+    };
+
+    console.log('📝 创建章节数据:', chapterData);
+
+    const response = await ChapterApi.createChapter(chapterData);
+
+    console.log('🔍 创建章节API完整响应:', response);
+    console.log('🔍 响应状态:', response.status);
+    console.log('🔍 响应数据:', response.data);
+    console.log('🔍 响应成功标志:', response.data?.success);
+    console.log('🔍 响应消息:', response.data?.message);
+
+    if (response.data && response.data.success) {
+      message.success('章节创建成功！');
+
+      // 重新加载章节列表以获取最新数据
+      await loadChapters();
+
+      console.log('✅ 章节创建成功，已重新加载章节列表');
+    } else {
+      console.error('❌ 章节创建失败，响应数据:', response.data);
+      message.error('章节创建失败：' + (response.data?.message || '未知错误'));
+    }
+  } catch (error: any) {
+    console.error('❌ 创建章节失败:', error);
+    message.error('创建章节失败：' + (error.message || '网络错误'));
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 保存章节
+const saveChapter = async () => {
+  console.log('💾 保存章节函数被调用');
+  console.log('🔍 用户ID:', userStore.user?.id);
+  console.log('🔍 章节数量:', chapters.value.length);
+  console.log('🔍 当前章节索引:', currentChapterIndex.value);
+
+  try {
+    if (!userStore.user?.id) {
+      console.log('❌ 用户未登录');
+      message.error('用户未登录，无法保存章节');
+      return;
+    }
+
+    if (chapters.value.length === 0) {
+      console.log('⚠️ 没有章节需要保存');
+      message.warning('没有章节需要保存');
+      return;
+    }
+
+    console.log('🔄 开始保存章节...');
+    saving.value = true;
+
+    // 构建保存数据
+    const now = new Date();
+    const formatDateTime = (date: Date) => {
+      const year = date.getFullYear();
+      const month = String(date.getMonth() + 1).padStart(2, '0');
+      const day = String(date.getDate()).padStart(2, '0');
+      const hours = String(date.getHours()).padStart(2, '0');
+      const minutes = String(date.getMinutes()).padStart(2, '0');
+      const seconds = String(date.getSeconds()).padStart(2, '0');
+      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+    }
+
+    // 保存当前选中的章节
+    const currentChapter = chapters.value[currentChapterIndex.value];
+    if (!currentChapter) {
+      message.error('章节不存在');
+      return;
+    }
+
+    const chapterData = {
+      id: currentChapter.id ? currentChapter.id.toString() : '',
+      courseId: route.params.id || userStore.user.id, // 使用课程ID
+      name: currentChapter.name.trim(),
+      type: 0, // 视频类型
+      sortOrder: (currentChapterIndex.value + 1) * 10, // 步长10
+      parentId: '0', // 章使用"0"
+      level: 1, // 1=章
+      createBy: userStore.user.id,
+      createTime: formatDateTime(now),
+      updateBy: userStore.user.id,
+      updateTime: formatDateTime(now),
+      targetId: '', // 资源ID，暂时为空
+      targetType: '' // 资源类型，暂时为空
+    };
+
+    console.log('🔍 当前章节数据:', currentChapter);
+    console.log('🔍 章节ID:', currentChapter.id);
+    console.log('🔍 章节ID类型:', typeof currentChapter.id);
+
+    // 验证章节名称
+    if (!chapterData.name) {
+      message.error('章节名称不能为空');
+      return;
+    }
+
+    console.log('💾 保存章节数据:', chapterData);
+
+    // 编辑现有章节
+    console.log('✏️ 编辑现有章节');
+    const response = await ChapterApi.editChapter(chapterData);
+
+    console.log('🔍 编辑章节完整响应:', response);
+    console.log('🔍 响应状态:', response.status);
+    console.log('🔍 响应数据:', response.data);
+    console.log('🔍 响应成功标志:', response.data?.success);
+    console.log('🔍 响应消息:', response.data?.message);
+
+    // 检查不同的成功响应格式
+    if (response.data && (response.data.success === true || response.data.code === 200 || response.data.code === 0)) {
+      message.success('章节保存成功！');
+
+      // 重新加载章节列表以获取最新数据
+      await loadChapters();
+
+      console.log('✅ 章节保存成功，已重新加载章节列表');
+    } else {
+      console.error('❌ 章节保存失败，响应数据:', response.data);
+      message.error('章节保存失败：' + (response.data?.message || '未知错误'));
+    }
+  } catch (error: any) {
+    console.error('❌ 保存章节失败:', error);
+    message.error('保存章节失败：' + (error.message || '网络错误'));
+  } finally {
+    saving.value = false;
+  }
+};
+
+// 保存节
+const saveSection = async (section: any) => {
+  console.log('💾 保存节函数被调用');
+  console.log('🔍 节数据:', section);
+
+  try {
+    if (!userStore.user?.id) {
+      console.log('❌ 用户未登录');
+      message.error('用户未登录，无法保存节');
+      return;
+    }
+
+    if (!section.lessonName || !section.lessonName.trim()) {
+      console.log('❌ 节名称不能为空');
+      message.error('节名称不能为空');
+      return;
+    }
+
+    console.log('🔄 开始保存节...');
+
+    // 构建保存数据
+    const now = new Date();
+    const formatDateTime = (date: Date) => {
+      const year = date.getFullYear();
+      const month = String(date.getMonth() + 1).padStart(2, '0');
+      const day = String(date.getDate()).padStart(2, '0');
+      const hours = String(date.getHours()).padStart(2, '0');
+      const minutes = String(date.getMinutes()).padStart(2, '0');
+      const seconds = String(date.getSeconds()).padStart(2, '0');
+      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+    }
+
+    const currentChapter = chapters.value[currentChapterIndex.value];
+    if (!currentChapter) {
+      message.error('章节不存在');
+      return;
+    }
+
+    // 计算节的排序值，使用节在章节中的索引位置
+    const sectionIndex = currentChapter.sections.findIndex((s: any) => s.id === section.id);
+    const sortOrder = (sectionIndex >= 0 ? sectionIndex + 1 : 1) * 10;
+
+    const sectionData = {
+      id: section.id ? section.id.toString() : '',
+      courseId: route.params.id || userStore.user.id,
+      name: section.lessonName.trim(),
+      type: 0, // 视频类型
+      sortOrder: sortOrder, // 使用节在章节中的位置作为排序
+      parentId: currentChapter.id ? currentChapter.id.toString() : '0', // 节的父ID是章的ID
+      level: 2, // 2=节
+      createBy: userStore.user.id,
+      createTime: formatDateTime(now),
+      updateBy: userStore.user.id,
+      updateTime: formatDateTime(now),
+      targetId: '',
+      targetType: ''
+    };
+
+    console.log('💾 保存节数据:', sectionData);
+
+    // 调用编辑API保存节
+    const response = await ChapterApi.editChapter(sectionData);
+    console.log('🔍 编辑节完整响应:', response);
+    console.log('🔍 响应状态:', response.status);
+    console.log('🔍 响应数据:', response.data);
+    console.log('🔍 响应成功标志:', response.data?.success);
+    console.log('🔍 响应消息:', response.data?.message);
+
+    if (response.data && (response.data.success === true || response.data.code === 200 || response.data.code === 0)) {
+      message.success('节保存成功！');
+
+      // 重新加载章节列表以获取最新数据
+      await loadChapters();
+
+      console.log('✅ 节保存成功，已重新加载章节列表');
+    } else {
+      console.error('❌ 节保存失败，响应数据:', response.data);
+      message.error('节保存失败：' + (response.data?.message || '未知错误'));
+    }
+  } catch (error: any) {
+    console.error('❌ 保存节失败:', error);
+    message.error('保存节失败：' + (error.message || '网络错误'));
+  }
+};
+
+// 删除章节（本地删除，不调用API）
+const deleteChapterLocal = (chapterIndex: number) => {
   if (chapters.value.length > 1) {
     chapters.value.splice(chapterIndex, 1);
-    
+
     // 调整当前章节索引
     if (currentChapterIndex.value >= chapters.value.length) {
       currentChapterIndex.value = chapters.value.length - 1;
     } else if (currentChapterIndex.value > chapterIndex) {
       currentChapterIndex.value--;
     }
-    
+
     // 确保至少有一个章节是展开的
     const hasExpandedChapter = chapters.value.some(chapter => chapter.expanded);
     if (!hasExpandedChapter && chapters.value.length > 0) {
@@ -493,23 +894,79 @@ const deleteChapter = (chapterIndex: number) => {
   }
 };
 
+// 删除章节（调用API）
+const deleteChapter = async (chapterIndex: number) => {
+  try {
+    if (!userStore.user?.id) {
+      message.error('用户未登录，无法删除章节');
+      return;
+    }
+
+    if (chapters.value.length <= 1) {
+      message.warning('至少需要保留一个章节');
+      return;
+    }
+
+    const chapter = chapters.value[chapterIndex];
+    if (!chapter) {
+      message.error('章节不存在');
+      return;
+    }
+
+    deleting.value = true;
+
+    // 调用删除API
+    const response = await ChapterApi.deleteChapter(chapter.id.toString());
+
+    if (response.data && response.data.success) {
+      message.success('章节删除成功！');
+
+      // 本地删除章节
+      deleteChapterLocal(chapterIndex);
+    } else {
+      message.error('章节删除失败：' + (response.data?.message || '未知错误'));
+    }
+  } catch (error: any) {
+    console.error('❌ 删除章节失败:', error);
+    message.error('删除章节失败：' + (error.message || '网络错误'));
+  } finally {
+    deleting.value = false;
+  }
+};
+
 // 打开删除确认模态框
-const openDeleteModal = () => {
+const openDeleteModal = (chapterIndex: number) => {
+  const chapter = chapters.value[chapterIndex];
+  if (!chapter) {
+    message.error('章节不存在');
+    return;
+  }
+
+  chapterToDelete.value = {
+    index: chapterIndex,
+    chapter: chapter
+  };
   showDeleteModal.value = true;
   isMenuVisible.value = false; // 关闭操作菜单
 };
 
 // 处理删除确认
-const handleDeleteConfirm = () => {
-  console.log('确认删除章节');
-  // 这里添加实际的删除逻辑
+const handleDeleteConfirm = async () => {
+  if (!chapterToDelete.value) {
+    message.error('删除信息丢失');
+    return;
+  }
+
+  await deleteChapter(chapterToDelete.value.index);
   showDeleteModal.value = false;
+  chapterToDelete.value = null;
 };
 
 // 处理删除取消
 const handleDeleteCancel = () => {
   console.log('取消删除章节');
   showDeleteModal.value = false;
+  chapterToDelete.value = null;
 };
 
 // 删除不再需要的课件相关方法，现在使用下拉框
@@ -562,10 +1019,136 @@ const toggleChapterExpansion = (chapterIndex?: number) => {
   }
 };
 
+// 加载章节列表
+const loadChapters = async () => {
+  try {
+    if (!userStore.user?.id) {
+      console.warn('用户未登录，无法加载章节');
+      return;
+    }
+
+    console.log('🔄 开始加载章节列表...');
+
+    const courseId = route.params.id || userStore.user.id;
+    const params = {
+      courseId: courseId.toString(),
+      keyword: '',
+      type: undefined,
+      parentId: '',
+      level: undefined,
+      page: 1,
+      pageSize: 100
+    };
+
+    console.log('📋 查询参数:', params);
+
+    const response = await ChapterApi.getChapters(params);
+
+    console.log('🔍 完整API响应:', response);
+    console.log('🔍 响应数据:', response.data);
+    console.log('🔍 响应状态:', response.status);
+    console.log('🔍 响应数据类型:', typeof response.data);
+    console.log('🔍 响应数据是否为数组:', Array.isArray(response.data));
+
+    // 处理不同的API响应结构
+    let chapterData = null;
+    if (response.data && response.data.success && response.data.result) {
+      chapterData = response.data.result;
+      console.log('✅ 从服务器加载的章节数据 (result):', chapterData);
+    } else if (response.data && response.data.list) {
+      chapterData = response.data.list;
+      console.log('✅ 从服务器加载的章节数据 (list):', chapterData);
+    } else if (response.data && response.data.data && response.data.data.list) {
+      chapterData = response.data.data.list;
+      console.log('✅ 从服务器加载的章节数据 (data.list):', chapterData);
+    } else if (Array.isArray(response.data)) {
+      chapterData = response.data;
+      console.log('✅ 从服务器加载的章节数据 (array):', chapterData);
+    } else if (response.data && Array.isArray(response.data)) {
+      chapterData = response.data;
+      console.log('✅ 从服务器加载的章节数据 (direct array):', chapterData);
+    }
+
+    if (chapterData && Array.isArray(chapterData)) {
+      console.log('✅ 章节数据数量:', chapterData.length);
+
+      // 清空现有章节
+      chapters.value = [];
+
+      // 按level分组：章(level=1)和节(level=2)
+      const chaptersData = chapterData.filter((item: any) => item.level === 1);
+      const sectionsData = chapterData.filter((item: any) => item.level === 2);
+
+      console.log('📚 章数据:', chaptersData);
+      console.log('📖 节数据:', sectionsData);
+
+      // 构建章节结构
+      chaptersData.forEach((chapterData: any, index: number) => {
+        const chapter: Chapter = {
+          id: chapterData.id,
+          name: chapterData.name,
+          expanded: false,
+          sections: []
+        };
+
+        // 找到属于这个章的节
+        const chapterSections = sectionsData.filter((section: any) => section.parentId === chapterData.id);
+        chapterSections.forEach((sectionData: any) => {
+          chapter.sections.push({
+            id: sectionData.id,
+            lessonName: sectionData.name,
+            coursewareName: '课件准备PPT',
+            coursewareUploadOption: '',
+            coursewareFiles: [],
+            selectedExamOption: '',
+            homeworkName: '请添加作业',
+            uploadedFiles: [],
+            homeworkFiles: [],
+            contentTitle: sectionData.name,
+            contentDescription: '节描述'
+          });
+        });
+
+        chapters.value.push(chapter);
+      });
+
+      console.log('📚 处理后的章节数据:', chapters.value);
+
+      console.log('✅ 构建完成的章节结构:', chapters.value);
+      console.log('🔍 重新加载后的章节名称:', chapters.value.map(ch => ({ id: ch.id, name: ch.name })));
+
+      // 如果有章节，默认选中第一个
+      if (chapters.value.length > 0) {
+        currentChapterIndex.value = 0;
+        chapters.value[0].expanded = true;
+        console.log('✅ 默认选中第一个章节:', chapters.value[0]);
+        console.log('🔍 第一个章节的名称:', chapters.value[0].name);
+      } else {
+        // 如果没有章节，重置索引
+        currentChapterIndex.value = 0;
+        console.log('⚠️ 没有找到章节数据');
+      }
+
+      message.success(`成功加载 ${chapters.value.length} 个章节`);
+    } else {
+      console.warn('⚠️ 没有获取到章节数据');
+      console.warn('⚠️ 响应结构:', response);
+      console.warn('⚠️ 响应数据:', response.data);
+      message.warning('没有找到章节数据');
+    }
+  } catch (error) {
+    console.error('❌ 加载章节失败:', error);
+    console.error('❌ 错误详情:', error);
+    message.error('加载章节失败，请重试');
+  }
+};
+
 // 生命周期钩子
 onMounted(() => {
   checkScreenSize();
   window.addEventListener('resize', checkScreenSize);
+  // 加载章节数据
+  loadChapters();
 });
 
 onUnmounted(() => {
@@ -575,8 +1158,11 @@ onUnmounted(() => {
 // 删除不再需要的作业相关方法，现在使用下拉框
 
 // 课节相关方法
-const handleLessonBlur = () => {
-  console.log('课节名称已更新');
+const handleLessonBlur = async (section: any) => {
+  console.log('课节名称已更新:', section.lessonName);
+  if (section.lessonName && section.lessonName.trim()) {
+    await saveSection(section);
+  }
 };
 
 const handleLessonFocus = () => {
@@ -586,8 +1172,8 @@ const handleLessonFocus = () => {
 // 添加小节
 const addSection = () => {
   const currentChapter = chapters.value[currentChapterIndex.value];
-  const newSectionId = Math.max(...currentChapter.sections.map(s => s.id), 0) + 1;
-  const newSection: Section = {
+  const newSectionId = Math.max(...currentChapter.sections.map((s: any) => s.id), 0) + 1;
+  const newSection: any = {
     id: newSectionId,
     lessonName: '新小节',
     coursewareName: '课件准备PPT',
@@ -604,7 +1190,7 @@ const addSection = () => {
 };
 
 // 处理考试选项变化
-const handleExamOptionChange = (section: Section, value: any) => {
+const handleExamOptionChange = (section: any, value: any) => {
   console.log('选项变化:', value, 'section id:', section.id);
   // 如果选择的是"本地上传"，直接触发文件选择
   if (value === '本地上传') {
@@ -624,7 +1210,7 @@ const handleExamOptionChange = (section: Section, value: any) => {
 };
 
 // 处理课件上传选项变化
-const handleCoursewareUploadOptionChange = (section: Section, value: any) => {
+const handleCoursewareUploadOptionChange = (section: any, value: any) => {
   console.log('课件上传选项变化:', value, 'section id:', section.id);
   // 如果选择的是"本地上传"，直接触发文件选择
   if (value === '本地上传') {
@@ -644,7 +1230,7 @@ const handleCoursewareUploadOptionChange = (section: Section, value: any) => {
 };
 
 // 处理作业选项变化
-const handleHomeworkOptionChange = (section: Section, value: any) => {
+const handleHomeworkOptionChange = (section: any, value: any) => {
   console.log('作业选项变化:', value, 'section id:', section.id);
   // 如果选择的是"本地上传"，直接触发文件选择
   if (value === '本地上传') {
@@ -666,7 +1252,7 @@ const handleHomeworkOptionChange = (section: Section, value: any) => {
 };
 
 // 处理文件上传
-const handleFileUpload = (event: Event, section: Section) => {
+const handleFileUpload = (event: Event, section: any) => {
   const target = event.target as HTMLInputElement;
   if (target.files) {
     const files = Array.from(target.files);
@@ -676,7 +1262,7 @@ const handleFileUpload = (event: Event, section: Section) => {
 };
 
 // 处理课件文件上传
-const handleCoursewareFileUpload = (event: Event, section: Section) => {
+const handleCoursewareFileUpload = (event: Event, section: any) => {
   const target = event.target as HTMLInputElement;
   if (target.files) {
     const files = Array.from(target.files);
@@ -686,7 +1272,7 @@ const handleCoursewareFileUpload = (event: Event, section: Section) => {
 };
 
 // 处理作业文件上传
-const handleHomeworkFileUpload = (event: any, section: Section) => {
+const handleHomeworkFileUpload = (event: any, section: any) => {
   const target = event.target as HTMLInputElement;
   if (target.files) {
     const files = Array.from(target.files);
@@ -696,12 +1282,12 @@ const handleHomeworkFileUpload = (event: any, section: Section) => {
 };
 
 // 删除文件
-const removeFile = (section: Section, fileIndex: number) => {
+const removeFile = (section: any, fileIndex: number) => {
   section.uploadedFiles.splice(fileIndex, 1);
 };
 
 // 删除课件文件
-const removeCoursewareFile = (section: Section, fileIndex: number) => {
+const removeCoursewareFile = (section: any, fileIndex: number) => {
   section.coursewareFiles.splice(fileIndex, 1);
 };
 
@@ -733,14 +1319,14 @@ const handleResourceLibraryConfirm = (selectedResources: any[]) => {
 const removeLessonSection = (sectionId: number, chapterIndex?: number) => {
   const targetChapterIndex = chapterIndex !== undefined ? chapterIndex : currentChapterIndex.value;
   const chapter = chapters.value[targetChapterIndex];
-  const index = chapter.sections.findIndex((section: Section) => section.id === sectionId);
+  const index = chapter.sections.findIndex((section: any) => section.id === sectionId);
   if (index > -1 && chapter.sections.length > 1) {
     chapter.sections.splice(index, 1);
   }
 };
 
 const goBack = () => {
- router.back();
+  router.back();
 }
 
 // 删除未使用的方法
@@ -764,7 +1350,7 @@ const goBack = () => {
   height: auto !important;
 }
 
-.back-button{
+.back-button {
   margin: 10px 0 0 10px;
 }
 
@@ -1994,4 +2580,58 @@ const goBack = () => {
   white-space: nowrap;
   line-height: 18px;
 }
+/* 保存按钮样式 */
+.save-chapter-btn {
+  width: 120px;
+  height: 32px;
+  margin: 20px 0 0 20px;
+  background-color: #0288D1 !important;
+  border: 1px solid #0288D1 !important;
+  border-radius: 2px !important;
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+  align-items: center;
+  margin-bottom: 30px;
+}
+
+.save-icon {
+  width: 18px;
+  height: 18px;
+}
+
+.save-text {
+  width: 80px;
+  height: 18px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 14px;
+  font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
+  font-weight: normal;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 18px;
+}
+
+/* 删除确认对话框样式 */
+:deep(.n-dialog__title) {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #ff4d4f;
+  font-weight: 600;
+}
+
+:deep(.n-dialog__icon) {
+  color: #ff4d4f;
+  font-size: 20px;
+}
+
+:deep(.n-dialog__icon svg) {
+  fill: #ff4d4f;
+}
+
+:deep(.n-dialog__icon svg path) {
+  fill: #ff4d4f;
+}
 </style>
diff --git a/src/views/teacher/course/ChapterManagement.vue b/src/views/teacher/course/ChapterManagement.vue
index ed024aa..e9598c9 100644
--- a/src/views/teacher/course/ChapterManagement.vue
+++ b/src/views/teacher/course/ChapterManagement.vue
@@ -10,11 +10,7 @@
           <n-button @click="exportChapters">导出</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 v-model:value="searchKeyword" placeholder="请输入想要搜索的内容" style="width: 200px;">
             </n-input>
             <n-button type="primary" @click="searchChapters">搜索</n-button>
           </div>
@@ -24,9 +20,9 @@
 
     <!-- 章节列表表格 -->
     <div class="table-box">
-        <n-data-table :columns="columns" :data="paginatedChapters" :row-key="rowKey"
-          :checked-row-keys="selectedChapters" @update:checked-row-keys="handleCheck" :bordered="false"
-          :single-line="false" size="medium" class="chapter-data-table" :row-class-name="rowClassName" scroll-x="true" />
+      <n-data-table :columns="columns" :data="paginatedChapters" :row-key="rowKey" :checked-row-keys="selectedChapters"
+        @update:checked-row-keys="handleCheck" :bordered="false" :single-line="false" size="medium"
+        class="chapter-data-table" :row-class-name="rowClassName" scroll-x="true" :loading="loading" />
 
       <!-- 自定义分页器 -->
       <div class="custom-pagination">
@@ -56,36 +52,35 @@
             <span class="page-number nav-button" :class="{ disabled: currentPage === totalPages }"
               @click="goToPage('last')">
               尾页
-          </span>
+            </span>
           </div>
         </div>
       </div>
     </div>
-    <ImportModal 
-      v-model:show="showImportModal"
-      template-name="custom_template.xlsx"
-      import-type="custom"
-      @success="handleImportSuccess"
-      @template-download="handleTemplateDownload" />
+    <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 { ref, computed, h } from 'vue'
-import { NButton, useMessage, NDataTable, NInput, NSpace } from 'naive-ui'
+import { ref, computed, h, onMounted } from 'vue'
+import { NButton, useMessage, NDataTable, NInput, NSpace, useDialog } from 'naive-ui'
 import type { DataTableColumns } from 'naive-ui'
 import { useRouter, useRoute } from 'vue-router'
 import ImportModal from '@/components/common/ImportModal.vue'
+import { ChapterApi } from '@/api'
+import type { ChapterQueryParams, CourseSection } from '@/api/types'
+import { useUserStore } from '@/stores/user'
 
 const router = useRouter()
 const route = useRoute()
-
+const userStore = useUserStore()
 
 const message = useMessage()
 
 // 章节类型定义
 interface Chapter {
-  id: number
+  id: string
   name: string
   type: string
   sort: string | number
@@ -93,157 +88,155 @@ interface Chapter {
   isParent: boolean
   children?: Chapter[]
   expanded?: boolean
+  level?: number
+  parentId?: string
 }
 
 
 const showImportModal = ref(false)
 
+// 加载状态
+const loading = ref(false)
+const error = ref('')
+
+// 获取当前用户ID作为courseId参数
+const courseId = computed(() => userStore.user?.id?.toString() || '')
+
 const handleImportSuccess = () => {
   message.success('章节导入成功')
+  // 重新加载章节列表
+  loadChapters()
 }
 
 const handleTemplateDownload = () => {
   message.success('模板下载成功')
 }
+
 // 搜索关键词
 const searchKeyword = ref('')
 
 // 选中的章节
-const selectedChapters = ref<number[]>([])
+const selectedChapters = ref<string[]>([])
 
 // 章节列表数据
-const chapterList = ref<Chapter[]>([
-  {
-    id: 1,
-    name: '第一章 课前准备',
-    type: '-',
-    sort: '-',
-    createTime: '2025.07.25 09:20',
-    isParent: true,
-    expanded: false,
-    children: [
-      {
-        id: 2,
-        name: '开课彩蛋：新开始新征程',
-        type: '视频',
-        sort: 1,
-        createTime: '2025.07.25 09:20',
-        isParent: false
-      },
-      {
-        id: 3,
-        name: '课件准备PPT',
-        type: '课件',
-        sort: 2,
-        createTime: '2025.07.25 09:20',
-        isParent: false
-      },
-      {
-        id: 4,
-        name: '第一节 课程定位与目标',
-        type: '视频',
-        sort: 3,
-        createTime: '2025.07.25 09:20',
-        isParent: false
-      },
-      {
-        id: 5,
-        name: '第二节 教学安排及学习建议',
-        type: '作业',
-        sort: 4,
-        createTime: '2025.07.25 09:20',
-        isParent: false
-      },
-      {
-        id: 6,
-        name: '第三节 教学安排及学习建议',
-        type: '考试',
-        sort: 5,
-        createTime: '2025.07.25 09:20',
-        isParent: false
+const chapterList = ref<Chapter[]>([])
+
+// 原始章节数据（用于搜索过滤）
+const originalChapterList = ref<Chapter[]>([])
+
+// 加载章节数据
+const loadChapters = async () => {
+  if (!courseId.value) {
+    message.error('用户未登录，无法获取章节数据')
+    return
+  }
+
+  try {
+    loading.value = true
+    error.value = ''
+
+    const params: ChapterQueryParams = {
+      courseId: courseId.value,
+      page: 1,
+      pageSize: 1000 // 获取所有章节
+    }
+
+    const response = await ChapterApi.getChapters(params)
+
+    console.log('🔍 完整API响应:', response)
+    console.log('🔍 response.data类型:', typeof response.data)
+    console.log('🔍 response.data是否为数组:', Array.isArray(response.data))
+    console.log('🔍 response.data内容:', response.data)
+
+    if (response.code === 200 && response.data) {
+      // 检查response.data是否有list属性
+      if (response.data.list && Array.isArray(response.data.list)) {
+        // 转换API数据为组件需要的格式
+        const chapters = convertApiDataToChapter(response.data.list)
+        chapterList.value = chapters
+        originalChapterList.value = chapters
+        message.success('章节加载成功')
+      } else {
+        console.error('❌ response.data.list不是数组:', response.data)
+        throw new Error('API返回的数据格式不正确')
       }
-    ]
-  },
-  {
-    id: 7,
-    name: '第二章 课前准备',
-    type: '-',
-    sort: '-',
-    createTime: '2025.07.25 09:20',
-    isParent: true,
-    expanded: false,
-    children: [
-      {
-        id: 8,
-        name: '第一节 新开始新征程',
-        type: '视频',
-        sort: 1,
-        createTime: '2025.07.25 09:20',
-        isParent: false
-      },
-      {
-        id: 9,
-        name: '第二节 教学安排及学习建议',
-        type: '课件',
-        sort: 2,
-        createTime: '2025.07.25 09:20',
-        isParent: false
-      }
-    ]
-  },
-  {
-    id: 10,
-    name: '第三章 课前准备',
-    type: '-',
-    sort: '-',
-    createTime: '2025.07.25 09:20',
-    isParent: true,
-    expanded: false,
-    children: [
-      {
-        id: 12,
-        name: '第一节 新开始新征程',
-        type: '视频',
-        sort: 1,
-        createTime: '2025.07.25 09:20',
-        isParent: false
-      },
-      {
-        id: 13,
-        name: '第二节 教学安排及学习建议',
-        type: '课件',
-        sort: 2,
-        createTime: '2025.07.25 09:20',
-        isParent: false
-      }
-    ]
-  },
-  {
-    id: 11,
-    name: '第四章 课前准备',
-    type: '-',
-    sort: '-',
-    createTime: '2025.07.25 09:20',
-    isParent: true,
+    } else {
+      throw new Error(response.message || '获取章节失败')
+    }
+  } catch (err: any) {
+    console.error('加载章节失败:', err)
+    error.value = err.message || '加载章节失败'
+    message.error(error.value)
+
+    // API调用失败时显示空列表，不使用模拟数据
+    chapterList.value = []
+    originalChapterList.value = []
+  } finally {
+    loading.value = false
+  }
+}
+
+// 转换API数据为组件格式
+const convertApiDataToChapter = (apiData: any[]): Chapter[] => {
+  console.log('🔍 convertApiDataToChapter 输入数据:', apiData)
+  console.log('🔍 输入数据类型:', typeof apiData)
+  console.log('🔍 输入数据是否为数组:', Array.isArray(apiData))
+
+  if (!Array.isArray(apiData)) {
+    console.error('❌ apiData不是数组:', apiData)
+    return []
+  }
+
+  // 按 sort 排序
+  const sortedData = [...apiData].sort((a, b) => (a.sort || 0) - (b.sort || 0))
+
+  return sortedData.map(section => ({
+    id: section.id,
+    name: section.name,
+    type: mapChapterType(section.type),
+    sort: section.sort,
+    createTime: section.createdAt ? new Date(section.createdAt).toLocaleString() : '',
+    isParent: section.level === 1, // level=1 表示章，为父章节
+    level: section.level,
+    parentId: section.parentId,
     expanded: false,
     children: []
+  }))
+}
+
+// 映射章节类型 - 根据数据库字段说明：0:视频、1:资料、2:考试、3:作业
+const mapChapterType = (type: number | null): string => {
+  switch (type) {
+    case 0: return '视频'
+    case 1: return '资料'
+    case 2: return '考试'
+    case 3: return '作业'
+    default: return '-'
   }
-])
+}
+
 
 // 扁平化章节列表（用于显示和分页）
 const flattenedChapters = computed(() => {
   const result: Chapter[] = []
 
-  const flatten = (chapters: Chapter[]) => {
-    chapters.forEach(chapter => {
-      result.push(chapter)
-      if (chapter.children && chapter.expanded) {
-        flatten(chapter.children)
-      }
-    })
-  }
+  // 分离章节（level=1）和节（level=2），过滤掉level=0的项目
+  const chapters = chapterList.value.filter(item => item.level === 1)
+  const sections = chapterList.value.filter(item => item.level === 2)
+
+  // 为每个章节添加其子节
+  chapters.forEach(chapter => {
+    chapter.children = sections.filter(section => section.parentId === chapter.id)
+    result.push(chapter)
+
+    // 如果章节展开，添加其子节
+    if (chapter.expanded && chapter.children) {
+      chapter.children.forEach(section => {
+        result.push(section)
+      })
+    }
+  })
 
-  flatten(chapterList.value)
   return result
 })
 
@@ -302,7 +295,7 @@ const paginatedChapters = computed(() => {
 const rowKey = (row: Chapter) => row.id
 
 // 表格选择处理
-const handleCheck = (rowKeys: number[]) => {
+const handleCheck = (rowKeys: string[]) => {
   selectedChapters.value = rowKeys
 }
 
@@ -351,7 +344,7 @@ const goToPage = (page: string | number) => {
 
 // 展开/收起章节
 const toggleChapter = (chapter: Chapter) => {
-  if (chapter.isParent && chapter.children) {
+  if (chapter.level === 1 && chapter.children) {
     chapter.expanded = !chapter.expanded
   }
 }
@@ -367,6 +360,7 @@ const addChapter = () => {
   router.push(`/teacher/chapter-editor-teacher/${courseId}`)
 }
 
+
 const importChapters = () => {
   showImportModal.value = true
 }
@@ -375,39 +369,168 @@ const exportChapters = () => {
   message.info('导出章节功能')
 }
 
-const deleteSelected = () => {
+const deleteSelected = async () => {
   if (selectedChapters.value.length === 0) return
-  if (confirm(`确定要删除选中的 ${selectedChapters.value.length} 个章节吗？`)) {
-    selectedChapters.value.forEach((id: number) => {
-      const index = chapterList.value.findIndex((c: Chapter) => c.id === id)
-      if (index > -1) {
-        chapterList.value.splice(index, 1)
-      }
+
+  try {
+    if (!userStore.user?.id) {
+      message.error('用户未登录，无法删除章节')
+      return
+    }
+
+    // 显示确认对话框
+    const confirmed = await new Promise<boolean>((resolve) => {
+      dialog.warning({
+        title: '确认批量删除章节',
+        content: `确定要删除选中的 ${selectedChapters.value.length} 个章节吗？删除后无法恢复。`,
+        positiveText: '确认删除',
+        negativeText: '取消',
+        positiveButtonProps: {
+          type: 'error'
+        },
+        onPositiveClick: () => {
+          resolve(true)
+        },
+        onNegativeClick: () => {
+          resolve(false)
+        }
+      })
     })
-    selectedChapters.value = []
-    message.success('删除成功')
+
+    if (!confirmed) return
+
+    // 使用批量删除API
+    const response = await ChapterApi.deleteChaptersBatch(selectedChapters.value)
+
+    if (response.data && response.data.success) {
+      message.success(`成功删除 ${selectedChapters.value.length} 个章节`)
+
+      // 从列表中移除已删除的章节
+      selectedChapters.value.forEach((id: string) => {
+        const index = chapterList.value.findIndex((c: Chapter) => c.id === id)
+        if (index > -1) {
+          chapterList.value.splice(index, 1)
+        }
+      })
+
+      selectedChapters.value = []
+    } else {
+      message.error('批量删除失败：' + (response.data?.message || '未知错误'))
+    }
+  } catch (error: any) {
+    console.error('❌ 批量删除章节失败:', error)
+    message.error('批量删除失败：' + (error.message || '网络错误'))
   }
 }
 
-const searchChapters = () => {
-  message.info('搜索章节: ' + searchKeyword.value)
-  currentPage.value = 1
+const searchChapters = async () => {
+  if (!courseId.value) {
+    message.error('用户未登录，无法搜索章节')
+    return
+  }
+
+  try {
+    loading.value = true
+    error.value = ''
+
+    const params: ChapterQueryParams = {
+      courseId: courseId.value,
+      keyword: searchKeyword.value,
+      page: 1,
+      pageSize: 1000
+    }
+
+    const response = await ChapterApi.searchChapters(params)
+
+    if (response.code === 200 && response.data && response.data.list && Array.isArray(response.data.list)) {
+      // 转换API数据为组件需要的格式
+      const chapters = convertApiDataToChapter(response.data.list)
+      chapterList.value = chapters
+      currentPage.value = 1
+      message.success(`搜索到 ${chapters.length} 个章节`)
+    } else {
+      throw new Error(response.message || '搜索章节失败')
+    }
+  } catch (err: any) {
+    console.error('搜索章节失败:', err)
+    error.value = err.message || '搜索章节失败'
+    message.error(error.value)
+
+    // 搜索失败时显示空列表，不使用本地过滤
+    chapterList.value = []
+    currentPage.value = 1
+  } finally {
+    loading.value = false
+  }
 }
 
 const editChapter = (chapter: Chapter) => {
-  message.info('编辑章节: ' + chapter.name)
-}
-
-const deleteChapter = (chapter: Chapter) => {
-  if (confirm('确定要删除这个章节吗？')) {
-    const index = chapterList.value.findIndex((c: Chapter) => c.id === chapter.id)
-    if (index > -1) {
-      chapterList.value.splice(index, 1)
-      message.success('删除成功')
-    }
+  console.log('编辑章节:', chapter)
+  // 跳转到章节编辑器页面
+  const courseId = route.params.id
+  if (courseId) {
+    router.push(`/teacher/chapter-editor-teacher/${courseId}`)
+  } else {
+    message.error('课程ID不存在')
   }
 }
 
+// 在 setup 函数中初始化 dialog
+const dialog = useDialog()
+
+const deleteChapter = async (chapter: Chapter) => {
+  try {
+    if (!userStore.user?.id) {
+      message.error('用户未登录，无法删除章节')
+      return
+    }
+
+    // 显示确认对话框
+    const confirmed = await new Promise<boolean>((resolve) => {
+      dialog.warning({
+        title: '确认删除章节',
+        content: `确定要删除章节"${chapter.name}"吗？删除后无法恢复。`,
+        positiveText: '确认删除',
+        negativeText: '取消',
+        positiveButtonProps: {
+          type: 'error'
+        },
+        onPositiveClick: () => {
+          resolve(true)
+        },
+        onNegativeClick: () => {
+          resolve(false)
+        }
+      })
+    })
+
+    if (!confirmed) return
+
+    // 调用删除API
+    const response = await ChapterApi.deleteChapter(chapter.id.toString())
+
+    if (response.data && response.data.success) {
+      message.success('章节删除成功！')
+
+      // 从列表中移除已删除的章节
+      const index = chapterList.value.findIndex((c: Chapter) => c.id === chapter.id)
+      if (index > -1) {
+        chapterList.value.splice(index, 1)
+      }
+    } else {
+      message.error('章节删除失败：' + (response.data?.message || '未知错误'))
+    }
+  } catch (error: any) {
+    console.error('❌ 删除章节失败:', error)
+    message.error('删除章节失败：' + (error.message || '网络错误'))
+  }
+}
+
+// 组件挂载时加载数据
+onMounted(() => {
+  loadChapters()
+})
+
 // 表格列配置 - 使用 minWidth 实现响应式
 const columns: DataTableColumns<Chapter> = [
   {
@@ -423,17 +546,18 @@ const columns: DataTableColumns<Chapter> = [
       tooltip: true
     },
     render: (row: Chapter) => {
+      const isChapter = row.level === 1; // level=1 表示章
       return h('div', {
         style: {
           display: 'flex',
           alignItems: 'center',
           gap: '20px',
-          cursor: row.isParent ? 'pointer' : 'default',
-          marginLeft: row.isParent ? '0px' : '-3px'
+          cursor: isChapter ? 'pointer' : 'default',
+          marginLeft: isChapter ? '0px' : '-3px'
         },
-        onClick: row.isParent ? () => toggleChapter(row) : undefined
+        onClick: isChapter ? () => toggleChapter(row) : undefined
       }, [
-        row.isParent ? h('i', {
+        isChapter ? h('i', {
           class: 'n-base-icon',
           style: {
             transition: 'transform 0.2s',
@@ -454,10 +578,10 @@ const columns: DataTableColumns<Chapter> = [
         ]) : null,
         h('span', {
           style: {
-            color: row.isParent ? '#062333' : '#666666',
+            color: isChapter ? '#062333' : '#666666',
             fontSize: '14px',
-            fontWeight: row.isParent ? '500' : 'normal',
-            marginLeft: row.isParent ? '0' : '24px'
+            fontWeight: isChapter ? '500' : 'normal',
+            marginLeft: isChapter ? '0' : '24px'
           }
         }, row.name)
       ])
@@ -468,7 +592,8 @@ const columns: DataTableColumns<Chapter> = [
     key: 'type',
     minWidth: 60,
     render: (row: Chapter) => {
-      if (row.type === '-') {
+      const isChapter = row.level === 1; // level=1 表示章
+      if (isChapter || row.type === '-') {
         return h('span', { style: { color: '#BABABA' } }, '-')
       }
       return h('div', {
@@ -489,6 +614,10 @@ const columns: DataTableColumns<Chapter> = [
     key: 'sort',
     minWidth: 50,
     render: (row: Chapter) => {
+      const isChapter = row.level === 1; // level=1 表示章
+      if (isChapter) {
+        return h('span', { style: { color: '#BABABA' } }, '-')
+      }
       return h('span', { style: { color: '#062333', fontSize: '12px' } }, row.sort)
     }
   },