perf: support "skip insecure verify" and "sni" for SSL #67 #113

chore: add wechat official account entrance
refactor: move i18n calling out of computed
2024-01-11 00:32:55 +08:00 · 2024-01-10 18:27:56 +08:00 · 2024-01-10 15:32:19 +08:00 · 2024-01-10 15:32:19 +08:00
42 changed files with 414 additions and 353 deletions
--- a/backend/services/browser_service.go
+++ b/backend/services/browser_service.go
@ -1189,7 +1189,7 @@ func (b *browserService) SetKeyValue(param types.SetKeyParam) (resp types.JSResp
 					score, _ := strconv.ParseFloat(strs[i+1].(string), 64)
 					members = append(members, redis.Z{
 						Score:  score,
-						Member: strs[i].(string),
+						Member: strs[i],
 					})
 				}
 				err = client.ZAdd(ctx, key, members...).Err()
--- a/backend/services/connection_service.go
+++ b/backend/services/connection_service.go
@ -107,14 +107,11 @@ func (c *connectionService) buildOption(config types.ConnectionConfig) (*redis.O
 			caCertPool.AppendCertsFromPEM(ca)
 		}

-		if len(certs) <= 0 {
-			return nil, errors.New("tls config error")
-		}
-
 		tlsConfig = &tls.Config{
 			RootCAs:            caCertPool,
-			InsecureSkipVerify: false,
+			InsecureSkipVerify: config.SSL.AllowInsecure,
 			Certificates:       certs,
+			ServerName:         strings.TrimSpace(config.SSL.SNI),
 		}
 	}

--- a/backend/types/connection.go
+++ b/backend/types/connection.go
@ -46,6 +46,8 @@ type ConnectionSSL struct {
 	KeyFile       string `json:"keyFile,omitempty" yaml:"keyFile,omitempty"`
 	CertFile      string `json:"certFile,omitempty" yaml:"certFile,omitempty"`
 	CAFile        string `json:"caFile,omitempty" yaml:"caFile,omitempty"`
+	AllowInsecure bool   `json:"allowInsecure,omitempty" yaml:"allowInsecure,omitempty"`
+	SNI           string `json:"sni,omitempty" yaml:"sni,omitempty"`
 }

 type ConnectionSSH struct {
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@ -14,17 +14,17 @@
        "monaco-editor": "^0.45.0",
        "pinia": "^2.1.7",
        "sass": "^1.69.7",
-        "vue": "^3.4.5",
+        "vue": "^3.4.7",
        "vue-i18n": "^9.9.0",
        "xterm": "^5.3.0",
        "xterm-addon-fit": "^0.8.0"
      },
      "devDependencies": {
        "@vitejs/plugin-vue": "^5.0.2",
-        "naive-ui": "^2.36.0",
+        "naive-ui": "^2.37.3",
        "prettier": "^3.1.1",
        "unplugin-auto-import": "^0.17.3",
-        "unplugin-icons": "^0.18.1",
+        "unplugin-icons": "^0.18.2",
        "unplugin-vue-components": "^0.26.0",
        "vite": "^5.0.11"
      }
@ -877,36 +877,36 @@
      }
    },
    "node_modules/@vue/compiler-core": {
-      "version": "3.4.5",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.5.tgz",
-      "integrity": "sha512-Daka7P1z2AgKjzuueWXhwzIsKu0NkLB6vGbNVEV2iJ8GJTrzraZo/Sk4GWCMRtd/qVi3zwnk+Owbd/xSZbwHtQ==",
+      "version": "3.4.7",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.7.tgz",
+      "integrity": "sha512-hhCaE3pTMrlIJK7M/o3Xf7HV8+JoNTGOQ/coWS+V+pH6QFFyqtoXqQzpqsNp7UK17xYKua/MBiKj4e1vgZOBYw==",
      "dependencies": {
        "@babel/parser": "^7.23.6",
-        "@vue/shared": "3.4.5",
+        "@vue/shared": "3.4.7",
        "entities": "^4.5.0",
        "estree-walker": "^2.0.2",
        "source-map-js": "^1.0.2"
      }
    },
    "node_modules/@vue/compiler-dom": {
-      "version": "3.4.5",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.5.tgz",
-      "integrity": "sha512-J8YlxknJVd90SXFJ4HwGANSAXsx5I0lK30sO/zvYV7s5gXf7gZR7r/1BmZ2ju7RGH1lnc6bpBc6nL61yW+PsAQ==",
+      "version": "3.4.7",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.7.tgz",
+      "integrity": "sha512-qDKBAIurCTub4n/6jDYkXwgsFuriqqmmLrIq1N2QDfYJA/mwiwvxi09OGn28g+uDdERX9NaKDLji0oTjE3sScg==",
      "dependencies": {
-        "@vue/compiler-core": "3.4.5",
-        "@vue/shared": "3.4.5"
+        "@vue/compiler-core": "3.4.7",
+        "@vue/shared": "3.4.7"
      }
    },
    "node_modules/@vue/compiler-sfc": {
-      "version": "3.4.5",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.5.tgz",
-      "integrity": "sha512-jauvkDuSSUbP0ebhfNqljhShA90YEfX/0wZ+w40oZF43IjGyWYjqYaJbvMJwGOd+9+vODW6eSvnk28f0SGV7OQ==",
+      "version": "3.4.7",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.7.tgz",
+      "integrity": "sha512-Gec6CLkReVswDYjQFq79O5rktri4R7TsD/VPCiUoJw40JhNNxaNJJa8mrQrWoJluW4ETy6QN0NUyC/JO77OCOw==",
      "dependencies": {
        "@babel/parser": "^7.23.6",
-        "@vue/compiler-core": "3.4.5",
-        "@vue/compiler-dom": "3.4.5",
-        "@vue/compiler-ssr": "3.4.5",
-        "@vue/shared": "3.4.5",
+        "@vue/compiler-core": "3.4.7",
+        "@vue/compiler-dom": "3.4.7",
+        "@vue/compiler-ssr": "3.4.7",
+        "@vue/shared": "3.4.7",
        "estree-walker": "^2.0.2",
        "magic-string": "^0.30.5",
        "postcss": "^8.4.32",
@ -914,12 +914,12 @@
      }
    },
    "node_modules/@vue/compiler-ssr": {
-      "version": "3.4.5",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.5.tgz",
-      "integrity": "sha512-DDdEcDzj2lWTMfUMMtEpLDhURai9LhM0zSZ219jCt7b2Vyl0/jy3keFgCPMitG0V1S1YG4Cmws3lWHWdxHQOpg==",
+      "version": "3.4.7",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.7.tgz",
+      "integrity": "sha512-PvYeSOvnCkST5mGS0TLwEn5w+4GavtEn6adcq8AspbHaIr+mId5hp7cG3ASy3iy8b+LuXEG2/QaV/nj5BQ/Aww==",
      "dependencies": {
-        "@vue/compiler-dom": "3.4.5",
-        "@vue/shared": "3.4.5"
+        "@vue/compiler-dom": "3.4.7",
+        "@vue/shared": "3.4.7"
      }
    },
    "node_modules/@vue/devtools-api": {
@ -928,29 +928,29 @@
      "integrity": "sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q=="
    },
    "node_modules/@vue/reactivity": {
-      "version": "3.4.5",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.5.tgz",
-      "integrity": "sha512-BcWkKvjdvqJwb7BhhFkXPLDCecX4d4a6GATvCduJQDLv21PkPowAE5GKuIE5p6RC07/Lp9FMkkq4AYCTVF5KlQ==",
+      "version": "3.4.7",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.7.tgz",
+      "integrity": "sha512-F539DO0ogH0+L8F9Pnw7cjqibcmSOh5UTk16u5f4MKQ8fraqepI9zdh+sozPX6VmEHOcjo8qw3Or9ZcFFw4SZA==",
      "dependencies": {
-        "@vue/shared": "3.4.5"
+        "@vue/shared": "3.4.7"
      }
    },
    "node_modules/@vue/runtime-core": {
-      "version": "3.4.5",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.5.tgz",
-      "integrity": "sha512-wh9ELIOQKeWT9SaUPdLrsxRkZv14jp+SJm9aiQGWio+/MWNM3Lib0wE6CoKEqQ9+SCYyGjDBhTOTtO47kCgbkg==",
+      "version": "3.4.7",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.7.tgz",
+      "integrity": "sha512-QMMsWRQaD3BpGyjjChthpl4Mji4Fjx1qfdufsXlDkKU3HV+hWNor2z+29F+E1MmVcP0ZfRZUfqYgtsQoL7IGwQ==",
      "dependencies": {
-        "@vue/reactivity": "3.4.5",
-        "@vue/shared": "3.4.5"
+        "@vue/reactivity": "3.4.7",
+        "@vue/shared": "3.4.7"
      }
    },
    "node_modules/@vue/runtime-dom": {
-      "version": "3.4.5",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.5.tgz",
-      "integrity": "sha512-n5ewvOjyG3IEpqGBahdPXODFSpVlSz3H4LF76Sx0XAqpIOqyJ5bIb2PrdYuH2ogBMAQPh+o5tnoH4nJpBr8U0Q==",
+      "version": "3.4.7",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.7.tgz",
+      "integrity": "sha512-XwegyUY1rw8zxsX1Z36vwYcqo+uOgih5ti7y9vx+pPFhNdSQmN4LqK2RmSeAJG1oKV8NqSUmjpv92f/x6h0SeQ==",
      "dependencies": {
-        "@vue/runtime-core": "3.4.5",
-        "@vue/shared": "3.4.5",
+        "@vue/runtime-core": "3.4.7",
+        "@vue/shared": "3.4.7",
        "csstype": "^3.1.3"
      }
    },
@ -960,21 +960,21 @@
      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
    },
    "node_modules/@vue/server-renderer": {
-      "version": "3.4.5",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.5.tgz",
-      "integrity": "sha512-jOFc/VE87yvifQpNju12VcqimH8pBLxdcT+t3xMeiED1K6DfH9SORyhFEoZlW5TG2Vwfn3Ul5KE+1aC99xnSBg==",
+      "version": "3.4.7",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.7.tgz",
+      "integrity": "sha512-3bWnYLEkLLhkDWqvNk7IvbQD4UcxvFKxELBiOO2iG3m6AniFIsBWfHOO5tLVQnjdWkODu4rq0GipmfEenVAK5Q==",
      "dependencies": {
-        "@vue/compiler-ssr": "3.4.5",
-        "@vue/shared": "3.4.5"
+        "@vue/compiler-ssr": "3.4.7",
+        "@vue/shared": "3.4.7"
      },
      "peerDependencies": {
-        "vue": "3.4.5"
+        "vue": "3.4.7"
      }
    },
    "node_modules/@vue/shared": {
-      "version": "3.4.5",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.5.tgz",
-      "integrity": "sha512-6XptuzlMvN4l4cDnDw36pdGEV+9njYkQ1ZE0Q6iZLwrKefKaOJyiFmcP3/KBDHbt72cJZGtllAc1GaHe6XGAyg=="
+      "version": "3.4.7",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.7.tgz",
+      "integrity": "sha512-G+i4glX1dMJk88sbJEcQEGWRQnVm9eIY7CcQbO5dpdsD9SF8jka3Mr5OqZYGjczGN1+D6EUwdu6phcmcx9iuPA=="
    },
    "node_modules/acorn": {
      "version": "8.11.2",
@ -1545,9 +1545,9 @@
      "dev": true
    },
    "node_modules/naive-ui": {
-      "version": "2.36.0",
-      "resolved": "https://registry.npmjs.org/naive-ui/-/naive-ui-2.36.0.tgz",
-      "integrity": "sha512-r1ydtEm1Ryf/aWpbLCf32mQAGK99jd1eXgpkCtIomcBRZeAtusfy6zCtIpCppoCuIKM3BW5DMafhVxilubk/lQ==",
+      "version": "2.37.3",
+      "resolved": "https://registry.npmjs.org/naive-ui/-/naive-ui-2.37.3.tgz",
+      "integrity": "sha512-aUkHFXVIluSi8Me+npbcsdv1NYhVMj5t9YaruoCESlqmfqspj+R2QHEVXkTtUI1kQwVrABMCtAGq/wountqjZA==",
      "dev": true,
      "dependencies": {
        "@css-render/plugin-bem": "^0.15.12",
@ -1557,6 +1557,7 @@
        "@types/lodash-es": "^4.17.9",
        "async-validator": "^4.2.5",
        "css-render": "^0.15.12",
+        "csstype": "^3.1.3",
        "date-fns": "^2.30.0",
        "date-fns-tz": "^2.0.0",
        "evtd": "^0.2.4",
@ -1567,12 +1568,18 @@
        "treemate": "^0.3.11",
        "vdirs": "^0.1.8",
        "vooks": "^0.2.12",
-        "vueuc": "^0.4.54"
+        "vueuc": "^0.4.58"
      },
      "peerDependencies": {
        "vue": "^3.0.0"
      }
    },
+    "node_modules/naive-ui/node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "dev": true
+    },
    "node_modules/nanoid": {
      "version": "3.3.7",
      "resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.7.tgz",
@ -2084,9 +2091,9 @@
      }
    },
    "node_modules/unplugin-icons": {
-      "version": "0.18.1",
-      "resolved": "https://registry.npmmirror.com/unplugin-icons/-/unplugin-icons-0.18.1.tgz",
-      "integrity": "sha512-WzKu/eoq74YC7vyEAGsFebkRzsZrRkR4FUzLU6gbpfa7WRaVVpQS2n7LSxE1iRUN0scKL5b9bq+i0wucR+ttFQ==",
+      "version": "0.18.2",
+      "resolved": "https://registry.npmjs.org/unplugin-icons/-/unplugin-icons-0.18.2.tgz",
+      "integrity": "sha512-OgZoIJHGubeJmc3KePMOy62ovtxPEJfNMlr5tU+1ZqHGpSXubg3fnqq28VPvLL0D5vKj2PRCJF9tVGbQ7vBXJQ==",
      "dev": true,
      "dependencies": {
        "@antfu/install-pkg": "^0.3.0",
@ -2097,6 +2104,9 @@
        "local-pkg": "^0.5.0",
        "unplugin": "^1.5.1"
      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
      "peerDependencies": {
        "@svgr/core": ">=7.0.0",
        "@svgx/core": "^1.0.1",
@ -2249,15 +2259,15 @@
      }
    },
    "node_modules/vue": {
-      "version": "3.4.5",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.5.tgz",
-      "integrity": "sha512-VH6nHFhLPjgu2oh5vEBXoNZxsGHuZNr3qf4PHClwJWw6IDqw6B3x+4J+ABdoZ0aJuT8Zi0zf3GpGlLQCrGWHrw==",
+      "version": "3.4.7",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.7.tgz",
+      "integrity": "sha512-4urmkWpudekq0CPNMO7p6mBGa9qmTXwJMO2r6CT4EzIJVG7WoSReiysiNb7OSi/WI113oX0Srn9Rz1k/DCXKFQ==",
      "dependencies": {
-        "@vue/compiler-dom": "3.4.5",
-        "@vue/compiler-sfc": "3.4.5",
-        "@vue/runtime-dom": "3.4.5",
-        "@vue/server-renderer": "3.4.5",
-        "@vue/shared": "3.4.5"
+        "@vue/compiler-dom": "3.4.7",
+        "@vue/compiler-sfc": "3.4.7",
+        "@vue/runtime-dom": "3.4.7",
+        "@vue/server-renderer": "3.4.7",
+        "@vue/shared": "3.4.7"
      },
      "peerDependencies": {
        "typescript": "*"
@ -2855,36 +2865,36 @@
      "requires": {}
    },
    "@vue/compiler-core": {
-      "version": "3.4.5",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.5.tgz",
-      "integrity": "sha512-Daka7P1z2AgKjzuueWXhwzIsKu0NkLB6vGbNVEV2iJ8GJTrzraZo/Sk4GWCMRtd/qVi3zwnk+Owbd/xSZbwHtQ==",
+      "version": "3.4.7",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.7.tgz",
+      "integrity": "sha512-hhCaE3pTMrlIJK7M/o3Xf7HV8+JoNTGOQ/coWS+V+pH6QFFyqtoXqQzpqsNp7UK17xYKua/MBiKj4e1vgZOBYw==",
      "requires": {
        "@babel/parser": "^7.23.6",
-        "@vue/shared": "3.4.5",
+        "@vue/shared": "3.4.7",
        "entities": "^4.5.0",
        "estree-walker": "^2.0.2",
        "source-map-js": "^1.0.2"
      }
    },
    "@vue/compiler-dom": {
-      "version": "3.4.5",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.5.tgz",
-      "integrity": "sha512-J8YlxknJVd90SXFJ4HwGANSAXsx5I0lK30sO/zvYV7s5gXf7gZR7r/1BmZ2ju7RGH1lnc6bpBc6nL61yW+PsAQ==",
+      "version": "3.4.7",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.7.tgz",
+      "integrity": "sha512-qDKBAIurCTub4n/6jDYkXwgsFuriqqmmLrIq1N2QDfYJA/mwiwvxi09OGn28g+uDdERX9NaKDLji0oTjE3sScg==",
      "requires": {
-        "@vue/compiler-core": "3.4.5",
-        "@vue/shared": "3.4.5"
+        "@vue/compiler-core": "3.4.7",
+        "@vue/shared": "3.4.7"
      }
    },
    "@vue/compiler-sfc": {
-      "version": "3.4.5",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.5.tgz",
-      "integrity": "sha512-jauvkDuSSUbP0ebhfNqljhShA90YEfX/0wZ+w40oZF43IjGyWYjqYaJbvMJwGOd+9+vODW6eSvnk28f0SGV7OQ==",
+      "version": "3.4.7",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.7.tgz",
+      "integrity": "sha512-Gec6CLkReVswDYjQFq79O5rktri4R7TsD/VPCiUoJw40JhNNxaNJJa8mrQrWoJluW4ETy6QN0NUyC/JO77OCOw==",
      "requires": {
        "@babel/parser": "^7.23.6",
-        "@vue/compiler-core": "3.4.5",
-        "@vue/compiler-dom": "3.4.5",
-        "@vue/compiler-ssr": "3.4.5",
-        "@vue/shared": "3.4.5",
+        "@vue/compiler-core": "3.4.7",
+        "@vue/compiler-dom": "3.4.7",
+        "@vue/compiler-ssr": "3.4.7",
+        "@vue/shared": "3.4.7",
        "estree-walker": "^2.0.2",
        "magic-string": "^0.30.5",
        "postcss": "^8.4.32",
@ -2892,12 +2902,12 @@
      }
    },
    "@vue/compiler-ssr": {
-      "version": "3.4.5",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.5.tgz",
-      "integrity": "sha512-DDdEcDzj2lWTMfUMMtEpLDhURai9LhM0zSZ219jCt7b2Vyl0/jy3keFgCPMitG0V1S1YG4Cmws3lWHWdxHQOpg==",
+      "version": "3.4.7",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.7.tgz",
+      "integrity": "sha512-PvYeSOvnCkST5mGS0TLwEn5w+4GavtEn6adcq8AspbHaIr+mId5hp7cG3ASy3iy8b+LuXEG2/QaV/nj5BQ/Aww==",
      "requires": {
-        "@vue/compiler-dom": "3.4.5",
-        "@vue/shared": "3.4.5"
+        "@vue/compiler-dom": "3.4.7",
+        "@vue/shared": "3.4.7"
      }
    },
    "@vue/devtools-api": {
@ -2906,29 +2916,29 @@
      "integrity": "sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q=="
    },
    "@vue/reactivity": {
-      "version": "3.4.5",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.5.tgz",
-      "integrity": "sha512-BcWkKvjdvqJwb7BhhFkXPLDCecX4d4a6GATvCduJQDLv21PkPowAE5GKuIE5p6RC07/Lp9FMkkq4AYCTVF5KlQ==",
+      "version": "3.4.7",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.7.tgz",
+      "integrity": "sha512-F539DO0ogH0+L8F9Pnw7cjqibcmSOh5UTk16u5f4MKQ8fraqepI9zdh+sozPX6VmEHOcjo8qw3Or9ZcFFw4SZA==",
      "requires": {
-        "@vue/shared": "3.4.5"
+        "@vue/shared": "3.4.7"
      }
    },
    "@vue/runtime-core": {
-      "version": "3.4.5",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.5.tgz",
-      "integrity": "sha512-wh9ELIOQKeWT9SaUPdLrsxRkZv14jp+SJm9aiQGWio+/MWNM3Lib0wE6CoKEqQ9+SCYyGjDBhTOTtO47kCgbkg==",
+      "version": "3.4.7",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.7.tgz",
+      "integrity": "sha512-QMMsWRQaD3BpGyjjChthpl4Mji4Fjx1qfdufsXlDkKU3HV+hWNor2z+29F+E1MmVcP0ZfRZUfqYgtsQoL7IGwQ==",
      "requires": {
-        "@vue/reactivity": "3.4.5",
-        "@vue/shared": "3.4.5"
+        "@vue/reactivity": "3.4.7",
+        "@vue/shared": "3.4.7"
      }
    },
    "@vue/runtime-dom": {
-      "version": "3.4.5",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.5.tgz",
-      "integrity": "sha512-n5ewvOjyG3IEpqGBahdPXODFSpVlSz3H4LF76Sx0XAqpIOqyJ5bIb2PrdYuH2ogBMAQPh+o5tnoH4nJpBr8U0Q==",
+      "version": "3.4.7",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.7.tgz",
+      "integrity": "sha512-XwegyUY1rw8zxsX1Z36vwYcqo+uOgih5ti7y9vx+pPFhNdSQmN4LqK2RmSeAJG1oKV8NqSUmjpv92f/x6h0SeQ==",
      "requires": {
-        "@vue/runtime-core": "3.4.5",
-        "@vue/shared": "3.4.5",
+        "@vue/runtime-core": "3.4.7",
+        "@vue/shared": "3.4.7",
        "csstype": "^3.1.3"
      },
      "dependencies": {
@ -2940,18 +2950,18 @@
      }
    },
    "@vue/server-renderer": {
-      "version": "3.4.5",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.5.tgz",
-      "integrity": "sha512-jOFc/VE87yvifQpNju12VcqimH8pBLxdcT+t3xMeiED1K6DfH9SORyhFEoZlW5TG2Vwfn3Ul5KE+1aC99xnSBg==",
+      "version": "3.4.7",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.7.tgz",
+      "integrity": "sha512-3bWnYLEkLLhkDWqvNk7IvbQD4UcxvFKxELBiOO2iG3m6AniFIsBWfHOO5tLVQnjdWkODu4rq0GipmfEenVAK5Q==",
      "requires": {
-        "@vue/compiler-ssr": "3.4.5",
-        "@vue/shared": "3.4.5"
+        "@vue/compiler-ssr": "3.4.7",
+        "@vue/shared": "3.4.7"
      }
    },
    "@vue/shared": {
-      "version": "3.4.5",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.5.tgz",
-      "integrity": "sha512-6XptuzlMvN4l4cDnDw36pdGEV+9njYkQ1ZE0Q6iZLwrKefKaOJyiFmcP3/KBDHbt72cJZGtllAc1GaHe6XGAyg=="
+      "version": "3.4.7",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.7.tgz",
+      "integrity": "sha512-G+i4glX1dMJk88sbJEcQEGWRQnVm9eIY7CcQbO5dpdsD9SF8jka3Mr5OqZYGjczGN1+D6EUwdu6phcmcx9iuPA=="
    },
    "acorn": {
      "version": "8.11.2",
@ -3394,9 +3404,9 @@
      "dev": true
    },
    "naive-ui": {
-      "version": "2.36.0",
-      "resolved": "https://registry.npmjs.org/naive-ui/-/naive-ui-2.36.0.tgz",
-      "integrity": "sha512-r1ydtEm1Ryf/aWpbLCf32mQAGK99jd1eXgpkCtIomcBRZeAtusfy6zCtIpCppoCuIKM3BW5DMafhVxilubk/lQ==",
+      "version": "2.37.3",
+      "resolved": "https://registry.npmjs.org/naive-ui/-/naive-ui-2.37.3.tgz",
+      "integrity": "sha512-aUkHFXVIluSi8Me+npbcsdv1NYhVMj5t9YaruoCESlqmfqspj+R2QHEVXkTtUI1kQwVrABMCtAGq/wountqjZA==",
      "dev": true,
      "requires": {
        "@css-render/plugin-bem": "^0.15.12",
@ -3406,6 +3416,7 @@
        "@types/lodash-es": "^4.17.9",
        "async-validator": "^4.2.5",
        "css-render": "^0.15.12",
+        "csstype": "^3.1.3",
        "date-fns": "^2.30.0",
        "date-fns-tz": "^2.0.0",
        "evtd": "^0.2.4",
@ -3416,7 +3427,15 @@
        "treemate": "^0.3.11",
        "vdirs": "^0.1.8",
        "vooks": "^0.2.12",
-        "vueuc": "^0.4.54"
+        "vueuc": "^0.4.58"
+      },
+      "dependencies": {
+        "csstype": {
+          "version": "3.1.3",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+          "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+          "dev": true
+        }
      }
    },
    "nanoid": {
@ -3790,9 +3809,9 @@
      }
    },
    "unplugin-icons": {
-      "version": "0.18.1",
-      "resolved": "https://registry.npmmirror.com/unplugin-icons/-/unplugin-icons-0.18.1.tgz",
-      "integrity": "sha512-WzKu/eoq74YC7vyEAGsFebkRzsZrRkR4FUzLU6gbpfa7WRaVVpQS2n7LSxE1iRUN0scKL5b9bq+i0wucR+ttFQ==",
+      "version": "0.18.2",
+      "resolved": "https://registry.npmjs.org/unplugin-icons/-/unplugin-icons-0.18.2.tgz",
+      "integrity": "sha512-OgZoIJHGubeJmc3KePMOy62ovtxPEJfNMlr5tU+1ZqHGpSXubg3fnqq28VPvLL0D5vKj2PRCJF9tVGbQ7vBXJQ==",
      "dev": true,
      "requires": {
        "@antfu/install-pkg": "^0.3.0",
@ -3865,15 +3884,15 @@
      }
    },
    "vue": {
-      "version": "3.4.5",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.5.tgz",
-      "integrity": "sha512-VH6nHFhLPjgu2oh5vEBXoNZxsGHuZNr3qf4PHClwJWw6IDqw6B3x+4J+ABdoZ0aJuT8Zi0zf3GpGlLQCrGWHrw==",
+      "version": "3.4.7",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.7.tgz",
+      "integrity": "sha512-4urmkWpudekq0CPNMO7p6mBGa9qmTXwJMO2r6CT4EzIJVG7WoSReiysiNb7OSi/WI113oX0Srn9Rz1k/DCXKFQ==",
      "requires": {
-        "@vue/compiler-dom": "3.4.5",
-        "@vue/compiler-sfc": "3.4.5",
-        "@vue/runtime-dom": "3.4.5",
-        "@vue/server-renderer": "3.4.5",
-        "@vue/shared": "3.4.5"
+        "@vue/compiler-dom": "3.4.7",
+        "@vue/compiler-sfc": "3.4.7",
+        "@vue/runtime-dom": "3.4.7",
+        "@vue/server-renderer": "3.4.7",
+        "@vue/shared": "3.4.7"
      }
    },
    "vue-i18n": {
--- a/frontend/package.json
+++ b/frontend/package.json
@ -15,17 +15,17 @@
    "monaco-editor": "^0.45.0",
    "pinia": "^2.1.7",
    "sass": "^1.69.7",
-    "vue": "^3.4.5",
+    "vue": "^3.4.7",
    "vue-i18n": "^9.9.0",
    "xterm": "^5.3.0",
    "xterm-addon-fit": "^0.8.0"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.2",
-    "naive-ui": "^2.36.0",
+    "naive-ui": "^2.37.3",
    "prettier": "^3.1.1",
    "unplugin-auto-import": "^0.17.3",
-    "unplugin-icons": "^0.18.1",
+    "unplugin-icons": "^0.18.2",
    "unplugin-vue-components": "^0.26.0",
    "vite": "^5.0.11"
  }
--- a/frontend/package.json.md5
+++ b/frontend/package.json.md5
@ -1 +1 @@
-41f065f6e9d8aa8ad43c4d2d8065d48a
+af8db32947008da00ca6dfaef778b59f
--- a/frontend/src/assets/images/wechat_official.png
+++ b/frontend/src/assets/images/wechat_official.png
--- a/frontend/src/components/common/DropdownSelector.vue
+++ b/frontend/src/components/common/DropdownSelector.vue
@ -2,6 +2,7 @@
 import { computed, h, ref } from 'vue'
 import { get, map } from 'lodash'
 import { NIcon, NText } from 'naive-ui'
+import { useRender } from '@/utils/render.js'

 const props = defineProps({
    value: {
@ -21,15 +22,12 @@ const props = defineProps({
 })

 const emit = defineEmits(['update:value'])
+const render = useRender()

 const renderHeader = () => {
    return h('div', { class: 'type-selector-header' }, [h(NText, null, () => props.tooltip)])
 }

-const renderLabel = (option) => {
-    return h('div', { class: 'type-selector-item' }, option.label)
-}
-
 const dropdownOption = computed(() => {
    const options = [
        {
@ -71,7 +69,7 @@ const onDropdownShow = (show) => {
    <n-dropdown
        :disabled="props.disabled"
        :options="dropdownOption"
-        :render-label="renderLabel"
+        :render-label="({ label }) => render.renderLabel(label, { class: 'type-selector-item' })"
        :show-arrow="true"
        :title="props.tooltip"
        :value="props.value"
--- a/frontend/src/components/common/FileOpenInput.vue
+++ b/frontend/src/components/common/FileOpenInput.vue
@ -25,7 +25,7 @@ const handleSelectFile = async () => {
        const path = get(data, 'path', '')
        emit('update:value', path)
    } else {
-        emit('update:value', '')
+        // emit('update:value', '')
    }
 }
 </script>
--- a/frontend/src/components/common/IconButton.vue
+++ b/frontend/src/components/common/IconButton.vue
@ -7,6 +7,10 @@ const emit = defineEmits(['click'])
 const props = defineProps({
    tooltip: String,
    tTooltip: String,
+    tooltipDelay: {
+        type: Number,
+        default: 1000,
+    },
    type: String,
    icon: [String, Object],
    size: {
@ -35,7 +39,7 @@ const hasTooltip = computed(() => {
 </script>

 <template>
-    <n-tooltip v-if="hasTooltip" :show-arrow="false">
+    <n-tooltip v-if="hasTooltip" :delay="tooltipDelay" :show-arrow="false">
        <template #trigger>
            <n-button
                :class="props.buttonClass"
--- a/frontend/src/components/common/TtlInput.vue
+++ b/frontend/src/components/common/TtlInput.vue
@ -1,5 +1,4 @@
 <script setup>
-import { useI18n } from 'vue-i18n'
 import { computed } from 'vue'

 const props = defineProps({
@ -15,22 +14,24 @@ const props = defineProps({

 const emit = defineEmits(['update:value', 'update:unit'])

-const i18n = useI18n()
-const unit = computed(() => [
-    { value: 1, label: i18n.t('common.second') },
+const unit = [
+    {
+        value: 1,
+        label: 'common.second',
+    },
    {
        value: 60,
-        label: i18n.t('common.minute'),
+        label: 'common.minute',
    },
    {
        value: 3600,
-        label: i18n.t('common.hour'),
+        label: 'common.hour',
    },
    {
        value: 86400,
-        label: i18n.t('common.day'),
+        label: 'common.day',
    },
-])
+]

 const unitValue = computed(() => {
    switch (props.unit) {
@ -57,6 +58,7 @@ const unitValue = computed(() => {
            @update:value="(val) => emit('update:value', val)" />
        <n-select
            :options="unit"
+            :render-label="({ label }) => $t(label)"
            :value="unitValue"
            style="max-width: 150px"
            @update:value="(val) => emit('update:unit', val)" />
--- a/frontend/src/components/content/ContentLogPane.vue
+++ b/frontend/src/components/content/ContentLogPane.vue
@ -26,7 +26,7 @@ const filterServerOption = computed(() => {
        value: server,
    }))
    options.splice(0, 0, {
-        label: i18n.t('common.all'),
+        label: 'common.all',
        value: '',
    })
    return options
@ -36,7 +36,7 @@ const tableRef = ref(null)

 const columns = computed(() => [
    {
-        title: i18n.t('log.exec_time'),
+        title: () => i18n.t('log.exec_time'),
        key: 'timestamp',
        defaultSortOrder: 'ascend',
        sorter: 'default',
@ -48,7 +48,7 @@ const columns = computed(() => [
        },
    },
    {
-        title: i18n.t('log.server'),
+        title: () => i18n.t('log.server'),
        key: 'server',
        filterOptionValue: data.server,
        filter: (value, row) => {
@ -62,7 +62,7 @@ const columns = computed(() => [
        },
    },
    {
-        title: i18n.t('log.cmd'),
+        title: () => i18n.t('log.cmd'),
        key: 'cmd',
        titleAlign: 'center',
        filterOptionValue: data.keyword,
@ -83,7 +83,7 @@ const columns = computed(() => [
        },
    },
    {
-        title: i18n.t('log.cost_time'),
+        title: () => i18n.t('log.cost_time'),
        key: 'cost',
        width: 100,
        align: 'center',
@ -141,6 +141,7 @@ defineExpose({
                    v-model:value="data.server"
                    :consistent-menu-width="false"
                    :options="filterServerOption"
+                    :render-label="({ label, value }) => (value === '' ? $t(label) : label)"
                    style="min-width: 100px" />
            </n-form-item>
            <n-form-item :label="$t('log.filter_keyword')">
--- a/frontend/src/components/content_value/ContentSlog.vue
+++ b/frontend/src/components/content_value/ContentSlog.vue
@ -35,7 +35,7 @@ const tableRef = ref(null)

 const columns = computed(() => [
    {
-        title: i18n.t('slog.exec_time'),
+        title: () => i18n.t('slog.exec_time'),
        key: 'timestamp',
        sortOrder: data.sortOrder,
        sorter: 'default',
@ -47,7 +47,7 @@ const columns = computed(() => [
        },
    },
    {
-        title: i18n.t('slog.client'),
+        title: () => i18n.t('slog.client'),
        key: 'client',
        filterOptionValue: data.client,
        resizable: true,
@ -81,7 +81,7 @@ const columns = computed(() => [
        },
    },
    {
-        title: i18n.t('slog.cmd'),
+        title: () => i18n.t('slog.cmd'),
        key: 'cmd',
        titleAlign: 'center',
        filterOptionValue: data.keyword,
@ -102,7 +102,7 @@ const columns = computed(() => [
        },
    },
    {
-        title: i18n.t('slog.cost_time'),
+        title: () => i18n.t('slog.cost_time'),
        key: 'cost',
        width: 100,
        align: 'center',
--- a/frontend/src/components/content_value/ContentToolbar.vue
+++ b/frontend/src/components/content_value/ContentToolbar.vue
@ -62,7 +62,7 @@ const ttlString = computed(() => {
        const seconds = Math.floor(props.ttl % 60)
        s += padStart(seconds + '', 2, '0')
    } else if (props.ttl < 0) {
-        s = i18n.t('interface.forever')
+        s = '-1'
    } else {
        s = '00:00:00'
    }
@ -190,7 +190,7 @@ const onTTL = () => {
                        <template #icon>
                            <n-icon :component="Timer" size="18" />
                        </template>
-                        {{ ttlString }}
+                        {{ ttlString === '-1' ? $t('interface.forever') : ttlString }}
                    </n-button>
                </template>
                TTL{{ `${ttl > 0 ? ': ' + ttl + $t('common.second') : ''}` }}
--- a/frontend/src/components/content_value/ContentValueHash.vue
+++ b/frontend/src/components/content_value/ContentValueHash.vue
@ -83,7 +83,7 @@ const tableRef = ref(null)
 const fieldFilterOption = ref(null)
 const fieldColumn = computed(() => ({
    key: 'key',
-    title: i18n.t('common.field'),
+    title: () => i18n.t('common.field'),
    align: 'center',
    titleAlign: 'center',
    resizable: true,
@ -113,7 +113,7 @@ const displayCode = computed(() => {
 // const valueFilterOption = ref(null)
 const valueColumn = computed(() => ({
    key: 'value',
-    title: i18n.t('common.value'),
+    title: () => i18n.t('common.value'),
    align: displayCode.value ? 'left' : 'center',
    titleAlign: 'center',
    resizable: true,
@ -195,7 +195,7 @@ const resetEdit = () => {

 const actionColumn = {
    key: 'action',
-    title: i18n.t('interface.action'),
+    title: () => i18n.t('interface.action'),
    width: 120,
    align: 'center',
    titleAlign: 'center',
--- a/frontend/src/components/content_value/ContentValueList.vue
+++ b/frontend/src/components/content_value/ContentValueList.vue
@ -83,7 +83,7 @@ const displayCode = computed(() => {
 const valueFilterOption = ref(null)
 const valueColumn = computed(() => ({
    key: 'value',
-    title: i18n.t('common.value'),
+    title: () => i18n.t('common.value'),
    align: displayCode.value ? 'left' : 'center',
    titleAlign: 'center',
    ellipsis: displayCode.value
@ -164,7 +164,7 @@ const resetEdit = () => {

 const actionColumn = {
    key: 'action',
-    title: i18n.t('interface.action'),
+    title: () => i18n.t('interface.action'),
    width: 120,
    align: 'center',
    titleAlign: 'center',
--- a/frontend/src/components/content_value/ContentValueSet.vue
+++ b/frontend/src/components/content_value/ContentValueSet.vue
@ -82,7 +82,7 @@ const displayCode = computed(() => {
 const valueFilterOption = ref(null)
 const valueColumn = computed(() => ({
    key: 'value',
-    title: i18n.t('common.value'),
+    title: () => i18n.t('common.value'),
    align: displayCode.value ? 'left' : 'center',
    titleAlign: 'center',
    ellipsis: displayCode.value
@ -161,7 +161,7 @@ const resetEdit = () => {

 const actionColumn = {
    key: 'action',
-    title: i18n.t('interface.action'),
+    title: () => i18n.t('interface.action'),
    width: 120,
    align: 'center',
    titleAlign: 'center',
--- a/frontend/src/components/content_value/ContentValueStream.vue
+++ b/frontend/src/components/content_value/ContentValueStream.vue
@ -74,7 +74,7 @@ const idColumn = computed(() => ({
 const valueFilterOption = ref(null)
 const valueColumn = computed(() => ({
    key: 'value',
-    title: i18n.t('common.value'),
+    title: () => i18n.t('common.value'),
    align: 'left',
    titleAlign: 'center',
    resizable: true,
@ -98,7 +98,7 @@ const valueColumn = computed(() => ({
 }))
 const actionColumn = {
    key: 'action',
-    title: i18n.t('interface.action'),
+    title: () => i18n.t('interface.action'),
    width: 80,
    align: 'center',
    titleAlign: 'center',
--- a/frontend/src/components/content_value/ContentValueZSet.vue
+++ b/frontend/src/components/content_value/ContentValueZSet.vue
@ -81,7 +81,7 @@ const fullEdit = ref(false)
 // const scoreFilterOption = ref(null)
 const scoreColumn = computed(() => ({
    key: 'score',
-    title: i18n.t('common.score'),
+    title: () => i18n.t('common.score'),
    align: 'center',
    titleAlign: 'center',
    resizable: true,
@ -130,7 +130,7 @@ const displayCode = computed(() => {
 const valueFilterOption = ref(null)
 const valueColumn = computed(() => ({
    key: 'value',
-    title: i18n.t('common.value'),
+    title: () => i18n.t('common.value'),
    align: displayCode.value ? 'left' : 'center',
    titleAlign: 'center',
    resizable: true,
@ -210,7 +210,7 @@ const resetEdit = () => {

 const actionColumn = {
    key: 'action',
-    title: i18n.t('interface.action'),
+    title: () => i18n.t('interface.action'),
    width: 120,
    align: 'center',
    titleAlign: 'center',
--- a/frontend/src/components/dialogs/AddFieldsDialog.vue
+++ b/frontend/src/components/dialogs/AddFieldsDialog.vue
@ -49,15 +49,15 @@ const defaultValue = {
 const title = computed(() => {
    switch (newForm.type) {
        case types.LIST:
-            return i18n.t('dialogue.field.new_item')
+            return 'dialogue.field.new_item'
        case types.HASH:
-            return i18n.t('dialogue.field.new')
+            return 'dialogue.field.new'
        case types.SET:
-            return i18n.t('dialogue.field.new')
+            return 'dialogue.field.new'
        case types.ZSET:
-            return i18n.t('dialogue.field.new')
+            return 'dialogue.field.new'
        case types.STREAM:
-            return i18n.t('dialogue.field.new')
+            return 'dialogue.field.new'
    }
    return ''
 })
@ -204,7 +204,7 @@ const onClose = () => {
        :positive-button-props="{ size: 'medium' }"
        :positive-text="$t('common.confirm')"
        :show-icon="false"
-        :title="title"
+        :title="title ? $t(title) : ''"
        preset="dialog"
        style="width: 600px"
        transform-origin="center"
--- a/frontend/src/components/dialogs/ConnectionDialog.vue
+++ b/frontend/src/components/dialogs/ConnectionDialog.vue
@ -56,7 +56,7 @@ const groupOptions = computed(() => {
        value: group,
    }))
    options.splice(0, 0, {
-        label: i18n.t('dialogue.connection.no_group'),
+        label: 'dialogue.connection.no_group',
        value: '',
    })
    return options
@ -278,7 +278,10 @@ const onClose = () => {
                                :label="$t('dialogue.connection.group')"
                                :span="24"
                                required>
-                                <n-select v-model:value="generalForm.group" :options="groupOptions" />
+                                <n-select
+                                    v-model:value="generalForm.group"
+                                    :options="groupOptions"
+                                    :render-label="({ label, value }) => (value === '' ? $t(label) : label)" />
                            </n-form-item-gi>
                            <n-form-item-gi :label="$t('dialogue.connection.addr')" :span="24" path="addr" required>
                                <n-input
@ -461,6 +464,16 @@ const onClose = () => {
                                :disabled="!generalForm.ssl.enable"
                                :placeholder="$t('dialogue.connection.ssl.ca_file_tip')" />
                        </n-form-item>
+                        <n-form-item>
+                            <n-checkbox v-model:checked="generalForm.ssl.allowInsecure" size="medium">
+                                {{ $t('dialogue.connection.ssl.allow_insecure') }}
+                            </n-checkbox>
+                        </n-form-item>
+                        <n-form-item :label="$t('dialogue.connection.ssl.sni')">
+                            <n-input
+                                v-model:value="generalForm.ssl.sni"
+                                :placeholder="$t('dialogue.connection.ssl.sni')" />
+                        </n-form-item>
                    </n-form>
                </n-tab-pane>

@ -543,7 +556,10 @@ const onClose = () => {
                                    :options="masterNameOptions"
                                    filterable
                                    tag />
-                                <n-button :loading="loadingSentinelMaster" @click="onLoadSentinelMasters">
+                                <n-button
+                                    :disabled="!generalForm.sentinel.enable"
+                                    :loading="loadingSentinelMaster"
+                                    @click="onLoadSentinelMasters">
                                    {{ $t('dialogue.connection.sentinel.auto_discover') }}
                                </n-button>
                            </n-input-group>
--- a/frontend/src/components/dialogs/GroupDialog.vue
+++ b/frontend/src/components/dialogs/GroupDialog.vue
@ -9,6 +9,7 @@ import { every, get, includes, isEmpty } from 'lodash'
 * Dialog for create or rename group
 */

+const i18n = useI18n()
 const editGroup = ref('')
 const groupForm = reactive({
    name: '',
@ -42,7 +43,6 @@ watchEffect(() => {
    }
 })

-const i18n = useI18n()
 const onConfirm = async () => {
    try {
        await groupFormRef.value?.validate((errs) => {
--- a/frontend/src/components/dialogs/ImportKeyDialog.vue
+++ b/frontend/src/components/dialogs/ImportKeyDialog.vue
@ -39,31 +39,31 @@ watchEffect(() => {
 })

 const i18n = useI18n()
-const conflictOption = computed(() => [
+const conflictOption = [
    {
        value: 0,
-        label: i18n.t('dialogue.import.conflict_overwrite'),
+        label: 'dialogue.import.conflict_overwrite',
    },
    {
        value: 1,
-        label: i18n.t('dialogue.import.conflict_ignore'),
+        label: 'dialogue.import.conflict_ignore',
    },
-])
+]

-const ttlOption = computed(() => [
+const ttlOption = [
    {
        value: 0,
-        label: i18n.t('dialogue.import.ttl_include'),
+        label: 'dialogue.import.ttl_include',
    },
    {
        value: 1,
-        label: i18n.t('dialogue.import.ttl_ignore'),
+        label: 'dialogue.import.ttl_ignore',
    },
    {
        value: 2,
-        label: i18n.t('dialogue.import.ttl_custom'),
+        label: 'dialogue.import.ttl_custom',
    },
-])
+]

 const importEnable = computed(() => {
    return !isEmpty(importKeyForm.file)
@ -130,14 +130,18 @@ const onClose = () => {
                        <n-radio-button
                            v-for="(op, i) in conflictOption"
                            :key="i"
-                            :label="op.label"
+                            :label="$t(op.label)"
                            :value="op.value" />
                    </n-radio-group>
                </n-form-item>
                <n-form-item :label="$t('dialogue.import.import_expire_title')">
                    <n-space :wrap-item="false">
                        <n-radio-group v-model:value="importKeyForm.ttlType">
-                            <n-radio-button v-for="(op, i) in ttlOption" :key="i" :label="op.label" :value="op.value" />
+                            <n-radio-button
+                                v-for="(op, i) in ttlOption"
+                                :key="i"
+                                :label="$t(op.label)"
+                                :value="op.value" />
                        </n-radio-group>
                        <ttl-input
                            v-if="importKeyForm.ttlType === 2"
--- a/frontend/src/components/dialogs/KeyFilterDialog.vue
+++ b/frontend/src/components/dialogs/KeyFilterDialog.vue
@ -1,11 +1,9 @@
 <script setup>
 import { computed, reactive, ref, watchEffect } from 'vue'
 import useDialog from 'stores/dialog'
-import { useI18n } from 'vue-i18n'
 import { types } from '@/consts/support_redis_type.js'
 import useBrowserStore from 'stores/browser.js'

-const i18n = useI18n()
 const filterForm = reactive({
    server: '',
    db: 0,
@ -20,7 +18,7 @@ const typeOptions = computed(() => {
    }))
    options.splice(0, 0, {
        value: '',
-        label: i18n.t('common.all'),
+        label: 'common.all',
    })
    return options
 })
@ -75,7 +73,10 @@ const onClose = () => {
                <n-input :value="filterForm.db + ''" readonly></n-input>
            </n-form-item>
            <n-form-item :label="$t('interface.type')" path="type" required>
-                <n-select v-model:value="filterForm.type" :options="typeOptions" />
+                <n-select
+                    v-model:value="filterForm.type"
+                    :options="typeOptions"
+                    :render-label="({ label }) => $t(label)" />
            </n-form-item>
            <n-form-item :label="$t('dialogue.filter.filter_pattern')" required>
                <n-input-group>
--- a/frontend/src/components/dialogs/PreferencesDialog.vue
+++ b/frontend/src/components/dialogs/PreferencesDialog.vue
@ -37,7 +37,7 @@ watchEffect(() => {
 const keyOptions = computed(() => {
    const opts = map(typesIconStyle, (v) => ({
        value: v,
-        label: i18n.t('preferences.general.key_icon_style' + v),
+        label: 'preferences.general.key_icon_style' + v,
    }))
    return sortBy(opts, (o) => o.value)
 })
@ -81,7 +81,7 @@ const onClose = () => {
                                    v-for="opt in prefStore.themeOption"
                                    :key="opt.value"
                                    :value="opt.value">
-                                    {{ opt.label }}
+                                    {{ $t(opt.label) }}
                                </n-radio-button>
                            </n-radio-group>
                        </n-form-item-gi>
@ -89,12 +89,14 @@ const onClose = () => {
                            <n-select
                                v-model:value="prefStore.general.language"
                                :options="prefStore.langOption"
+                                :render-label="({ label, value }) => (value === 'auto' ? $t(label) : label)"
                                filterable />
                        </n-form-item-gi>
                        <n-form-item-gi :label="$t('preferences.general.font')" :span="12" required>
                            <n-select
                                v-model:value="prefStore.general.font"
                                :options="prefStore.fontOption"
+                                :render-label="({ label, value }) => (value === '' ? $t(label) : label)"
                                filterable />
                        </n-form-item-gi>
                        <n-form-item-gi :label="$t('preferences.general.font_size')" :span="12">
@ -108,7 +110,10 @@ const onClose = () => {
                                style="width: 100%" />
                        </n-form-item-gi>
                        <n-form-item-gi :label="$t('preferences.general.key_icon_style')" :span="12">
-                            <n-select v-model:value="prefStore.general.keyIconStyle" :options="keyOptions" />
+                            <n-select
+                                v-model:value="prefStore.general.keyIconStyle"
+                                :options="keyOptions"
+                                :render-label="({ label }) => $t(label)" />
                        </n-form-item-gi>
                        <n-form-item-gi :label="$t('preferences.general.proxy')" :span="24">
                            <n-space>
@ -136,17 +141,18 @@ const onClose = () => {
                            <n-select
                                v-model:value="prefStore.editor.font"
                                :options="prefStore.fontOption"
+                                :render-label="({ label, value }) => value || $t(label)"
                                filterable />
                        </n-form-item-gi>
-                        <n-form-item-gi :label="$t('preferences.general.font_size')" :show-feedback="false" :span="12">
+                        <n-form-item-gi :label="$t('preferences.general.font_size')" :span="12">
                            <n-input-number v-model:value="prefStore.editor.fontSize" :max="65535" :min="1" />
                        </n-form-item-gi>
-                        <n-form-item-gi :show-feedback="false" :span="24">
+                        <n-form-item-gi :show-feedback="false" :show-label="false" :span="24">
                            <n-checkbox v-model:checked="prefStore.editor.showLineNum">
                                {{ $t('preferences.editor.show_linenum') }}
                            </n-checkbox>
                        </n-form-item-gi>
-                        <n-form-item-gi :show-feedback="false" :span="24">
+                        <n-form-item-gi :show-feedback="false" :show-label="false" :span="24">
                            <n-checkbox v-model:checked="prefStore.editor.showFolding">
                                {{ $t('preferences.editor.show_folding') }}
                            </n-checkbox>
--- a/frontend/src/components/dialogs/SetTtlDialog.vue
+++ b/frontend/src/components/dialogs/SetTtlDialog.vue
@ -44,20 +44,20 @@ const isBatchAction = computed(() => {

 const title = computed(() => {
    if (isBatchAction.value) {
-        return i18n.t('dialogue.ttl.title_batch', { count: size(ttlForm.keys) })
+        return () => i18n.t('dialogue.ttl.title_batch', { count: size(ttlForm.keys) })
    } else {
-        return i18n.t('dialogue.ttl.title')
+        return () => i18n.t('dialogue.ttl.title')
    }
 })

 const i18n = useI18n()
-const quickOption = computed(() => [
-    { value: -1, unit: 1, label: i18n.t('interface.forever') },
-    { value: 10, unit: 1, label: `10 ${i18n.t('common.second')}` },
-    { value: 1, unit: 60, label: `1 ${i18n.t('common.minute')}` },
-    { value: 1, unit: 3600, label: `1 ${i18n.t('common.hour')}` },
-    { value: 1, unit: 86400, label: `1 ${i18n.t('common.day')}` },
-])
+const quickOption = [
+    { value: -1, unit: 1, label: 'interface.forever' },
+    { value: 10, unit: 1, label: 'common.second' },
+    { value: 1, unit: 60, label: 'common.minute' },
+    { value: 1, unit: 3600, label: 'common.hour' },
+    { value: 1, unit: 86400, label: 'common.day' },
+]

 const onQuickSet = (opt) => {
    ttlForm.ttl = opt.value
@ -121,7 +121,7 @@ const onConfirm = async () => {
                        secondary
                        size="small"
                        @click="onQuickSet(opt)">
-                        {{ opt.label }}
+                        {{ (opt.value > 0 ? opt.value + ' ' : '') + $t(opt.label) }}
                    </n-button>
                </n-space>
            </n-form-item>
--- a/frontend/src/components/new_value/AddHashValue.vue
+++ b/frontend/src/components/new_value/AddHashValue.vue
@ -4,7 +4,6 @@ import { flatMap, reject } from 'lodash'
 import Add from '@/components/icons/Add.vue'
 import Delete from '@/components/icons/Delete.vue'
 import IconButton from '@/components/common/IconButton.vue'
-import { useI18n } from 'vue-i18n'

 const props = defineProps({
    type: Number,
@ -12,15 +11,14 @@ const props = defineProps({
 })
 const emit = defineEmits(['update:value', 'update:type'])

-const i18n = useI18n()
 const updateOption = [
    {
        value: 0,
-        label: i18n.t('dialogue.field.overwrite_field'),
+        label: 'dialogue.field.overwrite_field',
    },
    {
        value: 1,
-        label: i18n.t('dialogue.field.ignore_field'),
+        label: 'dialogue.field.ignore_field',
    },
 ]

@ -47,7 +45,7 @@ const onUpdate = (val) => {
 <template>
    <n-form-item :label="$t('dialogue.field.conflict_handle')">
        <n-radio-group :value="props.type" @update:value="(val) => emit('update:type', val)">
-            <n-radio-button v-for="(op, i) in updateOption" :key="i" :label="op.label" :value="op.value" />
+            <n-radio-button v-for="(op, i) in updateOption" :key="i" :label="op.label" :value="$t(op.value)" />
        </n-radio-group>
    </n-form-item>
    <n-form-item
--- a/frontend/src/components/new_value/AddListValue.vue
+++ b/frontend/src/components/new_value/AddListValue.vue
@ -4,7 +4,6 @@ import { compact } from 'lodash'
 import Add from '@/components/icons/Add.vue'
 import Delete from '@/components/icons/Delete.vue'
 import IconButton from '@/components/common/IconButton.vue'
-import { useI18n } from 'vue-i18n'

 const props = defineProps({
    type: Number,
@ -12,15 +11,14 @@ const props = defineProps({
 })
 const emit = defineEmits(['update:value', 'update:type'])

-const i18n = useI18n()
 const insertOption = [
    {
        value: 0,
-        label: i18n.t('dialogue.field.append_item'),
+        label: 'dialogue.field.append_item',
    },
    {
        value: 1,
-        label: i18n.t('dialogue.field.prepend_item'),
+        label: 'dialogue.field.prepend_item',
    },
 ]

@ -34,7 +32,7 @@ const onUpdate = (val) => {
 <template>
    <n-form-item :label="$t('interface.type')">
        <n-radio-group :value="props.type" @update:value="(val) => emit('update:type', val)">
-            <n-radio-button v-for="(op, i) in insertOption" :key="i" :label="op.label" :value="op.value" />
+            <n-radio-button v-for="(op, i) in insertOption" :key="i" :label="op.label" :value="$t(op.value)" />
        </n-radio-group>
    </n-form-item>
    <n-form-item :label="$t('dialogue.field.element')" required>
--- a/frontend/src/components/new_value/AddZSetValue.vue
+++ b/frontend/src/components/new_value/AddZSetValue.vue
@ -4,7 +4,6 @@ import { isEmpty, reject } from 'lodash'
 import Add from '@/components/icons/Add.vue'
 import Delete from '@/components/icons/Delete.vue'
 import IconButton from '@/components/common/IconButton.vue'
-import { useI18n } from 'vue-i18n'

 const props = defineProps({
    type: Number,
@ -15,15 +14,14 @@ defineOptions({
 })
 const emit = defineEmits(['update:value', 'update:type'])

-const i18n = useI18n()
 const updateOption = [
    {
        value: 0,
-        label: i18n.t('dialogue.field.overwrite_field'),
+        label: 'dialogue.field.overwrite_field',
    },
    {
        value: 1,
-        label: i18n.t('dialogue.field.ignore_field'),
+        label: 'dialogue.field.ignore_field',
    },
 ]

@ -55,7 +53,7 @@ const onUpdate = () => {
 <template>
    <n-form-item :label="$t('interface.type')">
        <n-radio-group :value="props.type" @update:value="(val) => emit('update:type', val)">
-            <n-radio-button v-for="(op, i) in updateOption" :key="i" :label="op.label" :value="op.value" />
+            <n-radio-button v-for="(op, i) in updateOption" :key="i" :label="op.label" :value="$t(op.value)" />
        </n-radio-group>
    </n-form-item>
    <n-form-item
--- a/frontend/src/components/sidebar/BrowserPane.vue
+++ b/frontend/src/components/sidebar/BrowserPane.vue
@ -64,16 +64,12 @@ const dbSelectOptions = computed(() => {
    })
 })

-const moreOptions = computed(() => [
-    { key: 'import', label: i18n.t('interface.import_key'), icon: render.renderIcon(Import, { strokeWidth: 3.5 }) },
-    { key: 'flush', label: i18n.t('interface.flush_db'), icon: render.renderIcon(Delete, { strokeWidth: 3.5 }) },
+const moreOptions = [
+    { key: 'import', label: 'interface.import_key', icon: Import },
+    { key: 'flush', label: 'interface.flush_db', icon: Delete },
    { key: 'divider', type: 'divider' },
-    {
-        key: 'disconnect',
-        label: i18n.t('interface.disconnect'),
-        icon: render.renderIcon(Unlink, { strokeWidth: 3.5 }),
-    },
-])
+    { key: 'disconnect', label: 'interface.disconnect', icon: Unlink },
+]

 const loadProgress = computed(() => {
    const db = browserStore.getDatabase(props.server, props.db)
@ -356,6 +352,8 @@ watch(
                        @click="inCheckState = true" />
                    <n-dropdown
                        :options="moreOptions"
+                        :render-icon="({ icon }) => render.renderIcon(icon, { strokeWidth: 3.5 })"
+                        :render-label="({ label }) => $t(label)"
                        placement="top-end"
                        style="min-width: 130px"
                        @select="onSelectOptions">
--- a/frontend/src/components/sidebar/BrowserTree.vue
+++ b/frontend/src/components/sidebar/BrowserTree.vue
@ -1,5 +1,5 @@
 <script setup>
-import { computed, h, nextTick, reactive, ref, watchEffect } from 'vue'
+import { computed, h, markRaw, nextTick, reactive, ref, watchEffect } from 'vue'
 import { ConnectionType } from '@/consts/connection_type.js'
 import { NIcon, NSpace, NText, useThemeVars } from 'naive-ui'
 import Key from '@/components/icons/Key.vue'
@ -15,7 +15,6 @@ import Delete from '@/components/icons/Delete.vue'
 import useDialogStore from 'stores/dialog.js'
 import { ClipboardSetText } from 'wailsjs/runtime/runtime.js'
 import useConnectionStore from 'stores/connections.js'
-import Filter from '@/components/icons/Filter.vue'
 import useTabStore from 'stores/tab.js'
 import IconButton from '@/components/common/IconButton.vue'
 import { parseHexColor } from '@/utils/rgb.js'
@ -104,42 +103,21 @@ const contextMenuParam = reactive({
 })

 const menuOptions = {
-    [ConnectionType.RedisDB]: ({ opened }) => {
-        if (opened) {
-            return [
-                {
-                    key: 'db_filter',
-                    label: i18n.t('interface.filter_key'),
-                    icon: render.renderIcon(Filter),
-                },
-                {
-                    type: 'divider',
-                    key: 'd1',
-                },
-                {
-                    type: 'divider',
-                    key: 'd2',
-                },
-            ]
-        } else {
-            return []
-        }
-    },
-    [ConnectionType.RedisKey]: () => [
+    [ConnectionType.RedisKey]: [
        // {
        //     key: 'key_reload',
-        //     label: i18n.t('interface.reload'),
-        //     icon: render.renderIcon(Refresh),
+        //     label: 'interface.reload'),
+        //     icon: Refresh,
        // },
        {
            key: 'key_newkey',
-            label: i18n.t('interface.new_key'),
-            icon: render.renderIcon(Add),
+            label: 'interface.new_key',
+            icon: Add,
        },
        {
            key: 'key_copy',
-            label: i18n.t('interface.copy_path'),
-            icon: render.renderIcon(CopyLink),
+            label: 'interface.copy_path',
+            icon: CopyLink,
        },
        {
            type: 'divider',
@ -147,20 +125,20 @@ const menuOptions = {
        },
        {
            key: 'key_remove',
-            label: i18n.t('interface.batch_delete_key'),
-            icon: render.renderIcon(Delete),
+            label: 'interface.batch_delete_key',
+            icon: Delete,
        },
    ],
-    [ConnectionType.RedisValue]: () => [
+    [ConnectionType.RedisValue]: [
        {
            key: 'value_reload',
-            label: i18n.t('interface.reload'),
-            icon: render.renderIcon(Refresh),
+            label: 'interface.reload',
+            icon: Refresh,
        },
        {
            key: 'value_copy',
-            label: i18n.t('interface.copy_key'),
-            icon: render.renderIcon(CopyLink),
+            label: 'interface.copy_key',
+            icon: CopyLink,
        },
        {
            type: 'divider',
@ -168,16 +146,12 @@ const menuOptions = {
        },
        {
            key: 'value_remove',
-            label: i18n.t('interface.remove_key'),
-            icon: render.renderIcon(Delete),
+            label: 'interface.remove_key',
+            icon: Delete,
        },
    ],
 }

-const renderContextLabel = (option) => {
-    return h('div', { class: 'context-menu-item' }, option.label)
-}
-
 const handleSelectContextMenu = (key) => {
    contextMenuParam.show = false
    const selectedKey = get(selectedKeys.value, 0)
@ -526,7 +500,7 @@ const nodeProps = ({ option }) => {
                return
            }
            contextMenuParam.show = false
-            contextMenuParam.options = menuOptions[option.type](option)
+            contextMenuParam.options = markRaw(menuOptions[option.type] || [])
            nextTick().then(() => {
                contextMenuParam.x = e.clientX
                contextMenuParam.y = e.clientY
@ -627,9 +601,12 @@ defineExpose({
            @update:selected-keys="onUpdateSelectedKeys"
            @update:expanded-keys="onUpdateExpanded"
            @update:checked-keys="onUpdateCheckedKeys" />
+
+        <!-- context menu -->
        <n-dropdown
            :options="contextMenuParam.options"
-            :render-label="renderContextLabel"
+            :render-icon="({ icon }) => render.renderIcon(icon)"
+            :render-label="({ label }) => render.renderLabel($t(label), { class: 'context-menu-item' })"
            :show="contextMenuParam.show"
            :x="contextMenuParam.x"
            :y="contextMenuParam.y"
--- a/frontend/src/components/sidebar/ConnectionTree.vue
+++ b/frontend/src/components/sidebar/ConnectionTree.vue
@ -1,6 +1,6 @@
 <script setup>
 import useDialogStore from 'stores/dialog.js'
-import { h, nextTick, reactive, ref } from 'vue'
+import { h, markRaw, nextTick, reactive, ref } from 'vue'
 import useConnectionStore from 'stores/connections.js'
 import { NIcon, NSpace, NText, useThemeVars } from 'naive-ui'
 import { ConnectionType } from '@/consts/connection_type.js'
@ -53,13 +53,13 @@ const menuOptions = {
    [ConnectionType.Group]: ({ opened }) => [
        {
            key: 'group_rename',
-            label: i18n.t('interface.rename_conn_group'),
-            icon: render.renderIcon(Edit),
+            label: 'interface.rename_conn_group',
+            icon: Edit,
        },
        {
            key: 'group_delete',
-            label: i18n.t('interface.remove_conn_group'),
-            icon: render.renderIcon(Delete),
+            label: 'interface.remove_conn_group',
+            icon: Delete,
        },
    ],
    [ConnectionType.Server]: ({ name }) => {
@ -68,18 +68,18 @@ const menuOptions = {
            return [
                {
                    key: 'server_close',
-                    label: i18n.t('interface.disconnect'),
-                    icon: render.renderIcon(Unlink),
+                    label: 'interface.disconnect',
+                    icon: Unlink,
                },
                {
                    key: 'server_edit',
-                    label: i18n.t('interface.edit_conn'),
-                    icon: render.renderIcon(Config),
+                    label: 'interface.edit_conn',
+                    icon: Config,
                },
                {
                    key: 'server_dup',
-                    label: i18n.t('interface.dup_conn'),
-                    icon: render.renderIcon(CopyLink),
+                    label: 'interface.dup_conn',
+                    icon: CopyLink,
                },
                {
                    type: 'divider',
@ -87,26 +87,26 @@ const menuOptions = {
                },
                {
                    key: 'server_remove',
-                    label: i18n.t('interface.remove_conn'),
-                    icon: render.renderIcon(Delete),
+                    label: 'interface.remove_conn',
+                    icon: Delete,
                },
            ]
        } else {
            return [
                {
                    key: 'server_open',
-                    label: i18n.t('interface.open_connection'),
-                    icon: render.renderIcon(Connect),
+                    label: 'interface.open_connection',
+                    icon: Connect,
                },
                {
                    key: 'server_edit',
-                    label: i18n.t('interface.edit_conn'),
-                    icon: render.renderIcon(Config),
+                    label: 'interface.edit_conn',
+                    icon: Config,
                },
                {
                    key: 'server_dup',
-                    label: i18n.t('interface.dup_conn'),
-                    icon: render.renderIcon(CopyLink),
+                    label: 'interface.dup_conn',
+                    icon: CopyLink,
                },
                {
                    type: 'divider',
@ -114,8 +114,8 @@ const menuOptions = {
                },
                {
                    key: 'server_remove',
-                    label: i18n.t('interface.remove_conn'),
-                    icon: render.renderIcon(Delete),
+                    label: 'interface.remove_conn',
+                    icon: Delete,
                },
            ]
        }
@ -355,7 +355,7 @@ const nodeProps = ({ option }) => {
            }
            contextMenuParam.show = false
            nextTick().then(() => {
-                contextMenuParam.options = mop(option)
+                contextMenuParam.options = markRaw(mop(option))
                contextMenuParam.currentNode = option
                contextMenuParam.x = e.clientX
                contextMenuParam.y = e.clientY
@ -366,10 +366,6 @@ const nodeProps = ({ option }) => {
    }
 }

-const renderContextLabel = (option) => {
-    return h('div', { class: 'context-menu-item' }, option.label)
-}
-
 const handleSelectContextMenu = (key) => {
    contextMenuParam.show = false
    const selectedKey = get(selectedKeys.value, 0)
@ -533,7 +529,8 @@ const onCancelOpen = () => {
    <n-dropdown
        :keyboard="true"
        :options="contextMenuParam.options"
-        :render-label="renderContextLabel"
+        :render-icon="({ icon }) => render.renderIcon(icon)"
+        :render-label="({ label }) => render.renderLabel($t(label), { class: 'context-menu-item' })"
        :show="contextMenuParam.show"
        :x="contextMenuParam.x"
        :y="contextMenuParam.y"
--- a/frontend/src/components/sidebar/Ribbon.vue
+++ b/frontend/src/components/sidebar/Ribbon.vue
@ -1,5 +1,5 @@
 <script setup>
-import { computed, h } from 'vue'
+import { computed, ref } from 'vue'
 import { NIcon, useThemeVars } from 'naive-ui'
 import Database from '@/components/icons/Database.vue'
 import { useI18n } from 'vue-i18n'
@ -14,6 +14,7 @@ import Record from '@/components/icons/Record.vue'
 import { extraTheme } from '@/utils/extra_theme.js'
 import useBrowserStore from 'stores/browser.js'
 import { useRender } from '@/utils/render.js'
+import wechatUrl from '@/assets/images/wechat_official.png'

 const themeVars = useThemeVars()
 const render = useRender()
@ -35,21 +36,22 @@ const iconSize = computed(() => Math.floor(props.width * 0.45))

 const browserStore = useBrowserStore()
 const i18n = useI18n()
+const showWechat = ref(false)
 const menuOptions = computed(() => {
    return [
        {
-            label: i18n.t('ribbon.browser'),
+            label: 'ribbon.browser',
            key: 'browser',
            icon: Database,
            show: browserStore.anyConnectionOpened,
        },
        {
-            label: i18n.t('ribbon.server'),
+            label: 'ribbon.server',
            key: 'server',
            icon: Server,
        },
        {
-            label: i18n.t('ribbon.log'),
+            label: 'ribbon.log',
            key: 'log',
            icon: Record,
        },
@ -59,21 +61,21 @@ const menuOptions = computed(() => {
 const preferencesOptions = computed(() => {
    return [
        {
-            label: i18n.t('menu.preferences'),
+            label: 'menu.preferences',
            key: 'preferences',
-            icon: render.renderIcon(Config, { strokeWidth: 3 }),
+            icon: Config,
        },
        // {
-        //     label: i18n.t('menu.help'),
+        //     label: 'menu.help',
        //     key: 'help',
-        //     icon: render.renderIcon(Help, { strokeWidth: 3 }),
+        //     icon: Help,
        // },
        {
-            label: i18n.t('menu.report_bug'),
+            label: 'menu.report_bug',
            key: 'report',
        },
        {
-            label: i18n.t('menu.check_update'),
+            label: 'menu.check_update',
            key: 'update',
        },
        {
@ -81,16 +83,16 @@ const preferencesOptions = computed(() => {
            key: 'd1',
        },
        {
-            label: i18n.t('menu.about'),
+            label: 'menu.wechat_official',
+            key: 'wechat_official',
+        },
+        {
+            label: 'menu.about',
            key: 'about',
        },
    ]
 })

-const renderContextLabel = (option) => {
-    return h('div', { class: 'context-menu-item' }, option.label)
-}
-
 const dialogStore = useDialogStore()
 const prefStore = usePreferencesStore()
 const onSelectPreferenceMenu = (key) => {
@ -104,6 +106,9 @@ const onSelectPreferenceMenu = (key) => {
        case 'report':
            BrowserOpenURL('https://github.com/tiny-craft/tiny-rdm/issues')
            break
+        case 'wechat_official':
+            showWechat.value = true
+            break
        case 'about':
            dialogStore.openAboutDialog()
            break
@ -140,20 +145,35 @@ const exThemeVars = computed(() => {
                        </n-icon>
                    </div>
                </template>
-                {{ m.label }}
+                {{ $t(m.label) }}
            </n-tooltip>
        </div>
        <div class="flex-item-expand"></div>
        <div class="nav-menu-item flex-box-v">
            <n-dropdown
                :options="preferencesOptions"
-                :render-label="renderContextLabel"
+                :render-icon="({ icon }) => render.renderIcon(icon)"
+                :render-label="({ label }) => render.renderLabel($t(label), { class: 'context-menu-item' })"
                trigger="click"
                @select="onSelectPreferenceMenu">
                <icon-button :icon="Config" :size="iconSize" :stroke-width="3" class="nav-menu-button" />
            </n-dropdown>
-            <icon-button :icon="Github" :size="iconSize" class="nav-menu-button" @click="openGithub" />
+            <icon-button
+                :icon="Github"
+                :size="iconSize"
+                :tooltip="$t('ribbon.github')"
+                class="nav-menu-button"
+                @click="openGithub" />
        </div>
+
+        <!-- wechat official modal -->
+        <n-modal
+            :show="showWechat"
+            transform-origin="center"
+            @close="showWechat = false"
+            @mask-click="showWechat = false">
+            <n-image :src="wechatUrl" :width="400" preview-disabled />
+        </n-modal>
    </div>
 </template>

@ -227,7 +247,7 @@ const exThemeVars = computed(() => {
    .nav-menu-item {
        align-items: center;
        padding: 10px 0;
-        gap: 15px;
+        gap: 18px;
        --wails-draggable: none;

        .nav-menu-button {
--- a/frontend/src/langs/en-us.json
+++ b/frontend/src/langs/en-us.json
@ -70,7 +70,7 @@
    "disconnect": "Disconnect",
    "dup_conn": "Duplicate Connection",
    "remove_conn": "Delete Connection",
-    "edit_conn": "Edit Connection Config",
+    "edit_conn": "Edit Connection",
    "edit_conn_group": "Edit Group",
    "rename_conn_group": "Rename Group",
    "remove_conn_group": "Delete Group",
@ -142,7 +142,8 @@
  "ribbon": {
    "server": "Server",
    "browser": "Data Browser",
-    "log": "Log"
+    "log": "Log",
+    "github": "Github"
  },
  "dialogue": {
    "close_confirm": "Confirm close this tab and connection ({name})",
@ -200,6 +201,9 @@
      "ssl": {
        "title": "SSL/TLS",
        "enable": "Enable SSL/TLS",
+        "allow_insecure": "Allow Insecure Connection",
+        "sni": "Server Name(SNI)",
+        "sni_tip": "(Optional) Server Name",
        "cert_file": "Public Key",
        "key_file": "Private Key",
        "ca_file": "Authority",
@ -335,6 +339,7 @@
    "help": "Help",
    "check_update": "Check for Updates...",
    "report_bug": "Report a Bug",
+    "wechat_official": "Wechat Official Account",
    "about": "About"
  },
  "log": {
--- a/frontend/src/langs/pt-br.json
+++ b/frontend/src/langs/pt-br.json
@ -114,7 +114,8 @@
  "ribbon": {
    "server": "Servidor",
    "browser": "Navegador de Dados",
-    "log": "Log"
+    "log": "Log",
+    "github": "Github"
  },
  "dialogue": {
    "close_confirm": "Confirmar o fechamento desta guia e conexão ({name})",
--- a/frontend/src/langs/zh-cn.json
+++ b/frontend/src/langs/zh-cn.json
@ -142,7 +142,8 @@
  "ribbon": {
    "server": "服务器",
    "browser": "数据浏览",
-    "log": "日志"
+    "log": "日志",
+    "github": "Github"
  },
  "dialogue": {
    "close_confirm": "是否关闭此连接（{name}）",
@ -200,6 +201,9 @@
      "ssl": {
        "title": "SSL/TLS",
        "enable": "启用SSL",
+        "allow_insecure": "允许不安全连接",
+        "sni": "服务器名(SNI)",
+        "sni_tip": "(可选)服务器名",
        "cert_file": "公钥文件",
        "key_file": "私钥文件",
        "ca_file": "授权文件",
@ -335,6 +339,7 @@
    "help": "帮助",
    "check_update": "检查更新...",
    "report_bug": "报告错误",
+    "wechat_official": "微信公众号",
    "about": "关于"
  },
  "log": {
--- a/frontend/src/stores/connections.js
+++ b/frontend/src/stores/connections.js
@ -159,6 +159,8 @@ const useConnectionStore = defineStore('connections', {
                markColor: '',
                ssl: {
                    enable: false,
+                    allowInsecure: true,
+                    sni: '',
                    certFile: '',
                    keyFile: '',
                    caFile: '',
--- a/frontend/src/stores/preferences.js
+++ b/frontend/src/stores/preferences.js
@ -69,15 +69,15 @@ const usePreferencesStore = defineStore('preferences', {
            return [
                {
                    value: 'light',
-                    label: i18nGlobal.t('preferences.general.theme_light'),
+                    label: 'preferences.general.theme_light',
                },
                {
                    value: 'dark',
-                    label: i18nGlobal.t('preferences.general.theme_dark'),
+                    label: 'preferences.general.theme_dark',
                },
                {
                    value: 'auto',
-                    label: i18nGlobal.t('preferences.general.theme_auto'),
+                    label: 'preferences.general.theme_auto',
                },
            ]
        },
@ -93,7 +93,7 @@ const usePreferencesStore = defineStore('preferences', {
            }))
            options.splice(0, 0, {
                value: 'auto',
-                label: i18nGlobal.t('preferences.general.system_lang'),
+                label: 'preferences.general.system_lang',
            })
            return options
        },
@ -110,7 +110,7 @@ const usePreferencesStore = defineStore('preferences', {
            }))
            option.splice(0, 0, {
                value: '',
-                label: i18nGlobal.t('preferences.general.default'),
+                label: 'preferences.general.default',
                path: '',
            })
            return option
--- a/frontend/src/utils/render.js
+++ b/frontend/src/utils/render.js
@ -7,14 +7,25 @@ export function useRender() {
         *
         * @param {string|Object} icon
         * @param {{}} [props]
-         * @return {*}
+         * @return {VNode}
         */
        renderIcon: (icon, props = {}) => {
-            return () => {
+            if (icon == null) {
+                return undefined
+            }
            return h(NIcon, null, {
                default: () => h(icon, props),
            })
-            }
+        },
+
+        /**
+         *
+         * @param {string} label
+         * @param {{}} [props]
+         * @return {VNode}
+         */
+        renderLabel: (label, props = {}) => {
+            return h('div', props, label)
        },
    }
 }
--- a/frontend/src/utils/theme.js
+++ b/frontend/src/utils/theme.js
@ -69,6 +69,7 @@ export const themeOverrides = {
        padding: '6px 2px',
        optionColorHover: '#D33A31',
        optionTextColorHover: '#FFF',
+        optionHeightMedium: '28px',
    },
 }

--- a/go.mod
+++ b/go.mod
@ -7,10 +7,10 @@ require (
 	github.com/andybalholm/brotli v1.0.6
 	github.com/google/uuid v1.5.0
 	github.com/klauspost/compress v1.17.4
-	github.com/redis/go-redis/v9 v9.3.1
+	github.com/redis/go-redis/v9 v9.4.0
 	github.com/vrischmann/userdir v0.0.0-20151206171402-20f291cebd68
 	github.com/wailsapp/wails/v2 v2.7.1
-	golang.org/x/crypto v0.17.0
+	golang.org/x/crypto v0.18.0
 	gopkg.in/yaml.v3 v3.0.1
 )

@ -44,7 +44,7 @@ require (
 	github.com/wailsapp/mimetype v1.4.1 // indirect
 	golang.org/x/exp v0.0.0-20231206192017-f3f8817b8deb // indirect
 	golang.org/x/net v0.19.0 // indirect
-	golang.org/x/sys v0.15.0 // indirect
+	golang.org/x/sys v0.16.0 // indirect
 	golang.org/x/text v0.14.0 // indirect
 	gopkg.in/check.v1 v1.0.0-20201130134442-10cb98267c6c // indirect
 )
--- a/go.sum
+++ b/go.sum
@ -68,8 +68,8 @@ github.com/pkg/errors v0.9.1 h1:FEBLx1zS214owpjy7qsBeixbURkuhQAwrK5UwLGTwt4=
 github.com/pkg/errors v0.9.1/go.mod h1:bwawxfHBFNV+L2hUp1rHADufV3IMtnDRdf1r5NINEl0=
 github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
 github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
-github.com/redis/go-redis/v9 v9.3.1 h1:KqdY8U+3X6z+iACvumCNxnoluToB+9Me+TvyFa21Mds=
-github.com/redis/go-redis/v9 v9.3.1/go.mod h1:hdY0cQFCN4fnSYT6TkisLufl/4W5UIXyv0b/CLO2V2M=
+github.com/redis/go-redis/v9 v9.4.0 h1:Yzoz33UZw9I/mFhx4MNrB6Fk+XHO1VukNcCa1+lwyKk=
+github.com/redis/go-redis/v9 v9.4.0/go.mod h1:hdY0cQFCN4fnSYT6TkisLufl/4W5UIXyv0b/CLO2V2M=
 github.com/rivo/uniseg v0.2.0/go.mod h1:J6wj4VEh+S6ZtnVlnTBMWIodfgj8LQOQFoIToxlJtxc=
 github.com/rivo/uniseg v0.4.4 h1:8TfxU8dW6PdqD27gjM8MVNuicgxIjxpm4K7x4jp8sis=
 github.com/rivo/uniseg v0.4.4/go.mod h1:FN3SvrM+Zdj16jyLfmOkMNblXMcoc8DfTHruCPUcx88=
@ -100,8 +100,8 @@ github.com/wailsapp/mimetype v1.4.1 h1:pQN9ycO7uo4vsUUuPeHEYoUkLVkaRntMnHJxVwYhw
 github.com/wailsapp/mimetype v1.4.1/go.mod h1:9aV5k31bBOv5z6u+QP8TltzvNGJPmNJD4XlAL3U+j3o=
 github.com/wailsapp/wails/v2 v2.7.1 h1:HAzp2c5ODOzsLC6ZMDVtNOB72ozM7/SJecJPB2Ur+UU=
 github.com/wailsapp/wails/v2 v2.7.1/go.mod h1:oIJVwwso5fdOgprBYWXBBqtx6PaSvxg8/KTQHNGkadc=
-golang.org/x/crypto v0.17.0 h1:r8bRNjWL3GshPW3gkd+RpvzWrZAwPS49OmTGZ/uhM4k=
-golang.org/x/crypto v0.17.0/go.mod h1:gCAAfMLgwOJRpTjQ2zCCt2OcSfYMTeZVSRtQlPC7Nq4=
+golang.org/x/crypto v0.18.0 h1:PGVlW0xEltQnzFZ55hkuX5+KLyrMYhHld1YHO4AKcdc=
+golang.org/x/crypto v0.18.0/go.mod h1:R0j02AL6hcrfOiy9T4ZYp/rcWeMxM3L6QYxlOuEG1mg=
 golang.org/x/exp v0.0.0-20231206192017-f3f8817b8deb h1:c0vyKkb6yr3KR7jEfJaOSv4lG7xPkbN6r52aJz1d8a8=
 golang.org/x/exp v0.0.0-20231206192017-f3f8817b8deb/go.mod h1:iRJReGqOEeBhDZGkGbynYwcHlctCvnjTYIamk7uXpHI=
 golang.org/x/net v0.0.0-20210505024714-0287a6fb4125/go.mod h1:9nx3DQGgdP8bBQD5qxJ1jj9UTztislL4KSBs9R2vV5Y=
@ -115,11 +115,11 @@ golang.org/x/sys v0.0.0-20211025201205-69cdffdb9359/go.mod h1:oPkhp1MJrh7nUepCBc
 golang.org/x/sys v0.0.0-20220811171246-fbc7d0a398ab/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.1.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.15.0 h1:h48lPFYpsTvQJZF4EKyI4aLHaev3CxivZmv7yZig9pc=
-golang.org/x/sys v0.15.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
+golang.org/x/sys v0.16.0 h1:xWw16ngr6ZMtmxDyKyIgsE93KNKz5HKmMa3b8ALHidU=
+golang.org/x/sys v0.16.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
 golang.org/x/term v0.0.0-20201126162022-7de9c90e9dd1/go.mod h1:bj7SfCRtBDWHUb9snDiAeCFNEtKQo2Wmx5Cou7ajbmo=
-golang.org/x/term v0.15.0 h1:y/Oo/a/q3IXu26lQgl04j/gjuBDOBlx7X6Om1j2CPW4=
-golang.org/x/term v0.15.0/go.mod h1:BDl952bC7+uMoWR75FIrCDx79TPU9oHkTZ9yRbYOrX0=
+golang.org/x/term v0.16.0 h1:m+B6fahuftsE9qjo0VWp2FW0mB3MTJvR0BaMQrq0pmE=
+golang.org/x/term v0.16.0/go.mod h1:yn7UURbUtPyrVJPGPq404EukNFxcm/foM+bV/bfcDsY=
 golang.org/x/text v0.3.6/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ=
 golang.org/x/text v0.14.0 h1:ScX5w1eTa3QqT8oi6+ziP7dTV1S2+ALU0bI+0zXKWiQ=
 golang.org/x/text v0.14.0/go.mod h1:18ZOQIKpY8NJVqYksKHtTdi31H5itFRjB5/qKTNYzSU=
Author	SHA1	Message	Date
Lykin	5d2080aafb	perf: support "skip insecure verify" and "sni" for SSL #67 #113	2024-01-11 00:32:55 +08:00
Lykin	d989cdd85b	chore: add wechat official account entrance	2024-01-10 18:27:56 +08:00
Lykin	115aa9d079	refactor: move i18n calling out of computed	2024-01-10 15:32:19 +08:00
Lykin	4258a45498	chore: update dependencies	2024-01-10 15:32:19 +08:00