perf(admin): 优化管理端页面切换性能与包体积
- 阶段 A: 增加 KeepAlive 缓存高频列表页,改用 onActivated 进行后台静默刷新,优化 tab 切换与 HomeEntry 闪屏 - 阶段 B: beforeEach 守卫在 TTL 内走同步快速路径,api 请求拦截器缓存 token 避免重复解析 JWT - 阶段 C: 引入 unplugin 插件启用 Element Plus 组件按需加载,清理 App.vue 中 960+ 行冗余暗色主题 CSS - i18n 拆包: 将三语文案包提取为独立懒加载 chunks,主包体积从 209KB 减少至 99KB (降低 53%)
This commit is contained in:
@@ -20,6 +20,26 @@ const { hasPermission, role: adminRole } = usePermissions();
|
||||
const { pendingCount: depositPendingCount, startDepositPendingPolling, stopDepositPendingPolling } =
|
||||
useDepositPendingCount();
|
||||
|
||||
/**
|
||||
* 列表页 KeepAlive 白名单(与各页面 defineOptions({ name }) 保持一致)。
|
||||
* 不含 Settlement/MatchEventEditor/MatchMarketsPage 等带参数的详情页,避免缓存污染。
|
||||
*/
|
||||
const keepAliveIncludes = [
|
||||
'AdminBets',
|
||||
'AdminCashback',
|
||||
'AdminMatches',
|
||||
'AdminMatchesOutrights',
|
||||
'AdminDepositOrders',
|
||||
'AdminStaffManage',
|
||||
'AdminFinanceLogs',
|
||||
'AdminAgentManager',
|
||||
'AdminContents',
|
||||
'AdminMediaLibrary',
|
||||
'AdminAudit',
|
||||
'AgentPlayers',
|
||||
'AgentBets',
|
||||
];
|
||||
|
||||
const canSeeDepositPending = computed(
|
||||
() => auth.isAdmin.value && hasPermission(AdminPerm.depositReview, AdminPerm.depositManage),
|
||||
);
|
||||
@@ -276,7 +296,11 @@ watch(() => route.path, () => {
|
||||
</div>
|
||||
</header>
|
||||
<main class="page-main">
|
||||
<RouterView />
|
||||
<RouterView v-slot="{ Component }">
|
||||
<KeepAlive :max="10" :include="keepAliveIncludes">
|
||||
<component :is="Component" />
|
||||
</KeepAlive>
|
||||
</RouterView>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user