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) {
|
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
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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"`
|
||||||
}
|
}
|
||||||
|
|
|
@ -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',
|
||||||
|
|
|
@ -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">
|
||||||
|
|
|
@ -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),
|
||||||
|
})
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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,
|
||||||
|
}
|
||||||
|
|
|
@ -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",
|
||||||
|
|
|
@ -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请求时使用系统代理",
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
Loading…
Reference in New Issue