optimize download function for suno

CHANGELOG.md

@@ -1,4 +1,6 @@
 # 更新日志
+## v4.1.4
+* 功能优化：用户文件列表组件增加分页功能支持
 
 ## v4.1.3
 * 功能优化：重构用户登录模块，给所有的登录组件增加行为验证码功能，支持用户绑定手机，邮箱和微信

web/src/assets/css/luma.styl

@@ -262,6 +262,10 @@
                 background #5f5958
                 color #e1e1e1
               }
+
+              .downloading {
+                width 16px
+              }
             }
           }
         }

web/src/assets/css/suno.styl

@@ -306,6 +306,10 @@
                 background #5f5958
                 color #e1e1e1
               }
+
+              .downloading {
+                width 16px
+              }
             }
           }
         }

web/src/utils/libs.js

@@ -9,6 +9,8 @@
  * Util lib functions
  */
 import {showConfirmDialog} from "vant";
+import {httpDownload} from "@/utils/http";
+import {showMessageError} from "@/utils/dialog";
 
 // generate a random string
 export function randString(length) {
@@ -221,8 +223,8 @@ export function showLoginDialog(router) {
 }
 
 export const replaceImg =(img) => {
-    const devHost = "172.22.11.69"
-    const localhost = "localhost"
+    const devHost = process.env.VUE_APP_API_HOST
+    const localhost = "http://localhost:5678"
     if (img.includes(localhost)) {
         return img?.replace(localhost, devHost)
     }

web/src/views/Luma.vue

@@ -106,7 +106,7 @@
                 <el-tooltip effect="light" content="下载视频" placement="top">
                   <button class="btn btn-icon" @click="download(item)" :disabled="item.downloading">
                     <i class="iconfont icon-download" v-if="!item.downloading"></i>
-                    <el-image src="/images/loading.gif" fit="cover" v-else />
+                    <el-image src="/images/loading.gif" class="downloading" fit="cover" v-else />
                   </button>
                 </el-tooltip>
                 <el-tooltip effect="light" content="删除" placement="top">

web/src/views/Suno.vue

@@ -190,11 +190,10 @@
                 </button>
 
                 <el-tooltip effect="light" content="下载歌曲" placement="top">
-                  <a :href="item.audio_url" :download="item.title+'.mp3'" target="_blank">
-                    <button class="btn btn-icon">
-                      <i class="iconfont icon-download"></i>
-                    </button>
-                  </a>
+                  <button class="btn btn-icon" @click="download(item)">
+                    <i class="iconfont icon-download" v-if="!item.downloading"></i>
+                    <el-image src="/images/loading.gif" class="downloading" fit="cover" v-else />
+                  </button>
                 </el-tooltip>
 
                 <el-tooltip effect="light" content="获取完整歌曲" placement="top" v-if="item.ref_song">
@@ -299,11 +298,11 @@ import BlackSwitch from "@/components/ui/BlackSwitch.vue";
 import BlackInput from "@/components/ui/BlackInput.vue";
 import MusicPlayer from "@/components/MusicPlayer.vue";
 import {compact} from "lodash";
-import {httpGet, httpPost} from "@/utils/http";
+import {httpDownload, httpGet, httpPost} from "@/utils/http";
 import {showMessageError, showMessageOK} from "@/utils/dialog";
 import {checkSession} from "@/store/cache";
 import {ElMessage, ElMessageBox} from "element-plus";
-import {formatTime} from "@/utils/libs";
+import {formatTime, replaceImg} from "@/utils/libs";
 import Clipboard from "clipboard";
 import BlackDialog from "@/components/ui/BlackDialog.vue";
 import Compressor from "compressorjs";
@@ -483,6 +482,30 @@ const merge = (item) => {
   })
 }
 
+// 下载歌曲
+const download = (item) => {
+  const url = replaceImg(item.audio_url)
+  const downloadURL = `${process.env.VUE_APP_API_HOST}/api/download?url=${url}`
+  // parse filename
+  const urlObj = new URL(url);
+  const fileName = urlObj.pathname.split('/').pop();
+  item.downloading = true
+  httpDownload(downloadURL).then(response  => {
+    const blob = new Blob([response.data]);
+    const link = document.createElement('a');
+    link.href = URL.createObjectURL(blob);
+    link.download = fileName;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(link.href);
+    item.downloading = false
+  }).catch(() => {
+    showMessageError("下载失败")
+    item.downloading = false
+  })
+}
+
 const uploadAudio = (file) => {
   const formData = new FormData();
   formData.append('file', file.file, file.name);