feat: support more key icon display type
This commit is contained in:
parent
ba55cbcbd3
commit
827ca1f2e7
|
@ -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
|
||||
}
|
||||
|
||||
|
|
|
@ -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
|
||||
}
|
||||
|
||||
|
|
|
@ -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"`
|
||||
}
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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),
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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,
|
||||
}
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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请求时使用系统代理",
|
||||
|
|
|
@ -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) {
|
||||
|
|
Loading…
Reference in New Issue