feat: support more key icon display type

This commit is contained in:
Lykin 2023-12-05 12:03:00 +08:00
parent ba55cbcbd3
commit 827ca1f2e7
10 changed files with 109 additions and 24 deletions

View File

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

View File

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

View File

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

View File

@ -12,6 +12,11 @@ const props = defineProps({
binaryKey: Boolean, binaryKey: Boolean,
size: String, size: String,
short: Boolean, short: Boolean,
point: Boolean,
pointSize: {
type: Number,
default: 14,
},
round: Boolean, round: Boolean,
inverse: Boolean, inverse: Boolean,
}) })
@ -41,7 +46,16 @@ const label = computed(() => {
</script> </script>
<template> <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 <n-tag
v-else
:class="{ :class="{
'redis-type-tag-normal': !props.short && props.size !== 'small', 'redis-type-tag-normal': !props.short && props.size !== 'small',
'redis-type-tag-small': !props.short && props.size === 'small', 'redis-type-tag-small': !props.short && props.size === 'small',

View File

@ -1,8 +1,10 @@
<script setup> <script setup>
import { ref, watch } from 'vue' import { computed, ref, watchEffect } from 'vue'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import useDialog from 'stores/dialog' import useDialog from 'stores/dialog'
import usePreferencesStore from 'stores/preferences.js' import usePreferencesStore from 'stores/preferences.js'
import { map, sortBy } from 'lodash'
import { typesIconStyle } from '@/consts/support_redis_type.js'
const prefStore = usePreferencesStore() 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 onSavePreferences = async () => {
const success = await prefStore.savePreferences() const success = await prefStore.savePreferences()
@ -96,6 +103,9 @@ const onClose = () => {
<n-form-item-gi :label="$t('preferences.general.scan_size')" :span="12"> <n-form-item-gi :label="$t('preferences.general.scan_size')" :span="12">
<n-input-number v-model:value="prefStore.general.scanSize" :min="1" /> <n-input-number v-model:value="prefStore.general.scanSize" :min="1" />
</n-form-item-gi> </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-form-item-gi :label="$t('preferences.general.proxy')" :span="24">
<n-space> <n-space>
<n-checkbox v-model:checked="prefStore.general.useSysProxy"> <n-checkbox v-model:checked="prefStore.general.useSysProxy">

View File

@ -24,6 +24,8 @@ import LoadAll from '@/components/icons/LoadAll.vue'
import useBrowserStore from 'stores/browser.js' import useBrowserStore from 'stores/browser.js'
import { useRender } from '@/utils/render.js' import { useRender } from '@/utils/render.js'
import RedisTypeTag from '@/components/common/RedisTypeTag.vue' import RedisTypeTag from '@/components/common/RedisTypeTag.vue'
import usePreferencesStore from 'stores/preferences.js'
import { typesIconStyle } from '@/consts/support_redis_type.js'
const props = defineProps({ const props = defineProps({
server: String, server: String,
@ -48,6 +50,7 @@ const checkedKeys = reactive({
}) })
const connectionStore = useConnectionStore() const connectionStore = useConnectionStore()
const browserStore = useBrowserStore() const browserStore = useBrowserStore()
const prefStore = usePreferencesStore()
const tabStore = useTabStore() const tabStore = useTabStore()
const dialogStore = useDialogStore() const dialogStore = useDialogStore()
@ -356,6 +359,7 @@ const renderPrefix = ({ option }) => {
default: () => h(Database, { inverse: option.opened === true }), default: () => h(Database, { inverse: option.opened === true }),
}, },
) )
case ConnectionType.RedisKey: case ConnectionType.RedisKey:
return h( return h(
NIcon, NIcon,
@ -364,7 +368,17 @@ const renderPrefix = ({ option }) => {
default: () => h(Layer), default: () => h(Layer),
}, },
) )
case ConnectionType.RedisValue: 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') { if (option.redisType == null || option.redisType === 'loading') {
browserStore.loadKeyType({ browserStore.loadKeyType({
server: props.server, 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),
})
}
} }
} }

View File

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

View File

@ -35,6 +35,11 @@
"font": "Font", "font": "Font",
"font_size": "Font Size", "font_size": "Font Size",
"scan_size": "Default Size for SCAN Command", "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", "proxy": "Proxy",
"use_system_proxy": "Use system proxy", "use_system_proxy": "Use system proxy",
"use_system_proxy_http": "Use system proxy only for HTTP(S) request", "use_system_proxy_http": "Use system proxy only for HTTP(S) request",

View File

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

View File

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