feat: bili播放优化

src/renderer/components/common/BilibiliItem.vue

@@ -19,8 +19,12 @@
 </template>
 
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+
 import type { IBilibiliSearchResult } from '@/types/bilibili';
 
+const { t } = useI18n();
+
 const props = defineProps<{
   item: IBilibiliSearchResult;
 }>();
@@ -39,7 +43,7 @@ const handleClick = () => {
 const formatNumber = (num?: number) => {
   if (!num) return '0';
   if (num >= 10000) {
-    return `${(num / 10000).toFixed(1)}万`;
+    return `${(num / 10000).toFixed(1)}${t('bilibili.player.num')}`;
   }
   return num.toString();
 };

src/renderer/components/lyric/MusicFull.vue

@@ -43,7 +43,7 @@
           />
         </div>
         <div class="music-info">
-          <div class="music-content-name">{{ playMusic.name }}</div>
+          <div class="music-content-name" v-html="playMusic.name"></div>
           <div class="music-content-singer">
             <n-ellipsis
               class="text-ellipsis"
@@ -98,7 +98,7 @@
               class="music-info-header"
               :style="{ textAlign: config.centerLyrics ? 'center' : 'left' }"
             >
-              <div class="music-info-name">{{ playMusic.name }}</div>
+              <div class="music-info-name" v-html="playMusic.name"></div>
               <div class="music-info-singer">
                 <span
                   v-for="(item, index) in artistList"
@@ -562,7 +562,7 @@ defineExpose({
         @apply text-center w-[600px];
 
         .music-content-name {
-          @apply text-4xl mb-4;
+          @apply text-4xl mb-4 line-clamp-2;
           color: var(--text-color-active);
         }
 
@@ -641,7 +641,7 @@ defineExpose({
       @apply mb-8;
 
       .music-info-name {
-        @apply text-4xl font-bold mb-2;
+        @apply text-4xl font-bold mb-2 line-clamp-2;
         color: var(--text-color-active);
       }
 

src/renderer/components/lyric/MusicFullMobile.vue

@@ -32,7 +32,7 @@
       <transition name="fade">
         <div v-if="showFullLyrics && !isLandscape" class="fullscreen-lyrics" :class="config.theme">
           <div class="fullscreen-header">
-            <div class="song-title">{{ playMusic.name }}</div>
+            <div class="song-title" v-html="playMusic.name"></div>
             <div class="artist-name">
               <span v-for="(item, index) in artistList" :key="index">
                 {{ item.name }}{{ index < artistList.length - 1 ? ' / ' : '' }}
@@ -97,7 +97,7 @@
             <!-- 歌曲信息 -->
             <div class="song-info">
               <div class="song-title-container">
-                <h1 class="song-title">{{ playMusic.name }}</h1>
+                <h1 class="song-title" v-html="playMusic.name"></h1>
               </div>
               <p class="song-artist">
                 <span
@@ -190,7 +190,7 @@
           <!-- 歌曲信息放置在顶部 -->
           <div class="landscape-song-info">
             <div class="flex flex-col flex-1">
-              <h1 class="song-title">{{ playMusic.name }}</h1>
+              <h1 class="song-title" v-html="playMusic.name"></h1>
               <p class="song-artist">
                 <span
                   v-for="(item, index) in artistList"

src/renderer/components/player/MiniPlayBar.vue

@@ -16,7 +16,7 @@
 
       <!-- 歌曲信息 -->
       <div class="song-info" @click="setMusicFull">
-        <div class="song-title">{{ playMusic?.name || '未播放' }}</div>
+        <div class="song-title" v-html="playMusic?.name || '未播放'"></div>
         <div class="song-artist">
           <span
             v-for="(artists, artistsindex) in artistList"

src/renderer/components/player/PlayBar.vue

@@ -58,7 +58,7 @@
     <div class="music-content">
       <div class="music-content-title flex items-center">
         <n-ellipsis class="text-ellipsis" line-clamp="1">
-          {{ playMusic?.name || '' }}
+          <p v-html="playMusic?.name || ''"></p>
         </n-ellipsis>
         <span v-if="playbackRate !== 1.0" class="playback-rate-badge"> {{ playbackRate }}x </span>
       </div>