✨ feat: 国际化 (i18n) 功能实现

src/renderer/layout/components/MusicFull.vue

@@ -113,7 +113,7 @@
 
             <!-- 无歌词 -->
             <div v-if="!lrcArray.length" class="music-lrc-text mt-40">
-              <span>暂无歌词, 请欣赏</span>
+              <span>{{ t('player.lrc.noLrc') }}</span>
             </div>
           </div>
         </n-layout>
@@ -130,6 +130,7 @@
 <script setup lang="ts">
 import { useDebounceFn } from '@vueuse/core';
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { useStore } from 'vuex';
 
 import LyricSettings from '@/components/lyric/LyricSettings.vue';
@@ -145,6 +146,7 @@ import {
 import { getImgUrl, isMobile } from '@/utils';
 import { animateGradient, getHoverBackgroundColor, getTextColors } from '@/utils/linearColor';
 
+const { t } = useI18n();
 // 定义 refs
 const lrcSider = ref<any>(null);
 const isMouse = ref(false);

src/renderer/layout/components/PlayBar.vue

@@ -41,7 +41,9 @@
             class="text-3xl"
             :class="musicFullVisible ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'"
           ></i>
-          <span class="hover-text">{{ musicFullVisible ? '收起' : '展开' }}歌词</span>
+          <span class="hover-text">{{
+            musicFullVisible ? t('player.playBar.collapse') : t('player.playBar.expand')
+          }}</span>
         </div>
       </div>
     </div>
@@ -105,7 +107,7 @@
             @click="toggleFavorite"
           ></i>
         </template>
-        喜欢
+        {{ t('player.playBar.like') }}
       </n-tooltip>
       <n-tooltip v-if="isElectron" class="music-lyric" trigger="hover" :z-index="9999999">
         <template #trigger>
@@ -115,7 +117,7 @@
             @click="openLyricWindow"
           ></i>
         </template>
-        歌词
+        {{ t('player.playBar.lyric') }}
       </n-tooltip>
       <n-popover
         trigger="click"
@@ -132,7 +134,7 @@
             <template #trigger>
               <i class="iconfont icon-list"></i>
             </template>
-            播放列表
+            {{ t('player.playBar.playList') }}
           </n-tooltip>
         </template>
         <div class="music-play-list">
@@ -155,6 +157,7 @@
 <script lang="ts" setup>
 import { useThrottleFn } from '@vueuse/core';
 import { computed, ref, useTemplateRef, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { useStore } from 'vuex';
 
 import SongItem from '@/components/common/SongItem.vue';
@@ -176,7 +179,7 @@ import { showShortcutToast } from '@/utils/shortcutToast';
 import MusicFull from './MusicFull.vue';
 
 const store = useStore();
-
+const { t } = useI18n();
 // 是否播放
 const play = computed(() => store.state.play as boolean);
 // 播放列表
@@ -260,13 +263,13 @@ const playModeIcon = computed(() => {
 const playModeText = computed(() => {
   switch (playMode.value) {
     case 0:
-      return '列表循环';
+      return t('player.playBar.playMode.sequence');
     case 1:
-      return '单曲循环';
+      return t('player.playBar.playMode.loop');
     case 2:
-      return '随机播放';
+      return t('player.playBar.playMode.random');
     default:
-      return '列表循环';
+      return t('player.playBar.playMode.sequence');
   }
 });
 
@@ -368,34 +371,42 @@ if (isElectron) {
       case 'togglePlay':
         playMusicEvent();
         showShortcutToast(
-          store.state.play ? '开始播放' : '暂停播放',
+          store.state.play ? t('player.playBar.play') : t('player.playBar.pause'),
           store.state.play ? 'ri-pause-circle-line' : 'ri-play-circle-line'
         );
         break;
       case 'prevPlay':
         handlePrev();
-        showShortcutToast('上一首', 'ri-skip-back-line');
+        showShortcutToast(t('player.playBar.prev'), 'ri-skip-back-line');
         break;
       case 'nextPlay':
         handleNext();
-        showShortcutToast('下一首', 'ri-skip-forward-line');
+        showShortcutToast(t('player.playBar.next'), 'ri-skip-forward-line');
         break;
       case 'volumeUp':
         if (volumeSlider.value < 100) {
           volumeSlider.value = Math.min(volumeSlider.value + 10, 100);
-          showShortcutToast(`音量${volumeSlider.value}%`, 'ri-volume-up-line');
+          showShortcutToast(
+            `${t('player.playBar.volume')}${volumeSlider.value}%`,
+            'ri-volume-up-line'
+          );
         }
         break;
       case 'volumeDown':
         if (volumeSlider.value > 0) {
           volumeSlider.value = Math.max(volumeSlider.value - 10, 0);
-          showShortcutToast(`音量${volumeSlider.value}%`, 'ri-volume-down-line');
+          showShortcutToast(
+            `${t('player.playBar.volume')}${volumeSlider.value}%`,
+            'ri-volume-down-line'
+          );
         }
         break;
       case 'toggleFavorite':
         toggleFavorite(new Event('click'));
         showShortcutToast(
-          isFavorite.value ? `已收藏${playMusic.value.name}` : `已取消收藏${playMusic.value.name}`,
+          isFavorite.value
+            ? t('player.playBar.favorite', { name: playMusic.value.name })
+            : t('player.playBar.unFavorite', { name: playMusic.value.name }),
           isFavorite.value ? 'ri-heart-fill' : 'ri-heart-line'
         );
         break;

src/renderer/layout/components/SearchBar.vue

@@ -35,7 +35,9 @@
             :src="getImgUrl(store.state.user.avatarUrl)"
             @click="selectItem('user')"
           />
-          <div v-else class="mx-2 rounded-full cursor-pointer text-sm" @click="toLogin">登录</div>
+          <div v-else class="mx-2 rounded-full cursor-pointer text-sm" @click="toLogin">
+            {{ t('comp.searchBar.login') }}
+          </div>
         </div>
       </template>
       <div class="user-popover">
@@ -46,20 +48,20 @@
         <div class="menu-items">
           <div v-if="!store.state.user" class="menu-item" @click="toLogin">
             <i class="iconfont ri-login-box-line"></i>
-            <span>去登录</span>
+            <span>{{ t('comp.searchBar.toLogin') }}</span>
           </div>
           <div v-if="store.state.user" class="menu-item" @click="selectItem('logout')">
             <i class="iconfont ri-logout-box-r-line"></i>
-            <span>退出登录</span>
+            <span>{{ t('comp.searchBar.logout') }}</span>
           </div>
           <!-- 切换主题 -->
           <div class="menu-item" @click="selectItem('set')">
             <i class="iconfont ri-settings-3-line"></i>
-            <span>设置</span>
+            <span>{{ t('comp.searchBar.set') }}</span>
           </div>
           <div class="menu-item">
             <i class="iconfont" :class="isDarkTheme ? 'ri-moon-line' : 'ri-sun-line'"></i>
-            <span>主题</span>
+            <span>{{ t('comp.searchBar.theme') }}</span>
             <n-switch v-model:value="isDarkTheme" class="ml-auto">
               <template #checked>
                 <i class="ri-moon-line"></i>
@@ -71,15 +73,15 @@
           </div>
           <div class="menu-item" @click="restartApp">
             <i class="iconfont ri-restart-line"></i>
-            <span>重启</span>
+            <span>{{ t('comp.searchBar.restart') }}</span>
           </div>
           <div class="menu-item" @click="selectItem('refresh')">
             <i class="iconfont ri-refresh-line"></i>
-            <span>刷新</span>
+            <span>{{ t('comp.searchBar.refresh') }}</span>
           </div>
           <div class="menu-item" @click="toGithubRelease">
             <i class="iconfont ri-github-fill"></i>
-            <span>当前版本</span>
+            <span>{{ t('comp.searchBar.currentVersion') }}</span>
             <div class="version-info">
               <span class="version-number">{{ updateInfo.currentVersion }}</span>
               <n-tag v-if="updateInfo.hasUpdate" type="success" size="small" class="ml-1">
@@ -101,6 +103,7 @@
 
 <script lang="ts" setup>
 import { computed, onMounted, ref, watchEffect } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { useStore } from 'vuex';
 
@@ -118,9 +121,10 @@ import config from '../../../../package.json';
 const router = useRouter();
 const store = useStore();
 const userSetOptions = ref(USER_SET_OPTIONS);
+const { t } = useI18n();
 
 // 推荐热搜词
-const hotSearchKeyword = ref('搜索点什么吧...');
+const hotSearchKeyword = ref(t('comp.searchBar.searchPlaceholder'));
 const hotSearchValue = ref('');
 const loadHotSearchKeyword = async () => {
   const { data } = await getSearchKeyword();

src/renderer/layout/components/TitleBar.vue

@@ -19,15 +19,21 @@
     :mask-closable="true"
   >
     <div class="close-dialog-content">
-      <p>请选择关闭方式</p>
+      <p>{{ t('comp.titleBar.closeTitle') }}</p>
       <div class="remember-choice">
-        <n-checkbox v-model:checked="rememberChoice">记住我的选择</n-checkbox>
+        <n-checkbox v-model:checked="rememberChoice">
+          {{ t('comp.titleBar.rememberChoice') }}
+        </n-checkbox>
       </div>
     </div>
     <template #action>
       <div class="dialog-footer">
-        <n-button type="primary" @click="handleAction('minimize')">最小化到托盘</n-button>
-        <n-button @click="handleAction('close')">退出应用</n-button>
+        <n-button type="primary" @click="handleAction('minimize')">
+          {{ t('comp.titleBar.minimizeToTray') }}
+        </n-button>
+        <n-button @click="handleAction('close')">
+          {{ t('comp.titleBar.exitApp') }}
+        </n-button>
       </div>
     </template>
   </n-modal>