feat: 添加语言管理功能，更新系统设置页面，优化用户体验

src/views/system-settings/index.vue

@@ -1,15 +1,18 @@
 <script lang="ts" setup>
-import { alertController, toastController } from "@ionic/vue";
+import { alertController, toastController, useIonRouter } from "@ionic/vue";
 import { checkbox, close, information, languageOutline, refresh } from "ionicons/icons";
 
+const { t } = useI18n();
+const router = useIonRouter();
 const { cacheSize, calculateCacheSize, clearCache } = useCacheSize();
 const { isChecking, checkForUpdate } = useAppUpdate();
+const { currentLanguage } = useLanguage();
 
 function handleClearCache() {
   clearCache();
   calculateCacheSize();
   toastController.create({
-    message: "缓存已清除",
+    message: t("settings.cacheCleared"),
     duration: 2000,
     icon: checkbox,
     position: "bottom",
@@ -23,15 +26,15 @@ async function handleCheckUpdate() {
 
     if (result.hasUpdate) {
       const alert = await alertController.create({
-        header: "发现新版本",
-        message: `当前版本: ${result.currentVersion}\n最新版本: ${result.latestVersion || "新版本"}`,
+        header: t("settings.updateAvailable"),
+        message: `${t("settings.currentVersion")}: ${result.currentVersion}\n${t("settings.latestVersion")}: ${result.latestVersion || t("settings.newVersion")}`,
         buttons: [
           {
-            text: "取消",
+            text: t("settings.cancel"),
             role: "cancel",
           },
           {
-            text: "立即更新",
+            text: t("settings.updateNow"),
             handler: () => {
               window.location.reload();
             },
@@ -42,7 +45,7 @@ async function handleCheckUpdate() {
     }
     else {
       const toast = await toastController.create({
-        message: "已是最新版本",
+        message: t("settings.alreadyLatest"),
         duration: 2000,
         icon: checkbox,
         position: "bottom",
@@ -53,7 +56,7 @@ async function handleCheckUpdate() {
   }
   catch (error) {
     const toast = await toastController.create({
-      message: "检查更新失败",
+      message: t("settings.checkUpdateFailed"),
       duration: 2000,
       position: "bottom",
       color: "danger",
@@ -78,20 +81,20 @@ onMounted(() => {
     <ion-content :fullscreen="true" class="ion-padding">
       <ion-list lines="full">
         <ion-list-header>
-          <ion-label>设置</ion-label>
+          <ion-label>{{ t("settings.title") }}</ion-label>
         </ion-list-header>
-        <ion-item button>
+        <ion-item button @click="router.push('/system-settings/language')">
           <div class="flex justify-between w-full items-center">
             <div class="flex-center space-x-2">
               <div class="icon">
                 <ion-icon :icon="languageOutline" class="text-lg" />
               </div>
               <div class="text-sm font-semibold">
-                语言
+                {{ t("settings.language") }}
               </div>
             </div>
             <div class="end">
-              简体中文
+              {{ currentLanguage.nativeName }}
             </div>
           </div>
         </ion-item>
@@ -102,7 +105,7 @@ onMounted(() => {
                 <ion-icon :icon="information" class="text-lg" />
               </div>
               <div class="text-sm font-semibold">
-                关于我们
+                {{ t("settings.aboutUs") }}
               </div>
             </div>
           </div>
@@ -114,7 +117,7 @@ onMounted(() => {
                 <ion-icon :icon="close" class="text-lg" />
               </div>
               <div class="text-sm font-semibold">
-                清除缓存
+                {{ t("settings.clearCache") }}
               </div>
             </div>
             <div class="end">
@@ -129,7 +132,7 @@ onMounted(() => {
                 <ion-icon :icon="refresh" class="text-lg" :class="{ 'animate-spin': isChecking }" />
               </div>
               <div class="text-sm font-semibold">
-                检查更新
+                {{ t("settings.checkUpdate") }}
               </div>
             </div>
           </div>

src/views/system-settings/language.vue

@@ -0,0 +1,58 @@
+<script lang="ts" setup>
+import { useIonRouter } from "@ionic/vue";
+
+const { t } = useI18n();
+const router = useIonRouter();
+const { languages, locale, setLanguage } = useLanguage();
+
+function handleLanguageChange(event: CustomEvent) {
+  const langCode = event.detail.value;
+  setLanguage(langCode);
+
+  // 返回上一页
+  setTimeout(() => {
+    router.back();
+  }, 300);
+}
+</script>
+
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar class="ui-toolbar">
+        <ion-back-button slot="start" />
+        <ion-title>{{ t("settings.languageTitle") }}</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content :fullscreen="true" class="ion-padding">
+      <ion-list lines="full">
+        <ion-radio-group :value="locale" @ion-change="handleLanguageChange">
+          <ion-item v-for="lang in languages" :key="lang.code">
+            <ion-radio :value="lang.code">
+              <div class="language-item">
+                <div class="font-semibold">
+                  {{ lang.nativeName }}
+                </div>
+                <div class="text-xs text-gray-500">
+                  {{ lang.name }}
+                </div>
+              </div>
+            </ion-radio>
+          </ion-item>
+        </ion-radio-group>
+      </ion-list>
+    </ion-content>
+  </ion-page>
+</template>
+
+<style lang='css' scoped></style>
+"css" scoped>
+@reference "tailwindcss";
+
+.language-item {
+  @apply py-1;
+}
+
+ion-radio {
+  width: 100%;
+}

src/views/system-settings/outlet.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup></script>
+
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar class="ui-toolbar">
+        <ion-back-button slot="start" />
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content :fullscreen="true" class="ion-padding">
+      <ion-router-outlet />
+    </ion-content>
+  </ion-page>
+</template>
+
+<style lang='css' scoped></style>