feat):(course 实现课程创建功能及文件云组件

- 添加创建课程页面，支持章节与节的嵌套结构
- 实现可折叠章节组件(dragCollapse)，支持展开/收起与删除操作
- 实现可拖拽表格组件(dragTable)，支持跨表格拖拽排序与编辑
- 引入文件云API模块，支持文件夹与文件的基本操作
- 添加文件类型图标样式文件(filetypes.css)
- 新增文件选择弹窗组件(FileCloud)，支持文件浏览与选择
- 优化common.scss样式文件，调整选择器缩进与渐变背景配置

src/views/courselibrary/components/createCourse.vue

@@ -0,0 +1,105 @@
+<script setup>
+import dragCollapse from "./dragCollapse.vue";
+import { ElButton, ElCheckbox } from "element-plus";
+import dragTable from "./dragTable.vue";
+import { message } from "ant-design-vue";
+defineOptions({
+  name: "CreateCourse",
+});
+import { ref, reactive, watch, toRaw, computed } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useCourseData } from "@/hooks/useCourseData";
+
+// 使用课程数据hook
+const { courseMetadata, courseList, courseActionButtons, executeCourseOperation } = useCourseData();
+
+// 定义表格列
+const tableColumns = [
+  {
+    title: "序号",
+    key: "index",
+    width: 80,
+    align: "center",
+  },
+  {
+    title: "节名称",
+    key: "name",
+    dataIndex: "name",
+  },
+  {
+    title: "类型",
+    key: "type",
+    dataIndex: "type",
+    align: "center",
+  },
+  {
+    title: "操作",
+    key: "action",
+    width: 220,
+    align: "center",
+  },
+];
+</script>
+
+<template>
+  <div class="create-course">
+    <div class="course-header">
+      <div class="title">课程名称</div>
+      <span>创建时间：{{ courseMetadata.createTime }}</span>
+    </div>
+    <div class="course-content">
+      <div style="padding: 10px">
+        <el-button>添加章</el-button>
+        <el-checkbox style="margin-left: 10px">顺序学习</el-checkbox>
+      </div>
+
+      <div>
+        <dragCollapse v-model:courseList="courseList">
+          <template #title="{ course }">{{ course.title }}</template>
+          <template #desc="{ course }"
+            >若课程只有一个章节，将不在学员端显示该章节名称</template
+          >
+          <template #default="{ course, index }">
+            <div class="drag-course-btn-content">
+              <el-button
+                v-for="btn in courseActionButtons"
+                type="primary"
+                class="btn-item"
+                plain
+                @click="executeCourseOperation(btn.fun, index)"
+                >{{ btn.label }}</el-button
+              >
+            </div>
+            <div>
+              <!-- 修改：添加 groupId 和 tableId 属性以支持跨表格拖拽 -->
+              <dragTable
+                :data="course.data"
+                :columns="tableColumns"
+                :group-id="'course-chapters'"
+                :table-id="'chapter-' + index"
+              ></dragTable>
+            </div>
+          </template>
+        </dragCollapse>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.create-course {
+  width: 100%;
+  padding: 10px 20px;
+  .course-header {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .drag-course-btn-content {
+    padding: 0 10px;
+    .btn-item + .btn-item {
+      margin-left: 10px;
+    }
+  }
+}
+</style>