feat: add "tree view" and "list view" switch for keys browser

frontend/src/components/common/SwitchButton.vue

@@ -24,6 +24,10 @@ const props = defineProps({
         type: [Number, String],
         default: 3,
     },
+    unselectStrokeWidth: {
+        type: [Number, String],
+        default: 3,
+    },
 })
 
 const emit = defineEmits(['update:value'])
@@ -46,7 +50,9 @@ const handleSwitch = (idx) => {
                 <n-button :tertiary="i !== props.value" :focusable="false" :size="props.size" @click="handleSwitch(i)">
                     <template #icon>
                         <n-icon :size="props.iconSize">
-                                <component :is="icon" :stroke-width="props.strokeWidth" />
+                            <component
+                                :is="icon"
+                                :stroke-width="i !== props.value ? props.unselectStrokeWidth : props.strokeWidth" />
                         </n-icon>
                     </template>
                 </n-button>

frontend/src/components/icons/ListView.vue

@@ -0,0 +1,48 @@
+<script setup>
+const props = defineProps({
+    strokeWidth: {
+        type: [Number, String],
+        default: 3,
+    },
+})
+</script>
+
+<template>
+    <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M9 42C11.2091 42 13 40.2091 13 38C13 35.7909 11.2091 34 9 34C6.79086 34 5 35.7909 5 38C5 40.2091 6.79086 42 9 42Z"
+            stroke="currentColor"
+            :stroke-width="props.strokeWidth"
+            stroke-linejoin="round" />
+        <path
+            d="M9 14C11.2091 14 13 12.2092 13 10C13 7.79086 11.2091 6 9 6C6.79086 6 5 7.79086 5 10C5 12.2092 6.79086 14 9 14Z"
+            stroke="currentColor"
+            :stroke-width="props.strokeWidth"
+            stroke-linejoin="round" />
+        <path
+            d="M9 28C11.2091 28 13 26.2092 13 24C13 21.7908 11.2091 20 9 20C6.79086 20 5 21.7908 5 24C5 26.2092 6.79086 28 9 28Z"
+            stroke="currentColor"
+            :stroke-width="props.strokeWidth"
+            stroke-linejoin="round" />
+        <path
+            d="M21 24H43"
+            stroke="currentColor"
+            :stroke-width="props.strokeWidth"
+            stroke-linecap="round"
+            stroke-linejoin="round" />
+        <path
+            d="M21 38H43"
+            stroke="currentColor"
+            :stroke-width="props.strokeWidth"
+            stroke-linecap="round"
+            stroke-linejoin="round" />
+        <path
+            d="M21 10H43"
+            stroke="currentColor"
+            :stroke-width="props.strokeWidth"
+            stroke-linecap="round"
+            stroke-linejoin="round" />
+    </svg>
+</template>
+
+<style lang="scss" scoped></style>

frontend/src/components/icons/TreeView.vue

@@ -0,0 +1,57 @@
+<script setup>
+const props = defineProps({
+    strokeWidth: {
+        type: [Number, String],
+        default: 3,
+    },
+})
+</script>
+
+<template>
+    <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M38 20H18V28H38V20Z"
+            fill="none"
+            stroke="currentColor"
+            :stroke-width="props.strokeWidth"
+            stroke-linejoin="round" />
+        <path
+            d="M32 6H18V14H32V6Z"
+            fill="none"
+            stroke="currentColor"
+            :stroke-width="props.strokeWidth"
+            stroke-linejoin="round" />
+        <path
+            d="M44 34H18V42H44V34Z"
+            fill="none"
+            stroke="currentColor"
+            :stroke-width="props.strokeWidth"
+            stroke-linejoin="round" />
+        <path
+            d="M17 10H5"
+            stroke="currentColor"
+            :stroke-width="props.strokeWidth"
+            stroke-linecap="round"
+            stroke-linejoin="round" />
+        <path
+            d="M17 24H5"
+            stroke="currentColor"
+            :stroke-width="props.strokeWidth"
+            stroke-linecap="round"
+            stroke-linejoin="round" />
+        <path
+            d="M17 38H5"
+            stroke="currentColor"
+            :stroke-width="props.strokeWidth"
+            stroke-linecap="round"
+            stroke-linejoin="round" />
+        <path
+            d="M5 44V4"
+            stroke="currentColor"
+            :stroke-width="props.strokeWidth"
+            stroke-linecap="round"
+            stroke-linejoin="round" />
+    </svg>
+</template>
+
+<style lang="scss" scoped></style>

frontend/src/components/sidebar/BrowserPane.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { useThemeVars } from 'naive-ui'
+import { NIcon, useThemeVars } from 'naive-ui'
 import BrowserTree from './BrowserTree.vue'
 import IconButton from '@/components/common/IconButton.vue'
 import useTabStore from 'stores/tab.js'
@@ -13,6 +13,9 @@ import { types } from '@/consts/support_redis_type.js'
 import Search from '@/components/icons/Search.vue'
 import Unlink from '@/components/icons/Unlink.vue'
 import Status from '@/components/icons/Status.vue'
+import SwitchButton from '@/components/common/SwitchButton.vue'
+import ListView from '@/components/icons/ListView.vue'
+import TreeView from '@/components/icons/TreeView.vue'
 
 const themeVars = useThemeVars()
 const dialogStore = useDialogStore()
@@ -59,6 +62,12 @@ const filterTypeOptions = computed(() => {
     })
     return options
 })
+
+const viewType = ref(0)
+const onSwitchView = (selectView) => {
+    const { server } = tabStore.currentTab
+    connectionStore.switchKeyView(server, selectView)
+}
 </script>
 
 <template>
@@ -82,9 +91,16 @@ const filterTypeOptions = computed(() => {
         </div>
         <!-- bottom function bar -->
         <div class="nav-pane-bottom flex-box-h">
+            <switch-button
+                v-model:value="viewType"
+                :icons="[TreeView, ListView]"
+                :t-tooltips="['interface.tree_view', 'interface.list_view']"
+                stroke-width="4"
+                unselect-stroke-width="3"
+                @update:value="onSwitchView" />
             <icon-button :icon="Status" size="20" stroke-width="4" t-tooltip="interface.status" @click="onInfo" />
             <icon-button :icon="Refresh" size="20" stroke-width="4" t-tooltip="interface.reload" @click="onRefresh" />
-            <div class="flex-item-expand"></div>
+            <div class="flex-item-expand" />
             <icon-button
                 :icon="Unlink"
                 size="20"

frontend/src/components/sidebar/BrowserTree.vue

@@ -28,6 +28,7 @@ import LoadAll from '@/components/icons/LoadAll.vue'
 
 const props = defineProps({
     server: String,
+    keyView: String,
 })
 
 const i18n = useI18n()
@@ -53,14 +54,6 @@ const selectedKeys = computed(() => {
 const data = computed(() => {
     const dbs = get(connectionStore.databases, props.server, [])
     return dbs
-    // return [
-    //     {
-    //         key: `${props.server}`,
-    //         label: props.server,
-    //         type: ConnectionType.Server,
-    //         children: dbs,
-    //     },
-    // ]
 })
 
 const backgroundColor = computed(() => {
@@ -490,7 +483,7 @@ const renderIconMenu = (items) => {
         {
             align: 'center',
             inline: true,
-            size: 2,
+            size: 3,
             wrapItem: false,
             wrap: false,
             style: 'margin-right: 5px',

frontend/src/components/sidebar/ConnectionTree.vue

@@ -166,7 +166,7 @@ const renderIconMenu = (items) => {
         {
             align: 'center',
             inline: true,
-            size: 2,
+            size: 3,
             wrapItem: false,
             wrap: false,
             style: 'margin-right: 5px',

frontend/src/consts/key_view_type.js

@@ -0,0 +1,8 @@
+/**
+ * all types of redis key viewing
+ * @enum {number}
+ */
+export const KeyViewType = {
+    Tree: 0,
+    List: 1,
+}

frontend/src/langs/en.json

@@ -48,6 +48,8 @@
     "disconnect_all": "Disconnect all",
     "status": "Status",
     "filter": "Filter",
+    "tree_view": "Tree View",
+    "list_view": "List View",
     "sort_conn": "Sort Connections",
     "new_conn_title": "New Connection",
     "open_db": "Open Database",

frontend/src/langs/zh-cn.json

@@ -48,6 +48,8 @@
     "disconnect_all": "断开所有连接",
     "status": "状态",
     "filter": "筛选",
+    "tree_view": "树视图",
+    "list_view": "列表视图",
     "sort_conn": "调整连接顺序",
     "new_conn_title": "新建连接",
     "open_db": "打开数据库",

frontend/src/stores/connections.js

@@ -51,6 +51,8 @@ import { ConnectionType } from '@/consts/connection_type.js'
 import useTabStore from './tab.js'
 import { types } from '@/consts/support_redis_type.js'
 import { decodeRedisKey, nativeRedisKey } from '@/utils/key_convert.js'
+import { KeyViewType } from '@/consts/key_view_type.js'
+import { nextTick } from 'vue'
 
 const useConnectionStore = defineStore('connections', {
     /**
@@ -117,10 +119,12 @@ const useConnectionStore = defineStore('connections', {
         connections: [], // all connections
         serverStats: {}, // current server status info
         serverProfile: {}, // all server profile
-        keyFilter: {}, // all key filters in opened connections group by server+db
+        keyFilter: {}, // all key filters in opened connections group by 'server+db'
-        typeFilter: {}, // all key type filters in opened connections group by server+db
+        typeFilter: {}, // all key type filters in opened connections group by 'server+db'
-        databases: {}, // all databases in opened connections group by server name
+        viewType: {}, // view type selection for all opened connections group by 'server'
-        nodeMap: {}, // all nodes in opened connections group by server#db and type/key
+        databases: {}, // all databases in opened connections group by 'server name'
+        nodeMap: {}, // all nodes in opened connections group by 'server#db' and 'type/key'
+        keySet: {}, // all keys set in opened connections group by 'server#db
     }),
     getters: {
         anyConnectionOpened() {
@@ -320,6 +324,38 @@ const useConnectionStore = defineStore('connections', {
             return null
         },
 
+        /**
+         * switch key view
+         * @param {string} connName
+         * @param {number} viewType
+         */
+        async switchKeyView(connName, viewType) {
+            if (viewType !== KeyViewType.Tree && viewType !== KeyViewType.List) {
+                return
+            }
+
+            const t = get(this.viewType, connName, KeyViewType.Tree)
+            if (t === viewType) {
+                return
+            }
+
+            this.viewType[connName] = viewType
+            const dbs = get(this.databases, connName, [])
+            for (const dbItem of dbs) {
+                if (!dbItem.opened) {
+                    continue
+                }
+
+                dbItem.children = undefined
+                dbItem.keys = 0
+                const { db = 0 } = dbItem
+                this._getNodeMap(connName, db).clear()
+                const keys = this._getKeySet(connName, db)
+                this._addKeyNodes(connName, db, keys)
+                this._tidyNode(connName, db, '')
+            }
+        },
+
         /**
          * create a new connection or update current connection profile
          * @param {string} name set null if create a new connection
@@ -406,6 +442,7 @@ const useConnectionStore = defineStore('connections', {
             const dbs = []
             for (let i = 0; i < db.length; i++) {
                 this._getNodeMap(name, i).clear()
+                this._getKeySet(name, i).clear()
                 dbs.push({
                     key: `${name}/${db[i].name}`,
                     label: db[i].name,
@@ -438,6 +475,7 @@ const useConnectionStore = defineStore('connections', {
                 for (const db of dbs) {
                     this.removeKeyFilter(name, db.db)
                     this._getNodeMap(name, db.db).clear()
+                    this._getKeySet(name, db.db).clear()
                 }
             }
             this.removeKeyFilter(name, -1)
@@ -459,6 +497,8 @@ const useConnectionStore = defineStore('connections', {
             }
 
             this.databases = {}
+            this.nodeMap.clear()
+            this.keySet.clear()
             this.serverStats = {}
             const tabStore = useTabStore()
             tabStore.removeAllTab()
@@ -534,8 +574,8 @@ const useConnectionStore = defineStore('connections', {
          * @returns {Promise<void>}
          */
         async openDatabase(connName, db) {
-            const { match: filterPattern, type: keyType } = this.getKeyFilter(connName, db)
+            const { match: filterPattern, type: filterType } = this.getKeyFilter(connName, db)
-            const { data, success, msg } = await OpenDatabase(connName, db, filterPattern, keyType)
+            const { data, success, msg } = await OpenDatabase(connName, db, filterPattern, filterType)
             if (!success) {
                 throw new Error(msg)
             }
@@ -571,6 +611,7 @@ const useConnectionStore = defineStore('connections', {
             selDB.isLeaf = false
 
             this._getNodeMap(connName, db).clear()
+            this._getKeySet(connName, db).clear()
         },
 
         /**
@@ -588,6 +629,7 @@ const useConnectionStore = defineStore('connections', {
             selDB.opened = false
 
             this._getNodeMap(connName, db).clear()
+            this._getKeySet(connName, db).clear()
         },
 
         /**
@@ -752,30 +794,50 @@ const useConnectionStore = defineStore('connections', {
 
         /**
          * get node map
-         * @param connName
+         * @param {string} connName
-         * @param db
+         * @param {number} db
          * @returns {Map<string, DatabaseItem>}
          * @private
          */
         _getNodeMap(connName, db) {
-            if (this.nodeMap[`${connName}#${db}`] == null) {
+            if (!this.nodeMap.hasOwnProperty(`${connName}#${db}`)) {
                 this.nodeMap[`${connName}#${db}`] = new Map()
             }
             // construct a tree node list, the format of item key likes 'server/db#type/key'
             return this.nodeMap[`${connName}#${db}`]
         },
 
+        /**
+         * get all keys in a database
+         * @param {string} connName
+         * @param {number} db
+         * @return {Set<string|number[]>}
+         * @private
+         */
+        _getKeySet(connName, db) {
+            if (!this.keySet.hasOwnProperty(`${connName}#${db}`)) {
+                this.keySet[`${connName}#${db}`] = new Set()
+            }
+            // construct a key set
+            return this.keySet[`${connName}#${db}`]
+        },
+
         /**
          * remove keys in db
          * @param {string} connName
          * @param {number} db
-         * @param {Array<string|number[]>} keys
+         * @param {Array<string|number[]>|Set<string|number[]>} keys
          * @param {boolean} [sortInsert]
          * @return {{success: boolean, newKey: number, newLayer: number, replaceKey: number}}
          * @private
          */
         _addKeyNodes(connName, db, keys, sortInsert) {
-            const result = { success: false, newLayer: 0, newKey: 0, replaceKey: 0 }
+            const result = {
+                success: false,
+                newLayer: 0,
+                newKey: 0,
+                replaceKey: 0,
+            }
             if (isEmpty(keys)) {
                 return result
             }
@@ -789,11 +851,46 @@ const useConnectionStore = defineStore('connections', {
                 selDB.children = []
             }
             const nodeMap = this._getNodeMap(connName, db)
+            const keySet = this._getKeySet(connName, db)
             const rootChildren = selDB.children
+            const viewType = get(this.viewType, connName, KeyViewType.Tree)
+            if (viewType === KeyViewType.List) {
+                // construct list view data
                 for (const key of keys) {
                     const k = decodeRedisKey(key)
-                const binaryKey = k !== key
+                    const isBinaryKey = k !== key
-                const keyParts = binaryKey ? [nativeRedisKey(key)] : split(k, separator)
+                    const nodeKey = `${ConnectionType.RedisValue}/${nativeRedisKey(key)}`
+                    const replaceKey = nodeMap.has(nodeKey)
+                    const selectedNode = {
+                        key: `${connName}/db${db}#${nodeKey}`,
+                        label: k,
+                        db,
+                        keys: 0,
+                        redisKey: k,
+                        redisKeyCode: isBinaryKey ? key : undefined,
+                        type: ConnectionType.RedisValue,
+                        isLeaf: true,
+                    }
+                    nodeMap.set(nodeKey, selectedNode)
+                    keySet.add(key)
+                    if (!replaceKey) {
+                        if (sortInsert) {
+                            const index = sortedIndexBy(rootChildren, selectedNode, 'key')
+                            rootChildren.splice(index, 0, selectedNode)
+                        } else {
+                            rootChildren.push(selectedNode)
+                        }
+                        result.newKey += 1
+                    } else {
+                        result.replaceKey += 1
+                    }
+                }
+            } else {
+                // construct tree view data
+                for (const key of keys) {
+                    const k = decodeRedisKey(key)
+                    const isBinaryKey = k !== key
+                    const keyParts = isBinaryKey ? [nativeRedisKey(key)] : split(k, separator)
                     const len = size(keyParts)
                     const lastIdx = len - 1
                     let handlePath = ''
@@ -817,9 +914,7 @@ const useConnectionStore = defineStore('connections', {
                                 }
                                 nodeMap.set(nodeKey, selectedNode)
                                 if (sortInsert) {
-                                const index = sortedIndexBy(children, selectedNode, (elem) => {
+                                    const index = sortedIndexBy(children, selectedNode, 'key')
-                                    return elem.key
-                                })
                                     children.splice(index, 0, selectedNode)
                                 } else {
                                     children.push(selectedNode)
@@ -834,20 +929,19 @@ const useConnectionStore = defineStore('connections', {
                             const replaceKey = nodeMap.has(nodeKey)
                             const selectedNode = {
                                 key: `${connName}/db${db}#${nodeKey}`,
-                            label: binaryKey ? k : keyParts[i],
+                                label: isBinaryKey ? k : keyParts[i],
                                 db,
                                 keys: 0,
                                 redisKey: handlePath,
-                            redisKeyCode: binaryKey ? key : undefined,
+                                redisKeyCode: isBinaryKey ? key : undefined,
                                 type: ConnectionType.RedisValue,
                                 isLeaf: true,
                             }
                             nodeMap.set(nodeKey, selectedNode)
+                            keySet.add(key)
                             if (!replaceKey) {
                                 if (sortInsert) {
-                                const index = sortedIndexBy(children, selectedNode, (elem) => {
+                                    const index = sortedIndexBy(children, selectedNode, 'key')
-                                    return elem.key > selectedNode.key
-                                })
                                     children.splice(index, 0, selectedNode)
                                 } else {
                                     children.push(selectedNode)
@@ -859,6 +953,7 @@ const useConnectionStore = defineStore('connections', {
                         }
                     }
                 }
+            }
             return result
         },
 
@@ -1408,8 +1503,9 @@ const useConnectionStore = defineStore('connections', {
             }
 
             const nodeMap = this._getNodeMap(connName, db)
+            const keySet = this._getKeySet(connName, db)
             if (isLayer === true) {
-                this._deleteChildrenKeyNodes(nodeMap, key)
+                this._deleteChildrenKeyNodes(nodeMap, keySet, key)
             }
             if (isEmpty(key)) {
                 // clear all key nodes
@@ -1447,12 +1543,18 @@ const useConnectionStore = defineStore('connections', {
 
                         if (isEmpty(anceNode.children)) {
                             nodeMap.delete(`${ConnectionType.RedisKey}/${anceKey}`)
+                            keySet.delete(anceNode.redisKeyCode || anceNode.redisKey)
                         } else {
                             break
                         }
                     } else {
                         // last one, remove from db node
                         remove(dbRoot.children, { type: ConnectionType.RedisKey, redisKey: keyParts[0] })
+                        const node = nodeMap.get(`${ConnectionType.RedisValue}/${keyParts[0]}`)
+                        if (node != null) {
+                            nodeMap.delete(`${ConnectionType.RedisValue}/${keyParts[0]}`)
+                            keySet.delete(node.redisKeyCode || node.redisKey)
+                        }
                     }
                 }
             }
@@ -1463,12 +1565,14 @@ const useConnectionStore = defineStore('connections', {
         /**
          * delete node and all it's children from nodeMap
          * @param {Map<string, DatabaseItem>} nodeMap
+         * @param {Set<string|number[]>} keySet
          * @param {string} [key] clean nodeMap if key is empty
          * @private
          */
-        _deleteChildrenKeyNodes(nodeMap, key) {
+        _deleteChildrenKeyNodes(nodeMap, keySet, key) {
             if (isEmpty(key)) {
                 nodeMap.clear()
+                keySet.clear()
             } else {
                 const mapKey = `${ConnectionType.RedisKey}/${key}`
                 const node = nodeMap.get(mapKey)
@@ -1477,13 +1581,15 @@ const useConnectionStore = defineStore('connections', {
                         if (!nodeMap.delete(`${ConnectionType.RedisValue}/${child.redisKey}`)) {
                             console.warn('delete:', `${ConnectionType.RedisValue}/${child.redisKey}`)
                         }
+                        keySet.delete(child.redisKeyCode || child.redisKey)
                     } else if (child.type === ConnectionType.RedisKey) {
-                        this._deleteChildrenKeyNodes(nodeMap, child.redisKey)
+                        this._deleteChildrenKeyNodes(nodeMap, keySet, child.redisKey)
                     }
                 }
                 if (!nodeMap.delete(mapKey)) {
                     console.warn('delete map key', mapKey)
                 }
+                keySet.delete(node.redisKeyCode || node.redisKey)
             }
         },