From f87f105e7ceecd4cdbeac55dd0294f4541ac7154 Mon Sep 17 00:00:00 2001
From: NanoRocky <3525987739@qq.com>
Date: Tue, 14 Jan 2025 03:12:44 +0800
Subject: [PATCH] =?UTF-8?q?=E9=80=90=E5=AD=97=E6=A0=B7=E5=BC=8F=20BUG=20?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json              |   4 +-
 pnpm-lock.yaml            | 115 ++++++-----
 src/components/Footer.vue |  88 ++++----
 src/components/Player.vue | 414 +++++++++++++++++++-------------------
 4 files changed, 305 insertions(+), 316 deletions(-)

diff --git a/package.json b/package.json
index 6624d19..47d2381 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,7 @@
     "@vicons/tabler": "^0.12.0",
     "@vicons/utils": "^0.1.4",
     "@vitejs/plugin-vue": "^5.2.1",
-    "eslint": "^9.17.0",
+    "eslint": "^9.18.0",
     "eslint-plugin-vue": "^9.32.0",
     "prettier": "^3.4.2",
     "sass": "^1.83.1",
@@ -57,4 +57,4 @@
       "workbox-build": "^7.3.0"
     }
   }
-}
+}
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2d5feee..e32b1ce 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -82,11 +82,11 @@ importers:
         specifier: ^5.2.1
         version: 5.2.1(vite@6.0.7(jiti@2.4.1)(sass@1.83.1)(terser@5.37.0))(vue@3.5.13(typescript@5.6.3))
       eslint:
-        specifier: ^9.17.0
-        version: 9.17.0(jiti@2.4.1)
+        specifier: ^9.18.0
+        version: 9.18.0(jiti@2.4.1)
       eslint-plugin-vue:
         specifier: ^9.32.0
-        version: 9.32.0(eslint@9.17.0(jiti@2.4.1))
+        version: 9.32.0(eslint@9.18.0(jiti@2.4.1))
       prettier:
         specifier: ^3.4.2
         version: 3.4.2
@@ -453,8 +453,8 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-nullish-coalescing-operator@7.26.5':
-    resolution: {integrity: sha512-OHqczNm4NTQlW1ghrVY43FPoiRzbmzNVbcgVnMKZN/RQYezHUSdjACjaX50CD3B7UIAjv39+MlsrVDb3v741FA==}
+  '@babel/plugin-transform-nullish-coalescing-operator@7.26.6':
+    resolution: {integrity: sha512-CKW8Vu+uUZneQCPtXmSBUC6NCAUdya26hWCElAWh5mVSlSRsmiCPUUDKb3Z0szng1hiAJa098Hkhg9o4SE35Qw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -600,8 +600,8 @@ packages:
     resolution: {integrity: sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/standalone@7.26.5':
-    resolution: {integrity: sha512-vXbSrFq1WauHvOg/XWcjkF6r7wDSHbN3+3Aro6LYjfODpGw8dCyqqbUMRX5LXlgzVAUrTSN6JkepFiHhLKHV5Q==}
+  '@babel/standalone@7.26.6':
+    resolution: {integrity: sha512-h1mkoNFYCqDkS+vTLGzsQYvp1v1qbuugk4lOtb/oyjArZ+EtreAaxcSYg3rSIzWZRQOjx4iqGe7A8NRYIMSTTw==}
     engines: {node: '>=6.9.0'}
 
   '@babel/template@7.25.9':
@@ -796,16 +796,12 @@ packages:
     resolution: {integrity: sha512-gFHJ+xBOo4G3WRlR1e/3G8A6/KZAH6zcE/hkLRCZTi/B9avAG365QhFA8uOGzTMqgTghpn7/fSnscW++dpMSAw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@eslint/core@0.9.1':
-    resolution: {integrity: sha512-GuUdqkyyzQI5RMIWkHhvTWLCyLo1jNK3vzkSyaExH5kHPDHcuL2VOpHjmMY+y3+NC69qAKToBqldTBgYeLSr9Q==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
   '@eslint/eslintrc@3.2.0':
     resolution: {integrity: sha512-grOjVNN8P3hjJn/eIETF1wwd12DdnwFDoyceUJLYYdkpbwq3nLi+4fqrTAONx7XDALqlL220wC/RHSC/QTI/0w==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@eslint/js@9.17.0':
-    resolution: {integrity: sha512-Sxc4hqcs1kTu0iID3kcZDW3JHq2a77HO9P8CP6YEA/FpH3Ll8UXE2r/86Rz9YJLKme39S9vU5OWNjC6Xl0Cr3w==}
+  '@eslint/js@9.18.0':
+    resolution: {integrity: sha512-fK6L7rxcq6/z+AaQMtiFTkvbHkBLNlwyRxHpKawP0x3u9+NC6MQTnFW+AdpwC6gfHTW0051cokQgtTN2FqlxQA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@eslint/object-schema@2.1.5':
@@ -1418,8 +1414,8 @@ packages:
   confbox@0.1.8:
     resolution: {integrity: sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==}
 
-  consola@3.3.3:
-    resolution: {integrity: sha512-Qil5KwghMzlqd51UXM0b6fyaGHtOC22scxrwrz4A2882LyUMwQjnvaedN1HAeXzphspQ6CpHkzMAWxBTUruDLg==}
+  consola@3.4.0:
+    resolution: {integrity: sha512-EiPU8G6dQG0GFHNR8ljnZFki/8a+cQwEQ+7wpxdChl02Q8HXlwEZWD5lqAF8vC2sEC3Tehr8hy7vErz88LHyUA==}
     engines: {node: ^14.18.0 || >=16.10.0}
 
   convert-source-map@2.0.0:
@@ -1595,8 +1591,8 @@ packages:
     resolution: {integrity: sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  eslint@9.17.0:
-    resolution: {integrity: sha512-evtlNcpJg+cZLcnVKwsai8fExnqjGPicK7gnUtlNuzu+Fv9bI0aLpND5T44VLQtoMEnI57LoXO9XAkIXwohKrA==}
+  eslint@9.18.0:
+    resolution: {integrity: sha512-+waTfRWQlSbpt3KWE+CjrPPYnbq9kfZIYUqapc0uBXyjTp8aYXZDsUH16m39Ryq3NjAVP4tjuF7KaukeqoCoaA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     hasBin: true
     peerDependencies:
@@ -2176,8 +2172,8 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
-  mlly@1.7.3:
-    resolution: {integrity: sha512-xUsx5n/mN0uQf4V548PKQ+YShA4/IW0KI1dZhrNrPCLG+xizETbHTkOa1f8/xut9JRPp8kQuMnz0oqwkTiLo/A==}
+  mlly@1.7.4:
+    resolution: {integrity: sha512-qmdSIPC4bDJXgZTCR7XosJiNKySV7O215tsPtDN9iEO/7q/76b/ijtgRu/+epFXSJhijtTCCGp3DWS549P3xKw==}
 
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
@@ -2283,6 +2279,9 @@ packages:
   pathe@1.1.2:
     resolution: {integrity: sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==}
 
+  pathe@2.0.1:
+    resolution: {integrity: sha512-6jpjMpOth5S9ITVu5clZ7NOgHNsv5vRQdheL9ztp2vZmM6fRbLvyua1tiBIL4lk8SAe3ARzeXEly6siXCjDHDw==}
+
   perfect-debounce@1.0.0:
     resolution: {integrity: sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==}
 
@@ -2366,9 +2365,9 @@ packages:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
     engines: {node: '>=8.10.0'}
 
-  readdirp@4.0.2:
-    resolution: {integrity: sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA==}
-    engines: {node: '>= 14.16.0'}
+  readdirp@4.1.1:
+    resolution: {integrity: sha512-h80JrZu/MHUZCyHu5ciuoI0+WxsCxzxJTILn6Fs8rxSnFPh+UVHYfeIxK1nVGugMqkfC4vJcBOYbkfkwYK0+gw==}
+    engines: {node: '>= 14.18.0'}
 
   reflect.getprototypeof@1.0.10:
     resolution: {integrity: sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==}
@@ -3346,7 +3345,7 @@ snapshots:
       '@babel/core': 7.26.0
       '@babel/helper-plugin-utils': 7.26.5
 
-  '@babel/plugin-transform-nullish-coalescing-operator@7.26.5(@babel/core@7.26.0)':
+  '@babel/plugin-transform-nullish-coalescing-operator@7.26.6(@babel/core@7.26.0)':
     dependencies:
       '@babel/core': 7.26.0
       '@babel/helper-plugin-utils': 7.26.5
@@ -3523,7 +3522,7 @@ snapshots:
       '@babel/plugin-transform-modules-umd': 7.25.9(@babel/core@7.26.0)
       '@babel/plugin-transform-named-capturing-groups-regex': 7.25.9(@babel/core@7.26.0)
       '@babel/plugin-transform-new-target': 7.25.9(@babel/core@7.26.0)
-      '@babel/plugin-transform-nullish-coalescing-operator': 7.26.5(@babel/core@7.26.0)
+      '@babel/plugin-transform-nullish-coalescing-operator': 7.26.6(@babel/core@7.26.0)
       '@babel/plugin-transform-numeric-separator': 7.25.9(@babel/core@7.26.0)
       '@babel/plugin-transform-object-rest-spread': 7.25.9(@babel/core@7.26.0)
       '@babel/plugin-transform-object-super': 7.25.9(@babel/core@7.26.0)
@@ -3565,7 +3564,7 @@ snapshots:
     dependencies:
       regenerator-runtime: 0.14.1
 
-  '@babel/standalone@7.26.5':
+  '@babel/standalone@7.26.6':
     optional: true
 
   '@babel/template@7.25.9':
@@ -3674,9 +3673,9 @@ snapshots:
   '@esbuild/win32-x64@0.24.2':
     optional: true
 
-  '@eslint-community/eslint-utils@4.4.1(eslint@9.17.0(jiti@2.4.1))':
+  '@eslint-community/eslint-utils@4.4.1(eslint@9.18.0(jiti@2.4.1))':
     dependencies:
-      eslint: 9.17.0(jiti@2.4.1)
+      eslint: 9.18.0(jiti@2.4.1)
       eslint-visitor-keys: 3.4.3
 
   '@eslint-community/regexpp@4.12.1': {}
@@ -3693,10 +3692,6 @@ snapshots:
     dependencies:
       '@types/json-schema': 7.0.15
 
-  '@eslint/core@0.9.1':
-    dependencies:
-      '@types/json-schema': 7.0.15
-
   '@eslint/eslintrc@3.2.0':
     dependencies:
       ajv: 6.12.6
@@ -3711,7 +3706,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@eslint/js@9.17.0': {}
+  '@eslint/js@9.18.0': {}
 
   '@eslint/object-schema@2.1.5': {}
 
@@ -3786,7 +3781,7 @@ snapshots:
     dependencies:
       '@nuxt/schema': 3.14.1592(rollup@2.79.2)
       c12: 2.0.1
-      consola: 3.3.3
+      consola: 3.4.0
       defu: 6.1.4
       destr: 2.0.3
       globby: 14.0.2
@@ -3795,7 +3790,7 @@ snapshots:
       jiti: 2.4.1
       klona: 2.0.6
       knitwork: 1.2.0
-      mlly: 1.7.3
+      mlly: 1.7.4
       pathe: 1.1.2
       pkg-types: 1.3.0
       scule: 1.3.0
@@ -3814,7 +3809,7 @@ snapshots:
     dependencies:
       c12: 2.0.1
       compatx: 0.1.8
-      consola: 3.3.3
+      consola: 3.4.0
       defu: 6.1.4
       hookable: 5.5.3
       pathe: 1.1.2
@@ -4294,7 +4289,7 @@ snapshots:
       dotenv: 16.4.7
       giget: 1.2.3
       jiti: 2.4.1
-      mlly: 1.7.3
+      mlly: 1.7.4
       ohash: 1.1.4
       pathe: 1.1.2
       perfect-debounce: 1.0.0
@@ -4342,14 +4337,14 @@ snapshots:
 
   chokidar@4.0.3:
     dependencies:
-      readdirp: 4.0.2
+      readdirp: 4.1.1
 
   chownr@2.0.0:
     optional: true
 
   citty@0.1.6:
     dependencies:
-      consola: 3.3.3
+      consola: 3.4.0
     optional: true
 
   color-convert@2.0.1:
@@ -4373,7 +4368,7 @@ snapshots:
 
   confbox@0.1.8: {}
 
-  consola@3.3.3:
+  consola@3.4.0:
     optional: true
 
   convert-source-map@2.0.0: {}
@@ -4602,16 +4597,16 @@ snapshots:
 
   escape-string-regexp@5.0.0: {}
 
-  eslint-plugin-vue@9.32.0(eslint@9.17.0(jiti@2.4.1)):
+  eslint-plugin-vue@9.32.0(eslint@9.18.0(jiti@2.4.1)):
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.1(eslint@9.17.0(jiti@2.4.1))
-      eslint: 9.17.0(jiti@2.4.1)
+      '@eslint-community/eslint-utils': 4.4.1(eslint@9.18.0(jiti@2.4.1))
+      eslint: 9.18.0(jiti@2.4.1)
       globals: 13.24.0
       natural-compare: 1.4.0
       nth-check: 2.1.1
       postcss-selector-parser: 6.1.2
       semver: 7.6.3
-      vue-eslint-parser: 9.4.3(eslint@9.17.0(jiti@2.4.1))
+      vue-eslint-parser: 9.4.3(eslint@9.18.0(jiti@2.4.1))
       xml-name-validator: 4.0.0
     transitivePeerDependencies:
       - supports-color
@@ -4630,14 +4625,14 @@ snapshots:
 
   eslint-visitor-keys@4.2.0: {}
 
-  eslint@9.17.0(jiti@2.4.1):
+  eslint@9.18.0(jiti@2.4.1):
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.1(eslint@9.17.0(jiti@2.4.1))
+      '@eslint-community/eslint-utils': 4.4.1(eslint@9.18.0(jiti@2.4.1))
       '@eslint-community/regexpp': 4.12.1
       '@eslint/config-array': 0.19.1
-      '@eslint/core': 0.9.1
+      '@eslint/core': 0.10.0
       '@eslint/eslintrc': 3.2.0
-      '@eslint/js': 9.17.0
+      '@eslint/js': 9.18.0
       '@eslint/plugin-kit': 0.2.5
       '@humanfs/node': 0.16.6
       '@humanwhocodes/module-importer': 1.0.1
@@ -4842,7 +4837,7 @@ snapshots:
   giget@1.2.3:
     dependencies:
       citty: 0.1.6
-      consola: 3.3.3
+      consola: 3.4.0
       defu: 6.1.4
       node-fetch-native: 1.6.4
       nypm: 0.3.12
@@ -5132,7 +5127,7 @@ snapshots:
 
   local-pkg@0.5.1:
     dependencies:
-      mlly: 1.7.3
+      mlly: 1.7.4
       pkg-types: 1.3.0
 
   locate-path@6.0.0:
@@ -5225,10 +5220,10 @@ snapshots:
   mkdirp@1.0.4:
     optional: true
 
-  mlly@1.7.3:
+  mlly@1.7.4:
     dependencies:
       acorn: 8.14.0
-      pathe: 1.1.2
+      pathe: 2.0.1
       pkg-types: 1.3.0
       ufo: 1.5.4
 
@@ -5262,7 +5257,7 @@ snapshots:
   nypm@0.3.12:
     dependencies:
       citty: 0.1.6
-      consola: 3.3.3
+      consola: 3.4.0
       execa: 8.0.1
       pathe: 1.1.2
       pkg-types: 1.3.0
@@ -5336,6 +5331,8 @@ snapshots:
 
   pathe@1.1.2: {}
 
+  pathe@2.0.1: {}
+
   perfect-debounce@1.0.0:
     optional: true
 
@@ -5363,7 +5360,7 @@ snapshots:
   pkg-types@1.3.0:
     dependencies:
       confbox: 0.1.8
-      mlly: 1.7.3
+      mlly: 1.7.4
       pathe: 1.1.2
 
   possible-typed-array-names@1.0.0: {}
@@ -5409,7 +5406,7 @@ snapshots:
     dependencies:
       picomatch: 2.3.1
 
-  readdirp@4.0.2: {}
+  readdirp@4.1.1: {}
 
   reflect.getprototypeof@1.0.10:
     dependencies:
@@ -5820,7 +5817,7 @@ snapshots:
       fast-glob: 3.3.3
       local-pkg: 0.5.1
       magic-string: 0.30.17
-      mlly: 1.7.3
+      mlly: 1.7.4
       pathe: 1.1.2
       picomatch: 4.0.2
       pkg-types: 1.3.0
@@ -5861,7 +5858,7 @@ snapshots:
       local-pkg: 0.5.1
       magic-string: 0.30.17
       minimatch: 9.0.5
-      mlly: 1.7.3
+      mlly: 1.7.4
       unplugin: 1.16.1
       vue: 3.5.13(typescript@5.6.3)
     optionalDependencies:
@@ -5884,7 +5881,7 @@ snapshots:
   untyped@1.5.2:
     dependencies:
       '@babel/core': 7.26.0
-      '@babel/standalone': 7.26.5
+      '@babel/standalone': 7.26.6
       '@babel/types': 7.26.5
       citty: 0.1.6
       defu: 6.1.4
@@ -5943,10 +5940,10 @@ snapshots:
     dependencies:
       vue: 3.5.13(typescript@5.6.3)
 
-  vue-eslint-parser@9.4.3(eslint@9.17.0(jiti@2.4.1)):
+  vue-eslint-parser@9.4.3(eslint@9.18.0(jiti@2.4.1)):
     dependencies:
       debug: 4.4.0
-      eslint: 9.17.0(jiti@2.4.1)
+      eslint: 9.18.0(jiti@2.4.1)
       eslint-scope: 7.2.2
       eslint-visitor-keys: 3.4.3
       espree: 9.6.1
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index 6945cd7..9e29196 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -51,27 +51,21 @@
               <paw />
             </Icon> -->
             <span class="yrc-box">
-            <span class="yrc-2 lrc-text text-hidden" id="yrc-2-wrap">
-              <span v-for="i in store.playerLrc" :key="`lrc-over-char-${i[2]}-${i[3]}`" v-html="i[4]">
+              <span class="yrc-2 lrc-text text-hidden" id="yrc-2-wrap">
+                <span v-for="i in store.playerLrc" :key="`lrc-over-char-${i[2]}-${i[3]}`" v-html="i[4]">
+                </span>
               </span>
-            </span>
-            <span class="yrc-1 lrc-text text-hidden" id="yrc-1-wrap">
-              <span v-for="i in store.playerLrc" :key="`lrc-char-${i[2]}-${i[3]}`" :class="[
-                'yrc-char',
-                i[0] && Number(i[6]) > 0 ? 'fade-in' : 'fade-in-start',
-                i[0] && Number(i[5]) > 1019 && Number(i[6]) > 0 ? 'long-tone' : 'fade-in-start',
-                i[0] && Number(i[6]) <= 0 ? 'fade-out' : '',
-                i[1] ? 'yrc-style-s2' : 'yrc-style-s1'
-              ]" :id="`lrc-char-${i[2]}-${i[3]}`" v-html="i[4]">
+              <span class="yrc-1 lrc-text text-hidden" id="yrc-1-wrap">
+                <span v-for="i in store.playerLrc" :key="`lrc-char-${i[2]}-${i[3]}`" :class="[
+                  'yrc-char',
+                  i[0] && Number(i[6]) > 0 ? 'fade-in' : 'fade-in-start',
+                  i[0] && Number(i[5]) > 1019 && Number(i[6]) > 0 ? 'long-tone' : 'fade-in-start',
+                  i[0] && Number(i[6]) <= 0 ? 'fade-out' : '',
+                  i[1] ? 'yrc-style-s2' : 'yrc-style-s1'
+                ]" :id="`lrc-char-${i[2]}-${i[3]}`" v-html="i[4]">
+                </span>
               </span>
             </span>
-            <!-- <span class="yrc-2 lrc-text text-hidden" id="yrc-2-wrap">
-              <span v-for="i in store.playerLrc" :key="`lrc-over-char-${i[2]}-${i[3]}`" v-html="i[4]" />
-              </span>
-            <span class="yrc-1 lrc-text text-hidden" id="yrc-1-wrap">
-                <span v-for="i in store.playerLrc" :key="`lrc-char-${i[2]}-${i[3]}`" v-html="i[4]" />
-              </span> -->
-            </span>
             <!-- <Icon size="20" style="transform: rotate(18deg);" class="paws-2">
               <paw />
             </Icon> -->
@@ -102,18 +96,17 @@
 
 <script setup>
 import { MusicOne } from "@icon-park/vue-next";
-// import { Icon } from "@vicons/utils";
-// import { Paw } from "@vicons/ionicons5";
+import { Icon } from "@vicons/utils";
+import { Paw } from "@vicons/ionicons5";
 import { mainStore } from "@/store";
 import config from "@/../package.json";
 import { ref, watch, computed, onMounted, nextTick, onUpdated } from "vue";
 
 const store = mainStore();
-
 const fullYear = new Date().getFullYear();
-// const lrcContainer = ref(null);
-// const scrollPosition = ref(0);
-// const currentLine = ref(0);
+const lrcContainer = ref(null);
+const scrollPosition = ref(0);
+const currentLine = ref(0);
 const showProgressIcon = ref(false);
 
 const handleMouseEnter = () => {
@@ -200,17 +193,15 @@ const progressBarWidth = computed(() => {
 });
 
 // yrc part
-watch(() => store.getPlayerLrc, (_new,_old) => {
-  const isLineByLine = !store.yrcEnable || store.yrcTemp.length == 0 || store.yrcLoading
+watch(() => store.getPlayerLrc, (_new, _old) => {
+  const isLineByLine = !store.yrcEnable || store.yrcTemp.length == 0 || store.yrcLoading;
   if (!store.playerYrcShowPro || isLineByLine) {
-    return
+    return;
   };
-
-  // const now = player.value.audioStatus.playedTime * 1000;
-  const audio = document.querySelector('audio')
+  const audio = document.querySelector('audio');
   if (audio == undefined) {
-    return
-  }
+    return;
+  };
   const now = audio.currentTime * 1000;
   const yrc2 = document.getElementsByClassName("yrc-box")[0];
   if (yrc2 == undefined) {
@@ -221,16 +212,12 @@ watch(() => store.getPlayerLrc, (_new,_old) => {
   if (inputDom.length == 0 || outputDom.length == 0) {
     return;
   };
-  // console.log(store.yrcTemp[0][0])
-  const yrcFiltered = store.yrcTemp.filter((i) => i[0] < now &&  now < i[0] + i[1]);
+  const yrcFiltered = store.yrcTemp.filter((i) => i[0] < now && now < i[0] + i[1]);
   if (yrcFiltered.length == 0) {
-    // console.log('h')
     return;
   };
-  const nowLine = yrcFiltered[yrcFiltered.length - 1][2]
-  // console.log(nowLine)
+  const nowLine = yrcFiltered[yrcFiltered.length - 1][2];
   for (let i = 0; i < nowLine.length; i++) {
-    // console.log(JSON.stringify(nowLine[i]))
     const [[start, duration], _a, _b, _c] = nowLine[i];
     const inputItem = inputDom[i];
     if (!inputItem || inputItem.hasAttribute('data-start')) {
@@ -249,7 +236,7 @@ watch(() => store.getPlayerLrc, (_new,_old) => {
       fill: "forwards",
       easing: "linear",
     };
-    outputItem.style.transform = "translateY(-1px)"
+    outputItem.style.transform = "translateY(-1px)";
     const outputAnimate = outputItem.animate(
       [
         { width: 0 },
@@ -257,16 +244,24 @@ watch(() => store.getPlayerLrc, (_new,_old) => {
       ],
       animateOptions,
     );
-    // animationTmp.push(outputAnimate);
     outputAnimate.onfinish = () => {
       outputItem.style.transform = "translateY(1px)";
-      // animationTmp = animationTmp.filter(a => a !== outputAnimate);
+      outputItem.animate(
+        [
+          { transform: "translateY(-1px)" },
+          { transform: "translateY(1px)" },
+        ],
+        {
+          duration: 300,
+          fill: "forwards",
+          easing: "linear",
+        }
+      );
     };
-    inputItem.setAttribute("data-start",true)
+    inputItem.setAttribute("data-start", true);
   };
-})
+});
 
-// setInterval(yrcPro, 50);
 </script>
 
 <style lang="scss" scoped>
@@ -403,6 +398,11 @@ watch(() => store.getPlayerLrc, (_new,_old) => {
   white-space: nowrap;
   overflow: hidden;
   width: 0;
+  transition:
+    opacity 0.3s linear,
+    color 0.5s linear,
+    transform 0.3s linear,
+    width 0.3s linear;
 }
 
 #yrc-2-wrap {
diff --git a/src/components/Player.vue b/src/components/Player.vue
index 27036c8..6b47b6c 100644
--- a/src/components/Player.vue
+++ b/src/components/Player.vue
@@ -1,24 +1,8 @@
 <template>
-  <APlayer
-    v-if="playList[0]"
-    ref="player"
-    :audio="playList"
-    :autoplay="store.playerAutoplay"
-    :theme="theme"
-    :autoSwitch="false"
-    :loop="store.playerLoop"
-    :order="store.playerOrder"
-    :volume="volume"
-    :showLrc="true"
-    :listFolded="listFolded"
-    :listMaxHeight="listMaxHeight"
-    :noticeSwitch="false"
-    @play="onPlay"
-    @pause="onPause"
-    @timeupdate="onTimeUp"
-    @error="loadMusicError"
-    @loadstart="onLoadStart"
-  />
+  <APlayer v-if="playList[0]" ref="player" :audio="playList" :autoplay="store.playerAutoplay" :theme="theme"
+    :autoSwitch="false" :loop="store.playerLoop" :order="store.playerOrder" :volume="volume" :showLrc="true"
+    :listFolded="listFolded" :listMaxHeight="listMaxHeight" :noticeSwitch="false" @play="onPlay" @pause="onPause"
+    @Loadstart="onLoadStart" @timeupdate="onTimeUp" @error="loadMusicError" />
 </template>
 
 <script setup>
@@ -112,7 +96,7 @@ onMounted(() => {
           navigator.mediaSession.setActionHandler("previoustrack", () => {
             changeSong(0); // 0 表示上一首
           });
-        }
+        };
         console.log("音乐加载完成");
       });
     } catch (err) {
@@ -132,81 +116,10 @@ onMounted(() => {
         const vstyle = import.meta.env.VITE_TTS_Style;
         SpeechLocal("播放器加载失败.mp3");
       }
-    }
+    };
   });
 });
 
-const fetchYrc = async (yrcUrl) => {
-  const yrcSource = await fetch(yrcUrl);
-  const yrcText = await yrcSource.text();
-  store.yrcIndex = playIndex.value;
-  if (yrcText.startsWith("[ch:0]")) {
-    store.yrcEnable = true;
-    store.yrcTemp = decodeYrc(yrcText);
-    store.yrcLoading = false;
-    return;
-  } else if (!store.playerYrcATDB) {
-    store.yrcEnable = false;
-    store.yrcTemp = [];
-    store.yrcLoading = false;
-    return;
-  }
-  // 接入 AMLL TTML Database
-  const songUrlInf = new URLSearchParams(new URL(yrcUrl).search);
-  const songId = songUrlInf.get("id");
-  const songServer = songUrlInf.get("server");
-  if (!songId) {
-    return;
-  }
-  const songUrlInfUrl = store.playerYrcATDBF
-    ? {
-        netease: `https://ghp.ci/https://raw.githubusercontent.com/Steve-xmh/amll-ttml-db/main/ncm-lyrics/${songId}.yrc`,
-        tencent: `https://ghp.ci/https://raw.githubusercontent.com/Steve-xmh/amll-ttml-db/main/qq-lyrics/${songId}.qrc`,
-      }
-    : {
-        netease: `https://raw.githubusercontent.com/Steve-xmh/amll-ttml-db/main/ncm-lyrics/${songId}.yrc`,
-        tencent: `https://raw.githubusercontent.com/Steve-xmh/amll-ttml-db/main/qq-lyrics/${songId}.qrc`,
-      };
-  if (!["netease", "tencent"].includes(songServer)) {
-    return;
-  }
-  try {
-    const amllUrl = songUrlInfUrl[songServer].replace("${songIdlrc}", songId);
-    const amllSource = await fetch(amllUrl);
-    const amllText = await amllSource.text();
-  } catch (e) {
-    console.log(e);
-    store.yrcEnable = true;
-    store.yrcTemp = decodeYrc(amllText);
-    store.yrcLoading = false;
-  }
-};
-
-function onLoadStart() {
-  try {
-    const aplayer = player.value.aplayer;
-    const lyrics = aplayer.lyrics[playIndex.value];
-    if (store.playerYrcShow != true) {
-      store.yrcEnable = false;
-      store.yrcTemp = [];
-      store.yrcLoading = false;
-      return;
-    }
-    if (store.yrcIndex == playIndex.value) {
-      return;
-    }
-    const yrcUrl = aplayer.audio[aplayer.index]["lrc"] + "&yrc=true";
-    store.yrcIndex = playIndex.value;
-    store.yrcLoading = true;
-    fetchYrc(yrcUrl);
-  } catch (error) {
-    store.yrcEnable = false;
-    store.yrcTemp = [];
-    store.yrcLoading = false;
-    console.error(error);
-  }
-}
-
 // 播放
 const onPlay = () => {
   console.log("播放");
@@ -237,7 +150,7 @@ const onPlay = () => {
         },
       ],
     });
-  }
+  };
 
   if (store.webSpeech) {
     if (store.playerSpeechName) {
@@ -246,15 +159,15 @@ const onPlay = () => {
       const vstyle = import.meta.env.VITE_TTS_Style;
       Speech(
         "正在播放，“" +
-          store.getPlayerData.artist +
-          "”的歌曲，《" +
-          store.getPlayerData.name +
-          "》。",
+        store.getPlayerData.artist +
+        "”的歌曲，《" +
+        store.getPlayerData.name +
+        "》。",
         voice,
         vstyle,
       );
-    }
-  }
+    };
+  };
 };
 
 // 暂停
@@ -262,102 +175,6 @@ const onPause = () => {
   store.setPlayerState(player.value.audioRef.paused);
 };
 
-function doLrcSync(lrc) {
-  const playerLyricIndex = player.value.aplayer.lyricIndex;
-  const output = [[true, 1, playerLyricIndex, 0, lrc]];
-  if (store.playerLrc.toString() != output.toString()) {
-    store.setPlayerLrc(output);
-    return;
-  }
-}
-
-function syncLrc() {
-  // 逐行模块
-  const aplayer = player.value.aplayer;
-  // console.log(playIndex.value)
-  const lyrics = aplayer.lyrics[playIndex.value];
-  const playerLyricIndex = player.value.aplayer.lyricIndex;
-  if (lyrics === undefined || lyrics[playerLyricIndex] === undefined) {
-    return doLrcSync("歌词加载中...");
-  }
-  let lrc = lyrics[playerLyricIndex][1];
-  if (lrc === "Loading") {
-    return doLrcSync("歌词加载中...");
-  } else if (lrc === "Not available" && !store.playerYrcATDB) {
-    return doLrcSync("歌词加载失败");
-  } else if (lrc === "Not availible") {
-    // 哈哈哈又是你（）
-    const songUrlInfw = new URLSearchParams(new URL(yrcUrl).search);
-    const songIdlrc = songUrlInfw.get("id");
-    const songServerlrc = songUrlInfw.get("server");
-    if (!songIdlrc) {
-      return doLrcSync("歌词加载失败");
-    }
-    const songUrlInfwurl = store.playerYrcATDBF
-      ? {
-          netease: `https://ghp.ci/https://raw.githubusercontent.com/Steve-xmh/amll-ttml-db/main/ncm-lyrics/${songId}.lrc`,
-          tencent: `https://ghp.ci/https://raw.githubusercontent.com/Steve-xmh/amll-ttml-db/main/qq-lyrics/${songId}.lrc`,
-        }
-      : {
-          netease: `https://raw.githubusercontent.com/Steve-xmh/amll-ttml-db/main/ncm-lyrics/${songId}.lrc`,
-          tencent: `https://raw.githubusercontent.com/Steve-xmh/amll-ttml-db/main/qq-lyrics/${songId}.lrc`,
-        };
-    if (!["netease", "tencent"].includes(songServerlrc)) {
-      return doLrcSync("歌词加载失败");
-    }
-    const amllUrllrc = songUrlInfwurl[songServerlrc].replace("${songIdlrc}", songIdlrc);
-    fetch(amllUrllrc)
-      .then((response) => response.text())
-      .catch(() => {
-        doLrcSync("歌词加载失败");
-      });
-    return doLrcSync("歌词加载中...");
-  }
-  doLrcSync(lrc);
-}
-
-function syncYrc() {
-  const now = player.value.audioStatus.playedTime * 1000;
-  const yrcFiltered = store.yrcTemp.filter((i) => i[0] < now);
-  const yrcLyric =
-    yrcFiltered.length > 0
-      ? yrcFiltered.slice(-1)[0][2].map((it) => {
-          const [[start, duration], word, line, row] = it;
-          const isCurrent = now >= start && now <= start + duration;
-          const isSungLyrics = start + duration < now;
-          const lessdur = start + duration - now;
-          return [isCurrent, isSungLyrics, line, row, word, duration, lessdur, "auto"];
-        })
-      : [[true, 1, 0, 0, `${store.playerTitle} - ${store.playerArtist}`]];
-  if (store.playerLrc.toString() != yrcLyric.toString()) {
-    store.setPlayerLrc(yrcLyric);
-  }
-}
-
-// 音频时间更新事件
-const onTimeUp = () => {
-  store.playerCurrentTime = player.value.audioStatus.playedTime;
-  store.playerDuration = player.value.audioStatus.duration;
-  // 至于为什么所有源的逐字都叫 YRC 呢...因为逐字功能本来是打算写网易云音乐独占的，但好像有些偏心了（bushi）...看了一下 qrc 和 yrc 没什么大区别，就顺带捏一起了。但是就懒得改变量名了！
-  showYrcRunning = 1;
-  try {
-    // 至于为什么要 try 呢？问得好！因为网易云接口时不时会返回一些令人费解的东西，比如没有时间轴、时间轴为负数（[20720,-4200]）、时间轴乱码，这些东西会造成模块直接卡死，除非刷新页面。暂时没有那么多纠错逻辑，为了防止模块死掉，就先加个 try 在这里复活自己。咕咕咕！
-    if (player.value == null) {
-      return;
-    }
-    const aplayer = player.value.aplayer;
-    // const isLineByLine = false;
-    const isLineByLine = !store.yrcEnable || store.yrcTemp.length == 0 || store.yrcLoading
-    if (isLineByLine) {
-      return syncLrc();
-    } else {
-      return syncYrc();
-    }
-  } catch (error) {
-    console.error(error);
-  }
-};
-
 // 切换播放暂停事件
 const playToggle = () => {
   player.value.toggle();
@@ -391,7 +208,7 @@ const loadMusicError = () => {
       const voice = import.meta.env.VITE_TTS_Voice;
       const vstyle = import.meta.env.VITE_TTS_Style;
       SpeechLocal("歌曲加载失败.mp3");
-    }
+    };
   } else {
     notice = "播放歌曲出现错误";
     if (store.webSpeech) {
@@ -399,8 +216,8 @@ const loadMusicError = () => {
       const voice = import.meta.env.VITE_TTS_Voice;
       const vstyle = import.meta.env.VITE_TTS_Style;
       SpeechLocal("播放器未知异常.mp3");
-    }
-  }
+    };
+  };
   ElMessage({
     message: notice,
     grouping: true,
@@ -415,6 +232,185 @@ const loadMusicError = () => {
   );
 };
 
+// 音频时间更新事件
+const fetchYrc = async (yrcUrl) => {
+  // 逐字接入模块
+  const yrcSource = await fetch(yrcUrl);
+  const yrcText = await yrcSource.text();
+  store.yrcIndex = playIndex.value;
+  if (yrcText.startsWith("[ch:0]")) {
+    store.yrcEnable = true;
+    store.yrcTemp = decodeYrc(yrcText);
+    store.yrcLoading = false;
+    return;
+  } else if (!store.playerYrcATDB) {
+    store.yrcEnable = false;
+    store.yrcTemp = [];
+    store.yrcLoading = false;
+    return;
+  };
+  // 接入 AMLL TTML Database
+  const songUrlInf = new URLSearchParams(new URL(yrcUrl).search);
+  const songId = songUrlInf.get("id");
+  const songServer = songUrlInf.get("server");
+  if (!songId) {
+    return;
+  };
+  const songUrlInfUrl = store.playerYrcATDBF
+    ? {
+      netease: `https://ghp.ci/https://raw.githubusercontent.com/Steve-xmh/amll-ttml-db/main/ncm-lyrics/${songId}.yrc`,
+      tencent: `https://ghp.ci/https://raw.githubusercontent.com/Steve-xmh/amll-ttml-db/main/qq-lyrics/${songId}.qrc`,
+    }
+    : {
+      netease: `https://raw.githubusercontent.com/Steve-xmh/amll-ttml-db/main/ncm-lyrics/${songId}.yrc`,
+      tencent: `https://raw.githubusercontent.com/Steve-xmh/amll-ttml-db/main/qq-lyrics/${songId}.qrc`,
+    };
+  if (!["netease", "tencent"].includes(songServer)) {
+    return;
+  };
+  try {
+    const amllUrl = songUrlInfUrl[songServer].replace("${songIdlrc}", songId);
+    const amllSource = await fetch(amllUrl);
+    const amllText = await amllSource.text();
+  } catch (e) {
+    console.log(e);
+    store.yrcEnable = true;
+    store.yrcTemp = decodeYrc(amllText);
+    store.yrcLoading = false;
+  };
+};
+
+function onLoadStart() {
+  // 逐字获取模块
+  try {
+    if (player.value == null || player.value.aplayer == null) {
+      return;
+    };
+    const aplayer = player.value.aplayer;
+    const lyrics = aplayer.lyrics[playIndex.value];
+    if (store.playerYrcShow != true) {
+      store.yrcEnable = false;
+      store.yrcTemp = [];
+      store.yrcLoading = false;
+      return;
+    };
+    if (store.yrcIndex == playIndex.value) {
+      return;
+    };
+    const yrcUrl = aplayer.audio[aplayer.index]["lrc"] + "&yrc=true";
+    store.yrcIndex = playIndex.value;
+    store.yrcLoading = true;
+    fetchYrc(yrcUrl);
+  } catch (error) {
+    store.yrcEnable = false;
+    store.yrcTemp = [];
+    store.yrcLoading = false;
+    console.error(error);
+  };
+};
+
+function syncLrc() {
+  if (player.value == null || player.value.aplayer == null) {
+    return;
+  };
+  // 逐行模块
+  const aplayer = player.value.aplayer;
+  const lyrics = aplayer.lyrics[playIndex.value];
+  const playerLyricIndex = player.value.aplayer.lyricIndex;
+  if (lyrics === undefined || lyrics[playerLyricIndex] === undefined) {
+    return doLrcSync("歌词加载中...");
+  };
+  let lrc = lyrics[playerLyricIndex][1];
+  if (lrc === "Loading") {
+    return doLrcSync("歌词加载中...");
+  } else if (lrc === "Not available" && !store.playerYrcATDB) {
+    return doLrcSync("歌词加载失败");
+  } else if (lrc === "Not availible") {
+    // 哈哈哈又是你（）
+    const songUrlInfw = new URLSearchParams(new URL(yrcUrl).search);
+    const songIdlrc = songUrlInfw.get("id");
+    const songServerlrc = songUrlInfw.get("server");
+    if (!songIdlrc) {
+      return doLrcSync("歌词加载失败");
+    };
+    const songUrlInfwurl = store.playerYrcATDBF
+      ? {
+        netease: `https://ghp.ci/https://raw.githubusercontent.com/Steve-xmh/amll-ttml-db/main/ncm-lyrics/${songId}.lrc`,
+        tencent: `https://ghp.ci/https://raw.githubusercontent.com/Steve-xmh/amll-ttml-db/main/qq-lyrics/${songId}.lrc`,
+      }
+      : {
+        netease: `https://raw.githubusercontent.com/Steve-xmh/amll-ttml-db/main/ncm-lyrics/${songId}.lrc`,
+        tencent: `https://raw.githubusercontent.com/Steve-xmh/amll-ttml-db/main/qq-lyrics/${songId}.lrc`,
+      };
+    if (!["netease", "tencent"].includes(songServerlrc)) {
+      return doLrcSync("歌词加载失败");
+    };
+    const amllUrllrc = songUrlInfwurl[songServerlrc].replace("${songIdlrc}", songIdlrc);
+    fetch(amllUrllrc)
+      .then((response) => response.text())
+      .catch(() => {
+        doLrcSync("歌词加载失败");
+      });
+    return doLrcSync("歌词加载中...");
+  };
+  doLrcSync(lrc);
+};
+
+const onTimeUp = () => {
+  store.playerCurrentTime = player.value.audioStatus.playedTime;
+  store.playerDuration = player.value.audioStatus.duration;
+  if (showYrcRunning == 0 && player.value != null && player.value.aplayer != null) {
+    requestAnimationFrame(syncYrc);
+  };
+};
+
+function doLrcSync(lrc) {
+  if (player.value == null || player.value.aplayer == null) {
+    return;
+  };
+  const playerLyricIndex = player.value.aplayer.lyricIndex;
+  const output = [[true, 1, playerLyricIndex, 0, lrc]];
+  if (store.playerLrc.toString() != output.toString()) {
+    store.setPlayerLrc(output);
+    return;
+  };
+};
+
+function syncYrc() {
+  showYrcRunning = 1;
+  try {
+    if (player.value == null || player.value.aplayer == null) {
+      return requestAnimationFrame(syncYrc);
+    };
+    const isLineByLine = !store.yrcEnable || store.yrcTemp.length == 0 || store.yrcLoading
+    if (isLineByLine) {
+      syncLrc();
+      return requestAnimationFrame(syncYrc);
+    } else {
+      // 逐行模块
+      const now = player.value.audioStatus.playedTime * 1000;
+      const yrcFiltered = store.yrcTemp.filter((i) => i[0] < now);
+      const yrcLyric =
+        yrcFiltered.length > 0
+          ? yrcFiltered.slice(-1)[0][2].map((it) => {
+            const [[start, duration], word, line, row] = it;
+            const isCurrent = now >= start && now <= start + duration;
+            const isSungLyrics = start + duration < now;
+            const lessdur = start + duration - now;
+            return [isCurrent, isSungLyrics, line, row, word, duration, lessdur, "auto"];
+          })
+          : [[true, 1, 0, 0, `${store.playerTitle} - ${store.playerArtist}`]];
+      if (store.playerLrc.toString() != yrcLyric.toString()) {
+        store.setPlayerLrc(yrcLyric);
+      };
+    };
+  } catch (error) {
+    console.error(error);
+  };
+  return requestAnimationFrame(syncYrc);
+};
+// 音频时间更新事件结束
+
 // 暴露子组件方法
 defineExpose({ playToggle, changeVolume, changeSong, toggleList });
 </script>
@@ -456,18 +452,14 @@ defineExpose({ playToggle, changeVolume, changeSong, toggleList });
         text-align: left;
         margin: 7px 0 6px 6px;
         height: 44px;
-        -webkit-mask: linear-gradient(
-          #fff 15%,
-          #fff 85%,
-          hsla(0deg, 0%, 100%, 0.6) 90%,
-          hsla(0deg, 0%, 100%, 0)
-        );
-        mask: linear-gradient(
-          #fff 15%,
-          #fff 85%,
-          hsla(0deg, 0%, 100%, 0.6) 90%,
-          hsla(0deg, 0%, 100%, 0)
-        );
+        -webkit-mask: linear-gradient(#fff 15%,
+            #fff 85%,
+            hsla(0deg, 0%, 100%, 0.6) 90%,
+            hsla(0deg, 0%, 100%, 0));
+        mask: linear-gradient(#fff 15%,
+            #fff 85%,
+            hsla(0deg, 0%, 100%, 0.6) 90%,
+            hsla(0deg, 0%, 100%, 0));
 
         &::before,
         &::after {