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

frontend/src/components/dialogs/DeleteKeyDialog.vue

@@ -64,7 +64,7 @@ const resetAffected = () => {
     deleteForm.affectedKeys = []
 }
 
-const logLines = computed(() => {
+const keyLines = computed(() => {
     return map(deleteForm.affectedKeys, (k) => decodeRedisKey(k))
 })
 
@@ -126,12 +126,13 @@ const onClose = () => {
                     embedded
                     size="small">
                     <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-form>
         </n-spin>
@@ -152,7 +153,7 @@ const onClose = () => {
                     :disabled="isEmpty(deleteForm.affectedKeys)"
                     :focusable="false"
                     :loading="loading"
-                    type="error"
+                    type="primary"
                     @click="onConfirmDelete">
                     {{ $t('dialogue.key.confirm_delete_key', { num: size(deleteForm.affectedKeys) }) }}
                 </n-button>
@@ -161,4 +162,15 @@ const onClose = () => {
     </n-modal>
 </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>

frontend/src/components/dialogs/ExportKeyDialog.vue

@@ -95,7 +95,13 @@ const onClose = () => {
                     :title="$t('dialogue.key.affected_key') + `(${size(exportKeyForm.keys)})`"
                     embedded
                     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-form>
         </n-spin>
@@ -118,4 +124,15 @@ const onClose = () => {
     </n-modal>
 </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>

frontend/src/components/dialogs/SetTtlDialog.vue

@@ -3,7 +3,7 @@ import { computed, reactive, ref, watchEffect } from 'vue'
 import useDialog from 'stores/dialog'
 import useBrowserStore from 'stores/browser.js'
 import { useI18n } from 'vue-i18n'
-import { isEmpty } from 'lodash'
+import { isEmpty, size } from 'lodash'
 import TtlInput from '@/components/common/TtlInput.vue'
 
 const ttlForm = reactive({
@@ -42,6 +42,14 @@ const isBatchAction = computed(() => {
     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 quickOption = computed(() => [
     { 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-text="$t('common.save')"
         :show-icon="false"
-        :title="
+        :title="title"
-            isBatchAction ? $t('dialogue.ttl.title_batch', { count: size(ttlForm.keys) }) : $t('dialogue.ttl.title')
-        "
         preset="dialog"
         transform-origin="center">
         <n-form :model="ttlForm" :show-require-mark="false" label-placement="top">