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

View File

@ -1,7 +1,7 @@
<script setup>
import { computed, h } from 'vue'
import { useThemeVars } from 'naive-ui'
import { types, typesBgColor, typesColor } from '@/consts/support_redis_type.js'
import { NSpace, useThemeVars } from 'naive-ui'
import { types, typesBgColor, typesColor, typesShortName } from '@/consts/support_redis_type.js'
import { get, map, toUpper } from 'lodash'
import RedisTypeTag from '@/components/common/RedisTypeTag.vue'
@ -26,6 +26,7 @@ const themeVars = useThemeVars()
const renderIcon = (option) => {
return h(RedisTypeTag, {
type: option.key,
defaultLabel: 'A',
short: true,
size: 'small',
inverse: option.key === props.value,
@ -33,15 +34,27 @@ const renderIcon = (option) => {
}
const renderLabel = (option) => {
return h(
'div',
{
style: {
fontWeight: option.key === props.value ? 'bold' : 'normal',
const children = [
h(
'div',
{
style: {
fontWeight: option.key === props.value ? 'bold' : 'normal',
},
},
},
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(() => {
@ -53,7 +66,7 @@ const backgroundColor = computed(() => {
})
const displayValue = computed(() => {
return get(types, toUpper(props.value), 'ALL')
return get(typesShortName, toUpper(props.value), 'A')
})
const handleSelect = (select) => {

View File

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