diff --git a/web/gettext.config.mjs b/web/gettext.config.mjs
index 4c47e63d..e422b02f 100644
--- a/web/gettext.config.mjs
+++ b/web/gettext.config.mjs
@@ -1,57 +1,7 @@
 export default {
   input: {
     include: ['**/*.js', '**/*.ts', '**/*.vue'],
-    exclude: ['utils/gettext/**'],
-    jsExtractorOpts: [
-      {
-        keyword: '__', // $gettext
-        options: {
-          content: {
-            replaceNewLines: '\n'
-          },
-          arguments: {
-            text: 0
-          }
-        }
-      },
-      {
-        keyword: '_n', // $ngettext
-        options: {
-          content: {
-            replaceNewLines: '\n'
-          },
-          arguments: {
-            text: 0,
-            textPlural: 1
-          }
-        }
-      },
-      {
-        keyword: '_x', // $pgettext
-        options: {
-          content: {
-            replaceNewLines: '\n'
-          },
-          arguments: {
-            context: 0,
-            text: 1
-          }
-        }
-      },
-      {
-        keyword: '_nx', // $npgettext
-        options: {
-          content: {
-            replaceNewLines: '\n'
-          },
-          arguments: {
-            context: 0,
-            text: 1,
-            textPlural: 2
-          }
-        }
-      }
-    ]
+    exclude: ['utils/gettext/**']
   },
   output: {
     path: './src/locales',
diff --git a/web/src/locales/en.po b/web/src/locales/en.po
index 189f6e89..08bc343f 100644
--- a/web/src/locales/en.po
+++ b/web/src/locales/en.po
@@ -9,22 +9,913 @@ msgstr ""
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1);\n"
 
-#: src/views/setting/SettingHttps.vue:25
-msgid "Saved successfully"
+#: src/views/app/IndexView.vue:19 src/views/app/IndexView.vue:159
+#: src/views/app/IndexView.vue:164
+msgid "Install"
+msgstr ""
+
+#: src/views/app/IndexView.vue:37
+msgid "App Name"
+msgstr ""
+
+#: src/views/app/IndexView.vue:44
+msgid "Description"
+msgstr ""
+
+#: src/views/app/IndexView.vue:51
+msgid "Installed Version"
+msgstr ""
+
+#: src/views/app/IndexView.vue:57
+msgid "Show in Home"
+msgstr ""
+
+#: src/views/app/IndexView.vue:71 src/views/backup/ListView.vue:58
+#: src/views/database/DatabaseList.vue:74 src/views/database/ServerList.vue:135
+msgid "Actions"
+msgstr ""
+
+#: src/views/app/IndexView.vue:91
+msgid ""
+"Updating app %{ app } may reset related configurations to default state, are "
+"you sure to continue?"
+msgstr ""
+
+#: src/views/app/IndexView.vue:101
+msgid "Update"
+msgstr ""
+
+#: src/views/app/IndexView.vue:120
+msgid "Manage"
+msgstr ""
+
+#: src/views/app/IndexView.vue:133
+msgid "Are you sure to uninstall app %{ app }?"
+msgstr ""
+
+#: src/views/app/IndexView.vue:143
+msgid "Uninstall"
+msgstr ""
+
+#: src/views/app/IndexView.vue:189
+#, fuzzy
+msgid "Setup successfully"
 msgstr "Saved successfully"
 
-#: src/views/setting/SettingHttps.vue:34
-msgid "Panel HTTPS"
-msgstr "Panel HTTPS"
+#: src/views/app/IndexView.vue:195 src/views/app/IndexView.vue:201
+#: src/views/app/VersionModal.vue:31
+msgid "Task submitted, please check the progress in background tasks"
+msgstr ""
 
-#: src/views/setting/SettingHttps.vue:37
+#: src/views/app/IndexView.vue:212
+#, fuzzy
+msgid "Cache updated successfully"
+msgstr "Saved successfully"
+
+#: src/views/app/IndexView.vue:226
+msgid "Update Cache"
+msgstr ""
+
+#: src/views/app/IndexView.vue:230
+msgid ""
+"Before updating apps, it is strongly recommended to backup/snapshot first, "
+"so you can roll back immediately if there are any issues!"
+msgstr ""
+
+#: src/views/app/VersionModal.vue:71
+msgid "Channel"
+msgstr ""
+
+#: src/views/app/VersionModal.vue:78
+msgid "Version"
+msgstr ""
+
+#: src/views/app/VersionModal.vue:79
+msgid "Please select a channel"
+msgstr ""
+
+#: src/views/app/VersionModal.vue:89 src/views/backup/ListView.vue:237
+#: src/views/backup/ListView.vue:257 src/views/cert/CreateAccountModal.vue:114
+#: src/views/cert/CreateCertModal.vue:111 src/views/cert/CreateDnsModal.vue:173
+#: src/views/cert/ObtainModal.vue:126 src/views/cert/UploadCertModal.vue:55
+#: src/views/database/CreateDatabaseModal.vue:127
+#: src/views/file/ToolBar.vue:261 src/views/file/ToolBar.vue:282
+msgid "Submit"
+msgstr ""
+
+#: src/views/backup/IndexView.vue:37 src/views/backup/ListView.vue:217
+#: src/views/backup/ListView.vue:250 src/views/cert/CreateCertModal.vue:86
+msgid "Website"
+msgstr ""
+
+#: src/views/backup/ListView.vue:36
+msgid "Filename"
+msgstr ""
+
+#: src/views/backup/ListView.vue:43
+msgid "Size"
+msgstr ""
+
+#: src/views/backup/ListView.vue:49 src/views/database/ServerList.vue:126
+msgid "Update Date"
+msgstr ""
+
+#: src/views/backup/ListView.vue:77
+msgid "Restore"
+msgstr ""
+
+#: src/views/backup/ListView.vue:88
+msgid "Are you sure you want to delete this backup?"
+msgstr ""
+
+#: src/views/backup/ListView.vue:99 src/views/database/DatabaseList.vue:99
+#: src/views/database/ServerList.vue:212 src/views/file/ToolBar.vue:238
+msgid "Delete"
+msgstr ""
+
+#: src/views/backup/ListView.vue:126 src/views/cert/CreateAccountModal.vue:49
+#: src/views/cert/CreateCertModal.vue:50 src/views/cert/CreateDnsModal.vue:35
+#: src/views/cert/UploadCertModal.vue:21
+#: src/views/database/CreateDatabaseModal.vue:28 src/views/file/ToolBar.vue:45
+#, fuzzy
+msgid "Created successfully"
+msgstr "Saved successfully"
+
+#: src/views/backup/ListView.vue:132
+msgid "Restoring..."
+msgstr ""
+
+#: src/views/backup/ListView.vue:139
+#, fuzzy
+msgid "Restored successfully"
+msgstr "Saved successfully"
+
+#: src/views/backup/ListView.vue:149 src/views/database/DatabaseList.vue:124
+#: src/views/database/ServerList.vue:237 src/views/file/ToolBar.vue:189
+#, fuzzy
+msgid "Deleted successfully"
+msgstr "Saved successfully"
+
+#: src/views/backup/ListView.vue:182 src/views/backup/ListView.vue:209
+msgid "Create Backup"
+msgstr ""
+
+#: src/views/backup/ListView.vue:183 src/views/backup/UploadModal.vue:39
+msgid "Upload Backup"
+msgstr ""
+
+#: src/views/backup/ListView.vue:218 src/views/backup/ListView.vue:251
+msgid "Select website"
+msgstr ""
+
+#: src/views/backup/ListView.vue:220
+#: src/views/database/CreateDatabaseModal.vue:70
+#: src/views/database/DatabaseList.vue:35
+msgid "Database Name"
+msgstr ""
+
+#: src/views/backup/ListView.vue:225
+#: src/views/database/CreateDatabaseModal.vue:75
+msgid "Enter database name"
+msgstr ""
+
+#: src/views/backup/ListView.vue:228
+msgid "Save Directory"
+msgstr ""
+
+#: src/views/backup/ListView.vue:233
+msgid "Leave empty to use default path"
+msgstr ""
+
+#: src/views/backup/ListView.vue:242
+msgid "Restore Backup"
+msgstr ""
+
+#: src/views/backup/ListView.vue:253 src/views/database/IndexView.vue:45
+msgid "Database"
+msgstr ""
+
+#: src/views/backup/route.ts:19
+msgid "Backup"
+msgstr ""
+
+#: src/views/backup/UploadModal.vue:20
+msgid "Upload %{ filename } successfully"
+msgstr ""
+
+#: src/views/backup/UploadModal.vue:51
+msgid "Click or drag files to this area to upload"
+msgstr ""
+
+#: src/views/backup/UploadModal.vue:53
+msgid ""
+"For large files, it is recommended to use SFTP or other methods to upload"
+msgstr ""
+
+#: src/views/cert/CreateAccountModal.vue:38
+msgid "Registering account with CA, please wait patiently"
+msgstr ""
+
+#: src/views/cert/CreateAccountModal.vue:61 src/views/cert/IndexView.vue:106
+msgid "Create Account"
+msgstr ""
+
+#: src/views/cert/CreateAccountModal.vue:68
+msgid ""
+"Google and SSL.com require obtaining KID and HMAC from their official "
+"websites first"
+msgstr ""
+
+#: src/views/cert/CreateAccountModal.vue:70
+msgid ""
+"Google is not accessible in mainland China, and other CAs depend on network "
+"conditions. GoogleCN or Let's Encrypt are recommended"
+msgstr ""
+
+#: src/views/cert/CreateAccountModal.vue:73
+msgid "CA"
+msgstr ""
+
+#: src/views/cert/CreateAccountModal.vue:76
+msgid "Select CA"
+msgstr ""
+
+#: src/views/cert/CreateAccountModal.vue:81
+#: src/views/cert/CreateCertModal.vue:78
+msgid "Key Type"
+msgstr ""
+
+#: src/views/cert/CreateAccountModal.vue:84
+#: src/views/cert/CreateCertModal.vue:81
+msgid "Select key type"
+msgstr ""
+
+#: src/views/cert/CreateAccountModal.vue:89
+msgid "Email"
+msgstr ""
+
+#: src/views/cert/CreateAccountModal.vue:94
+msgid "Enter email address"
+msgstr ""
+
+#: src/views/cert/CreateAccountModal.vue:102
+msgid "Enter KID"
+msgstr ""
+
+#: src/views/cert/CreateAccountModal.vue:110
+msgid "Enter HMAC"
+msgstr ""
+
+#: src/views/cert/CreateCertModal.vue:59 src/views/cert/IndexView.vue:102
+#, fuzzy
+msgid "Create Certificate"
+msgstr "Certificate"
+
+#: src/views/cert/CreateCertModal.vue:67
+msgid ""
+"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"
+msgstr ""
+
+#: src/views/cert/CreateCertModal.vue:70 src/views/cert/ObtainModal.vue:53
+msgid "Domain"
+msgstr ""
+
+#: src/views/cert/CreateCertModal.vue:89
+msgid "Select website for certificate deployment"
+msgstr ""
+
+#: src/views/cert/CreateCertModal.vue:94
+msgid "Account"
+msgstr ""
+
+#: src/views/cert/CreateCertModal.vue:97
+msgid "Select account for certificate issuance"
+msgstr ""
+
+#: src/views/cert/CreateCertModal.vue:102 src/views/cert/CreateDnsModal.vue:55
+msgid "DNS"
+msgstr ""
+
+#: src/views/cert/CreateCertModal.vue:105
+msgid "Select DNS for certificate issuance"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:44 src/views/cert/IndexView.vue:110
+msgid "Create DNS"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:52
+msgid "Comment Name"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:53
+msgid "Enter comment name"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:58
+msgid "Select DNS"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:64
+msgid "Enter Aliyun Access Key"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:67
+msgid "Enter Aliyun Secret Key"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:70
+msgid "Enter Tencent Cloud SecretId"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:73
+msgid "Enter Tencent Cloud SecretKey"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:76
+msgid "Enter Huawei Cloud AccessKeyId"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:82
+msgid "Enter Huawei Cloud SecretAccessKey"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:86
+msgid "Enter Western Digital Username"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:92
+msgid "Enter Western Digital API Password"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:99
+msgid "Enter Cloudflare API Key"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:103
+msgid "Enter GoDaddy Token"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:106
+msgid "Enter G-Core API Key"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:109
+msgid "Enter Porkbun API Key"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:115
+msgid "Enter Porkbun Secret Key"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:122
+msgid "Enter Namecheap API Username"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:126
+msgid "Enter Namecheap API Key"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:132
+msgid "Enter NameSilo API Token"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:136
+msgid "Enter Name.com Username"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:139
+msgid "Enter Name.com Token"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:146
+msgid "Enter ClouDNS Auth ID (use Sub Auth ID by adding sub-prefix)"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:153
+msgid "Enter ClouDNS Auth Password"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:157
+msgid "Enter Duck DNS Token"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:163
+msgid "Enter Hetzner Auth API Token"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:167
+msgid "Enter Linode Token"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:170
+msgid "Enter Vercel Token"
+msgstr ""
+
+#: src/views/cert/IndexView.vue:98 src/views/cert/UploadCertModal.vue:30
+#, fuzzy
+msgid "Upload Certificate"
+msgstr "Certificate"
+
+#: src/views/cert/IndexView.vue:115
+#, fuzzy
+msgid "Certificate List"
+msgstr "Certificate"
+
+#: src/views/cert/IndexView.vue:118
+msgid "Account List"
+msgstr ""
+
+#: src/views/cert/IndexView.vue:121
+msgid "DNS List"
+msgstr ""
+
+#: src/views/cert/ObtainModal.vue:18
+msgid "Automatic"
+msgstr ""
+
+#: src/views/cert/ObtainModal.vue:19
+msgid "Manual"
+msgstr ""
+
+#: src/views/cert/ObtainModal.vue:20
+msgid "Self-signed"
+msgstr ""
+
+#: src/views/cert/ObtainModal.vue:24 src/views/cert/ObtainModal.vue:77
+msgid "Please wait..."
+msgstr ""
+
+#: src/views/cert/ObtainModal.vue:33 src/views/cert/ObtainModal.vue:85
+#: src/views/cert/ObtainModal.vue:103
+#, fuzzy
+msgid "Issuance successful"
+msgstr "Saved successfully"
+
+#: src/views/cert/ObtainModal.vue:41
+msgid ""
+"Please set up DNS resolution for the domain first, then continue with the "
+"issuance"
+msgstr ""
+
+#: src/views/cert/ObtainModal.vue:44
+msgid "DNS Records to Set"
+msgstr ""
+
+#: src/views/cert/ObtainModal.vue:54 src/views/database/DatabaseList.vue:12
+#: src/views/database/ServerList.vue:17
+msgid "Type"
+msgstr ""
+
+#: src/views/cert/ObtainModal.vue:55
+msgid "Host Record"
+msgstr ""
+
+#: src/views/cert/ObtainModal.vue:56
+msgid "Record Value"
+msgstr ""
+
+#: src/views/cert/ObtainModal.vue:74
+msgid "Issue"
+msgstr ""
+
+#: src/views/cert/ObtainModal.vue:116
+#, fuzzy
+msgid "Issue Certificate"
+msgstr "Certificate"
+
+#: src/views/cert/ObtainModal.vue:123
+msgid "Issuance Mode"
+msgstr ""
+
+#: src/views/cert/route.ts:19 src/views/cert/UploadCertModal.vue:38
+#: src/views/setting/SettingHttps.vue:39
 msgid "Certificate"
 msgstr "Certificate"
 
-#: src/views/setting/SettingHttps.vue:44
+#: src/views/cert/UploadCertModal.vue:42
+msgid "Enter the content of the PEM certificate file"
+msgstr ""
+
+#: src/views/cert/UploadCertModal.vue:46 src/views/setting/SettingHttps.vue:46
 msgid "Private Key"
 msgstr "Private Key"
 
-#: src/views/setting/SettingHttps.vue:54
+#: src/views/cert/UploadCertModal.vue:50
+msgid "Enter the content of the KEY private key file"
+msgstr ""
+
+#: src/views/dashboard/UpdateView.vue:24
+msgid "Update Panel"
+msgstr ""
+
+#: src/views/dashboard/UpdateView.vue:25
+msgid "Are you sure you want to update the panel?"
+msgstr ""
+
+#: src/views/dashboard/UpdateView.vue:26
+msgid "Confirm"
+msgstr ""
+
+#: src/views/dashboard/UpdateView.vue:27 src/views/file/ToolBar.vue:139
+#: src/views/file/ToolBar.vue:226
+msgid "Cancel"
+msgstr ""
+
+#: src/views/dashboard/UpdateView.vue:29
+msgid "Panel updating..."
+msgstr ""
+
+#: src/views/dashboard/UpdateView.vue:40
+#, fuzzy
+msgid "Panel updated successfully"
+msgstr "Saved successfully"
+
+#: src/views/dashboard/UpdateView.vue:47
+msgid "Update canceled"
+msgstr ""
+
+#: src/views/dashboard/UpdateView.vue:59
+msgid "Update Now"
+msgstr ""
+
+#: src/views/dashboard/UpdateView.vue:82
+msgid "Loading update information, please wait a moment"
+msgstr ""
+
+#: src/views/database/CreateDatabaseModal.vue:20
+msgid "Local (localhost)"
+msgstr ""
+
+#: src/views/database/CreateDatabaseModal.vue:21
+msgid "All (%)"
+msgstr ""
+
+#: src/views/database/CreateDatabaseModal.vue:22
+msgid "Specific"
+msgstr ""
+
+#: src/views/database/CreateDatabaseModal.vue:54
+#: src/views/database/IndexView.vue:32
+msgid "Create Database"
+msgstr ""
+
+#: src/views/database/CreateDatabaseModal.vue:62
+#: src/views/database/DatabaseList.vue:42 src/views/database/IndexView.vue:51
+msgid "Server"
+msgstr ""
+
+#: src/views/database/CreateDatabaseModal.vue:66
+msgid "Select server"
+msgstr ""
+
+#: src/views/database/CreateDatabaseModal.vue:78
+#: src/views/database/IndexView.vue:36
+msgid "Create User"
+msgstr ""
+
+#: src/views/database/CreateDatabaseModal.vue:81
+msgid "Authorized User"
+msgstr ""
+
+#: src/views/database/CreateDatabaseModal.vue:86
+msgid "Enter authorized username (leave empty for no authorization)"
+msgstr ""
+
+#: src/views/database/CreateDatabaseModal.vue:89
+#: src/views/database/ServerList.vue:47 src/views/login/IndexView.vue:113
+#: src/views/setting/SettingBase.vue:63
+msgid "Username"
+msgstr ""
+
+#: src/views/database/CreateDatabaseModal.vue:94
+msgid "Enter username"
+msgstr ""
+
+#: src/views/database/CreateDatabaseModal.vue:97
+#: src/views/database/ServerList.vue:56 src/views/login/IndexView.vue:121
+#: src/views/setting/SettingBase.vue:69
+msgid "Password"
+msgstr ""
+
+#: src/views/database/CreateDatabaseModal.vue:103
+msgid "Enter password"
+msgstr ""
+
+#: src/views/database/CreateDatabaseModal.vue:106
+#: src/views/database/ServerList.vue:87
+msgid "Host"
+msgstr ""
+
+#: src/views/database/CreateDatabaseModal.vue:110
+msgid "Select host"
+msgstr ""
+
+#: src/views/database/CreateDatabaseModal.vue:117
+msgid "Specific Host"
+msgstr ""
+
+#: src/views/database/CreateDatabaseModal.vue:123
+msgid "Enter supported host address"
+msgstr ""
+
+#: src/views/database/DatabaseList.vue:47
+msgid "Encoding"
+msgstr ""
+
+#: src/views/database/DatabaseList.vue:57 src/views/database/ServerList.vue:97
+msgid "Comment"
+msgstr ""
+
+#: src/views/database/DatabaseList.vue:88
+msgid "Are you sure you want to delete this database?"
+msgstr ""
+
+#: src/views/database/DatabaseList.vue:130
+#: src/views/database/ServerList.vue:243
+#, fuzzy
+msgid "Modified successfully"
+msgstr "Saved successfully"
+
+#: src/views/database/IndexView.vue:40
+msgid "Add Server"
+msgstr ""
+
+#: src/views/database/IndexView.vue:48
+msgid "User"
+msgstr ""
+
+#: src/views/database/ServerList.vue:40 src/views/file/ToolBar.vue:257
+msgid "Name"
+msgstr ""
+
+#: src/views/database/ServerList.vue:52 src/views/database/ServerList.vue:67
+msgid "None"
+msgstr ""
+
+#: src/views/database/ServerList.vue:76 src/views/file/ToolBar.vue:145
+#: src/views/file/ToolBar.vue:165
+#, fuzzy
+msgid "Copied successfully"
+msgstr "Saved successfully"
+
+#: src/views/database/ServerList.vue:80 src/views/file/ToolBar.vue:232
+msgid "Copy"
+msgstr ""
+
+#: src/views/database/ServerList.vue:114
+msgid "Status"
+msgstr ""
+
+#: src/views/database/ServerList.vue:121
+msgid "Valid"
+msgstr ""
+
+#: src/views/database/ServerList.vue:121
+msgid "Invalid"
+msgstr ""
+
+#: src/views/database/ServerList.vue:148
+#, fuzzy
+msgid "Synchronized successfully"
+msgstr "Saved successfully"
+
+#: src/views/database/ServerList.vue:154
+msgid ""
+"Are you sure you want to synchronize database users (excluding password) to "
+"the panel?"
+msgstr ""
+
+#: src/views/database/ServerList.vue:164
+msgid "Sync"
+msgstr ""
+
+#: src/views/database/ServerList.vue:183
+msgid "Modify"
+msgstr ""
+
+#: src/views/database/ServerList.vue:193
+msgid ""
+"Built-in servers cannot be deleted. If you need to delete them, please "
+"uninstall the corresponding application"
+msgstr ""
+
+#: src/views/database/ServerList.vue:201
+msgid "Are you sure you want to delete the server?"
+msgstr ""
+
+#: src/views/error-page/NotFound.vue:10
+msgid "Sorry, the page you visited does not exist."
+msgstr ""
+
+#: src/views/error-page/NotFound.vue:15
+msgid "Back to Home"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:37 src/views/file/ToolBar.vue:51
+msgid "Invalid name"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:60
+#, fuzzy
+msgid "Download task created successfully"
+msgstr "Saved successfully"
+
+#: src/views/file/ToolBar.vue:66
+msgid "Please select files/folders to copy"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:77 src/views/file/ToolBar.vue:94
+msgid "Marked successfully, please navigate to the destination path to paste"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:83
+msgid "Please select files/folders to move"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:104
+msgid "Please mark the files/folders to copy or move first"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:128
+msgid "Warning"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:129
+msgid ""
+"There are items with the same name. %{ items } Do you want to overwrite?"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:138
+msgid "Overwrite"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:151 src/views/file/ToolBar.vue:171
+#, fuzzy
+msgid "Moved successfully"
+msgstr "Saved successfully"
+
+#: src/views/file/ToolBar.vue:157
+msgid "Canceled"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:180
+msgid "Please select files/folders to delete"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:214
+msgid "File"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:215
+msgid "Folder"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:219 src/views/file/ToolBar.vue:249
+msgid "New"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:221
+msgid "Upload"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:222 src/views/file/ToolBar.vue:267
+msgid "Remote Download"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:229
+msgid "Paste"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:233
+msgid "Move"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:234
+msgid "Compress"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:235
+msgid "Permission"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:240
+msgid "Are you sure you want to delete in bulk?"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:275
+msgid "Download URL"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:278
+#, fuzzy
+msgid "Save as"
+msgstr "Save"
+
+#: src/views/login/IndexView.vue:46
+msgid "Please enter username and password"
+msgstr ""
+
+#: src/views/login/IndexView.vue:50
+msgid ""
+"Failed to get encryption public key, please refresh the page and try again"
+msgstr ""
+
+#: src/views/login/IndexView.vue:61
+#, fuzzy
+msgid "Login successful!"
+msgstr "Saved successfully"
+
+#: src/views/login/IndexView.vue:130
+msgid "Safe Login"
+msgstr ""
+
+#: src/views/login/IndexView.vue:131
+msgid "Remember Me"
+msgstr ""
+
+#: src/views/login/IndexView.vue:145
+msgid "Login"
+msgstr ""
+
+#: src/views/setting/IndexView.vue:17
+msgid "Basic"
+msgstr ""
+
+#: src/views/setting/SettingBase.vue:34 src/views/setting/SettingHttps.vue:27
+msgid "Saved successfully"
+msgstr "Saved successfully"
+
+#: src/views/setting/SettingBase.vue:51
+msgid ""
+"Modifying panel port/entrance requires corresponding changes in the browser "
+"address bar to access the panel!"
+msgstr ""
+
+#: src/views/setting/SettingBase.vue:54 src/views/setting/SettingBase.vue:57
+msgid "Panel Name"
+msgstr ""
+
+#: src/views/setting/SettingBase.vue:60
+msgid "Language"
+msgstr ""
+
+#: src/views/setting/SettingBase.vue:66 src/views/setting/SettingBase.vue:72
+#: src/views/setting/SettingBase.vue:90
+msgid "admin"
+msgstr ""
+
+#: src/views/setting/SettingBase.vue:75
+#, fuzzy
+msgid "Certificate Default Email"
+msgstr "Certificate"
+
+#: src/views/setting/SettingBase.vue:78
+msgid "admin@example.com"
+msgstr ""
+
+#: src/views/setting/SettingBase.vue:81
+msgid "Port"
+msgstr ""
+
+#: src/views/setting/SettingBase.vue:84
+msgid "8888"
+msgstr ""
+
+#: src/views/setting/SettingBase.vue:87
+msgid "Security Entrance"
+msgstr ""
+
+#: src/views/setting/SettingBase.vue:93
+msgid "Offline Mode"
+msgstr ""
+
+#: src/views/setting/SettingBase.vue:96
+msgid "Auto Update"
+msgstr ""
+
+#: src/views/setting/SettingBase.vue:99
+msgid "Default Website Directory"
+msgstr ""
+
+#: src/views/setting/SettingBase.vue:102
+msgid "/www/wwwroot"
+msgstr ""
+
+#: src/views/setting/SettingBase.vue:105
+msgid "Default Backup Directory"
+msgstr ""
+
+#: src/views/setting/SettingBase.vue:108
+msgid "/www/backup"
+msgstr ""
+
+#: src/views/setting/SettingBase.vue:114 src/views/setting/SettingHttps.vue:56
 msgid "Save"
 msgstr "Save"
+
+#: src/views/setting/SettingHttps.vue:36
+msgid "Panel HTTPS"
+msgstr "Panel HTTPS"
diff --git a/web/src/locales/frontend.pot b/web/src/locales/frontend.pot
index 4c7aa4de..f2fb15cc 100644
--- a/web/src/locales/frontend.pot
+++ b/web/src/locales/frontend.pot
@@ -2,22 +2,924 @@ msgid ""
 msgstr ""
 "Content-Type: text/plain; charset=UTF-8\n"
 
-#: src/views/setting/SettingHttps.vue:25
-msgid "Saved successfully"
+#: src/views/app/IndexView.vue:19
+#: src/views/app/IndexView.vue:159
+#: src/views/app/IndexView.vue:164
+msgid "Install"
 msgstr ""
 
-#: src/views/setting/SettingHttps.vue:34
-msgid "Panel HTTPS"
+#: src/views/app/IndexView.vue:37
+msgid "App Name"
 msgstr ""
 
-#: src/views/setting/SettingHttps.vue:37
+#: src/views/app/IndexView.vue:44
+msgid "Description"
+msgstr ""
+
+#: src/views/app/IndexView.vue:51
+msgid "Installed Version"
+msgstr ""
+
+#: src/views/app/IndexView.vue:57
+msgid "Show in Home"
+msgstr ""
+
+#: src/views/app/IndexView.vue:71
+#: src/views/backup/ListView.vue:58
+#: src/views/database/DatabaseList.vue:74
+#: src/views/database/ServerList.vue:135
+msgid "Actions"
+msgstr ""
+
+#: src/views/app/IndexView.vue:91
+msgid "Updating app %{ app } may reset related configurations to default state, are you sure to continue?"
+msgstr ""
+
+#: src/views/app/IndexView.vue:101
+msgid "Update"
+msgstr ""
+
+#: src/views/app/IndexView.vue:120
+msgid "Manage"
+msgstr ""
+
+#: src/views/app/IndexView.vue:133
+msgid "Are you sure to uninstall app %{ app }?"
+msgstr ""
+
+#: src/views/app/IndexView.vue:143
+msgid "Uninstall"
+msgstr ""
+
+#: src/views/app/IndexView.vue:189
+msgid "Setup successfully"
+msgstr ""
+
+#: src/views/app/IndexView.vue:195
+#: src/views/app/IndexView.vue:201
+#: src/views/app/VersionModal.vue:31
+msgid "Task submitted, please check the progress in background tasks"
+msgstr ""
+
+#: src/views/app/IndexView.vue:212
+msgid "Cache updated successfully"
+msgstr ""
+
+#: src/views/app/IndexView.vue:226
+msgid "Update Cache"
+msgstr ""
+
+#: src/views/app/IndexView.vue:230
+msgid "Before updating apps, it is strongly recommended to backup/snapshot first, so you can roll back immediately if there are any issues!"
+msgstr ""
+
+#: src/views/app/VersionModal.vue:71
+msgid "Channel"
+msgstr ""
+
+#: src/views/app/VersionModal.vue:78
+msgid "Version"
+msgstr ""
+
+#: src/views/app/VersionModal.vue:79
+msgid "Please select a channel"
+msgstr ""
+
+#: src/views/app/VersionModal.vue:89
+#: src/views/backup/ListView.vue:237
+#: src/views/backup/ListView.vue:257
+#: src/views/cert/CreateAccountModal.vue:114
+#: src/views/cert/CreateCertModal.vue:111
+#: src/views/cert/CreateDnsModal.vue:173
+#: src/views/cert/ObtainModal.vue:126
+#: src/views/cert/UploadCertModal.vue:55
+#: src/views/database/CreateDatabaseModal.vue:127
+#: src/views/file/ToolBar.vue:261
+#: src/views/file/ToolBar.vue:282
+msgid "Submit"
+msgstr ""
+
+#: src/views/backup/IndexView.vue:37
+#: src/views/backup/ListView.vue:217
+#: src/views/backup/ListView.vue:250
+#: src/views/cert/CreateCertModal.vue:86
+msgid "Website"
+msgstr ""
+
+#: src/views/backup/ListView.vue:36
+msgid "Filename"
+msgstr ""
+
+#: src/views/backup/ListView.vue:43
+msgid "Size"
+msgstr ""
+
+#: src/views/backup/ListView.vue:49
+#: src/views/database/ServerList.vue:126
+msgid "Update Date"
+msgstr ""
+
+#: src/views/backup/ListView.vue:77
+msgid "Restore"
+msgstr ""
+
+#: src/views/backup/ListView.vue:88
+msgid "Are you sure you want to delete this backup?"
+msgstr ""
+
+#: src/views/backup/ListView.vue:99
+#: src/views/database/DatabaseList.vue:99
+#: src/views/database/ServerList.vue:212
+#: src/views/file/ToolBar.vue:238
+msgid "Delete"
+msgstr ""
+
+#: src/views/backup/ListView.vue:126
+#: src/views/cert/CreateAccountModal.vue:49
+#: src/views/cert/CreateCertModal.vue:50
+#: src/views/cert/CreateDnsModal.vue:35
+#: src/views/cert/UploadCertModal.vue:21
+#: src/views/database/CreateDatabaseModal.vue:28
+#: src/views/file/ToolBar.vue:45
+msgid "Created successfully"
+msgstr ""
+
+#: src/views/backup/ListView.vue:132
+msgid "Restoring..."
+msgstr ""
+
+#: src/views/backup/ListView.vue:139
+msgid "Restored successfully"
+msgstr ""
+
+#: src/views/backup/ListView.vue:149
+#: src/views/database/DatabaseList.vue:124
+#: src/views/database/ServerList.vue:237
+#: src/views/file/ToolBar.vue:189
+msgid "Deleted successfully"
+msgstr ""
+
+#: src/views/backup/ListView.vue:182
+#: src/views/backup/ListView.vue:209
+msgid "Create Backup"
+msgstr ""
+
+#: src/views/backup/ListView.vue:183
+#: src/views/backup/UploadModal.vue:39
+msgid "Upload Backup"
+msgstr ""
+
+#: src/views/backup/ListView.vue:218
+#: src/views/backup/ListView.vue:251
+msgid "Select website"
+msgstr ""
+
+#: src/views/backup/ListView.vue:220
+#: src/views/database/CreateDatabaseModal.vue:70
+#: src/views/database/DatabaseList.vue:35
+msgid "Database Name"
+msgstr ""
+
+#: src/views/backup/ListView.vue:225
+#: src/views/database/CreateDatabaseModal.vue:75
+msgid "Enter database name"
+msgstr ""
+
+#: src/views/backup/ListView.vue:228
+msgid "Save Directory"
+msgstr ""
+
+#: src/views/backup/ListView.vue:233
+msgid "Leave empty to use default path"
+msgstr ""
+
+#: src/views/backup/ListView.vue:242
+msgid "Restore Backup"
+msgstr ""
+
+#: src/views/backup/ListView.vue:253
+#: src/views/database/IndexView.vue:45
+msgid "Database"
+msgstr ""
+
+#: src/views/backup/route.ts:19
+msgid "Backup"
+msgstr ""
+
+#: src/views/backup/UploadModal.vue:20
+msgid "Upload %{ filename } successfully"
+msgstr ""
+
+#: src/views/backup/UploadModal.vue:51
+msgid "Click or drag files to this area to upload"
+msgstr ""
+
+#: src/views/backup/UploadModal.vue:53
+msgid "For large files, it is recommended to use SFTP or other methods to upload"
+msgstr ""
+
+#: src/views/cert/CreateAccountModal.vue:38
+msgid "Registering account with CA, please wait patiently"
+msgstr ""
+
+#: src/views/cert/CreateAccountModal.vue:61
+#: src/views/cert/IndexView.vue:106
+msgid "Create Account"
+msgstr ""
+
+#: src/views/cert/CreateAccountModal.vue:68
+msgid "Google and SSL.com require obtaining KID and HMAC from their official websites first"
+msgstr ""
+
+#: src/views/cert/CreateAccountModal.vue:70
+msgid "Google is not accessible in mainland China, and other CAs depend on network conditions. GoogleCN or Let's Encrypt are recommended"
+msgstr ""
+
+#: src/views/cert/CreateAccountModal.vue:73
+msgid "CA"
+msgstr ""
+
+#: src/views/cert/CreateAccountModal.vue:76
+msgid "Select CA"
+msgstr ""
+
+#: src/views/cert/CreateAccountModal.vue:81
+#: src/views/cert/CreateCertModal.vue:78
+msgid "Key Type"
+msgstr ""
+
+#: src/views/cert/CreateAccountModal.vue:84
+#: src/views/cert/CreateCertModal.vue:81
+msgid "Select key type"
+msgstr ""
+
+#: src/views/cert/CreateAccountModal.vue:89
+msgid "Email"
+msgstr ""
+
+#: src/views/cert/CreateAccountModal.vue:94
+msgid "Enter email address"
+msgstr ""
+
+#: src/views/cert/CreateAccountModal.vue:102
+msgid "Enter KID"
+msgstr ""
+
+#: src/views/cert/CreateAccountModal.vue:110
+msgid "Enter HMAC"
+msgstr ""
+
+#: src/views/cert/CreateCertModal.vue:59
+#: src/views/cert/IndexView.vue:102
+msgid "Create Certificate"
+msgstr ""
+
+#: src/views/cert/CreateCertModal.vue:67
+msgid "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"
+msgstr ""
+
+#: src/views/cert/CreateCertModal.vue:70
+#: src/views/cert/ObtainModal.vue:53
+msgid "Domain"
+msgstr ""
+
+#: src/views/cert/CreateCertModal.vue:89
+msgid "Select website for certificate deployment"
+msgstr ""
+
+#: src/views/cert/CreateCertModal.vue:94
+msgid "Account"
+msgstr ""
+
+#: src/views/cert/CreateCertModal.vue:97
+msgid "Select account for certificate issuance"
+msgstr ""
+
+#: src/views/cert/CreateCertModal.vue:102
+#: src/views/cert/CreateDnsModal.vue:55
+msgid "DNS"
+msgstr ""
+
+#: src/views/cert/CreateCertModal.vue:105
+msgid "Select DNS for certificate issuance"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:44
+#: src/views/cert/IndexView.vue:110
+msgid "Create DNS"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:52
+msgid "Comment Name"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:53
+msgid "Enter comment name"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:58
+msgid "Select DNS"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:64
+msgid "Enter Aliyun Access Key"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:67
+msgid "Enter Aliyun Secret Key"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:70
+msgid "Enter Tencent Cloud SecretId"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:73
+msgid "Enter Tencent Cloud SecretKey"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:76
+msgid "Enter Huawei Cloud AccessKeyId"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:82
+msgid "Enter Huawei Cloud SecretAccessKey"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:86
+msgid "Enter Western Digital Username"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:92
+msgid "Enter Western Digital API Password"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:99
+msgid "Enter Cloudflare API Key"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:103
+msgid "Enter GoDaddy Token"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:106
+msgid "Enter G-Core API Key"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:109
+msgid "Enter Porkbun API Key"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:115
+msgid "Enter Porkbun Secret Key"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:122
+msgid "Enter Namecheap API Username"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:126
+msgid "Enter Namecheap API Key"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:132
+msgid "Enter NameSilo API Token"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:136
+msgid "Enter Name.com Username"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:139
+msgid "Enter Name.com Token"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:146
+msgid "Enter ClouDNS Auth ID (use Sub Auth ID by adding sub-prefix)"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:153
+msgid "Enter ClouDNS Auth Password"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:157
+msgid "Enter Duck DNS Token"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:163
+msgid "Enter Hetzner Auth API Token"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:167
+msgid "Enter Linode Token"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:170
+msgid "Enter Vercel Token"
+msgstr ""
+
+#: src/views/cert/IndexView.vue:98
+#: src/views/cert/UploadCertModal.vue:30
+msgid "Upload Certificate"
+msgstr ""
+
+#: src/views/cert/IndexView.vue:115
+msgid "Certificate List"
+msgstr ""
+
+#: src/views/cert/IndexView.vue:118
+msgid "Account List"
+msgstr ""
+
+#: src/views/cert/IndexView.vue:121
+msgid "DNS List"
+msgstr ""
+
+#: src/views/cert/ObtainModal.vue:18
+msgid "Automatic"
+msgstr ""
+
+#: src/views/cert/ObtainModal.vue:19
+msgid "Manual"
+msgstr ""
+
+#: src/views/cert/ObtainModal.vue:20
+msgid "Self-signed"
+msgstr ""
+
+#: src/views/cert/ObtainModal.vue:24
+#: src/views/cert/ObtainModal.vue:77
+msgid "Please wait..."
+msgstr ""
+
+#: src/views/cert/ObtainModal.vue:33
+#: src/views/cert/ObtainModal.vue:85
+#: src/views/cert/ObtainModal.vue:103
+msgid "Issuance successful"
+msgstr ""
+
+#: src/views/cert/ObtainModal.vue:41
+msgid "Please set up DNS resolution for the domain first, then continue with the issuance"
+msgstr ""
+
+#: src/views/cert/ObtainModal.vue:44
+msgid "DNS Records to Set"
+msgstr ""
+
+#: src/views/cert/ObtainModal.vue:54
+#: src/views/database/DatabaseList.vue:12
+#: src/views/database/ServerList.vue:17
+msgid "Type"
+msgstr ""
+
+#: src/views/cert/ObtainModal.vue:55
+msgid "Host Record"
+msgstr ""
+
+#: src/views/cert/ObtainModal.vue:56
+msgid "Record Value"
+msgstr ""
+
+#: src/views/cert/ObtainModal.vue:74
+msgid "Issue"
+msgstr ""
+
+#: src/views/cert/ObtainModal.vue:116
+msgid "Issue Certificate"
+msgstr ""
+
+#: src/views/cert/ObtainModal.vue:123
+msgid "Issuance Mode"
+msgstr ""
+
+#: src/views/cert/route.ts:19
+#: src/views/cert/UploadCertModal.vue:38
+#: src/views/setting/SettingHttps.vue:39
 msgid "Certificate"
 msgstr ""
 
-#: src/views/setting/SettingHttps.vue:44
+#: src/views/cert/UploadCertModal.vue:42
+msgid "Enter the content of the PEM certificate file"
+msgstr ""
+
+#: src/views/cert/UploadCertModal.vue:46
+#: src/views/setting/SettingHttps.vue:46
 msgid "Private Key"
 msgstr ""
 
-#: src/views/setting/SettingHttps.vue:54
+#: src/views/cert/UploadCertModal.vue:50
+msgid "Enter the content of the KEY private key file"
+msgstr ""
+
+#: src/views/dashboard/UpdateView.vue:24
+msgid "Update Panel"
+msgstr ""
+
+#: src/views/dashboard/UpdateView.vue:25
+msgid "Are you sure you want to update the panel?"
+msgstr ""
+
+#: src/views/dashboard/UpdateView.vue:26
+msgid "Confirm"
+msgstr ""
+
+#: src/views/dashboard/UpdateView.vue:27
+#: src/views/file/ToolBar.vue:139
+#: src/views/file/ToolBar.vue:226
+msgid "Cancel"
+msgstr ""
+
+#: src/views/dashboard/UpdateView.vue:29
+msgid "Panel updating..."
+msgstr ""
+
+#: src/views/dashboard/UpdateView.vue:40
+msgid "Panel updated successfully"
+msgstr ""
+
+#: src/views/dashboard/UpdateView.vue:47
+msgid "Update canceled"
+msgstr ""
+
+#: src/views/dashboard/UpdateView.vue:59
+msgid "Update Now"
+msgstr ""
+
+#: src/views/dashboard/UpdateView.vue:82
+msgid "Loading update information, please wait a moment"
+msgstr ""
+
+#: src/views/database/CreateDatabaseModal.vue:20
+msgid "Local (localhost)"
+msgstr ""
+
+#: src/views/database/CreateDatabaseModal.vue:21
+msgid "All (%)"
+msgstr ""
+
+#: src/views/database/CreateDatabaseModal.vue:22
+msgid "Specific"
+msgstr ""
+
+#: src/views/database/CreateDatabaseModal.vue:54
+#: src/views/database/IndexView.vue:32
+msgid "Create Database"
+msgstr ""
+
+#: src/views/database/CreateDatabaseModal.vue:62
+#: src/views/database/DatabaseList.vue:42
+#: src/views/database/IndexView.vue:51
+msgid "Server"
+msgstr ""
+
+#: src/views/database/CreateDatabaseModal.vue:66
+msgid "Select server"
+msgstr ""
+
+#: src/views/database/CreateDatabaseModal.vue:78
+#: src/views/database/IndexView.vue:36
+msgid "Create User"
+msgstr ""
+
+#: src/views/database/CreateDatabaseModal.vue:81
+msgid "Authorized User"
+msgstr ""
+
+#: src/views/database/CreateDatabaseModal.vue:86
+msgid "Enter authorized username (leave empty for no authorization)"
+msgstr ""
+
+#: src/views/database/CreateDatabaseModal.vue:89
+#: src/views/database/ServerList.vue:47
+#: src/views/login/IndexView.vue:113
+#: src/views/setting/SettingBase.vue:63
+msgid "Username"
+msgstr ""
+
+#: src/views/database/CreateDatabaseModal.vue:94
+msgid "Enter username"
+msgstr ""
+
+#: src/views/database/CreateDatabaseModal.vue:97
+#: src/views/database/ServerList.vue:56
+#: src/views/login/IndexView.vue:121
+#: src/views/setting/SettingBase.vue:69
+msgid "Password"
+msgstr ""
+
+#: src/views/database/CreateDatabaseModal.vue:103
+msgid "Enter password"
+msgstr ""
+
+#: src/views/database/CreateDatabaseModal.vue:106
+#: src/views/database/ServerList.vue:87
+msgid "Host"
+msgstr ""
+
+#: src/views/database/CreateDatabaseModal.vue:110
+msgid "Select host"
+msgstr ""
+
+#: src/views/database/CreateDatabaseModal.vue:117
+msgid "Specific Host"
+msgstr ""
+
+#: src/views/database/CreateDatabaseModal.vue:123
+msgid "Enter supported host address"
+msgstr ""
+
+#: src/views/database/DatabaseList.vue:47
+msgid "Encoding"
+msgstr ""
+
+#: src/views/database/DatabaseList.vue:57
+#: src/views/database/ServerList.vue:97
+msgid "Comment"
+msgstr ""
+
+#: src/views/database/DatabaseList.vue:88
+msgid "Are you sure you want to delete this database?"
+msgstr ""
+
+#: src/views/database/DatabaseList.vue:130
+#: src/views/database/ServerList.vue:243
+msgid "Modified successfully"
+msgstr ""
+
+#: src/views/database/IndexView.vue:40
+msgid "Add Server"
+msgstr ""
+
+#: src/views/database/IndexView.vue:48
+msgid "User"
+msgstr ""
+
+#: src/views/database/ServerList.vue:40
+#: src/views/file/ToolBar.vue:257
+msgid "Name"
+msgstr ""
+
+#: src/views/database/ServerList.vue:52
+#: src/views/database/ServerList.vue:67
+msgid "None"
+msgstr ""
+
+#: src/views/database/ServerList.vue:76
+#: src/views/file/ToolBar.vue:145
+#: src/views/file/ToolBar.vue:165
+msgid "Copied successfully"
+msgstr ""
+
+#: src/views/database/ServerList.vue:80
+#: src/views/file/ToolBar.vue:232
+msgid "Copy"
+msgstr ""
+
+#: src/views/database/ServerList.vue:114
+msgid "Status"
+msgstr ""
+
+#: src/views/database/ServerList.vue:121
+msgid "Valid"
+msgstr ""
+
+#: src/views/database/ServerList.vue:121
+msgid "Invalid"
+msgstr ""
+
+#: src/views/database/ServerList.vue:148
+msgid "Synchronized successfully"
+msgstr ""
+
+#: src/views/database/ServerList.vue:154
+msgid "Are you sure you want to synchronize database users (excluding password) to the panel?"
+msgstr ""
+
+#: src/views/database/ServerList.vue:164
+msgid "Sync"
+msgstr ""
+
+#: src/views/database/ServerList.vue:183
+msgid "Modify"
+msgstr ""
+
+#: src/views/database/ServerList.vue:193
+msgid "Built-in servers cannot be deleted. If you need to delete them, please uninstall the corresponding application"
+msgstr ""
+
+#: src/views/database/ServerList.vue:201
+msgid "Are you sure you want to delete the server?"
+msgstr ""
+
+#: src/views/error-page/NotFound.vue:10
+msgid "Sorry, the page you visited does not exist."
+msgstr ""
+
+#: src/views/error-page/NotFound.vue:15
+msgid "Back to Home"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:37
+#: src/views/file/ToolBar.vue:51
+msgid "Invalid name"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:60
+msgid "Download task created successfully"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:66
+msgid "Please select files/folders to copy"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:77
+#: src/views/file/ToolBar.vue:94
+msgid "Marked successfully, please navigate to the destination path to paste"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:83
+msgid "Please select files/folders to move"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:104
+msgid "Please mark the files/folders to copy or move first"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:128
+msgid "Warning"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:129
+msgid "There are items with the same name. %{ items } Do you want to overwrite?"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:138
+msgid "Overwrite"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:151
+#: src/views/file/ToolBar.vue:171
+msgid "Moved successfully"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:157
+msgid "Canceled"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:180
+msgid "Please select files/folders to delete"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:214
+msgid "File"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:215
+msgid "Folder"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:219
+#: src/views/file/ToolBar.vue:249
+msgid "New"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:221
+msgid "Upload"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:222
+#: src/views/file/ToolBar.vue:267
+msgid "Remote Download"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:229
+msgid "Paste"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:233
+msgid "Move"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:234
+msgid "Compress"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:235
+msgid "Permission"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:240
+msgid "Are you sure you want to delete in bulk?"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:275
+msgid "Download URL"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:278
+msgid "Save as"
+msgstr ""
+
+#: src/views/login/IndexView.vue:46
+msgid "Please enter username and password"
+msgstr ""
+
+#: src/views/login/IndexView.vue:50
+msgid "Failed to get encryption public key, please refresh the page and try again"
+msgstr ""
+
+#: src/views/login/IndexView.vue:61
+msgid "Login successful!"
+msgstr ""
+
+#: src/views/login/IndexView.vue:130
+msgid "Safe Login"
+msgstr ""
+
+#: src/views/login/IndexView.vue:131
+msgid "Remember Me"
+msgstr ""
+
+#: src/views/login/IndexView.vue:145
+msgid "Login"
+msgstr ""
+
+#: src/views/setting/IndexView.vue:17
+msgid "Basic"
+msgstr ""
+
+#: src/views/setting/SettingBase.vue:34
+#: src/views/setting/SettingHttps.vue:27
+msgid "Saved successfully"
+msgstr ""
+
+#: src/views/setting/SettingBase.vue:51
+msgid "Modifying panel port/entrance requires corresponding changes in the browser address bar to access the panel!"
+msgstr ""
+
+#: src/views/setting/SettingBase.vue:54
+#: src/views/setting/SettingBase.vue:57
+msgid "Panel Name"
+msgstr ""
+
+#: src/views/setting/SettingBase.vue:60
+msgid "Language"
+msgstr ""
+
+#: src/views/setting/SettingBase.vue:66
+#: src/views/setting/SettingBase.vue:72
+#: src/views/setting/SettingBase.vue:90
+msgid "admin"
+msgstr ""
+
+#: src/views/setting/SettingBase.vue:75
+msgid "Certificate Default Email"
+msgstr ""
+
+#: src/views/setting/SettingBase.vue:78
+msgid "admin@example.com"
+msgstr ""
+
+#: src/views/setting/SettingBase.vue:81
+msgid "Port"
+msgstr ""
+
+#: src/views/setting/SettingBase.vue:84
+msgid "8888"
+msgstr ""
+
+#: src/views/setting/SettingBase.vue:87
+msgid "Security Entrance"
+msgstr ""
+
+#: src/views/setting/SettingBase.vue:93
+msgid "Offline Mode"
+msgstr ""
+
+#: src/views/setting/SettingBase.vue:96
+msgid "Auto Update"
+msgstr ""
+
+#: src/views/setting/SettingBase.vue:99
+msgid "Default Website Directory"
+msgstr ""
+
+#: src/views/setting/SettingBase.vue:102
+msgid "/www/wwwroot"
+msgstr ""
+
+#: src/views/setting/SettingBase.vue:105
+msgid "Default Backup Directory"
+msgstr ""
+
+#: src/views/setting/SettingBase.vue:108
+msgid "/www/backup"
+msgstr ""
+
+#: src/views/setting/SettingBase.vue:114
+#: src/views/setting/SettingHttps.vue:56
 msgid "Save"
 msgstr ""
+
+#: src/views/setting/SettingHttps.vue:36
+msgid "Panel HTTPS"
+msgstr ""
diff --git a/web/src/locales/zh_CN.po b/web/src/locales/zh_CN.po
index 85c8b021..224ff005 100644
--- a/web/src/locales/zh_CN.po
+++ b/web/src/locales/zh_CN.po
@@ -8,22 +8,894 @@ msgstr ""
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 
-#: src/views/setting/SettingHttps.vue:25
-msgid "Saved successfully"
+#: src/views/app/IndexView.vue:19 src/views/app/IndexView.vue:159
+#: src/views/app/IndexView.vue:164
+msgid "Install"
 msgstr ""
 
-#: src/views/setting/SettingHttps.vue:34
-msgid "Panel HTTPS"
+#: src/views/app/IndexView.vue:37
+msgid "App Name"
 msgstr ""
 
-#: src/views/setting/SettingHttps.vue:37
+#: src/views/app/IndexView.vue:44
+msgid "Description"
+msgstr ""
+
+#: src/views/app/IndexView.vue:51
+msgid "Installed Version"
+msgstr ""
+
+#: src/views/app/IndexView.vue:57
+msgid "Show in Home"
+msgstr ""
+
+#: src/views/app/IndexView.vue:71 src/views/backup/ListView.vue:58
+#: src/views/database/DatabaseList.vue:74 src/views/database/ServerList.vue:135
+msgid "Actions"
+msgstr ""
+
+#: src/views/app/IndexView.vue:91
+msgid ""
+"Updating app %{ app } may reset related configurations to default state, are "
+"you sure to continue?"
+msgstr ""
+
+#: src/views/app/IndexView.vue:101
+msgid "Update"
+msgstr ""
+
+#: src/views/app/IndexView.vue:120
+msgid "Manage"
+msgstr ""
+
+#: src/views/app/IndexView.vue:133
+msgid "Are you sure to uninstall app %{ app }?"
+msgstr ""
+
+#: src/views/app/IndexView.vue:143
+msgid "Uninstall"
+msgstr ""
+
+#: src/views/app/IndexView.vue:189
+msgid "Setup successfully"
+msgstr ""
+
+#: src/views/app/IndexView.vue:195 src/views/app/IndexView.vue:201
+#: src/views/app/VersionModal.vue:31
+msgid "Task submitted, please check the progress in background tasks"
+msgstr ""
+
+#: src/views/app/IndexView.vue:212
+msgid "Cache updated successfully"
+msgstr ""
+
+#: src/views/app/IndexView.vue:226
+msgid "Update Cache"
+msgstr ""
+
+#: src/views/app/IndexView.vue:230
+msgid ""
+"Before updating apps, it is strongly recommended to backup/snapshot first, "
+"so you can roll back immediately if there are any issues!"
+msgstr ""
+
+#: src/views/app/VersionModal.vue:71
+msgid "Channel"
+msgstr ""
+
+#: src/views/app/VersionModal.vue:78
+msgid "Version"
+msgstr ""
+
+#: src/views/app/VersionModal.vue:79
+msgid "Please select a channel"
+msgstr ""
+
+#: src/views/app/VersionModal.vue:89 src/views/backup/ListView.vue:237
+#: src/views/backup/ListView.vue:257 src/views/cert/CreateAccountModal.vue:114
+#: src/views/cert/CreateCertModal.vue:111 src/views/cert/CreateDnsModal.vue:173
+#: src/views/cert/ObtainModal.vue:126 src/views/cert/UploadCertModal.vue:55
+#: src/views/database/CreateDatabaseModal.vue:127
+#: src/views/file/ToolBar.vue:261 src/views/file/ToolBar.vue:282
+msgid "Submit"
+msgstr ""
+
+#: src/views/backup/IndexView.vue:37 src/views/backup/ListView.vue:217
+#: src/views/backup/ListView.vue:250 src/views/cert/CreateCertModal.vue:86
+msgid "Website"
+msgstr ""
+
+#: src/views/backup/ListView.vue:36
+msgid "Filename"
+msgstr ""
+
+#: src/views/backup/ListView.vue:43
+msgid "Size"
+msgstr ""
+
+#: src/views/backup/ListView.vue:49 src/views/database/ServerList.vue:126
+msgid "Update Date"
+msgstr ""
+
+#: src/views/backup/ListView.vue:77
+msgid "Restore"
+msgstr ""
+
+#: src/views/backup/ListView.vue:88
+msgid "Are you sure you want to delete this backup?"
+msgstr ""
+
+#: src/views/backup/ListView.vue:99 src/views/database/DatabaseList.vue:99
+#: src/views/database/ServerList.vue:212 src/views/file/ToolBar.vue:238
+msgid "Delete"
+msgstr ""
+
+#: src/views/backup/ListView.vue:126 src/views/cert/CreateAccountModal.vue:49
+#: src/views/cert/CreateCertModal.vue:50 src/views/cert/CreateDnsModal.vue:35
+#: src/views/cert/UploadCertModal.vue:21
+#: src/views/database/CreateDatabaseModal.vue:28 src/views/file/ToolBar.vue:45
+msgid "Created successfully"
+msgstr ""
+
+#: src/views/backup/ListView.vue:132
+msgid "Restoring..."
+msgstr ""
+
+#: src/views/backup/ListView.vue:139
+msgid "Restored successfully"
+msgstr ""
+
+#: src/views/backup/ListView.vue:149 src/views/database/DatabaseList.vue:124
+#: src/views/database/ServerList.vue:237 src/views/file/ToolBar.vue:189
+msgid "Deleted successfully"
+msgstr ""
+
+#: src/views/backup/ListView.vue:182 src/views/backup/ListView.vue:209
+msgid "Create Backup"
+msgstr ""
+
+#: src/views/backup/ListView.vue:183 src/views/backup/UploadModal.vue:39
+msgid "Upload Backup"
+msgstr ""
+
+#: src/views/backup/ListView.vue:218 src/views/backup/ListView.vue:251
+msgid "Select website"
+msgstr ""
+
+#: src/views/backup/ListView.vue:220
+#: src/views/database/CreateDatabaseModal.vue:70
+#: src/views/database/DatabaseList.vue:35
+msgid "Database Name"
+msgstr ""
+
+#: src/views/backup/ListView.vue:225
+#: src/views/database/CreateDatabaseModal.vue:75
+msgid "Enter database name"
+msgstr ""
+
+#: src/views/backup/ListView.vue:228
+msgid "Save Directory"
+msgstr ""
+
+#: src/views/backup/ListView.vue:233
+msgid "Leave empty to use default path"
+msgstr ""
+
+#: src/views/backup/ListView.vue:242
+msgid "Restore Backup"
+msgstr ""
+
+#: src/views/backup/ListView.vue:253 src/views/database/IndexView.vue:45
+msgid "Database"
+msgstr ""
+
+#: src/views/backup/route.ts:19
+msgid "Backup"
+msgstr ""
+
+#: src/views/backup/UploadModal.vue:20
+msgid "Upload %{ filename } successfully"
+msgstr ""
+
+#: src/views/backup/UploadModal.vue:51
+msgid "Click or drag files to this area to upload"
+msgstr ""
+
+#: src/views/backup/UploadModal.vue:53
+msgid ""
+"For large files, it is recommended to use SFTP or other methods to upload"
+msgstr ""
+
+#: src/views/cert/CreateAccountModal.vue:38
+msgid "Registering account with CA, please wait patiently"
+msgstr ""
+
+#: src/views/cert/CreateAccountModal.vue:61 src/views/cert/IndexView.vue:106
+msgid "Create Account"
+msgstr ""
+
+#: src/views/cert/CreateAccountModal.vue:68
+msgid ""
+"Google and SSL.com require obtaining KID and HMAC from their official "
+"websites first"
+msgstr ""
+
+#: src/views/cert/CreateAccountModal.vue:70
+msgid ""
+"Google is not accessible in mainland China, and other CAs depend on network "
+"conditions. GoogleCN or Let's Encrypt are recommended"
+msgstr ""
+
+#: src/views/cert/CreateAccountModal.vue:73
+msgid "CA"
+msgstr ""
+
+#: src/views/cert/CreateAccountModal.vue:76
+msgid "Select CA"
+msgstr ""
+
+#: src/views/cert/CreateAccountModal.vue:81
+#: src/views/cert/CreateCertModal.vue:78
+msgid "Key Type"
+msgstr ""
+
+#: src/views/cert/CreateAccountModal.vue:84
+#: src/views/cert/CreateCertModal.vue:81
+msgid "Select key type"
+msgstr ""
+
+#: src/views/cert/CreateAccountModal.vue:89
+msgid "Email"
+msgstr ""
+
+#: src/views/cert/CreateAccountModal.vue:94
+msgid "Enter email address"
+msgstr ""
+
+#: src/views/cert/CreateAccountModal.vue:102
+msgid "Enter KID"
+msgstr ""
+
+#: src/views/cert/CreateAccountModal.vue:110
+msgid "Enter HMAC"
+msgstr ""
+
+#: src/views/cert/CreateCertModal.vue:59 src/views/cert/IndexView.vue:102
+msgid "Create Certificate"
+msgstr ""
+
+#: src/views/cert/CreateCertModal.vue:67
+msgid ""
+"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"
+msgstr ""
+
+#: src/views/cert/CreateCertModal.vue:70 src/views/cert/ObtainModal.vue:53
+msgid "Domain"
+msgstr ""
+
+#: src/views/cert/CreateCertModal.vue:89
+msgid "Select website for certificate deployment"
+msgstr ""
+
+#: src/views/cert/CreateCertModal.vue:94
+msgid "Account"
+msgstr ""
+
+#: src/views/cert/CreateCertModal.vue:97
+msgid "Select account for certificate issuance"
+msgstr ""
+
+#: src/views/cert/CreateCertModal.vue:102 src/views/cert/CreateDnsModal.vue:55
+msgid "DNS"
+msgstr ""
+
+#: src/views/cert/CreateCertModal.vue:105
+msgid "Select DNS for certificate issuance"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:44 src/views/cert/IndexView.vue:110
+msgid "Create DNS"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:52
+msgid "Comment Name"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:53
+msgid "Enter comment name"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:58
+msgid "Select DNS"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:64
+msgid "Enter Aliyun Access Key"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:67
+msgid "Enter Aliyun Secret Key"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:70
+msgid "Enter Tencent Cloud SecretId"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:73
+msgid "Enter Tencent Cloud SecretKey"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:76
+msgid "Enter Huawei Cloud AccessKeyId"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:82
+msgid "Enter Huawei Cloud SecretAccessKey"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:86
+msgid "Enter Western Digital Username"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:92
+msgid "Enter Western Digital API Password"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:99
+msgid "Enter Cloudflare API Key"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:103
+msgid "Enter GoDaddy Token"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:106
+msgid "Enter G-Core API Key"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:109
+msgid "Enter Porkbun API Key"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:115
+msgid "Enter Porkbun Secret Key"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:122
+msgid "Enter Namecheap API Username"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:126
+msgid "Enter Namecheap API Key"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:132
+msgid "Enter NameSilo API Token"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:136
+msgid "Enter Name.com Username"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:139
+msgid "Enter Name.com Token"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:146
+msgid "Enter ClouDNS Auth ID (use Sub Auth ID by adding sub-prefix)"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:153
+msgid "Enter ClouDNS Auth Password"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:157
+msgid "Enter Duck DNS Token"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:163
+msgid "Enter Hetzner Auth API Token"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:167
+msgid "Enter Linode Token"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:170
+msgid "Enter Vercel Token"
+msgstr ""
+
+#: src/views/cert/IndexView.vue:98 src/views/cert/UploadCertModal.vue:30
+msgid "Upload Certificate"
+msgstr ""
+
+#: src/views/cert/IndexView.vue:115
+msgid "Certificate List"
+msgstr ""
+
+#: src/views/cert/IndexView.vue:118
+msgid "Account List"
+msgstr ""
+
+#: src/views/cert/IndexView.vue:121
+msgid "DNS List"
+msgstr ""
+
+#: src/views/cert/ObtainModal.vue:18
+msgid "Automatic"
+msgstr ""
+
+#: src/views/cert/ObtainModal.vue:19
+msgid "Manual"
+msgstr ""
+
+#: src/views/cert/ObtainModal.vue:20
+msgid "Self-signed"
+msgstr ""
+
+#: src/views/cert/ObtainModal.vue:24 src/views/cert/ObtainModal.vue:77
+msgid "Please wait..."
+msgstr ""
+
+#: src/views/cert/ObtainModal.vue:33 src/views/cert/ObtainModal.vue:85
+#: src/views/cert/ObtainModal.vue:103
+msgid "Issuance successful"
+msgstr ""
+
+#: src/views/cert/ObtainModal.vue:41
+msgid ""
+"Please set up DNS resolution for the domain first, then continue with the "
+"issuance"
+msgstr ""
+
+#: src/views/cert/ObtainModal.vue:44
+msgid "DNS Records to Set"
+msgstr ""
+
+#: src/views/cert/ObtainModal.vue:54 src/views/database/DatabaseList.vue:12
+#: src/views/database/ServerList.vue:17
+msgid "Type"
+msgstr ""
+
+#: src/views/cert/ObtainModal.vue:55
+msgid "Host Record"
+msgstr ""
+
+#: src/views/cert/ObtainModal.vue:56
+msgid "Record Value"
+msgstr ""
+
+#: src/views/cert/ObtainModal.vue:74
+msgid "Issue"
+msgstr ""
+
+#: src/views/cert/ObtainModal.vue:116
+msgid "Issue Certificate"
+msgstr ""
+
+#: src/views/cert/ObtainModal.vue:123
+msgid "Issuance Mode"
+msgstr ""
+
+#: src/views/cert/route.ts:19 src/views/cert/UploadCertModal.vue:38
+#: src/views/setting/SettingHttps.vue:39
 msgid "Certificate"
 msgstr ""
 
-#: src/views/setting/SettingHttps.vue:44
+#: src/views/cert/UploadCertModal.vue:42
+msgid "Enter the content of the PEM certificate file"
+msgstr ""
+
+#: src/views/cert/UploadCertModal.vue:46 src/views/setting/SettingHttps.vue:46
 msgid "Private Key"
 msgstr ""
 
-#: src/views/setting/SettingHttps.vue:54
+#: src/views/cert/UploadCertModal.vue:50
+msgid "Enter the content of the KEY private key file"
+msgstr ""
+
+#: src/views/dashboard/UpdateView.vue:24
+msgid "Update Panel"
+msgstr ""
+
+#: src/views/dashboard/UpdateView.vue:25
+msgid "Are you sure you want to update the panel?"
+msgstr ""
+
+#: src/views/dashboard/UpdateView.vue:26
+msgid "Confirm"
+msgstr ""
+
+#: src/views/dashboard/UpdateView.vue:27 src/views/file/ToolBar.vue:139
+#: src/views/file/ToolBar.vue:226
+msgid "Cancel"
+msgstr ""
+
+#: src/views/dashboard/UpdateView.vue:29
+msgid "Panel updating..."
+msgstr ""
+
+#: src/views/dashboard/UpdateView.vue:40
+msgid "Panel updated successfully"
+msgstr ""
+
+#: src/views/dashboard/UpdateView.vue:47
+msgid "Update canceled"
+msgstr ""
+
+#: src/views/dashboard/UpdateView.vue:59
+msgid "Update Now"
+msgstr ""
+
+#: src/views/dashboard/UpdateView.vue:82
+msgid "Loading update information, please wait a moment"
+msgstr ""
+
+#: src/views/database/CreateDatabaseModal.vue:20
+msgid "Local (localhost)"
+msgstr ""
+
+#: src/views/database/CreateDatabaseModal.vue:21
+msgid "All (%)"
+msgstr ""
+
+#: src/views/database/CreateDatabaseModal.vue:22
+msgid "Specific"
+msgstr ""
+
+#: src/views/database/CreateDatabaseModal.vue:54
+#: src/views/database/IndexView.vue:32
+msgid "Create Database"
+msgstr ""
+
+#: src/views/database/CreateDatabaseModal.vue:62
+#: src/views/database/DatabaseList.vue:42 src/views/database/IndexView.vue:51
+msgid "Server"
+msgstr ""
+
+#: src/views/database/CreateDatabaseModal.vue:66
+msgid "Select server"
+msgstr ""
+
+#: src/views/database/CreateDatabaseModal.vue:78
+#: src/views/database/IndexView.vue:36
+msgid "Create User"
+msgstr ""
+
+#: src/views/database/CreateDatabaseModal.vue:81
+msgid "Authorized User"
+msgstr ""
+
+#: src/views/database/CreateDatabaseModal.vue:86
+msgid "Enter authorized username (leave empty for no authorization)"
+msgstr ""
+
+#: src/views/database/CreateDatabaseModal.vue:89
+#: src/views/database/ServerList.vue:47 src/views/login/IndexView.vue:113
+#: src/views/setting/SettingBase.vue:63
+msgid "Username"
+msgstr ""
+
+#: src/views/database/CreateDatabaseModal.vue:94
+msgid "Enter username"
+msgstr ""
+
+#: src/views/database/CreateDatabaseModal.vue:97
+#: src/views/database/ServerList.vue:56 src/views/login/IndexView.vue:121
+#: src/views/setting/SettingBase.vue:69
+msgid "Password"
+msgstr ""
+
+#: src/views/database/CreateDatabaseModal.vue:103
+msgid "Enter password"
+msgstr ""
+
+#: src/views/database/CreateDatabaseModal.vue:106
+#: src/views/database/ServerList.vue:87
+msgid "Host"
+msgstr ""
+
+#: src/views/database/CreateDatabaseModal.vue:110
+msgid "Select host"
+msgstr ""
+
+#: src/views/database/CreateDatabaseModal.vue:117
+msgid "Specific Host"
+msgstr ""
+
+#: src/views/database/CreateDatabaseModal.vue:123
+msgid "Enter supported host address"
+msgstr ""
+
+#: src/views/database/DatabaseList.vue:47
+msgid "Encoding"
+msgstr ""
+
+#: src/views/database/DatabaseList.vue:57 src/views/database/ServerList.vue:97
+msgid "Comment"
+msgstr ""
+
+#: src/views/database/DatabaseList.vue:88
+msgid "Are you sure you want to delete this database?"
+msgstr ""
+
+#: src/views/database/DatabaseList.vue:130
+#: src/views/database/ServerList.vue:243
+msgid "Modified successfully"
+msgstr ""
+
+#: src/views/database/IndexView.vue:40
+msgid "Add Server"
+msgstr ""
+
+#: src/views/database/IndexView.vue:48
+msgid "User"
+msgstr ""
+
+#: src/views/database/ServerList.vue:40 src/views/file/ToolBar.vue:257
+msgid "Name"
+msgstr ""
+
+#: src/views/database/ServerList.vue:52 src/views/database/ServerList.vue:67
+msgid "None"
+msgstr ""
+
+#: src/views/database/ServerList.vue:76 src/views/file/ToolBar.vue:145
+#: src/views/file/ToolBar.vue:165
+msgid "Copied successfully"
+msgstr ""
+
+#: src/views/database/ServerList.vue:80 src/views/file/ToolBar.vue:232
+msgid "Copy"
+msgstr ""
+
+#: src/views/database/ServerList.vue:114
+msgid "Status"
+msgstr ""
+
+#: src/views/database/ServerList.vue:121
+msgid "Valid"
+msgstr ""
+
+#: src/views/database/ServerList.vue:121
+msgid "Invalid"
+msgstr ""
+
+#: src/views/database/ServerList.vue:148
+msgid "Synchronized successfully"
+msgstr ""
+
+#: src/views/database/ServerList.vue:154
+msgid ""
+"Are you sure you want to synchronize database users (excluding password) to "
+"the panel?"
+msgstr ""
+
+#: src/views/database/ServerList.vue:164
+msgid "Sync"
+msgstr ""
+
+#: src/views/database/ServerList.vue:183
+msgid "Modify"
+msgstr ""
+
+#: src/views/database/ServerList.vue:193
+msgid ""
+"Built-in servers cannot be deleted. If you need to delete them, please "
+"uninstall the corresponding application"
+msgstr ""
+
+#: src/views/database/ServerList.vue:201
+msgid "Are you sure you want to delete the server?"
+msgstr ""
+
+#: src/views/error-page/NotFound.vue:10
+msgid "Sorry, the page you visited does not exist."
+msgstr ""
+
+#: src/views/error-page/NotFound.vue:15
+msgid "Back to Home"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:37 src/views/file/ToolBar.vue:51
+msgid "Invalid name"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:60
+msgid "Download task created successfully"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:66
+msgid "Please select files/folders to copy"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:77 src/views/file/ToolBar.vue:94
+msgid "Marked successfully, please navigate to the destination path to paste"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:83
+msgid "Please select files/folders to move"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:104
+msgid "Please mark the files/folders to copy or move first"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:128
+msgid "Warning"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:129
+msgid ""
+"There are items with the same name. %{ items } Do you want to overwrite?"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:138
+msgid "Overwrite"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:151 src/views/file/ToolBar.vue:171
+msgid "Moved successfully"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:157
+msgid "Canceled"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:180
+msgid "Please select files/folders to delete"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:214
+msgid "File"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:215
+msgid "Folder"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:219 src/views/file/ToolBar.vue:249
+msgid "New"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:221
+msgid "Upload"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:222 src/views/file/ToolBar.vue:267
+msgid "Remote Download"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:229
+msgid "Paste"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:233
+msgid "Move"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:234
+msgid "Compress"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:235
+msgid "Permission"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:240
+msgid "Are you sure you want to delete in bulk?"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:275
+msgid "Download URL"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:278
+msgid "Save as"
+msgstr ""
+
+#: src/views/login/IndexView.vue:46
+msgid "Please enter username and password"
+msgstr ""
+
+#: src/views/login/IndexView.vue:50
+msgid ""
+"Failed to get encryption public key, please refresh the page and try again"
+msgstr ""
+
+#: src/views/login/IndexView.vue:61
+msgid "Login successful!"
+msgstr ""
+
+#: src/views/login/IndexView.vue:130
+msgid "Safe Login"
+msgstr ""
+
+#: src/views/login/IndexView.vue:131
+msgid "Remember Me"
+msgstr ""
+
+#: src/views/login/IndexView.vue:145
+msgid "Login"
+msgstr ""
+
+#: src/views/setting/IndexView.vue:17
+msgid "Basic"
+msgstr ""
+
+#: src/views/setting/SettingBase.vue:34 src/views/setting/SettingHttps.vue:27
+msgid "Saved successfully"
+msgstr ""
+
+#: src/views/setting/SettingBase.vue:51
+msgid ""
+"Modifying panel port/entrance requires corresponding changes in the browser "
+"address bar to access the panel!"
+msgstr ""
+
+#: src/views/setting/SettingBase.vue:54 src/views/setting/SettingBase.vue:57
+msgid "Panel Name"
+msgstr ""
+
+#: src/views/setting/SettingBase.vue:60
+msgid "Language"
+msgstr ""
+
+#: src/views/setting/SettingBase.vue:66 src/views/setting/SettingBase.vue:72
+#: src/views/setting/SettingBase.vue:90
+msgid "admin"
+msgstr ""
+
+#: src/views/setting/SettingBase.vue:75
+msgid "Certificate Default Email"
+msgstr ""
+
+#: src/views/setting/SettingBase.vue:78
+msgid "admin@example.com"
+msgstr ""
+
+#: src/views/setting/SettingBase.vue:81
+msgid "Port"
+msgstr ""
+
+#: src/views/setting/SettingBase.vue:84
+msgid "8888"
+msgstr ""
+
+#: src/views/setting/SettingBase.vue:87
+msgid "Security Entrance"
+msgstr ""
+
+#: src/views/setting/SettingBase.vue:93
+msgid "Offline Mode"
+msgstr ""
+
+#: src/views/setting/SettingBase.vue:96
+msgid "Auto Update"
+msgstr ""
+
+#: src/views/setting/SettingBase.vue:99
+msgid "Default Website Directory"
+msgstr ""
+
+#: src/views/setting/SettingBase.vue:102
+msgid "/www/wwwroot"
+msgstr ""
+
+#: src/views/setting/SettingBase.vue:105
+msgid "Default Backup Directory"
+msgstr ""
+
+#: src/views/setting/SettingBase.vue:108
+msgid "/www/backup"
+msgstr ""
+
+#: src/views/setting/SettingBase.vue:114 src/views/setting/SettingHttps.vue:56
 msgid "Save"
 msgstr ""
+
+#: src/views/setting/SettingHttps.vue:36
+msgid "Panel HTTPS"
+msgstr ""
diff --git a/web/src/locales/zh_TW.po b/web/src/locales/zh_TW.po
index 94b809b7..3ffc63fb 100644
--- a/web/src/locales/zh_TW.po
+++ b/web/src/locales/zh_TW.po
@@ -8,22 +8,894 @@ msgstr ""
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 
-#: src/views/setting/SettingHttps.vue:25
-msgid "Saved successfully"
+#: src/views/app/IndexView.vue:19 src/views/app/IndexView.vue:159
+#: src/views/app/IndexView.vue:164
+msgid "Install"
 msgstr ""
 
-#: src/views/setting/SettingHttps.vue:34
-msgid "Panel HTTPS"
+#: src/views/app/IndexView.vue:37
+msgid "App Name"
 msgstr ""
 
-#: src/views/setting/SettingHttps.vue:37
+#: src/views/app/IndexView.vue:44
+msgid "Description"
+msgstr ""
+
+#: src/views/app/IndexView.vue:51
+msgid "Installed Version"
+msgstr ""
+
+#: src/views/app/IndexView.vue:57
+msgid "Show in Home"
+msgstr ""
+
+#: src/views/app/IndexView.vue:71 src/views/backup/ListView.vue:58
+#: src/views/database/DatabaseList.vue:74 src/views/database/ServerList.vue:135
+msgid "Actions"
+msgstr ""
+
+#: src/views/app/IndexView.vue:91
+msgid ""
+"Updating app %{ app } may reset related configurations to default state, are "
+"you sure to continue?"
+msgstr ""
+
+#: src/views/app/IndexView.vue:101
+msgid "Update"
+msgstr ""
+
+#: src/views/app/IndexView.vue:120
+msgid "Manage"
+msgstr ""
+
+#: src/views/app/IndexView.vue:133
+msgid "Are you sure to uninstall app %{ app }?"
+msgstr ""
+
+#: src/views/app/IndexView.vue:143
+msgid "Uninstall"
+msgstr ""
+
+#: src/views/app/IndexView.vue:189
+msgid "Setup successfully"
+msgstr ""
+
+#: src/views/app/IndexView.vue:195 src/views/app/IndexView.vue:201
+#: src/views/app/VersionModal.vue:31
+msgid "Task submitted, please check the progress in background tasks"
+msgstr ""
+
+#: src/views/app/IndexView.vue:212
+msgid "Cache updated successfully"
+msgstr ""
+
+#: src/views/app/IndexView.vue:226
+msgid "Update Cache"
+msgstr ""
+
+#: src/views/app/IndexView.vue:230
+msgid ""
+"Before updating apps, it is strongly recommended to backup/snapshot first, "
+"so you can roll back immediately if there are any issues!"
+msgstr ""
+
+#: src/views/app/VersionModal.vue:71
+msgid "Channel"
+msgstr ""
+
+#: src/views/app/VersionModal.vue:78
+msgid "Version"
+msgstr ""
+
+#: src/views/app/VersionModal.vue:79
+msgid "Please select a channel"
+msgstr ""
+
+#: src/views/app/VersionModal.vue:89 src/views/backup/ListView.vue:237
+#: src/views/backup/ListView.vue:257 src/views/cert/CreateAccountModal.vue:114
+#: src/views/cert/CreateCertModal.vue:111 src/views/cert/CreateDnsModal.vue:173
+#: src/views/cert/ObtainModal.vue:126 src/views/cert/UploadCertModal.vue:55
+#: src/views/database/CreateDatabaseModal.vue:127
+#: src/views/file/ToolBar.vue:261 src/views/file/ToolBar.vue:282
+msgid "Submit"
+msgstr ""
+
+#: src/views/backup/IndexView.vue:37 src/views/backup/ListView.vue:217
+#: src/views/backup/ListView.vue:250 src/views/cert/CreateCertModal.vue:86
+msgid "Website"
+msgstr ""
+
+#: src/views/backup/ListView.vue:36
+msgid "Filename"
+msgstr ""
+
+#: src/views/backup/ListView.vue:43
+msgid "Size"
+msgstr ""
+
+#: src/views/backup/ListView.vue:49 src/views/database/ServerList.vue:126
+msgid "Update Date"
+msgstr ""
+
+#: src/views/backup/ListView.vue:77
+msgid "Restore"
+msgstr ""
+
+#: src/views/backup/ListView.vue:88
+msgid "Are you sure you want to delete this backup?"
+msgstr ""
+
+#: src/views/backup/ListView.vue:99 src/views/database/DatabaseList.vue:99
+#: src/views/database/ServerList.vue:212 src/views/file/ToolBar.vue:238
+msgid "Delete"
+msgstr ""
+
+#: src/views/backup/ListView.vue:126 src/views/cert/CreateAccountModal.vue:49
+#: src/views/cert/CreateCertModal.vue:50 src/views/cert/CreateDnsModal.vue:35
+#: src/views/cert/UploadCertModal.vue:21
+#: src/views/database/CreateDatabaseModal.vue:28 src/views/file/ToolBar.vue:45
+msgid "Created successfully"
+msgstr ""
+
+#: src/views/backup/ListView.vue:132
+msgid "Restoring..."
+msgstr ""
+
+#: src/views/backup/ListView.vue:139
+msgid "Restored successfully"
+msgstr ""
+
+#: src/views/backup/ListView.vue:149 src/views/database/DatabaseList.vue:124
+#: src/views/database/ServerList.vue:237 src/views/file/ToolBar.vue:189
+msgid "Deleted successfully"
+msgstr ""
+
+#: src/views/backup/ListView.vue:182 src/views/backup/ListView.vue:209
+msgid "Create Backup"
+msgstr ""
+
+#: src/views/backup/ListView.vue:183 src/views/backup/UploadModal.vue:39
+msgid "Upload Backup"
+msgstr ""
+
+#: src/views/backup/ListView.vue:218 src/views/backup/ListView.vue:251
+msgid "Select website"
+msgstr ""
+
+#: src/views/backup/ListView.vue:220
+#: src/views/database/CreateDatabaseModal.vue:70
+#: src/views/database/DatabaseList.vue:35
+msgid "Database Name"
+msgstr ""
+
+#: src/views/backup/ListView.vue:225
+#: src/views/database/CreateDatabaseModal.vue:75
+msgid "Enter database name"
+msgstr ""
+
+#: src/views/backup/ListView.vue:228
+msgid "Save Directory"
+msgstr ""
+
+#: src/views/backup/ListView.vue:233
+msgid "Leave empty to use default path"
+msgstr ""
+
+#: src/views/backup/ListView.vue:242
+msgid "Restore Backup"
+msgstr ""
+
+#: src/views/backup/ListView.vue:253 src/views/database/IndexView.vue:45
+msgid "Database"
+msgstr ""
+
+#: src/views/backup/route.ts:19
+msgid "Backup"
+msgstr ""
+
+#: src/views/backup/UploadModal.vue:20
+msgid "Upload %{ filename } successfully"
+msgstr ""
+
+#: src/views/backup/UploadModal.vue:51
+msgid "Click or drag files to this area to upload"
+msgstr ""
+
+#: src/views/backup/UploadModal.vue:53
+msgid ""
+"For large files, it is recommended to use SFTP or other methods to upload"
+msgstr ""
+
+#: src/views/cert/CreateAccountModal.vue:38
+msgid "Registering account with CA, please wait patiently"
+msgstr ""
+
+#: src/views/cert/CreateAccountModal.vue:61 src/views/cert/IndexView.vue:106
+msgid "Create Account"
+msgstr ""
+
+#: src/views/cert/CreateAccountModal.vue:68
+msgid ""
+"Google and SSL.com require obtaining KID and HMAC from their official "
+"websites first"
+msgstr ""
+
+#: src/views/cert/CreateAccountModal.vue:70
+msgid ""
+"Google is not accessible in mainland China, and other CAs depend on network "
+"conditions. GoogleCN or Let's Encrypt are recommended"
+msgstr ""
+
+#: src/views/cert/CreateAccountModal.vue:73
+msgid "CA"
+msgstr ""
+
+#: src/views/cert/CreateAccountModal.vue:76
+msgid "Select CA"
+msgstr ""
+
+#: src/views/cert/CreateAccountModal.vue:81
+#: src/views/cert/CreateCertModal.vue:78
+msgid "Key Type"
+msgstr ""
+
+#: src/views/cert/CreateAccountModal.vue:84
+#: src/views/cert/CreateCertModal.vue:81
+msgid "Select key type"
+msgstr ""
+
+#: src/views/cert/CreateAccountModal.vue:89
+msgid "Email"
+msgstr ""
+
+#: src/views/cert/CreateAccountModal.vue:94
+msgid "Enter email address"
+msgstr ""
+
+#: src/views/cert/CreateAccountModal.vue:102
+msgid "Enter KID"
+msgstr ""
+
+#: src/views/cert/CreateAccountModal.vue:110
+msgid "Enter HMAC"
+msgstr ""
+
+#: src/views/cert/CreateCertModal.vue:59 src/views/cert/IndexView.vue:102
+msgid "Create Certificate"
+msgstr ""
+
+#: src/views/cert/CreateCertModal.vue:67
+msgid ""
+"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"
+msgstr ""
+
+#: src/views/cert/CreateCertModal.vue:70 src/views/cert/ObtainModal.vue:53
+msgid "Domain"
+msgstr ""
+
+#: src/views/cert/CreateCertModal.vue:89
+msgid "Select website for certificate deployment"
+msgstr ""
+
+#: src/views/cert/CreateCertModal.vue:94
+msgid "Account"
+msgstr ""
+
+#: src/views/cert/CreateCertModal.vue:97
+msgid "Select account for certificate issuance"
+msgstr ""
+
+#: src/views/cert/CreateCertModal.vue:102 src/views/cert/CreateDnsModal.vue:55
+msgid "DNS"
+msgstr ""
+
+#: src/views/cert/CreateCertModal.vue:105
+msgid "Select DNS for certificate issuance"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:44 src/views/cert/IndexView.vue:110
+msgid "Create DNS"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:52
+msgid "Comment Name"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:53
+msgid "Enter comment name"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:58
+msgid "Select DNS"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:64
+msgid "Enter Aliyun Access Key"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:67
+msgid "Enter Aliyun Secret Key"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:70
+msgid "Enter Tencent Cloud SecretId"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:73
+msgid "Enter Tencent Cloud SecretKey"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:76
+msgid "Enter Huawei Cloud AccessKeyId"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:82
+msgid "Enter Huawei Cloud SecretAccessKey"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:86
+msgid "Enter Western Digital Username"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:92
+msgid "Enter Western Digital API Password"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:99
+msgid "Enter Cloudflare API Key"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:103
+msgid "Enter GoDaddy Token"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:106
+msgid "Enter G-Core API Key"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:109
+msgid "Enter Porkbun API Key"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:115
+msgid "Enter Porkbun Secret Key"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:122
+msgid "Enter Namecheap API Username"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:126
+msgid "Enter Namecheap API Key"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:132
+msgid "Enter NameSilo API Token"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:136
+msgid "Enter Name.com Username"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:139
+msgid "Enter Name.com Token"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:146
+msgid "Enter ClouDNS Auth ID (use Sub Auth ID by adding sub-prefix)"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:153
+msgid "Enter ClouDNS Auth Password"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:157
+msgid "Enter Duck DNS Token"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:163
+msgid "Enter Hetzner Auth API Token"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:167
+msgid "Enter Linode Token"
+msgstr ""
+
+#: src/views/cert/CreateDnsModal.vue:170
+msgid "Enter Vercel Token"
+msgstr ""
+
+#: src/views/cert/IndexView.vue:98 src/views/cert/UploadCertModal.vue:30
+msgid "Upload Certificate"
+msgstr ""
+
+#: src/views/cert/IndexView.vue:115
+msgid "Certificate List"
+msgstr ""
+
+#: src/views/cert/IndexView.vue:118
+msgid "Account List"
+msgstr ""
+
+#: src/views/cert/IndexView.vue:121
+msgid "DNS List"
+msgstr ""
+
+#: src/views/cert/ObtainModal.vue:18
+msgid "Automatic"
+msgstr ""
+
+#: src/views/cert/ObtainModal.vue:19
+msgid "Manual"
+msgstr ""
+
+#: src/views/cert/ObtainModal.vue:20
+msgid "Self-signed"
+msgstr ""
+
+#: src/views/cert/ObtainModal.vue:24 src/views/cert/ObtainModal.vue:77
+msgid "Please wait..."
+msgstr ""
+
+#: src/views/cert/ObtainModal.vue:33 src/views/cert/ObtainModal.vue:85
+#: src/views/cert/ObtainModal.vue:103
+msgid "Issuance successful"
+msgstr ""
+
+#: src/views/cert/ObtainModal.vue:41
+msgid ""
+"Please set up DNS resolution for the domain first, then continue with the "
+"issuance"
+msgstr ""
+
+#: src/views/cert/ObtainModal.vue:44
+msgid "DNS Records to Set"
+msgstr ""
+
+#: src/views/cert/ObtainModal.vue:54 src/views/database/DatabaseList.vue:12
+#: src/views/database/ServerList.vue:17
+msgid "Type"
+msgstr ""
+
+#: src/views/cert/ObtainModal.vue:55
+msgid "Host Record"
+msgstr ""
+
+#: src/views/cert/ObtainModal.vue:56
+msgid "Record Value"
+msgstr ""
+
+#: src/views/cert/ObtainModal.vue:74
+msgid "Issue"
+msgstr ""
+
+#: src/views/cert/ObtainModal.vue:116
+msgid "Issue Certificate"
+msgstr ""
+
+#: src/views/cert/ObtainModal.vue:123
+msgid "Issuance Mode"
+msgstr ""
+
+#: src/views/cert/route.ts:19 src/views/cert/UploadCertModal.vue:38
+#: src/views/setting/SettingHttps.vue:39
 msgid "Certificate"
 msgstr ""
 
-#: src/views/setting/SettingHttps.vue:44
+#: src/views/cert/UploadCertModal.vue:42
+msgid "Enter the content of the PEM certificate file"
+msgstr ""
+
+#: src/views/cert/UploadCertModal.vue:46 src/views/setting/SettingHttps.vue:46
 msgid "Private Key"
 msgstr ""
 
-#: src/views/setting/SettingHttps.vue:54
+#: src/views/cert/UploadCertModal.vue:50
+msgid "Enter the content of the KEY private key file"
+msgstr ""
+
+#: src/views/dashboard/UpdateView.vue:24
+msgid "Update Panel"
+msgstr ""
+
+#: src/views/dashboard/UpdateView.vue:25
+msgid "Are you sure you want to update the panel?"
+msgstr ""
+
+#: src/views/dashboard/UpdateView.vue:26
+msgid "Confirm"
+msgstr ""
+
+#: src/views/dashboard/UpdateView.vue:27 src/views/file/ToolBar.vue:139
+#: src/views/file/ToolBar.vue:226
+msgid "Cancel"
+msgstr ""
+
+#: src/views/dashboard/UpdateView.vue:29
+msgid "Panel updating..."
+msgstr ""
+
+#: src/views/dashboard/UpdateView.vue:40
+msgid "Panel updated successfully"
+msgstr ""
+
+#: src/views/dashboard/UpdateView.vue:47
+msgid "Update canceled"
+msgstr ""
+
+#: src/views/dashboard/UpdateView.vue:59
+msgid "Update Now"
+msgstr ""
+
+#: src/views/dashboard/UpdateView.vue:82
+msgid "Loading update information, please wait a moment"
+msgstr ""
+
+#: src/views/database/CreateDatabaseModal.vue:20
+msgid "Local (localhost)"
+msgstr ""
+
+#: src/views/database/CreateDatabaseModal.vue:21
+msgid "All (%)"
+msgstr ""
+
+#: src/views/database/CreateDatabaseModal.vue:22
+msgid "Specific"
+msgstr ""
+
+#: src/views/database/CreateDatabaseModal.vue:54
+#: src/views/database/IndexView.vue:32
+msgid "Create Database"
+msgstr ""
+
+#: src/views/database/CreateDatabaseModal.vue:62
+#: src/views/database/DatabaseList.vue:42 src/views/database/IndexView.vue:51
+msgid "Server"
+msgstr ""
+
+#: src/views/database/CreateDatabaseModal.vue:66
+msgid "Select server"
+msgstr ""
+
+#: src/views/database/CreateDatabaseModal.vue:78
+#: src/views/database/IndexView.vue:36
+msgid "Create User"
+msgstr ""
+
+#: src/views/database/CreateDatabaseModal.vue:81
+msgid "Authorized User"
+msgstr ""
+
+#: src/views/database/CreateDatabaseModal.vue:86
+msgid "Enter authorized username (leave empty for no authorization)"
+msgstr ""
+
+#: src/views/database/CreateDatabaseModal.vue:89
+#: src/views/database/ServerList.vue:47 src/views/login/IndexView.vue:113
+#: src/views/setting/SettingBase.vue:63
+msgid "Username"
+msgstr ""
+
+#: src/views/database/CreateDatabaseModal.vue:94
+msgid "Enter username"
+msgstr ""
+
+#: src/views/database/CreateDatabaseModal.vue:97
+#: src/views/database/ServerList.vue:56 src/views/login/IndexView.vue:121
+#: src/views/setting/SettingBase.vue:69
+msgid "Password"
+msgstr ""
+
+#: src/views/database/CreateDatabaseModal.vue:103
+msgid "Enter password"
+msgstr ""
+
+#: src/views/database/CreateDatabaseModal.vue:106
+#: src/views/database/ServerList.vue:87
+msgid "Host"
+msgstr ""
+
+#: src/views/database/CreateDatabaseModal.vue:110
+msgid "Select host"
+msgstr ""
+
+#: src/views/database/CreateDatabaseModal.vue:117
+msgid "Specific Host"
+msgstr ""
+
+#: src/views/database/CreateDatabaseModal.vue:123
+msgid "Enter supported host address"
+msgstr ""
+
+#: src/views/database/DatabaseList.vue:47
+msgid "Encoding"
+msgstr ""
+
+#: src/views/database/DatabaseList.vue:57 src/views/database/ServerList.vue:97
+msgid "Comment"
+msgstr ""
+
+#: src/views/database/DatabaseList.vue:88
+msgid "Are you sure you want to delete this database?"
+msgstr ""
+
+#: src/views/database/DatabaseList.vue:130
+#: src/views/database/ServerList.vue:243
+msgid "Modified successfully"
+msgstr ""
+
+#: src/views/database/IndexView.vue:40
+msgid "Add Server"
+msgstr ""
+
+#: src/views/database/IndexView.vue:48
+msgid "User"
+msgstr ""
+
+#: src/views/database/ServerList.vue:40 src/views/file/ToolBar.vue:257
+msgid "Name"
+msgstr ""
+
+#: src/views/database/ServerList.vue:52 src/views/database/ServerList.vue:67
+msgid "None"
+msgstr ""
+
+#: src/views/database/ServerList.vue:76 src/views/file/ToolBar.vue:145
+#: src/views/file/ToolBar.vue:165
+msgid "Copied successfully"
+msgstr ""
+
+#: src/views/database/ServerList.vue:80 src/views/file/ToolBar.vue:232
+msgid "Copy"
+msgstr ""
+
+#: src/views/database/ServerList.vue:114
+msgid "Status"
+msgstr ""
+
+#: src/views/database/ServerList.vue:121
+msgid "Valid"
+msgstr ""
+
+#: src/views/database/ServerList.vue:121
+msgid "Invalid"
+msgstr ""
+
+#: src/views/database/ServerList.vue:148
+msgid "Synchronized successfully"
+msgstr ""
+
+#: src/views/database/ServerList.vue:154
+msgid ""
+"Are you sure you want to synchronize database users (excluding password) to "
+"the panel?"
+msgstr ""
+
+#: src/views/database/ServerList.vue:164
+msgid "Sync"
+msgstr ""
+
+#: src/views/database/ServerList.vue:183
+msgid "Modify"
+msgstr ""
+
+#: src/views/database/ServerList.vue:193
+msgid ""
+"Built-in servers cannot be deleted. If you need to delete them, please "
+"uninstall the corresponding application"
+msgstr ""
+
+#: src/views/database/ServerList.vue:201
+msgid "Are you sure you want to delete the server?"
+msgstr ""
+
+#: src/views/error-page/NotFound.vue:10
+msgid "Sorry, the page you visited does not exist."
+msgstr ""
+
+#: src/views/error-page/NotFound.vue:15
+msgid "Back to Home"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:37 src/views/file/ToolBar.vue:51
+msgid "Invalid name"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:60
+msgid "Download task created successfully"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:66
+msgid "Please select files/folders to copy"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:77 src/views/file/ToolBar.vue:94
+msgid "Marked successfully, please navigate to the destination path to paste"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:83
+msgid "Please select files/folders to move"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:104
+msgid "Please mark the files/folders to copy or move first"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:128
+msgid "Warning"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:129
+msgid ""
+"There are items with the same name. %{ items } Do you want to overwrite?"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:138
+msgid "Overwrite"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:151 src/views/file/ToolBar.vue:171
+msgid "Moved successfully"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:157
+msgid "Canceled"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:180
+msgid "Please select files/folders to delete"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:214
+msgid "File"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:215
+msgid "Folder"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:219 src/views/file/ToolBar.vue:249
+msgid "New"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:221
+msgid "Upload"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:222 src/views/file/ToolBar.vue:267
+msgid "Remote Download"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:229
+msgid "Paste"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:233
+msgid "Move"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:234
+msgid "Compress"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:235
+msgid "Permission"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:240
+msgid "Are you sure you want to delete in bulk?"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:275
+msgid "Download URL"
+msgstr ""
+
+#: src/views/file/ToolBar.vue:278
+msgid "Save as"
+msgstr ""
+
+#: src/views/login/IndexView.vue:46
+msgid "Please enter username and password"
+msgstr ""
+
+#: src/views/login/IndexView.vue:50
+msgid ""
+"Failed to get encryption public key, please refresh the page and try again"
+msgstr ""
+
+#: src/views/login/IndexView.vue:61
+msgid "Login successful!"
+msgstr ""
+
+#: src/views/login/IndexView.vue:130
+msgid "Safe Login"
+msgstr ""
+
+#: src/views/login/IndexView.vue:131
+msgid "Remember Me"
+msgstr ""
+
+#: src/views/login/IndexView.vue:145
+msgid "Login"
+msgstr ""
+
+#: src/views/setting/IndexView.vue:17
+msgid "Basic"
+msgstr ""
+
+#: src/views/setting/SettingBase.vue:34 src/views/setting/SettingHttps.vue:27
+msgid "Saved successfully"
+msgstr ""
+
+#: src/views/setting/SettingBase.vue:51
+msgid ""
+"Modifying panel port/entrance requires corresponding changes in the browser "
+"address bar to access the panel!"
+msgstr ""
+
+#: src/views/setting/SettingBase.vue:54 src/views/setting/SettingBase.vue:57
+msgid "Panel Name"
+msgstr ""
+
+#: src/views/setting/SettingBase.vue:60
+msgid "Language"
+msgstr ""
+
+#: src/views/setting/SettingBase.vue:66 src/views/setting/SettingBase.vue:72
+#: src/views/setting/SettingBase.vue:90
+msgid "admin"
+msgstr ""
+
+#: src/views/setting/SettingBase.vue:75
+msgid "Certificate Default Email"
+msgstr ""
+
+#: src/views/setting/SettingBase.vue:78
+msgid "admin@example.com"
+msgstr ""
+
+#: src/views/setting/SettingBase.vue:81
+msgid "Port"
+msgstr ""
+
+#: src/views/setting/SettingBase.vue:84
+msgid "8888"
+msgstr ""
+
+#: src/views/setting/SettingBase.vue:87
+msgid "Security Entrance"
+msgstr ""
+
+#: src/views/setting/SettingBase.vue:93
+msgid "Offline Mode"
+msgstr ""
+
+#: src/views/setting/SettingBase.vue:96
+msgid "Auto Update"
+msgstr ""
+
+#: src/views/setting/SettingBase.vue:99
+msgid "Default Website Directory"
+msgstr ""
+
+#: src/views/setting/SettingBase.vue:102
+msgid "/www/wwwroot"
+msgstr ""
+
+#: src/views/setting/SettingBase.vue:105
+msgid "Default Backup Directory"
+msgstr ""
+
+#: src/views/setting/SettingBase.vue:108
+msgid "/www/backup"
+msgstr ""
+
+#: src/views/setting/SettingBase.vue:114 src/views/setting/SettingHttps.vue:56
 msgid "Save"
 msgstr ""
+
+#: src/views/setting/SettingHttps.vue:36
+msgid "Panel HTTPS"
+msgstr ""
diff --git a/web/src/utils/gettext/index.ts b/web/src/utils/gettext/index.ts
index 42887264..38f4d0b8 100644
--- a/web/src/utils/gettext/index.ts
+++ b/web/src/utils/gettext/index.ts
@@ -23,13 +23,7 @@ export function setupGettext(app: App) {
       zh_CN: '简体中文',
       zh_TW: '繁體中文'
     },
-    defaultLanguage: 'zh_CN',
-    globalProperties: {
-      gettext: ['$gettext', '__'], // 这样支持同时使用 $gettext, __ 两种方式
-      ngettext: ['$ngettext', '_n'],
-      pgettext: ['$pgettext', '_x'],
-      npgettext: ['$npgettext', '_nx']
-    }
+    defaultLanguage: 'zh_CN'
   })
   app.use(gettext)
 }
diff --git a/web/src/views/app/IndexView.vue b/web/src/views/app/IndexView.vue
index ecff4670..7aa1e24d 100644
--- a/web/src/views/app/IndexView.vue
+++ b/web/src/views/app/IndexView.vue
@@ -6,17 +6,17 @@ defineOptions({
 import VersionModal from '@/views/app/VersionModal.vue'
 
 import { NButton, NDataTable, NFlex, NPopconfirm, NSwitch } from 'naive-ui'
-import { useI18n } from 'vue-i18n'
+import { useGettext } from 'vue3-gettext'
 
 import app from '@/api/panel/app'
 import TheIcon from '@/components/custom/TheIcon.vue'
 import { router } from '@/router'
 import { renderIcon } from '@/utils'
 
-const { t } = useI18n()
+const { $gettext } = useGettext()
 
 const versionModalShow = ref(false)
-const versionModalOperation = ref('安装')
+const versionModalOperation = ref($gettext('Install'))
 const versionModalInfo = ref<any>({})
 
 const columns: any = [
@@ -34,27 +34,27 @@ const columns: any = [
     }
   },
   {
-    title: t('appIndex.columns.name'),
+    title: $gettext('App Name'),
     key: 'name',
     width: 300,
     resizable: true,
     ellipsis: { tooltip: true }
   },
   {
-    title: t('appIndex.columns.description'),
+    title: $gettext('Description'),
     key: 'description',
     minWidth: 300,
     resizable: true,
     ellipsis: { tooltip: true }
   },
   {
-    title: t('appIndex.columns.installedVersion'),
+    title: $gettext('Installed Version'),
     key: 'installed_version',
     width: 100,
     ellipsis: { tooltip: true }
   },
   {
-    title: t('appIndex.columns.show'),
+    title: $gettext('Show in Home'),
     key: 'show',
     width: 100,
     align: 'center',
@@ -68,7 +68,7 @@ const columns: any = [
     }
   },
   {
-    title: t('appIndex.columns.actions'),
+    title: $gettext('Actions'),
     key: 'actions',
     width: 300,
     hideInExcel: true,
@@ -88,7 +88,7 @@ const columns: any = [
                   },
                   {
                     default: () => {
-                      return t('appIndex.confirm.update', { 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(
@@ -98,7 +98,7 @@ const columns: any = [
                           type: 'warning'
                         },
                         {
-                          default: () => t('appIndex.buttons.update'),
+                          default: () => $gettext('Update'),
                           icon: renderIcon('material-symbols:arrow-circle-up-outline-rounded', {
                             size: 14
                           })
@@ -117,7 +117,7 @@ const columns: any = [
                     onClick: () => handleManage(row.slug)
                   },
                   {
-                    default: () => t('appIndex.buttons.manage'),
+                    default: () => $gettext('Manage'),
                     icon: renderIcon('material-symbols:settings-outline', { size: 14 })
                   }
                 )
@@ -130,7 +130,7 @@ const columns: any = [
                   },
                   {
                     default: () => {
-                      return t('appIndex.confirm.uninstall', { app: row.name })
+                      return $gettext('Are you sure to uninstall app %{ app }?', { app: row.name })
                     },
                     trigger: () => {
                       return h(
@@ -140,7 +140,7 @@ const columns: any = [
                           type: 'error'
                         },
                         {
-                          default: () => t('appIndex.buttons.uninstall'),
+                          default: () => $gettext('Uninstall'),
                           icon: renderIcon('material-symbols:delete-outline', { size: 14 })
                         }
                       )
@@ -156,12 +156,12 @@ const columns: any = [
                     type: 'info',
                     onClick: () => {
                       versionModalShow.value = true
-                      versionModalOperation.value = '安装'
+                      versionModalOperation.value = $gettext('Install')
                       versionModalInfo.value = row
                     }
                   },
                   {
-                    default: () => t('appIndex.buttons.install'),
+                    default: () => $gettext('Install'),
                     icon: renderIcon('material-symbols:download-rounded', { size: 14 })
                   }
                 )
@@ -186,19 +186,19 @@ const { loading, data, page, total, pageSize, pageCount, refresh } = usePaginati
 const handleShowChange = (row: any) => {
   useRequest(app.updateShow(row.slug, !row.show)).onSuccess(() => {
     row.show = !row.show
-    window.$message.success(t('appIndex.alerts.setup'))
+    window.$message.success($gettext('Setup successfully'))
   })
 }
 
 const handleUpdate = (slug: string) => {
   useRequest(app.update(slug)).onSuccess(() => {
-    window.$message.success(t('appIndex.alerts.update'))
+    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(t('appIndex.alerts.uninstall'))
+    window.$message.success($gettext('Task submitted, please check the progress in background tasks'))
   })
 }
 
@@ -209,7 +209,7 @@ const handleManage = (slug: string) => {
 const handleUpdateCache = () => {
   useRequest(app.updateCache()).onSuccess(() => {
     refresh()
-    window.$message.success(t('appIndex.alerts.cache'))
+    window.$message.success($gettext('Cache updated successfully'))
   })
 }
 
@@ -223,11 +223,11 @@ onMounted(() => {
     <template #action>
       <n-button type="primary" @click="handleUpdateCache">
         <TheIcon :size="18" icon="material-symbols:refresh" />
-        {{ $t('appIndex.buttons.updateCache') }}
+        {{ $gettext('Update Cache') }}
       </n-button>
     </template>
     <n-flex vertical>
-      <n-alert type="warning">{{ $t('appIndex.alerts.warning') }}</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
@@ -248,11 +248,11 @@ onMounted(() => {
           pageSizes: [20, 50, 100, 200]
         }"
       />
-      <version-modal
-        v-model:show="versionModalShow"
-        v-model:operation="versionModalOperation"
-        v-model:info="versionModalInfo"
-      />
     </n-flex>
+    <version-modal
+      v-model:show="versionModalShow"
+      v-model:operation="versionModalOperation"
+      v-model:info="versionModalInfo"
+    />
   </common-page>
 </template>
diff --git a/web/src/views/app/VersionModal.vue b/web/src/views/app/VersionModal.vue
index 12ea8c98..defde3a6 100644
--- a/web/src/views/app/VersionModal.vue
+++ b/web/src/views/app/VersionModal.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { App } from '@/views/app/types'
-import { useI18n } from 'vue-i18n'
+import { useGettext } from 'vue3-gettext'
 import app from '../../api/panel/app'
 
-const { t } = useI18n()
+const { $gettext } = useGettext()
 
 const show = defineModel<boolean>('show', { type: Boolean, required: true })
 const operation = defineModel<string>('operation', { type: String, required: true })
@@ -28,7 +28,7 @@ const options = computed(() => {
 const handleSubmit = () => {
   useRequest(app.install(info.value.slug, model.value.channel))
     .onSuccess(() => {
-      window.$message.success(t('appIndex.alerts.install'))
+      window.$message.success($gettext('Task submitted, please check the progress in background tasks'))
     })
     .onComplete(() => {
       doSubmit.value = false
@@ -68,15 +68,15 @@ const handleClose = () => {
     @close="handleClose"
   >
     <n-form :model="model">
-      <n-form-item path="channel" label="渠道">
+      <n-form-item path="channel" :label="$gettext('Channel')">
         <n-select
           v-model:value="model.channel"
           :options="options"
           @update-value="handleChannelUpdate"
         />
       </n-form-item>
-      <n-form-item path="channel" label="版本号">
-        <n-input v-model:value="model.version" placeholder="请选择渠道" readonly disabled />
+      <n-form-item path="channel" :label="$gettext('Version')">
+        <n-input v-model:value="model.version" :placeholder="$gettext('Please select a channel')" readonly disabled />
       </n-form-item>
     </n-form>
     <n-button
@@ -86,7 +86,7 @@ const handleClose = () => {
       :disabled="model.channel == null || doSubmit"
       @click="handleSubmit"
     >
-      提交
+      {{ $gettext('Submit') }}
     </n-button>
   </n-modal>
 </template>
diff --git a/web/src/views/backup/IndexView.vue b/web/src/views/backup/IndexView.vue
index fb9092ae..17dd4bd0 100644
--- a/web/src/views/backup/IndexView.vue
+++ b/web/src/views/backup/IndexView.vue
@@ -5,7 +5,9 @@ defineOptions({
 
 import dashboard from '@/api/panel/dashboard'
 import ListView from '@/views/backup/ListView.vue'
+import { useGettext } from 'vue3-gettext'
 
+const { $gettext } = useGettext()
 const currentTab = ref('website')
 
 const { data: installedDbAndPhp } = useRequest(dashboard.installedDbAndPhp, {
@@ -32,7 +34,7 @@ const postgreSQLInstalled = computed(() => {
   <common-page show-footer>
     <n-flex vertical>
       <n-tabs v-model:value="currentTab" type="line" animated>
-        <n-tab-pane name="website" tab="网站">
+        <n-tab-pane name="website" :tab="$gettext('Website')">
           <list-view v-model:type="currentTab" />
         </n-tab-pane>
         <n-tab-pane v-if="mySQLInstalled" name="mysql" tab="MySQL">
diff --git a/web/src/views/backup/ListView.vue b/web/src/views/backup/ListView.vue
index 5bf49e4b..cd50f3dd 100644
--- a/web/src/views/backup/ListView.vue
+++ b/web/src/views/backup/ListView.vue
@@ -3,12 +3,14 @@ import backup from '@/api/panel/backup'
 import { renderIcon } from '@/utils'
 import type { MessageReactive } from 'naive-ui'
 import { NButton, NDataTable, NFlex, NInput, NPopconfirm } from 'naive-ui'
+import { useGettext } from 'vue3-gettext'
 
 import app from '@/api/panel/app'
 import website from '@/api/panel/website'
 import { formatDateTime } from '@/utils'
 import UploadModal from '@/views/backup/UploadModal.vue'
 
+const { $gettext } = useGettext()
 const type = defineModel<string>('type', { type: String, required: true })
 
 let messageReactive: MessageReactive | null = null
@@ -31,20 +33,20 @@ const websites = ref<any>([])
 
 const columns: any = [
   {
-    title: '文件名',
+    title: $gettext('Filename'),
     key: 'name',
     minWidth: 200,
     resizable: true,
     ellipsis: { tooltip: true }
   },
   {
-    title: '大小',
+    title: $gettext('Size'),
     key: 'size',
     width: 160,
     ellipsis: { tooltip: true }
   },
   {
-    title: '更新日期',
+    title: $gettext('Update Date'),
     key: 'time',
     width: 200,
     ellipsis: { tooltip: true },
@@ -53,7 +55,7 @@ const columns: any = [
     }
   },
   {
-    title: '操作',
+    title: $gettext('Actions'),
     key: 'actions',
     width: 200,
     align: 'center',
@@ -72,7 +74,7 @@ const columns: any = [
             }
           },
           {
-            default: () => '恢复',
+            default: () => $gettext('Restore'),
             icon: renderIcon('material-symbols:settings-backup-restore-rounded', { size: 14 })
           }
         ),
@@ -83,7 +85,7 @@ const columns: any = [
           },
           {
             default: () => {
-              return '确定删除备份吗？'
+              return $gettext('Are you sure you want to delete this backup?')
             },
             trigger: () => {
               return h(
@@ -94,7 +96,7 @@ const columns: any = [
                   style: 'margin-left: 15px;'
                 },
                 {
-                  default: () => '删除',
+                  default: () => $gettext('Delete'),
                   icon: renderIcon('material-symbols:delete-outline', { size: 14 })
                 }
               )
@@ -121,20 +123,20 @@ const handleCreate = () => {
     () => {
       createModal.value = false
       window.$bus.emit('backup:refresh')
-      window.$message.success('创建成功')
+      window.$message.success($gettext('Created successfully'))
     }
   )
 }
 
 const handleRestore = () => {
-  messageReactive = window.$message.loading('恢复中...', {
+  messageReactive = window.$message.loading($gettext('Restoring...'), {
     duration: 0
   })
 
   useRequest(backup.restore(type.value, restoreModel.value.file, restoreModel.value.target))
     .onSuccess(() => {
       refresh()
-      window.$message.success('恢复成功')
+      window.$message.success($gettext('Restored successfully'))
     })
     .onComplete(() => {
       messageReactive?.destroy()
@@ -144,7 +146,7 @@ const handleRestore = () => {
 const handleDelete = async (file: string) => {
   useRequest(backup.delete(type.value, file)).onSuccess(() => {
     refresh()
-    window.$message.success('删除成功')
+    window.$message.success($gettext('Deleted successfully'))
   })
 }
 
@@ -177,8 +179,8 @@ onUnmounted(() => {
 <template>
   <n-flex vertical :size="20">
     <n-flex>
-      <n-button type="primary" @click="createModal = true"> 创建备份 </n-button>
-      <n-button type="primary" @click="uploadModal = true" ghost> 上传备份 </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
@@ -204,7 +206,7 @@ onUnmounted(() => {
   <n-modal
     v-model:show="createModal"
     preset="card"
-    title="创建备份"
+    :title="$gettext('Create Backup')"
     style="width: 60vw"
     size="huge"
     :bordered="false"
@@ -212,32 +214,32 @@ onUnmounted(() => {
     @close="createModal = false"
   >
     <n-form :model="createModel">
-      <n-form-item v-if="type == 'website'" path="name" label="网站">
-        <n-select v-model:value="createModel.target" :options="websites" placeholder="选择网站" />
+      <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-form-item>
-      <n-form-item v-if="type != 'website'" path="name" label="数据库名">
+      <n-form-item v-if="type != 'website'" path="name" :label="$gettext('Database Name')">
         <n-input
           v-model:value="createModel.target"
           type="text"
           @keydown.enter.prevent
-          placeholder="输入数据库名称"
+          :placeholder="$gettext('Enter database name')"
         />
       </n-form-item>
-      <n-form-item path="path" label="保存目录">
+      <n-form-item path="path" :label="$gettext('Save Directory')">
         <n-input
           v-model:value="createModel.path"
           type="text"
           @keydown.enter.prevent
-          placeholder="留空使用默认路径"
+          :placeholder="$gettext('Leave empty to use default 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-modal>
   <n-modal
     v-model:show="restoreModal"
     preset="card"
-    title="恢复备份"
+    :title="$gettext('Restore Backup')"
     style="width: 60vw"
     size="huge"
     :bordered="false"
@@ -245,14 +247,14 @@ onUnmounted(() => {
     @close="restoreModal = false"
   >
     <n-form :model="restoreModel">
-      <n-form-item v-if="type == 'website'" path="name" label="网站">
-        <n-select v-model:value="restoreModel.target" :options="websites" placeholder="选择网站" />
+      <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-form-item>
-      <n-form-item v-if="type != 'website'" path="name" label="数据库">
+      <n-form-item v-if="type != 'website'" path="name" :label="$gettext('Database')">
         <n-input v-model:value="restoreModel.target" type="text" @keydown.enter.prevent />
       </n-form-item>
     </n-form>
-    <n-button type="info" block @click="handleRestore">提交</n-button>
+    <n-button type="info" block @click="handleRestore">{{ $gettext('Submit') }}</n-button>
   </n-modal>
   <upload-modal v-model:show="uploadModal" v-model:type="type" />
 </template>
diff --git a/web/src/views/backup/UploadModal.vue b/web/src/views/backup/UploadModal.vue
index 0968ab4c..3c849bb3 100644
--- a/web/src/views/backup/UploadModal.vue
+++ b/web/src/views/backup/UploadModal.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import type { UploadCustomRequestOptions } from 'naive-ui'
+import { useGettext } from 'vue3-gettext'
 
 import api from '@/api/panel/backup'
 
+const { $gettext } = useGettext()
 const show = defineModel<boolean>('show', { type: Boolean, required: true })
 const type = defineModel<string>('type', { type: String, required: true })
 const upload = ref<any>(null)
@@ -14,7 +16,9 @@ const uploadRequest = ({ file, onFinish, onError, onProgress }: UploadCustomRequ
     .onSuccess(() => {
       onFinish()
       window.$bus.emit('backup:refresh')
-      window.$message.success(`上传 ${file.name} 成功`)
+      window.$message.success(
+        $gettext('Upload %{ filename } successfully', { filename: file.name })
+      )
     })
     .onError(() => {
       onError()
@@ -32,7 +36,7 @@ const uploadRequest = ({ file, onFinish, onError, onProgress }: UploadCustomRequ
   <n-modal
     v-model:show="show"
     preset="card"
-    title="上传备份"
+    :title="$gettext('Upload Backup')"
     style="width: 60vw"
     size="huge"
     :bordered="false"
@@ -44,8 +48,10 @@ const uploadRequest = ({ file, onFinish, onError, onProgress }: UploadCustomRequ
           <div style="margin-bottom: 12px">
             <the-icon :size="48" icon="bi:arrow-up-square" />
           </div>
-          <NText text-18> 点击或者拖动文件到该区域来上传</NText>
-          <NP depth="3" m-10> 大文件建议使用 SFTP 等方式上传 </NP>
+          <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 or other methods to upload')
+          }}</NP>
         </n-upload-dragger>
       </n-upload>
     </n-flex>
diff --git a/web/src/views/backup/route.ts b/web/src/views/backup/route.ts
index ae863294..335ec40e 100644
--- a/web/src/views/backup/route.ts
+++ b/web/src/views/backup/route.ts
@@ -1,3 +1,4 @@
+import { $gettext } from '@/utils/gettext'
 import type { RouteType } from '~/types/router'
 
 const Layout = () => import('@/layout/IndexView.vue')
@@ -15,7 +16,7 @@ export default {
       path: '',
       component: () => import('./IndexView.vue'),
       meta: {
-        title: '备份',
+        title: $gettext('Backup'),
         icon: 'mdi:backup-outline',
         role: ['admin'],
         requireAuth: true
diff --git a/web/src/views/cert/CreateAccountModal.vue b/web/src/views/cert/CreateAccountModal.vue
index bcf62e81..cf282d8c 100644
--- a/web/src/views/cert/CreateAccountModal.vue
+++ b/web/src/views/cert/CreateAccountModal.vue
@@ -2,7 +2,9 @@
 import cert from '@/api/panel/cert'
 import type { MessageReactive } from 'naive-ui'
 import { NButton, NInput, NSpace } from 'naive-ui'
+import { useGettext } from 'vue3-gettext'
 
+const { $gettext } = useGettext()
 const show = defineModel<boolean>('show', { type: Boolean, required: true })
 
 const props = defineProps({
@@ -33,7 +35,7 @@ const showEAB = computed(() => {
 })
 
 const handleCreateAccount = () => {
-  messageReactive = window.$message.loading('正在向 CA 注册账号，请耐心等待', {
+  messageReactive = window.$message.loading($gettext('Registering account with CA, please wait patiently'), {
     duration: 0
   })
   useRequest(cert.accountCreate(model.value))
@@ -44,7 +46,7 @@ const handleCreateAccount = () => {
       model.value.email = ''
       model.value.hmac_encoded = ''
       model.value.kid = ''
-      window.$message.success('创建成功')
+      window.$message.success($gettext('Created successfully'))
     })
     .onComplete(() => {
       messageReactive?.destroy()
@@ -56,40 +58,40 @@ const handleCreateAccount = () => {
   <n-modal
     v-model:show="show"
     preset="card"
-    title="创建账号"
+    :title="$gettext('Create Account')"
     style="width: 60vw"
     size="huge"
     :bordered="false"
     :segmented="false"
   >
     <n-space vertical>
-      <n-alert type="info"> Google 和 SSL.com 需要先去官网获得 KID 和 HMAC 并填入 </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">
-        境内无法使用 Google，其他 CA 视网络情况而定，建议使用 GoogleCN 或 Let's Encrypt
+        {{ $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="CA">
+        <n-form-item path="ca" :label="$gettext('CA')">
           <n-select
             v-model:value="model.ca"
-            placeholder="选择 CA"
+            :placeholder="$gettext('Select CA')"
             clearable
             :options="caProviders"
           />
         </n-form-item>
-        <n-form-item path="key_type" label="密钥类型">
+        <n-form-item path="key_type" :label="$gettext('Key Type')">
           <n-select
             v-model:value="model.key_type"
-            placeholder="选择密钥类型"
+            :placeholder="$gettext('Select key type')"
             clearable
             :options="algorithms"
           />
         </n-form-item>
-        <n-form-item path="email" label="邮箱">
+        <n-form-item path="email" :label="$gettext('Email')">
           <n-input
             v-model:value="model.email"
             type="text"
             @keydown.enter.prevent
-            placeholder="输入邮箱地址"
+            :placeholder="$gettext('Enter email address')"
           />
         </n-form-item>
         <n-form-item v-if="showEAB" path="kid" label="KID">
@@ -97,7 +99,7 @@ const handleCreateAccount = () => {
             v-model:value="model.kid"
             type="text"
             @keydown.enter.prevent
-            placeholder="输入 KID"
+            :placeholder="$gettext('Enter KID')"
           />
         </n-form-item>
         <n-form-item v-if="showEAB" path="hmac_encoded" label="HMAC">
@@ -105,11 +107,11 @@ const handleCreateAccount = () => {
             v-model:value="model.hmac_encoded"
             type="text"
             @keydown.enter.prevent
-            placeholder="输入 HMAC"
+            :placeholder="$gettext('Enter HMAC')"
           />
         </n-form-item>
       </n-form>
-      <n-button type="info" block @click="handleCreateAccount">提交</n-button>
+      <n-button type="info" block @click="handleCreateAccount">{{ $gettext('Submit') }}</n-button>
     </n-space>
   </n-modal>
 </template>
diff --git a/web/src/views/cert/CreateCertModal.vue b/web/src/views/cert/CreateCertModal.vue
index 165bdac3..f6bfeb1e 100644
--- a/web/src/views/cert/CreateCertModal.vue
+++ b/web/src/views/cert/CreateCertModal.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import cert from '@/api/panel/cert'
 import { NButton, NSpace } from 'naive-ui'
+import { useGettext } from 'vue3-gettext'
 
+const { $gettext } = useGettext()
 const show = defineModel<boolean>('show', { type: Boolean, required: true })
 
 const props = defineProps({
@@ -45,7 +47,7 @@ const handleCreateCert = () => {
     model.value.account_id = null
     model.value.website_id = null
     model.value.auto_renew = true
-    window.$message.success('创建成功')
+    window.$message.success($gettext('Created successfully'))
   })
 }
 </script>
@@ -54,7 +56,7 @@ const handleCreateCert = () => {
   <n-modal
     v-model:show="show"
     preset="card"
-    title="创建证书"
+    :title="$gettext('Create Certificate')"
     style="width: 60vw"
     size="huge"
     :bordered="false"
@@ -62,11 +64,10 @@ const handleCreateCert = () => {
   >
     <n-space vertical>
       <n-alert type="info">
-        可以通过选择网站 / DNS 中的任意一项来自动签发和部署证书，也可以手动输入域名并设置 DNS
-        解析来签发证书
+        {{ $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="域名">
+        <n-form-item :label="$gettext('Domain')">
           <n-dynamic-input
             v-model:value="model.domains"
             placeholder="example.com"
@@ -74,40 +75,40 @@ const handleCreateCert = () => {
             show-sort-button
           />
         </n-form-item>
-        <n-form-item path="type" label="密钥类型">
+        <n-form-item path="type" :label="$gettext('Key Type')">
           <n-select
             v-model:value="model.type"
-            placeholder="选择密钥类型"
+            :placeholder="$gettext('Select key type')"
             clearable
             :options="algorithms"
           />
         </n-form-item>
-        <n-form-item path="website_id" label="网站">
+        <n-form-item path="website_id" :label="$gettext('Website')">
           <n-select
             v-model:value="model.website_id"
-            placeholder="选择用于部署证书的网站"
+            :placeholder="$gettext('Select website for certificate deployment')"
             clearable
             :options="websites"
           />
         </n-form-item>
-        <n-form-item path="account_id" label="账号">
+        <n-form-item path="account_id" :label="$gettext('Account')">
           <n-select
             v-model:value="model.account_id"
-            placeholder="选择用于签发证书的账号"
+            :placeholder="$gettext('Select account for certificate issuance')"
             clearable
             :options="accounts"
           />
         </n-form-item>
-        <n-form-item path="account_id" label="DNS">
+        <n-form-item path="account_id" :label="$gettext('DNS')">
           <n-select
             v-model:value="model.dns_id"
-            placeholder="选择用于签发证书的DNS"
+            :placeholder="$gettext('Select DNS for certificate issuance')"
             clearable
             :options="dns"
           />
         </n-form-item>
       </n-form>
-      <n-button type="info" block @click="handleCreateCert">提交</n-button>
+      <n-button type="info" block @click="handleCreateCert">{{ $gettext('Submit') }}</n-button>
     </n-space>
   </n-modal>
 </template>
diff --git a/web/src/views/cert/CreateDnsModal.vue b/web/src/views/cert/CreateDnsModal.vue
index dabeb084..109ede72 100644
--- a/web/src/views/cert/CreateDnsModal.vue
+++ b/web/src/views/cert/CreateDnsModal.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import cert from '@/api/panel/cert'
 import { NButton, NInput, NSpace } from 'naive-ui'
+import { useGettext } from 'vue3-gettext'
 
+const { $gettext } = useGettext()
 const show = defineModel<boolean>('show', { type: Boolean, required: true })
 
 const props = defineProps({
@@ -30,7 +32,7 @@ const handleCreateDNS = async () => {
     model.value.data.ak = ''
     model.value.data.sk = ''
     model.value.name = ''
-    window.$message.success('创建成功')
+    window.$message.success($gettext('Created successfully'))
   })
 }
 </script>
@@ -39,7 +41,7 @@ const handleCreateDNS = async () => {
   <n-modal
     v-model:show="show"
     preset="card"
-    title="创建 DNS"
+    :title="$gettext('Create DNS')"
     style="width: 60vw"
     size="huge"
     :bordered="false"
@@ -47,128 +49,128 @@ const handleCreateDNS = async () => {
   >
     <n-space vertical>
       <n-form :model="model">
-        <n-form-item path="name" label="备注名称">
-          <n-input v-model:value="model.name" type="text" placeholder="输入备注名称" />
+        <n-form-item path="name" :label="$gettext('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="DNS">
+        <n-form-item path="type" :label="$gettext('DNS')">
           <n-select
             v-model:value="model.type"
-            placeholder="选择 DNS"
+            :placeholder="$gettext('Select DNS')"
             clearable
             :options="dnsProviders"
           />
         </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="输入阿里云 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="输入阿里云 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="输入腾讯云 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="输入腾讯云 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="输入华为云 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
             v-model:value="model.data.sk"
             type="text"
-            placeholder="输入华为云 SecretAccessKey"
+            :placeholder="$gettext('Enter Huawei Cloud SecretAccessKey')"
           />
         </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="输入西部数码 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
             v-model:value="model.data.ak"
             type="text"
-            placeholder="输入西部数码 API Password"
+            :placeholder="$gettext('Enter Western Digital API Password')"
           />
         </n-form-item>
         <n-form-item v-if="model.type == 'cloudflare'" path="ak" label="API Key">
           <n-input
             v-model:value="model.data.ak"
             type="text"
-            placeholder="输入 Cloudflare API Key"
+            :placeholder="$gettext('Enter Cloudflare API Key')"
           />
         </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="输入 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="输入 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="输入 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
             v-model:value="model.data.sk"
             type="text"
-            placeholder="输入 Porkbun Secret Key"
+            :placeholder="$gettext('Enter Porkbun Secret Key')"
           />
         </n-form-item>
         <n-form-item v-if="model.type == 'namecheap'" path="sk" label="API Username">
           <n-input
             v-model:value="model.data.sk"
             type="text"
-            placeholder="输入 Namecheap API Username"
+            :placeholder="$gettext('Enter Namecheap API Username')"
           />
         </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="输入 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
             v-model:value="model.data.ak"
             type="text"
-            placeholder="输入 NameSilo API Token"
+            :placeholder="$gettext('Enter NameSilo API Token')"
           />
         </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="输入 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="输入 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">
           <n-input
             v-model:value="model.data.ak"
             type="text"
-            placeholder="输入 ClouDNS Auth ID（使用Sub Auth ID请添加sub-前缀）"
+            :placeholder="$gettext('Enter ClouDNS Auth ID (use Sub Auth ID by adding sub-prefix)')"
           />
         </n-form-item>
         <n-form-item v-if="model.type == 'cloudns'" path="sk" label="Auth Password">
           <n-input
             v-model:value="model.data.sk"
             type="text"
-            placeholder="输入 ClouDNS Auth Password"
+            :placeholder="$gettext('Enter ClouDNS Auth Password')"
           />
         </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="输入 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
             v-model:value="model.data.ak"
             type="text"
-            placeholder="输入 Hetzner Auth API Token"
+            :placeholder="$gettext('Enter Hetzner Auth API Token')"
           />
         </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="输入 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="输入 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">提交</n-button>
+      <n-button type="info" block @click="handleCreateDNS">{{ $gettext('Submit') }}</n-button>
     </n-space>
   </n-modal>
 </template>
diff --git a/web/src/views/cert/IndexView.vue b/web/src/views/cert/IndexView.vue
index d93ed5d6..2c51128f 100644
--- a/web/src/views/cert/IndexView.vue
+++ b/web/src/views/cert/IndexView.vue
@@ -4,6 +4,7 @@ defineOptions({
 })
 
 import { NButton } from 'naive-ui'
+import { useGettext } from 'vue3-gettext'
 
 import app from '@/api/panel/app'
 import cert from '@/api/panel/cert'
@@ -16,6 +17,7 @@ import CreateDnsModal from '@/views/cert/CreateDnsModal.vue'
 import DnsView from '@/views/cert/DnsView.vue'
 import UploadCertModal from '@/views/cert/UploadCertModal.vue'
 
+const { $gettext } = useGettext()
 const currentTab = ref('cert')
 
 const uploadCert = ref(false)
@@ -93,30 +95,30 @@ onUnmounted(() => {
       <n-flex>
         <n-button v-if="currentTab == 'cert'" type="success" @click="uploadCert = true">
           <TheIcon :size="18" icon="material-symbols:upload" />
-          上传证书
+          {{ $gettext('Upload Certificate') }}
         </n-button>
         <n-button v-if="currentTab == 'cert'" type="primary" @click="createCert = true">
           <TheIcon :size="18" icon="material-symbols:add" />
-          创建证书
+          {{ $gettext('Create Certificate') }}
         </n-button>
         <n-button v-if="currentTab == 'user'" type="primary" @click="createAccount = true">
           <TheIcon :size="18" icon="material-symbols:add" />
-          创建账号
+          {{ $gettext('Create Account') }}
         </n-button>
         <n-button v-if="currentTab == 'dns'" type="primary" @click="createDNS = true">
           <TheIcon :size="18" icon="material-symbols:add" />
-          创建 DNS
+          {{ $gettext('Create DNS') }}
         </n-button>
       </n-flex>
     </template>
     <n-tabs v-model:value="currentTab" type="line" animated>
-      <n-tab-pane name="cert" tab="证书列表">
+      <n-tab-pane name="cert" :tab="$gettext('Certificate List')">
         <cert-view :accounts="accounts" :algorithms="algorithms" :websites="websites" :dns="dns" />
       </n-tab-pane>
-      <n-tab-pane name="user" tab="账号列表">
+      <n-tab-pane name="user" :tab="$gettext('Account List')">
         <account-view :ca-providers="caProviders" :algorithms="algorithms" />
       </n-tab-pane>
-      <n-tab-pane name="dns" tab="DNS 列表">
+      <n-tab-pane name="dns" :tab="$gettext('DNS List')">
         <dns-view :dns-providers="dnsProviders" />
       </n-tab-pane>
     </n-tabs>
diff --git a/web/src/views/cert/ObtainModal.vue b/web/src/views/cert/ObtainModal.vue
index 6d2dc231..b9bf30e5 100644
--- a/web/src/views/cert/ObtainModal.vue
+++ b/web/src/views/cert/ObtainModal.vue
@@ -2,7 +2,9 @@
 import cert from '@/api/panel/cert'
 import type { MessageReactive } from 'naive-ui'
 import { NButton, NTable } from 'naive-ui'
+import { useGettext } from 'vue3-gettext'
 
+const { $gettext } = useGettext()
 let messageReactive: MessageReactive | null = null
 
 const show = defineModel<boolean>('show', { type: Boolean, required: true })
@@ -13,13 +15,13 @@ const model = ref({
 })
 
 const options = [
-  { label: '自动', value: 'auto' },
-  { label: '手动', value: 'manual' },
-  { label: '自签名', value: 'self-signed' }
+  { label: $gettext('Automatic'), value: 'auto' },
+  { label: $gettext('Manual'), value: 'manual' },
+  { label: $gettext('Self-signed'), value: 'self-signed' }
 ]
 
 const handleSubmit = () => {
-  messageReactive = window.$message.loading('请稍后...', {
+  messageReactive = window.$message.loading($gettext('Please wait...'), {
     duration: 0
   })
   if (model.value.type == 'auto') {
@@ -28,7 +30,7 @@ const handleSubmit = () => {
         window.$bus.emit('cert:refresh-cert')
         window.$bus.emit('cert:refresh-async')
         show.value = false
-        window.$message.success('签发成功')
+        window.$message.success($gettext('Issuance successful'))
       })
       .onComplete(() => {
         messageReactive?.destroy()
@@ -36,10 +38,10 @@ const handleSubmit = () => {
   } else if (model.value.type == 'manual') {
     useRequest(cert.manualDNS(id.value))
       .onSuccess(({ data }: { data: any }) => {
-        window.$message.info('请先前往域名处设置 DNS 解析，再继续签发')
+        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: '待设置DNS 记录列表',
+          title: $gettext('DNS Records to Set'),
           content: () => {
             return h(
               NTable,
@@ -48,10 +50,10 @@ const handleSubmit = () => {
                 default: () => [
                   h('thead', [
                     h('tr', [
-                      h('th', '域名'),
-                      h('th', '类型'),
-                      h('th', '主机记录'),
-                      h('th', '记录值')
+                      h('th', $gettext('Domain')),
+                      h('th', $gettext('Type')),
+                      h('th', $gettext('Host Record')),
+                      h('th', $gettext('Record Value'))
                     ])
                   ]),
                   h(
@@ -69,10 +71,10 @@ const handleSubmit = () => {
               }
             )
           },
-          positiveText: '签发',
+          positiveText: $gettext('Issue'),
           onPositiveClick: async () => {
             d.loading = true
-            messageReactive = window.$message.loading('请稍后...', {
+            messageReactive = window.$message.loading($gettext('Please wait...'), {
               duration: 0
             })
             useRequest(cert.obtainManual(id.value))
@@ -80,7 +82,7 @@ const handleSubmit = () => {
                 window.$bus.emit('cert:refresh-cert')
                 window.$bus.emit('cert:refresh-async')
                 show.value = false
-                window.$message.success('签发成功')
+                window.$message.success($gettext('Issuance successful'))
               })
               .onComplete(() => {
                 d.loading = false
@@ -98,7 +100,7 @@ const handleSubmit = () => {
         window.$bus.emit('cert:refresh-cert')
         window.$bus.emit('cert:refresh-async')
         show.value = false
-        window.$message.success('签发成功')
+        window.$message.success($gettext('Issuance successful'))
       })
       .onComplete(() => {
         messageReactive?.destroy()
@@ -111,17 +113,17 @@ const handleSubmit = () => {
   <n-modal
     v-model:show="show"
     preset="card"
-    title="签发证书"
+    :title="$gettext('Issue Certificate')"
     style="width: 60vw"
     size="huge"
     :bordered="false"
     :segmented="false"
   >
     <n-form :model="model">
-      <n-form-item path="type" label="签发模式">
+      <n-form-item path="type" :label="$gettext('Issuance Mode')">
         <n-select v-model:value="model.type" :options="options" />
       </n-form-item>
-      <n-button type="info" block @click="handleSubmit">提交</n-button>
+      <n-button type="info" block @click="handleSubmit">{{ $gettext('Submit') }}</n-button>
     </n-form>
   </n-modal>
 </template>
diff --git a/web/src/views/cert/UploadCertModal.vue b/web/src/views/cert/UploadCertModal.vue
index 557072b5..c8b06464 100644
--- a/web/src/views/cert/UploadCertModal.vue
+++ b/web/src/views/cert/UploadCertModal.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import cert from '@/api/panel/cert'
 import { NButton, NSpace } from 'naive-ui'
+import { useGettext } from 'vue3-gettext'
 
+const { $gettext } = useGettext()
 const show = defineModel<boolean>('show', { type: Boolean, required: true })
 
 const model = ref<any>({
@@ -16,7 +18,7 @@ const handleSubmit = () => {
     show.value = false
     model.value.cert = ''
     model.value.key = ''
-    window.$message.success('创建成功')
+    window.$message.success($gettext('Created successfully'))
   })
 }
 </script>
@@ -25,7 +27,7 @@ const handleSubmit = () => {
   <n-modal
     v-model:show="show"
     preset="card"
-    title="上传证书"
+    :title="$gettext('Upload Certificate')"
     style="width: 60vw"
     size="huge"
     :bordered="false"
@@ -33,24 +35,24 @@ const handleSubmit = () => {
   >
     <n-space vertical>
       <n-form :model="model">
-        <n-form-item label="证书">
+        <n-form-item :label="$gettext('Certificate')">
           <n-input
             v-model:value="model.cert"
             type="textarea"
-            placeholder="输入 PEM 证书文件的内容"
+            :placeholder="$gettext('Enter the content of the PEM certificate file')"
             :autosize="{ minRows: 10, maxRows: 15 }"
           />
         </n-form-item>
-        <n-form-item label="私钥">
+        <n-form-item :label="$gettext('Private Key')">
           <n-input
             v-model:value="model.key"
             type="textarea"
-            placeholder="输入 KEY 私钥文件的内容"
+            :placeholder="$gettext('Enter the content of the KEY private key file')"
             :autosize="{ minRows: 10, maxRows: 15 }"
           />
         </n-form-item>
       </n-form>
-      <n-button type="info" block @click="handleSubmit">提交</n-button>
+      <n-button type="info" block @click="handleSubmit">{{ $gettext('Submit') }}</n-button>
     </n-space>
   </n-modal>
 </template>
diff --git a/web/src/views/cert/route.ts b/web/src/views/cert/route.ts
index 13e45f09..e76aecee 100644
--- a/web/src/views/cert/route.ts
+++ b/web/src/views/cert/route.ts
@@ -1,3 +1,4 @@
+import { $gettext } from '@/utils/gettext'
 import type { RouteType } from '~/types/router'
 
 const Layout = () => import('@/layout/IndexView.vue')
@@ -15,7 +16,7 @@ export default {
       path: '',
       component: () => import('./IndexView.vue'),
       meta: {
-        title: 'certIndex.title',
+        title: $gettext('Certificate'),
         icon: 'mdi:certificate-outline',
         role: ['admin'],
         requireAuth: true
diff --git a/web/src/views/dashboard/UpdateView.vue b/web/src/views/dashboard/UpdateView.vue
index a179583c..53c9f6cc 100644
--- a/web/src/views/dashboard/UpdateView.vue
+++ b/web/src/views/dashboard/UpdateView.vue
@@ -7,13 +7,13 @@ import { MdPreview } from 'md-editor-v3'
 import 'md-editor-v3/lib/style.css'
 import type { MessageReactive } from 'naive-ui'
 import { NButton } from 'naive-ui'
-import { useI18n } from 'vue-i18n'
+import { useGettext } from 'vue3-gettext'
 
 import dashboard from '@/api/panel/dashboard'
 import { router } from '@/router'
 import { formatDateTime } from '@/utils'
 
-const { t } = useI18n()
+const { $gettext } = useGettext()
 const { data: versions } = useRequest(dashboard.updateInfo, {
   initialData: []
 })
@@ -21,12 +21,12 @@ let messageReactive: MessageReactive | null = null
 
 const handleUpdate = () => {
   window.$dialog.warning({
-    title: t('homeUpdate.confirm.update.title'),
-    content: t('homeUpdate.confirm.update.content'),
-    positiveText: t('homeUpdate.confirm.update.positiveText'),
-    negativeText: t('homeUpdate.confirm.update.negativeText'),
+    title: $gettext('Update Panel'),
+    content: $gettext('Are you sure you want to update the panel?'),
+    positiveText: $gettext('Confirm'),
+    negativeText: $gettext('Cancel'),
     onPositiveClick: () => {
-      messageReactive = window.$message.loading(t('homeUpdate.confirm.update.loading'), {
+      messageReactive = window.$message.loading($gettext('Panel updating...'), {
         duration: 0
       })
       useRequest(dashboard.update())
@@ -37,14 +37,14 @@ const handleUpdate = () => {
             }, 400)
             router.push({ name: 'dashboard-index' })
           }, 2500)
-          window.$message.success(t('homeUpdate.alerts.success'))
+          window.$message.success($gettext('Panel updated successfully'))
         })
         .onComplete(() => {
           messageReactive?.destroy()
         })
     },
     onNegativeClick: () => {
-      window.$message.info(t('homeUpdate.alerts.info'))
+      window.$message.info($gettext('Update canceled'))
     }
   })
 }
@@ -56,7 +56,7 @@ const handleUpdate = () => {
       <div>
         <n-button v-if="versions" class="ml-16" type="primary" @click="handleUpdate">
           <TheIcon :size="18" icon="material-symbols:arrow-circle-up-outline-rounded" />
-          {{ $t('homeUpdate.button.update') }}
+          {{ $gettext('Update Now') }}
         </n-button>
       </div>
     </template>
@@ -79,7 +79,7 @@ const handleUpdate = () => {
       </n-timeline-item>
     </n-timeline>
     <div v-else pt-40>
-      <n-result status="418" title="Loading..." :description="$t('homeUpdate.loading')"> </n-result>
+      <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 c80dc35c..f874221c 100644
--- a/web/src/views/database/CreateDatabaseModal.vue
+++ b/web/src/views/database/CreateDatabaseModal.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import database from '@/api/panel/database'
 import { NButton, NInput } from 'naive-ui'
+import { useGettext } from 'vue3-gettext'
 
+const { $gettext } = useGettext()
 const show = defineModel<boolean>('show', { type: Boolean, required: true })
 const createModel = ref({
   server_id: null,
@@ -15,15 +17,15 @@ const createModel = ref({
 const servers = ref<{ label: string; value: string }[]>([])
 
 const hostType = [
-  { label: '本地（localhost）', value: 'localhost' },
-  { label: '所有（%）', value: '%' },
-  { label: '指定', value: '' }
+  { label: $gettext('Local (localhost)'), value: 'localhost' },
+  { label: $gettext('All (%)'), value: '%' },
+  { label: $gettext('Specific'), value: '' }
 ]
 
 const handleCreate = () => {
   useRequest(() => database.create(createModel.value)).onSuccess(() => {
     show.value = false
-    window.$message.success('创建成功')
+    window.$message.success($gettext('Created successfully'))
     window.$bus.emit('database:refresh')
   })
 }
@@ -49,7 +51,7 @@ watch(
   <n-modal
     v-model:show="show"
     preset="card"
-    title="创建数据库"
+    :title="$gettext('Create Database')"
     style="width: 60vw"
     size="huge"
     :bordered="false"
@@ -57,72 +59,72 @@ watch(
     @close="show = false"
   >
     <n-form :model="createModel">
-      <n-form-item path="server_id" label="服务器">
+      <n-form-item path="server_id" :label="$gettext('Server')">
         <n-select
           v-model:value="createModel.server_id"
           @keydown.enter.prevent
-          placeholder="选择服务器"
+          :placeholder="$gettext('Select server')"
           :options="servers"
         />
       </n-form-item>
-      <n-form-item path="database" label="数据库名">
+      <n-form-item path="database" :label="$gettext('Database Name')">
         <n-input
           v-model:value="createModel.name"
           type="text"
           @keydown.enter.prevent
-          placeholder="输入数据库名称"
+          :placeholder="$gettext('Enter database name')"
         />
       </n-form-item>
-      <n-form-item path="create_user" label="创建用户">
+      <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="授权用户">
+      <n-form-item v-if="!createModel.create_user" path="username" :label="$gettext('Authorized User')">
         <n-input
           v-model:value="createModel.username"
           type="text"
           @keydown.enter.prevent
-          placeholder="输入授权用户名（留空不授权）"
+          :placeholder="$gettext('Enter authorized username (leave empty for no authorization)')"
         />
       </n-form-item>
-      <n-form-item v-if="createModel.create_user" path="username" label="用户名">
+      <n-form-item v-if="createModel.create_user" path="username" :label="$gettext('Username')">
         <n-input
           v-model:value="createModel.username"
           type="text"
           @keydown.enter.prevent
-          placeholder="输入用户名"
+          :placeholder="$gettext('Enter username')"
         />
       </n-form-item>
-      <n-form-item v-if="createModel.create_user" path="password" label="密码">
+      <n-form-item v-if="createModel.create_user" path="password" :label="$gettext('Password')">
         <n-input
           v-model:value="createModel.password"
           type="password"
           show-password-on="click"
           @keydown.enter.prevent
-          placeholder="输入密码"
+          :placeholder="$gettext('Enter password')"
         />
       </n-form-item>
-      <n-form-item v-if="createModel.create_user" path="host-select" label="主机">
+      <n-form-item v-if="createModel.create_user" path="host-select" :label="$gettext('Host')">
         <n-select
           v-model:value="createModel.host"
           @keydown.enter.prevent
-          placeholder="选择主机"
+          :placeholder="$gettext('Select host')"
           :options="hostType"
         />
       </n-form-item>
       <n-form-item
         v-if="createModel.create_user && createModel.host === ''"
         path="host"
-        label="指定主机"
+        :label="$gettext('Specific Host')"
       >
         <n-input
           v-model:value="createModel.host"
           type="text"
           @keydown.enter.prevent
-          placeholder="输入受支持的主机地址"
+          :placeholder="$gettext('Enter supported host address')"
         />
       </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-modal>
 </template>
 
diff --git a/web/src/views/database/DatabaseList.vue b/web/src/views/database/DatabaseList.vue
index 88933017..77102a77 100644
--- a/web/src/views/database/DatabaseList.vue
+++ b/web/src/views/database/DatabaseList.vue
@@ -1,12 +1,15 @@
 <script setup lang="ts">
 import { renderIcon } from '@/utils'
 import { NButton, NInput, NPopconfirm, NTag } from 'naive-ui'
+import { useGettext } from 'vue3-gettext'
 
 import database from '@/api/panel/database'
 
+const { $gettext } = useGettext()
+
 const columns: any = [
   {
-    title: '类型',
+    title: $gettext('Type'),
     key: 'type',
     width: 150,
     render(row: any) {
@@ -29,19 +32,19 @@ const columns: any = [
     }
   },
   {
-    title: '数据库名',
+    title: $gettext('Database Name'),
     key: 'name',
     minWidth: 100,
     resizable: true,
     ellipsis: { tooltip: true }
   },
   {
-    title: '服务器',
+    title: $gettext('Server'),
     key: 'server',
     width: 150
   },
   {
-    title: '编码',
+    title: $gettext('Encoding'),
     key: 'encoding',
     width: 150,
     render(row: any) {
@@ -51,7 +54,7 @@ const columns: any = [
     }
   },
   {
-    title: '备注',
+    title: $gettext('Comment'),
     key: 'comment',
     minWidth: 250,
     resizable: true,
@@ -68,7 +71,7 @@ const columns: any = [
     }
   },
   {
-    title: '操作',
+    title: $gettext('Actions'),
     key: 'actions',
     width: 200,
     align: 'center',
@@ -82,7 +85,7 @@ const columns: any = [
           },
           {
             default: () => {
-              return '确定删除数据库吗？'
+              return $gettext('Are you sure you want to delete this database?')
             },
             trigger: () => {
               return h(
@@ -93,7 +96,7 @@ const columns: any = [
                   style: 'margin-left: 15px;'
                 },
                 {
-                  default: () => '删除',
+                  default: () => $gettext('Delete'),
                   icon: renderIcon('material-symbols:delete-outline', { size: 14 })
                 }
               )
@@ -118,13 +121,13 @@ const { loading, data, page, total, pageSize, pageCount, refresh } = usePaginati
 const handleDelete = (serverID: number, name: string) => {
   useRequest(database.delete(serverID, name)).onSuccess(() => {
     refresh()
-    window.$message.success('删除成功')
+    window.$message.success($gettext('Deleted successfully'))
   })
 }
 
 const handleComment = (row: any) => {
   useRequest(database.comment(row.server_id, row.name, row.comment)).onSuccess(() => {
-    window.$message.success('修改成功')
+    window.$message.success($gettext('Modified successfully'))
   })
 }
 
diff --git a/web/src/views/database/IndexView.vue b/web/src/views/database/IndexView.vue
index a21f81d5..2776acea 100644
--- a/web/src/views/database/IndexView.vue
+++ b/web/src/views/database/IndexView.vue
@@ -10,7 +10,9 @@ import DatabaseList from '@/views/database/DatabaseList.vue'
 import ServerList from '@/views/database/ServerList.vue'
 import UserList from '@/views/database/UserList.vue'
 import { NButton } from 'naive-ui'
+import { useGettext } from 'vue3-gettext'
 
+const { $gettext } = useGettext()
 const currentTab = ref('database')
 
 const createDatabaseModalShow = ref(false)
@@ -27,26 +29,26 @@ const createServerModalShow = ref(false)
         @click="createDatabaseModalShow = true"
       >
         <TheIcon :size="18" icon="material-symbols:add" />
-        创建数据库
+        {{ $gettext('Create Database') }}
       </n-button>
       <n-button v-if="currentTab === 'user'" type="primary" @click="createUserModalShow = true">
         <TheIcon :size="18" icon="material-symbols:add" />
-        创建用户
+        {{ $gettext('Create User') }}
       </n-button>
       <n-button v-if="currentTab === 'server'" type="primary" @click="createServerModalShow = true">
         <TheIcon :size="18" icon="material-symbols:add" />
-        添加服务器
+        {{ $gettext('Add Server') }}
       </n-button>
     </template>
     <n-flex vertical>
       <n-tabs v-model:value="currentTab" type="line" animated>
-        <n-tab-pane name="database" tab="数据库">
+        <n-tab-pane name="database" :tab="$gettext('Database')">
           <database-list />
         </n-tab-pane>
-        <n-tab-pane name="user" tab="用户">
+        <n-tab-pane name="user" :tab="$gettext('User')">
           <user-list />
         </n-tab-pane>
-        <n-tab-pane name="server" tab="服务器">
+        <n-tab-pane name="server" :tab="$gettext('Server')">
           <server-list />
         </n-tab-pane>
       </n-tabs>
diff --git a/web/src/views/database/ServerList.vue b/web/src/views/database/ServerList.vue
index de83ea7b..38402c36 100644
--- a/web/src/views/database/ServerList.vue
+++ b/web/src/views/database/ServerList.vue
@@ -2,17 +2,19 @@
 import { renderIcon } from '@/utils'
 import copy2clipboard from '@vavt/copy2clipboard'
 import { NButton, NInput, NInputGroup, NPopconfirm, NTag } from 'naive-ui'
+import { useGettext } from 'vue3-gettext'
 
 import database from '@/api/panel/database'
 import { formatDateTime } from '@/utils'
 import UpdateServerModal from '@/views/database/UpdateServerModal.vue'
 
+const { $gettext } = useGettext()
 const updateModal = ref(false)
 const updateID = ref(0)
 
 const columns: any = [
   {
-    title: '类型',
+    title: $gettext('Type'),
     key: 'type',
     width: 150,
     render(row: any) {
@@ -35,23 +37,23 @@ const columns: any = [
     }
   },
   {
-    title: '名称',
+    title: $gettext('Name'),
     key: 'name',
     minWidth: 100,
     resizable: true,
     ellipsis: { tooltip: true }
   },
   {
-    title: '用户名',
+    title: $gettext('Username'),
     key: 'username',
     width: 150,
     ellipsis: { tooltip: true },
     render(row: any) {
-      return row.username || '无'
+      return row.username || $gettext('None')
     }
   },
   {
-    title: '密码',
+    title: $gettext('Password'),
     key: 'password',
     width: 250,
     render(row: any) {
@@ -62,7 +64,7 @@ const columns: any = [
             type: 'password',
             showPasswordOn: 'click',
             readonly: true,
-            placeholder: '无'
+            placeholder: $gettext('None')
           }),
           h(
             NButton,
@@ -71,18 +73,18 @@ const columns: any = [
               ghost: true,
               onClick: () => {
                 copy2clipboard(row.password).then(() => {
-                  window.$message.success('复制成功')
+                  window.$message.success($gettext('Copied successfully'))
                 })
               }
             },
-            { default: () => '复制' }
+            { default: () => $gettext('Copy') }
           )
         ]
       })
     }
   },
   {
-    title: '主机',
+    title: $gettext('Host'),
     key: 'host',
     width: 150,
     render(row: any) {
@@ -92,7 +94,7 @@ const columns: any = [
     }
   },
   {
-    title: '备注',
+    title: $gettext('Comment'),
     key: 'remark',
     minWidth: 250,
     resizable: true,
@@ -109,19 +111,19 @@ const columns: any = [
     }
   },
   {
-    title: '状态',
+    title: $gettext('Status'),
     key: 'status',
     width: 100,
     render(row: any) {
       return h(
         NTag,
         { type: row.status === 'valid' ? 'success' : 'error' },
-        { default: () => (row.status === 'valid' ? '有效' : '无效') }
+        { default: () => (row.status === 'valid' ? $gettext('Valid') : $gettext('Invalid')) }
       )
     }
   },
   {
-    title: '更新日期',
+    title: $gettext('Update Date'),
     key: 'updated_at',
     width: 200,
     ellipsis: { tooltip: true },
@@ -130,7 +132,7 @@ const columns: any = [
     }
   },
   {
-    title: '操作',
+    title: $gettext('Actions'),
     key: 'actions',
     width: 300,
     align: 'center',
@@ -143,13 +145,13 @@ const columns: any = [
             onPositiveClick: () => {
               useRequest(database.serverSync(row.id)).onSuccess(() => {
                 refresh()
-                window.$message.success('同步成功')
+                window.$message.success($gettext('Synchronized successfully'))
               })
             }
           },
           {
             default: () => {
-              return '确定同步数据库用户（不包括密码）到面板？'
+              return $gettext('Are you sure you want to synchronize database users (excluding password) to the panel?')
             },
             trigger: () => {
               return h(
@@ -159,7 +161,7 @@ const columns: any = [
                   type: 'success'
                 },
                 {
-                  default: () => '同步',
+                  default: () => $gettext('Sync'),
                   icon: renderIcon('material-symbols:sync', { size: 14 })
                 }
               )
@@ -178,7 +180,7 @@ const columns: any = [
             }
           },
           {
-            default: () => '修改',
+            default: () => $gettext('Modify'),
             icon: renderIcon('material-symbols:edit-outline', { size: 14 })
           }
         ),
@@ -188,7 +190,7 @@ const columns: any = [
             onPositiveClick: () => {
               // 防手贱
               if (['local_mysql', 'local_postgresql'].includes(row.name)) {
-                window.$message.error('内置服务器不能删除，如需删除请卸载对应应用')
+                window.$message.error($gettext('Built-in servers cannot be deleted. If you need to delete them, please uninstall the corresponding application'))
                 return
               }
               handleDelete(row.id)
@@ -196,7 +198,7 @@ const columns: any = [
           },
           {
             default: () => {
-              return '确定删除服务器吗？'
+              return $gettext('Are you sure you want to delete the server?')
             },
             trigger: () => {
               return h(
@@ -207,7 +209,7 @@ const columns: any = [
                   style: 'margin-left: 15px;'
                 },
                 {
-                  default: () => '删除',
+                  default: () => $gettext('Delete'),
                   icon: renderIcon('material-symbols:delete-outline', { size: 14 })
                 }
               )
@@ -232,13 +234,13 @@ const { loading, data, page, total, pageSize, pageCount, refresh } = usePaginati
 const handleDelete = (id: number) => {
   useRequest(database.serverDelete(id)).onSuccess(() => {
     refresh()
-    window.$message.success('删除成功')
+    window.$message.success($gettext('Deleted successfully'))
   })
 }
 
 const handleRemark = (row: any) => {
   useRequest(database.serverRemark(row.id, row.remark)).onSuccess(() => {
-    window.$message.success('修改成功')
+    window.$message.success($gettext('Modified successfully'))
   })
 }
 
diff --git a/web/src/views/error-page/NotFound.vue b/web/src/views/error-page/NotFound.vue
index 736aebc0..7d82a77f 100644
--- a/web/src/views/error-page/NotFound.vue
+++ b/web/src/views/error-page/NotFound.vue
@@ -1,15 +1,18 @@
 <script lang="ts" setup>
+import { useGettext } from 'vue3-gettext'
+
+const { $gettext } = useGettext()
 const { replace } = useRouter()
 </script>
 
 <template>
   <AppPage>
-    <n-result description="抱歉，您访问的页面不存在。" 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>
       <template #footer>
-        <n-button @click="replace('/')"> 返回首页</n-button>
+        <n-button @click="replace('/')">{{ $gettext('Back to Home') }}</n-button>
       </template>
     </n-result>
   </AppPage>
diff --git a/web/src/views/file/ToolBar.vue b/web/src/views/file/ToolBar.vue
index ad8b0153..ee2e2d85 100644
--- a/web/src/views/file/ToolBar.vue
+++ b/web/src/views/file/ToolBar.vue
@@ -3,6 +3,9 @@ import file from '@/api/panel/file'
 import { checkName, lastDirectory } from '@/utils/file'
 import UploadModal from '@/views/file/UploadModal.vue'
 import type { Marked } from '@/views/file/types'
+import { useGettext } from 'vue3-gettext'
+
+const { $gettext } = useGettext()
 
 const path = defineModel<string>('path', { type: String, required: true })
 const selected = defineModel<string[]>('selected', { type: Array, default: () => [] })
@@ -31,7 +34,7 @@ const showCreate = (value: string) => {
 
 const handleCreate = () => {
   if (!checkName(createModel.value.path)) {
-    window.$message.error('名称不合法')
+    window.$message.error($gettext('Invalid name'))
     return
   }
 
@@ -39,13 +42,13 @@ const handleCreate = () => {
   useRequest(file.create(fullPath, createModel.value.dir)).onSuccess(() => {
     create.value = false
     window.$bus.emit('file:refresh')
-    window.$message.success('新建成功')
+    window.$message.success($gettext('Created successfully'))
   })
 }
 
 const handleDownload = () => {
   if (!checkName(downloadModel.value.path)) {
-    window.$message.error('名称不合法')
+    window.$message.error($gettext('Invalid name'))
     return
   }
 
@@ -54,13 +57,13 @@ const handleDownload = () => {
   ).onSuccess(() => {
     download.value = false
     window.$bus.emit('file:refresh')
-    window.$message.success('下载任务创建成功')
+    window.$message.success($gettext('Download task created successfully'))
   })
 }
 
 const handleCopy = () => {
   if (!selected.value.length) {
-    window.$message.error('请选择要复制的文件/文件夹')
+    window.$message.error($gettext('Please select files/folders to copy'))
     return
   }
   markedType.value = 'copy'
@@ -70,12 +73,14 @@ const handleCopy = () => {
     force: false
   }))
   selected.value = []
-  window.$message.success('标记成功，请前往目标路径粘贴')
+  window.$message.success(
+    $gettext('Marked successfully, please navigate to the destination path to paste')
+  )
 }
 
 const handleMove = () => {
   if (!selected.value.length) {
-    window.$message.error('请选择要移动的文件/文件夹')
+    window.$message.error($gettext('Please select files/folders to move'))
     return
   }
   markedType.value = 'move'
@@ -85,7 +90,9 @@ const handleMove = () => {
     force: false
   }))
   selected.value = []
-  window.$message.success('标记成功，请前往目标路径粘贴')
+  window.$message.success(
+    $gettext('Marked successfully, please navigate to the destination path to paste')
+  )
 }
 
 const handleCancel = () => {
@@ -94,7 +101,7 @@ const handleCancel = () => {
 
 const handlePaste = () => {
   if (!marked.value.length) {
-    window.$message.error('请先标记需要复制或移动的文件/文件夹')
+    window.$message.error($gettext('Please mark the files/folders to copy or move first'))
     return
   }
 
@@ -118,32 +125,36 @@ const handlePaste = () => {
     }
     if (flag) {
       window.$dialog.warning({
-        title: '警告',
-        content: `存在同名项
-      ${paths
-        .filter((item) => item.force)
-        .map((item) => item.name)
-        .join(', ')} 是否覆盖？`,
-        positiveText: '覆盖',
-        negativeText: '取消',
+        title: $gettext('Warning'),
+        content: $gettext(
+          'There are items with the same name. %{ items } Do you want to overwrite?',
+          {
+            items: `${paths
+              .filter((item) => item.force)
+              .map((item) => item.name)
+              .join(', ')}`
+          }
+        ),
+        positiveText: $gettext('Overwrite'),
+        negativeText: $gettext('Cancel'),
         onPositiveClick: async () => {
           if (markedType.value == 'copy') {
             useRequest(file.copy(paths)).onSuccess(() => {
               marked.value = []
               window.$bus.emit('file:refresh')
-              window.$message.success('复制成功')
+              window.$message.success($gettext('Copied successfully'))
             })
           } else {
             useRequest(file.move(paths)).onSuccess(() => {
               marked.value = []
               window.$bus.emit('file:refresh')
-              window.$message.success('移动成功')
+              window.$message.success($gettext('Moved successfully'))
             })
           }
         },
         onNegativeClick: () => {
           marked.value = []
-          window.$message.info('已取消')
+          window.$message.info($gettext('Canceled'))
         }
       })
     } else {
@@ -151,13 +162,13 @@ const handlePaste = () => {
         useRequest(file.copy(paths)).onSuccess(() => {
           marked.value = []
           window.$bus.emit('file:refresh')
-          window.$message.success('复制成功')
+          window.$message.success($gettext('Copied successfully'))
         })
       } else {
         useRequest(file.move(paths)).onSuccess(() => {
           marked.value = []
           window.$bus.emit('file:refresh')
-          window.$message.success('移动成功')
+          window.$message.success($gettext('Moved successfully'))
         })
       }
     }
@@ -166,7 +177,7 @@ const handlePaste = () => {
 
 const bulkDelete = async () => {
   if (!selected.value.length) {
-    window.$message.error('请选择要删除的文件/文件夹')
+    window.$message.error($gettext('Please select files/folders to delete'))
     return
   }
 
@@ -175,7 +186,7 @@ const bulkDelete = async () => {
 
   selected.value = []
   window.$bus.emit('file:refresh')
-  window.$message.success('删除成功')
+  window.$message.success($gettext('Deleted successfully'))
 }
 
 // 自动填充下载文件名
@@ -200,33 +211,33 @@ watch(
   <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('New') }}</n-button>
     </n-popselect>
-    <n-button @click="upload = true"> 上传 </n-button>
-    <n-button @click="download = true"> 远程下载 </n-button>
+    <n-button @click="upload = true">{{ $gettext('Upload') }}</n-button>
+    <n-button @click="download = true">{{ $gettext('Remote Download') }}</n-button>
     <div ml-auto>
       <n-flex>
         <n-button v-if="marked.length" secondary type="error" @click="handleCancel">
-          取消
+          {{ $gettext('Cancel') }}
         </n-button>
         <n-button v-if="marked.length" secondary type="primary" @click="handlePaste">
-          粘贴
+          {{ $gettext('Paste') }}
         </n-button>
         <n-button-group v-if="selected.length">
-          <n-button @click="handleCopy"> 复制 </n-button>
-          <n-button @click="handleMove"> 移动 </n-button>
-          <n-button @click="compress = true"> 压缩 </n-button>
-          <n-button @click="permission = true"> 权限 </n-button>
+          <n-button @click="handleCopy">{{ $gettext('Copy') }}</n-button>
+          <n-button @click="handleMove">{{ $gettext('Move') }}</n-button>
+          <n-button @click="compress = true">{{ $gettext('Compress') }}</n-button>
+          <n-button @click="permission = true">{{ $gettext('Permission') }}</n-button>
           <n-popconfirm @positive-click="bulkDelete">
             <template #trigger>
-              <n-button>删除</n-button>
+              <n-button>{{ $gettext('Delete') }}</n-button>
             </template>
-            确定要批量删除吗？
+            {{ $gettext('Are you sure you want to delete in bulk?') }}
           </n-popconfirm>
         </n-button-group>
       </n-flex>
@@ -235,7 +246,7 @@ watch(
   <n-modal
     v-model:show="create"
     preset="card"
-    title="新建"
+    :title="$gettext('New')"
     style="width: 60vw"
     size="huge"
     :bordered="false"
@@ -243,17 +254,17 @@ watch(
   >
     <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>
   <n-modal
     v-model:show="download"
     preset="card"
-    title="远程下载"
+    :title="$gettext('Remote Download')"
     style="width: 60vw"
     size="huge"
     :bordered="false"
@@ -261,14 +272,14 @@ watch(
   >
     <n-space vertical>
       <n-form :model="downloadModel">
-        <n-form-item label="下载链接">
+        <n-form-item :label="$gettext('Download URL')">
           <n-input :input-props="{ type: 'url' }" v-model:value="downloadModel.url" />
         </n-form-item>
-        <n-form-item label="保存文件名">
+        <n-form-item :label="$gettext('Save as')">
           <n-input v-model:value="downloadModel.path" />
         </n-form-item>
       </n-form>
-      <n-button type="info" block @click="handleDownload">提交</n-button>
+      <n-button type="info" block @click="handleDownload">{{ $gettext('Submit') }}</n-button>
     </n-space>
   </n-modal>
   <upload-modal v-model:show="upload" v-model:path="path" />
diff --git a/web/src/views/login/IndexView.vue b/web/src/views/login/IndexView.vue
index 7f0e0e97..7292c374 100644
--- a/web/src/views/login/IndexView.vue
+++ b/web/src/views/login/IndexView.vue
@@ -6,7 +6,9 @@ import { addDynamicRoutes } from '@/router'
 import { useThemeStore, useUserStore } from '@/store'
 import { getLocal, removeLocal, setLocal } from '@/utils'
 import { rsaEncrypt } from '@/utils/encrypt'
+import { useGettext } from 'vue3-gettext'
 
+const { $gettext } = useGettext()
 const router = useRouter()
 const route = useRoute()
 const query = route.query
@@ -41,11 +43,11 @@ const logo = computed(() => themeStore.logo || logoImg)
 async function handleLogin() {
   const { username, password, safe_login } = loginInfo.value
   if (!username || !password) {
-    window.$message.warning('请输入用户名和密码')
+    window.$message.warning($gettext('Please enter username and password'))
     return
   }
   if (!key) {
-    window.$message.warning('获取加密公钥失败，请刷新页面重试')
+    window.$message.warning($gettext('Failed to get encryption public key, please refresh the page and try again'))
     return
   }
   useRequest(
@@ -56,7 +58,7 @@ async function handleLogin() {
     )
   ).onSuccess(async () => {
     loging.value = true
-    window.$notification?.success({ title: '登录成功！', duration: 2500 })
+    window.$notification?.success({ title: $gettext('Login successful!'), duration: 2500 })
     if (isRemember.value) {
       setLocal('loginInfo', { username, password })
     } else {
@@ -108,7 +110,7 @@ watch(isLogin, async () => {
             :maxlength="32"
             autofocus
             class="h-50 items-center pl-10 text-16"
-            placeholder="用户名"
+            :placeholder="$gettext('Username')"
           />
         </div>
         <div mt-30>
@@ -116,7 +118,7 @@ watch(isLogin, async () => {
             v-model:value="loginInfo.password"
             :maxlength="32"
             class="h-50 items-center pl-10 text-16"
-            placeholder="密码"
+            :placeholder="$gettext('Password')"
             type="password"
             show-password-on="click"
             @keydown.enter="handleLogin"
@@ -125,8 +127,8 @@ watch(isLogin, async () => {
 
         <div mt-20>
           <n-flex>
-            <n-checkbox v-model:checked="loginInfo.safe_login" label="安全登录" />
-            <n-checkbox v-model:checked="isRemember" label="记住我" />
+            <n-checkbox v-model:checked="loginInfo.safe_login" :label="$gettext('Safe Login')" />
+            <n-checkbox v-model:checked="isRemember" :label="$gettext('Remember Me')" />
           </n-flex>
         </div>
 
@@ -140,7 +142,7 @@ watch(isLogin, async () => {
             text-16
             @click="handleLogin"
           >
-            登录
+            {{ $gettext('Login') }}
           </n-button>
         </div>
       </div>
diff --git a/web/src/views/setting/IndexView.vue b/web/src/views/setting/IndexView.vue
index 4429ad82..e28cf44f 100644
--- a/web/src/views/setting/IndexView.vue
+++ b/web/src/views/setting/IndexView.vue
@@ -5,14 +5,16 @@ defineOptions({
 
 import SettingBase from '@/views/setting/SettingBase.vue'
 import SettingHttps from '@/views/setting/SettingHttps.vue'
+import { useGettext } from 'vue3-gettext'
 
+const { $gettext } = useGettext()
 const currentTab = ref('base')
 </script>
 
 <template>
   <common-page show-footer>
     <n-tabs v-model:value="currentTab" type="line" animated>
-      <n-tab-pane name="base" tab="基本">
+      <n-tab-pane name="base" :tab="$gettext('Basic')">
         <setting-base />
       </n-tab-pane>
       <n-tab-pane name="https" tab="HTTPS">
diff --git a/web/src/views/setting/SettingBase.vue b/web/src/views/setting/SettingBase.vue
index 86d77cfe..7404c75a 100644
--- a/web/src/views/setting/SettingBase.vue
+++ b/web/src/views/setting/SettingBase.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n'
-
 import setting from '@/api/panel/setting'
 import { useThemeStore } from '@/store'
+import { useGettext } from 'vue3-gettext'
 
-const { t } = useI18n()
+const { $gettext } = useGettext()
 const themeStore = useThemeStore()
 
 const { data: model } = useRequest(setting.list, {
@@ -32,7 +31,7 @@ const locales = [
 
 const handleSave = () => {
   useRequest(setting.update(model.value)).onSuccess(() => {
-    window.$message.success(t('settingIndex.edit.toasts.success'))
+    window.$message.success($gettext('Saved successfully'))
     setTimeout(() => {
       maybeHardReload()
     }, 1000)
@@ -49,70 +48,70 @@ const maybeHardReload = () => {
 <template>
   <n-space vertical>
     <n-alert type="info">
-      {{ $t('settingIndex.info') }}
+      {{ $gettext('Modifying panel port/entrance requires corresponding changes in the browser address bar to access the panel!') }}
     </n-alert>
     <n-form>
-      <n-form-item :label="$t('settingIndex.edit.fields.name.label')">
+      <n-form-item :label="$gettext('Panel Name')">
         <n-input
           v-model:value="model.name"
-          :placeholder="$t('settingIndex.edit.fields.name.placeholder')"
+          :placeholder="$gettext('Panel Name')"
         />
       </n-form-item>
-      <n-form-item v-show="false" label="$t('settingIndex.edit.fields.locale.label')">
+      <n-form-item v-show="false" :label="$gettext('Language')">
         <n-select v-model:value="model.locale" :options="locales"> </n-select>
       </n-form-item>
-      <n-form-item :label="$t('settingIndex.edit.fields.username.label')">
+      <n-form-item :label="$gettext('Username')">
         <n-input
           v-model:value="model.username"
-          :placeholder="$t('settingIndex.edit.fields.username.placeholder')"
+          :placeholder="$gettext('admin')"
         />
       </n-form-item>
-      <n-form-item :label="$t('settingIndex.edit.fields.password.label')">
+      <n-form-item :label="$gettext('Password')">
         <n-input
           v-model:value="model.password"
-          :placeholder="$t('settingIndex.edit.fields.password.placeholder')"
+          :placeholder="$gettext('admin')"
         />
       </n-form-item>
-      <n-form-item :label="$t('settingIndex.edit.fields.email.label')">
+      <n-form-item :label="$gettext('Certificate Default Email')">
         <n-input
           v-model:value="model.email"
-          :placeholder="$t('settingIndex.edit.fields.email.placeholder')"
+          :placeholder="$gettext('admin@example.com')"
         />
       </n-form-item>
-      <n-form-item :label="$t('settingIndex.edit.fields.port.label')">
+      <n-form-item :label="$gettext('Port')">
         <n-input-number
           v-model:value="model.port"
-          :placeholder="$t('settingIndex.edit.fields.port.placeholder')"
+          :placeholder="$gettext('8888')"
         />
       </n-form-item>
-      <n-form-item :label="$t('settingIndex.edit.fields.entrance.label')">
+      <n-form-item :label="$gettext('Security Entrance')">
         <n-input
           v-model:value="model.entrance"
-          :placeholder="$t('settingIndex.edit.fields.entrance.placeholder')"
+          :placeholder="$gettext('admin')"
         />
       </n-form-item>
-      <n-form-item :label="$t('settingIndex.edit.fields.offline.label')">
+      <n-form-item :label="$gettext('Offline Mode')">
         <n-switch v-model:value="model.offline_mode" />
       </n-form-item>
-      <n-form-item label="自动更新">
+      <n-form-item :label="$gettext('Auto Update')">
         <n-switch v-model:value="model.auto_update" />
       </n-form-item>
-      <n-form-item :label="$t('settingIndex.edit.fields.path.label')">
+      <n-form-item :label="$gettext('Default Website Directory')">
         <n-input
           v-model:value="model.website_path"
-          :placeholder="$t('settingIndex.edit.fields.path.placeholder')"
+          :placeholder="$gettext('/www/wwwroot')"
         />
       </n-form-item>
-      <n-form-item :label="$t('settingIndex.edit.fields.backup.label')">
+      <n-form-item :label="$gettext('Default Backup Directory')">
         <n-input
           v-model:value="model.backup_path"
-          :placeholder="$t('settingIndex.edit.fields.backup.placeholder')"
+          :placeholder="$gettext('/www/backup')"
         />
       </n-form-item>
     </n-form>
   </n-space>
   <n-button type="primary" @click="handleSave">
-    {{ $t('settingIndex.edit.actions.submit') }}
+    {{ $gettext('Save') }}
   </n-button>
 </template>
 
diff --git a/web/src/views/setting/SettingHttps.vue b/web/src/views/setting/SettingHttps.vue
index 52df6113..c47c8eb9 100644
--- a/web/src/views/setting/SettingHttps.vue
+++ b/web/src/views/setting/SettingHttps.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import setting from '@/api/panel/setting'
-import { $gettext } from '@/utils/gettext'
+import { useGettext } from 'vue3-gettext'
+
+const { $gettext } = useGettext()
 
 const { data: model } = useRequest(setting.list, {
   initialData: {