feat: 添加前端翻译

web/src/views/apps/phpmyadmin/IndexView.vue

@@ -5,9 +5,11 @@ defineOptions({
 
 import Editor from '@guolao/vue-monaco-editor'
 import { NButton } from 'naive-ui'
+import { useGettext } from 'vue3-gettext'
 
 import phpmyadmin from '@/api/apps/phpmyadmin'
 
+const { $gettext } = useGettext()
 const currentTab = ref('status')
 const hostname = ref(window.location.hostname)
 const port = ref(0)
@@ -32,14 +34,14 @@ const getInfo = async () => {
 
 const handleSave = () => {
   useRequest(phpmyadmin.port(newPort.value)).onSuccess(() => {
-    window.$message.success('保存成功')
+    window.$message.success($gettext('Saved successfully'))
     getInfo()
   })
 }
 
 const handleSaveConfig = () => {
   useRequest(phpmyadmin.saveConfig(config.value)).onSuccess(() => {
-    window.$message.success('保存成功')
+    window.$message.success($gettext('Saved successfully'))
   })
 }
 
@@ -53,7 +55,7 @@ onMounted(() => {
     <template #action>
       <n-button v-if="currentTab == 'status'" class="ml-16" type="primary" @click="handleSave">
         <TheIcon :size="18" icon="material-symbols:save-outline" />
-        保存
+        {{ $gettext('Save') }}
       </n-button>
       <n-button
         v-if="currentTab == 'config'"
@@ -62,28 +64,27 @@ onMounted(() => {
         @click="handleSaveConfig"
       >
         <TheIcon :size="18" icon="material-symbols:save-outline" />
-        保存
+        {{ $gettext('Save') }}
       </n-button>
     </template>
     <n-tabs v-model:value="currentTab" type="line" animated>
-      <n-tab-pane name="status" tab="状态">
+      <n-tab-pane name="status" :tab="$gettext('Status')">
         <n-space vertical>
-          <n-card title="访问信息">
+          <n-card :title="$gettext('Access Information')">
             <n-alert type="info">
-              访问地址: <a :href="url" target="_blank">{{ url }}</a>
+              {{ $gettext('Access URL:') }} <a :href="url" target="_blank">{{ url }}</a>
             </n-alert>
           </n-card>
-          <n-card title="修改端口">
+          <n-card :title="$gettext('Modify Port')">
             <n-input-number v-model:value="newPort" :min="1" :max="65535" />
-            修改 phpMyAdmin 访问端口
+            {{ $gettext('Modify phpMyAdmin access port') }}
           </n-card>
         </n-space>
       </n-tab-pane>
-      <n-tab-pane name="config" tab="修改配置">
+      <n-tab-pane name="config" :tab="$gettext('Modify Configuration')">
         <n-space vertical>
           <n-alert type="warning">
-            此处修改的是 phpMyAdmin 的 OpenResty
-            配置文件，如果您不了解各参数的含义，请不要随意修改！
+            {{ $gettext('This modifies the OpenResty configuration file for phpMyAdmin. If you do not understand the meaning of each parameter, please do not modify it randomly!') }}
           </n-alert>
           <Editor
             v-model:value="config"

web/src/views/apps/phpmyadmin/route.ts

@@ -1,3 +1,4 @@
+import { $gettext } from '@/utils/gettext'
 import type { RouteType } from '~/types/router'
 
 const Layout = () => import('@/layout/IndexView.vue')
@@ -13,7 +14,7 @@ export default {
       path: '',
       component: () => import('./IndexView.vue'),
       meta: {
-        title: 'phpMyAdmin',
+        title: $gettext('phpMyAdmin'),
         icon: 'simple-icons:phpmyadmin',
         role: ['admin'],
         requireAuth: true