From 23087a53745ae2b9d54afdc01326b02f3e913f88 Mon Sep 17 00:00:00 2001
From: Lykin <137850705+tiny-craft@users.noreply.github.com>
Date: Thu, 4 Jan 2024 00:33:51 +0800
Subject: [PATCH] perf: add binary suffix to binary keys in tree list

---
 .../content_value/ContentSearchInput.vue        |  1 +
 frontend/src/components/sidebar/BrowserTree.vue | 17 ++++++-----------
 frontend/src/utils/theme.js                     |  2 +-
 3 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/content_value/ContentSearchInput.vue b/frontend/src/components/content_value/ContentSearchInput.vue
index 658a41e..4ecd0a8 100644
--- a/frontend/src/components/content_value/ContentSearchInput.vue
+++ b/frontend/src/components/content_value/ContentSearchInput.vue
@@ -90,6 +90,7 @@ defineExpose({
             v-model:value="inputData.filter"
             :placeholder="$t('interface.filter')"
             :size="props.small ? 'small' : ''"
+            :theme-overrides="{ paddingSmall: '0 3px', paddingMedium: '0 6px' }"
             clearable
             @clear="onClearFilter"
             @input="onInput"
diff --git a/frontend/src/components/sidebar/BrowserTree.vue b/frontend/src/components/sidebar/BrowserTree.vue
index 94b87b5..91e477d 100644
--- a/frontend/src/components/sidebar/BrowserTree.vue
+++ b/frontend/src/components/sidebar/BrowserTree.vue
@@ -367,13 +367,7 @@ const renderPrefix = ({ option }) => {
 
         case ConnectionType.RedisValue:
             if (prefStore.keyIconType === typesIconStyle.ICON) {
-                return h(
-                    NIcon,
-                    { size: 20 },
-                    {
-                        default: () => h(!!option.redisKeyCode ? Binary : Key),
-                    },
-                )
+                return h(NIcon, { size: 20 }, () => h(Key))
             }
             const loading = isEmpty(option.redisType) || option.redisType === 'loading'
             if (loading) {
@@ -506,10 +500,8 @@ const calcValueMenu = () => {
 
 // render menu function icon
 const renderSuffix = ({ option }) => {
-    if (
-        (option.type === ConnectionType.RedisDB && option.opened) ||
-        (includes(selectedKeys.value, option.key) && !props.checkMode)
-    ) {
+    const selected = includes(selectedKeys.value, option.key)
+    if (selected && !props.checkMode) {
         switch (option.type) {
             case ConnectionType.RedisDB:
                 return renderIconMenu(calcDBMenu(option.opened, option.loading, option.fullLoaded))
@@ -518,6 +510,9 @@ const renderSuffix = ({ option }) => {
             case ConnectionType.RedisValue:
                 return renderIconMenu(calcValueMenu())
         }
+    } else if (!selected && !!option.redisKeyCode && option.type === ConnectionType.RedisValue) {
+        // render binary icon
+        return renderIconMenu(h(NIcon, { size: 20 }, () => h(Binary)))
     }
     return null
 }
diff --git a/frontend/src/utils/theme.js b/frontend/src/utils/theme.js
index aa7f15c..86e35af 100644
--- a/frontend/src/utils/theme.js
+++ b/frontend/src/utils/theme.js
@@ -23,7 +23,7 @@ export const themeOverrides = {
         paddingMedium: '0 12px',
     },
     Tag: {
-        // borderRadius: '3px'
+        borderRadius: '4px',
         heightLarge: '32px',
     },
     Input: {