feat(course): 新增音视频与图文组件支持

- 新增 AudioComp.vue 组件，支持音频播放与设置
- 新增 EditorComp.vue 组件，集成富文本编辑器用于图文内容
- 修改 chooseFileList.vue，增加文件上传功能与类型适配
- 更新 createCourse.vue，完善课程章节内容管理逻辑
- 升级 useCourseData.js 和 useCreateCourseMaps.js，增强类型映射与数据结构
- 优化 BasicTable.vue，移除调试日志并调整样式
- 引入 quill 及相关插件依赖以支持富文本编辑功能

src/views/courselibrary/components/createCourse.vue

@@ -1,6 +1,6 @@
 <script setup>
 import dragCollapse from "./dragCollapse.vue";
-import { ElButton, ElCheckbox, ElDialog } from "element-plus";
+import { ElButton, ElCheckbox, ElDialog, ElMessageBox } from "element-plus";
 import dragTable from "./dragTable.vue";
 import { ref, reactive } from "vue";
 defineOptions({
@@ -9,42 +9,34 @@ defineOptions({
 import { useCourseData } from "@/hooks/useCourseData";
 import chooseFileList from "@/components/CreatedCourse/chooseFileList.vue";
 import VideoComp from "@/components/CreatedCourse/preview/VideoComp.vue";
-
-const mapComponents = {
-  VideoComp,
-};
+import AudioComp from "@/components/CreatedCourse/preview/AudioComp.vue";
+import EditorComp from "@/components/CreatedCourse/preview/EditorComp.vue";
+import { getType } from "@/hooks/useCreateCourseMaps";
+const mapComponents = [VideoComp, AudioComp, EditorComp];
 
 // 使用课程数据hook
-const { courseMetadata, courseList, courseActionButtons } = useCourseData();
-const isSetting = ref(false);
+const { courseMetadata, courseList, courseActionButtons, addChapter } =
+  useCourseData();
 const isPreview = ref(false);
 const chooseItemData = ref({});
 const showSettingDialog = ref(false);
 // 定义表格列
-
-// 添加章
-const addChapter = () => {
-  courseList.value.push({
-    title: "视频课程名称",
-    data: [],
-  });
-};
-
 const showDialog = ref(false);
-
 // 课程操作映射
 const courseOperations = {
-  addVideo: (index) => {
+  addVideo: () => {
+    courseMetadata.resType = 10;
     showDialog.value = true;
   },
   addAudio: () => {
-    console.log("添加音频功能调用");
-  },
-  addDocument: () => {
-    console.log("添加文档功能调用");
+    courseMetadata.resType = 20;
+    showDialog.value = true;
   },
+  addDocument: () => {},
   addImageText: () => {
-    console.log("添加图文功能调用");
+    courseMetadata.resType = 41;
+    chooseItemData.value.resType = 41;
+    showSettingDialog.value = true;
   },
   addExternalLink: () => {
     console.log("添加外部链接功能调用");
@@ -62,7 +54,6 @@ const courseOperations = {
     console.log("添加评估功能调用");
   },
 };
-
 // 执行课程操作
 const executeCourseOperation = (operationName, data) => {
   courseMetadata.chooseIndex = data;
@@ -74,24 +65,21 @@ const executeCourseOperation = (operationName, data) => {
     console.warn(`未找到操作: ${operationName}`);
   }
 };
-
 const chooseItem = (data) => {
-  console.log(data);
   chooseItemData.value = data;
-
-  console.log(chooseItemData.value);
   showSettingDialog.value = true;
 };
-
+// 保存
 const saveContent = () => {
-  console.log(chooseItemData.value);
   if (courseMetadata.selectionIndex !== null) {
+    courseList.value[courseMetadata.chooseIndex].data[
+      courseMetadata.selectionIndex
+    ] = chooseItemData.value;
   } else {
-    console.log(courseList.value, courseMetadata);
-
-    courseList.value[courseMetadata.chooseIndex].data.push(
-      chooseItemData.value
-    );
+    courseList.value[courseMetadata.chooseIndex].data.push({
+      resType: courseMetadata.resType,
+      ...chooseItemData.value,
+    });
   }
   showDialog.value = false;
   showSettingDialog.value = false;
@@ -99,7 +87,16 @@ const saveContent = () => {
 const deleteRow = (data) => {
   courseMetadata.chooseIndex = data.index;
   courseMetadata.selectionIndex = data.selectionIndex;
-  chooseItemData.value = data.record;
+  ElMessageBox.confirm(`确定删除${data.record.name}吗？`, "删除确认", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "error",
+  }).then(() => {
+    courseList.value[courseMetadata.chooseIndex].data.splice(
+      courseMetadata.selectionIndex,
+      1
+    );
+  });
 };
 const settingRow = (data) => {
   courseMetadata.chooseIndex = data.index;
@@ -164,18 +161,29 @@ const previewRow = (data) => {
     </div>
 
     <!--    选择文件列表-->
-    <el-dialog v-model="showDialog" title="请选择操作">
-      <chooseFileList @chooseItem="chooseItem"></chooseFileList>
+    <el-dialog v-model="showDialog" :title="getType(courseMetadata.resType)">
+      <chooseFileList
+        v-if="showDialog"
+        @chooseItem="chooseItem"
+        :resType="courseMetadata.resType"
+      ></chooseFileList>
     </el-dialog>
 
     <!--    设置预览弹窗 -->
-    <el-dialog v-model="showSettingDialog" title="请选择操作">
-      <component
-        v-for="item in mapComponents"
-        :is="item"
-        v-model:dialogVideoForm="chooseItemData"
-        :isPreview="isPreview"
-      ></component>
+    <el-dialog
+      v-model="showSettingDialog"
+      :title="isPreview ? '预览' : getType(chooseItemData.resType)"
+    >
+      <div v-for="item in mapComponents">
+        {{ chooseItemData.resType }}, {{ item }}
+        <component
+          v-if="Number(chooseItemData.resType) === item.resType"
+          :is="item"
+          v-model:dialogVideoForm="chooseItemData"
+          :isPreview="isPreview"
+        ></component>
+      </div>
+
       <template #footer>
         <div class="dialog-footer">
           <el-button @click="showSettingDialog = false">取消</el-button>