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

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

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

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

@ -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)" />

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

@ -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')">

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

@ -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',

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

@ -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') : ''}` }}

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

@ -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',

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

@ -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',

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

@ -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',

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

@ -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',

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

@ -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',

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

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

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

@ -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>

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
*/
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) => {

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

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

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

@ -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>

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

@ -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>

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

@ -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>

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 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

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 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>

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 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

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

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

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

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

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

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

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

@ -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" />

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

@ -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

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

@ -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)
},
}
}