From 6ac50b1fe96d39aee82888bc502eae1a1e8e86a1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E6=98=B1=E8=BE=BE?= <chen.yuda@ebiz-digits.com>
Date: Mon, 24 Nov 2025 18:01:59 +0800
Subject: [PATCH] =?UTF-8?q?feat(course):=20=E6=B7=BB=E5=8A=A0=E5=A4=96?=
 =?UTF-8?q?=E9=83=A8=E9=93=BE=E6=8E=A5=E7=BB=84=E4=BB=B6=E5=8F=8A=E9=A2=84?=
 =?UTF-8?q?=E8=A7=88=E6=A8=A1=E5=BC=8F=E6=94=AF=E6=8C=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 LinkComp 组件用于处理外部链接资源
- 在 createCourse.vue 中注册并使用 LinkComp 组件
- 实现添加外部链接功能，设置 resType 为 52
- EditorComp 和 LinkComp 支持 isPreview 禁用编辑状态
- useCourseData.js 初始化 resType 默认值改为 0
---
 .../CreatedCourse/preview/EditorComp.vue      |  9 ++-
 .../CreatedCourse/preview/LinkComp.vue        | 79 +++++++++++++++++++
 src/hooks/useCourseData.js                    |  2 +-
 .../courselibrary/components/createCourse.vue |  7 +-
 4 files changed, 92 insertions(+), 5 deletions(-)
 create mode 100644 src/components/CreatedCourse/preview/LinkComp.vue

diff --git a/src/components/CreatedCourse/preview/EditorComp.vue b/src/components/CreatedCourse/preview/EditorComp.vue
index 3f12b9e4..cb7cde15 100644
--- a/src/components/CreatedCourse/preview/EditorComp.vue
+++ b/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>
\ No newline at end of file
+<style scoped lang="scss"></style>
diff --git a/src/components/CreatedCourse/preview/LinkComp.vue b/src/components/CreatedCourse/preview/LinkComp.vue
new file mode 100644
index 00000000..967d6165
--- /dev/null
+++ b/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>
diff --git a/src/hooks/useCourseData.js b/src/hooks/useCourseData.js
index ddbffa25..53241c55 100644
--- a/src/hooks/useCourseData.js
+++ b/src/hooks/useCourseData.js
@@ -27,7 +27,7 @@ export function useCourseData() {
     createTime: "",
     chooseIndex: "",
     sectionIndex: "",
-    resType: "",
+    resType: 0,
   });
   const tableColumns = [
     {
diff --git a/src/views/courselibrary/components/createCourse.vue b/src/views/courselibrary/components/createCourse.vue
index 634e30f9..7983c4ed 100644
--- a/src/views/courselibrary/components/createCourse.vue
+++ b/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功能调用");