feat(course): 添加外部链接组件及预览模式支持

- 新增 LinkComp 组件用于处理外部链接资源
- 在 createCourse.vue 中注册并使用 LinkComp 组件
- 实现添加外部链接功能，设置 resType 为 52
- EditorComp 和 LinkComp 支持 isPreview 禁用编辑状态
- useCourseData.js 初始化 resType 默认值改为 0

src/components/CreatedCourse/preview/EditorComp.vue

@@ -80,7 +80,10 @@ import { useMediaComponent } from "@/hooks/useMediaComponent";
 const emit = defineEmits(["update:dialogVideoForm"]);
 
 // 使用hook处理公共逻辑
-const { localDialogVideoForm, updateFormValue } = useMediaComponent(props, emit);
+const { localDialogVideoForm, updateFormValue } = useMediaComponent(
+  props,
+  emit
+);
 
 const editor = ref(null);
 
@@ -88,6 +91,7 @@ onMounted(() => {
   nextTick(() => {
     if (editor.value) {
       quill = new Quill(`.${quillClass}`, {
+        disabled: props.isPreview,
         modules: {
           toolbar: toolbarOptions,
           imageDrop: true,
@@ -136,6 +140,7 @@ watch(
     <el-form-item label="名称" v-if="!isPreview">
       <el-input
         v-model="localDialogVideoForm.name"
+        :disabled="isPreview"
         @update:model-value="(val) => updateFormValue('name', val)"
       ></el-input>
     </el-form-item>
@@ -143,4 +148,4 @@ watch(
   </el-form>
 </template>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss"></style>

src/components/CreatedCourse/preview/LinkComp.vue

@@ -0,0 +1,79 @@
+<script setup>
+import {
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElInputNumber,
+  ElRadio,
+  ElRadioGroup,
+} from "element-plus";
+
+defineOptions({
+  resType: 52,
+});
+const props = defineProps({
+  dialogVideoForm: {
+    type: Object,
+    default: () => ({
+      name: "",
+      filePath: "",
+      isDrag: true,
+      completeSetup: 0,
+      setupTage: 0,
+      openType: "",
+    }),
+  },
+  isPreview: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+import { useMediaComponent } from "@/hooks/useMediaComponent";
+// Emit updates to parent component
+const emit = defineEmits(["update:dialogVideoForm"]);
+
+// 使用hook处理公共逻辑
+const { localDialogVideoForm, updateFormValue, fileBaseUrl } =
+  useMediaComponent(props, emit);
+</script>
+
+<template>
+  <el-form label-position="right" label-width="100px">
+    <el-form-item label="名称">
+      <el-input
+        v-model="localDialogVideoForm.name"
+        :disabled="isPreview"
+        @update:modelValue="(val) => updateFormValue('name', val)"
+      ></el-input>
+    </el-form-item>
+    <el-form-item label="URL地址">
+      <el-input
+        v-model="localDialogVideoForm.url"
+        :disabled="isPreview"
+        placeholder="http://"
+        @update:modelValue="(val) => updateFormValue('url', val)"
+      ></el-input>
+    </el-form-item>
+    <el-form-item label="完成规则设置">
+      <el-radio-group
+        :model-value="localDialogVideoForm.openType"
+        :disabled="isPreview"
+        @update:modelValue="(val) => updateFormValue('openType', val)"
+      >
+        <el-radio :label="1">页面中嵌入</el-radio>
+        <el-radio :label="2">新窗口打开</el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item>
+      <div
+        v-if="Number(localDialogVideoForm.openType) === 1"
+        style="color: #ff0000"
+      >
+        注：有些页面是有防嵌入控制代码的
+      </div>
+    </el-form-item>
+  </el-form>
+</template>
+
+<style scoped lang="scss"></style>

src/hooks/useCourseData.js

@@ -27,7 +27,7 @@ export function useCourseData() {
     createTime: "",
     chooseIndex: "",
     sectionIndex: "",
-    resType: "",
+    resType: 0,
   });
   const tableColumns = [
     {

src/views/courselibrary/components/createCourse.vue

@@ -12,8 +12,9 @@ import VideoComp from "@/components/CreatedCourse/preview/VideoComp.vue";
 import AudioComp from "@/components/CreatedCourse/preview/AudioComp.vue";
 import EditorComp from "@/components/CreatedCourse/preview/EditorComp.vue";
 import DocComp from "@/components/CreatedCourse/preview/DocComp.vue";
+import LinkComp from "@/components/CreatedCourse/preview/LinkComp.vue";
 import { getType } from "@/hooks/useCreateCourseMaps";
-const mapComponents = [VideoComp, AudioComp, EditorComp, DocComp];
+const mapComponents = [VideoComp, AudioComp, EditorComp, DocComp, LinkComp];
 
 // 使用课程数据hook
 const { courseMetadata, courseList, courseActionButtons, addChapter } =
@@ -46,7 +47,9 @@ const courseOperations = {
     showSettingDialog.value = true;
   },
   addExternalLink: () => {
-    console.log("添加外部链接功能调用");
+    courseMetadata.resType = 52;
+    chooseItemData.value.resType = 52;
+    showSettingDialog.value = true;
   },
   addScorm: () => {
     console.log("添加SCORM功能调用");