feat(播放): 添加支持直接使用playUrl播放歌曲的功能

- 在SearchResultTable和SearchResultList组件中添加playTheSongWithPlayUrl方法 - 修改播放逻辑，优先使用playUrl进行播放 - 在Mobile.vue中添加playUrl处理逻辑 - 新增tunehub服务的getSongInfo和searchSongs接口 - 重构歌曲搜索处理逻辑，使用tunehub服务替代原有实现
2026-01-07 17:10:32 +08:00
parent 0dbb36be9d
commit 6fa4f1a72e
9 changed files with 242 additions and 51 deletions
--- a/frontend/src/Mobile.vue
+++ b/frontend/src/Mobile.vue
@@ -187,6 +187,13 @@ export default {
        }
        playOption.playUrl = playUrlRet.data.playUrl;
      }
+      if (playOption.playUrl) {
+        playOption.playUrl = getProperPlayUrl(
+          playOption.source,
+          playOption.playUrl,
+          playOption.pageUrl
+        );
+      }
      this.songInfos.push(playOption);
      this.currentSongIndex = this.songInfos.length - 1;
      this.changedTime = new Date().getTime();
--- a/frontend/src/components/SearchResultListForMobile.vue
+++ b/frontend/src/components/SearchResultListForMobile.vue
@@ -9,7 +9,7 @@
        <van-col span="23" offset="1">
          <van-row>
            <van-col span="22">
-              <van-row @click="play(null, item.url, i)">
+              <van-row @click="play(item, i)">
                <van-col style="font-size: 16px">
                  <i
                    v-if="item.resourceForbidden"
@@ -115,6 +115,10 @@ export default {
      type: Function,
      required: true,
    },
+    playTheSongWithPlayUrl: {
+      type: Function,
+      required: false,
+    },
    suggestMatchSongId: {
      type: String,
      required: false,
@@ -137,11 +141,15 @@ export default {
    const playTheSong = (songMeta, pageUrl, suggestMatchSongId) => {
      props.playTheSong(songMeta, pageUrl, suggestMatchSongId);
    };
+    const playTheSongWithPlayUrl = (playOption) => {
+      props.playTheSongWithPlayUrl && props.playTheSongWithPlayUrl(playOption);
+    };

    const showPopover = ref([]);

    return {
      playTheSong,
+      playTheSongWithPlayUrl,
      showPopover,
      ellipsis,
    };
@@ -158,6 +166,12 @@ export default {
    },
  },
  methods: {
+    getSourceUrl(item) {
+      if (!item) {
+        return "";
+      }
+      return item.pageUrl || item.url || "";
+    },
    async uploadToCloud(pageUrl) {
      const ret = await createSyncSongFromUrlJob(
        pageUrl,
@@ -180,37 +194,60 @@ export default {
        startTaskListener(ret.data.jobId);
      }
    },
-    play(songMeta, pageUrl, index) {
+    play(item, index) {
      if (this.currentSongIndex === index) {
        return;
      }
      this.currentSongIndex = index;
-      this.playTheSong(songMeta, pageUrl, this.suggestMatchSongId);
+      const pageUrl = this.getSourceUrl(item);
+      if (this.playTheSongWithPlayUrl && item && item.playUrl) {
+        this.playTheSongWithPlayUrl({
+          playUrl: item.playUrl,
+          coverUrl: item.coverUrl,
+          songName: item.songName,
+          artist: item.artist,
+          pageUrl,
+          source: item.source,
+        });
+        return;
+      }
+      this.playTheSong(null, pageUrl, this.suggestMatchSongId);
    },
    async onSelect(actionItem) {
      const currentSong = this.searchResult[actionItem.songIndex];
+      const pageUrl = this.getSourceUrl(currentSong);
      console.log(currentSong);
      switch (actionItem.action) {
        case ActionUpload:
-          this.uploadToCloud(currentSong.url);
+          this.uploadToCloud(pageUrl);
          break;
        case ActionDownloadToLocalService:
-          this.downloadToLocalService(currentSong.url);
+          this.downloadToLocalService(pageUrl);
          break;
        case ActionDownload:
-          const ret = await getSongsMeta({ url: currentSong.url });
-          const info = ret.data.songMeta;
-          console.log(ret);
-          const a = document.createElement("a");
-          a.href = info.audios[0].url;
-          a.download = `${currentSong.songName}-${currentSong.artist}.mp3`;
-          a.style.display = "none";
-          document.body.appendChild(a);
-          a.click();
-          a.remove();
+          if (currentSong.playUrl) {
+            const a = document.createElement("a");
+            a.href = currentSong.playUrl;
+            a.download = `${currentSong.songName}-${currentSong.artist}.mp3`;
+            a.style.display = "none";
+            document.body.appendChild(a);
+            a.click();
+            a.remove();
+          } else {
+            const ret = await getSongsMeta({ url: pageUrl });
+            const info = ret.data.songMeta;
+            console.log(ret);
+            const a = document.createElement("a");
+            a.href = info.audios[0].url;
+            a.download = `${currentSong.songName}-${currentSong.artist}.mp3`;
+            a.style.display = "none";
+            document.body.appendChild(a);
+            a.click();
+            a.remove();
+          }
          break;
        case ActionOpenRef:
-          window.open(currentSong.url, "_blank").focus();
+          window.open(pageUrl || currentSong.url, "_blank").focus();
          break;
      }
    },
--- a/frontend/src/components/SearchResultTable.vue
+++ b/frontend/src/components/SearchResultTable.vue
@@ -73,7 +73,7 @@

            <el-tooltip content="播放歌曲" placement="top" v-else>
              <el-button
-                @click="play(null, scope.row.url)"
+                @click="play(scope.row)"
                type="primary"
                circle
                :disabled="scope.row.url.indexOf('youtube') >= 0"
@@ -94,7 +94,7 @@
              <el-button
                type="success"
                circle
-                @click="uploadToCloud(scope.row.url)"
+                @click="uploadToCloud(scope.row)"
                :disabled="!wyAccount"
                class="operation-btn"
              >
@@ -113,7 +113,7 @@
              <el-button
                type="primary"
                circle
-                @click="downloadToLocalService(scope.row.url)"
+                @click="downloadToLocalService(scope.row)"
                :disabled="!globalConfig.downloadPathExisted"
                class="operation-btn"
              >
@@ -126,7 +126,7 @@
                type="warning"
                circle
                class="operation-btn"
-                @click="openSourceUrl(scope.row.url)"
+                @click="openSourceUrl(scope.row)"
              >
                <i class="bi bi-box-arrow-up-right"></i>
              </el-button>
@@ -229,6 +229,10 @@ export default {
      type: Function,
      required: true,
    },
+    playTheSongWithPlayUrl: {
+      type: Function,
+      required: false,
+    },
    abortTheSong: {
      type: Function,
      required: true,
@@ -250,11 +254,15 @@ export default {
    const playTheSong = (songMeta, pageUrl, suggestMatchSongId) => {
      props.playTheSong(songMeta, pageUrl, suggestMatchSongId);
    };
+    const playTheSongWithPlayUrl = (playOption) => {
+      props.playTheSongWithPlayUrl && props.playTheSongWithPlayUrl(playOption);
+    };
    const abortTheSong = () => {
      props.abortTheSong();
    };
    return {
      playTheSong,
+      playTheSongWithPlayUrl,
      abortTheSong,
    };
  },
@@ -267,7 +275,14 @@ export default {
    },
  },
  methods: {
-    async uploadToCloud(pageUrl) {
+    getSourceUrl(row) {
+      if (!row) {
+        return "";
+      }
+      return row.pageUrl || row.url || "";
+    },
+    async uploadToCloud(row) {
+      const pageUrl = this.getSourceUrl(row);
      const ret = await createSyncSongFromUrlJob(
        pageUrl,
        this.suggestMatchSongId
@@ -278,7 +293,8 @@ export default {
        startTaskListener(ret.data.jobId);
      }
    },
-    async downloadToLocalService(pageUrl) {
+    async downloadToLocalService(row) {
+      const pageUrl = this.getSourceUrl(row);
      const ret = await createDownloadSongFromUrlJob(
        pageUrl,
        this.suggestMatchSongId
@@ -295,15 +311,28 @@ export default {
        this.globalConfig = globalConfig.data;
      }
    },
-    play(songMeta, pageUrl) {
-      this.currentSongUrl = pageUrl;
-      this.playTheSong(songMeta, pageUrl, this.suggestMatchSongId);
+    play(row) {
+      const pageUrl = this.getSourceUrl(row);
+      this.currentSongUrl = row && row.url ? row.url : pageUrl;
+      if (this.playTheSongWithPlayUrl && row && row.playUrl) {
+        this.playTheSongWithPlayUrl({
+          playUrl: row.playUrl,
+          coverUrl: row.coverUrl,
+          songName: row.songName,
+          artist: row.artist,
+          pageUrl,
+          source: row.source,
+        });
+        return;
+      }
+      this.playTheSong(null, pageUrl, this.suggestMatchSongId);
    },
    abort() {
      this.currentSongUrl = -1;
      this.abortTheSong();
    },
-    openSourceUrl(url) {
+    openSourceUrl(row) {
+      const url = this.getSourceUrl(row);
      try {
        if (typeof window !== "undefined" && window?.open) {
          window.open(url, "_blank", "noopener,noreferrer");
--- a/frontend/src/views/mobile/Home.vue
+++ b/frontend/src/views/mobile/Home.vue
@@ -128,6 +128,7 @@
    <van-row style="margin-top: 10px">
      <SearchResultList
        :playTheSong="playTheSong"
+        :playTheSongWithPlayUrl="playTheSongWithPlayUrl"
        :suggestMatchSongId="suggestMatchSongId"
        :searchResult="searchResult"
      >
@@ -412,6 +413,10 @@ export default {
      type: Function,
      required: true,
    },
+    playTheSongWithPlayUrl: {
+      type: Function,
+      required: false,
+    },
  },
  mounted() {
    this.wyAccount = storage.get("wyAccount");
@@ -425,8 +430,12 @@ export default {
    const playTheSong = (songMeta, pageUrl) => {
      props.playTheSong(songMeta, pageUrl);
    };
+    const playTheSongWithPlayUrl = (playOption) => {
+      props.playTheSongWithPlayUrl && props.playTheSongWithPlayUrl(playOption);
+    };
    return {
      playTheSong,
+      playTheSongWithPlayUrl,
      ellipsis,
    };
  },
--- a/frontend/src/views/mobile/Playlist.vue
+++ b/frontend/src/views/mobile/Playlist.vue
@@ -18,6 +18,7 @@
      <van-row style="margin-top: 30px" v-if="searchResult.length > 0">
        <SearchResultList
          :playTheSong="playTheSong"
+          :playTheSongWithPlayUrl="playTheSongWithPlayUrl"
          :suggestMatchSongId="suggestMatchSongId"
          :searchResult="searchResult"
        >
--- a/frontend/src/views/pc/Home.vue
+++ b/frontend/src/views/pc/Home.vue
@@ -215,6 +215,7 @@
      <el-row v-if="searchResult.length > 0" class="search-result-container">
        <SearchResultTable
          :playTheSong="playTheSong"
+          :playTheSongWithPlayUrl="playTheSongWithPlayUrl"
          :abortTheSong="abortTheSong"
          :suggestMatchSongId="suggestMatchSongId"
          :searchResult="searchResult"
@@ -269,6 +270,10 @@ export default {
      type: Function,
      required: true,
    },
+    playTheSongWithPlayUrl: {
+      type: Function,
+      required: false,
+    },
  },
  async mounted() {
    this.wyAccount = storage.get("wyAccount");
@@ -286,12 +291,16 @@ export default {
    const playTheSong = (songMeta, pageUrl, suggestMatchSongId) => {
      props.playTheSong(songMeta, pageUrl, suggestMatchSongId);
    };
+    const playTheSongWithPlayUrl = (playOption) => {
+      props.playTheSongWithPlayUrl && props.playTheSongWithPlayUrl(playOption);
+    };
    const abortTheSong = () => {
      props.abortTheSong();
    };
    return {
      abortTheSong,
      playTheSong,
+      playTheSongWithPlayUrl,
    };
  },
  components: {
--- a/frontend/src/views/pc/Playlist.vue
+++ b/frontend/src/views/pc/Playlist.vue
@@ -28,6 +28,7 @@
          </p>
          <SearchResultTable
            :playTheSong="playTheSong"
+            :playTheSongWithPlayUrl="playTheSongWithPlayUrl"
            :abortTheSong="abortTheSong"
            :suggestMatchSongId="suggestMatchSongId"
            :searchResult="searchResult"