perf: add loading status to "redis type tag"
This commit is contained in:
Lykin
parent
116513917d
commit
5dd49a78dd
|
|
@ -3,6 +3,8 @@ import { computed } from 'vue'
|
|||
import { typesBgColor, typesColor, typesShortName } from '@/consts/support_redis_type.js'
|
||||
import Binary from '@/components/icons/Binary.vue'
|
||||
import { get, toUpper } from 'lodash'
|
||||
import { useThemeVars } from 'naive-ui'
|
||||
import Loading from '@/components/icons/Loading.vue'
|
||||
|
||||
const props = defineProps({
|
||||
type: {
|
||||
|
|
@ -20,21 +22,24 @@ const props = defineProps({
|
|||
},
|
||||
round: Boolean,
|
||||
inverse: Boolean,
|
||||
loading: Boolean,
|
||||
})
|
||||
|
||||
const themeVars = useThemeVars()
|
||||
|
||||
const fontColor = computed(() => {
|
||||
if (props.inverse) {
|
||||
return typesBgColor[props.type]
|
||||
return props.loading ? themeVars.value.tagColor : typesBgColor[props.type]
|
||||
} else {
|
||||
return typesColor[props.type]
|
||||
return props.loading ? themeVars.value.textColorBase : typesColor[props.type]
|
||||
}
|
||||
})
|
||||
|
||||
const backgroundColor = computed(() => {
|
||||
if (props.inverse) {
|
||||
return typesColor[props.type]
|
||||
return props.loading ? themeVars.value.textColorBase : typesColor[props.type]
|
||||
} else {
|
||||
return typesBgColor[props.type]
|
||||
return props.loading ? themeVars.value.tagColor : typesBgColor[props.type]
|
||||
}
|
||||
})
|
||||
|
||||
|
|
@ -49,6 +54,7 @@ const label = computed(() => {
|
|||
<template>
|
||||
<div
|
||||
v-if="props.point"
|
||||
:class="{ 'redis-type-tag-loading': props.loading }"
|
||||
:style="{
|
||||
backgroundColor: fontColor,
|
||||
width: Math.max(props.pointSize, 5) + 'px',
|
||||
|
|
@ -61,12 +67,17 @@ const label = computed(() => {
|
|||
'redis-type-tag-normal': !props.short && props.size !== 'small',
|
||||
'redis-type-tag-small': !props.short && props.size === 'small',
|
||||
'redis-type-tag-round': props.round,
|
||||
'redis-type-tag-loading': props.loading,
|
||||
}"
|
||||
:color="{ color: backgroundColor, textColor: fontColor }"
|
||||
:size="props.size"
|
||||
bordered
|
||||
strong>
|
||||
<b>{{ label }}</b>
|
||||
<b v-if="!props.loading">{{ label }}</b>
|
||||
<n-icon v-else-if="props.short" size="14">
|
||||
<loading stroke-width="4" />
|
||||
</n-icon>
|
||||
<b v-else>LOADING</b>
|
||||
<template #icon>
|
||||
<n-icon v-if="binaryKey" :component="Binary" size="18" />
|
||||
</template>
|
||||
|
|
@ -85,4 +96,20 @@ const label = computed(() => {
|
|||
.redis-type-tag-small {
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.redis-type-tag-loading {
|
||||
animation: fadeInOut 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes fadeInOut {
|
||||
0% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,51 @@
|
|||
<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="M7 4H41"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round" />
|
||||
<path
|
||||
:stroke-width="props.strokeWidth"
|
||||
d="M7 44H41"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round" />
|
||||
<path
|
||||
:stroke-width="props.strokeWidth"
|
||||
d="M11 44C13.6667 30.6611 18 23.9944 24 24C30 24.0056 34.3333 30.6722 37 44H11Z"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linejoin="round" />
|
||||
<path
|
||||
:stroke-width="props.strokeWidth"
|
||||
d="M37 4C34.3333 17.3389 30 24.0056 24 24C18 23.9944 13.6667 17.3278 11 4H37Z"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linejoin="round" />
|
||||
<path
|
||||
:stroke-width="props.strokeWidth"
|
||||
d="M21 15H27"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round" />
|
||||
<path
|
||||
:stroke-width="props.strokeWidth"
|
||||
d="M19 38H29"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round" />
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
@ -379,21 +379,14 @@ const renderPrefix = ({ option }) => {
|
|||
},
|
||||
)
|
||||
}
|
||||
if (isEmpty(option.redisType) || option.redisType === 'loading') {
|
||||
const loading = isEmpty(option.redisType) || option.redisType === 'loading'
|
||||
if (loading) {
|
||||
browserStore.loadKeyType({
|
||||
server: props.server,
|
||||
db: option.db,
|
||||
key: option.redisKey,
|
||||
keyCode: option.redisKeyCode,
|
||||
})
|
||||
// in loading
|
||||
return h(
|
||||
NIcon,
|
||||
{ size: 20 },
|
||||
{
|
||||
default: () => h(!!option.redisKeyCode ? Binary : Key),
|
||||
},
|
||||
)
|
||||
}
|
||||
switch (prefStore.keyIconType) {
|
||||
case typesIconStyle.FULL:
|
||||
|
|
@ -402,12 +395,14 @@ const renderPrefix = ({ option }) => {
|
|||
short: false,
|
||||
size: 'small',
|
||||
inverse: includes(selectedKeys.value, option.key),
|
||||
loading,
|
||||
})
|
||||
|
||||
case typesIconStyle.POINT:
|
||||
return h(RedisTypeTag, {
|
||||
type: toUpper(option.redisType),
|
||||
point: true,
|
||||
loading,
|
||||
})
|
||||
|
||||
case typesIconStyle.SHORT:
|
||||
|
|
@ -416,6 +411,7 @@ const renderPrefix = ({ option }) => {
|
|||
type: toUpper(option.redisType),
|
||||
short: true,
|
||||
size: 'small',
|
||||
loading,
|
||||
inverse: includes(selectedKeys.value, option.key),
|
||||
})
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue