zishuo/tiny-rdm
1
0
Fork 0
mirror of https://github.com/tiny-craft/tiny-rdm.git synced 2025-10-31 02:26:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

perf: create "content-pane" component for each tab to maintain data and status easily

Browse Source
This commit is contained in:
tiny-craft
2023-10-27 10:50:22 +08:00
parent 54864fe7d5
commit 297286f150
9 changed files with 132 additions and 207 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
frontend/src/components/content_value/ContentValueWrapper.vue
View File

@@ -8,8 +8,10 @@ import ContentValueSet from '@/components/content_value/ContentValueSet.vue'
import ContentValueZset from '@/components/content_value/ContentValueZSet.vue'
import ContentValueStream from '@/components/content_value/ContentValueStream.vue'
import { useThemeVars } from 'naive-ui'
import useConnectionStore from 'stores/connections.js'
const themeVars = useThemeVars()
const connectionStore = useConnectionStore()
const props = defineProps({
blank: Boolean,
@@ -33,8 +35,6 @@ const props = defineProps({
},
})
const emit = defineEmits(['reload'])
const valueComponents = {
[redisTypes.STRING]: ContentValueString,
[redisTypes.HASH]: ContentValueHash,
@@ -43,29 +43,38 @@ const valueComponents = {
[redisTypes.ZSET]: ContentValueZset,
[redisTypes.STREAM]: ContentValueStream,
}
/**
* reload current selection key
* @returns {Promise<null>}
*/
const onReloadKey = async () => {
await connectionStore.loadKeyValue(props.name, props.db, props.key, props.viewAs)
}
</script>
<template>
<n-empty v-if="props.blank" :description="$t('interface.nonexist_tab_content')" class="empty-content">
<template #extra>
<n-button :focusable="false" @click="emit('reload')">{{ $t('interface.reload') }}</n-button>
<n-button :focusable="false" @click="onReloadKey">{{ $t('interface.reload') }}</n-button>
</template>
</n-empty>
<component
class="content-value-wrapper"
:is="valueComponents[props.type]"
v-else
:db="props.db"
:key-code="props.keyCode"
:key-path="props.keyPath"
:name="props.name"
:size="props.size"
:ttl="props.ttl"
:value="props.value"
:view-as="props.viewAs" />
<keep-alive v-else>
<component
:is="valueComponents[props.type]"
:db="props.db"
:key-code="props.keyCode"
:key-path="props.keyPath"
:name="props.name"
:size="props.size"
:ttl="props.ttl"
:value="props.value"
:view-as="props.viewAs"
class="content-value-wrapper" />
</keep-alive>
</template>
<style scoped lang="scss">
<style lang="scss" scoped>
.content-value-wrapper {
background-color: v-bind('themeVars.bodyColor');
}