✨ feat: 国际化功能基础实现

src/renderer/components/LanguageSwitcher.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const { locale } = useI18n();
+
+const languages = [
+  { label: '简体中文', value: 'zh-CN' },
+  { label: 'English', value: 'en-US' }
+];
+
+// 从配置中读取语言设置
+onMounted(() => {
+  const savedLanguage = window.electron.ipcRenderer.sendSync('get-store-value', 'set.language');
+  if (savedLanguage) {
+    locale.value = savedLanguage;
+  }
+});
+
+const handleLanguageChange = (value: string) => {
+  locale.value = value;
+  // 保存语言设置到配置中
+  window.electron.ipcRenderer.send('set-store-value', 'set.language', value);
+  // 通知主进程语言已更改
+  window.electron.ipcRenderer.send('change-language', value);
+};
+</script>
+
+<template>
+  <n-select
+    v-model:value="locale"
+    :options="languages"
+    size="small"
+    @update:value="handleLanguageChange"
+  />
+</template>

src/renderer/components/common/ArtistDrawer.vue

@@ -33,7 +33,7 @@
 
       <!-- 标签页切换 -->
       <n-tabs v-model:value="activeTab" class="flex-1" type="line" animated>
-        <n-tab-pane name="songs" tab="热门歌曲">
+        <n-tab-pane name="songs" :tab="$t('artist.songs')">
           <div ref="songListRef" class="songs-list">
             <n-scrollbar style="max-height: 61vh" :size="5" @scroll="handleSongScroll">
               <div class="song-list-content">
@@ -44,14 +44,14 @@
                   :list="true"
                   @play="handlePlay"
                 />
-                <div v-if="songLoading" class="loading-more">加载中...</div>
+                <div v-if="songLoading" class="loading-more">{{ $t('common.loading') }}</div>
               </div>
               <play-bottom />
             </n-scrollbar>
           </div>
         </n-tab-pane>
 
-        <n-tab-pane name="albums" tab="专辑">
+        <n-tab-pane name="albums" :tab="$t('artist.albums')">
           <div ref="albumListRef" class="albums-list">
             <n-scrollbar style="max-height: 61vh" :size="5" @scroll="handleAlbumScroll">
               <div class="albums-grid">
@@ -69,14 +69,14 @@
                     type: '专辑'
                   }"
                 />
-                <div v-if="albumLoading" class="loading-more">加载中...</div>
+                <div v-if="albumLoading" class="loading-more">{{ $t('common.loading') }}</div>
               </div>
               <play-bottom />
             </n-scrollbar>
           </div>
         </n-tab-pane>
 
-        <n-tab-pane name="about" tab="艺人介绍">
+        <n-tab-pane name="about" :tab="$t('artist.description')">
           <div class="artist-description">
             <n-scrollbar style="max-height: 60vh">
               <div class="description-content" v-html="artistInfo?.briefDesc"></div>

src/renderer/components/common/DonationList.vue

@@ -5,7 +5,7 @@
         <template #icon>
           <i class="ri-refresh-line"></i>
         </template>
-        刷新列表
+        {{ $t('donation.refresh') }}
       </n-button>
     </div>
     <div class="donation-grid" :class="{ 'grid-expanded': isExpanded }">
@@ -78,27 +78,27 @@
 
     <div class="p-6 rounded-lg shadow-lg bg-light dark:bg-gray-800">
       <div class="description text-center text-sm text-gray-700 dark:text-gray-200">
-        <p>您的捐赠将用于支持开发和维护工作，包括但不限于服务器维护、域名续费等。</p>
-        <p>留言时可留下您的邮箱或 github名称。</p>
+        <p>{{ $t('donation.description') }}</p>
+        <p>{{ $t('donation.message') }}</p>
       </div>
       <div class="flex justify-between">
         <div class="flex flex-col items-center gap-2">
           <n-image
             :src="alipay"
-            alt="支付宝收款码"
+            :alt="$t('common.alipay')"
             class="w-60 h-60 rounded-lg cursor-none"
             preview-disabled
           />
-          <span class="text-sm text-gray-700 dark:text-gray-200">支付宝</span>
+          <span class="text-sm text-gray-700 dark:text-gray-200">{{ $t('common.alipay') }}</span>
         </div>
         <div class="flex flex-col items-center gap-2">
           <n-image
             :src="wechat"
-            alt="微信收款码"
+            :alt="$t('common.wechat')"
             class="w-60 h-60 rounded-lg cursor-none"
             preview-disabled
           />
-          <span class="text-sm text-gray-700 dark:text-gray-200">微信支付</span>
+          <span class="text-sm text-gray-700 dark:text-gray-200">{{ $t('common.wechat') }}</span>
         </div>
       </div>
     </div>

src/renderer/main.ts

@@ -7,6 +7,7 @@ import 'remixicon/fonts/remixicon.css';
 
 import { createApp } from 'vue';
 
+import i18n from '@/../i18n/renderer';
 import router from '@/router';
 import store from '@/store';
 
@@ -18,6 +19,8 @@ const app = createApp(App);
 Object.keys(directives).forEach((key: string) => {
   app.directive(key, directives[key as keyof typeof directives]);
 });
+
 app.use(router);
 app.use(store);
+app.use(i18n);
 app.mount('#app');