From 12053b780d0a29fa06b3c6628394b8b1c457f65e Mon Sep 17 00:00:00 2001
From: algerkong <liuliujjjjasd@foxmail.com>
Date: Mon, 8 Nov 2021 17:04:38 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E9=9F=B3=E4=B9=90=E8=A7=A3?=
 =?UTF-8?q?=E6=9E=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                  |  3 ++-
 .env.production                   |  3 ++-
 src/api/music.ts                  | 19 ++++++++++++-------
 src/layout/components/PlayBar.vue | 29 ++++++++++++++++++++++++++---
 src/utils/request_music.ts        | 19 +++++++++++++++++++
 vite.config.ts                    | 13 +++++++++----
 6 files changed, 70 insertions(+), 16 deletions(-)
 create mode 100644 src/utils/request_music.ts

diff --git a/.env.development b/.env.development
index 6ea6a53..826e067 100644
--- a/.env.development
+++ b/.env.development
@@ -1,2 +1,3 @@
 VITE_API=/api
-VITE_API_MT=/mt
\ No newline at end of file
+VITE_API_MT=/mt
+VITE_API_MUSIC = /music
\ No newline at end of file
diff --git a/.env.production b/.env.production
index f86a420..caa8e9f 100644
--- a/.env.production
+++ b/.env.production
@@ -1,2 +1,3 @@
 VITE_API=http://123.56.226.179:3000
-VITE_API_MT=http://mt.myalger.top
\ No newline at end of file
+VITE_API_MT=http://mt.myalger.top
+VITE_API_MUSIC=http://myalger.top:4000
\ No newline at end of file
diff --git a/src/api/music.ts b/src/api/music.ts
index 6cb3bfc..4de9430 100644
--- a/src/api/music.ts
+++ b/src/api/music.ts
@@ -1,12 +1,17 @@
-import { IPlayMusicUrl } from "@/type/music";
-import { ILyric } from "@/type/lyric";
-import request from "@/utils/request";
+import { IPlayMusicUrl } from "@/type/music"
+import { ILyric } from "@/type/lyric"
+import request from "@/utils/request"
+import requestMusic from "@/utils/request_music"
 // 根据音乐Id获取音乐播放URl
 export const getMusicUrl = (id: number) => {
-  return request.get<IPlayMusicUrl>("/song/url", { params: { id: id } });
-};
+  return request.get<IPlayMusicUrl>("/song/url", { params: { id: id } })
+}
 
 // 根据音乐Id获取音乐歌词
 export const getMusicLrc = (id: number) => {
-  return request.get<ILyric>("/lyric", { params: { id: id } });
-};
+  return request.get<ILyric>("/lyric", { params: { id: id } })
+}
+
+export const getParsingMusicUrl = (id: number) => {
+  return requestMusic.get<any>("/music", { params: { id: id } })
+}
diff --git a/src/layout/components/PlayBar.vue b/src/layout/components/PlayBar.vue
index 90b5192..1201fe4 100644
--- a/src/layout/components/PlayBar.vue
+++ b/src/layout/components/PlayBar.vue
@@ -69,8 +69,24 @@
             <n-slider v-model:value="volumeSlider" :step="0.01" :tooltip="false"></n-slider>
         </div>
         <div class="audio-button">
-            <i class="iconfont icon-likefill"></i>
-            <i class="iconfont icon-full" @click="setMusicFull"></i>
+            <n-tooltip trigger="hover">
+                <template #trigger>
+                    <i class="iconfont icon-likefill"></i>
+                </template>
+                喜欢
+            </n-tooltip>
+            <n-tooltip trigger="hover">
+                <template #trigger>
+                    <i class="iconfont icon-Play" @click="parsingMusic"></i>
+                </template>
+                解析播放
+            </n-tooltip>
+            <n-tooltip trigger="hover">
+                <template #trigger>
+                    <i class="iconfont icon-full" @click="setMusicFull"></i>
+                </template>
+                歌词
+            </n-tooltip>
         </div>
         <!-- 播放音乐 -->
         <audio ref="audio" :src="playMusicUrl" :autoplay="play"></audio>
@@ -84,7 +100,8 @@ import { secondToMinute } from "@/utils";
 import { computed, onMounted, ref, watch } from "vue";
 import { useStore } from 'vuex';
 import { setAnimationClass } from "@/utils";
-import { getMusicLrc } from "@/api/music"
+import { getMusicLrc, getParsingMusicUrl } from "@/api/music"
+
 
 const store = useStore();
 
@@ -217,6 +234,12 @@ const setMusicFull = () => {
     }
 }
 
+// 解析音乐
+const parsingMusic = async () => {
+    const { data } = await getParsingMusicUrl(playMusic.value.id)
+    store.state.playMusicUrl = data.data.url
+}
+
 const musicFullClass = computed(() => {
     if (musicFull.value) {
         return setAnimationClass('animate__fadeInUp')
diff --git a/src/utils/request_music.ts b/src/utils/request_music.ts
new file mode 100644
index 0000000..8ab9474
--- /dev/null
+++ b/src/utils/request_music.ts
@@ -0,0 +1,19 @@
+import axios from "axios"
+let baseURL = import.meta.env.VITE_API_MUSIC + ""
+const request = axios.create({
+  baseURL: baseURL,
+  timeout: 10000,
+})
+
+// 请求拦截器
+request.interceptors.request.use(
+  (config) => {
+    return config
+  },
+  (error) => {
+    // 当请求异常时做一些处理
+    return Promise.reject(error)
+  }
+)
+
+export default request
diff --git a/vite.config.ts b/vite.config.ts
index 7fa9fa9..8d77b8a 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,6 +1,6 @@
-import { defineConfig } from "vite";
-import vue from "@vitejs/plugin-vue";
-import path from "path";
+import { defineConfig } from "vite"
+import vue from "@vitejs/plugin-vue"
+import path from "path"
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -25,6 +25,11 @@ export default defineConfig({
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/api/, ""),
       },
+      "/music": {
+        target: "http://myalger.top:4000",
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/music/, ""),
+      },
     },
   },
-});
+})