perf(admin): 实现切页即时导航与列表 loading 壳
非阻塞 session 刷新、侧边栏 chunk 预取、KeepAlive 对齐,以及按 tab 延迟加载重型列表页。
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, watch } from 'vue';
|
||||
import { ref, onMounted, onActivated, watch } from 'vue';
|
||||
import { useAdminLocale } from '../composables/useAdminLocale';
|
||||
import { useAuditLabels } from '../utils/audit-labels';
|
||||
import api from '../api';
|
||||
@@ -39,8 +39,12 @@ const total = ref(0);
|
||||
const page = ref(1);
|
||||
const pageSize = ref(10);
|
||||
const filterModule = ref('');
|
||||
const loading = ref(false);
|
||||
|
||||
onMounted(load);
|
||||
onMounted(() => void load());
|
||||
onActivated(() => {
|
||||
if (logs.value.length > 0) void load({ silent: true });
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.endpoint,
|
||||
@@ -50,7 +54,9 @@ watch(
|
||||
},
|
||||
);
|
||||
|
||||
async function load() {
|
||||
async function load(opts?: { silent?: boolean }) {
|
||||
if (!opts?.silent) loading.value = true;
|
||||
try {
|
||||
const { data } = await api.get(props.endpoint, {
|
||||
params: {
|
||||
page: page.value,
|
||||
@@ -62,6 +68,9 @@ async function load() {
|
||||
});
|
||||
logs.value = (data.data.items ?? []) as AuditRow[];
|
||||
total.value = data.data.total ?? 0;
|
||||
} finally {
|
||||
if (!opts?.silent) loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function onPageChange(p: number) {
|
||||
@@ -123,7 +132,7 @@ function operatorDisplay(row: AuditRow): string {
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<el-card class="data-card" shadow="never">
|
||||
<el-card v-loading="loading" class="data-card" shadow="never">
|
||||
<div class="table-wrap">
|
||||
<el-table :key="locale" :data="logs" stripe>
|
||||
<template #empty>
|
||||
|
||||
Reference in New Issue
Block a user