feat(course): 优化课程创建与拖拽功能

- 引入 SvgIcon 组件并替换原有图标
- 添加多个 SVG 图标文件（audio、courseDel、coursePreview、del、doc）
- 更新 dragCollapse 和 dragTable 组件中的图标显示逻辑
- 修改 createCourse 页面样式及按钮布局
- 导入 iconfont 字体文件及相关 CSS 样式
- 调整表格操作列的图标和文本样式
- 增加对 Element Plus 图标库的使用
- 优化章节拖拽区域的视觉效果和交互体验

src/views/courselibrary/components/createCourse.vue

@@ -16,6 +16,8 @@ import ScormComp from "@/components/CreatedCourse/preview/ScormComp.vue";
 import PaperComp from "@/components/CreatedCourse/preview/PaperComp.vue";
 import HomeWorkComp from "@/components/CreatedCourse/preview/HomeWorkComp.vue";
 import AccessComp from "@/components/CreatedCourse/preview/AccessComp.vue";
+import SvgIcon from "@/components/SvgIcon.vue";
+import { Plus } from "@element-plus/icons-vue";
 defineOptions({
   name: "CreateCourse",
 });
@@ -242,13 +244,13 @@ const handleNext = () => {
 <template>
   <div class="create-course">
     <div class="course-header">
-      <div class="title">课程名称</div>
+      <div class="title ml18">课程名称</div>
       <span>创建时间：{{ courseMetadata.createTime }}</span>
     </div>
     <div class="course-content">
       <div class="course-actions">
-        <el-button @click="addChapter">添加章</el-button>
-        <el-checkbox style="margin-left: 10px">顺序学习</el-checkbox>
+        <el-button @click="addChapter" :icon="Plus">添加章</el-button>
+        <el-checkbox class="ml10">顺序学习</el-checkbox>
       </div>
 
       <div>
@@ -267,6 +269,7 @@ const handleNext = () => {
                 plain
                 @click="executeCourseOperation(btn.fun, index)"
               >
+                <svg-icon :icon-class="btn.icon" class="mr10"></svg-icon>
                 {{ btn.label }}
               </el-button>
             </div>
@@ -350,8 +353,7 @@ const handleNext = () => {
 <style scoped lang="scss">
 .create-course {
   width: 100%;
-  padding: 10px 20px;
-
+  padding: 27px 20px;
   .course-header {
     display: flex;
     justify-content: space-between;
@@ -364,6 +366,8 @@ const handleNext = () => {
 
   .course-actions {
     padding: 10px;
+    display: flex;
+    align-items: center;
   }
 
   .drag-course-btn-content {
@@ -372,6 +376,15 @@ const handleNext = () => {
     .btn-item + .btn-item {
       margin-left: 10px;
     }
+    .btn-item {
+      background-color: #fff;
+      border-color: #fff;
+      color: #639afa;
+      &:hover {
+        background-color: #d9ecff;
+        border-color: #d9ecff;
+      }
+    }
   }
 
   .component-preview {