refactor(小程序课程页面): 重构图片和视频上传组件

使用JImageUpload和JUpload组件替换原有的a-upload实现
移除不必要的文件上传前处理逻辑和状态管理
简化图片和视频上传处理函数

jeecgboot-vue3/src/views/applet/course-page/AppletCoursePageList.vue

@@ -27,9 +27,9 @@
         <div class="page-list">
           <div v-for="(page, index) in pageList" :key="page.id"
             :class="['page-item', { active: currentPageId === page.id }]" @click="selectPage(page)">
-            <div class="page-thumbnail">
+            <!-- <div class="page-thumbnail">
               <Icon :icon="getPageTypeIcon(page.type)" class="page-icon" />
-            </div>
+            </div> -->
             <div class="page-info">
               <div class="page-title">{{ page.title || `${index + 1}` }}</div>
               <div class="page-meta">
@@ -114,17 +114,15 @@
                           <Icon icon="ant-design:delete-outlined" />
                         </a-button>
                       </div>
-                      <a-upload v-model:file-list="component.fileList" name="file" list-type="picture-card"
-                        class="image-uploader" :show-upload-list="false" :before-upload="beforeUpload"
-                        @change="handleImageChange($event, component)">
-                        <div v-if="component.imageUrl" class="uploaded-image">
-                          <img :src="component.imageUrl" alt="uploaded" />
-                        </div>
-                        <div v-else class="upload-placeholder">
-                          <Icon icon="ant-design:plus-outlined" />
-                          <div>上传图片</div>
-                        </div>
-                      </a-upload>
+                      <JImageUpload 
+                        v-model:value="component.imageUrl" 
+                        :fileMax="1"
+                        listType="picture-card"
+                        text="上传图片"
+                        bizPath="course"
+                        :accept="['image/*']"
+                        @change="handleImageChange($event, component)"
+                      />
                       <a-input v-model:value="component.alt" placeholder="图片描述（可选）" style="margin-top: 8px;" />
                     </div>
 
@@ -137,15 +135,13 @@
                           <Icon icon="ant-design:delete-outlined" />
                         </a-button>
                       </div>
-                      <a-input v-model:value="component.url" placeholder="请输入视频URL或上传视频文件" />
-                      <a-upload v-model:file-list="component.fileList" name="file" :show-upload-list="false"
-                        :before-upload="beforeUpload" @change="handleVideoChange($event, component)"
-                        style="margin-top: 8px;">
-                        <a-button>
-                          <Icon icon="ant-design:upload-outlined" />
-                          上传视频
-                        </a-button>
-                      </a-upload>
+                      <JUpload 
+                        v-model:value="component.url" 
+                        bizPath="course"
+                        text="上传视频"
+                        @change="handleVideoChange($event, component)"
+                        style="margin-top: 8px;"
+                      />
                     </div>
                   </div>
 
@@ -250,6 +246,7 @@ import { ref, reactive, computed, unref, onMounted, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useMessage } from '/@/hooks/web/useMessage';
 import { Icon } from '/@/components/Icon';
+import { JImageUpload, JUpload } from '/@/components/Form';
 import { saveOrUpdate, getById, list, deleteOne, add, edit } from './AppletCoursePage.api';
 import { initDictOptions } from '/@/utils/dict/JDictSelectUtil';
 
@@ -596,8 +593,7 @@ function addImageContent() {
   contentComponents.value.push({
     type: 'image',
     imageUrl: '',
-    alt: '',
-    fileList: []
+    alt: ''
   });
 }
 
@@ -607,8 +603,7 @@ function addImageContent() {
 function addVideoContent() {
   contentComponents.value.push({
     type: 'video',
-    url: '',
-    fileList: []
+    url: ''
   });
 }
 
@@ -619,49 +614,19 @@ function removeComponent(index: number) {
   contentComponents.value.splice(index, 1);
 }
 
-/**
- * 文件上传前处理
- */
-function beforeUpload(file: any) {
-  const isImage = file.type.indexOf('image/') === 0;
-  const isVideo = file.type.indexOf('video/') === 0;
-
-  if (!isImage && !isVideo) {
-    createMessage.error('只能上传图片或视频文件!');
-    return false;
-  }
-
-  const isLt10M = file.size / 1024 / 1024 < 10;
-  if (!isLt10M) {
-    createMessage.error('文件大小不能超过 10MB!');
-    return false;
-  }
-
-  return true;
-}
-
 /**
  * 图片上传变化处理
  */
-function handleImageChange(info: any, component: any) {
-  if (info.file.status === 'done') {
-    // 这里应该从服务器响应中获取图片URL
-    component.imageUrl = info.file.response?.url || URL.createObjectURL(info.file.originFileObj);
-  } else if (info.file.status === 'error') {
-    createMessage.error('图片上传失败');
-  }
+function handleImageChange(value: string, component: any) {
+  // JImageUpload组件直接返回图片URL字符串
+  component.imageUrl = value;
 }
 
 /**
  * 视频上传变化处理
  */
-function handleVideoChange(info: any, component: any) {
-  if (info.file.status === 'done') {
-    // 这里应该从服务器响应中获取视频URL
-    component.url = info.file.response?.url || URL.createObjectURL(info.file.originFileObj);
-  } else if (info.file.status === 'error') {
-    createMessage.error('视频上传失败');
-  }
+function handleVideoChange(value: string, component: any) {
+  component.url = value;
 }
 
 /**