perf: replace component 'n-log' with 'n-virtual-list'

This commit is contained in:
Lykin 2024-01-08 17:38:54 +08:00
parent c497423711
commit 8c69ce7257
3 changed files with 50 additions and 15 deletions

View File

@ -64,7 +64,7 @@ const resetAffected = () => {
deleteForm.affectedKeys = [] deleteForm.affectedKeys = []
} }
const logLines = computed(() => { const keyLines = computed(() => {
return map(deleteForm.affectedKeys, (k) => decodeRedisKey(k)) return map(deleteForm.affectedKeys, (k) => decodeRedisKey(k))
}) })
@ -126,12 +126,13 @@ const onClose = () => {
embedded embedded
size="small"> size="small">
<n-skeleton v-if="deleteForm.loadingAffected" :repeat="10" text /> <n-skeleton v-if="deleteForm.loadingAffected" :repeat="10" text />
<n-log <n-virtual-list v-else :item-size="25" :items="keyLines" class="list-wrapper">
v-else <template #default="{ item }">
:line-height="1.5" <div class="line-item content-value">
:lines="logLines" {{ item }}
:rows="10" </div>
style="user-select: text; cursor: text" /> </template>
</n-virtual-list>
</n-card> </n-card>
</n-form> </n-form>
</n-spin> </n-spin>
@ -152,7 +153,7 @@ const onClose = () => {
:disabled="isEmpty(deleteForm.affectedKeys)" :disabled="isEmpty(deleteForm.affectedKeys)"
:focusable="false" :focusable="false"
:loading="loading" :loading="loading"
type="error" type="primary"
@click="onConfirmDelete"> @click="onConfirmDelete">
{{ $t('dialogue.key.confirm_delete_key', { num: size(deleteForm.affectedKeys) }) }} {{ $t('dialogue.key.confirm_delete_key', { num: size(deleteForm.affectedKeys) }) }}
</n-button> </n-button>
@ -161,4 +162,15 @@ const onClose = () => {
</n-modal> </n-modal>
</template> </template>
<style lang="scss" scoped></style> <style lang="scss" scoped>
.line-item {
line-height: 1.6;
}
.list-wrapper {
box-sizing: border-box;
max-height: 180px;
user-select: text;
cursor: text;
}
</style>

View File

@ -95,7 +95,13 @@ const onClose = () => {
:title="$t('dialogue.key.affected_key') + `(${size(exportKeyForm.keys)})`" :title="$t('dialogue.key.affected_key') + `(${size(exportKeyForm.keys)})`"
embedded embedded
size="small"> size="small">
<n-log :line-height="1.5" :lines="keyLines" :rows="10" style="user-select: text; cursor: text" /> <n-virtual-list :item-size="25" :items="keyLines" class="list-wrapper">
<template #default="{ item }">
<div class="line-item content-value">
{{ item }}
</div>
</template>
</n-virtual-list>
</n-card> </n-card>
</n-form> </n-form>
</n-spin> </n-spin>
@ -118,4 +124,15 @@ const onClose = () => {
</n-modal> </n-modal>
</template> </template>
<style lang="scss" scoped></style> <style lang="scss" scoped>
.line-item {
line-height: 1.6;
}
.list-wrapper {
box-sizing: border-box;
max-height: 180px;
user-select: text;
cursor: text;
}
</style>

View File

@ -3,7 +3,7 @@ import { computed, reactive, ref, watchEffect } from 'vue'
import useDialog from 'stores/dialog' import useDialog from 'stores/dialog'
import useBrowserStore from 'stores/browser.js' import useBrowserStore from 'stores/browser.js'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { isEmpty } from 'lodash' import { isEmpty, size } from 'lodash'
import TtlInput from '@/components/common/TtlInput.vue' import TtlInput from '@/components/common/TtlInput.vue'
const ttlForm = reactive({ const ttlForm = reactive({
@ -42,6 +42,14 @@ const isBatchAction = computed(() => {
return !isEmpty(ttlForm.keys) return !isEmpty(ttlForm.keys)
}) })
const title = computed(() => {
if (isBatchAction.value) {
return i18n.t('dialogue.ttl.title_batch', { count: size(ttlForm.keys) })
} else {
return i18n.t('dialogue.ttl.title')
}
})
const i18n = useI18n() const i18n = useI18n()
const quickOption = computed(() => [ const quickOption = computed(() => [
{ value: -1, unit: 1, label: i18n.t('interface.forever') }, { value: -1, unit: 1, label: i18n.t('interface.forever') },
@ -94,9 +102,7 @@ const onConfirm = async () => {
:positive-button-props="{ focusable: false, size: 'medium', loading: procssing }" :positive-button-props="{ focusable: false, size: 'medium', loading: procssing }"
:positive-text="$t('common.save')" :positive-text="$t('common.save')"
:show-icon="false" :show-icon="false"
:title=" :title="title"
isBatchAction ? $t('dialogue.ttl.title_batch', { count: size(ttlForm.keys) }) : $t('dialogue.ttl.title')
"
preset="dialog" preset="dialog"
transform-origin="center"> transform-origin="center">
<n-form :model="ttlForm" :show-require-mark="false" label-placement="top"> <n-form :model="ttlForm" :show-require-mark="false" label-placement="top">