perf: replace component 'n-log' with 'n-virtual-list'
This commit is contained in:
parent
c497423711
commit
8c69ce7257
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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">
|
||||||
|
|
Loading…
Reference in New Issue