修改

src/components/TheEmpty/index.module.less

@@ -3,4 +3,5 @@
   width: 100%;
   display: flex;
   justify-content: center;
+  align-items: center;
 }

src/components/card-preview/index.tsx

@@ -33,7 +33,6 @@ export default defineComponent({
     watch(
       () => props.item,
       () => {
-        console.log(props.item, 'itme');
         item.value = props.item;
       }
     );

src/components/card-preview/music-modal/index.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, ref, watch } from 'vue';
+import { defineComponent, ref } from 'vue';
 import styles from './index.module.less';
 
 export default defineComponent({

src/components/layout/index.tsx

@@ -51,17 +51,17 @@ export default defineComponent({
             'drag',
             ({
               target,
-              transform,
+              // transform,
               left,
               top,
               right,
-              bottom,
-              beforeDelta,
-              beforeDist,
-              delta,
-              dist,
-              clientX,
-              clientY
+              bottom
+              // beforeDelta,
+              // beforeDist,
+              // delta,
+              // dist,
+              // clientX,
+              // clientY
             }) => {
               isDragIng.value = true;
               const subdEl = document.getElementById(
@@ -113,16 +113,23 @@ export default defineComponent({
               target!.style.top = `${top}px`;
             }
           )
-          .on('dragEnd', async ({ target, isDrag, clientX, clientY }) => {
-            if (document.body.clientWidth / 2 - clientX > 0) {
-              // 往左出
-              directionType.value = 'right';
-            } else {
-              // 往又出
-              directionType.value = 'left';
+          .on(
+            'dragEnd',
+            async ({
+              // target, isDrag,
+              clientX
+              // clientY
+            }) => {
+              if (document.body.clientWidth / 2 - clientX > 0) {
+                // 往左出
+                directionType.value = 'right';
+              } else {
+                // 往又出
+                directionType.value = 'left';
+              }
+              isDragIng.value = false;
             }
-            isDragIng.value = false;
-          });
+          );
       }
     };
     onMounted(() => {

src/views/natural-resources/components/my-collect/index.module.less

@@ -1,10 +1,10 @@
 .list {
   margin-top: 12px;
-
   display: flex;
   flex-flow: row wrap;
   justify-content: flex-start;
   gap: 22px;
+  min-height: 220px;
 }
 
 .searchGroup {

src/views/natural-resources/components/my-resources /index.module.less

@@ -1,10 +1,10 @@
 .list {
   margin-top: 12px;
-
   display: flex;
   flex-flow: row wrap;
   justify-content: flex-start;
   gap: 22px;
+  min-height: 220px;
 }
 
 .searchGroup {

src/views/natural-resources/components/my-resources /upload-modal/index.tsx

@@ -27,7 +27,7 @@ import iconAudio from '@common/images/icon-audio.png';
 import iconMusic from '@common/images/icon-music.png';
 import iconUploadDelete from '../../../images/icon-upload-delete.svg';
 import { materialSave, materialUpdateAll } from '../../../api';
-import { NaturalTypeEnum, PageEnum } from '@/enums/pageEnum';
+import { NaturalTypeEnum } from '@/enums/pageEnum';
 import { scrollToErrorForm } from '/src/utils';
 
 // 判断链接后辍
@@ -126,33 +126,32 @@ export default defineComponent({
       uploadForms.list.splice(index, 1);
     };
 
-    const getImgBase64 = (url: any) => {
-      return new Promise(function (resolve) {
-        let dataURL = '';
-        const video = document.createElement('video');
-        video.currentTime = 1; //指定帧数
-        video.setAttribute('crossOrigin', 'anonymous'); //处理跨域
-        video.setAttribute('src', url);
-        video.setAttribute('width', '100');
-        video.setAttribute('height', '100');
+    // const getImgBase64 = (url: any) => {
+    //   return new Promise(function (resolve) {
+    //     let dataURL = '';
+    //     const video = document.createElement('video');
+    //     video.currentTime = 1; //指定帧数
+    //     video.setAttribute('crossOrigin', 'anonymous'); //处理跨域
+    //     video.setAttribute('src', url);
+    //     video.setAttribute('width', '100');
+    //     video.setAttribute('height', '100');
 
-        video.addEventListener('loadeddata', function () {
-          const canvas: any = document.createElement('canvas'),
-            width = video.width, //canvas的尺寸和图片一样
-            height = video.height;
-          canvas.width = width;
-          canvas.height = height;
-          canvas.getContext('2d').drawImage(video, 0, 0, width, height); //绘制canvas
-          dataURL = canvas.toDataURL('image/jpeg'); //转换为base64
-          resolve(dataURL);
-        });
-      });
-    };
+    //     video.addEventListener('loadeddata', function () {
+    //       const canvas: any = document.createElement('canvas'),
+    //         width = video.width, //canvas的尺寸和图片一样
+    //         height = video.height;
+    //       canvas.width = width;
+    //       canvas.height = height;
+    //       canvas.getContext('2d').drawImage(video, 0, 0, width, height); //绘制canvas
+    //       dataURL = canvas.toDataURL('image/jpeg'); //转换为base64
+    //       resolve(dataURL);
+    //     });
+    //   });
+    // };
 
     const isUpdate = computed(() => (props.list.length > 0 ? true : false));
 
     onMounted(async () => {
-      // console.log(props.list, 'props.list');
       const list = props.list || [];
       const temps: any[] = [];
       list.forEach((item: any) => {
@@ -171,7 +170,6 @@ export default defineComponent({
           id: item.id
         });
       });
-      console.log(temps, 'temp', list);
       uploadForms.list = temps || [];
 
       await catchStore.getSubjects();
@@ -273,6 +271,7 @@ export default defineComponent({
                       fixedBox: true
                     }}
                     onFinished={(val: any) => {
+                      console.log(val, 'val');
                       uploadForms.list.push({
                         subjectIds: uploadForms.subjectIds || [],
                         openFlag: true,

src/views/natural-resources/components/my-resources /upload-modal/upload-file.tsx

@@ -132,47 +132,21 @@ export default defineComponent({
     watch(
       () => props.fileList,
       () => {
-        // console.log('list');
         initFileList();
       }
     );
     const handleClearFile = () => {
-      console.log(uploadRef.value, 'uploadRef.value');
       uploadRef.value?.clear();
     };
     expose({
       handleClearFile
     });
 
-    const getVideoMsg = (file: any) => {
-      return new Promise(resolve => {
-        let dataURL = '';
-        const videoElement = document.createElement('video');
-        videoElement.src = URL.createObjectURL(file);
-        videoElement.addEventListener('loadedmetadata', function () {
-          const canvas: any = document.createElement('canvas'),
-            width = videoElement.videoWidth, //canvas的尺寸和图片一样
-            height = videoElement.videoHeight;
-          canvas.width = width;
-          canvas.height = height;
-          canvas.getContext('2d').drawImage(videoElement, 0, 0, width, height); //绘制canvas
-          dataURL = canvas.toDataURL('image/jpeg'); //转换为base64
-          resolve(dataURL);
-          // resolve({
-          //   duration: videoElement.duration,
-          //   height: videoElement.videoHeight,
-          //   width: videoElement.videoWidth
-          // });
-        });
-      });
-    };
-
     const CropperModal = ref();
     const onBeforeUpload = async (options: any) => {
       const file = options.file;
       // 文件大小
       let isLt2M = true;
-      console.log(file, 'file');
 
       const type = file.type.includes('image')
         ? NaturalTypeEnum.IMG
@@ -203,7 +177,6 @@ export default defineComponent({
 
           setTimeout(() => {
             CropperModal.value?.edit(target);
-            // console.log(CropperModal.value, 'cropper');
           }, 100);
         });
         return false;
@@ -248,7 +221,8 @@ export default defineComponent({
       reader.addEventListener('load', () => callback(reader.result));
       reader.readAsDataURL(img);
     };
-    const onFinish = async (options: any) => {
+
+    const onFinish = (options: any) => {
       const url = ossUploadUrl + state.key;
       const type = formatUrlType(url);
       let coverImg = '';
@@ -258,65 +232,95 @@ export default defineComponent({
         coverImg = PageEnum.SONG_DEFAULT_COVER;
       } else if (type === 'VIDEO') {
         // 获取视频封面图
-        await getVideoCoverImg();
+        // await getVideoCoverImg();
+        coverImg = 'https://gyt.ks3-cn-beijing.ksyuncs.com/1688997532875.png';
       }
+      emit('update:fileList', url);
+      emit('readFileInputEventAsArrayBuffer', tempFiileBuffer.value);
       emit('finished', {
-        cover: coverImg,
+        coverImg,
         content: url
       });
-      emit('update:fileList', url);
-      emit('readFileInputEventAsArrayBuffer', tempFiileBuffer.value);
+
       options.file.url = url;
       visiable.value = false;
       btnLoading.value = false;
     };
 
-    const getVideoCoverImg = async () => {
-      try {
-        btnLoading.value = true;
-        const imgBlob: any = await getVideoMsg(tempFiileBuffer.value);
-        const fileName = `${props.path}${Date.now() + '.png'}`;
-        const obj = {
-          filename: fileName,
-          bucketName: props.bucketName,
-          postData: {
-            filename: fileName,
-            acl: 'public-read',
-            key: fileName,
-            unknowValueField: []
-          }
-        };
-        const { data } = await policy(obj);
+    // 获取文件流
+    // const base64ImgtoFile = (dataurl: string, filename = 'file') => {
+    //   const arr: any = dataurl.split(',');
+    //   const mime = arr[0].match(/:(.*?);/)[1];
+    //   const suffix = mime.split('/')[1];
+    //   const bstr = atob(arr[1]);
+    //   let n = bstr.length;
+    //   const u8arr = new Uint8Array(n);
+    //   while (n--) {
+    //     u8arr[n] = bstr.charCodeAt(n);
+    //   }
+    //   return new File([u8arr], `${filename}.${suffix}`, {
+    //     type: mime
+    //   });
+    // };
 
-        const fileParams = {
-          policy: data.policy,
-          signature: data.signature,
-          key: fileName,
-          KSSAccessKeyId: data.KSSAccessKeyId,
-          name: fileName
-        } as any;
-        const formData = new FormData();
-        for (const key in fileParams) {
-          formData.append(key, fileParams[key]);
-        }
-        formData.append('file', imgBlob);
+    // const getVideoMsg = (file: any) => {
+    //   return new Promise(resolve => {
+    //     let dataURL = '';
+    //     const videoElement = document.createElement('video');
+    //     videoElement.currentTime = 1;
+    //     videoElement.src = URL.createObjectURL(file);
+    //     videoElement.addEventListener('loadeddata', function () {
+    //       const canvas: any = document.createElement('canvas'),
+    //         width = videoElement.videoWidth, //canvas的尺寸和图片一样
+    //         height = videoElement.videoHeight;
+    //       canvas.width = width;
+    //       canvas.height = height;
+    //       canvas.getContext('2d').drawImage(videoElement, 0, 0, width, height); //绘制canvas
+    //       dataURL = canvas.toDataURL('image/jpeg'); //转换为base64
+    //       resolve(dataURL);
+    //     });
+    //   });
+    // };
 
-        await axios.post(ossUploadUrl, formData);
+    // const getVideoCoverImg = async () => {
+    //   try {
+    //     btnLoading.value = true;
+    //     const imgBlob: any = await getVideoMsg(tempFiileBuffer.value);
+    //     const fileName = `${props.path}${Date.now() + '.png'}`;
+    //     const obj = {
+    //       filename: fileName,
+    //       bucketName: props.bucketName,
+    //       postData: {
+    //         filename: fileName,
+    //         acl: 'public-read',
+    //         key: fileName,
+    //         unknowValueField: []
+    //       }
+    //     };
+    //     const { data } = await policy(obj);
 
-        const url = ossUploadUrl + state.key;
-        console.log(url, 'url');
-        return url;
-      } catch {
-        //
-        // message.error('上传失败')
-        // btnLoading.value = false;
-        // return false;
-      } finally {
-        btnLoading.value = false;
-      }
-    };
+    //     const fileParams = {
+    //       policy: data.policy,
+    //       signature: data.signature,
+    //       key: fileName,
+    //       KSSAccessKeyId: data.kssAccessKeyId,
+    //       name: fileName
+    //     } as any;
+    //     const formData = new FormData();
+    //     for (const key in fileParams) {
+    //       formData.append(key, fileParams[key]);
+    //     }
+    //     formData.append('file', base64ImgtoFile(imgBlob));
+    //     await axios.post(ossUploadUrl, formData);
 
-    const onRemove = async (options: any) => {
+    //     const url = ossUploadUrl + fileName;
+    //     return url;
+    //   } finally {
+    //     btnLoading.value = false;
+    //   }
+    // };
+
+    const onRemove = async () => {
       emit('update:fileList', '');
       emit('remove');
       btnLoading.value = false;
@@ -356,7 +360,6 @@ export default defineComponent({
 
         await axios.post(ossUploadUrl, formData).then(() => {
           const url = ossUploadUrl + state.key;
-          console.log(url, 'url');
           const splitName = url.split('/');
           fileListRef.value = [
             {
@@ -367,6 +370,10 @@ export default defineComponent({
             }
           ];
           emit('update:fileList', url);
+          emit('finished', {
+            coverImg: url,
+            content: url
+          });
           visiable.value = false;
         });
       } catch {
@@ -389,7 +396,7 @@ export default defineComponent({
           showPreviewButton
           onBeforeUpload={(options: any) => onBeforeUpload(options)}
           onFinish={(options: any) => onFinish(options)}
-          onRemove={(options: any) => onRemove(options)}>
+          onRemove={() => onRemove()}>
           {props.showType === 'default' && (
             <div class={styles.uploadBtn}>
               <img src={iconUploadAdd} class={styles.iconUploadAdd} />

src/views/natural-resources/components/share-resources/index.module.less

@@ -1,10 +1,10 @@
 .list {
   margin-top: 12px;
-
   display: flex;
   flex-flow: row wrap;
   justify-content: flex-start;
   gap: 22px;
+  min-height: 220px;
 }
 
 .searchGroup {