diff --git a/web/src/components/common/AppFooter.vue b/web/src/components/common/AppFooter.vue
index 9afaa8d5..e2aacacb 100644
--- a/web/src/components/common/AppFooter.vue
+++ b/web/src/components/common/AppFooter.vue
@@ -1,11 +1,18 @@
+<script lang="ts" setup>
+import { useGettext } from 'vue3-gettext'
+
+const { $gettext } = useGettext()
+const year = new Date().getFullYear()
+</script>
+
 <template>
   <footer color="#6a6a6a" f-c-c flex-col text-14>
     <p>
       © 2022 - {{ year }}
       <a hover="decoration-primary color-primary" target="__blank" href="https://panel.haozi.net/">
-        耗子面板
+        {{ $gettext('Rat Panel') }}
       </a>
-      All Rights Reserved.
+      {{ $gettext('All Rights Reserved.') }}
     </p>
     <p>
       <a
@@ -13,7 +20,7 @@
         target="_blank"
         href="https://jq.qq.com/?_wv=1027&k=I1oJKSTH"
       >
-        Q群 12370907
+        {{ $gettext('QQ Group') }} 12370907
       </a>
       <n-divider vertical />
       <a
@@ -21,7 +28,7 @@
         target="_blank"
         href="https://panel.haozi.net/docs"
       >
-        使用文档
+        {{ $gettext('Documentation') }}
       </a>
       <n-divider vertical />
       <a
@@ -29,7 +36,7 @@
         target="_blank"
         href="https://tom.moe/c/technical/panel"
       >
-        交流社区
+        {{ $gettext('Community') }}
       </a>
       <n-divider vertical />
       <a
@@ -37,12 +44,8 @@
         target="_blank"
         href="https://afdian.com/a/tnblabs"
       >
-        赞助支持
+        {{ $gettext('Sponsor') }}
       </a>
     </p>
   </footer>
 </template>
-
-<script lang="ts" setup>
-const year = new Date().getFullYear()
-</script>
diff --git a/web/src/components/common/CodeEditor.vue b/web/src/components/common/CodeEditor.vue
index 3e395132..432c117f 100644
--- a/web/src/components/common/CodeEditor.vue
+++ b/web/src/components/common/CodeEditor.vue
@@ -3,7 +3,9 @@ import file from '@/api/panel/file'
 import { decodeBase64 } from '@/utils'
 import { languageByPath } from '@/utils/file'
 import Editor from '@guolao/vue-monaco-editor'
+import { useGettext } from 'vue3-gettext'
 
+const { $gettext } = useGettext()
 const props = defineProps({
   path: {
     type: String,
@@ -22,7 +24,7 @@ const get = () => {
   useRequest(file.content(props.path))
     .onSuccess(({ data }) => {
       content.value = decodeBase64(data.content)
-      window.$message.success('获取成功')
+      window.$message.success($gettext('Retrieved successfully'))
     })
     .onError(() => {
       disabled.value = true
@@ -31,11 +33,11 @@ const get = () => {
 
 const save = () => {
   if (disabled.value) {
-    window.$message.error('当前状态下不可保存')
+    window.$message.error($gettext('Cannot save in current state'))
     return
   }
   useRequest(file.save(props.path, content.value)).onSuccess(() => {
-    window.$message.success('保存成功')
+    window.$message.success($gettext('Saved successfully'))
   })
 }
 
diff --git a/web/src/components/common/PathSelector.vue b/web/src/components/common/PathSelector.vue
index ac167536..e9f28596 100644
--- a/web/src/components/common/PathSelector.vue
+++ b/web/src/components/common/PathSelector.vue
@@ -5,7 +5,9 @@ import { checkName, checkPath, getExt, getIconByExt } from '@/utils'
 import type { DataTableColumns, InputInst } from 'naive-ui'
 import { NButton, NDataTable, NEllipsis, NFlex, NTag } from 'naive-ui'
 import type { RowData } from 'naive-ui/es/data-table/src/interface'
+import { useGettext } from 'vue3-gettext'
 
+const { $gettext } = useGettext()
 const show = defineModel<boolean>('show', { type: Boolean, required: true })
 const path = defineModel<string>('path', { type: String, required: true })
 const props = defineProps({
@@ -15,7 +17,7 @@ const props = defineProps({
   }
 })
 
-const title = computed(() => (props.dir ? '选择目录' : '选择文件'))
+const title = computed(() => (props.dir ? $gettext('Select Directory') : $gettext('Select File')))
 const isInput = ref(false)
 const pathInput = ref<InputInst | null>(null)
 const input = ref('www')
@@ -37,7 +39,7 @@ const columns: DataTableColumns<RowData> = [
     }
   },
   {
-    title: '名称',
+    title: $gettext('Name'),
     key: 'name',
     minWidth: 180,
     defaultSortOrder: false,
@@ -78,7 +80,7 @@ const columns: DataTableColumns<RowData> = [
     }
   },
   {
-    title: '权限',
+    title: $gettext('Permissions'),
     key: 'mode',
     minWidth: 80,
     render(row: any): any {
@@ -90,7 +92,7 @@ const columns: DataTableColumns<RowData> = [
     }
   },
   {
-    title: '所有者 / 组',
+    title: $gettext('Owner / Group'),
     key: 'owner/group',
     minWidth: 120,
     render(row: any): any {
@@ -102,7 +104,7 @@ const columns: DataTableColumns<RowData> = [
     }
   },
   {
-    title: '大小',
+    title: $gettext('Size'),
     key: 'size',
     minWidth: 80,
     render(row: any): any {
@@ -110,7 +112,7 @@ const columns: DataTableColumns<RowData> = [
     }
   },
   {
-    title: '修改时间',
+    title: $gettext('Modification Time'),
     key: 'modify',
     minWidth: 200,
     render(row: any): any {
@@ -143,7 +145,7 @@ const handleInput = () => {
 const handleBlur = () => {
   input.value = input.value.replace(/(^\/)|(\/$)/g, '')
   if (!checkPath(input.value)) {
-    window.$message.error('路径不合法')
+    window.$message.error($gettext('Invalid path'))
     return
   }
 
@@ -203,7 +205,7 @@ const showCreate = (value: string) => {
 
 const handleCreate = () => {
   if (!checkName(createModel.value.path)) {
-    window.$message.error('名称不合法')
+    window.$message.error($gettext('Invalid name'))
     return
   }
 
@@ -211,7 +213,7 @@ const handleCreate = () => {
   useRequest(file.create(fullPath, createModel.value.dir)).onSuccess(() => {
     create.value = false
     refresh()
-    window.$message.success('新建成功')
+    window.$message.success($gettext('Created successfully'))
   })
 }
 
@@ -250,12 +252,12 @@ const handleClose = () => {
     <n-flex>
       <n-popselect
         :options="[
-          { label: '文件', value: 'file' },
-          { label: '文件夹', value: 'folder' }
+          { label: $gettext('File'), value: 'file' },
+          { label: $gettext('Folder'), value: 'folder' }
         ]"
         @update:value="showCreate"
       >
-        <n-button type="primary"> 新建 </n-button>
+        <n-button type="primary"> {{ $gettext('Create') }} </n-button>
       </n-popselect>
       <n-button @click="handleUp">
         <icon-bi-arrow-up />
@@ -263,7 +265,9 @@ const handleClose = () => {
       <n-input-group flex-1>
         <n-tag size="large" v-if="!isInput" flex-1 @click="handleInput">
           <n-breadcrumb separator=">">
-            <n-breadcrumb-item @click.stop="setPath(-1)"> 根目录 </n-breadcrumb-item>
+            <n-breadcrumb-item @click.stop="setPath(-1)">
+              {{ $gettext('Root Directory') }}
+            </n-breadcrumb-item>
             <n-breadcrumb-item
               v-for="(item, index) in splitPath(path, '/')"
               :key="index"
@@ -316,7 +320,7 @@ const handleClose = () => {
   <n-modal
     v-model:show="create"
     preset="card"
-    title="新建"
+    :title="$gettext('Create')"
     style="width: 60vw"
     size="huge"
     :bordered="false"
@@ -324,11 +328,11 @@ const handleClose = () => {
   >
     <n-space vertical>
       <n-form :model="createModel">
-        <n-form-item label="名称">
+        <n-form-item :label="$gettext('Name')">
           <n-input v-model:value="createModel.path" />
         </n-form-item>
       </n-form>
-      <n-button type="info" block @click="handleCreate">提交</n-button>
+      <n-button type="info" block @click="handleCreate">{{ $gettext('Submit') }}</n-button>
     </n-space>
   </n-modal>
 </template>
diff --git a/web/src/components/common/RealtimeLog.vue b/web/src/components/common/RealtimeLog.vue
index 4aeecd81..00204358 100644
--- a/web/src/components/common/RealtimeLog.vue
+++ b/web/src/components/common/RealtimeLog.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import ws from '@/api/ws'
 import type { LogInst } from 'naive-ui'
+import { useGettext } from 'vue3-gettext'
 
+const { $gettext } = useGettext()
 const props = defineProps({
   path: {
     type: String,
@@ -24,7 +26,7 @@ const init = async () => {
   } else if (props.service) {
     cmd = `journalctl -u '${props.service}' -f`
   } else {
-    window.$message.error('path 或 service 不能为空')
+    window.$message.error($gettext('Path or service cannot be empty'))
     return
   }
   ws.exec(cmd)
@@ -39,7 +41,7 @@ const init = async () => {
       }
     })
     .catch(() => {
-      window.$message.error('获取日志流失败')
+      window.$message.error($gettext('Failed to get log stream'))
     })
 }
 
diff --git a/web/src/components/common/RealtimeLogModal.vue b/web/src/components/common/RealtimeLogModal.vue
index d36629a9..db36d989 100644
--- a/web/src/components/common/RealtimeLogModal.vue
+++ b/web/src/components/common/RealtimeLogModal.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import ws from '@/api/ws'
 import type { LogInst } from 'naive-ui'
+import { useGettext } from 'vue3-gettext'
 
+const { $gettext } = useGettext()
 const show = defineModel<boolean>('show', { type: Boolean, required: true })
 const props = defineProps({
   path: {
@@ -28,7 +30,7 @@ const init = async () => {
       }
     })
     .catch(() => {
-      window.$message.error('获取日志流失败')
+      window.$message.error($gettext('Failed to get log stream'))
     })
 }
 
@@ -62,7 +64,7 @@ defineExpose({
   <n-modal
     v-model:show="show"
     preset="card"
-    title="日志"
+    :title="$gettext('Logs')"
     style="width: 80vw"
     size="huge"
     :bordered="false"
diff --git a/web/src/i18n/zh_CN.json b/web/src/i18n/zh_CN.json
deleted file mode 100644
index 45e69c45..00000000
--- a/web/src/i18n/zh_CN.json
+++ /dev/null
@@ -1,218 +0,0 @@
-{
-  "name": "耗子面板",
-  "certIndex": {
-    "title": "证书"
-  },
-  "containerIndex": {
-    "title": "容器"
-  },
-  "cronIndex": {
-    "title": "计划任务"
-  },
-  "fileIndex": {
-    "title": "文件"
-  },
-  "homeUpdate": {
-    "title": "更新面板",
-    "loading": "正在加载更新信息，稍等片刻",
-    "alerts": {
-      "success": "面板更新成功",
-      "info": "取消更新"
-    },
-    "button": {
-      "update": "立即更新"
-    },
-    "confirm": {
-      "update": {
-        "title": "更新面板",
-        "content": "确定更新面板吗？",
-        "positiveText": "确定",
-        "negativeText": "取消",
-        "loading": "面板更新中..."
-      }
-    }
-  },
-  "monitorIndex": {
-    "title": "监控"
-  },
-  "appIndex": {
-    "title": "应用",
-    "alerts": {
-      "cache": "缓存更新成功",
-      "warning": "更新应用前强烈建议先备份/快照，以免出现问题时无法第一时间回滚！",
-      "setup": "设置成功",
-      "install": "任务已提交，请前往后台任务查看进度",
-      "update": "任务已提交，请前往后台任务查看进度",
-      "uninstall": "任务已提交，请前往后台任务查看进度"
-    },
-    "buttons": {
-      "updateCache": "更新缓存",
-      "install": "安装",
-      "manage": "管理",
-      "update": "更新",
-      "uninstall": "卸载"
-    },
-    "confirm": {
-      "update": "更新 {app} 应用可能会重置相关配置到默认状态，确定继续吗？",
-      "uninstall": "确定卸载应用 {app} 吗？"
-    },
-    "columns": {
-      "name": "应用名",
-      "description": "描述",
-      "installedVersion": "已装版本",
-      "show": "首页显示",
-      "actions": "操作"
-    }
-  },
-  "settingIndex": {
-    "title": "设置",
-    "info": "修改面板端口 / 入口后，需要在浏览器地址栏做相应修改方可打开面板！",
-    "edit": {
-      "toasts": {
-        "success": "保存成功"
-      },
-      "fields": {
-        "name": {
-          "label": "面板名称",
-          "placeholder": "耗子面板"
-        },
-        "locale": {
-          "label": "语言",
-          "placeholder": "选择语言"
-        },
-        "username": {
-          "label": "用户名",
-          "placeholder": "admin"
-        },
-        "password": {
-          "label": "密码",
-          "placeholder": "admin"
-        },
-        "email": {
-          "label": "证书默认邮箱",
-          "placeholder": "admin{'@'}example.com"
-        },
-        "port": {
-          "label": "端口",
-          "placeholder": "8888"
-        },
-        "entrance": {
-          "label": "安全入口",
-          "placeholder": "admin"
-        },
-        "offline": {
-          "label": "离线模式"
-        },
-        "https": {
-          "label": "面板 HTTPS"
-        },
-        "cert": {
-          "label": "证书"
-        },
-        "key": {
-          "label": "密钥"
-        },
-        "path": {
-          "label": "默认建站目录",
-          "placeholder": "/www/wwwroot"
-        },
-        "backup": {
-          "label": "默认备份目录",
-          "placeholder": "/www/backup"
-        }
-      },
-      "actions": {
-        "submit": "保存"
-      }
-    }
-  },
-  "sshIndex": {
-    "title": "终端",
-    "alerts": {
-      "save": "保存成功"
-    },
-    "save": {
-      "fields": {
-        "host": {
-          "label": "主机",
-          "placeholder": "主机"
-        },
-        "port": {
-          "label": "端口",
-          "placeholder": "端口"
-        },
-        "username": {
-          "label": "用户名",
-          "placeholder": "用户名"
-        },
-        "password": {
-          "label": "密码",
-          "placeholder": "密码"
-        }
-      },
-      "actions": {
-        "submit": "保存"
-      }
-    }
-  },
-  "websiteIndex": {
-    "title": "网站",
-    "columns": {
-      "name": "网站名",
-      "status": "运行",
-      "path": "目录",
-      "remark": "备注",
-      "actions": "操作"
-    },
-    "create": {
-      "trigger": "创建网站",
-      "title": "创建网站",
-      "fields": {
-        "name": {
-          "label": "网站名",
-          "placeholder": "网站名建议使用英文，设置后不可修改"
-        },
-        "domains": {
-          "label": "域名"
-        },
-        "port": {
-          "label": "端口"
-        },
-        "phpVersion": {
-          "label": "PHP版本",
-          "placeholder": "选择PHP版本"
-        },
-        "db": {
-          "label": "数据库",
-          "placeholder": "选择数据库"
-        },
-        "dbName": {
-          "label": "数据库名",
-          "placeholder": "数据库名"
-        },
-        "dbUser": {
-          "label": "数据库用户",
-          "placeholder": "数据库用户"
-        },
-        "dbPassword": {
-          "label": "数据库密码",
-          "placeholder": "数据库密码"
-        },
-        "path": {
-          "label": "目录",
-          "placeholder": "网站根目录（不填默认为建站目录/网站名）"
-        },
-        "remark": {
-          "label": "备注",
-          "placeholder": "备注"
-        }
-      },
-      "actions": {
-        "submit": "创建"
-      }
-    },
-    "edit": {
-      "trigger": "修改默认页"
-    }
-  }
-}
diff --git a/web/src/locales/translations.json b/web/src/locales/translations.json
index 8151bf95..12b11cd7 100644
--- a/web/src/locales/translations.json
+++ b/web/src/locales/translations.json
@@ -1 +1,11 @@
-{"en":{"Saved successfully":"Saved successfully","Save":"Save","Certificate":"Certificate","Private Key":"Private Key","Panel HTTPS":"Panel HTTPS"},"zh_CN":{},"zh_TW":{}}
\ No newline at end of file
+{
+  "en": {
+    "Saved successfully": "Saved successfully",
+    "Save": "Save",
+    "Certificate": "Certificate",
+    "Private Key": "Private Key",
+    "Panel HTTPS": "Panel HTTPS"
+  },
+  "zh_CN": {},
+  "zh_TW": {}
+}
diff --git a/web/src/main.ts b/web/src/main.ts
index 8e6a6c5b..bae5aa6b 100644
--- a/web/src/main.ts
+++ b/web/src/main.ts
@@ -8,7 +8,7 @@ import App from './App.vue'
 
 import { setupRouter } from '@/router'
 import { setupStore, useThemeStore } from '@/store'
-import { createGettext, setupNaiveDiscreteApi } from '@/utils'
+import { gettext, setupNaiveDiscreteApi } from '@/utils'
 
 import { install as VueMonacoEditorPlugin } from '@guolao/vue-monaco-editor'
 
@@ -29,7 +29,7 @@ async function setupApp() {
   await setupStore(app)
   await setupNaiveDiscreteApi()
   await setupPanel().then(() => {
-    app.use(createGettext)
+    app.use(gettext)
   })
   await setupRouter(app)
   app.mount('#app')
diff --git a/web/src/router/routes/index.ts b/web/src/router/routes/index.ts
index 712c6d78..628b4a0a 100644
--- a/web/src/router/routes/index.ts
+++ b/web/src/router/routes/index.ts
@@ -1,5 +1,5 @@
-import type { RouteModule, RoutesType, RouteType } from '~/types/router'
 import { $gettext } from '@/utils/gettext'
+import type { RouteModule, RoutesType, RouteType } from '~/types/router'
 
 export const basicRoutes: RoutesType = [
   {
diff --git a/web/src/utils/gettext/index.ts b/web/src/utils/gettext/index.ts
index b92f8616..6795d165 100644
--- a/web/src/utils/gettext/index.ts
+++ b/web/src/utils/gettext/index.ts
@@ -2,7 +2,17 @@ import { createGettext as vue3Gettext } from 'vue3-gettext'
 
 import translations from '@/locales/translations.json'
 
-export let gettext: ReturnType<typeof vue3Gettext>
+export const locales = {
+  en: 'English',
+  zh_CN: '简体中文',
+  zh_TW: '繁體中文'
+}
+
+export const gettext: any = vue3Gettext({
+  availableLanguages: locales,
+  defaultLanguage: 'zh_CN',
+  translations: translations
+})
 
 export function $gettext(msgid: string, params?: Record<string, string | number>) {
   return gettext.$gettext(msgid, params)
@@ -16,17 +26,3 @@ export function $ngettext(
 ) {
   return gettext.$ngettext(msgid, plural, n, params)
 }
-
-export function createGettext(): any {
-  gettext = vue3Gettext({
-    availableLanguages: {
-      en: 'English',
-      zh_CN: '简体中文',
-      zh_TW: '繁體中文'
-    },
-    defaultLanguage: 'zh_CN',
-    translations: translations
-  })
-
-  return gettext
-}
diff --git a/web/src/views/app/IndexView.vue b/web/src/views/app/IndexView.vue
index 7aa1e24d..e0885186 100644
--- a/web/src/views/app/IndexView.vue
+++ b/web/src/views/app/IndexView.vue
@@ -88,7 +88,10 @@ const columns: any = [
                   },
                   {
                     default: () => {
-                      return $gettext('Updating app %{ app } may reset related configurations to default state, are you sure to continue?', { app: row.name })
+                      return $gettext(
+                        'Updating app %{ app } may reset related configurations to default state, are you sure to continue?',
+                        { app: row.name }
+                      )
                     },
                     trigger: () => {
                       return h(
@@ -192,13 +195,17 @@ const handleShowChange = (row: any) => {
 
 const handleUpdate = (slug: string) => {
   useRequest(app.update(slug)).onSuccess(() => {
-    window.$message.success($gettext('Task submitted, please check the progress in background tasks'))
+    window.$message.success(
+      $gettext('Task submitted, please check the progress in background tasks')
+    )
   })
 }
 
 const handleUninstall = (slug: string) => {
   useRequest(app.uninstall(slug)).onSuccess(() => {
-    window.$message.success($gettext('Task submitted, please check the progress in background tasks'))
+    window.$message.success(
+      $gettext('Task submitted, please check the progress in background tasks')
+    )
   })
 }
 
@@ -227,7 +234,11 @@ onMounted(() => {
       </n-button>
     </template>
     <n-flex vertical>
-      <n-alert type="warning">{{ $gettext('Before updating apps, it is strongly recommended to backup/snapshot first, so you can roll back immediately if there are any issues!') }}</n-alert>
+      <n-alert type="warning">{{
+        $gettext(
+          'Before updating apps, it is strongly recommended to backup/snapshot first, so you can roll back immediately if there are any issues!'
+        )
+      }}</n-alert>
       <n-data-table
         striped
         remote
diff --git a/web/src/views/app/VersionModal.vue b/web/src/views/app/VersionModal.vue
index defde3a6..b9aa9fa1 100644
--- a/web/src/views/app/VersionModal.vue
+++ b/web/src/views/app/VersionModal.vue
@@ -28,7 +28,9 @@ const options = computed(() => {
 const handleSubmit = () => {
   useRequest(app.install(info.value.slug, model.value.channel))
     .onSuccess(() => {
-      window.$message.success($gettext('Task submitted, please check the progress in background tasks'))
+      window.$message.success(
+        $gettext('Task submitted, please check the progress in background tasks')
+      )
     })
     .onComplete(() => {
       doSubmit.value = false
@@ -76,7 +78,12 @@ const handleClose = () => {
         />
       </n-form-item>
       <n-form-item path="channel" :label="$gettext('Version')">
-        <n-input v-model:value="model.version" :placeholder="$gettext('Please select a channel')" readonly disabled />
+        <n-input
+          v-model:value="model.version"
+          :placeholder="$gettext('Please select a channel')"
+          readonly
+          disabled
+        />
       </n-form-item>
     </n-form>
     <n-button
diff --git a/web/src/views/apps/benchmark/route.ts b/web/src/views/apps/benchmark/route.ts
index 450929a4..ebd767f3 100644
--- a/web/src/views/apps/benchmark/route.ts
+++ b/web/src/views/apps/benchmark/route.ts
@@ -1,5 +1,5 @@
-import type { RouteType } from '~/types/router'
 import { $gettext } from '@/utils/gettext'
+import type { RouteType } from '~/types/router'
 
 const Layout = () => import('@/layout/IndexView.vue')
 
diff --git a/web/src/views/apps/docker/route.ts b/web/src/views/apps/docker/route.ts
index 08372357..02c1ff9b 100644
--- a/web/src/views/apps/docker/route.ts
+++ b/web/src/views/apps/docker/route.ts
@@ -1,5 +1,5 @@
-import type { RouteType } from '~/types/router'
 import { $gettext } from '@/utils/gettext'
+import type { RouteType } from '~/types/router'
 
 const Layout = () => import('@/layout/IndexView.vue')
 
diff --git a/web/src/views/apps/fail2ban/IndexView.vue b/web/src/views/apps/fail2ban/IndexView.vue
index 78fa0d8e..3e7cd8d0 100644
--- a/web/src/views/apps/fail2ban/IndexView.vue
+++ b/web/src/views/apps/fail2ban/IndexView.vue
@@ -331,7 +331,11 @@ onMounted(() => {
                       {{ $gettext('Stop') }}
                     </n-button>
                   </template>
-                  {{ $gettext('Stopping Fail2ban will disable all rules. Are you sure you want to stop?') }}
+                  {{
+                    $gettext(
+                      'Stopping Fail2ban will disable all rules. Are you sure you want to stop?'
+                    )
+                  }}
                 </n-popconfirm>
                 <n-button type="warning" @click="handleRestart">
                   <TheIcon :size="18" icon="material-symbols:replay-rounded" />
@@ -384,13 +388,26 @@ onMounted(() => {
     </n-tabs>
   </common-page>
   <n-modal v-model:show="addJailModal" :title="$gettext('Add Rule')">
-    <n-card closable @close="() => (addJailModal = false)" :title="$gettext('Add Rule')" style="width: 60vw">
+    <n-card
+      closable
+      @close="() => (addJailModal = false)"
+      :title="$gettext('Add Rule')"
+      style="width: 60vw"
+    >
       <n-space vertical>
         <n-alert type="info">
-          {{ $gettext('If an IP exceeds the maximum retries within the find time (seconds), it will be banned for the ban time (seconds)') }}
+          {{
+            $gettext(
+              'If an IP exceeds the maximum retries within the find time (seconds), it will be banned for the ban time (seconds)'
+            )
+          }}
         </n-alert>
         <n-alert type="warning">
-          {{ $gettext('Protected ports are automatically obtained. If you modify the port corresponding to a rule, please delete and re-add the rule, otherwise protection may not be effective') }}
+          {{
+            $gettext(
+              'Protected ports are automatically obtained. If you modify the port corresponding to a rule, please delete and re-add the rule, otherwise protection may not be effective'
+            )
+          }}
         </n-alert>
 
         <n-form :model="addJailModel">
@@ -425,7 +442,10 @@ onMounted(() => {
             v-if="addJailModel.type === 'website' && addJailModel.website_mode === 'path'"
             :label="$gettext('Protection Path')"
           >
-            <n-input v-model:value="addJailModel.website_path" :placeholder="$gettext('Protection Path')" />
+            <n-input
+              v-model:value="addJailModel.website_path"
+              :placeholder="$gettext('Protection Path')"
+            />
           </n-form-item>
           <n-form-item v-if="addJailModel.type === 'service'" :label="$gettext('Service')">
             <n-select
@@ -453,7 +473,12 @@ onMounted(() => {
     </n-card>
   </n-modal>
   <n-modal v-model:show="jailModal" :title="$gettext('View Rule')">
-    <n-card closable @close="() => (jailModal = false)" :title="$gettext('View Rule')" style="width: 60vw">
+    <n-card
+      closable
+      @close="() => (jailModal = false)"
+      :title="$gettext('View Rule')"
+      style="width: 60vw"
+    >
       <n-space vertical>
         <n-card :title="$gettext('Rule Information')" :segmented="true">
           <n-space vertical>
diff --git a/web/src/views/apps/fail2ban/route.ts b/web/src/views/apps/fail2ban/route.ts
index 1d1fb32f..7ccccd0e 100644
--- a/web/src/views/apps/fail2ban/route.ts
+++ b/web/src/views/apps/fail2ban/route.ts
@@ -1,5 +1,5 @@
-import type { RouteType } from '~/types/router'
 import { $gettext } from '@/utils/gettext'
+import type { RouteType } from '~/types/router'
 
 const Layout = () => import('@/layout/IndexView.vue')
 
diff --git a/web/src/views/apps/frp/route.ts b/web/src/views/apps/frp/route.ts
index 09f4ed08..5ea4439a 100644
--- a/web/src/views/apps/frp/route.ts
+++ b/web/src/views/apps/frp/route.ts
@@ -1,5 +1,5 @@
-import type { RouteType } from '~/types/router'
 import { $gettext } from '@/utils/gettext'
+import type { RouteType } from '~/types/router'
 
 const Layout = () => import('@/layout/IndexView.vue')
 
diff --git a/web/src/views/apps/gitea/IndexView.vue b/web/src/views/apps/gitea/IndexView.vue
index a154beec..fd949934 100644
--- a/web/src/views/apps/gitea/IndexView.vue
+++ b/web/src/views/apps/gitea/IndexView.vue
@@ -125,7 +125,11 @@ onMounted(() => {
       <n-tab-pane name="config" :tab="$gettext('Modify Configuration')">
         <n-space vertical>
           <n-alert type="warning">
-            {{ $gettext('This modifies the Gitea configuration file. If you do not understand the meaning of each parameter, please do not modify it randomly!') }}
+            {{
+              $gettext(
+                'This modifies the Gitea configuration file. If you do not understand the meaning of each parameter, please do not modify it randomly!'
+              )
+            }}
           </n-alert>
           <Editor
             v-model:value="config"
diff --git a/web/src/views/apps/gitea/route.ts b/web/src/views/apps/gitea/route.ts
index 66753dd5..bdab7035 100644
--- a/web/src/views/apps/gitea/route.ts
+++ b/web/src/views/apps/gitea/route.ts
@@ -1,5 +1,5 @@
-import type { RouteType } from '~/types/router'
 import { $gettext } from '@/utils/gettext'
+import type { RouteType } from '~/types/router'
 
 const Layout = () => import('@/layout/IndexView.vue')
 
diff --git a/web/src/views/apps/memcached/IndexView.vue b/web/src/views/apps/memcached/IndexView.vue
index d9924527..fe48d3dc 100644
--- a/web/src/views/apps/memcached/IndexView.vue
+++ b/web/src/views/apps/memcached/IndexView.vue
@@ -136,7 +136,11 @@ onMounted(() => {
                       {{ $gettext('Stop') }}
                     </n-button>
                   </template>
-                  {{ $gettext('Stopping Memcached will cause websites using Memcached to become inaccessible. Are you sure you want to stop?') }}
+                  {{
+                    $gettext(
+                      'Stopping Memcached will cause websites using Memcached to become inaccessible. Are you sure you want to stop?'
+                    )
+                  }}
                 </n-popconfirm>
                 <n-button type="warning" @click="handleRestart">
                   <TheIcon :size="18" icon="material-symbols:replay-rounded" />
diff --git a/web/src/views/apps/memcached/route.ts b/web/src/views/apps/memcached/route.ts
index 08863bab..b93d8658 100644
--- a/web/src/views/apps/memcached/route.ts
+++ b/web/src/views/apps/memcached/route.ts
@@ -1,5 +1,5 @@
-import type { RouteType } from '~/types/router'
 import { $gettext } from '@/utils/gettext'
+import type { RouteType } from '~/types/router'
 
 const Layout = () => import('@/layout/IndexView.vue')
 
diff --git a/web/src/views/apps/minio/IndexView.vue b/web/src/views/apps/minio/IndexView.vue
index 07ab2462..7454ae0f 100644
--- a/web/src/views/apps/minio/IndexView.vue
+++ b/web/src/views/apps/minio/IndexView.vue
@@ -120,7 +120,11 @@ onMounted(() => {
       <n-tab-pane name="env" :tab="$gettext('Environment Variables')">
         <n-space vertical>
           <n-alert type="warning">
-            {{ $gettext('This is modifying the Minio environment variable file /etc/default/minio. If you do not understand the meaning of each parameter, please do not modify it arbitrarily!') }}
+            {{
+              $gettext(
+                'This is modifying the Minio environment variable file /etc/default/minio. If you do not understand the meaning of each parameter, please do not modify it arbitrarily!'
+              )
+            }}
           </n-alert>
           <Editor
             v-model:value="env"
diff --git a/web/src/views/apps/minio/route.ts b/web/src/views/apps/minio/route.ts
index 64cff44d..ae13f909 100644
--- a/web/src/views/apps/minio/route.ts
+++ b/web/src/views/apps/minio/route.ts
@@ -1,5 +1,5 @@
-import type { RouteType } from '~/types/router'
 import { $gettext } from '@/utils/gettext'
+import type { RouteType } from '~/types/router'
 
 const Layout = () => import('@/layout/IndexView.vue')
 
diff --git a/web/src/views/apps/mysql/IndexView.vue b/web/src/views/apps/mysql/IndexView.vue
index 4b07d16e..5dfc1c42 100644
--- a/web/src/views/apps/mysql/IndexView.vue
+++ b/web/src/views/apps/mysql/IndexView.vue
@@ -174,7 +174,11 @@ onMounted(() => {
                       {{ $gettext('Stop') }}
                     </n-button>
                   </template>
-                  {{ $gettext('Stopping MySQL will cause websites using MySQL to become inaccessible. Are you sure you want to stop?') }}
+                  {{
+                    $gettext(
+                      'Stopping MySQL will cause websites using MySQL to become inaccessible. Are you sure you want to stop?'
+                    )
+                  }}
                 </n-popconfirm>
                 <n-button type="warning" @click="handleRestart">
                   <TheIcon :size="18" icon="material-symbols:replay-rounded" />
@@ -190,7 +194,9 @@ onMounted(() => {
                 type="password"
                 show-password-on="click"
               ></n-input>
-              <n-button type="primary" @click="handleSetRootPassword">{{ $gettext('Save Changes') }}</n-button>
+              <n-button type="primary" @click="handleSetRootPassword">{{
+                $gettext('Save Changes')
+              }}</n-button>
             </n-space>
           </n-card>
         </n-space>
@@ -198,7 +204,11 @@ onMounted(() => {
       <n-tab-pane name="config" :tab="$gettext('Modify Configuration')">
         <n-space vertical>
           <n-alert type="warning">
-            {{ $gettext('This modifies the MySQL main configuration file. If you do not understand the meaning of each parameter, please do not modify it randomly!') }}
+            {{
+              $gettext(
+                'This modifies the MySQL main configuration file. If you do not understand the meaning of each parameter, please do not modify it randomly!'
+              )
+            }}
           </n-alert>
           <Editor
             v-model:value="config"
diff --git a/web/src/views/apps/mysql/route.ts b/web/src/views/apps/mysql/route.ts
index 248a9cdf..82d4cd8f 100644
--- a/web/src/views/apps/mysql/route.ts
+++ b/web/src/views/apps/mysql/route.ts
@@ -1,5 +1,5 @@
-import type { RouteType } from '~/types/router'
 import { $gettext } from '@/utils/gettext'
+import type { RouteType } from '~/types/router'
 
 const Layout = () => import('@/layout/IndexView.vue')
 
diff --git a/web/src/views/apps/nginx/IndexView.vue b/web/src/views/apps/nginx/IndexView.vue
index 14272e8c..d1f7e562 100644
--- a/web/src/views/apps/nginx/IndexView.vue
+++ b/web/src/views/apps/nginx/IndexView.vue
@@ -157,7 +157,11 @@ onMounted(() => {
                     {{ $gettext('Stop') }}
                   </n-button>
                 </template>
-                {{ $gettext('Stopping OpenResty will cause all websites to become inaccessible. Are you sure you want to stop?') }}
+                {{
+                  $gettext(
+                    'Stopping OpenResty will cause all websites to become inaccessible. Are you sure you want to stop?'
+                  )
+                }}
               </n-popconfirm>
               <n-button type="warning" @click="handleRestart">
                 <TheIcon :size="18" icon="material-symbols:replay-rounded" />
@@ -174,7 +178,11 @@ onMounted(() => {
       <n-tab-pane name="config" :tab="$gettext('Modify Configuration')">
         <n-space vertical>
           <n-alert type="warning">
-            {{ $gettext('This modifies the OpenResty main configuration file. If you do not understand the meaning of each parameter, please do not modify it randomly!') }}
+            {{
+              $gettext(
+                'This modifies the OpenResty main configuration file. If you do not understand the meaning of each parameter, please do not modify it randomly!'
+              )
+            }}
           </n-alert>
           <Editor
             v-model:value="config"
diff --git a/web/src/views/apps/nginx/route.ts b/web/src/views/apps/nginx/route.ts
index 9829d052..9a144da9 100644
--- a/web/src/views/apps/nginx/route.ts
+++ b/web/src/views/apps/nginx/route.ts
@@ -1,5 +1,5 @@
-import type { RouteType } from '~/types/router'
 import { $gettext } from '@/utils/gettext'
+import type { RouteType } from '~/types/router'
 
 const Layout = () => import('@/layout/IndexView.vue')
 
diff --git a/web/src/views/apps/php/PhpView.vue b/web/src/views/apps/php/PhpView.vue
index 68950395..b4ca7de1 100644
--- a/web/src/views/apps/php/PhpView.vue
+++ b/web/src/views/apps/php/PhpView.vue
@@ -104,7 +104,9 @@ const extensionColumns: any = [
               },
               {
                 default: () => {
-                  return $gettext('Are you sure you want to uninstall %{ name }?', { name: row.name })
+                  return $gettext('Are you sure you want to uninstall %{ name }?', {
+                    name: row.name
+                  })
                 },
                 trigger: () => {
                   return h(
@@ -303,7 +305,12 @@ onMounted(() => {
                       {{ $gettext('Stop') }}
                     </n-button>
                   </template>
-                  {{ $gettext('Stopping PHP %{ version } will cause websites using PHP %{ version } to become inaccessible. Are you sure you want to stop?', { version: version }) }}
+                  {{
+                    $gettext(
+                      'Stopping PHP %{ version } will cause websites using PHP %{ version } to become inaccessible. Are you sure you want to stop?',
+                      { version: version }
+                    )
+                  }}
                 </n-popconfirm>
                 <n-button type="warning" @click="handleRestart">
                   <TheIcon :size="18" icon="material-symbols:replay-rounded" />
@@ -334,7 +341,12 @@ onMounted(() => {
       <n-tab-pane name="config" :tab="$gettext('Main Configuration')">
         <n-space vertical>
           <n-alert type="warning">
-            {{ $gettext('This modifies the PHP %{ version } main configuration file. If you do not understand the meaning of each parameter, please do not modify it randomly!', { version: version }) }}
+            {{
+              $gettext(
+                'This modifies the PHP %{ version } main configuration file. If you do not understand the meaning of each parameter, please do not modify it randomly!',
+                { version: version }
+              )
+            }}
           </n-alert>
           <Editor
             v-model:value="config"
@@ -353,7 +365,12 @@ onMounted(() => {
       <n-tab-pane name="fpm-config" :tab="$gettext('FPM Configuration')">
         <n-space vertical>
           <n-alert type="warning">
-            {{ $gettext('This modifies the PHP %{ version } FPM configuration file. If you do not understand the meaning of each parameter, please do not modify it randomly!', { version: version }) }}
+            {{
+              $gettext(
+                'This modifies the PHP %{ version } FPM configuration file. If you do not understand the meaning of each parameter, please do not modify it randomly!',
+                { version: version }
+              )
+            }}
           </n-alert>
           <Editor
             v-model:value="fpmConfig"
diff --git a/web/src/views/apps/phpmyadmin/IndexView.vue b/web/src/views/apps/phpmyadmin/IndexView.vue
index e4afca3d..4d6a462c 100644
--- a/web/src/views/apps/phpmyadmin/IndexView.vue
+++ b/web/src/views/apps/phpmyadmin/IndexView.vue
@@ -84,7 +84,11 @@ onMounted(() => {
       <n-tab-pane name="config" :tab="$gettext('Modify Configuration')">
         <n-space vertical>
           <n-alert type="warning">
-            {{ $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!') }}
+            {{
+              $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"
diff --git a/web/src/views/apps/podman/IndexView.vue b/web/src/views/apps/podman/IndexView.vue
index 90490e46..ac4bc768 100644
--- a/web/src/views/apps/podman/IndexView.vue
+++ b/web/src/views/apps/podman/IndexView.vue
@@ -108,7 +108,11 @@ onMounted(() => {
       <n-tab-pane name="status" :tab="$gettext('Running Status')">
         <n-flex vertical>
           <n-alert type="info">
-            {{ $gettext('Podman is a daemonless container management tool. Being in a stopped state is normal and does not affect usage!') }}
+            {{
+              $gettext(
+                'Podman is a daemonless container management tool. Being in a stopped state is normal and does not affect usage!'
+              )
+            }}
           </n-alert>
           <n-card :title="$gettext('Running Status')">
             <template #header-extra>
@@ -147,7 +151,11 @@ onMounted(() => {
       <n-tab-pane name="registryConfig" :tab="$gettext('Registry Configuration')">
         <n-space vertical>
           <n-alert type="warning">
-            {{ $gettext('This modifies the Podman registry configuration file (/etc/containers/registries.conf)') }}
+            {{
+              $gettext(
+                'This modifies the Podman registry configuration file (/etc/containers/registries.conf)'
+              )
+            }}
           </n-alert>
           <Editor
             v-model:value="registryConfig"
@@ -166,7 +174,11 @@ onMounted(() => {
       <n-tab-pane name="storageConfig" :tab="$gettext('Storage Configuration')">
         <n-space vertical>
           <n-alert type="warning">
-            {{ $gettext('This modifies the Podman storage configuration file (/etc/containers/storage.conf)') }}
+            {{
+              $gettext(
+                'This modifies the Podman storage configuration file (/etc/containers/storage.conf)'
+              )
+            }}
           </n-alert>
           <Editor
             v-model:value="storageConfig"
diff --git a/web/src/views/apps/podman/route.ts b/web/src/views/apps/podman/route.ts
index 015288b5..6215db4a 100644
--- a/web/src/views/apps/podman/route.ts
+++ b/web/src/views/apps/podman/route.ts
@@ -1,5 +1,5 @@
-import type { RouteType } from '~/types/router'
 import { $gettext } from '@/utils/gettext'
+import type { RouteType } from '~/types/router'
 
 const Layout = () => import('@/layout/IndexView.vue')
 
diff --git a/web/src/views/apps/postgresql/IndexView.vue b/web/src/views/apps/postgresql/IndexView.vue
index d6f5156d..8159e988 100644
--- a/web/src/views/apps/postgresql/IndexView.vue
+++ b/web/src/views/apps/postgresql/IndexView.vue
@@ -167,7 +167,11 @@ onMounted(() => {
                       {{ $gettext('Stop') }}
                     </n-button>
                   </template>
-                  {{ $gettext('Stopping PostgreSQL will cause websites using PostgreSQL to become inaccessible. Are you sure you want to stop?') }}
+                  {{
+                    $gettext(
+                      'Stopping PostgreSQL will cause websites using PostgreSQL to become inaccessible. Are you sure you want to stop?'
+                    )
+                  }}
                 </n-popconfirm>
                 <n-button type="warning" @click="handleRestart">
                   <TheIcon :size="18" icon="material-symbols:replay-rounded" />
@@ -185,7 +189,11 @@ onMounted(() => {
       <n-tab-pane name="config" :tab="$gettext('Main Configuration')">
         <n-space vertical>
           <n-alert type="warning">
-            {{ $gettext('This modifies the PostgreSQL main configuration file. If you do not understand the meaning of each parameter, please do not modify it randomly!') }}
+            {{
+              $gettext(
+                'This modifies the PostgreSQL main configuration file. If you do not understand the meaning of each parameter, please do not modify it randomly!'
+              )
+            }}
           </n-alert>
           <Editor
             v-model:value="config"
@@ -204,7 +212,11 @@ onMounted(() => {
       <n-tab-pane name="user-config" :tab="$gettext('User Configuration')">
         <n-space vertical>
           <n-alert type="warning">
-            {{ $gettext('This modifies the PostgreSQL user configuration file. If you do not understand the meaning of each parameter, please do not modify it randomly!') }}
+            {{
+              $gettext(
+                'This modifies the PostgreSQL user configuration file. If you do not understand the meaning of each parameter, please do not modify it randomly!'
+              )
+            }}
           </n-alert>
           <Editor
             v-model:value="userConfig"
diff --git a/web/src/views/apps/postgresql/route.ts b/web/src/views/apps/postgresql/route.ts
index a660aecf..7de3e44f 100644
--- a/web/src/views/apps/postgresql/route.ts
+++ b/web/src/views/apps/postgresql/route.ts
@@ -1,5 +1,5 @@
-import type { RouteType } from '~/types/router'
 import { $gettext } from '@/utils/gettext'
+import type { RouteType } from '~/types/router'
 
 const Layout = () => import('@/layout/IndexView.vue')
 
diff --git a/web/src/views/apps/pureftpd/IndexView.vue b/web/src/views/apps/pureftpd/IndexView.vue
index 8b33d895..e63db62e 100644
--- a/web/src/views/apps/pureftpd/IndexView.vue
+++ b/web/src/views/apps/pureftpd/IndexView.vue
@@ -83,7 +83,9 @@ const userColumns: any = [
           },
           {
             default: () => {
-              return $gettext('Are you sure you want to delete user %{ username }?', { username: row.username })
+              return $gettext('Are you sure you want to delete user %{ username }?', {
+                username: row.username
+              })
             },
             trigger: () => {
               return h(
@@ -244,7 +246,11 @@ onMounted(() => {
                       {{ $gettext('Stop') }}
                     </n-button>
                   </template>
-                  {{ $gettext('Stopping Pure-Ftpd will cause FTP service to be unavailable. Are you sure you want to stop it?') }}
+                  {{
+                    $gettext(
+                      'Stopping Pure-Ftpd will cause FTP service to be unavailable. Are you sure you want to stop it?'
+                    )
+                  }}
                 </n-popconfirm>
                 <n-button type="warning" @click="handleRestart">
                   <TheIcon :size="18" icon="material-symbols:replay-rounded" />
@@ -289,7 +295,12 @@ onMounted(() => {
     </n-tabs>
   </common-page>
   <n-modal v-model:show="addUserModal" :title="$gettext('Create User')">
-    <n-card closable @close="() => (addUserModal = false)" :title="$gettext('Create User')" style="width: 60vw">
+    <n-card
+      closable
+      @close="() => (addUserModal = false)"
+      :title="$gettext('Create User')"
+      style="width: 60vw"
+    >
       <n-form :model="addUserModel">
         <n-form-item path="username" :label="$gettext('Username')">
           <n-input
@@ -305,7 +316,9 @@ onMounted(() => {
             type="password"
             show-password-on="click"
             @keydown.enter.prevent
-            :placeholder="$gettext('It is recommended to use the generator to generate a random password')"
+            :placeholder="
+              $gettext('It is recommended to use the generator to generate a random password')
+            "
           />
         </n-form-item>
         <n-form-item path="path" :label="$gettext('Directory')">
@@ -333,7 +346,9 @@ onMounted(() => {
             v-model:value="changePasswordModel.password"
             type="text"
             @keydown.enter.prevent
-            :placeholder="$gettext('It is recommended to use the generator to generate a random password')"
+            :placeholder="
+              $gettext('It is recommended to use the generator to generate a random password')
+            "
           />
         </n-form-item>
       </n-form>
diff --git a/web/src/views/apps/redis/IndexView.vue b/web/src/views/apps/redis/IndexView.vue
index ebd0d90e..9b14c264 100644
--- a/web/src/views/apps/redis/IndexView.vue
+++ b/web/src/views/apps/redis/IndexView.vue
@@ -133,7 +133,11 @@ onMounted(() => {
                       {{ $gettext('Stop') }}
                     </n-button>
                   </template>
-                  {{ $gettext('Stopping Redis will cause websites using Redis to become inaccessible. Are you sure you want to stop?') }}
+                  {{
+                    $gettext(
+                      'Stopping Redis will cause websites using Redis to become inaccessible. Are you sure you want to stop?'
+                    )
+                  }}
                 </n-popconfirm>
                 <n-button type="warning" @click="handleRestart">
                   <TheIcon :size="18" icon="material-symbols:replay-rounded" />
@@ -147,7 +151,11 @@ onMounted(() => {
       <n-tab-pane name="config" :tab="$gettext('Main Configuration')">
         <n-space vertical>
           <n-alert type="warning">
-            {{ $gettext('This modifies the Redis main configuration file. If you do not understand the meaning of each parameter, please do not modify it randomly!') }}
+            {{
+              $gettext(
+                'This modifies the Redis main configuration file. If you do not understand the meaning of each parameter, please do not modify it randomly!'
+              )
+            }}
           </n-alert>
           <Editor
             v-model:value="config"
diff --git a/web/src/views/apps/redis/route.ts b/web/src/views/apps/redis/route.ts
index 17f11a84..6ead3055 100644
--- a/web/src/views/apps/redis/route.ts
+++ b/web/src/views/apps/redis/route.ts
@@ -1,5 +1,5 @@
-import type { RouteType } from '~/types/router'
 import { $gettext } from '@/utils/gettext'
+import type { RouteType } from '~/types/router'
 
 const Layout = () => import('@/layout/IndexView.vue')
 
diff --git a/web/src/views/apps/s3fs/IndexView.vue b/web/src/views/apps/s3fs/IndexView.vue
index c4287dba..703af8a2 100644
--- a/web/src/views/apps/s3fs/IndexView.vue
+++ b/web/src/views/apps/s3fs/IndexView.vue
@@ -44,7 +44,9 @@ const columns: any = [
           },
           {
             default: () => {
-              return $gettext('Are you sure you want to delete mount %{ path }?', { path: row.path })
+              return $gettext('Are you sure you want to delete mount %{ path }?', {
+                path: row.path
+              })
             },
             trigger: () => {
               return h(
@@ -128,7 +130,12 @@ onMounted(() => {
     </n-card>
   </common-page>
   <n-modal v-model:show="addMountModal" :title="$gettext('Add Mount')">
-    <n-card closable @close="() => (addMountModal = false)" :title="$gettext('Add Mount')" style="width: 60vw">
+    <n-card
+      closable
+      @close="() => (addMountModal = false)"
+      :title="$gettext('Add Mount')"
+      style="width: 60vw"
+    >
       <n-form :model="addMountModel">
         <n-form-item path="bucket" label="Bucket">
           <n-input
@@ -159,7 +166,11 @@ onMounted(() => {
             v-model:value="addMountModel.url"
             type="text"
             @keydown.enter.prevent
-            :placeholder="$gettext('Enter complete URL of region endpoint (e.g., https://oss-cn-beijing.aliyuncs.com)')"
+            :placeholder="
+              $gettext(
+                'Enter complete URL of region endpoint (e.g., https://oss-cn-beijing.aliyuncs.com)'
+              )
+            "
           />
         </n-form-item>
         <n-form-item path="path" :label="$gettext('Mount Directory')">
diff --git a/web/src/views/apps/supervisor/IndexView.vue b/web/src/views/apps/supervisor/IndexView.vue
index 4cb27dd4..bae5b415 100644
--- a/web/src/views/apps/supervisor/IndexView.vue
+++ b/web/src/views/apps/supervisor/IndexView.vue
@@ -141,7 +141,9 @@ const processColumns: any = [
               },
               {
                 default: () => {
-                  return $gettext('Are you sure you want to stop process %{ name }?', { name: row.name })
+                  return $gettext('Are you sure you want to stop process %{ name }?', {
+                    name: row.name
+                  })
                 },
                 trigger: () => {
                   return h(
@@ -168,7 +170,9 @@ const processColumns: any = [
               },
               {
                 default: () => {
-                  return $gettext('Are you sure you want to restart process %{ name }?', { name: row.name })
+                  return $gettext('Are you sure you want to restart process %{ name }?', {
+                    name: row.name
+                  })
                 },
                 trigger: () => {
                   return h(
@@ -194,7 +198,9 @@ const processColumns: any = [
           },
           {
             default: () => {
-              return $gettext('Are you sure you want to delete process %{ name }?', { name: row.name })
+              return $gettext('Are you sure you want to delete process %{ name }?', {
+                name: row.name
+              })
             },
             trigger: () => {
               return h(
@@ -401,7 +407,11 @@ onUnmounted(() => {
                       {{ $gettext('Stop') }}
                     </n-button>
                   </template>
-                  {{ $gettext('Stopping Supervisor will cause all processes managed by Supervisor to be killed. Are you sure you want to stop?') }}
+                  {{
+                    $gettext(
+                      'Stopping Supervisor will cause all processes managed by Supervisor to be killed. Are you sure you want to stop?'
+                    )
+                  }}
                 </n-popconfirm>
                 <n-button type="warning" @click="handleRestart">
                   <TheIcon :size="18" icon="material-symbols:replay-rounded" />
@@ -439,7 +449,11 @@ onUnmounted(() => {
       <n-tab-pane name="config" :tab="$gettext('Main Configuration')">
         <n-space vertical>
           <n-alert type="warning">
-            {{ $gettext('This modifies the Supervisor main configuration file. If you do not understand the meaning of each parameter, please do not modify it randomly!') }}
+            {{
+              $gettext(
+                'This modifies the Supervisor main configuration file. If you do not understand the meaning of each parameter, please do not modify it randomly!'
+              )
+            }}
           </n-alert>
           <Editor
             v-model:value="config"
diff --git a/web/src/views/apps/toolbox/IndexView.vue b/web/src/views/apps/toolbox/IndexView.vue
index 97f502b2..e3a76039 100644
--- a/web/src/views/apps/toolbox/IndexView.vue
+++ b/web/src/views/apps/toolbox/IndexView.vue
@@ -121,7 +121,9 @@ const handleSyncTime = () => {
     <n-tabs v-model:value="currentTab" type="line" animated>
       <n-tab-pane name="dns" tab="DNS">
         <n-flex vertical>
-          <n-alert type="warning"> {{ $gettext('DNS modifications will revert to default after system restart.') }} </n-alert>
+          <n-alert type="warning">
+            {{ $gettext('DNS modifications will revert to default after system restart.') }}
+          </n-alert>
           <n-form>
             <n-form-item label="DNS1">
               <n-input v-model:value="dns1" />
@@ -135,7 +137,13 @@ const handleSyncTime = () => {
       <n-tab-pane name="swap" tab="SWAP">
         <n-flex vertical>
           <n-alert type="info">
-            {{ $gettext('Total %{ total }, used %{ used }, free %{ free }', { total: swapTotal, used: swapUsed, free: swapFree }) }}
+            {{
+              $gettext('Total %{ total }, used %{ used }, free %{ free }', {
+                total: swapTotal,
+                used: swapUsed,
+                free: swapFree
+              })
+            }}
           </n-alert>
           <n-form>
             <n-form-item :label="$gettext('SWAP Size')">
@@ -168,16 +176,28 @@ const handleSyncTime = () => {
       </n-tab-pane>
       <n-tab-pane name="time" :tab="$gettext('Time')">
         <n-flex vertical>
-          <n-alert type="info"> {{ $gettext('After manually changing the time, it may still be overwritten by system automatic time synchronization.') }} </n-alert>
+          <n-alert type="info">
+            {{
+              $gettext(
+                'After manually changing the time, it may still be overwritten by system automatic time synchronization.'
+              )
+            }}
+          </n-alert>
           <n-form>
             <n-form-item :label="$gettext('Select Timezone')">
-              <n-select v-model:value="timezone" :placeholder="$gettext('Please select a timezone')" :options="timezones" />
+              <n-select
+                v-model:value="timezone"
+                :placeholder="$gettext('Please select a timezone')"
+                :options="timezones"
+              />
             </n-form-item>
             <n-form-item :label="$gettext('Modify Time')">
               <n-date-picker v-model:value="time" type="datetime" clearable />
             </n-form-item>
             <n-form-item :label="$gettext('NTP Time Synchronization')">
-              <n-button type="info" @click="handleSyncTime">{{ $gettext('Synchronize Time') }}</n-button>
+              <n-button type="info" @click="handleSyncTime">{{
+                $gettext('Synchronize Time')
+              }}</n-button>
             </n-form-item>
           </n-form>
         </n-flex>
diff --git a/web/src/views/backup/ListView.vue b/web/src/views/backup/ListView.vue
index cd50f3dd..198b7436 100644
--- a/web/src/views/backup/ListView.vue
+++ b/web/src/views/backup/ListView.vue
@@ -179,8 +179,12 @@ onUnmounted(() => {
 <template>
   <n-flex vertical :size="20">
     <n-flex>
-      <n-button type="primary" @click="createModal = true">{{ $gettext('Create Backup') }}</n-button>
-      <n-button type="primary" @click="uploadModal = true" ghost>{{ $gettext('Upload Backup') }}</n-button>
+      <n-button type="primary" @click="createModal = true">{{
+        $gettext('Create Backup')
+      }}</n-button>
+      <n-button type="primary" @click="uploadModal = true" ghost>{{
+        $gettext('Upload Backup')
+      }}</n-button>
     </n-flex>
     <n-data-table
       striped
@@ -215,7 +219,11 @@ onUnmounted(() => {
   >
     <n-form :model="createModel">
       <n-form-item v-if="type == 'website'" path="name" :label="$gettext('Website')">
-        <n-select v-model:value="createModel.target" :options="websites" :placeholder="$gettext('Select website')" />
+        <n-select
+          v-model:value="createModel.target"
+          :options="websites"
+          :placeholder="$gettext('Select website')"
+        />
       </n-form-item>
       <n-form-item v-if="type != 'website'" path="name" :label="$gettext('Database Name')">
         <n-input
@@ -248,7 +256,11 @@ onUnmounted(() => {
   >
     <n-form :model="restoreModel">
       <n-form-item v-if="type == 'website'" path="name" :label="$gettext('Website')">
-        <n-select v-model:value="restoreModel.target" :options="websites" :placeholder="$gettext('Select website')" />
+        <n-select
+          v-model:value="restoreModel.target"
+          :options="websites"
+          :placeholder="$gettext('Select website')"
+        />
       </n-form-item>
       <n-form-item v-if="type != 'website'" path="name" :label="$gettext('Database')">
         <n-input v-model:value="restoreModel.target" type="text" @keydown.enter.prevent />
diff --git a/web/src/views/cert/AccountView.vue b/web/src/views/cert/AccountView.vue
index 6d01aa15..55902011 100644
--- a/web/src/views/cert/AccountView.vue
+++ b/web/src/views/cert/AccountView.vue
@@ -147,9 +147,12 @@ const { loading, data, page, total, pageSize, pageCount, refresh } = usePaginati
 )
 
 const handleUpdateAccount = () => {
-  messageReactive = window.$message.loading($gettext('Registering account with CA, please wait patiently'), {
-    duration: 0
-  })
+  messageReactive = window.$message.loading(
+    $gettext('Registering account with CA, please wait patiently'),
+    {
+      duration: 0
+    }
+  )
   useRequest(cert.accountUpdate(updateAccount.value, updateAccountModel.value))
     .onSuccess(() => {
       refresh()
@@ -209,9 +212,17 @@ onUnmounted(() => {
     :segmented="false"
   >
     <n-space vertical>
-      <n-alert type="info">{{ $gettext('Google and SSL.com require obtaining KID and HMAC from their official websites first') }}</n-alert>
+      <n-alert type="info">{{
+        $gettext(
+          'Google and SSL.com require obtaining KID and HMAC from their official websites first'
+        )
+      }}</n-alert>
       <n-alert type="warning">
-        {{ $gettext('Google is not accessible in mainland China, other CAs depend on network conditions, recommend using GoogleCN or Let\'s Encrypt') }}
+        {{
+          $gettext(
+            "Google is not accessible in mainland China, other CAs depend on network conditions, recommend using GoogleCN or Let's Encrypt"
+          )
+        }}
       </n-alert>
       <n-form :model="updateAccountModel">
         <n-form-item path="ca" :label="$gettext('CA')">
diff --git a/web/src/views/cert/CertView.vue b/web/src/views/cert/CertView.vue
index a6e88353..3b1bd4e9 100644
--- a/web/src/views/cert/CertView.vue
+++ b/web/src/views/cert/CertView.vue
@@ -442,7 +442,11 @@ onUnmounted(() => {
   >
     <n-space vertical>
       <n-alert v-if="updateModel.type != 'upload'" type="info">
-        {{ $gettext('You can automatically issue and deploy certificates by selecting any website/DNS, or manually enter domain names and set DNS resolution to issue certificates, or fill in deployment scripts to automatically deploy certificates.') }}
+        {{
+          $gettext(
+            'You can automatically issue and deploy certificates by selecting any website/DNS, or manually enter domain names and set DNS resolution to issue certificates, or fill in deployment scripts to automatically deploy certificates.'
+          )
+        }}
       </n-alert>
       <n-form :model="updateModel">
         <n-form-item v-if="updateModel.type != 'upload'" path="domains" :label="$gettext('Domain')">
@@ -469,7 +473,11 @@ onUnmounted(() => {
             :options="websites"
           />
         </n-form-item>
-        <n-form-item v-if="updateModel.type != 'upload'" path="account_id" :label="$gettext('Account')">
+        <n-form-item
+          v-if="updateModel.type != 'upload'"
+          path="account_id"
+          :label="$gettext('Account')"
+        >
           <n-select
             v-model:value="updateModel.account_id"
             :placeholder="$gettext('Select account for certificate issuance')"
@@ -485,7 +493,11 @@ onUnmounted(() => {
             :options="dns"
           />
         </n-form-item>
-        <n-form-item v-if="updateModel.type == 'upload'" path="cert" :label="$gettext('Certificate')">
+        <n-form-item
+          v-if="updateModel.type == 'upload'"
+          path="cert"
+          :label="$gettext('Certificate')"
+        >
           <n-input
             v-model:value="updateModel.cert"
             type="textarea"
@@ -493,7 +505,11 @@ onUnmounted(() => {
             :autosize="{ minRows: 10, maxRows: 15 }"
           />
         </n-form-item>
-        <n-form-item v-if="updateModel.type == 'upload'" path="key" :label="$gettext('Private Key')">
+        <n-form-item
+          v-if="updateModel.type == 'upload'"
+          path="key"
+          :label="$gettext('Private Key')"
+        >
           <n-input
             v-model:value="updateModel.key"
             type="textarea"
@@ -501,11 +517,19 @@ onUnmounted(() => {
             :autosize="{ minRows: 10, maxRows: 15 }"
           />
         </n-form-item>
-        <n-form-item v-if="updateModel.type != 'upload'" path="key" :label="$gettext('Deployment Script')">
+        <n-form-item
+          v-if="updateModel.type != 'upload'"
+          path="key"
+          :label="$gettext('Deployment Script')"
+        >
           <n-input
             v-model:value="updateModel.script"
             type="textarea"
-            :placeholder="$gettext('The {cert} and {key} in the script will be replaced with the certificate and private key content')"
+            :placeholder="
+              $gettext(
+                'The {cert} and {key} in the script will be replaced with the certificate and private key content'
+              )
+            "
             :autosize="{ minRows: 5, maxRows: 10 }"
           />
         </n-form-item>
diff --git a/web/src/views/cert/CreateAccountModal.vue b/web/src/views/cert/CreateAccountModal.vue
index cf282d8c..4d5bc9ed 100644
--- a/web/src/views/cert/CreateAccountModal.vue
+++ b/web/src/views/cert/CreateAccountModal.vue
@@ -35,9 +35,12 @@ const showEAB = computed(() => {
 })
 
 const handleCreateAccount = () => {
-  messageReactive = window.$message.loading($gettext('Registering account with CA, please wait patiently'), {
-    duration: 0
-  })
+  messageReactive = window.$message.loading(
+    $gettext('Registering account with CA, please wait patiently'),
+    {
+      duration: 0
+    }
+  )
   useRequest(cert.accountCreate(model.value))
     .onSuccess(() => {
       window.$bus.emit('cert:refresh-account')
@@ -65,9 +68,17 @@ const handleCreateAccount = () => {
     :segmented="false"
   >
     <n-space vertical>
-      <n-alert type="info">{{ $gettext('Google and SSL.com require obtaining KID and HMAC from their official websites first') }}</n-alert>
+      <n-alert type="info">{{
+        $gettext(
+          'Google and SSL.com require obtaining KID and HMAC from their official websites first'
+        )
+      }}</n-alert>
       <n-alert type="warning">
-        {{ $gettext('Google is not accessible in mainland China, and other CAs depend on network conditions. GoogleCN or Let\'s Encrypt are recommended') }}
+        {{
+          $gettext(
+            "Google is not accessible in mainland China, and other CAs depend on network conditions. GoogleCN or Let's Encrypt are recommended"
+          )
+        }}
       </n-alert>
       <n-form :model="model">
         <n-form-item path="ca" :label="$gettext('CA')">
diff --git a/web/src/views/cert/CreateCertModal.vue b/web/src/views/cert/CreateCertModal.vue
index f6bfeb1e..5ba0242a 100644
--- a/web/src/views/cert/CreateCertModal.vue
+++ b/web/src/views/cert/CreateCertModal.vue
@@ -64,7 +64,11 @@ const handleCreateCert = () => {
   >
     <n-space vertical>
       <n-alert type="info">
-        {{ $gettext('You can automatically issue and deploy certificates by selecting either Website or DNS, or you can manually enter domain names and set up DNS resolution to issue certificates') }}
+        {{
+          $gettext(
+            'You can automatically issue and deploy certificates by selecting either Website or DNS, or you can manually enter domain names and set up DNS resolution to issue certificates'
+          )
+        }}
       </n-alert>
       <n-form :model="model">
         <n-form-item :label="$gettext('Domain')">
diff --git a/web/src/views/cert/CreateDnsModal.vue b/web/src/views/cert/CreateDnsModal.vue
index 109ede72..969db394 100644
--- a/web/src/views/cert/CreateDnsModal.vue
+++ b/web/src/views/cert/CreateDnsModal.vue
@@ -50,7 +50,11 @@ const handleCreateDNS = async () => {
     <n-space vertical>
       <n-form :model="model">
         <n-form-item path="name" :label="$gettext('Comment Name')">
-          <n-input v-model:value="model.name" type="text" :placeholder="$gettext('Enter comment name')" />
+          <n-input
+            v-model:value="model.name"
+            type="text"
+            :placeholder="$gettext('Enter comment name')"
+          />
         </n-form-item>
         <n-form-item path="type" :label="$gettext('DNS')">
           <n-select
@@ -61,19 +65,39 @@ const handleCreateDNS = async () => {
           />
         </n-form-item>
         <n-form-item v-if="model.type == 'aliyun'" path="ak" label="Access Key">
-          <n-input v-model:value="model.data.ak" type="text" :placeholder="$gettext('Enter Aliyun Access Key')" />
+          <n-input
+            v-model:value="model.data.ak"
+            type="text"
+            :placeholder="$gettext('Enter Aliyun Access Key')"
+          />
         </n-form-item>
         <n-form-item v-if="model.type == 'aliyun'" path="sk" label="Secret Key">
-          <n-input v-model:value="model.data.sk" type="text" :placeholder="$gettext('Enter Aliyun Secret Key')" />
+          <n-input
+            v-model:value="model.data.sk"
+            type="text"
+            :placeholder="$gettext('Enter Aliyun Secret Key')"
+          />
         </n-form-item>
         <n-form-item v-if="model.type == 'tencent'" path="ak" label="SecretId">
-          <n-input v-model:value="model.data.ak" type="text" :placeholder="$gettext('Enter Tencent Cloud SecretId')" />
+          <n-input
+            v-model:value="model.data.ak"
+            type="text"
+            :placeholder="$gettext('Enter Tencent Cloud SecretId')"
+          />
         </n-form-item>
         <n-form-item v-if="model.type == 'tencent'" path="sk" label="SecretKey">
-          <n-input v-model:value="model.data.sk" type="text" :placeholder="$gettext('Enter Tencent Cloud SecretKey')" />
+          <n-input
+            v-model:value="model.data.sk"
+            type="text"
+            :placeholder="$gettext('Enter Tencent Cloud SecretKey')"
+          />
         </n-form-item>
         <n-form-item v-if="model.type == 'huawei'" path="ak" label="AccessKeyId">
-          <n-input v-model:value="model.data.ak" type="text" :placeholder="$gettext('Enter Huawei Cloud AccessKeyId')" />
+          <n-input
+            v-model:value="model.data.ak"
+            type="text"
+            :placeholder="$gettext('Enter Huawei Cloud AccessKeyId')"
+          />
         </n-form-item>
         <n-form-item v-if="model.type == 'huawei'" path="sk" label="SecretAccessKey">
           <n-input
@@ -83,7 +107,11 @@ const handleCreateDNS = async () => {
           />
         </n-form-item>
         <n-form-item v-if="model.type == 'westcn'" path="sk" label="Username">
-          <n-input v-model:value="model.data.sk" type="text" :placeholder="$gettext('Enter Western Digital Username')" />
+          <n-input
+            v-model:value="model.data.sk"
+            type="text"
+            :placeholder="$gettext('Enter Western Digital Username')"
+          />
         </n-form-item>
         <n-form-item v-if="model.type == 'westcn'" path="ak" label="API Password">
           <n-input
@@ -100,13 +128,25 @@ const handleCreateDNS = async () => {
           />
         </n-form-item>
         <n-form-item v-if="model.type == 'godaddy'" path="ak" label="Token">
-          <n-input v-model:value="model.data.ak" type="text" :placeholder="$gettext('Enter GoDaddy Token')" />
+          <n-input
+            v-model:value="model.data.ak"
+            type="text"
+            :placeholder="$gettext('Enter GoDaddy Token')"
+          />
         </n-form-item>
         <n-form-item v-if="model.type == 'gcore'" path="ak" label="API Key">
-          <n-input v-model:value="model.data.ak" type="text" :placeholder="$gettext('Enter G-Core API Key')" />
+          <n-input
+            v-model:value="model.data.ak"
+            type="text"
+            :placeholder="$gettext('Enter G-Core API Key')"
+          />
         </n-form-item>
         <n-form-item v-if="model.type == 'porkbun'" path="ak" label="API Key">
-          <n-input v-model:value="model.data.ak" type="text" :placeholder="$gettext('Enter Porkbun API Key')" />
+          <n-input
+            v-model:value="model.data.ak"
+            type="text"
+            :placeholder="$gettext('Enter Porkbun API Key')"
+          />
         </n-form-item>
         <n-form-item v-if="model.type == 'porkbun'" path="sk" label="Secret Key">
           <n-input
@@ -123,7 +163,11 @@ const handleCreateDNS = async () => {
           />
         </n-form-item>
         <n-form-item v-if="model.type == 'namecheap'" path="ak" label="API Key">
-          <n-input v-model:value="model.data.ak" type="text" :placeholder="$gettext('Enter Namecheap API Key')" />
+          <n-input
+            v-model:value="model.data.ak"
+            type="text"
+            :placeholder="$gettext('Enter Namecheap API Key')"
+          />
         </n-form-item>
         <n-form-item v-if="model.type == 'namesilo'" path="ak" label="API Token">
           <n-input
@@ -133,10 +177,18 @@ const handleCreateDNS = async () => {
           />
         </n-form-item>
         <n-form-item v-if="model.type == 'namecom'" path="sk" label="Username">
-          <n-input v-model:value="model.data.sk" type="text" :placeholder="$gettext('Enter Name.com Username')" />
+          <n-input
+            v-model:value="model.data.sk"
+            type="text"
+            :placeholder="$gettext('Enter Name.com Username')"
+          />
         </n-form-item>
         <n-form-item v-if="model.type == 'namecom'" path="ak" label="Token">
-          <n-input v-model:value="model.data.ak" type="text" :placeholder="$gettext('Enter Name.com Token')" />
+          <n-input
+            v-model:value="model.data.ak"
+            type="text"
+            :placeholder="$gettext('Enter Name.com Token')"
+          />
         </n-form-item>
 
         <n-form-item v-if="model.type == 'cloudns'" path="ak" label="Auth ID">
@@ -154,7 +206,11 @@ const handleCreateDNS = async () => {
           />
         </n-form-item>
         <n-form-item v-if="model.type == 'duckdns'" path="ak" label="Token">
-          <n-input v-model:value="model.data.ak" type="text" :placeholder="$gettext('Enter Duck DNS Token')" />
+          <n-input
+            v-model:value="model.data.ak"
+            type="text"
+            :placeholder="$gettext('Enter Duck DNS Token')"
+          />
         </n-form-item>
         <n-form-item v-if="model.type == 'hetzner'" path="ak" label="Auth API Token">
           <n-input
@@ -164,10 +220,18 @@ const handleCreateDNS = async () => {
           />
         </n-form-item>
         <n-form-item v-if="model.type == 'linode'" path="ak" label="Token">
-          <n-input v-model:value="model.data.ak" type="text" :placeholder="$gettext('Enter Linode Token')" />
+          <n-input
+            v-model:value="model.data.ak"
+            type="text"
+            :placeholder="$gettext('Enter Linode Token')"
+          />
         </n-form-item>
         <n-form-item v-if="model.type == 'vercel'" path="ak" label="Token">
-          <n-input v-model:value="model.data.ak" type="text" :placeholder="$gettext('Enter Vercel Token')" />
+          <n-input
+            v-model:value="model.data.ak"
+            type="text"
+            :placeholder="$gettext('Enter Vercel Token')"
+          />
         </n-form-item>
       </n-form>
       <n-button type="info" block @click="handleCreateDNS">{{ $gettext('Submit') }}</n-button>
diff --git a/web/src/views/cert/DnsView.vue b/web/src/views/cert/DnsView.vue
index 912e336e..addadd7e 100644
--- a/web/src/views/cert/DnsView.vue
+++ b/web/src/views/cert/DnsView.vue
@@ -188,7 +188,11 @@ onUnmounted(() => {
     <n-space vertical>
       <n-form :model="updateDNSModel">
         <n-form-item path="name" :label="$gettext('Note Name')">
-          <n-input v-model:value="updateDNSModel.name" type="text" :placeholder="$gettext('Enter note name')" />
+          <n-input
+            v-model:value="updateDNSModel.name"
+            type="text"
+            :placeholder="$gettext('Enter note name')"
+          />
         </n-form-item>
         <n-form-item path="type" :label="$gettext('DNS')">
           <n-select
diff --git a/web/src/views/cert/ObtainModal.vue b/web/src/views/cert/ObtainModal.vue
index b9bf30e5..2944f889 100644
--- a/web/src/views/cert/ObtainModal.vue
+++ b/web/src/views/cert/ObtainModal.vue
@@ -38,7 +38,11 @@ const handleSubmit = () => {
   } else if (model.value.type == 'manual') {
     useRequest(cert.manualDNS(id.value))
       .onSuccess(({ data }: { data: any }) => {
-        window.$message.info($gettext('Please set up DNS resolution for the domain first, then continue with the issuance'))
+        window.$message.info(
+          $gettext(
+            'Please set up DNS resolution for the domain first, then continue with the issuance'
+          )
+        )
         const d = window.$dialog.info({
           style: 'width: 60vw',
           title: $gettext('DNS Records to Set'),
diff --git a/web/src/views/container/ComposeView.vue b/web/src/views/container/ComposeView.vue
index ecfcde9b..ebffe0b1 100644
--- a/web/src/views/container/ComposeView.vue
+++ b/web/src/views/container/ComposeView.vue
@@ -125,7 +125,16 @@ const columns: any = [
                 },
                 {
                   default: () => [
-                    h('strong', {}, { default: () => $gettext(`Are you sure you want to start compose %{ name }?`, { name: row.name }) }),
+                    h(
+                      'strong',
+                      {},
+                      {
+                        default: () =>
+                          $gettext(`Are you sure you want to start compose %{ name }?`, {
+                            name: row.name
+                          })
+                      }
+                    ),
                     h(
                       NCheckbox,
                       {
@@ -165,7 +174,9 @@ const columns: any = [
           },
           {
             default: () => {
-              return $gettext(`Are you sure you want to stop compose %{ name }?`, { name: row.name })
+              return $gettext(`Are you sure you want to stop compose %{ name }?`, {
+                name: row.name
+              })
             },
             trigger: () => {
               return h(
@@ -194,7 +205,9 @@ const columns: any = [
           },
           {
             default: () => {
-              return $gettext(`Are you sure you want to delete compose %{ name }?`, { name: row.name })
+              return $gettext(`Are you sure you want to delete compose %{ name }?`, {
+                name: row.name
+              })
             },
             trigger: () => {
               return h(
@@ -270,7 +283,9 @@ onMounted(() => {
 <template>
   <n-flex vertical :size="20">
     <n-flex>
-      <n-button type="primary" @click="createModal = true">{{ $gettext('Create Compose') }}</n-button>
+      <n-button type="primary" @click="createModal = true">{{
+        $gettext('Create Compose')
+      }}</n-button>
     </n-flex>
     <n-data-table
       striped
diff --git a/web/src/views/container/ContainerCreate.vue b/web/src/views/container/ContainerCreate.vue
index cd332f39..70424f60 100644
--- a/web/src/views/container/ContainerCreate.vue
+++ b/web/src/views/container/ContainerCreate.vue
@@ -156,7 +156,11 @@ onMounted(() => {
           {{ $gettext('Expose All') }}
         </n-radio>
       </n-form-item>
-      <n-form-item path="ports" :label="$gettext('Port Mapping')" v-if="!createModel.publish_all_ports">
+      <n-form-item
+        path="ports"
+        :label="$gettext('Port Mapping')"
+        v-if="!createModel.publish_all_ports"
+      >
         <n-space vertical>
           <n-table striped>
             <thead>
@@ -226,7 +230,11 @@ onMounted(() => {
                     UDP
                   </n-radio>
                 </td>
-                <td><n-button @click="removePortRow(index)" size="small">{{ $gettext('Delete') }}</n-button></td>
+                <td>
+                  <n-button @click="removePortRow(index)" size="small">{{
+                    $gettext('Delete')
+                  }}</n-button>
+                </td>
               </tr>
             </tbody>
           </n-table>
@@ -273,7 +281,11 @@ onMounted(() => {
                     {{ $gettext('Read-Only') }}
                   </n-radio>
                 </td>
-                <td><n-button @click="removeVolumeRow(index)" size="small">{{ $gettext('Delete') }}</n-button></td>
+                <td>
+                  <n-button @click="removeVolumeRow(index)" size="small">{{
+                    $gettext('Delete')
+                  }}</n-button>
+                </td>
               </tr>
             </tbody>
           </n-table>
@@ -284,7 +296,10 @@ onMounted(() => {
         <n-dynamic-input v-model:value="createModel.command" :placeholder="$gettext('Command')" />
       </n-form-item>
       <n-form-item path="entrypoint" :label="$gettext('Entrypoint')">
-        <n-dynamic-input v-model:value="createModel.entrypoint" :placeholder="$gettext('Entrypoint')" />
+        <n-dynamic-input
+          v-model:value="createModel.entrypoint"
+          :placeholder="$gettext('Entrypoint')"
+        />
       </n-form-item>
       <n-row :gutter="[0, 24]">
         <n-col :span="8">
diff --git a/web/src/views/container/ContainerView.vue b/web/src/views/container/ContainerView.vue
index 23c734c4..7b636713 100644
--- a/web/src/views/container/ContainerView.vue
+++ b/web/src/views/container/ContainerView.vue
@@ -399,8 +399,12 @@ onMounted(() => {
 <template>
   <n-flex vertical :size="20">
     <n-flex>
-      <n-button type="primary" @click="containerCreateModal = true">{{ $gettext('Create Container') }}</n-button>
-      <n-button type="primary" @click="handlePrune" ghost>{{ $gettext('Cleanup Containers') }}</n-button>
+      <n-button type="primary" @click="containerCreateModal = true">{{
+        $gettext('Create Container')
+      }}</n-button>
+      <n-button type="primary" @click="handlePrune" ghost>{{
+        $gettext('Cleanup Containers')
+      }}</n-button>
       <n-button-group>
         <n-button @click="bulkStart">{{ $gettext('Start') }}</n-button>
         <n-button @click="bulkStop">{{ $gettext('Stop') }}</n-button>
diff --git a/web/src/views/container/ImageView.vue b/web/src/views/container/ImageView.vue
index 4bfba2d3..34ca9298 100644
--- a/web/src/views/container/ImageView.vue
+++ b/web/src/views/container/ImageView.vue
@@ -149,7 +149,9 @@ onMounted(() => {
   <n-flex vertical :size="20">
     <n-flex>
       <n-button type="primary" @click="pullModal = true">{{ $gettext('Pull Image') }}</n-button>
-      <n-button type="primary" @click="handlePrune" ghost>{{ $gettext('Cleanup Images') }}</n-button>
+      <n-button type="primary" @click="handlePrune" ghost>{{
+        $gettext('Cleanup Images')
+      }}</n-button>
     </n-flex>
     <n-data-table
       striped
diff --git a/web/src/views/container/NetworkView.vue b/web/src/views/container/NetworkView.vue
index c55eb3f8..b85c59d3 100644
--- a/web/src/views/container/NetworkView.vue
+++ b/web/src/views/container/NetworkView.vue
@@ -188,8 +188,12 @@ onMounted(() => {
 <template>
   <n-flex vertical :size="20">
     <n-flex>
-      <n-button type="primary" @click="createModal = true">{{ $gettext('Create Network') }}</n-button>
-      <n-button type="primary" @click="handlePrune" ghost>{{ $gettext('Cleanup Networks') }}</n-button>
+      <n-button type="primary" @click="createModal = true">{{
+        $gettext('Create Network')
+      }}</n-button>
+      <n-button type="primary" @click="handlePrune" ghost>{{
+        $gettext('Cleanup Networks')
+      }}</n-button>
     </n-flex>
     <n-data-table
       striped
diff --git a/web/src/views/container/VolumeView.vue b/web/src/views/container/VolumeView.vue
index 1c6cfccb..d1d44f4a 100644
--- a/web/src/views/container/VolumeView.vue
+++ b/web/src/views/container/VolumeView.vue
@@ -142,8 +142,12 @@ onMounted(() => {
 <template>
   <n-flex vertical :size="20">
     <n-flex>
-      <n-button type="primary" @click="createModal = true">{{ $gettext('Create Volume') }}</n-button>
-      <n-button type="primary" @click="handlePrune" ghost>{{ $gettext('Cleanup Volumes') }}</n-button>
+      <n-button type="primary" @click="createModal = true">{{
+        $gettext('Create Volume')
+      }}</n-button>
+      <n-button type="primary" @click="handlePrune" ghost>{{
+        $gettext('Cleanup Volumes')
+      }}</n-button>
     </n-flex>
     <n-data-table
       striped
diff --git a/web/src/views/dashboard/UpdateView.vue b/web/src/views/dashboard/UpdateView.vue
index 53c9f6cc..66be8b20 100644
--- a/web/src/views/dashboard/UpdateView.vue
+++ b/web/src/views/dashboard/UpdateView.vue
@@ -79,7 +79,11 @@ const handleUpdate = () => {
       </n-timeline-item>
     </n-timeline>
     <div v-else pt-40>
-      <n-result status="418" title="Loading..." :description="$gettext('Loading update information, please wait a moment')" />
+      <n-result
+        status="418"
+        title="Loading..."
+        :description="$gettext('Loading update information, please wait a moment')"
+      />
     </div>
   </common-page>
 </template>
diff --git a/web/src/views/database/CreateDatabaseModal.vue b/web/src/views/database/CreateDatabaseModal.vue
index f874221c..f4bc180d 100644
--- a/web/src/views/database/CreateDatabaseModal.vue
+++ b/web/src/views/database/CreateDatabaseModal.vue
@@ -78,7 +78,11 @@ watch(
       <n-form-item path="create_user" :label="$gettext('Create User')">
         <n-switch v-model:value="createModel.create_user" />
       </n-form-item>
-      <n-form-item v-if="!createModel.create_user" path="username" :label="$gettext('Authorized User')">
+      <n-form-item
+        v-if="!createModel.create_user"
+        path="username"
+        :label="$gettext('Authorized User')"
+      >
         <n-input
           v-model:value="createModel.username"
           type="text"
diff --git a/web/src/views/database/CreateUserModal.vue b/web/src/views/database/CreateUserModal.vue
index 2dee7ef4..cc291ff4 100644
--- a/web/src/views/database/CreateUserModal.vue
+++ b/web/src/views/database/CreateUserModal.vue
@@ -101,7 +101,10 @@ watch(
         />
       </n-form-item>
       <n-form-item path="privileges" :label="$gettext('Privileges')">
-        <n-dynamic-input v-model:value="createModel.privileges" :placeholder="$gettext('Enter database name')" />
+        <n-dynamic-input
+          v-model:value="createModel.privileges"
+          :placeholder="$gettext('Enter database name')"
+        />
       </n-form-item>
       <n-form-item path="remark" :label="$gettext('Comment')">
         <n-input
diff --git a/web/src/views/database/UpdateUserModal.vue b/web/src/views/database/UpdateUserModal.vue
index f8547d45..39007a70 100644
--- a/web/src/views/database/UpdateUserModal.vue
+++ b/web/src/views/database/UpdateUserModal.vue
@@ -56,7 +56,10 @@ watch(
         />
       </n-form-item>
       <n-form-item path="privileges" :label="$gettext('Privileges')">
-        <n-dynamic-input v-model:value="updateModel.privileges" :placeholder="$gettext('Enter database name')" />
+        <n-dynamic-input
+          v-model:value="updateModel.privileges"
+          :placeholder="$gettext('Enter database name')"
+        />
       </n-form-item>
       <n-form-item path="remark" :label="$gettext('Comment')">
         <n-input
diff --git a/web/src/views/database/route.ts b/web/src/views/database/route.ts
index 3b7df2b8..1c65c4da 100644
--- a/web/src/views/database/route.ts
+++ b/web/src/views/database/route.ts
@@ -1,5 +1,5 @@
-import type { RouteType } from '~/types/router'
 import { $gettext } from '@/utils/gettext'
+import type { RouteType } from '~/types/router'
 
 const Layout = () => import('@/layout/IndexView.vue')
 
diff --git a/web/src/views/error-page/NotFound.vue b/web/src/views/error-page/NotFound.vue
index 7d82a77f..bbb2dbfd 100644
--- a/web/src/views/error-page/NotFound.vue
+++ b/web/src/views/error-page/NotFound.vue
@@ -7,7 +7,11 @@ const { replace } = useRouter()
 
 <template>
   <AppPage>
-    <n-result :description="$gettext('Sorry, the page you visited does not exist.')" m-auto status="404">
+    <n-result
+      :description="$gettext('Sorry, the page you visited does not exist.')"
+      m-auto
+      status="404"
+    >
       <template #icon>
         <img src="@/assets/images/404.webp" width="500" />
       </template>
diff --git a/web/src/views/file/ListTable.vue b/web/src/views/file/ListTable.vue
index ce5ecb5f..6b629145 100644
--- a/web/src/views/file/ListTable.vue
+++ b/web/src/views/file/ListTable.vue
@@ -61,7 +61,11 @@ const options = computed<DropdownOption[]>(() => {
   if (selectedRow.value == null) return []
   const options = [
     {
-      label: selectedRow.value.dir ? $gettext('Open') : isImage(selectedRow.value.name) ? $gettext('Preview') : $gettext('Edit'),
+      label: selectedRow.value.dir
+        ? $gettext('Open')
+        : isImage(selectedRow.value.name)
+          ? $gettext('Preview')
+          : $gettext('Edit'),
       key: selectedRow.value.dir ? 'open' : isImage(selectedRow.value.name) ? 'preview' : 'edit'
     },
     { label: $gettext('Copy'), key: 'copy' },
@@ -295,7 +299,11 @@ const columns: DataTableColumns<RowData> = [
                   { label: $gettext('Move'), value: 'move' },
                   { label: $gettext('Permission'), value: 'permission' },
                   { label: $gettext('Compress'), value: 'compress' },
-                  { label: $gettext('Uncompress'), value: 'uncompress', disabled: !isCompress(row.name) }
+                  {
+                    label: $gettext('Uncompress'),
+                    value: 'uncompress',
+                    disabled: !isCompress(row.name)
+                  }
                 ],
                 onUpdateValue: (value) => {
                   switch (value) {
@@ -308,7 +316,11 @@ const columns: DataTableColumns<RowData> = [
                           force: false
                         }
                       ]
-                      window.$message.success($gettext('Marked successfully, please navigate to the destination path to paste'))
+                      window.$message.success(
+                        $gettext(
+                          'Marked successfully, please navigate to the destination path to paste'
+                        )
+                      )
                       break
                     case 'move':
                       markedType.value = 'move'
@@ -319,7 +331,11 @@ const columns: DataTableColumns<RowData> = [
                           force: false
                         }
                       ]
-                      window.$message.success($gettext('Marked successfully, please navigate to the destination path to paste'))
+                      window.$message.success(
+                        $gettext(
+                          'Marked successfully, please navigate to the destination path to paste'
+                        )
+                      )
                       break
                     case 'permission':
                       selected.value = [row.full]
@@ -402,9 +418,9 @@ const handleRename = () => {
             .onSuccess(() => {
               window.$bus.emit('file:refresh')
               window.$message.success(
-                $gettext('Renamed %{ source } to %{ target } successfully', { 
-                  source: renameModel.value.source, 
-                  target: renameModel.value.target 
+                $gettext('Renamed %{ source } to %{ target } successfully', {
+                  source: renameModel.value.source,
+                  target: renameModel.value.target
                 })
               )
             })
@@ -418,9 +434,9 @@ const handleRename = () => {
         .onSuccess(() => {
           window.$bus.emit('file:refresh')
           window.$message.success(
-            $gettext('Renamed %{ source } to %{ target } successfully', { 
-              source: renameModel.value.source, 
-              target: renameModel.value.target 
+            $gettext('Renamed %{ source } to %{ target } successfully', {
+              source: renameModel.value.source,
+              target: renameModel.value.target
             })
           )
         })
@@ -555,7 +571,9 @@ const handleSelect = (key: string) => {
           force: false
         }
       ]
-      window.$message.success($gettext('Marked successfully, please navigate to the destination path to paste'))
+      window.$message.success(
+        $gettext('Marked successfully, please navigate to the destination path to paste')
+      )
       break
     case 'move':
       markedType.value = 'move'
@@ -566,7 +584,9 @@ const handleSelect = (key: string) => {
           force: false
         }
       ]
-      window.$message.success($gettext('Marked successfully, please navigate to the destination path to paste'))
+      window.$message.success(
+        $gettext('Marked successfully, please navigate to the destination path to paste')
+      )
       break
     case 'permission':
       selected.value = [selectedRow.value.full]
diff --git a/web/src/views/file/PathInput.vue b/web/src/views/file/PathInput.vue
index 23bd93db..55f7f181 100644
--- a/web/src/views/file/PathInput.vue
+++ b/web/src/views/file/PathInput.vue
@@ -129,7 +129,9 @@ onUnmounted(() => {
     <n-input-group flex-1>
       <n-tag size="large" v-if="!isInput" flex-1 @click="handleInput">
         <n-breadcrumb separator=">">
-          <n-breadcrumb-item @click.stop="setPath(-1)"> {{ $gettext('Root Directory') }} </n-breadcrumb-item>
+          <n-breadcrumb-item @click.stop="setPath(-1)">
+            {{ $gettext('Root Directory') }}
+          </n-breadcrumb-item>
           <n-breadcrumb-item
             v-for="(item, index) in splitPath(path, '/')"
             :key="index"
@@ -151,7 +153,9 @@ onUnmounted(() => {
     <n-input-group w-400>
       <n-input v-model:value="search.keyword" :placeholder="$gettext('Enter search content')">
         <template #suffix>
-          <n-checkbox v-model:checked="search.sub"> {{ $gettext('Include subdirectories') }} </n-checkbox>
+          <n-checkbox v-model:checked="search.sub">
+            {{ $gettext('Include subdirectories') }}
+          </n-checkbox>
         </template>
       </n-input>
       <n-button type="primary" @click="handleSearch">
diff --git a/web/src/views/file/UploadModal.vue b/web/src/views/file/UploadModal.vue
index 00531c04..00f1dd45 100644
--- a/web/src/views/file/UploadModal.vue
+++ b/web/src/views/file/UploadModal.vue
@@ -48,7 +48,11 @@ const uploadRequest = ({ file, onFinish, onError, onProgress }: UploadCustomRequ
             <the-icon :size="48" icon="bi:arrow-up-square" />
           </div>
           <NText text-18> {{ $gettext('Click or drag files to this area to upload') }}</NText>
-          <NP depth="3" m-10> {{ $gettext('For large files, it is recommended to use SFTP and other methods to upload') }} </NP>
+          <NP depth="3" m-10>
+            {{
+              $gettext('For large files, it is recommended to use SFTP and other methods to upload')
+            }}
+          </NP>
         </n-upload-dragger>
       </n-upload>
     </n-flex>
diff --git a/web/src/views/firewall/CreateModal.vue b/web/src/views/firewall/CreateModal.vue
index 47e7ed2f..fd2d0e07 100644
--- a/web/src/views/firewall/CreateModal.vue
+++ b/web/src/views/firewall/CreateModal.vue
@@ -129,7 +129,11 @@ const handleCreate = async () => {
       <n-form-item path="address" :label="$gettext('Target')">
         <n-input
           v-model:value="createModel.address"
-          :placeholder="$gettext('Optional IP or IP range: 127.0.0.1 or 172.16.0.0/24 (multiple separated by commas)')"
+          :placeholder="
+            $gettext(
+              'Optional IP or IP range: 127.0.0.1 or 172.16.0.0/24 (multiple separated by commas)'
+            )
+          "
         />
       </n-form-item>
       <n-form-item path="strategy" :label="$gettext('Strategy')">
diff --git a/web/src/views/firewall/route.ts b/web/src/views/firewall/route.ts
index 8023d158..7048144f 100644
--- a/web/src/views/firewall/route.ts
+++ b/web/src/views/firewall/route.ts
@@ -1,5 +1,5 @@
-import type { RouteType } from '~/types/router'
 import { $gettext } from '@/utils/gettext'
+import type { RouteType } from '~/types/router'
 
 const Layout = () => import('@/layout/IndexView.vue')
 
diff --git a/web/src/views/login/IndexView.vue b/web/src/views/login/IndexView.vue
index 7292c374..ea4da3e5 100644
--- a/web/src/views/login/IndexView.vue
+++ b/web/src/views/login/IndexView.vue
@@ -47,7 +47,9 @@ async function handleLogin() {
     return
   }
   if (!key) {
-    window.$message.warning($gettext('Failed to get encryption public key, please refresh the page and try again'))
+    window.$message.warning(
+      $gettext('Failed to get encryption public key, please refresh the page and try again')
+    )
     return
   }
   useRequest(
diff --git a/web/src/views/monitor/IndexView.vue b/web/src/views/monitor/IndexView.vue
index 81416994..82496b85 100644
--- a/web/src/views/monitor/IndexView.vue
+++ b/web/src/views/monitor/IndexView.vue
@@ -294,7 +294,12 @@ const net = ref<any>({
   },
   legend: {
     align: 'left',
-    data: [$gettext('Total Out'), $gettext('Total In'), $gettext('Per Second Out'), $gettext('Per Second In')]
+    data: [
+      $gettext('Total Out'),
+      $gettext('Total In'),
+      $gettext('Per Second Out'),
+      $gettext('Per Second In')
+    ]
   },
   xAxis: [{ type: 'category', boundaryGap: false, data: data.value.times }],
   yAxis: [
diff --git a/web/src/views/monitor/route.ts b/web/src/views/monitor/route.ts
index c79eae8a..4fc2696a 100644
--- a/web/src/views/monitor/route.ts
+++ b/web/src/views/monitor/route.ts
@@ -1,5 +1,5 @@
-import type { RouteType } from '~/types/router'
 import { $gettext } from '@/utils/gettext'
+import type { RouteType } from '~/types/router'
 
 const Layout = () => import('@/layout/IndexView.vue')
 
diff --git a/web/src/views/setting/SettingBase.vue b/web/src/views/setting/SettingBase.vue
index c37ad5a8..9177e4b9 100644
--- a/web/src/views/setting/SettingBase.vue
+++ b/web/src/views/setting/SettingBase.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import setting from '@/api/panel/setting'
 import { useThemeStore } from '@/store'
+import { locales as availableLocales } from '@/utils'
 import { useGettext } from 'vue3-gettext'
 
 const { $gettext } = useGettext()
@@ -24,11 +25,14 @@ const { data: model } = useRequest(setting.list, {
   }
 })
 
-const locales = [
-  { label: 'English', value: 'en' },
-  { label: '简体中文', value: 'zh_CN' },
-  { label: '繁體中文', value: 'zh_TW' }
-]
+const locales = computed(() => {
+  return Object.entries(availableLocales).map(([code, name]: [string, string]) => {
+    return {
+      label: name,
+      value: code
+    }
+  })
+})
 
 const handleSave = () => {
   useRequest(setting.update(model.value)).onSuccess(() => {
diff --git a/web/src/views/setting/SettingHttps.vue b/web/src/views/setting/SettingHttps.vue
index 111e60d4..863e7018 100644
--- a/web/src/views/setting/SettingHttps.vue
+++ b/web/src/views/setting/SettingHttps.vue
@@ -31,7 +31,13 @@ const handleSave = () => {
 
 <template>
   <n-space vertical>
-    <n-alert type="warning"> {{ $gettext('Incorrect certificates may cause the panel to be inaccessible. Please proceed with caution!') }}</n-alert>
+    <n-alert type="warning">
+      {{
+        $gettext(
+          'Incorrect certificates may cause the panel to be inaccessible. Please proceed with caution!'
+        )
+      }}</n-alert
+    >
     <n-form>
       <n-form-item :label="$gettext('Panel HTTPS')">
         <n-switch v-model:value="model.https" />
diff --git a/web/src/views/setting/route.ts b/web/src/views/setting/route.ts
index 4b8c6b1b..e3aa1bc9 100644
--- a/web/src/views/setting/route.ts
+++ b/web/src/views/setting/route.ts
@@ -1,5 +1,5 @@
-import type { RouteType } from '~/types/router'
 import { $gettext } from '@/utils/gettext'
+import type { RouteType } from '~/types/router'
 
 const Layout = () => import('@/layout/IndexView.vue')
 
diff --git a/web/src/views/ssh/CreateModal.vue b/web/src/views/ssh/CreateModal.vue
index 8d9cbd4f..eed45fe6 100644
--- a/web/src/views/ssh/CreateModal.vue
+++ b/web/src/views/ssh/CreateModal.vue
@@ -95,7 +95,9 @@ const handleSubmit = () => {
     </n-form>
     <n-row :gutter="[0, 24]" pt-20>
       <n-col :span="24">
-        <n-button type="info" block :loading="loading" @click="handleSubmit"> {{ $gettext('Submit') }} </n-button>
+        <n-button type="info" block :loading="loading" @click="handleSubmit">
+          {{ $gettext('Submit') }}
+        </n-button>
       </n-col>
     </n-row>
   </n-modal>
diff --git a/web/src/views/ssh/UpdateModal.vue b/web/src/views/ssh/UpdateModal.vue
index 37ff53d0..95708177 100644
--- a/web/src/views/ssh/UpdateModal.vue
+++ b/web/src/views/ssh/UpdateModal.vue
@@ -101,7 +101,9 @@ watch(show, async () => {
     </n-form>
     <n-row :gutter="[0, 24]" pt-20>
       <n-col :span="24">
-        <n-button type="info" block :loading="loading" @click="handleSubmit"> {{ $gettext('Submit') }} </n-button>
+        <n-button type="info" block :loading="loading" @click="handleSubmit">
+          {{ $gettext('Submit') }}
+        </n-button>
       </n-col>
     </n-row>
   </n-modal>
diff --git a/web/src/views/ssh/route.ts b/web/src/views/ssh/route.ts
index 4a7ff98c..afda897d 100644
--- a/web/src/views/ssh/route.ts
+++ b/web/src/views/ssh/route.ts
@@ -1,5 +1,5 @@
-import type { RouteType } from '~/types/router'
 import { $gettext } from '@/utils/gettext'
+import type { RouteType } from '~/types/router'
 
 const Layout = () => import('@/layout/IndexView.vue')
 
diff --git a/web/src/views/task/CreateModal.vue b/web/src/views/task/CreateModal.vue
index 1d725b4e..fa61aab4 100644
--- a/web/src/views/task/CreateModal.vue
+++ b/web/src/views/task/CreateModal.vue
@@ -128,8 +128,12 @@ onMounted(() => {
       <n-form-item v-if="createModel.type === 'backup'" :label="$gettext('Backup Type')">
         <n-radio-group v-model:value="createModel.backup_type">
           <n-radio value="website">{{ $gettext('Website') }}</n-radio>
-          <n-radio value="mysql" :disabled="!mySQLInstalled"> {{ $gettext('MySQL Database') }}</n-radio>
-          <n-radio value="postgres" :disabled="!postgreSQLInstalled"> {{ $gettext('PostgreSQL Database') }} </n-radio>
+          <n-radio value="mysql" :disabled="!mySQLInstalled">
+            {{ $gettext('MySQL Database') }}</n-radio
+          >
+          <n-radio value="postgres" :disabled="!postgreSQLInstalled">
+            {{ $gettext('PostgreSQL Database') }}
+          </n-radio>
         </n-radio-group>
       </n-form-item>
       <n-form-item
@@ -139,7 +143,11 @@ onMounted(() => {
         "
         :label="$gettext('Select Website')"
       >
-        <n-select v-model:value="createModel.target" :options="websites" :placeholder="$gettext('Select Website')" />
+        <n-select
+          v-model:value="createModel.target"
+          :options="websites"
+          :placeholder="$gettext('Select Website')"
+        />
       </n-form-item>
       <n-form-item
         v-if="createModel.backup_type !== 'website' && createModel.type === 'backup'"
@@ -148,7 +156,10 @@ onMounted(() => {
         <n-input v-model:value="createModel.target" :placeholder="$gettext('Database Name')" />
       </n-form-item>
       <n-form-item v-if="createModel.type === 'backup'" :label="$gettext('Save Directory')">
-        <n-input v-model:value="createModel.backup_path" :placeholder="$gettext('Save Directory')" />
+        <n-input
+          v-model:value="createModel.backup_path"
+          :placeholder="$gettext('Save Directory')"
+        />
       </n-form-item>
       <n-form-item v-if="createModel.type !== 'shell'" :label="$gettext('Retention Count')">
         <n-input-number v-model:value="createModel.save" />
@@ -156,7 +167,9 @@ onMounted(() => {
     </n-form>
     <n-row :gutter="[0, 24]" pt-20>
       <n-col :span="24">
-        <n-button type="info" block :loading="loading" @click="handleSubmit"> {{ $gettext('Submit') }} </n-button>
+        <n-button type="info" block :loading="loading" @click="handleSubmit">
+          {{ $gettext('Submit') }}
+        </n-button>
       </n-col>
     </n-row>
   </n-modal>
diff --git a/web/src/views/task/SystemView.vue b/web/src/views/task/SystemView.vue
index d71e374b..fbb85c0d 100644
--- a/web/src/views/task/SystemView.vue
+++ b/web/src/views/task/SystemView.vue
@@ -105,13 +105,17 @@ const columns: any = [
           onPositiveClick: () => {
             useRequest(process.kill(row.pid)).onSuccess(() => {
               refresh()
-              window.$message.success($gettext('Process %{ pid } has been terminated', { pid: row.pid }))
+              window.$message.success(
+                $gettext('Process %{ pid } has been terminated', { pid: row.pid })
+              )
             })
           }
         },
         {
           default: () => {
-            return $gettext('Are you sure you want to terminate process %{ pid }?', { pid: row.pid })
+            return $gettext('Are you sure you want to terminate process %{ pid }?', {
+              pid: row.pid
+            })
           },
           trigger: () => {
             return h(
diff --git a/web/src/views/task/TaskView.vue b/web/src/views/task/TaskView.vue
index d8d49fd7..7dddd22a 100644
--- a/web/src/views/task/TaskView.vue
+++ b/web/src/views/task/TaskView.vue
@@ -133,7 +133,9 @@ onMounted(() => {
 
 <template>
   <n-flex vertical>
-    <n-alert type="info">{{ $gettext('If logs cannot be loaded, please disable ad blockers!') }}</n-alert>
+    <n-alert type="info">{{
+      $gettext('If logs cannot be loaded, please disable ad blockers!')
+    }}</n-alert>
     <n-data-table
       striped
       remote
diff --git a/web/src/views/task/route.ts b/web/src/views/task/route.ts
index 848f1080..e6f2e96c 100644
--- a/web/src/views/task/route.ts
+++ b/web/src/views/task/route.ts
@@ -1,5 +1,5 @@
-import type { RouteType } from '~/types/router'
 import { $gettext } from '@/utils/gettext'
+import type { RouteType } from '~/types/router'
 
 const Layout = () => import('@/layout/IndexView.vue')
 
diff --git a/web/src/views/website/EditView.vue b/web/src/views/website/EditView.vue
index 44faccbb..a834e400 100644
--- a/web/src/views/website/EditView.vue
+++ b/web/src/views/website/EditView.vue
@@ -175,7 +175,11 @@ const onCreateListen = () => {
     <template #action>
       <n-flex>
         <n-tag v-if="current === 'config'" type="warning">
-          {{ $gettext('If you modify the original text, other modifications will not take effect after clicking save!') }}
+          {{
+            $gettext(
+              'If you modify the original text, other modifications will not take effect after clicking save!'
+            )
+          }}
         </n-tag>
         <n-popconfirm v-if="current === 'config'" @positive-click="handleReset">
           <template #trigger>
@@ -254,12 +258,17 @@ const onCreateListen = () => {
       <n-tab-pane name="basic" :tab="$gettext('Basic Settings')">
         <n-form v-if="setting">
           <n-form-item :label="$gettext('Website Directory')">
-            <n-input v-model:value="setting.path" :placeholder="$gettext('Enter website directory (absolute path)')" />
+            <n-input
+              v-model:value="setting.path"
+              :placeholder="$gettext('Enter website directory (absolute path)')"
+            />
           </n-form-item>
           <n-form-item :label="$gettext('Running Directory')">
             <n-input
               v-model:value="setting.root"
-              :placeholder="$gettext('Enter running directory (needed for Laravel etc.) (absolute path)')"
+              :placeholder="
+                $gettext('Enter running directory (needed for Laravel etc.) (absolute path)')
+              "
             />
           </n-form-item>
           <n-form-item :label="$gettext('Default Document')">
@@ -318,7 +327,11 @@ const onCreateListen = () => {
               <n-form-item-gi :span="12" :label="$gettext('Main Switch')">
                 <n-switch v-model:value="setting.https" />
               </n-form-item-gi>
-              <n-form-item-gi v-if="setting.https" :span="12" :label="$gettext('Use Existing Certificate')">
+              <n-form-item-gi
+                v-if="setting.https"
+                :span="12"
+                :label="$gettext('Use Existing Certificate')"
+              >
                 <n-select
                   v-model:value="selectedCert"
                   :options="certOptions"
@@ -388,7 +401,11 @@ const onCreateListen = () => {
       <n-tab-pane name="config" :tab="$gettext('Configuration')">
         <n-flex vertical>
           <n-alert type="warning" w-full>
-            {{ $gettext('If you do not understand the configuration rules, please do not modify them arbitrarily, otherwise it may cause the website to be inaccessible or panel function abnormalities! If you have already encountered a problem, try resetting the configuration!') }}
+            {{
+              $gettext(
+                'If you do not understand the configuration rules, please do not modify them arbitrarily, otherwise it may cause the website to be inaccessible or panel function abnormalities! If you have already encountered a problem, try resetting the configuration!'
+              )
+            }}
           </n-alert>
           <Editor
             v-if="setting"
diff --git a/web/src/views/website/ProxyBuilderModal.vue b/web/src/views/website/ProxyBuilderModal.vue
index bb07f40c..172b8301 100644
--- a/web/src/views/website/ProxyBuilderModal.vue
+++ b/web/src/views/website/ProxyBuilderModal.vue
@@ -20,7 +20,9 @@ const setting = ref({
 
 const handleSubmit = () => {
   if (setting.value.cache && setting.value.no_buffer) {
-    window.$message.error($gettext('Disabled buffer and enabled cache cannot be used simultaneously'))
+    window.$message.error(
+      $gettext('Disabled buffer and enabled cache cannot be used simultaneously')
+    )
     return
   }
   if (setting.value.match.length === 0) {
@@ -125,9 +127,19 @@ watch(
     :segmented="false"
   >
     <n-flex vertical>
-      <n-alert type="warning"> {{ $gettext('After generating the reverse proxy configuration, the original rewrite rules will be overwritten.') }} </n-alert>
+      <n-alert type="warning">
+        {{
+          $gettext(
+            'After generating the reverse proxy configuration, the original rewrite rules will be overwritten.'
+          )
+        }}
+      </n-alert>
       <n-alert type="info">
-        {{ $gettext('If you need to proxy static resources like JS/CSS, please remove the static log recording part from the original configuration.') }}
+        {{
+          $gettext(
+            'If you need to proxy static resources like JS/CSS, please remove the static log recording part from the original configuration.'
+          )
+        }}
       </n-alert>
       <n-form inline>
         <n-form-item :label="$gettext('Auto Refresh Resolution')">
diff --git a/web/src/views/website/route.ts b/web/src/views/website/route.ts
index 2bfdf3af..7b03311f 100644
--- a/web/src/views/website/route.ts
+++ b/web/src/views/website/route.ts
@@ -1,5 +1,5 @@
-import type { RouteType } from '~/types/router'
 import { $gettext } from '@/utils/gettext'
+import type { RouteType } from '~/types/router'
 
 const Layout = () => import('@/layout/IndexView.vue')