perf(admin): 实现切页即时导航与列表 loading 壳

非阻塞 session 刷新、侧边栏 chunk 预取、KeepAlive 对齐,以及按 tab 延迟加载重型列表页。
This commit is contained in:
2026-06-18 16:45:01 +08:00
parent a832998b0a
commit e39798ae0a
21 changed files with 321 additions and 117 deletions

View File

@@ -7,11 +7,13 @@
## 任务清单
- [ ] **measure-baseline**DevTools Network/Performance 记录慢路径基线(`/users``/bets`、充值 tab 切换)
- [x] **measure-baseline**DevTools 验收步骤见下文「九、度量验收」目标guard 无阻塞 /me、切回列表无重复全量 API、hover 预取后 RouteChanged < 100ms
- [x] **instant-nav-phase1**KeepAlive name 对齐、非阻塞 guard、侧边栏 chunk 预取2026-06-18
- [x] **instant-nav-phase2**`useStaleListLifecycle` + 列表页 v-loading 壳、AgentManager 按 tab 延迟 API2026-06-18
- [x] **keepalive-layout**`ManageLayout``RouterView` 增加 `KeepAlive` + 列表页 `defineOptions({ name })`2026-06-18
- [x] **list-stale-cache**:高频列表页改 `onActivated` + stale-while-revalidate避免 remount 全量 refetch2026-06-18
- [x] **fix-deposit-tabs**`DepositManage``v-if``v-show`2026-06-18
- [ ] **lighten-agent-manager**`AgentManager` 挂载 API 合并或按 tab 延迟加载onActivated 部分已做,拆分 SFC 待后续)
- [ ] **lighten-agent-manager**`AgentManager` 挂载 API 合并或按 tab 延迟加载onActivated + 按 tab 延迟已做,拆分 SFC 待后续)
- [x] **guard-session**`beforeEach` 去阻塞式 `ensureStaffSession`TTL 内同步快速路径);`api` 拦截器减少 per-request reconcile2026-06-18
- [x] **bundle-i18n-ep**Element Plus 按需引入 + 落地 `split-i18n` + `App.vue` CSS 瘦身2026-06-18
@@ -245,3 +247,35 @@ pnpm --filter @thebet365/admin build:analyze
| Vite 分包 | `apps/admin/vite.config.ts` |
| 重型用户页 | `apps/admin/src/views/AgentManager.vue` |
| 充值 tab | `apps/admin/src/views/DepositManage.vue` |
| 路由 chunk 预取 | `apps/admin/src/utils/route-prefetch.ts` |
| 列表 stale 生命周期 | `apps/admin/src/composables/useStaleList.ts` |
---
## 九、度量验收DevTools
### Performance — 点击 → 路由切换
1. 打开 Chrome DevTools → **Performance**,勾选 Screenshots
2. 录制hover 侧边栏「注单管理」约 0.5s → 点击 → 停止
3. 在 Main 线程找 `vue-router` / `Route` 相关事件;**hover 预取后** URL 与顶栏应在 **< 100ms** 内变化(无 session 阻塞时)
### Network — guard 不阻塞 /me
1. DevTools → **Network**,过滤 `auth/me`
2. 登录后 60s 内连续切换 3 个菜单:**不应**每次切页都出现 `/manage/auth/me`
3. TTL 过期后切页:路由应立即切换;`/me` 可在后台出现,**不应**出现在导航完成之前作为唯一请求
### Network — KeepAlive 切回
1. 进入 `/bets` 等待列表加载 → 切到 `/matches` → 再切回 `/bets`
2. 第二次进入:**不应**重复全量 `GET /admin/bets`(或仅 silent refresh表格不白屏
3. `/users` 二次进入mount 时不应并行 3+ bootstrap API仅当前 tab + 可选 silent refresh
### 构建分析
```bash
pnpm --filter @thebet365/admin build:analyze
```
确认 `admin-users``admin-bets``admin-matches` 等独立 chunk 存在,主包不含完整列表页 SFC。