From 554ce3747550effbe511bba64c93367e97c82a75 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Thu, 1 Jan 2026 23:05:37 +0800
Subject: [PATCH] code refactor

---
 src/views/desktop/AboutPage.vue | 23 ++++++++++++++---------
 src/views/mobile/AboutPage.vue  | 20 +++++++++++---------
 2 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/src/views/desktop/AboutPage.vue b/src/views/desktop/AboutPage.vue
index 84adf41d..10d34c08 100644
--- a/src/views/desktop/AboutPage.vue
+++ b/src/views/desktop/AboutPage.vue
@@ -152,19 +152,18 @@
                                 </tr>
                                 </thead>
                                 <tbody>
-                                <tr :key="languageTag"
-                                    v-for="(languageContributors, languageTag) in contributors.translators"
-                                    v-show="!!getLanguageInfo(languageTag)?.displayName">
-                                    <td>{{ languageTag }}</td>
-                                    <td>{{ getLanguageInfo(languageTag)?.displayName }}</td>
+                                <tr :key="lang.languageTag" v-for="lang in allLanguages">
+                                    <td>{{ lang.languageTag }}</td>
+                                    <td>{{ lang.nativeDisplayName }}</td>
                                     <td>
-                                        <template :key="contributor" v-for="(contributor, index) in languageContributors">
+                                        <template :key="contributor"
+                                                  v-for="(contributor, index) in contributors.translators[lang.languageTag] ?? []">
+                                            <span v-if="index > 0">, </span>
                                             <a target="_blank" :href="`https://github.com/${contributor}`">
                                                 @{{ contributor }}
                                             </a>
-                                            <span v-if="index < languageContributors.length - 1">, </span>
                                         </template>
-                                        <span v-if="!languageContributors || languageContributors.length < 1">/</span>
+                                        <span v-if="!contributors.translators[lang.languageTag] || !contributors.translators[lang.languageTag]?.length">/</span>
                                     </td>
                                 </tr>
                                 </tbody>
@@ -189,6 +188,9 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
+
+import type { LanguageOption } from '@/locales/index.ts';
 import { useI18n } from '@/locales/helpers.ts';
 import { useAboutPageBase } from '@/views/base/AboutPageBase.ts';
 
@@ -196,7 +198,7 @@ import {
     mdiWebRefresh
 } from '@mdi/js';
 
-const { tt, getLanguageInfo } = useI18n();
+const { tt, getAllLanguageOptions } = useI18n();
 const {
     clientVersion,
     clientVersionMatchServerVersion,
@@ -212,6 +214,9 @@ const {
     init
 } = useAboutPageBase();
 
+
+const allLanguages = computed<LanguageOption[]>(() => getAllLanguageOptions(false));
+
 init();
 </script>
 
diff --git a/src/views/mobile/AboutPage.vue b/src/views/mobile/AboutPage.vue
index cfa69a04..d5efe66b 100644
--- a/src/views/mobile/AboutPage.vue
+++ b/src/views/mobile/AboutPage.vue
@@ -88,19 +88,18 @@
                         </tr>
                         </thead>
                         <tbody>
-                        <tr :key="languageTag"
-                            v-for="(languageContributors, languageTag) in contributors.translators"
-                            v-show="!!getLanguageInfo(languageTag)?.displayName">
-                            <td>{{ languageTag }}</td>
-                            <td>{{ getLanguageInfo(languageTag)?.displayName }}</td>
+                        <tr :key="lang.languageTag" v-for="lang in allLanguages">
+                            <td>{{ lang.languageTag }}</td>
+                            <td>{{ lang.nativeDisplayName }}</td>
                             <td>
-                                <template :key="contributor" v-for="(contributor, index) in languageContributors">
+                                <template :key="contributor"
+                                          v-for="(contributor, index) in contributors.translators[lang.languageTag] ?? []">
+                                    <span v-if="index > 0">, </span>
                                     <f7-link target="_blank" @click="openExternalUrl(`https://github.com/${contributor}`)">
                                         @{{ contributor }}
                                     </f7-link>
-                                    <span v-if="index < languageContributors.length - 1">, </span>
                                 </template>
-                                <span v-if="!languageContributors || languageContributors.length < 1">/</span>
+                                <span v-if="!contributors.translators[lang.languageTag] || !contributors.translators[lang.languageTag]?.length">/</span>
                             </td>
                         </tr>
                         </tbody>
@@ -133,11 +132,12 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue';
 
+import type { LanguageOption } from '@/locales/index.ts';
 import { useI18n } from '@/locales/helpers.ts';
 import { useI18nUIComponents } from '@/lib/ui/mobile.ts';
 import { useAboutPageBase } from '@/views/base/AboutPageBase.ts';
 
-const { tt, getLanguageInfo } = useI18n();
+const { tt, getAllLanguageOptions } = useI18n();
 const { showAlert, openExternalUrl } = useI18nUIComponents();
 const {
     clientVersion,
@@ -157,6 +157,8 @@ const {
 
 const showRefreshBrowserCacheSheet = ref<boolean>(false);
 const versionClickCount = ref<number>(0);
+
+const allLanguages = computed<LanguageOption[]>(() => getAllLanguageOptions(false));
 const forceShowRefreshBrowserCacheMenu = computed<boolean>(() => versionClickCount.value >= 5);
 
 function showVersion(): void {