lingling
/
tiny-rdm
mirror of https://github.com/tiny-craft/tiny-rdm.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor: move i18n calling out of computed

This commit is contained in:
Lykin 2024-01-09 15:13:13 +08:00
parent 4258a45498
commit 115aa9d079
27 changed files with 197 additions and 201 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/components/common/DropdownSelector.vue
View File

@ -2,6 +2,7 @@
import { computed, h, ref } from 'vue' import { computed, h, ref } from 'vue'
import { get, map } from 'lodash' import { get, map } from 'lodash'
import { NIcon, NText } from 'naive-ui' import { NIcon, NText } from 'naive-ui'
import { useRender } from '@/utils/render.js'
const props = defineProps({ const props = defineProps({
value: { value: {
@ -21,15 +22,12 @@ const props = defineProps({
}) })
const emit = defineEmits(['update:value']) const emit = defineEmits(['update:value'])
const render = useRender()
const renderHeader = () => { const renderHeader = () => {
return h('div', { class: 'type-selector-header' }, [h(NText, null, () => props.tooltip)]) 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 dropdownOption = computed(() => {
const options = [ const options = [
{ {
@ -71,7 +69,7 @@ const onDropdownShow = (show) => {
<n-dropdown <n-dropdown
:disabled="props.disabled" :disabled="props.disabled"
:options="dropdownOption" :options="dropdownOption"
:render-label="renderLabel" :render-label="({ label }) => render.renderLabel(label, { class: 'type-selector-item' })"
:show-arrow="true" :show-arrow="true"
:title="props.tooltip" :title="props.tooltip"
:value="props.value" :value="props.value"

6
frontend/src/components/common/IconButton.vue
View File

@ -7,6 +7,10 @@ const emit = defineEmits(['click'])
const props = defineProps({ const props = defineProps({
tooltip: String, tooltip: String,
tTooltip: String, tTooltip: String,
tooltipDelay: {
type: Number,
default: 1000,
},
type: String, type: String,
icon: [String, Object], icon: [String, Object],
size: { size: {
@ -35,7 +39,7 @@ const hasTooltip = computed(() => {
</script> </script>
<template> <template>
<n-tooltip v-if="hasTooltip" :show-arrow="false"> <n-tooltip v-if="hasTooltip" :delay="tooltipDelay" :show-arrow="false">
<template #trigger> <template #trigger>
<n-button <n-button
:class="props.buttonClass" :class="props.buttonClass"

18
frontend/src/components/common/TtlInput.vue
View File

@ -1,5 +1,4 @@
<script setup> <script setup>
import { useI18n } from 'vue-i18n'
import { computed } from 'vue' import { computed } from 'vue'
const props = defineProps({ const props = defineProps({
@ -15,22 +14,24 @@ const props = defineProps({
const emit = defineEmits(['update:value', 'update:unit']) const emit = defineEmits(['update:value', 'update:unit'])
const i18n = useI18n() const unit = [
const unit = computed(() => [ {
{ value: 1, label: i18n.t('common.second') }, value: 1,
label: 'common.second',
},
{ {
value: 60, value: 60,
label: i18n.t('common.minute'), label: 'common.minute',
}, },
{ {
value: 3600, value: 3600,
label: i18n.t('common.hour'), label: 'common.hour',
}, },
{ {
value: 86400, value: 86400,
label: i18n.t('common.day'), label: 'common.day',
}, },
]) ]
const unitValue = computed(() => { const unitValue = computed(() => {
switch (props.unit) { switch (props.unit) {
@ -57,6 +58,7 @@ const unitValue = computed(() => {
@update:value="(val) => emit('update:value', val)" /> @update:value="(val) => emit('update:value', val)" />
<n-select <n-select
:options="unit" :options="unit"
:render-label="({ label }) => $t(label)"
:value="unitValue" :value="unitValue"
style="max-width: 150px" style="max-width: 150px"
@update:value="(val) => emit('update:unit', val)" /> @update:value="(val) => emit('update:unit', val)" />

11
frontend/src/components/content/ContentLogPane.vue
View File

@ -26,7 +26,7 @@ const filterServerOption = computed(() => {
value: server, value: server,
})) }))
options.splice(0, 0, { options.splice(0, 0, {
label: i18n.t('common.all'), label: 'common.all',
value: '', value: '',
}) })
return options return options
@ -36,7 +36,7 @@ const tableRef = ref(null)
const columns = computed(() => [ const columns = computed(() => [
{ {
title: i18n.t('log.exec_time'), title: () => i18n.t('log.exec_time'),
key: 'timestamp', key: 'timestamp',
defaultSortOrder: 'ascend', defaultSortOrder: 'ascend',
sorter: 'default', sorter: 'default',
@ -48,7 +48,7 @@ const columns = computed(() => [
}, },
}, },
{ {
title: i18n.t('log.server'), title: () => i18n.t('log.server'),
key: 'server', key: 'server',
filterOptionValue: data.server, filterOptionValue: data.server,
filter: (value, row) => { filter: (value, row) => {
@ -62,7 +62,7 @@ const columns = computed(() => [
}, },
}, },
{ {
title: i18n.t('log.cmd'), title: () => i18n.t('log.cmd'),
key: 'cmd', key: 'cmd',
titleAlign: 'center', titleAlign: 'center',
filterOptionValue: data.keyword, filterOptionValue: data.keyword,
@ -83,7 +83,7 @@ const columns = computed(() => [
}, },
}, },
{ {
title: i18n.t('log.cost_time'), title: () => i18n.t('log.cost_time'),
key: 'cost', key: 'cost',
width: 100, width: 100,
align: 'center', align: 'center',
@ -141,6 +141,7 @@ defineExpose({
v-model:value="data.server" v-model:value="data.server"
:consistent-menu-width="false" :consistent-menu-width="false"
:options="filterServerOption" :options="filterServerOption"
:render-label="({ label, value }) => (value === '' ? $t(label) : label)"
style="min-width: 100px" /> style="min-width: 100px" />
</n-form-item> </n-form-item>
<n-form-item :label="$t('log.filter_keyword')"> <n-form-item :label="$t('log.filter_keyword')">

8
frontend/src/components/content_value/ContentSlog.vue
View File

@ -35,7 +35,7 @@ const tableRef = ref(null)
const columns = computed(() => [ const columns = computed(() => [
{ {
title: i18n.t('slog.exec_time'), title: () => i18n.t('slog.exec_time'),
key: 'timestamp', key: 'timestamp',
sortOrder: data.sortOrder, sortOrder: data.sortOrder,
sorter: 'default', sorter: 'default',
@ -47,7 +47,7 @@ const columns = computed(() => [
}, },
}, },
{ {
title: i18n.t('slog.client'), title: () => i18n.t('slog.client'),
key: 'client', key: 'client',
filterOptionValue: data.client, filterOptionValue: data.client,
resizable: true, resizable: true,
@ -81,7 +81,7 @@ const columns = computed(() => [
}, },
}, },
{ {
title: i18n.t('slog.cmd'), title: () => i18n.t('slog.cmd'),
key: 'cmd', key: 'cmd',
titleAlign: 'center', titleAlign: 'center',
filterOptionValue: data.keyword, filterOptionValue: data.keyword,
@ -102,7 +102,7 @@ const columns = computed(() => [
}, },
}, },
{ {
title: i18n.t('slog.cost_time'), title: () => i18n.t('slog.cost_time'),
key: 'cost', key: 'cost',
width: 100, width: 100,
align: 'center', align: 'center',

4
frontend/src/components/content_value/ContentToolbar.vue
View File

@ -62,7 +62,7 @@ const ttlString = computed(() => {
const seconds = Math.floor(props.ttl % 60) const seconds = Math.floor(props.ttl % 60)
s += padStart(seconds + '', 2, '0') s += padStart(seconds + '', 2, '0')
} else if (props.ttl < 0) { } else if (props.ttl < 0) {
s = i18n.t('interface.forever') s = '-1'
} else { } else {
s = '00:00:00' s = '00:00:00'
} }
@ -190,7 +190,7 @@ const onTTL = () => {
<template #icon> <template #icon>
<n-icon :component="Timer" size="18" /> <n-icon :component="Timer" size="18" />
</template> </template>
{{ ttlString }} {{ ttlString === '-1' ? $t('interface.forever') : ttlString }}
</n-button> </n-button>
</template> </template>
TTL{{ `${ttl > 0 ? ': ' + ttl + $t('common.second') : ''}` }} TTL{{ `${ttl > 0 ? ': ' + ttl + $t('common.second') : ''}` }}

6
frontend/src/components/content_value/ContentValueHash.vue
View File

@ -83,7 +83,7 @@ const tableRef = ref(null)
const fieldFilterOption = ref(null) const fieldFilterOption = ref(null)
const fieldColumn = computed(() => ({ const fieldColumn = computed(() => ({
key: 'key', key: 'key',
title: i18n.t('common.field'), title: () => i18n.t('common.field'),
align: 'center', align: 'center',
titleAlign: 'center', titleAlign: 'center',
resizable: true, resizable: true,
@ -113,7 +113,7 @@ const displayCode = computed(() => {
// const valueFilterOption = ref(null) // const valueFilterOption = ref(null)
const valueColumn = computed(() => ({ const valueColumn = computed(() => ({
key: 'value', key: 'value',
title: i18n.t('common.value'), title: () => i18n.t('common.value'),
align: displayCode.value ? 'left' : 'center', align: displayCode.value ? 'left' : 'center',
titleAlign: 'center', titleAlign: 'center',
resizable: true, resizable: true,
@ -195,7 +195,7 @@ const resetEdit = () => {
const actionColumn = { const actionColumn = {
key: 'action', key: 'action',
title: i18n.t('interface.action'), title: () => i18n.t('interface.action'),
width: 120, width: 120,
align: 'center', align: 'center',
titleAlign: 'center', titleAlign: 'center',

4
frontend/src/components/content_value/ContentValueList.vue
View File

@ -83,7 +83,7 @@ const displayCode = computed(() => {
const valueFilterOption = ref(null) const valueFilterOption = ref(null)
const valueColumn = computed(() => ({ const valueColumn = computed(() => ({
key: 'value', key: 'value',
title: i18n.t('common.value'), title: () => i18n.t('common.value'),
align: displayCode.value ? 'left' : 'center', align: displayCode.value ? 'left' : 'center',
titleAlign: 'center', titleAlign: 'center',
ellipsis: displayCode.value ellipsis: displayCode.value
@ -164,7 +164,7 @@ const resetEdit = () => {
const actionColumn = { const actionColumn = {
key: 'action', key: 'action',
title: i18n.t('interface.action'), title: () => i18n.t('interface.action'),
width: 120, width: 120,
align: 'center', align: 'center',
titleAlign: 'center', titleAlign: 'center',

4
frontend/src/components/content_value/ContentValueSet.vue
View File

@ -82,7 +82,7 @@ const displayCode = computed(() => {
const valueFilterOption = ref(null) const valueFilterOption = ref(null)
const valueColumn = computed(() => ({ const valueColumn = computed(() => ({
key: 'value', key: 'value',
title: i18n.t('common.value'), title: () => i18n.t('common.value'),
align: displayCode.value ? 'left' : 'center', align: displayCode.value ? 'left' : 'center',
titleAlign: 'center', titleAlign: 'center',
ellipsis: displayCode.value ellipsis: displayCode.value
@ -161,7 +161,7 @@ const resetEdit = () => {
const actionColumn = { const actionColumn = {
key: 'action', key: 'action',
title: i18n.t('interface.action'), title: () => i18n.t('interface.action'),
width: 120, width: 120,
align: 'center', align: 'center',
titleAlign: 'center', titleAlign: 'center',

4
frontend/src/components/content_value/ContentValueStream.vue
View File

@ -74,7 +74,7 @@ const idColumn = computed(() => ({
const valueFilterOption = ref(null) const valueFilterOption = ref(null)
const valueColumn = computed(() => ({ const valueColumn = computed(() => ({
key: 'value', key: 'value',
title: i18n.t('common.value'), title: () => i18n.t('common.value'),
align: 'left', align: 'left',
titleAlign: 'center', titleAlign: 'center',
resizable: true, resizable: true,
@ -98,7 +98,7 @@ const valueColumn = computed(() => ({
})) }))
const actionColumn = { const actionColumn = {
key: 'action', key: 'action',
title: i18n.t('interface.action'), title: () => i18n.t('interface.action'),
width: 80, width: 80,
align: 'center', align: 'center',
titleAlign: 'center', titleAlign: 'center',

6
frontend/src/components/content_value/ContentValueZSet.vue
View File

@ -81,7 +81,7 @@ const fullEdit = ref(false)
// const scoreFilterOption = ref(null) // const scoreFilterOption = ref(null)
const scoreColumn = computed(() => ({ const scoreColumn = computed(() => ({
key: 'score', key: 'score',
title: i18n.t('common.score'), title: () => i18n.t('common.score'),
align: 'center', align: 'center',
titleAlign: 'center', titleAlign: 'center',
resizable: true, resizable: true,
@ -130,7 +130,7 @@ const displayCode = computed(() => {
const valueFilterOption = ref(null) const valueFilterOption = ref(null)
const valueColumn = computed(() => ({ const valueColumn = computed(() => ({
key: 'value', key: 'value',
title: i18n.t('common.value'), title: () => i18n.t('common.value'),
align: displayCode.value ? 'left' : 'center', align: displayCode.value ? 'left' : 'center',
titleAlign: 'center', titleAlign: 'center',
resizable: true, resizable: true,
@ -210,7 +210,7 @@ const resetEdit = () => {
const actionColumn = { const actionColumn = {
key: 'action', key: 'action',
title: i18n.t('interface.action'), title: () => i18n.t('interface.action'),
width: 120, width: 120,
align: 'center', align: 'center',
titleAlign: 'center', titleAlign: 'center',

12
frontend/src/components/dialogs/AddFieldsDialog.vue
View File

@ -49,15 +49,15 @@ const defaultValue = {
const title = computed(() => { const title = computed(() => {
switch (newForm.type) { switch (newForm.type) {
case types.LIST: case types.LIST:
return i18n.t('dialogue.field.new_item') return 'dialogue.field.new_item'
case types.HASH: case types.HASH:
return i18n.t('dialogue.field.new') return 'dialogue.field.new'
case types.SET: case types.SET:
return i18n.t('dialogue.field.new') return 'dialogue.field.new'
case types.ZSET: case types.ZSET:
return i18n.t('dialogue.field.new') return 'dialogue.field.new'
case types.STREAM: case types.STREAM:
return i18n.t('dialogue.field.new') return 'dialogue.field.new'
} }
return '' return ''
}) })
@ -204,7 +204,7 @@ const onClose = () => {
:positive-button-props="{ size: 'medium' }" :positive-button-props="{ size: 'medium' }"
:positive-text="$t('common.confirm')" :positive-text="$t('common.confirm')"
:show-icon="false" :show-icon="false"
:title="title" :title="title ? $t(title) : ''"
preset="dialog" preset="dialog"
style="width: 600px" style="width: 600px"
transform-origin="center" transform-origin="center"

12
frontend/src/components/dialogs/ConnectionDialog.vue
View File

@ -56,7 +56,7 @@ const groupOptions = computed(() => {
value: group, value: group,
})) }))
options.splice(0, 0, { options.splice(0, 0, {
label: i18n.t('dialogue.connection.no_group'), label: 'dialogue.connection.no_group',
value: '', value: '',
}) })
return options return options
@ -278,7 +278,10 @@ const onClose = () => {
:label="$t('dialogue.connection.group')" :label="$t('dialogue.connection.group')"
:span="24" :span="24"
required> 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>
<n-form-item-gi :label="$t('dialogue.connection.addr')" :span="24" path="addr" required> <n-form-item-gi :label="$t('dialogue.connection.addr')" :span="24" path="addr" required>
<n-input <n-input
@ -543,7 +546,10 @@ const onClose = () => {
:options="masterNameOptions" :options="masterNameOptions"
filterable filterable
tag /> tag />
<n-button :loading="loadingSentinelMaster" @click="onLoadSentinelMasters"> <n-button
:disabled="!generalForm.sentinel.enable"
:loading="loadingSentinelMaster"
@click="onLoadSentinelMasters">
{{ $t('dialogue.connection.sentinel.auto_discover') }} {{ $t('dialogue.connection.sentinel.auto_discover') }}
</n-button> </n-button>
</n-input-group> </n-input-group>

2
frontend/src/components/dialogs/GroupDialog.vue
View File

@ -9,6 +9,7 @@ import { every, get, includes, isEmpty } from 'lodash'
* Dialog for create or rename group * Dialog for create or rename group
*/ */
const i18n = useI18n()
const editGroup = ref('') const editGroup = ref('')
const groupForm = reactive({ const groupForm = reactive({
name: '', name: '',
@ -42,7 +43,6 @@ watchEffect(() => {
} }
}) })
const i18n = useI18n()
const onConfirm = async () => { const onConfirm = async () => {
try { try {
await groupFormRef.value?.validate((errs) => { await groupFormRef.value?.validate((errs) => {

26
frontend/src/components/dialogs/ImportKeyDialog.vue
View File

@ -39,31 +39,31 @@ watchEffect(() => {
}) })
const i18n = useI18n() const i18n = useI18n()
const conflictOption = computed(() => [ const conflictOption = [
{ {
value: 0, value: 0,
label: i18n.t('dialogue.import.conflict_overwrite'), label: 'dialogue.import.conflict_overwrite',
}, },
{ {
value: 1, value: 1,
label: i18n.t('dialogue.import.conflict_ignore'), label: 'dialogue.import.conflict_ignore',
}, },
]) ]
const ttlOption = computed(() => [ const ttlOption = [
{ {
value: 0, value: 0,
label: i18n.t('dialogue.import.ttl_include'), label: 'dialogue.import.ttl_include',
}, },
{ {
value: 1, value: 1,
label: i18n.t('dialogue.import.ttl_ignore'), label: 'dialogue.import.ttl_ignore',
}, },
{ {
value: 2, value: 2,
label: i18n.t('dialogue.import.ttl_custom'), label: 'dialogue.import.ttl_custom',
}, },
]) ]
const importEnable = computed(() => { const importEnable = computed(() => {
return !isEmpty(importKeyForm.file) return !isEmpty(importKeyForm.file)
@ -130,14 +130,18 @@ const onClose = () => {
<n-radio-button <n-radio-button
v-for="(op, i) in conflictOption" v-for="(op, i) in conflictOption"
:key="i" :key="i"
:label="op.label" :label="$t(op.label)"
:value="op.value" /> :value="op.value" />
</n-radio-group> </n-radio-group>
</n-form-item> </n-form-item>
<n-form-item :label="$t('dialogue.import.import_expire_title')"> <n-form-item :label="$t('dialogue.import.import_expire_title')">
<n-space :wrap-item="false"> <n-space :wrap-item="false">
<n-radio-group v-model:value="importKeyForm.ttlType"> <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> </n-radio-group>
<ttl-input <ttl-input
v-if="importKeyForm.ttlType === 2" v-if="importKeyForm.ttlType === 2"

9
frontend/src/components/dialogs/KeyFilterDialog.vue
View File

@ -1,11 +1,9 @@
<script setup> <script setup>
import { computed, reactive, ref, watchEffect } from 'vue' import { computed, reactive, ref, watchEffect } from 'vue'
import useDialog from 'stores/dialog' import useDialog from 'stores/dialog'
import { useI18n } from 'vue-i18n'
import { types } from '@/consts/support_redis_type.js' import { types } from '@/consts/support_redis_type.js'
import useBrowserStore from 'stores/browser.js' import useBrowserStore from 'stores/browser.js'
const i18n = useI18n()
const filterForm = reactive({ const filterForm = reactive({
server: '', server: '',
db: 0, db: 0,
@ -20,7 +18,7 @@ const typeOptions = computed(() => {
})) }))
options.splice(0, 0, { options.splice(0, 0, {
value: '', value: '',
label: i18n.t('common.all'), label: 'common.all',
}) })
return options return options
}) })
@ -75,7 +73,10 @@ const onClose = () => {
<n-input :value="filterForm.db + ''" readonly></n-input> <n-input :value="filterForm.db + ''" readonly></n-input>
</n-form-item> </n-form-item>
<n-form-item :label="$t('interface.type')" path="type" required> <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>
<n-form-item :label="$t('dialogue.filter.filter_pattern')" required> <n-form-item :label="$t('dialogue.filter.filter_pattern')" required>
<n-input-group> <n-input-group>

18
frontend/src/components/dialogs/PreferencesDialog.vue
View File

@ -37,7 +37,7 @@ watchEffect(() => {
const keyOptions = computed(() => { const keyOptions = computed(() => {
const opts = map(typesIconStyle, (v) => ({ const opts = map(typesIconStyle, (v) => ({
value: 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) return sortBy(opts, (o) => o.value)
}) })
@ -81,7 +81,7 @@ const onClose = () => {
v-for="opt in prefStore.themeOption" v-for="opt in prefStore.themeOption"
:key="opt.value" :key="opt.value"
:value="opt.value"> :value="opt.value">
{{ opt.label }} {{ $t(opt.label) }}
</n-radio-button> </n-radio-button>
</n-radio-group> </n-radio-group>
</n-form-item-gi> </n-form-item-gi>
@ -89,12 +89,14 @@ const onClose = () => {
<n-select <n-select
v-model:value="prefStore.general.language" v-model:value="prefStore.general.language"
:options="prefStore.langOption" :options="prefStore.langOption"
:render-label="({ label, value }) => (value === 'auto' ? $t(label) : label)"
filterable /> filterable />
</n-form-item-gi> </n-form-item-gi>
<n-form-item-gi :label="$t('preferences.general.font')" :span="12" required> <n-form-item-gi :label="$t('preferences.general.font')" :span="12" required>
<n-select <n-select
v-model:value="prefStore.general.font" v-model:value="prefStore.general.font"
:options="prefStore.fontOption" :options="prefStore.fontOption"
:render-label="({ label, value }) => (value === '' ? $t(label) : label)"
filterable /> filterable />
</n-form-item-gi> </n-form-item-gi>
<n-form-item-gi :label="$t('preferences.general.font_size')" :span="12"> <n-form-item-gi :label="$t('preferences.general.font_size')" :span="12">
@ -108,7 +110,10 @@ const onClose = () => {
style="width: 100%" /> style="width: 100%" />
</n-form-item-gi> </n-form-item-gi>
<n-form-item-gi :label="$t('preferences.general.key_icon_style')" :span="12"> <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>
<n-form-item-gi :label="$t('preferences.general.proxy')" :span="24"> <n-form-item-gi :label="$t('preferences.general.proxy')" :span="24">
<n-space> <n-space>
@ -136,17 +141,18 @@ const onClose = () => {
<n-select <n-select
v-model:value="prefStore.editor.font" v-model:value="prefStore.editor.font"
:options="prefStore.fontOption" :options="prefStore.fontOption"
:render-label="({ label, value }) => value || $t(label)"
filterable /> filterable />
</n-form-item-gi> </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-input-number v-model:value="prefStore.editor.fontSize" :max="65535" :min="1" />
</n-form-item-gi> </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"> <n-checkbox v-model:checked="prefStore.editor.showLineNum">
{{ $t('preferences.editor.show_linenum') }} {{ $t('preferences.editor.show_linenum') }}
</n-checkbox> </n-checkbox>
</n-form-item-gi> </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"> <n-checkbox v-model:checked="prefStore.editor.showFolding">
{{ $t('preferences.editor.show_folding') }} {{ $t('preferences.editor.show_folding') }}
</n-checkbox> </n-checkbox>

20
frontend/src/components/dialogs/SetTtlDialog.vue
View File

@ -44,20 +44,20 @@ const isBatchAction = computed(() => {
const title = computed(() => { const title = computed(() => {
if (isBatchAction.value) { 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 { } else {
return i18n.t('dialogue.ttl.title') return () => i18n.t('dialogue.ttl.title')
} }
}) })
const i18n = useI18n() const i18n = useI18n()
const quickOption = computed(() => [ const quickOption = [
{ value: -1, unit: 1, label: i18n.t('interface.forever') }, { value: -1, unit: 1, label: 'interface.forever' },
{ value: 10, unit: 1, label: `10 ${i18n.t('common.second')}` }, { value: 10, unit: 1, label: 'common.second' },
{ value: 1, unit: 60, label: `1 ${i18n.t('common.minute')}` }, { value: 1, unit: 60, label: 'common.minute' },
{ value: 1, unit: 3600, label: `1 ${i18n.t('common.hour')}` }, { value: 1, unit: 3600, label: 'common.hour' },
{ value: 1, unit: 86400, label: `1 ${i18n.t('common.day')}` }, { value: 1, unit: 86400, label: 'common.day' },
]) ]
const onQuickSet = (opt) => { const onQuickSet = (opt) => {
ttlForm.ttl = opt.value ttlForm.ttl = opt.value
@ -121,7 +121,7 @@ const onConfirm = async () => {
secondary secondary
size="small" size="small"
@click="onQuickSet(opt)"> @click="onQuickSet(opt)">
{{ opt.label }} {{ (opt.value > 0 ? opt.value + ' ' : '') + $t(opt.label) }}
</n-button> </n-button>
</n-space> </n-space>
</n-form-item> </n-form-item>

8
frontend/src/components/new_value/AddHashValue.vue
View File

@ -4,7 +4,6 @@ import { flatMap, reject } from 'lodash'
import Add from '@/components/icons/Add.vue' import Add from '@/components/icons/Add.vue'
import Delete from '@/components/icons/Delete.vue' import Delete from '@/components/icons/Delete.vue'
import IconButton from '@/components/common/IconButton.vue' import IconButton from '@/components/common/IconButton.vue'
import { useI18n } from 'vue-i18n'
const props = defineProps({ const props = defineProps({
type: Number, type: Number,
@ -12,15 +11,14 @@ const props = defineProps({
}) })
const emit = defineEmits(['update:value', 'update:type']) const emit = defineEmits(['update:value', 'update:type'])
const i18n = useI18n()
const updateOption = [ const updateOption = [
{ {
value: 0, value: 0,
label: i18n.t('dialogue.field.overwrite_field'), label: 'dialogue.field.overwrite_field',
}, },
{ {
value: 1, value: 1,
label: i18n.t('dialogue.field.ignore_field'), label: 'dialogue.field.ignore_field',
}, },
] ]
@ -47,7 +45,7 @@ const onUpdate = (val) => {
<template> <template>
<n-form-item :label="$t('dialogue.field.conflict_handle')"> <n-form-item :label="$t('dialogue.field.conflict_handle')">
<n-radio-group :value="props.type" @update:value="(val) => emit('update:type', val)"> <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-radio-group>
</n-form-item> </n-form-item>
<n-form-item <n-form-item

8
frontend/src/components/new_value/AddListValue.vue
View File

@ -4,7 +4,6 @@ import { compact } from 'lodash'
import Add from '@/components/icons/Add.vue' import Add from '@/components/icons/Add.vue'
import Delete from '@/components/icons/Delete.vue' import Delete from '@/components/icons/Delete.vue'
import IconButton from '@/components/common/IconButton.vue' import IconButton from '@/components/common/IconButton.vue'
import { useI18n } from 'vue-i18n'
const props = defineProps({ const props = defineProps({
type: Number, type: Number,
@ -12,15 +11,14 @@ const props = defineProps({
}) })
const emit = defineEmits(['update:value', 'update:type']) const emit = defineEmits(['update:value', 'update:type'])
const i18n = useI18n()
const insertOption = [ const insertOption = [
{ {
value: 0, value: 0,
label: i18n.t('dialogue.field.append_item'), label: 'dialogue.field.append_item',
}, },
{ {
value: 1, value: 1,
label: i18n.t('dialogue.field.prepend_item'), label: 'dialogue.field.prepend_item',
}, },
] ]
@ -34,7 +32,7 @@ const onUpdate = (val) => {
<template> <template>
<n-form-item :label="$t('interface.type')"> <n-form-item :label="$t('interface.type')">
<n-radio-group :value="props.type" @update:value="(val) => emit('update:type', val)"> <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-radio-group>
</n-form-item> </n-form-item>
<n-form-item :label="$t('dialogue.field.element')" required> <n-form-item :label="$t('dialogue.field.element')" required>

8
frontend/src/components/new_value/AddZSetValue.vue
View File

@ -4,7 +4,6 @@ import { isEmpty, reject } from 'lodash'
import Add from '@/components/icons/Add.vue' import Add from '@/components/icons/Add.vue'
import Delete from '@/components/icons/Delete.vue' import Delete from '@/components/icons/Delete.vue'
import IconButton from '@/components/common/IconButton.vue' import IconButton from '@/components/common/IconButton.vue'
import { useI18n } from 'vue-i18n'
const props = defineProps({ const props = defineProps({
type: Number, type: Number,
@ -15,15 +14,14 @@ defineOptions({
}) })
const emit = defineEmits(['update:value', 'update:type']) const emit = defineEmits(['update:value', 'update:type'])
const i18n = useI18n()
const updateOption = [ const updateOption = [
{ {
value: 0, value: 0,
label: i18n.t('dialogue.field.overwrite_field'), label: 'dialogue.field.overwrite_field',
}, },
{ {
value: 1, value: 1,
label: i18n.t('dialogue.field.ignore_field'), label: 'dialogue.field.ignore_field',
}, },
] ]
@ -55,7 +53,7 @@ const onUpdate = () => {
<template> <template>
<n-form-item :label="$t('interface.type')"> <n-form-item :label="$t('interface.type')">
<n-radio-group :value="props.type" @update:value="(val) => emit('update:type', val)"> <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-radio-group>
</n-form-item> </n-form-item>
<n-form-item <n-form-item

16
frontend/src/components/sidebar/BrowserPane.vue
View File

@ -64,16 +64,12 @@ const dbSelectOptions = computed(() => {
}) })
}) })
const moreOptions = computed(() => [ const moreOptions = [
{ key: 'import', label: i18n.t('interface.import_key'), icon: render.renderIcon(Import, { strokeWidth: 3.5 }) }, { key: 'import', label: 'interface.import_key', icon: Import },
{ key: 'flush', label: i18n.t('interface.flush_db'), icon: render.renderIcon(Delete, { strokeWidth: 3.5 }) }, { key: 'flush', label: 'interface.flush_db', icon: Delete },
{ key: 'divider', type: 'divider' }, { key: 'divider', type: 'divider' },
{ { key: 'disconnect', label: 'interface.disconnect', icon: Unlink },
key: 'disconnect', ]
label: i18n.t('interface.disconnect'),
icon: render.renderIcon(Unlink, { strokeWidth: 3.5 }),
},
])
const loadProgress = computed(() => { const loadProgress = computed(() => {
const db = browserStore.getDatabase(props.server, props.db) const db = browserStore.getDatabase(props.server, props.db)
@ -356,6 +352,8 @@ watch(
@click="inCheckState = true" /> @click="inCheckState = true" />
<n-dropdown <n-dropdown
:options="moreOptions" :options="moreOptions"
:render-icon="({ icon }) => render.renderIcon(icon, { strokeWidth: 3.5 })"
:render-label="({ label }) => $t(label)"
placement="top-end" placement="top-end"
style="min-width: 130px" style="min-width: 130px"
@select="onSelectOptions"> @select="onSelectOptions">

67
frontend/src/components/sidebar/BrowserTree.vue
View File

@ -1,5 +1,5 @@
<script setup> <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 { ConnectionType } from '@/consts/connection_type.js'
import { NIcon, NSpace, NText, useThemeVars } from 'naive-ui' import { NIcon, NSpace, NText, useThemeVars } from 'naive-ui'
import Key from '@/components/icons/Key.vue' 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 useDialogStore from 'stores/dialog.js'
import { ClipboardSetText } from 'wailsjs/runtime/runtime.js' import { ClipboardSetText } from 'wailsjs/runtime/runtime.js'
import useConnectionStore from 'stores/connections.js' import useConnectionStore from 'stores/connections.js'
import Filter from '@/components/icons/Filter.vue'
import useTabStore from 'stores/tab.js' import useTabStore from 'stores/tab.js'
import IconButton from '@/components/common/IconButton.vue' import IconButton from '@/components/common/IconButton.vue'
import { parseHexColor } from '@/utils/rgb.js' import { parseHexColor } from '@/utils/rgb.js'
@ -104,42 +103,21 @@ const contextMenuParam = reactive({
}) })
const menuOptions = { const menuOptions = {
[ConnectionType.RedisDB]: ({ opened }) => { [ConnectionType.RedisKey]: [
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]: () => [
// { // {
// key: 'key_reload', // key: 'key_reload',
// label: i18n.t('interface.reload'), // label: 'interface.reload'),
// icon: render.renderIcon(Refresh), // icon: Refresh,
// }, // },
{ {
key: 'key_newkey', key: 'key_newkey',
label: i18n.t('interface.new_key'), label: 'interface.new_key',
icon: render.renderIcon(Add), icon: Add,
}, },
{ {
key: 'key_copy', key: 'key_copy',
label: i18n.t('interface.copy_path'), label: 'interface.copy_path',
icon: render.renderIcon(CopyLink), icon: CopyLink,
}, },
{ {
type: 'divider', type: 'divider',
@ -147,20 +125,20 @@ const menuOptions = {
}, },
{ {
key: 'key_remove', key: 'key_remove',
label: i18n.t('interface.batch_delete_key'), label: 'interface.batch_delete_key',
icon: render.renderIcon(Delete), icon: Delete,
}, },
], ],
[ConnectionType.RedisValue]: () => [ [ConnectionType.RedisValue]: [
{ {
key: 'value_reload', key: 'value_reload',
label: i18n.t('interface.reload'), label: 'interface.reload',
icon: render.renderIcon(Refresh), icon: Refresh,
}, },
{ {
key: 'value_copy', key: 'value_copy',
label: i18n.t('interface.copy_key'), label: 'interface.copy_key',
icon: render.renderIcon(CopyLink), icon: CopyLink,
}, },
{ {
type: 'divider', type: 'divider',
@ -168,16 +146,12 @@ const menuOptions = {
}, },
{ {
key: 'value_remove', key: 'value_remove',
label: i18n.t('interface.remove_key'), label: 'interface.remove_key',
icon: render.renderIcon(Delete), icon: Delete,
}, },
], ],
} }
const renderContextLabel = (option) => {
return h('div', { class: 'context-menu-item' }, option.label)
}
const handleSelectContextMenu = (key) => { const handleSelectContextMenu = (key) => {
contextMenuParam.show = false contextMenuParam.show = false
const selectedKey = get(selectedKeys.value, 0) const selectedKey = get(selectedKeys.value, 0)
@ -526,7 +500,7 @@ const nodeProps = ({ option }) => {
return return
} }
contextMenuParam.show = false contextMenuParam.show = false
contextMenuParam.options = menuOptions[option.type](option) contextMenuParam.options = markRaw(menuOptions[option.type] || [])
nextTick().then(() => { nextTick().then(() => {
contextMenuParam.x = e.clientX contextMenuParam.x = e.clientX
contextMenuParam.y = e.clientY contextMenuParam.y = e.clientY
@ -627,9 +601,12 @@ defineExpose({
@update:selected-keys="onUpdateSelectedKeys" @update:selected-keys="onUpdateSelectedKeys"
@update:expanded-keys="onUpdateExpanded" @update:expanded-keys="onUpdateExpanded"
@update:checked-keys="onUpdateCheckedKeys" /> @update:checked-keys="onUpdateCheckedKeys" />
<!-- context menu -->
<n-dropdown <n-dropdown
:options="contextMenuParam.options" :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" :show="contextMenuParam.show"
:x="contextMenuParam.x" :x="contextMenuParam.x"
:y="contextMenuParam.y" :y="contextMenuParam.y"

51
frontend/src/components/sidebar/ConnectionTree.vue
View File

@ -1,6 +1,6 @@
<script setup> <script setup>
import useDialogStore from 'stores/dialog.js' 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 useConnectionStore from 'stores/connections.js'
import { NIcon, NSpace, NText, useThemeVars } from 'naive-ui' import { NIcon, NSpace, NText, useThemeVars } from 'naive-ui'
import { ConnectionType } from '@/consts/connection_type.js' import { ConnectionType } from '@/consts/connection_type.js'
@ -53,13 +53,13 @@ const menuOptions = {
[ConnectionType.Group]: ({ opened }) => [ [ConnectionType.Group]: ({ opened }) => [
{ {
key: 'group_rename', key: 'group_rename',
label: i18n.t('interface.rename_conn_group'), label: 'interface.rename_conn_group',
icon: render.renderIcon(Edit), icon: Edit,
}, },
{ {
key: 'group_delete', key: 'group_delete',
label: i18n.t('interface.remove_conn_group'), label: 'interface.remove_conn_group',
icon: render.renderIcon(Delete), icon: Delete,
}, },
], ],
[ConnectionType.Server]: ({ name }) => { [ConnectionType.Server]: ({ name }) => {
@ -68,18 +68,18 @@ const menuOptions = {
return [ return [
{ {
key: 'server_close', key: 'server_close',
label: i18n.t('interface.disconnect'), label: 'interface.disconnect',
icon: render.renderIcon(Unlink), icon: Unlink,
}, },
{ {
key: 'server_edit', key: 'server_edit',
label: i18n.t('interface.edit_conn'), label: 'interface.edit_conn',
icon: render.renderIcon(Config), icon: Config,
}, },
{ {
key: 'server_dup', key: 'server_dup',
label: i18n.t('interface.dup_conn'), label: 'interface.dup_conn',
icon: render.renderIcon(CopyLink), icon: CopyLink,
}, },
{ {
type: 'divider', type: 'divider',
@ -87,26 +87,26 @@ const menuOptions = {
}, },
{ {
key: 'server_remove', key: 'server_remove',
label: i18n.t('interface.remove_conn'), label: 'interface.remove_conn',
icon: render.renderIcon(Delete), icon: Delete,
}, },
] ]
} else { } else {
return [ return [
{ {
key: 'server_open', key: 'server_open',
label: i18n.t('interface.open_connection'), label: 'interface.open_connection',
icon: render.renderIcon(Connect), icon: Connect,
}, },
{ {
key: 'server_edit', key: 'server_edit',
label: i18n.t('interface.edit_conn'), label: 'interface.edit_conn',
icon: render.renderIcon(Config), icon: Config,
}, },
{ {
key: 'server_dup', key: 'server_dup',
label: i18n.t('interface.dup_conn'), label: 'interface.dup_conn',
icon: render.renderIcon(CopyLink), icon: CopyLink,
}, },
{ {
type: 'divider', type: 'divider',
@ -114,8 +114,8 @@ const menuOptions = {
}, },
{ {
key: 'server_remove', key: 'server_remove',
label: i18n.t('interface.remove_conn'), label: 'interface.remove_conn',
icon: render.renderIcon(Delete), icon: Delete,
}, },
] ]
} }
@ -355,7 +355,7 @@ const nodeProps = ({ option }) => {
} }
contextMenuParam.show = false contextMenuParam.show = false
nextTick().then(() => { nextTick().then(() => {
contextMenuParam.options = mop(option) contextMenuParam.options = markRaw(mop(option))
contextMenuParam.currentNode = option contextMenuParam.currentNode = option
contextMenuParam.x = e.clientX contextMenuParam.x = e.clientX
contextMenuParam.y = e.clientY 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) => { const handleSelectContextMenu = (key) => {
contextMenuParam.show = false contextMenuParam.show = false
const selectedKey = get(selectedKeys.value, 0) const selectedKey = get(selectedKeys.value, 0)
@ -533,7 +529,8 @@ const onCancelOpen = () => {
<n-dropdown <n-dropdown
:keyboard="true" :keyboard="true"
:options="contextMenuParam.options" :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" :show="contextMenuParam.show"
:x="contextMenuParam.x" :x="contextMenuParam.x"
:y="contextMenuParam.y" :y="contextMenuParam.y"

31
frontend/src/components/sidebar/Ribbon.vue
View File

@ -1,5 +1,5 @@
<script setup> <script setup>
import { computed, h } from 'vue' import { computed } from 'vue'
import { NIcon, useThemeVars } from 'naive-ui' import { NIcon, useThemeVars } from 'naive-ui'
import Database from '@/components/icons/Database.vue' import Database from '@/components/icons/Database.vue'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
@ -38,18 +38,18 @@ const i18n = useI18n()
const menuOptions = computed(() => { const menuOptions = computed(() => {
return [ return [
{ {
label: i18n.t('ribbon.browser'), label: 'ribbon.browser',
key: 'browser', key: 'browser',
icon: Database, icon: Database,
show: browserStore.anyConnectionOpened, show: browserStore.anyConnectionOpened,
}, },
{ {
label: i18n.t('ribbon.server'), label: 'ribbon.server',
key: 'server', key: 'server',
icon: Server, icon: Server,
}, },
{ {
label: i18n.t('ribbon.log'), label: 'ribbon.log',
key: 'log', key: 'log',
icon: Record, icon: Record,
}, },
@ -59,21 +59,21 @@ const menuOptions = computed(() => {
const preferencesOptions = computed(() => { const preferencesOptions = computed(() => {
return [ return [
{ {
label: i18n.t('menu.preferences'), label: 'menu.preferences',
key: 'preferences', key: 'preferences',
icon: render.renderIcon(Config, { strokeWidth: 3 }), icon: Config,
}, },
// { // {
// label: i18n.t('menu.help'), // label: 'menu.help',
// key: 'help', // key: 'help',
// icon: render.renderIcon(Help, { strokeWidth: 3 }), // icon: Help,
// }, // },
{ {
label: i18n.t('menu.report_bug'), label: 'menu.report_bug',
key: 'report', key: 'report',
}, },
{ {
label: i18n.t('menu.check_update'), label: 'menu.check_update',
key: 'update', key: 'update',
}, },
{ {
@ -81,16 +81,12 @@ const preferencesOptions = computed(() => {
key: 'd1', key: 'd1',
}, },
{ {
label: i18n.t('menu.about'), label: 'menu.about',
key: 'about', key: 'about',
}, },
] ]
}) })
const renderContextLabel = (option) => {
return h('div', { class: 'context-menu-item' }, option.label)
}
const dialogStore = useDialogStore() const dialogStore = useDialogStore()
const prefStore = usePreferencesStore() const prefStore = usePreferencesStore()
const onSelectPreferenceMenu = (key) => { const onSelectPreferenceMenu = (key) => {
@ -140,14 +136,15 @@ const exThemeVars = computed(() => {
</n-icon> </n-icon>
</div> </div>
</template> </template>
{{ m.label }} {{ $t(m.label) }}
</n-tooltip> </n-tooltip>
</div> </div>
<div class="flex-item-expand"></div> <div class="flex-item-expand"></div>
<div class="nav-menu-item flex-box-v"> <div class="nav-menu-item flex-box-v">
<n-dropdown <n-dropdown
:options="preferencesOptions" :options="preferencesOptions"
:render-label="renderContextLabel" :render-icon="({ icon }) => render.renderIcon(icon)"
:render-label="({ label }) => render.renderLabel($t(label), { class: 'context-menu-item' })"
trigger="click" trigger="click"
@select="onSelectPreferenceMenu"> @select="onSelectPreferenceMenu">
<icon-button :icon="Config" :size="iconSize" :stroke-width="3" class="nav-menu-button" /> <icon-button :icon="Config" :size="iconSize" :stroke-width="3" class="nav-menu-button" />

10
frontend/src/stores/preferences.js
View File

@ -69,15 +69,15 @@ const usePreferencesStore = defineStore('preferences', {
return [ return [
{ {
value: 'light', value: 'light',
label: i18nGlobal.t('preferences.general.theme_light'), label: 'preferences.general.theme_light',
}, },
{ {
value: 'dark', value: 'dark',
label: i18nGlobal.t('preferences.general.theme_dark'), label: 'preferences.general.theme_dark',
}, },
{ {
value: 'auto', 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, { options.splice(0, 0, {
value: 'auto', value: 'auto',
label: i18nGlobal.t('preferences.general.system_lang'), label: 'preferences.general.system_lang',
}) })
return options return options
}, },
@ -110,7 +110,7 @@ const usePreferencesStore = defineStore('preferences', {
})) }))
option.splice(0, 0, { option.splice(0, 0, {
value: '', value: '',
label: i18nGlobal.t('preferences.general.default'), label: 'preferences.general.default',
path: '', path: '',
}) })
return option return option

21
frontend/src/utils/render.js
View File

@ -7,14 +7,25 @@ export function useRender() {
* *
* @param {string|Object} icon * @param {string|Object} icon
* @param {{}} [props] * @param {{}} [props]
* @return {*} * @return {VNode}
*/ */
renderIcon: (icon, props = {}) => { renderIcon: (icon, props = {}) => {
return () => { if (icon == null) {
return h(NIcon, null, { return undefined
default: () => h(icon, props),
})
} }
return h(NIcon, null, {
default: () => h(icon, props),
})
},
/**
*
* @param {string} label
* @param {{}} [props]
* @return {VNode}
*/
renderLabel: (label, props = {}) => {
return h('div', props, label)
}, },
} }
} }