diff --git a/api/certificate/acme_user.go b/api/certificate/acme_user.go
new file mode 100644
index 00000000..cbab749a
--- /dev/null
+++ b/api/certificate/acme_user.go
@@ -0,0 +1,96 @@
+package certificate
+
+import (
+	"github.com/0xJacky/Nginx-UI/api"
+	"github.com/0xJacky/Nginx-UI/internal/cosy"
+	"github.com/0xJacky/Nginx-UI/model"
+	"github.com/0xJacky/Nginx-UI/query"
+	"github.com/0xJacky/Nginx-UI/settings"
+	"github.com/gin-gonic/gin"
+	"github.com/spf13/cast"
+	"net/http"
+)
+
+func GetAcmeUser(c *gin.Context) {
+	u := query.AcmeUser
+	id := cast.ToInt(c.Param("id"))
+	user, err := u.FirstByID(id)
+	if err != nil {
+		api.ErrHandler(c, err)
+		return
+	}
+	c.JSON(http.StatusOK, user)
+}
+
+func CreateAcmeUser(c *gin.Context) {
+	cosy.Core[model.AcmeUser](c).SetValidRules(gin.H{
+		"name":   "required",
+		"email":  "required,email",
+		"ca_dir": "omitempty",
+	}).BeforeExecuteHook(func(ctx *cosy.Ctx[model.AcmeUser]) {
+		if ctx.Model.CADir == "" {
+			ctx.Model.CADir = settings.ServerSettings.CADir
+		}
+		err := ctx.Model.Register()
+		if err != nil {
+			ctx.AbortWithError(err)
+			return
+		}
+	}).Create()
+}
+
+func ModifyAcmeUser(c *gin.Context) {
+	cosy.Core[model.AcmeUser](c).SetValidRules(gin.H{
+		"name":   "omitempty",
+		"email":  "omitempty,email",
+		"ca_dir": "omitempty",
+	}).BeforeExecuteHook(func(ctx *cosy.Ctx[model.AcmeUser]) {
+		if ctx.Model.CADir == "" {
+			ctx.Model.CADir = settings.ServerSettings.CADir
+		}
+
+		if ctx.OriginModel.Email != ctx.Model.Email ||
+			ctx.OriginModel.CADir != ctx.Model.CADir {
+			err := ctx.Model.Register()
+			if err != nil {
+				ctx.AbortWithError(err)
+				return
+			}
+		}
+	}).Modify()
+}
+
+func GetAcmeUserList(c *gin.Context) {
+	cosy.Core[model.AcmeUser](c).
+		SetFussy("name", "email").
+		PagingList()
+}
+
+func DestroyAcmeUser(c *gin.Context) {
+	cosy.Core[model.AcmeUser](c).Destroy()
+}
+
+func RecoverAcmeUser(c *gin.Context) {
+	cosy.Core[model.AcmeUser](c).Recover()
+}
+
+func RegisterAcmeUser(c *gin.Context) {
+	id := cast.ToInt(c.Param("id"))
+	u := query.AcmeUser
+	user, err := u.FirstByID(id)
+	if err != nil {
+		api.ErrHandler(c, err)
+		return
+	}
+	err = user.Register()
+	if err != nil {
+		api.ErrHandler(c, err)
+		return
+	}
+	_, err = u.Where(u.ID.Eq(id)).Updates(user)
+	if err != nil {
+		api.ErrHandler(c, err)
+		return
+	}
+	c.JSON(http.StatusOK, user)
+}
diff --git a/api/certificate/certificate.go b/api/certificate/certificate.go
index b5f9ba77..bcd5d261 100644
--- a/api/certificate/certificate.go
+++ b/api/certificate/certificate.go
@@ -2,8 +2,8 @@ package certificate
 
 import (
 	"github.com/0xJacky/Nginx-UI/api"
-	"github.com/0xJacky/Nginx-UI/api/cosy"
 	"github.com/0xJacky/Nginx-UI/internal/cert"
+	"github.com/0xJacky/Nginx-UI/internal/cosy"
 	"github.com/0xJacky/Nginx-UI/model"
 	"github.com/0xJacky/Nginx-UI/query"
 	"github.com/gin-gonic/gin"
diff --git a/api/certificate/dns_credential.go b/api/certificate/dns_credential.go
index 424562f4..bdf2f6b0 100644
--- a/api/certificate/dns_credential.go
+++ b/api/certificate/dns_credential.go
@@ -2,8 +2,8 @@ package certificate
 
 import (
 	"github.com/0xJacky/Nginx-UI/api"
-	"github.com/0xJacky/Nginx-UI/api/cosy"
 	"github.com/0xJacky/Nginx-UI/internal/cert/dns"
+	"github.com/0xJacky/Nginx-UI/internal/cosy"
 	"github.com/0xJacky/Nginx-UI/model"
 	"github.com/0xJacky/Nginx-UI/query"
 	"github.com/gin-gonic/gin"
diff --git a/api/certificate/router.go b/api/certificate/router.go
index 8b8b2bba..071de493 100644
--- a/api/certificate/router.go
+++ b/api/certificate/router.go
@@ -23,3 +23,13 @@ func InitCertificateRouter(r *gin.RouterGroup) {
 func InitCertificateWebSocketRouter(r *gin.RouterGroup) {
 	r.GET("domain/:name/cert", IssueCert)
 }
+
+func InitAcmeUserRouter(r *gin.RouterGroup) {
+	r.GET("acme_users", GetAcmeUserList)
+	r.GET("acme_user/:id", GetAcmeUser)
+	r.POST("acme_user", CreateAcmeUser)
+	r.POST("acme_user/:id", ModifyAcmeUser)
+	r.POST("acme_user/:id/register", RegisterAcmeUser)
+	r.DELETE("acme_user/:id", DestroyAcmeUser)
+	r.PATCH("acme_user/:id", RecoverAcmeUser)
+}
diff --git a/api/notification/notification.go b/api/notification/notification.go
index 952a6f02..f54348b9 100644
--- a/api/notification/notification.go
+++ b/api/notification/notification.go
@@ -2,7 +2,7 @@ package notification
 
 import (
 	"github.com/0xJacky/Nginx-UI/api"
-	"github.com/0xJacky/Nginx-UI/api/cosy"
+	"github.com/0xJacky/Nginx-UI/internal/cosy"
 	"github.com/0xJacky/Nginx-UI/model"
 	"github.com/0xJacky/Nginx-UI/query"
 	"github.com/gin-gonic/gin"
diff --git a/api/user/user.go b/api/user/user.go
index 83d8dba8..3eb2cb65 100644
--- a/api/user/user.go
+++ b/api/user/user.go
@@ -2,7 +2,7 @@ package user
 
 import (
 	"github.com/0xJacky/Nginx-UI/api"
-	"github.com/0xJacky/Nginx-UI/api/cosy"
+	"github.com/0xJacky/Nginx-UI/internal/cosy"
 	"github.com/0xJacky/Nginx-UI/model"
 	"github.com/0xJacky/Nginx-UI/query"
 	"github.com/0xJacky/Nginx-UI/settings"
diff --git a/app/.eslintrc.cjs b/app/.eslintrc.cjs
index 7bad4118..7c53c969 100644
--- a/app/.eslintrc.cjs
+++ b/app/.eslintrc.cjs
@@ -40,7 +40,7 @@ module.exports = {
       before: false,
       after: true,
     }],
-    'key-spacing': ['error', { afterColon: true }],
+    'key-spacing': ['error', {afterColon: true}],
 
     'vue/first-attribute-linebreak': ['error', {
       singleline: 'beside',
@@ -78,7 +78,7 @@ module.exports = {
     ],
 
     // Ignore _ as unused variable
-    '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_+$' }],
+    '@typescript-eslint/no-unused-vars': ['error', {argsIgnorePattern: '^_+$'}],
 
     'array-element-newline': ['error', 'consistent'],
     'array-bracket-newline': ['error', 'consistent'],
@@ -111,7 +111,7 @@ module.exports = {
 
     // Plugin: eslint-plugin-import
     'import/prefer-default-export': 'off',
-    'import/newline-after-import': ['error', { count: 1 }],
+    'import/newline-after-import': ['error', {count: 1}],
     'no-restricted-imports': ['error', 'vuetify/components'],
 
     // For omitting extension for ts files
@@ -150,7 +150,7 @@ module.exports = {
 
     // ESLint plugin vue
     'vue/component-api-style': 'error',
-    'vue/component-name-in-template-casing': ['error', 'PascalCase', { registeredComponentsOnly: false }],
+    'vue/component-name-in-template-casing': ['error', 'PascalCase', {registeredComponentsOnly: false}],
     'vue/custom-event-name-casing': ['error', 'camelCase', {
       ignores: [
         '/^(click):[a-z]+((\d)|([A-Z0-9][a-z0-9]+))*([A-Z])?/',
diff --git a/app/auto-imports.d.ts b/app/auto-imports.d.ts
index 41ab67ab..ef98aa91 100644
--- a/app/auto-imports.d.ts
+++ b/app/auto-imports.d.ts
@@ -5,6 +5,10 @@
 // Generated by unplugin-auto-import
 export {}
 declare global {
+  const $gettext: typeof import('@/gettext')['$gettext']
+  const $ngettext: typeof import('@/gettext')['$ngettext']
+  const $npgettext: typeof import('@/gettext')['$npgettext']
+  const $pgettext: typeof import('@/gettext')['$pgettext']
   const EffectScope: typeof import('vue')['EffectScope']
   const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
   const computed: typeof import('vue')['computed']
@@ -86,6 +90,10 @@ import { UnwrapRef } from 'vue'
 declare module 'vue' {
   interface GlobalComponents {}
   interface ComponentCustomProperties {
+    readonly $gettext: UnwrapRef<typeof import('@/gettext')['$gettext']>
+    readonly $ngettext: UnwrapRef<typeof import('@/gettext')['$ngettext']>
+    readonly $npgettext: UnwrapRef<typeof import('@/gettext')['$npgettext']>
+    readonly $pgettext: UnwrapRef<typeof import('@/gettext')['$pgettext']>
     readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
     readonly acceptHMRUpdate: UnwrapRef<typeof import('pinia')['acceptHMRUpdate']>
     readonly computed: UnwrapRef<typeof import('vue')['computed']>
@@ -160,6 +168,10 @@ declare module 'vue' {
 declare module '@vue/runtime-core' {
   interface GlobalComponents {}
   interface ComponentCustomProperties {
+    readonly $gettext: UnwrapRef<typeof import('@/gettext')['$gettext']>
+    readonly $ngettext: UnwrapRef<typeof import('@/gettext')['$ngettext']>
+    readonly $npgettext: UnwrapRef<typeof import('@/gettext')['$npgettext']>
+    readonly $pgettext: UnwrapRef<typeof import('@/gettext')['$pgettext']>
     readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
     readonly acceptHMRUpdate: UnwrapRef<typeof import('pinia')['acceptHMRUpdate']>
     readonly computed: UnwrapRef<typeof import('vue')['computed']>
diff --git a/app/components.d.ts b/app/components.d.ts
index f60a877d..fa57e402 100644
--- a/app/components.d.ts
+++ b/app/components.d.ts
@@ -21,6 +21,8 @@ declare module 'vue' {
     ACollapsePanel: typeof import('ant-design-vue/es')['CollapsePanel']
     AComment: typeof import('ant-design-vue/es')['Comment']
     AConfigProvider: typeof import('ant-design-vue/es')['ConfigProvider']
+    ADescriptions: typeof import('ant-design-vue/es')['Descriptions']
+    ADescriptionsItem: typeof import('ant-design-vue/es')['DescriptionsItem']
     ADivider: typeof import('ant-design-vue/es')['Divider']
     ADrawer: typeof import('ant-design-vue/es')['Drawer']
     ADropdown: typeof import('ant-design-vue/es')['Dropdown']
@@ -80,6 +82,7 @@ declare module 'vue' {
     SetLanguageSetLanguage: typeof import('./src/components/SetLanguage/SetLanguage.vue')['default']
     StdDesignStdDataDisplayStdBatchEdit: typeof import('./src/components/StdDesign/StdDataDisplay/StdBatchEdit.vue')['default']
     StdDesignStdDataDisplayStdCurd: typeof import('./src/components/StdDesign/StdDataDisplay/StdCurd.vue')['default']
+    StdDesignStdDataDisplayStdCurdDetail: typeof import('./src/components/StdDesign/StdDataDisplay/StdCurdDetail.vue')['default']
     StdDesignStdDataDisplayStdPagination: typeof import('./src/components/StdDesign/StdDataDisplay/StdPagination.vue')['default']
     StdDesignStdDataDisplayStdTable: typeof import('./src/components/StdDesign/StdDataDisplay/StdTable.vue')['default']
     StdDesignStdDataEntryComponentsStdPassword: typeof import('./src/components/StdDesign/StdDataEntry/components/StdPassword.vue')['default']
diff --git a/app/package.json b/app/package.json
index 68a8bf88..2e0b57ff 100644
--- a/app/package.json
+++ b/app/package.json
@@ -29,14 +29,14 @@
     "reconnecting-websocket": "^4.4.0",
     "sortablejs": "^1.15.2",
     "vite-plugin-build-id": "^0.2.8",
-    "vue": "^3.4.25",
+    "vue": "^3.4.26",
     "vue-github-button": "github:0xJacky/vue-github-button",
     "vue-router": "^4.3.2",
     "vue3-ace-editor": "2.2.4",
     "vue3-apexcharts": "1.4.4",
     "vue3-gettext": "3.0.0-beta.4",
     "vuedraggable": "^4.1.0",
-    "xterm": "^5.3.0",
+    "@xterm/xterm": "^5.5.0",
     "@xterm/addon-attach": "^0.11.0",
     "@xterm/addon-fit": "^0.10.0"
   },
@@ -63,7 +63,7 @@
     "less": "^4.2.0",
     "postcss": "^8.4.38",
     "tailwindcss": "^3.4.3",
-    "typescript": "^5.4.5",
+    "typescript": "5.3.3",
     "unplugin-auto-import": "^0.17.5",
     "unplugin-vue-components": "^0.26.0",
     "unplugin-vue-define-options": "^1.4.3",
diff --git a/app/pnpm-lock.yaml b/app/pnpm-lock.yaml
index a1a1c8a6..63609ddd 100644
--- a/app/pnpm-lock.yaml
+++ b/app/pnpm-lock.yaml
@@ -7,28 +7,31 @@ settings:
 dependencies:
   '@ant-design/icons-vue':
     specifier: ^7.0.1
-    version: 7.0.1(vue@3.4.25)
+    version: 7.0.1(vue@3.4.26)
   '@formkit/auto-animate':
     specifier: ^0.8.2
     version: 0.8.2
   '@vue/reactivity':
     specifier: ^3.4.25
-    version: 3.4.25
+    version: 3.4.26
   '@vue/shared':
     specifier: ^3.4.25
-    version: 3.4.25
+    version: 3.4.26
   '@vueuse/core':
     specifier: ^10.9.0
-    version: 10.9.0(vue@3.4.25)
+    version: 10.9.0(vue@3.4.26)
   '@xterm/addon-attach':
     specifier: ^0.11.0
     version: 0.11.0(@xterm/xterm@5.5.0)
   '@xterm/addon-fit':
     specifier: ^0.10.0
     version: 0.10.0(@xterm/xterm@5.5.0)
+  '@xterm/xterm':
+    specifier: ^5.5.0
+    version: 5.5.0
   ant-design-vue:
     specifier: ^4.2.1
-    version: 4.2.1(vue@3.4.25)
+    version: 4.2.1(vue@3.4.26)
   apexcharts:
     specifier: ^3.49.0
     version: 3.49.0
@@ -37,7 +40,7 @@ dependencies:
     version: 1.6.8
   dayjs:
     specifier: ^1.11.10
-    version: 1.11.10
+    version: 1.11.11
   highlight.js:
     specifier: ^11.9.0
     version: 11.9.0
@@ -52,7 +55,7 @@ dependencies:
     version: 0.2.0
   pinia:
     specifier: ^2.1.7
-    version: 2.1.7(typescript@5.4.5)(vue@3.4.25)
+    version: 2.1.7(typescript@5.3.3)(vue@3.4.26)
   pinia-plugin-persistedstate:
     specifier: ^3.2.1
     version: 3.2.1(pinia@2.1.7)
@@ -66,34 +69,31 @@ dependencies:
     specifier: ^0.2.8
     version: 0.2.8(less@4.2.0)
   vue:
-    specifier: ^3.4.25
-    version: 3.4.25(typescript@5.4.5)
+    specifier: ^3.4.26
+    version: 3.4.26(typescript@5.3.3)
   vue-github-button:
     specifier: github:0xJacky/vue-github-button
     version: github.com/0xJacky/vue-github-button/fc3c93355a790d3249de6610de3ebe35949ee314
   vue-router:
     specifier: ^4.3.2
-    version: 4.3.2(vue@3.4.25)
+    version: 4.3.2(vue@3.4.26)
   vue3-ace-editor:
     specifier: 2.2.4
-    version: 2.2.4(ace-builds@1.33.1)(vue@3.4.25)
+    version: 2.2.4(ace-builds@1.33.1)(vue@3.4.26)
   vue3-apexcharts:
     specifier: 1.4.4
-    version: 1.4.4(apexcharts@3.49.0)(vue@3.4.25)
+    version: 1.4.4(apexcharts@3.49.0)(vue@3.4.26)
   vue3-gettext:
     specifier: 3.0.0-beta.4
-    version: 3.0.0-beta.4(@vue/compiler-sfc@3.4.25)(typescript@5.4.5)(vue@3.4.25)
+    version: 3.0.0-beta.4(@vue/compiler-sfc@3.4.26)(typescript@5.3.3)(vue@3.4.26)
   vuedraggable:
     specifier: ^4.1.0
-    version: 4.1.0(vue@3.4.25)
-  xterm:
-    specifier: ^5.3.0
-    version: 5.3.0
+    version: 4.1.0(vue@3.4.26)
 
 devDependencies:
   '@antfu/eslint-config-vue':
     specifier: ^0.43.1
-    version: 0.43.1(@typescript-eslint/eslint-plugin@6.21.0)(@typescript-eslint/parser@6.21.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)(typescript@5.4.5)
+    version: 0.43.1(@typescript-eslint/eslint-plugin@6.21.0)(@typescript-eslint/parser@6.21.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)(typescript@5.3.3)
   '@types/lodash':
     specifier: ^4.17.0
     version: 4.17.0
@@ -105,19 +105,19 @@ devDependencies:
     version: 1.15.8
   '@typescript-eslint/eslint-plugin':
     specifier: ^6.21.0
-    version: 6.21.0(@typescript-eslint/parser@6.21.0)(eslint@8.57.0)(typescript@5.4.5)
+    version: 6.21.0(@typescript-eslint/parser@6.21.0)(eslint@8.57.0)(typescript@5.3.3)
   '@typescript-eslint/parser':
     specifier: ^6.21.0
-    version: 6.21.0(eslint@8.57.0)(typescript@5.4.5)
+    version: 6.21.0(eslint@8.57.0)(typescript@5.3.3)
   '@vitejs/plugin-vue':
     specifier: ^5.0.4
-    version: 5.0.4(vite@5.2.10)(vue@3.4.25)
+    version: 5.0.4(vite@5.2.10)(vue@3.4.26)
   '@vitejs/plugin-vue-jsx':
     specifier: ^3.1.0
-    version: 3.1.0(vite@5.2.10)(vue@3.4.25)
+    version: 3.1.0(vite@5.2.10)(vue@3.4.26)
   '@vue/compiler-sfc':
     specifier: ^3.4.25
-    version: 3.4.25
+    version: 3.4.26
   '@vue/tsconfig':
     specifier: ^0.5.1
     version: 0.5.1
@@ -158,26 +158,26 @@ devDependencies:
     specifier: ^3.4.3
     version: 3.4.3
   typescript:
-    specifier: ^5.4.5
-    version: 5.4.5
+    specifier: 5.3.3
+    version: 5.3.3
   unplugin-auto-import:
     specifier: ^0.17.5
     version: 0.17.5(@vueuse/core@10.9.0)
   unplugin-vue-components:
     specifier: ^0.26.0
-    version: 0.26.0(vue@3.4.25)
+    version: 0.26.0(vue@3.4.26)
   unplugin-vue-define-options:
     specifier: ^1.4.3
-    version: 1.4.3(vue@3.4.25)
+    version: 1.4.3(vue@3.4.26)
   vite:
     specifier: ^5.2.10
     version: 5.2.10(@types/node@20.12.7)(less@4.2.0)
   vite-svg-loader:
     specifier: ^5.1.0
-    version: 5.1.0(vue@3.4.25)
+    version: 5.1.0(vue@3.4.26)
   vue-tsc:
     specifier: ^1.8.27
-    version: 1.8.27(typescript@5.4.5)
+    version: 1.8.27(typescript@5.3.3)
 
 packages:
 
@@ -204,24 +204,24 @@ packages:
     resolution: {integrity: sha512-vHbT+zJEVzllwP+CM+ul7reTEfBR0vgxFe7+lREAsAA7YGsYpboiq2sQNeQeRvh09GfQgs/GyFEvZpJ9cLXpXA==}
     dev: false
 
-  /@ant-design/icons-vue@7.0.1(vue@3.4.25):
+  /@ant-design/icons-vue@7.0.1(vue@3.4.26):
     resolution: {integrity: sha512-eCqY2unfZK6Fe02AwFlDHLfoyEFreP6rBwAZMIJ1LugmfMiVgwWDYlp1YsRugaPtICYOabV1iWxXdP12u9U43Q==}
     peerDependencies:
       vue: '>=3.0.3'
     dependencies:
       '@ant-design/colors': 6.0.0
       '@ant-design/icons-svg': 4.4.2
-      vue: 3.4.25(typescript@5.4.5)
+      vue: 3.4.26(typescript@5.3.3)
     dev: false
 
-  /@antfu/eslint-config-basic@0.43.1(@typescript-eslint/eslint-plugin@6.21.0)(@typescript-eslint/parser@6.21.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)(typescript@5.4.5):
+  /@antfu/eslint-config-basic@0.43.1(@typescript-eslint/eslint-plugin@6.21.0)(@typescript-eslint/parser@6.21.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)(typescript@5.3.3):
     resolution: {integrity: sha512-SW6hmGmqI985fsCJ+oivo4MbiMmRMgCJ0Ne8j/hwCB6O6Mc0m5bDqYeKn5HqFhvZhG84GEg5jPDKNiHrBYnQjw==}
     peerDependencies:
       eslint: '>=7.4.0'
     dependencies:
       '@stylistic/eslint-plugin-js': 0.0.4
       eslint: 8.57.0
-      eslint-plugin-antfu: 0.43.1(eslint@8.57.0)(typescript@5.4.5)
+      eslint-plugin-antfu: 0.43.1(eslint@8.57.0)(typescript@5.3.3)
       eslint-plugin-eslint-comments: 3.2.0(eslint@8.57.0)
       eslint-plugin-html: 7.1.0
       eslint-plugin-import: /eslint-plugin-i@2.28.1(@typescript-eslint/parser@6.21.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)
@@ -245,19 +245,19 @@ packages:
       - typescript
     dev: true
 
-  /@antfu/eslint-config-ts@0.43.1(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)(typescript@5.4.5):
+  /@antfu/eslint-config-ts@0.43.1(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)(typescript@5.3.3):
     resolution: {integrity: sha512-s3zItBSopYbM/3eii/JKas1PmWR+wCPRNS89qUi4zxPvpuIgN5mahkBvbsCiWacrNFtLxe1zGgo5qijBhVfuvA==}
     peerDependencies:
       eslint: '>=7.4.0'
       typescript: '>=3.9'
     dependencies:
-      '@antfu/eslint-config-basic': 0.43.1(@typescript-eslint/eslint-plugin@6.21.0)(@typescript-eslint/parser@6.21.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)(typescript@5.4.5)
-      '@stylistic/eslint-plugin-ts': 0.0.4(eslint@8.57.0)(typescript@5.4.5)
-      '@typescript-eslint/eslint-plugin': 6.21.0(@typescript-eslint/parser@6.21.0)(eslint@8.57.0)(typescript@5.4.5)
-      '@typescript-eslint/parser': 6.21.0(eslint@8.57.0)(typescript@5.4.5)
+      '@antfu/eslint-config-basic': 0.43.1(@typescript-eslint/eslint-plugin@6.21.0)(@typescript-eslint/parser@6.21.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)(typescript@5.3.3)
+      '@stylistic/eslint-plugin-ts': 0.0.4(eslint@8.57.0)(typescript@5.3.3)
+      '@typescript-eslint/eslint-plugin': 6.21.0(@typescript-eslint/parser@6.21.0)(eslint@8.57.0)(typescript@5.3.3)
+      '@typescript-eslint/parser': 6.21.0(eslint@8.57.0)(typescript@5.3.3)
       eslint: 8.57.0
-      eslint-plugin-jest: 27.9.0(@typescript-eslint/eslint-plugin@6.21.0)(eslint@8.57.0)(typescript@5.4.5)
-      typescript: 5.4.5
+      eslint-plugin-jest: 27.9.0(@typescript-eslint/eslint-plugin@6.21.0)(eslint@8.57.0)(typescript@5.3.3)
+      typescript: 5.3.3
     transitivePeerDependencies:
       - eslint-import-resolver-typescript
       - eslint-import-resolver-webpack
@@ -265,13 +265,13 @@ packages:
       - supports-color
     dev: true
 
-  /@antfu/eslint-config-vue@0.43.1(@typescript-eslint/eslint-plugin@6.21.0)(@typescript-eslint/parser@6.21.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)(typescript@5.4.5):
+  /@antfu/eslint-config-vue@0.43.1(@typescript-eslint/eslint-plugin@6.21.0)(@typescript-eslint/parser@6.21.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)(typescript@5.3.3):
     resolution: {integrity: sha512-HxOfe8Vl+DPrzssbs5LHRDCnBtCy1LSA1DIeV71IC+iTpzoASFahSsVX5qckYu1InFgUm93XOhHCWm34LzPsvg==}
     peerDependencies:
       eslint: '>=7.4.0'
     dependencies:
-      '@antfu/eslint-config-basic': 0.43.1(@typescript-eslint/eslint-plugin@6.21.0)(@typescript-eslint/parser@6.21.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)(typescript@5.4.5)
-      '@antfu/eslint-config-ts': 0.43.1(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)(typescript@5.4.5)
+      '@antfu/eslint-config-basic': 0.43.1(@typescript-eslint/eslint-plugin@6.21.0)(@typescript-eslint/parser@6.21.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)(typescript@5.3.3)
+      '@antfu/eslint-config-ts': 0.43.1(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)(typescript@5.3.3)
       eslint: 8.57.0
       eslint-plugin-vue: 9.25.0(eslint@8.57.0)
       local-pkg: 0.4.3
@@ -933,113 +933,113 @@ packages:
       picomatch: 2.3.1
     dev: true
 
-  /@rollup/rollup-android-arm-eabi@4.17.0:
-    resolution: {integrity: sha512-nNvLvC2fjC+3+bHYN9uaGF3gcyy7RHGZhtl8TB/kINj9hiOQza8kWJGZh47GRPMrqeseO8U+Z8ElDMCZlWBdHA==}
+  /@rollup/rollup-android-arm-eabi@4.17.1:
+    resolution: {integrity: sha512-P6Wg856Ou/DLpR+O0ZLneNmrv7QpqBg+hK4wE05ijbC/t349BRfMfx+UFj5Ha3fCFopIa6iSZlpdaB4agkWp2Q==}
     cpu: [arm]
     os: [android]
     requiresBuild: true
     optional: true
 
-  /@rollup/rollup-android-arm64@4.17.0:
-    resolution: {integrity: sha512-+kjt6dvxnyTIAo7oHeYseYhDyZ7xRKTNl/FoQI96PHkJVxoChldJnne/LzYqpqidoK1/0kX0/q+5rrYqjpth6w==}
+  /@rollup/rollup-android-arm64@4.17.1:
+    resolution: {integrity: sha512-piwZDjuW2WiHr05djVdUkrG5JbjnGbtx8BXQchYCMfib/nhjzWoiScelZ+s5IJI7lecrwSxHCzW026MWBL+oJQ==}
     cpu: [arm64]
     os: [android]
     requiresBuild: true
     optional: true
 
-  /@rollup/rollup-darwin-arm64@4.17.0:
-    resolution: {integrity: sha512-Oj6Tp0unMpGTBjvNwbSRv3DopMNLu+mjBzhKTt2zLbDJ/45fB1pltr/rqrO4bE95LzuYwhYn127pop+x/pzf5w==}
+  /@rollup/rollup-darwin-arm64@4.17.1:
+    resolution: {integrity: sha512-LsZXXIsN5Q460cKDT4Y+bzoPDhBmO5DTr7wP80d+2EnYlxSgkwdPfE3hbE+Fk8dtya+8092N9srjBTJ0di8RIA==}
     cpu: [arm64]
     os: [darwin]
     requiresBuild: true
     optional: true
 
-  /@rollup/rollup-darwin-x64@4.17.0:
-    resolution: {integrity: sha512-3nJx0T+yptxMd+v93rBRxSPTAVCv8szu/fGZDJiKX7kvRe9sENj2ggXjCH/KK1xZEmJOhaNo0c9sGMgGdfkvEw==}
+  /@rollup/rollup-darwin-x64@4.17.1:
+    resolution: {integrity: sha512-S7TYNQpWXB9APkxu/SLmYHezWwCoZRA9QLgrDeml+SR2A1LLPD2DBUdUlvmCF7FUpRMKvbeeWky+iizQj65Etw==}
     cpu: [x64]
     os: [darwin]
     requiresBuild: true
     optional: true
 
-  /@rollup/rollup-linux-arm-gnueabihf@4.17.0:
-    resolution: {integrity: sha512-Vb2e8p9b2lxxgqyOlBHmp6hJMu/HSU6g//6Tbr7x5V1DlPCHWLOm37nSIVK314f+IHzORyAQSqL7+9tELxX3zQ==}
+  /@rollup/rollup-linux-arm-gnueabihf@4.17.1:
+    resolution: {integrity: sha512-Lq2JR5a5jsA5um2ZoLiXXEaOagnVyCpCW7xvlcqHC7y46tLwTEgUSTM3a2TfmmTMmdqv+jknUioWXlmxYxE9Yw==}
     cpu: [arm]
     os: [linux]
     requiresBuild: true
     optional: true
 
-  /@rollup/rollup-linux-arm-musleabihf@4.17.0:
-    resolution: {integrity: sha512-Md60KsmC5ZIaRq/bYYDloklgU+XLEZwS2EXXVcSpiUw+13/ZASvSWQ/P92rQ9YDCL6EIoXxuQ829JkReqdYbGg==}
+  /@rollup/rollup-linux-arm-musleabihf@4.17.1:
+    resolution: {integrity: sha512-9BfzwyPNV0IizQoR+5HTNBGkh1KXE8BqU0DBkqMngmyFW7BfuIZyMjQ0s6igJEiPSBvT3ZcnIFohZ19OqjhDPg==}
     cpu: [arm]
     os: [linux]
     requiresBuild: true
     optional: true
 
-  /@rollup/rollup-linux-arm64-gnu@4.17.0:
-    resolution: {integrity: sha512-zL5rBFtJ+2EGnMRm2TqKjdjgFqlotSU+ZJEN37nV+fiD3I6Gy0dUh3jBWN0wSlcXVDEJYW7YBe+/2j0N9unb2w==}
+  /@rollup/rollup-linux-arm64-gnu@4.17.1:
+    resolution: {integrity: sha512-e2uWaoxo/rtzA52OifrTSXTvJhAXb0XeRkz4CdHBK2KtxrFmuU/uNd544Ogkpu938BzEfvmWs8NZ8Axhw33FDw==}
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
     optional: true
 
-  /@rollup/rollup-linux-arm64-musl@4.17.0:
-    resolution: {integrity: sha512-s2xAyNkJqUdtRVgNK4NK4P9QttS538JuX/kfVQOdZDI5FIKVAUVdLW7qhGfmaySJ1EvN/Bnj9oPm5go9u8navg==}
+  /@rollup/rollup-linux-arm64-musl@4.17.1:
+    resolution: {integrity: sha512-ekggix/Bc/d/60H1Mi4YeYb/7dbal1kEDZ6sIFVAE8pUSx7PiWeEh+NWbL7bGu0X68BBIkgF3ibRJe1oFTksQQ==}
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
     optional: true
 
-  /@rollup/rollup-linux-powerpc64le-gnu@4.17.0:
-    resolution: {integrity: sha512-7F99yzVT67B7IUNMjLD9QCFDCyHkyCJMS1dywZrGgVFJao4VJ9szrIEgH67cR+bXQgEaY01ur/WSL6B0jtcLyA==}
+  /@rollup/rollup-linux-powerpc64le-gnu@4.17.1:
+    resolution: {integrity: sha512-UGV0dUo/xCv4pkr/C8KY7XLFwBNnvladt8q+VmdKrw/3RUd3rD0TptwjisvE2TTnnlENtuY4/PZuoOYRiGp8Gw==}
     cpu: [ppc64]
     os: [linux]
     requiresBuild: true
     optional: true
 
-  /@rollup/rollup-linux-riscv64-gnu@4.17.0:
-    resolution: {integrity: sha512-leFtyiXisfa3Sg9pgZJwRKITWnrQfhtqDjCamnZhkZuIsk1FXmYwKoTkp6lsCgimIcneFFkHKp/yGLxDesga4g==}
+  /@rollup/rollup-linux-riscv64-gnu@4.17.1:
+    resolution: {integrity: sha512-gEYmYYHaehdvX46mwXrU49vD6Euf1Bxhq9pPb82cbUU9UT2NV+RSckQ5tKWOnNXZixKsy8/cPGtiUWqzPuAcXQ==}
     cpu: [riscv64]
     os: [linux]
     requiresBuild: true
     optional: true
 
-  /@rollup/rollup-linux-s390x-gnu@4.17.0:
-    resolution: {integrity: sha512-FtOgui6qMJ4jbSXTxElsy/60LEe/3U0rXkkz2G5CJ9rbHPAvjMvI+3qF0A0fwLQ5hW+/ZC6PbnS2KfRW9JkgDQ==}
+  /@rollup/rollup-linux-s390x-gnu@4.17.1:
+    resolution: {integrity: sha512-xeae5pMAxHFp6yX5vajInG2toST5lsCTrckSRUFwNgzYqnUjNBcQyqk1bXUxX5yhjWFl2Mnz3F8vQjl+2FRIcw==}
     cpu: [s390x]
     os: [linux]
     requiresBuild: true
     optional: true
 
-  /@rollup/rollup-linux-x64-gnu@4.17.0:
-    resolution: {integrity: sha512-v6eiam/1w3HUfU/ZjzIDodencqgrSqzlNuNtiwH7PFJHYSo1ezL0/UIzmS2lpSJF1ORNaplXeKHYmmdt81vV2g==}
+  /@rollup/rollup-linux-x64-gnu@4.17.1:
+    resolution: {integrity: sha512-AsdnINQoDWfKpBzCPqQWxSPdAWzSgnYbrJYtn6W0H2E9It5bZss99PiLA8CgmDRfvKygt20UpZ3xkhFlIfX9zQ==}
     cpu: [x64]
     os: [linux]
     requiresBuild: true
     optional: true
 
-  /@rollup/rollup-linux-x64-musl@4.17.0:
-    resolution: {integrity: sha512-OUhkSdpM5ofVlVU2k4CwVubYwiwu1a4jYWPpubzN7Vzao73GoPBowHcCfaRSFRz1SszJ3HIsk3dZYk4kzbqjgw==}
+  /@rollup/rollup-linux-x64-musl@4.17.1:
+    resolution: {integrity: sha512-KoB4fyKXTR+wYENkIG3fFF+5G6N4GFvzYx8Jax8BR4vmddtuqSb5oQmYu2Uu067vT/Fod7gxeQYKupm8gAcMSQ==}
     cpu: [x64]
     os: [linux]
     requiresBuild: true
     optional: true
 
-  /@rollup/rollup-win32-arm64-msvc@4.17.0:
-    resolution: {integrity: sha512-uL7UYO/MNJPGL/yflybI+HI+n6+4vlfZmQZOCb4I+z/zy1wisHT3exh7oNQsnL6Eso0EUTEfgQ/PaGzzXf6XyQ==}
+  /@rollup/rollup-win32-arm64-msvc@4.17.1:
+    resolution: {integrity: sha512-J0d3NVNf7wBL9t4blCNat+d0PYqAx8wOoY+/9Q5cujnafbX7BmtYk3XvzkqLmFECaWvXGLuHmKj/wrILUinmQg==}
     cpu: [arm64]
     os: [win32]
     requiresBuild: true
     optional: true
 
-  /@rollup/rollup-win32-ia32-msvc@4.17.0:
-    resolution: {integrity: sha512-4WnSgaUiUmXILwFqREdOcqvSj6GD/7FrvSjhaDjmwakX9w4Z2F8JwiSP1AZZbuRkPqzi444UI5FPv33VKOWYFQ==}
+  /@rollup/rollup-win32-ia32-msvc@4.17.1:
+    resolution: {integrity: sha512-xjgkWUwlq7IbgJSIxvl516FJ2iuC/7ttjsAxSPpC9kkI5iQQFHKyEN5BjbhvJ/IXIZ3yIBcW5QDlWAyrA+TFag==}
     cpu: [ia32]
     os: [win32]
     requiresBuild: true
     optional: true
 
-  /@rollup/rollup-win32-x64-msvc@4.17.0:
-    resolution: {integrity: sha512-ve+D8t1prRSRnF2S3pyDtTXDlvW1Pngbz76tjgYFQW1jxVSysmQCZfPoDAo4WP+Ano8zeYp85LsArZBI12HfwQ==}
+  /@rollup/rollup-win32-x64-msvc@4.17.1:
+    resolution: {integrity: sha512-0QbCkfk6cnnVKWqqlC0cUrrUMDMfu5ffvYMTUHf+qMN2uAb3MKP31LPcwiMXBNsvoFGs/kYdFOsuLmvppCopXA==}
     cpu: [x64]
     os: [win32]
     requiresBuild: true
@@ -1063,7 +1063,7 @@ packages:
       graphemer: 1.4.0
     dev: true
 
-  /@stylistic/eslint-plugin-ts@0.0.4(eslint@8.57.0)(typescript@5.4.5):
+  /@stylistic/eslint-plugin-ts@0.0.4(eslint@8.57.0)(typescript@5.3.3):
     resolution: {integrity: sha512-sWL4Km5j8S+TLyzya/3adxMWGkCm3lVasJIVQqhxVfwnlGkpMI0GgYVIu/ubdKPS+dSvqjUHpsXgqWfMRF2+cQ==}
     peerDependencies:
       eslint: '*'
@@ -1071,11 +1071,11 @@ packages:
     dependencies:
       '@stylistic/eslint-plugin-js': 0.0.4
       '@typescript-eslint/scope-manager': 6.21.0
-      '@typescript-eslint/type-utils': 6.21.0(eslint@8.57.0)(typescript@5.4.5)
-      '@typescript-eslint/utils': 6.21.0(eslint@8.57.0)(typescript@5.4.5)
+      '@typescript-eslint/type-utils': 6.21.0(eslint@8.57.0)(typescript@5.3.3)
+      '@typescript-eslint/utils': 6.21.0(eslint@8.57.0)(typescript@5.3.3)
       eslint: 8.57.0
       graphemer: 1.4.0
-      typescript: 5.4.5
+      typescript: 5.3.3
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -1149,7 +1149,7 @@ packages:
   /@types/web-bluetooth@0.0.20:
     resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==}
 
-  /@typescript-eslint/eslint-plugin@6.21.0(@typescript-eslint/parser@6.21.0)(eslint@8.57.0)(typescript@5.4.5):
+  /@typescript-eslint/eslint-plugin@6.21.0(@typescript-eslint/parser@6.21.0)(eslint@8.57.0)(typescript@5.3.3):
     resolution: {integrity: sha512-oy9+hTPCUFpngkEZUSzbf9MxI65wbKFoQYsgPdILTfbUldp5ovUuphZVe4i30emU9M/kP+T64Di0mxl7dSw3MA==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
@@ -1161,10 +1161,10 @@ packages:
         optional: true
     dependencies:
       '@eslint-community/regexpp': 4.10.0
-      '@typescript-eslint/parser': 6.21.0(eslint@8.57.0)(typescript@5.4.5)
+      '@typescript-eslint/parser': 6.21.0(eslint@8.57.0)(typescript@5.3.3)
       '@typescript-eslint/scope-manager': 6.21.0
-      '@typescript-eslint/type-utils': 6.21.0(eslint@8.57.0)(typescript@5.4.5)
-      '@typescript-eslint/utils': 6.21.0(eslint@8.57.0)(typescript@5.4.5)
+      '@typescript-eslint/type-utils': 6.21.0(eslint@8.57.0)(typescript@5.3.3)
+      '@typescript-eslint/utils': 6.21.0(eslint@8.57.0)(typescript@5.3.3)
       '@typescript-eslint/visitor-keys': 6.21.0
       debug: 4.3.4
       eslint: 8.57.0
@@ -1172,13 +1172,13 @@ packages:
       ignore: 5.3.1
       natural-compare: 1.4.0
       semver: 7.6.0
-      ts-api-utils: 1.3.0(typescript@5.4.5)
-      typescript: 5.4.5
+      ts-api-utils: 1.3.0(typescript@5.3.3)
+      typescript: 5.3.3
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5):
+  /@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.3.3):
     resolution: {integrity: sha512-tbsV1jPne5CkFQCgPBcDOt30ItF7aJoZL997JSF7MhGQqOeT3svWRYxiqlfA5RUdlHN6Fi+EI9bxqbdyAUZjYQ==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
@@ -1190,11 +1190,11 @@ packages:
     dependencies:
       '@typescript-eslint/scope-manager': 6.21.0
       '@typescript-eslint/types': 6.21.0
-      '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.4.5)
+      '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.3.3)
       '@typescript-eslint/visitor-keys': 6.21.0
       debug: 4.3.4
       eslint: 8.57.0
-      typescript: 5.4.5
+      typescript: 5.3.3
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -1215,7 +1215,7 @@ packages:
       '@typescript-eslint/visitor-keys': 6.21.0
     dev: true
 
-  /@typescript-eslint/type-utils@6.21.0(eslint@8.57.0)(typescript@5.4.5):
+  /@typescript-eslint/type-utils@6.21.0(eslint@8.57.0)(typescript@5.3.3):
     resolution: {integrity: sha512-rZQI7wHfao8qMX3Rd3xqeYSMCL3SoiSQLBATSiVKARdFGCYSRvmViieZjqc58jKgs8Y8i9YvVVhRbHSTA4VBag==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
@@ -1225,12 +1225,12 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.4.5)
-      '@typescript-eslint/utils': 6.21.0(eslint@8.57.0)(typescript@5.4.5)
+      '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.3.3)
+      '@typescript-eslint/utils': 6.21.0(eslint@8.57.0)(typescript@5.3.3)
       debug: 4.3.4
       eslint: 8.57.0
-      ts-api-utils: 1.3.0(typescript@5.4.5)
-      typescript: 5.4.5
+      ts-api-utils: 1.3.0(typescript@5.3.3)
+      typescript: 5.3.3
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -1245,7 +1245,7 @@ packages:
     engines: {node: ^16.0.0 || >=18.0.0}
     dev: true
 
-  /@typescript-eslint/typescript-estree@5.62.0(typescript@5.4.5):
+  /@typescript-eslint/typescript-estree@5.62.0(typescript@5.3.3):
     resolution: {integrity: sha512-CmcQ6uY7b9y694lKdRB8FEel7JbU/40iSAPomu++SjLMntB+2Leay2LO6i8VnJk58MtE9/nQSFIH6jpyRWyYzA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -1260,13 +1260,13 @@ packages:
       globby: 11.1.0
       is-glob: 4.0.3
       semver: 7.6.0
-      tsutils: 3.21.0(typescript@5.4.5)
-      typescript: 5.4.5
+      tsutils: 3.21.0(typescript@5.3.3)
+      typescript: 5.3.3
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/typescript-estree@6.21.0(typescript@5.4.5):
+  /@typescript-eslint/typescript-estree@6.21.0(typescript@5.3.3):
     resolution: {integrity: sha512-6npJTkZcO+y2/kr+z0hc4HwNfrrP4kNYh57ek7yCNlrBjWQ1Y0OS7jiZTkgumrvkX5HkEKXFZkkdFNkaW2wmUQ==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
@@ -1282,13 +1282,13 @@ packages:
       is-glob: 4.0.3
       minimatch: 9.0.3
       semver: 7.6.0
-      ts-api-utils: 1.3.0(typescript@5.4.5)
-      typescript: 5.4.5
+      ts-api-utils: 1.3.0(typescript@5.3.3)
+      typescript: 5.3.3
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/utils@5.62.0(eslint@8.57.0)(typescript@5.4.5):
+  /@typescript-eslint/utils@5.62.0(eslint@8.57.0)(typescript@5.3.3):
     resolution: {integrity: sha512-n8oxjeb5aIbPFEtmQxQYOLI0i9n5ySBEY/ZEHHZqKQSFnxio1rv6dthascc9dLuwrL0RC5mPCxB7vnAVGAYWAQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -1299,7 +1299,7 @@ packages:
       '@types/semver': 7.5.8
       '@typescript-eslint/scope-manager': 5.62.0
       '@typescript-eslint/types': 5.62.0
-      '@typescript-eslint/typescript-estree': 5.62.0(typescript@5.4.5)
+      '@typescript-eslint/typescript-estree': 5.62.0(typescript@5.3.3)
       eslint: 8.57.0
       eslint-scope: 5.1.1
       semver: 7.6.0
@@ -1308,7 +1308,7 @@ packages:
       - typescript
     dev: true
 
-  /@typescript-eslint/utils@6.21.0(eslint@8.57.0)(typescript@5.4.5):
+  /@typescript-eslint/utils@6.21.0(eslint@8.57.0)(typescript@5.3.3):
     resolution: {integrity: sha512-NfWVaC8HP9T8cbKQxHcsJBY5YE1O33+jpMwN45qzWWaPDZgLIbo12toGMWnmhvCpd3sIxkpDw3Wv1B3dYrbDQQ==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
@@ -1319,7 +1319,7 @@ packages:
       '@types/semver': 7.5.8
       '@typescript-eslint/scope-manager': 6.21.0
       '@typescript-eslint/types': 6.21.0
-      '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.4.5)
+      '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.3.3)
       eslint: 8.57.0
       semver: 7.6.0
     transitivePeerDependencies:
@@ -1347,7 +1347,7 @@ packages:
     resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
     dev: true
 
-  /@vitejs/plugin-vue-jsx@3.1.0(vite@5.2.10)(vue@3.4.25):
+  /@vitejs/plugin-vue-jsx@3.1.0(vite@5.2.10)(vue@3.4.26):
     resolution: {integrity: sha512-w9M6F3LSEU5kszVb9An2/MmXNxocAnUb3WhRr8bHlimhDrXNt6n6D2nJQR3UXpGlZHh/EsgouOHCsM8V3Ln+WA==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
@@ -1358,12 +1358,12 @@ packages:
       '@babel/plugin-transform-typescript': 7.24.4(@babel/core@7.24.4)
       '@vue/babel-plugin-jsx': 1.2.2(@babel/core@7.24.4)
       vite: 5.2.10(@types/node@20.12.7)(less@4.2.0)
-      vue: 3.4.25(typescript@5.4.5)
+      vue: 3.4.26(typescript@5.3.3)
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@vitejs/plugin-vue@5.0.4(vite@5.2.10)(vue@3.4.25):
+  /@vitejs/plugin-vue@5.0.4(vite@5.2.10)(vue@3.4.26):
     resolution: {integrity: sha512-WS3hevEszI6CEVEx28F8RjTX97k3KsrcY6kvTg7+Whm5y3oYvcqzVeGCU3hxSAn4uY2CLCkeokkGKpoctccilQ==}
     engines: {node: ^18.0.0 || >=20.0.0}
     peerDependencies:
@@ -1371,7 +1371,7 @@ packages:
       vue: ^3.2.25
     dependencies:
       vite: 5.2.10(@types/node@20.12.7)(less@4.2.0)
-      vue: 3.4.25(typescript@5.4.5)
+      vue: 3.4.26(typescript@5.3.3)
     dev: true
 
   /@volar/language-core@1.11.1:
@@ -1393,7 +1393,7 @@ packages:
       path-browserify: 1.0.1
     dev: true
 
-  /@vue-macros/common@1.10.2(vue@3.4.25):
+  /@vue-macros/common@1.10.2(vue@3.4.26):
     resolution: {integrity: sha512-WC66NPVh2mJWqm4L0l/u/cOqm4pNOIwVdMGnDYAH2rHcOWy5x68GkhpkYTBu1+xwCSeHWOQn1TCGGbD+98fFpA==}
     engines: {node: '>=16.14.0'}
     peerDependencies:
@@ -1404,11 +1404,11 @@ packages:
     dependencies:
       '@babel/types': 7.24.0
       '@rollup/pluginutils': 5.1.0
-      '@vue/compiler-sfc': 3.4.25
+      '@vue/compiler-sfc': 3.4.26
       ast-kit: 0.12.1
       local-pkg: 0.5.0
       magic-string-ast: 0.3.0
-      vue: 3.4.25(typescript@5.4.5)
+      vue: 3.4.26(typescript@5.3.3)
     transitivePeerDependencies:
       - rollup
     dev: true
@@ -1451,48 +1451,48 @@ packages:
       '@babel/helper-module-imports': 7.22.15
       '@babel/helper-plugin-utils': 7.24.0
       '@babel/parser': 7.24.4
-      '@vue/compiler-sfc': 3.4.25
+      '@vue/compiler-sfc': 3.4.26
     dev: true
 
-  /@vue/compiler-core@3.4.25:
-    resolution: {integrity: sha512-Y2pLLopaElgWnMNolgG8w3C5nNUVev80L7hdQ5iIKPtMJvhVpG0zhnBG/g3UajJmZdvW0fktyZTotEHD1Srhbg==}
+  /@vue/compiler-core@3.4.26:
+    resolution: {integrity: sha512-N9Vil6Hvw7NaiyFUFBPXrAyETIGlQ8KcFMkyk6hW1Cl6NvoqvP+Y8p1Eqvx+UdqsnrnI9+HMUEJegzia3mhXmQ==}
     dependencies:
       '@babel/parser': 7.24.4
-      '@vue/shared': 3.4.25
+      '@vue/shared': 3.4.26
       entities: 4.5.0
       estree-walker: 2.0.2
       source-map-js: 1.2.0
 
-  /@vue/compiler-dom@3.4.25:
-    resolution: {integrity: sha512-Ugz5DusW57+HjllAugLci19NsDK+VyjGvmbB2TXaTcSlQxwL++2PETHx/+Qv6qFwNLzSt7HKepPe4DcTE3pBWg==}
+  /@vue/compiler-dom@3.4.26:
+    resolution: {integrity: sha512-4CWbR5vR9fMg23YqFOhr6t6WB1Fjt62d6xdFPyj8pxrYub7d+OgZaObMsoxaF9yBUHPMiPFK303v61PwAuGvZA==}
     dependencies:
-      '@vue/compiler-core': 3.4.25
-      '@vue/shared': 3.4.25
+      '@vue/compiler-core': 3.4.26
+      '@vue/shared': 3.4.26
 
-  /@vue/compiler-sfc@3.4.25:
-    resolution: {integrity: sha512-m7rryuqzIoQpOBZ18wKyq05IwL6qEpZxFZfRxlNYuIPDqywrXQxgUwLXIvoU72gs6cRdY6wHD0WVZIFE4OEaAQ==}
+  /@vue/compiler-sfc@3.4.26:
+    resolution: {integrity: sha512-It1dp+FAOCgluYSVYlDn5DtZBxk1NCiJJfu2mlQqa/b+k8GL6NG/3/zRbJnHdhV2VhxFghaDq5L4K+1dakW6cw==}
     dependencies:
       '@babel/parser': 7.24.4
-      '@vue/compiler-core': 3.4.25
-      '@vue/compiler-dom': 3.4.25
-      '@vue/compiler-ssr': 3.4.25
-      '@vue/shared': 3.4.25
+      '@vue/compiler-core': 3.4.26
+      '@vue/compiler-dom': 3.4.26
+      '@vue/compiler-ssr': 3.4.26
+      '@vue/shared': 3.4.26
       estree-walker: 2.0.2
       magic-string: 0.30.10
       postcss: 8.4.38
       source-map-js: 1.2.0
 
-  /@vue/compiler-ssr@3.4.25:
-    resolution: {integrity: sha512-H2ohvM/Pf6LelGxDBnfbbXFPyM4NE3hrw0e/EpwuSiYu8c819wx+SVGdJ65p/sFrYDd6OnSDxN1MB2mN07hRSQ==}
+  /@vue/compiler-ssr@3.4.26:
+    resolution: {integrity: sha512-FNwLfk7LlEPRY/g+nw2VqiDKcnDTVdCfBREekF8X74cPLiWHUX6oldktf/Vx28yh4STNy7t+/yuLoMBBF7YDiQ==}
     dependencies:
-      '@vue/compiler-dom': 3.4.25
-      '@vue/shared': 3.4.25
+      '@vue/compiler-dom': 3.4.26
+      '@vue/shared': 3.4.26
 
   /@vue/devtools-api@6.6.1:
     resolution: {integrity: sha512-LgPscpE3Vs0x96PzSSB4IGVSZXZBZHpfxs+ZA1d+VEPwHdOXowy/Y2CsvCAIFrf+ssVU1pD1jidj505EpUnfbA==}
     dev: false
 
-  /@vue/language-core@1.8.27(typescript@5.4.5):
+  /@vue/language-core@1.8.27(typescript@5.3.3):
     resolution: {integrity: sha512-L8Kc27VdQserNaCUNiSFdDl9LWT24ly8Hpwf1ECy3aFb9m6bDhBGQYOujDm21N7EW3moKIOKEanQwe1q5BK+mA==}
     peerDependencies:
       typescript: '*'
@@ -1502,57 +1502,57 @@ packages:
     dependencies:
       '@volar/language-core': 1.11.1
       '@volar/source-map': 1.11.1
-      '@vue/compiler-dom': 3.4.25
-      '@vue/shared': 3.4.25
+      '@vue/compiler-dom': 3.4.26
+      '@vue/shared': 3.4.26
       computeds: 0.0.1
       minimatch: 9.0.4
       muggle-string: 0.3.1
       path-browserify: 1.0.1
-      typescript: 5.4.5
+      typescript: 5.3.3
       vue-template-compiler: 2.7.16
     dev: true
 
-  /@vue/reactivity@3.4.25:
-    resolution: {integrity: sha512-mKbEtKr1iTxZkAG3vm3BtKHAOhuI4zzsVcN0epDldU/THsrvfXRKzq+lZnjczZGnTdh3ojd86/WrP+u9M51pWQ==}
+  /@vue/reactivity@3.4.26:
+    resolution: {integrity: sha512-E/ynEAu/pw0yotJeLdvZEsp5Olmxt+9/WqzvKff0gE67tw73gmbx6tRkiagE/eH0UCubzSlGRebCbidB1CpqZQ==}
     dependencies:
-      '@vue/shared': 3.4.25
+      '@vue/shared': 3.4.26
 
-  /@vue/runtime-core@3.4.25:
-    resolution: {integrity: sha512-3qhsTqbEh8BMH3pXf009epCI5E7bKu28fJLi9O6W+ZGt/6xgSfMuGPqa5HRbUxLoehTNp5uWvzCr60KuiRIL0Q==}
+  /@vue/runtime-core@3.4.26:
+    resolution: {integrity: sha512-AFJDLpZvhT4ujUgZSIL9pdNcO23qVFh7zWCsNdGQBw8ecLNxOOnPcK9wTTIYCmBJnuPHpukOwo62a2PPivihqw==}
     dependencies:
-      '@vue/reactivity': 3.4.25
-      '@vue/shared': 3.4.25
+      '@vue/reactivity': 3.4.26
+      '@vue/shared': 3.4.26
 
-  /@vue/runtime-dom@3.4.25:
-    resolution: {integrity: sha512-ode0sj77kuwXwSc+2Yhk8JMHZh1sZp9F/51wdBiz3KGaWltbKtdihlJFhQG4H6AY+A06zzeMLkq6qu8uDSsaoA==}
+  /@vue/runtime-dom@3.4.26:
+    resolution: {integrity: sha512-UftYA2hUXR2UOZD/Fc3IndZuCOOJgFxJsWOxDkhfVcwLbsfh2CdXE2tG4jWxBZuDAs9J9PzRTUFt1PgydEtItw==}
     dependencies:
-      '@vue/runtime-core': 3.4.25
-      '@vue/shared': 3.4.25
+      '@vue/runtime-core': 3.4.26
+      '@vue/shared': 3.4.26
       csstype: 3.1.3
 
-  /@vue/server-renderer@3.4.25(vue@3.4.25):
-    resolution: {integrity: sha512-8VTwq0Zcu3K4dWV0jOwIVINESE/gha3ifYCOKEhxOj6MEl5K5y8J8clQncTcDhKF+9U765nRw4UdUEXvrGhyVQ==}
+  /@vue/server-renderer@3.4.26(vue@3.4.26):
+    resolution: {integrity: sha512-xoGAqSjYDPGAeRWxeoYwqJFD/gw7mpgzOvSxEmjWaFO2rE6qpbD1PC172YRpvKhrihkyHJkNDADFXTfCyVGhKw==}
     peerDependencies:
-      vue: 3.4.25
+      vue: 3.4.26
     dependencies:
-      '@vue/compiler-ssr': 3.4.25
-      '@vue/shared': 3.4.25
-      vue: 3.4.25(typescript@5.4.5)
+      '@vue/compiler-ssr': 3.4.26
+      '@vue/shared': 3.4.26
+      vue: 3.4.26(typescript@5.3.3)
 
-  /@vue/shared@3.4.25:
-    resolution: {integrity: sha512-k0yappJ77g2+KNrIaF0FFnzwLvUBLUYr8VOwz+/6vLsmItFp51AcxLL7Ey3iPd7BIRyWPOcqUjMnm7OkahXllA==}
+  /@vue/shared@3.4.26:
+    resolution: {integrity: sha512-Fg4zwR0GNnjzodMt3KRy2AWGMKQXByl56+4HjN87soxLNU9P5xcJkstAlIeEF3cU6UYOzmJl1tV0dVPGIljCnQ==}
 
   /@vue/tsconfig@0.5.1:
     resolution: {integrity: sha512-VcZK7MvpjuTPx2w6blwnwZAu5/LgBUtejFOi3pPGQFXQN5Ela03FUtd2Qtg4yWGGissVL0dr6Ro1LfOFh+PCuQ==}
     dev: true
 
-  /@vueuse/core@10.9.0(vue@3.4.25):
+  /@vueuse/core@10.9.0(vue@3.4.26):
     resolution: {integrity: sha512-/1vjTol8SXnx6xewDEKfS0Ra//ncg4Hb0DaZiwKf7drgfMsKFExQ+FnnENcN6efPen+1kIzhLQoGSy0eDUVOMg==}
     dependencies:
       '@types/web-bluetooth': 0.0.20
       '@vueuse/metadata': 10.9.0
-      '@vueuse/shared': 10.9.0(vue@3.4.25)
-      vue-demi: 0.14.7(vue@3.4.25)
+      '@vueuse/shared': 10.9.0(vue@3.4.26)
+      vue-demi: 0.14.7(vue@3.4.26)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -1560,10 +1560,10 @@ packages:
   /@vueuse/metadata@10.9.0:
     resolution: {integrity: sha512-iddNbg3yZM0X7qFY2sAotomgdHK7YJ6sKUvQqbvwnf7TmaVPxS4EJydcNsVejNdS8iWCtDk+fYXr7E32nyTnGA==}
 
-  /@vueuse/shared@10.9.0(vue@3.4.25):
+  /@vueuse/shared@10.9.0(vue@3.4.26):
     resolution: {integrity: sha512-Uud2IWncmAfJvRaFYzv5OHDli+FbOzxiVEQdLCKQKLyhz94PIyFC3CHcH7EDMwIn8NPtD06+PNbC/PiO0LGLtw==}
     dependencies:
-      vue-demi: 0.14.7(vue@3.4.25)
+      vue-demi: 0.14.7(vue@3.4.26)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -1642,14 +1642,14 @@ packages:
     resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==}
     engines: {node: '>=12'}
 
-  /ant-design-vue@4.2.1(vue@3.4.25):
+  /ant-design-vue@4.2.1(vue@3.4.26):
     resolution: {integrity: sha512-3u6fmfCEJ5AFTsYhogP8lJ/vcqiAJO16o+gGQkWYRGLl0NxmY4hje4cPyv+pcxpeJgcG0vNEmkb1vVHKcnxd+g==}
     engines: {node: '>=12.22.0'}
     peerDependencies:
       vue: '>=3.2.0'
     dependencies:
       '@ant-design/colors': 6.0.0
-      '@ant-design/icons-vue': 7.0.1(vue@3.4.25)
+      '@ant-design/icons-vue': 7.0.1(vue@3.4.26)
       '@babel/runtime': 7.24.4
       '@ctrl/tinycolor': 3.6.1
       '@emotion/hash': 0.9.1
@@ -1658,7 +1658,7 @@ packages:
       array-tree-filter: 2.1.0
       async-validator: 4.2.5
       csstype: 3.1.3
-      dayjs: 1.11.10
+      dayjs: 1.11.11
       dom-align: 1.12.4
       dom-scroll-into-view: 2.0.1
       lodash: 4.17.21
@@ -1668,8 +1668,8 @@ packages:
       shallow-equal: 1.2.1
       stylis: 4.3.2
       throttle-debounce: 5.0.0
-      vue: 3.4.25(typescript@5.4.5)
-      vue-types: 3.0.2(vue@3.4.25)
+      vue: 3.4.26(typescript@5.3.3)
+      vue-types: 3.0.2(vue@3.4.26)
       warning: 4.0.3
     dev: false
 
@@ -1821,7 +1821,7 @@ packages:
       postcss: ^8.1.0
     dependencies:
       browserslist: 4.23.0
-      caniuse-lite: 1.0.30001612
+      caniuse-lite: 1.0.30001614
       fraction.js: 4.3.7
       normalize-range: 0.1.2
       picocolors: 1.0.0
@@ -1881,7 +1881,7 @@ packages:
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
     dependencies:
-      caniuse-lite: 1.0.30001612
+      caniuse-lite: 1.0.30001614
       electron-to-chromium: 1.4.750
       node-releases: 2.0.14
       update-browserslist-db: 1.0.13(browserslist@4.23.0)
@@ -1923,8 +1923,8 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
-  /caniuse-lite@1.0.30001612:
-    resolution: {integrity: sha512-lFgnZ07UhaCcsSZgWW0K5j4e69dK1u/ltrL9lTUiFOwNHs12S3UMIEYgBV0Z6C6hRDev7iRnMzzYmKabYdXF9g==}
+  /caniuse-lite@1.0.30001614:
+    resolution: {integrity: sha512-jmZQ1VpmlRwHgdP1/uiKzgiAuGOfLEJsYFP4+GBou/QQ4U6IOJCB4NP1c+1p9RGLpwObcT94jA5/uO+F1vBbog==}
     dev: true
 
   /chalk@2.4.2:
@@ -2059,7 +2059,7 @@ packages:
     requiresBuild: true
     dev: false
 
-  /cosmiconfig@9.0.0(typescript@5.4.5):
+  /cosmiconfig@9.0.0(typescript@5.3.3):
     resolution: {integrity: sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==}
     engines: {node: '>=14'}
     peerDependencies:
@@ -2072,7 +2072,7 @@ packages:
       import-fresh: 3.3.0
       js-yaml: 4.1.0
       parse-json: 5.2.0
-      typescript: 5.4.5
+      typescript: 5.3.3
     dev: false
 
   /cross-spawn@7.0.3:
@@ -2161,8 +2161,8 @@ packages:
       is-data-view: 1.0.1
     dev: true
 
-  /dayjs@1.11.10:
-    resolution: {integrity: sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==}
+  /dayjs@1.11.11:
+    resolution: {integrity: sha512-okzr3f11N6WuqYtZSvm+F776mB41wRZMhKP+hc34YdW+KmtYYK9iqvHSwo2k9FEH3fhGXvOPV6yz2IcSrfRUDg==}
     dev: false
 
   /de-indent@1.0.2:
@@ -2543,7 +2543,7 @@ packages:
       eslint-import-resolver-webpack:
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 6.21.0(eslint@8.57.0)(typescript@5.4.5)
+      '@typescript-eslint/parser': 6.21.0(eslint@8.57.0)(typescript@5.3.3)
       debug: 3.2.7
       eslint: 8.57.0
       eslint-import-resolver-node: 0.3.9
@@ -2552,10 +2552,10 @@ packages:
       - supports-color
     dev: true
 
-  /eslint-plugin-antfu@0.43.1(eslint@8.57.0)(typescript@5.4.5):
+  /eslint-plugin-antfu@0.43.1(eslint@8.57.0)(typescript@5.3.3):
     resolution: {integrity: sha512-Nak+Qpy5qEK10dCXtVaabPTUmLBPLhsVKAFXAtxYGYRlY/SuuZUBhW2YIsLsixNROiICGuov8sN+eNOCC7Wb5g==}
     dependencies:
-      '@typescript-eslint/utils': 6.21.0(eslint@8.57.0)(typescript@5.4.5)
+      '@typescript-eslint/utils': 6.21.0(eslint@8.57.0)(typescript@5.3.3)
     transitivePeerDependencies:
       - eslint
       - supports-color
@@ -2624,7 +2624,7 @@ packages:
       '@typescript-eslint/parser':
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 6.21.0(eslint@8.57.0)(typescript@5.4.5)
+      '@typescript-eslint/parser': 6.21.0(eslint@8.57.0)(typescript@5.3.3)
       array-includes: 3.1.8
       array.prototype.findlastindex: 1.2.5
       array.prototype.flat: 1.3.2
@@ -2649,7 +2649,7 @@ packages:
       - supports-color
     dev: true
 
-  /eslint-plugin-jest@27.9.0(@typescript-eslint/eslint-plugin@6.21.0)(eslint@8.57.0)(typescript@5.4.5):
+  /eslint-plugin-jest@27.9.0(@typescript-eslint/eslint-plugin@6.21.0)(eslint@8.57.0)(typescript@5.3.3):
     resolution: {integrity: sha512-QIT7FH7fNmd9n4se7FFKHbsLKGQiw885Ds6Y/sxKgCZ6natwCsXdgPOADnYVxN2QrRweF0FZWbJ6S7Rsn7llug==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     peerDependencies:
@@ -2662,8 +2662,8 @@ packages:
       jest:
         optional: true
     dependencies:
-      '@typescript-eslint/eslint-plugin': 6.21.0(@typescript-eslint/parser@6.21.0)(eslint@8.57.0)(typescript@5.4.5)
-      '@typescript-eslint/utils': 5.62.0(eslint@8.57.0)(typescript@5.4.5)
+      '@typescript-eslint/eslint-plugin': 6.21.0(@typescript-eslint/parser@6.21.0)(eslint@8.57.0)(typescript@5.3.3)
+      '@typescript-eslint/utils': 5.62.0(eslint@8.57.0)(typescript@5.3.3)
       eslint: 8.57.0
     transitivePeerDependencies:
       - supports-color
@@ -2804,7 +2804,7 @@ packages:
       '@typescript-eslint/eslint-plugin':
         optional: true
     dependencies:
-      '@typescript-eslint/eslint-plugin': 6.21.0(@typescript-eslint/parser@6.21.0)(eslint@8.57.0)(typescript@5.4.5)
+      '@typescript-eslint/eslint-plugin': 6.21.0(@typescript-eslint/parser@6.21.0)(eslint@8.57.0)(typescript@5.3.3)
       eslint: 8.57.0
       eslint-rule-composer: 0.3.0
     dev: true
@@ -3148,7 +3148,7 @@ packages:
       glob: 7.2.3
       parse5: 6.0.1
       pofile: 1.0.11
-      typescript: 5.4.5
+      typescript: 5.3.3
     dev: false
 
   /github-buttons@2.28.0:
@@ -3712,8 +3712,8 @@ packages:
       js-tokens: 4.0.0
     dev: false
 
-  /lru-cache@10.2.1:
-    resolution: {integrity: sha512-tS24spDe/zXhWbNPErCHs/AGOzbKGHT+ybSBqmdLm8WZ1xXLWvH8Qn71QPAlqVhd0qUTWjy+Kl9JmISgDdEjsA==}
+  /lru-cache@10.2.2:
+    resolution: {integrity: sha512-9hp3Vp2/hFQUiIwKo8XCeFVnrg8Pk3TYNPIR7tJADKi5YfcF7vEaK7avFHTlSy3kOKYaJQaalfEo6YuXdceBOQ==}
     engines: {node: 14 || >=16.14}
 
   /lru-cache@5.1.1:
@@ -4109,7 +4109,7 @@ packages:
     resolution: {integrity: sha512-7xTavNy5RQXnsjANvVvMkEjvloOinkAjv/Z6Ildz9v2RinZ4SBKTWFOVRbaF8p0vpHnyjV/UwNDdKuUv6M5qcA==}
     engines: {node: '>=16 || 14 >=14.17'}
     dependencies:
-      lru-cache: 10.2.1
+      lru-cache: 10.2.2
       minipass: 7.0.4
 
   /path-type@4.0.0:
@@ -4145,10 +4145,10 @@ packages:
     peerDependencies:
       pinia: ^2.0.0
     dependencies:
-      pinia: 2.1.7(typescript@5.4.5)(vue@3.4.25)
+      pinia: 2.1.7(typescript@5.3.3)(vue@3.4.26)
     dev: false
 
-  /pinia@2.1.7(typescript@5.4.5)(vue@3.4.25):
+  /pinia@2.1.7(typescript@5.3.3)(vue@3.4.26):
     resolution: {integrity: sha512-+C2AHFtcFqjPih0zpYuvof37SFxMQ7OEG2zV9jRI12i9BOy3YQVAHwdKtyyc8pDcDyIc33WCIsZaCFWU7WWxGQ==}
     peerDependencies:
       '@vue/composition-api': ^1.4.0
@@ -4161,9 +4161,9 @@ packages:
         optional: true
     dependencies:
       '@vue/devtools-api': 6.6.1
-      typescript: 5.4.5
-      vue: 3.4.25(typescript@5.4.5)
-      vue-demi: 0.14.7(vue@3.4.25)
+      typescript: 5.3.3
+      vue: 3.4.26(typescript@5.3.3)
+      vue-demi: 0.14.7(vue@3.4.26)
     dev: false
 
   /pirates@4.0.6:
@@ -4233,7 +4233,7 @@ packages:
     dependencies:
       lilconfig: 3.1.1
       postcss: 8.4.38
-      yaml: 2.4.1
+      yaml: 2.4.2
     dev: true
 
   /postcss-nested@6.0.1(postcss@8.4.38):
@@ -4392,29 +4392,29 @@ packages:
       glob: 10.3.12
     dev: false
 
-  /rollup@4.17.0:
-    resolution: {integrity: sha512-wZJSn0WMtWrxhYKQRt5Z6GIXlziOoMDFmbHmRfL3v+sBTAshx2DBq1AfMArB7eIjF63r4ocn2ZTAyUptg/7kmQ==}
+  /rollup@4.17.1:
+    resolution: {integrity: sha512-0gG94inrUtg25sB2V/pApwiv1lUb0bQ25FPNuzO89Baa+B+c0ccaaBKM5zkZV/12pUUdH+lWCSm9wmHqyocuVQ==}
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
     dependencies:
       '@types/estree': 1.0.5
     optionalDependencies:
-      '@rollup/rollup-android-arm-eabi': 4.17.0
-      '@rollup/rollup-android-arm64': 4.17.0
-      '@rollup/rollup-darwin-arm64': 4.17.0
-      '@rollup/rollup-darwin-x64': 4.17.0
-      '@rollup/rollup-linux-arm-gnueabihf': 4.17.0
-      '@rollup/rollup-linux-arm-musleabihf': 4.17.0
-      '@rollup/rollup-linux-arm64-gnu': 4.17.0
-      '@rollup/rollup-linux-arm64-musl': 4.17.0
-      '@rollup/rollup-linux-powerpc64le-gnu': 4.17.0
-      '@rollup/rollup-linux-riscv64-gnu': 4.17.0
-      '@rollup/rollup-linux-s390x-gnu': 4.17.0
-      '@rollup/rollup-linux-x64-gnu': 4.17.0
-      '@rollup/rollup-linux-x64-musl': 4.17.0
-      '@rollup/rollup-win32-arm64-msvc': 4.17.0
-      '@rollup/rollup-win32-ia32-msvc': 4.17.0
-      '@rollup/rollup-win32-x64-msvc': 4.17.0
+      '@rollup/rollup-android-arm-eabi': 4.17.1
+      '@rollup/rollup-android-arm64': 4.17.1
+      '@rollup/rollup-darwin-arm64': 4.17.1
+      '@rollup/rollup-darwin-x64': 4.17.1
+      '@rollup/rollup-linux-arm-gnueabihf': 4.17.1
+      '@rollup/rollup-linux-arm-musleabihf': 4.17.1
+      '@rollup/rollup-linux-arm64-gnu': 4.17.1
+      '@rollup/rollup-linux-arm64-musl': 4.17.1
+      '@rollup/rollup-linux-powerpc64le-gnu': 4.17.1
+      '@rollup/rollup-linux-riscv64-gnu': 4.17.1
+      '@rollup/rollup-linux-s390x-gnu': 4.17.1
+      '@rollup/rollup-linux-x64-gnu': 4.17.1
+      '@rollup/rollup-linux-x64-musl': 4.17.1
+      '@rollup/rollup-win32-arm64-msvc': 4.17.1
+      '@rollup/rollup-win32-ia32-msvc': 4.17.1
+      '@rollup/rollup-win32-x64-msvc': 4.17.1
       fsevents: 2.3.3
 
   /run-parallel@1.2.0:
@@ -4842,13 +4842,13 @@ packages:
       is-number: 7.0.0
     dev: true
 
-  /ts-api-utils@1.3.0(typescript@5.4.5):
+  /ts-api-utils@1.3.0(typescript@5.3.3):
     resolution: {integrity: sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==}
     engines: {node: '>=16'}
     peerDependencies:
       typescript: '>=4.2.0'
     dependencies:
-      typescript: 5.4.5
+      typescript: 5.3.3
     dev: true
 
   /ts-interface-checker@0.1.13:
@@ -4871,14 +4871,14 @@ packages:
   /tslib@2.6.2:
     resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==}
 
-  /tsutils@3.21.0(typescript@5.4.5):
+  /tsutils@3.21.0(typescript@5.3.3):
     resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==}
     engines: {node: '>= 6'}
     peerDependencies:
       typescript: '>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta'
     dependencies:
       tslib: 1.14.1
-      typescript: 5.4.5
+      typescript: 5.3.3
     dev: true
 
   /type-check@0.4.0:
@@ -4947,8 +4947,8 @@ packages:
       possible-typed-array-names: 1.0.0
     dev: true
 
-  /typescript@5.4.5:
-    resolution: {integrity: sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==}
+  /typescript@5.3.3:
+    resolution: {integrity: sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==}
     engines: {node: '>=14.17'}
     hasBin: true
 
@@ -5013,7 +5013,7 @@ packages:
     dependencies:
       '@antfu/utils': 0.7.7
       '@rollup/pluginutils': 5.1.0
-      '@vueuse/core': 10.9.0(vue@3.4.25)
+      '@vueuse/core': 10.9.0(vue@3.4.26)
       fast-glob: 3.3.2
       local-pkg: 0.5.0
       magic-string: 0.30.10
@@ -5024,7 +5024,7 @@ packages:
       - rollup
     dev: true
 
-  /unplugin-vue-components@0.26.0(vue@3.4.25):
+  /unplugin-vue-components@0.26.0(vue@3.4.26):
     resolution: {integrity: sha512-s7IdPDlnOvPamjunVxw8kNgKNK8A5KM1YpK5j/p97jEKTjlPNrA0nZBiSfAKKlK1gWZuyWXlKL5dk3EDw874LQ==}
     engines: {node: '>=14'}
     peerDependencies:
@@ -5047,17 +5047,17 @@ packages:
       minimatch: 9.0.4
       resolve: 1.22.8
       unplugin: 1.10.1
-      vue: 3.4.25(typescript@5.4.5)
+      vue: 3.4.26(typescript@5.3.3)
     transitivePeerDependencies:
       - rollup
       - supports-color
     dev: true
 
-  /unplugin-vue-define-options@1.4.3(vue@3.4.25):
+  /unplugin-vue-define-options@1.4.3(vue@3.4.26):
     resolution: {integrity: sha512-CN5xF8l8bySD6okw6PCt1zWFHf5vX+q4Cg2ssn9usANHtxmeyCgMccC7ywZyzI32dQS+pq6hvuSz/GewtYnbEQ==}
     engines: {node: '>=16.14.0'}
     dependencies:
-      '@vue-macros/common': 1.10.2(vue@3.4.25)
+      '@vue-macros/common': 1.10.2(vue@3.4.26)
       ast-walker-scope: 0.6.1
       unplugin: 1.10.1
     transitivePeerDependencies:
@@ -5108,7 +5108,7 @@ packages:
     dependencies:
       '@types/node': 20.12.7
       rimraf: 5.0.5
-      typescript: 5.4.5
+      typescript: 5.3.3
       vite: 5.2.10(@types/node@20.12.7)(less@4.2.0)
     transitivePeerDependencies:
       - less
@@ -5119,13 +5119,13 @@ packages:
       - terser
     dev: false
 
-  /vite-svg-loader@5.1.0(vue@3.4.25):
+  /vite-svg-loader@5.1.0(vue@3.4.26):
     resolution: {integrity: sha512-M/wqwtOEjgb956/+m5ZrYT/Iq6Hax0OakWbokj8+9PXOnB7b/4AxESHieEtnNEy7ZpjsjYW1/5nK8fATQMmRxw==}
     peerDependencies:
       vue: '>=3.2.13'
     dependencies:
       svgo: 3.2.0
-      vue: 3.4.25(typescript@5.4.5)
+      vue: 3.4.26(typescript@5.3.3)
     dev: true
 
   /vite@5.2.10(@types/node@20.12.7)(less@4.2.0):
@@ -5160,11 +5160,11 @@ packages:
       esbuild: 0.20.2
       less: 4.2.0
       postcss: 8.4.38
-      rollup: 4.17.0
+      rollup: 4.17.1
     optionalDependencies:
       fsevents: 2.3.3
 
-  /vue-demi@0.14.7(vue@3.4.25):
+  /vue-demi@0.14.7(vue@3.4.26):
     resolution: {integrity: sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==}
     engines: {node: '>=12'}
     hasBin: true
@@ -5176,7 +5176,7 @@ packages:
       '@vue/composition-api':
         optional: true
     dependencies:
-      vue: 3.4.25(typescript@5.4.5)
+      vue: 3.4.26(typescript@5.3.3)
 
   /vue-eslint-parser@9.4.2(eslint@8.57.0):
     resolution: {integrity: sha512-Ry9oiGmCAK91HrKMtCrKFWmSFWvYkpGglCeFAIqDdr9zdXmMMpJOmUJS7WWsW7fX81h6mwHmUZCQQ1E0PkSwYQ==}
@@ -5196,13 +5196,13 @@ packages:
       - supports-color
     dev: true
 
-  /vue-router@4.3.2(vue@3.4.25):
+  /vue-router@4.3.2(vue@3.4.26):
     resolution: {integrity: sha512-hKQJ1vDAZ5LVkKEnHhmm1f9pMiWIBNGF5AwU67PdH7TyXCj/a4hTccuUuYCAMgJK6rO/NVYtQIEN3yL8CECa7Q==}
     peerDependencies:
       vue: ^3.2.0
     dependencies:
       '@vue/devtools-api': 6.6.1
-      vue: 3.4.25(typescript@5.4.5)
+      vue: 3.4.26(typescript@5.3.3)
     dev: false
 
   /vue-template-compiler@2.7.16:
@@ -5212,29 +5212,29 @@ packages:
       he: 1.2.0
     dev: true
 
-  /vue-tsc@1.8.27(typescript@5.4.5):
+  /vue-tsc@1.8.27(typescript@5.3.3):
     resolution: {integrity: sha512-WesKCAZCRAbmmhuGl3+VrdWItEvfoFIPXOvUJkjULi+x+6G/Dy69yO3TBRJDr9eUlmsNAwVmxsNZxvHKzbkKdg==}
     hasBin: true
     peerDependencies:
       typescript: '*'
     dependencies:
       '@volar/typescript': 1.11.1
-      '@vue/language-core': 1.8.27(typescript@5.4.5)
+      '@vue/language-core': 1.8.27(typescript@5.3.3)
       semver: 7.6.0
-      typescript: 5.4.5
+      typescript: 5.3.3
     dev: true
 
-  /vue-types@3.0.2(vue@3.4.25):
+  /vue-types@3.0.2(vue@3.4.26):
     resolution: {integrity: sha512-IwUC0Aq2zwaXqy74h4WCvFCUtoV0iSWr0snWnE9TnU18S66GAQyqQbRf2qfJtUuiFsBf6qp0MEwdonlwznlcrw==}
     engines: {node: '>=10.15.0'}
     peerDependencies:
       vue: ^3.0.0
     dependencies:
       is-plain-object: 3.0.1
-      vue: 3.4.25(typescript@5.4.5)
+      vue: 3.4.26(typescript@5.3.3)
     dev: false
 
-  /vue3-ace-editor@2.2.4(ace-builds@1.33.1)(vue@3.4.25):
+  /vue3-ace-editor@2.2.4(ace-builds@1.33.1)(vue@3.4.26):
     resolution: {integrity: sha512-FZkEyfpbH068BwjhMyNROxfEI8135Sc+x8ouxkMdCNkuj/Tuw83VP/gStFQqZHqljyX9/VfMTCdTqtOnJZGN8g==}
     peerDependencies:
       ace-builds: '*'
@@ -5242,20 +5242,20 @@ packages:
     dependencies:
       ace-builds: 1.33.1
       resize-observer-polyfill: 1.5.1
-      vue: 3.4.25(typescript@5.4.5)
+      vue: 3.4.26(typescript@5.3.3)
     dev: false
 
-  /vue3-apexcharts@1.4.4(apexcharts@3.49.0)(vue@3.4.25):
+  /vue3-apexcharts@1.4.4(apexcharts@3.49.0)(vue@3.4.26):
     resolution: {integrity: sha512-TH89uZrxGjaDvkaYAISvj8+k6Bf1rUKFillc8oJirs5XZEPiwM1ELKZQ786wz0rfPqkSHHny2lqqUCK7Rw+LcQ==}
     peerDependencies:
       apexcharts: '> 3.0.0'
       vue: '> 3.0.0'
     dependencies:
       apexcharts: 3.49.0
-      vue: 3.4.25(typescript@5.4.5)
+      vue: 3.4.26(typescript@5.3.3)
     dev: false
 
-  /vue3-gettext@3.0.0-beta.4(@vue/compiler-sfc@3.4.25)(typescript@5.4.5)(vue@3.4.25):
+  /vue3-gettext@3.0.0-beta.4(@vue/compiler-sfc@3.4.26)(typescript@5.3.3)(vue@3.4.26):
     resolution: {integrity: sha512-EW9F5NexUQW9GNJMjujmMJo8hUQvw6POCVQN9ya0RdapPVEfmkXjuxuhkVEKyBNxq5lRPCepfYkMT8Pu3M6T6w==}
     engines: {node: '>= 12.0.0'}
     hasBin: true
@@ -5263,43 +5263,43 @@ packages:
       '@vue/compiler-sfc': '>=3.0.0'
       vue: '>=3.0.0'
     dependencies:
-      '@vue/compiler-sfc': 3.4.25
+      '@vue/compiler-sfc': 3.4.26
       chalk: 4.1.2
       command-line-args: 5.2.1
-      cosmiconfig: 9.0.0(typescript@5.4.5)
+      cosmiconfig: 9.0.0(typescript@5.3.3)
       gettext-extractor: 3.8.0
       glob: 7.2.3
       parse5: 6.0.1
       parse5-htmlparser2-tree-adapter: 6.0.1
       pofile: 1.1.4
       tslib: 2.6.2
-      vue: 3.4.25(typescript@5.4.5)
+      vue: 3.4.26(typescript@5.3.3)
     transitivePeerDependencies:
       - typescript
     dev: false
 
-  /vue@3.4.25(typescript@5.4.5):
-    resolution: {integrity: sha512-HWyDqoBHMgav/OKiYA2ZQg+kjfMgLt/T0vg4cbIF7JbXAjDexRf5JRg+PWAfrAkSmTd2I8aPSXtooBFWHB98cg==}
+  /vue@3.4.26(typescript@5.3.3):
+    resolution: {integrity: sha512-bUIq/p+VB+0xrJubaemrfhk1/FiW9iX+pDV+62I/XJ6EkspAO9/DXEjbDFoe8pIfOZBqfk45i9BMc41ptP/uRg==}
     peerDependencies:
       typescript: '*'
     peerDependenciesMeta:
       typescript:
         optional: true
     dependencies:
-      '@vue/compiler-dom': 3.4.25
-      '@vue/compiler-sfc': 3.4.25
-      '@vue/runtime-dom': 3.4.25
-      '@vue/server-renderer': 3.4.25(vue@3.4.25)
-      '@vue/shared': 3.4.25
-      typescript: 5.4.5
+      '@vue/compiler-dom': 3.4.26
+      '@vue/compiler-sfc': 3.4.26
+      '@vue/runtime-dom': 3.4.26
+      '@vue/server-renderer': 3.4.26(vue@3.4.26)
+      '@vue/shared': 3.4.26
+      typescript: 5.3.3
 
-  /vuedraggable@4.1.0(vue@3.4.25):
+  /vuedraggable@4.1.0(vue@3.4.26):
     resolution: {integrity: sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==}
     peerDependencies:
       vue: ^3.0.1
     dependencies:
       sortablejs: 1.14.0
-      vue: 3.4.25(typescript@5.4.5)
+      vue: 3.4.26(typescript@5.3.3)
     dev: false
 
   /warning@4.0.3:
@@ -5374,11 +5374,6 @@ packages:
     engines: {node: '>=12'}
     dev: true
 
-  /xterm@5.3.0:
-    resolution: {integrity: sha512-8QqjlekLUFTrU6x7xck1MsPzPA571K5zNqWm0M0oroYEWVOptZ0+ubQSkQ3uxIEhcIHRujJy6emDWX4A7qyFzg==}
-    deprecated: This package is now deprecated. Move to @xterm/xterm instead.
-    dev: false
-
   /yallist@3.1.1:
     resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
     dev: true
@@ -5393,11 +5388,11 @@ packages:
     dependencies:
       eslint-visitor-keys: 3.4.3
       lodash: 4.17.21
-      yaml: 2.4.1
+      yaml: 2.4.2
     dev: true
 
-  /yaml@2.4.1:
-    resolution: {integrity: sha512-pIXzoImaqmfOrL7teGUBt/T7ZDnyeGBWyXQBvOVhLkWLN37GXv8NMLK406UY6dS51JfcQHsmcW5cJ441bHg6Lg==}
+  /yaml@2.4.2:
+    resolution: {integrity: sha512-B3VqDZ+JAg1nZpaEmWtTXUlBneoGx6CPM9b0TENK6aoSu5t73dItudwdgmi6tHlIZZId4dZ9skcAQ2UbcyAeVA==}
     engines: {node: '>= 14'}
     hasBin: true
     dev: true
diff --git a/app/src/App.vue b/app/src/App.vue
index e4a7281b..19b31e09 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -7,8 +7,9 @@ import { theme } from 'ant-design-vue'
 import zh_CN from 'ant-design-vue/es/locale/zh_CN'
 import zh_TW from 'ant-design-vue/es/locale/zh_TW'
 import en_US from 'ant-design-vue/es/locale/en_US'
-import gettext from '@/gettext'
+
 import { useSettingsStore } from '@/pinia'
+import gettext from '@/gettext'
 
 const media = window.matchMedia('(prefers-color-scheme: dark)')
 
diff --git a/app/src/api/acme_user.ts b/app/src/api/acme_user.ts
new file mode 100644
index 00000000..76a7885a
--- /dev/null
+++ b/app/src/api/acme_user.ts
@@ -0,0 +1,24 @@
+import type { ModelBase } from '@/api/curd'
+import Curd from '@/api/curd'
+import http from '@/lib/http'
+
+export interface AcmeUser extends ModelBase {
+  name: string
+  email: string
+  ca_dir: string
+  registration: { body?: { status: string } }
+}
+
+class ACMEUserCurd extends Curd<AcmeUser> {
+  constructor() {
+    super('acme_user', 'acme_users')
+  }
+
+  public async register(id: number) {
+    return http.post(`${this.baseUrl}/${id}/register`)
+  }
+}
+
+const acme_user = new ACMEUserCurd()
+
+export default acme_user
diff --git a/app/src/api/curd.ts b/app/src/api/curd.ts
index c553392b..a8c529db 100644
--- a/app/src/api/curd.ts
+++ b/app/src/api/curd.ts
@@ -26,6 +26,7 @@ class Curd<T> {
   get = this._get.bind(this)
   save = this._save.bind(this)
   destroy = this._destroy.bind(this)
+  recover = this._recover.bind(this)
   update_order = this._update_order.bind(this)
 
   constructor(baseUrl: string, plural: string | null = null) {
@@ -39,8 +40,8 @@ class Curd<T> {
   }
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  _get(id: any = null): Promise<T> {
-    return http.get(this.baseUrl + (id ? `/${id}` : ''))
+  _get(id: any = null, params: any = {}): Promise<T> {
+    return http.get(this.baseUrl + (id ? `/${id}` : ''), { params })
   }
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -53,6 +54,11 @@ class Curd<T> {
     return http.delete(`${this.baseUrl}/${id}`)
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  _recover(id: any = null) {
+    return http.patch(`${this.baseUrl}/${id}`)
+  }
+
   _update_order(data: {
     target_id: number
     direction: number
diff --git a/app/src/components/Breadcrumb/Breadcrumb.vue b/app/src/components/Breadcrumb/Breadcrumb.vue
index ab4937aa..f96de909 100644
--- a/app/src/components/Breadcrumb/Breadcrumb.vue
+++ b/app/src/components/Breadcrumb/Breadcrumb.vue
@@ -12,12 +12,12 @@ const route = useRoute()
 const breadList = computed(() => {
   const _breadList: bread[] = []
 
-  name.value = route.name
+  name.value = route.meta.name
 
   route.matched.forEach(item => {
     // item.name !== 'index' && this.breadList.push(item)
     _breadList.push({
-      name: item.name as never as () => string,
+      name: item.meta.name as never as () => string,
       path: item.path,
     })
   })
diff --git a/app/src/components/ChatGPT/ChatGPT.vue b/app/src/components/ChatGPT/ChatGPT.vue
index 6599bf81..e00fa3d3 100644
--- a/app/src/components/ChatGPT/ChatGPT.vue
+++ b/app/src/components/ChatGPT/ChatGPT.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import Icon, { SendOutlined } from '@ant-design/icons-vue'
-import { useGettext } from 'vue3-gettext'
 import { storeToRefs } from 'pinia'
 import { marked } from 'marked'
 import hljs from 'highlight.js'
@@ -11,7 +10,7 @@ import 'highlight.js/styles/vs2015.css'
 
 import type { ChatComplicationMessage } from '@/api/openai'
 import openai from '@/api/openai'
-import ChatGPT_logo from '@/assets/svg/ChatGPT_logo.svg'
+import ChatGPT_logo from '@/assets/svg/ChatGPT_logo.svg?component'
 
 const props = defineProps<{
   content: string
@@ -21,8 +20,6 @@ const props = defineProps<{
 
 const emit = defineEmits(['update:history_messages'])
 
-const { $gettext } = useGettext()
-
 const { language: current } = storeToRefs(useSettingsStore())
 
 const history_messages = computed(() => props.historyMessages)
diff --git a/app/src/components/EnvIndicator/EnvIndicator.vue b/app/src/components/EnvIndicator/EnvIndicator.vue
index 0a52ca50..868d6d43 100644
--- a/app/src/components/EnvIndicator/EnvIndicator.vue
+++ b/app/src/components/EnvIndicator/EnvIndicator.vue
@@ -1,12 +1,10 @@
 <script setup lang="ts">
-import { useGettext } from 'vue3-gettext'
 import { CloseOutlined, DashboardOutlined, DatabaseOutlined } from '@ant-design/icons-vue'
 import { storeToRefs } from 'pinia'
 import { useRouter } from 'vue-router'
 import { computed, watch } from 'vue'
 import { useSettingsStore } from '@/pinia'
 
-const { $gettext } = useGettext()
 const settingsStore = useSettingsStore()
 
 const { environment } = storeToRefs(settingsStore)
diff --git a/app/src/components/NginxControl/NginxControl.vue b/app/src/components/NginxControl/NginxControl.vue
index bda745ca..b9c6fcd8 100644
--- a/app/src/components/NginxControl/NginxControl.vue
+++ b/app/src/components/NginxControl/NginxControl.vue
@@ -1,13 +1,10 @@
 <script setup lang="ts">
 import { message } from 'ant-design-vue'
 import { ReloadOutlined } from '@ant-design/icons-vue'
-import gettext from '@/gettext'
 import ngx from '@/api/ngx'
 import { logLevel } from '@/views/config/constants'
 import { NginxStatus } from '@/constants'
 
-const { $gettext } = gettext
-
 const status = ref(0)
 function get_status() {
   ngx.status().then(r => {
diff --git a/app/src/components/NodeSelector/NodeSelector.vue b/app/src/components/NodeSelector/NodeSelector.vue
index 4016f658..b9bfb267 100644
--- a/app/src/components/NodeSelector/NodeSelector.vue
+++ b/app/src/components/NodeSelector/NodeSelector.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { useGettext } from 'vue3-gettext'
 import type { Ref } from 'vue'
 import type { Environment } from '@/api/environment'
 import environment from '@/api/environment'
@@ -12,8 +11,6 @@ const props = defineProps<{
 
 const emit = defineEmits(['update:target', 'update:map'])
 
-const { $gettext } = useGettext()
-
 const data = ref([]) as Ref<Environment[]>
 const data_map = ref({}) as Ref<Record<number, Environment>>
 
diff --git a/app/src/components/Notification/Notification.vue b/app/src/components/Notification/Notification.vue
index a5af84a5..dc2cb26d 100644
--- a/app/src/components/Notification/Notification.vue
+++ b/app/src/components/Notification/Notification.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { BellOutlined, CheckCircleOutlined, CloseCircleOutlined, DeleteOutlined, InfoCircleOutlined, WarningOutlined } from '@ant-design/icons-vue'
-import { useGettext } from 'vue3-gettext'
 import type { Ref } from 'vue'
 import { message } from 'ant-design-vue'
 import notification from '@/api/notification'
@@ -8,7 +7,6 @@ import type { Notification } from '@/api/notification'
 import { NotificationTypeT } from '@/constants'
 import { useUserStore } from '@/pinia'
 
-const { $gettext } = useGettext()
 const loading = ref(false)
 
 const { unreadCount } = storeToRefs(useUserStore())
diff --git a/app/src/components/PageHeader/PageHeader.vue b/app/src/components/PageHeader/PageHeader.vue
index db0be621..32c02874 100644
--- a/app/src/components/PageHeader/PageHeader.vue
+++ b/app/src/components/PageHeader/PageHeader.vue
@@ -9,7 +9,7 @@ const display = computed(() => {
 })
 
 const name = computed(() => {
-  return (route.name as never as () => string)()
+  return (route.meta.name as never as () => string)()
 })
 </script>
 
diff --git a/app/src/components/SetLanguage/SetLanguage.vue b/app/src/components/SetLanguage/SetLanguage.vue
index eca9f460..c14aaf48 100644
--- a/app/src/components/SetLanguage/SetLanguage.vue
+++ b/app/src/components/SetLanguage/SetLanguage.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
-import gettext from '@/gettext'
 
 import { useSettingsStore } from '@/pinia'
 import http from '@/lib/http'
+import gettext from '@/gettext'
 
 const settings = useSettingsStore()
 
@@ -19,8 +19,7 @@ async function init() {
       gettext.translations[current.value] = r
     })
 
-    // @ts-expect-error name type
-    document.title = `${route.name?.()} | Nginx UI`
+    document.title = `${route.meta.name?.()} | Nginx UI`
   }
 }
 
@@ -31,7 +30,7 @@ watch(current, v => {
   settings.set_language(v)
   gettext.current = v
 
-  const name = route.name as never as () => string
+  const name = route.meta.name as never as () => string
 
   document.title = `${name()} | Nginx UI`
 })
diff --git a/app/src/components/StdDesign/StdDataDisplay/StdBatchEdit.vue b/app/src/components/StdDesign/StdDataDisplay/StdBatchEdit.vue
index 57d9faaa..b28c1e10 100644
--- a/app/src/components/StdDesign/StdDataDisplay/StdBatchEdit.vue
+++ b/app/src/components/StdDesign/StdDataDisplay/StdBatchEdit.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { message } from 'ant-design-vue'
-import gettext from '@/gettext'
 import StdDataEntry from '@/components/StdDesign/StdDataEntry'
 
 const props = defineProps<{
@@ -11,8 +10,6 @@ const props = defineProps<{
 
 const emit = defineEmits(['onSave'])
 
-const { $gettext } = gettext
-
 const batchColumns = ref([])
 
 const visible = ref(false)
diff --git a/app/src/components/StdDesign/StdDataDisplay/StdCurd.vue b/app/src/components/StdDesign/StdDataDisplay/StdCurd.vue
index 900f814e..af1d2205 100644
--- a/app/src/components/StdDesign/StdDataDisplay/StdCurd.vue
+++ b/app/src/components/StdDesign/StdDataDisplay/StdCurd.vue
@@ -3,13 +3,17 @@ import { message } from 'ant-design-vue'
 import type { ComputedRef } from 'vue'
 import type { StdTableProps } from './StdTable.vue'
 import StdTable from './StdTable.vue'
-import gettext from '@/gettext'
 import StdDataEntry from '@/components/StdDesign/StdDataEntry'
 import type { Column } from '@/components/StdDesign/types'
+import StdCurdDetail from '@/components/StdDesign/StdDataDisplay/StdCurdDetail.vue'
 
 export interface StdCurdProps {
   cardTitleKey?: string
   modalMaxWidth?: string | number
+  modalMask?: boolean
+  exportExcel?: boolean
+  importExcel?: boolean
+
   disableAdd?: boolean
   onClickAdd?: () => void
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -19,15 +23,17 @@ export interface StdCurdProps {
 }
 
 const props = defineProps<StdTableProps & StdCurdProps>()
-
-const { $gettext } = gettext
-
+const route = useRoute()
+const router = useRouter()
 const visible = ref(false)
 const update = ref(0)
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const data: any = reactive({ id: null })
+const modifyMode = ref(true)
+const editMode = ref<string>()
 
 provide('data', data)
+provide('editMode', editMode)
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const error: any = reactive({})
@@ -50,8 +56,22 @@ function add() {
 
   clear_error()
   visible.value = true
+  editMode.value = 'create'
+  modifyMode.value = true
 }
 const table = ref()
+
+const selectedRowKeys = ref([])
+
+const getParams = reactive({
+  trash: false,
+})
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const setParams = (k: string, v: any) => {
+  getParams[k] = v
+}
+
 function get_list() {
   table.value?.get_list()
 }
@@ -60,6 +80,8 @@ defineExpose({
   add,
   get_list,
   data,
+  getParams,
+  setParams,
 })
 
 function clear_error() {
@@ -68,18 +90,28 @@ function clear_error() {
   })
 }
 
-const ok = async () => {
+const stdEntryRef = ref()
+async function ok() {
+  const { formRef } = stdEntryRef.value
+
   clear_error()
-  await props?.beforeSave?.(data)
-  props.api!.save(data.id, data).then(r => {
-    message.success($gettext('Save Successfully'))
-    Object.assign(data, r)
-    get_list()
-    visible.value = false
-  }).catch(e => {
-    message.error($gettext(e?.message ?? 'Server error'), 5)
-    Object.assign(error, e.errors)
-  })
+  try {
+    await formRef.validateFields()
+    await props?.beforeSave?.(data)
+    props
+      .api!.save(data.id, { ...data, ...props.overwriteParams }, { params: { ...props.overwriteParams } })
+      .then(r => {
+        message.success($gettext('Save successfully'))
+        Object.assign(data, r)
+        get_list()
+        visible.value = false
+      })
+      .catch(e => {
+        message.error($gettext(e?.message ?? 'Server error'), 5)
+        Object.assign(error, e.errors)
+      })
+  }
+  catch { }
 }
 
 function cancel() {
@@ -88,48 +120,136 @@ function cancel() {
   clear_error()
 }
 
-function edit(id: number | string) {
-  props.api!.get(id).then(async r => {
-    Object.keys(data).forEach(k => {
-      delete data[k]
+watch(visible, v => {
+  if (!v) {
+    router.push({
+      query: {
+        ...route.query,
+        [`open.${props.rowKey || 'id'}`]: undefined,
+      },
     })
-    data.id = null
-    Object.assign(data, r)
+  }
+})
+
+watch(modifyMode, v => {
+  router.push({
+    query: {
+      ...route.query,
+      modify_mode: v.toString(),
+    },
+  })
+})
+
+function edit(id: number | string) {
+  get(id, true).then(() => {
     visible.value = true
+    modifyMode.value = true
+    editMode.value = 'modify'
   }).catch(e => {
     message.error($gettext(e?.message ?? 'Server error'), 5)
   })
 }
 
-const selectedRowKeys = ref([])
+function view(id: number | string) {
+  get(id, false).then(() => {
+    visible.value = true
+    modifyMode.value = false
+  }).catch(e => {
+    message.error($gettext(e?.message ?? 'Server error'), 5)
+  })
+}
+
+async function get(id: number | string, _modifyMode: boolean) {
+  return props
+    .api!.get(id, { ...props.overwriteParams })
+    .then(async r => {
+      Object.keys(data).forEach(k => {
+        delete data[k]
+      })
+      data.id = null
+      Object.assign(data, r)
+      if (!props.disabledModify) {
+        await router.push({
+          query: {
+            ...route.query,
+            [`open.${props.rowKey || 'id'}`]: id,
+            modify_mode: _modifyMode.toString(),
+          },
+        })
+      }
+    })
+}
+
+onMounted(async () => {
+  const id = route.query[`open.${props.rowKey || 'id'}`] as string
+  const _modifyMode = (route.query.modify_mode as string) === 'true'
+  if (id && !props.disabledModify && _modifyMode)
+    edit(id)
+
+  if (id && !props.disabledView && !_modifyMode)
+    view(id)
+})
+
+const modalTitle = computed(() => {
+  return data.id ? modifyMode.value ? $gettext('Modify') : $gettext('View Details') : $gettext('Add')
+})
+
 </script>
 
 <template>
   <div class="std-curd">
-    <ACard :title="title || $gettext('Table')">
+    <ACard>
+      <template #title>
+        <div class="flex items-center">
+          {{ title || $gettext('List') }}
+          <slot name="title-slot" />
+        </div>
+      </template>
       <template #extra>
         <ASpace>
+          <slot name="beforeAdd" />
           <a
             v-if="!disableAdd"
             @click="add"
           >{{ $gettext('Add') }}</a>
-
           <slot name="extra" />
+          <template v-if="!disableDelete">
+            <a
+              v-if="!getParams.trash"
+              @click="getParams.trash = true"
+            >
+              {{ $gettext('Trash') }}
+            </a>
+            <a
+              v-else
+              @click="getParams.trash = false"
+            >
+              {{ $gettext('List') }}
+            </a>
+          </template>
         </ASpace>
       </template>
 
       <StdTable
         ref="table"
-        v-bind="props"
         :key="update"
         v-model:selected-row-keys="selectedRowKeys"
+        v-bind="{
+          ...props,
+          getParams,
+        }"
         @click-edit="edit"
+        @click-view="view"
         @selected="onSelect"
       >
-        <template #actions="slotProps">
+        <template
+          v-for="(_, key) in $slots"
+          :key="key"
+          #[key]="slotProps"
+        >
           <slot
-            name="actions"
-            :actions="slotProps.record"
+            :name="key"
+            v-bind="slotProps"
           />
         </template>
       </StdTable>
@@ -137,34 +257,55 @@ const selectedRowKeys = ref([])
 
     <AModal
       class="std-curd-edit-modal"
-      :mask="false"
-      :title="data.id ? $gettext('Modify') : $gettext('Add')"
+      :mask="modalMask"
+      :title="modalTitle"
       :open="visible"
       :cancel-text="$gettext('Cancel')"
-      :ok-text="$gettext('OK')"
+      :ok-text="$gettext('Ok')"
       :width="modalMaxWidth"
+      :footer="modifyMode ? undefined : null"
       destroy-on-close
       @cancel="cancel"
       @ok="ok"
     >
       <div
-        v-if="$slots.beforeEdit"
-        class="before-edit"
+        v-if="!disabledModify && !disabledView"
+        class="m-2 flex justify-end"
       >
-        <slot
-          name="beforeEdit"
-          :data="data"
+        <ASwitch
+          v-model:checked="modifyMode"
+          class="mr-2"
         />
+        {{ modifyMode ? $gettext('Modify Mode') : $gettext('View Mode') }}
       </div>
 
-      <StdDataEntry
-        :data-list="editableColumns"
-        :data-source="data"
-        :error="error"
-      />
+      <template v-if="modifyMode">
+        <div
+          v-if="$slots.beforeEdit"
+          class="before-edit"
+        >
+          <slot
+            name="beforeEdit"
+            :data="data"
+          />
+        </div>
+
+        <StdDataEntry
+          ref="stdEntryRef"
+          :data-list="editableColumns"
+          :data-source="data"
+          :error="error"
+        />
+
+        <slot
+          name="edit"
+          :data="data"
+        />
+      </template>
 
-      <slot
-        name="edit"
+      <StdCurdDetail
+        v-else
+        :columns="columns"
         :data="data"
       />
     </AModal>
diff --git a/app/src/components/StdDesign/StdDataDisplay/StdCurdDetail.vue b/app/src/components/StdDesign/StdDataDisplay/StdCurdDetail.vue
new file mode 100644
index 00000000..cfbf893d
--- /dev/null
+++ b/app/src/components/StdDesign/StdDataDisplay/StdCurdDetail.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { ComputedRef } from 'vue'
+import _ from 'lodash'
+import type { Column } from '@/components/StdDesign/types'
+import { labelRender } from '@/components/StdDesign/StdDataEntry'
+import { CustomRender } from '@/components/StdDesign/StdDataDisplay/components/CustomRender'
+
+const props = defineProps<{
+  columns: Column[]
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  data: any
+}>()
+
+const displayColumns: ComputedRef<Column[]> = computed(() => {
+  return props.columns.filter(c => !c.hiddenInDetail && c.dataIndex !== 'action')
+})
+</script>
+
+<template>
+  <ADescriptions
+    :column="1"
+    bordered
+  >
+    <ADescriptionsItem
+      v-for="(c, index) in displayColumns"
+      :key="index"
+      :label="labelRender(c.title)"
+    >
+      <CustomRender v-bind="{ column: c, record: data, index, text: _.get(data, c.dataIndex!), isDetail: true }" />
+    </ADescriptionsItem>
+  </ADescriptions>
+</template>
+
+<style scoped lang="less">
+
+</style>
diff --git a/app/src/components/StdDesign/StdDataDisplay/StdPagination.vue b/app/src/components/StdDesign/StdDataDisplay/StdPagination.vue
index 1851ffc6..faa57b56 100644
--- a/app/src/components/StdDesign/StdDataDisplay/StdPagination.vue
+++ b/app/src/components/StdDesign/StdDataDisplay/StdPagination.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-
 import type { Pagination } from '@/api/curd'
 
 const props = defineProps<{
   pagination: Pagination
-  size?: string
+  size?: 'default' | 'small'
+  loading: boolean
 }>()
 
 const emit = defineEmits(['change', 'changePageSize', 'update:pagination'])
@@ -31,6 +31,7 @@ const pageSize = computed({
   >
     <APagination
       v-model:pageSize="pageSize"
+      :disabled="loading"
       :current="pagination.current_page"
       :size="size"
       :total="pagination.total"
diff --git a/app/src/components/StdDesign/StdDataDisplay/StdTable.vue b/app/src/components/StdDesign/StdDataDisplay/StdTable.vue
index bf0724b5..58e8a40b 100644
--- a/app/src/components/StdDesign/StdDataDisplay/StdTable.vue
+++ b/app/src/components/StdDesign/StdDataDisplay/StdTable.vue
@@ -1,14 +1,16 @@
 <script setup lang="ts">
 import { message } from 'ant-design-vue'
 import { HolderOutlined } from '@ant-design/icons-vue'
-import { useGettext } from 'vue3-gettext'
 import type { ComputedRef, Ref } from 'vue'
-import type { SorterResult } from 'ant-design-vue/lib/table/interface'
+import type { SorterResult, TablePaginationConfig } from 'ant-design-vue/lib/table/interface'
+import type { FilterValue } from 'ant-design-vue/es/table/interface'
+import type { Key } from 'ant-design-vue/es/_util/type'
+import type { RouteParams } from 'vue-router'
+import _ from 'lodash'
 import StdPagination from './StdPagination.vue'
 import StdDataEntry from '@/components/StdDesign/StdDataEntry'
 import type { Pagination } from '@/api/curd'
 import type { Column } from '@/components/StdDesign/types'
-import exportCsvHandler from '@/components/StdDesign/StdDataDisplay/methods/exportCsv'
 import useSortable from '@/components/StdDesign/StdDataDisplay/methods/sortable'
 import type Curd from '@/api/curd'
 
@@ -25,16 +27,16 @@ export interface StdTableProps {
   disableQueryParams?: boolean
   disableSearch?: boolean
   pithy?: boolean
-  exportCsv?: boolean
+  exportExcel?: boolean
+  exportMaterial?: boolean
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   overwriteParams?: Record<string, any>
+  disabledView?: boolean
   disabledModify?: boolean
   selectionType?: string
   sortable?: boolean
   disableDelete?: boolean
   disablePagination?: boolean
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  selectedRowKeys?: any | any[]
   sortableMoveHook?: (oldRow: number[], newRow: number[]) => boolean
   scrollX?: string | number
 }
@@ -43,18 +45,21 @@ const props = withDefaults(defineProps<StdTableProps>(), {
   rowKey: 'id',
 })
 
-const emit = defineEmits(['onSelected', 'onSelectedRecord', 'clickEdit', 'update:selectedRowKeys', 'clickBatchModify'])
-const { $gettext } = useGettext()
+const emit = defineEmits(['clickEdit', 'clickView', 'clickBatchModify', 'update:selectedRowKeys'])
 const route = useRoute()
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const dataSource: Ref<any[]> = ref([])
-const expandKeysList: Ref<number[]> = ref([])
+const expandKeysList: Ref<Key[]> = ref([])
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const rowsKeyIndexMap: Ref<Record<number, any>> = ref({})
 const loading = ref(true)
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const selectedRecords: Ref<Record<any, any>> = ref({})
 
 // This can be useful if there are more than one StdTable in the same page.
 const randomId = ref(Math.random().toString(36).substring(2, 8))
+const updateFilter = ref(0)
+const init = ref(false)
 
 const pagination: Pagination = reactive({
   total: 1,
@@ -67,40 +72,59 @@ const params = reactive({
   ...props.getParams,
 })
 
-const selectedKeysLocalBuffer = ref([])
+const get_list = _.debounce(_get_list, 200, {
+  leading: true,
+  trailing: false,
+})
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const selectedRowKeys = defineModel<any[]>('selectedRowKeys', {
+  default: () => [],
+})
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const selectedRows = defineModel<any[]>('selectedRows', {
+  type: Array,
+  default: () => [],
+})
 
-const selectedRowKeysBuffer = computed({
-  get() {
-    return props.selectedRowKeys || selectedKeysLocalBuffer.value
-  },
-  set(v) {
-    selectedKeysLocalBuffer.value = v
-    emit('update:selectedRowKeys', v)
-  },
+onMounted(() => {
+  selectedRows.value.forEach(v => {
+    selectedRecords.value[v[props.rowKey]] = v
+  })
 })
 
 const searchColumns = computed(() => {
   const _searchColumns: Column[] = []
 
-  props.columns?.forEach(column => {
-    if (column.search)
-      _searchColumns.push(column)
+  props.columns.forEach((column: Column) => {
+    if (column.search) {
+      if (typeof column.search === 'object') {
+        _searchColumns.push({
+          ...column,
+          edit: column.search,
+        })
+      }
+      else {
+        _searchColumns.push({ ...column })
+      }
+    }
   })
 
   return _searchColumns
 })
 
-const pithyColumns = computed(() => {
+const pithyColumns = computed<Column[]>(() => {
   if (props.pithy) {
     return props.columns?.filter(c => {
-      return c.pithy === true && !c.hidden
+      return c.pithy === true && !c.hiddenInTable
     })
   }
 
   return props.columns?.filter(c => {
-    return !c.hidden
+    return !c.hiddenInTable
   })
-}) as ComputedRef<Column[]>
+})
 
 const batchColumns = computed(() => {
   const batch: Column[] = []
@@ -113,18 +137,32 @@ const batchColumns = computed(() => {
   return batch
 })
 
+watch(route, () => {
+  params.trash = route.query.trash === 'true'
+})
+
 onMounted(() => {
-  if (!props.disableQueryParams)
-    Object.assign(params, route.query)
+  if (!props.disableQueryParams) {
+    Object.assign(params, {
+      ...route.query,
+      trash: route.query.trash === 'true',
+    })
+  }
 
   get_list()
 
   if (props.sortable)
     initSortable()
+
+  if (!selectedRowKeys.value?.length)
+    selectedRowKeys.value = []
+
+  init.value = true
 })
 
 defineExpose({
   get_list,
+  pagination,
 })
 
 function destroy(id: number | string) {
@@ -136,27 +174,15 @@ function destroy(id: number | string) {
   })
 }
 
-function get_list(page_num = null, page_size = 20) {
-  loading.value = true
-  if (page_num) {
-    params.page = page_num
-    params.page_size = page_size
-  }
-  props.api?.get_list(params).then(async r => {
-    dataSource.value = r.data
-    rowsKeyIndexMap.value = {}
-    if (props.sortable)
-
-      buildIndexMap(r.data)
-
-    if (r.pagination)
-      Object.assign(pagination, r.pagination)
-
-    loading.value = false
+function recover(id: number | string) {
+  props.api.recover(id).then(() => {
+    message.success($gettext('Recovered Successfully'))
+    get_list()
   }).catch(e => {
     message.error(e?.message ?? $gettext('Server error'))
   })
 }
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function buildIndexMap(data: any, level: number = 0, index: number = 0, total: number[] = []) {
   if (data && data.length > 0) {
@@ -172,11 +198,37 @@ function buildIndexMap(data: any, level: number = 0, index: number = 0, total: n
     })
   }
 }
-function orderPaginationChange(_pagination: Pagination, _: never, sorter: SorterResult) {
+
+async function _get_list(page_num = null, page_size = 20) {
+  loading.value = true
+  if (page_num) {
+    params.page = page_num
+    params.page_size = page_size
+  }
+  props.api?.get_list({ ...route.query, ...params, ...props.overwriteParams }).then(async r => {
+    dataSource.value = r.data
+    rowsKeyIndexMap.value = {}
+    if (props.sortable)
+      buildIndexMap(r.data)
+
+    if (r.pagination)
+      Object.assign(pagination, r.pagination)
+
+    setTimeout(() => {
+      loading.value = false
+    }, 200)
+  }).catch(e => {
+    message.error(e?.message ?? $gettext('Server error'))
+  })
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function onTableChange(_pagination: TablePaginationConfig, filters: Record<string, FilterValue>, sorter: SorterResult | SorterResult<any>[]) {
   if (sorter) {
-    selectedRowKeysBuffer.value = []
-    params.order_by = sorter.field
-    params.sort = sorter.order === 'ascend' ? 'asc' : 'desc'
+    sorter = sorter as SorterResult
+    selectedRowKeys.value = []
+    params.sort_by = sorter.field
+    params.order = sorter.order === 'ascend' ? 'asc' : 'desc'
     switch (sorter.order) {
       case 'ascend':
         params.sort = 'asc'
@@ -189,44 +241,98 @@ function orderPaginationChange(_pagination: Pagination, _: never, sorter: Sorter
         break
     }
   }
+  if (filters) {
+    Object.keys(filters).forEach((v: string) => {
+      params[v] = filters[v]
+    })
+  }
   if (_pagination)
-    selectedRowKeysBuffer.value = []
+    selectedRowKeys.value = []
 }
 
-function expandedTable(keys: number[]) {
+function expandedTable(keys: Key[]) {
   expandKeysList.value = keys
 }
 
-const crossPageSelect: Record<string, number[]> = {}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any,sonarjs/cognitive-complexity
+async function onSelect(record: any, selected: boolean, _selectedRows: any[]) {
+  if (props.selectionType === 'checkbox' || props.exportExcel) {
+    if (selected) {
+      _selectedRows.forEach(v => {
+        if (v) {
+          if (selectedRecords.value[v[props.rowKey]] === undefined)
+            selectedRowKeys.value.push(v[props.rowKey])
+
+          selectedRecords.value[v[props.rowKey]] = v
+        }
+      })
+    }
+    else {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      selectedRowKeys.value = selectedRowKeys.value.filter((v: any) => v !== record[props.rowKey])
+      delete selectedRecords.value[record[props.rowKey]]
+    }
 
-async function onSelectChange(_selectedRowKeys: number[]) {
-  const page = params.page || 1
+    await nextTick(async () => {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const filteredRows: any[] = []
 
-  crossPageSelect[page] = _selectedRowKeys
+      selectedRowKeys.value.forEach(v => {
+        filteredRows.push(selectedRecords.value[v])
+      })
+      selectedRows.value = filteredRows
+    })
+  }
+  else {
+    if (selected) {
+      selectedRowKeys.value = record[props.rowKey]
+      selectedRows.value = [record]
+    }
+    else {
+      selectedRowKeys.value = []
+      selectedRows.value = []
+    }
+  }
+}
 
-  let t: number[] = []
-  Object.keys(crossPageSelect).forEach((v: string) => {
-    t.push(...crossPageSelect[v])
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+async function onSelectAll(selected: boolean, _selectedRows: any[], changeRows: any[]) {
+  // console.log(selected, selectedRows, changeRows)
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  changeRows.forEach((v: any) => {
+    if (v) {
+      if (selected) {
+        selectedRowKeys.value.push(v[props.rowKey])
+        selectedRecords.value[v[props.rowKey]] = v
+      }
+      else {
+        delete selectedRecords.value[v[props.rowKey]]
+      }
+    }
   })
 
-  const n = [..._selectedRowKeys]
+  if (!selected) {
+    selectedRowKeys.value = selectedRowKeys.value.filter(v => {
+      return selectedRecords.value[v]
+    })
+  }
 
-  t = t.concat(n)
+  // console.log(selectedRowKeysBuffer.value, selectedRecords.value)
 
-  // console.log(crossPageSelect)
-  const set = new Set(t)
+  await nextTick(async () => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const filteredRows: any[] = []
 
-  selectedRowKeysBuffer.value = Array.from(set)
-  emit('onSelected', selectedRowKeysBuffer.value)
-}
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function onSelect(record: any) {
-  emit('onSelectedRecord', record)
+    selectedRowKeys.value.forEach(v => {
+      filteredRows.push(selectedRecords.value[v])
+    })
+    selectedRows.value = filteredRows
+  })
 }
 
 const router = useRouter()
 
-const reset_search = async () => {
+const resetSearch = async () => {
   Object.keys(params).forEach(v => {
     delete params[v]
   })
@@ -237,65 +343,99 @@ const reset_search = async () => {
 
   router.push({ query: {} }).catch(() => {
   })
+
+  updateFilter.value++
 }
 
-watch(params, () => {
-  if (!props.disableQueryParams)
-    router.push({ query: params })
+watch(params, async v => {
+  if (init.value) {
+    await nextTick(() => {
+      get_list()
+    })
 
-  get_list()
+    if (!props.disableQueryParams)
+      await router.push({ query: v as RouteParams })
+  }
 })
 
+if (props.getParams) {
+  const getParams = computed(() => props.getParams)
+
+  watch(getParams, () => {
+    Object.assign(params, {
+      ...props.getParams,
+      page: 1,
+    })
+  }, { deep: true })
+}
+
+if (props.overwriteParams) {
+  const overwriteParams = computed(() => props.overwriteParams)
+
+  watch(overwriteParams, () => {
+    Object.assign(params, {
+      page: 1,
+    })
+    if (params.page === 1)
+      get_list()
+  }, { deep: true })
+}
+
 const rowSelection = computed(() => {
-  if (batchColumns.value.length > 0 || props.selectionType) {
+  if (batchColumns.value.length > 0 || props.selectionType || props.exportExcel) {
     return {
-      selectedRowKeys: selectedRowKeysBuffer.value,
-      onChange: onSelectChange,
+      selectedRowKeys: selectedRowKeys.value,
       onSelect,
-      type: batchColumns.value.length > 0 ? 'checkbox' : props.selectionType,
+      onSelectAll,
+      type: (batchColumns.value.length > 0 || props.exportExcel) ? 'checkbox' : props.selectionType,
     }
   }
   else {
     return null
   }
-})
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+}) as ComputedRef<any>
 
 const hasSelectedRow = computed(() => {
-  return batchColumns.value.length > 0 && selectedRowKeysBuffer.value.length > 0
+  return batchColumns.value.length > 0 && selectedRowKeys.value.length > 0
 })
 
 function clickBatchEdit() {
-  emit('clickBatchModify', batchColumns.value, selectedRowKeysBuffer.value)
+  emit('clickBatchModify', batchColumns.value, selectedRowKeys.value)
 }
 
 function initSortable() {
   useSortable(props, randomId, dataSource, rowsKeyIndexMap, expandKeysList)
 }
 
-function export_csv() {
-  exportCsvHandler(props, pithyColumns)
+function changePage(page: number, page_size: number) {
+  Object.assign(params, {
+    page,
+    page_size,
+  })
 }
+
+const paginationSize = computed(() => {
+  if (props.size === 'small')
+    return 'small'
+  else
+    return 'default'
+})
 </script>
 
 <template>
   <div class="std-table">
     <StdDataEntry
       v-if="!disableSearch && searchColumns.length"
+      :key="updateFilter"
       :data-list="searchColumns"
       :data-source="params"
+      type="search"
       layout="inline"
     >
       <template #action>
         <ASpace class="action-btn">
-          <AButton
-            v-if="props.exportCsv"
-            type="primary"
-            ghost
-            @click="export_csv"
-          >
-            {{ $gettext('Export') }}
-          </AButton>
-          <AButton @click="reset_search">
+          <AButton @click="resetSearch">
             {{ $gettext('Reset') }}
           </AButton>
           <AButton
@@ -304,11 +444,12 @@ function export_csv() {
           >
             {{ $gettext('Batch Modify') }}
           </AButton>
+          <slot name="append-search" />
         </ASpace>
       </template>
     </StdDataEntry>
     <ATable
-      id="std-table"
+      :id="`std-table-${randomId}`"
       :columns="pithyColumns"
       :data-source="dataSource"
       :loading="loading"
@@ -316,18 +457,32 @@ function export_csv() {
       :row-key="rowKey"
       :row-selection="rowSelection"
       :scroll="{ x: scrollX }"
-      :size="size"
+      :size="size as any"
       :expanded-row-keys="expandKeysList"
-      @change="orderPaginationChange"
+      @change="onTableChange"
       @expanded-rows-change="expandedTable"
     >
-      <template #bodyCell="{ text, record, column }">
+      <template #bodyCell="{ text, record, column }: {text: any, record: Record<string, any>, column: any}">
         <template v-if="column.handle === true">
           <span class="ant-table-drag-icon"><HolderOutlined /></span>
           {{ text }}
         </template>
         <template v-if="column.dataIndex === 'action'">
-          <template v-if="!props.disabledModify">
+          <template v-if="!props.disabledView && !params.trash">
+            <AButton
+              type="link"
+              size="small"
+              @click="$emit('clickView', record[props.rowKey], record)"
+            >
+              {{ $gettext('View') }}
+            </AButton>
+            <ADivider
+              v-if="!props.disabledModify"
+              type="vertical"
+            />
+          </template>
+
+          <template v-if="!props.disabledModify && !params.trash">
             <AButton
               type="link"
               size="small"
@@ -348,9 +503,10 @@ function export_csv() {
 
           <template v-if="!props.disableDelete">
             <APopconfirm
+              v-if="!params.trash"
               :cancel-text="$gettext('No')"
               :ok-text="$gettext('OK')"
-              :title="$gettext('Are you sure you want to delete?')"
+              :title="$gettext('Are you sure you want to delete this item?')"
               @confirm="destroy(record[rowKey])"
             >
               <AButton
@@ -360,15 +516,30 @@ function export_csv() {
                 {{ $gettext('Delete') }}
               </AButton>
             </APopconfirm>
+            <APopconfirm
+              v-else
+              :cancel-text="$gettext('No')"
+              :ok-text="$gettext('OK')"
+              :title="$gettext('Are you sure you want to recover this item?')"
+              @confirm="recover(record[rowKey])"
+            >
+              <AButton
+                type="link"
+                size="small"
+              >
+                {{ $gettext('Recover') }}
+              </AButton>
+            </APopconfirm>
           </template>
         </template>
       </template>
     </ATable>
     <StdPagination
-      :size="size"
+      :size="paginationSize"
+      :loading="loading"
       :pagination="pagination"
-      @change="get_list"
-      @change-page-size="orderPaginationChange"
+      @change="changePage"
+      @change-page-size="onTableChange"
     />
   </div>
 </template>
@@ -390,12 +561,6 @@ function export_csv() {
   min-width: 90px;
 }
 
-.std-table {
-  .ant-table-wrapper {
-    // overflow-x: scroll;
-  }
-}
-
 .action-btn {
   // min-height: 50px;
   height: 100%;
diff --git a/app/src/components/StdDesign/StdDataDisplay/StdTableTransformer.tsx b/app/src/components/StdDesign/StdDataDisplay/StdTableTransformer.tsx
index 7f7a4bdc..5a802aac 100644
--- a/app/src/components/StdDesign/StdDataDisplay/StdTableTransformer.tsx
+++ b/app/src/components/StdDesign/StdDataDisplay/StdTableTransformer.tsx
@@ -1,6 +1,8 @@
 // text, record, index, column
 import dayjs from 'dayjs'
 import type { JSX } from 'vue/jsx-runtime'
+import { Tag } from 'ant-design-vue'
+import { get } from 'lodash'
 
 export interface customRender {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -11,6 +13,8 @@ export interface customRender {
   index: any
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   column: any
+  isExport?: boolean
+  isDetail?: boolean
 }
 
 export const datetime = (args: customRender) => {
@@ -18,18 +22,68 @@ export const datetime = (args: customRender) => {
 }
 
 export const date = (args: customRender) => {
-  return dayjs(args.text).format('YYYY-MM-DD')
+  return args.text ? dayjs(args.text).format('YYYY-MM-DD') : '-'
 }
+
+// Used in Export
+date.isDate = true
+datetime.isDatetime = true
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const mask = (maskObj: any): (args: customRender) => JSX.Element => {
+  return (args: customRender) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    let v: any
+
+    if (typeof maskObj?.[args.text] === 'function')
+      v = maskObj[args.text]()
+    else if (typeof maskObj?.[args.text] === 'string')
+      v = maskObj[args.text]
+    else v = args.text
+
+    return v ?? '-'
+  }
+}
+
+export const arrayToTextRender = (args: customRender) => {
+  return args.text?.join(', ')
+}
+export const actualValueRender = (args: customRender, actualDataIndex: string | string[]) => {
+  return get(args.record, actualDataIndex)
+}
+
+export const longTextWithEllipsis = (len: number): (args: customRender) => JSX.Element => {
+  return (args: customRender) => {
+    if (args.isExport || args.isDetail)
+      return args.text
+
+    return args.text.length > len ? `${args.text.substring(0, len)}...` : args.text
+  }
+}
+
+export const year = (args: customRender) => {
+  return dayjs(args.text).format('YYYY')
+}
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const mask = (args: customRender, maskObj: any): JSX.Element => {
-  let v
+export const maskRenderWithColor = (maskObj: any) => (args: customRender) => {
+  let label: string
+  if (typeof maskObj[args.text] === 'function')
+    label = maskObj[args.text]()
+  else if (typeof maskObj[args.text] === 'string')
+    label = maskObj[args.text]
+  else label = args.text
+
+  if (args.isExport)
+    return label
 
-  if (typeof maskObj?.[args.text] === 'function')
-    v = maskObj[args.text]()
-  else if (typeof maskObj?.[args.text] === 'string')
-    v = maskObj[args.text]
-  else
-    v = args.text
+  const colorMap = {
+    0: '',
+    1: 'blue',
+    2: 'green',
+    3: 'red',
+    4: 'cyan',
+  }
 
-  return <div>{v}</div>
+  return args.text ? h(Tag, { color: colorMap[args.text] }, maskObj[args.text]) : '-'
 }
diff --git a/app/src/components/StdDesign/StdDataDisplay/components/CustomRender.tsx b/app/src/components/StdDesign/StdDataDisplay/components/CustomRender.tsx
new file mode 100644
index 00000000..93699b55
--- /dev/null
+++ b/app/src/components/StdDesign/StdDataDisplay/components/CustomRender.tsx
@@ -0,0 +1,8 @@
+import _ from 'lodash'
+import type { customRender } from '@/components/StdDesign/StdDataDisplay/StdTableTransformer'
+
+export function CustomRender(props: customRender) {
+  return props.column.customRender
+    ? props.column.customRender(props)
+    : _.get(props.record, props.column.dataIndex!)
+}
diff --git a/app/src/components/StdDesign/StdDataDisplay/methods/exportCsv.ts b/app/src/components/StdDesign/StdDataDisplay/methods/exportCsv.ts
index 39f738fc..51e2d478 100644
--- a/app/src/components/StdDesign/StdDataDisplay/methods/exportCsv.ts
+++ b/app/src/components/StdDesign/StdDataDisplay/methods/exportCsv.ts
@@ -4,12 +4,10 @@ import type { ComputedRef } from 'vue'
 import _ from 'lodash'
 import { downloadCsv } from '@/lib/helper'
 import type { Column, StdTableResponse } from '@/components/StdDesign/types'
-import gettext from '@/gettext'
 import type { StdTableProps } from '@/components/StdDesign/StdDataDisplay/StdTable.vue'
 
-const { $gettext } = gettext
 async function exportCsv(props: StdTableProps, pithyColumns: ComputedRef<Column[]>) {
-  const header: { title?: string; key: string | string[] }[] = []
+  const header: { title?: string; key: Column['dataIndex'] }[] = []
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const headerKeys: any[] = []
   const showColumnsMap: Record<string, Column> = {}
@@ -24,8 +22,8 @@ async function exportCsv(props: StdTableProps, pithyColumns: ComputedRef<Column[
       title: t,
       key: column.dataIndex,
     })
-    headerKeys.push(column.dataIndex.toString())
-    showColumnsMap[column.dataIndex.toString()] = column
+    headerKeys.push(column?.dataIndex?.toString())
+    showColumnsMap[column?.dataIndex?.toString() as string] = column
   })
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -34,17 +32,20 @@ async function exportCsv(props: StdTableProps, pithyColumns: ComputedRef<Column[
   let page = 1
   while (hasMore) {
     // 准备 DataSource
-    await props.api!.get_list({ page }).then((r: StdTableResponse) => {
-      if (r.data.length === 0) {
-        hasMore = false
+    await props
+      .api!.get_list({ page })
+      .then((r: StdTableResponse) => {
+        if (r.data.length === 0) {
+          hasMore = false
 
-        return
-      }
-      dataSource.push(...r.data)
-    }).catch((e: { message?: string }) => {
-      message.error(e.message ?? $gettext('Server error'))
-      hasMore = false
-    })
+          return
+        }
+        dataSource.push(...r.data)
+      })
+      .catch((e: { message?: string }) => {
+        message.error(e.message ?? $gettext('Server error'))
+        hasMore = false
+      })
     page += 1
   }
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -59,13 +60,12 @@ async function exportCsv(props: StdTableProps, pithyColumns: ComputedRef<Column[
       const c = showColumnsMap[key]
 
       _data = c?.customRender?.({ text: _data }) ?? _data
-      _.set(obj, c.dataIndex, _data)
+      _.set(obj, c.dataIndex as string, _data)
     })
     data.push(obj)
   })
 
-  downloadCsv(header, data,
-    `${$gettext('Export')}-${props.title}-${dayjs().format('YYYYMMDDHHmmss')}.csv`)
+  downloadCsv(header, data, `${$gettext('Export')}-${props.title}-${dayjs().format('YYYYMMDDHHmmss')}.csv`)
 }
 
 export default exportCsv
diff --git a/app/src/components/StdDesign/StdDataDisplay/methods/sortable.ts b/app/src/components/StdDesign/StdDataDisplay/methods/sortable.ts
index 6c102d08..80aa7a79 100644
--- a/app/src/components/StdDesign/StdDataDisplay/methods/sortable.ts
+++ b/app/src/components/StdDesign/StdDataDisplay/methods/sortable.ts
@@ -1,14 +1,12 @@
 import { message } from 'ant-design-vue'
-import SortableJs from 'sortablejs'
 import type { Ref } from 'vue'
-import gettext from '@/gettext'
+import sortable from 'sortablejs'
+import type { Key } from 'ant-design-vue/es/_util/type'
 import type { StdTableProps } from '@/components/StdDesign/StdDataDisplay/StdTable.vue'
 
-const { $gettext } = gettext
-
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function getRowKey(item: any) {
-  return item.children[0].children[0].dataset.rowKey
+  return item.dataset.rowKey
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -22,15 +20,16 @@ function getTargetData(data: any, indexList: number[]): any {
 
   return target
 }
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function useSortable(props: StdTableProps, randomId: Ref<string>, dataSource: Ref<any[]>,
-  rowsKeyIndexMap: Ref<Record<number, number[]>>, expandKeysList: Ref<number[]>) {
+  rowsKeyIndexMap: Ref<Record<number, number[]>>, expandKeysList: Ref<Key[]>) {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const table: any = document.querySelector(`#std-table-${randomId.value} tbody`)
 
-  // eslint-disable-next-line no-new
-  new SortableJs(table, {
-    handle: '.table-drag-icon',
+  // eslint-disable-next-line no-new,new-cap
+  new sortable(table, {
+    handle: '.ant-table-drag-icon',
     animation: 150,
     sort: true,
     forceFallback: true,
@@ -40,7 +39,7 @@ function useSortable(props: StdTableProps, randomId: Ref<string>, dataSource: Re
     onStart({ item }) {
       const targetRowKey = Number(getRowKey(item))
       if (targetRowKey)
-        expandKeysList.value = expandKeysList.value.filter((_item: number) => _item !== targetRowKey)
+        expandKeysList.value = expandKeysList.value.filter((_item: Key) => _item !== targetRowKey)
     },
     onMove({
       dragged,
@@ -112,8 +111,9 @@ function useSortable(props: StdTableProps, randomId: Ref<string>, dataSource: Re
         _rowIndex[level] += direction
         processChanges(getTargetData(dataSource.value, _rowIndex))
       }
-      console.log('Change row id', newRow.id, 'order', newRow.id, '=>', currentRow.id, ', direction: ', direction,
-        ', changes IDs:', changeIds)
+
+      // console.log('Change row id', newRow.id, 'order', newRow.id, '=>', currentRow.id, ', direction: ', direction,
+      //   ', changes IDs:', changeIds
 
       props.api.update_order({
         target_id: newRow.id,
diff --git a/app/src/components/StdDesign/StdDataEntry/StdDataEntry.vue b/app/src/components/StdDesign/StdDataEntry/StdDataEntry.vue
index 9921e191..9a31c4a1 100644
--- a/app/src/components/StdDesign/StdDataEntry/StdDataEntry.vue
+++ b/app/src/components/StdDesign/StdDataEntry/StdDataEntry.vue
@@ -1,13 +1,16 @@
 <script setup lang="tsx">
 import { Form } from 'ant-design-vue'
-import type { Column, JSXElements } from '@/components/StdDesign/types'
+import type { Ref } from 'vue'
+import type { Column, JSXElements, StdDesignEdit } from '@/components/StdDesign/types'
 import StdFormItem from '@/components/StdDesign/StdDataEntry/StdFormItem.vue'
+import { labelRender } from '@/components/StdDesign/StdDataEntry'
 
 const props = defineProps<{
   dataList: Column[]
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   dataSource: Record<string, any>
   errors?: Record<string, string>
+  type?: 'search' | 'edit'
   layout?: 'horizontal' | 'vertical' | 'inline'
 }>()
 
@@ -27,13 +30,6 @@ const dataSource = computed({
 
 const slots = useSlots()
 
-function labelRender(title?: string | (() => string)) {
-  if (typeof title === 'function')
-    return title()
-
-  return title
-}
-
 function extraRender(extra?: string | (() => string)) {
   if (typeof extra === 'function')
     return extra()
@@ -41,21 +37,58 @@ function extraRender(extra?: string | (() => string)) {
   return extra
 }
 
+const formRef = ref<InstanceType<typeof Form>>()
+
+defineExpose({
+  formRef,
+})
+
 function Render() {
   const template: JSXElements = []
+  const isCreate = inject<Ref<string>>('editMode', ref(''))?.value === 'create'
 
   props.dataList.forEach((v: Column) => {
+    const dataIndex = (v.edit?.actualDataIndex ?? v.dataIndex) as string
+
+    dataSource.value[dataIndex] = props.dataSource[dataIndex]
+    if (props.type === 'search') {
+      if (v.search) {
+        const type = (v.search as StdDesignEdit)?.type || v.edit?.type
+
+        template.push(
+          <StdFormItem
+            label={labelRender(v.title)}
+            extra={extraRender(v.extra)}
+            error={props.errors}
+          >
+            {type?.(v.edit!, dataSource.value, v.dataIndex)}
+          </StdFormItem>,
+        )
+      }
+
+      return
+    }
+
+    // console.log(isCreate && v.hiddenInCreate, !isCreate && v.hiddenInModify)
+    if ((isCreate && v.hiddenInCreate) || (!isCreate && v.hiddenInModify))
+      return
+
     let show = true
     if (v.edit?.show && typeof v.edit.show === 'function')
       show = v.edit.show(props.dataSource)
 
     if (v.edit?.type && show) {
-      template.push(<StdFormItem
-        dataIndex={v.dataIndex}
-      label={labelRender(v.title)}
-      extra={extraRender(v.extra)}
-      error={props.errors}>
-        {v.edit.type(v.edit, dataSource.value, v.dataIndex)}
+      template.push(
+        <StdFormItem
+          key={dataIndex}
+          dataIndex={dataIndex}
+          label={labelRender(v.title)}
+          extra={extraRender(v.extra)}
+          error={props.errors}
+          required={v.edit?.config?.required}
+          hint={v.edit?.hint}
+        >
+          {v.edit.type(v.edit, dataSource.value, dataIndex)}
         </StdFormItem>,
       )
     }
@@ -64,7 +97,7 @@ function Render() {
   if (slots.action)
     template.push(<div class={'std-data-entry-action'}>{slots.action()}</div>)
 
-  return <Form layout={props.layout || 'vertical'}>{template}</Form>
+  return <Form ref={formRef} model={dataSource.value} layout={props.layout || 'vertical'}>{template}</Form>
 }
 </script>
 
diff --git a/app/src/components/StdDesign/StdDataEntry/StdFormItem.vue b/app/src/components/StdDesign/StdDataEntry/StdFormItem.vue
index 59d9a669..48764174 100644
--- a/app/src/components/StdDesign/StdDataEntry/StdFormItem.vue
+++ b/app/src/components/StdDesign/StdDataEntry/StdFormItem.vue
@@ -1,51 +1,42 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useGettext } from 'vue3-gettext'
+import type { Column } from '@/components/StdDesign/types'
 
 const props = defineProps<Props>()
 
-const { $gettext } = useGettext()
-
 export interface Props {
-  dataIndex?: string | string[]
+  dataIndex?: Column['dataIndex']
   label?: string
   extra?: string
+  hint?: string | (() => string)
   error?: {
     [key: string]: string
   }
+  required?: boolean
 }
 
 const tag = computed(() => {
   return props.error?.[props.dataIndex!.toString()] ?? ''
 })
 
-const valid_status = computed(() => {
-  if (tag.value)
-    return 'error'
-  else
-    return 'success'
-})
-
 const help = computed(() => {
   if (tag.value.includes('required'))
-    return () => $gettext('This field should not be empty')
+    return $gettext('This field should not be empty')
 
-  return () => {
-  }
+  return props.hint
 })
 </script>
 
 <template>
   <AFormItem
+    :name="dataIndex as string"
     :label="label"
-    :extra="extra"
-    :validate-status="valid_status"
-    :help="help?.()"
+    :help="help"
+    :required="required"
   >
     <slot />
   </AFormItem>
 </template>
 
 <style scoped lang="less">
-
 </style>
diff --git a/app/src/components/StdDesign/StdDataEntry/components/StdPassword.vue b/app/src/components/StdDesign/StdDataEntry/components/StdPassword.vue
index a11d79ba..78134cdf 100644
--- a/app/src/components/StdDesign/StdDataEntry/components/StdPassword.vue
+++ b/app/src/components/StdDesign/StdDataEntry/components/StdPassword.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-import { useGettext } from 'vue3-gettext'
 
 const props = defineProps<{
   value: string
@@ -20,7 +19,6 @@ const M_value = computed({
 })
 
 const visibility = ref(false)
-const { $gettext } = useGettext()
 function handle_generate() {
   visibility.value = true
   M_value.value = 'xxxx'
diff --git a/app/src/components/StdDesign/StdDataEntry/components/StdSelect.vue b/app/src/components/StdDesign/StdDataEntry/components/StdSelect.vue
index abb31819..5506ed48 100644
--- a/app/src/components/StdDesign/StdDataEntry/components/StdSelect.vue
+++ b/app/src/components/StdDesign/StdDataEntry/components/StdSelect.vue
@@ -1,50 +1,73 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { ref } from 'vue'
 import type { SelectProps } from 'ant-design-vue'
 
 const props = defineProps<{
-  value: string
-  mask: Record<string, string | (() => string)>
+  mask?: Record<string | number, string | (() => string)> | (() => Promise<Record<string | number, string>>)
+  placeholder?: string
+  multiple?: boolean
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  defaultValue?: any
 }>()
 
-const emit = defineEmits(['update:value'])
+const selectedValue = defineModel<string | number | string[] | number[]>('value')
+const options = ref<SelectProps['options']>([])
 
-const options = computed(() => {
-  const _options = ref<SelectProps['options']>([])
+const loadOptions = async () => {
+  options.value = []
+  let actualValue: number | string
+  if (typeof props.mask === 'function') {
+    const getOptions = props.mask as (() => Promise<Record<string | number, string>>)
 
-  for (const [key, value] of Object.entries(props.mask)) {
-    const v = value as () => string
+    const r = await getOptions()
+    for (const [value, label] of Object.entries(r)) {
+      actualValue = value
+      if (typeof selectedValue.value === 'number')
+        actualValue = Number(value)
+      options.value?.push({ label, value: actualValue })
+    }
 
-    _options.value!.push({ label: v?.(), value: key })
+    return
   }
+  for (const [value, label] of Object.entries(props.mask as Record<string | number, string | (() => string)>)) {
+    let actualLabel = label
 
-  return _options
-})
+    if (typeof label === 'function')
+      actualLabel = label()
+
+    actualValue = value
+    if (typeof selectedValue.value === 'number')
+      actualValue = Number(value)
+
+    options.value?.push({ label: actualLabel, value: actualValue })
+    if (actualValue === selectedValue.value)
+      selectedValue.value = actualValue
+  }
+}
+
+const init = () => {
+  loadOptions()
+}
+
+watch(props, init)
+
+onMounted(() => {
+  if (!selectedValue.value && props.defaultValue)
+    selectedValue.value = props.defaultValue
 
-const _value = computed({
-  get() {
-    let v
-
-    if (typeof props.mask?.[props.value] === 'function')
-      v = (props.mask[props.value] as () => string)()
-    else if (typeof props.mask?.[props.value] === 'string')
-      v = props.mask[props.value]
-    else
-      v = props.value
-
-    return v
-  },
-  set(v) {
-    emit('update:value', v)
-  },
+  init()
 })
 </script>
 
 <template>
   <ASelect
-    v-model:value="_value"
-    :options="options.value"
+    v-model:value="selectedValue"
+    :options="options"
+    :placeholder="props.placeholder"
+    :default-active-first-option="false"
+    :mode="props.multiple ? 'multiple' : undefined"
     style="min-width: 180px"
+    :get-popup-container="triggerNode => triggerNode.parentNode"
   />
 </template>
 
diff --git a/app/src/components/StdDesign/StdDataEntry/components/StdSelector.vue b/app/src/components/StdDesign/StdDataEntry/components/StdSelector.vue
index 49e92487..3bc380af 100644
--- a/app/src/components/StdDesign/StdDataEntry/components/StdSelector.vue
+++ b/app/src/components/StdDesign/StdDataEntry/components/StdSelector.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import StdTable from '@/components/StdDesign/StdDataDisplay/StdTable.vue'
-import gettext from '@/gettext'
 import type Curd from '@/api/curd'
 import type { Column } from '@/components/StdDesign/types'
 
@@ -19,7 +18,7 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits(['update:selectedKey', 'changeSelect'])
-const { $gettext } = gettext
+
 const visible = ref(false)
 const M_value = ref('')
 
diff --git a/app/src/components/StdDesign/StdDataEntry/index.tsx b/app/src/components/StdDesign/StdDataEntry/index.tsx
index f9a4ae7e..09397a7e 100644
--- a/app/src/components/StdDesign/StdDataEntry/index.tsx
+++ b/app/src/components/StdDesign/StdDataEntry/index.tsx
@@ -1,88 +1,128 @@
 import { h } from 'vue'
-import { Input, InputNumber, Switch, Textarea } from 'ant-design-vue'
-import _ from 'lodash'
+import {
+  DatePicker,
+  Input,
+  InputNumber,
+  RangePicker,
+  Switch,
+  Textarea,
+} from 'ant-design-vue'
+import type { Dayjs } from 'dayjs'
+import dayjs from 'dayjs'
 import StdDataEntry from './StdDataEntry.vue'
 import StdSelector from './components/StdSelector.vue'
 import StdSelect from './components/StdSelect.vue'
 import StdPassword from './components/StdPassword.vue'
 import type { StdDesignEdit } from '@/components/StdDesign/types'
+import { DATE_FORMAT } from '@/constants'
 
-const fn = _.get
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-function readonly(edit: StdDesignEdit, dataSource: any, dataIndex: any) {
-  return h('p', fn(dataSource, dataIndex))
+export function readonly(edit: StdDesignEdit, dataSource: any, dataIndex: any) {
+  return h('p', dataSource?.[dataIndex] ?? edit?.config?.defaultValue)
 }
 
-function placeholder_helper(edit: StdDesignEdit) {
+export function labelRender(title?: string | (() => string)) {
+  if (typeof title === 'function')
+    return title()
+
+  return title
+}
+
+export function placeholderHelper(edit: StdDesignEdit) {
   return typeof edit.config?.placeholder === 'function' ? edit.config?.placeholder() : edit.config?.placeholder
 }
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-function input(edit: StdDesignEdit, dataSource: any, dataIndex: any) {
+export function input(edit: StdDesignEdit, dataSource: any, dataIndex: any) {
   return h(Input, {
-    'placeholder': placeholder_helper(edit),
-    'value': dataSource?.[dataIndex],
+    'autocomplete': 'off',
+    'placeholder': placeholderHelper(edit),
+    'value': dataSource?.[dataIndex] ?? edit?.config?.defaultValue,
     'onUpdate:value': value => {
       dataSource[dataIndex] = value
     },
   })
 }
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-function inputNumber(edit: StdDesignEdit, dataSource: any, dataIndex: any) {
+export function inputNumber(edit: StdDesignEdit, dataSource: any, dataIndex: any) {
+  if (edit.config?.defaultValue !== undefined)
+    dataSource[dataIndex] = edit.config.defaultValue
+
   return h(InputNumber, {
-    'placeholder': placeholder_helper(edit),
+    'placeholder': placeholderHelper(edit),
     'min': edit.config?.min,
     'max': edit.config?.max,
-    'value': dataSource?.[dataIndex],
+    'value': dataSource?.[dataIndex] ?? edit?.config?.defaultValue,
     'onUpdate:value': value => {
       dataSource[dataIndex] = value
     },
+    'addon-before': edit.config?.addonBefore,
+    'addon-after': edit.config?.addonAfter,
+    'prefix': edit.config?.prefix,
+    'suffix': edit.config?.suffix,
   })
 }
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-function textarea(edit: StdDesignEdit, dataSource: any, dataIndex: any) {
+export function textarea(edit: StdDesignEdit, dataSource: any, dataIndex: any) {
   return h(Textarea, {
-    'placeholder': placeholder_helper(edit),
-    'value': dataSource?.[dataIndex],
+    'placeholder': placeholderHelper(edit),
+    'value': dataSource?.[dataIndex] ?? edit?.config?.defaultValue,
     'onUpdate:value': value => {
       dataSource[dataIndex] = value
     },
   })
 }
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-function password(edit: StdDesignEdit, dataSource: any, dataIndex: any) {
-  return <StdPassword
-    v-model:value={dataSource[dataIndex]}
-    value={dataSource[dataIndex]}
-    generate={edit.config?.generate}
-    placeholder={placeholder_helper(edit)}
-  />
+export function password(edit: StdDesignEdit, dataSource: any, dataIndex: any) {
+  return (
+    <StdPassword
+      v-model:value={dataSource[dataIndex]}
+      value={dataSource[dataIndex] ?? edit?.config?.defaultValue}
+      generate={edit.config?.generate}
+      placeholder={placeholderHelper(edit)}
+    />
+  )
 }
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-function select(edit: StdDesignEdit, dataSource: any, dataIndex: any) {
-  return <StdSelect
-    v-model:value={dataSource[dataIndex]}
-    value={dataSource[dataIndex]}
-    mask={edit.mask as Record<string, () => string>}
-  />
+export function select(edit: StdDesignEdit, dataSource: any, dataIndex: any) {
+  const actualDataIndex = edit?.actualDataIndex ?? dataIndex
+
+  return (
+    <StdSelect
+      v-model:value={dataSource[actualDataIndex]}
+      mask={edit.mask}
+      placeholder={placeholderHelper(edit)}
+      multiple={edit.select?.multiple}
+      defaultValue={edit.config?.defaultValue}
+    />
+  )
 }
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-function selector(edit: StdDesignEdit, dataSource: any, dataIndex: any) {
-  return <StdSelector
-    v-model:selectedKey={dataSource[dataIndex]}
-    selectedKey={dataSource[dataIndex]}
-    recordValueIndex={edit.selector?.recordValueIndex}
-    selectionType={edit.selector?.selectionType}
-    api={edit.selector?.api}
-    columns={edit.selector?.columns}
-    disableSearch={edit.selector?.disableSearch}
-    getParams={edit.selector?.getParams}
-    description={edit.selector?.description}
-  />
+export function selector(edit: StdDesignEdit, dataSource: any, dataIndex: any) {
+  return (
+    <StdSelector
+      v-model:selectedKey={dataSource[dataIndex]}
+      selectedKey={dataSource[dataIndex] || edit?.config?.defaultValue}
+      recordValueIndex={edit.selector?.recordValueIndex}
+      selectionType={edit.selector?.selectionType}
+      api={edit.selector?.api}
+      columns={edit.selector?.columns}
+      disableSearch={edit.selector?.disableSearch}
+      getParams={edit.selector?.getParams}
+      description={edit.selector?.description}
+    />
+  )
 }
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-function switcher(edit: StdDesignEdit, dataSource: any, dataIndex: any) {
+export function switcher(edit: StdDesignEdit, dataSource: any, dataIndex: any) {
   return h(Switch, {
-    'checked': dataSource?.[dataIndex],
+    'checked': dataSource?.[dataIndex] ?? edit?.config?.defaultValue,
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     'onUpdate:checked': (value: any) => {
       dataSource[dataIndex] = value
@@ -90,15 +130,33 @@ function switcher(edit: StdDesignEdit, dataSource: any, dataIndex: any) {
   })
 }
 
-export {
-  readonly,
-  input,
-  textarea,
-  select,
-  selector,
-  password,
-  inputNumber,
-  switcher,
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function datePicker(edit: StdDesignEdit, dataSource: any, dataIndex: any) {
+  const date: Dayjs | undefined = dataSource?.[dataIndex] ? dayjs(dataSource?.[dataIndex]) : undefined
+
+  return (
+    <DatePicker
+      format={DATE_FORMAT}
+      value={date}
+      onChange={(_, dataString) => dataSource[dataIndex] = dataString ?? undefined}
+    />
+  )
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function dateRangePicker(edit: StdDesignEdit, dataSource: any, dataIndex: any) {
+  const dates: [Dayjs, Dayjs] = dataSource
+    ?.[dataIndex]
+    ?.filter((item: string) => !!item)
+    ?.map((item: string) => dayjs(item))
+
+  return (
+    <RangePicker
+      format={DATE_FORMAT}
+      value={dates}
+      onChange={(_, dateStrings: [string, string]) => dataSource[dataIndex] = dateStrings}
+    />
+  )
 }
 
 export default StdDataEntry
diff --git a/app/src/components/StdDesign/types.d.ts b/app/src/components/StdDesign/types.d.ts
index bae11d1b..05bc76bd 100644
--- a/app/src/components/StdDesign/types.d.ts
+++ b/app/src/components/StdDesign/types.d.ts
@@ -1,25 +1,35 @@
 import Curd, {Pagination} from '@/api/curd'
-import { Ref } from 'vue'
-import type { JSX } from 'vue/jsx'
+import {Ref} from 'vue'
+import type {JSX} from 'vue/jsx'
+import {TableColumnType} from "ant-design-vue"
+
 export type JSXElements = JSX.Element[]
 
 export interface StdDesignEdit {
-  type?: function // component type
+  type?: (edit: StdDesignEdit, dataSource: any, dataIndex: any) => JSX.Element // component type
 
   show?: (dataSource: any) => boolean // show component or not
 
   batch?: boolean // batch edit
 
-  mask?: Record<string, () => string> // use for select-option
+  mask?: Record<string | number, string | (() => string)> | (() => Promise<Record<string | number, string>>) // use for select-option
 
   rules?: [] // validator rules
 
+  hint?: string | (() => string) // hint form item
+
+  actualDataIndex?: string
+
+  select?: {
+    multiple?: boolean
+  }
+
   selector?: {
     getParams?: {}
     recordValueIndex: any // relative to api return
     selectionType: any
-    api: Curd,
-    valueApi?: Curd,
+    api: Curd
+    valueApi?: Curd
     columns: any
     disableSearch?: boolean
     description?: string
@@ -28,6 +38,11 @@ export interface StdDesignEdit {
     dataSourceValueIndex?: any // relative to dataSource
   } // StdSelector Config
 
+  upload?: {
+    limit?: number // upload file limitation
+    action: string // upload url
+  }
+
   config?: {
     label?: string | (() => string) // label for form item
     size?: string // class size of Std image upload
@@ -36,7 +51,13 @@ export interface StdDesignEdit {
     min?: number // min value for input number
     max?: number // max value for input number
     error_messages?: Ref
-    hint?: string | (() => string) // hint form item
+    required?: boolean
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    defaultValue?: any
+    addonBefore?: string // for inputNumber
+    addonAfter?: string // for inputNumber
+    prefix?: string // for inputNumber
+    suffix?: string // for inputNumber
   }
 
   flex?: Flex
@@ -50,39 +71,36 @@ export interface Flex {
   xxl?: string | number | boolean
 }
 
-export interface Column {
-  title?: string | (() => string);
-  dataIndex: string | string[];
-  edit?: StdDesignEdit;
-  customRender?: function;
-  extra?: string | (() => string);
-  pithy?: boolean;
-  search?: boolean | StdDesignEdit;
-  sortable?: boolean;
-  hidden?: boolean;
-  width?: string | number;
-  handle?: boolean;
-  hiddenInTrash?: boolean;
-  hiddenInCreate?: boolean;
-  hiddenInModify?: boolean;
-  batch?: boolean;
-}
-
-
-export interface StdTableProvideData {
-  displayColumns: Column[];
-  pithyColumns: Column[];
-  columnsMap: { [key: string]: Column };
-  displayKeys: string[];
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  editItem: (id: number, data: any, index: string | number) => void;
-  deleteItem: (id: number, index: string | number) => void;
-  recoverItem: (id: number) => {};
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  params: any;
-  dataSource: any;
-  get_list: () => void;
-  loading: Ref<boolean>;
+export interface Column extends TableColumnType {
+  title?: string | (() => string)
+  edit?: StdDesignEdit
+  extra?: string | (() => string)
+  pithy?: boolean
+  search?: boolean | StdDesignEdit
+  sortable?: boolean
+  handle?: boolean
+  hiddenInTable?: boolean
+  hiddenInTrash?: boolean
+  hiddenInCreate?: boolean
+  hiddenInModify?: boolean
+  hiddenInDetail?: boolean
+  hiddenInExport?: boolean
+  import?: boolean
+  batch?: boolean
+  customRender?: function
+  selector?: {
+    getParams?: {}
+    recordValueIndex: any // relative to api return
+    selectionType: any
+    api: Curd
+    valueApi?: Curd
+    columns: any
+    disableSearch?: boolean
+    description?: string
+    bind?: any
+    itemKey?: any // default is id
+    dataSourceValueIndex?: any // relative to dataSource
+  }
 }
 
 export interface StdTableResponse {
diff --git a/app/src/components/SwitchAppearance/SwitchAppearance.vue b/app/src/components/SwitchAppearance/SwitchAppearance.vue
index 3dc59864..496a5dfc 100644
--- a/app/src/components/SwitchAppearance/SwitchAppearance.vue
+++ b/app/src/components/SwitchAppearance/SwitchAppearance.vue
@@ -1,14 +1,11 @@
 <script lang="ts" setup>
 import type { Ref } from 'vue'
 import { computed, inject } from 'vue'
-import { useGettext } from 'vue3-gettext'
 import VPIconMoon from './icons/VPIconMoon.vue'
 import VPIconSun from './icons/VPIconSun.vue'
 import VPSwitch from '@/components/VPSwitch/VPSwitch.vue'
 import { useSettingsStore } from '@/pinia'
 
-const { $gettext } = useGettext()
-
 const settings = useSettingsStore()
 const devicePrefersTheme = inject('devicePrefersTheme') as Ref<string>
 const isDark = computed(() => settings.theme === 'dark')
diff --git a/app/src/constants/index.ts b/app/src/constants/index.ts
index be3081fe..1bbb5c18 100644
--- a/app/src/constants/index.ts
+++ b/app/src/constants/index.ts
@@ -1,6 +1,5 @@
-import gettext from '@/gettext'
+export const DATE_FORMAT = 'YYYY-MM-DD'
 
-const { $gettext } = gettext
 export enum AutoCertState {
   Disable = 0,
   Enable = 1,
diff --git a/app/src/gettext.ts b/app/src/gettext.ts
index 7233dc28..d80f954d 100644
--- a/app/src/gettext.ts
+++ b/app/src/gettext.ts
@@ -1,11 +1,13 @@
 import { createGettext } from 'vue3-gettext'
 import i18n from '../i18n.json'
 
-export default createGettext({
+const gettext = createGettext({
   availableLanguages: i18n,
   defaultLanguage: 'en',
   translations: {},
   silent: true,
 })
 
-export class useGettext {}
+export const { $gettext, $pgettext, $ngettext, $npgettext } = gettext
+
+export default gettext
diff --git a/app/src/language/constants.ts b/app/src/language/constants.ts
index 0e0d87f1..1e21e891 100644
--- a/app/src/language/constants.ts
+++ b/app/src/language/constants.ts
@@ -1,7 +1,3 @@
-import gettext from '@/gettext'
-
-const { $gettext } = gettext
-
 export const msg = [
   $gettext('The username or password is incorrect'),
   $gettext('Prohibit changing root password in demo'),
diff --git a/app/src/layouts/HeaderLayout.vue b/app/src/layouts/HeaderLayout.vue
index e2d6b75b..b3bcb00a 100644
--- a/app/src/layouts/HeaderLayout.vue
+++ b/app/src/layouts/HeaderLayout.vue
@@ -3,7 +3,6 @@ import { message } from 'ant-design-vue'
 import { HomeOutlined, LogoutOutlined, MenuUnfoldOutlined } from '@ant-design/icons-vue'
 import { useRouter } from 'vue-router'
 import SetLanguage from '@/components/SetLanguage/SetLanguage.vue'
-import gettext from '@/gettext'
 import auth from '@/api/auth'
 import NginxControl from '@/components/NginxControl/NginxControl.vue'
 import SwitchAppearance from '@/components/SwitchAppearance/SwitchAppearance.vue'
@@ -13,8 +12,6 @@ const emit = defineEmits<{
   clickUnFold: [void]
 }>()
 
-const { $gettext } = gettext
-
 const router = useRouter()
 
 function logout() {
diff --git a/app/src/layouts/SideBar.vue b/app/src/layouts/SideBar.vue
index 2f5359d5..78fb44f3 100644
--- a/app/src/layouts/SideBar.vue
+++ b/app/src/layouts/SideBar.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import type { ComputedRef } from 'vue'
+import type { ComputedRef, Ref } from 'vue'
 import type { AntdIconType } from '@ant-design/icons-vue/lib/components/AntdIcon'
 import type { IconComponentProps } from '@ant-design/icons-vue/es/components/Icon'
+import type { Key } from 'ant-design-vue/es/_util/type'
 import Logo from '@/components/Logo/Logo.vue'
 import { routes } from '@/routes'
 import EnvIndicator from '@/components/EnvIndicator/EnvIndicator.vue'
@@ -10,7 +11,7 @@ const route = useRoute()
 
 const openKeys = ref([openSub()])
 
-const selectedKey = ref([route.name])
+const selectedKey = ref([route.name]) as Ref<Key[]>
 
 function openSub() {
   const path = route.path
@@ -20,7 +21,7 @@ function openSub() {
 }
 
 watch(route, () => {
-  selectedKey.value = [route.name]
+  selectedKey.value = [route.name as Key]
 
   const sub = openSub()
   const p = openKeys.value.indexOf(sub)
@@ -36,6 +37,7 @@ interface meta {
   icon: AntdIconType
   hiddenInSidebar: boolean
   hideChildren: boolean
+  name: () => string
 }
 
 interface sidebar {
@@ -54,7 +56,7 @@ const visible: ComputedRef<sidebar[]> = computed(() => {
 
     const t: sidebar = {
       path: s.path,
-      name: s.name,
+      name: s?.meta?.name ?? (() => ''),
       meta: s.meta as unknown as meta,
       children: [],
     };
@@ -90,7 +92,7 @@ const visible: ComputedRef<sidebar[]> = computed(() => {
           @click="$router.push(`/${s.path}`).catch(() => {})"
         >
           <Component :is="s.meta.icon as IconComponentProps" />
-          <span>{{ s.name() }}</span>
+          <span>{{ s.meta?.name() }}</span>
         </AMenuItem>
 
         <ASubMenu
@@ -99,14 +101,14 @@ const visible: ComputedRef<sidebar[]> = computed(() => {
         >
           <template #title>
             <Component :is="s.meta.icon as IconComponentProps" />
-            <span>{{ s.name() }}</span>
+            <span>{{ s?.meta?.name() }}</span>
           </template>
           <AMenuItem
             v-for="child in s.children"
             :key="child.name"
           >
             <RouterLink :to="`/${s.path}/${child.path}`">
-              {{ child.name() }}
+              {{ child?.meta?.name() }}
             </RouterLink>
           </AMenuItem>
         </ASubMenu>
diff --git a/app/src/lib/http/index.ts b/app/src/lib/http/index.ts
index 53927490..0ede1d91 100644
--- a/app/src/lib/http/index.ts
+++ b/app/src/lib/http/index.ts
@@ -84,6 +84,10 @@ const http = {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     return instance.delete<any, any>(url, config)
   },
+  patch(url: string, config: AxiosRequestConfig = {}) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return instance.patch<any, any>(url, config)
+  },
 }
 
 export default http
diff --git a/app/src/routes/index.ts b/app/src/routes/index.ts
index 57bd8f95..4b2b0bcf 100644
--- a/app/src/routes/index.ts
+++ b/app/src/routes/index.ts
@@ -1,5 +1,5 @@
+import type { RouteRecordRaw } from 'vue-router'
 import { createRouter, createWebHashHistory } from 'vue-router'
-import type { AntDesignOutlinedIconType } from '@ant-design/icons-vue/lib/icons/AntDesignOutlined'
 
 import {
   BellOutlined,
@@ -17,253 +17,284 @@ import {
 } from '@ant-design/icons-vue'
 import NProgress from 'nprogress'
 
-import gettext from '@/gettext'
 import { useUserStore } from '@/pinia'
 
 import 'nprogress/nprogress.css'
 
-const { $gettext } = gettext
-
-export interface Route {
-  path: string
-  name: () => string
-  component?: () => Promise<typeof import('*.vue')>
-  redirect?: string
-  meta?: {
-    icon?: AntDesignOutlinedIconType
-    hiddenInSidebar?: boolean
-    hideChildren?: boolean
-    noAuth?: boolean
-    status_code?: number
-    error?: () => string
-  }
-  children?: Route[]
-}
-
-export const routes: Route[] = [
+export const routes: RouteRecordRaw[] = [
   {
     path: '/',
-    name: () => $gettext('Home'),
+    name: 'Home',
     component: () => import('@/layouts/BaseLayout.vue'),
     redirect: '/dashboard',
+    meta: {
+      name: () => $gettext('Home'),
+    },
     children: [
       {
         path: 'dashboard',
         component: () => import('@/views/dashboard/DashBoard.vue'),
-        name: () => $gettext('Dashboard'),
+        name: 'Dashboard',
         meta: {
+          name: () => $gettext('Dashboard'),
           icon: HomeOutlined,
         },
       },
       {
         path: 'domain',
-        name: () => $gettext('Manage Sites'),
+        name: 'Manage Sites',
         component: () => import('@/layouts/BaseRouterView.vue'),
         meta: {
+          name: () => $gettext('Manage Sites'),
           icon: CloudOutlined,
         },
         redirect: '/domain/list',
         children: [{
           path: 'list',
-          name: () => $gettext('Sites List'),
+          name: 'Sites List',
           component: () => import('@/views/domain/DomainList.vue'),
+          meta: {
+            name: () => $gettext('Sites List'),
+          },
         }, {
           path: 'add',
-          name: () => $gettext('Add Site'),
+          name: 'Add Site',
           component: () => import('@/views/domain/DomainAdd.vue'),
+          meta: {
+            name: () => $gettext('Add Site'),
+          },
         }, {
           path: ':name',
-          name: () => $gettext('Edit Site'),
+          name: 'Edit Site',
           component: () => import('@/views/domain/DomainEdit.vue'),
           meta: {
+            name: () => $gettext('Edit Site'),
             hiddenInSidebar: true,
           },
         }],
       },
       {
         path: 'streams',
-        name: () => $gettext('Manage Streams'),
+        name: 'Manage Streams',
         component: () => import('@/views/stream/StreamList.vue'),
         meta: {
+          name: () => $gettext('Manage Streams'),
           icon: ShareAltOutlined,
         },
       },
       {
         path: 'stream/:name',
-        name: () => $gettext('Edit Stream'),
+        name: 'Edit Stream',
         component: () => import('@/views/stream/StreamEdit.vue'),
         meta: {
+          name: () => $gettext('Edit Stream'),
           hiddenInSidebar: true,
         },
       },
       {
         path: 'config',
-        name: () => $gettext('Manage Configs'),
+        name: 'Manage Configs',
         component: () => import('@/views/config/Config.vue'),
         meta: {
+          name: () => $gettext('Manage Configs'),
           icon: FileOutlined,
           hideChildren: true,
         },
       },
       {
         path: 'config/:name+/edit',
-        name: () => $gettext('Edit Configuration'),
+        name: 'Edit Configuration',
         component: () => import('@/views/config/ConfigEdit.vue'),
         meta: {
+          name: () => $gettext('Edit Configuration'),
           hiddenInSidebar: true,
         },
       },
       {
         path: 'certificates',
-        name: () => $gettext('Certificates'),
+        name: 'Certificates',
         component: () => import('@/layouts/BaseRouterView.vue'),
         redirect: '/certificates/list',
         meta: {
+          name: () => $gettext('Certificates'),
           icon: SafetyCertificateOutlined,
         },
         children: [
+          {
+            path: 'acme_users',
+            name: 'ACME User',
+            component: () => import('@/views/certificate/ACMEUser.vue'),
+            meta: {
+              name: () => $gettext('ACME User'),
+            },
+          },
           {
             path: 'list',
-            name: () => $gettext('Certificates List'),
+            name: 'Certificates List',
             component: () => import('@/views/certificate/Certificate.vue'),
+            meta: {
+              name: () => $gettext('Certificates List'),
+            },
           },
           {
             path: ':id',
-            name: () => $gettext('Modify Certificate'),
+            name: 'Modify Certificate',
             component: () => import('@/views/certificate/CertificateEditor.vue'),
             meta: {
+              name: () => $gettext('Modify Certificate'),
               hiddenInSidebar: true,
             },
           },
           {
             path: 'import',
-            name: () => $gettext('Import Certificate'),
+            name: 'Import Certificate',
             component: () => import('@/views/certificate/CertificateEditor.vue'),
             meta: {
+              name: () => $gettext('Import Certificate'),
               hiddenInSidebar: true,
             },
           },
           {
             path: 'dns_credential',
-            name: () => $gettext('DNS Credentials'),
+            name: 'DNS Credentials',
             component: () => import('@/views/certificate/DNSCredential.vue'),
+            meta: {
+              name: () => $gettext('DNS Credentials'),
+            },
           },
         ],
       },
       {
         path: 'terminal',
-        name: () => $gettext('Terminal'),
+        name: 'Terminal',
         component: () => import('@/views/pty/Terminal.vue'),
         meta: {
+          name: () => $gettext('Terminal'),
           icon: CodeOutlined,
         },
       },
       {
         path: 'nginx_log',
-        name: () => $gettext('Nginx Log'),
+        name: 'Nginx Log',
         meta: {
+          name: () => $gettext('Nginx Log'),
           icon: FileTextOutlined,
         },
         children: [{
           path: 'access',
-          name: () => $gettext('Access Logs'),
+          name: 'Access Logs',
           component: () => import('@/views/nginx_log/NginxLog.vue'),
+          meta: {
+            name: () => $gettext('Access Logs'),
+          },
         }, {
           path: 'error',
-          name: () => $gettext('Error Logs'),
+          name: 'Error Logs',
           component: () => import('@/views/nginx_log/NginxLog.vue'),
+          meta: {
+            name: () => $gettext('Error Logs'),
+          },
         }, {
           path: 'site',
-          name: () => $gettext('Site Logs'),
+          name: 'Site Logs',
           component: () => import('@/views/nginx_log/NginxLog.vue'),
           meta: {
+            name: () => $gettext('Site Logs'),
             hiddenInSidebar: true,
           },
         }],
       },
       {
         path: 'environment',
-        name: () => $gettext('Environment'),
+        name: 'Environment',
         component: () => import('@/views/environment/Environment.vue'),
         meta: {
+          name: () => $gettext('Environment'),
           icon: DatabaseOutlined,
         },
       },
       {
         path: 'notifications',
-        name: () => $gettext('Notifications'),
+        name: 'Notifications',
         component: () => import('@/views/notification/Notification.vue'),
         meta: {
+          name: () => $gettext('Notifications'),
           icon: BellOutlined,
         },
       },
       {
         path: 'user',
-        name: () => $gettext('Manage Users'),
+        name: 'Manage Users',
         component: () => import('@/views/user/User.vue'),
         meta: {
+          name: () => $gettext('Manage Users'),
           icon: UserOutlined,
         },
       },
       {
         path: 'preference',
-        name: () => $gettext('Preference'),
+        name: 'Preference',
         component: () => import('@/views/preference/Preference.vue'),
         meta: {
+          name: () => $gettext('Preference'),
           icon: SettingOutlined,
         },
       },
       {
         path: 'system',
-        name: () => $gettext('System'),
+        name: 'System',
         redirect: 'system/about',
         meta: {
+          name: () => $gettext('System'),
           icon: InfoCircleOutlined,
         },
         children: [{
           path: 'about',
-          name: () => $gettext('About'),
+          name: 'About',
           component: () => import('@/views/system/About.vue'),
+          meta: {
+            name: () => $gettext('About'),
+          },
         }, {
           path: 'upgrade',
-          name: () => $gettext('Upgrade'),
+          name: 'Upgrade',
           component: () => import('@/views/system/Upgrade.vue'),
+          meta: {
+            name: () => $gettext('Upgrade'),
+          },
         }],
       },
     ],
   },
   {
     path: '/install',
-    name: () => $gettext('Install'),
+    name: 'Install',
     component: () => import('@/views/other/Install.vue'),
-    meta: { noAuth: true },
+    meta: { name: () => $gettext('Install'), noAuth: true },
   },
   {
     path: '/login',
-    name: () => $gettext('Login'),
+    name: 'Login',
     component: () => import('@/views/other/Login.vue'),
-    meta: { noAuth: true },
+    meta: { name: () => $gettext('Login'), noAuth: true },
   },
   {
     path: '/:pathMatch(.*)*',
-    name: () => $gettext('Not Found'),
+    name: 'Not Found',
     component: () => import('@/views/other/Error.vue'),
-    meta: { noAuth: true, status_code: 404, error: () => $gettext('Not Found') },
+    meta: { name: () => $gettext('Not Found'), noAuth: true, status_code: 404, error: () => $gettext('Not Found') },
   },
 ]
 
 const router = createRouter({
   history: createWebHashHistory(),
-
-  // @ts-expect-error routes type error
   routes,
 })
 
 NProgress.configure({ showSpinner: false })
 
 router.beforeEach((to, _, next) => {
-  // @ts-expect-error name type
-  document.title = `${to.name?.()} | Nginx UI`
+  document.title = `${to?.meta.name?.() ?? ''} | Nginx UI`
 
   NProgress.start()
 
diff --git a/app/src/routes/type.d.ts b/app/src/routes/type.d.ts
new file mode 100644
index 00000000..f8e87e6a
--- /dev/null
+++ b/app/src/routes/type.d.ts
@@ -0,0 +1,20 @@
+// src/types/vue-router.d.ts
+import 'vue-router'
+
+import type {AntDesignOutlinedIconType} from '@ant-design/icons-vue/lib/icons/AntDesignOutlined'
+
+/**
+ * @description Extend the types of router meta
+ */
+
+declare module 'vue-router' {
+  interface RouteMeta {
+    name: (() => string)
+    icon?: AntDesignOutlinedIconType
+    hiddenInSidebar?: boolean
+    hideChildren?: boolean
+    noAuth?: boolean
+    status_code?: number
+    error?: () => string
+  }
+}
diff --git a/app/src/types.d.ts b/app/src/types.d.ts
new file mode 100644
index 00000000..d3d0fef8
--- /dev/null
+++ b/app/src/types.d.ts
@@ -0,0 +1 @@
+export type CheckedType = boolean | string | number
diff --git a/app/src/version.json b/app/src/version.json
index ab2f1266..1ebce7ca 100644
--- a/app/src/version.json
+++ b/app/src/version.json
@@ -1 +1 @@
-{"version":"2.0.0-beta.18","build_id":123,"total_build":327}
\ No newline at end of file
+{"version":"2.0.0-beta.18","build_id":126,"total_build":330}
\ No newline at end of file
diff --git a/app/src/views/certificate/ACMEUser.vue b/app/src/views/certificate/ACMEUser.vue
new file mode 100644
index 00000000..d696759e
--- /dev/null
+++ b/app/src/views/certificate/ACMEUser.vue
@@ -0,0 +1,109 @@
+<script setup lang="tsx">
+import { Tag, message } from 'ant-design-vue'
+import type { Column } from '@/components/StdDesign/types'
+import { StdCurd } from '@/components/StdDesign/StdDataDisplay'
+import type { AcmeUser } from '@/api/acme_user'
+import acme_user from '@/api/acme_user'
+import { input } from '@/components/StdDesign/StdDataEntry'
+import type { customRender } from '@/components/StdDesign/StdDataDisplay/StdTableTransformer'
+import { datetime } from '@/components/StdDesign/StdDataDisplay/StdTableTransformer'
+
+const columns: Column[] = [
+  {
+    title: () => $gettext('Name'),
+    dataIndex: 'name',
+    sortable: true,
+    pithy: true,
+    edit: {
+      type: input,
+    },
+  }, {
+    title: () => $gettext('Email'),
+    dataIndex: 'email',
+    sortable: true,
+    pithy: true,
+    edit: {
+      type: input,
+    },
+  }, {
+    title: () => $gettext('CA Dir'),
+    dataIndex: 'ca_dir',
+    sortable: true,
+    pithy: true,
+    edit: {
+      type: input,
+      config: {
+        placeholder() {
+          return $gettext('If left black, the default CA Dir will be used.')
+        },
+      },
+    },
+  }, {
+    title: () => $gettext('Status'),
+    dataIndex: ['registration', 'body', 'status'],
+    customRender: (args: customRender) => {
+      if (args.text === 'valid')
+        return <Tag color="green">{$gettext('Valid')}</Tag>
+
+      return <Tag color="red">{$gettext('Invalid')}</Tag>
+    },
+    sortable: true,
+    pithy: true,
+  }, {
+    title: () => $gettext('Updated at'),
+    dataIndex: 'updated_at',
+    customRender: datetime,
+    sortable: true,
+    pithy: true,
+  }, {
+    title: () => $gettext('Action'),
+    dataIndex: 'action',
+  },
+]
+
+function register(id: number, data: AcmeUser) {
+  acme_user.register(id).then(r => {
+    data.registration = r.registration
+    message.success($gettext('Register successfully'))
+  }).catch(e => {
+    message.error(e?.message ?? $gettext('Register failed'))
+  })
+}
+</script>
+
+<template>
+  <StdCurd
+    :title="$gettext('ACME User')"
+    :columns="columns"
+    :api="acme_user"
+  >
+    <template #edit="{ data }: {data: AcmeUser}">
+      <template v-if="data.id > 0 ">
+        <div class="mb-2">
+          <label>{{ $gettext('Registration Status') }}</label>
+        </div>
+        <template v-if="data?.registration?.body?.status === 'valid'">
+          <ATag color="green">
+            {{ $gettext('Valid') }}
+          </ATag>
+        </template>
+        <template v-else>
+          <ATag color="red">
+            {{ $gettext('Invalid') }}
+          </ATag>
+        </template>
+
+        <AButton
+          type="link"
+          @click="register(data.id, data)"
+        >
+          {{ $gettext('Register') }}
+        </AButton>
+      </template>
+    </template>
+  </StdCurd>
+</template>
+
+<style scoped lang="less">
+
+</style>
diff --git a/app/src/views/certificate/Certificate.vue b/app/src/views/certificate/Certificate.vue
index ce2b1ff7..982169c9 100644
--- a/app/src/views/certificate/Certificate.vue
+++ b/app/src/views/certificate/Certificate.vue
@@ -1,21 +1,17 @@
 <script setup lang="tsx">
-import { useGettext } from 'vue3-gettext'
 import { Badge, Tag } from 'ant-design-vue'
-import { h, provide } from 'vue'
 import dayjs from 'dayjs'
 import { CloudUploadOutlined, SafetyCertificateOutlined } from '@ant-design/icons-vue'
 import { input } from '@/components/StdDesign/StdDataEntry'
 import type { customRender } from '@/components/StdDesign/StdDataDisplay/StdTableTransformer'
 import { datetime } from '@/components/StdDesign/StdDataDisplay/StdTableTransformer'
 import cert from '@/api/cert'
-import type { Column } from '@/components/StdDesign/types'
+import type { Column, JSXElements } from '@/components/StdDesign/types'
 import type { Cert } from '@/api/cert'
 import { AutoCertState } from '@/constants'
 import StdTable from '@/components/StdDesign/StdDataDisplay/StdTable.vue'
 import WildcardCertificate from '@/views/certificate/WildcardCertificate.vue'
 
-const { $gettext } = useGettext()
-
 function notShowInAutoCert(record: Cert) {
   return record.auto_cert !== AutoCertState.Enable
 }
@@ -41,7 +37,7 @@ const columns: Column[] = [{
   title: () => $gettext('Type'),
   dataIndex: 'auto_cert',
   customRender: (args: customRender) => {
-    const template = []
+    const template: JSXElements = []
     const { text } = args
     const managed = $gettext('Managed Certificate')
     const general = $gettext('General Certificate')
@@ -68,7 +64,7 @@ const columns: Column[] = [{
     type: input,
     show: notShowInAutoCert,
   },
-  hidden: true,
+  hiddenInTable: true,
 }, {
   title: () => $gettext('SSL Certificate Key Path'),
   dataIndex: 'ssl_certificate_key_path',
@@ -76,12 +72,12 @@ const columns: Column[] = [{
     type: input,
     show: notShowInAutoCert,
   },
-  hidden: true,
+  hiddenInTable: true,
 }, {
   title: () => $gettext('Status'),
   dataIndex: 'certificate_info',
   customRender: (args: customRender) => {
-    const template = []
+    const template: JSXElements = []
 
     const text = args.text?.not_before && args.text?.not_after && !dayjs().isBefore(args.text?.not_before) && !dayjs().isAfter(args.text?.not_after)
 
diff --git a/app/src/views/certificate/CertificateEditor.vue b/app/src/views/certificate/CertificateEditor.vue
index 71b6fb2f..c484aff2 100644
--- a/app/src/views/certificate/CertificateEditor.vue
+++ b/app/src/views/certificate/CertificateEditor.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { useGettext } from 'vue3-gettext'
 import type { Ref } from 'vue'
 import { message } from 'ant-design-vue'
 import { AutoCertState } from '@/constants'
@@ -11,8 +10,6 @@ import cert from '@/api/cert'
 import FooterToolBar from '@/components/FooterToolbar/FooterToolBar.vue'
 import RenewCert from '@/views/certificate/RenewCert.vue'
 
-const { $gettext } = useGettext()
-
 const route = useRoute()
 
 const id = computed(() => {
diff --git a/app/src/views/certificate/DNSChallenge.vue b/app/src/views/certificate/DNSChallenge.vue
index 8f26b95a..83adeb6d 100644
--- a/app/src/views/certificate/DNSChallenge.vue
+++ b/app/src/views/certificate/DNSChallenge.vue
@@ -1,11 +1,9 @@
 <script setup lang="ts">
-import { useGettext } from 'vue3-gettext'
 import type { SelectProps } from 'ant-design-vue'
 import type { Ref } from 'vue'
 import type { DNSProvider } from '@/api/auto_cert'
 import auto_cert from '@/api/auto_cert'
 
-const { $gettext } = useGettext()
 const providers = ref([]) as Ref<DNSProvider[]>
 
 // This data is provided by the Top StdCurd component,
diff --git a/app/src/views/certificate/DNSCredential.vue b/app/src/views/certificate/DNSCredential.vue
index d7325543..fa72e621 100644
--- a/app/src/views/certificate/DNSCredential.vue
+++ b/app/src/views/certificate/DNSCredential.vue
@@ -1,5 +1,4 @@
 <script setup lang="tsx">
-import { useGettext } from 'vue3-gettext'
 import DNSChallenge from './DNSChallenge.vue'
 import { datetime } from '@/components/StdDesign/StdDataDisplay/StdTableTransformer'
 import dns_credential from '@/api/dns_credential'
@@ -7,8 +6,6 @@ import StdCurd from '@/components/StdDesign/StdDataDisplay/StdCurd.vue'
 import { input } from '@/components/StdDesign/StdDataEntry'
 import type { Column } from '@/components/StdDesign/types'
 
-const { $gettext } = useGettext()
-
 const columns: Column[] = [{
   title: () => $gettext('Name'),
   dataIndex: 'name',
diff --git a/app/src/views/certificate/RenewCert.vue b/app/src/views/certificate/RenewCert.vue
index a8bd8513..957423a9 100644
--- a/app/src/views/certificate/RenewCert.vue
+++ b/app/src/views/certificate/RenewCert.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { useGettext } from 'vue3-gettext'
 import type { Ref } from 'vue'
 import { message } from 'ant-design-vue'
 import ObtainCertLive from '@/views/domain/cert/components/ObtainCertLive.vue'
@@ -9,8 +8,6 @@ const emit = defineEmits<{
   renewed: [void]
 }>()
 
-const { $gettext } = useGettext()
-
 const modalVisible = ref(false)
 const modalClosable = ref(true)
 
diff --git a/app/src/views/certificate/WildcardCertificate.vue b/app/src/views/certificate/WildcardCertificate.vue
index 8ec23610..1a1dbbce 100644
--- a/app/src/views/certificate/WildcardCertificate.vue
+++ b/app/src/views/certificate/WildcardCertificate.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { Ref } from 'vue'
 import { message } from 'ant-design-vue'
-import { useGettext } from 'vue3-gettext'
 import type { Cert } from '@/api/cert'
 import ObtainCertLive from '@/views/domain/cert/components/ObtainCertLive.vue'
 import DNSChallenge from '@/views/domain/cert/components/DNSChallenge.vue'
@@ -10,7 +9,6 @@ const emit = defineEmits<{
   issued: [void]
 }>()
 
-const { $gettext } = useGettext()
 const step = ref(0)
 const visible = ref(false)
 const data = ref({}) as Ref<Cert>
diff --git a/app/src/views/config/Config.vue b/app/src/views/config/Config.vue
index a39a65b6..bb9e411b 100644
--- a/app/src/views/config/Config.vue
+++ b/app/src/views/config/Config.vue
@@ -2,15 +2,12 @@
 import { computed, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import StdTable from '@/components/StdDesign/StdDataDisplay/StdTable.vue'
-import gettext from '@/gettext'
 import config from '@/api/config'
 import configColumns from '@/views/config/config'
 import FooterToolBar from '@/components/FooterToolbar/FooterToolBar.vue'
 import router from '@/routes'
 import InspectConfig from '@/views/config/InspectConfig.vue'
 
-const { $gettext } = gettext
-
 const api = config
 
 const table = ref(null)
diff --git a/app/src/views/config/ConfigEdit.vue b/app/src/views/config/ConfigEdit.vue
index ba66823e..b6055797 100644
--- a/app/src/views/config/ConfigEdit.vue
+++ b/app/src/views/config/ConfigEdit.vue
@@ -4,7 +4,7 @@ import { message } from 'ant-design-vue'
 import type { Ref } from 'vue'
 import { formatDateTime } from '@/lib/helper'
 import FooterToolBar from '@/components/FooterToolbar/FooterToolBar.vue'
-import gettext from '@/gettext'
+
 import config from '@/api/config'
 import CodeEditor from '@/components/CodeEditor/CodeEditor.vue'
 import ngx from '@/api/ngx'
@@ -12,7 +12,6 @@ import InspectConfig from '@/views/config/InspectConfig.vue'
 import ChatGPT from '@/components/ChatGPT/ChatGPT.vue'
 import type { ChatComplicationMessage } from '@/api/openai'
 
-const { $gettext, interpolate } = gettext
 const route = useRoute()
 
 const inspect_config = ref()
@@ -56,7 +55,7 @@ function save() {
     configText.value = r.content
     message.success($gettext('Saved successfully'))
   }).catch(r => {
-    message.error(interpolate($gettext('Save error %{msg}'), { msg: r.message ?? '' }))
+    message.error($gettext('Save error %{msg}', { msg: r.message ?? '' }))
   }).finally(() => {
     inspect_config.value.test()
   })
@@ -67,7 +66,7 @@ function format_code() {
     configText.value = r.content
     message.success($gettext('Format successfully'))
   }).catch(r => {
-    message.error(interpolate($gettext('Format error %{msg}'), { msg: r.message ?? '' }))
+    message.error($gettext('Format error %{msg}', { msg: r.message ?? '' }))
   })
 }
 
diff --git a/app/src/views/config/InspectConfig.vue b/app/src/views/config/InspectConfig.vue
index 6bb43449..12bd0f84 100644
--- a/app/src/views/config/InspectConfig.vue
+++ b/app/src/views/config/InspectConfig.vue
@@ -1,10 +1,7 @@
 <script setup lang="ts">
-import { useGettext } from 'vue3-gettext'
 import ngx from '@/api/ngx'
 import { logLevel } from '@/views/config/constants'
 
-const { $gettext } = useGettext()
-
 const data = ref({
   level: 0,
   message: '',
diff --git a/app/src/views/config/config.ts b/app/src/views/config/config.ts
index 87c4641e..0ee9b7a8 100644
--- a/app/src/views/config/config.ts
+++ b/app/src/views/config/config.ts
@@ -1,9 +1,7 @@
 import { h } from 'vue'
 import type { customRender } from '@/components/StdDesign/StdDataDisplay/StdTableTransformer'
 import { datetime } from '@/components/StdDesign/StdDataDisplay/StdTableTransformer'
-import gettext from '@/gettext'
-
-const { $gettext } = gettext
+import type { JSXElements } from '@/components/StdDesign/types'
 
 const configColumns = [{
   title: () => $gettext('Name'),
@@ -14,7 +12,7 @@ const configColumns = [{
   title: () => $gettext('Type'),
   dataIndex: 'is_dir',
   customRender: (args: customRender) => {
-    const template = []
+    const template: JSXElements = []
     const { text } = args
     if (text === true || text > 0)
       template.push($gettext('Directory'))
diff --git a/app/src/views/dashboard/Environments.vue b/app/src/views/dashboard/Environments.vue
index c3e244d6..36187365 100644
--- a/app/src/views/dashboard/Environments.vue
+++ b/app/src/views/dashboard/Environments.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { useGettext } from 'vue3-gettext'
 import Icon, { LinkOutlined, SendOutlined, ThunderboltOutlined } from '@ant-design/icons-vue'
 import type ReconnectingWebSocket from 'reconnecting-websocket'
 import type { Ref } from 'vue'
@@ -7,13 +6,11 @@ import { useSettingsStore } from '@/pinia'
 import type { Node } from '@/api/environment'
 import environment from '@/api/environment'
 import logo from '@/assets/img/logo.png'
-import pulse from '@/assets/svg/pulse.svg'
+import pulse from '@/assets/svg/pulse.svg?component'
 import { formatDateTime } from '@/lib/helper'
 import NodeAnalyticItem from '@/views/dashboard/components/NodeAnalyticItem.vue'
 import analytic from '@/api/analytic'
 
-const { $gettext } = useGettext()
-
 const data = ref([]) as Ref<Node[]>
 
 const node_map = computed(() => {
diff --git a/app/src/views/dashboard/ServerAnalytic.vue b/app/src/views/dashboard/ServerAnalytic.vue
index fb5ab429..2315a625 100644
--- a/app/src/views/dashboard/ServerAnalytic.vue
+++ b/app/src/views/dashboard/ServerAnalytic.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { useGettext } from 'vue3-gettext'
 import type ReconnectingWebSocket from 'reconnecting-websocket'
 import AreaChart from '@/components/Chart/AreaChart.vue'
 import RadialBarChart from '@/components/Chart/RadialBarChart.vue'
@@ -8,8 +7,6 @@ import analytic from '@/api/analytic'
 import { bytesToSize } from '@/lib/helper'
 import type { Series } from '@/components/Chart/types'
 
-const { $gettext } = useGettext()
-
 let websocket: ReconnectingWebSocket | WebSocket
 
 const host: HostInfoStat = reactive({
diff --git a/app/src/views/dashboard/components/NodeAnalyticItem.vue b/app/src/views/dashboard/components/NodeAnalyticItem.vue
index 3ca48937..07ce8395 100644
--- a/app/src/views/dashboard/components/NodeAnalyticItem.vue
+++ b/app/src/views/dashboard/components/NodeAnalyticItem.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import Icon, { ArrowDownOutlined, ArrowUpOutlined, DatabaseOutlined, LineChartOutlined } from '@ant-design/icons-vue'
-import cpu from '@/assets/svg/cpu.svg'
-import memory from '@/assets/svg/memory.svg'
+import cpu from '@/assets/svg/cpu.svg?component'
+import memory from '@/assets/svg/memory.svg?component'
 import { bytesToSize } from '@/lib/helper'
 import UsageProgressLine from '@/components/Chart/UsageProgressLine.vue'
 
diff --git a/app/src/views/domain/DomainAdd.vue b/app/src/views/domain/DomainAdd.vue
index 9f131a22..9a59ccb5 100644
--- a/app/src/views/domain/DomainAdd.vue
+++ b/app/src/views/domain/DomainAdd.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { useGettext } from 'vue3-gettext'
 import { message } from 'ant-design-vue'
 import DirectiveEditor from '@/views/domain/ngx_conf/directive/DirectiveEditor.vue'
 import LocationEditor from '@/views/domain/ngx_conf/LocationEditor.vue'
@@ -8,8 +7,6 @@ import domain from '@/api/domain'
 import type { NgxConfig } from '@/api/ngx'
 import ngx from '@/api/ngx'
 
-const { $gettext } = useGettext()
-
 const ngx_config: NgxConfig = reactive({
   name: '',
   servers: [{
diff --git a/app/src/views/domain/DomainEdit.vue b/app/src/views/domain/DomainEdit.vue
index 34cc0fb1..fd2b1947 100644
--- a/app/src/views/domain/DomainEdit.vue
+++ b/app/src/views/domain/DomainEdit.vue
@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import { useGettext } from 'vue3-gettext'
 import { message } from 'ant-design-vue'
-import type { Ref } from 'vue'
 import FooterToolBar from '@/components/FooterToolbar/FooterToolBar.vue'
 import CodeEditor from '@/components/CodeEditor/CodeEditor.vue'
 
@@ -14,8 +12,7 @@ import config from '@/api/config'
 import RightSettings from '@/views/domain/components/RightSettings.vue'
 import type { CertificateInfo } from '@/api/cert'
 import type { ChatComplicationMessage } from '@/api/openai'
-
-const { $gettext, interpolate } = useGettext()
+import type { CheckedType } from '@/types'
 
 const route = useRoute()
 const router = useRouter()
@@ -99,9 +96,9 @@ function handle_parse_error(e: { error?: string; message: string }) {
   })
 }
 
-function on_mode_change(advanced: boolean) {
-  domain.advance_mode(name.value, { advanced }).then(() => {
-    advance_mode.value = advanced
+function on_mode_change(advanced: CheckedType) {
+  domain.advance_mode(name.value, { advanced: advanced as boolean }).then(() => {
+    advance_mode.value = advanced as boolean
     if (advanced) {
       build_config()
     }
@@ -171,7 +168,7 @@ provide('data', data)
     >
       <ACard :bordered="false">
         <template #title>
-          <span style="margin-right: 10px">{{ interpolate($gettext('Edit %{n}'), { n: name }) }}</span>
+          <span style="margin-right: 10px">{{ $gettext('Edit %{n}', { n: name }) }}</span>
           <ATag
             v-if="enabled"
             color="blue"
diff --git a/app/src/views/domain/DomainList.vue b/app/src/views/domain/DomainList.vue
index 236d0c93..01cdf3a0 100644
--- a/app/src/views/domain/DomainList.vue
+++ b/app/src/views/domain/DomainList.vue
@@ -1,5 +1,4 @@
 <script setup lang="tsx">
-import { useGettext } from 'vue3-gettext'
 import { Badge, message } from 'ant-design-vue'
 import StdTable from '@/components/StdDesign/StdDataDisplay/StdTable.vue'
 import type { customRender } from '@/components/StdDesign/StdDataDisplay/StdTableTransformer'
@@ -8,9 +7,7 @@ import domain from '@/api/domain'
 import { input } from '@/components/StdDesign/StdDataEntry'
 import SiteDuplicate from '@/views/domain/components/SiteDuplicate.vue'
 import InspectConfig from '@/views/config/InspectConfig.vue'
-import type { Column } from '@/components/StdDesign/types'
-
-const { $gettext } = useGettext()
+import type { Column, JSXElements } from '@/components/StdDesign/types'
 
 const columns: Column[] = [{
   title: () => $gettext('Name'),
@@ -25,7 +22,7 @@ const columns: Column[] = [{
   title: () => $gettext('Status'),
   dataIndex: 'enabled',
   customRender: (args: customRender) => {
-    const template = []
+    const template: JSXElements = []
     const { text } = args
     if (text === true || text > 0) {
       template.push(<Badge status="success"/>)
diff --git a/app/src/views/domain/cert/Cert.vue b/app/src/views/domain/cert/Cert.vue
index fc7b9310..14367a7f 100644
--- a/app/src/views/domain/cert/Cert.vue
+++ b/app/src/views/domain/cert/Cert.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useGettext } from 'vue3-gettext'
 import CertInfo from '@/views/domain/cert/CertInfo.vue'
 import IssueCert from '@/views/domain/cert/IssueCert.vue'
 import ChangeCert from '@/views/domain/cert/ChangeCert.vue'
@@ -14,7 +13,6 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits(['callback', 'update:enabled'])
-const { $gettext } = useGettext()
 function callback() {
   emit('callback')
 }
diff --git a/app/src/views/domain/cert/CertInfo.vue b/app/src/views/domain/cert/CertInfo.vue
index 345f59ce..e7ec0533 100644
--- a/app/src/views/domain/cert/CertInfo.vue
+++ b/app/src/views/domain/cert/CertInfo.vue
@@ -1,15 +1,12 @@
 <script setup lang="ts">
 import { CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons-vue'
 import dayjs from 'dayjs'
-import { useGettext } from 'vue3-gettext'
 import type { CertificateInfo } from '@/api/cert'
 
 defineProps<{
   cert?: CertificateInfo
 }>()
 
-const { $gettext } = useGettext()
-
 </script>
 
 <template>
diff --git a/app/src/views/domain/cert/ChangeCert.vue b/app/src/views/domain/cert/ChangeCert.vue
index 592f621c..24688333 100644
--- a/app/src/views/domain/cert/ChangeCert.vue
+++ b/app/src/views/domain/cert/ChangeCert.vue
@@ -1,5 +1,4 @@
 <script setup lang="tsx">
-import { useGettext } from 'vue3-gettext'
 import { Badge } from 'ant-design-vue'
 import type { ComputedRef, Ref } from 'vue'
 import StdTable from '@/components/StdDesign/StdDataDisplay/StdTable.vue'
@@ -8,9 +7,7 @@ import cert from '@/api/cert'
 import type { customRender } from '@/components/StdDesign/StdDataDisplay/StdTableTransformer'
 import { input } from '@/components/StdDesign/StdDataEntry'
 import type { NgxDirective } from '@/api/ngx'
-import type { Column } from '@/components/StdDesign/types'
-
-const { $gettext } = useGettext()
+import type { Column, JSXElements } from '@/components/StdDesign/types'
 
 const current_server_directives = inject('current_server_directives') as ComputedRef<NgxDirective[]>
 const directivesMap = inject('directivesMap') as Ref<Record<string, NgxDirective[]>>
@@ -37,7 +34,7 @@ const columns: Column[] = [{
   title: () => $gettext('Auto Cert'),
   dataIndex: 'auto_cert',
   customRender: (args: customRender) => {
-    const template = []
+    const template: JSXElements = []
     const { text } = args
     if (text === true || text > 0) {
       template.push(<Badge status="success"/>)
diff --git a/app/src/views/domain/cert/IssueCert.vue b/app/src/views/domain/cert/IssueCert.vue
index 56601132..f5e1e4f2 100644
--- a/app/src/views/domain/cert/IssueCert.vue
+++ b/app/src/views/domain/cert/IssueCert.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { useGettext } from 'vue3-gettext'
 import ObtainCert from '@/views/domain/cert/components/ObtainCert.vue'
 import type { NgxDirective } from '@/api/ngx'
 
@@ -12,7 +11,6 @@ const props = defineProps<Props>()
 
 const emit = defineEmits(['callback', 'update:enabled'])
 
-const { $gettext } = useGettext()
 const issuing_cert = ref(false)
 const obtain_cert = ref()
 const directivesMap = inject('directivesMap') as Ref<Record<string, NgxDirective[]>>
diff --git a/app/src/views/domain/cert/components/AutoCertStepOne.vue b/app/src/views/domain/cert/components/AutoCertStepOne.vue
index 0219a9b5..ef0a2337 100644
--- a/app/src/views/domain/cert/components/AutoCertStepOne.vue
+++ b/app/src/views/domain/cert/components/AutoCertStepOne.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { useGettext } from 'vue3-gettext'
 import type { Ref } from 'vue'
 import type { DnsChallenge } from '@/api/auto_cert'
 import DNSChallenge from '@/views/domain/cert/components/DNSChallenge.vue'
@@ -9,8 +8,6 @@ defineProps<{
   hideNote?: boolean
 }>()
 
-const { $gettext } = useGettext()
-
 const no_server_name = inject('no_server_name')
 
 // Provide by ObtainCert.vue
diff --git a/app/src/views/domain/cert/components/DNSChallenge.vue b/app/src/views/domain/cert/components/DNSChallenge.vue
index e8b89060..21c40a08 100644
--- a/app/src/views/domain/cert/components/DNSChallenge.vue
+++ b/app/src/views/domain/cert/components/DNSChallenge.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import { useGettext } from 'vue3-gettext'
 import type { SelectProps } from 'ant-design-vue'
 import type { Ref } from 'vue'
+import type { SelectValue } from 'ant-design-vue/es/select'
 import type { DNSProvider } from '@/api/auto_cert'
 import auto_cert from '@/api/auto_cert'
 import dns_credential from '@/api/dns_credential'
 
-const { $gettext } = useGettext()
 const providers = ref([]) as Ref<DNSProvider[]>
 const credentials = ref<SelectProps['options']>([])
 
@@ -14,7 +13,7 @@ const credentials = ref<SelectProps['options']>([])
 // is the object that you are trying to modify it
 // we externalize the dns_credential_id to the parent component,
 // this is used to tell the backend which dns_credential to use
-const data = inject('data') as Ref<DNSProvider & { dns_credential_id: number | null }>
+const data = inject('data') as Ref<DNSProvider & { dns_credential_id: SelectValue }>
 
 const code = computed(() => {
   return data.value.code
@@ -41,7 +40,7 @@ watch(current, () => {
   data.value.code = current.value.code
   data.value.provider = current.value.name
   if (mounted.value)
-    data.value.dns_credential_id = null
+    data.value.dns_credential_id = undefined
 
   dns_credential.get_list({ provider: data.value.provider }).then(r => {
     r.data.forEach(v => {
diff --git a/app/src/views/domain/cert/components/ObtainCert.vue b/app/src/views/domain/cert/components/ObtainCert.vue
index 12874549..b0cb19f6 100644
--- a/app/src/views/domain/cert/components/ObtainCert.vue
+++ b/app/src/views/domain/cert/components/ObtainCert.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { useGettext } from 'vue3-gettext'
 import { Modal, message } from 'ant-design-vue'
 import type { ComputedRef, Ref } from 'vue'
 import domain from '@/api/domain'
@@ -12,8 +11,6 @@ import type { CertificateResult } from '@/api/cert'
 
 const emit = defineEmits(['update:auto_cert'])
 
-const { $gettext, interpolate } = useGettext()
-
 const modalVisible = ref(false)
 const step = ref(1)
 const directivesMap = inject('directivesMap') as Ref<Record<string, NgxDirective[]>>
@@ -66,16 +63,16 @@ function change_auto_cert(status: boolean) {
       challenge_method: data.value.challenge_method,
       dns_credential_id: data.value.dns_credential_id,
     }).then(() => {
-      message.success(interpolate($gettext('Auto-renewal enabled for %{name}'), { name: name.value }))
+      message.success($gettext('Auto-renewal enabled for %{name}', { name: name.value }))
     }).catch(e => {
-      message.error(e.message ?? interpolate($gettext('Enable auto-renewal failed for %{name}'), { name: name.value }))
+      message.error(e.message ?? $gettext('Enable auto-renewal failed for %{name}', { name: name.value }))
     })
   }
   else {
     domain.remove_auto_cert(props.configName).then(() => {
-      message.success(interpolate($gettext('Auto-renewal disabled for %{name}'), { name: name.value }))
+      message.success($gettext('Auto-renewal disabled for %{name}', { name: name.value }))
     }).catch(e => {
-      message.error(e.message ?? interpolate($gettext('Disable auto-renewal failed for %{name}'), { name: name.value }))
+      message.error(e.message ?? $gettext('Disable auto-renewal failed for %{name}', { name: name.value }))
     })
   }
 }
diff --git a/app/src/views/domain/cert/components/ObtainCertLive.vue b/app/src/views/domain/cert/components/ObtainCertLive.vue
index 103cd57f..0196cc2d 100644
--- a/app/src/views/domain/cert/components/ObtainCertLive.vue
+++ b/app/src/views/domain/cert/components/ObtainCertLive.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import type { Ref } from 'vue'
-import { useGettext } from 'vue3-gettext'
 import websocket from '@/lib/websocket'
 import type { DnsChallenge } from '@/api/auto_cert'
 import Error from '@/views/other/Error.vue'
@@ -34,8 +33,6 @@ const modalVisible = computed({
   },
 })
 
-const { $gettext } = useGettext()
-
 const issuing_cert = inject('issuing_cert') as Ref<boolean>
 const data = inject('data') as Ref<DnsChallenge>
 
@@ -45,7 +42,7 @@ const progressStrokeColor = {
 }
 
 const progressPercent = ref(0)
-const progressStatus = ref('active')
+const progressStatus = ref('active') as Ref<'success' | 'active' | 'normal' | 'exception'>
 
 const logContainer = ref()
 
diff --git a/app/src/views/domain/components/Deploy.vue b/app/src/views/domain/components/Deploy.vue
index 765b8782..3f38d0ea 100644
--- a/app/src/views/domain/components/Deploy.vue
+++ b/app/src/views/domain/components/Deploy.vue
@@ -1,13 +1,10 @@
 <script setup lang="ts">
-import { useGettext } from 'vue3-gettext'
 import { InfoCircleOutlined } from '@ant-design/icons-vue'
 import { Modal, notification } from 'ant-design-vue'
 import type { Ref } from 'vue'
 import domain from '@/api/domain'
 import NodeSelector from '@/components/NodeSelector/NodeSelector.vue'
 
-const { $gettext, $ngettext } = useGettext()
-
 const node_map = reactive({})
 const target = ref([])
 const overwrite = ref(false)
diff --git a/app/src/views/domain/components/RightSettings.vue b/app/src/views/domain/components/RightSettings.vue
index 43857a9d..8e44fe39 100644
--- a/app/src/views/domain/components/RightSettings.vue
+++ b/app/src/views/domain/components/RightSettings.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { useGettext } from 'vue3-gettext'
 import { Modal, message } from 'ant-design-vue'
 import type { Ref } from 'vue'
 import type { Site } from '@/api/domain'
@@ -10,15 +9,16 @@ import Deploy from '@/views/domain/components/Deploy.vue'
 import { useSettingsStore } from '@/pinia'
 import type { ChatComplicationMessage } from '@/api/openai'
 import type { NgxConfig } from '@/api/ngx'
+import type { CheckedType } from '@/types'
 
 const settings = useSettingsStore()
-const { $gettext } = useGettext()
+
 const configText = inject('configText') as Ref<string>
 const ngx_config = inject('ngx_config') as Ref<NgxConfig>
 const enabled = inject('enabled') as Ref<boolean>
 const name = inject('name') as Ref<string>
 const history_chatgpt_record = inject('history_chatgpt_record') as Ref<ChatComplicationMessage[]>
-const filename = inject('filename')
+const filename = inject('filename') as Ref<string | number | undefined>
 const data = inject('data') as Ref<Site>
 
 const [modal, ContextHolder] = Modal.useModal()
@@ -43,7 +43,7 @@ function disable() {
   })
 }
 
-function on_change_enabled(checked: boolean) {
+function on_change_enabled(checked: CheckedType) {
   modal.confirm({
     title: checked ? $gettext('Do you want to enable this site?') : $gettext('Do you want to disable this site?'),
     mask: false,
diff --git a/app/src/views/domain/components/SiteDuplicate.vue b/app/src/views/domain/components/SiteDuplicate.vue
index bdef3655..7883232f 100644
--- a/app/src/views/domain/components/SiteDuplicate.vue
+++ b/app/src/views/domain/components/SiteDuplicate.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { useGettext } from 'vue3-gettext'
 import { Form, message, notification } from 'ant-design-vue'
-import gettext from '@/gettext'
+
 import domain from '@/api/domain'
 import NodeSelector from '@/components/NodeSelector/NodeSelector.vue'
 import { useSettingsStore } from '@/pinia'
+import gettext from '@/gettext'
 
 const props = defineProps<{
   visible: boolean
@@ -13,8 +13,6 @@ const props = defineProps<{
 
 const emit = defineEmits(['update:visible', 'duplicated'])
 
-const { $gettext } = useGettext()
-
 const settings = useSettingsStore()
 
 const show = computed({
@@ -127,7 +125,7 @@ watch(() => gettext.current, () => {
     v-model:open="show"
     :title="$gettext('Duplicate')"
     :confirm-loading="loading"
-    :mask="null"
+    :mask="false"
     @ok="onSubmit"
   >
     <AForm layout="vertical">
diff --git a/app/src/views/domain/ngx_conf/LocationEditor.vue b/app/src/views/domain/ngx_conf/LocationEditor.vue
index f1e0b68f..b3539c24 100644
--- a/app/src/views/domain/ngx_conf/LocationEditor.vue
+++ b/app/src/views/domain/ngx_conf/LocationEditor.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { useGettext } from 'vue3-gettext'
 import { reactive, ref } from 'vue'
 import { DeleteOutlined, HolderOutlined } from '@ant-design/icons-vue'
 import Draggable from 'vuedraggable'
@@ -14,8 +13,6 @@ const props = defineProps<{
 
 const ngx_config = inject('ngx_config') as NgxConfig
 
-const { $gettext } = useGettext()
-
 const location = reactive({
   comments: '',
   path: '',
diff --git a/app/src/views/domain/ngx_conf/LogEntry.vue b/app/src/views/domain/ngx_conf/LogEntry.vue
index 6428254c..3f03f8f4 100644
--- a/app/src/views/domain/ngx_conf/LogEntry.vue
+++ b/app/src/views/domain/ngx_conf/LogEntry.vue
@@ -2,7 +2,6 @@
 import { FileExclamationOutlined, FileTextOutlined } from '@ant-design/icons-vue'
 import { computed, ref } from 'vue'
 import { useRouter } from 'vue-router'
-import { useGettext } from 'vue3-gettext'
 import type { NgxConfig } from '@/api/ngx'
 
 const props = defineProps<{
@@ -11,7 +10,6 @@ const props = defineProps<{
   name?: string
 }>()
 
-const { $gettext } = useGettext()
 const accessIdx = ref()
 const errorIdx = ref()
 
diff --git a/app/src/views/domain/ngx_conf/NgxConfigEditor.vue b/app/src/views/domain/ngx_conf/NgxConfigEditor.vue
index a460b6b6..95c728bd 100644
--- a/app/src/views/domain/ngx_conf/NgxConfigEditor.vue
+++ b/app/src/views/domain/ngx_conf/NgxConfigEditor.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { useGettext } from 'vue3-gettext'
 import { Modal } from 'ant-design-vue'
 import type { ComputedRef } from 'vue'
 import CodeEditor from '@/components/CodeEditor/CodeEditor.vue'
@@ -8,6 +7,7 @@ import type { NgxConfig, NgxDirective } from '@/api/ngx'
 import type { CertificateInfo } from '@/api/cert'
 import NgxServer from '@/views/domain/ngx_conf/NgxServer.vue'
 import NgxUpstream from '@/views/domain/ngx_conf/NgxUpstream.vue'
+import type { CheckedType } from '@/types'
 
 const props = withDefaults(defineProps<{
   autoCert?: boolean
@@ -22,8 +22,6 @@ const props = withDefaults(defineProps<{
 
 const emit = defineEmits(['callback', 'update:autoCert'])
 
-const { $gettext } = useGettext()
-
 const save_config = inject('save_config') as () => Promise<void>
 
 const [modal, ContextHolder] = Modal.useModal()
@@ -40,7 +38,7 @@ onMounted(() => {
 
 const ngx_config = inject('ngx_config') as NgxConfig
 
-function confirm_change_tls(status: boolean) {
+function confirm_change_tls(status: CheckedType) {
   modal.confirm({
     title: $gettext('Do you want to enable TLS?'),
     content: $gettext('To make sure the certification auto-renewal can work normally, '
@@ -88,7 +86,7 @@ const directivesMap: ComputedRef<Record<string, NgxDirective[]>> = computed(() =
 })
 
 // eslint-disable-next-line sonarjs/cognitive-complexity
-function change_tls(status: boolean) {
+function change_tls(status: CheckedType) {
   if (status) {
     // deep copy servers[0] to servers[1]
     const server = JSON.parse(JSON.stringify(ngx_config.servers[0]))
diff --git a/app/src/views/domain/ngx_conf/NgxServer.vue b/app/src/views/domain/ngx_conf/NgxServer.vue
index 7738d649..55827ff0 100644
--- a/app/src/views/domain/ngx_conf/NgxServer.vue
+++ b/app/src/views/domain/ngx_conf/NgxServer.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 
 import { MoreOutlined, PlusOutlined } from '@ant-design/icons-vue'
-import { useGettext } from 'vue3-gettext'
 import type { ComputedRef, Ref } from 'vue'
 import { Modal } from 'ant-design-vue'
 import LogEntry from '@/views/domain/ngx_conf/LogEntry.vue'
@@ -24,8 +23,6 @@ withDefaults(defineProps<{
 
 const emit = defineEmits(['callback'])
 
-const { $gettext } = useGettext()
-
 const [modal, ContextHolder] = Modal.useModal()
 
 const current_server_index = inject('current_server_index') as Ref<number>
diff --git a/app/src/views/domain/ngx_conf/NgxUpstream.vue b/app/src/views/domain/ngx_conf/NgxUpstream.vue
index 30b1d44e..7b60ca99 100644
--- a/app/src/views/domain/ngx_conf/NgxUpstream.vue
+++ b/app/src/views/domain/ngx_conf/NgxUpstream.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { MoreOutlined, PlusOutlined } from '@ant-design/icons-vue'
-import { useGettext } from 'vue3-gettext'
 import { Modal } from 'ant-design-vue'
 import _ from 'lodash'
 import type { NgxConfig, NgxDirective } from '@/api/ngx'
@@ -8,8 +7,6 @@ import DirectiveEditor from '@/views/domain/ngx_conf/directive/DirectiveEditor.v
 import type { UpstreamStatus } from '@/api/upstream'
 import upstream from '@/api/upstream'
 
-const { $gettext } = useGettext()
-
 const [modal, ContextHolder] = Modal.useModal()
 
 const ngx_config = inject('ngx_config') as NgxConfig
diff --git a/app/src/views/domain/ngx_conf/config_template/ConfigTemplate.vue b/app/src/views/domain/ngx_conf/config_template/ConfigTemplate.vue
index e01ebd1f..f36a617b 100644
--- a/app/src/views/domain/ngx_conf/config_template/ConfigTemplate.vue
+++ b/app/src/views/domain/ngx_conf/config_template/ConfigTemplate.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { useGettext } from 'vue3-gettext'
 import { storeToRefs } from 'pinia'
 import type { Ref } from 'vue'
 import type { Template } from '@/api/template'
@@ -16,7 +15,6 @@ const props = defineProps<{
   currentServerIndex: number
 }>()
 
-const { $gettext } = useGettext()
 const { language } = storeToRefs(useSettingsStore())
 const ngx_config = inject('ngx_config') as NgxConfig
 const blocks = ref([])
diff --git a/app/src/views/domain/ngx_conf/directive/DirectiveAdd.vue b/app/src/views/domain/ngx_conf/directive/DirectiveAdd.vue
index 0297a0e2..340ea5bd 100644
--- a/app/src/views/domain/ngx_conf/directive/DirectiveAdd.vue
+++ b/app/src/views/domain/ngx_conf/directive/DirectiveAdd.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { type ComputedRef, reactive, ref } from 'vue'
-import { useGettext } from 'vue3-gettext'
 import { DeleteOutlined } from '@ant-design/icons-vue'
 import CodeEditor from '@/components/CodeEditor'
 import type { NgxDirective } from '@/api/ngx'
@@ -11,8 +10,6 @@ const props = defineProps<{
 
 const emit = defineEmits(['save'])
 
-const { $gettext } = useGettext()
-
 const ngx_directives = inject('ngx_directives') as ComputedRef<NgxDirective[]>
 const directive = reactive({ directive: '', params: '' })
 const adding = ref(false)
diff --git a/app/src/views/domain/ngx_conf/directive/DirectiveEditor.vue b/app/src/views/domain/ngx_conf/directive/DirectiveEditor.vue
index 170ec9b1..a875eb67 100644
--- a/app/src/views/domain/ngx_conf/directive/DirectiveEditor.vue
+++ b/app/src/views/domain/ngx_conf/directive/DirectiveEditor.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { useGettext } from 'vue3-gettext'
 import Draggable from 'vuedraggable'
 import type { ComputedRef } from 'vue'
 import DirectiveAdd from './DirectiveAdd.vue'
@@ -11,7 +10,6 @@ defineProps<{
   context?: string
 }>()
 
-const { $gettext } = useGettext()
 const current_idx = ref(-1)
 
 const ngx_directives = inject('ngx_directives') as ComputedRef<NgxDirective[]>
diff --git a/app/src/views/domain/ngx_conf/directive/DirectiveEditorItem.vue b/app/src/views/domain/ngx_conf/directive/DirectiveEditorItem.vue
index fbcff5df..d58b9f4f 100644
--- a/app/src/views/domain/ngx_conf/directive/DirectiveEditorItem.vue
+++ b/app/src/views/domain/ngx_conf/directive/DirectiveEditorItem.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { DeleteOutlined, HolderOutlined } from '@ant-design/icons-vue'
 
-import { useGettext } from 'vue3-gettext'
 import { type ComputedRef, ref, watch } from 'vue'
 import { message } from 'ant-design-vue'
 import config from '@/api/config'
@@ -14,8 +13,6 @@ const props = defineProps<{
   context?: string
 }>()
 
-const { $gettext, interpolate } = useGettext()
-
 const ngx_directives = inject('ngx_directives') as ComputedRef<NgxDirective[]>
 
 function remove(index: number) {
@@ -41,7 +38,7 @@ function save() {
     content.value = r.content
     message.success($gettext('Saved successfully'))
   }).catch(r => {
-    message.error(interpolate($gettext('Save error %{msg}'), { msg: r.message ?? '' }))
+    message.error($gettext('Save error %{msg}', { msg: r.message ?? '' }))
   })
 }
 
diff --git a/app/src/views/environment/Environment.vue b/app/src/views/environment/Environment.vue
index fc476703..85a2edc0 100644
--- a/app/src/views/environment/Environment.vue
+++ b/app/src/views/environment/Environment.vue
@@ -1,5 +1,4 @@
 <script setup lang="tsx">
-import { useGettext } from 'vue3-gettext'
 import { h } from 'vue'
 import { Badge } from 'ant-design-vue'
 import type { customRender } from '@/components/StdDesign/StdDataDisplay/StdTableTransformer'
@@ -7,9 +6,7 @@ import { datetime } from '@/components/StdDesign/StdDataDisplay/StdTableTransfor
 import environment from '@/api/environment'
 import StdCurd from '@/components/StdDesign/StdDataDisplay/StdCurd.vue'
 import { input } from '@/components/StdDesign/StdDataEntry'
-import type { Column } from '@/components/StdDesign/types'
-
-const { $gettext } = useGettext()
+import type { Column, JSXElements } from '@/components/StdDesign/types'
 
 const columns: Column[] = [{
   title: () => $gettext('Name'),
@@ -36,7 +33,7 @@ const columns: Column[] = [{
   title: () => 'NodeSecret',
   dataIndex: 'token',
   sortable: true,
-  hidden: true,
+  hiddenInTable: true,
   edit: {
     type: input,
   },
@@ -78,7 +75,7 @@ const columns: Column[] = [{
   title: () => $gettext('Status'),
   dataIndex: 'status',
   customRender: (args: customRender) => {
-    const template = []
+    const template: JSXElements = []
     const { text } = args
     if (text === true || text > 0) {
       template.push(<Badge status="success"/>)
diff --git a/app/src/views/nginx_log/NginxLog.vue b/app/src/views/nginx_log/NginxLog.vue
index bccdb54f..da187161 100644
--- a/app/src/views/nginx_log/NginxLog.vue
+++ b/app/src/views/nginx_log/NginxLog.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { useGettext } from 'vue3-gettext'
 import type ReconnectingWebSocket from 'reconnecting-websocket'
 import { debounce } from 'lodash'
 import FooterToolBar from '@/components/FooterToolbar/FooterToolBar.vue'
@@ -7,7 +6,6 @@ import type { INginxLogData } from '@/api/nginx_log'
 import nginx_log from '@/api/nginx_log'
 import ws from '@/lib/websocket'
 
-const { $gettext } = useGettext()
 const logContainer = ref()
 let websocket: ReconnectingWebSocket | WebSocket
 const route = useRoute()
diff --git a/app/src/views/notification/Notification.vue b/app/src/views/notification/Notification.vue
index b028e77b..bcf7b479 100644
--- a/app/src/views/notification/Notification.vue
+++ b/app/src/views/notification/Notification.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { useGettext } from 'vue3-gettext'
 import { message } from 'ant-design-vue'
 import StdCurd from '@/components/StdDesign/StdDataDisplay/StdCurd.vue'
 import notification from '@/api/notification'
@@ -9,12 +8,10 @@ import { datetime, mask } from '@/components/StdDesign/StdDataDisplay/StdTableTr
 import { NotificationType } from '@/constants'
 import { useUserStore } from '@/pinia'
 
-const { $gettext } = useGettext()
-
 const columns: Column[] = [{
   title: () => $gettext('Type'),
   dataIndex: 'type',
-  customRender: (args: customRender) => mask(args, NotificationType),
+  customRender: mask(NotificationType),
   sortable: true,
   pithy: true,
 }, {
diff --git a/app/src/views/other/Error.vue b/app/src/views/other/Error.vue
index 385d120a..c5f9bc59 100644
--- a/app/src/views/other/Error.vue
+++ b/app/src/views/other/Error.vue
@@ -1,7 +1,4 @@
 <script setup lang="ts">
-import { useGettext } from 'vue3-gettext'
-
-const { $gettext } = useGettext()
 
 const route = useRoute()
 
diff --git a/app/src/views/other/Install.vue b/app/src/views/other/Install.vue
index 388d2284..c683a46b 100644
--- a/app/src/views/other/Install.vue
+++ b/app/src/views/other/Install.vue
@@ -4,12 +4,10 @@ import { reactive, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { DatabaseOutlined, LockOutlined, MailOutlined, UserOutlined } from '@ant-design/icons-vue'
 import SetLanguage from '@/components/SetLanguage/SetLanguage.vue'
-import gettext from '@/gettext'
+
 import install from '@/api/install'
 import SwitchAppearance from '@/components/SwitchAppearance/SwitchAppearance.vue'
 
-const { $gettext, interpolate } = gettext
-
 const thisYear = new Date().getFullYear()
 const loading = ref(false)
 
@@ -49,10 +47,10 @@ const rulesRef = reactive({
   ],
   database: [
     {
-      message: () => interpolate(
-        $gettext('The filename cannot contain the following characters: %{c}'),
-        { c: '& &quot; ? < > # {} % ~ / \\' },
-      ),
+      message: () =>
+        $gettext('The filename cannot contain the following characters: %{c}',
+          { c: '& &quot; ? < > # {} % ~ / \\' },
+        ),
     },
   ],
 })
diff --git a/app/src/views/other/Login.vue b/app/src/views/other/Login.vue
index 84a704a6..a600ff36 100644
--- a/app/src/views/other/Login.vue
+++ b/app/src/views/other/Login.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import { LockOutlined, UserOutlined } from '@ant-design/icons-vue'
 import { Form, message } from 'ant-design-vue'
-import gettext from '@/gettext'
+
 import { useUserStore } from '@/pinia'
 import auth from '@/api/auth'
 import install from '@/api/install'
 import SetLanguage from '@/components/SetLanguage/SetLanguage.vue'
 import SwitchAppearance from '@/components/SwitchAppearance/SwitchAppearance.vue'
+import gettext from '@/gettext'
 
 const thisYear = new Date().getFullYear()
 
@@ -18,7 +19,6 @@ install.get_lock().then(async (r: { lock: boolean }) => {
     await router.push('/install')
 })
 
-const { $gettext } = gettext
 const loading = ref(false)
 
 const modelRef = reactive({
diff --git a/app/src/views/preference/BasicSettings.vue b/app/src/views/preference/BasicSettings.vue
index ade587f1..a2da91f7 100644
--- a/app/src/views/preference/BasicSettings.vue
+++ b/app/src/views/preference/BasicSettings.vue
@@ -1,9 +1,7 @@
 <script setup lang="ts">
-import { useGettext } from 'vue3-gettext'
 import { inject } from 'vue'
 import type { Settings } from '@/views/preference/typedef'
 
-const { $gettext } = useGettext()
 const data: Settings = inject('data') as Settings
 const errors: Record<string, Record<string, string>> = inject('errors') as Record<string, Record<string, string>>
 </script>
diff --git a/app/src/views/preference/LogrotateSettings.vue b/app/src/views/preference/LogrotateSettings.vue
index 4aec64ad..acb5a52f 100644
--- a/app/src/views/preference/LogrotateSettings.vue
+++ b/app/src/views/preference/LogrotateSettings.vue
@@ -1,10 +1,7 @@
 <script setup lang="ts">
-import { useGettext } from 'vue3-gettext'
 import { inject } from 'vue'
 import type { Settings } from '@/views/preference/typedef'
 
-const { $gettext } = useGettext()
-
 const data: Settings = inject('data')!
 </script>
 
diff --git a/app/src/views/preference/NginxSettings.vue b/app/src/views/preference/NginxSettings.vue
index 53f23f4f..4b663c61 100644
--- a/app/src/views/preference/NginxSettings.vue
+++ b/app/src/views/preference/NginxSettings.vue
@@ -1,10 +1,7 @@
 <script setup lang="ts">
-import { useGettext } from 'vue3-gettext'
 import { inject } from 'vue'
 import type { Settings } from '@/views/preference/typedef'
 
-const { $gettext } = useGettext()
-
 const data: Settings = inject('data')!
 const errors: Record<string, Record<string, string>> = inject('errors') as Record<string, Record<string, string>>
 </script>
diff --git a/app/src/views/preference/OpenAISettings.vue b/app/src/views/preference/OpenAISettings.vue
index 2a7892a1..51d6ce64 100644
--- a/app/src/views/preference/OpenAISettings.vue
+++ b/app/src/views/preference/OpenAISettings.vue
@@ -1,10 +1,7 @@
 <script setup lang="ts">
-import { useGettext } from 'vue3-gettext'
 import { inject } from 'vue'
 import type { Settings } from '@/views/preference/typedef'
 
-const { $gettext } = useGettext()
-
 const data: Settings = inject('data')!
 const errors: Record<string, Record<string, string>> = inject('errors') as Record<string, Record<string, string>>
 </script>
diff --git a/app/src/views/preference/Preference.vue b/app/src/views/preference/Preference.vue
index 5dbbc479..4147514f 100644
--- a/app/src/views/preference/Preference.vue
+++ b/app/src/views/preference/Preference.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { useGettext } from 'vue3-gettext'
 import { message } from 'ant-design-vue'
 import type { Ref } from 'vue'
 import FooterToolBar from '@/components/FooterToolbar/FooterToolBar.vue'
@@ -10,8 +9,6 @@ import NginxSettings from '@/views/preference/NginxSettings.vue'
 import type { Settings } from '@/views/preference/typedef'
 import LogrotateSettings from '@/views/preference/LogrotateSettings.vue'
 
-const { $gettext } = useGettext()
-
 const data = ref<Settings>({
   server: {
     http_host: '0.0.0.0',
diff --git a/app/src/views/pty/Terminal.vue b/app/src/views/pty/Terminal.vue
index 22fc265a..4727dd71 100644
--- a/app/src/views/pty/Terminal.vue
+++ b/app/src/views/pty/Terminal.vue
@@ -1,16 +1,13 @@
 <script setup lang="ts">
-import 'xterm/css/xterm.css'
-import { Terminal } from 'xterm'
+import '@xterm/xterm/css/xterm.css'
+import { Terminal } from '@xterm/xterm'
 import { FitAddon } from '@xterm/addon-fit'
 import { onMounted, onUnmounted } from 'vue'
 import _ from 'lodash'
-import { useGettext } from 'vue3-gettext'
 import ws from '@/lib/websocket'
 
-const { $gettext } = useGettext()
-
 let term: Terminal | null
-let ping: number
+let ping: NodeJS.Timeout
 
 const websocket = ws('/api/pty')
 
@@ -85,7 +82,6 @@ onUnmounted(() => {
   window.removeEventListener('resize', fit)
   clearInterval(ping)
   term?.dispose()
-  ping = 0
   websocket.close()
 })
 
diff --git a/app/src/views/stream/StreamEdit.vue b/app/src/views/stream/StreamEdit.vue
index ba83b492..b2063c15 100644
--- a/app/src/views/stream/StreamEdit.vue
+++ b/app/src/views/stream/StreamEdit.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { useGettext } from 'vue3-gettext'
 import { message } from 'ant-design-vue'
 import type { Ref } from 'vue'
 import FooterToolBar from '@/components/FooterToolbar/FooterToolBar.vue'
@@ -13,8 +12,7 @@ import RightSettings from '@/views/stream/components/RightSettings.vue'
 import type { ChatComplicationMessage } from '@/api/openai'
 import type { Stream } from '@/api/stream'
 import stream from '@/api/stream'
-
-const { $gettext, interpolate } = useGettext()
+import type { CheckedType } from '@/types'
 
 const route = useRoute()
 const router = useRouter()
@@ -90,9 +88,9 @@ function handle_parse_error(e: { error?: string; message: string }) {
   })
 }
 
-function on_mode_change(advanced: boolean) {
-  stream.advance_mode(name.value, { advanced }).then(() => {
-    advance_mode.value = advanced
+function on_mode_change(advanced: CheckedType) {
+  stream.advance_mode(name.value, { advanced: advanced as boolean }).then(() => {
+    advance_mode.value = advanced as boolean
     if (advanced) {
       build_config()
     }
@@ -162,7 +160,7 @@ provide('data', data)
     >
       <ACard :bordered="false">
         <template #title>
-          <span style="margin-right: 10px">{{ interpolate($gettext('Edit %{n}'), { n: name }) }}</span>
+          <span style="margin-right: 10px">{{ $gettext('Edit %{n}', { n: name }) }}</span>
           <ATag
             v-if="enabled"
             color="blue"
diff --git a/app/src/views/stream/StreamList.vue b/app/src/views/stream/StreamList.vue
index 7b597d2f..22bab004 100644
--- a/app/src/views/stream/StreamList.vue
+++ b/app/src/views/stream/StreamList.vue
@@ -1,5 +1,4 @@
 <script setup lang="tsx">
-import { useGettext } from 'vue3-gettext'
 import { Badge, message } from 'ant-design-vue'
 import StdTable from '@/components/StdDesign/StdDataDisplay/StdTable.vue'
 import type { customRender } from '@/components/StdDesign/StdDataDisplay/StdTableTransformer'
@@ -7,11 +6,9 @@ import { datetime } from '@/components/StdDesign/StdDataDisplay/StdTableTransfor
 import stream from '@/api/stream'
 import { input } from '@/components/StdDesign/StdDataEntry'
 import InspectConfig from '@/views/config/InspectConfig.vue'
-import type { Column } from '@/components/StdDesign/types'
+import type { Column, JSXElements } from '@/components/StdDesign/types'
 import StreamDuplicate from '@/views/stream/components/StreamDuplicate.vue'
 
-const { $gettext } = useGettext()
-
 const columns: Column[] = [{
   title: () => $gettext('Name'),
   dataIndex: 'name',
@@ -25,7 +22,7 @@ const columns: Column[] = [{
   title: () => $gettext('Status'),
   dataIndex: 'enabled',
   customRender: (args: customRender) => {
-    const template = []
+    const template: JSXElements = []
     const { text } = args
     if (text === true || text > 0) {
       template.push(<Badge status="success"/>)
diff --git a/app/src/views/stream/components/Deploy.vue b/app/src/views/stream/components/Deploy.vue
index adc735cc..fd5fcba4 100644
--- a/app/src/views/stream/components/Deploy.vue
+++ b/app/src/views/stream/components/Deploy.vue
@@ -1,13 +1,10 @@
 <script setup lang="ts">
-import { useGettext } from 'vue3-gettext'
 import { InfoCircleOutlined } from '@ant-design/icons-vue'
 import { Modal, notification } from 'ant-design-vue'
 import type { Ref } from 'vue'
 import stream from '@/api/stream'
 import NodeSelector from '@/components/NodeSelector/NodeSelector.vue'
 
-const { $gettext, $ngettext } = useGettext()
-
 const node_map = reactive({})
 const target = ref([])
 const overwrite = ref(false)
diff --git a/app/src/views/stream/components/RightSettings.vue b/app/src/views/stream/components/RightSettings.vue
index 4679a135..4933cdaa 100644
--- a/app/src/views/stream/components/RightSettings.vue
+++ b/app/src/views/stream/components/RightSettings.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { useGettext } from 'vue3-gettext'
 import { Modal, message } from 'ant-design-vue'
 import type { Ref } from 'vue'
 import type { Stream } from '@/api/stream'
@@ -10,15 +9,16 @@ import Deploy from '@/views/stream/components/Deploy.vue'
 import { useSettingsStore } from '@/pinia'
 import type { ChatComplicationMessage } from '@/api/openai'
 import type { NgxConfig } from '@/api/ngx'
+import type { CheckedType } from '@/types'
 
 const settings = useSettingsStore()
-const { $gettext } = useGettext()
+
 const configText = inject('configText') as Ref<string>
 const ngx_config = inject('ngx_config') as Ref<NgxConfig>
 const enabled = inject('enabled') as Ref<boolean>
 const name = inject('name') as Ref<string>
 const history_chatgpt_record = inject('history_chatgpt_record') as Ref<ChatComplicationMessage[]>
-const filename = inject('filename')
+const filename = inject('filename') as Ref<string | number | undefined>
 const data = inject('data') as Ref<Stream>
 
 const [modal, ContextHolder] = Modal.useModal()
@@ -43,7 +43,7 @@ function disable() {
   })
 }
 
-function on_change_enabled(checked: boolean) {
+function on_change_enabled(checked: CheckedType) {
   modal.confirm({
     title: checked ? $gettext('Do you want to enable this stream?') : $gettext('Do you want to disable this stream?'),
     mask: false,
diff --git a/app/src/views/stream/components/StreamDuplicate.vue b/app/src/views/stream/components/StreamDuplicate.vue
index 973a8169..a322afaf 100644
--- a/app/src/views/stream/components/StreamDuplicate.vue
+++ b/app/src/views/stream/components/StreamDuplicate.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { useGettext } from 'vue3-gettext'
 import { Form, message, notification } from 'ant-design-vue'
-import gettext from '@/gettext'
+
 import stream from '@/api/stream'
 import NodeSelector from '@/components/NodeSelector/NodeSelector.vue'
 import { useSettingsStore } from '@/pinia'
+import gettext from '@/gettext'
 
 const props = defineProps<{
   visible: boolean
@@ -13,8 +13,6 @@ const props = defineProps<{
 
 const emit = defineEmits(['update:visible', 'duplicated'])
 
-const { $gettext } = useGettext()
-
 const settings = useSettingsStore()
 
 const show = computed({
@@ -127,7 +125,7 @@ watch(() => gettext.current, () => {
     v-model:open="show"
     :title="$gettext('Duplicate')"
     :confirm-loading="loading"
-    :mask="null"
+    :mask="false"
     @ok="onSubmit"
   >
     <AForm layout="vertical">
diff --git a/app/src/views/system/About.vue b/app/src/views/system/About.vue
index da025e0d..8d78914c 100644
--- a/app/src/views/system/About.vue
+++ b/app/src/views/system/About.vue
@@ -1,11 +1,8 @@
 <script setup lang="ts">
 import GithubButton from 'vue-github-button'
-import gettext from '@/gettext'
 import logo from '@/assets/img/logo.png'
 import version from '@/version.json'
 
-const { $gettext } = gettext
-
 const this_year = new Date().getFullYear()
 </script>
 
diff --git a/app/src/views/system/Upgrade.vue b/app/src/views/system/Upgrade.vue
index 0f55c649..b8f5f264 100644
--- a/app/src/views/system/Upgrade.vue
+++ b/app/src/views/system/Upgrade.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { useGettext } from 'vue3-gettext'
 import type { Ref } from 'vue'
 import dayjs from 'dayjs'
 import { marked } from 'marked'
@@ -11,8 +10,6 @@ import version from '@/version.json'
 import type { RuntimeInfo } from '@/api/upgrade'
 import upgrade from '@/api/upgrade'
 
-const { $gettext } = useGettext()
-
 const route = useRoute()
 const data = ref({}) as Ref<RuntimeInfo>
 const last_check = ref('')
@@ -26,7 +23,7 @@ const progressStrokeColor = {
 
 const modalVisible = ref(false)
 const progressPercent = ref(0)
-const progressStatus = ref('active')
+const progressStatus = ref('active') as Ref<'normal' | 'active' | 'success' | 'exception'>
 const modalClosable = ref(false)
 const get_release_error = ref(false)
 
diff --git a/app/src/views/user/User.vue b/app/src/views/user/User.vue
index 4711c30e..172eca94 100644
--- a/app/src/views/user/User.vue
+++ b/app/src/views/user/User.vue
@@ -1,13 +1,10 @@
 <script setup lang="ts">
 import StdCurd from '@/components/StdDesign/StdDataDisplay/StdCurd.vue'
-import gettext from '@/gettext'
 import user from '@/api/user'
 import { datetime } from '@/components/StdDesign/StdDataDisplay/StdTableTransformer'
 import { input, password } from '@/components/StdDesign/StdDataEntry'
 import type { Column } from '@/components/StdDesign/types'
 
-const { $gettext } = gettext
-
 const columns: Column[] = [{
   title: () => $gettext('Username'),
   dataIndex: 'name',
@@ -29,7 +26,7 @@ const columns: Column[] = [{
       generate: true,
     },
   },
-  hidden: true,
+  hiddenInTable: true,
 }, {
   title: () => $gettext('Created at'),
   dataIndex: 'created_at',
diff --git a/app/src/vite-env.d.ts b/app/src/vite-env.d.ts
index 6977c557..6c8f5436 100644
--- a/app/src/vite-env.d.ts
+++ b/app/src/vite-env.d.ts
@@ -1,8 +1,27 @@
 /// <reference types="vite/client" />
-
+/// <reference types="vite-svg-loader" />
 declare module '*.vue' {
   import type { DefineComponent } from 'vue'
 
   const component: DefineComponent<{}, {}, any>
   export default component
 }
+
+export { }
+declare module 'vue' {
+  interface ComponentCustomProperties {
+    $gettext: (msgid: string, parameters?: {
+      [key: string]: string;
+    }, disableHtmlEscaping?: boolean) => string;
+    $pgettext: (context: string, msgid: string, parameters?: {
+      [key: string]: string;
+    }, disableHtmlEscaping?: boolean) => string;
+    $ngettext: (msgid: string, plural: string, n: number, parameters?: {
+      [key: string]: string;
+    }, disableHtmlEscaping?: boolean) => string;
+    $npgettext: (context: string, msgid: string, plural: string, n: number, parameters?: {
+      [key: string]: string;
+    }, disableHtmlEscaping?: boolean) => string;
+  }
+}
+
diff --git a/app/tsconfig.json b/app/tsconfig.json
index aef3a813..08882f05 100644
--- a/app/tsconfig.json
+++ b/app/tsconfig.json
@@ -8,21 +8,20 @@
       "DOM",
       "DOM.Iterable"
     ],
-
     /* Bundler mode */
     "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
+    "allowImportingTsExtensions": false,
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "preserve",
-
+    "allowJs": true,
+    "noImplicitAny": false,
     /* Linting */
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": false,
     "noFallthroughCasesInSwitch": true,
-
     "esModuleInterop": true,
     "skipLibCheck": true,
     "baseUrl": ".",
@@ -31,15 +30,18 @@
         "./src/*"
       ]
     },
-    "types": ["vite/client"]
+    "types": [
+      "vite/client"
+    ]
   },
   "include": [
-    "env.d.ts",
     "src/**/*.ts",
     "src/**/*.d.ts",
     "src/**/*.tsx",
     "src/**/*.vue",
-    "auto-imports.d.ts"
+    "auto-imports.d.ts",
+    "components.d.ts",
+    "env.d.ts",
   ],
   "references": [
     {
diff --git a/app/version.json b/app/version.json
index ab2f1266..1ebce7ca 100644
--- a/app/version.json
+++ b/app/version.json
@@ -1 +1 @@
-{"version":"2.0.0-beta.18","build_id":123,"total_build":327}
\ No newline at end of file
+{"version":"2.0.0-beta.18","build_id":126,"total_build":330}
\ No newline at end of file
diff --git a/app/vite.config.ts b/app/vite.config.ts
index b28d383e..aabd1581 100644
--- a/app/vite.config.ts
+++ b/app/vite.config.ts
@@ -43,7 +43,19 @@ export default defineConfig(({ mode }) => {
         directoryAsNamespace: true,
       }),
       AutoImport({
-        imports: ['vue', 'vue-router', 'pinia'],
+        imports: [
+          'vue',
+          'vue-router',
+          'pinia',
+          {
+            '@/gettext': [
+              '$gettext',
+              '$pgettext',
+              '$ngettext',
+              '$npgettext',
+            ],
+          },
+        ],
         vueTemplate: true,
       }),
       DefineOptions(),
diff --git a/app/vite.config.ts.timestamp-1710404739835-41a8cdf56d1c9.mjs b/app/vite.config.ts.timestamp-1710404739835-41a8cdf56d1c9.mjs
deleted file mode 100644
index 6cb96cc6..00000000
--- a/app/vite.config.ts.timestamp-1710404739835-41a8cdf56d1c9.mjs
+++ /dev/null
@@ -1,75 +0,0 @@
-// vite.config.ts
-import { URL, fileURLToPath } from "node:url";
-import { defineConfig, loadEnv } from "file:///Users/Jacky/Sites/nginx-ui/app/node_modules/.pnpm/vite@5.1.1_@types+node@20.10.2_less@4.2.0/node_modules/vite/dist/node/index.js";
-import vue from "file:///Users/Jacky/Sites/nginx-ui/app/node_modules/.pnpm/@vitejs+plugin-vue@5.0.3_vite@5.1.1_vue@3.4.17/node_modules/@vitejs/plugin-vue/dist/index.mjs";
-import Components from "file:///Users/Jacky/Sites/nginx-ui/app/node_modules/.pnpm/unplugin-vue-components@0.26.0_vue@3.4.17/node_modules/unplugin-vue-components/dist/vite.js";
-import { AntDesignVueResolver } from "file:///Users/Jacky/Sites/nginx-ui/app/node_modules/.pnpm/unplugin-vue-components@0.26.0_vue@3.4.17/node_modules/unplugin-vue-components/dist/resolvers.js";
-import vueJsx from "file:///Users/Jacky/Sites/nginx-ui/app/node_modules/.pnpm/@vitejs+plugin-vue-jsx@3.1.0_vite@5.1.1_vue@3.4.17/node_modules/@vitejs/plugin-vue-jsx/dist/index.mjs";
-import vitePluginBuildId from "file:///Users/Jacky/Sites/nginx-ui/app/node_modules/.pnpm/vite-plugin-build-id@0.2.8_less@4.2.0/node_modules/vite-plugin-build-id/dist/index.js";
-import svgLoader from "file:///Users/Jacky/Sites/nginx-ui/app/node_modules/.pnpm/vite-svg-loader@5.1.0_vue@3.4.17/node_modules/vite-svg-loader/index.js";
-import AutoImport from "file:///Users/Jacky/Sites/nginx-ui/app/node_modules/.pnpm/unplugin-auto-import@0.17.3_@vueuse+core@10.7.2/node_modules/unplugin-auto-import/dist/vite.js";
-import DefineOptions from "file:///Users/Jacky/Sites/nginx-ui/app/node_modules/.pnpm/unplugin-vue-define-options@1.4.1_vue@3.4.17/node_modules/unplugin-vue-define-options/dist/vite.mjs";
-var __vite_injected_original_import_meta_url = "file:///Users/Jacky/Sites/nginx-ui/app/vite.config.ts";
-var vite_config_default = defineConfig(({ mode }) => {
-  const env = loadEnv(mode, process.cwd(), "");
-  return {
-    base: "./",
-    resolve: {
-      alias: {
-        "@": fileURLToPath(new URL("./src", __vite_injected_original_import_meta_url))
-      },
-      extensions: [
-        ".mjs",
-        ".js",
-        ".ts",
-        ".jsx",
-        ".tsx",
-        ".json",
-        ".vue",
-        ".less"
-      ]
-    },
-    plugins: [
-      vue(),
-      vueJsx(),
-      vitePluginBuildId(),
-      svgLoader(),
-      Components({
-        resolvers: [AntDesignVueResolver({ importStyle: false })],
-        directoryAsNamespace: true
-      }),
-      AutoImport({
-        imports: ["vue", "vue-router", "pinia"],
-        vueTemplate: true
-      }),
-      DefineOptions()
-    ],
-    css: {
-      preprocessorOptions: {
-        less: {
-          modifyVars: {
-            "border-radius-base": "5px"
-          },
-          javascriptEnabled: true
-        }
-      }
-    },
-    server: {
-      proxy: {
-        "/api": {
-          target: env.VITE_PROXY_TARGET || "http://localhost:9000",
-          changeOrigin: true,
-          secure: false,
-          ws: true
-        }
-      }
-    },
-    build: {
-      chunkSizeWarningLimit: 1e3
-    }
-  };
-});
-export {
-  vite_config_default as default
-};
-//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCIvVXNlcnMvSmFja3kvU2l0ZXMvbmdpbngtdWkvYXBwXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ZpbGVuYW1lID0gXCIvVXNlcnMvSmFja3kvU2l0ZXMvbmdpbngtdWkvYXBwL3ZpdGUuY29uZmlnLnRzXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ltcG9ydF9tZXRhX3VybCA9IFwiZmlsZTovLy9Vc2Vycy9KYWNreS9TaXRlcy9uZ2lueC11aS9hcHAvdml0ZS5jb25maWcudHNcIjtpbXBvcnQgeyBVUkwsIGZpbGVVUkxUb1BhdGggfSBmcm9tICdub2RlOnVybCdcbmltcG9ydCB7IGRlZmluZUNvbmZpZywgbG9hZEVudiB9IGZyb20gJ3ZpdGUnXG5pbXBvcnQgdnVlIGZyb20gJ0B2aXRlanMvcGx1Z2luLXZ1ZSdcbmltcG9ydCBDb21wb25lbnRzIGZyb20gJ3VucGx1Z2luLXZ1ZS1jb21wb25lbnRzL3ZpdGUnXG5pbXBvcnQgeyBBbnREZXNpZ25WdWVSZXNvbHZlciB9IGZyb20gJ3VucGx1Z2luLXZ1ZS1jb21wb25lbnRzL3Jlc29sdmVycydcbmltcG9ydCB2dWVKc3ggZnJvbSAnQHZpdGVqcy9wbHVnaW4tdnVlLWpzeCdcblxuaW1wb3J0IHZpdGVQbHVnaW5CdWlsZElkIGZyb20gJ3ZpdGUtcGx1Z2luLWJ1aWxkLWlkJ1xuaW1wb3J0IHN2Z0xvYWRlciBmcm9tICd2aXRlLXN2Zy1sb2FkZXInXG5pbXBvcnQgQXV0b0ltcG9ydCBmcm9tICd1bnBsdWdpbi1hdXRvLWltcG9ydC92aXRlJ1xuaW1wb3J0IERlZmluZU9wdGlvbnMgZnJvbSAndW5wbHVnaW4tdnVlLWRlZmluZS1vcHRpb25zL3ZpdGUnXG5cbi8vIGh0dHBzOi8vdml0ZWpzLmRldi9jb25maWcvXG5leHBvcnQgZGVmYXVsdCBkZWZpbmVDb25maWcoKHsgbW9kZSB9KSA9PiB7XG4gIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBuL3ByZWZlci1nbG9iYWwvcHJvY2Vzc1xuICBjb25zdCBlbnYgPSBsb2FkRW52KG1vZGUsIHByb2Nlc3MuY3dkKCksICcnKVxuXG4gIHJldHVybiB7XG4gICAgYmFzZTogJy4vJyxcbiAgICByZXNvbHZlOiB7XG4gICAgICBhbGlhczoge1xuICAgICAgICAnQCc6IGZpbGVVUkxUb1BhdGgobmV3IFVSTCgnLi9zcmMnLCBpbXBvcnQubWV0YS51cmwpKSxcbiAgICAgIH0sXG4gICAgICBleHRlbnNpb25zOiBbXG4gICAgICAgICcubWpzJyxcbiAgICAgICAgJy5qcycsXG4gICAgICAgICcudHMnLFxuICAgICAgICAnLmpzeCcsXG4gICAgICAgICcudHN4JyxcbiAgICAgICAgJy5qc29uJyxcbiAgICAgICAgJy52dWUnLFxuICAgICAgICAnLmxlc3MnLFxuICAgICAgXSxcbiAgICB9LFxuICAgIHBsdWdpbnM6IFtcbiAgICAgIHZ1ZSgpLFxuICAgICAgdnVlSnN4KCksXG5cbiAgICAgIHZpdGVQbHVnaW5CdWlsZElkKCksXG4gICAgICBzdmdMb2FkZXIoKSxcbiAgICAgIENvbXBvbmVudHMoe1xuICAgICAgICByZXNvbHZlcnM6IFtBbnREZXNpZ25WdWVSZXNvbHZlcih7IGltcG9ydFN0eWxlOiBmYWxzZSB9KV0sXG4gICAgICAgIGRpcmVjdG9yeUFzTmFtZXNwYWNlOiB0cnVlLFxuICAgICAgfSksXG4gICAgICBBdXRvSW1wb3J0KHtcbiAgICAgICAgaW1wb3J0czogWyd2dWUnLCAndnVlLXJvdXRlcicsICdwaW5pYSddLFxuICAgICAgICB2dWVUZW1wbGF0ZTogdHJ1ZSxcbiAgICAgIH0pLFxuICAgICAgRGVmaW5lT3B0aW9ucygpLFxuICAgIF0sXG4gICAgY3NzOiB7XG4gICAgICBwcmVwcm9jZXNzb3JPcHRpb25zOiB7XG4gICAgICAgIGxlc3M6IHtcbiAgICAgICAgICBtb2RpZnlWYXJzOiB7XG4gICAgICAgICAgICAnYm9yZGVyLXJhZGl1cy1iYXNlJzogJzVweCcsXG4gICAgICAgICAgfSxcbiAgICAgICAgICBqYXZhc2NyaXB0RW5hYmxlZDogdHJ1ZSxcbiAgICAgICAgfSxcbiAgICAgIH0sXG4gICAgfSxcbiAgICBzZXJ2ZXI6IHtcbiAgICAgIHByb3h5OiB7XG4gICAgICAgICcvYXBpJzoge1xuICAgICAgICAgIHRhcmdldDogZW52LlZJVEVfUFJPWFlfVEFSR0VUIHx8ICdodHRwOi8vbG9jYWxob3N0OjkwMDAnLFxuICAgICAgICAgIGNoYW5nZU9yaWdpbjogdHJ1ZSxcbiAgICAgICAgICBzZWN1cmU6IGZhbHNlLFxuICAgICAgICAgIHdzOiB0cnVlLFxuICAgICAgICB9LFxuICAgICAgfSxcbiAgICB9LFxuICAgIGJ1aWxkOiB7XG4gICAgICBjaHVua1NpemVXYXJuaW5nTGltaXQ6IDEwMDAsXG4gICAgfSxcbiAgfVxufSlcbiJdLAogICJtYXBwaW5ncyI6ICI7QUFBK1EsU0FBUyxLQUFLLHFCQUFxQjtBQUNsVCxTQUFTLGNBQWMsZUFBZTtBQUN0QyxPQUFPLFNBQVM7QUFDaEIsT0FBTyxnQkFBZ0I7QUFDdkIsU0FBUyw0QkFBNEI7QUFDckMsT0FBTyxZQUFZO0FBRW5CLE9BQU8sdUJBQXVCO0FBQzlCLE9BQU8sZUFBZTtBQUN0QixPQUFPLGdCQUFnQjtBQUN2QixPQUFPLG1CQUFtQjtBQVY0SSxJQUFNLDJDQUEyQztBQWF2TixJQUFPLHNCQUFRLGFBQWEsQ0FBQyxFQUFFLEtBQUssTUFBTTtBQUV4QyxRQUFNLE1BQU0sUUFBUSxNQUFNLFFBQVEsSUFBSSxHQUFHLEVBQUU7QUFFM0MsU0FBTztBQUFBLElBQ0wsTUFBTTtBQUFBLElBQ04sU0FBUztBQUFBLE1BQ1AsT0FBTztBQUFBLFFBQ0wsS0FBSyxjQUFjLElBQUksSUFBSSxTQUFTLHdDQUFlLENBQUM7QUFBQSxNQUN0RDtBQUFBLE1BQ0EsWUFBWTtBQUFBLFFBQ1Y7QUFBQSxRQUNBO0FBQUEsUUFDQTtBQUFBLFFBQ0E7QUFBQSxRQUNBO0FBQUEsUUFDQTtBQUFBLFFBQ0E7QUFBQSxRQUNBO0FBQUEsTUFDRjtBQUFBLElBQ0Y7QUFBQSxJQUNBLFNBQVM7QUFBQSxNQUNQLElBQUk7QUFBQSxNQUNKLE9BQU87QUFBQSxNQUVQLGtCQUFrQjtBQUFBLE1BQ2xCLFVBQVU7QUFBQSxNQUNWLFdBQVc7QUFBQSxRQUNULFdBQVcsQ0FBQyxxQkFBcUIsRUFBRSxhQUFhLE1BQU0sQ0FBQyxDQUFDO0FBQUEsUUFDeEQsc0JBQXNCO0FBQUEsTUFDeEIsQ0FBQztBQUFBLE1BQ0QsV0FBVztBQUFBLFFBQ1QsU0FBUyxDQUFDLE9BQU8sY0FBYyxPQUFPO0FBQUEsUUFDdEMsYUFBYTtBQUFBLE1BQ2YsQ0FBQztBQUFBLE1BQ0QsY0FBYztBQUFBLElBQ2hCO0FBQUEsSUFDQSxLQUFLO0FBQUEsTUFDSCxxQkFBcUI7QUFBQSxRQUNuQixNQUFNO0FBQUEsVUFDSixZQUFZO0FBQUEsWUFDVixzQkFBc0I7QUFBQSxVQUN4QjtBQUFBLFVBQ0EsbUJBQW1CO0FBQUEsUUFDckI7QUFBQSxNQUNGO0FBQUEsSUFDRjtBQUFBLElBQ0EsUUFBUTtBQUFBLE1BQ04sT0FBTztBQUFBLFFBQ0wsUUFBUTtBQUFBLFVBQ04sUUFBUSxJQUFJLHFCQUFxQjtBQUFBLFVBQ2pDLGNBQWM7QUFBQSxVQUNkLFFBQVE7QUFBQSxVQUNSLElBQUk7QUFBQSxRQUNOO0FBQUEsTUFDRjtBQUFBLElBQ0Y7QUFBQSxJQUNBLE9BQU87QUFBQSxNQUNMLHVCQUF1QjtBQUFBLElBQ3pCO0FBQUEsRUFDRjtBQUNGLENBQUM7IiwKICAibmFtZXMiOiBbXQp9Cg==
diff --git a/internal/cert/auto_cert.go b/internal/cert/auto_cert.go
index d8c04ad2..6533a7ea 100644
--- a/internal/cert/auto_cert.go
+++ b/internal/cert/auto_cert.go
@@ -21,7 +21,6 @@ func AutoObtain() {
 	logger.Info("AutoCert Worker Started")
 	autoCertList := model.GetAutoCertList()
 	for _, certModel := range autoCertList {
-		certModel := certModel
 		renew(certModel)
 	}
 	logger.Info("AutoCert Worker End")
diff --git a/internal/cert/cert.go b/internal/cert/cert.go
index 302df389..c1e9fb8f 100644
--- a/internal/cert/cert.go
+++ b/internal/cert/cert.go
@@ -8,9 +8,9 @@ import (
 	"github.com/0xJacky/Nginx-UI/internal/cert/dns"
 	"github.com/0xJacky/Nginx-UI/internal/logger"
 	"github.com/0xJacky/Nginx-UI/internal/nginx"
+	"github.com/0xJacky/Nginx-UI/model"
 	"github.com/0xJacky/Nginx-UI/query"
 	"github.com/0xJacky/Nginx-UI/settings"
-	"github.com/go-acme/lego/v4/certcrypto"
 	"github.com/go-acme/lego/v4/certificate"
 	"github.com/go-acme/lego/v4/challenge/http01"
 	"github.com/go-acme/lego/v4/lego"
@@ -31,13 +31,6 @@ const (
 	DNS01  = "dns01"
 )
 
-type ConfigPayload struct {
-	ServerName      []string           `json:"server_name"`
-	ChallengeMethod string             `json:"challenge_method"`
-	DNSCredentialID int                `json:"dns_credential_id"`
-	KeyType         certcrypto.KeyType `json:"key_type"`
-}
-
 func IssueCert(payload *ConfigPayload, logChan chan string, errChan chan error) {
 	defer func() {
 		if err := recover(); err != nil {
@@ -67,9 +60,12 @@ func IssueCert(payload *ConfigPayload, logChan chan string, errChan chan error)
 	}
 
 	l.Println("[INFO] [Nginx UI] Preparing lego configurations")
-	user := User{
-		Email: settings.ServerSettings.Email,
-		Key:   privateKey,
+	user := newUser(settings.ServerSettings.Email)
+
+	user.Key = model.PrivateKey{
+		X: privateKey.PublicKey.X,
+		Y: privateKey.PublicKey.Y,
+		D: privateKey.D,
 	}
 
 	// Start a goroutine to fetch and process logs from channel
@@ -79,18 +75,12 @@ func IssueCert(payload *ConfigPayload, logChan chan string, errChan chan error)
 		}
 	}()
 
-	config := lego.NewConfig(&user)
+	config := lego.NewConfig(user)
 
-	if settings.ServerSettings.Demo {
-		config.CADirURL = "https://acme-staging-v02.api.letsencrypt.org/directory"
-	}
-
-	if settings.ServerSettings.CADir != "" {
-		config.CADirURL = settings.ServerSettings.CADir
-		if config.HTTPClient != nil {
-			config.HTTPClient.Transport = &http.Transport{
-				TLSClientConfig: &tls.Config{InsecureSkipVerify: true},
-			}
+	config.CADirURL = settings.ServerSettings.GetCADir()
+	if config.HTTPClient != nil {
+		config.HTTPClient.Transport = &http.Transport{
+			TLSClientConfig: &tls.Config{InsecureSkipVerify: true},
 		}
 	}
 
@@ -163,7 +153,7 @@ func IssueCert(payload *ConfigPayload, logChan chan string, errChan chan error)
 		errChan <- errors.Wrap(err, "register error")
 		return
 	}
-	user.Registration = reg
+	user.Registration = *reg
 
 	request := certificate.ObtainRequest{
 		Domains: domain,
diff --git a/internal/cert/issue.go b/internal/cert/issue.go
index 2edaa15d..d9d79d39 100644
--- a/internal/cert/issue.go
+++ b/internal/cert/issue.go
@@ -1,10 +1,5 @@
 package cert
 
-import (
-    "crypto"
-    "github.com/go-acme/lego/v4/registration"
-)
-
 type ChannelWriter struct {
     Ch chan []byte
 }
@@ -22,22 +17,3 @@ func (cw *ChannelWriter) Write(p []byte) (n int, err error) {
     cw.Ch <- temp
     return n, nil
 }
-
-// User You'll need a user or account type that implements acme.User
-type User struct {
-    Email        string
-    Registration *registration.Resource
-    Key          crypto.PrivateKey
-}
-
-func (u *User) GetEmail() string {
-    return u.Email
-}
-
-func (u *User) GetRegistration() *registration.Resource {
-    return u.Registration
-}
-
-func (u *User) GetPrivateKey() crypto.PrivateKey {
-    return u.Key
-}
diff --git a/internal/cert/payload.go b/internal/cert/payload.go
new file mode 100644
index 00000000..97fecc5f
--- /dev/null
+++ b/internal/cert/payload.go
@@ -0,0 +1,12 @@
+package cert
+
+import (
+	"github.com/go-acme/lego/v4/certcrypto"
+)
+
+type ConfigPayload struct {
+	ServerName      []string           `json:"server_name"`
+	ChallengeMethod string             `json:"challenge_method"`
+	DNSCredentialID int                `json:"dns_credential_id"`
+	KeyType         certcrypto.KeyType `json:"key_type"`
+}
diff --git a/internal/cert/register.go b/internal/cert/register.go
new file mode 100644
index 00000000..45b4ee02
--- /dev/null
+++ b/internal/cert/register.go
@@ -0,0 +1,53 @@
+package cert
+
+import (
+	"github.com/0xJacky/Nginx-UI/internal/logger"
+	"github.com/0xJacky/Nginx-UI/model"
+	"github.com/0xJacky/Nginx-UI/query"
+	"github.com/0xJacky/Nginx-UI/settings"
+	"github.com/pkg/errors"
+	"gorm.io/gorm"
+)
+
+// InitRegister init the default user for acme
+func InitRegister() {
+	if settings.ServerSettings.Email == "" {
+		return
+	}
+	u := query.AcmeUser
+
+	_, err := u.Where(u.Email.Eq(settings.ServerSettings.Email),
+		u.CADir.Eq(settings.ServerSettings.GetCADir())).First()
+
+	if err == nil {
+		return
+	}
+
+	if !errors.Is(err, gorm.ErrRecordNotFound) {
+		logger.Error(err)
+		return
+	}
+
+	// Create a new user
+	user := &User{
+		AcmeUser: model.AcmeUser{
+			Name:  "System Initial User",
+			Email: settings.ServerSettings.Email,
+			CADir: settings.ServerSettings.GetCADir(),
+		},
+	}
+
+	err = user.Register()
+	if err != nil {
+		logger.Error(err)
+		return
+	}
+
+	err = u.Create(&user.AcmeUser)
+	if err != nil {
+		logger.Error(err)
+		return
+	}
+
+	logger.Info("ACME Default User registered")
+}
diff --git a/internal/cert/user.go b/internal/cert/user.go
new file mode 100644
index 00000000..20ff556f
--- /dev/null
+++ b/internal/cert/user.go
@@ -0,0 +1,18 @@
+package cert
+
+import (
+    "github.com/0xJacky/Nginx-UI/model"
+)
+
+// User You'll need a user or account type that implements acme.User
+type User struct {
+    model.AcmeUser
+}
+
+func newUser(email string) *User {
+    return &User{
+        AcmeUser: model.AcmeUser{
+            Email: email,
+        },
+    }
+}
diff --git a/api/cosy/cosy.go b/internal/cosy/cosy.go
similarity index 100%
rename from api/cosy/cosy.go
rename to internal/cosy/cosy.go
diff --git a/api/cosy/create.go b/internal/cosy/create.go
similarity index 95%
rename from api/cosy/create.go
rename to internal/cosy/create.go
index 3dfcc91b..b29ae7c4 100644
--- a/api/cosy/create.go
+++ b/internal/cosy/create.go
@@ -1,7 +1,7 @@
 package cosy
 
 import (
-	"github.com/0xJacky/Nginx-UI/api/cosy/map2struct"
+	"github.com/0xJacky/Nginx-UI/internal/cosy/map2struct"
 	"github.com/0xJacky/Nginx-UI/model"
 	"github.com/gin-gonic/gin"
 	"gorm.io/gorm/clause"
diff --git a/api/cosy/custom.go b/internal/cosy/custom.go
similarity index 90%
rename from api/cosy/custom.go
rename to internal/cosy/custom.go
index 66ce714e..5fd847be 100644
--- a/api/cosy/custom.go
+++ b/internal/cosy/custom.go
@@ -1,7 +1,7 @@
 package cosy
 
 import (
-	"github.com/0xJacky/Nginx-UI/api/cosy/map2struct"
+	"github.com/0xJacky/Nginx-UI/internal/cosy/map2struct"
 	"github.com/gin-gonic/gin"
 	"net/http"
 )
diff --git a/api/cosy/delete.go b/internal/cosy/delete.go
similarity index 100%
rename from api/cosy/delete.go
rename to internal/cosy/delete.go
diff --git a/api/cosy/error.go b/internal/cosy/error.go
similarity index 100%
rename from api/cosy/error.go
rename to internal/cosy/error.go
diff --git a/api/cosy/filter.go b/internal/cosy/filter.go
similarity index 100%
rename from api/cosy/filter.go
rename to internal/cosy/filter.go
diff --git a/api/cosy/hook.go b/internal/cosy/hook.go
similarity index 100%
rename from api/cosy/hook.go
rename to internal/cosy/hook.go
diff --git a/api/cosy/list.go b/internal/cosy/list.go
similarity index 100%
rename from api/cosy/list.go
rename to internal/cosy/list.go
diff --git a/api/cosy/map2struct/hook.go b/internal/cosy/map2struct/hook.go
similarity index 100%
rename from api/cosy/map2struct/hook.go
rename to internal/cosy/map2struct/hook.go
diff --git a/api/cosy/map2struct/map2struct.go b/internal/cosy/map2struct/map2struct.go
similarity index 100%
rename from api/cosy/map2struct/map2struct.go
rename to internal/cosy/map2struct/map2struct.go
diff --git a/api/cosy/order.go b/internal/cosy/order.go
similarity index 100%
rename from api/cosy/order.go
rename to internal/cosy/order.go
diff --git a/api/cosy/sort.go b/internal/cosy/sort.go
similarity index 100%
rename from api/cosy/sort.go
rename to internal/cosy/sort.go
diff --git a/api/cosy/update.go b/internal/cosy/update.go
similarity index 96%
rename from api/cosy/update.go
rename to internal/cosy/update.go
index ddad2d63..19e91477 100644
--- a/api/cosy/update.go
+++ b/internal/cosy/update.go
@@ -1,7 +1,7 @@
 package cosy
 
 import (
-	"github.com/0xJacky/Nginx-UI/api/cosy/map2struct"
+	"github.com/0xJacky/Nginx-UI/internal/cosy/map2struct"
 	"github.com/0xJacky/Nginx-UI/model"
 	"github.com/gin-gonic/gin"
 	"gorm.io/gorm"
diff --git a/internal/kernal/boot.go b/internal/kernal/boot.go
index 3d559b50..13259317 100644
--- a/internal/kernal/boot.go
+++ b/internal/kernal/boot.go
@@ -41,6 +41,7 @@ func Boot() {
 
 func InitAfterDatabase() {
 	syncs := []func(){
+		cert.InitRegister,
 		InitCronJobs,
 		analytic.RetrieveNodesStatus,
 	}
diff --git a/model/acme_user.go b/model/acme_user.go
new file mode 100644
index 00000000..8e80a9ec
--- /dev/null
+++ b/model/acme_user.go
@@ -0,0 +1,72 @@
+package model
+
+import (
+	"crypto"
+	"crypto/ecdsa"
+	"crypto/elliptic"
+	"crypto/rand"
+	"github.com/go-acme/lego/v4/lego"
+	"github.com/go-acme/lego/v4/registration"
+	"math/big"
+)
+
+type PrivateKey struct {
+	X, Y *big.Int
+	D    *big.Int
+}
+
+type AcmeUser struct {
+	Model
+	Name         string                `json:"name"`
+	Email        string                `json:"email"`
+	CADir        string                `json:"ca_dir"`
+	Registration registration.Resource `json:"registration" gorm:"serializer:json"`
+	Key          PrivateKey            `json:"-" gorm:"serializer:json"`
+}
+
+func (u *AcmeUser) GetEmail() string {
+	return u.Email
+}
+
+func (u *AcmeUser) GetRegistration() *registration.Resource {
+	return &u.Registration
+}
+
+func (u *AcmeUser) GetPrivateKey() crypto.PrivateKey {
+	return &ecdsa.PrivateKey{
+		PublicKey: ecdsa.PublicKey{
+			Curve: elliptic.P256(),
+			X:     u.Key.X,
+			Y:     u.Key.Y,
+		},
+		D: u.Key.D,
+	}
+}
+func (u *AcmeUser) Register() error {
+	privateKey, err := ecdsa.GenerateKey(elliptic.P256(), rand.Reader)
+	if err != nil {
+		return err
+	}
+
+	u.Key = PrivateKey{
+		X: privateKey.PublicKey.X,
+		Y: privateKey.PublicKey.Y,
+		D: privateKey.D,
+	}
+
+	config := lego.NewConfig(u)
+	client, err := lego.NewClient(config)
+	if err != nil {
+		return err
+	}
+
+	// New users will need to register
+	reg, err := client.Registration.Register(registration.RegisterOptions{TermsOfServiceAgreed: true})
+	if err != nil {
+		return err
+	}
+
+	u.Registration = *reg
+
+	return nil
+}
diff --git a/model/model.go b/model/model.go
index 710f3262..2ff75e94 100644
--- a/model/model.go
+++ b/model/model.go
@@ -34,6 +34,7 @@ func GenerateAllModel() []any {
 		DnsCredential{},
 		Environment{},
 		Notification{},
+		AcmeUser{},
 	}
 }
 
diff --git a/query/acme_users.gen.go b/query/acme_users.gen.go
new file mode 100644
index 00000000..818e3c69
--- /dev/null
+++ b/query/acme_users.gen.go
@@ -0,0 +1,378 @@
+// Code generated by gorm.io/gen. DO NOT EDIT.
+// Code generated by gorm.io/gen. DO NOT EDIT.
+// Code generated by gorm.io/gen. DO NOT EDIT.
+
+package query
+
+import (
+	"context"
+	"strings"
+
+	"gorm.io/gorm"
+	"gorm.io/gorm/clause"
+	"gorm.io/gorm/schema"
+
+	"gorm.io/gen"
+	"gorm.io/gen/field"
+
+	"gorm.io/plugin/dbresolver"
+
+	"github.com/0xJacky/Nginx-UI/model"
+)
+
+func newAcmeUser(db *gorm.DB, opts ...gen.DOOption) acmeUser {
+	_acmeUser := acmeUser{}
+
+	_acmeUser.acmeUserDo.UseDB(db, opts...)
+	_acmeUser.acmeUserDo.UseModel(&model.AcmeUser{})
+
+	tableName := _acmeUser.acmeUserDo.TableName()
+	_acmeUser.ALL = field.NewAsterisk(tableName)
+	_acmeUser.ID = field.NewInt(tableName, "id")
+	_acmeUser.CreatedAt = field.NewTime(tableName, "created_at")
+	_acmeUser.UpdatedAt = field.NewTime(tableName, "updated_at")
+	_acmeUser.DeletedAt = field.NewField(tableName, "deleted_at")
+	_acmeUser.Name = field.NewString(tableName, "name")
+	_acmeUser.Email = field.NewString(tableName, "email")
+	_acmeUser.CADir = field.NewString(tableName, "ca_dir")
+	_acmeUser.Registration = field.NewField(tableName, "registration")
+
+	_acmeUser.fillFieldMap()
+
+	return _acmeUser
+}
+
+type acmeUser struct {
+	acmeUserDo
+
+	ALL          field.Asterisk
+	ID           field.Int
+	CreatedAt    field.Time
+	UpdatedAt    field.Time
+	DeletedAt    field.Field
+	Name         field.String
+	Email        field.String
+	CADir        field.String
+	Registration field.Field
+
+	fieldMap map[string]field.Expr
+}
+
+func (a acmeUser) Table(newTableName string) *acmeUser {
+	a.acmeUserDo.UseTable(newTableName)
+	return a.updateTableName(newTableName)
+}
+
+func (a acmeUser) As(alias string) *acmeUser {
+	a.acmeUserDo.DO = *(a.acmeUserDo.As(alias).(*gen.DO))
+	return a.updateTableName(alias)
+}
+
+func (a *acmeUser) updateTableName(table string) *acmeUser {
+	a.ALL = field.NewAsterisk(table)
+	a.ID = field.NewInt(table, "id")
+	a.CreatedAt = field.NewTime(table, "created_at")
+	a.UpdatedAt = field.NewTime(table, "updated_at")
+	a.DeletedAt = field.NewField(table, "deleted_at")
+	a.Name = field.NewString(table, "name")
+	a.Email = field.NewString(table, "email")
+	a.CADir = field.NewString(table, "ca_dir")
+	a.Registration = field.NewField(table, "registration")
+
+	a.fillFieldMap()
+
+	return a
+}
+
+func (a *acmeUser) GetFieldByName(fieldName string) (field.OrderExpr, bool) {
+	_f, ok := a.fieldMap[fieldName]
+	if !ok || _f == nil {
+		return nil, false
+	}
+	_oe, ok := _f.(field.OrderExpr)
+	return _oe, ok
+}
+
+func (a *acmeUser) fillFieldMap() {
+	a.fieldMap = make(map[string]field.Expr, 8)
+	a.fieldMap["id"] = a.ID
+	a.fieldMap["created_at"] = a.CreatedAt
+	a.fieldMap["updated_at"] = a.UpdatedAt
+	a.fieldMap["deleted_at"] = a.DeletedAt
+	a.fieldMap["name"] = a.Name
+	a.fieldMap["email"] = a.Email
+	a.fieldMap["ca_dir"] = a.CADir
+	a.fieldMap["registration"] = a.Registration
+}
+
+func (a acmeUser) clone(db *gorm.DB) acmeUser {
+	a.acmeUserDo.ReplaceConnPool(db.Statement.ConnPool)
+	return a
+}
+
+func (a acmeUser) replaceDB(db *gorm.DB) acmeUser {
+	a.acmeUserDo.ReplaceDB(db)
+	return a
+}
+
+type acmeUserDo struct{ gen.DO }
+
+// FirstByID Where("id=@id")
+func (a acmeUserDo) FirstByID(id int) (result *model.AcmeUser, err error) {
+	var params []interface{}
+
+	var generateSQL strings.Builder
+	params = append(params, id)
+	generateSQL.WriteString("id=? ")
+
+	var executeSQL *gorm.DB
+	executeSQL = a.UnderlyingDB().Where(generateSQL.String(), params...).Take(&result) // ignore_security_alert
+	err = executeSQL.Error
+
+	return
+}
+
+// DeleteByID update @@table set deleted_at=strftime('%Y-%m-%d %H:%M:%S','now') where id=@id
+func (a acmeUserDo) DeleteByID(id int) (err error) {
+	var params []interface{}
+
+	var generateSQL strings.Builder
+	params = append(params, id)
+	generateSQL.WriteString("update acme_users set deleted_at=strftime('%Y-%m-%d %H:%M:%S','now') where id=? ")
+
+	var executeSQL *gorm.DB
+	executeSQL = a.UnderlyingDB().Exec(generateSQL.String(), params...) // ignore_security_alert
+	err = executeSQL.Error
+
+	return
+}
+
+func (a acmeUserDo) Debug() *acmeUserDo {
+	return a.withDO(a.DO.Debug())
+}
+
+func (a acmeUserDo) WithContext(ctx context.Context) *acmeUserDo {
+	return a.withDO(a.DO.WithContext(ctx))
+}
+
+func (a acmeUserDo) ReadDB() *acmeUserDo {
+	return a.Clauses(dbresolver.Read)
+}
+
+func (a acmeUserDo) WriteDB() *acmeUserDo {
+	return a.Clauses(dbresolver.Write)
+}
+
+func (a acmeUserDo) Session(config *gorm.Session) *acmeUserDo {
+	return a.withDO(a.DO.Session(config))
+}
+
+func (a acmeUserDo) Clauses(conds ...clause.Expression) *acmeUserDo {
+	return a.withDO(a.DO.Clauses(conds...))
+}
+
+func (a acmeUserDo) Returning(value interface{}, columns ...string) *acmeUserDo {
+	return a.withDO(a.DO.Returning(value, columns...))
+}
+
+func (a acmeUserDo) Not(conds ...gen.Condition) *acmeUserDo {
+	return a.withDO(a.DO.Not(conds...))
+}
+
+func (a acmeUserDo) Or(conds ...gen.Condition) *acmeUserDo {
+	return a.withDO(a.DO.Or(conds...))
+}
+
+func (a acmeUserDo) Select(conds ...field.Expr) *acmeUserDo {
+	return a.withDO(a.DO.Select(conds...))
+}
+
+func (a acmeUserDo) Where(conds ...gen.Condition) *acmeUserDo {
+	return a.withDO(a.DO.Where(conds...))
+}
+
+func (a acmeUserDo) Order(conds ...field.Expr) *acmeUserDo {
+	return a.withDO(a.DO.Order(conds...))
+}
+
+func (a acmeUserDo) Distinct(cols ...field.Expr) *acmeUserDo {
+	return a.withDO(a.DO.Distinct(cols...))
+}
+
+func (a acmeUserDo) Omit(cols ...field.Expr) *acmeUserDo {
+	return a.withDO(a.DO.Omit(cols...))
+}
+
+func (a acmeUserDo) Join(table schema.Tabler, on ...field.Expr) *acmeUserDo {
+	return a.withDO(a.DO.Join(table, on...))
+}
+
+func (a acmeUserDo) LeftJoin(table schema.Tabler, on ...field.Expr) *acmeUserDo {
+	return a.withDO(a.DO.LeftJoin(table, on...))
+}
+
+func (a acmeUserDo) RightJoin(table schema.Tabler, on ...field.Expr) *acmeUserDo {
+	return a.withDO(a.DO.RightJoin(table, on...))
+}
+
+func (a acmeUserDo) Group(cols ...field.Expr) *acmeUserDo {
+	return a.withDO(a.DO.Group(cols...))
+}
+
+func (a acmeUserDo) Having(conds ...gen.Condition) *acmeUserDo {
+	return a.withDO(a.DO.Having(conds...))
+}
+
+func (a acmeUserDo) Limit(limit int) *acmeUserDo {
+	return a.withDO(a.DO.Limit(limit))
+}
+
+func (a acmeUserDo) Offset(offset int) *acmeUserDo {
+	return a.withDO(a.DO.Offset(offset))
+}
+
+func (a acmeUserDo) Scopes(funcs ...func(gen.Dao) gen.Dao) *acmeUserDo {
+	return a.withDO(a.DO.Scopes(funcs...))
+}
+
+func (a acmeUserDo) Unscoped() *acmeUserDo {
+	return a.withDO(a.DO.Unscoped())
+}
+
+func (a acmeUserDo) Create(values ...*model.AcmeUser) error {
+	if len(values) == 0 {
+		return nil
+	}
+	return a.DO.Create(values)
+}
+
+func (a acmeUserDo) CreateInBatches(values []*model.AcmeUser, batchSize int) error {
+	return a.DO.CreateInBatches(values, batchSize)
+}
+
+// Save : !!! underlying implementation is different with GORM
+// The method is equivalent to executing the statement: db.Clauses(clause.OnConflict{UpdateAll: true}).Create(values)
+func (a acmeUserDo) Save(values ...*model.AcmeUser) error {
+	if len(values) == 0 {
+		return nil
+	}
+	return a.DO.Save(values)
+}
+
+func (a acmeUserDo) First() (*model.AcmeUser, error) {
+	if result, err := a.DO.First(); err != nil {
+		return nil, err
+	} else {
+		return result.(*model.AcmeUser), nil
+	}
+}
+
+func (a acmeUserDo) Take() (*model.AcmeUser, error) {
+	if result, err := a.DO.Take(); err != nil {
+		return nil, err
+	} else {
+		return result.(*model.AcmeUser), nil
+	}
+}
+
+func (a acmeUserDo) Last() (*model.AcmeUser, error) {
+	if result, err := a.DO.Last(); err != nil {
+		return nil, err
+	} else {
+		return result.(*model.AcmeUser), nil
+	}
+}
+
+func (a acmeUserDo) Find() ([]*model.AcmeUser, error) {
+	result, err := a.DO.Find()
+	return result.([]*model.AcmeUser), err
+}
+
+func (a acmeUserDo) FindInBatch(batchSize int, fc func(tx gen.Dao, batch int) error) (results []*model.AcmeUser, err error) {
+	buf := make([]*model.AcmeUser, 0, batchSize)
+	err = a.DO.FindInBatches(&buf, batchSize, func(tx gen.Dao, batch int) error {
+		defer func() { results = append(results, buf...) }()
+		return fc(tx, batch)
+	})
+	return results, err
+}
+
+func (a acmeUserDo) FindInBatches(result *[]*model.AcmeUser, batchSize int, fc func(tx gen.Dao, batch int) error) error {
+	return a.DO.FindInBatches(result, batchSize, fc)
+}
+
+func (a acmeUserDo) Attrs(attrs ...field.AssignExpr) *acmeUserDo {
+	return a.withDO(a.DO.Attrs(attrs...))
+}
+
+func (a acmeUserDo) Assign(attrs ...field.AssignExpr) *acmeUserDo {
+	return a.withDO(a.DO.Assign(attrs...))
+}
+
+func (a acmeUserDo) Joins(fields ...field.RelationField) *acmeUserDo {
+	for _, _f := range fields {
+		a = *a.withDO(a.DO.Joins(_f))
+	}
+	return &a
+}
+
+func (a acmeUserDo) Preload(fields ...field.RelationField) *acmeUserDo {
+	for _, _f := range fields {
+		a = *a.withDO(a.DO.Preload(_f))
+	}
+	return &a
+}
+
+func (a acmeUserDo) FirstOrInit() (*model.AcmeUser, error) {
+	if result, err := a.DO.FirstOrInit(); err != nil {
+		return nil, err
+	} else {
+		return result.(*model.AcmeUser), nil
+	}
+}
+
+func (a acmeUserDo) FirstOrCreate() (*model.AcmeUser, error) {
+	if result, err := a.DO.FirstOrCreate(); err != nil {
+		return nil, err
+	} else {
+		return result.(*model.AcmeUser), nil
+	}
+}
+
+func (a acmeUserDo) FindByPage(offset int, limit int) (result []*model.AcmeUser, count int64, err error) {
+	result, err = a.Offset(offset).Limit(limit).Find()
+	if err != nil {
+		return
+	}
+
+	if size := len(result); 0 < limit && 0 < size && size < limit {
+		count = int64(size + offset)
+		return
+	}
+
+	count, err = a.Offset(-1).Limit(-1).Count()
+	return
+}
+
+func (a acmeUserDo) ScanByPage(result interface{}, offset int, limit int) (count int64, err error) {
+	count, err = a.Count()
+	if err != nil {
+		return
+	}
+
+	err = a.Offset(offset).Limit(limit).Scan(result)
+	return
+}
+
+func (a acmeUserDo) Scan(result interface{}) (err error) {
+	return a.DO.Scan(result)
+}
+
+func (a acmeUserDo) Delete(models ...*model.AcmeUser) (result gen.ResultInfo, err error) {
+	return a.DO.Delete(models)
+}
+
+func (a *acmeUserDo) withDO(do gen.Dao) *acmeUserDo {
+	a.DO = *do.(*gen.DO)
+	return a
+}
diff --git a/query/certs.gen.go b/query/certs.gen.go
index 718990cf..0921446f 100644
--- a/query/certs.gen.go
+++ b/query/certs.gen.go
@@ -40,6 +40,7 @@ func newCert(db *gorm.DB, opts ...gen.DOOption) cert {
 	_cert.AutoCert = field.NewInt(tableName, "auto_cert")
 	_cert.ChallengeMethod = field.NewString(tableName, "challenge_method")
 	_cert.DnsCredentialID = field.NewInt(tableName, "dns_credential_id")
+	_cert.KeyType = field.NewString(tableName, "key_type")
 	_cert.Log = field.NewString(tableName, "log")
 	_cert.DnsCredential = certBelongsToDnsCredential{
 		db: db.Session(&gorm.Session{}),
@@ -68,6 +69,7 @@ type cert struct {
 	AutoCert              field.Int
 	ChallengeMethod       field.String
 	DnsCredentialID       field.Int
+	KeyType               field.String
 	Log                   field.String
 	DnsCredential         certBelongsToDnsCredential
 
@@ -98,6 +100,7 @@ func (c *cert) updateTableName(table string) *cert {
 	c.AutoCert = field.NewInt(table, "auto_cert")
 	c.ChallengeMethod = field.NewString(table, "challenge_method")
 	c.DnsCredentialID = field.NewInt(table, "dns_credential_id")
+	c.KeyType = field.NewString(table, "key_type")
 	c.Log = field.NewString(table, "log")
 
 	c.fillFieldMap()
@@ -115,7 +118,7 @@ func (c *cert) GetFieldByName(fieldName string) (field.OrderExpr, bool) {
 }
 
 func (c *cert) fillFieldMap() {
-	c.fieldMap = make(map[string]field.Expr, 14)
+	c.fieldMap = make(map[string]field.Expr, 15)
 	c.fieldMap["id"] = c.ID
 	c.fieldMap["created_at"] = c.CreatedAt
 	c.fieldMap["updated_at"] = c.UpdatedAt
@@ -128,6 +131,7 @@ func (c *cert) fillFieldMap() {
 	c.fieldMap["auto_cert"] = c.AutoCert
 	c.fieldMap["challenge_method"] = c.ChallengeMethod
 	c.fieldMap["dns_credential_id"] = c.DnsCredentialID
+	c.fieldMap["key_type"] = c.KeyType
 	c.fieldMap["log"] = c.Log
 
 }
diff --git a/query/gen.go b/query/gen.go
index 7563b384..a8f3beaa 100644
--- a/query/gen.go
+++ b/query/gen.go
@@ -17,6 +17,7 @@ import (
 
 var (
 	Q             = new(Query)
+	AcmeUser      *acmeUser
 	Auth          *auth
 	AuthToken     *authToken
 	Cert          *cert
@@ -31,6 +32,7 @@ var (
 
 func SetDefault(db *gorm.DB, opts ...gen.DOOption) {
 	*Q = *Use(db, opts...)
+	AcmeUser = &Q.AcmeUser
 	Auth = &Q.Auth
 	AuthToken = &Q.AuthToken
 	Cert = &Q.Cert
@@ -46,6 +48,7 @@ func SetDefault(db *gorm.DB, opts ...gen.DOOption) {
 func Use(db *gorm.DB, opts ...gen.DOOption) *Query {
 	return &Query{
 		db:            db,
+		AcmeUser:      newAcmeUser(db, opts...),
 		Auth:          newAuth(db, opts...),
 		AuthToken:     newAuthToken(db, opts...),
 		Cert:          newCert(db, opts...),
@@ -62,6 +65,7 @@ func Use(db *gorm.DB, opts ...gen.DOOption) *Query {
 type Query struct {
 	db *gorm.DB
 
+	AcmeUser      acmeUser
 	Auth          auth
 	AuthToken     authToken
 	Cert          cert
@@ -79,6 +83,7 @@ func (q *Query) Available() bool { return q.db != nil }
 func (q *Query) clone(db *gorm.DB) *Query {
 	return &Query{
 		db:            db,
+		AcmeUser:      q.AcmeUser.clone(db),
 		Auth:          q.Auth.clone(db),
 		AuthToken:     q.AuthToken.clone(db),
 		Cert:          q.Cert.clone(db),
@@ -103,6 +108,7 @@ func (q *Query) WriteDB() *Query {
 func (q *Query) ReplaceDB(db *gorm.DB) *Query {
 	return &Query{
 		db:            db,
+		AcmeUser:      q.AcmeUser.replaceDB(db),
 		Auth:          q.Auth.replaceDB(db),
 		AuthToken:     q.AuthToken.replaceDB(db),
 		Cert:          q.Cert.replaceDB(db),
@@ -117,6 +123,7 @@ func (q *Query) ReplaceDB(db *gorm.DB) *Query {
 }
 
 type queryCtx struct {
+	AcmeUser      *acmeUserDo
 	Auth          *authDo
 	AuthToken     *authTokenDo
 	Cert          *certDo
@@ -131,6 +138,7 @@ type queryCtx struct {
 
 func (q *Query) WithContext(ctx context.Context) *queryCtx {
 	return &queryCtx{
+		AcmeUser:      q.AcmeUser.WithContext(ctx),
 		Auth:          q.Auth.WithContext(ctx),
 		AuthToken:     q.AuthToken.WithContext(ctx),
 		Cert:          q.Cert.WithContext(ctx),
diff --git a/router/routers.go b/router/routers.go
index 649eb4c2..1e003af4 100644
--- a/router/routers.go
+++ b/router/routers.go
@@ -55,6 +55,7 @@ func InitRouter() *gin.Engine {
 			template.InitRouter(g)
 			certificate.InitCertificateRouter(g)
 			certificate.InitDNSCredentialRouter(g)
+			certificate.InitAcmeUserRouter(g)
 			system.InitPrivateRouter(g)
 			openai.InitRouter(g)
 			cluster.InitRouter(g)
diff --git a/settings/server.go b/settings/server.go
index bacf914f..2c972445 100644
--- a/settings/server.go
+++ b/settings/server.go
@@ -1,5 +1,9 @@
 package settings
 
+import (
+	"github.com/go-acme/lego/v4/lego"
+)
+
 type Server struct {
 	HttpHost          string `json:"http_host" protected:"true"`
 	HttpPort          string `json:"http_port" protected:"true"`
@@ -16,6 +20,18 @@ type Server struct {
 	GithubProxy       string `json:"github_proxy" binding:"omitempty,url"`
 }
 
+func (s *Server) GetCADir() string {
+	if s.Demo {
+		return lego.LEDirectoryStaging
+	}
+
+	if s.CADir != "" {
+		return s.CADir
+	}
+
+	return lego.LEDirectoryProduction
+}
+
 var ServerSettings = Server{
 	HttpHost:          "0.0.0.0",
 	HttpPort:          "9000",