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

perf: optimize type match selector

This commit is contained in:
Lykin 2023-12-06 10:45:51 +08:00
parent f9abba37d2
commit 84b42e6461
2 changed files with 28 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
frontend/src/components/common/RedisTypeSelector.vue
View File

@ -1,7 +1,7 @@
<script setup> <script setup>
import { computed, h } from 'vue' import { computed, h } from 'vue'
import { useThemeVars } from 'naive-ui' import { NSpace, useThemeVars } from 'naive-ui'
import { types, typesBgColor, typesColor } from '@/consts/support_redis_type.js' import { types, typesBgColor, typesColor, typesShortName } from '@/consts/support_redis_type.js'
import { get, map, toUpper } from 'lodash' import { get, map, toUpper } from 'lodash'
import RedisTypeTag from '@/components/common/RedisTypeTag.vue' import RedisTypeTag from '@/components/common/RedisTypeTag.vue'
@ -26,6 +26,7 @@ const themeVars = useThemeVars()
const renderIcon = (option) => { const renderIcon = (option) => {
return h(RedisTypeTag, { return h(RedisTypeTag, {
type: option.key, type: option.key,
defaultLabel: 'A',
short: true, short: true,
size: 'small', size: 'small',
inverse: option.key === props.value, inverse: option.key === props.value,
@ -33,7 +34,8 @@ const renderIcon = (option) => {
} }
const renderLabel = (option) => { const renderLabel = (option) => {
return h( const children = [
h(
'div', 'div',
{ {
style: { style: {
@ -41,7 +43,18 @@ const renderLabel = (option) => {
}, },
}, },
option.label, option.label,
) ),
h(
'div',
{ style: { width: '16px' } },
h(RedisTypeTag, {
type: toUpper(option.key),
point: true,
style: { display: option.key === props.value ? 'block' : 'none' },
}),
),
]
return h(NSpace, { align: 'center', wrapItem: false }, () => children)
} }
const fontColor = computed(() => { const fontColor = computed(() => {
@ -53,7 +66,7 @@ const backgroundColor = computed(() => {
}) })
const displayValue = computed(() => { const displayValue = computed(() => {
return get(types, toUpper(props.value), 'ALL') return get(typesShortName, toUpper(props.value), 'A')
}) })
const handleSelect = (select) => { const handleSelect = (select) => {

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

@ -2,13 +2,14 @@
import { computed } from 'vue' import { computed } from 'vue'
import { typesBgColor, typesColor, typesShortName } from '@/consts/support_redis_type.js' import { typesBgColor, typesColor, typesShortName } from '@/consts/support_redis_type.js'
import Binary from '@/components/icons/Binary.vue' import Binary from '@/components/icons/Binary.vue'
import { toUpper } from 'lodash' import { get, toUpper } from 'lodash'
const props = defineProps({ const props = defineProps({
type: { type: {
type: String, type: String,
default: 'STRING', default: 'STRING',
}, },
defaultLabel: String,
binaryKey: Boolean, binaryKey: Boolean,
size: String, size: String,
short: Boolean, short: Boolean,
@ -39,7 +40,7 @@ const backgroundColor = computed(() => {
const label = computed(() => { const label = computed(() => {
if (props.short) { if (props.short) {
return typesShortName[toUpper(props.type)] || 'N' return get(typesShortName, toUpper(props.type), props.defaultLabel || 'N')
} }
return toUpper(props.type) return toUpper(props.type)
}) })
@ -53,7 +54,7 @@ const label = computed(() => {
width: Math.max(props.pointSize, 5) + 'px', width: Math.max(props.pointSize, 5) + 'px',
height: Math.max(props.pointSize, 5) + 'px', height: Math.max(props.pointSize, 5) + 'px',
}" }"
class="redis-type-tag-round redis-type-tag-point"></div> class="redis-type-tag-round redis-type-tag-point" />
<n-tag <n-tag
v-else v-else
:class="{ :class="{