feat: support more key icon display type

backend/storage/connections.go

@@ -47,8 +47,8 @@ func (c *ConnectionsStorage) defaultConnectionItem() types.ConnectionConfig {
 
 func (c *ConnectionsStorage) getConnections() (ret types.Connections) {
 	b, err := c.storage.Load()
+	ret = c.defaultConnections()
 	if err != nil {
-		ret = c.defaultConnections()
 		return
 	}
 

backend/storage/preferences.go

@@ -28,8 +28,8 @@ func (p *PreferencesStorage) DefaultPreferences() types.Preferences {
 
 func (p *PreferencesStorage) getPreferences() (ret types.Preferences) {
 	b, err := p.storage.Load()
+	ret = p.DefaultPreferences()
 	if err != nil {
-		ret = p.DefaultPreferences()
 		return
 	}
 

backend/types/preferences.go

@@ -16,11 +16,12 @@ func NewPreferences() Preferences {
 			WindowHeight: consts.DEFAULT_WINDOW_HEIGHT,
 		},
 		General: PreferencesGeneral{
-			Theme:       "auto",
+			Theme:        "auto",
-			Language:    "auto",
+			Language:     "auto",
-			FontSize:    consts.DEFAULT_FONT_SIZE,
+			FontSize:     consts.DEFAULT_FONT_SIZE,
-			ScanSize:    consts.DEFAULT_SCAN_SIZE,
+			ScanSize:     consts.DEFAULT_SCAN_SIZE,
-			CheckUpdate: true,
+			KeyIconStyle: 0,
+			CheckUpdate:  true,
 		},
 		Editor: PreferencesEditor{
 			FontSize:    consts.DEFAULT_FONT_SIZE,
@@ -42,6 +43,7 @@ type PreferencesGeneral struct {
 	Font            string `json:"font" yaml:"font,omitempty"`
 	FontSize        int    `json:"fontSize" yaml:"font_size"`
 	ScanSize        int    `json:"scanSize" yaml:"scan_size"`
+	KeyIconStyle    int    `json:"keyIconStyle" yaml:"key_icon_style"`
 	UseSysProxy     bool   `json:"useSysProxy" yaml:"use_sys_proxy,omitempty"`
 	UseSysProxyHttp bool   `json:"useSysProxyHttp" yaml:"use_sys_proxy_http,omitempty"`
 	CheckUpdate     bool   `json:"checkUpdate" yaml:"check_update"`
@@ -51,5 +53,5 @@ 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"`
+	ShowLineNum bool   `json:"showLineNum" yaml:"show_line_num"`
 }

frontend/src/components/common/RedisTypeTag.vue

@@ -12,6 +12,11 @@ const props = defineProps({
     binaryKey: Boolean,
     size: String,
     short: Boolean,
+    point: Boolean,
+    pointSize: {
+        type: Number,
+        default: 14,
+    },
     round: Boolean,
     inverse: Boolean,
 })
@@ -41,7 +46,16 @@ const label = computed(() => {
 </script>
 
 <template>
+    <div
+        v-if="props.point"
+        :style="{
+            backgroundColor: fontColor,
+            width: Math.max(props.pointSize, 5) + 'px',
+            height: Math.max(props.pointSize, 5) + 'px',
+        }"
+        class="redis-type-tag-round redis-type-tag-point"></div>
     <n-tag
+        v-else
         :class="{
             'redis-type-tag-normal': !props.short && props.size !== 'small',
             'redis-type-tag-small': !props.short && props.size === 'small',

frontend/src/components/dialogs/PreferencesDialog.vue

@@ -1,8 +1,10 @@
 <script setup>
-import { ref, watch } from 'vue'
+import { computed, ref, watchEffect } from 'vue'
 import { useI18n } from 'vue-i18n'
 import useDialog from 'stores/dialog'
 import usePreferencesStore from 'stores/preferences.js'
+import { map, sortBy } from 'lodash'
+import { typesIconStyle } from '@/consts/support_redis_type.js'
 
 const prefStore = usePreferencesStore()
 
@@ -26,14 +28,19 @@ const initPreferences = async () => {
     }
 }
 
-watch(
+watchEffect(() => {
-    () => dialogStore.preferencesDialogVisible,
+    if (dialogStore.preferencesDialogVisible) {
-    (visible) => {
+        initPreferences()
-        if (visible) {
+    }
-            initPreferences()
+})
-        }
+
-    },
+const keyOptions = computed(() => {
-)
+    const opts = map(typesIconStyle, (v) => ({
+        value: v,
+        label: i18n.t('preferences.general.key_icon_style' + v),
+    }))
+    return sortBy(opts, (o) => o.value)
+})
 
 const onSavePreferences = async () => {
     const success = await prefStore.savePreferences()
@@ -96,6 +103,9 @@ const onClose = () => {
                         <n-form-item-gi :label="$t('preferences.general.scan_size')" :span="12">
                             <n-input-number v-model:value="prefStore.general.scanSize" :min="1" />
                         </n-form-item-gi>
+                        <n-form-item-gi :label="$t('preferences.general.key_icon_style')" :span="12">
+                            <n-select v-model:value="prefStore.general.keyIconStyle" :options="keyOptions" />
+                        </n-form-item-gi>
                         <n-form-item-gi :label="$t('preferences.general.proxy')" :span="24">
                             <n-space>
                                 <n-checkbox v-model:checked="prefStore.general.useSysProxy">

frontend/src/components/sidebar/BrowserTree.vue

@@ -24,6 +24,8 @@ import LoadAll from '@/components/icons/LoadAll.vue'
 import useBrowserStore from 'stores/browser.js'
 import { useRender } from '@/utils/render.js'
 import RedisTypeTag from '@/components/common/RedisTypeTag.vue'
+import usePreferencesStore from 'stores/preferences.js'
+import { typesIconStyle } from '@/consts/support_redis_type.js'
 
 const props = defineProps({
     server: String,
@@ -48,6 +50,7 @@ const checkedKeys = reactive({
 })
 const connectionStore = useConnectionStore()
 const browserStore = useBrowserStore()
+const prefStore = usePreferencesStore()
 const tabStore = useTabStore()
 const dialogStore = useDialogStore()
 
@@ -356,6 +359,7 @@ const renderPrefix = ({ option }) => {
                     default: () => h(Database, { inverse: option.opened === true }),
                 },
             )
+
         case ConnectionType.RedisKey:
             return h(
                 NIcon,
@@ -364,7 +368,17 @@ const renderPrefix = ({ option }) => {
                     default: () => h(Layer),
                 },
             )
+
         case ConnectionType.RedisValue:
+            if (prefStore.keyIconType === typesIconStyle.ICON) {
+                return h(
+                    NIcon,
+                    { size: 20 },
+                    {
+                        default: () => h(!!option.redisKeyCode ? Binary : Key),
+                    },
+                )
+            }
             if (option.redisType == null || option.redisType === 'loading') {
                 browserStore.loadKeyType({
                     server: props.server,
@@ -381,12 +395,30 @@ const renderPrefix = ({ option }) => {
                     },
                 )
             }
-            return h(RedisTypeTag, {
+            switch (prefStore.keyIconType) {
-                type: toUpper(option.redisType),
+                case typesIconStyle.FULL:
-                short: true,
+                    return h(RedisTypeTag, {
-                size: 'small',
+                        type: toUpper(option.redisType),
-                inverse: includes(selectedKeys.value, option.key),
+                        short: false,
-            })
+                        size: 'small',
+                        inverse: includes(selectedKeys.value, option.key),
+                    })
+
+                case typesIconStyle.POINT:
+                    return h(RedisTypeTag, {
+                        type: toUpper(option.redisType),
+                        point: true,
+                    })
+
+                case typesIconStyle.SHORT:
+                default:
+                    return h(RedisTypeTag, {
+                        type: toUpper(option.redisType),
+                        short: true,
+                        size: 'small',
+                        inverse: includes(selectedKeys.value, option.key),
+                    })
+            }
     }
 }
 

frontend/src/consts/support_redis_type.js

@@ -51,3 +51,14 @@ export const typesBgColor = {
 export const validType = (t) => {
     return types.hasOwnProperty(t)
 }
+
+/**
+ * icon type in browser tree
+ * @enum {string}
+ */
+export const typesIconStyle = {
+    SHORT: 0,
+    FULL: 1,
+    POINT: 2,
+    ICON: 3,
+}

frontend/src/langs/en-us.json

@@ -35,6 +35,11 @@
       "font": "Font",
       "font_size": "Font Size",
       "scan_size": "Default Size for SCAN Command",
+      "key_icon_style": "Key Icon Style",
+      "key_icon_style0": "Short",
+      "key_icon_style1": "Full",
+      "key_icon_style2": "Point",
+      "key_icon_style3": "Key Icon",
       "proxy": "Proxy",
       "use_system_proxy": "Use system proxy",
       "use_system_proxy_http": "Use system proxy only for HTTP(S) request",

frontend/src/langs/zh-cn.json

@@ -35,6 +35,11 @@
       "font": "字体",
       "font_size": "字体尺寸",
       "scan_size": "SCAN命令默认数量",
+      "key_icon_style": "键图标样式",
+      "key_icon_style0": "紧凑类型",
+      "key_icon_style1": "全称类型",
+      "key_icon_style2": "圆点类型",
+      "key_icon_style3": "键图标",
       "proxy": "代理",
       "use_system_proxy": "使用系统代理",
       "use_system_proxy_http": "仅在HTTP请求时使用系统代理",

frontend/src/stores/preferences.js

@@ -13,6 +13,7 @@ import { i18nGlobal } from '@/utils/i18n.js'
 import { enUS, NButton, NSpace, useOsTheme, zhCN } from 'naive-ui'
 import { h, nextTick } from 'vue'
 import { compareVersion } from '@/utils/version.js'
+import { typesIconStyle } from '@/consts/support_redis_type.js'
 
 const osTheme = useOsTheme()
 const usePreferencesStore = defineStore('preferences', {
@@ -44,6 +45,7 @@ const usePreferencesStore = defineStore('preferences', {
             font: '',
             fontSize: 14,
             scanSize: 3000,
+            keyIconStyle: 0,
             useSysProxy: false,
             useSysProxyHttp: false,
             checkUpdate: true,
@@ -52,7 +54,7 @@ const usePreferencesStore = defineStore('preferences', {
         editor: {
             font: '',
             fontSize: 14,
-            showLineNum: false,
+            showLineNum: true,
         },
         lastPref: {},
         fontList: [],
@@ -187,6 +189,10 @@ const usePreferencesStore = defineStore('preferences', {
         showLineNum() {
             return get(this.editor, 'showLineNum', true)
         },
+
+        keyIconType() {
+            return get(this.general, 'keyIconStyle', typesIconStyle.SHORT)
+        },
     },
     actions: {
         _applyPreferences(data) {