backend/services/browser_service.go

@@ -291,7 +291,9 @@ func (b *browserService) getRedisClient(connName string, db int) (item connectio
 	if db >= 0 {
 		var rdb *redis.Client
 		if rdb, ok = client.(*redis.Client); ok && rdb != nil {
-			_ = rdb.Do(item.ctx, "select", strconv.Itoa(db)).Err()
+			if err = rdb.Do(item.ctx, "select", strconv.Itoa(db)).Err(); err != nil {
+				return
+			}
 		}
 	}
 	return
@@ -1770,8 +1772,8 @@ func (b *browserService) SetKeyTTL(connName string, db int, k any, ttl int64) (r
 }
 
 // DeleteKey remove redis key
-func (b *browserService) DeleteKey(server string, db int, k any, async bool) (resp types.JSResp) {
-	item, err := b.getRedisClient(server, db)
+func (b *browserService) DeleteKey(connName string, db int, k any, async bool) (resp types.JSResp) {
+	item, err := b.getRedisClient(connName, db)
 	if err != nil {
 		resp.Msg = err.Error()
 		return
@@ -1860,34 +1862,6 @@ func (b *browserService) DeleteKey(server string, db int, k any, async bool) (re
 	return
 }
 
-// DeleteOneKey delete one key
-func (b *browserService) DeleteOneKey(server string, db int, k any) (resp types.JSResp) {
-	item, err := b.getRedisClient(server, db)
-	if err != nil {
-		resp.Msg = err.Error()
-		return
-	}
-
-	client, ctx := item.client, item.ctx
-	key := strutil.DecodeRedisKey(k)
-	if cluster, ok := client.(*redis.ClusterClient); ok {
-		// cluster mode
-		err = cluster.ForEachMaster(ctx, func(ctx context.Context, cli *redis.Client) error {
-			return cli.Del(ctx, key).Err()
-		})
-	} else {
-		err = client.Del(ctx, key).Err()
-	}
-
-	if err != nil {
-		resp.Msg = err.Error()
-		return
-	}
-
-	resp.Success = true
-	return
-}
-
 // FlushDB flush database
 func (b *browserService) FlushDB(connName string, db int, async bool) (resp types.JSResp) {
 	item, err := b.getRedisClient(connName, db)

backend/types/preferences.go

@@ -23,8 +23,7 @@ func NewPreferences() Preferences {
 			CheckUpdate: true,
 		},
 		Editor: PreferencesEditor{
-			FontSize:    consts.DEFAULT_FONT_SIZE,
-			ShowLineNum: true,
+			FontSize: consts.DEFAULT_FONT_SIZE,
 		},
 	}
 }
@@ -49,7 +48,6 @@ type PreferencesGeneral struct {
 }
 
 type PreferencesEditor struct {
-	Font        string `json:"font" yaml:"font,omitempty"`
-	FontSize    int    `json:"fontSize" yaml:"font_size"`
-	ShowLineNum bool   `json:"showLineNum" yaml:"show_line_num,omitempty"`
+	Font     string `json:"font" yaml:"font,omitempty"`
+	FontSize int    `json:"fontSize" yaml:"font_size"`
 }

frontend/src/App.vue

@@ -4,6 +4,9 @@ import NewKeyDialog from './components/dialogs/NewKeyDialog.vue'
 import PreferencesDialog from './components/dialogs/PreferencesDialog.vue'
 import RenameKeyDialog from './components/dialogs/RenameKeyDialog.vue'
 import SetTtlDialog from './components/dialogs/SetTtlDialog.vue'
+import hljs from 'highlight.js/lib/core'
+import json from 'highlight.js/lib/languages/json'
+import plaintext from 'highlight.js/lib/languages/plaintext'
 import AddFieldsDialog from './components/dialogs/AddFieldsDialog.vue'
 import AppContent from './AppContent.vue'
 import GroupDialog from './components/dialogs/GroupDialog.vue'
@@ -19,6 +22,9 @@ import { darkThemeOverrides, themeOverrides } from '@/utils/theme.js'
 import AboutDialog from '@/components/dialogs/AboutDialog.vue'
 import FlushDbDialog from '@/components/dialogs/FlushDbDialog.vue'
 
+hljs.registerLanguage('json', json)
+hljs.registerLanguage('plaintext', plaintext)
+
 const prefStore = usePreferencesStore()
 const connectionStore = useConnectionStore()
 const i18n = useI18n()
@@ -51,6 +57,7 @@ watch(
 
 <template>
     <n-config-provider
+        :hljs="hljs"
         :inline-theme-disabled="true"
         :locale="prefStore.themeLocale"
         :theme="prefStore.isDark ? darkTheme : undefined"

frontend/src/components/content_value/ContentEntryEditor.vue

@@ -12,7 +12,6 @@ import WindowClose from '@/components/icons/WindowClose.vue'
 import Pin from '@/components/icons/Pin.vue'
 import OffScreen from '@/components/icons/OffScreen.vue'
 import ContentEditor from '@/components/content_value/ContentEditor.vue'
-import usePreferencesStore from 'stores/preferences.js'
 
 const props = defineProps({
     field: {
@@ -43,7 +42,6 @@ const props = defineProps({
 
 const themeVars = useThemeVars()
 const browserStore = useBrowserStore()
-const prefStore = usePreferencesStore()
 const emit = defineEmits([
     'update:field',
     'update:value',
@@ -171,7 +169,6 @@ const onSave = () => {
                         :border="true"
                         :content="displayValue"
                         :language="viewLanguage"
-                        :show-line-num="prefStore.showLineNum"
                         class="flex-item-expand"
                         style="height: 100%"
                         @input="onInput"

frontend/src/components/content_value/ContentValueHash.vue

@@ -3,7 +3,7 @@ import { computed, h, reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import ContentToolbar from './ContentToolbar.vue'
 import AddLink from '@/components/icons/AddLink.vue'
-import { NButton, NIcon, useThemeVars } from 'naive-ui'
+import { NButton, NCode, NIcon, useThemeVars } from 'naive-ui'
 import { types, types as redisTypes } from '@/consts/support_redis_type.js'
 import EditableTableColumn from '@/components/common/EditableTableColumn.vue'
 import useDialogStore from 'stores/dialog.js'
@@ -126,7 +126,7 @@ const valueColumn = computed(() => ({
     // },
     render: (row) => {
         if (displayCode.value) {
-            return h('pre', {}, row.dv || row.v)
+            return h(NCode, { language: 'json', wordWrap: true, code: row.dv || row.v })
         }
         return row.dv || row.v
     },
@@ -280,11 +280,6 @@ const entries = computed(() => {
     return `${len} / ${Math.max(len, props.length)}`
 })
 
-const loadProgress = computed(() => {
-    const len = size(props.value)
-    return (len * 100) / Math.max(len, props.length)
-})
-
 const onAddRow = () => {
     dialogStore.openAddFieldsDialog(props.name, props.db, props.keyPath, props.keyCode, types.HASH)
 }
@@ -360,16 +355,6 @@ defineExpose({
                 {{ $t('interface.add_row') }}
             </n-button>
         </div>
-        <!-- loaded progress -->
-        <n-progress
-            :border-radius="0"
-            :color="props.end ? '#0000' : themeVars.primaryColor"
-            :height="2"
-            :percentage="loadProgress"
-            :processing="props.loading"
-            :show-indicator="false"
-            status="success"
-            type="line" />
         <div id="content-table" class="value-wrapper value-item-part flex-box-h flex-item-expand">
             <!-- table -->
             <n-data-table

frontend/src/components/content_value/ContentValueList.vue

@@ -3,7 +3,7 @@ import { computed, h, reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import ContentToolbar from './ContentToolbar.vue'
 import AddLink from '@/components/icons/AddLink.vue'
-import { NButton, NIcon, useThemeVars } from 'naive-ui'
+import { NButton, NCode, NIcon, useThemeVars } from 'naive-ui'
 import { isEmpty, size } from 'lodash'
 import { types, types as redisTypes } from '@/consts/support_redis_type.js'
 import EditableTableColumn from '@/components/common/EditableTableColumn.vue'
@@ -102,7 +102,7 @@ const valueColumn = computed(() => ({
     },
     render: (row) => {
         if (displayCode.value) {
-            return h('pre', {}, row.dv || row.v)
+            return h(NCode, { language: 'json', wordWrap: true, code: row.dv || row.v })
         }
         return row.dv || row.v
     },
@@ -257,11 +257,6 @@ const entries = computed(() => {
     return `${len} / ${Math.max(len, props.length)}`
 })
 
-const loadProgress = computed(() => {
-    const len = size(props.value)
-    return (len * 100) / Math.max(len, props.length)
-})
-
 const onAddValue = (value) => {
     dialogStore.openAddFieldsDialog(props.name, props.db, props.keyPath, props.keyCode, types.LIST)
 }
@@ -337,16 +332,6 @@ defineExpose({
                 {{ $t('interface.add_row') }}
             </n-button>
         </div>
-        <!-- loaded progress -->
-        <n-progress
-            :border-radius="0"
-            :color="props.end ? '#0000' : themeVars.primaryColor"
-            :height="2"
-            :percentage="loadProgress"
-            :processing="props.loading"
-            :show-indicator="false"
-            status="success"
-            type="line" />
         <div class="value-wrapper value-item-part flex-box-h flex-item-expand">
             <!-- table -->
             <n-data-table

frontend/src/components/content_value/ContentValueSet.vue

@@ -3,7 +3,7 @@ import { computed, h, reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import ContentToolbar from './ContentToolbar.vue'
 import AddLink from '@/components/icons/AddLink.vue'
-import { NButton, NIcon, useThemeVars } from 'naive-ui'
+import { NButton, NCode, NIcon, useThemeVars } from 'naive-ui'
 import { isEmpty, size } from 'lodash'
 import useDialogStore from 'stores/dialog.js'
 import { types, types as redisTypes } from '@/consts/support_redis_type.js'
@@ -101,7 +101,7 @@ const valueColumn = computed(() => ({
     },
     render: (row) => {
         if (displayCode.value) {
-            return h('pre', {}, row.dv || row.v)
+            return h(NCode, { language: 'json', wordWrap: true, code: row.dv || row.v })
         }
         return row.dv || row.v
     },
@@ -254,11 +254,6 @@ const entries = computed(() => {
     return `${len} / ${Math.max(len, props.length)}`
 })
 
-const loadProgress = computed(() => {
-    const len = size(props.value)
-    return (len * 100) / Math.max(len, props.length)
-})
-
 const onAddValue = (value) => {
     dialogStore.openAddFieldsDialog(props.name, props.db, props.keyPath, props.keyCode, types.SET)
 }
@@ -334,16 +329,6 @@ defineExpose({
                 {{ $t('interface.add_row') }}
             </n-button>
         </div>
-        <!-- loaded progress -->
-        <n-progress
-            :border-radius="0"
-            :color="props.end ? '#0000' : themeVars.primaryColor"
-            :height="2"
-            :percentage="loadProgress"
-            :processing="props.loading"
-            :show-indicator="false"
-            status="success"
-            type="line" />
         <div class="value-wrapper value-item-part flex-box-h flex-item-expand">
             <!-- table -->
             <n-data-table

frontend/src/components/content_value/ContentValueStream.vue

@@ -3,7 +3,7 @@ import { computed, h, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import ContentToolbar from './ContentToolbar.vue'
 import AddLink from '@/components/icons/AddLink.vue'
-import { NButton, NIcon, useThemeVars } from 'naive-ui'
+import { NButton, NCode, NIcon, useThemeVars } from 'naive-ui'
 import { types, types as redisTypes } from '@/consts/support_redis_type.js'
 import EditableTableColumn from '@/components/common/EditableTableColumn.vue'
 import useDialogStore from 'stores/dialog.js'
@@ -94,7 +94,7 @@ const valueColumn = computed(() => ({
     },
     // sorter: (row1, row2) => row1.value - row2.value,
     render: (row) => {
-        return h('pre', {}, row.dv)
+        return h(NCode, { language: 'json', wordWrap: true, code: row.dv })
     },
 }))
 const actionColumn = {
@@ -145,11 +145,6 @@ const entries = computed(() => {
     return `${len} / ${Math.max(len, props.length)}`
 })
 
-const loadProgress = computed(() => {
-    const len = size(props.value)
-    return (len * 100) / Math.max(len, props.length)
-})
-
 const onAddRow = () => {
     dialogStore.openAddFieldsDialog(props.name, props.db, props.keyPath, props.keyCode, types.STREAM)
 }
@@ -220,16 +215,6 @@ defineExpose({
                 {{ $t('interface.add_row') }}
             </n-button>
         </div>
-        <!-- loaded progress -->
-        <n-progress
-            :border-radius="0"
-            :color="props.end ? '#0000' : themeVars.primaryColor"
-            :height="2"
-            :percentage="loadProgress"
-            :processing="props.loading"
-            :show-indicator="false"
-            status="success"
-            type="line" />
         <div class="value-wrapper value-item-part flex-box-v flex-item-expand">
             <n-data-table
                 :bordered="false"

frontend/src/components/content_value/ContentValueString.vue

@@ -1,11 +1,11 @@
 <script setup>
-import { computed, reactive, ref, watchEffect } from 'vue'
+import { computed, reactive, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import ContentToolbar from './ContentToolbar.vue'
 import Copy from '@/components/icons/Copy.vue'
 import Save from '@/components/icons/Save.vue'
 import { useThemeVars } from 'naive-ui'
-import { formatTypes } from '@/consts/value_view_type.js'
+import { decodeTypes, formatTypes } from '@/consts/value_view_type.js'
 import { types as redisTypes } from '@/consts/support_redis_type.js'
 import { ClipboardSetText } from 'wailsjs/runtime/runtime.js'
 import { isEmpty, toLower } from 'lodash'
@@ -14,7 +14,9 @@ import useBrowserStore from 'stores/browser.js'
 import { decodeRedisKey } from '@/utils/key_convert.js'
 import FormatSelector from '@/components/content_value/FormatSelector.vue'
 import ContentEditor from '@/components/content_value/ContentEditor.vue'
-import usePreferencesStore from 'stores/preferences.js'
+
+const i18n = useI18n()
+const themeVars = useThemeVars()
 
 const props = defineProps({
     name: String,
@@ -36,10 +38,6 @@ const props = defineProps({
 
 const emit = defineEmits(['reload', 'rename', 'delete'])
 
-const i18n = useI18n()
-const themeVars = useThemeVars()
-const prefStore = usePreferencesStore()
-
 /**
  *
  * @type {ComputedRef<string|number[]>}
@@ -60,8 +58,8 @@ const viewLanguage = computed(() => {
 
 const viewAs = reactive({
     value: '',
-    format: '',
-    decode: '',
+    format: formatTypes.RAW,
+    decode: decodeTypes.NONE,
 })
 
 const editingContent = ref('')
@@ -76,13 +74,13 @@ const displayValue = computed(() => {
     return viewAs.value || decodeRedisKey(props.value)
 })
 
-watchEffect(
-    () => {
-        if (props.value !== undefined) {
+watch(
+    () => props.value,
+    (val, oldVal) => {
+        if (val !== undefined) {
             onFormatChanged(viewAs.decode, viewAs.format)
         }
     },
-    { flush: 'post' },
 )
 
 const converting = ref(false)
@@ -210,7 +208,6 @@ defineExpose({
                 :content="displayValue"
                 :language="viewLanguage"
                 :loading="props.loading"
-                :show-line-num="prefStore.showLineNum"
                 class="flex-item-expand"
                 style="height: 100%"
                 @input="onInput"

frontend/src/components/content_value/ContentValueZSet.vue

@@ -3,7 +3,7 @@ import { computed, h, reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import ContentToolbar from './ContentToolbar.vue'
 import AddLink from '@/components/icons/AddLink.vue'
-import { NButton, NIcon, useThemeVars } from 'naive-ui'
+import { NButton, NCode, NIcon, useThemeVars } from 'naive-ui'
 import { types, types as redisTypes } from '@/consts/support_redis_type.js'
 import EditableTableColumn from '@/components/common/EditableTableColumn.vue'
 import { isEmpty, size } from 'lodash'
@@ -151,7 +151,7 @@ const valueColumn = computed(() => ({
     // sorter: (row1, row2) => row1.value - row2.value,
     render: (row) => {
         if (displayCode.value) {
-            return h('pre', {}, row.dv || row.v)
+            return h(NCode, { language: 'json', wordWrap: true, code: row.dv || row.v })
         }
         return row.dv || row.v
     },
@@ -291,11 +291,6 @@ const entries = computed(() => {
     return `${len} / ${Math.max(len, props.length)}`
 })
 
-const loadProgress = computed(() => {
-    const len = size(props.value)
-    return (len * 100) / Math.max(len, props.length)
-})
-
 const onAddRow = () => {
     dialogStore.openAddFieldsDialog(props.name, props.db, props.keyPath, props.keyCode, types.ZSET)
 }
@@ -371,16 +366,6 @@ defineExpose({
                 {{ $t('interface.add_row') }}
             </n-button>
         </div>
-        <!-- loaded progress -->
-        <n-progress
-            :border-radius="0"
-            :color="props.end ? '#0000' : themeVars.primaryColor"
-            :height="2"
-            :percentage="loadProgress"
-            :processing="props.loading"
-            :show-indicator="false"
-            status="success"
-            type="line" />
         <div class="value-wrapper value-item-part flex-box-h flex-item-expand">
             <!-- table -->
             <n-data-table

frontend/src/components/dialogs/DeleteKeyDialog.vue

@@ -1,10 +1,9 @@
 <script setup>
-import { computed, reactive, ref, watch } from 'vue'
+import { reactive, ref, watch } from 'vue'
 import useDialog from 'stores/dialog'
 import { useI18n } from 'vue-i18n'
-import { isEmpty, map, size } from 'lodash'
+import { isEmpty, size } from 'lodash'
 import useBrowserStore from 'stores/browser.js'
-import { decodeRedisKey } from '@/utils/key_convert.js'
 
 const deleteForm = reactive({
     server: '',
@@ -26,23 +25,16 @@ watch(
             deleteForm.server = server
             deleteForm.db = db
             deleteForm.key = key
+            deleteForm.showAffected = false
             deleteForm.loadingAffected = false
-            // deleteForm.async = true
+            deleteForm.affectedKeys = []
+            deleteForm.async = true
             loading.value = false
-            deleting.value = false
-            if (key instanceof Array) {
-                deleteForm.showAffected = true
-                deleteForm.affectedKeys = key
-            } else {
-                deleteForm.showAffected = false
-                deleteForm.affectedKeys = []
-            }
         }
     },
 )
 
 const loading = ref(false)
-const deleting = ref(false)
 const scanAffectedKey = async () => {
     try {
         loading.value = true
@@ -61,21 +53,20 @@ const resetAffected = () => {
     deleteForm.affectedKeys = []
 }
 
-const logLines = computed(() => {
-    return map(deleteForm.affectedKeys, (k) => decodeRedisKey(k))
-})
-
 const i18n = useI18n()
 const onConfirmDelete = async () => {
     try {
-        deleting.value = true
-        const { server, db, key, affectedKeys } = deleteForm
-        browserStore.deleteKeys(server, db, affectedKeys).catch((e) => {})
+        loading.value = true
+        const { server, db, key, async } = deleteForm
+        const success = await browserStore.deleteKeyPrefix(server, db, key, async)
+        if (success) {
+            $message.success(i18n.t('dialogue.handle_succ'))
+        }
     } catch (e) {
         $message.error(e.message)
         return
     } finally {
-        deleting.value = false
+        loading.value = false
     }
     dialogStore.closeDeleteKeyDialog()
 }
@@ -97,35 +88,29 @@ const onClose = () => {
         transform-origin="center">
         <n-spin :show="loading">
             <n-form :model="deleteForm" :show-require-mark="false" label-placement="top">
-                <n-grid :x-gap="10">
-                    <n-form-item-gi :label="$t('dialogue.key.server')" :span="12">
-                        <n-input :value="deleteForm.server" readonly />
-                    </n-form-item-gi>
-                    <n-form-item-gi :label="$t('dialogue.key.db_index')" :span="12">
-                        <n-input :value="deleteForm.db.toString()" readonly />
-                    </n-form-item-gi>
-                </n-grid>
-                <n-form-item
-                    v-if="!(deleteForm.key instanceof Array)"
-                    :label="$t('dialogue.key.key_expression')"
-                    required>
+                <n-form-item :label="$t('dialogue.key.server')">
+                    <n-input :value="deleteForm.server" readonly />
+                </n-form-item>
+                <n-form-item :label="$t('dialogue.key.db_index')">
+                    <n-input :value="deleteForm.db.toString()" readonly />
+                </n-form-item>
+                <n-form-item :label="$t('dialogue.key.key_expression')" required>
                     <n-input v-model:value="deleteForm.key" placeholder="" @input="resetAffected" />
                 </n-form-item>
-                <!--                <n-form-item :label="$t('dialogue.key.async_delete')" required>-->
-                <!--                    <n-checkbox v-model:checked="deleteForm.async">-->
-                <!--                        {{ $t('dialogue.key.async_delete_title') }}-->
-                <!--                    </n-checkbox>-->
-                <!--                </n-form-item>-->
+                <n-form-item :label="$t('dialogue.key.async_delete')" required>
+                    <n-checkbox v-model:checked="deleteForm.async">
+                        {{ $t('dialogue.key.async_delete_title') }}
+                    </n-checkbox>
+                </n-form-item>
                 <n-card
                     v-if="deleteForm.showAffected"
                     :title="$t('dialogue.key.affected_key') + `(${size(deleteForm.affectedKeys)})`"
-                    embedded
                     size="small">
                     <n-skeleton v-if="deleteForm.loadingAffected" :repeat="10" text />
                     <n-log
                         v-else
                         :line-height="1.5"
-                        :lines="logLines"
+                        :lines="deleteForm.affectedKeys"
                         :rows="10"
                         style="user-select: text; cursor: text" />
                 </n-card>

frontend/src/components/dialogs/PreferencesDialog.vue

@@ -123,9 +123,6 @@ const onClose = () => {
                     <n-form-item :label="$t('preferences.general.font_size')">
                         <n-input-number v-model:value="prefStore.editor.fontSize" :max="65535" :min="1" />
                     </n-form-item>
-                    <n-checkbox v-model:checked="prefStore.editor.showLineNum">
-                        {{ $t('preferences.editor.show_linenum') }}
-                    </n-checkbox>
                 </n-form>
             </n-tab-pane>
         </n-tabs>

frontend/src/components/icons/ListCheckbox.vue

@@ -1,63 +0,0 @@
-<script setup>
-const props = defineProps({
-    strokeWidth: {
-        type: [Number, String],
-        default: 3,
-    },
-})
-</script>
-
-<template>
-    <svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
-        <path clip-rule="evenodd" d="M20 24H44H20Z" fill="none" fill-rule="evenodd" />
-        <path
-            :stroke-width="props.strokeWidth"
-            d="M20 24H44"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round" />
-        <path clip-rule="evenodd" d="M20 38H44H20Z" fill="none" fill-rule="evenodd" />
-        <path
-            :stroke-width="props.strokeWidth"
-            d="M20 38H44"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round" />
-        <path clip-rule="evenodd" d="M20 10H44H20Z" fill="none" fill-rule="evenodd" />
-        <path
-            :stroke-width="props.strokeWidth"
-            d="M20 10H44"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round" />
-        <rect
-            :stroke-width="props.strokeWidth"
-            fill="none"
-            height="8"
-            stroke="currentColor"
-            stroke-linejoin="round"
-            width="8"
-            x="4"
-            y="34" />
-        <rect
-            :stroke-width="props.strokeWidth"
-            fill="none"
-            height="8"
-            stroke="currentColor"
-            stroke-linejoin="round"
-            width="8"
-            x="4"
-            y="20" />
-        <rect
-            :stroke-width="props.strokeWidth"
-            fill="none"
-            height="8"
-            stroke="currentColor"
-            stroke-linejoin="round"
-            width="8"
-            x="4"
-            y="6" />
-    </svg>
-</template>
-
-<style lang="scss" scoped></style>

frontend/src/components/sidebar/BrowserPane.vue

@@ -4,7 +4,7 @@ import BrowserTree from './BrowserTree.vue'
 import IconButton from '@/components/common/IconButton.vue'
 import useTabStore from 'stores/tab.js'
 import { computed, nextTick, onMounted, reactive, ref, unref, watch } from 'vue'
-import { find, get, map } from 'lodash'
+import { get, map } from 'lodash'
 import Refresh from '@/components/icons/Refresh.vue'
 import useDialogStore from 'stores/dialog.js'
 import { useI18n } from 'vue-i18n'
@@ -20,9 +20,6 @@ import RedisTypeSelector from '@/components/common/RedisTypeSelector.vue'
 import { types } from '@/consts/support_redis_type.js'
 import Plus from '@/components/icons/Plus.vue'
 import useConnectionStore from 'stores/connections.js'
-import ListCheckbox from '@/components/icons/ListCheckbox.vue'
-import Close from '@/components/icons/Close.vue'
-import More from '@/components/icons/More.vue'
 
 const themeVars = useThemeVars()
 const i18n = useI18n()
@@ -36,8 +33,6 @@ const currentName = computed(() => get(tabStore.currentTab, 'name', ''))
 const browserTreeRef = ref(null)
 const loading = ref(false)
 const fullyLoaded = ref(false)
-const inCheckState = ref(false)
-const checkedCount = ref(0)
 
 const selectedDB = computed(() => {
     return browserStore.selectedDatabases[currentName.value] || 0
@@ -59,29 +54,12 @@ const dbSelectOptions = computed(() => {
     })
 })
 
-const moreOptions = computed(() => {
-    return [
-        { key: 'flush', label: i18n.t('interface.flush_db'), icon: render.renderIcon(Delete, { strokeWidth: 3.5 }) },
-        {
-            key: 'disconnect',
-            label: i18n.t('interface.disconnect'),
-            icon: render.renderIcon(Unlink, { strokeWidth: 3.5 }),
-        },
-    ]
-})
-
 const loadProgress = computed(() => {
     const db = browserStore.getDatabase(currentName.value, selectedDB.value)
     if (db.maxKeys <= 0) {
         return 100
     }
-    return (db.keys * 100) / Math.max(db.keys, db.maxKeys)
-})
-
-const checkedTip = computed(() => {
-    const dblist = browserStore.getDBList(currentName.value)
-    const db = find(dblist, { db: selectedDB.value })
-    return `${checkedCount.value} / ${db.maxKeys}`
+    return (db.keys * 100) / db.maxKeys
 })
 
 const onReload = async () => {
@@ -137,10 +115,6 @@ const onLoadAll = async () => {
     }
 }
 
-const onDeleteChecked = () => {
-    browserTreeRef.value?.deleteCheckedItems()
-}
-
 const onFlush = () => {
     dialogStore.openFlushDBDialog(currentName.value, selectedDB.value)
 }
@@ -172,17 +146,6 @@ const onMatchInput = (matchVal, filterVal) => {
     onReload()
 }
 
-const onSelectOptions = (select) => {
-    switch (select) {
-        case 'flush':
-            onFlush()
-            break
-        case 'disconnect':
-            onDisconnect()
-            break
-    }
-}
-
 watch(
     () => browserStore.openedDB[currentName.value],
     async (db, prevDB) => {
@@ -195,7 +158,7 @@ watch(
             browserStore.closeDatabase(currentName.value, prevDB)
             browserStore.setKeyFilter(currentName.value, {})
             await browserStore.openDatabase(currentName.value, db)
-            // browserTreeRef.value?.resetExpandKey(currentName.value, db)
+            browserTreeRef.value?.resetExpandKey(currentName.value, db)
             fullyLoaded.value = await browserStore.loadMoreKeys(currentName.value, db)
             browserTreeRef.value?.refreshTree()
 
@@ -269,9 +232,6 @@ onMounted(() => onReload())
         <!-- tree view -->
         <browser-tree
             ref="browserTreeRef"
-            v-model:checked-count="checkedCount"
-            :check-mode="inCheckState"
-            :db="browserStore.openedDB[currentName]"
             :full-loaded="fullyLoaded"
             :loading="loading && loadProgress <= 0"
             :pattern="filterForm.filter"
@@ -285,70 +245,50 @@ onMounted(() => onReload())
             <!--                :stroke-width="3.5"-->
             <!--                unselect-stroke-width="3"-->
             <!--                @update:value="onSwitchView" />-->
-            <transition mode="out-in" name="fade">
-                <div v-if="!inCheckState" 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" style="min-width: 10px" />
-                    <icon-button
-                        :button-class="['nav-pane-func-btn']"
-                        :icon="ListCheckbox"
-                        :stroke-width="3.5"
-                        size="20"
-                        t-tooltip="interface.check_mode"
-                        @click="inCheckState = true" />
-                    <n-dropdown :options="moreOptions" placement="top-end" @select="onSelectOptions">
-                        <icon-button :button-class="['nav-pane-func-btn']" :icon="More" :stroke-width="3.5" size="20" />
-                    </n-dropdown>
-                </div>
-
-                <!-- check mode function bar -->
-                <div v-else class="flex-box-h nav-pane-func">
-                    <icon-button
-                        :button-class="['nav-pane-func-btn']"
-                        :disabled="checkedCount <= 0"
-                        :icon="Delete"
-                        :stroke-width="3.5"
-                        size="20"
-                        t-tooltip="interface.delete_checked"
-                        @click="onDeleteChecked" />
-                    <div class="flex-item-expand ellipsis" style="text-align: center; margin: 0 5px">
-                        <n-text>{{ checkedTip }}</n-text>
-                    </div>
-                    <icon-button
-                        :button-class="['nav-pane-func-btn']"
-                        :icon="Close"
-                        :stroke-width="3.5"
-                        size="20"
-                        t-tooltip="interface.quit_check_mode"
-                        @click="inCheckState = false" />
-                </div>
-            </transition>
+            <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" style="min-width: 10px" />
+                <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>
@@ -359,29 +299,17 @@ onMounted(() => onReload())
 :deep(.toggle-btn) {
     border-style: solid;
     border-width: 1px;
-    border-radius: 3px;
-    padding: 4px;
 }
 
-:deep(.toggle-on) {
+:deep(.filter-on) {
     border-color: v-bind('themeVars.iconColorDisabled');
     background-color: v-bind('themeVars.iconColorDisabled');
 }
 
-:deep(.toggle-off) {
+:deep(.filter-off) {
     border-color: #0000;
 }
 
-.fade-enter-active,
-.fade-leave-active {
-    transition: opacity 0.3s ease;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-    opacity: 0;
-}
-
 .nav-pane-top {
     //@include bottom-shadow(0.1);
     color: v-bind('themeVars.iconColor');

frontend/src/components/sidebar/BrowserTree.vue

@@ -1,11 +1,11 @@
 <script setup>
-import { computed, h, nextTick, reactive, ref, watchEffect } from 'vue'
+import { computed, h, nextTick, reactive, ref } from 'vue'
 import { ConnectionType } from '@/consts/connection_type.js'
 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'
-import { filter, find, get, includes, indexOf, isEmpty, map, remove, size, startsWith } from 'lodash'
+import { find, get, includes, indexOf, isEmpty, remove, size, startsWith } from 'lodash'
 import { useI18n } from 'vue-i18n'
 import Refresh from '@/components/icons/Refresh.vue'
 import CopyLink from '@/components/icons/CopyLink.vue'
@@ -26,40 +26,21 @@ import { useRender } from '@/utils/render.js'
 
 const props = defineProps({
     server: String,
-    db: Number,
     keyView: String,
     loading: Boolean,
     pattern: String,
     fullLoaded: Boolean,
-    checkMode: Boolean,
-    checkedCount: Number,
 })
 
-const emit = defineEmits(['update:checked-count'])
-
 const themeVars = useThemeVars()
 const render = useRender()
 const i18n = useI18n()
-const expandedKeys = ref([])
-const checkedKeys = reactive({
-    keys: [],
-    redisKeys: [],
-})
+const expandedKeys = ref([props.server])
 const connectionStore = useConnectionStore()
 const browserStore = useBrowserStore()
 const tabStore = useTabStore()
 const dialogStore = useDialogStore()
 
-watchEffect(
-    () => {
-        if (!props.checkMode) {
-            resetCheckedKey()
-        }
-        emit('update:checked-count', size(checkedKeys.keys))
-    },
-    { flush: 'post' },
-)
-
 /**
  *
  * @type {ComputedRef<string[]>}
@@ -67,9 +48,9 @@ watchEffect(
 const selectedKeys = computed(() => {
     const tab = find(tabStore.tabList, { name: props.server })
     if (tab != null) {
-        return get(tab, 'selectedKeys', [])
+        return get(tab, 'selectedKeys', [props.server])
     }
-    return []
+    return [props.server]
 })
 
 const data = computed(() => {
@@ -189,11 +170,6 @@ const resetExpandKey = (server, db, includeDB) => {
     })
 }
 
-const resetCheckedKey = () => {
-    checkedKeys.keys = []
-    checkedKeys.redisKeys = []
-}
-
 const handleSelectContextMenu = (key) => {
     contextMenuParam.show = false
     const selectedKey = get(selectedKeys.value, 0)
@@ -271,32 +247,6 @@ const handleSelectContextMenu = (key) => {
     }
 }
 
-const onUpdateSelectedKeys = (keys, options) => {
-    try {
-        if (!isEmpty(options)) {
-            // prevent load duplicate key
-            for (const node of options) {
-                if (node.type === ConnectionType.RedisValue) {
-                    const { key, db } = node
-                    const redisKey = node.redisKeyCode || node.redisKey
-                    if (!includes(selectedKeys.value, key)) {
-                        browserStore.loadKeySummary({
-                            server: props.server,
-                            db,
-                            key: redisKey,
-                        })
-                    }
-                    return
-                }
-            }
-        }
-        // default is load blank key to display server status
-        tabStore.openBlank(props.server)
-    } finally {
-        tabStore.setSelectedKeys(props.server, keys)
-    }
-}
-
 const onUpdateExpanded = (value, option, meta) => {
     expandedKeys.value = value
     if (!meta.node) {
@@ -323,17 +273,30 @@ const onUpdateExpanded = (value, option, meta) => {
     }
 }
 
-/**
- *
- * @param {string[]} keys
- * @param {TreeOption[]} options
- */
-const onUpdateCheckedKeys = (keys, options) => {
-    checkedKeys.keys = keys
-    checkedKeys.redisKeys = map(
-        filter(options, (o) => o.type === ConnectionType.RedisValue),
-        (o) => o.redisKeyCode || o.redisKey,
-    )
+const onUpdateSelectedKeys = (keys, options) => {
+    try {
+        if (!isEmpty(options)) {
+            // prevent load duplicate key
+            for (const node of options) {
+                if (node.type === ConnectionType.RedisValue) {
+                    const { key, db } = node
+                    const redisKey = node.redisKeyCode || node.redisKey
+                    if (!includes(selectedKeys.value, key)) {
+                        browserStore.loadKeySummary({
+                            server: props.server,
+                            db,
+                            key: redisKey,
+                        })
+                    }
+                    return
+                }
+            }
+        }
+        // default is load blank key to display server status
+        tabStore.openBlank(props.server)
+    } finally {
+        tabStore.setSelectedKeys(props.server, keys)
+    }
 }
 
 const renderPrefix = ({ option }) => {
@@ -486,10 +449,8 @@ const nodeProps = ({ option }) => {
                 console.warn('TODO: alert to ignore double click when loading')
                 return
             }
-            if (!props.checkMode) {
-                // default handle is expand current node
-                nextTick().then(() => expandKey(option.key))
-            }
+            // default handle is expand current node
+            nextTick().then(() => expandKey(option.key))
         },
         onContextmenu(e) {
             e.preventDefault()
@@ -523,13 +484,6 @@ defineExpose({
     resetExpandKey,
     refreshTree: () => {
         treeKey.value = Date.now()
-        expandedKeys.value = []
-        resetCheckedKey()
-    },
-    deleteCheckedItems: () => {
-        if (!isEmpty(checkedKeys.redisKeys)) {
-            dialogStore.openDeleteKeyDialog(props.server, props.db, checkedKeys.redisKeys)
-        }
     },
 })
 </script>
@@ -545,9 +499,6 @@ defineExpose({
             :block-line="true"
             :block-node="true"
             :cancelable="false"
-            :cascade="true"
-            :checkable="props.checkMode"
-            :checked-keys="checkedKeys.keys"
             :data="data"
             :expand-on-click="false"
             :expanded-keys="expandedKeys"
@@ -559,12 +510,10 @@ defineExpose({
             :render-suffix="renderSuffix"
             :selected-keys="selectedKeys"
             :show-irrelevant-nodes="false"
-            check-strategy="child"
             class="fill-height"
             virtual-scroll
             @update:selected-keys="onUpdateSelectedKeys"
-            @update:expanded-keys="onUpdateExpanded"
-            @update:checked-keys="onUpdateCheckedKeys" />
+            @update:expanded-keys="onUpdateExpanded" />
         <n-dropdown
             :options="contextMenuParam.options"
             :render-label="renderContextLabel"

frontend/src/langs/en-us.json

@@ -42,8 +42,7 @@
       "auto_check_update": "Automatically check for updates"
     },
     "editor": {
-      "name": "Editor",
-      "show_linenum": "Show Line Numbers"
+      "name": "Editor"
     }
   },
   "interface": {
@@ -70,9 +69,6 @@
     "delete_key": "Delete Key",
     "batch_delete_key": "Batch Delete Keys",
     "flush_db": "Flush Database",
-    "check_mode": "Check Mode",
-    "quit_check_mode": "Quit Check Mode",
-    "delete_checked": "Delete Checked Items",
     "copy_value": "Copy Value",
     "edit_value": "Edit Value",
     "save_update": "Save Update",
@@ -136,8 +132,6 @@
     "remove_tip": "{type} \"{name}\" will be deleted",
     "remove_group_tip": "Group \"{name}\" and all connections in it will be deleted",
     "delete_key_succ": "\"{key}\" has been deleted",
-    "deleting_key": "Deleting key: {key} ({index}/{count})",
-    "delete_completed": "Deletion process has been completed, {success} successed, {fail} failed",
     "rename_binary_key_fail": "Rename binary key name is unsupported",
     "handle_succ": "Success!",
     "reload_succ": "Reloaded!",

frontend/src/langs/zh-cn.json

@@ -42,8 +42,7 @@
       "auto_check_update": "自动检查更新"
     },
     "editor": {
-      "name": "编辑器",
-      "show_linenum": "显示行号"
+      "name": "编辑器"
     }
   },
   "interface": {
@@ -70,9 +69,6 @@
     "delete_key": "删除键",
     "batch_delete_key": "批量删除键",
     "flush_db": "清空数据库",
-    "check_mode": "勾选模式",
-    "quit_check_mode": "退出勾选模式",
-    "delete_checked": "删除勾选项",
     "copy_value": "复制值",
     "edit_value": "修改值",
     "save_update": "保存修改",
@@ -136,8 +132,6 @@
     "remove_tip": "{type} \"{name}\" 将会被删除",
     "remove_group_tip": "分组 \"{name}\"及其所有连接将会被删除",
     "delete_key_succ": "{key} 已被删除",
-    "deleting_key": "正在删除键：{key} ({index}/{count})",
-    "delete_completed": "已完成删除操作，成功{success}个，失败{fail}个",
     "rename_binary_key_fail": "不支持重命名二进制键名",
     "handle_succ": "操作成功",
     "reload_succ": "已重新载入",

frontend/src/stores/browser.js

@@ -25,7 +25,6 @@ import {
     CloseConnection,
     ConvertValue,
     DeleteKey,
-    DeleteOneKey,
     FlushDB,
     GetCmdHistory,
     GetKeyDetail,
@@ -54,7 +53,6 @@ import { ConnectionType } from '@/consts/connection_type.js'
 import useConnectionStore from 'stores/connections.js'
 import { decodeTypes, formatTypes } from '@/consts/value_view_type.js'
 import { isRedisGlob } from '@/utils/glob_pattern.js'
-import { i18nGlobal } from '@/utils/i18n.js'
 
 const useBrowserStore = defineStore('browser', {
     /**
@@ -1843,46 +1841,43 @@ const useBrowserStore = defineStore('browser', {
         },
 
         /**
-         * delete multiple keys
-         * @param {string} server
+         * delete keys with prefix
+         * @param {string} connName
          * @param {number} db
-         * @param {string[]|number[][]} keys
-         * @return {Promise<void>}
+         * @param {string} prefix
+         * @param {boolean} async
+         * @returns {Promise<boolean>}
          */
-        async deleteKeys(server, db, keys) {
-            const delMsgRef = $message.loading('', { duration: 0 })
-            let progress = 0
-            let count = size(keys)
-            let deletedCount = 0,
-                failCount = 0
-            for (const key of keys) {
-                delMsgRef.content = i18nGlobal.t('dialogue.deleting_key', {
-                    key: decodeRedisKey(key),
-                    index: ++progress,
-                    count,
-                })
-                const { success } = await DeleteOneKey(server, db, key)
-                if (success) {
-                    this._deleteKeyNode(server, db, key, false)
-                    deletedCount += 1
-                } else {
-                    failCount += 1
+        async deleteKeyPrefix(connName, db, prefix, async) {
+            if (isEmpty(prefix)) {
+                return false
+            }
+            try {
+                if (!endsWith(prefix, '*')) {
+                    prefix += '*'
                 }
+                const { data, success, msg } = await DeleteKey(connName, db, prefix, async)
+                if (success) {
+                    // const { deleted: keys = [] } = data
+                    // for (const key of keys) {
+                    //     await this._deleteKeyNode(connName, db, key)
+                    // }
+                    const deleteCount = get(data, 'deleteCount', 0)
+                    const separator = this._getSeparator(connName)
+                    if (endsWith(prefix, '*')) {
+                        prefix = prefix.substring(0, prefix.length - 1)
+                    }
+                    if (endsWith(prefix, separator)) {
+                        prefix = prefix.substring(0, prefix.length - 1)
+                    }
+                    this._deleteKeyNode(connName, db, prefix, true)
+                    this._tidyNode(connName, db, prefix, true)
+                    this._updateDBMaxKeys(connName, db, -deleteCount)
+                    return true
+                }
+            } finally {
             }
-            delMsgRef.destroy()
-            // refresh model data
-            this._tidyNode(server, db, '', true)
-            this._updateDBMaxKeys(server, db, -deletedCount)
-            if (failCount <= 0) {
-                // no fail
-                $message.success(i18nGlobal.t('dialogue.delete_completed', { success: deletedCount, fail: failCount }))
-            } else if (failCount >= deletedCount) {
-                // all fail
-                $message.error(i18nGlobal.t('dialogue.delete_completed', { success: deletedCount, fail: failCount }))
-            } else {
-                // some fail
-                $message.warn(i18nGlobal.t('dialogue.delete_completed', { success: deletedCount, fail: failCount }))
-            }
+            return false
         },
 
         /**

frontend/src/stores/dialog.js

@@ -1,5 +1,5 @@
-import { defineStore } from "pinia";
-import useConnectionStore from "./connections.js";
+import { defineStore } from 'pinia'
+import useConnectionStore from './connections.js'
 
 /**
  * connection dialog type
@@ -160,12 +160,6 @@ const useDialogStore = defineStore('dialog', {
             this.renameDialogVisible = false
         },
 
-        /**
-         *
-         * @param {string} server
-         * @param {number} db
-         * @param {string | string[]} key
-         */
         openDeleteKeyDialog(server, db, key) {
             this.deleteKeyParam.server = server
             this.deleteKeyParam.db = db

frontend/src/stores/preferences.js

@@ -36,7 +36,6 @@ const usePreferencesStore = defineStore('preferences', {
             asideWidth: 300,
             windowWidth: 0,
             windowHeight: 0,
-            windowMaximised: false,
         },
         general: {
             theme: 'auto',
@@ -46,13 +45,12 @@ const usePreferencesStore = defineStore('preferences', {
             scanSize: 3000,
             useSysProxy: false,
             useSysProxyHttp: false,
-            checkUpdate: true,
+            checkUpdate: false,
             skipVersion: '',
         },
         editor: {
             font: '',
             fontSize: 14,
-            showLineNum: false,
         },
         lastPref: {},
         fontList: [],
@@ -183,10 +181,6 @@ const usePreferencesStore = defineStore('preferences', {
         autoCheckUpdate() {
             return get(this.general, 'checkUpdate', false)
         },
-
-        showLineNum() {
-            return get(this.editor, 'showLineNum', true)
-        },
     },
     actions: {
         _applyPreferences(data) {
@@ -204,11 +198,6 @@ const usePreferencesStore = defineStore('preferences', {
             if (success) {
                 this.lastPref = cloneDeep(data)
                 this._applyPreferences(data)
-                // default value
-                const showLineNum = get(data, 'editor.showLineNum')
-                if (showLineNum === undefined) {
-                    set(data, 'editor.showLineNum', true)
-                }
                 i18nGlobal.locale.value = this.currentLanguage
             }
         },

frontend/src/stores/tab.js

@@ -10,7 +10,6 @@ const useTabStore = defineStore('tab', {
      * @property {string} [title] tab title
      * @property {string} [icon] tab icon
      * @property {string[]} selectedKeys
-     * @property {string[]} checkdeKeys
      * @property {string} [type] key type
      * @property {*} [value] key value
      * @property {string} [server] server name
@@ -639,7 +638,7 @@ const useTabStore = defineStore('tab', {
         },
 
         /**
-         * set selected keys in current display browser tree
+         * set selected keys of current display browser tree
          * @param {string} server
          * @param {string|string[]} [keys]
          */
@@ -648,7 +647,7 @@ const useTabStore = defineStore('tab', {
             if (tab != null) {
                 if (keys == null) {
                     // select nothing
-                    tab.selectedKeys = []
+                    tab.selectedKeys = [server]
                 } else if (typeof keys === 'string') {
                     tab.selectedKeys = [keys]
                 } else {