Neo-ZQYY/docs/prd/Neo_Specs/review-audit/P8-NS1-01.md

P8→NS1/RNS1 缺失项 #1：三看板 Tab 切换的缓存策略

简要结论

• 状态：⚠️ 部分解决
• 风险等级：🔴 高
• 三看板 Tab 切换已实现，但采用页面跳转而非组件切换，切换回来时不保持筛选状态和滚动位置。

详细审查

审查范围

• apps/miniprogram/miniprogram/app.json（tabBar 配置）
• apps/miniprogram/miniprogram/custom-tab-bar/index.ts（自定义 TabBar）
• apps/miniprogram/miniprogram/components/board-tab-bar/board-tab-bar.ts（看板内 Tab 组件）
• apps/miniprogram/miniprogram/pages/board-finance/board-finance.ts（财务看板 Tab 切换）
• apps/miniprogram/miniprogram/pages/board-coach/board-coach.ts（助教看板 Tab 切换）
• apps/miniprogram/miniprogram/pages/board-customer/board-customer.ts（客户看板 Tab 切换）

发现

1. Tab 切换方式：页面跳转，非组件内切换

   • app.json 中 tabBar 仅注册了 board-finance 为 tabBar 页面
   • board-customer 和 board-coach 是普通页面（非 tabBar 页面）
   • 从 board-finance 切换到其他看板使用 wx.navigateTo()（页面栈压入）
   • 从 board-coach/board-customer 切换到 board-finance 使用 wx.switchTab()（清空页面栈）

2. 筛选状态不保持

   • 每个看板页面的筛选状态（selectedSort、selectedDimension、selectedTime 等）存储在 Page data 中
   • 使用 wx.navigateTo 跳转时，离开的页面会被销毁（返回时重新 onLoad）
   • 使用 wx.switchTab 回到 board-finance 时，该页面会触发 onShow 但不会重新 onLoad（tabBar 页面有缓存）
   • 但 board-coach 和 board-customer 作为非 tabBar 页面，每次进入都会重新创建

3. 滚动位置不保持

   • 三个看板页面均无滚动位置保存/恢复逻辑
   • 页面重新加载后滚动位置归零

4. 切换动画

   • 未实现 P8 定义的切换动画
   • 使用微信默认的页面跳转动画（右滑进入/左滑返回）

证据

// board-finance.ts — 切换到其他看板
onTabChange(e: WechatMiniprogram.TouchEvent) {
    const tab = e.currentTarget.dataset.tab as string
    if (tab === 'customer') {
      wx.navigateTo({ url: '/pages/board-customer/board-customer' })
    } else if (tab === 'coach') {
      wx.navigateTo({ url: '/pages/board-coach/board-coach' })
    }
}

// board-coach.ts — 切换回财务看板
onTabChange(e: WechatMiniprogram.TouchEvent) {
    const tab = e.currentTarget.dataset.tab as string
    if (tab === 'finance') {
      wx.switchTab({ url: '/pages/board-finance/board-finance' })
    } else if (tab === 'customer') {
      wx.navigateTo({ url: '/pages/board-customer/board-customer' })
    }
}

// app.json — 仅 board-finance 是 tabBar 页面
"tabBar": {
    "custom": true,
    "list": [
      { "pagePath": "pages/task-list/task-list", "text": "任务" },
      { "pagePath": "pages/board-finance/board-finance", "text": "看板" },
      { "pagePath": "pages/my-profile/my-profile", "text": "我的" }
    ]
}

建议

1. 方案 A（推荐）：将筛选状态持久化到 getApp().globalData 或 wx.setStorageSync，页面 onLoad 时恢复
2. 方案 B：将三个看板合并为一个页面，使用 wx:if 或 hidden 切换内容区域，天然保持状态
3. 滚动位置可通过 onPageScroll 记录 + onLoad 时 wx.pageScrollTo 恢复
4. 切换动画可通过 CSS transition 在顶部 Tab 区域实现高亮滑动效果