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

fix: move "import data" to dropdown of add button

This commit is contained in:
Lykin 2024-01-02 15:43:50 +08:00
parent bb676b974a
commit 554b2b9f72
3 changed files with 97 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
frontend/src/components/icons/Checkbox.vue Normal file
View File

@ -0,0 +1,34 @@
<script setup>
const props = defineProps({
strokeWidth: {
type: [Number, String],
default: 3,
},
})
</script>
<template>
<svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#icon-25e88d94353e4f38)">
<path
d="M42 20V39C42 40.6569 40.6569 42 39 42H9C7.34315 42 6 40.6569 6 39V9C6 7.34315 7.34315 6 9 6H30"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="4" />
<path
d="M16 20L26 28L41 7"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="4" />
</g>
<defs>
<clipPath id="icon-25e88d94353e4f38">
<rect fill="currentColor" height="48" width="48" />
</clipPath>
</defs>
</svg>
</template>
<style lang="scss" scoped></style>

21
frontend/src/components/icons/Down.vue Normal file
View File

@ -0,0 +1,21 @@
<script setup>
const props = defineProps({
strokeWidth: {
type: [Number, String],
default: 3,
},
})
</script>
<template>
<svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<path
:stroke-width="props.strokeWidth"
d="M36 18L24 30L12 18"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round" />
</svg>
</template>
<style lang="scss" scoped></style>

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

@ -20,12 +20,13 @@ import RedisTypeSelector from '@/components/common/RedisTypeSelector.vue'
import { types } from '@/consts/support_redis_type.js'
import Plus from '@/components/icons/Plus.vue'
import useConnectionStore from 'stores/connections.js'
import ListCheckbox from '@/components/icons/ListCheckbox.vue'
import Close from '@/components/icons/Close.vue'
import More from '@/components/icons/More.vue'
import Export from '@/components/icons/Export.vue'
import { ConnectionType } from '@/consts/connection_type.js'
import Import from '@/components/icons/Import.vue'
import Down from '@/components/icons/Down.vue'
import Checkbox from '@/components/icons/Checkbox.vue'
const props = defineProps({
server: String,
@ -63,18 +64,20 @@ const dbSelectOptions = computed(() => {
})
})
const moreOptions = computed(() => {
return [
{ key: 'import', label: i18n.t('interface.import_key'), icon: render.renderIcon(Import, { strokeWidth: 3.5 }) },
{ key: 'divider', type: 'divider' },
{ key: 'flush', label: i18n.t('interface.flush_db'), icon: render.renderIcon(Delete, { strokeWidth: 3.5 }) },
{
key: 'disconnect',
label: i18n.t('interface.disconnect'),
icon: render.renderIcon(Unlink, { strokeWidth: 3.5 }),
},
]
})
const addOptions = computed(() => [
{ key: 'import', label: i18n.t('interface.import_key'), icon: render.renderIcon(Import, { strokeWidth: 3.5 }) },
])
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 }) },
{ key: 'divider', type: 'divider' },
{
key: 'disconnect',
label: i18n.t('interface.disconnect'),
icon: render.renderIcon(Unlink, { strokeWidth: 3.5 }),
},
])
const loadProgress = computed(() => {
const db = browserStore.getDatabase(props.server, props.db)
@ -258,27 +261,32 @@ onMounted(() => onReload())
<redis-type-selector v-model:value="filterForm.type" @update:value="onSelectFilterType" />
</template>
</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-tooltip :show-arrow="false">
<template #trigger>
<n-button :disabled="loading" :focusable="false" bordered size="small" @click="onReload">
<template #icon>
<n-icon :component="Refresh" size="18" />
</template>
</n-button>
</template>
{{ $t('interface.reload') }}
</n-tooltip>
<n-tooltip :show-arrow="false">
<template #trigger>
<n-button :disabled="loading" :focusable="false" bordered size="small" @click="onAddKey">
<template #icon>
<n-icon :component="Plus" size="18" />
</template>
</n-button>
</template>
{{ $t('interface.new_key') }}
</n-tooltip>
<icon-button
:disabled="loading"
:icon="Plus"
border
size="18"
small
stroke-width="4"
t-tooltip="interface.new_key"
@click="onAddKey" />
<n-dropdown :options="addOptions" placement="bottom-end" @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>
</div>
@ -343,7 +351,7 @@ onMounted(() => onReload())
<div class="flex-item-expand" style="min-width: 10px" />
<icon-button
:button-class="['nav-pane-func-btn']"
:icon="ListCheckbox"
:icon="Checkbox"
:stroke-width="3.5"
size="20"
t-tooltip="interface.check_mode"