feat(gui): add i18n support

Author: EkkoG

tauri-app/package.json

@@ -19,6 +19,7 @@
     "marked": "^16.1.2",
     "pinia": "^3.0.3",
     "vue": "^3.5.13",
+    "vue-i18n": "^11.1.11",
     "vue-router": "4",
     "vuetify": "^3"
   },

tauri-app/pnpm-lock.yaml

@@ -4,13 +4,15 @@ import { useTheme } from 'vuetify'
 import { useRouter } from 'vue-router'
 import { useAppStore } from '@/stores/app'
 import { useConfigStore } from '@/stores/config'
+import { useI18n } from 'vue-i18n'
 
 const theme = useTheme()
 const router = useRouter()
 const appStore = useAppStore()
 const configStore = useConfigStore()
 const appModeInfo = ref<any>(null)
 const isDebugMode = ref(false)
+const { t } = useI18n()
 
 // 检测是否是调试模式（开发环境）
 if (import.meta.env.DEV) {
@@ -62,13 +64,13 @@ const getThemeIcon = computed(() => {
 const getThemeTooltip = computed(() => {
   switch (appStore.theme) {
     case 'light':
-      return '浅色模式'
+      return t('common.light')
     case 'dark':
-      return '深色模式'
+      return t('common.dark')
     case 'auto':
-      return '跟随系统'
+      return t('common.systemTheme')
     default:
-      return '主题切换'
+      return t('tooltips.switchTheme')
   }
 })
 
@@ -114,14 +116,14 @@ onMounted(async () => {
       <v-list nav>
         <v-list-item
           prepend-icon="mdi-home"
-          title="构建"
+          :title="t('nav.build')"
           value="build"
           to="/build"
           rounded="xl"
         />
         <v-list-item
           prepend-icon="mdi-folder-cog"
-          title="配置"
+          :title="t('nav.config')"
           value="config"
           to="/config"
           rounded="xl"
@@ -132,7 +134,7 @@ onMounted(async () => {
         <v-list nav>
           <v-list-item
             prepend-icon="mdi-cog"
-            title="设置"
+            :title="t('nav.settings')"
             value="settings"
             to="/settings"
             rounded="xl"
@@ -163,8 +165,8 @@ onMounted(async () => {
         <v-tooltip activator="parent" location="bottom" max-width="400">
           <div class="text-caption">
             <strong>{{ appModeInfo.description }}</strong><br>
-            资源路径: {{ appModeInfo.resource_path }}<br>
-            工作目录: {{ appModeInfo.working_directory }}
+            {{ t('tooltips.resourcePath') }}: {{ appModeInfo.resource_path }}<br>
+            {{ t('tooltips.workingDir') }}: {{ appModeInfo.working_directory }}
           </div>
         </v-tooltip>
       </v-chip>
@@ -184,9 +186,9 @@ onMounted(async () => {
           indeterminate
           class="mr-2"
         />
-        构建中
+        {{ t('build.building') }}
         <v-tooltip activator="parent" location="bottom">
-          正在构建固件，点击查看详情
+          {{ t('messages.buildInProgress') }}
         </v-tooltip>
       </v-chip>
 
@@ -199,18 +201,18 @@ onMounted(async () => {
         Docker
         <v-tooltip activator="parent" location="bottom" max-width="350">
           <div class="text-caption">
-            <div><strong>状态:</strong> {{ appStore.dockerReady ? '就绪' : '未就绪' }}</div>
-            <div><strong>安装状态:</strong> {{ appStore.dockerInstalled ? '已安装' : '未安装' }}</div>
-            <div><strong>运行状态:</strong> {{ appStore.dockerRunning ? '运行中' : '未运行' }}</div>
-            <div v-if="appStore.dockerInstalled"><strong>版本:</strong> {{ appStore.dockerVersion }}</div>
+            <div><strong>{{ t('common.status') }}:</strong> {{ appStore.dockerReady ? t('docker.statusReady') : t('docker.statusNotReady') }}</div>
+            <div><strong>{{ t('docker.installStatus') }}:</strong> {{ appStore.dockerInstalled ? t('docker.statusInstalled') : t('docker.statusNotInstalled') }}</div>
+            <div><strong>{{ t('docker.runningStatus') }}:</strong> {{ appStore.dockerRunning ? t('docker.statusRunning') : t('docker.statusNotRunning') }}</div>
+            <div v-if="appStore.dockerInstalled"><strong>{{ t('common.version') }}:</strong> {{ appStore.dockerVersion }}</div>
             <div v-if="appStore.dockerComposeInstalled"><strong>Compose:</strong> {{ appStore.dockerComposeVersion }}</div>
             <div v-if="!appStore.dockerInstalled" class="text-error">
-              <strong>问题:</strong> Docker 未安装<br>
-              <small>请访问 https://docker.com 下载安装 Docker Desktop</small>
+              <strong>{{ t('common.error') }}:</strong> {{ t('docker.notInstalled') }}<br>
+              <small>{{ t('messages.dockerNotInstalledHint') }}</small>
             </div>
             <div v-if="appStore.dockerInstalled && !appStore.dockerRunning" class="text-error">
-              <strong>问题:</strong> Docker 未运行<br>
-              <small>请启动 Docker Desktop 应用程序</small>
+              <strong>{{ t('common.error') }}:</strong> {{ t('docker.notRunning') }}<br>
+              <small>{{ t('messages.dockerNotRunningHint') }}</small>
             </div>
           </div>
         </v-tooltip>

tauri-app/src/App.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 interface AdvancedOptions {
   withPull: boolean
@@ -18,6 +19,7 @@ interface Emits {
 
 const props = defineProps<Props>()
 const emit = defineEmits<Emits>()
+const { t } = useI18n()
 
 // 为每个属性创建独立的计算属性
 const withPull = computed({
@@ -41,12 +43,12 @@ const mirrorUrl = computed({
 })
 
 
-const mirrorPresets = [
-  { title: '清华大学镜像源', value: 'mirrors.tuna.tsinghua.edu.cn' },
-  { title: '吉林大学镜像源', value: 'mirrors.jlu.edu.cn' },
-  { title: '中科大镜像源', value: 'mirrors.ustc.edu.cn' },
-  { title: '华南理工镜像源', value: 'mirrors.scut.edu.cn' }
-]
+const mirrorPresets = computed(() => [
+  { title: t('build.mirrors.tuna'), value: 'mirrors.tuna.tsinghua.edu.cn' },
+  { title: t('build.mirrors.jlu'), value: 'mirrors.jlu.edu.cn' },
+  { title: t('build.mirrors.ustc'), value: 'mirrors.ustc.edu.cn' },
+  { title: t('build.mirrors.scut'), value: 'mirrors.scut.edu.cn' }
+])
 
 const selectMirrorPreset = (preset: string) => {
   mirrorUrl.value = preset
@@ -66,27 +68,27 @@ const resetOptions = () => {
   <div>
     <div class="d-flex align-center mb-4">
       <v-icon class="mr-2">mdi-tune</v-icon>
-      <span class="text-subtitle-1 font-weight-medium">高级构建选项</span>
+      <span class="text-subtitle-1 font-weight-medium">{{ t('build.advancedOptions') }}</span>
       <v-spacer />
       <v-btn
         variant="text"
         size="small"
         @click="resetOptions"
       >
         <v-icon>mdi-restore</v-icon>
-        重置
+        {{ t('common.reset') }}
       </v-btn>
     </div>
 
     <div>
       <v-row>
         <!-- Docker 选项 -->
         <v-col cols="12">
-          <div class="text-subtitle-2 mb-3">Docker 选项</div>
+          <div class="text-subtitle-2 mb-3">{{ t('build.dockerOptions') }}</div>
 
           <v-switch
             v-model="withPull"
-            label="构建前拉取最新镜像"
+            :label="t('build.pullImage')"
             color="primary"
             hide-details
             class="mb-2"
@@ -96,14 +98,14 @@ const resetOptions = () => {
                 <template v-slot:activator="{ props }">
                   <v-icon v-bind="props" size="small" color="info">mdi-help-circle-outline</v-icon>
                 </template>
-                <span>--with-pull: 确保使用最新的 ImageBuilder 镜像</span>
+                <span>{{ t('build.pullImageTooltip') }}</span>
               </v-tooltip>
             </template>
           </v-switch>
 
           <v-switch
             v-model="rmFirst"
-            label="构建前删除现有容器"
+            :label="t('build.removeFirst')"
             color="primary"
             hide-details
             class="mb-3"
@@ -113,19 +115,19 @@ const resetOptions = () => {
                 <template v-slot:activator="{ props }">
                   <v-icon v-bind="props" size="small" color="info">mdi-help-circle-outline</v-icon>
                 </template>
-                <span>--rm-first: 清理可能冲突的容器</span>
+                <span>{{ t('build.removeFirstTooltip') }}</span>
               </v-tooltip>
             </template>
           </v-switch>
         </v-col>
 
         <!-- 镜像源选项 -->
         <v-col cols="12">
-          <div class="text-subtitle-2 mb-3">镜像源设置</div>
+          <div class="text-subtitle-2 mb-3">{{ t('build.mirrorSettings') }}</div>
 
           <v-switch
             v-model="useMirror"
-            label="使用镜像源加速下载"
+            :label="t('build.useMirror')"
             color="primary"
             hide-details
             class="mb-3"
@@ -135,7 +137,7 @@ const resetOptions = () => {
                 <template v-slot:activator="{ props }">
                   <v-icon v-bind="props" size="small" color="info">mdi-help-circle-outline</v-icon>
                 </template>
-                <span>--use-mirror: 使用国内镜像源加速软件包下载</span>
+                <span>{{ t('build.useMirrorTooltip') }}</span>
               </v-tooltip>
             </template>
           </v-switch>
@@ -144,7 +146,7 @@ const resetOptions = () => {
             <div v-if="useMirror">
               <v-text-field
                 v-model="mirrorUrl"
-                label="镜像源地址"
+                :label="t('build.mirrorUrl')"
                 placeholder="mirrors.tuna.tsinghua.edu.cn"
                 variant="outlined"
                 density="compact"
@@ -176,7 +178,7 @@ const resetOptions = () => {
               </v-text-field>
 
               <div class="text-caption text-medium-emphasis mb-3">
-                提示：不要包含 http:// 或 https:// 前缀
+                {{ t('build.mirrorUrlHint') }}
               </div>
             </div>
           </v-expand-transition>