feat(course): implement video selection and management features

- Added AddVideo component for video selection with preview and settings
- Implemented BasicTable component for displaying paginated data with custom rendering
- Created course file API module for managing course materials
- Enhanced dragTable component with edit, preview, and delete functionalities
- Added comprehensive styling utilities for margins, paddings, and dimensions
- Integrated video selection dialog in course creation workflow
- Added support for video drag-and-drop and completion rule configuration
- Implemented reusable course data management hook with icon support
- Added chapter and section management capabilities
- Enhanced course operation mapping for various content types

src/views/courselibrary/components/createCourse.vue

@@ -1,44 +1,94 @@
 <script setup>
 import dragCollapse from "./dragCollapse.vue";
-import { ElButton, ElCheckbox } from "element-plus";
+import { ElButton, ElCheckbox, ElDialog } from "element-plus";
 import dragTable from "./dragTable.vue";
-import { message } from "ant-design-vue";
+import { ref } from "vue";
 defineOptions({
   name: "CreateCourse",
 });
-import { ref, reactive, watch, toRaw, computed } from "vue";
-import { useRoute, useRouter } from "vue-router";
 import { useCourseData } from "@/hooks/useCourseData";
+import AddVideoComp from "@/components/CreatedCourse/AddVideo.vue";
 
 // 使用课程数据hook
-const { courseMetadata, courseList, courseActionButtons, executeCourseOperation } = useCourseData();
+const { courseMetadata, courseList, courseActionButtons } = useCourseData();
 
 // 定义表格列
-const tableColumns = [
-  {
-    title: "序号",
-    key: "index",
-    width: 80,
-    align: "center",
+
+// 添加章
+const addChapter = () => {
+  courseList.value.push({
+    title: "视频课程名称",
+    data: [],
+  });
+};
+
+const showDialog = ref(false);
+
+// 课程操作映射
+const courseOperations = {
+  addVideo: (index) => {
+    showDialog.value = true;
   },
-  {
-    title: "节名称",
-    key: "name",
-    dataIndex: "name",
+  addAudio: () => {
+    console.log("添加音频功能调用");
   },
-  {
-    title: "类型",
-    key: "type",
-    dataIndex: "type",
-    align: "center",
+  addDocument: () => {
+    console.log("添加文档功能调用");
   },
-  {
-    title: "操作",
-    key: "action",
-    width: 220,
-    align: "center",
+  addImageText: () => {
+    console.log("添加图文功能调用");
   },
-];
+  addExternalLink: () => {
+    console.log("添加外部链接功能调用");
+  },
+  addScorm: () => {
+    console.log("添加SCORM功能调用");
+  },
+  addExam: () => {
+    console.log("添加考试功能调用");
+  },
+  addHomework: () => {
+    console.log("添加作业功能调用");
+  },
+  addAssessment: () => {
+    console.log("添加评估功能调用");
+  },
+};
+
+// 执行课程操作
+const executeCourseOperation = (operationName, data) => {
+  courseMetadata.chooseIndex = data;
+  courseMetadata.selectionIndex = null;
+  if (courseOperations[operationName]) {
+    courseOperations[operationName](data);
+  } else {
+    console.warn(`未找到操作: ${operationName}`);
+  }
+};
+
+const isSetting = ref(false);
+
+const saveVideo = (data) => {
+  showDialog.value = false;
+  if (isSetting.value) {
+  } else {
+    courseList.value[courseMetadata.chooseIndex].data.push(data);
+  }
+};
+
+const deleteRow = (data) => {
+  console.log(data);
+  courseMetadata.chooseIndex = data.index;
+  courseMetadata.selectionIndex = data.selectionIndex;
+};
+const settingRow = (data) => {
+  courseMetadata.chooseIndex = data.index;
+  courseMetadata.selectionIndex = data.selectionIndex;
+};
+const previewRow = (data) => {
+  courseMetadata.chooseIndex = data.index;
+  courseMetadata.selectionIndex = data.selectionIndex;
+};
 </script>
 
 <template>
@@ -49,7 +99,7 @@ const tableColumns = [
     </div>
     <div class="course-content">
       <div style="padding: 10px">
-        <el-button>添加章</el-button>
+        <el-button @click="addChapter">添加章</el-button>
         <el-checkbox style="margin-left: 10px">顺序学习</el-checkbox>
       </div>
 
@@ -74,15 +124,23 @@ const tableColumns = [
               <!-- 修改：添加 groupId 和 tableId 属性以支持跨表格拖拽 -->
               <dragTable
                 :data="course.data"
-                :columns="tableColumns"
                 :group-id="'course-chapters'"
                 :table-id="'chapter-' + index"
+                :index="index"
+                @delete="deleteRow"
+                @setting="settingRow"
+                @preview="previewRow"
               ></dragTable>
             </div>
           </template>
         </dragCollapse>
       </div>
     </div>
+
+    <!--    课程按钮弹窗-->
+    <el-dialog v-model="showDialog" title="请选择操作">
+      <AddVideoComp @saveContent="saveVideo"></AddVideoComp>
+    </el-dialog>
   </div>
 </template>
 
@@ -93,6 +151,10 @@ const tableColumns = [
   .course-header {
     display: flex;
     justify-content: space-between;
+    .title {
+      font-size: 16px;
+      font-weight: 600;
+    }
   }
 
   .drag-course-btn-content {