perf(admin): 实现切页即时导航与列表 loading 壳
非阻塞 session 刷新、侧边栏 chunk 预取、KeepAlive 对齐,以及按 tab 延迟加载重型列表页。
This commit is contained in:
27
apps/admin/src/composables/useStaleList.ts
Normal file
27
apps/admin/src/composables/useStaleList.ts
Normal file
@@ -0,0 +1,27 @@
|
||||
import { ref, onMounted, onActivated } from 'vue';
|
||||
|
||||
/**
|
||||
* 列表页 mount / KeepAlive activated 生命周期:有缓存则后台静默刷新,无缓存则显示 loading。
|
||||
*/
|
||||
export function useStaleListLifecycle(
|
||||
hasData: () => boolean,
|
||||
loadFn: () => void | Promise<void>,
|
||||
) {
|
||||
const loading = ref(false);
|
||||
|
||||
async function runLoad(showSpinner: boolean) {
|
||||
if (showSpinner) loading.value = true;
|
||||
try {
|
||||
await loadFn();
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => void runLoad(!hasData()));
|
||||
onActivated(() => {
|
||||
if (hasData()) void runLoad(false);
|
||||
});
|
||||
|
||||
return { loading, runLoad };
|
||||
}
|
||||
Reference in New Issue
Block a user