fix suno use

AceDataCloud · Nov 6, 2024 · 6d6c7b5 · 6d6c7b5
1 parent 35e15fb
commit 6d6c7b5
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 13 deletions.
diff --git a/src/components/suno/task/Preview.vue b/src/components/suno/task/Preview.vue
@@ -37,14 +37,6 @@
         <el-button v-if="audio?.audio_url && audio?.video_url" size="small" round @click="onExtend($event, audio)">{{
           $t('suno.button.extend')
         }}</el-button>
-        <el-tooltip effect="dark" :content="$t('suno.button.download')" placement="top">
-          <font-awesome-icon
-            v-if="audio?.audio_url"
-            icon="fa-solid fa-download"
-            class="icon icon-download"
-            @click="onDownload($event, audio?.audio_url)"
-          />
-        </el-tooltip>
         <el-tooltip effect="dark" :content="$t('suno.button.video')" placement="top">
           <font-awesome-icon
             v-if="audio?.video_url"
@@ -53,6 +45,27 @@
             @click="onPreview($event, audio?.video_url)"
           />
         </el-tooltip>
+        <el-dropdown>
+          <span class="el-dropdown-link">
+            <el-tooltip effect="dark" :content="$t('suno.button.download')" placement="top">
+              <font-awesome-icon
+                v-if="audio?.audio_url || audio?.video_url"
+                icon="fa-solid fa-download"
+                class="icon icon-download"
+              />
+            </el-tooltip>
+          </span>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item v-if="audio?.video_url" @click="onDownload($event, audio?.video_url)">
+                {{ $t('suno.button.download_video') }}
+              </el-dropdown-item>
+              <el-dropdown-item v-if="audio?.audio_url" @click="onDownload($event, audio?.audio_url)">
+                {{ $t('suno.button.download_audio') }}
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
       </div>
     </div>
   </div>
@@ -62,9 +75,10 @@
 import { defineComponent } from 'vue';
 import { useFormatDuring } from '@/utils/number';
 import { ISunoAudio, ISunoTask } from '@/models';
-import { ElImage, ElIcon, ElTooltip, ElButton } from 'element-plus';
+import { ElImage, ElIcon, ElTooltip, ElButton, ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus';
 import { VideoPlay, VideoPause } from '@element-plus/icons-vue';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { saveAs } from 'file-saver';
 
 export default defineComponent({
   name: 'TaskPreview',
@@ -75,7 +89,10 @@ export default defineComponent({
     ElButton,
     FontAwesomeIcon,
     VideoPlay,
-    VideoPause
+    VideoPause,
+    ElDropdown,
+    ElDropdownMenu,
+    ElDropdownItem
   },
   props: {
     modelValue: {
@@ -153,13 +170,26 @@ export default defineComponent({
     },
     onDownload(event: MouseEvent, audioUrl: string) {
       event.stopPropagation();
-      console.log('on download');
+      console.log('on download', audioUrl);
+      // 使用 URL 对象解析
+      const parsedUrl = new URL(audioUrl);
+
+      // 获取路径名
+      const pathname = parsedUrl.pathname;
+      // 提取文件名
+      const filename = pathname.substring(pathname.lastIndexOf('/') + 1);
+      console.log('on preview', filename);
+      fetch(audioUrl)
+        .then((response) => response.blob())
+        .then((blob) => {
+          saveAs(blob, filename);
+        });
       // download url here
-      window.open(audioUrl, '_blank');
+      // window.open(audioUrl, '_blank');
     },
     onPreview(event: MouseEvent, videoUrl: string) {
       event.stopPropagation();
-      console.log('on preview');
+      console.log('on preview', videoUrl);
       // preview url here
       window.open(videoUrl, '_blank');
     }

diff --git a/src/i18n/zh-CN/suno.json b/src/i18n/zh-CN/suno.json
@@ -11,6 +11,14 @@
     "message": "视频",
     "description": "视频按钮文本"
   },
+  "button.download_video": {
+    "message": "下载视频",
+    "description": "下载视频按钮文本"
+  },
+  "button.download_audio": {
+    "message": "下载音乐",
+    "description": "下载音乐按钮文本"
+  },
   "model.model1": {
     "message": "v2",
     "description": "用于生成音乐的模型"