fix: display incorrect value in zset content

fix: content pane cause error when value is null

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...)
@@ -882,7 +896,7 @@ func (b *browserService) GetKeyDetail(param types.KeyDetailParam) (resp types.JS
 
 				items = make([]types.ZSetEntryItem, 0, len(loadedVal))
 				for _, z := range loadedVal {
-					val := strutil.AnyToString(z.Score, "", 0)
+					val := strutil.AnyToString(z.Member, "", 0)
 					if doFilter && !strings.Contains(val, param.MatchPattern) {
 						continue
 					}

frontend/src/components/common/IconButton.vue

@@ -25,6 +25,8 @@ const props = defineProps({
     border: Boolean,
     disabled: Boolean,
     buttonStyle: [String, Object],
+    buttonClass: [String, Object],
+    small: Boolean,
 })
 
 const hasTooltip = computed(() => {
@@ -36,10 +38,12 @@ const hasTooltip = computed(() => {
     <n-tooltip v-if="hasTooltip" :show-arrow="false">
         <template #trigger>
             <n-button
+                :class="props.buttonClass"
                 :color="props.color"
                 :disabled="disabled"
                 :focusable="false"
                 :loading="loading"
+                :size="small ? 'small' : ''"
                 :style="props.buttonStyle"
                 :text="!border"
                 :type="type"
@@ -57,10 +61,13 @@ const hasTooltip = computed(() => {
     </n-tooltip>
     <n-button
         v-else
+        :class="props.buttonClass"
         :color="props.color"
         :disabled="disabled"
         :focusable="false"
         :loading="loading"
+        :size="small ? 'small' : ''"
+        :style="props.buttonStyle"
         :text="!border"
         :type="type"
         @click.prevent="emit('click')">

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>

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 }}

frontend/src/components/common/ResizeableWrapper.vue

@@ -101,6 +101,7 @@ const handleMouseOver = () => {
         top: 0;
         bottom: 0;
         transition: background-color 0.3s ease-in;
+        z-index: 1;
     }
 
     .resize-divider-hide {

frontend/src/components/content_value/ContentEntryEditor.vue

@@ -94,26 +94,13 @@ const viewLanguage = computed(() => {
     }
 })
 
-const btnStyle = computed(() => ({
-    padding: '3px',
-    border: 'solid 1px #0000',
-    borderRadius: '3px',
-}))
-
-const pinBtnStyle = computed(() => ({
-    padding: '3px',
-    border: `solid 1px ${themeVars.value.borderColor}`,
-    borderRadius: '3px',
-    backgroundColor: themeVars.value.borderColor,
-}))
-
 /**
  *
- * @param {decodeTypes} decode
- * @param {formatTypes} format
+ * @param {decodeTypes|null} decode
+ * @param {formatTypes|null} format
  * @return {Promise<void>}
  */
-const onFormatChanged = async (decode = '', format = '') => {
+const onFormatChanged = async (decode = null, format = null) => {
     try {
         loading.value = true
         const {
@@ -196,21 +183,21 @@ const onSave = () => {
             <template #header-extra>
                 <n-space :size="5">
                     <icon-button
-                        :button-style="isPin ? pinBtnStyle : btnStyle"
+                        :button-class="{ 'pinable-btn': true, 'unpin-btn': !isPin, 'pin-btn': isPin }"
                         :icon="Pin"
                         :size="19"
                         :t-tooltip="isPin ? 'interface.unpin_edit' : 'interface.pin_edit'"
                         stroke-width="4"
                         @click="isPin = !isPin" />
                     <icon-button
-                        :button-style="btnStyle"
+                        :button-class="['pinable-btn', 'unpin-btn']"
                         :icon="props.fullscreen ? OffScreen : FullScreen"
                         :size="18"
                         stroke-width="5"
                         t-tooltip="interface.fullscreen"
                         @click="onToggleFullscreen" />
                     <icon-button
-                        :button-style="btnStyle"
+                        :button-class="['pinable-btn', 'unpin-btn']"
                         :icon="WindowClose"
                         :size="18"
                         stroke-width="5"
@@ -267,6 +254,22 @@ const onSave = () => {
     background-color: unset;
 }
 
+:deep(.pinable-btn) {
+    padding: 3px;
+    border-style: solid;
+    border-width: 1px;
+    border-radius: 3px;
+}
+
+:deep(.unpin-btn) {
+    border-color: #0000;
+}
+
+:deep(.pin-btn) {
+    border-color: v-bind('themeVars.iconColorDisabled');
+    background-color: v-bind('themeVars.iconColorDisabled');
+}
+
 //:deep(.n-card--bordered) {
 //    border-radius: 0;
 //}

frontend/src/components/content_value/ContentSearchInput.vue

@@ -2,6 +2,23 @@
 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'])
 
@@ -34,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 = ''
@@ -58,13 +81,18 @@ 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">
@@ -74,10 +102,31 @@ 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>
-        <n-button :disabled="hasMatch && !hasFilter" :focusable="false" @click="onFullSearch">
+
+        <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">
             {{ $t('interface.full_search') }}
         </n-button>
+        <slot name="append" />
     </n-input-group>
 </template>
 

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()

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

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>
 

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>
 

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>

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" />

frontend/src/components/sidebar/BrowserPane.vue

@@ -1,54 +1,173 @@
 <script setup>
-import { NIcon, useThemeVars } from 'naive-ui'
+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 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) => {
@@ -59,47 +178,142 @@ const filterTypeOptions = computed(() => {
 
 <template>
     <div class="nav-pane-container flex-box-v">
-        <browser-tree ref="browserTreeRef" :server="currentName" />
-
-        <div v-if="filterForm.showFilter" class="nav-pane-bottom flex-box-h">
-            <n-input-group>
-                <n-select
-                    v-model:value="filterForm.type"
-                    :consistent-menu-width="false"
-                    :options="filterTypeOptions"
-                    style="width: 120px" />
-                <n-input clearable placeholder="" />
-                <n-button :focusable="false" ghost>
-                    <template #icon>
-                        <n-icon :component="Search" />
+        <!-- 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>
-                </n-button>
-            </n-input-group>
+                    {{ $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-h">
+        <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" />-->
-            <icon-button :icon="Refresh" size="20" stroke-width="4" t-tooltip="interface.reload" @click="onRefresh" />
-            <div class="flex-item-expand" />
-            <icon-button
-                :icon="Unlink"
-                size="20"
-                stroke-width="4"
-                t-tooltip="interface.disconnect"
-                @click="onDisconnect" />
+            <div class="flex-box-h nav-pane-func">
+                <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']"
+                    :disabled="fullyLoaded"
+                    :icon="LoadList"
+                    :loading="loading"
+                    :stroke-width="3.5"
+                    size="20"
+                    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="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"
+                    t-tooltip="interface.disconnect"
+                    @click="onDisconnect" />
+            </div>
         </div>
     </div>
 </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.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;
 }

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;

frontend/src/components/sidebar/ConnectionPane.vue

@@ -18,14 +18,16 @@ const filterPattern = ref('')
         <connection-tree :filter-pattern="filterPattern" />
 
         <!-- bottom function bar -->
-        <div class="nav-pane-bottom flex-box-h">
+        <div class="nav-pane-bottom nav-pane-func flex-box-h">
             <icon-button
+                :button-class="['nav-pane-func-btn']"
                 :icon="AddLink"
                 size="20"
                 stroke-width="4"
                 t-tooltip="interface.new_conn"
                 @click="dialogStore.openNewDialog()" />
             <icon-button
+                :button-class="['nav-pane-func-btn']"
                 :icon="AddGroup"
                 size="20"
                 stroke-width="4"

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),
                 },
             ]
         }

frontend/src/components/sidebar/Ribbon.vue

@@ -13,8 +13,10 @@ import usePreferencesStore from 'stores/preferences.js'
 import Record from '@/components/icons/Record.vue'
 import { extraTheme } from '@/utils/extra_theme.js'
 import useBrowserStore from 'stores/browser.js'
+import { useRender } from '@/utils/render.js'
 
 const themeVars = useThemeVars()
+const render = useRender()
 
 const props = defineProps({
     value: {
@@ -30,9 +32,6 @@ const props = defineProps({
 const emit = defineEmits(['update:value'])
 
 const iconSize = computed(() => Math.floor(props.width * 0.45))
-const renderIcon = (icon) => {
-    return () => h(NIcon, null, { default: () => h(icon, { strokeWidth: 3 }) })
-}
 
 const browserStore = useBrowserStore()
 const i18n = useI18n()
@@ -62,12 +61,12 @@ const preferencesOptions = computed(() => {
         {
             label: i18n.t('menu.preferences'),
             key: 'preferences',
-            icon: renderIcon(Config),
+            icon: render.renderIcon(Config, { strokeWidth: 3 }),
         },
         // {
         //     label: i18n.t('menu.help'),
         //     key: 'help',
-        //     icon: renderIcon(Help),
+        //     icon: render.renderIcon(Help, { strokeWidth: 3 }),
         // },
         {
             label: i18n.t('menu.check_update'),
@@ -122,22 +121,20 @@ const exThemeVars = computed(() => {
         }"
         class="flex-box-v">
         <div class="ribbon-wrapper flex-box-v">
-            <div
-                v-for="(m, i) in menuOptions"
-                v-show="m.show !== false"
-                :key="i"
-                :class="{ 'ribbon-item-active': props.value === m.key }"
-                class="ribbon-item clickable"
-                @click="emit('update:value', m.key)">
-                <n-tooltip :delay="2" :show-arrow="false" placement="right">
-                    <template #trigger>
+            <n-tooltip v-for="(m, i) in menuOptions" :key="i" :delay="2" :show-arrow="false" placement="right">
+                <template #trigger>
+                    <div
+                        v-show="m.show !== false"
+                        :class="{ 'ribbon-item-active': props.value === m.key }"
+                        class="ribbon-item clickable"
+                        @click="emit('update:value', m.key)">
                         <n-icon :size="iconSize">
                             <component :is="m.icon" :stroke-width="3.5" />
                         </n-icon>
-                    </template>
-                    {{ m.label }}
-                </n-tooltip>
-            </div>
+                    </div>
+                </template>
+                {{ m.label }}
+            </n-tooltip>
         </div>
         <div class="flex-item-expand"></div>
         <div class="nav-menu-item flex-box-v">

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"

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"

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": "设置键存活时间"

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
         },
     },
 })

frontend/src/stores/tab.js

@@ -235,7 +235,7 @@ const useTabStore = defineStore('tab', {
                     tabData.value = assign(value, tabData.value || {})
                 }
             } else {
-                tabData.value = value
+                tabData.value = value || []
             }
         },
 

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;
@@ -130,12 +135,18 @@ body {
 .nav-pane-container {
   overflow: hidden;
 
-  .nav-pane-bottom {
+  .nav-pane-func {
     align-items: center;
-    gap: 8px;
-    padding: 3px 10px 3px 10px;
+    justify-content: flex-end;
+    gap: 3px;
+    padding: 3px 8px;
     min-height: 30px;
-    //border-top: v-bind('themeVars.borderColor') 1px solid;
+
+    .nav-pane-func-btn {
+      padding: 3px;
+      border-radius: 3px;
+      box-sizing: border-box;
+    }
   }
 }
 

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
+}

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),
+                })
+            }
+        },
+    }
+}