perf: optimize type match selector

frontend/src/components/common/RedisTypeSelector.vue

@@ -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,7 +34,8 @@ const renderIcon = (option) => {
 }
 
 const renderLabel = (option) => {
-    return h(
+    const children = [
+        h(
             'div',
             {
                 style: {
@@ -41,7 +43,18 @@ const renderLabel = (option) => {
                 },
             },
             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) => {

frontend/src/components/common/RedisTypeTag.vue

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