Merge branch 'main' into header_development_daify

package-lock.json

@@ -11,9 +11,10 @@
         "@amap/amap-jsapi-loader": "^1.0.1",
         "@element-plus/icons-vue": "^2.3.1",
         "axios": "^1.7.7",
-        "colorthief": "^2.6.0",
+        "colorthief": "^2.4.0",
         "core-js": "^3.38.1",
         "element-plus": "^2.7.2",
+        "pinia": "^2.2.2",
         "swiper": "^11.1.14",
         "vue": "^3.5.12",
         "vue-router": "^4.4.5"
@@ -1789,9 +1790,9 @@
       }
     },
     "node_modules/@floating-ui/dom": {
-      "version": "1.6.12",
-      "resolved": "https://repo.huaweicloud.com/repository/npm/@floating-ui/dom/-/dom-1.6.12.tgz",
-      "integrity": "sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==",
+      "version": "1.6.11",
+      "resolved": "https://repo.huaweicloud.com/repository/npm/@floating-ui/dom/-/dom-1.6.11.tgz",
+      "integrity": "sha512-qkMCxSR24v2vGkhYDo/UzxfJN3D4syqSjyuTFz6C7XcpU1pASPRieNI0Kj5VP3/503mOfYiGY891ugBX1GlABQ==",
       "license": "MIT",
       "dependencies": {
         "@floating-ui/core": "^1.6.0",
@@ -2586,9 +2587,9 @@
       "license": "MIT"
     },
     "node_modules/@types/lodash": {
-      "version": "4.17.13",
-      "resolved": "https://repo.huaweicloud.com/repository/npm/@types/lodash/-/lodash-4.17.13.tgz",
-      "integrity": "sha512-lfx+dftrEZcdBPczf9d0Qv0x+j/rfNCMuC6OcfXmO8gkfeNAY88PgKUbvG56whcN23gc27yenwF6oJZXGFpYxg==",
+      "version": "4.17.10",
+      "resolved": "https://repo.huaweicloud.com/repository/npm/@types/lodash/-/lodash-4.17.10.tgz",
+      "integrity": "sha512-YpS0zzoduEhuOWjAotS6A5AVCva7X4lVlYLF0FYHAY9sdraBfnatttHItlWeZdGhuEkf+OzMNg2ZYAx8t+52uQ==",
       "license": "MIT"
     },
     "node_modules/@types/lodash-es": {
@@ -3505,32 +3506,6 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
-    "node_modules/@vueuse/core/node_modules/vue-demi": {
-      "version": "0.14.10",
-      "resolved": "https://repo.huaweicloud.com/repository/npm/vue-demi/-/vue-demi-0.14.10.tgz",
-      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
-      "hasInstallScript": true,
-      "license": "MIT",
-      "bin": {
-        "vue-demi-fix": "bin/vue-demi-fix.js",
-        "vue-demi-switch": "bin/vue-demi-switch.js"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      },
-      "peerDependencies": {
-        "@vue/composition-api": "^1.0.0-rc.1",
-        "vue": "^3.0.0-0 || ^2.6.0"
-      },
-      "peerDependenciesMeta": {
-        "@vue/composition-api": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@vueuse/metadata": {
       "version": "9.13.0",
       "resolved": "https://repo.huaweicloud.com/repository/npm/@vueuse/metadata/-/metadata-9.13.0.tgz",
@@ -3552,32 +3527,6 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
-    "node_modules/@vueuse/shared/node_modules/vue-demi": {
-      "version": "0.14.10",
-      "resolved": "https://repo.huaweicloud.com/repository/npm/vue-demi/-/vue-demi-0.14.10.tgz",
-      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
-      "hasInstallScript": true,
-      "license": "MIT",
-      "bin": {
-        "vue-demi-fix": "bin/vue-demi-fix.js",
-        "vue-demi-switch": "bin/vue-demi-switch.js"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      },
-      "peerDependencies": {
-        "@vue/composition-api": "^1.0.0-rc.1",
-        "vue": "^3.0.0-0 || ^2.6.0"
-      },
-      "peerDependenciesMeta": {
-        "@vue/composition-api": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.12.1",
       "resolved": "https://repo.huaweicloud.com/repository/npm/@webassemblyjs/ast/-/ast-1.12.1.tgz",
@@ -5887,9 +5836,9 @@
       "license": "ISC"
     },
     "node_modules/element-plus": {
-      "version": "2.9.0",
-      "resolved": "https://repo.huaweicloud.com/repository/npm/element-plus/-/element-plus-2.9.0.tgz",
-      "integrity": "sha512-ccOFXKsauo2dtokAr4OX7gZsb7TuAoVxA2zGRZo5o2yyDDBLBaZxOoFQPoxITSLcHbBfQuNDGK5Iag5hnyKkZA==",
+      "version": "2.8.6",
+      "resolved": "https://repo.huaweicloud.com/repository/npm/element-plus/-/element-plus-2.8.6.tgz",
+      "integrity": "sha512-fk5jB8V3efM02/4roZ5SWOLArgaYXbxEydZLlXSr+KPAwjNyHBlk2+HO5em8YKo5+RLBoHnn6BaThj6IE4nXoQ==",
       "license": "MIT",
       "dependencies": {
         "@ctrl/tinycolor": "^3.4.1",
@@ -5900,7 +5849,7 @@
         "@types/lodash-es": "^4.17.6",
         "@vueuse/core": "^9.1.0",
         "async-validator": "^4.2.5",
-        "dayjs": "^1.11.13",
+        "dayjs": "^1.11.3",
         "escape-html": "^1.0.3",
         "lodash": "^4.17.21",
         "lodash-es": "^4.17.21",
@@ -8968,6 +8917,27 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pinia": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/pinia/-/pinia-2.3.0.tgz",
+      "integrity": "sha512-ohZj3jla0LL0OH5PlLTDMzqKiVw2XARmC1XYLdLWIPBMdhDW/123ZWr4zVAhtJm+aoSkFa13pYXskAvAscIkhQ==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.6.3",
+        "vue-demi": "^0.14.10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.4.4",
+        "vue": "^2.7.0 || ^3.5.11"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/pkg-dir": {
       "version": "4.2.0",
       "resolved": "https://repo.huaweicloud.com/repository/npm/pkg-dir/-/pkg-dir-4.2.0.tgz",
@@ -11441,6 +11411,31 @@
         }
       }
     },
+    "node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://repo.huaweicloud.com/repository/npm/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
@@ -13335,9 +13330,9 @@
       }
     },
     "@floating-ui/dom": {
-      "version": "1.6.12",
-      "resolved": "https://repo.huaweicloud.com/repository/npm/@floating-ui/dom/-/dom-1.6.12.tgz",
-      "integrity": "sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==",
+      "version": "1.6.11",
+      "resolved": "https://repo.huaweicloud.com/repository/npm/@floating-ui/dom/-/dom-1.6.11.tgz",
+      "integrity": "sha512-qkMCxSR24v2vGkhYDo/UzxfJN3D4syqSjyuTFz6C7XcpU1pASPRieNI0Kj5VP3/503mOfYiGY891ugBX1GlABQ==",
       "requires": {
         "@floating-ui/core": "^1.6.0",
         "@floating-ui/utils": "^0.2.8"
@@ -13820,9 +13815,9 @@
       "dev": true
     },
     "@types/lodash": {
-      "version": "4.17.13",
-      "resolved": "https://repo.huaweicloud.com/repository/npm/@types/lodash/-/lodash-4.17.13.tgz",
-      "integrity": "sha512-lfx+dftrEZcdBPczf9d0Qv0x+j/rfNCMuC6OcfXmO8gkfeNAY88PgKUbvG56whcN23gc27yenwF6oJZXGFpYxg=="
+      "version": "4.17.10",
+      "resolved": "https://repo.huaweicloud.com/repository/npm/@types/lodash/-/lodash-4.17.10.tgz",
+      "integrity": "sha512-YpS0zzoduEhuOWjAotS6A5AVCva7X4lVlYLF0FYHAY9sdraBfnatttHItlWeZdGhuEkf+OzMNg2ZYAx8t+52uQ=="
     },
     "@types/lodash-es": {
       "version": "4.17.12",
@@ -14509,14 +14504,6 @@
         "@vueuse/metadata": "9.13.0",
         "@vueuse/shared": "9.13.0",
         "vue-demi": "*"
-      },
-      "dependencies": {
-        "vue-demi": {
-          "version": "0.14.10",
-          "resolved": "https://repo.huaweicloud.com/repository/npm/vue-demi/-/vue-demi-0.14.10.tgz",
-          "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
-          "requires": {}
-        }
       }
     },
     "@vueuse/metadata": {
@@ -14530,14 +14517,6 @@
       "integrity": "sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==",
       "requires": {
         "vue-demi": "*"
-      },
-      "dependencies": {
-        "vue-demi": {
-          "version": "0.14.10",
-          "resolved": "https://repo.huaweicloud.com/repository/npm/vue-demi/-/vue-demi-0.14.10.tgz",
-          "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
-          "requires": {}
-        }
       }
     },
     "@webassemblyjs/ast": {
@@ -16118,9 +16097,9 @@
       "dev": true
     },
     "element-plus": {
-      "version": "2.9.0",
-      "resolved": "https://repo.huaweicloud.com/repository/npm/element-plus/-/element-plus-2.9.0.tgz",
-      "integrity": "sha512-ccOFXKsauo2dtokAr4OX7gZsb7TuAoVxA2zGRZo5o2yyDDBLBaZxOoFQPoxITSLcHbBfQuNDGK5Iag5hnyKkZA==",
+      "version": "2.8.6",
+      "resolved": "https://repo.huaweicloud.com/repository/npm/element-plus/-/element-plus-2.8.6.tgz",
+      "integrity": "sha512-fk5jB8V3efM02/4roZ5SWOLArgaYXbxEydZLlXSr+KPAwjNyHBlk2+HO5em8YKo5+RLBoHnn6BaThj6IE4nXoQ==",
       "requires": {
         "@ctrl/tinycolor": "^3.4.1",
         "@element-plus/icons-vue": "^2.3.1",
@@ -16130,7 +16109,7 @@
         "@types/lodash-es": "^4.17.6",
         "@vueuse/core": "^9.1.0",
         "async-validator": "^4.2.5",
-        "dayjs": "^1.11.13",
+        "dayjs": "^1.11.3",
         "escape-html": "^1.0.3",
         "lodash": "^4.17.21",
         "lodash-es": "^4.17.21",
@@ -18230,6 +18209,15 @@
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
       "dev": true
     },
+    "pinia": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/pinia/-/pinia-2.3.0.tgz",
+      "integrity": "sha512-ohZj3jla0LL0OH5PlLTDMzqKiVw2XARmC1XYLdLWIPBMdhDW/123ZWr4zVAhtJm+aoSkFa13pYXskAvAscIkhQ==",
+      "requires": {
+        "@vue/devtools-api": "^6.6.3",
+        "vue-demi": "^0.14.10"
+      }
+    },
     "pkg-dir": {
       "version": "4.2.0",
       "resolved": "https://repo.huaweicloud.com/repository/npm/pkg-dir/-/pkg-dir-4.2.0.tgz",
@@ -19848,6 +19836,12 @@
         "@vue/shared": "3.5.12"
       }
     },
+    "vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "requires": {}
+    },
     "vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://repo.huaweicloud.com/repository/npm/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",

package.json

@@ -11,12 +11,13 @@
     "@amap/amap-jsapi-loader": "^1.0.1",
     "@element-plus/icons-vue": "^2.3.1",
     "axios": "^1.7.7",
-    "colorthief": "^2.6.0",
+    "colorthief": "^2.4.0",
     "core-js": "^3.38.1",
     "element-plus": "^2.7.2",
     "swiper": "^11.1.14",
     "vue": "^3.5.12",
-    "vue-router": "^4.4.5"
+    "vue-router": "^4.4.5",
+    "pinia": "^2.2.2"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",

src/App.vue

 <template>
+  <div id="opacity-bg" style="position: fixed; width: 100%; height: 100%; transition: 0.5s"></div>
+  <div id="opacity-bg1" style="position: fixed; width: 100%; height: 100%; transition: 0.5s"></div>
 	<router-view/>
 </template>
 

src/api/comment.js

 import { axios } from '../utils/request';
 import { COMMENT_MODULE } from './_prefix';
-
-
 /*
-    commenter_user_name: string
+    songId: number
     comment: string
-    song_name: string
+    userId: number
  */
 export const commentSong = (commentSongInfo) => {
     return axios.post(`${COMMENT_MODULE}/song`, commentSongInfo,
@@ -16,10 +14,9 @@ export const commentSong = (commentSongInfo) => {
 }
 
 /*
-    commenter_user_name: string
+    playlistId: number
     comment: string
-    playlist_owner_name: string
-    playlist_name: string
+    userId: number
  */
 export const commentPlaylist = (commentPlaylistInfo) => {
     return axios.post(`${COMMENT_MODULE}/playlist`, commentPlaylistInfo,
@@ -28,3 +25,16 @@ export const commentPlaylist = (commentPlaylistInfo) => {
             return res;
         });
 }
+
+/*
+    songId: number
+    page: number
+ */
+export const commentInfo = (commentInfo) => {
+    console.log(commentInfo)
+    return axios.get(`${COMMENT_MODULE}/${commentInfo.songId}`)
+        .then((res) => {
+            return res
+        })
+}
+

src/api/musicList.js

+/**
+ * @typedef {Object} GetMusicDetailData
+ * @property {Object} song
+ * @property {number} song.id
+ * @property {number} song.name
+ * @property {string} song.picUrl
+ * @property {Array<Object>} singer
+ * @property {number} singer[].id
+ * @property {string} singer[].name
+ */
+// export interface GetMusicDetailData {
+//     song: {
+//         id: number
+//         name: number
+//         picUrl: string
+//     }
+//     singer: {
+//         id: number
+//         name: string
+//     }[]
+// }
\ No newline at end of file

src/api/user.js

@@ -38,3 +38,12 @@ export const userInfo = () => {
             return res;
         });
 }
+/*
+    user_id: number
+ */
+export const getUserById = (userId) => {
+    return axios.get(`${USER_MODULE}/getUser`, {params: userId})
+        .then((res) => {
+            return res
+        })
+}

src/components/Comment.vue

-<script setup lang="ts">
+<script setup>
+import { reactive, ref, onMounted, watch, nextTick } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { toggleImg } from '../utils'
+import { commentInfo, commentSong, commentPlaylist } from "@/api/comment"
+import { getUserById } from "@/api/user"
+import { ElMessage } from "element-plus"
 
+const state = reactive({
+  comments: [],
+  commenters: [],
+  song: null,
+  total: 0,
+  pageSize: 20,
+  currentPage: 1
+})
+
+const router = useRouter()
+const route = useRoute()
+const songId = route.params.songId.toString()
+const userId = route.params.userId.toString()
+const page = ref(1)
+const imgEl = ref()
+const bg = ref('')
+const comment = ref('')
+const showComment = ref(true)
+const showDetail = ref(false)
+
+onMounted(() => {
+  watch(bg, (val) => {
+    toggleImg(val).then((img) => {
+      imgEl.value!.style.backgroundImage = `url(${img.src})`
+    })
+  })
+})
+
+const getCommentMusicFn = async (id, page) => {
+  commentInfo({
+    songId: id,
+    page: page
+  }).then(res => {
+    state.comments = res.data.result;
+    for (let i = 0; i < state.comments.length; i++) {
+      getUserById({
+        userId: state.comments[i].userId
+      }).then(res => {
+        state.commenters.push(res.data.result)
+      })
+    }
+  })
+}
+const currentChange = (page) => {
+  state.currentPage = page
+  getCommentMusicFn(parseInt(songId), page)
+}
+
+const gotoUserDetail = (userId) => {
+  router.push({
+    path: '/userDetail',
+    query: {
+      userId
+    }
+  })
+}
+
+const resetComments = () => {
+  comment.value = "";
+  ElMessage.info("已清空您的评论！");
+}
+
+const handleSubmit = () => {
+  commentSong({
+    userId: parseInt(userId),
+    songId: parseInt(songId),
+    comment: comment.value,
+  }).then(() => {
+    ElMessage.success("评价成功！")
+    location.reload()
+  })
+}
+
+const showComments = () => {
+  showComment.value = true
+  showDetail.value = false
+  const navLeft = document.querySelector('.nav-left')
+  const navRight = document.querySelector('.nav-right')
+  navLeft.classList.add('active')
+  navRight.classList.remove('active')
+}
+const showDetails = () => {
+  showComment.value = false
+  showDetail.value = true
+  const navLeft = document.querySelector('.nav-left')
+  const navRight = document.querySelector('.nav-right')
+  navLeft.classList.remove('active')
+  navRight.classList.add('active')
+}
+function adjustHeight(event) {
+  nextTick(() => {
+    event.target.style.height = 'auto'
+    event.target.style.height = event.target.scrollHeight + 26 + 'px'
+  })
+}
 </script>
 
 <template>
-  <body>
-    <h1>Comment</h1>
-  </body>
+  <div class="comment">
+    <div v-if="state.song !== null" class="comment-box">
+      <div class="info">
+        <div ref="imgEl" class="bg-img"></div>
+        <div class="song-info">
+          <div class="song-name">{{ (state.song as GetMusicDetailData).song.name }}</div>
+          <div class="singers">
+            <div class="singer-info">
+              <span v-for="(item, index) in state.song.singer"
+              >歌手:
+                {{
+                  item.name + (index < (state.song as GetMusicDetailData).singer.length - 1 ? '/' : '')
+                }}</span
+              >
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="navigation">
+        <div class="nav-left active" @click="showComments">评论{{ state.total }}</div>
+        <div class="nav-right" @click="showDetails">详情</div>
+      </div>
+      <div v-if="showComment" class="user-comment">
+        <textarea placeholder="请输入您的评论..." @input="adjustHeight"></textarea>
+        <el-button
+            class="custom-button"
+            text
+            style="color: white; font-size: 20px; position: absolute; bottom: 5px; right: 2%"
+        >
+          发布
+        </el-button>
+      </div>
+      <div v-if="showComment" class="comment-content">
+        <div class="comment-content-box">
+          <div class="title">精彩评论</div>
+          <div class="content" @wheel.stop>
+            <div v-for="i in state.comments.length" class="content-line">
+              <div
+                  @click="gotoUserDetail(state.commenters[i - 1].userId)"
+                  :style="{ backgroundImage: `url(${state.commenters[i - 1].avatarUrl})` }"
+                  class="photo"
+              ></div>
+              <div class="right-box">
+                <div class="comment-text">
+                  <div @click="gotoUserDetail(state.comments[i - 1].userId)" class="name">
+                    {{ state.commenters[i - 1].username }}:
+                  </div>
+                  <div class="text">{{ state.comments[i - 1].comment }}</div>
+                </div>
+                <div class="handle-box">
+                  <div class="time">{{ state.comments[i - 1].createTime }}</div>
+                  <div class="operation">
+                    <el-icon>
+                      <Star/>
+                    </el-icon>
+                    <span v-if="state.comments[i-1].likedCount > 0"
+                          style="font-size: 12px">{{ state.comments[i - 1].likedCount }}</span>
+                    <div class="operator-line"></div>
+                  </div>
+                </div>
+              </div>
+              <div class="line"></div>
+            </div>
+          </div>
+          <pagination
+              @current-change="currentChange"
+              :total="state.total"
+              :pageSize="state.pageSize"
+              :currentPage="state.currentPage"
+          />
+        </div>
+      </div>
+      <div v-if="showDetail" class="song-info-container">
+        <div class="song-info-row">
+          <div class="song-info-label">演唱者:</div>
+          <div class="song-info-value">林俊杰</div>
+        </div>
+        <div class="song-info-row">
+          <div class="song-info-label">作词:</div>
+          <div class="song-info-value">林可邦</div>
+        </div>
+        <div class="song-info-row">
+          <div class="song-info-label">作曲:</div>
+          <div class="song-info-value">蔡健雅</div>
+        </div>
+        <div class="song-info-row">
+          <div class="song-info-label">编曲:</div>
+          <div class="song-info-value">林俊杰 JJ Lin</div>
+        </div>
+        <div class="song-info-row">
+          <div class="song-info-label">歌曲语种:</div>
+          <div class="song-info-value">国语</div>
+        </div>
+        <div class="song-info-row">
+          <div class="song-info-label">歌曲流派:</div>
+          <div class="song-info-value">Pop</div>
+        </div>
+        <div class="song-info-row">
+          <div class="song-info-label">原唱:</div>
+          <div class="song-info-value">达尔文 - 蔡健雅</div>
+        </div>
+        <div class="song-info-row">
+          <div class="song-info-label">唱片公司:</div>
+          <div class="song-info-value">就是俊杰音乐股份有限公司</div>
+        </div>
+        <div class="song-info-row">
+          <div class="song-info-label">简介:</div>
+          <div class="song-info-value">
+            《达尔文》是林俊杰的一首经典之作，以进化论之父Charles
+            Darwin为名，寓意生命的进化与演变。这首歌不仅旋律悠扬，更在歌词中蕴含了深刻的哲理，引人深思。当林俊杰的歌声响起，仿佛带领我们穿越时空，见证生命从简单到复杂的蜕变过程。每一个音符都如同自然的密码，诠释着生命的奥秘。用心聆听，你会发现，这首歌不仅仅是一首歌，更是一部关于生命进化的壮丽史诗。
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
-<style scoped>
+<style scoped lang="less">
+:deep(.el-tab-pane),
+:deep(.el-tabs__content),
+:deep(.el-tabs) {
+  height: 100%;
+}
+
+.comment {
+  height: 100%;
+  width: 100%;
+  //position: fixed;
+  //transform: translateY(100%);
+  //background-color: @bgColor;
+  .comment-box {
+    padding: 0 0 0 35px;
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    flex-flow: column;
+    height: 100%;
+
+    .info {
+      display: flex;
+      margin-bottom: 30px;
+
+      .song-info {
+        display: flex;
+        flex-direction: column;
+        font-size: 13px;
+
+        .song-name {
+          font-size: 30px;
+          margin-bottom: 20px;
+          //margin-top: 10px;
+        }
+
+        .singers {
+          display: flex;
+          align-items: center;
+
+          .singer-info {
+            display: flex;
+            align-items: center;
+            margin-right: 20px;
+          }
+        }
+      }
+
+      .bg-img {
+        transition: 1s background;
+        width: 130px;
+        height: 130px;
+        border-radius: 10px;
+        .bgSetting();
+        margin-right: 20px;
+      }
+    }
+
+    .navigation {
+      display: flex;
+      justify-content: flex-start;
+      padding: 10px 0;
+      margin-bottom: 30px;
+      //background-color: rgba(0, 0, 0, 0.1);
+      .nav-left {
+        cursor: pointer;
+        padding: 10px 10px;
+        font-size: 16px;
+        color: #fff;
+        margin-right: 30px;
+      }
+
+      .nav-left:hover {
+        color: #ddc323;
+        cursor: pointer;
+      }
+
+      .nav-left.active {
+        color: #ddc323;
+        font-weight: bold;
+        transition: color 0.2s ease;
+      }
+
+      .nav-right {
+        cursor: pointer;
+        padding: 10px 10px;
+        font-size: 16px;
+        color: #fff;
+        margin-left: 30px;
+      }
+
+      .nav-right:hover {
+        color: #ddc323;
+        cursor: pointer;
+      }
+
+      .nav-right.active {
+        color: #ddc323;
+        font-weight: bold;
+        transition: color 0.2s ease;
+      }
+    }
+
+    .user-comment {
+      margin-bottom: 20px;
+      position: relative;
+
+      textarea {
+        width: 100%;
+        height: 80px;
+        padding: 10px;
+        font-size: 15px;
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        background-color: rgba(0, 0, 0, 0.3);
+        color: #fff;
+        resize: none;
+      }
+
+      .custom-button:focus,
+      .custom-button.active,
+      .custom-button:hover {
+        background-color: inherit !important; /* 保持背景色 */
+        border-color: inherit !important; /* 保持边框色 */
+        color: #ddc323 !important;
+        box-shadow: none !important;
+        transition: color 0.2s ease;
+      }
+    }
+    .comment-content {
+      :deep(.el-tabs__item) {
+        margin-right: 30px;
+      }
+
+      .comment-content-box {
+        height: 100%;
+        margin-bottom: 150px;
+
+        .title {
+          font-size: 18px;
+          margin-bottom: 5px;
+        }
+
+        .content {
+          padding-right: 35px;
+
+          .content-line {
+            display: flex;
+            align-items: center;
+            position: relative;
+            padding-bottom: 25px;
+            width: 100%;
+            padding-top: 25px;
+
+            .line {
+              position: absolute;
+              bottom: 0;
+              left: 0;
+              height: 1px;
+              width: 100%;
+              background-color: rgba(255, 255, 255, 0.08);
+            }
+
+            .photo {
+              cursor: pointer;
+              width: 40px;
+              height: 40px;
+              min-width: 40px;
+              min-height: 40px;
+              border-radius: 50%;
+              background-color: #42b983;
+              margin-right: 20px;
+              .bgSetting();
+            }
+
+            .right-box {
+              display: flex;
+              flex-direction: column;
+              align-content: space-around;
+              width: 100%;
+
+              .comment-text {
+                display: flex;
+                font-size: 13px;
+                margin-bottom: 6px;
+
+                .name {
+                  color: #0086b3;
+                  cursor: pointer;
+                  margin-right: 5px;
+                }
+
+                .text {
+                }
+              }
+
+              .handle-box {
+                display: flex;
+                justify-content: space-between;
+
+                .time {
+                  font-size: 13px;
+                }
+
+                .operation {
+                  position: relative;
+                  top: 4px;
+                  display: flex;
+                  align-items: center;
+
+                  .operator-line {
+                    width: 1.5px;
+                    height: 15px;
+                    background-color: rgba(255, 255, 255, 0.05);
+                    margin: 0 10px;
+                  }
+
+                  .el-icon {
+                    cursor: pointer;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .song-info-container {
+      :deep(.el-tabs__item) {
+        margin-right: 30px;
+      }
+
+      margin-bottom: 150px;
+      width: 100%;
+      padding: 20px;
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    }
+
+    .song-info-row {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 20px;
+    }
+
+    .song-info-label {
+      font-weight: bold;
+      width: 20%;
+    }
 
+    .song-info-value {
+      width: 80%;
+    }
+  }
+}
 </style>
\ No newline at end of file

src/components/PlayListDrawer.vue

+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file

src/main.js

@@ -3,8 +3,9 @@ import {router} from './router'
 import App from './App.vue'
 import axios from 'axios'
 import ElementPlus from 'element-plus'
+import pinia from './store/store'
 
 axios.defaults.baseURL = ("http://localhost:8081")
 axios.defaults.timeout = 30000;
 
-createApp(App).use(ElementPlus).use(router).mount('#app')
\ No newline at end of file
+createApp(App).use(ElementPlus).use(router).use(pinia).mount('#app')
\ No newline at end of file

src/store/store.js

+import { createPinia } from 'pinia'
+
+const pinia = createPinia()
+
+export default pinia 
\ No newline at end of file

src/store/theme.js

+import { defineStore } from 'pinia'
+import ColorThief from 'colorthief'
+import { toggleImg } from '../utils'
+
+export const useTheme = defineStore('themeId', {
+    state() {
+        return {
+            bgColor: '',
+            pointer: 1
+        }
+    },
+    actions: {
+        change(src) {
+            const app = document.querySelector('#opacity-bg1')
+            const opacityBg = document.querySelector('#opacity-bg')
+            if (src) {
+                toggleImg(src).then((img) => {
+                    const colorThief = new ColorThief()
+                    let rgb = colorThief.getColor(img)
+                    rgb = [rgb[0] / 2, rgb[1] * 0.6, rgb[2] * 0.7]
+
+                    const isRepeat = rgb.every((rgb, index) => {
+                        return rgb === this.bgColor[index]
+                    })
+                    if (isRepeat) {
+                        return
+                    }
+                    this.bgColor = rgb
+                    if (this.pointer === 0) {
+                        app.style.backgroundImage = `linear-gradient(rgb(${rgb}) , rgb(19, 19, 26) 50%)`
+                        app.style.opacity = '1'
+                        opacityBg.style.opacity = '0'
+                        this.pointer = 1
+                    } else {
+                        opacityBg.style.backgroundImage = `linear-gradient(rgb(${rgb}) , rgb(19, 19, 26) 50%)`
+                        opacityBg.style.opacity = '1'
+                        app.style.opacity = '0'
+                        this.pointer = 0
+                    }
+                })
+            } else {
+                this.bgColor = ''
+                if (this.pointer === 0) {
+                    app.style.backgroundImage = ``
+                    app.style.opacity = '1'
+                    opacityBg.style.opacity = '0'
+                    this.pointer = 1
+                } else {
+                    opacityBg.style.backgroundImage = ``
+                    opacityBg.style.opacity = '1'
+                    app.style.opacity = '0'
+                    this.pointer = 0
+                }
+            }
+        }
+    }
+}) 
\ No newline at end of file

src/utils/index.js

+/**
+ * 切换图片过渡 (防止图片闪烁)
+ * @param {string} src - 图片源地址
+ * @param {string} [size] - 可选的图片尺寸参数
+ * @returns {Promise<HTMLImageElement>}
+ */
+export function toggleImg(src, size) {
+    if (!src) {
+        return Promise.reject(`toggleImg：传递的src为空: ${src}`)
+    }
+    const img = new Image()
+    img.src = size ? src + `?param=${size}` : src
+    img.crossOrigin = 'Anonymous'
+    img.width = document.body.clientWidth
+    img.height = document.body.clientHeight
+
+    return new Promise((resolve) => {
+        img.onload = () => {
+            resolve(img)
+        }
+        img.onerror = () => {
+            console.error(`Failed to load image: ${src}`)
+        }
+    })
+} 
\ No newline at end of file