From 827ca1f2e7d51de3ed560f28f304d4e48986e92c Mon Sep 17 00:00:00 2001
From: Lykin <137850705+tiny-craft@users.noreply.github.com>
Date: Tue, 5 Dec 2023 12:03:00 +0800
Subject: [PATCH] feat: support more key icon display type

---
 backend/storage/connections.go                |  2 +-
 backend/storage/preferences.go                |  2 +-
 backend/types/preferences.go                  | 14 +++---
 .../src/components/common/RedisTypeTag.vue    | 14 ++++++
 .../components/dialogs/PreferencesDialog.vue  | 28 ++++++++----
 .../src/components/sidebar/BrowserTree.vue    | 44 ++++++++++++++++---
 frontend/src/consts/support_redis_type.js     | 11 +++++
 frontend/src/langs/en-us.json                 |  5 +++
 frontend/src/langs/zh-cn.json                 |  5 +++
 frontend/src/stores/preferences.js            |  8 +++-
 10 files changed, 109 insertions(+), 24 deletions(-)

diff --git a/backend/storage/connections.go b/backend/storage/connections.go
index 07955c9..4065441 100644
--- a/backend/storage/connections.go
+++ b/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
 	}
 
diff --git a/backend/storage/preferences.go b/backend/storage/preferences.go
index 6778343..8ca03a0 100644
--- a/backend/storage/preferences.go
+++ b/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
 	}
 
diff --git a/backend/types/preferences.go b/backend/types/preferences.go
index 907403a..dc02db0 100644
--- a/backend/types/preferences.go
+++ b/backend/types/preferences.go
@@ -16,11 +16,12 @@ func NewPreferences() Preferences {
 			WindowHeight: consts.DEFAULT_WINDOW_HEIGHT,
 		},
 		General: PreferencesGeneral{
-			Theme:       "auto",
-			Language:    "auto",
-			FontSize:    consts.DEFAULT_FONT_SIZE,
-			ScanSize:    consts.DEFAULT_SCAN_SIZE,
-			CheckUpdate: true,
+			Theme:        "auto",
+			Language:     "auto",
+			FontSize:     consts.DEFAULT_FONT_SIZE,
+			ScanSize:     consts.DEFAULT_SCAN_SIZE,
+			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"`
 }
diff --git a/frontend/src/components/common/RedisTypeTag.vue b/frontend/src/components/common/RedisTypeTag.vue
index 1862c56..b78a40b 100644
--- a/frontend/src/components/common/RedisTypeTag.vue
+++ b/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',
diff --git a/frontend/src/components/dialogs/PreferencesDialog.vue b/frontend/src/components/dialogs/PreferencesDialog.vue
index ae7e6f1..11a3054 100644
--- a/frontend/src/components/dialogs/PreferencesDialog.vue
+++ b/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(
-    () => dialogStore.preferencesDialogVisible,
-    (visible) => {
-        if (visible) {
-            initPreferences()
-        }
-    },
-)
+watchEffect(() => {
+    if (dialogStore.preferencesDialogVisible) {
+        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">
diff --git a/frontend/src/components/sidebar/BrowserTree.vue b/frontend/src/components/sidebar/BrowserTree.vue
index 5f1acd4..f850310 100644
--- a/frontend/src/components/sidebar/BrowserTree.vue
+++ b/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, {
-                type: toUpper(option.redisType),
-                short: true,
-                size: 'small',
-                inverse: includes(selectedKeys.value, option.key),
-            })
+            switch (prefStore.keyIconType) {
+                case typesIconStyle.FULL:
+                    return h(RedisTypeTag, {
+                        type: toUpper(option.redisType),
+                        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),
+                    })
+            }
     }
 }
 
diff --git a/frontend/src/consts/support_redis_type.js b/frontend/src/consts/support_redis_type.js
index fd1731e..735a68b 100644
--- a/frontend/src/consts/support_redis_type.js
+++ b/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,
+}
diff --git a/frontend/src/langs/en-us.json b/frontend/src/langs/en-us.json
index dd01a7e..6ef23c7 100644
--- a/frontend/src/langs/en-us.json
+++ b/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",
diff --git a/frontend/src/langs/zh-cn.json b/frontend/src/langs/zh-cn.json
index feaefe8..220f7da 100644
--- a/frontend/src/langs/zh-cn.json
+++ b/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请求时使用系统代理",
diff --git a/frontend/src/stores/preferences.js b/frontend/src/stores/preferences.js
index a4b9424..796ac93 100644
--- a/frontend/src/stores/preferences.js
+++ b/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) {