lingling
/
tiny-rdm
mirror of https://github.com/tiny-craft/tiny-rdm.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
backend/storage/connections.go
View File

@ -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
}

2
backend/storage/preferences.go
View File

@ -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
}

14
backend/types/preferences.go
View File

@ -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"`
}

14
frontend/src/components/common/RedisTypeTag.vue
View File

@ -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',

28
frontend/src/components/dialogs/PreferencesDialog.vue
View File

@ -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">

44
frontend/src/components/sidebar/BrowserTree.vue
View File

@ -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),
})
}
}
}

11
frontend/src/consts/support_redis_type.js
View File

@ -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,
}

5
frontend/src/langs/en-us.json
View File

@ -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",

5
frontend/src/langs/zh-cn.json
View File

@ -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请求时使用系统代理",

8
frontend/src/stores/preferences.js
View File

@ -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) {