fix: root key may not expand after switch to check mode in key tree

style: update style of context menu
doc: update screenshots
2024-01-03 01:08:11 +08:00 · 2024-01-03 00:32:52 +08:00 · 2024-01-02 17:16:12 +08:00 · 2024-01-02 16:14:56 +08:00 · 2024-01-02 15:43:50 +08:00 · 2024-01-02 00:35:13 +08:00
25 changed files with 343 additions and 306 deletions
--- a/README.md
+++ b/README.md
@ -8,6 +8,7 @@

 [![License](https://img.shields.io/github/license/tiny-craft/tiny-rdm)](https://github.com/tiny-craft/tiny-rdm/blob/main/LICENSE)
 [![GitHub release](https://img.shields.io/github/release/tiny-craft/tiny-rdm)](https://github.com/tiny-craft/tiny-rdm/releases)
+![GitHub All Releases](https://img.shields.io/github/downloads/tiny-craft/tiny-rdm/total)
 [![GitHub stars](https://img.shields.io/github/stars/tiny-craft/tiny-rdm)](https://github.com/tiny-craft/tiny-rdm/stargazers)
 [![GitHub forks](https://img.shields.io/github/forks/tiny-craft/tiny-rdm)](https://github.com/tiny-craft/tiny-rdm/fork)
 [![Discord](https://img.shields.io/discord/1170373259133456434?label=Discord&color=5865F2)](https://discord.gg/VTFbBMGjWh)
--- a/README_zh.md
+++ b/README_zh.md
@ -7,6 +7,7 @@

 [![License](https://img.shields.io/github/license/tiny-craft/tiny-rdm)](https://github.com/tiny-craft/tiny-rdm/blob/main/LICENSE)
 [![GitHub release](https://img.shields.io/github/release/tiny-craft/tiny-rdm)](https://github.com/tiny-craft/tiny-rdm/releases)
+![GitHub All Releases](https://img.shields.io/github/downloads/tiny-craft/tiny-rdm/total)
 [![GitHub stars](https://img.shields.io/github/stars/tiny-craft/tiny-rdm)](https://github.com/tiny-craft/tiny-rdm/stargazers)
 [![GitHub forks](https://img.shields.io/github/forks/tiny-craft/tiny-rdm)](https://github.com/tiny-craft/tiny-rdm/fork)
 [![Discord](https://img.shields.io/discord/1170373259133456434?label=Discord&color=5865F2)](https://discord.gg/VTFbBMGjWh)
--- a/backend/services/browser_service.go
+++ b/backend/services/browser_service.go
@ -81,7 +81,9 @@ func (b *browserService) Start(ctx context.Context) {
 func (b *browserService) Stop() {
 	for _, item := range b.connMap {
 		if item.client != nil {
-			item.cancelFunc()
+			if item.cancelFunc != nil {
+				item.cancelFunc()
+			}
 			item.client.Close()
 		}
 	}
@ -227,7 +229,9 @@ func (b *browserService) CloseConnection(name string) (resp types.JSResp) {
 	if ok {
 		delete(b.connMap, name)
 		if item.client != nil {
-			item.cancelFunc()
+			if item.cancelFunc != nil {
+				item.cancelFunc()
+			}
 			item.client.Close()
 		}
 	}
@ -287,44 +291,41 @@ func (b *browserService) getRedisClient(server string, db int) (item *connection
 	var ok bool
 	var client redis.UniversalClient
 	if item, ok = b.connMap[server]; ok {
-		client = item.client
-	} else {
-		selConn := Connection().getConnection(server)
-		if selConn == nil {
-			err = fmt.Errorf("no match connection \"%s\"", server)
+		if item.db == db {
 			return
 		}
-		client, err = b.createRedisClient(selConn.ConnectionConfig)
-		ctx, cancelFunc := context.WithCancel(b.ctx)
-		item = &connectionItem{
-			client:      client,
-			ctx:         ctx,
-			cancelFunc:  cancelFunc,
-			cursor:      map[int]uint64{},
-			entryCursor: map[int]entryCursor{},
-			stepSize:    int64(selConn.LoadSize),
+
+		// close previous connection if database is not the same
+		if item.cancelFunc != nil {
+			item.cancelFunc()
 		}
-		if item.stepSize <= 0 {
-			item.stepSize = consts.DEFAULT_LOAD_SIZE
-		}
-		b.connMap[server] = item
+		item.client.Close()
+		delete(b.connMap, server)
 	}

-	// BUG: go-redis might not be executing commands on the corresponding database
-	// requiring a database switch before execute each command
-	if db >= 0 && item.db != db {
-		var rdb *redis.Client
-		if rdb, ok = client.(*redis.Client); ok && rdb != nil {
-			_, err = rdb.Pipelined(item.ctx, func(pipe redis.Pipeliner) error {
-				return pipe.Select(item.ctx, db).Err()
-			})
-			if err != nil {
-				return
-			}
-			item.db = db
-			b.connMap[server].db = db
-		}
+	// recreate new connection after switch database
+	selConn := Connection().getConnection(server)
+	if selConn == nil {
+		err = fmt.Errorf("no match connection \"%s\"", server)
+		return
 	}
+	var connConfig = selConn.ConnectionConfig
+	connConfig.LastDB = db
+	client, err = b.createRedisClient(connConfig)
+	ctx, cancelFunc := context.WithCancel(b.ctx)
+	item = &connectionItem{
+		client:      client,
+		ctx:         ctx,
+		cancelFunc:  cancelFunc,
+		cursor:      map[int]uint64{},
+		entryCursor: map[int]entryCursor{},
+		stepSize:    int64(selConn.LoadSize),
+		db:          db,
+	}
+	if item.stepSize <= 0 {
+		item.stepSize = consts.DEFAULT_LOAD_SIZE
+	}
+	b.connMap[server] = item
 	return
 }

--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@ -13,14 +13,14 @@
        "lodash": "^4.17.21",
        "monaco-editor": "^0.45.0",
        "pinia": "^2.1.7",
-        "sass": "^1.69.5",
-        "vue": "^3.3.13",
+        "sass": "^1.69.6",
+        "vue": "^3.4.3",
        "vue-i18n": "^9.8.0",
        "xterm": "^5.3.0",
        "xterm-addon-fit": "^0.8.0"
      },
      "devDependencies": {
-        "@vitejs/plugin-vue": "^5.0.0",
+        "@vitejs/plugin-vue": "^5.0.2",
        "naive-ui": "^2.36.0",
        "prettier": "^3.1.1",
        "unplugin-auto-import": "^0.17.3",
@ -48,9 +48,9 @@
      }
    },
    "node_modules/@babel/parser": {
-      "version": "7.23.5",
-      "resolved": "https://registry.npmmirror.com/@babel/parser/-/parser-7.23.5.tgz",
-      "integrity": "sha512-hOOqoiNXrmGdFbhgCzu6GiURxUgM27Xwd/aPuu8RfHEZPBzL1Z54okAHAQjXfcQNwvrlkAmAp4SlRTZ45vlthQ==",
+      "version": "7.23.6",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.6.tgz",
+      "integrity": "sha512-Z2uID7YJ7oNvAI20O9X0bblw7Qqs8Q2hFy0R9tAfnfLkp5MW0UH9eUvnDSnFwKZ0AvgS1ucqR4KzvVHgnke1VQ==",
      "bin": {
        "parser": "bin/babel-parser.js"
      },
@ -855,9 +855,9 @@
      }
    },
    "node_modules/@vitejs/plugin-vue": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.0.0.tgz",
-      "integrity": "sha512-7x5e8X4J1Wi4NxudGjJBd2OFerAi/0nzF80ojCzvfj347WVr0YSn82C8BSsgwSHzlk9Kw5xnZfj0/7RLnNwP5w==",
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.0.2.tgz",
+      "integrity": "sha512-kEjJHrLb5ePBvjD0SPZwJlw1QTRcjjCA9sB5VyfonoXVBxTS7TMnqL6EkLt1Eu61RDeiuZ/WN9Hf6PxXhPI2uA==",
      "dev": true,
      "engines": {
        "node": "^18.0.0 || >=20.0.0"
@ -868,36 +868,36 @@
      }
    },
    "node_modules/@vue/compiler-core": {
-      "version": "3.3.13",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.3.13.tgz",
-      "integrity": "sha512-bwi9HShGu7uaZLOErZgsH2+ojsEdsjerbf2cMXPwmvcgZfVPZ2BVZzCVnwZBxTAYd6Mzbmf6izcUNDkWnBBQ6A==",
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.3.tgz",
+      "integrity": "sha512-u8jzgFg0EDtSrb/hG53Wwh1bAOQFtc1ZCegBpA/glyvTlgHl+tq13o1zvRfLbegYUw/E4mSTGOiCnAJ9SJ+lsg==",
      "dependencies": {
-        "@babel/parser": "^7.23.5",
-        "@vue/shared": "3.3.13",
+        "@babel/parser": "^7.23.6",
+        "@vue/shared": "3.4.3",
+        "entities": "^4.5.0",
        "estree-walker": "^2.0.2",
        "source-map-js": "^1.0.2"
      }
    },
    "node_modules/@vue/compiler-dom": {
-      "version": "3.3.13",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.3.13.tgz",
-      "integrity": "sha512-EYRDpbLadGtNL0Gph+HoKiYqXLqZ0xSSpR5Dvnu/Ep7ggaCbjRDIus1MMxTS2Qm0koXED4xSlvTZaTnI8cYAsw==",
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.3.tgz",
+      "integrity": "sha512-oGF1E9/htI6JWj/lTJgr6UgxNCtNHbM6xKVreBWeZL9QhRGABRVoWGAzxmtBfSOd+w0Zi5BY0Es/tlJrN6WgEg==",
      "dependencies": {
-        "@vue/compiler-core": "3.3.13",
-        "@vue/shared": "3.3.13"
+        "@vue/compiler-core": "3.4.3",
+        "@vue/shared": "3.4.3"
      }
    },
    "node_modules/@vue/compiler-sfc": {
-      "version": "3.3.13",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.3.13.tgz",
-      "integrity": "sha512-DQVmHEy/EKIgggvnGRLx21hSqnr1smUS9Aq8tfxiiot8UR0/pXKHN9k78/qQ7etyQTFj5em5nruODON7dBeumw==",
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.3.tgz",
+      "integrity": "sha512-NuJqb5is9I4uzv316VRUDYgIlPZCG8D+ARt5P4t5UDShIHKL25J3TGZAUryY/Aiy0DsY7srJnZL5ryB6DD63Zw==",
      "dependencies": {
-        "@babel/parser": "^7.23.5",
-        "@vue/compiler-core": "3.3.13",
-        "@vue/compiler-dom": "3.3.13",
-        "@vue/compiler-ssr": "3.3.13",
-        "@vue/reactivity-transform": "3.3.13",
-        "@vue/shared": "3.3.13",
+        "@babel/parser": "^7.23.6",
+        "@vue/compiler-core": "3.4.3",
+        "@vue/compiler-dom": "3.4.3",
+        "@vue/compiler-ssr": "3.4.3",
+        "@vue/shared": "3.4.3",
        "estree-walker": "^2.0.2",
        "magic-string": "^0.30.5",
        "postcss": "^8.4.32",
@ -905,12 +905,12 @@
      }
    },
    "node_modules/@vue/compiler-ssr": {
-      "version": "3.3.13",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.3.13.tgz",
-      "integrity": "sha512-d/P3bCeUGmkJNS1QUZSAvoCIW4fkOKK3l2deE7zrp0ypJEy+En2AcypIkqvcFQOcw3F0zt2VfMvNsA9JmExTaw==",
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.3.tgz",
+      "integrity": "sha512-wnYQtMBkeFSxgSSQbYGQeXPhQacQiog2c6AlvMldQH6DB+gSXK/0F6DVXAJfEiuBSgBhUc8dwrrG5JQcqwalsA==",
      "dependencies": {
-        "@vue/compiler-dom": "3.3.13",
-        "@vue/shared": "3.3.13"
+        "@vue/compiler-dom": "3.4.3",
+        "@vue/shared": "3.4.3"
      }
    },
    "node_modules/@vue/devtools-api": {
@ -919,41 +919,29 @@
      "integrity": "sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q=="
    },
    "node_modules/@vue/reactivity": {
-      "version": "3.3.13",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.3.13.tgz",
-      "integrity": "sha512-fjzCxceMahHhi4AxUBzQqqVhuA21RJ0COaWTbIBl1PruGW1CeY97louZzLi4smpYx+CHfFPPU/CS8NybbGvPKQ==",
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.3.tgz",
+      "integrity": "sha512-q5f9HLDU+5aBKizXHAx0w4whkIANs1Muiq9R5YXm0HtorSlflqv9u/ohaMxuuhHWCji4xqpQ1eL04WvmAmGnFg==",
      "dependencies": {
-        "@vue/shared": "3.3.13"
-      }
-    },
-    "node_modules/@vue/reactivity-transform": {
-      "version": "3.3.13",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.3.13.tgz",
-      "integrity": "sha512-oWnydGH0bBauhXvh5KXUy61xr9gKaMbtsMHk40IK9M4gMuKPJ342tKFarY0eQ6jef8906m35q37wwA8DMZOm5Q==",
-      "dependencies": {
-        "@babel/parser": "^7.23.5",
-        "@vue/compiler-core": "3.3.13",
-        "@vue/shared": "3.3.13",
-        "estree-walker": "^2.0.2",
-        "magic-string": "^0.30.5"
+        "@vue/shared": "3.4.3"
      }
    },
    "node_modules/@vue/runtime-core": {
-      "version": "3.3.13",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.3.13.tgz",
-      "integrity": "sha512-1TzA5TvGuh2zUwMJgdfvrBABWZ7y8kBwBhm7BXk8rvdx2SsgcGfz2ruv2GzuGZNvL1aKnK8CQMV/jFOrxNQUMA==",
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.3.tgz",
+      "integrity": "sha512-C1r6QhB1qY7D591RCSFhMULyzL9CuyrGc+3PpB0h7dU4Qqw6GNyo4BNFjHZVvsWncrUlKX3DIKg0Y7rNNr06NQ==",
      "dependencies": {
-        "@vue/reactivity": "3.3.13",
-        "@vue/shared": "3.3.13"
+        "@vue/reactivity": "3.4.3",
+        "@vue/shared": "3.4.3"
      }
    },
    "node_modules/@vue/runtime-dom": {
-      "version": "3.3.13",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.3.13.tgz",
-      "integrity": "sha512-JJkpE8R/hJKXqVTgUoODwS5wqKtOsmJPEqmp90PDVGygtJ4C0PtOkcEYXwhiVEmef6xeXcIlrT3Yo5aQ4qkHhQ==",
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.3.tgz",
+      "integrity": "sha512-wrsprg7An5Ec+EhPngWdPuzkp0BEUxAKaQtN9dPU/iZctPyD9aaXmVtehPJerdQxQale6gEnhpnfywNw3zOv2A==",
      "dependencies": {
-        "@vue/runtime-core": "3.3.13",
-        "@vue/shared": "3.3.13",
+        "@vue/runtime-core": "3.4.3",
+        "@vue/shared": "3.4.3",
        "csstype": "^3.1.3"
      }
    },
@ -963,21 +951,21 @@
      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
    },
    "node_modules/@vue/server-renderer": {
-      "version": "3.3.13",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.3.13.tgz",
-      "integrity": "sha512-vSnN+nuf6iSqTL3Qgx/9A+BT+0Zf/VJOgF5uMZrKjYPs38GMYyAU1coDyBNHauehXDaP+zl73VhwWv0vBRBHcg==",
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.3.tgz",
+      "integrity": "sha512-BUxt8oVGMKKsqSkM1uU3d3Houyfy4WAc2SpSQRebNd+XJGATVkW/rO129jkyL+kpB/2VRKzE63zwf5RtJ3XuZw==",
      "dependencies": {
-        "@vue/compiler-ssr": "3.3.13",
-        "@vue/shared": "3.3.13"
+        "@vue/compiler-ssr": "3.4.3",
+        "@vue/shared": "3.4.3"
      },
      "peerDependencies": {
-        "vue": "3.3.13"
+        "vue": "3.4.3"
      }
    },
    "node_modules/@vue/shared": {
-      "version": "3.3.13",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.13.tgz",
-      "integrity": "sha512-/zYUwiHD8j7gKx2argXEMCUXVST6q/21DFU0sTfNX0URJroCe3b1UF6vLJ3lQDfLNIiiRl2ONp7Nh5UVWS6QnA=="
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.3.tgz",
+      "integrity": "sha512-rIwlkkP1n4uKrRzivAKPZIEkHiuwY5mmhMJ2nZKCBLz8lTUlE73rQh4n1OnnMurXt1vcUNyH4ZPfdh8QweTjpQ=="
    },
    "node_modules/acorn": {
      "version": "8.11.2",
@ -1144,6 +1132,17 @@
        }
      }
    },
+    "node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
    "node_modules/esbuild": {
      "version": "0.19.6",
      "resolved": "https://registry.npmmirror.com/esbuild/-/esbuild-0.19.6.tgz",
@ -1852,9 +1851,9 @@
      }
    },
    "node_modules/sass": {
-      "version": "1.69.5",
-      "resolved": "https://registry.npmmirror.com/sass/-/sass-1.69.5.tgz",
-      "integrity": "sha512-qg2+UCJibLr2LCVOt3OlPhr/dqVHWOa9XtZf2OjbLs/T4VPSJ00udtgJxH3neXZm+QqX8B+3cU7RaLqp1iVfcQ==",
+      "version": "1.69.6",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.69.6.tgz",
+      "integrity": "sha512-qbRr3k9JGHWXCvZU77SD2OTwUlC+gNT+61JOLcmLm+XqH4h/5D+p4IIsxvpkB89S9AwJOyb5+rWNpIucaFxSFQ==",
      "dependencies": {
        "chokidar": ">=3.0.0 <4.0.0",
        "immutable": "^4.0.0",
@ -2241,15 +2240,15 @@
      }
    },
    "node_modules/vue": {
-      "version": "3.3.13",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.3.13.tgz",
-      "integrity": "sha512-LDnUpQvDgsfc0u/YgtAgTMXJlJQqjkxW1PVcOnJA5cshPleULDjHi7U45pl2VJYazSSvLH8UKcid/kzH8I0a0Q==",
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.3.tgz",
+      "integrity": "sha512-GjN+culMAGv/mUbkIv8zMKItno8npcj5gWlXkSxf1SPTQf8eJ4A+YfHIvQFyL1IfuJcMl3soA7SmN1fRxbf/wA==",
      "dependencies": {
-        "@vue/compiler-dom": "3.3.13",
-        "@vue/compiler-sfc": "3.3.13",
-        "@vue/runtime-dom": "3.3.13",
-        "@vue/server-renderer": "3.3.13",
-        "@vue/shared": "3.3.13"
+        "@vue/compiler-dom": "3.4.3",
+        "@vue/compiler-sfc": "3.4.3",
+        "@vue/runtime-dom": "3.4.3",
+        "@vue/server-renderer": "3.4.3",
+        "@vue/shared": "3.4.3"
      },
      "peerDependencies": {
        "typescript": "*"
@ -2364,9 +2363,9 @@
      "dev": true
    },
    "@babel/parser": {
-      "version": "7.23.5",
-      "resolved": "https://registry.npmmirror.com/@babel/parser/-/parser-7.23.5.tgz",
-      "integrity": "sha512-hOOqoiNXrmGdFbhgCzu6GiURxUgM27Xwd/aPuu8RfHEZPBzL1Z54okAHAQjXfcQNwvrlkAmAp4SlRTZ45vlthQ=="
+      "version": "7.23.6",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.6.tgz",
+      "integrity": "sha512-Z2uID7YJ7oNvAI20O9X0bblw7Qqs8Q2hFy0R9tAfnfLkp5MW0UH9eUvnDSnFwKZ0AvgS1ucqR4KzvVHgnke1VQ=="
    },
    "@babel/runtime": {
      "version": "7.23.1",
@ -2837,43 +2836,43 @@
      }
    },
    "@vitejs/plugin-vue": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.0.0.tgz",
-      "integrity": "sha512-7x5e8X4J1Wi4NxudGjJBd2OFerAi/0nzF80ojCzvfj347WVr0YSn82C8BSsgwSHzlk9Kw5xnZfj0/7RLnNwP5w==",
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.0.2.tgz",
+      "integrity": "sha512-kEjJHrLb5ePBvjD0SPZwJlw1QTRcjjCA9sB5VyfonoXVBxTS7TMnqL6EkLt1Eu61RDeiuZ/WN9Hf6PxXhPI2uA==",
      "dev": true,
      "requires": {}
    },
    "@vue/compiler-core": {
-      "version": "3.3.13",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.3.13.tgz",
-      "integrity": "sha512-bwi9HShGu7uaZLOErZgsH2+ojsEdsjerbf2cMXPwmvcgZfVPZ2BVZzCVnwZBxTAYd6Mzbmf6izcUNDkWnBBQ6A==",
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.3.tgz",
+      "integrity": "sha512-u8jzgFg0EDtSrb/hG53Wwh1bAOQFtc1ZCegBpA/glyvTlgHl+tq13o1zvRfLbegYUw/E4mSTGOiCnAJ9SJ+lsg==",
      "requires": {
-        "@babel/parser": "^7.23.5",
-        "@vue/shared": "3.3.13",
+        "@babel/parser": "^7.23.6",
+        "@vue/shared": "3.4.3",
+        "entities": "^4.5.0",
        "estree-walker": "^2.0.2",
        "source-map-js": "^1.0.2"
      }
    },
    "@vue/compiler-dom": {
-      "version": "3.3.13",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.3.13.tgz",
-      "integrity": "sha512-EYRDpbLadGtNL0Gph+HoKiYqXLqZ0xSSpR5Dvnu/Ep7ggaCbjRDIus1MMxTS2Qm0koXED4xSlvTZaTnI8cYAsw==",
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.3.tgz",
+      "integrity": "sha512-oGF1E9/htI6JWj/lTJgr6UgxNCtNHbM6xKVreBWeZL9QhRGABRVoWGAzxmtBfSOd+w0Zi5BY0Es/tlJrN6WgEg==",
      "requires": {
-        "@vue/compiler-core": "3.3.13",
-        "@vue/shared": "3.3.13"
+        "@vue/compiler-core": "3.4.3",
+        "@vue/shared": "3.4.3"
      }
    },
    "@vue/compiler-sfc": {
-      "version": "3.3.13",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.3.13.tgz",
-      "integrity": "sha512-DQVmHEy/EKIgggvnGRLx21hSqnr1smUS9Aq8tfxiiot8UR0/pXKHN9k78/qQ7etyQTFj5em5nruODON7dBeumw==",
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.3.tgz",
+      "integrity": "sha512-NuJqb5is9I4uzv316VRUDYgIlPZCG8D+ARt5P4t5UDShIHKL25J3TGZAUryY/Aiy0DsY7srJnZL5ryB6DD63Zw==",
      "requires": {
-        "@babel/parser": "^7.23.5",
-        "@vue/compiler-core": "3.3.13",
-        "@vue/compiler-dom": "3.3.13",
-        "@vue/compiler-ssr": "3.3.13",
-        "@vue/reactivity-transform": "3.3.13",
-        "@vue/shared": "3.3.13",
+        "@babel/parser": "^7.23.6",
+        "@vue/compiler-core": "3.4.3",
+        "@vue/compiler-dom": "3.4.3",
+        "@vue/compiler-ssr": "3.4.3",
+        "@vue/shared": "3.4.3",
        "estree-walker": "^2.0.2",
        "magic-string": "^0.30.5",
        "postcss": "^8.4.32",
@ -2881,12 +2880,12 @@
      }
    },
    "@vue/compiler-ssr": {
-      "version": "3.3.13",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.3.13.tgz",
-      "integrity": "sha512-d/P3bCeUGmkJNS1QUZSAvoCIW4fkOKK3l2deE7zrp0ypJEy+En2AcypIkqvcFQOcw3F0zt2VfMvNsA9JmExTaw==",
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.3.tgz",
+      "integrity": "sha512-wnYQtMBkeFSxgSSQbYGQeXPhQacQiog2c6AlvMldQH6DB+gSXK/0F6DVXAJfEiuBSgBhUc8dwrrG5JQcqwalsA==",
      "requires": {
-        "@vue/compiler-dom": "3.3.13",
-        "@vue/shared": "3.3.13"
+        "@vue/compiler-dom": "3.4.3",
+        "@vue/shared": "3.4.3"
      }
    },
    "@vue/devtools-api": {
@ -2895,41 +2894,29 @@
      "integrity": "sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q=="
    },
    "@vue/reactivity": {
-      "version": "3.3.13",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.3.13.tgz",
-      "integrity": "sha512-fjzCxceMahHhi4AxUBzQqqVhuA21RJ0COaWTbIBl1PruGW1CeY97louZzLi4smpYx+CHfFPPU/CS8NybbGvPKQ==",
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.3.tgz",
+      "integrity": "sha512-q5f9HLDU+5aBKizXHAx0w4whkIANs1Muiq9R5YXm0HtorSlflqv9u/ohaMxuuhHWCji4xqpQ1eL04WvmAmGnFg==",
      "requires": {
-        "@vue/shared": "3.3.13"
-      }
-    },
-    "@vue/reactivity-transform": {
-      "version": "3.3.13",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.3.13.tgz",
-      "integrity": "sha512-oWnydGH0bBauhXvh5KXUy61xr9gKaMbtsMHk40IK9M4gMuKPJ342tKFarY0eQ6jef8906m35q37wwA8DMZOm5Q==",
-      "requires": {
-        "@babel/parser": "^7.23.5",
-        "@vue/compiler-core": "3.3.13",
-        "@vue/shared": "3.3.13",
-        "estree-walker": "^2.0.2",
-        "magic-string": "^0.30.5"
+        "@vue/shared": "3.4.3"
      }
    },
    "@vue/runtime-core": {
-      "version": "3.3.13",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.3.13.tgz",
-      "integrity": "sha512-1TzA5TvGuh2zUwMJgdfvrBABWZ7y8kBwBhm7BXk8rvdx2SsgcGfz2ruv2GzuGZNvL1aKnK8CQMV/jFOrxNQUMA==",
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.3.tgz",
+      "integrity": "sha512-C1r6QhB1qY7D591RCSFhMULyzL9CuyrGc+3PpB0h7dU4Qqw6GNyo4BNFjHZVvsWncrUlKX3DIKg0Y7rNNr06NQ==",
      "requires": {
-        "@vue/reactivity": "3.3.13",
-        "@vue/shared": "3.3.13"
+        "@vue/reactivity": "3.4.3",
+        "@vue/shared": "3.4.3"
      }
    },
    "@vue/runtime-dom": {
-      "version": "3.3.13",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.3.13.tgz",
-      "integrity": "sha512-JJkpE8R/hJKXqVTgUoODwS5wqKtOsmJPEqmp90PDVGygtJ4C0PtOkcEYXwhiVEmef6xeXcIlrT3Yo5aQ4qkHhQ==",
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.3.tgz",
+      "integrity": "sha512-wrsprg7An5Ec+EhPngWdPuzkp0BEUxAKaQtN9dPU/iZctPyD9aaXmVtehPJerdQxQale6gEnhpnfywNw3zOv2A==",
      "requires": {
-        "@vue/runtime-core": "3.3.13",
-        "@vue/shared": "3.3.13",
+        "@vue/runtime-core": "3.4.3",
+        "@vue/shared": "3.4.3",
        "csstype": "^3.1.3"
      },
      "dependencies": {
@ -2941,18 +2928,18 @@
      }
    },
    "@vue/server-renderer": {
-      "version": "3.3.13",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.3.13.tgz",
-      "integrity": "sha512-vSnN+nuf6iSqTL3Qgx/9A+BT+0Zf/VJOgF5uMZrKjYPs38GMYyAU1coDyBNHauehXDaP+zl73VhwWv0vBRBHcg==",
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.3.tgz",
+      "integrity": "sha512-BUxt8oVGMKKsqSkM1uU3d3Houyfy4WAc2SpSQRebNd+XJGATVkW/rO129jkyL+kpB/2VRKzE63zwf5RtJ3XuZw==",
      "requires": {
-        "@vue/compiler-ssr": "3.3.13",
-        "@vue/shared": "3.3.13"
+        "@vue/compiler-ssr": "3.4.3",
+        "@vue/shared": "3.4.3"
      }
    },
    "@vue/shared": {
-      "version": "3.3.13",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.13.tgz",
-      "integrity": "sha512-/zYUwiHD8j7gKx2argXEMCUXVST6q/21DFU0sTfNX0URJroCe3b1UF6vLJ3lQDfLNIiiRl2ONp7Nh5UVWS6QnA=="
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.3.tgz",
+      "integrity": "sha512-rIwlkkP1n4uKrRzivAKPZIEkHiuwY5mmhMJ2nZKCBLz8lTUlE73rQh4n1OnnMurXt1vcUNyH4ZPfdh8QweTjpQ=="
    },
    "acorn": {
      "version": "8.11.2",
@ -3080,6 +3067,11 @@
        "ms": "2.1.2"
      }
    },
+    "entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw=="
+    },
    "esbuild": {
      "version": "0.19.6",
      "resolved": "https://registry.npmmirror.com/esbuild/-/esbuild-0.19.6.tgz",
@ -3615,9 +3607,9 @@
      }
    },
    "sass": {
-      "version": "1.69.5",
-      "resolved": "https://registry.npmmirror.com/sass/-/sass-1.69.5.tgz",
-      "integrity": "sha512-qg2+UCJibLr2LCVOt3OlPhr/dqVHWOa9XtZf2OjbLs/T4VPSJ00udtgJxH3neXZm+QqX8B+3cU7RaLqp1iVfcQ==",
+      "version": "1.69.6",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.69.6.tgz",
+      "integrity": "sha512-qbRr3k9JGHWXCvZU77SD2OTwUlC+gNT+61JOLcmLm+XqH4h/5D+p4IIsxvpkB89S9AwJOyb5+rWNpIucaFxSFQ==",
      "requires": {
        "chokidar": ">=3.0.0 <4.0.0",
        "immutable": "^4.0.0",
@ -3861,15 +3853,15 @@
      }
    },
    "vue": {
-      "version": "3.3.13",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.3.13.tgz",
-      "integrity": "sha512-LDnUpQvDgsfc0u/YgtAgTMXJlJQqjkxW1PVcOnJA5cshPleULDjHi7U45pl2VJYazSSvLH8UKcid/kzH8I0a0Q==",
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.3.tgz",
+      "integrity": "sha512-GjN+culMAGv/mUbkIv8zMKItno8npcj5gWlXkSxf1SPTQf8eJ4A+YfHIvQFyL1IfuJcMl3soA7SmN1fRxbf/wA==",
      "requires": {
-        "@vue/compiler-dom": "3.3.13",
-        "@vue/compiler-sfc": "3.3.13",
-        "@vue/runtime-dom": "3.3.13",
-        "@vue/server-renderer": "3.3.13",
-        "@vue/shared": "3.3.13"
+        "@vue/compiler-dom": "3.4.3",
+        "@vue/compiler-sfc": "3.4.3",
+        "@vue/runtime-dom": "3.4.3",
+        "@vue/server-renderer": "3.4.3",
+        "@vue/shared": "3.4.3"
      }
    },
    "vue-i18n": {
--- a/frontend/package.json
+++ b/frontend/package.json
@ -14,14 +14,14 @@
    "lodash": "^4.17.21",
    "monaco-editor": "^0.45.0",
    "pinia": "^2.1.7",
-    "sass": "^1.69.5",
-    "vue": "^3.3.13",
+    "sass": "^1.69.6",
+    "vue": "^3.4.3",
    "vue-i18n": "^9.8.0",
    "xterm": "^5.3.0",
    "xterm-addon-fit": "^0.8.0"
  },
  "devDependencies": {
-    "@vitejs/plugin-vue": "^5.0.0",
+    "@vitejs/plugin-vue": "^5.0.2",
    "naive-ui": "^2.36.0",
    "prettier": "^3.1.1",
    "unplugin-auto-import": "^0.17.3",
--- a/frontend/package.json.md5
+++ b/frontend/package.json.md5
@ -1 +1 @@
-a7afaaabdb93bf768bac18ddb6d0494a
+bae1706c9c117d6fcce2d7bd649e127f
--- a/frontend/src/components/common/FileSaveInput.vue
+++ b/frontend/src/components/common/FileSaveInput.vue
@ -33,12 +33,12 @@ const handleSaveFile = async () => {
 <template>
    <n-input-group>
        <n-input
-            :value="props.value"
            :disabled="props.disabled"
            :placeholder="placeholder"
+            :value="props.value"
            clearable
-            @input="onInput"
-            @clear="onClear" />
+            @clear="onClear"
+            @input="onInput" />
        <n-button :disabled="props.disabled" :focusable="false" @click="handleSaveFile">...</n-button>
    </n-input-group>
 </template>
--- a/frontend/src/components/common/RedisTypeSelector.vue
+++ b/frontend/src/components/common/RedisTypeSelector.vue
@ -10,6 +10,10 @@ const props = defineProps({
        type: String,
        default: 'ALL',
    },
+    placement: {
+        type: String,
+        default: 'bottom-start',
+    },
 })

 const emit = defineEmits(['update:value', 'select'])
@ -80,6 +84,7 @@ const handleSelect = (select) => {
 <template>
    <n-dropdown
        :options="options"
+        :placement="props.placement"
        :render-icon="renderIcon"
        :render-label="renderLabel"
        show-arrow
--- a/frontend/src/components/content_value/ContentEntryEditor.vue
+++ b/frontend/src/components/content_value/ContentEntryEditor.vue
@ -176,8 +176,8 @@ const onSave = () => {
                        :border="true"
                        :content="displayValue"
                        :language="viewLanguage"
-                        :show-line-num="prefStore.showLineNum"
                        :show-folding="prefStore.showFolding"
+                        :show-line-num="prefStore.showLineNum"
                        class="flex-item-expand"
                        @input="onInput"
                        @reset="onInput"
--- a/frontend/src/components/content_value/ContentMonitor.vue
+++ b/frontend/src/components/content_value/ContentMonitor.vue
@ -107,7 +107,7 @@ const onCleanLog = () => {

 <template>
    <div class="content-log content-container fill-height flex-box-v">
-        <n-form class="flex-item" label-align="left" label-placement="left" label-width="auto">
+        <n-form class="flex-item" label-align="left" label-placement="left" label-width="auto" size="small">
            <n-form-item :label="$t('monitor.actions')">
                <n-space>
                    <n-button
@ -129,10 +129,28 @@ const onCleanLog = () => {
                        {{ $t('monitor.stop') }}
                    </n-button>
                    <n-button-group>
-                        <icon-button :icon="Copy" border t-tooltip="monitor.copy_log" @click="onCopyLog" />
-                        <icon-button :icon="Export" border t-tooltip="monitor.save_log" @click="onExportLog" />
+                        <icon-button
+                            :icon="Copy"
+                            border
+                            size="18"
+                            stroke-width="3.5"
+                            t-tooltip="monitor.copy_log"
+                            @click="onCopyLog" />
+                        <icon-button
+                            :icon="Export"
+                            border
+                            size="18"
+                            stroke-width="3.5"
+                            t-tooltip="monitor.save_log"
+                            @click="onExportLog" />
                    </n-button-group>
-                    <icon-button :icon="Delete" border t-tooltip="monitor.clean_log" @click="onCleanLog" />
+                    <icon-button
+                        :icon="Delete"
+                        border
+                        size="18"
+                        stroke-width="3.5"
+                        t-tooltip="monitor.clean_log"
+                        @click="onCleanLog" />
                </n-space>
            </n-form-item>
            <n-form-item :label="$t('monitor.search')">
--- a/frontend/src/components/content_value/ContentSearchInput.vue
+++ b/frontend/src/components/content_value/ContentSearchInput.vue
@ -130,6 +130,7 @@ defineExpose({
            :size="small ? 16 : 20"
            border
            small
+            stroke-width="4"
            t-tooltip="interface.full_search"
            @click="onFullSearch" />
        <n-button v-else :disabled="hasMatch && !hasFilter" :focusable="false" @click="onFullSearch">
--- a/frontend/src/components/content_value/ContentValueString.vue
+++ b/frontend/src/components/content_value/ContentValueString.vue
@ -213,8 +213,8 @@ defineExpose({
                :content="displayValue"
                :language="viewLanguage"
                :loading="props.loading"
-                :show-line-num="prefStore.showLineNum"
                :show-folding="prefStore.showFolding"
+                :show-line-num="prefStore.showLineNum"
                class="flex-item-expand"
                style="height: 100%"
                @input="onInput"
--- a/frontend/src/components/icons/Checkbox.vue
+++ b/frontend/src/components/icons/Checkbox.vue
@ -0,0 +1,34 @@
+<script setup>
+const props = defineProps({
+    strokeWidth: {
+        type: [Number, String],
+        default: 3,
+    },
+})
+</script>
+
+<template>
+    <svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+        <g clip-path="url(#icon-25e88d94353e4f38)">
+            <path
+                d="M42 20V39C42 40.6569 40.6569 42 39 42H9C7.34315 42 6 40.6569 6 39V9C6 7.34315 7.34315 6 9 6H30"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="4" />
+            <path
+                d="M16 20L26 28L41 7"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="4" />
+        </g>
+        <defs>
+            <clipPath id="icon-25e88d94353e4f38">
+                <rect fill="currentColor" height="48" width="48" />
+            </clipPath>
+        </defs>
+    </svg>
+</template>
+
+<style lang="scss" scoped></style>
--- a/frontend/src/components/icons/Down.vue
+++ b/frontend/src/components/icons/Down.vue
@ -0,0 +1,21 @@
+<script setup>
+const props = defineProps({
+    strokeWidth: {
+        type: [Number, String],
+        default: 3,
+    },
+})
+</script>
+
+<template>
+    <svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+        <path
+            :stroke-width="props.strokeWidth"
+            d="M36 18L24 30L12 18"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round" />
+    </svg>
+</template>
+
+<style lang="scss" scoped></style>
--- a/frontend/src/components/icons/ListCheckbox.vue
+++ b/frontend/src/components/icons/ListCheckbox.vue
@ -1,63 +0,0 @@
-<script setup>
-const props = defineProps({
-    strokeWidth: {
-        type: [Number, String],
-        default: 3,
-    },
-})
-</script>
-
-<template>
-    <svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
-        <path clip-rule="evenodd" d="M20 24H44H20Z" fill="none" fill-rule="evenodd" />
-        <path
-            :stroke-width="props.strokeWidth"
-            d="M20 24H44"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round" />
-        <path clip-rule="evenodd" d="M20 38H44H20Z" fill="none" fill-rule="evenodd" />
-        <path
-            :stroke-width="props.strokeWidth"
-            d="M20 38H44"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round" />
-        <path clip-rule="evenodd" d="M20 10H44H20Z" fill="none" fill-rule="evenodd" />
-        <path
-            :stroke-width="props.strokeWidth"
-            d="M20 10H44"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round" />
-        <rect
-            :stroke-width="props.strokeWidth"
-            fill="none"
-            height="8"
-            stroke="currentColor"
-            stroke-linejoin="round"
-            width="8"
-            x="4"
-            y="34" />
-        <rect
-            :stroke-width="props.strokeWidth"
-            fill="none"
-            height="8"
-            stroke="currentColor"
-            stroke-linejoin="round"
-            width="8"
-            x="4"
-            y="20" />
-        <rect
-            :stroke-width="props.strokeWidth"
-            fill="none"
-            height="8"
-            stroke="currentColor"
-            stroke-linejoin="round"
-            width="8"
-            x="4"
-            y="6" />
-    </svg>
-</template>
-
-<style lang="scss" scoped></style>
--- a/frontend/src/components/icons/Plus.vue
+++ b/frontend/src/components/icons/Plus.vue
@ -11,13 +11,13 @@ const props = defineProps({
    <svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
        <path
            :stroke-width="props.strokeWidth"
-            d="M24.0605 10L24.0239 38"
+            d="M24 8L24 40"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round" />
        <path
            :stroke-width="props.strokeWidth"
-            d="M10 24L38 24"
+            d="M8 24L40 24"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round" />
--- a/frontend/src/components/sidebar/BrowserPane.vue
+++ b/frontend/src/components/sidebar/BrowserPane.vue
@ -20,12 +20,13 @@ import RedisTypeSelector from '@/components/common/RedisTypeSelector.vue'
 import { types } from '@/consts/support_redis_type.js'
 import Plus from '@/components/icons/Plus.vue'
 import useConnectionStore from 'stores/connections.js'
-import ListCheckbox from '@/components/icons/ListCheckbox.vue'
 import Close from '@/components/icons/Close.vue'
 import More from '@/components/icons/More.vue'
 import Export from '@/components/icons/Export.vue'
 import { ConnectionType } from '@/consts/connection_type.js'
 import Import from '@/components/icons/Import.vue'
+import Down from '@/components/icons/Down.vue'
+import Checkbox from '@/components/icons/Checkbox.vue'

 const props = defineProps({
    server: String,
@ -63,18 +64,20 @@ const dbSelectOptions = computed(() => {
    })
 })

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

 const loadProgress = computed(() => {
    const db = browserStore.getDatabase(props.server, props.db)
@ -258,27 +261,36 @@ onMounted(() => onReload())
                    <redis-type-selector v-model:value="filterForm.type" @update:value="onSelectFilterType" />
                </template>
            </content-search-input>
+            <icon-button
+                :disabled="loading"
+                :icon="Refresh"
+                border
+                size="18"
+                small
+                stroke-width="4"
+                t-tooltip="interface.reload"
+                @click="onReload" />
            <n-button-group>
-                <n-tooltip :show-arrow="false">
-                    <template #trigger>
-                        <n-button :disabled="loading" :focusable="false" bordered size="small" @click="onReload">
-                            <template #icon>
-                                <n-icon :component="Refresh" size="18" />
-                            </template>
-                        </n-button>
-                    </template>
-                    {{ $t('interface.reload') }}
-                </n-tooltip>
-                <n-tooltip :show-arrow="false">
-                    <template #trigger>
-                        <n-button :disabled="loading" :focusable="false" bordered size="small" @click="onAddKey">
-                            <template #icon>
-                                <n-icon :component="Plus" size="18" />
-                            </template>
-                        </n-button>
-                    </template>
-                    {{ $t('interface.new_key') }}
-                </n-tooltip>
+                <icon-button
+                    :disabled="loading"
+                    :icon="Plus"
+                    border
+                    size="18"
+                    small
+                    stroke-width="4"
+                    t-tooltip="interface.new_key"
+                    @click="onAddKey" />
+                <n-dropdown
+                    :options="addOptions"
+                    placement="bottom-end"
+                    style="min-width: 130px"
+                    @select="onSelectOptions">
+                    <n-button :focusable="false" size="small" style="padding: 0 3px">
+                        <n-icon size="10">
+                            <down :stroke-width="6" />
+                        </n-icon>
+                    </n-button>
+                </n-dropdown>
            </n-button-group>
        </div>

@ -343,12 +355,16 @@ onMounted(() => onReload())
                    <div class="flex-item-expand" style="min-width: 10px" />
                    <icon-button
                        :button-class="['nav-pane-func-btn']"
-                        :icon="ListCheckbox"
+                        :icon="Checkbox"
                        :stroke-width="3.5"
                        size="20"
                        t-tooltip="interface.check_mode"
                        @click="inCheckState = true" />
-                    <n-dropdown :options="moreOptions" placement="top-end" @select="onSelectOptions">
+                    <n-dropdown
+                        :options="moreOptions"
+                        placement="top-end"
+                        style="min-width: 130px"
+                        @select="onSelectOptions">
                        <icon-button :button-class="['nav-pane-func-btn']" :icon="More" :stroke-width="3.5" size="20" />
                    </n-dropdown>
                </div>
--- a/frontend/src/components/sidebar/BrowserTree.vue
+++ b/frontend/src/components/sidebar/BrowserTree.vue
@ -171,12 +171,13 @@ const renderContextLabel = (option) => {
 /**
 *
 * @param {string} key
+ * @param {boolean} [toggle]
 */
-const expandKey = (key) => {
+const expandKey = (key, toggle) => {
    const idx = indexOf(expandedKeys.value, key)
    if (idx === -1) {
        expandedKeys.value.push(key)
-    } else {
+    } else if (toggle !== false) {
        expandedKeys.value.splice(idx, 1)
    }
 }
@ -562,7 +563,7 @@ watchEffect(
        if (!props.checkMode) {
            tabStore.setCheckedKeys(props.server)
        } else {
-            expandKey(`${ConnectionType.RedisDB}`)
+            expandKey(`${ConnectionType.RedisDB}`, false)
        }
    },
    { flush: 'post' },
--- a/frontend/src/langs/en-us.json
+++ b/frontend/src/langs/en-us.json
@ -299,7 +299,7 @@
    "upgrade": {
      "title": "New Version Available",
      "import_expire_title": "Expiration",
-      "import_expire": "Try Import Expiration Time",
+      "import_expire": "Include Expiration Time",
      "new_version_tip": "A new version({ver}) is available. Download now?",
      "no_update": "You're update to date",
      "download_now": "Download",
--- a/frontend/src/langs/zh-cn.json
+++ b/frontend/src/langs/zh-cn.json
@ -285,7 +285,7 @@
    "import": {
      "name": "导入数据",
      "import_expire_title": "过期时间",
-      "import_expire": "尝试同时导入过期时间",
+      "import_expire": "包含键过期时间",
      "import": "确认导入",
      "open_csv_file": "导入文件路径",
      "open_csv_file_tip": "选择需要导入的文件",
--- a/frontend/src/utils/theme.js
+++ b/frontend/src/utils/theme.js
@ -19,6 +19,8 @@ export const themeOverrides = {
    },
    Button: {
        heightMedium: '32px',
+        paddingSmall: '0 8px',
+        paddingMedium: '0 12px',
    },
    Tag: {
        // borderRadius: '3px'
@ -61,6 +63,13 @@ export const themeOverrides = {
        thPaddingSmall: '6px 8px',
        tdPaddingSmall: '6px 8px',
    },
+    Dropdown: {
+        borderRadius: '5px',
+        optionIconSizeMedium: '18px',
+        padding: '6px 2px',
+        optionColorHover: '#D33A31',
+        optionTextColorHover: '#FFF',
+    },
 }

 /**
--- a/screenshots/dark_en.png
+++ b/screenshots/dark_en.png
--- a/screenshots/dark_zh.png
+++ b/screenshots/dark_zh.png
--- a/screenshots/light_en.png
+++ b/screenshots/light_en.png
--- a/screenshots/light_zh.png
+++ b/screenshots/light_zh.png
Author	SHA1	Message	Date
Lykin	84b73bd5e7	fix: root key may not expand after switch to check mode in key tree	2024-01-03 01:08:11 +08:00
Lykin	5e970982a2	style: update style of context menu	2024-01-03 00:32:52 +08:00
Lykin	535fdabb0c	doc: update screenshots	2024-01-02 17:16:12 +08:00
Lykin	df5a577919	style: adjust button style	2024-01-02 16:14:56 +08:00
Lykin	554b2b9f72	fix: move "import data" to dropdown of add button	2024-01-02 15:43:50 +08:00
Lykin	bb676b974a	chore: upgrade vue to 3.4.x	2024-01-02 00:35:13 +08:00
Lykin	660fc0cf93	fix: database switching may do nothing	2024-01-02 00:34:48 +08:00