Fix suno use (#148)

change/@acedatacloud-nexior-5b35d836-e534-4236-99c2-5731103de68d.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix suno use",
+  "packageName": "@acedatacloud/nexior",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

package.json

@@ -42,11 +42,13 @@
     "@fortawesome/vue-fontawesome": "^3.0.2",
     "@icon-park/vue-next": "^1.3.6",
     "@skjnldsv/vue-plyr": "^7.5.0",
+    "@types/file-saver": "^2.0.7",
     "axios": "^1.6.0",
     "codemirror": "^6.0.1",
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.10.7",
     "element-plus": "^2.2.28",
+    "file-saver": "^2.0.5",
     "github-markdown-css": "^5.1.0",
     "highlight.js": "^11.7.0",
     "mac-scrollbar": "^0.13.5",

src/components/common/TopHeader.vue

@@ -16,6 +16,11 @@
           <el-menu-item v-if="site?.features?.qrart?.enabled" v-t="'index.title.qrart'" index="/qrart"></el-menu-item>
           <el-menu-item v-if="site?.features?.suno?.enabled" v-t="'index.title.suno'" index="/suno"></el-menu-item>
           <el-menu-item v-if="site?.features?.luma?.enabled" v-t="'index.title.luma'" index="/luma"></el-menu-item>
+          <el-menu-item
+            v-if="site?.features?.headshots?.enabled"
+            v-t="'index.title.headshots'"
+            index="/headshots"
+          ></el-menu-item>
         </el-sub-menu>
         <el-menu-item
           v-t="'common.nav.apiPlatform'"

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');
     }

src/i18n/zh-CN/index.json

@@ -19,6 +19,10 @@
     "message": "AI 视频",
     "description": "AI 视频章节标题"
   },
+  "title.headshots": {
+    "message": "AI 证件照",
+    "description": "AI 证件照章节标题"
+  },
   "title.comments": {
     "message": "客户评价",
     "description": "客户评价章节标题"

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": "用于生成音乐的模型"

yarn.lock

@@ -778,6 +778,11 @@
   resolved "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz"
   integrity sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==
 
+"@types/file-saver@^2.0.7":
+  version "2.0.7"
+  resolved "https://registry.npmmirror.com/@types/file-saver/-/file-saver-2.0.7.tgz#8dbb2f24bdc7486c54aa854eb414940bbd056f7d"
+  integrity sha512-dNKVfHd/jk0SkR/exKGj2ggkB45MAkzvWCaqLUUgkyjITkGNzH8H+yUwr+BLJUBjZOe9w8X3wgmXhZDRg1ED6A==
+
 "@types/fs-extra@^8.0.0":
   version "8.1.5"
   resolved "https://registry.yarnpkg.com/@types/fs-extra/-/fs-extra-8.1.5.tgz#33aae2962d3b3ec9219b5aca2555ee00274f5927"
@@ -2664,6 +2669,11 @@ file-entry-cache@^6.0.1:
   dependencies:
     flat-cache "^3.0.4"
 
+file-saver@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.npmmirror.com/file-saver/-/file-saver-2.0.5.tgz#d61cfe2ce059f414d899e9dd6d4107ee25670c38"
+  integrity sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA==
+
 fill-range@^7.0.1:
   version "7.0.1"
   resolved "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz"