perf: add an 'Import Keys' option to new key dialog.

This commit is contained in:
Lykin 2024-01-06 23:44:18 +08:00
parent 0d6765a757
commit e87b02e14c
3 changed files with 37 additions and 35 deletions

View File

@ -13,6 +13,7 @@ import { NSpace } from 'naive-ui'
import useTabStore from 'stores/tab.js' import useTabStore from 'stores/tab.js'
import NewStreamValue from '@/components/new_value/NewStreamValue.vue' import NewStreamValue from '@/components/new_value/NewStreamValue.vue'
import useBrowserStore from 'stores/browser.js' import useBrowserStore from 'stores/browser.js'
import Import from '@/components/icons/Import.vue'
const i18n = useI18n() const i18n = useI18n()
const newForm = reactive({ const newForm = reactive({
@ -169,6 +170,11 @@ const onAdd = async () => {
const onClose = () => { const onClose = () => {
dialogStore.closeNewKeyDialog() dialogStore.closeNewKeyDialog()
} }
const onImport = () => {
dialogStore.closeNewKeyDialog()
dialogStore.openImportKeyDialog(newForm.server, newForm.db)
}
</script> </script>
<template> <template>
@ -177,17 +183,11 @@ const onClose = () => {
:closable="false" :closable="false"
:close-on-esc="false" :close-on-esc="false"
:mask-closable="false" :mask-closable="false"
:negative-button-props="{ size: 'medium' }"
:negative-text="$t('common.cancel')"
:positive-button-props="{ size: 'medium' }"
:positive-text="$t('common.confirm')"
:show-icon="false" :show-icon="false"
:title="$t('dialogue.key.new')" :title="$t('dialogue.key.new')"
preset="dialog" preset="dialog"
style="width: 600px" style="width: 600px"
transform-origin="center" transform-origin="center">
@positive-click="onAdd"
@negative-click="onClose">
<n-scrollbar ref="scrollRef" style="max-height: 500px"> <n-scrollbar ref="scrollRef" style="max-height: 500px">
<n-form <n-form
ref="newFormRef" ref="newFormRef"
@ -234,6 +234,25 @@ const onClose = () => {
<!-- TODO: Add import from txt file option --> <!-- TODO: Add import from txt file option -->
</n-form> </n-form>
</n-scrollbar> </n-scrollbar>
<template #action>
<div class="flex-item-expand">
<n-button :focusable="false" size="medium" @click="onImport">
<template #icon>
<n-icon :component="Import" />
</template>
{{ $t('interface.import_key') }}
</n-button>
</div>
<div class="flex-item n-dialog__action">
<n-button :focusable="false" size="medium" @click="onClose">
{{ $t('common.cancel') }}
</n-button>
<n-button :focusable="false" size="medium" type="primary" @click="onAdd">
{{ $t('common.confirm') }}
</n-button>
</div>
</template>
</n-modal> </n-modal>
</template> </template>

View File

@ -25,7 +25,6 @@ import More from '@/components/icons/More.vue'
import Export from '@/components/icons/Export.vue' import Export from '@/components/icons/Export.vue'
import { ConnectionType } from '@/consts/connection_type.js' import { ConnectionType } from '@/consts/connection_type.js'
import Import from '@/components/icons/Import.vue' import Import from '@/components/icons/Import.vue'
import Down from '@/components/icons/Down.vue'
import Checkbox from '@/components/icons/Checkbox.vue' import Checkbox from '@/components/icons/Checkbox.vue'
import Timer from '@/components/icons/Timer.vue' import Timer from '@/components/icons/Timer.vue'
@ -65,12 +64,8 @@ const dbSelectOptions = computed(() => {
}) })
}) })
const addOptions = computed(() => [
{ key: 'import', label: i18n.t('interface.import_key'), icon: render.renderIcon(Import, { strokeWidth: 3.5 }) },
])
const moreOptions = computed(() => [ const moreOptions = computed(() => [
// { key: 'import', label: i18n.t('interface.import_key'), icon: render.renderIcon(Import, { strokeWidth: 3.5 }) }, { 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 }) }, { key: 'flush', label: i18n.t('interface.flush_db'), icon: render.renderIcon(Delete, { strokeWidth: 3.5 }) },
{ key: 'divider', type: 'divider' }, { key: 'divider', type: 'divider' },
{ {
@ -271,16 +266,16 @@ watch(
<redis-type-selector v-model:value="filterForm.type" @update:value="onSelectFilterType" /> <redis-type-selector v-model:value="filterForm.type" @update:value="onSelectFilterType" />
</template> </template>
</content-search-input> </content-search-input>
<icon-button
:disabled="loading"
:icon="Refresh"
border
size="18"
small
stroke-width="4"
t-tooltip="interface.reload"
@click="onReload" />
<n-button-group> <n-button-group>
<icon-button
:disabled="loading"
:icon="Refresh"
border
size="18"
small
stroke-width="4"
t-tooltip="interface.reload"
@click="onReload" />
<icon-button <icon-button
:disabled="loading" :disabled="loading"
:icon="Plus" :icon="Plus"
@ -290,18 +285,6 @@ watch(
stroke-width="4" stroke-width="4"
t-tooltip="interface.new_key" t-tooltip="interface.new_key"
@click="onAddKey" /> @click="onAddKey" />
<n-dropdown
:options="addOptions"
placement="bottom-end"
style="min-width: 130px"
trigger="click"
@select="onSelectOptions">
<n-button :focusable="false" size="small" style="padding: 0 3px">
<n-icon size="10">
<down :stroke-width="6" />
</n-icon>
</n-button>
</n-dropdown>
</n-button-group> </n-button-group>
</div> </div>

View File

@ -79,7 +79,7 @@
"rename_key": "Rename Key", "rename_key": "Rename Key",
"delete_key": "Delete Key", "delete_key": "Delete Key",
"batch_delete_key": "Batch Delete Keys", "batch_delete_key": "Batch Delete Keys",
"import_key": "Import Key", "import_key": "Import Key(s)",
"flush_db": "Flush Database", "flush_db": "Flush Database",
"check_mode": "Check Mode", "check_mode": "Check Mode",
"quit_check_mode": "Quit Check Mode", "quit_check_mode": "Quit Check Mode",