Neo-ZQYY/docs/prd/Neo_Specs/review-audit/P7-NS1-08.md

P7→NS1/RNS1 缺失项 #8：本月/上月切换的交互细节

简要结论

• 状态：⚠️ 部分解决
• 风险等级：🟠 中
• performance-records 页面已实现月份切换（含 loading 状态和数据刷新），但 performance 主页面尚未实现月份切换功能（仅展示当月数据，使用 mock 骨架数据）。两个页面均无切换动画。

详细审查

审查范围

• apps/miniprogram/miniprogram/pages/performance/performance.ts — 绩效主页面逻辑
• apps/miniprogram/miniprogram/pages/performance/performance.wxml — 绩效主页面模板
• apps/miniprogram/miniprogram/pages/performance-records/performance-records.ts — 业绩明细页逻辑
• apps/miniprogram/miniprogram/pages/performance-records/performance-records.wxml — 业绩明细页模板
• apps/backend/app/routers/xcx_performance.py — 后端路由参数

发现

1. performance-records 页面月份切换已实现：

   • 有 switchMonth() 方法，支持 prev/next 方向切换
   • 有 canGoPrev/canGoNext 状态控制按钮可用性
   • 切换后调用 loadData() 重新请求数据
   • 有 pageState: 'loading' 状态展示 loading 浮层
   • 不能超过当前月（canGoNext 逻辑正确）

2. performance 主页面未实现月份切换：

   • loadData() 中硬编码 year = nowYear, month = nowMonth，仅展示当月
   • WXML 中无月份切换 UI 组件
   • 数据仍使用 setTimeout + mock 骨架数据，未接入真实 API
   • 有 TODO: 联调时从接口参数或页面参数获取 year/month 注释

3. 后端 API 已支持月份参数：PERF-1 和 PERF-2 均接受 year/month 查询参数。

4. 无切换动画：两个页面的月份切换均为即时替换，无过渡动画效果。

证据

performance.ts 中硬编码当月（Line 87-89）：

// TODO: 联调时从接口参数或页面参数获取 year/month
const year = nowYear
const month = nowMonth

performance-records.ts 中月份切换实现（switchMonth 方法）：

switchMonth(e: WechatMiniprogram.TouchEvent) {
    const direction = e.currentTarget.dataset.direction as 'prev' | 'next'
    let { currentYear, currentMonth } = this.data
    // ... 月份加减逻辑 ...
    this.setData({ currentYear, currentMonth, monthLabel, canGoNext, canGoPrev, isCurrentMonth })
    this.loadData()
}

performance-records.wxml 中月份切换 UI：

<view class="month-switcher">
    <view class="month-btn {{canGoPrev ? '' : 'month-btn-disabled'}}" data-direction="prev" bindtap="switchMonth">
        <t-icon name="chevron-left" size="32rpx" />
    </view>
    <text class="month-label">{{monthLabel}}</text>
    <view class="month-btn {{canGoNext ? '' : 'month-btn-disabled'}}" data-direction="next" bindtap="switchMonth">
        <t-icon name="chevron-right" size="32rpx" />
    </view>
</view>

建议

1. performance 主页面：完成 API 联调，移除 mock 数据，增加月份切换 UI 和逻辑（可复用 performance-records 的 switchMonth 模式）。
2. 切换动画：P7 AC2 提到的切换动画可作为低优先级优化，当前 loading 浮层已提供基本的状态反馈。
3. 数据刷新策略：切换月份时已有 loading → 请求 → 渲染的完整流程，满足基本需求。可考虑增加本地缓存避免重复请求已加载过的月份。