diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 769fcfd..eb18a80 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -12,8 +12,8 @@
         "highlight.js": "^11.9.0",
         "lodash": "^4.17.21",
         "pinia": "^2.1.7",
-        "sass": "^1.69.3",
-        "vue": "^3.3.4",
+        "sass": "^1.69.4",
+        "vue": "^3.3.6",
         "vue-i18n": "^9.5.0"
       },
       "devDependencies": {
@@ -21,9 +21,9 @@
         "naive-ui": "^2.35.0",
         "prettier": "^3.0.3",
         "unplugin-auto-import": "^0.16.6",
-        "unplugin-icons": "^0.17.0",
+        "unplugin-icons": "^0.17.1",
         "unplugin-vue-components": "^0.25.2",
-        "vite": "^4.4.11"
+        "vite": "^4.5.0"
       }
     },
     "node_modules/@antfu/install-pkg": {
@@ -43,9 +43,9 @@
       "dev": true
     },
     "node_modules/@babel/parser": {
-      "version": "7.22.16",
-      "resolved": "https://registry.npmmirror.com/@babel/parser/-/parser-7.22.16.tgz",
-      "integrity": "sha512-+gPfKv8UWeKKeJTUxe59+OobVcrYHETCsORl61EmSkmgymguYk/X5bp7GuUIXaFsc6y++v8ZxPsLSSuujqDphA==",
+      "version": "7.23.0",
+      "resolved": "https://registry.npmmirror.com/@babel/parser/-/parser-7.23.0.tgz",
+      "integrity": "sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==",
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -448,9 +448,9 @@
       "dev": true
     },
     "node_modules/@iconify/utils": {
-      "version": "2.1.9",
-      "resolved": "https://registry.npmmirror.com/@iconify/utils/-/utils-2.1.9.tgz",
-      "integrity": "sha512-mo+A4n3MwLlWlg1SoSO+Dt6pOPWKElk9sSJ6ZpuzbB9OcjxN8RUWxU3ulPwB1nglErWKRam2x4BAohbYF7FiFA==",
+      "version": "2.1.11",
+      "resolved": "https://registry.npmmirror.com/@iconify/utils/-/utils-2.1.11.tgz",
+      "integrity": "sha512-M/w3PkN8zQYXi8N6qK/KhnYMfEbbb6Sk8RZVn8g+Pmmu5ybw177RpsaGwpziyHeUsu4etrexYSWq3rwnIqzYCg==",
       "dev": true,
       "dependencies": {
         "@antfu/install-pkg": "^0.1.1",
@@ -602,49 +602,49 @@
       }
     },
     "node_modules/@vue/compiler-core": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmmirror.com/@vue/compiler-core/-/compiler-core-3.3.4.tgz",
-      "integrity": "sha512-cquyDNvZ6jTbf/+x+AgM2Arrp6G4Dzbb0R64jiG804HRMfRiFXWI6kqUVqZ6ZR0bQhIoQjB4+2bhNtVwndW15g==",
+      "version": "3.3.6",
+      "resolved": "https://registry.npmmirror.com/@vue/compiler-core/-/compiler-core-3.3.6.tgz",
+      "integrity": "sha512-2JNjemwaNwf+MkkatATVZi7oAH1Hx0B04DdPH3ZoZ8vKC1xZVP7nl4HIsk8XYd3r+/52sqqoz9TWzYc3yE9dqA==",
       "dependencies": {
-        "@babel/parser": "^7.21.3",
-        "@vue/shared": "3.3.4",
+        "@babel/parser": "^7.23.0",
+        "@vue/shared": "3.3.6",
         "estree-walker": "^2.0.2",
         "source-map-js": "^1.0.2"
       }
     },
     "node_modules/@vue/compiler-dom": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmmirror.com/@vue/compiler-dom/-/compiler-dom-3.3.4.tgz",
-      "integrity": "sha512-wyM+OjOVpuUukIq6p5+nwHYtj9cFroz9cwkfmP9O1nzH68BenTTv0u7/ndggT8cIQlnBeOo6sUT/gvHcIkLA5w==",
+      "version": "3.3.6",
+      "resolved": "https://registry.npmmirror.com/@vue/compiler-dom/-/compiler-dom-3.3.6.tgz",
+      "integrity": "sha512-1MxXcJYMHiTPexjLAJUkNs/Tw2eDf2tY3a0rL+LfuWyiKN2s6jvSwywH3PWD8bKICjfebX3GWx2Os8jkRDq3Ng==",
       "dependencies": {
-        "@vue/compiler-core": "3.3.4",
-        "@vue/shared": "3.3.4"
+        "@vue/compiler-core": "3.3.6",
+        "@vue/shared": "3.3.6"
       }
     },
     "node_modules/@vue/compiler-sfc": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmmirror.com/@vue/compiler-sfc/-/compiler-sfc-3.3.4.tgz",
-      "integrity": "sha512-6y/d8uw+5TkCuzBkgLS0v3lSM3hJDntFEiUORM11pQ/hKvkhSKZrXW6i69UyXlJQisJxuUEJKAWEqWbWsLeNKQ==",
+      "version": "3.3.6",
+      "resolved": "https://registry.npmmirror.com/@vue/compiler-sfc/-/compiler-sfc-3.3.6.tgz",
+      "integrity": "sha512-/Kms6du2h1VrXFreuZmlvQej8B1zenBqIohP0690IUBkJjsFvJxY0crcvVRJ0UhMgSR9dewB+khdR1DfbpArJA==",
       "dependencies": {
-        "@babel/parser": "^7.20.15",
-        "@vue/compiler-core": "3.3.4",
-        "@vue/compiler-dom": "3.3.4",
-        "@vue/compiler-ssr": "3.3.4",
-        "@vue/reactivity-transform": "3.3.4",
-        "@vue/shared": "3.3.4",
+        "@babel/parser": "^7.23.0",
+        "@vue/compiler-core": "3.3.6",
+        "@vue/compiler-dom": "3.3.6",
+        "@vue/compiler-ssr": "3.3.6",
+        "@vue/reactivity-transform": "3.3.6",
+        "@vue/shared": "3.3.6",
         "estree-walker": "^2.0.2",
-        "magic-string": "^0.30.0",
-        "postcss": "^8.1.10",
+        "magic-string": "^0.30.5",
+        "postcss": "^8.4.31",
         "source-map-js": "^1.0.2"
       }
     },
     "node_modules/@vue/compiler-ssr": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmmirror.com/@vue/compiler-ssr/-/compiler-ssr-3.3.4.tgz",
-      "integrity": "sha512-m0v6oKpup2nMSehwA6Uuu+j+wEwcy7QmwMkVNVfrV9P2qE5KshC6RwOCq8fjGS/Eak/uNb8AaWekfiXxbBB6gQ==",
+      "version": "3.3.6",
+      "resolved": "https://registry.npmmirror.com/@vue/compiler-ssr/-/compiler-ssr-3.3.6.tgz",
+      "integrity": "sha512-QTIHAfDCHhjXlYGkUg5KH7YwYtdUM1vcFl/FxFDlD6d0nXAmnjizka3HITp8DGudzHndv2PjKVS44vqqy0vP4w==",
       "dependencies": {
-        "@vue/compiler-dom": "3.3.4",
-        "@vue/shared": "3.3.4"
+        "@vue/compiler-dom": "3.3.6",
+        "@vue/shared": "3.3.6"
       }
     },
     "node_modules/@vue/devtools-api": {
@@ -653,42 +653,42 @@
       "integrity": "sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q=="
     },
     "node_modules/@vue/reactivity": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.3.4.tgz",
-      "integrity": "sha512-kLTDLwd0B1jG08NBF3R5rqULtv/f8x3rOFByTDz4J53ttIQEDmALqKqXY0J+XQeN0aV2FBxY8nJDf88yvOPAqQ==",
+      "version": "3.3.6",
+      "resolved": "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.3.6.tgz",
+      "integrity": "sha512-gtChAumfQz5lSy5jZXfyXbKrIYPf9XEOrIr6rxwVyeWVjFhJwmwPLtV6Yis+M9onzX++I5AVE9j+iPH60U+B8Q==",
       "dependencies": {
-        "@vue/shared": "3.3.4"
+        "@vue/shared": "3.3.6"
       }
     },
     "node_modules/@vue/reactivity-transform": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmmirror.com/@vue/reactivity-transform/-/reactivity-transform-3.3.4.tgz",
-      "integrity": "sha512-MXgwjako4nu5WFLAjpBnCj/ieqcjE2aJBINUNQzkZQfzIZA4xn+0fV1tIYBJvvva3N3OvKGofRLvQIwEQPpaXw==",
+      "version": "3.3.6",
+      "resolved": "https://registry.npmmirror.com/@vue/reactivity-transform/-/reactivity-transform-3.3.6.tgz",
+      "integrity": "sha512-RlJl4dHfeO7EuzU1iJOsrlqWyJfHTkJbvYz/IOJWqu8dlCNWtxWX377WI0VsbAgBizjwD+3ZjdnvSyyFW1YVng==",
       "dependencies": {
-        "@babel/parser": "^7.20.15",
-        "@vue/compiler-core": "3.3.4",
-        "@vue/shared": "3.3.4",
+        "@babel/parser": "^7.23.0",
+        "@vue/compiler-core": "3.3.6",
+        "@vue/shared": "3.3.6",
         "estree-walker": "^2.0.2",
-        "magic-string": "^0.30.0"
+        "magic-string": "^0.30.5"
       }
     },
     "node_modules/@vue/runtime-core": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmmirror.com/@vue/runtime-core/-/runtime-core-3.3.4.tgz",
-      "integrity": "sha512-R+bqxMN6pWO7zGI4OMlmvePOdP2c93GsHFM/siJI7O2nxFRzj55pLwkpCedEY+bTMgp5miZ8CxfIZo3S+gFqvA==",
+      "version": "3.3.6",
+      "resolved": "https://registry.npmmirror.com/@vue/runtime-core/-/runtime-core-3.3.6.tgz",
+      "integrity": "sha512-qp7HTP1iw1UW2ZGJ8L3zpqlngrBKvLsDAcq5lA6JvEXHmpoEmjKju7ahM9W2p/h51h0OT5F2fGlP/gMhHOmbUA==",
       "dependencies": {
-        "@vue/reactivity": "3.3.4",
-        "@vue/shared": "3.3.4"
+        "@vue/reactivity": "3.3.6",
+        "@vue/shared": "3.3.6"
       }
     },
     "node_modules/@vue/runtime-dom": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmmirror.com/@vue/runtime-dom/-/runtime-dom-3.3.4.tgz",
-      "integrity": "sha512-Aj5bTJ3u5sFsUckRghsNjVTtxZQ1OyMWCr5dZRAPijF/0Vy4xEoRCwLyHXcj4D0UFbJ4lbx3gPTgg06K/GnPnQ==",
+      "version": "3.3.6",
+      "resolved": "https://registry.npmmirror.com/@vue/runtime-dom/-/runtime-dom-3.3.6.tgz",
+      "integrity": "sha512-AoX3Cp8NqMXjLbIG9YR6n/pPLWE9TiDdk6wTJHFnl2GpHzDFH1HLBC9wlqqQ7RlnvN3bVLpzPGAAH00SAtOxHg==",
       "dependencies": {
-        "@vue/runtime-core": "3.3.4",
-        "@vue/shared": "3.3.4",
-        "csstype": "^3.1.1"
+        "@vue/runtime-core": "3.3.6",
+        "@vue/shared": "3.3.6",
+        "csstype": "^3.1.2"
       }
     },
     "node_modules/@vue/runtime-dom/node_modules/csstype": {
@@ -697,21 +697,21 @@
       "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
     },
     "node_modules/@vue/server-renderer": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmmirror.com/@vue/server-renderer/-/server-renderer-3.3.4.tgz",
-      "integrity": "sha512-Q6jDDzR23ViIb67v+vM1Dqntu+HUexQcsWKhhQa4ARVzxOY2HbC7QRW/ggkDBd5BU+uM1sV6XOAP0b216o34JQ==",
+      "version": "3.3.6",
+      "resolved": "https://registry.npmmirror.com/@vue/server-renderer/-/server-renderer-3.3.6.tgz",
+      "integrity": "sha512-kgLoN43W4ERdZ6dpyy+gnk2ZHtcOaIr5Uc/WUP5DRwutgvluzu2pudsZGoD2b7AEJHByUVMa9k6Sho5lLRCykw==",
       "dependencies": {
-        "@vue/compiler-ssr": "3.3.4",
-        "@vue/shared": "3.3.4"
+        "@vue/compiler-ssr": "3.3.6",
+        "@vue/shared": "3.3.6"
       },
       "peerDependencies": {
-        "vue": "3.3.4"
+        "vue": "3.3.6"
       }
     },
     "node_modules/@vue/shared": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.3.4.tgz",
-      "integrity": "sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ=="
+      "version": "3.3.6",
+      "resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.3.6.tgz",
+      "integrity": "sha512-Xno5pEqg8SVhomD0kTSmfh30ZEmV/+jZtyh39q6QflrjdJCXah5lrnOLi9KB6a5k5aAHXMXjoMnxlzUkCNfWLQ=="
     },
     "node_modules/acorn": {
       "version": "8.10.0",
@@ -1176,9 +1176,9 @@
       "dev": true
     },
     "node_modules/magic-string": {
-      "version": "0.30.3",
-      "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.3.tgz",
-      "integrity": "sha512-B7xGbll2fG/VjP+SWg4sX3JynwIU0mjoTc6MPpKNuIvftk6u6vqhDnk1R80b8C2GBR6ywqy+1DcKBrevBg+bmw==",
+      "version": "0.30.5",
+      "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.5.tgz",
+      "integrity": "sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==",
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.4.15"
       },
@@ -1448,9 +1448,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.29",
-      "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.29.tgz",
-      "integrity": "sha512-cbI+jaqIeu/VGqXEarWkRCCffhjgXc0qjBtXpqJhTBohMUjUQnbBr0xqX3vEKudc4iviTewcJo5ajcec5+wdJw==",
+      "version": "8.4.31",
+      "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
       "dependencies": {
         "nanoid": "^3.3.6",
         "picocolors": "^1.0.0",
@@ -1545,9 +1545,9 @@
       }
     },
     "node_modules/sass": {
-      "version": "1.69.3",
-      "resolved": "https://registry.npmmirror.com/sass/-/sass-1.69.3.tgz",
-      "integrity": "sha512-X99+a2iGdXkdWn1akFPs0ZmelUzyAQfvqYc2P/MPTrJRuIRoTffGzT9W9nFqG00S+c8hXzVmgxhUuHFdrwxkhQ==",
+      "version": "1.69.4",
+      "resolved": "https://registry.npmmirror.com/sass/-/sass-1.69.4.tgz",
+      "integrity": "sha512-+qEreVhqAy8o++aQfCJwp0sklr2xyEzkm9Pp/Igu9wNPoe7EZEQ8X/MBvvXggI2ql607cxKg/RKOwDj6pp2XDA==",
       "dependencies": {
         "chokidar": ">=3.0.0 <4.0.0",
         "immutable": "^4.0.0",
@@ -1677,12 +1677,12 @@
       }
     },
     "node_modules/unplugin": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmmirror.com/unplugin/-/unplugin-1.4.0.tgz",
-      "integrity": "sha512-5x4eIEL6WgbzqGtF9UV8VEC/ehKptPXDS6L2b0mv4FRMkJxRtjaJfOWDd6a8+kYbqsjklix7yWP0N3SUepjXcg==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmmirror.com/unplugin/-/unplugin-1.5.0.tgz",
+      "integrity": "sha512-9ZdRwbh/4gcm1JTOkp9lAkIDrtOyOxgHmY7cjuwI8L/2RTikMcVG25GsZwNAgRuap3iDw2jeq7eoqtAsz5rW3A==",
       "dev": true,
       "dependencies": {
-        "acorn": "^8.9.0",
+        "acorn": "^8.10.0",
         "chokidar": "^3.5.3",
         "webpack-sources": "^3.2.3",
         "webpack-virtual-modules": "^0.5.0"
@@ -1720,18 +1720,18 @@
       }
     },
     "node_modules/unplugin-icons": {
-      "version": "0.17.0",
-      "resolved": "https://registry.npmmirror.com/unplugin-icons/-/unplugin-icons-0.17.0.tgz",
-      "integrity": "sha512-gMv66eY/Hj64heM55XrfDH3LUCWI51mtkBVUPVl9VkpvLgAYhdVe9nRuzu6p+idmCLSQVq7xiPxQcD4aXCgW5A==",
+      "version": "0.17.1",
+      "resolved": "https://registry.npmmirror.com/unplugin-icons/-/unplugin-icons-0.17.1.tgz",
+      "integrity": "sha512-KsWejBPCHokYCNDQUzGu6R3E3XDYH/YpewgQwrVBXgpl1iR0RdW1NEGNdjlbuapwVnZXVgA5eiDTfNaQCawSdg==",
       "dev": true,
       "dependencies": {
         "@antfu/install-pkg": "^0.1.1",
         "@antfu/utils": "^0.7.6",
-        "@iconify/utils": "^2.1.9",
+        "@iconify/utils": "^2.1.11",
         "debug": "^4.3.4",
         "kolorist": "^1.8.0",
-        "local-pkg": "^0.4.3",
-        "unplugin": "^1.4.0"
+        "local-pkg": "^0.5.0",
+        "unplugin": "^1.5.0"
       },
       "peerDependencies": {
         "@svgr/core": ">=7.0.0",
@@ -1758,6 +1758,19 @@
         }
       }
     },
+    "node_modules/unplugin-icons/node_modules/local-pkg": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmmirror.com/local-pkg/-/local-pkg-0.5.0.tgz",
+      "integrity": "sha512-ok6z3qlYyCDS4ZEU27HaU6x/xZa9Whf8jD4ptH5UZTQYZVYeb9bnZ3ojVhiJNLiXK1Hfc0GNbLXcmZ5plLDDBg==",
+      "dev": true,
+      "dependencies": {
+        "mlly": "^1.4.2",
+        "pkg-types": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/unplugin-vue-components": {
       "version": "0.25.2",
       "resolved": "https://registry.npmmirror.com/unplugin-vue-components/-/unplugin-vue-components-0.25.2.tgz",
@@ -1805,9 +1818,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "4.4.11",
-      "resolved": "https://registry.npmmirror.com/vite/-/vite-4.4.11.tgz",
-      "integrity": "sha512-ksNZJlkcU9b0lBwAGZGGaZHCMqHsc8OpgtoYhsQ4/I2v5cnpmmmqe5pM4nv/4Hn6G/2GhTdj0DhZh2e+Er1q5A==",
+      "version": "4.5.0",
+      "resolved": "https://registry.npmmirror.com/vite/-/vite-4.5.0.tgz",
+      "integrity": "sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==",
       "dev": true,
       "dependencies": {
         "esbuild": "^0.18.10",
@@ -1869,15 +1882,23 @@
       }
     },
     "node_modules/vue": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmmirror.com/vue/-/vue-3.3.4.tgz",
-      "integrity": "sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw==",
+      "version": "3.3.6",
+      "resolved": "https://registry.npmmirror.com/vue/-/vue-3.3.6.tgz",
+      "integrity": "sha512-jJIDETeWJnoY+gfn4ZtMPMS5KtbP4ax+CT4dcQFhTnWEk8xMupFyQ0JxL28nvT/M4+p4a0ptxaV2WY0LiIxvRg==",
       "dependencies": {
-        "@vue/compiler-dom": "3.3.4",
-        "@vue/compiler-sfc": "3.3.4",
-        "@vue/runtime-dom": "3.3.4",
-        "@vue/server-renderer": "3.3.4",
-        "@vue/shared": "3.3.4"
+        "@vue/compiler-dom": "3.3.6",
+        "@vue/compiler-sfc": "3.3.6",
+        "@vue/runtime-dom": "3.3.6",
+        "@vue/server-renderer": "3.3.6",
+        "@vue/shared": "3.3.6"
+      },
+      "peerDependencies": {
+        "typescript": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
       }
     },
     "node_modules/vue-i18n": {
@@ -1972,9 +1993,9 @@
       "dev": true
     },
     "@babel/parser": {
-      "version": "7.22.16",
-      "resolved": "https://registry.npmmirror.com/@babel/parser/-/parser-7.22.16.tgz",
-      "integrity": "sha512-+gPfKv8UWeKKeJTUxe59+OobVcrYHETCsORl61EmSkmgymguYk/X5bp7GuUIXaFsc6y++v8ZxPsLSSuujqDphA=="
+      "version": "7.23.0",
+      "resolved": "https://registry.npmmirror.com/@babel/parser/-/parser-7.23.0.tgz",
+      "integrity": "sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw=="
     },
     "@babel/runtime": {
       "version": "7.23.1",
@@ -2166,9 +2187,9 @@
       "dev": true
     },
     "@iconify/utils": {
-      "version": "2.1.9",
-      "resolved": "https://registry.npmmirror.com/@iconify/utils/-/utils-2.1.9.tgz",
-      "integrity": "sha512-mo+A4n3MwLlWlg1SoSO+Dt6pOPWKElk9sSJ6ZpuzbB9OcjxN8RUWxU3ulPwB1nglErWKRam2x4BAohbYF7FiFA==",
+      "version": "2.1.11",
+      "resolved": "https://registry.npmmirror.com/@iconify/utils/-/utils-2.1.11.tgz",
+      "integrity": "sha512-M/w3PkN8zQYXi8N6qK/KhnYMfEbbb6Sk8RZVn8g+Pmmu5ybw177RpsaGwpziyHeUsu4etrexYSWq3rwnIqzYCg==",
       "dev": true,
       "requires": {
         "@antfu/install-pkg": "^0.1.1",
@@ -2285,49 +2306,49 @@
       "requires": {}
     },
     "@vue/compiler-core": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmmirror.com/@vue/compiler-core/-/compiler-core-3.3.4.tgz",
-      "integrity": "sha512-cquyDNvZ6jTbf/+x+AgM2Arrp6G4Dzbb0R64jiG804HRMfRiFXWI6kqUVqZ6ZR0bQhIoQjB4+2bhNtVwndW15g==",
+      "version": "3.3.6",
+      "resolved": "https://registry.npmmirror.com/@vue/compiler-core/-/compiler-core-3.3.6.tgz",
+      "integrity": "sha512-2JNjemwaNwf+MkkatATVZi7oAH1Hx0B04DdPH3ZoZ8vKC1xZVP7nl4HIsk8XYd3r+/52sqqoz9TWzYc3yE9dqA==",
       "requires": {
-        "@babel/parser": "^7.21.3",
-        "@vue/shared": "3.3.4",
+        "@babel/parser": "^7.23.0",
+        "@vue/shared": "3.3.6",
         "estree-walker": "^2.0.2",
         "source-map-js": "^1.0.2"
       }
     },
     "@vue/compiler-dom": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmmirror.com/@vue/compiler-dom/-/compiler-dom-3.3.4.tgz",
-      "integrity": "sha512-wyM+OjOVpuUukIq6p5+nwHYtj9cFroz9cwkfmP9O1nzH68BenTTv0u7/ndggT8cIQlnBeOo6sUT/gvHcIkLA5w==",
+      "version": "3.3.6",
+      "resolved": "https://registry.npmmirror.com/@vue/compiler-dom/-/compiler-dom-3.3.6.tgz",
+      "integrity": "sha512-1MxXcJYMHiTPexjLAJUkNs/Tw2eDf2tY3a0rL+LfuWyiKN2s6jvSwywH3PWD8bKICjfebX3GWx2Os8jkRDq3Ng==",
       "requires": {
-        "@vue/compiler-core": "3.3.4",
-        "@vue/shared": "3.3.4"
+        "@vue/compiler-core": "3.3.6",
+        "@vue/shared": "3.3.6"
       }
     },
     "@vue/compiler-sfc": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmmirror.com/@vue/compiler-sfc/-/compiler-sfc-3.3.4.tgz",
-      "integrity": "sha512-6y/d8uw+5TkCuzBkgLS0v3lSM3hJDntFEiUORM11pQ/hKvkhSKZrXW6i69UyXlJQisJxuUEJKAWEqWbWsLeNKQ==",
+      "version": "3.3.6",
+      "resolved": "https://registry.npmmirror.com/@vue/compiler-sfc/-/compiler-sfc-3.3.6.tgz",
+      "integrity": "sha512-/Kms6du2h1VrXFreuZmlvQej8B1zenBqIohP0690IUBkJjsFvJxY0crcvVRJ0UhMgSR9dewB+khdR1DfbpArJA==",
       "requires": {
-        "@babel/parser": "^7.20.15",
-        "@vue/compiler-core": "3.3.4",
-        "@vue/compiler-dom": "3.3.4",
-        "@vue/compiler-ssr": "3.3.4",
-        "@vue/reactivity-transform": "3.3.4",
-        "@vue/shared": "3.3.4",
+        "@babel/parser": "^7.23.0",
+        "@vue/compiler-core": "3.3.6",
+        "@vue/compiler-dom": "3.3.6",
+        "@vue/compiler-ssr": "3.3.6",
+        "@vue/reactivity-transform": "3.3.6",
+        "@vue/shared": "3.3.6",
         "estree-walker": "^2.0.2",
-        "magic-string": "^0.30.0",
-        "postcss": "^8.1.10",
+        "magic-string": "^0.30.5",
+        "postcss": "^8.4.31",
         "source-map-js": "^1.0.2"
       }
     },
     "@vue/compiler-ssr": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmmirror.com/@vue/compiler-ssr/-/compiler-ssr-3.3.4.tgz",
-      "integrity": "sha512-m0v6oKpup2nMSehwA6Uuu+j+wEwcy7QmwMkVNVfrV9P2qE5KshC6RwOCq8fjGS/Eak/uNb8AaWekfiXxbBB6gQ==",
+      "version": "3.3.6",
+      "resolved": "https://registry.npmmirror.com/@vue/compiler-ssr/-/compiler-ssr-3.3.6.tgz",
+      "integrity": "sha512-QTIHAfDCHhjXlYGkUg5KH7YwYtdUM1vcFl/FxFDlD6d0nXAmnjizka3HITp8DGudzHndv2PjKVS44vqqy0vP4w==",
       "requires": {
-        "@vue/compiler-dom": "3.3.4",
-        "@vue/shared": "3.3.4"
+        "@vue/compiler-dom": "3.3.6",
+        "@vue/shared": "3.3.6"
       }
     },
     "@vue/devtools-api": {
@@ -2336,42 +2357,42 @@
       "integrity": "sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q=="
     },
     "@vue/reactivity": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.3.4.tgz",
-      "integrity": "sha512-kLTDLwd0B1jG08NBF3R5rqULtv/f8x3rOFByTDz4J53ttIQEDmALqKqXY0J+XQeN0aV2FBxY8nJDf88yvOPAqQ==",
+      "version": "3.3.6",
+      "resolved": "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.3.6.tgz",
+      "integrity": "sha512-gtChAumfQz5lSy5jZXfyXbKrIYPf9XEOrIr6rxwVyeWVjFhJwmwPLtV6Yis+M9onzX++I5AVE9j+iPH60U+B8Q==",
       "requires": {
-        "@vue/shared": "3.3.4"
+        "@vue/shared": "3.3.6"
       }
     },
     "@vue/reactivity-transform": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmmirror.com/@vue/reactivity-transform/-/reactivity-transform-3.3.4.tgz",
-      "integrity": "sha512-MXgwjako4nu5WFLAjpBnCj/ieqcjE2aJBINUNQzkZQfzIZA4xn+0fV1tIYBJvvva3N3OvKGofRLvQIwEQPpaXw==",
+      "version": "3.3.6",
+      "resolved": "https://registry.npmmirror.com/@vue/reactivity-transform/-/reactivity-transform-3.3.6.tgz",
+      "integrity": "sha512-RlJl4dHfeO7EuzU1iJOsrlqWyJfHTkJbvYz/IOJWqu8dlCNWtxWX377WI0VsbAgBizjwD+3ZjdnvSyyFW1YVng==",
       "requires": {
-        "@babel/parser": "^7.20.15",
-        "@vue/compiler-core": "3.3.4",
-        "@vue/shared": "3.3.4",
+        "@babel/parser": "^7.23.0",
+        "@vue/compiler-core": "3.3.6",
+        "@vue/shared": "3.3.6",
         "estree-walker": "^2.0.2",
-        "magic-string": "^0.30.0"
+        "magic-string": "^0.30.5"
       }
     },
     "@vue/runtime-core": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmmirror.com/@vue/runtime-core/-/runtime-core-3.3.4.tgz",
-      "integrity": "sha512-R+bqxMN6pWO7zGI4OMlmvePOdP2c93GsHFM/siJI7O2nxFRzj55pLwkpCedEY+bTMgp5miZ8CxfIZo3S+gFqvA==",
+      "version": "3.3.6",
+      "resolved": "https://registry.npmmirror.com/@vue/runtime-core/-/runtime-core-3.3.6.tgz",
+      "integrity": "sha512-qp7HTP1iw1UW2ZGJ8L3zpqlngrBKvLsDAcq5lA6JvEXHmpoEmjKju7ahM9W2p/h51h0OT5F2fGlP/gMhHOmbUA==",
       "requires": {
-        "@vue/reactivity": "3.3.4",
-        "@vue/shared": "3.3.4"
+        "@vue/reactivity": "3.3.6",
+        "@vue/shared": "3.3.6"
       }
     },
     "@vue/runtime-dom": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmmirror.com/@vue/runtime-dom/-/runtime-dom-3.3.4.tgz",
-      "integrity": "sha512-Aj5bTJ3u5sFsUckRghsNjVTtxZQ1OyMWCr5dZRAPijF/0Vy4xEoRCwLyHXcj4D0UFbJ4lbx3gPTgg06K/GnPnQ==",
+      "version": "3.3.6",
+      "resolved": "https://registry.npmmirror.com/@vue/runtime-dom/-/runtime-dom-3.3.6.tgz",
+      "integrity": "sha512-AoX3Cp8NqMXjLbIG9YR6n/pPLWE9TiDdk6wTJHFnl2GpHzDFH1HLBC9wlqqQ7RlnvN3bVLpzPGAAH00SAtOxHg==",
       "requires": {
-        "@vue/runtime-core": "3.3.4",
-        "@vue/shared": "3.3.4",
-        "csstype": "^3.1.1"
+        "@vue/runtime-core": "3.3.6",
+        "@vue/shared": "3.3.6",
+        "csstype": "^3.1.2"
       },
       "dependencies": {
         "csstype": {
@@ -2382,18 +2403,18 @@
       }
     },
     "@vue/server-renderer": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmmirror.com/@vue/server-renderer/-/server-renderer-3.3.4.tgz",
-      "integrity": "sha512-Q6jDDzR23ViIb67v+vM1Dqntu+HUexQcsWKhhQa4ARVzxOY2HbC7QRW/ggkDBd5BU+uM1sV6XOAP0b216o34JQ==",
+      "version": "3.3.6",
+      "resolved": "https://registry.npmmirror.com/@vue/server-renderer/-/server-renderer-3.3.6.tgz",
+      "integrity": "sha512-kgLoN43W4ERdZ6dpyy+gnk2ZHtcOaIr5Uc/WUP5DRwutgvluzu2pudsZGoD2b7AEJHByUVMa9k6Sho5lLRCykw==",
       "requires": {
-        "@vue/compiler-ssr": "3.3.4",
-        "@vue/shared": "3.3.4"
+        "@vue/compiler-ssr": "3.3.6",
+        "@vue/shared": "3.3.6"
       }
     },
     "@vue/shared": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.3.4.tgz",
-      "integrity": "sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ=="
+      "version": "3.3.6",
+      "resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.3.6.tgz",
+      "integrity": "sha512-Xno5pEqg8SVhomD0kTSmfh30ZEmV/+jZtyh39q6QflrjdJCXah5lrnOLi9KB6a5k5aAHXMXjoMnxlzUkCNfWLQ=="
     },
     "acorn": {
       "version": "8.10.0",
@@ -2757,9 +2778,9 @@
       "dev": true
     },
     "magic-string": {
-      "version": "0.30.3",
-      "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.3.tgz",
-      "integrity": "sha512-B7xGbll2fG/VjP+SWg4sX3JynwIU0mjoTc6MPpKNuIvftk6u6vqhDnk1R80b8C2GBR6ywqy+1DcKBrevBg+bmw==",
+      "version": "0.30.5",
+      "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.5.tgz",
+      "integrity": "sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==",
       "requires": {
         "@jridgewell/sourcemap-codec": "^1.4.15"
       }
@@ -2954,9 +2975,9 @@
       }
     },
     "postcss": {
-      "version": "8.4.29",
-      "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.29.tgz",
-      "integrity": "sha512-cbI+jaqIeu/VGqXEarWkRCCffhjgXc0qjBtXpqJhTBohMUjUQnbBr0xqX3vEKudc4iviTewcJo5ajcec5+wdJw==",
+      "version": "8.4.31",
+      "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
       "requires": {
         "nanoid": "^3.3.6",
         "picocolors": "^1.0.0",
@@ -3025,9 +3046,9 @@
       }
     },
     "sass": {
-      "version": "1.69.3",
-      "resolved": "https://registry.npmmirror.com/sass/-/sass-1.69.3.tgz",
-      "integrity": "sha512-X99+a2iGdXkdWn1akFPs0ZmelUzyAQfvqYc2P/MPTrJRuIRoTffGzT9W9nFqG00S+c8hXzVmgxhUuHFdrwxkhQ==",
+      "version": "1.69.4",
+      "resolved": "https://registry.npmmirror.com/sass/-/sass-1.69.4.tgz",
+      "integrity": "sha512-+qEreVhqAy8o++aQfCJwp0sklr2xyEzkm9Pp/Igu9wNPoe7EZEQ8X/MBvvXggI2ql607cxKg/RKOwDj6pp2XDA==",
       "requires": {
         "chokidar": ">=3.0.0 <4.0.0",
         "immutable": "^4.0.0",
@@ -3133,12 +3154,12 @@
       }
     },
     "unplugin": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmmirror.com/unplugin/-/unplugin-1.4.0.tgz",
-      "integrity": "sha512-5x4eIEL6WgbzqGtF9UV8VEC/ehKptPXDS6L2b0mv4FRMkJxRtjaJfOWDd6a8+kYbqsjklix7yWP0N3SUepjXcg==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmmirror.com/unplugin/-/unplugin-1.5.0.tgz",
+      "integrity": "sha512-9ZdRwbh/4gcm1JTOkp9lAkIDrtOyOxgHmY7cjuwI8L/2RTikMcVG25GsZwNAgRuap3iDw2jeq7eoqtAsz5rW3A==",
       "dev": true,
       "requires": {
-        "acorn": "^8.9.0",
+        "acorn": "^8.10.0",
         "chokidar": "^3.5.3",
         "webpack-sources": "^3.2.3",
         "webpack-virtual-modules": "^0.5.0"
@@ -3161,18 +3182,30 @@
       }
     },
     "unplugin-icons": {
-      "version": "0.17.0",
-      "resolved": "https://registry.npmmirror.com/unplugin-icons/-/unplugin-icons-0.17.0.tgz",
-      "integrity": "sha512-gMv66eY/Hj64heM55XrfDH3LUCWI51mtkBVUPVl9VkpvLgAYhdVe9nRuzu6p+idmCLSQVq7xiPxQcD4aXCgW5A==",
+      "version": "0.17.1",
+      "resolved": "https://registry.npmmirror.com/unplugin-icons/-/unplugin-icons-0.17.1.tgz",
+      "integrity": "sha512-KsWejBPCHokYCNDQUzGu6R3E3XDYH/YpewgQwrVBXgpl1iR0RdW1NEGNdjlbuapwVnZXVgA5eiDTfNaQCawSdg==",
       "dev": true,
       "requires": {
         "@antfu/install-pkg": "^0.1.1",
         "@antfu/utils": "^0.7.6",
-        "@iconify/utils": "^2.1.9",
+        "@iconify/utils": "^2.1.11",
         "debug": "^4.3.4",
         "kolorist": "^1.8.0",
-        "local-pkg": "^0.4.3",
-        "unplugin": "^1.4.0"
+        "local-pkg": "^0.5.0",
+        "unplugin": "^1.5.0"
+      },
+      "dependencies": {
+        "local-pkg": {
+          "version": "0.5.0",
+          "resolved": "https://registry.npmmirror.com/local-pkg/-/local-pkg-0.5.0.tgz",
+          "integrity": "sha512-ok6z3qlYyCDS4ZEU27HaU6x/xZa9Whf8jD4ptH5UZTQYZVYeb9bnZ3ojVhiJNLiXK1Hfc0GNbLXcmZ5plLDDBg==",
+          "dev": true,
+          "requires": {
+            "mlly": "^1.4.2",
+            "pkg-types": "^1.0.3"
+          }
+        }
       }
     },
     "unplugin-vue-components": {
@@ -3203,9 +3236,9 @@
       }
     },
     "vite": {
-      "version": "4.4.11",
-      "resolved": "https://registry.npmmirror.com/vite/-/vite-4.4.11.tgz",
-      "integrity": "sha512-ksNZJlkcU9b0lBwAGZGGaZHCMqHsc8OpgtoYhsQ4/I2v5cnpmmmqe5pM4nv/4Hn6G/2GhTdj0DhZh2e+Er1q5A==",
+      "version": "4.5.0",
+      "resolved": "https://registry.npmmirror.com/vite/-/vite-4.5.0.tgz",
+      "integrity": "sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==",
       "dev": true,
       "requires": {
         "esbuild": "^0.18.10",
@@ -3224,15 +3257,15 @@
       }
     },
     "vue": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmmirror.com/vue/-/vue-3.3.4.tgz",
-      "integrity": "sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw==",
+      "version": "3.3.6",
+      "resolved": "https://registry.npmmirror.com/vue/-/vue-3.3.6.tgz",
+      "integrity": "sha512-jJIDETeWJnoY+gfn4ZtMPMS5KtbP4ax+CT4dcQFhTnWEk8xMupFyQ0JxL28nvT/M4+p4a0ptxaV2WY0LiIxvRg==",
       "requires": {
-        "@vue/compiler-dom": "3.3.4",
-        "@vue/compiler-sfc": "3.3.4",
-        "@vue/runtime-dom": "3.3.4",
-        "@vue/server-renderer": "3.3.4",
-        "@vue/shared": "3.3.4"
+        "@vue/compiler-dom": "3.3.6",
+        "@vue/compiler-sfc": "3.3.6",
+        "@vue/runtime-dom": "3.3.6",
+        "@vue/server-renderer": "3.3.6",
+        "@vue/shared": "3.3.6"
       }
     },
     "vue-i18n": {
diff --git a/frontend/package.json b/frontend/package.json
index fb27951..3d342fb 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -13,8 +13,8 @@
     "highlight.js": "^11.9.0",
     "lodash": "^4.17.21",
     "pinia": "^2.1.7",
-    "sass": "^1.69.3",
-    "vue": "^3.3.4",
+    "sass": "^1.69.4",
+    "vue": "^3.3.6",
     "vue-i18n": "^9.5.0"
   },
   "devDependencies": {
@@ -22,8 +22,8 @@
     "naive-ui": "^2.35.0",
     "prettier": "^3.0.3",
     "unplugin-auto-import": "^0.16.6",
-    "unplugin-icons": "^0.17.0",
+    "unplugin-icons": "^0.17.1",
     "unplugin-vue-components": "^0.25.2",
-    "vite": "^4.4.11"
+    "vite": "^4.5.0"
   }
 }
diff --git a/frontend/package.json.md5 b/frontend/package.json.md5
index d3b6410..b7088d3 100755
--- a/frontend/package.json.md5
+++ b/frontend/package.json.md5
@@ -1 +1 @@
-3b7cabd69c1c3dad11dea0682b3c6bef
\ No newline at end of file
+bc30c6eabdfdaebcae482c47907c6546
\ No newline at end of file
diff --git a/frontend/src/AppContent.vue b/frontend/src/AppContent.vue
index aaac1ac..8089343 100644
--- a/frontend/src/AppContent.vue
+++ b/frontend/src/AppContent.vue
@@ -128,21 +128,21 @@ onMounted(async () => {
     <!-- app content-->
     <n-spin
         :show="props.loading"
-        :theme-overrides="{ opacitySpinning: 0 }"
-        :style="{ backgroundColor: themeVars.bodyColor, borderRadius: `${borderRadius}px`, border }">
+        :style="{ backgroundColor: themeVars.bodyColor, borderRadius: `${borderRadius}px`, border }"
+        :theme-overrides="{ opacitySpinning: 0 }">
         <div
             id="app-content-wrapper"
-            class="flex-box-v"
             :style="{
                 backgroundColor: themeVars.bodyColor,
                 color: themeVars.textColorBase,
-            }">
+            }"
+            class="flex-box-v">
             <!-- title bar -->
             <div
                 id="app-toolbar"
+                :style="{ height: data.toolbarHeight + 'px' }"
                 class="flex-box-h"
                 style="--wails-draggable: drag"
-                :style="{ height: data.toolbarHeight + 'px' }"
                 @dblclick="WindowToggleMaximise">
                 <!-- title -->
                 <div
@@ -151,11 +151,11 @@ onMounted(async () => {
                         width: `${data.navMenuWidth + prefStore.behavior.asideWidth - 4}px`,
                         paddingLeft: `${logoPaddingLeft}px`,
                     }">
-                    <n-space align="center" :wrap-item="false" :wrap="false" :size="3">
-                        <n-avatar :src="iconUrl" color="#0000" :size="35" style="min-width: 35px" />
+                    <n-space :size="3" :wrap="false" :wrap-item="false" align="center">
+                        <n-avatar :size="35" :src="iconUrl" color="#0000" style="min-width: 35px" />
                         <div style="min-width: 68px; font-weight: 800">Tiny RDM</div>
                         <transition name="fade">
-                            <n-text v-if="tabStore.nav === 'browser'" strong class="ellipsis" style="font-size: 13px">
+                            <n-text v-if="tabStore.nav === 'browser'" class="ellipsis" strong style="font-size: 13px">
                                 - {{ get(tabStore.currentTab, 'name') }}
                             </n-text>
                         </transition>
@@ -178,8 +178,8 @@ onMounted(async () => {
                 <!-- simulate window control buttons -->
                 <toolbar-control-widget
                     v-if="!isMacOS()"
-                    :size="data.toolbarHeight"
                     :maximised="maximised"
+                    :size="data.toolbarHeight"
                     style="align-self: flex-start" />
             </div>
 
@@ -187,8 +187,8 @@ onMounted(async () => {
             <div
                 id="app-content"
                 :style="prefStore.generalFont"
-                style="--wails-draggable: none"
-                class="flex-box-h flex-item-expand">
+                class="flex-box-h flex-item-expand"
+                style="--wails-draggable: none">
                 <nav-menu v-model:value="tabStore.nav" :width="data.navMenuWidth" />
                 <!-- browser page -->
                 <div v-show="tabStore.nav === 'browser'" :class="{ dragging }" class="flex-box-h flex-item-expand">
diff --git a/frontend/src/components/common/ToolbarControlWidget.vue b/frontend/src/components/common/ToolbarControlWidget.vue
index 2f81b10..a299d5f 100644
--- a/frontend/src/components/common/ToolbarControlWidget.vue
+++ b/frontend/src/components/common/ToolbarControlWidget.vue
@@ -36,8 +36,8 @@ const handleClose = () => {
 </script>
 
 <template>
-    <n-space :wrap-item="false" align="center" justify="center" :size="0">
-        <n-tooltip :show-arrow="false" :delay="1000">
+    <n-space :size="0" :wrap-item="false" align="center" justify="center">
+        <n-tooltip :delay="1000" :show-arrow="false">
             {{ $t('menu.minimise') }}
             <template #trigger>
                 <div class="btn-wrapper" @click="handleMinimise">
@@ -45,7 +45,7 @@ const handleClose = () => {
                 </div>
             </template>
         </n-tooltip>
-        <n-tooltip :show-arrow="false" :delay="1000" v-if="maximised">
+        <n-tooltip v-if="maximised" :delay="1000" :show-arrow="false">
             {{ $t('menu.restore') }}
             <template #trigger>
                 <div class="btn-wrapper" @click="handleMaximise">
@@ -53,7 +53,7 @@ const handleClose = () => {
                 </div>
             </template>
         </n-tooltip>
-        <n-tooltip :show-arrow="false" :delay="1000" v-else>
+        <n-tooltip v-else :delay="1000" :show-arrow="false">
             {{ $t('menu.maximise') }}
             <template #trigger>
                 <div class="btn-wrapper" @click="handleMaximise">
@@ -61,7 +61,7 @@ const handleClose = () => {
                 </div>
             </template>
         </n-tooltip>
-        <n-tooltip :show-arrow="false" :delay="1000">
+        <n-tooltip :delay="1000" :show-arrow="false">
             {{ $t('menu.close') }}
             <template #trigger>
                 <div class="btn-wrapper" @click="handleClose">
@@ -72,7 +72,7 @@ const handleClose = () => {
     </n-space>
 </template>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
 .btn-wrapper {
     width: v-bind('buttonSize');
     height: v-bind('buttonSize');
diff --git a/frontend/src/components/content/ContentLogPane.vue b/frontend/src/components/content/ContentLogPane.vue
index b62e270..a7bce08 100644
--- a/frontend/src/components/content/ContentLogPane.vue
+++ b/frontend/src/components/content/ContentLogPane.vue
@@ -69,8 +69,8 @@ defineExpose({
 
 <template>
     <n-card
-        :title="$t('log.launch_log')"
         :bordered="false"
+        :title="$t('log.launch_log')"
         class="content-container flex-box-v"
         content-style="display: flex;flex-direction: column; overflow: hidden;">
         <n-form :disabled="data.loading" class="flex-item" inline>
diff --git a/frontend/src/components/content/ContentPane.vue b/frontend/src/components/content/ContentPane.vue
index 1c743cf..36a01ec 100644
--- a/frontend/src/components/content/ContentPane.vue
+++ b/frontend/src/components/content/ContentPane.vue
@@ -200,9 +200,9 @@ const onReloadKey = async () => {
             <!-- select nothing or select server node, display server status -->
             <content-server-status
                 v-model:auto-refresh="currentServer.autoRefresh"
+                :auto-loading="currentServer.autoLoading"
                 :info="currentServer.info"
                 :loading="currentServer.loading"
-                :auto-loading="currentServer.autoLoading"
                 :server="currentServer.name"
                 @refresh="refreshInfo(currentServer.name, true)" />
         </div>
@@ -217,12 +217,12 @@ const onReloadKey = async () => {
             :is="valueComponents[tabContent.type]"
             v-else
             :db="tabContent.db"
-            :key-path="tabContent.keyPath"
             :key-code="tabContent.keyCode"
+            :key-path="tabContent.keyPath"
             :name="tabContent.name"
+            :size="tabContent.size"
             :ttl="tabContent.ttl"
             :value="tabContent.value"
-            :size="tabContent.size"
             :view-as="tabContent.viewAs" />
     </div>
 </template>
diff --git a/frontend/src/components/content/ContentValueTab.vue b/frontend/src/components/content/ContentValueTab.vue
index ca156c3..38b780c 100644
--- a/frontend/src/components/content/ContentValueTab.vue
+++ b/frontend/src/components/content/ContentValueTab.vue
@@ -58,10 +58,6 @@ const tab = computed(() =>
             borderLeftColor: themeVars.borderColor,
             borderRightColor: themeVars.borderColor,
         }"
-        size="small"
-        type="card"
-        @close="onCloseTab"
-        @update:value="(tabIndex) => tabStore.switchTab(tabIndex)"
         :theme-overrides="{
             tabFontWeightActive: 800,
             tabBorderRadius: 0,
@@ -72,16 +68,20 @@ const tab = computed(() =>
             // tabBorderColor: themeVars.borderColor,
             tabBorderColor: '#0000',
             tabTextColorCard: themeVars.closeIconColor,
-        }">
+        }"
+        size="small"
+        type="card"
+        @close="onCloseTab"
+        @update:value="(tabIndex) => tabStore.switchTab(tabIndex)">
         <n-tab
             v-for="(t, i) in tab"
             :key="i"
-            :name="i"
             :closable="tabStore.activatedIndex === i"
+            :name="i"
             :style="tabStore.activatedIndex === i ? activeTabStyle : inactiveTabStyle"
             style="--wails-draggable: none"
             @dblclick.stop="() => {}">
-            <n-space align="center" justify="center" :wrap-item="false" :size="5" inline>
+            <n-space :size="5" :wrap-item="false" align="center" inline justify="center">
                 <n-icon :component="ToggleServer" size="18" />
                 <n-ellipsis style="max-width: 150px">{{ t.label }}</n-ellipsis>
             </n-space>
@@ -89,4 +89,4 @@ const tab = computed(() =>
     </n-tabs>
 </template>
 
-<style scoped lang="scss"></style>
+<style lang="scss" scoped></style>
diff --git a/frontend/src/components/content_value/ContentServerStatus.vue b/frontend/src/components/content_value/ContentServerStatus.vue
index c2d933d..9df83bc 100644
--- a/frontend/src/components/content_value/ContentServerStatus.vue
+++ b/frontend/src/components/content_value/ContentServerStatus.vue
@@ -104,18 +104,18 @@ const infoFilter = ref('')
                     <n-space align="center" inline>
                         {{ $t('status.auto_refresh') }}
                         <n-switch
-                            :value="props.autoRefresh"
                             :loading="props.autoLoading"
+                            :value="props.autoRefresh"
                             @update:value="(v) => emit('update:autoRefresh', v)" />
                         <n-tooltip>
                             {{ $t('status.refresh') }}
                             <template #trigger>
                                 <n-button
+                                    :loading="props.autoLoading"
                                     circle
                                     size="small"
                                     tertiary
-                                    @click="emit('refresh')"
-                                    :loading="props.autoLoading">
+                                    @click="emit('refresh')">
                                     <template #icon>
                                         <n-icon :component="Refresh" />
                                     </template>
diff --git a/frontend/src/components/content_value/ContentToolbar.vue b/frontend/src/components/content_value/ContentToolbar.vue
index 5617ccf..4d3eae7 100644
--- a/frontend/src/components/content_value/ContentToolbar.vue
+++ b/frontend/src/components/content_value/ContentToolbar.vue
@@ -106,7 +106,7 @@ const onDeleteKey = () => {
 <template>
     <div class="content-toolbar flex-box-h">
         <n-input-group>
-            <redis-type-tag :type="props.keyType" :binary-key="binaryKey" size="large" />
+            <redis-type-tag :binary-key="binaryKey" :type="props.keyType" size="large" />
             <n-input v-model:value="props.keyPath">
                 <template #suffix>
                     <icon-button :icon="Refresh" size="18" t-tooltip="interface.reload" @click="onReloadKey" />
diff --git a/frontend/src/components/content_value/ContentValueHash.vue b/frontend/src/components/content_value/ContentValueHash.vue
index bc8b3da..dbf1f53 100644
--- a/frontend/src/components/content_value/ContentValueHash.vue
+++ b/frontend/src/components/content_value/ContentValueHash.vue
@@ -255,8 +255,8 @@ const onUpdateFilter = (filters, sourceColumn) => {
     <div class="content-wrapper flex-box-v">
         <content-toolbar
             :db="props.db"
-            :key-path="props.keyPath"
             :key-code="props.keyCode"
+            :key-path="props.keyPath"
             :key-type="keyType"
             :server="props.name"
             :ttl="ttl" />
@@ -280,7 +280,7 @@ const onUpdateFilter = (filters, sourceColumn) => {
             <div class="tb2-extra-info flex-item-expand">
                 <n-tag size="large">{{ $t('interface.total', { size: props.size }) }}</n-tag>
             </div>
-            <n-button plain :focusable="false" @click="onAddRow">
+            <n-button :focusable="false" plain @click="onAddRow">
                 <template #icon>
                     <n-icon :component="AddLink" size="18" />
                 </template>
@@ -290,12 +290,12 @@ const onUpdateFilter = (filters, sourceColumn) => {
         <div class="value-wrapper fill-height flex-box-h">
             <n-data-table
                 :key="(row) => row.no"
+                :bordered="false"
+                :bottom-bordered="false"
                 :columns="columns"
                 :data="tableData"
                 :single-column="true"
                 :single-line="false"
-                :bordered="false"
-                :bottom-bordered="false"
                 flex-height
                 max-height="100%"
                 size="small"
diff --git a/frontend/src/components/content_value/ContentValueList.vue b/frontend/src/components/content_value/ContentValueList.vue
index a0f1752..23251ad 100644
--- a/frontend/src/components/content_value/ContentValueList.vue
+++ b/frontend/src/components/content_value/ContentValueList.vue
@@ -187,8 +187,8 @@ const onUpdateFilter = (filters, sourceColumn) => {
     <div class="content-wrapper flex-box-v">
         <content-toolbar
             :db="props.db"
-            :key-path="props.keyPath"
             :key-code="props.keyCode"
+            :key-path="props.keyPath"
             :key-type="keyType"
             :server="props.name"
             :ttl="ttl" />
@@ -204,7 +204,7 @@ const onUpdateFilter = (filters, sourceColumn) => {
             <div class="tb2-extra-info flex-item-expand">
                 <n-tag size="large">{{ $t('interface.total', { size: props.size }) }}</n-tag>
             </div>
-            <n-button plain :focusable="false" @click="onAddValue">
+            <n-button :focusable="false" plain @click="onAddValue">
                 <template #icon>
                     <n-icon :component="AddLink" size="18" />
                 </template>
@@ -214,12 +214,12 @@ const onUpdateFilter = (filters, sourceColumn) => {
         <div class="value-wrapper fill-height flex-box-h">
             <n-data-table
                 :key="(row) => row.no"
+                :bordered="false"
+                :bottom-bordered="false"
                 :columns="columns"
                 :data="tableData"
                 :single-column="true"
                 :single-line="false"
-                :bordered="false"
-                :bottom-bordered="false"
                 flex-height
                 max-height="100%"
                 size="small"
diff --git a/frontend/src/components/content_value/ContentValueSet.vue b/frontend/src/components/content_value/ContentValueSet.vue
index 83d45db..35c973a 100644
--- a/frontend/src/components/content_value/ContentValueSet.vue
+++ b/frontend/src/components/content_value/ContentValueSet.vue
@@ -182,8 +182,8 @@ const onUpdateFilter = (filters, sourceColumn) => {
     <div class="content-wrapper flex-box-v">
         <content-toolbar
             :db="props.db"
-            :key-path="props.keyPath"
             :key-code="props.keyCode"
+            :key-path="props.keyPath"
             :key-type="keyType"
             :server="props.name"
             :ttl="ttl" />
@@ -199,7 +199,7 @@ const onUpdateFilter = (filters, sourceColumn) => {
             <div class="tb2-extra-info flex-item-expand">
                 <n-tag size="large">{{ $t('interface.total', { size: props.size }) }}</n-tag>
             </div>
-            <n-button plain :focusable="false" @click="onAddValue">
+            <n-button :focusable="false" plain @click="onAddValue">
                 <template #icon>
                     <n-icon :component="AddLink" size="18" />
                 </template>
@@ -209,12 +209,12 @@ const onUpdateFilter = (filters, sourceColumn) => {
         <div class="value-wrapper fill-height flex-box-h">
             <n-data-table
                 :key="(row) => row.no"
+                :bordered="false"
+                :bottom-bordered="false"
                 :columns="columns"
                 :data="tableData"
                 :single-column="true"
                 :single-line="false"
-                :bordered="false"
-                :bottom-bordered="false"
                 flex-height
                 max-height="100%"
                 size="small"
diff --git a/frontend/src/components/content_value/ContentValueStream.vue b/frontend/src/components/content_value/ContentValueStream.vue
index e4a3303..66baa22 100644
--- a/frontend/src/components/content_value/ContentValueStream.vue
+++ b/frontend/src/components/content_value/ContentValueStream.vue
@@ -167,8 +167,8 @@ const onUpdateFilter = (filters, sourceColumn) => {
     <div class="content-wrapper flex-box-v">
         <content-toolbar
             :db="props.db"
-            :key-path="props.keyPath"
             :key-code="props.keyCode"
+            :key-path="props.keyPath"
             :key-type="keyType"
             :server="props.name"
             :ttl="ttl" />
@@ -192,7 +192,7 @@ const onUpdateFilter = (filters, sourceColumn) => {
             <div class="tb2-extra-info flex-item-expand">
                 <n-tag size="large">{{ $t('interface.total', { size: props.size }) }}</n-tag>
             </div>
-            <n-button plain :focusable="false" @click="onAddRow">
+            <n-button :focusable="false" plain @click="onAddRow">
                 <template #icon>
                     <n-icon :component="AddLink" size="18" />
                 </template>
@@ -202,12 +202,12 @@ const onUpdateFilter = (filters, sourceColumn) => {
         <div class="value-wrapper fill-height flex-box-h">
             <n-data-table
                 :key="(row) => row.id"
+                :bordered="false"
+                :bottom-bordered="false"
                 :columns="columns"
                 :data="tableData"
                 :single-column="true"
                 :single-line="false"
-                :bordered="false"
-                :bottom-bordered="false"
                 flex-height
                 max-height="100%"
                 size="small"
diff --git a/frontend/src/components/content_value/ContentValueString.vue b/frontend/src/components/content_value/ContentValueString.vue
index 7451ceb..d4e28ff 100644
--- a/frontend/src/components/content_value/ContentValueString.vue
+++ b/frontend/src/components/content_value/ContentValueString.vue
@@ -153,18 +153,18 @@ const onSaveValue = async () => {
     <div class="content-wrapper flex-box-v">
         <content-toolbar
             :db="props.db"
-            :key-path="keyPath"
             :key-code="keyCode"
+            :key-path="keyPath"
             :key-type="keyType"
             :server="props.name"
             :ttl="ttl" />
         <div class="tb2 flex-box-h">
             <n-text>{{ $t('interface.view_as') }}</n-text>
             <n-select
-                :value="props.viewAs"
                 :options="viewOption"
-                style="width: 160px"
+                :value="props.viewAs"
                 filterable
+                style="width: 160px"
                 @update:value="onViewTypeUpdate" />
             <div class="flex-item-expand"></div>
             <n-button-group v-if="!inEdit">
@@ -174,7 +174,7 @@ const onSaveValue = async () => {
                     </template>
                     {{ $t('interface.copy_value') }}
                 </n-button>
-                <n-button plain :focusable="false" @click="onEditValue">
+                <n-button :focusable="false" plain @click="onEditValue">
                     <template #icon>
                         <n-icon :component="Edit" size="18" />
                     </template>
@@ -182,13 +182,13 @@ const onSaveValue = async () => {
                 </n-button>
             </n-button-group>
             <n-button-group v-else>
-                <n-button :loading="saving" :focusable="false" plain @click="onSaveValue">
+                <n-button :focusable="false" :loading="saving" plain @click="onSaveValue">
                     <template #icon>
                         <n-icon :component="Save" size="18" />
                     </template>
                     {{ $t('interface.save_update') }}
                 </n-button>
-                <n-button :loading="saving" :focusable="false" plain @click="onCancelEdit">
+                <n-button :focusable="false" :loading="saving" plain @click="onCancelEdit">
                     <template #icon>
                         <n-icon :component="Close" size="18" />
                     </template>
diff --git a/frontend/src/components/content_value/ContentValueZSet.vue b/frontend/src/components/content_value/ContentValueZSet.vue
index c699baf..1a8abe0 100644
--- a/frontend/src/components/content_value/ContentValueZSet.vue
+++ b/frontend/src/components/content_value/ContentValueZSet.vue
@@ -280,8 +280,8 @@ const onUpdateFilter = (filters, sourceColumn) => {
     <div class="content-wrapper flex-box-v">
         <content-toolbar
             :db="props.db"
-            :key-path="props.keyPath"
             :key-code="props.keyCode"
+            :key-path="props.keyPath"
             :key-type="keyType"
             :server="props.name"
             :ttl="ttl" />
@@ -310,7 +310,7 @@ const onUpdateFilter = (filters, sourceColumn) => {
             <div class="tb2-extra-info flex-item-expand">
                 <n-tag size="large">{{ $t('interface.total', { size: props.size }) }}</n-tag>
             </div>
-            <n-button plain :focusable="false" @click="onAddRow">
+            <n-button :focusable="false" plain @click="onAddRow">
                 <template #icon>
                     <n-icon :component="AddLink" size="18" />
                 </template>
@@ -320,12 +320,12 @@ const onUpdateFilter = (filters, sourceColumn) => {
         <div class="value-wrapper fill-height flex-box-h">
             <n-data-table
                 :key="(row) => row.no"
+                :bordered="false"
+                :bottom-bordered="false"
                 :columns="columns"
                 :data="tableData"
                 :single-column="true"
                 :single-line="false"
-                :bordered="false"
-                :bottom-bordered="false"
                 flex-height
                 max-height="100%"
                 size="small"
diff --git a/frontend/src/components/dialogs/AboutDialog.vue b/frontend/src/components/dialogs/AboutDialog.vue
index f6572be..5d5c720 100644
--- a/frontend/src/components/dialogs/AboutDialog.vue
+++ b/frontend/src/components/dialogs/AboutDialog.vue
@@ -4,7 +4,7 @@ import useDialog from 'stores/dialog.js'
 import { useThemeVars } from 'naive-ui'
 import { BrowserOpenURL } from 'wailsjs/runtime/runtime.js'
 import { GetAppVersion } from 'wailsjs/go/services/preferencesService.js'
-import { ref, onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 
 const themeVars = useThemeVars()
 const dialogStore = useDialog()
@@ -27,23 +27,23 @@ const onOpenWebsite = () => {
 
 <template>
     <n-modal v-model:show="dialogStore.aboutDialogVisible" :show-icon="false" preset="dialog" transform-origin="center">
-        <n-space vertical align="center" :wrap-item="false" :wrap="false" :size="10">
-            <n-avatar :size="120" color="#0000" :src="iconUrl"></n-avatar>
+        <n-space :size="10" :wrap="false" :wrap-item="false" align="center" vertical>
+            <n-avatar :size="120" :src="iconUrl" color="#0000"></n-avatar>
             <div class="about-app-title">Tiny RDM</div>
             <n-text>{{ version }}</n-text>
-            <n-space align="center" :wrap-item="false" :wrap="false" :size="5">
+            <n-space :size="5" :wrap="false" :wrap-item="false" align="center">
                 <n-text class="about-link" @click="onOpenSource">{{ $t('dialogue.about.source') }}</n-text>
                 <n-divider vertical />
                 <n-text class="about-link" @click="onOpenWebsite">{{ $t('dialogue.about.website') }}</n-text>
             </n-space>
-            <div class="about-copyright" :style="{ color: themeVars.textColor3 }">
+            <div :style="{ color: themeVars.textColor3 }" class="about-copyright">
                 Copyright © 2023 Tinycraft.cc All rights reserved
             </div>
         </n-space>
     </n-modal>
 </template>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
 .about-app-title {
     font-weight: bold;
     font-size: 18px;
diff --git a/frontend/src/components/dialogs/ConnectionDialog.vue b/frontend/src/components/dialogs/ConnectionDialog.vue
index cf33be0..9f53685 100644
--- a/frontend/src/components/dialogs/ConnectionDialog.vue
+++ b/frontend/src/components/dialogs/ConnectionDialog.vue
@@ -335,24 +335,24 @@ const onClose = () => {
                         label-placement="top">
                         <n-grid :x-gap="10">
                             <n-form-item-gi
-                                :span="12"
                                 :label="$t('dialogue.connection.advn.filter')"
+                                :span="12"
                                 path="defaultFilter">
                                 <n-input
                                     v-model:value="generalForm.defaultFilter"
                                     :placeholder="$t('dialogue.connection.advn.filter_tip')" />
                             </n-form-item-gi>
                             <n-form-item-gi
-                                :span="12"
                                 :label="$t('dialogue.connection.advn.separator')"
+                                :span="12"
                                 path="keySeparator">
                                 <n-input
                                     v-model:value="generalForm.keySeparator"
                                     :placeholder="$t('dialogue.connection.advn.separator_tip')" />
                             </n-form-item-gi>
                             <n-form-item-gi
-                                :span="12"
                                 :label="$t('dialogue.connection.advn.conn_timeout')"
+                                :span="12"
                                 path="connTimeout">
                                 <n-input-number v-model:value="generalForm.connTimeout" :max="999999" :min="1">
                                     <template #suffix>
@@ -361,8 +361,8 @@ const onClose = () => {
                                 </n-input-number>
                             </n-form-item-gi>
                             <n-form-item-gi
-                                :span="12"
                                 :label="$t('dialogue.connection.advn.exec_timeout')"
+                                :span="12"
                                 path="execTimeout">
                                 <n-input-number v-model:value="generalForm.execTimeout" :max="999999" :min="1">
                                     <template #suffix>
@@ -370,10 +370,10 @@ const onClose = () => {
                                     </template>
                                 </n-input-number>
                             </n-form-item-gi>
-                            <n-form-item-gi :span="12" :label="$t('dialogue.connection.advn.load_size')">
+                            <n-form-item-gi :label="$t('dialogue.connection.advn.load_size')" :span="12">
                                 <n-input-number v-model:value="generalForm.loadSize" :min="0" />
                             </n-form-item-gi>
-                            <n-form-item-gi :span="24" :label="$t('dialogue.connection.advn.dbfilter_type')">
+                            <n-form-item-gi :label="$t('dialogue.connection.advn.dbfilter_type')" :span="24">
                                 <n-radio-group
                                     v-model:value="generalForm.dbFilterType"
                                     @update:value="onUpdateDBFilterType">
@@ -388,22 +388,22 @@ const onClose = () => {
                             </n-form-item-gi>
                             <n-form-item-gi
                                 v-show="generalForm.dbFilterType !== 'none'"
-                                :span="24"
-                                :label="$t('dialogue.connection.advn.dbfilter_input')">
+                                :label="$t('dialogue.connection.advn.dbfilter_input')"
+                                :span="24">
                                 <n-select
                                     v-model:value="dbFilterList"
+                                    :clearable="true"
                                     :disabled="generalForm.dbFilterType === 'none'"
+                                    :placeholder="$t('dialogue.connection.advn.dbfilter_input_tip')"
+                                    :show="false"
+                                    :show-arrow="false"
                                     filterable
                                     multiple
-                                    tag
-                                    :placeholder="$t('dialogue.connection.advn.dbfilter_input_tip')"
-                                    :show-arrow="false"
-                                    :show="false"
-                                    :clearable="true" />
+                                    tag />
                             </n-form-item-gi>
                             <n-form-item-gi
-                                :span="24"
                                 :label="$t('dialogue.connection.advn.mark_color')"
+                                :span="24"
                                 path="markColor">
                                 <div
                                     v-for="color in predefineColors"
@@ -429,9 +429,9 @@ const onClose = () => {
                         </n-checkbox>
                     </n-form-item>
                     <n-form
+                        :disabled="!generalForm.ssl.enable"
                         :model="generalForm.ssl"
                         :show-require-mark="false"
-                        :disabled="!generalForm.ssl.enable"
                         label-placement="top">
                         <n-form-item :label="$t('dialogue.connection.ssl.cert_file')">
                             <n-input-group>
@@ -440,8 +440,8 @@ const onClose = () => {
                                     :placeholder="$t('dialogue.connection.ssl.cert_file_tip')"
                                     clearable />
                                 <n-button
-                                    :focusable="false"
                                     :disabled="!generalForm.ssl.enable"
+                                    :focusable="false"
                                     @click="onSSLChooseCert">
                                     ...
                                 </n-button>
@@ -454,8 +454,8 @@ const onClose = () => {
                                     :placeholder="$t('dialogue.connection.ssl.key_file_tip')"
                                     clearable />
                                 <n-button
-                                    :focusable="false"
                                     :disabled="!generalForm.ssl.enable"
+                                    :focusable="false"
                                     @click="onSSLChooseKey">
                                     ...
                                 </n-button>
@@ -467,7 +467,7 @@ const onClose = () => {
                                     v-model:value="generalForm.ssl.caFile"
                                     :placeholder="$t('dialogue.connection.ssl.ca_file_tip')"
                                     clearable />
-                                <n-button :focusable="false" :disabled="!generalForm.ssl.enable" @click="onSSLChooseCA">
+                                <n-button :disabled="!generalForm.ssl.enable" :focusable="false" @click="onSSLChooseCA">
                                     ...
                                 </n-button>
                             </n-input-group>
@@ -483,9 +483,9 @@ const onClose = () => {
                         </n-checkbox>
                     </n-form-item>
                     <n-form
+                        :disabled="!generalForm.ssh.enable"
                         :model="generalForm.ssh"
                         :show-require-mark="false"
-                        :disabled="!generalForm.ssh.enable"
                         label-placement="top">
                         <n-form-item :label="$t('dialogue.connection.addr')" required>
                             <n-input
@@ -524,10 +524,10 @@ const onClose = () => {
                                     v-model:value="generalForm.ssh.pkFile"
                                     :placeholder="$t('dialogue.connection.ssh.pkfile_tip')" />
                                 <n-button
-                                    :focusable="false"
                                     :disabled="!generalForm.ssh.enable"
-                                    @click="onSSHChooseKey"
-                                    clearable>
+                                    :focusable="false"
+                                    clearable
+                                    @click="onSSHChooseKey">
                                     ...
                                 </n-button>
                             </n-input-group>
@@ -550,17 +550,17 @@ const onClose = () => {
                         </n-checkbox>
                     </n-form-item>
                     <n-form
+                        :disabled="!generalForm.sentinel.enable"
                         :model="generalForm.sentinel"
                         :show-require-mark="false"
-                        :disabled="!generalForm.sentinel.enable"
                         label-placement="top">
                         <n-form-item :label="$t('dialogue.connection.sentinel.master')">
                             <n-input-group>
                                 <n-select
                                     v-model:value="generalForm.sentinel.master"
+                                    :options="masterNameOptions"
                                     filterable
-                                    tag
-                                    :options="masterNameOptions" />
+                                    tag />
                                 <n-button :loading="loadingSentinelMaster" @click="onLoadSentinelMasters">
                                     {{ $t('dialogue.connection.sentinel.auto_discover') }}
                                 </n-button>
@@ -600,10 +600,10 @@ const onClose = () => {
             <!-- test result alert-->
             <n-alert
                 v-if="showTestResult"
+                :on-close="() => (showTestResult = false)"
                 :title="isEmpty(testResult) ? '' : $t('dialogue.connection.test_fail')"
                 :type="isEmpty(testResult) ? 'success' : 'error'"
-                closable
-                :on-close="() => (showTestResult = false)">
+                closable>
                 <template v-if="isEmpty(testResult)">{{ $t('dialogue.connection.test_succ') }}</template>
                 <template v-else>{{ testResult }}</template>
             </n-alert>
@@ -611,15 +611,15 @@ const onClose = () => {
 
         <template #action>
             <div class="flex-item-expand">
-                <n-button :focusable="false" :disabled="closingConnection" :loading="testing" @click="onTestConnection">
+                <n-button :disabled="closingConnection" :focusable="false" :loading="testing" @click="onTestConnection">
                     {{ $t('dialogue.connection.test') }}
                 </n-button>
             </div>
             <div class="flex-item n-dialog__action">
-                <n-button :focusable="false" :disabled="closingConnection" @click="onClose">
+                <n-button :disabled="closingConnection" :focusable="false" @click="onClose">
                     {{ $t('common.cancel') }}
                 </n-button>
-                <n-button :focusable="false" :disabled="closingConnection" type="primary" @click="onSaveConnection">
+                <n-button :disabled="closingConnection" :focusable="false" type="primary" @click="onSaveConnection">
                     {{ isEditMode ? $t('preferences.general.update') : $t('common.confirm') }}
                 </n-button>
             </div>
diff --git a/frontend/src/components/dialogs/DeleteKeyDialog.vue b/frontend/src/components/dialogs/DeleteKeyDialog.vue
index c445ed4..9576876 100644
--- a/frontend/src/components/dialogs/DeleteKeyDialog.vue
+++ b/frontend/src/components/dialogs/DeleteKeyDialog.vue
@@ -105,13 +105,13 @@ const onClose = () => {
         <template #action>
             <div class="flex-item n-dialog__action">
                 <n-button :focusable="false" @click="onClose">{{ $t('common.cancel') }}</n-button>
-                <n-button v-if="!deleteForm.showAffected" type="primary" :focusable="false" @click="scanAffectedKey">
+                <n-button v-if="!deleteForm.showAffected" :focusable="false" type="primary" @click="scanAffectedKey">
                     {{ $t('dialogue.key.show_affected_key') }}
                 </n-button>
                 <n-button
                     v-else
-                    :focusable="false"
                     :disabled="isEmpty(deleteForm.affectedKeys)"
+                    :focusable="false"
                     type="error"
                     @click="onConfirmDelete">
                     {{ $t('dialogue.key.confirm_delete_key', { num: size(deleteForm.affectedKeys) }) }}
diff --git a/frontend/src/components/dialogs/KeyFilterDialog.vue b/frontend/src/components/dialogs/KeyFilterDialog.vue
index f5ab1bb..4aa8745 100644
--- a/frontend/src/components/dialogs/KeyFilterDialog.vue
+++ b/frontend/src/components/dialogs/KeyFilterDialog.vue
@@ -89,12 +89,12 @@ const onClose = () => {
                         <template #trigger>
                             <n-input
                                 v-model:value="filterForm.pattern"
-                                clearable
-                                :placeholder="$t('dialogue.filter.filter_pattern')" />
+                                :placeholder="$t('dialogue.filter.filter_pattern')"
+                                clearable />
                         </template>
                         <div class="text-block">{{ $t('dialogue.filter.filter_pattern_tip') }}</div>
                     </n-tooltip>
-                    <n-button secondary type="primary" :focusable="false" @click="filterForm.pattern = '*'">
+                    <n-button :focusable="false" secondary type="primary" @click="filterForm.pattern = '*'">
                         {{ $t('preferences.restore_defaults') }}
                     </n-button>
                 </n-input-group>
diff --git a/frontend/src/components/dialogs/NewKeyDialog.vue b/frontend/src/components/dialogs/NewKeyDialog.vue
index ad77a3e..f68560c 100644
--- a/frontend/src/components/dialogs/NewKeyDialog.vue
+++ b/frontend/src/components/dialogs/NewKeyDialog.vue
@@ -187,7 +187,7 @@ const onClose = () => {
                                 {{ $t('common.second') }}
                             </template>
                         </n-input-number>
-                        <n-button secondary type="primary" :focusable="false" @click="() => (newForm.ttl = -1)">
+                        <n-button :focusable="false" secondary type="primary" @click="() => (newForm.ttl = -1)">
                             {{ $t('dialogue.key.persist_key') }}
                         </n-button>
                     </n-input-group>
diff --git a/frontend/src/components/dialogs/PreferencesDialog.vue b/frontend/src/components/dialogs/PreferencesDialog.vue
index d4b741c..8ceab69 100644
--- a/frontend/src/components/dialogs/PreferencesDialog.vue
+++ b/frontend/src/components/dialogs/PreferencesDialog.vue
@@ -68,7 +68,7 @@ const onClose = () => {
             <n-tab-pane :tab="$t('preferences.general.name')" display-directive="show" name="general">
                 <n-form :disabled="loading" :model="prefStore.general" :show-require-mark="false" label-placement="top">
                     <n-grid :x-gap="10">
-                        <n-form-item-gi :span="24" :label="$t('preferences.general.theme')" required>
+                        <n-form-item-gi :label="$t('preferences.general.theme')" :span="24" required>
                             <n-radio-group v-model:value="prefStore.general.theme" name="theme" size="medium">
                                 <n-radio-button
                                     v-for="opt in prefStore.themeOption"
@@ -78,25 +78,25 @@ const onClose = () => {
                                 </n-radio-button>
                             </n-radio-group>
                         </n-form-item-gi>
-                        <n-form-item-gi :span="24" :label="$t('preferences.general.language')" required>
+                        <n-form-item-gi :label="$t('preferences.general.language')" :span="24" required>
                             <n-select
                                 v-model:value="prefStore.general.language"
                                 :options="prefStore.langOption"
                                 filterable />
                         </n-form-item-gi>
-                        <n-form-item-gi :span="12" :label="$t('preferences.general.font')" required>
+                        <n-form-item-gi :label="$t('preferences.general.font')" :span="12" required>
                             <n-select
                                 v-model:value="prefStore.general.font"
                                 :options="prefStore.fontOption"
                                 filterable />
                         </n-form-item-gi>
-                        <n-form-item-gi :span="12" :label="$t('preferences.general.font_size')">
+                        <n-form-item-gi :label="$t('preferences.general.font_size')" :span="12">
                             <n-input-number v-model:value="prefStore.general.fontSize" :max="65535" :min="1" />
                         </n-form-item-gi>
-                        <n-form-item-gi :span="12" :label="$t('preferences.general.scan_size')">
+                        <n-form-item-gi :label="$t('preferences.general.scan_size')" :span="12">
                             <n-input-number v-model:value="prefStore.general.scanSize" :min="1" />
                         </n-form-item-gi>
-                        <n-form-item-gi :span="24" :label="$t('preferences.general.proxy')">
+                        <n-form-item-gi :label="$t('preferences.general.proxy')" :span="24">
                             <n-space>
                                 <n-checkbox v-model:checked="prefStore.general.useSysProxy">
                                     {{ $t('preferences.general.use_system_proxy') }}
@@ -106,7 +106,7 @@ const onClose = () => {
                                 </n-checkbox>
                             </n-space>
                         </n-form-item-gi>
-                        <n-form-item-gi :span="24" :label="$t('preferences.general.update')">
+                        <n-form-item-gi :label="$t('preferences.general.update')" :span="24">
                             <n-checkbox v-model:checked="prefStore.general.checkUpdate">
                                 {{ $t('preferences.general.auto_check_update') }}
                             </n-checkbox>
diff --git a/frontend/src/components/dialogs/RenameKeyDialog.vue b/frontend/src/components/dialogs/RenameKeyDialog.vue
index 15b4a78..a03a4d2 100644
--- a/frontend/src/components/dialogs/RenameKeyDialog.vue
+++ b/frontend/src/components/dialogs/RenameKeyDialog.vue
@@ -66,8 +66,8 @@ const onClose = () => {
         @negative-click="onClose">
         <n-form
             :model="renameForm"
-            :show-require-mark="false"
             :show-label="false"
+            :show-require-mark="false"
             label-align="left"
             label-placement="top">
             <n-form-item :label="$t('dialogue.key.new_name')" required>
diff --git a/frontend/src/components/dialogs/SetTtlDialog.vue b/frontend/src/components/dialogs/SetTtlDialog.vue
index 7df1ec0..5c12290 100644
--- a/frontend/src/components/dialogs/SetTtlDialog.vue
+++ b/frontend/src/components/dialogs/SetTtlDialog.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { reactive, ref, watch } from 'vue'
+import { reactive, watch } from 'vue'
 import useDialog from 'stores/dialog'
 import useTabStore from 'stores/tab.js'
 import useConnectionStore from 'stores/connections.js'
@@ -105,7 +105,7 @@ const onConfirm = async () => {
             </div>
             <div class="flex-item n-dialog__action">
                 <n-button :focusable="false" @click="onClose">{{ $t('common.cancel') }}</n-button>
-                <n-button type="primary" :focusable="false" @click="onConfirm">{{ $t('common.save') }}</n-button>
+                <n-button :focusable="false" type="primary" @click="onConfirm">{{ $t('common.save') }}</n-button>
             </div>
         </template>
     </n-modal>
diff --git a/frontend/src/components/icons/Binary.vue b/frontend/src/components/icons/Binary.vue
index 46cb41a..c6b8d31 100644
--- a/frontend/src/components/icons/Binary.vue
+++ b/frontend/src/components/icons/Binary.vue
@@ -2,17 +2,17 @@
 
 <template>
     <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
         fill="none"
+        height="24"
         stroke="currentColor"
-        stroke-width="2"
         stroke-linecap="round"
-        stroke-linejoin="round">
-        <rect x="14" y="14" width="4" height="6" rx="2" />
-        <rect x="6" y="4" width="4" height="6" rx="2" />
+        stroke-linejoin="round"
+        stroke-width="2"
+        viewBox="0 0 24 24"
+        width="24"
+        xmlns="http://www.w3.org/2000/svg">
+        <rect height="6" rx="2" width="4" x="14" y="14" />
+        <rect height="6" rx="2" width="4" x="6" y="4" />
         <path d="M6 20h4" />
         <path d="M14 10h4" />
         <path d="M6 14h2v6" />
diff --git a/frontend/src/components/icons/Key.vue b/frontend/src/components/icons/Key.vue
index 97656f9..9517582 100644
--- a/frontend/src/components/icons/Key.vue
+++ b/frontend/src/components/icons/Key.vue
@@ -9,13 +9,13 @@ const props = defineProps({
 
 <template>
     <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
         fill="none"
         stroke="currentColor"
-        stroke-width="1.4"
         stroke-linecap="round"
-        stroke-linejoin="round">
+        stroke-linejoin="round"
+        stroke-width="1.4"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg">
         <path :fill="props.fillColor" d="M2 18v3c0 .6.4 1 1 1h4v-3h3v-3h2l1.4-1.4a6.5 6.5 0 1 0-4-4Z" />
         <circle cx="16.5" cy="7.5" r="1.5" />
     </svg>
diff --git a/frontend/src/components/icons/Layer.vue b/frontend/src/components/icons/Layer.vue
index dca9c07..9261bb9 100644
--- a/frontend/src/components/icons/Layer.vue
+++ b/frontend/src/components/icons/Layer.vue
@@ -13,16 +13,16 @@ const props = defineProps({
 
 <template>
     <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
         stroke="currentColor"
-        stroke-width="1.5"
         stroke-linecap="round"
-        stroke-linejoin="round">
+        stroke-linejoin="round"
+        stroke-width="1.5"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg">
         <path
-            d="M10 20H4a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2h3.93a2 2 0 0 1 1.66.9l.82 1.2a2 2 0 0 0 1.66.9H20a2 2 0 0 1 2 2v2"
-            :fill="props.fillColor" />
-        <circle cx="16" cy="20" r="2" :fill="props.fillColor" />
+            :fill="props.fillColor"
+            d="M10 20H4a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2h3.93a2 2 0 0 1 1.66.9l.82 1.2a2 2 0 0 0 1.66.9H20a2 2 0 0 1 2 2v2" />
+        <circle :fill="props.fillColor" cx="16" cy="20" r="2" />
         <path d="m22 14-4.5 4.5" />
         <path d="m21 15 1 1" />
     </svg>
diff --git a/frontend/src/components/icons/LoadAll.vue b/frontend/src/components/icons/LoadAll.vue
index eae85ad..81dd160 100644
--- a/frontend/src/components/icons/LoadAll.vue
+++ b/frontend/src/components/icons/LoadAll.vue
@@ -8,17 +8,17 @@ const props = defineProps({
 </script>
 
 <template>
-    <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
         <path
-            fill-rule="evenodd"
+            :stroke-width="props.strokeWidth"
             clip-rule="evenodd"
             d="M23.9999 29.0001L12 17.0001L19.9999 17.0001L19.9999 6.00011L27.9999 6.00011L27.9999 17.0001L35.9999 17.0001L23.9999 29.0001Z"
             fill="none"
+            fill-rule="evenodd"
             stroke="currentColor"
-            :stroke-width="props.strokeWidth"
             stroke-linecap="round"
             stroke-linejoin="round" />
-        <path d="M42 37L6 37" stroke="currentColor" :stroke-width="props.strokeWidth" stroke-linecap="round" />
+        <path :stroke-width="props.strokeWidth" d="M42 37L6 37" stroke="currentColor" stroke-linecap="round" />
     </svg>
 </template>
 
diff --git a/frontend/src/components/icons/LoadList.vue b/frontend/src/components/icons/LoadList.vue
index 0511eb3..6261959 100644
--- a/frontend/src/components/icons/LoadList.vue
+++ b/frontend/src/components/icons/LoadList.vue
@@ -8,41 +8,41 @@ const props = defineProps({
 </script>
 
 <template>
-    <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
         <path
+            :stroke-width="props.strokeWidth"
             d="M8 28H24"
             stroke="currentColor"
-            :stroke-width="props.strokeWidth"
             stroke-linecap="round"
             stroke-linejoin="round" />
         <path
+            :stroke-width="props.strokeWidth"
             d="M8 37H24"
             stroke="currentColor"
-            :stroke-width="props.strokeWidth"
             stroke-linecap="round"
             stroke-linejoin="round" />
         <path
+            :stroke-width="props.strokeWidth"
             d="M8 19H40"
             stroke="currentColor"
-            :stroke-width="props.strokeWidth"
             stroke-linecap="round"
             stroke-linejoin="round" />
         <path
+            :stroke-width="props.strokeWidth"
             d="M8 10H40"
             stroke="currentColor"
-            :stroke-width="props.strokeWidth"
             stroke-linecap="round"
             stroke-linejoin="round" />
         <path
+            :stroke-width="props.strokeWidth"
             d="M37 40V28"
             stroke="currentColor"
-            :stroke-width="props.strokeWidth"
             stroke-linecap="round"
             stroke-linejoin="round" />
         <path
+            :stroke-width="props.strokeWidth"
             d="M33 36L37 40L41 36"
             stroke="currentColor"
-            :stroke-width="props.strokeWidth"
             stroke-linecap="round"
             stroke-linejoin="round" />
     </svg>
diff --git a/frontend/src/components/icons/More.vue b/frontend/src/components/icons/More.vue
index 216276d..139aa18 100644
--- a/frontend/src/components/icons/More.vue
+++ b/frontend/src/components/icons/More.vue
@@ -8,16 +8,16 @@ const props = defineProps({
 </script>
 
 <template>
-    <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
         <path
+            :stroke-width="strokeWidth"
             d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z"
             fill="none"
             stroke="currentColor"
-            :stroke-width="strokeWidth"
             stroke-linejoin="round" />
-        <circle cx="14" cy="24" r="3" fill="currentColor" />
-        <circle cx="24" cy="24" r="3" fill="currentColor" />
-        <circle cx="34" cy="24" r="3" fill="currentColor" />
+        <circle cx="14" cy="24" fill="currentColor" r="3" />
+        <circle cx="24" cy="24" fill="currentColor" r="3" />
+        <circle cx="34" cy="24" fill="currentColor" r="3" />
     </svg>
 </template>
 
diff --git a/frontend/src/components/icons/Record.vue b/frontend/src/components/icons/Record.vue
index 2c1d972..2b8691c 100644
--- a/frontend/src/components/icons/Record.vue
+++ b/frontend/src/components/icons/Record.vue
@@ -8,23 +8,23 @@ const props = defineProps({
 </script>
 
 <template>
-    <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
         <path
+            :stroke-width="strokeWidth"
             d="M5.81836 6.72729V14H13.0911"
             stroke="currentColor"
-            :stroke-width="strokeWidth"
             stroke-linecap="round"
             stroke-linejoin="round" />
         <path
+            :stroke-width="strokeWidth"
             d="M4 24C4 35.0457 12.9543 44 24 44V44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C16.598 4 10.1351 8.02111 6.67677 13.9981"
             stroke="currentColor"
-            :stroke-width="strokeWidth"
             stroke-linecap="round"
             stroke-linejoin="round" />
         <path
+            :stroke-width="strokeWidth"
             d="M24.005 12L24.0038 24.0088L32.4832 32.4882"
             stroke="currentColor"
-            :stroke-width="strokeWidth"
             stroke-linecap="round"
             stroke-linejoin="round" />
     </svg>
diff --git a/frontend/src/components/icons/Status.vue b/frontend/src/components/icons/Status.vue
index 4307641..b250c85 100644
--- a/frontend/src/components/icons/Status.vue
+++ b/frontend/src/components/icons/Status.vue
@@ -8,34 +8,34 @@ const props = defineProps({
 </script>
 
 <template>
-    <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
         <rect
-            x="4"
-            y="6"
-            width="40"
+            :stroke-width="props.strokeWidth"
+            fill="none"
             height="36"
             rx="2"
-            fill="none"
             stroke="currentColor"
-            :stroke-width="props.strokeWidth"
             stroke-linecap="round"
-            stroke-linejoin="round" />
+            stroke-linejoin="round"
+            width="40"
+            x="4"
+            y="6" />
         <path
+            :stroke-width="props.strokeWidth"
             d="M32 25V32"
             stroke="currentColor"
-            :stroke-width="props.strokeWidth"
             stroke-linecap="round"
             stroke-linejoin="round" />
         <path
+            :stroke-width="props.strokeWidth"
             d="M24 16V32"
             stroke="currentColor"
-            :stroke-width="props.strokeWidth"
             stroke-linecap="round"
             stroke-linejoin="round" />
         <path
+            :stroke-width="props.strokeWidth"
             d="M16 20V32"
             stroke="currentColor"
-            :stroke-width="props.strokeWidth"
             stroke-linecap="round"
             stroke-linejoin="round" />
     </svg>
diff --git a/frontend/src/components/icons/ToggleCluster.vue b/frontend/src/components/icons/ToggleCluster.vue
index 50fa9e3..5bea3d8 100644
--- a/frontend/src/components/icons/ToggleCluster.vue
+++ b/frontend/src/components/icons/ToggleCluster.vue
@@ -18,167 +18,167 @@ const props = defineProps({
 </script>
 
 <template>
-    <svg v-if="props.modelValue" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg v-if="props.modelValue" fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
         <rect
+            :fill="props.fillColor"
+            :stroke="props.fillColor"
+            :stroke-width="props.strokeWidth"
+            height="8"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            width="8"
             x="4"
-            y="34"
-            width="8"
-            height="8"
+            y="34" />
+        <rect
             :fill="props.fillColor"
             :stroke="props.fillColor"
             :stroke-width="props.strokeWidth"
-            stroke-linecap="round"
-            stroke-linejoin="round" />
-        <rect
-            x="8"
-            y="6"
-            width="32"
             height="12"
-            :fill="props.fillColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            width="32"
+            x="8"
+            y="6" />
+        <path
             :stroke="props.fillColor"
             :stroke-width="props.strokeWidth"
-            stroke-linecap="round"
-            stroke-linejoin="round" />
-        <path
             d="M24 34V18"
-            :stroke="props.fillColor"
-            :stroke-width="props.strokeWidth"
             stroke-linecap="round"
             stroke-linejoin="round" />
         <path
+            :stroke="props.fillColor"
+            :stroke-width="props.strokeWidth"
             d="M8 34V26H40V34"
-            :stroke="props.fillColor"
-            :stroke-width="props.strokeWidth"
             stroke-linecap="round"
             stroke-linejoin="round" />
         <rect
+            :fill="props.fillColor"
+            :stroke="props.fillColor"
+            :stroke-width="props.strokeWidth"
+            height="8"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            width="8"
             x="36"
-            y="34"
-            width="8"
-            height="8"
-            :fill="props.fillColor"
-            :stroke="props.fillColor"
-            :stroke-width="props.strokeWidth"
-            stroke-linecap="round"
-            stroke-linejoin="round" />
+            y="34" />
         <rect
-            x="20"
-            y="34"
-            width="8"
-            height="8"
             :fill="props.fillColor"
             :stroke="props.fillColor"
             :stroke-width="props.strokeWidth"
+            height="8"
             stroke-linecap="round"
-            stroke-linejoin="round" />
+            stroke-linejoin="round"
+            width="8"
+            x="20"
+            y="34" />
         <path
+            :stroke-width="props.strokeWidth"
             d="M14 12H16"
             stroke="#FFF"
-            :stroke-width="props.strokeWidth"
             stroke-linecap="round"
             stroke-linejoin="round" />
     </svg>
-    <svg v-else viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg v-else fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
         <path
+            :stroke-width="props.strokeWidth"
             d="M5 24L43 24"
             stroke="currentColor"
-            :stroke-width="props.strokeWidth"
             stroke-linecap="round"
             stroke-linejoin="round" />
         <path
+            :stroke-width="props.strokeWidth"
             d="M28 4H20C18.8954 4 18 4.89543 18 6V14C18 15.1046 18.8954 16 20 16H28C29.1046 16 30 15.1046 30 14V6C30 4.89543 29.1046 4 28 4Z"
             fill="none"
             stroke="currentColor"
-            :stroke-width="props.strokeWidth"
             stroke-linejoin="round" />
         <path
+            :stroke-width="props.strokeWidth"
             d="M16 32H8C6.89543 32 6 32.8954 6 34V42C6 43.1046 6.89543 44 8 44H16C17.1046 44 18 43.1046 18 42V34C18 32.8954 17.1046 32 16 32Z"
             fill="none"
             stroke="currentColor"
-            :stroke-width="props.strokeWidth"
             stroke-linejoin="round" />
         <path
+            :stroke-width="props.strokeWidth"
             d="M40 32H32C30.8954 32 30 32.8954 30 34V42C30 43.1046 30.8954 44 32 44H40C41.1046 44 42 43.1046 42 42V34C42 32.8954 41.1046 32 40 32Z"
             fill="none"
             stroke="currentColor"
-            :stroke-width="props.strokeWidth"
             stroke-linejoin="round" />
         <path
+            :stroke-width="props.strokeWidth"
             d="M24 24V16"
             stroke="currentColor"
-            :stroke-width="props.strokeWidth"
             stroke-linecap="round"
             stroke-linejoin="round" />
         <path
+            :stroke-width="props.strokeWidth"
             d="M36 32V24"
             stroke="currentColor"
-            :stroke-width="props.strokeWidth"
             stroke-linecap="round"
             stroke-linejoin="round" />
         <path
+            :stroke-width="props.strokeWidth"
             d="M12 32V24"
             stroke="currentColor"
-            :stroke-width="props.strokeWidth"
             stroke-linecap="round"
             stroke-linejoin="round" />
     </svg>
-    <svg v-else viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg v-else fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
         <rect
-            x="4"
-            y="34"
-            width="8"
+            :stroke-width="props.strokeWidth"
+            fill="none"
             height="8"
-            fill="none"
             stroke="currentColor"
-            :stroke-width="props.strokeWidth"
             stroke-linecap="round"
-            stroke-linejoin="round" />
+            stroke-linejoin="round"
+            width="8"
+            x="4"
+            y="34" />
         <rect
-            x="8"
-            y="6"
-            width="32"
-            height="12"
-            fill="none"
-            stroke="currentColor"
             :stroke-width="props.strokeWidth"
+            fill="none"
+            height="12"
+            stroke="currentColor"
             stroke-linecap="round"
-            stroke-linejoin="round" />
+            stroke-linejoin="round"
+            width="32"
+            x="8"
+            y="6" />
         <path
+            :stroke-width="props.strokeWidth"
             d="M24 34V18"
             stroke="currentColor"
-            :stroke-width="props.strokeWidth"
             stroke-linecap="round"
             stroke-linejoin="round" />
         <path
+            :stroke-width="props.strokeWidth"
             d="M8 34V26H40V34"
             stroke="currentColor"
-            :stroke-width="props.strokeWidth"
             stroke-linecap="round"
             stroke-linejoin="round" />
         <rect
+            :stroke-width="props.strokeWidth"
+            fill="none"
+            height="8"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            width="8"
             x="36"
-            y="34"
-            width="8"
-            height="8"
-            fill="none"
-            stroke="currentColor"
-            :stroke-width="props.strokeWidth"
-            stroke-linecap="round"
-            stroke-linejoin="round" />
+            y="34" />
         <rect
-            x="20"
-            y="34"
-            width="8"
-            height="8"
-            fill="none"
-            stroke="currentColor"
             :stroke-width="props.strokeWidth"
+            fill="none"
+            height="8"
+            stroke="currentColor"
             stroke-linecap="round"
-            stroke-linejoin="round" />
+            stroke-linejoin="round"
+            width="8"
+            x="20"
+            y="34" />
         <path
+            :stroke-width="props.strokeWidth"
             d="M14 12H16"
             stroke="currentColor"
-            :stroke-width="props.strokeWidth"
             stroke-linecap="round"
             stroke-linejoin="round" />
     </svg>
diff --git a/frontend/src/components/icons/Unlink.vue b/frontend/src/components/icons/Unlink.vue
index ae32416..3326c9a 100644
--- a/frontend/src/components/icons/Unlink.vue
+++ b/frontend/src/components/icons/Unlink.vue
@@ -8,29 +8,29 @@ const props = defineProps({
 </script>
 
 <template>
-    <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
         <path
+            :stroke-width="strokeWidth"
             d="M25.8927 16.0307L18.1145 8.2525C15.2506 5.38866 10.7031 5.29302 7.9572 8.0389C5.21132 10.7848 5.30696 15.3323 8.1708 18.1962L15.949 25.9744"
             stroke="currentColor"
-            :stroke-width="strokeWidth"
             stroke-linecap="round"
             stroke-linejoin="round" />
         <path
+            :stroke-width="strokeWidth"
             d="M31.9161 22.0707L39.6943 29.8489C42.5581 32.7127 42.9291 37.1233 39.9079 40.0062C36.8867 42.8891 32.6144 42.6564 29.7506 39.7926L21.9724 32.0144"
             stroke="currentColor"
-            :stroke-width="strokeWidth"
             stroke-linecap="round"
             stroke-linejoin="round" />
         <path
+            :stroke-width="strokeWidth"
             d="M21.2384 21.0759L17.3493 17.1868"
             stroke="currentColor"
-            :stroke-width="strokeWidth"
             stroke-linecap="round"
             stroke-linejoin="round" />
         <path
+            :stroke-width="strokeWidth"
             d="M30.3131 30.1504L26.424 26.2613"
             stroke="currentColor"
-            :stroke-width="strokeWidth"
             stroke-linecap="round"
             stroke-linejoin="round" />
     </svg>
diff --git a/frontend/src/components/icons/WindowClose.vue b/frontend/src/components/icons/WindowClose.vue
index 0bba432..27b6cc7 100644
--- a/frontend/src/components/icons/WindowClose.vue
+++ b/frontend/src/components/icons/WindowClose.vue
@@ -8,9 +8,9 @@ const props = defineProps({
 </script>
 
 <template>
-    <svg :width="props.size" :height="props.size" viewBox="0 0 48 48" fill="none">
-        <path d="M8 8L40 40" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
-        <path d="M8 40L40 8" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
+    <svg :height="props.size" :width="props.size" fill="none" viewBox="0 0 48 48">
+        <path d="M8 8L40 40" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" />
+        <path d="M8 40L40 8" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" />
     </svg>
 </template>
 
diff --git a/frontend/src/components/icons/WindowMax.vue b/frontend/src/components/icons/WindowMax.vue
index ef55258..d195b7d 100644
--- a/frontend/src/components/icons/WindowMax.vue
+++ b/frontend/src/components/icons/WindowMax.vue
@@ -8,7 +8,7 @@ const props = defineProps({
 </script>
 
 <template>
-    <svg :width="props.size" :height="props.size" viewBox="0 0 48 48" fill="none">
+    <svg :height="props.size" :width="props.size" fill="none" viewBox="0 0 48 48">
         <path
             d="M39 6H9C7.34315 6 6 7.34315 6 9V39C6 40.6569 7.34315 42 9 42H39C40.6569 42 42 40.6569 42 39V9C42 7.34315 40.6569 6 39 6Z"
             fill="none"
diff --git a/frontend/src/components/icons/WindowMin.vue b/frontend/src/components/icons/WindowMin.vue
index a298dee..7955084 100644
--- a/frontend/src/components/icons/WindowMin.vue
+++ b/frontend/src/components/icons/WindowMin.vue
@@ -8,8 +8,8 @@ const props = defineProps({
 </script>
 
 <template>
-    <svg :width="props.size" :height="props.size" viewBox="0 0 48 48" fill="none">
-        <path d="M8 24L40 24" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
+    <svg :height="props.size" :width="props.size" fill="none" viewBox="0 0 48 48">
+        <path d="M8 24L40 24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" />
     </svg>
 </template>
 
diff --git a/frontend/src/components/icons/WindowRestore.vue b/frontend/src/components/icons/WindowRestore.vue
index da87f4f..bc21abc 100644
--- a/frontend/src/components/icons/WindowRestore.vue
+++ b/frontend/src/components/icons/WindowRestore.vue
@@ -8,19 +8,19 @@ const props = defineProps({
 </script>
 
 <template>
-    <svg :width="props.size" :height="props.size" viewBox="0 0 48 48" fill="none">
+    <svg :height="props.size" :width="props.size" fill="none" viewBox="0 0 48 48">
         <path
             d="M13 12.4316V7.8125C13 6.2592 14.2592 5 15.8125 5H40.1875C41.7408 5 43 6.2592 43 7.8125V32.1875C43 33.7408 41.7408 35 40.1875 35H35.5163"
             stroke="currentColor"
-            stroke-width="4"
             stroke-linecap="round"
-            stroke-linejoin="round" />
+            stroke-linejoin="round"
+            stroke-width="4" />
         <path
             d="M32.1875 13H7.8125C6.2592 13 5 14.2592 5 15.8125V40.1875C5 41.7408 6.2592 43 7.8125 43H32.1875C33.7408 43 35 41.7408 35 40.1875V15.8125C35 14.2592 33.7408 13 32.1875 13Z"
             fill="none"
             stroke="currentColor"
-            stroke-width="4"
-            stroke-linejoin="round" />
+            stroke-linejoin="round"
+            stroke-width="4" />
     </svg>
 </template>
 
diff --git a/frontend/src/components/sidebar/BrowserPane.vue b/frontend/src/components/sidebar/BrowserPane.vue
index c4d174e..506a8ac 100644
--- a/frontend/src/components/sidebar/BrowserPane.vue
+++ b/frontend/src/components/sidebar/BrowserPane.vue
@@ -1,6 +1,5 @@
 <script setup>
 import { useThemeVars } from 'naive-ui'
-import AddLink from '@/components/icons/AddLink.vue'
 import BrowserTree from './BrowserTree.vue'
 import IconButton from '@/components/common/IconButton.vue'
 import useTabStore from 'stores/tab.js'
@@ -74,7 +73,7 @@ const filterTypeOptions = computed(() => {
                     :options="filterTypeOptions"
                     style="width: 120px" />
                 <n-input clearable placeholder="" />
-                <n-button ghost :focusable="false">
+                <n-button :focusable="false" ghost>
                     <template #icon>
                         <n-icon :component="Search" />
                     </template>
diff --git a/frontend/src/components/sidebar/ConnectionTree.vue b/frontend/src/components/sidebar/ConnectionTree.vue
index 735442a..6e0f308 100644
--- a/frontend/src/components/sidebar/ConnectionTree.vue
+++ b/frontend/src/components/sidebar/ConnectionTree.vue
@@ -519,7 +519,7 @@ const onCancelOpen = () => {
                 <template #description>
                     <n-space vertical>
                         <n-text strong>{{ $t('dialogue.opening_connection') }}</n-text>
-                        <n-button secondary size="small" :focusable="false" @click="onCancelOpen">
+                        <n-button :focusable="false" secondary size="small" @click="onCancelOpen">
                             {{ $t('dialogue.interrupt_connection') }}
                         </n-button>
                     </n-space>
diff --git a/frontend/src/langs/en.json b/frontend/src/langs/en.json
index 38506b5..193f43e 100644
--- a/frontend/src/langs/en.json
+++ b/frontend/src/langs/en.json
@@ -138,7 +138,7 @@
         "filter": "Default Key Filter Pattern",
         "filter_tip": "Pattern which defines loaded keys from redis server",
         "separator": "Key Separator",
-        "separator_tip":"Separator for key path item",
+        "separator_tip": "Separator for key path item",
         "conn_timeout": "Connection Timeout",
         "exec_timeout": "Execution Timeout",
         "dbfilter_type": "Database Filter",
@@ -158,7 +158,7 @@
         "cert_file": "Public Key",
         "key_file": "Private Key",
         "ca_file": "Authority",
-        "cert_file_tip":"Public Key File in PEM format(Cert)",
+        "cert_file_tip": "Public Key File in PEM format(Cert)",
         "key_file_tip": "Private Key File in PEM format(Key)",
         "ca_file_tip": "Certificate Authority File in PEM format(CA)"
       },
diff --git a/frontend/src/langs/zh-cn.json b/frontend/src/langs/zh-cn.json
index f1aaff4..89303fc 100644
--- a/frontend/src/langs/zh-cn.json
+++ b/frontend/src/langs/zh-cn.json
@@ -158,7 +158,7 @@
         "cert_file": "公钥文件",
         "key_file": "私钥文件",
         "ca_file": "授权文件",
-        "cert_file_tip":"PEM格式公钥文件(Cert)",
+        "cert_file_tip": "PEM格式公钥文件(Cert)",
         "key_file_tip": "PEM格式私钥文件(Key)",
         "ca_file_tip": "PEM格式授权文件(CA)"
       },
diff --git a/frontend/src/stores/dialog.js b/frontend/src/stores/dialog.js
index 4652e85..3a4e311 100644
--- a/frontend/src/stores/dialog.js
+++ b/frontend/src/stores/dialog.js
@@ -1,6 +1,5 @@
 import { defineStore } from 'pinia'
 import useConnectionStore from './connections.js'
-import { assignWith, isEmpty } from 'lodash'
 
 /**
  * connection dialog type
diff --git a/frontend/src/utils/discrete.js b/frontend/src/utils/discrete.js
index 276f523..ab47c4e 100644
--- a/frontend/src/utils/discrete.js
+++ b/frontend/src/utils/discrete.js
@@ -1,5 +1,5 @@
 import usePreferencesStore from 'stores/preferences.js'
-import { createDiscreteApi, darkTheme, useDialog } from 'naive-ui'
+import { createDiscreteApi, darkTheme } from 'naive-ui'
 import { themeOverrides } from '@/utils/theme.js'
 import { i18nGlobal } from '@/utils/i18n.js'
 import { computed } from 'vue'