From e2f33af1c775430c18845c30ee2d171c8f5ca86f Mon Sep 17 00:00:00 2001
From: Lykin <137850705+tiny-craft@users.noreply.github.com>
Date: Fri, 1 Dec 2023 17:59:04 +0800
Subject: [PATCH] feat: the browser pane is now set to display only a single
 database

feat: add search input in browser pane
---
 backend/services/browser_service.go           |  16 +-
 frontend/src/components/common/IconButton.vue |   3 +
 .../components/common/RedisTypeSelector.vue   |  83 +++++
 .../src/components/common/RedisTypeTag.vue    |   4 +-
 .../content_value/ContentSearchInput.vue      |  36 +-
 .../components/dialogs/KeyFilterDialog.vue    |   6 +-
 .../src/components/dialogs/NewKeyDialog.vue   |  18 +-
 frontend/src/components/icons/LoadAll.vue     |   4 +-
 frontend/src/components/icons/More.vue        |  12 +-
 frontend/src/components/icons/Plus.vue        |  27 ++
 frontend/src/components/icons/Search.vue      |   8 +-
 .../src/components/sidebar/BrowserPane.vue    | 313 +++++++++++++-----
 .../src/components/sidebar/BrowserTree.vue    | 291 +++-------------
 .../src/components/sidebar/ConnectionTree.vue |  22 +-
 frontend/src/langs/en-us.json                 |   2 +-
 frontend/src/langs/pt-br.json                 |   3 +-
 frontend/src/langs/zh-cn.json                 |   2 +-
 frontend/src/stores/browser.js                | 143 ++++----
 frontend/src/styles/style.scss                |  20 +-
 frontend/src/utils/glob_pattern.js            |  13 +
 frontend/src/utils/render.js                  |  20 ++
 21 files changed, 609 insertions(+), 437 deletions(-)
 create mode 100644 frontend/src/components/common/RedisTypeSelector.vue
 create mode 100644 frontend/src/components/icons/Plus.vue
 create mode 100644 frontend/src/utils/glob_pattern.js
 create mode 100644 frontend/src/utils/render.js

diff --git a/backend/services/browser_service.go b/backend/services/browser_service.go
index 8369bf9..e83f8e4 100644
--- a/backend/services/browser_service.go
+++ b/backend/services/browser_service.go
@@ -390,7 +390,20 @@ func (b *browserService) ServerInfo(name string) (resp types.JSResp) {
 // @param path contain connection name and db name
 func (b *browserService) OpenDatabase(connName string, db int, match string, keyType string) (resp types.JSResp) {
 	b.setClientCursor(connName, db, 0)
-	return b.LoadNextKeys(connName, db, match, keyType)
+
+	item, err := b.getRedisClient(connName, db)
+	if err != nil {
+		resp.Msg = err.Error()
+		return
+	}
+	client, ctx := item.client, item.ctx
+	maxKeys := b.loadDBSize(ctx, client)
+
+	resp.Success = true
+	resp.Data = map[string]any{
+		"maxKeys": maxKeys,
+	}
+	return
 }
 
 // scan keys
@@ -433,6 +446,7 @@ func (b *browserService) scanKeys(ctx context.Context, client redis.UniversalCli
 		// cluster mode
 		var mutex sync.Mutex
 		err = cluster.ForEachMaster(ctx, func(ctx context.Context, cli *redis.Client) error {
+			// FIXME: BUG? can not fully load in cluster mode? maybe remove the shared "cursor"
 			return scan(ctx, cli, func(k []any) {
 				mutex.Lock()
 				keys = append(keys, k...)
diff --git a/frontend/src/components/common/IconButton.vue b/frontend/src/components/common/IconButton.vue
index e632d46..4692da5 100644
--- a/frontend/src/components/common/IconButton.vue
+++ b/frontend/src/components/common/IconButton.vue
@@ -26,6 +26,7 @@ const props = defineProps({
     disabled: Boolean,
     buttonStyle: [String, Object],
     buttonClass: [String, Object],
+    small: Boolean,
 })
 
 const hasTooltip = computed(() => {
@@ -42,6 +43,7 @@ const hasTooltip = computed(() => {
                 :disabled="disabled"
                 :focusable="false"
                 :loading="loading"
+                :size="small ? 'small' : ''"
                 :style="props.buttonStyle"
                 :text="!border"
                 :type="type"
@@ -64,6 +66,7 @@ const hasTooltip = computed(() => {
         :disabled="disabled"
         :focusable="false"
         :loading="loading"
+        :size="small ? 'small' : ''"
         :style="props.buttonStyle"
         :text="!border"
         :type="type"
diff --git a/frontend/src/components/common/RedisTypeSelector.vue b/frontend/src/components/common/RedisTypeSelector.vue
new file mode 100644
index 0000000..c6abe5d
--- /dev/null
+++ b/frontend/src/components/common/RedisTypeSelector.vue
@@ -0,0 +1,83 @@
+<script setup>
+import { computed, h } from 'vue'
+import { useThemeVars } from 'naive-ui'
+import { types, typesBgColor, typesColor } from '@/consts/support_redis_type.js'
+import { get, map, toUpper } from 'lodash'
+
+const props = defineProps({
+    value: {
+        type: String,
+        default: 'ALL',
+    },
+})
+
+const emit = defineEmits(['update:value', 'select'])
+
+const options = computed(() => {
+    const opts = map(types, (v) => ({
+        label: v,
+        key: v,
+    }))
+    return [{ label: 'ALL', key: 'ALL' }, ...opts]
+})
+
+const themeVars = useThemeVars()
+const renderIcon = (option) => {
+    if (option.key === props.value) {
+        const backgroundColor = get(typesColor, option.key, themeVars.value.textColor3)
+        return h('div', { style: { borderRadius: '999px', width: '10px', height: '10px', backgroundColor } }, '')
+    }
+}
+
+const renderLabel = (option) => {
+    const color = get(typesColor, option.key, '')
+    return h('div', { style: { color, fontWeight: '450' } }, option.label)
+}
+
+const fontColor = computed(() => {
+    return get(typesColor, props.value, '')
+})
+
+const backgroundColor = computed(() => {
+    return get(typesBgColor, props.value, '')
+})
+
+const displayValue = computed(() => {
+    return get(types, toUpper(props.value), 'ALL')
+})
+
+const handleSelect = (select) => {
+    if (props.value !== select) {
+        emit('update:value', select)
+        emit('select', select)
+    }
+}
+</script>
+
+<template>
+    <n-dropdown
+        :options="options"
+        :render-icon="renderIcon"
+        :render-label="renderLabel"
+        show-arrow
+        @select="handleSelect">
+        <n-tag
+            :bordered="true"
+            :color="{ color: backgroundColor, textColor: fontColor }"
+            class="redis-tag"
+            size="medium"
+            strong>
+            {{ displayValue }}
+        </n-tag>
+    </n-dropdown>
+</template>
+
+<style lang="scss" scoped>
+.redis-tag {
+    padding: 0 10px;
+}
+
+:deep(.dropdown-type-item) {
+    padding: 10px;
+}
+</style>
diff --git a/frontend/src/components/common/RedisTypeTag.vue b/frontend/src/components/common/RedisTypeTag.vue
index 3bba2de..eb9573d 100644
--- a/frontend/src/components/common/RedisTypeTag.vue
+++ b/frontend/src/components/common/RedisTypeTag.vue
@@ -12,7 +12,6 @@ const props = defineProps({
         default: 'STRING',
     },
     binaryKey: Boolean,
-    bordered: Boolean,
     size: String,
 })
 
@@ -27,9 +26,8 @@ const backgroundColor = computed(() => {
 
 <template>
     <n-tag
-        :bordered="props.bordered"
         :class="[props.size === 'small' ? 'redis-type-tag-small' : 'redis-type-tag']"
-        :color="{ color: backgroundColor, borderColor: fontColor, textColor: fontColor }"
+        :color="{ color: backgroundColor, textColor: fontColor }"
         :size="props.size"
         strong>
         {{ props.type }}
diff --git a/frontend/src/components/content_value/ContentSearchInput.vue b/frontend/src/components/content_value/ContentSearchInput.vue
index 9f5b958..3bba4ac 100644
--- a/frontend/src/components/content_value/ContentSearchInput.vue
+++ b/frontend/src/components/content_value/ContentSearchInput.vue
@@ -3,12 +3,21 @@ import { computed, reactive } from 'vue'
 import { debounce, isEmpty, trim } from 'lodash'
 import { NButton, NInput } from 'naive-ui'
 import IconButton from '@/components/common/IconButton.vue'
+import Help from '@/components/icons/Help.vue'
 
 const props = defineProps({
     fullSearchIcon: {
         type: [String, Object],
         default: null,
     },
+    debounceWait: {
+        type: Number,
+        default: 500,
+    },
+    small: {
+        type: Boolean,
+        default: false,
+    },
 })
 
 const emit = defineEmits(['filterChanged', 'matchChanged'])
@@ -42,7 +51,13 @@ const onFullSearch = () => {
 const _onInput = () => {
     emit('filterChanged', inputData.filter)
 }
-const onInput = debounce(_onInput, 500, { leading: true, trailing: true })
+const onInput = debounce(_onInput, props.debounceWait, { leading: true, trailing: true })
+
+const onKeyup = (evt) => {
+    if (evt.key === 'Enter') {
+        onFullSearch()
+    }
+}
 
 const onClearFilter = () => {
     inputData.filter = ''
@@ -67,13 +82,17 @@ defineExpose({
 <template>
     <n-input-group>
         <slot name="prepend" />
+
         <n-input
             v-model:value="inputData.filter"
             :placeholder="$t('interface.filter')"
+            :size="props.small ? 'small' : ''"
             clearable
             @clear="onClearFilter"
-            @input="onInput">
+            @input="onInput"
+            @keyup.enter="onKeyup">
             <template #prefix>
+                <slot name="prefix" />
                 <n-tooltip v-if="hasMatch">
                     <template #trigger>
                         <n-tag closable size="small" @close="onClearMatch">
@@ -83,12 +102,25 @@ defineExpose({
                     {{ $t('interface.full_search_result', { pattern: inputData.match }) }}
                 </n-tooltip>
             </template>
+            <template #suffix>
+                <n-tooltip trigger="hover">
+                    <template #trigger>
+                        <n-icon :component="Help" />
+                    </template>
+                    <div class="text-block" style="max-width: 600px">
+                        {{ $t('dialogue.filter.filter_pattern_tip') }}
+                    </div>
+                </n-tooltip>
+            </template>
         </n-input>
+
         <icon-button
             v-if="props.fullSearchIcon"
             :disabled="hasMatch && !hasFilter"
             :icon="props.fullSearchIcon"
+            :size="small ? 16 : 20"
             border
+            small
             t-tooltip="interface.full_search"
             @click="onFullSearch" />
         <n-button v-else :disabled="hasMatch && !hasFilter" :focusable="false" @click="onFullSearch">
diff --git a/frontend/src/components/dialogs/KeyFilterDialog.vue b/frontend/src/components/dialogs/KeyFilterDialog.vue
index 65382a0..38b4f76 100644
--- a/frontend/src/components/dialogs/KeyFilterDialog.vue
+++ b/frontend/src/components/dialogs/KeyFilterDialog.vue
@@ -40,11 +40,7 @@ watch(
 )
 
 const browserStore = useBrowserStore()
-const onConfirm = () => {
-    const { server, db, type, pattern } = filterForm
-    browserStore.setKeyFilter(server, db, pattern, type)
-    browserStore.reopenDatabase(server, db)
-}
+const onConfirm = () => {}
 
 const onClose = () => {
     dialogStore.closeKeyFilterDialog()
diff --git a/frontend/src/components/dialogs/NewKeyDialog.vue b/frontend/src/components/dialogs/NewKeyDialog.vue
index d46d784..4102c17 100644
--- a/frontend/src/components/dialogs/NewKeyDialog.vue
+++ b/frontend/src/components/dialogs/NewKeyDialog.vue
@@ -109,14 +109,16 @@ const onAdd = async () => {
             $message.error(err)
         }
     })
-    await subFormRef.value?.validate((errs) => {
-        const err = get(errs, '0.0.message')
-        if (err != null) {
-            $message.error(err)
-        } else {
-            $message.error(i18n.t('dialogue.spec_field_required', { key: i18n.t('dialogue.field.element') }))
-        }
-    })
+    if (subFormRef.value?.validate) {
+        await subFormRef.value?.validate((errs) => {
+            const err = get(errs, '0.0.message')
+            if (err != null) {
+                $message.error(err)
+            } else {
+                $message.error(i18n.t('dialogue.spec_field_required', { key: i18n.t('dialogue.field.element') }))
+            }
+        })
+    }
     try {
         const { server, db, key, type, ttl } = newForm
         let { value } = newForm
diff --git a/frontend/src/components/icons/LoadAll.vue b/frontend/src/components/icons/LoadAll.vue
index 81dd160..2448cd1 100644
--- a/frontend/src/components/icons/LoadAll.vue
+++ b/frontend/src/components/icons/LoadAll.vue
@@ -12,13 +12,13 @@ const props = defineProps({
         <path
             :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"
+            d="M23.9999 31L12 19L19.9999 19L19.9999 8L27.9999 8L27.9999 19L35.9999 19L23.9999 31Z"
             fill="none"
             fill-rule="evenodd"
             stroke="currentColor"
             stroke-linecap="round"
             stroke-linejoin="round" />
-        <path :stroke-width="props.strokeWidth" d="M42 37L6 37" stroke="currentColor" stroke-linecap="round" />
+        <path :stroke-width="props.strokeWidth" d="M42 38L6 38" stroke="currentColor" stroke-linecap="round" />
     </svg>
 </template>
 
diff --git a/frontend/src/components/icons/More.vue b/frontend/src/components/icons/More.vue
index 139aa18..6692bf8 100644
--- a/frontend/src/components/icons/More.vue
+++ b/frontend/src/components/icons/More.vue
@@ -9,15 +9,9 @@ const props = defineProps({
 
 <template>
     <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-linejoin="round" />
-        <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" />
+        <circle :r="props.strokeWidth" cx="12" cy="24" fill="currentColor" />
+        <circle :r="props.strokeWidth" cx="24" cy="24" fill="currentColor" />
+        <circle :r="props.strokeWidth" cx="36" cy="24" fill="currentColor" />
     </svg>
 </template>
 
diff --git a/frontend/src/components/icons/Plus.vue b/frontend/src/components/icons/Plus.vue
new file mode 100644
index 0000000..58d0670
--- /dev/null
+++ b/frontend/src/components/icons/Plus.vue
@@ -0,0 +1,27 @@
+<script setup>
+const props = defineProps({
+    strokeWidth: {
+        type: [Number, String],
+        default: 4,
+    },
+})
+</script>
+
+<template>
+    <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"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round" />
+        <path
+            :stroke-width="props.strokeWidth"
+            d="M10 24L38 24"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round" />
+    </svg>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/frontend/src/components/icons/Search.vue b/frontend/src/components/icons/Search.vue
index a2c2161..0b7cf67 100644
--- a/frontend/src/components/icons/Search.vue
+++ b/frontend/src/components/icons/Search.vue
@@ -17,13 +17,7 @@ const props = defineProps({
             stroke-linejoin="round" />
         <path
             :stroke-width="props.strokeWidth"
-            d="M26.657 14.3431C25.2093 12.8954 23.2093 12 21.0001 12C18.791 12 16.791 12.8954 15.3433 14.3431"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round" />
-        <path
-            :stroke-width="props.strokeWidth"
-            d="M33.2216 33.2217L41.7069 41.707"
+            d="M33 33L42 42"
             stroke="currentColor"
             stroke-linecap="round"
             stroke-linejoin="round" />
diff --git a/frontend/src/components/sidebar/BrowserPane.vue b/frontend/src/components/sidebar/BrowserPane.vue
index 951ca63..9f6ae5e 100644
--- a/frontend/src/components/sidebar/BrowserPane.vue
+++ b/frontend/src/components/sidebar/BrowserPane.vue
@@ -3,54 +3,171 @@ import { useThemeVars } from 'naive-ui'
 import BrowserTree from './BrowserTree.vue'
 import IconButton from '@/components/common/IconButton.vue'
 import useTabStore from 'stores/tab.js'
-import { computed, reactive, ref } from 'vue'
-import { get } from 'lodash'
+import { computed, onMounted, reactive, ref, unref, watch } from 'vue'
+import { get, map } from 'lodash'
 import Refresh from '@/components/icons/Refresh.vue'
 import useDialogStore from 'stores/dialog.js'
 import { useI18n } from 'vue-i18n'
-import { types } from '@/consts/support_redis_type.js'
 import Search from '@/components/icons/Search.vue'
 import Unlink from '@/components/icons/Unlink.vue'
-import Filter from '@/components/icons/Filter.vue'
 import ContentSearchInput from '@/components/content_value/ContentSearchInput.vue'
+import LoadAll from '@/components/icons/LoadAll.vue'
+import LoadList from '@/components/icons/LoadList.vue'
+import Delete from '@/components/icons/Delete.vue'
+import useBrowserStore from 'stores/browser.js'
+import { useRender } from '@/utils/render.js'
+import RedisTypeSelector from '@/components/common/RedisTypeSelector.vue'
+import { types } from '@/consts/support_redis_type.js'
+import Plus from '@/components/icons/Plus.vue'
 
 const themeVars = useThemeVars()
+const i18n = useI18n()
 const dialogStore = useDialogStore()
+// const prefStore = usePreferencesStore()
 const tabStore = useTabStore()
+const browserStore = useBrowserStore()
+const render = useRender()
 const currentName = computed(() => get(tabStore.currentTab, 'name', ''))
 const browserTreeRef = ref(null)
+const loading = ref(false)
+const fullyLoaded = ref(false)
 
-const onInfo = () => {
-    browserTreeRef.value?.handleSelectContextMenu('server_info')
+const selectedDB = computed(() => {
+    return browserStore.selectedDatabases[currentName.value] || 0
+})
+
+const dbSelectOptions = computed(() => {
+    const dblist = browserStore.getDBList(currentName.value)
+    return map(dblist, (db) => {
+        if (selectedDB.value === db.db) {
+            return {
+                value: db.db,
+                label: `db${db.db} (${db.keys}/${db.maxKeys})`,
+            }
+        }
+        return {
+            value: db.db,
+            label: `db${db.db} (${db.maxKeys})`,
+        }
+    })
+})
+
+const loadProgress = computed(() => {
+    const db = browserStore.getDatabase(currentName.value, selectedDB.value)
+    if (db.maxKeys <= 0) {
+        return 100
+    }
+    return (db.keys * 100) / db.maxKeys
+})
+
+const onReload = async () => {
+    try {
+        loading.value = true
+        tabStore.setSelectedKeys(currentName.value)
+        const db = selectedDB.value
+        browserStore.closeDatabase(currentName.value, db)
+        browserTreeRef.value?.resetExpandKey(currentName.value, db)
+
+        let matchType = unref(filterForm.type)
+        if (!types.hasOwnProperty(matchType)) {
+            matchType = ''
+        }
+        browserStore.setKeyFilter(currentName.value, {
+            type: matchType,
+            pattern: unref(filterForm.pattern),
+        })
+        await browserStore.openDatabase(currentName.value, db)
+        fullyLoaded.value = await browserStore.loadMoreKeys(currentName.value, db)
+        // $message.success(i18n.t('dialogue.reload_succ'))
+    } catch (e) {
+        console.warn(e)
+    } finally {
+        loading.value = false
+    }
+}
+
+const onAddKey = () => {
+    dialogStore.openNewKeyDialog('', currentName.value, selectedDB.value)
+}
+
+const onLoadMore = async () => {
+    try {
+        loading.value = true
+        fullyLoaded.value = await browserStore.loadMoreKeys(currentName.value, selectedDB.value)
+    } catch (e) {
+        $message.error(e.message)
+    } finally {
+        loading.value = false
+    }
+}
+
+const onLoadAll = async () => {
+    try {
+        loading.value = true
+        await browserStore.loadAllKeys(currentName.value, selectedDB.value)
+        fullyLoaded.value = true
+    } catch (e) {
+        $message.error(e.message)
+    } finally {
+        loading.value = false
+    }
+}
+
+const onFlush = () => {
+    dialogStore.openFlushDBDialog(currentName.value, selectedDB.value)
 }
 
-const i18n = useI18n()
 const onDisconnect = () => {
-    browserTreeRef.value?.handleSelectContextMenu('server_close')
+    browserStore.closeConnection(currentName.value)
 }
 
-const onRefresh = () => {
-    browserTreeRef.value?.handleSelectContextMenu('server_reload')
+const handleSelectDB = async (db, prevDB) => {
+    // watch 'browserStore.openedDB[currentName.value]' instead
 }
 
 const filterForm = reactive({
-    showFilter: false,
     type: '',
     pattern: '',
+    filter: '',
 })
+const onSelectFilterType = (select) => {
+    onReload()
+}
 
-const filterTypeOptions = computed(() => {
-    const options = Object.keys(types).map((t) => ({
-        value: t,
-        label: t,
-    }))
-    options.splice(0, 0, {
-        value: '',
-        label: i18n.t('common.all'),
-    })
-    return options
-})
+const onFilterInput = (val) => {
+    filterForm.filter = val
+}
 
+const onMatchInput = (matchVal, filterVal) => {
+    filterForm.pattern = matchVal
+    filterForm.filter = filterVal
+    onReload()
+}
+
+watch(
+    () => browserStore.openedDB[currentName.value],
+    async (db, prevDB) => {
+        if (db === undefined) {
+            return
+        }
+
+        try {
+            loading.value = true
+            browserStore.closeDatabase(currentName.value, prevDB)
+            browserStore.setKeyFilter(currentName.value, {})
+            await browserStore.openDatabase(currentName.value, db)
+            browserTreeRef.value?.resetExpandKey(currentName.value, db)
+            fullyLoaded.value = await browserStore.loadMoreKeys(currentName.value, db)
+            browserTreeRef.value?.refreshTree()
+        } catch (e) {
+            $message.error(e.message)
+        } finally {
+            loading.value = false
+        }
+    },
+)
+
+onMounted(() => onReload())
 // forbid dynamic switch key view due to performance issues
 // const viewType = ref(0)
 // const onSwitchView = (selectView) => {
@@ -61,73 +178,110 @@ const filterTypeOptions = computed(() => {
 
 <template>
     <div class="nav-pane-container flex-box-v">
-        <browser-tree ref="browserTreeRef" :server="currentName" />
-        s
+        <!-- top function bar -->
+        <div class="flex-box-h nav-pane-func">
+            <content-search-input
+                :debounce-wait="1000"
+                :full-search-icon="Search"
+                small
+                @filter-changed="onFilterInput"
+                @match-changed="onMatchInput">
+                <template #prepend>
+                    <redis-type-selector v-model:value="filterForm.type" @update:value="onSelectFilterType" />
+                </template>
+            </content-search-input>
+            <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>
+            </n-button-group>
+        </div>
+
+        <!-- loaded progress -->
+        <n-progress
+            :border-radius="0"
+            :color="fullyLoaded ? '#0000' : themeVars.primaryColor"
+            :height="2"
+            :percentage="loadProgress"
+            :processing="loading"
+            :show-indicator="false"
+            status="success"
+            type="line" />
+
+        <!-- tree view -->
+        <browser-tree
+            ref="browserTreeRef"
+            :full-loaded="fullyLoaded"
+            :loading="loading && loadProgress <= 0"
+            :pattern="filterForm.filter"
+            :server="currentName" />
         <!-- bottom function bar -->
         <div class="nav-pane-bottom flex-box-v">
             <!--            <switch-button-->
             <!--                v-model:value="viewType"-->
             <!--                :icons="[TreeView, ListView]"-->
             <!--                :t-tooltips="['interface.tree_view', 'interface.list_view']"-->
-            <!--                stroke-width="4"-->
+            <!--                :stroke-width="3.5"-->
             <!--                unselect-stroke-width="3"-->
             <!--                @update:value="onSwitchView" />-->
-            <!--            <icon-button :icon="Status" size="20" stroke-width="4" t-tooltip="interface.status" @click="onInfo" />-->
-            <div
-                v-show="filterForm.showFilter"
-                class="flex-box-h nav-pane-func"
-                style="padding-left: 3px; padding-right: 3px">
-                <!--                <n-input-group v-show="filterForm.showFilter">-->
-                <!--                    <n-select-->
-                <!--                        v-model:value="filterForm.type"-->
-                <!--                        :consistent-menu-width="false"-->
-                <!--                        :options="filterTypeOptions"-->
-                <!--                        style="width: 120px" />-->
-                <!--                    <n-input clearable placeholder="">-->
-                <!--                        <template #prefix></template>-->
-                <!--                    </n-input>-->
-                <!--                    <n-button :focusable="false" ghost>-->
-                <!--                        <template #icon>-->
-                <!--                            <n-icon :component="Search" />-->
-                <!--                        </template>-->
-                <!--                    </n-button>-->
-                <!--                </n-input-group>-->
-                <content-search-input :full-search-icon="Search">
-                    <template #prepend>
-                        <n-select
-                            v-model:value="filterForm.type"
-                            :consistent-menu-width="false"
-                            :options="filterTypeOptions"
-                            style="width: 120px" />
-                    </template>
-                </content-search-input>
-            </div>
             <div class="flex-box-h nav-pane-func">
-                <icon-button
-                    :button-class="{
-                        'filter-on': filterForm.showFilter,
-                        'filter-off': !filterForm.showFilter,
-                        'toggle-btn': true,
-                        'nav-pane-func-btn': true,
-                    }"
-                    :icon="Filter"
-                    size="20"
-                    stroke-width="4"
-                    t-tooltip="interface.filter_key"
-                    @click="filterForm.showFilter = !filterForm.showFilter" />
+                <n-select
+                    v-model:value="browserStore.openedDB[currentName]"
+                    :consistent-menu-width="false"
+                    :filter="(pattern, option) => option.value.toString() === pattern"
+                    :options="dbSelectOptions"
+                    filterable
+                    size="small"
+                    style="min-width: 100px; max-width: 200px"
+                    @update:value="handleSelectDB" />
                 <icon-button
                     :button-class="['nav-pane-func-btn']"
-                    :icon="Refresh"
+                    :disabled="fullyLoaded"
+                    :icon="LoadList"
+                    :loading="loading"
+                    :stroke-width="3.5"
                     size="20"
-                    stroke-width="4"
-                    t-tooltip="interface.reload"
-                    @click="onRefresh" />
+                    t-tooltip="interface.load_more"
+                    @click="onLoadMore" />
+                <icon-button
+                    :button-class="['nav-pane-func-btn']"
+                    :disabled="fullyLoaded"
+                    :icon="LoadAll"
+                    :loading="loading"
+                    :stroke-width="3.5"
+                    size="20"
+                    t-tooltip="interface.load_all"
+                    @click="onLoadAll" />
                 <div class="flex-item-expand" />
                 <icon-button
                     :button-class="['nav-pane-func-btn']"
-                    :icon="Unlink"
+                    :icon="Delete"
+                    :stroke-width="3.5"
+                    size="20"
+                    t-tooltip="interface.flush_db"
+                    @click="onFlush" />
+                <icon-button
+                    :button-class="['nav-pane-func-btn']"
+                    :icon="Unlink"
+                    :stroke-width="3.5"
                     size="20"
-                    stroke-width="4"
                     t-tooltip="interface.disconnect"
                     @click="onDisconnect" />
             </div>
@@ -136,21 +290,30 @@ const filterTypeOptions = computed(() => {
 </template>
 
 <style lang="scss" scoped>
+@import '@/styles/style';
+
 :deep(.toggle-btn) {
     border-style: solid;
     border-width: 1px;
 }
 
 :deep(.filter-on) {
-    border-color: v-bind('themeVars.borderColor');
-    background-color: v-bind('themeVars.borderColor');
+    border-color: v-bind('themeVars.iconColorDisabled');
+    background-color: v-bind('themeVars.iconColorDisabled');
 }
 
 :deep(.filter-off) {
     border-color: #0000;
 }
 
+.nav-pane-top {
+    //@include bottom-shadow(0.1);
+    color: v-bind('themeVars.iconColor');
+    border-bottom: v-bind('themeVars.borderColor') 1px solid;
+}
+
 .nav-pane-bottom {
+    @include top-shadow(0.1);
     color: v-bind('themeVars.iconColor');
     border-top: v-bind('themeVars.borderColor') 1px solid;
 }
diff --git a/frontend/src/components/sidebar/BrowserTree.vue b/frontend/src/components/sidebar/BrowserTree.vue
index 6d04d70..35774aa 100644
--- a/frontend/src/components/sidebar/BrowserTree.vue
+++ b/frontend/src/components/sidebar/BrowserTree.vue
@@ -1,7 +1,7 @@
 <script setup>
-import { computed, h, nextTick, onMounted, reactive, ref } from 'vue'
+import { computed, h, nextTick, reactive, ref } from 'vue'
 import { ConnectionType } from '@/consts/connection_type.js'
-import { NIcon, NSpace, NTag, useThemeVars } from 'naive-ui'
+import { NIcon, NSpace, useThemeVars } from 'naive-ui'
 import Key from '@/components/icons/Key.vue'
 import Binary from '@/components/icons/Binary.vue'
 import Database from '@/components/icons/Database.vue'
@@ -12,30 +12,29 @@ import CopyLink from '@/components/icons/CopyLink.vue'
 import Add from '@/components/icons/Add.vue'
 import Layer from '@/components/icons/Layer.vue'
 import Delete from '@/components/icons/Delete.vue'
-import Connect from '@/components/icons/Connect.vue'
 import useDialogStore from 'stores/dialog.js'
 import { ClipboardSetText } from 'wailsjs/runtime/runtime.js'
 import useConnectionStore from 'stores/connections.js'
-import Unlink from '@/components/icons/Unlink.vue'
 import Filter from '@/components/icons/Filter.vue'
-import Close from '@/components/icons/Close.vue'
-import { typesBgColor, typesColor } from '@/consts/support_redis_type.js'
 import useTabStore from 'stores/tab.js'
 import IconButton from '@/components/common/IconButton.vue'
 import { parseHexColor } from '@/utils/rgb.js'
 import LoadList from '@/components/icons/LoadList.vue'
 import LoadAll from '@/components/icons/LoadAll.vue'
 import useBrowserStore from 'stores/browser.js'
+import { useRender } from '@/utils/render.js'
 
 const props = defineProps({
     server: String,
     keyView: String,
+    loading: Boolean,
+    pattern: String,
+    fullLoaded: Boolean,
 })
 
 const themeVars = useThemeVars()
+const render = useRender()
 const i18n = useI18n()
-const loading = ref(false)
-const loadingConnections = ref(false)
 const expandedKeys = ref([props.server])
 const connectionStore = useConnectionStore()
 const browserStore = useBrowserStore()
@@ -55,8 +54,9 @@ const selectedKeys = computed(() => {
 })
 
 const data = computed(() => {
-    const dbs = get(browserStore.databases, props.server, [])
-    return dbs
+    // const dbs = get(browserStore.databases, props.server, [])
+    // return dbs
+    return browserStore.getKeyList(props.server)
 })
 
 const backgroundColor = computed(() => {
@@ -74,90 +74,44 @@ const contextMenuParam = reactive({
     y: 0,
     options: null,
 })
-const renderIcon = (icon) => {
-    return () => {
-        return h(NIcon, null, {
-            default: () => h(icon),
-        })
-    }
-}
+
 const menuOptions = {
-    [ConnectionType.Server]: () => {
-        return [
-            {
-                key: 'server_reload',
-                label: i18n.t('interface.reload'),
-                icon: renderIcon(Refresh),
-            },
-            {
-                key: 'server_close',
-                label: i18n.t('interface.disconnect'),
-                icon: renderIcon(Unlink),
-            },
-        ]
-    },
     [ConnectionType.RedisDB]: ({ opened }) => {
         if (opened) {
             return [
-                {
-                    key: 'db_reload',
-                    label: i18n.t('interface.reload'),
-                    icon: renderIcon(Refresh),
-                },
-                {
-                    key: 'db_newkey',
-                    label: i18n.t('interface.new_key'),
-                    icon: renderIcon(Add),
-                },
                 {
                     key: 'db_filter',
                     label: i18n.t('interface.filter_key'),
-                    icon: renderIcon(Filter),
+                    icon: render.renderIcon(Filter),
                 },
                 {
                     type: 'divider',
                     key: 'd1',
                 },
-                {
-                    key: 'db_flush',
-                    label: i18n.t('interface.flush_db'),
-                    icon: renderIcon(Delete),
-                },
                 {
                     type: 'divider',
                     key: 'd2',
                 },
-                {
-                    key: 'db_close',
-                    label: i18n.t('interface.close_db'),
-                    icon: renderIcon(Close),
-                },
             ]
         } else {
-            return [
-                {
-                    key: 'db_open',
-                    label: i18n.t('interface.open_db'),
-                    icon: renderIcon(Connect),
-                },
-            ]
+            return []
         }
     },
     [ConnectionType.RedisKey]: () => [
         // {
         //     key: 'key_reload',
         //     label: i18n.t('interface.reload'),
-        //     icon: renderIcon(Refresh),
+        //     icon: render.renderIcon(Refresh),
         // },
         {
             key: 'key_newkey',
             label: i18n.t('interface.new_key'),
-            icon: renderIcon(Add),
+            icon: render.renderIcon(Add),
         },
         {
             key: 'key_copy',
             label: i18n.t('interface.copy_path'),
-            icon: renderIcon(CopyLink),
+            icon: render.renderIcon(CopyLink),
         },
         {
             type: 'divider',
@@ -166,19 +120,19 @@ const menuOptions = {
         {
             key: 'key_remove',
             label: i18n.t('interface.batch_delete_key'),
-            icon: renderIcon(Delete),
+            icon: render.renderIcon(Delete),
         },
     ],
     [ConnectionType.RedisValue]: () => [
         {
             key: 'value_reload',
             label: i18n.t('interface.reload'),
-            icon: renderIcon(Refresh),
+            icon: render.renderIcon(Refresh),
         },
         {
             key: 'value_copy',
             label: i18n.t('interface.copy_key'),
-            icon: renderIcon(CopyLink),
+            icon: render.renderIcon(CopyLink),
         },
         {
             type: 'divider',
@@ -187,7 +141,7 @@ const menuOptions = {
         {
             key: 'value_remove',
             label: i18n.t('interface.remove_key'),
-            icon: renderIcon(Delete),
+            icon: render.renderIcon(Delete),
         },
     ],
 }
@@ -196,15 +150,6 @@ const renderContextLabel = (option) => {
     return h('div', { class: 'context-menu-item' }, option.label)
 }
 
-onMounted(async () => {
-    try {
-        // TODO: Show loading list status
-        loadingConnections.value = true
-    } finally {
-        loadingConnections.value = false
-    }
-})
-
 const expandKey = (key) => {
     const idx = indexOf(expandedKeys.value, key)
     if (idx === -1) {
@@ -236,40 +181,11 @@ const handleSelectContextMenu = (key) => {
     const redisKey = rkc || rk
     const redisKeyName = !!rkc ? label : redisKey
     switch (key) {
-        case 'server_info':
-            tabStore.setSelectedKeys(props.server)
-            onUpdateSelectedKeys()
-            break
-        case 'server_reload':
-            expandedKeys.value = [props.server]
-            tabStore.setSelectedKeys(props.server)
-            browserStore.openConnection(props.server, true).then(() => {
-                $message.success(i18n.t('dialogue.reload_succ'))
-            })
-            break
-        case 'server_close':
-            browserStore.closeConnection(props.server)
-            break
-        case 'db_open':
-            nextTick().then(() => expandKey(nodeKey))
-            break
-        case 'db_reload':
-            resetExpandKey(props.server, db)
-            browserStore.reopenDatabase(props.server, db)
-            break
-        case 'db_close':
-            resetExpandKey(props.server, db, true)
-            browserStore.closeDatabase(props.server, db)
-            break
-        case 'db_flush':
-            dialogStore.openFlushDBDialog(props.server, db)
-            break
-        case 'db_newkey':
         case 'key_newkey':
             dialogStore.openNewKeyDialog(redisKey, props.server, db)
             break
         case 'db_filter':
-            const { match: pattern, type } = browserStore.getKeyFilter(props.server, db)
+            const { match: pattern, type } = browserStore.getKeyFilter(props.server)
             dialogStore.openKeyFilterDialog(props.server, db, pattern, type)
             break
         case 'key_reload':
@@ -311,23 +227,6 @@ const handleSelectContextMenu = (key) => {
                     $message.error(e.message)
                 })
             break
-        case 'db_loadmore':
-            if (node != null && !!!node.loading && !!!node.fullLoaded) {
-                node.loading = true
-                browserStore
-                    .loadMoreKeys(props.server, db)
-                    .then((end) => {
-                        // fully loaded
-                        node.fullLoaded = end === true
-                    })
-                    .catch((e) => {
-                        $message.error(e.message)
-                    })
-                    .finally(() => {
-                        delete node.loading
-                    })
-            }
-            break
         case 'db_loadall':
             if (node != null && !!!node.loading) {
                 node.loading = true
@@ -348,10 +247,6 @@ const handleSelectContextMenu = (key) => {
     }
 }
 
-defineExpose({
-    handleSelectContextMenu,
-})
-
 const onUpdateExpanded = (value, option, meta) => {
     expandedKeys.value = value
     if (!meta.node) {
@@ -445,61 +340,6 @@ const renderPrefix = ({ option }) => {
 // render tree item label
 const renderLabel = ({ option }) => {
     switch (option.type) {
-        case ConnectionType.Server:
-            return h('b', {}, { default: () => option.label })
-        case ConnectionType.RedisDB:
-            const { name: server, db, opened = false } = option
-            let { match: matchPattern, type: typeFilter } = browserStore.getKeyFilter(server, db)
-            const items = []
-            if (opened) {
-                items.push(`${option.label} (${option.keys || 0}/${Math.max(option.maxKeys || 0, option.keys || 0)})`)
-            } else {
-                items.push(`${option.label} (${Math.max(option.maxKeys || 0, option.keys || 0)})`)
-            }
-            // show filter tag after label
-            // type filter tag
-            if (!isEmpty(typeFilter)) {
-                items.push(
-                    h(
-                        NTag,
-                        {
-                            size: 'small',
-                            closable: true,
-                            bordered: false,
-                            color: {
-                                color: typesBgColor[typeFilter],
-                                textColor: typesColor[typeFilter],
-                            },
-                            onClose: () => {
-                                // remove type filter
-                                browserStore.setKeyFilter(server, db, matchPattern)
-                                browserStore.reopenDatabase(server, db)
-                            },
-                        },
-                        { default: () => typeFilter },
-                    ),
-                )
-            }
-            // match pattern tag
-            if (!isEmpty(matchPattern) && matchPattern !== '*') {
-                items.push(
-                    h(
-                        NTag,
-                        {
-                            bordered: false,
-                            closable: true,
-                            size: 'small',
-                            onClose: () => {
-                                // remove key match pattern
-                                browserStore.setKeyFilter(server, db, '*', typeFilter)
-                                browserStore.reopenDatabase(server, db)
-                            },
-                        },
-                        { default: () => matchPattern },
-                    ),
-                )
-            }
-            return renderIconMenu(items)
         case ConnectionType.RedisKey:
             return `${option.label} (${option.keys || 0})`
         // case ConnectionType.RedisValue:
@@ -528,24 +368,6 @@ const calcDBMenu = (opened, loading, end) => {
     const btns = []
     if (opened) {
         btns.push(
-            h(IconButton, {
-                tTooltip: 'interface.filter_key',
-                icon: Filter,
-                disabled: loading === true,
-                onClick: () => handleSelectContextMenu('db_filter'),
-            }),
-            h(IconButton, {
-                tTooltip: 'interface.reload',
-                icon: Refresh,
-                disabled: loading === true,
-                onClick: () => handleSelectContextMenu('db_reload'),
-            }),
-            h(IconButton, {
-                tTooltip: 'interface.new_key',
-                icon: Add,
-                disabled: loading === true,
-                onClick: () => handleSelectContextMenu('db_newkey'),
-            }),
             h(IconButton, {
                 tTooltip: 'interface.load_more',
                 icon: LoadList,
@@ -562,38 +384,24 @@ const calcDBMenu = (opened, loading, end) => {
                 color: loading === true ? themeVars.value.primaryColor : '',
                 onClick: () => handleSelectContextMenu('db_loadall'),
             }),
-            h(IconButton, {
-                tTooltip: 'interface.flush_db',
-                icon: Delete,
-                disabled: loading === true,
-                onClick: () => handleSelectContextMenu('db_flush'),
-            }),
             // h(IconButton, {
             //     tTooltip: 'interface.more_action',
             //     icon: More,
             //     onClick: () => handleSelectContextMenu('more_action'),
             // }),
         )
-    } else {
-        btns.push(
-            h(IconButton, {
-                tTooltip: 'interface.open_db',
-                icon: Connect,
-                onClick: () => handleSelectContextMenu('db_open'),
-            }),
-        )
     }
     return btns
 }
 
-const calcLayerMenu = (loading, end) => {
+const calcLayerMenu = (loading) => {
     return [
         // reload layer enable only full loaded
         h(IconButton, {
-            tTooltip: end === true ? 'interface.reload' : 'interface.reload',
+            tTooltip: props.fullLoaded ? 'interface.reload' : 'interface.reload',
             icon: Refresh,
             loading: loading === true,
-            disabled: end !== true,
+            disabled: !props.fullLoaded,
             onClick: () => handleSelectContextMenu('key_reload'),
         }),
         h(IconButton, {
@@ -626,8 +434,7 @@ const renderSuffix = ({ option }) => {
             case ConnectionType.RedisDB:
                 return renderIconMenu(calcDBMenu(option.opened, option.loading, option.fullLoaded))
             case ConnectionType.RedisKey:
-                const fullLoaded = browserStore.isFullLoaded(props.server, option.db)
-                return renderIconMenu(calcLayerMenu(option.loading, fullLoaded))
+                return renderIconMenu(calcLayerMenu(option.loading))
             case ConnectionType.RedisValue:
                 return renderIconMenu(calcValueMenu())
         }
@@ -638,7 +445,7 @@ const renderSuffix = ({ option }) => {
 const nodeProps = ({ option }) => {
     return {
         onDblclick: () => {
-            if (loading.value) {
+            if (props.loading) {
                 console.warn('TODO: alert to ignore double click when loading')
                 return
             }
@@ -665,37 +472,29 @@ const nodeProps = ({ option }) => {
     }
 }
 
-const onLoadTree = async (node) => {
-    switch (node.type) {
-        case ConnectionType.RedisDB:
-            loading.value = true
-            try {
-                await browserStore.openDatabase(props.server, node.db)
-            } catch (e) {
-                $message.error(e.message)
-                node.isLeaf = undefined
-            } finally {
-                loading.value = false
-            }
-            break
-        // case ConnectionType.RedisKey:
-        //     console.warn('load redis key', node.redisKey)
-        //     node.keys = sumBy(node.children, 'keys')
-        //     break
-        // case ConnectionType.RedisValue:
-        //     node.keys = 1
-        //     break
-    }
-}
-
 const handleOutsideContextMenu = () => {
     contextMenuParam.show = false
 }
+
+// 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)
+defineExpose({
+    handleSelectContextMenu,
+    resetExpandKey,
+    refreshTree: () => {
+        treeKey.value = Date.now()
+    },
+})
 </script>
 
 <template>
-    <div :style="{ backgroundColor }" class="browser-tree-wrapper">
+    <div :style="{ backgroundColor }" class="flex-box-v browser-tree-wrapper">
+        <n-spin v-if="props.loading" class="fill-height" />
+        <n-empty v-else-if="!props.loading && isEmpty(data)" class="empty-content" />
         <n-tree
+            v-show="!props.loading && !isEmpty(data)"
+            :key="treeKey"
             :animated="false"
             :block-line="true"
             :block-node="true"
@@ -703,14 +502,16 @@ const handleOutsideContextMenu = () => {
             :data="data"
             :expand-on-click="false"
             :expanded-keys="expandedKeys"
+            :filter="(pattern, node) => includes(node.redisKey, pattern)"
             :node-props="nodeProps"
+            :pattern="props.pattern"
             :render-label="renderLabel"
             :render-prefix="renderPrefix"
             :render-suffix="renderSuffix"
             :selected-keys="selectedKeys"
+            :show-irrelevant-nodes="false"
             class="fill-height"
             virtual-scroll
-            @load="onLoadTree"
             @update:selected-keys="onUpdateSelectedKeys"
             @update:expanded-keys="onUpdateExpanded" />
         <n-dropdown
@@ -727,6 +528,8 @@ const handleOutsideContextMenu = () => {
 </template>
 
 <style lang="scss" scoped>
+@import '@/styles/content';
+
 .browser-tree-wrapper {
     height: 100%;
     overflow: hidden;
diff --git a/frontend/src/components/sidebar/ConnectionTree.vue b/frontend/src/components/sidebar/ConnectionTree.vue
index 4cc9002..c151c87 100644
--- a/frontend/src/components/sidebar/ConnectionTree.vue
+++ b/frontend/src/components/sidebar/ConnectionTree.vue
@@ -20,9 +20,11 @@ import { hexGammaCorrection, parseHexColor, toHexColor } from '@/utils/rgb.js'
 import IconButton from '@/components/common/IconButton.vue'
 import usePreferencesStore from 'stores/preferences.js'
 import useBrowserStore from 'stores/browser.js'
+import { useRender } from '@/utils/render.js'
 
 const themeVars = useThemeVars()
 const i18n = useI18n()
+const render = useRender()
 const connectingServer = ref('')
 const connectionStore = useConnectionStore()
 const browserStore = useBrowserStore()
@@ -59,12 +61,12 @@ const menuOptions = {
         {
             key: 'group_rename',
             label: i18n.t('interface.rename_conn_group'),
-            icon: renderIcon(Edit),
+            icon: render.renderIcon(Edit),
         },
         {
             key: 'group_delete',
             label: i18n.t('interface.remove_conn_group'),
-            icon: renderIcon(Delete),
+            icon: render.renderIcon(Delete),
         },
     ],
     [ConnectionType.Server]: ({ name }) => {
@@ -74,17 +76,17 @@ const menuOptions = {
                 {
                     key: 'server_close',
                     label: i18n.t('interface.disconnect'),
-                    icon: renderIcon(Unlink),
+                    icon: render.renderIcon(Unlink),
                 },
                 {
                     key: 'server_edit',
                     label: i18n.t('interface.edit_conn'),
-                    icon: renderIcon(Config),
+                    icon: render.renderIcon(Config),
                 },
                 {
                     key: 'server_dup',
                     label: i18n.t('interface.dup_conn'),
-                    icon: renderIcon(CopyLink),
+                    icon: render.renderIcon(CopyLink),
                 },
                 {
                     type: 'divider',
@@ -93,7 +95,7 @@ const menuOptions = {
                 {
                     key: 'server_remove',
                     label: i18n.t('interface.remove_conn'),
-                    icon: renderIcon(Delete),
+                    icon: render.renderIcon(Delete),
                 },
             ]
         } else {
@@ -101,17 +103,17 @@ const menuOptions = {
                 {
                     key: 'server_open',
                     label: i18n.t('interface.open_connection'),
-                    icon: renderIcon(Connect),
+                    icon: render.renderIcon(Connect),
                 },
                 {
                     key: 'server_edit',
                     label: i18n.t('interface.edit_conn'),
-                    icon: renderIcon(Config),
+                    icon: render.renderIcon(Config),
                 },
                 {
                     key: 'server_dup',
                     label: i18n.t('interface.dup_conn'),
-                    icon: renderIcon(CopyLink),
+                    icon: render.renderIcon(CopyLink),
                 },
                 {
                     type: 'divider',
@@ -120,7 +122,7 @@ const menuOptions = {
                 {
                     key: 'server_remove',
                     label: i18n.t('interface.remove_conn'),
-                    icon: renderIcon(Delete),
+                    icon: render.renderIcon(Delete),
                 },
             ]
         }
diff --git a/frontend/src/langs/en-us.json b/frontend/src/langs/en-us.json
index e6b4490..c8fcd29 100644
--- a/frontend/src/langs/en-us.json
+++ b/frontend/src/langs/en-us.json
@@ -255,7 +255,7 @@
     "filter": {
       "set_key_filter": "Set Key Filter",
       "filter_pattern": "Pattern",
-      "filter_pattern_tip": "prefix_*: Matches key names starting with \"prefix_\".\n*_suffix: Matches key names ending with \"_suffix\".\n*pattern*: Matches key names containing \"pattern\".\nprefix_??: Matches key names starting with \"prefix_\" followed by any two characters.\n*abc*: Matches key names containing \"abc\" at any position."
+      "filter_pattern_tip": "* : Matches zero or more characters. For example, 'key*' matches all keys starting with 'key'.\n? : Matches a single character. For example, 'key?' matches 'key1', 'key2'.\n[] : Matches a single character within the specified range. For example, 'key[1-3]' matches keys like 'key1', 'key2', 'key3'.\n\\ : Escape character. To match *, ?, [, or ], use the backslash '\\' for escaping."
     },
     "ttl": {
       "title": "Set Key TTL"
diff --git a/frontend/src/langs/pt-br.json b/frontend/src/langs/pt-br.json
index d164a1d..fbc701f 100644
--- a/frontend/src/langs/pt-br.json
+++ b/frontend/src/langs/pt-br.json
@@ -246,8 +246,7 @@
     },
     "filter": {
       "set_key_filter": "Definir Filtro de Chave",
-      "filter_pattern": "Padrão",
-      "filter_pattern_tip": "prefixo_*: Corresponde a nomes de chaves que começam com \"prefixo_\".\n*_sufixo: Corresponde a nomes de chaves que terminam com \"_sufixo\".\n*padrão*: Corresponde a nomes de chaves que contêm \"padrão\".\nprefixo_??: Corresponde a nomes de chaves que começam com \"prefixo_\" seguido por dois caracteres.\n*abc*: Corresponde a nomes de chaves que contêm \"abc\" em qualquer posição."
+      "filter_pattern": "Padrão"
     },
     "ttl": {
       "title": "Definir TTL da Chave"
diff --git a/frontend/src/langs/zh-cn.json b/frontend/src/langs/zh-cn.json
index 6464dfc..04d267f 100644
--- a/frontend/src/langs/zh-cn.json
+++ b/frontend/src/langs/zh-cn.json
@@ -254,7 +254,7 @@
     "filter": {
       "set_key_filter": "设置键过滤器",
       "filter_pattern": "过滤表达式",
-      "filter_pattern_tip": "prefix_*：匹配以\"prefix_\"开头的键名\n*_suffix：匹配以\"_suffix\"结尾的键名\n*pattern*：匹配包含\"pattern\"的键名\nprefix_??：匹配以\"prefix_\"开头后跟两个任意字符的键名\n*abc*：匹配包含\"abc\"的任意位置的键名"
+      "filter_pattern_tip": "*：匹配零个或多个字符。例如：\"key*\"匹配到以\"key\"开头的所有键\n?：匹配单个字符。例如：\"key?\"匹配\"key1\"、\"key2\"\n[ ]：匹配指定范围内的单个字符。例如：\"key[1-3]\"可以匹配类似于 \"key1\"、\"key2\"、\"key3\" 的键\n\\：转义字符。如果想要匹配 *、?、[、或]，需要使用反斜杠\"\\\"进行转义"
     },
     "ttl": {
       "title": "设置键存活时间"
diff --git a/frontend/src/stores/browser.js b/frontend/src/stores/browser.js
index e7d2226..f76caec 100644
--- a/frontend/src/stores/browser.js
+++ b/frontend/src/stores/browser.js
@@ -50,9 +50,9 @@ import { decodeRedisKey, nativeRedisKey } from '@/utils/key_convert.js'
 import { BrowserTabType } from '@/consts/browser_tab_type.js'
 import { KeyViewType } from '@/consts/key_view_type.js'
 import { ConnectionType } from '@/consts/connection_type.js'
-import { types } from '@/consts/support_redis_type.js'
 import useConnectionStore from 'stores/connections.js'
 import { decodeTypes, formatTypes } from '@/consts/value_view_type.js'
+import { isRedisGlob } from '@/utils/glob_pattern.js'
 
 const useBrowserStore = defineStore('browser', {
     /**
@@ -70,8 +70,18 @@ const useBrowserStore = defineStore('browser', {
      * @property {boolean} [opened] - redis db is opened, type == ConnectionType.RedisDB only
      * @property {boolean} [expanded] - current node is expanded
      * @property {DatabaseItem[]} [children]
-     * @property {boolean} [loading] - indicated that is loading children now
-     * @property {boolean} [fullLoaded] - indicated that all children already loaded
+     */
+
+    /**
+     * @typedef {Object} FilterItem
+     * @property {string} pattern key pattern filter
+     * @property {string} type type filter
+     */
+
+    /**
+     * @typedef {Object} LoadingState
+     * @property {string} loading indicated that is loading children now
+     * @property {string} fullLoaded indicated that all children already loaded
      */
 
     /**
@@ -85,8 +95,7 @@ const useBrowserStore = defineStore('browser', {
     /**
      * @typedef {Object} BrowserState
      * @property {Object} serverStats
-     * @property {Object.<string, string>} keyFilter key is 'server#db', 'server#-1' stores default filter pattern
-     * @property {Object.<string, string>} typeFilter key is 'server#db'
+     * @property {Object.<string, FilterItem>} filter
      * @property {Object.<string, KeyViewType>} viewType
      * @property {Object.<string, DatabaseItem[]>} databases
      * @property {Object.<string, Map<string, DatabaseItem>>} nodeMap key format likes 'server#db', children key format likes 'key#type'
@@ -98,17 +107,21 @@ const useBrowserStore = defineStore('browser', {
      */
     state: () => ({
         serverStats: {}, // current server status info
-        keyFilter: {}, // all key filters in opened connections group by 'server+db'
-        typeFilter: {}, // all key type filters in opened connections group by 'server+db'
+        filter: {}, // all filters in opened connections map by server and FilterItem
+        loadingState: {}, // all loading state in opened connections map by server and LoadingState
         viewType: {}, // view type selection for all opened connections group by 'server'
         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
+        openedDB: {}, // opened database map by server and database index
     }),
     getters: {
         anyConnectionOpened() {
             return !isEmpty(this.databases)
         },
+        selectedDatabases() {
+            return this.openedDB || {}
+        },
     },
     actions: {
         /**
@@ -139,13 +152,22 @@ const useBrowserStore = defineStore('browser', {
         },
 
         /**
-         * get database by server name and index
-         * @param {string} connName
+         * get database info list
+         * @param server
+         * @return {DatabaseItem[]}
+         */
+        getDBList(server) {
+            return this.databases[server] || []
+        },
+
+        /**
+         * get database by server name and database index
+         * @param {string} server
          * @param {number} db
          * @return {DatabaseItem|null}
          */
-        getDatabase(connName, db) {
-            const dbs = this.databases[connName]
+        getDatabase(server, db) {
+            const dbs = this.databases[server]
             if (dbs != null) {
                 const selDB = find(dbs, (item) => item.db === db)
                 if (selDB != null) {
@@ -156,17 +178,24 @@ const useBrowserStore = defineStore('browser', {
         },
 
         /**
-         * get full loaded status of database
-         * @param connName
-         * @param db
-         * @return {boolean}
+         * get current selection database by server
+         * @param server
+         * @return {number}
          */
-        isFullLoaded(connName, db) {
-            const selDB = this.getDatabase(connName, db)
-            if (selDB != null) {
-                return selDB.fullLoaded === true
-            }
-            return false
+        getSelectedDB(server) {
+            return this.selectedDatabases[server] || 0
+        },
+
+        /**
+         * get key list in current database
+         * @param server
+         * @return {DatabaseItem[]}
+         */
+        getKeyList(server) {
+            const db = this.getSelectedDB(server)
+            const dbNodes = this.databases[server]
+            const node = find(dbNodes, (n) => n.db === db)
+            return node.children
         },
 
         /**
@@ -248,6 +277,7 @@ const useBrowserStore = defineStore('browser', {
             }
             this.databases[name] = dbs
             this.viewType[name] = view
+            this.openedDB[name] = get(dbs, '0.db', 0)
         },
 
         /**
@@ -265,12 +295,11 @@ const useBrowserStore = defineStore('browser', {
             const dbs = this.databases[name]
             if (!isEmpty(dbs)) {
                 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)
+            delete this.filter[name]
             delete this.databases[name]
             delete this.serverStats[name]
 
@@ -281,32 +310,32 @@ const useBrowserStore = defineStore('browser', {
 
         /**
          * open database and load all keys
-         * @param connName
+         * @param server
          * @param db
          * @returns {Promise<void>}
          */
-        async openDatabase(connName, db) {
-            const { match: filterPattern, type: filterType } = this.getKeyFilter(connName, db)
-            const { data, success, msg } = await OpenDatabase(connName, db, filterPattern, filterType)
+        async openDatabase(server, db) {
+            const { match: filterPattern, type: filterType } = this.getKeyFilter(server)
+            const { data, success, msg } = await OpenDatabase(server, db, filterPattern, filterType)
             if (!success) {
                 throw new Error(msg)
             }
             const { keys = [], end = false, maxKeys = 0 } = data
-            const selDB = this.getDatabase(connName, db)
+            const selDB = this.getDatabase(server, db)
             if (selDB == null) {
                 return
             }
 
             selDB.opened = true
-            selDB.fullLoaded = end
             selDB.maxKeys = maxKeys
+            set(this.loadingState, 'fullLoaded', end)
             if (isEmpty(keys)) {
                 selDB.children = []
             } else {
                 // append db node to current connection's children
-                this._addKeyNodes(connName, db, keys)
+                this._addKeyNodes(server, db, keys)
             }
-            this._tidyNode(connName, db)
+            this._tidyNode(server, db)
         },
 
         /**
@@ -325,24 +354,27 @@ const useBrowserStore = defineStore('browser', {
 
             this._getNodeMap(connName, db).clear()
             this._getKeySet(connName, db).clear()
+            delete this.filter[connName]
         },
 
         /**
          * close database
-         * @param connName
+         * @param server
          * @param db
          */
-        closeDatabase(connName, db) {
-            const selDB = this.getDatabase(connName, db)
+        closeDatabase(server, db) {
+            const selDB = this.getDatabase(server, db)
             if (selDB == null) {
                 return
             }
             delete selDB.children
             selDB.isLeaf = false
             selDB.opened = false
+            selDB.keys = 0
 
-            this._getNodeMap(connName, db).clear()
-            this._getKeySet(connName, db).clear()
+            this._getNodeMap(server, db).clear()
+            this._getKeySet(server, db).clear()
+            delete this.filter[server]
         },
 
         /**
@@ -547,7 +579,7 @@ const useBrowserStore = defineStore('browser', {
             let match = prefix
             if (isEmpty(match)) {
                 match = '*'
-            } else {
+            } else if (!isRedisGlob(match)) {
                 const separator = this._getSeparator(connName)
                 if (!endsWith(prefix, separator + '*')) {
                     match = prefix + separator + '*'
@@ -563,7 +595,7 @@ const useBrowserStore = defineStore('browser', {
          * @return {Promise<boolean>}
          */
         async loadMoreKeys(connName, db) {
-            const { match, type: keyType } = this.getKeyFilter(connName, db)
+            const { match, type: keyType } = this.getKeyFilter(connName)
             const { keys, maxKeys, end } = await this._loadKeys(connName, db, match, keyType, false)
             this._setDBMaxKeys(connName, db, maxKeys)
             // remove current keys below prefix
@@ -1936,41 +1968,32 @@ const useBrowserStore = defineStore('browser', {
         /**
          * get key filter pattern and filter type
          * @param {string} server
-         * @param {number} db
          * @returns {{match: string, type: string}}
          */
-        getKeyFilter(server, db) {
-            let match, type
-            const key = `${server}#${db}`
-            if (!this.keyFilter.hasOwnProperty(key)) {
-                // get default key filter from connection profile
+        getKeyFilter(server) {
+            let { pattern = '', type = '' } = this.filter[server] || {}
+            if (isEmpty(pattern)) {
+                // no custom match pattern, use default
                 const conn = useConnectionStore()
-                match = conn.getDefaultKeyFilter(server)
-            } else {
-                match = this.keyFilter[key] || '*'
+                pattern = conn.getDefaultKeyFilter(server)
             }
-            type = this.typeFilter[`${server}#${db}`] || ''
             return {
-                match,
+                match: pattern,
                 type: toUpper(type),
             }
         },
 
         /**
-         * set key filter
+         *
          * @param {string} server
-         * @param {number} db
-         * @param {string} pattern
          * @param {string} [type]
+         * @param {string} [pattern]
          */
-        setKeyFilter(server, db, pattern, type) {
-            this.keyFilter[`${server}#${db}`] = pattern || '*'
-            this.typeFilter[`${server}#${db}`] = types[toUpper(type)] || ''
-        },
-
-        removeKeyFilter(server, db) {
-            this.keyFilter[`${server}#${db}`] = '*'
-            delete this.typeFilter[`${server}#${db}`]
+        setKeyFilter(server, { type, pattern }) {
+            const filter = this.filter[server] || {}
+            filter.type = type === null ? filter.type : type
+            filter.pattern = type === null ? filter.pattern : pattern
+            this.filter[server] = filter
         },
     },
 })
diff --git a/frontend/src/styles/style.scss b/frontend/src/styles/style.scss
index 3437f91..38e5e60 100644
--- a/frontend/src/styles/style.scss
+++ b/frontend/src/styles/style.scss
@@ -25,6 +25,14 @@ body {
   overflow: hidden;
 }
 
+@mixin bottom-shadow($transparent) {
+  box-shadow: 0 5px 5px -5px rgba(0, 0, 0, $transparent);
+}
+
+@mixin top-shadow($transparent) {
+  box-shadow: 0 -5px 5px -5px rgba(0, 0, 0, $transparent);
+}
+
 #app {
   height: 100vh;
 }
@@ -61,13 +69,9 @@ body {
 }
 
 .ellipsis {
-  white-space: nowrap; /* 禁止文本换行 */
-  overflow: hidden; /* 隐藏超出容器的文本 */
-  text-overflow: ellipsis; /* 使用省略号表示被截断的文本 */
-}
-
-.unit-item {
-  margin-left: 10px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .fill-height {
@@ -106,6 +110,7 @@ body {
   }
 
   .value-footer {
+    @include top-shadow(0.1);
     align-items: center;
     gap: 0;
     padding: 3px 10px 3px 10px;
@@ -132,6 +137,7 @@ body {
 
   .nav-pane-func {
     align-items: center;
+    justify-content: flex-end;
     gap: 3px;
     padding: 3px 8px;
     min-height: 30px;
diff --git a/frontend/src/utils/glob_pattern.js b/frontend/src/utils/glob_pattern.js
new file mode 100644
index 0000000..a90cbb8
--- /dev/null
+++ b/frontend/src/utils/glob_pattern.js
@@ -0,0 +1,13 @@
+import { includes, isEmpty } from 'lodash'
+
+const REDIS_GLOB_CHAR = ['?', '*', '[', ']', '{', '}']
+export const isRedisGlob = (str) => {
+    if (!isEmpty(str)) {
+        for (const c of REDIS_GLOB_CHAR) {
+            if (includes(str, c)) {
+                return true
+            }
+        }
+    }
+    return false
+}
diff --git a/frontend/src/utils/render.js b/frontend/src/utils/render.js
new file mode 100644
index 0000000..b3d8895
--- /dev/null
+++ b/frontend/src/utils/render.js
@@ -0,0 +1,20 @@
+import { h } from 'vue'
+import { NIcon } from 'naive-ui'
+
+export function useRender() {
+    return {
+        /**
+         *
+         * @param {string|Object} icon
+         * @param {{}} [props]
+         * @return {*}
+         */
+        renderIcon: (icon, props = {}) => {
+            return () => {
+                return h(NIcon, null, {
+                    default: () => h(icon, props),
+                })
+            }
+        },
+    }
+}