perf(admin): 实现切页即时导航与列表 loading 壳
非阻塞 session 刷新、侧边栏 chunk 预取、KeepAlive 对齐,以及按 tab 延迟加载重型列表页。
This commit is contained in:
@@ -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 延迟 API(2026-06-18)
|
||||
- [x] **keepalive-layout**:`ManageLayout` 的 `RouterView` 增加 `KeepAlive` + 列表页 `defineOptions({ name })`(2026-06-18)
|
||||
- [x] **list-stale-cache**:高频列表页改 `onActivated` + stale-while-revalidate,避免 remount 全量 refetch(2026-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 reconcile(2026-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。
|
||||
|
||||
Reference in New Issue
Block a user