feat: the browser pane is now set to display only a single database
feat: add search input in browser pane
This commit is contained in:
Lykin
parent
8201004478
commit
e2f33af1c7
|
|
@ -390,7 +390,20 @@ func (b *browserService) ServerInfo(name string) (resp types.JSResp) {
|
|||
// @param path contain connection name and db name
|
||||
func (b *browserService) OpenDatabase(connName string, db int, match string, keyType string) (resp types.JSResp) {
|
||||
b.setClientCursor(connName, db, 0)
|
||||
return b.LoadNextKeys(connName, db, match, keyType)
|
||||
|
||||
item, err := b.getRedisClient(connName, db)
|
||||
if err != nil {
|
||||
resp.Msg = err.Error()
|
||||
return
|
||||
}
|
||||
client, ctx := item.client, item.ctx
|
||||
maxKeys := b.loadDBSize(ctx, client)
|
||||
|
||||
resp.Success = true
|
||||
resp.Data = map[string]any{
|
||||
"maxKeys": maxKeys,
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
// scan keys
|
||||
|
|
@ -433,6 +446,7 @@ func (b *browserService) scanKeys(ctx context.Context, client redis.UniversalCli
|
|||
// cluster mode
|
||||
var mutex sync.Mutex
|
||||
err = cluster.ForEachMaster(ctx, func(ctx context.Context, cli *redis.Client) error {
|
||||
// FIXME: BUG? can not fully load in cluster mode? maybe remove the shared "cursor"
|
||||
return scan(ctx, cli, func(k []any) {
|
||||
mutex.Lock()
|
||||
keys = append(keys, k...)
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@ const props = defineProps({
|
|||
disabled: Boolean,
|
||||
buttonStyle: [String, Object],
|
||||
buttonClass: [String, Object],
|
||||
small: Boolean,
|
||||
})
|
||||
|
||||
const hasTooltip = computed(() => {
|
||||
|
|
@ -42,6 +43,7 @@ const hasTooltip = computed(() => {
|
|||
:disabled="disabled"
|
||||
:focusable="false"
|
||||
:loading="loading"
|
||||
:size="small ? 'small' : ''"
|
||||
:style="props.buttonStyle"
|
||||
:text="!border"
|
||||
:type="type"
|
||||
|
|
@ -64,6 +66,7 @@ const hasTooltip = computed(() => {
|
|||
:disabled="disabled"
|
||||
:focusable="false"
|
||||
:loading="loading"
|
||||
:size="small ? 'small' : ''"
|
||||
:style="props.buttonStyle"
|
||||
:text="!border"
|
||||
:type="type"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,83 @@
|
|||
<script setup>
|
||||
import { computed, h } from 'vue'
|
||||
import { useThemeVars } from 'naive-ui'
|
||||
import { types, typesBgColor, typesColor } from '@/consts/support_redis_type.js'
|
||||
import { get, map, toUpper } from 'lodash'
|
||||
|
||||
const props = defineProps({
|
||||
value: {
|
||||
type: String,
|
||||
default: 'ALL',
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:value', 'select'])
|
||||
|
||||
const options = computed(() => {
|
||||
const opts = map(types, (v) => ({
|
||||
label: v,
|
||||
key: v,
|
||||
}))
|
||||
return [{ label: 'ALL', key: 'ALL' }, ...opts]
|
||||
})
|
||||
|
||||
const themeVars = useThemeVars()
|
||||
const renderIcon = (option) => {
|
||||
if (option.key === props.value) {
|
||||
const backgroundColor = get(typesColor, option.key, themeVars.value.textColor3)
|
||||
return h('div', { style: { borderRadius: '999px', width: '10px', height: '10px', backgroundColor } }, '')
|
||||
}
|
||||
}
|
||||
|
||||
const renderLabel = (option) => {
|
||||
const color = get(typesColor, option.key, '')
|
||||
return h('div', { style: { color, fontWeight: '450' } }, option.label)
|
||||
}
|
||||
|
||||
const fontColor = computed(() => {
|
||||
return get(typesColor, props.value, '')
|
||||
})
|
||||
|
||||
const backgroundColor = computed(() => {
|
||||
return get(typesBgColor, props.value, '')
|
||||
})
|
||||
|
||||
const displayValue = computed(() => {
|
||||
return get(types, toUpper(props.value), 'ALL')
|
||||
})
|
||||
|
||||
const handleSelect = (select) => {
|
||||
if (props.value !== select) {
|
||||
emit('update:value', select)
|
||||
emit('select', select)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<n-dropdown
|
||||
:options="options"
|
||||
:render-icon="renderIcon"
|
||||
:render-label="renderLabel"
|
||||
show-arrow
|
||||
@select="handleSelect">
|
||||
<n-tag
|
||||
:bordered="true"
|
||||
:color="{ color: backgroundColor, textColor: fontColor }"
|
||||
class="redis-tag"
|
||||
size="medium"
|
||||
strong>
|
||||
{{ displayValue }}
|
||||
</n-tag>
|
||||
</n-dropdown>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.redis-tag {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
:deep(.dropdown-type-item) {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -12,7 +12,6 @@ const props = defineProps({
|
|||
default: 'STRING',
|
||||
},
|
||||
binaryKey: Boolean,
|
||||
bordered: Boolean,
|
||||
size: String,
|
||||
})
|
||||
|
||||
|
|
@ -27,9 +26,8 @@ const backgroundColor = computed(() => {
|
|||
|
||||
<template>
|
||||
<n-tag
|
||||
:bordered="props.bordered"
|
||||
:class="[props.size === 'small' ? 'redis-type-tag-small' : 'redis-type-tag']"
|
||||
:color="{ color: backgroundColor, borderColor: fontColor, textColor: fontColor }"
|
||||
:color="{ color: backgroundColor, textColor: fontColor }"
|
||||
:size="props.size"
|
||||
strong>
|
||||
{{ props.type }}
|
||||
|
|
|
|||
|
|
@ -3,12 +3,21 @@ import { computed, reactive } from 'vue'
|
|||
import { debounce, isEmpty, trim } from 'lodash'
|
||||
import { NButton, NInput } from 'naive-ui'
|
||||
import IconButton from '@/components/common/IconButton.vue'
|
||||
import Help from '@/components/icons/Help.vue'
|
||||
|
||||
const props = defineProps({
|
||||
fullSearchIcon: {
|
||||
type: [String, Object],
|
||||
default: null,
|
||||
},
|
||||
debounceWait: {
|
||||
type: Number,
|
||||
default: 500,
|
||||
},
|
||||
small: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits(['filterChanged', 'matchChanged'])
|
||||
|
|
@ -42,7 +51,13 @@ const onFullSearch = () => {
|
|||
const _onInput = () => {
|
||||
emit('filterChanged', inputData.filter)
|
||||
}
|
||||
const onInput = debounce(_onInput, 500, { leading: true, trailing: true })
|
||||
const onInput = debounce(_onInput, props.debounceWait, { leading: true, trailing: true })
|
||||
|
||||
const onKeyup = (evt) => {
|
||||
if (evt.key === 'Enter') {
|
||||
onFullSearch()
|
||||
}
|
||||
}
|
||||
|
||||
const onClearFilter = () => {
|
||||
inputData.filter = ''
|
||||
|
|
@ -67,13 +82,17 @@ defineExpose({
|
|||
<template>
|
||||
<n-input-group>
|
||||
<slot name="prepend" />
|
||||
|
||||
<n-input
|
||||
v-model:value="inputData.filter"
|
||||
:placeholder="$t('interface.filter')"
|
||||
:size="props.small ? 'small' : ''"
|
||||
clearable
|
||||
@clear="onClearFilter"
|
||||
@input="onInput">
|
||||
@input="onInput"
|
||||
@keyup.enter="onKeyup">
|
||||
<template #prefix>
|
||||
<slot name="prefix" />
|
||||
<n-tooltip v-if="hasMatch">
|
||||
<template #trigger>
|
||||
<n-tag closable size="small" @close="onClearMatch">
|
||||
|
|
@ -83,12 +102,25 @@ defineExpose({
|
|||
{{ $t('interface.full_search_result', { pattern: inputData.match }) }}
|
||||
</n-tooltip>
|
||||
</template>
|
||||
<template #suffix>
|
||||
<n-tooltip trigger="hover">
|
||||
<template #trigger>
|
||||
<n-icon :component="Help" />
|
||||
</template>
|
||||
<div class="text-block" style="max-width: 600px">
|
||||
{{ $t('dialogue.filter.filter_pattern_tip') }}
|
||||
</div>
|
||||
</n-tooltip>
|
||||
</template>
|
||||
</n-input>
|
||||
|
||||
<icon-button
|
||||
v-if="props.fullSearchIcon"
|
||||
:disabled="hasMatch && !hasFilter"
|
||||
:icon="props.fullSearchIcon"
|
||||
:size="small ? 16 : 20"
|
||||
border
|
||||
small
|
||||
t-tooltip="interface.full_search"
|
||||
@click="onFullSearch" />
|
||||
<n-button v-else :disabled="hasMatch && !hasFilter" :focusable="false" @click="onFullSearch">
|
||||
|
|
|
|||
|
|
@ -40,11 +40,7 @@ watch(
|
|||
)
|
||||
|
||||
const browserStore = useBrowserStore()
|
||||
const onConfirm = () => {
|
||||
const { server, db, type, pattern } = filterForm
|
||||
browserStore.setKeyFilter(server, db, pattern, type)
|
||||
browserStore.reopenDatabase(server, db)
|
||||
}
|
||||
const onConfirm = () => {}
|
||||
|
||||
const onClose = () => {
|
||||
dialogStore.closeKeyFilterDialog()
|
||||
|
|
|
|||
|
|
@ -109,6 +109,7 @@ const onAdd = async () => {
|
|||
$message.error(err)
|
||||
}
|
||||
})
|
||||
if (subFormRef.value?.validate) {
|
||||
await subFormRef.value?.validate((errs) => {
|
||||
const err = get(errs, '0.0.message')
|
||||
if (err != null) {
|
||||
|
|
@ -117,6 +118,7 @@ const onAdd = async () => {
|
|||
$message.error(i18n.t('dialogue.spec_field_required', { key: i18n.t('dialogue.field.element') }))
|
||||
}
|
||||
})
|
||||
}
|
||||
try {
|
||||
const { server, db, key, type, ttl } = newForm
|
||||
let { value } = newForm
|
||||
|
|
|
|||
|
|
@ -12,13 +12,13 @@ const props = defineProps({
|
|||
<path
|
||||
:stroke-width="props.strokeWidth"
|
||||
clip-rule="evenodd"
|
||||
d="M23.9999 29.0001L12 17.0001L19.9999 17.0001L19.9999 6.00011L27.9999 6.00011L27.9999 17.0001L35.9999 17.0001L23.9999 29.0001Z"
|
||||
d="M23.9999 31L12 19L19.9999 19L19.9999 8L27.9999 8L27.9999 19L35.9999 19L23.9999 31Z"
|
||||
fill="none"
|
||||
fill-rule="evenodd"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round" />
|
||||
<path :stroke-width="props.strokeWidth" d="M42 37L6 37" stroke="currentColor" stroke-linecap="round" />
|
||||
<path :stroke-width="props.strokeWidth" d="M42 38L6 38" stroke="currentColor" stroke-linecap="round" />
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -9,15 +9,9 @@ const props = defineProps({
|
|||
|
||||
<template>
|
||||
<svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
:stroke-width="strokeWidth"
|
||||
d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linejoin="round" />
|
||||
<circle cx="14" cy="24" fill="currentColor" r="3" />
|
||||
<circle cx="24" cy="24" fill="currentColor" r="3" />
|
||||
<circle cx="34" cy="24" fill="currentColor" r="3" />
|
||||
<circle :r="props.strokeWidth" cx="12" cy="24" fill="currentColor" />
|
||||
<circle :r="props.strokeWidth" cx="24" cy="24" fill="currentColor" />
|
||||
<circle :r="props.strokeWidth" cx="36" cy="24" fill="currentColor" />
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,27 @@
|
|||
<script setup>
|
||||
const props = defineProps({
|
||||
strokeWidth: {
|
||||
type: [Number, String],
|
||||
default: 4,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
:stroke-width="props.strokeWidth"
|
||||
d="M24.0605 10L24.0239 38"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round" />
|
||||
<path
|
||||
:stroke-width="props.strokeWidth"
|
||||
d="M10 24L38 24"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round" />
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
@ -17,13 +17,7 @@ const props = defineProps({
|
|||
stroke-linejoin="round" />
|
||||
<path
|
||||
:stroke-width="props.strokeWidth"
|
||||
d="M26.657 14.3431C25.2093 12.8954 23.2093 12 21.0001 12C18.791 12 16.791 12.8954 15.3433 14.3431"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round" />
|
||||
<path
|
||||
:stroke-width="props.strokeWidth"
|
||||
d="M33.2216 33.2217L41.7069 41.707"
|
||||
d="M33 33L42 42"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round" />
|
||||
|
|
|
|||
|
|
@ -3,54 +3,171 @@ import { useThemeVars } from 'naive-ui'
|
|||
import BrowserTree from './BrowserTree.vue'
|
||||
import IconButton from '@/components/common/IconButton.vue'
|
||||
import useTabStore from 'stores/tab.js'
|
||||
import { computed, reactive, ref } from 'vue'
|
||||
import { get } from 'lodash'
|
||||
import { computed, onMounted, reactive, ref, unref, watch } from 'vue'
|
||||
import { get, map } from 'lodash'
|
||||
import Refresh from '@/components/icons/Refresh.vue'
|
||||
import useDialogStore from 'stores/dialog.js'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { types } from '@/consts/support_redis_type.js'
|
||||
import Search from '@/components/icons/Search.vue'
|
||||
import Unlink from '@/components/icons/Unlink.vue'
|
||||
import Filter from '@/components/icons/Filter.vue'
|
||||
import ContentSearchInput from '@/components/content_value/ContentSearchInput.vue'
|
||||
import LoadAll from '@/components/icons/LoadAll.vue'
|
||||
import LoadList from '@/components/icons/LoadList.vue'
|
||||
import Delete from '@/components/icons/Delete.vue'
|
||||
import useBrowserStore from 'stores/browser.js'
|
||||
import { useRender } from '@/utils/render.js'
|
||||
import RedisTypeSelector from '@/components/common/RedisTypeSelector.vue'
|
||||
import { types } from '@/consts/support_redis_type.js'
|
||||
import Plus from '@/components/icons/Plus.vue'
|
||||
|
||||
const themeVars = useThemeVars()
|
||||
const i18n = useI18n()
|
||||
const dialogStore = useDialogStore()
|
||||
// const prefStore = usePreferencesStore()
|
||||
const tabStore = useTabStore()
|
||||
const browserStore = useBrowserStore()
|
||||
const render = useRender()
|
||||
const currentName = computed(() => get(tabStore.currentTab, 'name', ''))
|
||||
const browserTreeRef = ref(null)
|
||||
const loading = ref(false)
|
||||
const fullyLoaded = ref(false)
|
||||
|
||||
const onInfo = () => {
|
||||
browserTreeRef.value?.handleSelectContextMenu('server_info')
|
||||
const selectedDB = computed(() => {
|
||||
return browserStore.selectedDatabases[currentName.value] || 0
|
||||
})
|
||||
|
||||
const dbSelectOptions = computed(() => {
|
||||
const dblist = browserStore.getDBList(currentName.value)
|
||||
return map(dblist, (db) => {
|
||||
if (selectedDB.value === db.db) {
|
||||
return {
|
||||
value: db.db,
|
||||
label: `db${db.db} (${db.keys}/${db.maxKeys})`,
|
||||
}
|
||||
}
|
||||
return {
|
||||
value: db.db,
|
||||
label: `db${db.db} (${db.maxKeys})`,
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
const loadProgress = computed(() => {
|
||||
const db = browserStore.getDatabase(currentName.value, selectedDB.value)
|
||||
if (db.maxKeys <= 0) {
|
||||
return 100
|
||||
}
|
||||
return (db.keys * 100) / db.maxKeys
|
||||
})
|
||||
|
||||
const onReload = async () => {
|
||||
try {
|
||||
loading.value = true
|
||||
tabStore.setSelectedKeys(currentName.value)
|
||||
const db = selectedDB.value
|
||||
browserStore.closeDatabase(currentName.value, db)
|
||||
browserTreeRef.value?.resetExpandKey(currentName.value, db)
|
||||
|
||||
let matchType = unref(filterForm.type)
|
||||
if (!types.hasOwnProperty(matchType)) {
|
||||
matchType = ''
|
||||
}
|
||||
browserStore.setKeyFilter(currentName.value, {
|
||||
type: matchType,
|
||||
pattern: unref(filterForm.pattern),
|
||||
})
|
||||
await browserStore.openDatabase(currentName.value, db)
|
||||
fullyLoaded.value = await browserStore.loadMoreKeys(currentName.value, db)
|
||||
// $message.success(i18n.t('dialogue.reload_succ'))
|
||||
} catch (e) {
|
||||
console.warn(e)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const onAddKey = () => {
|
||||
dialogStore.openNewKeyDialog('', currentName.value, selectedDB.value)
|
||||
}
|
||||
|
||||
const onLoadMore = async () => {
|
||||
try {
|
||||
loading.value = true
|
||||
fullyLoaded.value = await browserStore.loadMoreKeys(currentName.value, selectedDB.value)
|
||||
} catch (e) {
|
||||
$message.error(e.message)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const onLoadAll = async () => {
|
||||
try {
|
||||
loading.value = true
|
||||
await browserStore.loadAllKeys(currentName.value, selectedDB.value)
|
||||
fullyLoaded.value = true
|
||||
} catch (e) {
|
||||
$message.error(e.message)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const onFlush = () => {
|
||||
dialogStore.openFlushDBDialog(currentName.value, selectedDB.value)
|
||||
}
|
||||
|
||||
const i18n = useI18n()
|
||||
const onDisconnect = () => {
|
||||
browserTreeRef.value?.handleSelectContextMenu('server_close')
|
||||
browserStore.closeConnection(currentName.value)
|
||||
}
|
||||
|
||||
const onRefresh = () => {
|
||||
browserTreeRef.value?.handleSelectContextMenu('server_reload')
|
||||
const handleSelectDB = async (db, prevDB) => {
|
||||
// watch 'browserStore.openedDB[currentName.value]' instead
|
||||
}
|
||||
|
||||
const filterForm = reactive({
|
||||
showFilter: false,
|
||||
type: '',
|
||||
pattern: '',
|
||||
filter: '',
|
||||
})
|
||||
const onSelectFilterType = (select) => {
|
||||
onReload()
|
||||
}
|
||||
|
||||
const filterTypeOptions = computed(() => {
|
||||
const options = Object.keys(types).map((t) => ({
|
||||
value: t,
|
||||
label: t,
|
||||
}))
|
||||
options.splice(0, 0, {
|
||||
value: '',
|
||||
label: i18n.t('common.all'),
|
||||
})
|
||||
return options
|
||||
})
|
||||
const onFilterInput = (val) => {
|
||||
filterForm.filter = val
|
||||
}
|
||||
|
||||
const onMatchInput = (matchVal, filterVal) => {
|
||||
filterForm.pattern = matchVal
|
||||
filterForm.filter = filterVal
|
||||
onReload()
|
||||
}
|
||||
|
||||
watch(
|
||||
() => browserStore.openedDB[currentName.value],
|
||||
async (db, prevDB) => {
|
||||
if (db === undefined) {
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
loading.value = true
|
||||
browserStore.closeDatabase(currentName.value, prevDB)
|
||||
browserStore.setKeyFilter(currentName.value, {})
|
||||
await browserStore.openDatabase(currentName.value, db)
|
||||
browserTreeRef.value?.resetExpandKey(currentName.value, db)
|
||||
fullyLoaded.value = await browserStore.loadMoreKeys(currentName.value, db)
|
||||
browserTreeRef.value?.refreshTree()
|
||||
} catch (e) {
|
||||
$message.error(e.message)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
onMounted(() => onReload())
|
||||
// forbid dynamic switch key view due to performance issues
|
||||
// const viewType = ref(0)
|
||||
// const onSwitchView = (selectView) => {
|
||||
|
|
@ -61,73 +178,110 @@ const filterTypeOptions = computed(() => {
|
|||
|
||||
<template>
|
||||
<div class="nav-pane-container flex-box-v">
|
||||
<browser-tree ref="browserTreeRef" :server="currentName" />
|
||||
s
|
||||
<!-- top function bar -->
|
||||
<div class="flex-box-h nav-pane-func">
|
||||
<content-search-input
|
||||
:debounce-wait="1000"
|
||||
:full-search-icon="Search"
|
||||
small
|
||||
@filter-changed="onFilterInput"
|
||||
@match-changed="onMatchInput">
|
||||
<template #prepend>
|
||||
<redis-type-selector v-model:value="filterForm.type" @update:value="onSelectFilterType" />
|
||||
</template>
|
||||
</content-search-input>
|
||||
<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>
|
||||
</n-button-group>
|
||||
</div>
|
||||
|
||||
<!-- loaded progress -->
|
||||
<n-progress
|
||||
:border-radius="0"
|
||||
:color="fullyLoaded ? '#0000' : themeVars.primaryColor"
|
||||
:height="2"
|
||||
:percentage="loadProgress"
|
||||
:processing="loading"
|
||||
:show-indicator="false"
|
||||
status="success"
|
||||
type="line" />
|
||||
|
||||
<!-- tree view -->
|
||||
<browser-tree
|
||||
ref="browserTreeRef"
|
||||
:full-loaded="fullyLoaded"
|
||||
:loading="loading && loadProgress <= 0"
|
||||
:pattern="filterForm.filter"
|
||||
:server="currentName" />
|
||||
<!-- bottom function bar -->
|
||||
<div class="nav-pane-bottom flex-box-v">
|
||||
<!-- <switch-button-->
|
||||
<!-- v-model:value="viewType"-->
|
||||
<!-- :icons="[TreeView, ListView]"-->
|
||||
<!-- :t-tooltips="['interface.tree_view', 'interface.list_view']"-->
|
||||
<!-- stroke-width="4"-->
|
||||
<!-- :stroke-width="3.5"-->
|
||||
<!-- unselect-stroke-width="3"-->
|
||||
<!-- @update:value="onSwitchView" />-->
|
||||
<!-- <icon-button :icon="Status" size="20" stroke-width="4" t-tooltip="interface.status" @click="onInfo" />-->
|
||||
<div
|
||||
v-show="filterForm.showFilter"
|
||||
class="flex-box-h nav-pane-func"
|
||||
style="padding-left: 3px; padding-right: 3px">
|
||||
<!-- <n-input-group v-show="filterForm.showFilter">-->
|
||||
<!-- <n-select-->
|
||||
<!-- v-model:value="filterForm.type"-->
|
||||
<!-- :consistent-menu-width="false"-->
|
||||
<!-- :options="filterTypeOptions"-->
|
||||
<!-- style="width: 120px" />-->
|
||||
<!-- <n-input clearable placeholder="">-->
|
||||
<!-- <template #prefix></template>-->
|
||||
<!-- </n-input>-->
|
||||
<!-- <n-button :focusable="false" ghost>-->
|
||||
<!-- <template #icon>-->
|
||||
<!-- <n-icon :component="Search" />-->
|
||||
<!-- </template>-->
|
||||
<!-- </n-button>-->
|
||||
<!-- </n-input-group>-->
|
||||
<content-search-input :full-search-icon="Search">
|
||||
<template #prepend>
|
||||
<n-select
|
||||
v-model:value="filterForm.type"
|
||||
:consistent-menu-width="false"
|
||||
:options="filterTypeOptions"
|
||||
style="width: 120px" />
|
||||
</template>
|
||||
</content-search-input>
|
||||
</div>
|
||||
<div class="flex-box-h nav-pane-func">
|
||||
<icon-button
|
||||
:button-class="{
|
||||
'filter-on': filterForm.showFilter,
|
||||
'filter-off': !filterForm.showFilter,
|
||||
'toggle-btn': true,
|
||||
'nav-pane-func-btn': true,
|
||||
}"
|
||||
:icon="Filter"
|
||||
size="20"
|
||||
stroke-width="4"
|
||||
t-tooltip="interface.filter_key"
|
||||
@click="filterForm.showFilter = !filterForm.showFilter" />
|
||||
<n-select
|
||||
v-model:value="browserStore.openedDB[currentName]"
|
||||
:consistent-menu-width="false"
|
||||
:filter="(pattern, option) => option.value.toString() === pattern"
|
||||
:options="dbSelectOptions"
|
||||
filterable
|
||||
size="small"
|
||||
style="min-width: 100px; max-width: 200px"
|
||||
@update:value="handleSelectDB" />
|
||||
<icon-button
|
||||
:button-class="['nav-pane-func-btn']"
|
||||
:icon="Refresh"
|
||||
:disabled="fullyLoaded"
|
||||
:icon="LoadList"
|
||||
:loading="loading"
|
||||
:stroke-width="3.5"
|
||||
size="20"
|
||||
stroke-width="4"
|
||||
t-tooltip="interface.reload"
|
||||
@click="onRefresh" />
|
||||
t-tooltip="interface.load_more"
|
||||
@click="onLoadMore" />
|
||||
<icon-button
|
||||
:button-class="['nav-pane-func-btn']"
|
||||
:disabled="fullyLoaded"
|
||||
:icon="LoadAll"
|
||||
:loading="loading"
|
||||
:stroke-width="3.5"
|
||||
size="20"
|
||||
t-tooltip="interface.load_all"
|
||||
@click="onLoadAll" />
|
||||
<div class="flex-item-expand" />
|
||||
<icon-button
|
||||
:button-class="['nav-pane-func-btn']"
|
||||
:icon="Unlink"
|
||||
:icon="Delete"
|
||||
:stroke-width="3.5"
|
||||
size="20"
|
||||
t-tooltip="interface.flush_db"
|
||||
@click="onFlush" />
|
||||
<icon-button
|
||||
:button-class="['nav-pane-func-btn']"
|
||||
:icon="Unlink"
|
||||
:stroke-width="3.5"
|
||||
size="20"
|
||||
stroke-width="4"
|
||||
t-tooltip="interface.disconnect"
|
||||
@click="onDisconnect" />
|
||||
</div>
|
||||
|
|
@ -136,21 +290,30 @@ const filterTypeOptions = computed(() => {
|
|||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/styles/style';
|
||||
|
||||
:deep(.toggle-btn) {
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
:deep(.filter-on) {
|
||||
border-color: v-bind('themeVars.borderColor');
|
||||
background-color: v-bind('themeVars.borderColor');
|
||||
border-color: v-bind('themeVars.iconColorDisabled');
|
||||
background-color: v-bind('themeVars.iconColorDisabled');
|
||||
}
|
||||
|
||||
:deep(.filter-off) {
|
||||
border-color: #0000;
|
||||
}
|
||||
|
||||
.nav-pane-top {
|
||||
//@include bottom-shadow(0.1);
|
||||
color: v-bind('themeVars.iconColor');
|
||||
border-bottom: v-bind('themeVars.borderColor') 1px solid;
|
||||
}
|
||||
|
||||
.nav-pane-bottom {
|
||||
@include top-shadow(0.1);
|
||||
color: v-bind('themeVars.iconColor');
|
||||
border-top: v-bind('themeVars.borderColor') 1px solid;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<script setup>
|
||||
import { computed, h, nextTick, onMounted, reactive, ref } from 'vue'
|
||||
import { computed, h, nextTick, reactive, ref } from 'vue'
|
||||
import { ConnectionType } from '@/consts/connection_type.js'
|
||||
import { NIcon, NSpace, NTag, useThemeVars } from 'naive-ui'
|
||||
import { NIcon, NSpace, useThemeVars } from 'naive-ui'
|
||||
import Key from '@/components/icons/Key.vue'
|
||||
import Binary from '@/components/icons/Binary.vue'
|
||||
import Database from '@/components/icons/Database.vue'
|
||||
|
|
@ -12,30 +12,29 @@ import CopyLink from '@/components/icons/CopyLink.vue'
|
|||
import Add from '@/components/icons/Add.vue'
|
||||
import Layer from '@/components/icons/Layer.vue'
|
||||
import Delete from '@/components/icons/Delete.vue'
|
||||
import Connect from '@/components/icons/Connect.vue'
|
||||
import useDialogStore from 'stores/dialog.js'
|
||||
import { ClipboardSetText } from 'wailsjs/runtime/runtime.js'
|
||||
import useConnectionStore from 'stores/connections.js'
|
||||
import Unlink from '@/components/icons/Unlink.vue'
|
||||
import Filter from '@/components/icons/Filter.vue'
|
||||
import Close from '@/components/icons/Close.vue'
|
||||
import { typesBgColor, typesColor } from '@/consts/support_redis_type.js'
|
||||
import useTabStore from 'stores/tab.js'
|
||||
import IconButton from '@/components/common/IconButton.vue'
|
||||
import { parseHexColor } from '@/utils/rgb.js'
|
||||
import LoadList from '@/components/icons/LoadList.vue'
|
||||
import LoadAll from '@/components/icons/LoadAll.vue'
|
||||
import useBrowserStore from 'stores/browser.js'
|
||||
import { useRender } from '@/utils/render.js'
|
||||
|
||||
const props = defineProps({
|
||||
server: String,
|
||||
keyView: String,
|
||||
loading: Boolean,
|
||||
pattern: String,
|
||||
fullLoaded: Boolean,
|
||||
})
|
||||
|
||||
const themeVars = useThemeVars()
|
||||
const render = useRender()
|
||||
const i18n = useI18n()
|
||||
const loading = ref(false)
|
||||
const loadingConnections = ref(false)
|
||||
const expandedKeys = ref([props.server])
|
||||
const connectionStore = useConnectionStore()
|
||||
const browserStore = useBrowserStore()
|
||||
|
|
@ -55,8 +54,9 @@ const selectedKeys = computed(() => {
|
|||
})
|
||||
|
||||
const data = computed(() => {
|
||||
const dbs = get(browserStore.databases, props.server, [])
|
||||
return dbs
|
||||
// const dbs = get(browserStore.databases, props.server, [])
|
||||
// return dbs
|
||||
return browserStore.getKeyList(props.server)
|
||||
})
|
||||
|
||||
const backgroundColor = computed(() => {
|
||||
|
|
@ -74,90 +74,44 @@ const contextMenuParam = reactive({
|
|||
y: 0,
|
||||
options: null,
|
||||
})
|
||||
const renderIcon = (icon) => {
|
||||
return () => {
|
||||
return h(NIcon, null, {
|
||||
default: () => h(icon),
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const menuOptions = {
|
||||
[ConnectionType.Server]: () => {
|
||||
return [
|
||||
{
|
||||
key: 'server_reload',
|
||||
label: i18n.t('interface.reload'),
|
||||
icon: renderIcon(Refresh),
|
||||
},
|
||||
{
|
||||
key: 'server_close',
|
||||
label: i18n.t('interface.disconnect'),
|
||||
icon: renderIcon(Unlink),
|
||||
},
|
||||
]
|
||||
},
|
||||
[ConnectionType.RedisDB]: ({ opened }) => {
|
||||
if (opened) {
|
||||
return [
|
||||
{
|
||||
key: 'db_reload',
|
||||
label: i18n.t('interface.reload'),
|
||||
icon: renderIcon(Refresh),
|
||||
},
|
||||
{
|
||||
key: 'db_newkey',
|
||||
label: i18n.t('interface.new_key'),
|
||||
icon: renderIcon(Add),
|
||||
},
|
||||
{
|
||||
key: 'db_filter',
|
||||
label: i18n.t('interface.filter_key'),
|
||||
icon: renderIcon(Filter),
|
||||
icon: render.renderIcon(Filter),
|
||||
},
|
||||
{
|
||||
type: 'divider',
|
||||
key: 'd1',
|
||||
},
|
||||
{
|
||||
key: 'db_flush',
|
||||
label: i18n.t('interface.flush_db'),
|
||||
icon: renderIcon(Delete),
|
||||
},
|
||||
{
|
||||
type: 'divider',
|
||||
key: 'd2',
|
||||
},
|
||||
{
|
||||
key: 'db_close',
|
||||
label: i18n.t('interface.close_db'),
|
||||
icon: renderIcon(Close),
|
||||
},
|
||||
]
|
||||
} else {
|
||||
return [
|
||||
{
|
||||
key: 'db_open',
|
||||
label: i18n.t('interface.open_db'),
|
||||
icon: renderIcon(Connect),
|
||||
},
|
||||
]
|
||||
return []
|
||||
}
|
||||
},
|
||||
[ConnectionType.RedisKey]: () => [
|
||||
// {
|
||||
// key: 'key_reload',
|
||||
// label: i18n.t('interface.reload'),
|
||||
// icon: renderIcon(Refresh),
|
||||
// icon: render.renderIcon(Refresh),
|
||||
// },
|
||||
{
|
||||
key: 'key_newkey',
|
||||
label: i18n.t('interface.new_key'),
|
||||
icon: renderIcon(Add),
|
||||
icon: render.renderIcon(Add),
|
||||
},
|
||||
{
|
||||
key: 'key_copy',
|
||||
label: i18n.t('interface.copy_path'),
|
||||
icon: renderIcon(CopyLink),
|
||||
icon: render.renderIcon(CopyLink),
|
||||
},
|
||||
{
|
||||
type: 'divider',
|
||||
|
|
@ -166,19 +120,19 @@ const menuOptions = {
|
|||
{
|
||||
key: 'key_remove',
|
||||
label: i18n.t('interface.batch_delete_key'),
|
||||
icon: renderIcon(Delete),
|
||||
icon: render.renderIcon(Delete),
|
||||
},
|
||||
],
|
||||
[ConnectionType.RedisValue]: () => [
|
||||
{
|
||||
key: 'value_reload',
|
||||
label: i18n.t('interface.reload'),
|
||||
icon: renderIcon(Refresh),
|
||||
icon: render.renderIcon(Refresh),
|
||||
},
|
||||
{
|
||||
key: 'value_copy',
|
||||
label: i18n.t('interface.copy_key'),
|
||||
icon: renderIcon(CopyLink),
|
||||
icon: render.renderIcon(CopyLink),
|
||||
},
|
||||
{
|
||||
type: 'divider',
|
||||
|
|
@ -187,7 +141,7 @@ const menuOptions = {
|
|||
{
|
||||
key: 'value_remove',
|
||||
label: i18n.t('interface.remove_key'),
|
||||
icon: renderIcon(Delete),
|
||||
icon: render.renderIcon(Delete),
|
||||
},
|
||||
],
|
||||
}
|
||||
|
|
@ -196,15 +150,6 @@ const renderContextLabel = (option) => {
|
|||
return h('div', { class: 'context-menu-item' }, option.label)
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
// TODO: Show loading list status
|
||||
loadingConnections.value = true
|
||||
} finally {
|
||||
loadingConnections.value = false
|
||||
}
|
||||
})
|
||||
|
||||
const expandKey = (key) => {
|
||||
const idx = indexOf(expandedKeys.value, key)
|
||||
if (idx === -1) {
|
||||
|
|
@ -236,40 +181,11 @@ const handleSelectContextMenu = (key) => {
|
|||
const redisKey = rkc || rk
|
||||
const redisKeyName = !!rkc ? label : redisKey
|
||||
switch (key) {
|
||||
case 'server_info':
|
||||
tabStore.setSelectedKeys(props.server)
|
||||
onUpdateSelectedKeys()
|
||||
break
|
||||
case 'server_reload':
|
||||
expandedKeys.value = [props.server]
|
||||
tabStore.setSelectedKeys(props.server)
|
||||
browserStore.openConnection(props.server, true).then(() => {
|
||||
$message.success(i18n.t('dialogue.reload_succ'))
|
||||
})
|
||||
break
|
||||
case 'server_close':
|
||||
browserStore.closeConnection(props.server)
|
||||
break
|
||||
case 'db_open':
|
||||
nextTick().then(() => expandKey(nodeKey))
|
||||
break
|
||||
case 'db_reload':
|
||||
resetExpandKey(props.server, db)
|
||||
browserStore.reopenDatabase(props.server, db)
|
||||
break
|
||||
case 'db_close':
|
||||
resetExpandKey(props.server, db, true)
|
||||
browserStore.closeDatabase(props.server, db)
|
||||
break
|
||||
case 'db_flush':
|
||||
dialogStore.openFlushDBDialog(props.server, db)
|
||||
break
|
||||
case 'db_newkey':
|
||||
case 'key_newkey':
|
||||
dialogStore.openNewKeyDialog(redisKey, props.server, db)
|
||||
break
|
||||
case 'db_filter':
|
||||
const { match: pattern, type } = browserStore.getKeyFilter(props.server, db)
|
||||
const { match: pattern, type } = browserStore.getKeyFilter(props.server)
|
||||
dialogStore.openKeyFilterDialog(props.server, db, pattern, type)
|
||||
break
|
||||
case 'key_reload':
|
||||
|
|
@ -311,23 +227,6 @@ const handleSelectContextMenu = (key) => {
|
|||
$message.error(e.message)
|
||||
})
|
||||
break
|
||||
case 'db_loadmore':
|
||||
if (node != null && !!!node.loading && !!!node.fullLoaded) {
|
||||
node.loading = true
|
||||
browserStore
|
||||
.loadMoreKeys(props.server, db)
|
||||
.then((end) => {
|
||||
// fully loaded
|
||||
node.fullLoaded = end === true
|
||||
})
|
||||
.catch((e) => {
|
||||
$message.error(e.message)
|
||||
})
|
||||
.finally(() => {
|
||||
delete node.loading
|
||||
})
|
||||
}
|
||||
break
|
||||
case 'db_loadall':
|
||||
if (node != null && !!!node.loading) {
|
||||
node.loading = true
|
||||
|
|
@ -348,10 +247,6 @@ const handleSelectContextMenu = (key) => {
|
|||
}
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
handleSelectContextMenu,
|
||||
})
|
||||
|
||||
const onUpdateExpanded = (value, option, meta) => {
|
||||
expandedKeys.value = value
|
||||
if (!meta.node) {
|
||||
|
|
@ -445,61 +340,6 @@ const renderPrefix = ({ option }) => {
|
|||
// render tree item label
|
||||
const renderLabel = ({ option }) => {
|
||||
switch (option.type) {
|
||||
case ConnectionType.Server:
|
||||
return h('b', {}, { default: () => option.label })
|
||||
case ConnectionType.RedisDB:
|
||||
const { name: server, db, opened = false } = option
|
||||
let { match: matchPattern, type: typeFilter } = browserStore.getKeyFilter(server, db)
|
||||
const items = []
|
||||
if (opened) {
|
||||
items.push(`${option.label} (${option.keys || 0}/${Math.max(option.maxKeys || 0, option.keys || 0)})`)
|
||||
} else {
|
||||
items.push(`${option.label} (${Math.max(option.maxKeys || 0, option.keys || 0)})`)
|
||||
}
|
||||
// show filter tag after label
|
||||
// type filter tag
|
||||
if (!isEmpty(typeFilter)) {
|
||||
items.push(
|
||||
h(
|
||||
NTag,
|
||||
{
|
||||
size: 'small',
|
||||
closable: true,
|
||||
bordered: false,
|
||||
color: {
|
||||
color: typesBgColor[typeFilter],
|
||||
textColor: typesColor[typeFilter],
|
||||
},
|
||||
onClose: () => {
|
||||
// remove type filter
|
||||
browserStore.setKeyFilter(server, db, matchPattern)
|
||||
browserStore.reopenDatabase(server, db)
|
||||
},
|
||||
},
|
||||
{ default: () => typeFilter },
|
||||
),
|
||||
)
|
||||
}
|
||||
// match pattern tag
|
||||
if (!isEmpty(matchPattern) && matchPattern !== '*') {
|
||||
items.push(
|
||||
h(
|
||||
NTag,
|
||||
{
|
||||
bordered: false,
|
||||
closable: true,
|
||||
size: 'small',
|
||||
onClose: () => {
|
||||
// remove key match pattern
|
||||
browserStore.setKeyFilter(server, db, '*', typeFilter)
|
||||
browserStore.reopenDatabase(server, db)
|
||||
},
|
||||
},
|
||||
{ default: () => matchPattern },
|
||||
),
|
||||
)
|
||||
}
|
||||
return renderIconMenu(items)
|
||||
case ConnectionType.RedisKey:
|
||||
return `${option.label} (${option.keys || 0})`
|
||||
// case ConnectionType.RedisValue:
|
||||
|
|
@ -528,24 +368,6 @@ const calcDBMenu = (opened, loading, end) => {
|
|||
const btns = []
|
||||
if (opened) {
|
||||
btns.push(
|
||||
h(IconButton, {
|
||||
tTooltip: 'interface.filter_key',
|
||||
icon: Filter,
|
||||
disabled: loading === true,
|
||||
onClick: () => handleSelectContextMenu('db_filter'),
|
||||
}),
|
||||
h(IconButton, {
|
||||
tTooltip: 'interface.reload',
|
||||
icon: Refresh,
|
||||
disabled: loading === true,
|
||||
onClick: () => handleSelectContextMenu('db_reload'),
|
||||
}),
|
||||
h(IconButton, {
|
||||
tTooltip: 'interface.new_key',
|
||||
icon: Add,
|
||||
disabled: loading === true,
|
||||
onClick: () => handleSelectContextMenu('db_newkey'),
|
||||
}),
|
||||
h(IconButton, {
|
||||
tTooltip: 'interface.load_more',
|
||||
icon: LoadList,
|
||||
|
|
@ -562,38 +384,24 @@ const calcDBMenu = (opened, loading, end) => {
|
|||
color: loading === true ? themeVars.value.primaryColor : '',
|
||||
onClick: () => handleSelectContextMenu('db_loadall'),
|
||||
}),
|
||||
h(IconButton, {
|
||||
tTooltip: 'interface.flush_db',
|
||||
icon: Delete,
|
||||
disabled: loading === true,
|
||||
onClick: () => handleSelectContextMenu('db_flush'),
|
||||
}),
|
||||
// h(IconButton, {
|
||||
// tTooltip: 'interface.more_action',
|
||||
// icon: More,
|
||||
// onClick: () => handleSelectContextMenu('more_action'),
|
||||
// }),
|
||||
)
|
||||
} else {
|
||||
btns.push(
|
||||
h(IconButton, {
|
||||
tTooltip: 'interface.open_db',
|
||||
icon: Connect,
|
||||
onClick: () => handleSelectContextMenu('db_open'),
|
||||
}),
|
||||
)
|
||||
}
|
||||
return btns
|
||||
}
|
||||
|
||||
const calcLayerMenu = (loading, end) => {
|
||||
const calcLayerMenu = (loading) => {
|
||||
return [
|
||||
// reload layer enable only full loaded
|
||||
h(IconButton, {
|
||||
tTooltip: end === true ? 'interface.reload' : 'interface.reload',
|
||||
tTooltip: props.fullLoaded ? 'interface.reload' : 'interface.reload',
|
||||
icon: Refresh,
|
||||
loading: loading === true,
|
||||
disabled: end !== true,
|
||||
disabled: !props.fullLoaded,
|
||||
onClick: () => handleSelectContextMenu('key_reload'),
|
||||
}),
|
||||
h(IconButton, {
|
||||
|
|
@ -626,8 +434,7 @@ const renderSuffix = ({ option }) => {
|
|||
case ConnectionType.RedisDB:
|
||||
return renderIconMenu(calcDBMenu(option.opened, option.loading, option.fullLoaded))
|
||||
case ConnectionType.RedisKey:
|
||||
const fullLoaded = browserStore.isFullLoaded(props.server, option.db)
|
||||
return renderIconMenu(calcLayerMenu(option.loading, fullLoaded))
|
||||
return renderIconMenu(calcLayerMenu(option.loading))
|
||||
case ConnectionType.RedisValue:
|
||||
return renderIconMenu(calcValueMenu())
|
||||
}
|
||||
|
|
@ -638,7 +445,7 @@ const renderSuffix = ({ option }) => {
|
|||
const nodeProps = ({ option }) => {
|
||||
return {
|
||||
onDblclick: () => {
|
||||
if (loading.value) {
|
||||
if (props.loading) {
|
||||
console.warn('TODO: alert to ignore double click when loading')
|
||||
return
|
||||
}
|
||||
|
|
@ -665,37 +472,29 @@ const nodeProps = ({ option }) => {
|
|||
}
|
||||
}
|
||||
|
||||
const onLoadTree = async (node) => {
|
||||
switch (node.type) {
|
||||
case ConnectionType.RedisDB:
|
||||
loading.value = true
|
||||
try {
|
||||
await browserStore.openDatabase(props.server, node.db)
|
||||
} catch (e) {
|
||||
$message.error(e.message)
|
||||
node.isLeaf = undefined
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
break
|
||||
// case ConnectionType.RedisKey:
|
||||
// console.warn('load redis key', node.redisKey)
|
||||
// node.keys = sumBy(node.children, 'keys')
|
||||
// break
|
||||
// case ConnectionType.RedisValue:
|
||||
// node.keys = 1
|
||||
// break
|
||||
}
|
||||
}
|
||||
|
||||
const handleOutsideContextMenu = () => {
|
||||
contextMenuParam.show = false
|
||||
}
|
||||
|
||||
// the NTree node may get incorrect height after change data
|
||||
// add key property to force refresh the component and then everything back to normal
|
||||
const treeKey = ref(0)
|
||||
defineExpose({
|
||||
handleSelectContextMenu,
|
||||
resetExpandKey,
|
||||
refreshTree: () => {
|
||||
treeKey.value = Date.now()
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :style="{ backgroundColor }" class="browser-tree-wrapper">
|
||||
<div :style="{ backgroundColor }" class="flex-box-v browser-tree-wrapper">
|
||||
<n-spin v-if="props.loading" class="fill-height" />
|
||||
<n-empty v-else-if="!props.loading && isEmpty(data)" class="empty-content" />
|
||||
<n-tree
|
||||
v-show="!props.loading && !isEmpty(data)"
|
||||
:key="treeKey"
|
||||
:animated="false"
|
||||
:block-line="true"
|
||||
:block-node="true"
|
||||
|
|
@ -703,14 +502,16 @@ const handleOutsideContextMenu = () => {
|
|||
:data="data"
|
||||
:expand-on-click="false"
|
||||
:expanded-keys="expandedKeys"
|
||||
:filter="(pattern, node) => includes(node.redisKey, pattern)"
|
||||
:node-props="nodeProps"
|
||||
:pattern="props.pattern"
|
||||
:render-label="renderLabel"
|
||||
:render-prefix="renderPrefix"
|
||||
:render-suffix="renderSuffix"
|
||||
:selected-keys="selectedKeys"
|
||||
:show-irrelevant-nodes="false"
|
||||
class="fill-height"
|
||||
virtual-scroll
|
||||
@load="onLoadTree"
|
||||
@update:selected-keys="onUpdateSelectedKeys"
|
||||
@update:expanded-keys="onUpdateExpanded" />
|
||||
<n-dropdown
|
||||
|
|
@ -727,6 +528,8 @@ const handleOutsideContextMenu = () => {
|
|||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/styles/content';
|
||||
|
||||
.browser-tree-wrapper {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
|
|
|||
|
|
@ -20,9 +20,11 @@ import { hexGammaCorrection, parseHexColor, toHexColor } from '@/utils/rgb.js'
|
|||
import IconButton from '@/components/common/IconButton.vue'
|
||||
import usePreferencesStore from 'stores/preferences.js'
|
||||
import useBrowserStore from 'stores/browser.js'
|
||||
import { useRender } from '@/utils/render.js'
|
||||
|
||||
const themeVars = useThemeVars()
|
||||
const i18n = useI18n()
|
||||
const render = useRender()
|
||||
const connectingServer = ref('')
|
||||
const connectionStore = useConnectionStore()
|
||||
const browserStore = useBrowserStore()
|
||||
|
|
@ -59,12 +61,12 @@ const menuOptions = {
|
|||
{
|
||||
key: 'group_rename',
|
||||
label: i18n.t('interface.rename_conn_group'),
|
||||
icon: renderIcon(Edit),
|
||||
icon: render.renderIcon(Edit),
|
||||
},
|
||||
{
|
||||
key: 'group_delete',
|
||||
label: i18n.t('interface.remove_conn_group'),
|
||||
icon: renderIcon(Delete),
|
||||
icon: render.renderIcon(Delete),
|
||||
},
|
||||
],
|
||||
[ConnectionType.Server]: ({ name }) => {
|
||||
|
|
@ -74,17 +76,17 @@ const menuOptions = {
|
|||
{
|
||||
key: 'server_close',
|
||||
label: i18n.t('interface.disconnect'),
|
||||
icon: renderIcon(Unlink),
|
||||
icon: render.renderIcon(Unlink),
|
||||
},
|
||||
{
|
||||
key: 'server_edit',
|
||||
label: i18n.t('interface.edit_conn'),
|
||||
icon: renderIcon(Config),
|
||||
icon: render.renderIcon(Config),
|
||||
},
|
||||
{
|
||||
key: 'server_dup',
|
||||
label: i18n.t('interface.dup_conn'),
|
||||
icon: renderIcon(CopyLink),
|
||||
icon: render.renderIcon(CopyLink),
|
||||
},
|
||||
{
|
||||
type: 'divider',
|
||||
|
|
@ -93,7 +95,7 @@ const menuOptions = {
|
|||
{
|
||||
key: 'server_remove',
|
||||
label: i18n.t('interface.remove_conn'),
|
||||
icon: renderIcon(Delete),
|
||||
icon: render.renderIcon(Delete),
|
||||
},
|
||||
]
|
||||
} else {
|
||||
|
|
@ -101,17 +103,17 @@ const menuOptions = {
|
|||
{
|
||||
key: 'server_open',
|
||||
label: i18n.t('interface.open_connection'),
|
||||
icon: renderIcon(Connect),
|
||||
icon: render.renderIcon(Connect),
|
||||
},
|
||||
{
|
||||
key: 'server_edit',
|
||||
label: i18n.t('interface.edit_conn'),
|
||||
icon: renderIcon(Config),
|
||||
icon: render.renderIcon(Config),
|
||||
},
|
||||
{
|
||||
key: 'server_dup',
|
||||
label: i18n.t('interface.dup_conn'),
|
||||
icon: renderIcon(CopyLink),
|
||||
icon: render.renderIcon(CopyLink),
|
||||
},
|
||||
{
|
||||
type: 'divider',
|
||||
|
|
@ -120,7 +122,7 @@ const menuOptions = {
|
|||
{
|
||||
key: 'server_remove',
|
||||
label: i18n.t('interface.remove_conn'),
|
||||
icon: renderIcon(Delete),
|
||||
icon: render.renderIcon(Delete),
|
||||
},
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -255,7 +255,7 @@
|
|||
"filter": {
|
||||
"set_key_filter": "Set Key Filter",
|
||||
"filter_pattern": "Pattern",
|
||||
"filter_pattern_tip": "prefix_*: Matches key names starting with \"prefix_\".\n*_suffix: Matches key names ending with \"_suffix\".\n*pattern*: Matches key names containing \"pattern\".\nprefix_??: Matches key names starting with \"prefix_\" followed by any two characters.\n*abc*: Matches key names containing \"abc\" at any position."
|
||||
"filter_pattern_tip": "* : Matches zero or more characters. For example, 'key*' matches all keys starting with 'key'.\n? : Matches a single character. For example, 'key?' matches 'key1', 'key2'.\n[] : Matches a single character within the specified range. For example, 'key[1-3]' matches keys like 'key1', 'key2', 'key3'.\n\\ : Escape character. To match *, ?, [, or ], use the backslash '\\' for escaping."
|
||||
},
|
||||
"ttl": {
|
||||
"title": "Set Key TTL"
|
||||
|
|
|
|||
|
|
@ -246,8 +246,7 @@
|
|||
},
|
||||
"filter": {
|
||||
"set_key_filter": "Definir Filtro de Chave",
|
||||
"filter_pattern": "Padrão",
|
||||
"filter_pattern_tip": "prefixo_*: Corresponde a nomes de chaves que começam com \"prefixo_\".\n*_sufixo: Corresponde a nomes de chaves que terminam com \"_sufixo\".\n*padrão*: Corresponde a nomes de chaves que contêm \"padrão\".\nprefixo_??: Corresponde a nomes de chaves que começam com \"prefixo_\" seguido por dois caracteres.\n*abc*: Corresponde a nomes de chaves que contêm \"abc\" em qualquer posição."
|
||||
"filter_pattern": "Padrão"
|
||||
},
|
||||
"ttl": {
|
||||
"title": "Definir TTL da Chave"
|
||||
|
|
|
|||
|
|
@ -254,7 +254,7 @@
|
|||
"filter": {
|
||||
"set_key_filter": "设置键过滤器",
|
||||
"filter_pattern": "过滤表达式",
|
||||
"filter_pattern_tip": "prefix_*：匹配以\"prefix_\"开头的键名\n*_suffix：匹配以\"_suffix\"结尾的键名\n*pattern*：匹配包含\"pattern\"的键名\nprefix_??：匹配以\"prefix_\"开头后跟两个任意字符的键名\n*abc*：匹配包含\"abc\"的任意位置的键名"
|
||||
"filter_pattern_tip": "*：匹配零个或多个字符。例如：\"key*\"匹配到以\"key\"开头的所有键\n?：匹配单个字符。例如：\"key?\"匹配\"key1\"、\"key2\"\n[ ]：匹配指定范围内的单个字符。例如：\"key[1-3]\"可以匹配类似于 \"key1\"、\"key2\"、\"key3\" 的键\n\\：转义字符。如果想要匹配 *、?、[、或]，需要使用反斜杠\"\\\"进行转义"
|
||||
},
|
||||
"ttl": {
|
||||
"title": "设置键存活时间"
|
||||
|
|
|
|||
|
|
@ -50,9 +50,9 @@ import { decodeRedisKey, nativeRedisKey } from '@/utils/key_convert.js'
|
|||
import { BrowserTabType } from '@/consts/browser_tab_type.js'
|
||||
import { KeyViewType } from '@/consts/key_view_type.js'
|
||||
import { ConnectionType } from '@/consts/connection_type.js'
|
||||
import { types } from '@/consts/support_redis_type.js'
|
||||
import useConnectionStore from 'stores/connections.js'
|
||||
import { decodeTypes, formatTypes } from '@/consts/value_view_type.js'
|
||||
import { isRedisGlob } from '@/utils/glob_pattern.js'
|
||||
|
||||
const useBrowserStore = defineStore('browser', {
|
||||
/**
|
||||
|
|
@ -70,8 +70,18 @@ const useBrowserStore = defineStore('browser', {
|
|||
* @property {boolean} [opened] - redis db is opened, type == ConnectionType.RedisDB only
|
||||
* @property {boolean} [expanded] - current node is expanded
|
||||
* @property {DatabaseItem[]} [children]
|
||||
* @property {boolean} [loading] - indicated that is loading children now
|
||||
* @property {boolean} [fullLoaded] - indicated that all children already loaded
|
||||
*/
|
||||
|
||||
/**
|
||||
* @typedef {Object} FilterItem
|
||||
* @property {string} pattern key pattern filter
|
||||
* @property {string} type type filter
|
||||
*/
|
||||
|
||||
/**
|
||||
* @typedef {Object} LoadingState
|
||||
* @property {string} loading indicated that is loading children now
|
||||
* @property {string} fullLoaded indicated that all children already loaded
|
||||
*/
|
||||
|
||||
/**
|
||||
|
|
@ -85,8 +95,7 @@ const useBrowserStore = defineStore('browser', {
|
|||
/**
|
||||
* @typedef {Object} BrowserState
|
||||
* @property {Object} serverStats
|
||||
* @property {Object.<string, string>} keyFilter key is 'server#db', 'server#-1' stores default filter pattern
|
||||
* @property {Object.<string, string>} typeFilter key is 'server#db'
|
||||
* @property {Object.<string, FilterItem>} filter
|
||||
* @property {Object.<string, KeyViewType>} viewType
|
||||
* @property {Object.<string, DatabaseItem[]>} databases
|
||||
* @property {Object.<string, Map<string, DatabaseItem>>} nodeMap key format likes 'server#db', children key format likes 'key#type'
|
||||
|
|
@ -98,17 +107,21 @@ const useBrowserStore = defineStore('browser', {
|
|||
*/
|
||||
state: () => ({
|
||||
serverStats: {}, // current server status info
|
||||
keyFilter: {}, // all key filters in opened connections group by 'server+db'
|
||||
typeFilter: {}, // all key type filters in opened connections group by 'server+db'
|
||||
filter: {}, // all filters in opened connections map by server and FilterItem
|
||||
loadingState: {}, // all loading state in opened connections map by server and LoadingState
|
||||
viewType: {}, // view type selection for all opened connections group by 'server'
|
||||
databases: {}, // all databases in opened connections group by 'server name'
|
||||
nodeMap: {}, // all nodes in opened connections group by 'server#db' and 'type/key'
|
||||
keySet: {}, // all keys set in opened connections group by 'server#db
|
||||
openedDB: {}, // opened database map by server and database index
|
||||
}),
|
||||
getters: {
|
||||
anyConnectionOpened() {
|
||||
return !isEmpty(this.databases)
|
||||
},
|
||||
selectedDatabases() {
|
||||
return this.openedDB || {}
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
/**
|
||||
|
|
@ -139,13 +152,22 @@ const useBrowserStore = defineStore('browser', {
|
|||
},
|
||||
|
||||
/**
|
||||
* get database by server name and index
|
||||
* @param {string} connName
|
||||
* get database info list
|
||||
* @param server
|
||||
* @return {DatabaseItem[]}
|
||||
*/
|
||||
getDBList(server) {
|
||||
return this.databases[server] || []
|
||||
},
|
||||
|
||||
/**
|
||||
* get database by server name and database index
|
||||
* @param {string} server
|
||||
* @param {number} db
|
||||
* @return {DatabaseItem|null}
|
||||
*/
|
||||
getDatabase(connName, db) {
|
||||
const dbs = this.databases[connName]
|
||||
getDatabase(server, db) {
|
||||
const dbs = this.databases[server]
|
||||
if (dbs != null) {
|
||||
const selDB = find(dbs, (item) => item.db === db)
|
||||
if (selDB != null) {
|
||||
|
|
@ -156,17 +178,24 @@ const useBrowserStore = defineStore('browser', {
|
|||
},
|
||||
|
||||
/**
|
||||
* get full loaded status of database
|
||||
* @param connName
|
||||
* @param db
|
||||
* @return {boolean}
|
||||
* get current selection database by server
|
||||
* @param server
|
||||
* @return {number}
|
||||
*/
|
||||
isFullLoaded(connName, db) {
|
||||
const selDB = this.getDatabase(connName, db)
|
||||
if (selDB != null) {
|
||||
return selDB.fullLoaded === true
|
||||
}
|
||||
return false
|
||||
getSelectedDB(server) {
|
||||
return this.selectedDatabases[server] || 0
|
||||
},
|
||||
|
||||
/**
|
||||
* get key list in current database
|
||||
* @param server
|
||||
* @return {DatabaseItem[]}
|
||||
*/
|
||||
getKeyList(server) {
|
||||
const db = this.getSelectedDB(server)
|
||||
const dbNodes = this.databases[server]
|
||||
const node = find(dbNodes, (n) => n.db === db)
|
||||
return node.children
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
@ -248,6 +277,7 @@ const useBrowserStore = defineStore('browser', {
|
|||
}
|
||||
this.databases[name] = dbs
|
||||
this.viewType[name] = view
|
||||
this.openedDB[name] = get(dbs, '0.db', 0)
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
@ -265,12 +295,11 @@ const useBrowserStore = defineStore('browser', {
|
|||
const dbs = this.databases[name]
|
||||
if (!isEmpty(dbs)) {
|
||||
for (const db of dbs) {
|
||||
this.removeKeyFilter(name, db.db)
|
||||
this._getNodeMap(name, db.db).clear()
|
||||
this._getKeySet(name, db.db).clear()
|
||||
}
|
||||
}
|
||||
this.removeKeyFilter(name, -1)
|
||||
delete this.filter[name]
|
||||
delete this.databases[name]
|
||||
delete this.serverStats[name]
|
||||
|
||||
|
|
@ -281,32 +310,32 @@ const useBrowserStore = defineStore('browser', {
|
|||
|
||||
/**
|
||||
* open database and load all keys
|
||||
* @param connName
|
||||
* @param server
|
||||
* @param db
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
async openDatabase(connName, db) {
|
||||
const { match: filterPattern, type: filterType } = this.getKeyFilter(connName, db)
|
||||
const { data, success, msg } = await OpenDatabase(connName, db, filterPattern, filterType)
|
||||
async openDatabase(server, db) {
|
||||
const { match: filterPattern, type: filterType } = this.getKeyFilter(server)
|
||||
const { data, success, msg } = await OpenDatabase(server, db, filterPattern, filterType)
|
||||
if (!success) {
|
||||
throw new Error(msg)
|
||||
}
|
||||
const { keys = [], end = false, maxKeys = 0 } = data
|
||||
const selDB = this.getDatabase(connName, db)
|
||||
const selDB = this.getDatabase(server, db)
|
||||
if (selDB == null) {
|
||||
return
|
||||
}
|
||||
|
||||
selDB.opened = true
|
||||
selDB.fullLoaded = end
|
||||
selDB.maxKeys = maxKeys
|
||||
set(this.loadingState, 'fullLoaded', end)
|
||||
if (isEmpty(keys)) {
|
||||
selDB.children = []
|
||||
} else {
|
||||
// append db node to current connection's children
|
||||
this._addKeyNodes(connName, db, keys)
|
||||
this._addKeyNodes(server, db, keys)
|
||||
}
|
||||
this._tidyNode(connName, db)
|
||||
this._tidyNode(server, db)
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
@ -325,24 +354,27 @@ const useBrowserStore = defineStore('browser', {
|
|||
|
||||
this._getNodeMap(connName, db).clear()
|
||||
this._getKeySet(connName, db).clear()
|
||||
delete this.filter[connName]
|
||||
},
|
||||
|
||||
/**
|
||||
* close database
|
||||
* @param connName
|
||||
* @param server
|
||||
* @param db
|
||||
*/
|
||||
closeDatabase(connName, db) {
|
||||
const selDB = this.getDatabase(connName, db)
|
||||
closeDatabase(server, db) {
|
||||
const selDB = this.getDatabase(server, db)
|
||||
if (selDB == null) {
|
||||
return
|
||||
}
|
||||
delete selDB.children
|
||||
selDB.isLeaf = false
|
||||
selDB.opened = false
|
||||
selDB.keys = 0
|
||||
|
||||
this._getNodeMap(connName, db).clear()
|
||||
this._getKeySet(connName, db).clear()
|
||||
this._getNodeMap(server, db).clear()
|
||||
this._getKeySet(server, db).clear()
|
||||
delete this.filter[server]
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
@ -547,7 +579,7 @@ const useBrowserStore = defineStore('browser', {
|
|||
let match = prefix
|
||||
if (isEmpty(match)) {
|
||||
match = '*'
|
||||
} else {
|
||||
} else if (!isRedisGlob(match)) {
|
||||
const separator = this._getSeparator(connName)
|
||||
if (!endsWith(prefix, separator + '*')) {
|
||||
match = prefix + separator + '*'
|
||||
|
|
@ -563,7 +595,7 @@ const useBrowserStore = defineStore('browser', {
|
|||
* @return {Promise<boolean>}
|
||||
*/
|
||||
async loadMoreKeys(connName, db) {
|
||||
const { match, type: keyType } = this.getKeyFilter(connName, db)
|
||||
const { match, type: keyType } = this.getKeyFilter(connName)
|
||||
const { keys, maxKeys, end } = await this._loadKeys(connName, db, match, keyType, false)
|
||||
this._setDBMaxKeys(connName, db, maxKeys)
|
||||
// remove current keys below prefix
|
||||
|
|
@ -1936,41 +1968,32 @@ const useBrowserStore = defineStore('browser', {
|
|||
/**
|
||||
* get key filter pattern and filter type
|
||||
* @param {string} server
|
||||
* @param {number} db
|
||||
* @returns {{match: string, type: string}}
|
||||
*/
|
||||
getKeyFilter(server, db) {
|
||||
let match, type
|
||||
const key = `${server}#${db}`
|
||||
if (!this.keyFilter.hasOwnProperty(key)) {
|
||||
// get default key filter from connection profile
|
||||
getKeyFilter(server) {
|
||||
let { pattern = '', type = '' } = this.filter[server] || {}
|
||||
if (isEmpty(pattern)) {
|
||||
// no custom match pattern, use default
|
||||
const conn = useConnectionStore()
|
||||
match = conn.getDefaultKeyFilter(server)
|
||||
} else {
|
||||
match = this.keyFilter[key] || '*'
|
||||
pattern = conn.getDefaultKeyFilter(server)
|
||||
}
|
||||
type = this.typeFilter[`${server}#${db}`] || ''
|
||||
return {
|
||||
match,
|
||||
match: pattern,
|
||||
type: toUpper(type),
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* set key filter
|
||||
*
|
||||
* @param {string} server
|
||||
* @param {number} db
|
||||
* @param {string} pattern
|
||||
* @param {string} [type]
|
||||
* @param {string} [pattern]
|
||||
*/
|
||||
setKeyFilter(server, db, pattern, type) {
|
||||
this.keyFilter[`${server}#${db}`] = pattern || '*'
|
||||
this.typeFilter[`${server}#${db}`] = types[toUpper(type)] || ''
|
||||
},
|
||||
|
||||
removeKeyFilter(server, db) {
|
||||
this.keyFilter[`${server}#${db}`] = '*'
|
||||
delete this.typeFilter[`${server}#${db}`]
|
||||
setKeyFilter(server, { type, pattern }) {
|
||||
const filter = this.filter[server] || {}
|
||||
filter.type = type === null ? filter.type : type
|
||||
filter.pattern = type === null ? filter.pattern : pattern
|
||||
this.filter[server] = filter
|
||||
},
|
||||
},
|
||||
})
|
||||
|
|
|
|||
|
|
@ -25,6 +25,14 @@ body {
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
@mixin bottom-shadow($transparent) {
|
||||
box-shadow: 0 5px 5px -5px rgba(0, 0, 0, $transparent);
|
||||
}
|
||||
|
||||
@mixin top-shadow($transparent) {
|
||||
box-shadow: 0 -5px 5px -5px rgba(0, 0, 0, $transparent);
|
||||
}
|
||||
|
||||
#app {
|
||||
height: 100vh;
|
||||
}
|
||||
|
|
@ -61,13 +69,9 @@ body {
|
|||
}
|
||||
|
||||
.ellipsis {
|
||||
white-space: nowrap; /* 禁止文本换行 */
|
||||
overflow: hidden; /* 隐藏超出容器的文本 */
|
||||
text-overflow: ellipsis; /* 使用省略号表示被截断的文本 */
|
||||
}
|
||||
|
||||
.unit-item {
|
||||
margin-left: 10px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.fill-height {
|
||||
|
|
@ -106,6 +110,7 @@ body {
|
|||
}
|
||||
|
||||
.value-footer {
|
||||
@include top-shadow(0.1);
|
||||
align-items: center;
|
||||
gap: 0;
|
||||
padding: 3px 10px 3px 10px;
|
||||
|
|
@ -132,6 +137,7 @@ body {
|
|||
|
||||
.nav-pane-func {
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 3px;
|
||||
padding: 3px 8px;
|
||||
min-height: 30px;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,13 @@
|
|||
import { includes, isEmpty } from 'lodash'
|
||||
|
||||
const REDIS_GLOB_CHAR = ['?', '*', '[', ']', '{', '}']
|
||||
export const isRedisGlob = (str) => {
|
||||
if (!isEmpty(str)) {
|
||||
for (const c of REDIS_GLOB_CHAR) {
|
||||
if (includes(str, c)) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
import { h } from 'vue'
|
||||
import { NIcon } from 'naive-ui'
|
||||
|
||||
export function useRender() {
|
||||
return {
|
||||
/**
|
||||
*
|
||||
* @param {string|Object} icon
|
||||
* @param {{}} [props]
|
||||
* @return {*}
|
||||
*/
|
||||
renderIcon: (icon, props = {}) => {
|
||||
return () => {
|
||||
return h(NIcon, null, {
|
||||
default: () => h(icon, props),
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue