perf: optimize type match selector
This commit is contained in:
parent
f9abba37d2
commit
84b42e6461
|
@ -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) => {
|
||||
|
|
|
@ -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="{
|
||||
|
|
Loading…
Reference in New Issue