feat: add a root node for multiple selection and deselection in multi-selection mode

frontend/src/components/sidebar/BrowserTree.vue

@@ -40,6 +40,7 @@ const props = defineProps({
 const themeVars = useThemeVars()
 const render = useRender()
 const i18n = useI18n()
+/** @type {Ref<UnwrapRef<string[]>>} */
 const expandedKeys = ref([])
 const connectionStore = useConnectionStore()
 const browserStore = useBrowserStore()
@@ -47,15 +48,6 @@ const prefStore = usePreferencesStore()
 const tabStore = useTabStore()
 const dialogStore = useDialogStore()
 
-watchEffect(
-    () => {
-        if (!props.checkMode) {
-            tabStore.setCheckedKeys(props.server)
-        }
-    },
-    { flush: 'post' },
-)
-
 /**
  *
  * @type {ComputedRef<string[]>}
@@ -82,9 +74,7 @@ const checkedKeys = computed(() => {
 })
 
 const data = computed(() => {
-    // const dbs = get(browserStore.databases, props.server, [])
-    // return dbs
-    return browserStore.getKeyList(props.server)
+    return browserStore.getKeyStruct(props.server, props.checkMode)
 })
 
 const backgroundColor = computed(() => {
@@ -178,6 +168,10 @@ const renderContextLabel = (option) => {
     return h('div', { class: 'context-menu-item' }, option.label)
 }
 
+/**
+ *
+ * @param {string} key
+ */
 const expandKey = (key) => {
     const idx = indexOf(expandedKeys.value, key)
     if (idx === -1) {
@@ -563,6 +557,17 @@ const handleOutsideContextMenu = () => {
     contextMenuParam.show = false
 }
 
+watchEffect(
+    () => {
+        if (!props.checkMode) {
+            tabStore.setCheckedKeys(props.server)
+        } else {
+            expandKey(`${ConnectionType.RedisDB}`)
+        }
+    },
+    { flush: 'post' },
+)
+
 // the NTree node may get incorrect height after change data
 // add key property to force refresh the component and then everything back to normal
 const treeKey = ref(0)

frontend/src/objects/redisServerState.js

@@ -112,7 +112,7 @@ export class RedisServerState {
             // create root node
             root = new RedisNodeItem({
                 key: rootKey,
-                label: this.separator,
+                label: `db${this.db}`,
                 type: ConnectionType.RedisDB,
                 children: [],
             })

frontend/src/stores/browser.js

@@ -148,17 +148,21 @@ const useBrowserStore = defineStore('browser', {
         },
 
         /**
-         * get key list in current database
-         * @param server
+         * get key struct in current database
+         * @param {string} server
+         * @param {boolean} [includeRoot]
          * @return {RedisNodeItem[]}
          */
-        getKeyList(server) {
+        getKeyStruct(server, includeRoot) {
             /** @type {RedisServerState} **/
             const serverInst = this.servers[server]
             let rootNode = null
             if (serverInst != null) {
                 rootNode = serverInst.getRoot()
             }
+            if (includeRoot === true) {
+                return [rootNode]
+            }
             return get(rootNode, 'children', [])
         },
 

frontend/src/stores/tab.js

@@ -29,8 +29,8 @@ const useTabStore = defineStore('tab', {
 
     /**
      * @typedef {Object} CheckedKey
-     * @property {string[]} key
-     * @property {string[]} redisKey
+     * @property {string} key
+     * @property {string} [redisKey]
      */
 
     /**