🐞 fix: 修复路由重定向

src/assets/icons/Logo.svg

@@ -0,0 +1 @@
+<svg class="prefix__icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M511.764 131.708A446.146 446.146 0 10957.91 577.854a446.146 446.146 0 00-446.146-446.146zm0 519.76a71.83 71.83 0 1171.83-70.937 72.276 72.276 0 01-71.83 70.937z" fill="#F55E55"/><path d="M802.205.541l-168.197 37.03a67.814 67.814 0 00-53.091 66.03v120.013l3.569 349.779h114.213V223.614h108.86a26.323 26.323 0 0026.769-26.322V26.864A26.769 26.769 0 00802.205.54z" fill="#F9BBB8"/><path d="M511.764 386.457A186.935 186.935 0 10698.7 572.947a186.935 186.935 0 00-186.935-186.49zm0 264.565a71.383 71.383 0 1171.383-71.383 71.383 71.383 0 01-71.383 71.383z" fill="#F9BBB8"/></svg>

src/components/Player/MainPlayer.vue

@@ -488,6 +488,7 @@ const instantLyrics = computed(() => {
       width: 38px;
       height: 38px;
       border-radius: 50%;
+      will-change: transform;
       transition:
         background-color 0.3s,
         transform 0.3s;

src/components/Player/PlayerControl.vue

@@ -187,6 +187,7 @@ const sliderDragend = () => {
         width: 38px;
         height: 38px;
         border-radius: 50%;
+        will-change: transform;
         transition:
           backdrop-filter 0.3s,
           background-color 0.3s,

src/router/routes.ts

@@ -291,6 +291,11 @@ const routes: Array<RouteRecordRaw> = [
     name: "desktop-lyrics",
     component: () => import("@/views/DesktopLyrics/index.vue"),
   },
+  // 404
+  {
+    path: "/:pathMatch(.*)*",
+    redirect: "/404",
+  },
 ];
 
 export default routes;

src/utils/player.ts

@@ -752,13 +752,13 @@ class Player {
       } else if (statusStore.playIndex >= playListLength) {
         statusStore.playIndex = 0;
       }
+      // 立即清理定时器，防止旧定时器继续更新UI
+      this.cleanupAllTimers();
       // 重置播放进度（切换歌曲时必须重置）
       statusStore.currentTime = 0;
       statusStore.progress = 0;
       // 暂停当前播放
       await this.pause(false);
-      // 清理定时器，防止旧定时器继续运行
-      this.cleanupAllTimers();
       // 初始化播放器（不传入seek参数，确保从头开始播放）
       await this.initPlayer(play, 0);
     } catch (error) {

src/views/DesktopLyrics/index.vue

@@ -1,12 +1,23 @@
 <template>
-  <div ref="desktopLyricsRef" class="desktop-lyrics">
+  <n-config-provider :theme="null">
-    {{ lyricData.playName }}
+    <div ref="desktopLyricsRef" class="desktop-lyrics">
-    {{ lyricConfig }}
+      {{ lyricData.playName }}
-  </div>
+      {{ lyricConfig }}
+      456456
+      <n-flex class="menu" align="center" justify="space-between">
+        <n-flex class="name">
+          <div class="menu-btn">
+            <SvgIcon name="Logo" />
+          </div>
+        </n-flex>
+      </n-flex>
+    </div>
+  </n-config-provider>
 </template>
 
 <script setup lang="ts">
 import type { LyricType } from "@/types/main";
+import { Position } from "@vueuse/core";
 
 // 桌面歌词数据
 const lyricData = reactive<{
@@ -33,11 +44,40 @@ const lyricConfig = reactive<{
   fontSize: 24,
   lineHeight: 48,
 });
+
+// 桌面歌词元素
+const desktopLyricsRef = useTemplateRef<HTMLElement>("desktopLyricsRef");
+
+// 桌面歌词拖动
+const lyricDragMove = (position: Position) => {
+  console.log(position);
+};
+
+// 监听桌面歌词拖动
+useDraggable(desktopLyricsRef, {
+  onMove: lyricDragMove,
+});
 </script>
 
 <style scoped lang="scss">
 .desktop-lyrics {
   color: #fff;
   background-color: transparent;
+  padding: 12px;
+  border-radius: 12px;
+  overflow: hidden;
+  transition: background-color 0.3s;
+  cursor: move;
+  &:hover {
+    &:not(.lock) {
+      background-color: rgba(0, 0, 0, 0.3);
+    }
+  }
 }
 </style>
+
+<!-- <style>
+body {
+  background-image: url("https://picsum.photos/1920/1080");
+}
+</style> -->