From 115aa9d079b3a662d5c52e2f3e7875707e7cbd07 Mon Sep 17 00:00:00 2001
From: Lykin <137850705+tiny-craft@users.noreply.github.com>
Date: Tue, 9 Jan 2024 15:13:13 +0800
Subject: [PATCH] refactor: move i18n calling out of computed

---
 .../components/common/DropdownSelector.vue    |  8 +--
 frontend/src/components/common/IconButton.vue |  6 +-
 frontend/src/components/common/TtlInput.vue   | 18 ++---
 .../src/components/content/ContentLogPane.vue | 11 +--
 .../components/content_value/ContentSlog.vue  |  8 +--
 .../content_value/ContentToolbar.vue          |  4 +-
 .../content_value/ContentValueHash.vue        |  6 +-
 .../content_value/ContentValueList.vue        |  4 +-
 .../content_value/ContentValueSet.vue         |  4 +-
 .../content_value/ContentValueStream.vue      |  4 +-
 .../content_value/ContentValueZSet.vue        |  6 +-
 .../components/dialogs/AddFieldsDialog.vue    | 12 ++--
 .../components/dialogs/ConnectionDialog.vue   | 12 +++-
 .../src/components/dialogs/GroupDialog.vue    |  2 +-
 .../components/dialogs/ImportKeyDialog.vue    | 26 ++++---
 .../components/dialogs/KeyFilterDialog.vue    |  9 +--
 .../components/dialogs/PreferencesDialog.vue  | 18 +++--
 .../src/components/dialogs/SetTtlDialog.vue   | 20 +++---
 .../src/components/new_value/AddHashValue.vue |  8 +--
 .../src/components/new_value/AddListValue.vue |  8 +--
 .../src/components/new_value/AddZSetValue.vue |  8 +--
 .../src/components/sidebar/BrowserPane.vue    | 16 ++---
 .../src/components/sidebar/BrowserTree.vue    | 67 ++++++-------------
 .../src/components/sidebar/ConnectionTree.vue | 51 +++++++-------
 frontend/src/components/sidebar/Ribbon.vue    | 31 ++++-----
 frontend/src/stores/preferences.js            | 10 +--
 frontend/src/utils/render.js                  | 21 ++++--
 27 files changed, 197 insertions(+), 201 deletions(-)

diff --git a/frontend/src/components/common/DropdownSelector.vue b/frontend/src/components/common/DropdownSelector.vue
index 5b3a9e5..cd97984 100644
--- a/frontend/src/components/common/DropdownSelector.vue
+++ b/frontend/src/components/common/DropdownSelector.vue
@@ -2,6 +2,7 @@
 import { computed, h, ref } from 'vue'
 import { get, map } from 'lodash'
 import { NIcon, NText } from 'naive-ui'
+import { useRender } from '@/utils/render.js'
 
 const props = defineProps({
     value: {
@@ -21,15 +22,12 @@ const props = defineProps({
 })
 
 const emit = defineEmits(['update:value'])
+const render = useRender()
 
 const renderHeader = () => {
     return h('div', { class: 'type-selector-header' }, [h(NText, null, () => props.tooltip)])
 }
 
-const renderLabel = (option) => {
-    return h('div', { class: 'type-selector-item' }, option.label)
-}
-
 const dropdownOption = computed(() => {
     const options = [
         {
@@ -71,7 +69,7 @@ const onDropdownShow = (show) => {
     <n-dropdown
         :disabled="props.disabled"
         :options="dropdownOption"
-        :render-label="renderLabel"
+        :render-label="({ label }) => render.renderLabel(label, { class: 'type-selector-item' })"
         :show-arrow="true"
         :title="props.tooltip"
         :value="props.value"
diff --git a/frontend/src/components/common/IconButton.vue b/frontend/src/components/common/IconButton.vue
index 4692da5..a4fb15c 100644
--- a/frontend/src/components/common/IconButton.vue
+++ b/frontend/src/components/common/IconButton.vue
@@ -7,6 +7,10 @@ const emit = defineEmits(['click'])
 const props = defineProps({
     tooltip: String,
     tTooltip: String,
+    tooltipDelay: {
+        type: Number,
+        default: 1000,
+    },
     type: String,
     icon: [String, Object],
     size: {
@@ -35,7 +39,7 @@ const hasTooltip = computed(() => {
 </script>
 
 <template>
-    <n-tooltip v-if="hasTooltip" :show-arrow="false">
+    <n-tooltip v-if="hasTooltip" :delay="tooltipDelay" :show-arrow="false">
         <template #trigger>
             <n-button
                 :class="props.buttonClass"
diff --git a/frontend/src/components/common/TtlInput.vue b/frontend/src/components/common/TtlInput.vue
index 283e862..a24a93f 100644
--- a/frontend/src/components/common/TtlInput.vue
+++ b/frontend/src/components/common/TtlInput.vue
@@ -1,5 +1,4 @@
 <script setup>
-import { useI18n } from 'vue-i18n'
 import { computed } from 'vue'
 
 const props = defineProps({
@@ -15,22 +14,24 @@ const props = defineProps({
 
 const emit = defineEmits(['update:value', 'update:unit'])
 
-const i18n = useI18n()
-const unit = computed(() => [
-    { value: 1, label: i18n.t('common.second') },
+const unit = [
+    {
+        value: 1,
+        label: 'common.second',
+    },
     {
         value: 60,
-        label: i18n.t('common.minute'),
+        label: 'common.minute',
     },
     {
         value: 3600,
-        label: i18n.t('common.hour'),
+        label: 'common.hour',
     },
     {
         value: 86400,
-        label: i18n.t('common.day'),
+        label: 'common.day',
     },
-])
+]
 
 const unitValue = computed(() => {
     switch (props.unit) {
@@ -57,6 +58,7 @@ const unitValue = computed(() => {
             @update:value="(val) => emit('update:value', val)" />
         <n-select
             :options="unit"
+            :render-label="({ label }) => $t(label)"
             :value="unitValue"
             style="max-width: 150px"
             @update:value="(val) => emit('update:unit', val)" />
diff --git a/frontend/src/components/content/ContentLogPane.vue b/frontend/src/components/content/ContentLogPane.vue
index 6c047a6..4d34f04 100644
--- a/frontend/src/components/content/ContentLogPane.vue
+++ b/frontend/src/components/content/ContentLogPane.vue
@@ -26,7 +26,7 @@ const filterServerOption = computed(() => {
         value: server,
     }))
     options.splice(0, 0, {
-        label: i18n.t('common.all'),
+        label: 'common.all',
         value: '',
     })
     return options
@@ -36,7 +36,7 @@ const tableRef = ref(null)
 
 const columns = computed(() => [
     {
-        title: i18n.t('log.exec_time'),
+        title: () => i18n.t('log.exec_time'),
         key: 'timestamp',
         defaultSortOrder: 'ascend',
         sorter: 'default',
@@ -48,7 +48,7 @@ const columns = computed(() => [
         },
     },
     {
-        title: i18n.t('log.server'),
+        title: () => i18n.t('log.server'),
         key: 'server',
         filterOptionValue: data.server,
         filter: (value, row) => {
@@ -62,7 +62,7 @@ const columns = computed(() => [
         },
     },
     {
-        title: i18n.t('log.cmd'),
+        title: () => i18n.t('log.cmd'),
         key: 'cmd',
         titleAlign: 'center',
         filterOptionValue: data.keyword,
@@ -83,7 +83,7 @@ const columns = computed(() => [
         },
     },
     {
-        title: i18n.t('log.cost_time'),
+        title: () => i18n.t('log.cost_time'),
         key: 'cost',
         width: 100,
         align: 'center',
@@ -141,6 +141,7 @@ defineExpose({
                     v-model:value="data.server"
                     :consistent-menu-width="false"
                     :options="filterServerOption"
+                    :render-label="({ label, value }) => (value === '' ? $t(label) : label)"
                     style="min-width: 100px" />
             </n-form-item>
             <n-form-item :label="$t('log.filter_keyword')">
diff --git a/frontend/src/components/content_value/ContentSlog.vue b/frontend/src/components/content_value/ContentSlog.vue
index 4bfd470..fe3dd6b 100644
--- a/frontend/src/components/content_value/ContentSlog.vue
+++ b/frontend/src/components/content_value/ContentSlog.vue
@@ -35,7 +35,7 @@ const tableRef = ref(null)
 
 const columns = computed(() => [
     {
-        title: i18n.t('slog.exec_time'),
+        title: () => i18n.t('slog.exec_time'),
         key: 'timestamp',
         sortOrder: data.sortOrder,
         sorter: 'default',
@@ -47,7 +47,7 @@ const columns = computed(() => [
         },
     },
     {
-        title: i18n.t('slog.client'),
+        title: () => i18n.t('slog.client'),
         key: 'client',
         filterOptionValue: data.client,
         resizable: true,
@@ -81,7 +81,7 @@ const columns = computed(() => [
         },
     },
     {
-        title: i18n.t('slog.cmd'),
+        title: () => i18n.t('slog.cmd'),
         key: 'cmd',
         titleAlign: 'center',
         filterOptionValue: data.keyword,
@@ -102,7 +102,7 @@ const columns = computed(() => [
         },
     },
     {
-        title: i18n.t('slog.cost_time'),
+        title: () => i18n.t('slog.cost_time'),
         key: 'cost',
         width: 100,
         align: 'center',
diff --git a/frontend/src/components/content_value/ContentToolbar.vue b/frontend/src/components/content_value/ContentToolbar.vue
index 3d99cc8..fd40cf8 100644
--- a/frontend/src/components/content_value/ContentToolbar.vue
+++ b/frontend/src/components/content_value/ContentToolbar.vue
@@ -62,7 +62,7 @@ const ttlString = computed(() => {
         const seconds = Math.floor(props.ttl % 60)
         s += padStart(seconds + '', 2, '0')
     } else if (props.ttl < 0) {
-        s = i18n.t('interface.forever')
+        s = '-1'
     } else {
         s = '00:00:00'
     }
@@ -190,7 +190,7 @@ const onTTL = () => {
                         <template #icon>
                             <n-icon :component="Timer" size="18" />
                         </template>
-                        {{ ttlString }}
+                        {{ ttlString === '-1' ? $t('interface.forever') : ttlString }}
                     </n-button>
                 </template>
                 TTL{{ `${ttl > 0 ? ': ' + ttl + $t('common.second') : ''}` }}
diff --git a/frontend/src/components/content_value/ContentValueHash.vue b/frontend/src/components/content_value/ContentValueHash.vue
index 9e62f20..153c17d 100644
--- a/frontend/src/components/content_value/ContentValueHash.vue
+++ b/frontend/src/components/content_value/ContentValueHash.vue
@@ -83,7 +83,7 @@ const tableRef = ref(null)
 const fieldFilterOption = ref(null)
 const fieldColumn = computed(() => ({
     key: 'key',
-    title: i18n.t('common.field'),
+    title: () => i18n.t('common.field'),
     align: 'center',
     titleAlign: 'center',
     resizable: true,
@@ -113,7 +113,7 @@ const displayCode = computed(() => {
 // const valueFilterOption = ref(null)
 const valueColumn = computed(() => ({
     key: 'value',
-    title: i18n.t('common.value'),
+    title: () => i18n.t('common.value'),
     align: displayCode.value ? 'left' : 'center',
     titleAlign: 'center',
     resizable: true,
@@ -195,7 +195,7 @@ const resetEdit = () => {
 
 const actionColumn = {
     key: 'action',
-    title: i18n.t('interface.action'),
+    title: () => i18n.t('interface.action'),
     width: 120,
     align: 'center',
     titleAlign: 'center',
diff --git a/frontend/src/components/content_value/ContentValueList.vue b/frontend/src/components/content_value/ContentValueList.vue
index 836ef3c..698bc4d 100644
--- a/frontend/src/components/content_value/ContentValueList.vue
+++ b/frontend/src/components/content_value/ContentValueList.vue
@@ -83,7 +83,7 @@ const displayCode = computed(() => {
 const valueFilterOption = ref(null)
 const valueColumn = computed(() => ({
     key: 'value',
-    title: i18n.t('common.value'),
+    title: () => i18n.t('common.value'),
     align: displayCode.value ? 'left' : 'center',
     titleAlign: 'center',
     ellipsis: displayCode.value
@@ -164,7 +164,7 @@ const resetEdit = () => {
 
 const actionColumn = {
     key: 'action',
-    title: i18n.t('interface.action'),
+    title: () => i18n.t('interface.action'),
     width: 120,
     align: 'center',
     titleAlign: 'center',
diff --git a/frontend/src/components/content_value/ContentValueSet.vue b/frontend/src/components/content_value/ContentValueSet.vue
index 825ce17..e1fdc21 100644
--- a/frontend/src/components/content_value/ContentValueSet.vue
+++ b/frontend/src/components/content_value/ContentValueSet.vue
@@ -82,7 +82,7 @@ const displayCode = computed(() => {
 const valueFilterOption = ref(null)
 const valueColumn = computed(() => ({
     key: 'value',
-    title: i18n.t('common.value'),
+    title: () => i18n.t('common.value'),
     align: displayCode.value ? 'left' : 'center',
     titleAlign: 'center',
     ellipsis: displayCode.value
@@ -161,7 +161,7 @@ const resetEdit = () => {
 
 const actionColumn = {
     key: 'action',
-    title: i18n.t('interface.action'),
+    title: () => i18n.t('interface.action'),
     width: 120,
     align: 'center',
     titleAlign: 'center',
diff --git a/frontend/src/components/content_value/ContentValueStream.vue b/frontend/src/components/content_value/ContentValueStream.vue
index 75b060e..41d018b 100644
--- a/frontend/src/components/content_value/ContentValueStream.vue
+++ b/frontend/src/components/content_value/ContentValueStream.vue
@@ -74,7 +74,7 @@ const idColumn = computed(() => ({
 const valueFilterOption = ref(null)
 const valueColumn = computed(() => ({
     key: 'value',
-    title: i18n.t('common.value'),
+    title: () => i18n.t('common.value'),
     align: 'left',
     titleAlign: 'center',
     resizable: true,
@@ -98,7 +98,7 @@ const valueColumn = computed(() => ({
 }))
 const actionColumn = {
     key: 'action',
-    title: i18n.t('interface.action'),
+    title: () => i18n.t('interface.action'),
     width: 80,
     align: 'center',
     titleAlign: 'center',
diff --git a/frontend/src/components/content_value/ContentValueZSet.vue b/frontend/src/components/content_value/ContentValueZSet.vue
index 8a6a156..fbd39a1 100644
--- a/frontend/src/components/content_value/ContentValueZSet.vue
+++ b/frontend/src/components/content_value/ContentValueZSet.vue
@@ -81,7 +81,7 @@ const fullEdit = ref(false)
 // const scoreFilterOption = ref(null)
 const scoreColumn = computed(() => ({
     key: 'score',
-    title: i18n.t('common.score'),
+    title: () => i18n.t('common.score'),
     align: 'center',
     titleAlign: 'center',
     resizable: true,
@@ -130,7 +130,7 @@ const displayCode = computed(() => {
 const valueFilterOption = ref(null)
 const valueColumn = computed(() => ({
     key: 'value',
-    title: i18n.t('common.value'),
+    title: () => i18n.t('common.value'),
     align: displayCode.value ? 'left' : 'center',
     titleAlign: 'center',
     resizable: true,
@@ -210,7 +210,7 @@ const resetEdit = () => {
 
 const actionColumn = {
     key: 'action',
-    title: i18n.t('interface.action'),
+    title: () => i18n.t('interface.action'),
     width: 120,
     align: 'center',
     titleAlign: 'center',
diff --git a/frontend/src/components/dialogs/AddFieldsDialog.vue b/frontend/src/components/dialogs/AddFieldsDialog.vue
index eea7054..a76d31e 100644
--- a/frontend/src/components/dialogs/AddFieldsDialog.vue
+++ b/frontend/src/components/dialogs/AddFieldsDialog.vue
@@ -49,15 +49,15 @@ const defaultValue = {
 const title = computed(() => {
     switch (newForm.type) {
         case types.LIST:
-            return i18n.t('dialogue.field.new_item')
+            return 'dialogue.field.new_item'
         case types.HASH:
-            return i18n.t('dialogue.field.new')
+            return 'dialogue.field.new'
         case types.SET:
-            return i18n.t('dialogue.field.new')
+            return 'dialogue.field.new'
         case types.ZSET:
-            return i18n.t('dialogue.field.new')
+            return 'dialogue.field.new'
         case types.STREAM:
-            return i18n.t('dialogue.field.new')
+            return 'dialogue.field.new'
     }
     return ''
 })
@@ -204,7 +204,7 @@ const onClose = () => {
         :positive-button-props="{ size: 'medium' }"
         :positive-text="$t('common.confirm')"
         :show-icon="false"
-        :title="title"
+        :title="title ? $t(title) : ''"
         preset="dialog"
         style="width: 600px"
         transform-origin="center"
diff --git a/frontend/src/components/dialogs/ConnectionDialog.vue b/frontend/src/components/dialogs/ConnectionDialog.vue
index 143d770..273879c 100644
--- a/frontend/src/components/dialogs/ConnectionDialog.vue
+++ b/frontend/src/components/dialogs/ConnectionDialog.vue
@@ -56,7 +56,7 @@ const groupOptions = computed(() => {
         value: group,
     }))
     options.splice(0, 0, {
-        label: i18n.t('dialogue.connection.no_group'),
+        label: 'dialogue.connection.no_group',
         value: '',
     })
     return options
@@ -278,7 +278,10 @@ const onClose = () => {
                                 :label="$t('dialogue.connection.group')"
                                 :span="24"
                                 required>
-                                <n-select v-model:value="generalForm.group" :options="groupOptions" />
+                                <n-select
+                                    v-model:value="generalForm.group"
+                                    :options="groupOptions"
+                                    :render-label="({ label, value }) => (value === '' ? $t(label) : label)" />
                             </n-form-item-gi>
                             <n-form-item-gi :label="$t('dialogue.connection.addr')" :span="24" path="addr" required>
                                 <n-input
@@ -543,7 +546,10 @@ const onClose = () => {
                                     :options="masterNameOptions"
                                     filterable
                                     tag />
-                                <n-button :loading="loadingSentinelMaster" @click="onLoadSentinelMasters">
+                                <n-button
+                                    :disabled="!generalForm.sentinel.enable"
+                                    :loading="loadingSentinelMaster"
+                                    @click="onLoadSentinelMasters">
                                     {{ $t('dialogue.connection.sentinel.auto_discover') }}
                                 </n-button>
                             </n-input-group>
diff --git a/frontend/src/components/dialogs/GroupDialog.vue b/frontend/src/components/dialogs/GroupDialog.vue
index a3a6fcd..eb6f0dc 100644
--- a/frontend/src/components/dialogs/GroupDialog.vue
+++ b/frontend/src/components/dialogs/GroupDialog.vue
@@ -9,6 +9,7 @@ import { every, get, includes, isEmpty } from 'lodash'
  * Dialog for create or rename group
  */
 
+const i18n = useI18n()
 const editGroup = ref('')
 const groupForm = reactive({
     name: '',
@@ -42,7 +43,6 @@ watchEffect(() => {
     }
 })
 
-const i18n = useI18n()
 const onConfirm = async () => {
     try {
         await groupFormRef.value?.validate((errs) => {
diff --git a/frontend/src/components/dialogs/ImportKeyDialog.vue b/frontend/src/components/dialogs/ImportKeyDialog.vue
index ab52f72..1317d9e 100644
--- a/frontend/src/components/dialogs/ImportKeyDialog.vue
+++ b/frontend/src/components/dialogs/ImportKeyDialog.vue
@@ -39,31 +39,31 @@ watchEffect(() => {
 })
 
 const i18n = useI18n()
-const conflictOption = computed(() => [
+const conflictOption = [
     {
         value: 0,
-        label: i18n.t('dialogue.import.conflict_overwrite'),
+        label: 'dialogue.import.conflict_overwrite',
     },
     {
         value: 1,
-        label: i18n.t('dialogue.import.conflict_ignore'),
+        label: 'dialogue.import.conflict_ignore',
     },
-])
+]
 
-const ttlOption = computed(() => [
+const ttlOption = [
     {
         value: 0,
-        label: i18n.t('dialogue.import.ttl_include'),
+        label: 'dialogue.import.ttl_include',
     },
     {
         value: 1,
-        label: i18n.t('dialogue.import.ttl_ignore'),
+        label: 'dialogue.import.ttl_ignore',
     },
     {
         value: 2,
-        label: i18n.t('dialogue.import.ttl_custom'),
+        label: 'dialogue.import.ttl_custom',
     },
-])
+]
 
 const importEnable = computed(() => {
     return !isEmpty(importKeyForm.file)
@@ -130,14 +130,18 @@ const onClose = () => {
                         <n-radio-button
                             v-for="(op, i) in conflictOption"
                             :key="i"
-                            :label="op.label"
+                            :label="$t(op.label)"
                             :value="op.value" />
                     </n-radio-group>
                 </n-form-item>
                 <n-form-item :label="$t('dialogue.import.import_expire_title')">
                     <n-space :wrap-item="false">
                         <n-radio-group v-model:value="importKeyForm.ttlType">
-                            <n-radio-button v-for="(op, i) in ttlOption" :key="i" :label="op.label" :value="op.value" />
+                            <n-radio-button
+                                v-for="(op, i) in ttlOption"
+                                :key="i"
+                                :label="$t(op.label)"
+                                :value="op.value" />
                         </n-radio-group>
                         <ttl-input
                             v-if="importKeyForm.ttlType === 2"
diff --git a/frontend/src/components/dialogs/KeyFilterDialog.vue b/frontend/src/components/dialogs/KeyFilterDialog.vue
index 9321253..42b27c2 100644
--- a/frontend/src/components/dialogs/KeyFilterDialog.vue
+++ b/frontend/src/components/dialogs/KeyFilterDialog.vue
@@ -1,11 +1,9 @@
 <script setup>
 import { computed, reactive, ref, watchEffect } from 'vue'
 import useDialog from 'stores/dialog'
-import { useI18n } from 'vue-i18n'
 import { types } from '@/consts/support_redis_type.js'
 import useBrowserStore from 'stores/browser.js'
 
-const i18n = useI18n()
 const filterForm = reactive({
     server: '',
     db: 0,
@@ -20,7 +18,7 @@ const typeOptions = computed(() => {
     }))
     options.splice(0, 0, {
         value: '',
-        label: i18n.t('common.all'),
+        label: 'common.all',
     })
     return options
 })
@@ -75,7 +73,10 @@ const onClose = () => {
                 <n-input :value="filterForm.db + ''" readonly></n-input>
             </n-form-item>
             <n-form-item :label="$t('interface.type')" path="type" required>
-                <n-select v-model:value="filterForm.type" :options="typeOptions" />
+                <n-select
+                    v-model:value="filterForm.type"
+                    :options="typeOptions"
+                    :render-label="({ label }) => $t(label)" />
             </n-form-item>
             <n-form-item :label="$t('dialogue.filter.filter_pattern')" required>
                 <n-input-group>
diff --git a/frontend/src/components/dialogs/PreferencesDialog.vue b/frontend/src/components/dialogs/PreferencesDialog.vue
index 525064d..02337ac 100644
--- a/frontend/src/components/dialogs/PreferencesDialog.vue
+++ b/frontend/src/components/dialogs/PreferencesDialog.vue
@@ -37,7 +37,7 @@ watchEffect(() => {
 const keyOptions = computed(() => {
     const opts = map(typesIconStyle, (v) => ({
         value: v,
-        label: i18n.t('preferences.general.key_icon_style' + v),
+        label: 'preferences.general.key_icon_style' + v,
     }))
     return sortBy(opts, (o) => o.value)
 })
@@ -81,7 +81,7 @@ const onClose = () => {
                                     v-for="opt in prefStore.themeOption"
                                     :key="opt.value"
                                     :value="opt.value">
-                                    {{ opt.label }}
+                                    {{ $t(opt.label) }}
                                 </n-radio-button>
                             </n-radio-group>
                         </n-form-item-gi>
@@ -89,12 +89,14 @@ const onClose = () => {
                             <n-select
                                 v-model:value="prefStore.general.language"
                                 :options="prefStore.langOption"
+                                :render-label="({ label, value }) => (value === 'auto' ? $t(label) : label)"
                                 filterable />
                         </n-form-item-gi>
                         <n-form-item-gi :label="$t('preferences.general.font')" :span="12" required>
                             <n-select
                                 v-model:value="prefStore.general.font"
                                 :options="prefStore.fontOption"
+                                :render-label="({ label, value }) => (value === '' ? $t(label) : label)"
                                 filterable />
                         </n-form-item-gi>
                         <n-form-item-gi :label="$t('preferences.general.font_size')" :span="12">
@@ -108,7 +110,10 @@ const onClose = () => {
                                 style="width: 100%" />
                         </n-form-item-gi>
                         <n-form-item-gi :label="$t('preferences.general.key_icon_style')" :span="12">
-                            <n-select v-model:value="prefStore.general.keyIconStyle" :options="keyOptions" />
+                            <n-select
+                                v-model:value="prefStore.general.keyIconStyle"
+                                :options="keyOptions"
+                                :render-label="({ label }) => $t(label)" />
                         </n-form-item-gi>
                         <n-form-item-gi :label="$t('preferences.general.proxy')" :span="24">
                             <n-space>
@@ -136,17 +141,18 @@ const onClose = () => {
                             <n-select
                                 v-model:value="prefStore.editor.font"
                                 :options="prefStore.fontOption"
+                                :render-label="({ label, value }) => value || $t(label)"
                                 filterable />
                         </n-form-item-gi>
-                        <n-form-item-gi :label="$t('preferences.general.font_size')" :show-feedback="false" :span="12">
+                        <n-form-item-gi :label="$t('preferences.general.font_size')" :span="12">
                             <n-input-number v-model:value="prefStore.editor.fontSize" :max="65535" :min="1" />
                         </n-form-item-gi>
-                        <n-form-item-gi :show-feedback="false" :span="24">
+                        <n-form-item-gi :show-feedback="false" :show-label="false" :span="24">
                             <n-checkbox v-model:checked="prefStore.editor.showLineNum">
                                 {{ $t('preferences.editor.show_linenum') }}
                             </n-checkbox>
                         </n-form-item-gi>
-                        <n-form-item-gi :show-feedback="false" :span="24">
+                        <n-form-item-gi :show-feedback="false" :show-label="false" :span="24">
                             <n-checkbox v-model:checked="prefStore.editor.showFolding">
                                 {{ $t('preferences.editor.show_folding') }}
                             </n-checkbox>
diff --git a/frontend/src/components/dialogs/SetTtlDialog.vue b/frontend/src/components/dialogs/SetTtlDialog.vue
index 331e57f..d87dd7b 100644
--- a/frontend/src/components/dialogs/SetTtlDialog.vue
+++ b/frontend/src/components/dialogs/SetTtlDialog.vue
@@ -44,20 +44,20 @@ const isBatchAction = computed(() => {
 
 const title = computed(() => {
     if (isBatchAction.value) {
-        return i18n.t('dialogue.ttl.title_batch', { count: size(ttlForm.keys) })
+        return () => i18n.t('dialogue.ttl.title_batch', { count: size(ttlForm.keys) })
     } else {
-        return i18n.t('dialogue.ttl.title')
+        return () => i18n.t('dialogue.ttl.title')
     }
 })
 
 const i18n = useI18n()
-const quickOption = computed(() => [
-    { value: -1, unit: 1, label: i18n.t('interface.forever') },
-    { value: 10, unit: 1, label: `10 ${i18n.t('common.second')}` },
-    { value: 1, unit: 60, label: `1 ${i18n.t('common.minute')}` },
-    { value: 1, unit: 3600, label: `1 ${i18n.t('common.hour')}` },
-    { value: 1, unit: 86400, label: `1 ${i18n.t('common.day')}` },
-])
+const quickOption = [
+    { value: -1, unit: 1, label: 'interface.forever' },
+    { value: 10, unit: 1, label: 'common.second' },
+    { value: 1, unit: 60, label: 'common.minute' },
+    { value: 1, unit: 3600, label: 'common.hour' },
+    { value: 1, unit: 86400, label: 'common.day' },
+]
 
 const onQuickSet = (opt) => {
     ttlForm.ttl = opt.value
@@ -121,7 +121,7 @@ const onConfirm = async () => {
                         secondary
                         size="small"
                         @click="onQuickSet(opt)">
-                        {{ opt.label }}
+                        {{ (opt.value > 0 ? opt.value + ' ' : '') + $t(opt.label) }}
                     </n-button>
                 </n-space>
             </n-form-item>
diff --git a/frontend/src/components/new_value/AddHashValue.vue b/frontend/src/components/new_value/AddHashValue.vue
index 3fb6492..0b49c48 100644
--- a/frontend/src/components/new_value/AddHashValue.vue
+++ b/frontend/src/components/new_value/AddHashValue.vue
@@ -4,7 +4,6 @@ import { flatMap, reject } from 'lodash'
 import Add from '@/components/icons/Add.vue'
 import Delete from '@/components/icons/Delete.vue'
 import IconButton from '@/components/common/IconButton.vue'
-import { useI18n } from 'vue-i18n'
 
 const props = defineProps({
     type: Number,
@@ -12,15 +11,14 @@ const props = defineProps({
 })
 const emit = defineEmits(['update:value', 'update:type'])
 
-const i18n = useI18n()
 const updateOption = [
     {
         value: 0,
-        label: i18n.t('dialogue.field.overwrite_field'),
+        label: 'dialogue.field.overwrite_field',
     },
     {
         value: 1,
-        label: i18n.t('dialogue.field.ignore_field'),
+        label: 'dialogue.field.ignore_field',
     },
 ]
 
@@ -47,7 +45,7 @@ const onUpdate = (val) => {
 <template>
     <n-form-item :label="$t('dialogue.field.conflict_handle')">
         <n-radio-group :value="props.type" @update:value="(val) => emit('update:type', val)">
-            <n-radio-button v-for="(op, i) in updateOption" :key="i" :label="op.label" :value="op.value" />
+            <n-radio-button v-for="(op, i) in updateOption" :key="i" :label="op.label" :value="$t(op.value)" />
         </n-radio-group>
     </n-form-item>
     <n-form-item
diff --git a/frontend/src/components/new_value/AddListValue.vue b/frontend/src/components/new_value/AddListValue.vue
index 992b369..f03d103 100644
--- a/frontend/src/components/new_value/AddListValue.vue
+++ b/frontend/src/components/new_value/AddListValue.vue
@@ -4,7 +4,6 @@ import { compact } from 'lodash'
 import Add from '@/components/icons/Add.vue'
 import Delete from '@/components/icons/Delete.vue'
 import IconButton from '@/components/common/IconButton.vue'
-import { useI18n } from 'vue-i18n'
 
 const props = defineProps({
     type: Number,
@@ -12,15 +11,14 @@ const props = defineProps({
 })
 const emit = defineEmits(['update:value', 'update:type'])
 
-const i18n = useI18n()
 const insertOption = [
     {
         value: 0,
-        label: i18n.t('dialogue.field.append_item'),
+        label: 'dialogue.field.append_item',
     },
     {
         value: 1,
-        label: i18n.t('dialogue.field.prepend_item'),
+        label: 'dialogue.field.prepend_item',
     },
 ]
 
@@ -34,7 +32,7 @@ const onUpdate = (val) => {
 <template>
     <n-form-item :label="$t('interface.type')">
         <n-radio-group :value="props.type" @update:value="(val) => emit('update:type', val)">
-            <n-radio-button v-for="(op, i) in insertOption" :key="i" :label="op.label" :value="op.value" />
+            <n-radio-button v-for="(op, i) in insertOption" :key="i" :label="op.label" :value="$t(op.value)" />
         </n-radio-group>
     </n-form-item>
     <n-form-item :label="$t('dialogue.field.element')" required>
diff --git a/frontend/src/components/new_value/AddZSetValue.vue b/frontend/src/components/new_value/AddZSetValue.vue
index 8bb4304..7727c45 100644
--- a/frontend/src/components/new_value/AddZSetValue.vue
+++ b/frontend/src/components/new_value/AddZSetValue.vue
@@ -4,7 +4,6 @@ import { isEmpty, reject } from 'lodash'
 import Add from '@/components/icons/Add.vue'
 import Delete from '@/components/icons/Delete.vue'
 import IconButton from '@/components/common/IconButton.vue'
-import { useI18n } from 'vue-i18n'
 
 const props = defineProps({
     type: Number,
@@ -15,15 +14,14 @@ defineOptions({
 })
 const emit = defineEmits(['update:value', 'update:type'])
 
-const i18n = useI18n()
 const updateOption = [
     {
         value: 0,
-        label: i18n.t('dialogue.field.overwrite_field'),
+        label: 'dialogue.field.overwrite_field',
     },
     {
         value: 1,
-        label: i18n.t('dialogue.field.ignore_field'),
+        label: 'dialogue.field.ignore_field',
     },
 ]
 
@@ -55,7 +53,7 @@ const onUpdate = () => {
 <template>
     <n-form-item :label="$t('interface.type')">
         <n-radio-group :value="props.type" @update:value="(val) => emit('update:type', val)">
-            <n-radio-button v-for="(op, i) in updateOption" :key="i" :label="op.label" :value="op.value" />
+            <n-radio-button v-for="(op, i) in updateOption" :key="i" :label="op.label" :value="$t(op.value)" />
         </n-radio-group>
     </n-form-item>
     <n-form-item
diff --git a/frontend/src/components/sidebar/BrowserPane.vue b/frontend/src/components/sidebar/BrowserPane.vue
index 6244a5e..a75215d 100644
--- a/frontend/src/components/sidebar/BrowserPane.vue
+++ b/frontend/src/components/sidebar/BrowserPane.vue
@@ -64,16 +64,12 @@ const dbSelectOptions = computed(() => {
     })
 })
 
-const moreOptions = computed(() => [
-    { key: 'import', label: i18n.t('interface.import_key'), icon: render.renderIcon(Import, { strokeWidth: 3.5 }) },
-    { key: 'flush', label: i18n.t('interface.flush_db'), icon: render.renderIcon(Delete, { strokeWidth: 3.5 }) },
+const moreOptions = [
+    { key: 'import', label: 'interface.import_key', icon: Import },
+    { key: 'flush', label: 'interface.flush_db', icon: Delete },
     { key: 'divider', type: 'divider' },
-    {
-        key: 'disconnect',
-        label: i18n.t('interface.disconnect'),
-        icon: render.renderIcon(Unlink, { strokeWidth: 3.5 }),
-    },
-])
+    { key: 'disconnect', label: 'interface.disconnect', icon: Unlink },
+]
 
 const loadProgress = computed(() => {
     const db = browserStore.getDatabase(props.server, props.db)
@@ -356,6 +352,8 @@ watch(
                         @click="inCheckState = true" />
                     <n-dropdown
                         :options="moreOptions"
+                        :render-icon="({ icon }) => render.renderIcon(icon, { strokeWidth: 3.5 })"
+                        :render-label="({ label }) => $t(label)"
                         placement="top-end"
                         style="min-width: 130px"
                         @select="onSelectOptions">
diff --git a/frontend/src/components/sidebar/BrowserTree.vue b/frontend/src/components/sidebar/BrowserTree.vue
index c6cb3e1..bc73913 100644
--- a/frontend/src/components/sidebar/BrowserTree.vue
+++ b/frontend/src/components/sidebar/BrowserTree.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, h, nextTick, reactive, ref, watchEffect } from 'vue'
+import { computed, h, markRaw, nextTick, reactive, ref, watchEffect } from 'vue'
 import { ConnectionType } from '@/consts/connection_type.js'
 import { NIcon, NSpace, NText, useThemeVars } from 'naive-ui'
 import Key from '@/components/icons/Key.vue'
@@ -15,7 +15,6 @@ import Delete from '@/components/icons/Delete.vue'
 import useDialogStore from 'stores/dialog.js'
 import { ClipboardSetText } from 'wailsjs/runtime/runtime.js'
 import useConnectionStore from 'stores/connections.js'
-import Filter from '@/components/icons/Filter.vue'
 import useTabStore from 'stores/tab.js'
 import IconButton from '@/components/common/IconButton.vue'
 import { parseHexColor } from '@/utils/rgb.js'
@@ -104,42 +103,21 @@ const contextMenuParam = reactive({
 })
 
 const menuOptions = {
-    [ConnectionType.RedisDB]: ({ opened }) => {
-        if (opened) {
-            return [
-                {
-                    key: 'db_filter',
-                    label: i18n.t('interface.filter_key'),
-                    icon: render.renderIcon(Filter),
-                },
-                {
-                    type: 'divider',
-                    key: 'd1',
-                },
-                {
-                    type: 'divider',
-                    key: 'd2',
-                },
-            ]
-        } else {
-            return []
-        }
-    },
-    [ConnectionType.RedisKey]: () => [
+    [ConnectionType.RedisKey]: [
         // {
         //     key: 'key_reload',
-        //     label: i18n.t('interface.reload'),
-        //     icon: render.renderIcon(Refresh),
+        //     label: 'interface.reload'),
+        //     icon: Refresh,
         // },
         {
             key: 'key_newkey',
-            label: i18n.t('interface.new_key'),
-            icon: render.renderIcon(Add),
+            label: 'interface.new_key',
+            icon: Add,
         },
         {
             key: 'key_copy',
-            label: i18n.t('interface.copy_path'),
-            icon: render.renderIcon(CopyLink),
+            label: 'interface.copy_path',
+            icon: CopyLink,
         },
         {
             type: 'divider',
@@ -147,20 +125,20 @@ const menuOptions = {
         },
         {
             key: 'key_remove',
-            label: i18n.t('interface.batch_delete_key'),
-            icon: render.renderIcon(Delete),
+            label: 'interface.batch_delete_key',
+            icon: Delete,
         },
     ],
-    [ConnectionType.RedisValue]: () => [
+    [ConnectionType.RedisValue]: [
         {
             key: 'value_reload',
-            label: i18n.t('interface.reload'),
-            icon: render.renderIcon(Refresh),
+            label: 'interface.reload',
+            icon: Refresh,
         },
         {
             key: 'value_copy',
-            label: i18n.t('interface.copy_key'),
-            icon: render.renderIcon(CopyLink),
+            label: 'interface.copy_key',
+            icon: CopyLink,
         },
         {
             type: 'divider',
@@ -168,16 +146,12 @@ const menuOptions = {
         },
         {
             key: 'value_remove',
-            label: i18n.t('interface.remove_key'),
-            icon: render.renderIcon(Delete),
+            label: 'interface.remove_key',
+            icon: Delete,
         },
     ],
 }
 
-const renderContextLabel = (option) => {
-    return h('div', { class: 'context-menu-item' }, option.label)
-}
-
 const handleSelectContextMenu = (key) => {
     contextMenuParam.show = false
     const selectedKey = get(selectedKeys.value, 0)
@@ -526,7 +500,7 @@ const nodeProps = ({ option }) => {
                 return
             }
             contextMenuParam.show = false
-            contextMenuParam.options = menuOptions[option.type](option)
+            contextMenuParam.options = markRaw(menuOptions[option.type] || [])
             nextTick().then(() => {
                 contextMenuParam.x = e.clientX
                 contextMenuParam.y = e.clientY
@@ -627,9 +601,12 @@ defineExpose({
             @update:selected-keys="onUpdateSelectedKeys"
             @update:expanded-keys="onUpdateExpanded"
             @update:checked-keys="onUpdateCheckedKeys" />
+
+        <!-- context menu -->
         <n-dropdown
             :options="contextMenuParam.options"
-            :render-label="renderContextLabel"
+            :render-icon="({ icon }) => render.renderIcon(icon)"
+            :render-label="({ label }) => render.renderLabel($t(label), { class: 'context-menu-item' })"
             :show="contextMenuParam.show"
             :x="contextMenuParam.x"
             :y="contextMenuParam.y"
diff --git a/frontend/src/components/sidebar/ConnectionTree.vue b/frontend/src/components/sidebar/ConnectionTree.vue
index be32730..343f415 100644
--- a/frontend/src/components/sidebar/ConnectionTree.vue
+++ b/frontend/src/components/sidebar/ConnectionTree.vue
@@ -1,6 +1,6 @@
 <script setup>
 import useDialogStore from 'stores/dialog.js'
-import { h, nextTick, reactive, ref } from 'vue'
+import { h, markRaw, nextTick, reactive, ref } from 'vue'
 import useConnectionStore from 'stores/connections.js'
 import { NIcon, NSpace, NText, useThemeVars } from 'naive-ui'
 import { ConnectionType } from '@/consts/connection_type.js'
@@ -53,13 +53,13 @@ const menuOptions = {
     [ConnectionType.Group]: ({ opened }) => [
         {
             key: 'group_rename',
-            label: i18n.t('interface.rename_conn_group'),
-            icon: render.renderIcon(Edit),
+            label: 'interface.rename_conn_group',
+            icon: Edit,
         },
         {
             key: 'group_delete',
-            label: i18n.t('interface.remove_conn_group'),
-            icon: render.renderIcon(Delete),
+            label: 'interface.remove_conn_group',
+            icon: Delete,
         },
     ],
     [ConnectionType.Server]: ({ name }) => {
@@ -68,18 +68,18 @@ const menuOptions = {
             return [
                 {
                     key: 'server_close',
-                    label: i18n.t('interface.disconnect'),
-                    icon: render.renderIcon(Unlink),
+                    label: 'interface.disconnect',
+                    icon: Unlink,
                 },
                 {
                     key: 'server_edit',
-                    label: i18n.t('interface.edit_conn'),
-                    icon: render.renderIcon(Config),
+                    label: 'interface.edit_conn',
+                    icon: Config,
                 },
                 {
                     key: 'server_dup',
-                    label: i18n.t('interface.dup_conn'),
-                    icon: render.renderIcon(CopyLink),
+                    label: 'interface.dup_conn',
+                    icon: CopyLink,
                 },
                 {
                     type: 'divider',
@@ -87,26 +87,26 @@ const menuOptions = {
                 },
                 {
                     key: 'server_remove',
-                    label: i18n.t('interface.remove_conn'),
-                    icon: render.renderIcon(Delete),
+                    label: 'interface.remove_conn',
+                    icon: Delete,
                 },
             ]
         } else {
             return [
                 {
                     key: 'server_open',
-                    label: i18n.t('interface.open_connection'),
-                    icon: render.renderIcon(Connect),
+                    label: 'interface.open_connection',
+                    icon: Connect,
                 },
                 {
                     key: 'server_edit',
-                    label: i18n.t('interface.edit_conn'),
-                    icon: render.renderIcon(Config),
+                    label: 'interface.edit_conn',
+                    icon: Config,
                 },
                 {
                     key: 'server_dup',
-                    label: i18n.t('interface.dup_conn'),
-                    icon: render.renderIcon(CopyLink),
+                    label: 'interface.dup_conn',
+                    icon: CopyLink,
                 },
                 {
                     type: 'divider',
@@ -114,8 +114,8 @@ const menuOptions = {
                 },
                 {
                     key: 'server_remove',
-                    label: i18n.t('interface.remove_conn'),
-                    icon: render.renderIcon(Delete),
+                    label: 'interface.remove_conn',
+                    icon: Delete,
                 },
             ]
         }
@@ -355,7 +355,7 @@ const nodeProps = ({ option }) => {
             }
             contextMenuParam.show = false
             nextTick().then(() => {
-                contextMenuParam.options = mop(option)
+                contextMenuParam.options = markRaw(mop(option))
                 contextMenuParam.currentNode = option
                 contextMenuParam.x = e.clientX
                 contextMenuParam.y = e.clientY
@@ -366,10 +366,6 @@ const nodeProps = ({ option }) => {
     }
 }
 
-const renderContextLabel = (option) => {
-    return h('div', { class: 'context-menu-item' }, option.label)
-}
-
 const handleSelectContextMenu = (key) => {
     contextMenuParam.show = false
     const selectedKey = get(selectedKeys.value, 0)
@@ -533,7 +529,8 @@ const onCancelOpen = () => {
     <n-dropdown
         :keyboard="true"
         :options="contextMenuParam.options"
-        :render-label="renderContextLabel"
+        :render-icon="({ icon }) => render.renderIcon(icon)"
+        :render-label="({ label }) => render.renderLabel($t(label), { class: 'context-menu-item' })"
         :show="contextMenuParam.show"
         :x="contextMenuParam.x"
         :y="contextMenuParam.y"
diff --git a/frontend/src/components/sidebar/Ribbon.vue b/frontend/src/components/sidebar/Ribbon.vue
index 0ede309..35cc48b 100644
--- a/frontend/src/components/sidebar/Ribbon.vue
+++ b/frontend/src/components/sidebar/Ribbon.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, h } from 'vue'
+import { computed } from 'vue'
 import { NIcon, useThemeVars } from 'naive-ui'
 import Database from '@/components/icons/Database.vue'
 import { useI18n } from 'vue-i18n'
@@ -38,18 +38,18 @@ const i18n = useI18n()
 const menuOptions = computed(() => {
     return [
         {
-            label: i18n.t('ribbon.browser'),
+            label: 'ribbon.browser',
             key: 'browser',
             icon: Database,
             show: browserStore.anyConnectionOpened,
         },
         {
-            label: i18n.t('ribbon.server'),
+            label: 'ribbon.server',
             key: 'server',
             icon: Server,
         },
         {
-            label: i18n.t('ribbon.log'),
+            label: 'ribbon.log',
             key: 'log',
             icon: Record,
         },
@@ -59,21 +59,21 @@ const menuOptions = computed(() => {
 const preferencesOptions = computed(() => {
     return [
         {
-            label: i18n.t('menu.preferences'),
+            label: 'menu.preferences',
             key: 'preferences',
-            icon: render.renderIcon(Config, { strokeWidth: 3 }),
+            icon: Config,
         },
         // {
-        //     label: i18n.t('menu.help'),
+        //     label: 'menu.help',
         //     key: 'help',
-        //     icon: render.renderIcon(Help, { strokeWidth: 3 }),
+        //     icon: Help,
         // },
         {
-            label: i18n.t('menu.report_bug'),
+            label: 'menu.report_bug',
             key: 'report',
         },
         {
-            label: i18n.t('menu.check_update'),
+            label: 'menu.check_update',
             key: 'update',
         },
         {
@@ -81,16 +81,12 @@ const preferencesOptions = computed(() => {
             key: 'd1',
         },
         {
-            label: i18n.t('menu.about'),
+            label: 'menu.about',
             key: 'about',
         },
     ]
 })
 
-const renderContextLabel = (option) => {
-    return h('div', { class: 'context-menu-item' }, option.label)
-}
-
 const dialogStore = useDialogStore()
 const prefStore = usePreferencesStore()
 const onSelectPreferenceMenu = (key) => {
@@ -140,14 +136,15 @@ const exThemeVars = computed(() => {
                         </n-icon>
                     </div>
                 </template>
-                {{ m.label }}
+                {{ $t(m.label) }}
             </n-tooltip>
         </div>
         <div class="flex-item-expand"></div>
         <div class="nav-menu-item flex-box-v">
             <n-dropdown
                 :options="preferencesOptions"
-                :render-label="renderContextLabel"
+                :render-icon="({ icon }) => render.renderIcon(icon)"
+                :render-label="({ label }) => render.renderLabel($t(label), { class: 'context-menu-item' })"
                 trigger="click"
                 @select="onSelectPreferenceMenu">
                 <icon-button :icon="Config" :size="iconSize" :stroke-width="3" class="nav-menu-button" />
diff --git a/frontend/src/stores/preferences.js b/frontend/src/stores/preferences.js
index d262cb3..c3f5ad0 100644
--- a/frontend/src/stores/preferences.js
+++ b/frontend/src/stores/preferences.js
@@ -69,15 +69,15 @@ const usePreferencesStore = defineStore('preferences', {
             return [
                 {
                     value: 'light',
-                    label: i18nGlobal.t('preferences.general.theme_light'),
+                    label: 'preferences.general.theme_light',
                 },
                 {
                     value: 'dark',
-                    label: i18nGlobal.t('preferences.general.theme_dark'),
+                    label: 'preferences.general.theme_dark',
                 },
                 {
                     value: 'auto',
-                    label: i18nGlobal.t('preferences.general.theme_auto'),
+                    label: 'preferences.general.theme_auto',
                 },
             ]
         },
@@ -93,7 +93,7 @@ const usePreferencesStore = defineStore('preferences', {
             }))
             options.splice(0, 0, {
                 value: 'auto',
-                label: i18nGlobal.t('preferences.general.system_lang'),
+                label: 'preferences.general.system_lang',
             })
             return options
         },
@@ -110,7 +110,7 @@ const usePreferencesStore = defineStore('preferences', {
             }))
             option.splice(0, 0, {
                 value: '',
-                label: i18nGlobal.t('preferences.general.default'),
+                label: 'preferences.general.default',
                 path: '',
             })
             return option
diff --git a/frontend/src/utils/render.js b/frontend/src/utils/render.js
index b3d8895..3bb4951 100644
--- a/frontend/src/utils/render.js
+++ b/frontend/src/utils/render.js
@@ -7,14 +7,25 @@ export function useRender() {
          *
          * @param {string|Object} icon
          * @param {{}} [props]
-         * @return {*}
+         * @return {VNode}
          */
         renderIcon: (icon, props = {}) => {
-            return () => {
-                return h(NIcon, null, {
-                    default: () => h(icon, props),
-                })
+            if (icon == null) {
+                return undefined
             }
+            return h(NIcon, null, {
+                default: () => h(icon, props),
+            })
+        },
+
+        /**
+         *
+         * @param {string} label
+         * @param {{}} [props]
+         * @return {VNode}
+         */
+        renderLabel: (label, props = {}) => {
+            return h('div', props, label)
         },
     }
 }