增加保存 debug

src/components/LoginDialog.vue

@@ -79,38 +79,16 @@ const handleClose = () => {
 }
 </script>
 <template>
-  <el-dialog
-    v-model="isVisible"
-    lock-scroll
-    :close-on-click-modal="false"
-    :show-close="false"
-    :close-on-press-escape="false"
-    :title="title"
-    :width="isMobile ? '80%' : '400px'"
-    align-center
-    center
-    class="wm-login-dialog"
-    :class="{ 'is-mobile': isMobile }"
-  >
-    <el-form
-      ref="loginFormRef"
-      style="max-width: 400px"
-      :model="loginForm"
-      status-icon
-      :rules="rules"
-      label-width="auto"
-      class="wm-login-form"
-    >
+  <el-dialog v-model="isVisible" lock-scroll :close-on-click-modal="false" :show-close="false"
+    :close-on-press-escape="false" :title="title" :width="isMobile ? '80%' : '400px'" modal-class="wm-login-dialog-mask"
+    align-center center class="wm-login-dialog" :class="{ 'is-mobile': isMobile }">
+    <el-form ref="loginFormRef" style="max-width: 400px" :model="loginForm" status-icon :rules="rules"
+      label-width="auto" class="wm-login-form">
       <el-form-item label="用户名" prop="username">
         <el-input class="wm-input" v-model="loginForm.username" type="text" autocomplete="off" />
       </el-form-item>
       <el-form-item label="密码 " prop="password">
-        <el-input
-          class="wm-input"
-          v-model="loginForm.password"
-          type="password"
-          autocomplete="off"
-        />
+        <el-input class="wm-input" v-model="loginForm.password" type="password" autocomplete="off" />
       </el-form-item>
       <!-- <el-form-item label="验证码" prop="captcha">
         <el-input v-model.number="loginForm.captcha" />
@@ -136,15 +114,18 @@ const handleClose = () => {
   .wm-login-form {
     .register-tips {
       text-align: right;
+
       .link {
         color: #409eff;
         cursor: pointer;
+
         &:hover {
           text-decoration: underline;
         }
       }
     }
   }
+
   .login-btn {
     width: 100%;
   }
@@ -166,4 +147,8 @@ const handleClose = () => {
     padding: 10px calc(var(--el-dialog-padding-primary) + 5px) 10px;
   }
 }
+
+.wm-login-dialog-mask {
+  background: rgba(123, 122, 122, 0.95);
+}
 </style>

src/utils/exportFile.js

+import FileSaver from 'file-saver';
+export default class fileSave {
+  /**
+   * 导出Excel文件
+   * @param {*} res   文件流
+   * @param {*} name  文件名
+   */
+  static getExcel(res, name) {
+    const blob = new Blob([res], {
+      type: 'application/vnd.ms-excel'
+    });
+    FileSaver.saveAs(blob, name + '.xlsx');
+  }
+
+  /**
+   * 导出CSV文件
+   * @param {*} res   文件流
+   * @param {*} name  文件名
+   */
+  static getCsv(res, name) {
+    const blob = new Blob([res], {
+      type: 'application/vnd.ms-excel'
+    });
+    FileSaver.saveAs(blob, name + '.csv');
+  }
+
+  /**
+   * 导出图片1
+   * @param {*} url 图片地址
+   * @param {*} name  文件名
+   */
+  static getImgURLs(url, name) {
+    const last = url.substring(url.lastIndexOf('.'), url.length);
+    FileSaver.saveAs(url, `${name}${last}`);
+  }
+  /**
+   * 导出图片2
+   * @param {*} res 文件流
+   * @param {*} name  文件名
+   */
+  static downLoadImg(res, filename, type = 'image/jpeg') {
+    const blob = new Blob([res], {
+      type: type
+    });
+    FileSaver.saveAs(blob, `${filename}`);
+  }
+  /**
+   * 导出图片3
+   * @param {*} res 文件流
+   * @param {*} name  文件名
+   */
+  static downLoadImgByUrl(url, filename, type = 'image/jpeg') {
+    FileSaver.saveAs(url, `${filename}`);
+  }
+
+  /**
+   * 下载文本文件
+   */
+  static getTxtFile(url, name) {
+    FileSaver.saveAs(url, `${name}.txt`);
+  }
+
+  /**
+   * 下载文件
+   */
+  static getVideoFile(url, name) {
+    FileSaver.saveAs(url, `${name}`);
+  }
+
+  /**
+   * 下载文件
+   */
+  static getFile(url, name) {
+    FileSaver.saveAs(url, `${name}`);
+  }
+
+  /**
+   * 下载文件
+   */
+  static getFile2(res, name) {
+    const blob = new Blob([res]);
+    FileSaver.saveAs(blob, `${name}`);
+  }
+}

src/utils/exportFile.ts

@@ -63,7 +63,7 @@ export default class fileSave {
   /**
    * 下载文件
    */
-  static getVideoFile(url: string, name: string) {
+  static getVideoFile(url: Blob, name: string) {
     FileSaver.saveAs(url, `${name}`)
   }
 

src/views/home/gen_digit_human_video.vue

@@ -4,6 +4,7 @@ import userService from '@/api/service/userService'
 import LoginDialog from '@/components/LoginDialog.vue'
 import VideoCrop from '@/components/VideoCrop.vue'
 import { useAuthStore } from '@/stores/state'
+import exportFile from '@/utils/exportFile'
 import utils from '@/utils/utils'
 import {
   ElMessage,
@@ -40,7 +41,7 @@ const form = reactive({
   show_image_or_video_path: '',
   show_image_or_video_url: '',
   bgm: '',
-  final_video: '',
+  final_video: 'https://ai-wmdigit.oss-cn-shanghai.aliyuncs.com/ai-wmdigit/ice/20241021101849049/20241024100724603488_subtitle.mp4',
   sample_video_crop_area: [],
   show_image_or_video_crop_area: [],
   subtitle_type: "color",
@@ -270,6 +271,43 @@ const handleCrop = (val: any) => {
     form.sample_video_crop_area = val
   }
 }
+
+// 下载视频
+const onDownloadVideo = async () => {
+  if (!form.final_video) {
+    ElMessage.warning({
+      message: '请先生成视频'
+    })
+    return
+  }
+  const url = form.final_video
+  const arr_name = url.split('/');
+  const file_name = arr_name[arr_name.length - 1]; // 获取文件名
+  if (isMobile.value) {
+    const fileBlob = await (await fetch(url)).blob();
+    const shareData = { files: [new File([fileBlob], file_name, { type: fileBlob.type })] };
+    if (navigator.canShare(shareData)) {
+        await navigator.share(shareData);
+        ElMessage('下载成功了 (Download success)');
+    } else {
+      ElMessage.error({
+        message: '下载失败'
+      });
+    }
+    
+  } else {
+    await fetch(url)
+      .then((url) => url.blob())
+      .then((blob) => {
+        exportFile.getVideoFile(blob, file_name);
+      })
+      .catch((error) => {
+        ElMessage.error({
+          message: '下载失败：' + error.message
+        });
+      });
+  }
+}
 </script>
 
 <!-- ============================================================================================================ -->
@@ -385,6 +423,7 @@ const handleCrop = (val: any) => {
       <!-- 结果 -->
       <el-form-item label="生成">
         <el-button type="primary" @click="onGenVideo">生成视频</el-button>
+        <el-button type="success" @click="onDownloadVideo">下载视频</el-button>
       </el-form-item>
       <el-form-item v-if="form.final_video">
         <video :src="form.final_video" class="example-final-video" controls></video>