fix: collapse all keys after server reload

refactor: expose context menu handler for outside reference caller

frontend/src/components/sidebar/BrowserPane.vue

@@ -4,7 +4,7 @@ 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'
-import { computed, reactive } from 'vue'
+import { computed, reactive, ref } from 'vue'
 import { get } from 'lodash'
 import Delete from '@/components/icons/Delete.vue'
 import Refresh from '@/components/icons/Refresh.vue'
@@ -19,6 +19,7 @@ const themeVars = useThemeVars()
 const dialogStore = useDialogStore()
 const tabStore = useTabStore()
 const currentName = computed(() => get(tabStore.currentTab, 'name', ''))
+const browserTreeRef = ref(null)
 /**
  *
  * @type {ComputedRef<{server: string, db: number, key: string}>}
@@ -35,23 +36,13 @@ const onNewKey = () => {
 
 const i18n = useI18n()
 const connectionStore = useConnectionStore()
-const confirmDialog = useConfirmDialog()
 const message = useMessage()
 const onDeleteKey = () => {
-    const { server, db, key } = currentSelect.value
+    browserTreeRef.value?.handleSelectContextMenu('value_remove')
-    confirmDialog.warning(i18n.t('remove_tip', { name: key }), () => {
-        connectionStore.deleteKey(server, db, key).then((success) => {
-            if (success) {
-                message.success(i18n.t('delete_key_succ', { key }))
-            }
-        })
-    })
 }
 
 const onRefresh = () => {
-    connectionStore.openConnection(currentSelect.value.server, true).then(() => {
+    browserTreeRef.value?.handleSelectContextMenu('server_reload')
-        message.success(i18n.t('reload_succ'))
-    })
 }
 
 const filterForm = reactive({
@@ -75,7 +66,7 @@ const filterTypeOptions = computed(() => {
 
 <template>
     <div class="nav-pane-container flex-box-v">
-        <browser-tree :server="currentName" />
+        <browser-tree ref="browserTreeRef" :server="currentName" />
 
         <div v-if="filterForm.showFilter" class="nav-pane-bottom flex-box-h">
             <n-input-group>

frontend/src/components/sidebar/BrowserTree.vue

@@ -506,75 +506,79 @@ const onLoadTree = async (node) => {
 }
 
 const confirmDialog = useConfirmDialog()
-const handleSelectContextMenu = (key) => {
+defineExpose({
-    contextMenuParam.show = false
+    handleSelectContextMenu: (key) => {
-    const selectedKey = get(selectedKeys.value, 0)
+        contextMenuParam.show = false
-    if (selectedKey == null) {
+        const selectedKey = get(selectedKeys.value, 0)
-        return
+        if (selectedKey == null) {
-    }
+            return
-    const node = connectionStore.getNode(selectedKey)
+        }
-    const { db, key: nodeKey, redisKey } = node || {}
+        const node = connectionStore.getNode(selectedKey)
-    switch (key) {
+        const { db, key: nodeKey, redisKey } = node || {}
-        case 'server_reload':
+        switch (key) {
-            connectionStore.openConnection(props.server, true).then(() => {
+            case 'server_reload':
-                message.success(i18n.t('reload_succ'))
+                expandedKeys.value = [props.server]
-            })
+                tabStore.setSelectedKeys(props.server)
-            break
+                connectionStore.openConnection(props.server, true).then(() => {
-        case 'server_close':
+                    message.success(i18n.t('reload_succ'))
-            connectionStore.closeConnection(props.server)
-            break
-        case 'db_open':
-            nextTick().then(() => expandKey(nodeKey))
-            break
-        case 'db_reload':
-            connectionStore.reopenDatabase(props.server, db)
-            break
-        case 'db_close':
-            remove(expandedKeys.value, (k) => k === `${props.server}/db${db}`)
-            connectionStore.closeDatabase(props.server, db)
-            break
-        case 'db_newkey':
-        case 'key_newkey':
-            dialogStore.openNewKeyDialog(redisKey, props.server, db)
-            break
-        case 'db_filter':
-            const { match: pattern, type } = connectionStore.getKeyFilter(props.server, db)
-            dialogStore.openKeyFilterDialog(props.server, db, pattern, type)
-            break
-        case 'key_reload':
-            connectionStore.loadKeys(props.server, db, redisKey)
-            break
-        case 'value_reload':
-            connectionStore.loadKeyValue(props.server, db, redisKey)
-            break
-        case 'key_remove':
-            dialogStore.openDeleteKeyDialog(props.server, db, isEmpty(redisKey) ? '*' : redisKey + ':*')
-            break
-        case 'value_remove':
-            confirmDialog.warning(i18n.t('remove_tip', { name: redisKey }), () => {
-                connectionStore.deleteKey(props.server, db, redisKey).then((success) => {
-                    if (success) {
-                        message.success(i18n.t('delete_key_succ', { key: redisKey }))
-                    }
                 })
-            })
+                break
-            break
+            case 'server_close':
-        case 'key_copy':
+                connectionStore.closeConnection(props.server)
-        case 'value_copy':
+                break
-            ClipboardSetText(redisKey)
+            case 'db_open':
-                .then((succ) => {
+                nextTick().then(() => expandKey(nodeKey))
-                    if (succ) {
+                break
-                        message.success(i18n.t('copy_succ'))
+            case 'db_reload':
-                    }
+                connectionStore.reopenDatabase(props.server, db)
+                break
+            case 'db_close':
+                remove(expandedKeys.value, (k) => k === `${props.server}/db${db}`)
+                connectionStore.closeDatabase(props.server, db)
+                break
+            case 'db_newkey':
+            case 'key_newkey':
+                dialogStore.openNewKeyDialog(redisKey, props.server, db)
+                break
+            case 'db_filter':
+                const { match: pattern, type } = connectionStore.getKeyFilter(props.server, db)
+                dialogStore.openKeyFilterDialog(props.server, db, pattern, type)
+                break
+            case 'key_reload':
+                connectionStore.loadKeys(props.server, db, redisKey)
+                break
+            case 'value_reload':
+                connectionStore.loadKeyValue(props.server, db, redisKey)
+                break
+            case 'key_remove':
+                dialogStore.openDeleteKeyDialog(props.server, db, isEmpty(redisKey) ? '*' : redisKey + ':*')
+                break
+            case 'value_remove':
+                confirmDialog.warning(i18n.t('remove_tip', { name: redisKey }), () => {
+                    connectionStore.deleteKey(props.server, db, redisKey).then((success) => {
+                        if (success) {
+                            message.success(i18n.t('delete_key_succ', { key: redisKey }))
+                        }
+                    })
                 })
-                .catch((e) => {
+                break
-                    message.error(e.message)
+            case 'key_copy':
-                })
+            case 'value_copy':
-            break
+                ClipboardSetText(redisKey)
-        default:
+                    .then((succ) => {
-            console.warn('TODO: handle context menu:' + key)
+                        if (succ) {
-    }
+                            message.success(i18n.t('copy_succ'))
-}
+                        }
+                    })
+                    .catch((e) => {
+                        message.error(e.message)
+                    })
+                break
+            default:
+                console.warn('TODO: handle context menu:' + key)
+        }
+    },
+})
 
 const handleOutsideContextMenu = () => {
     contextMenuParam.show = false