# P7→NS1/RNS1 缺失项 #6：收入与业绩档位卡片的视觉设计

## 简要结论
- 状态：✅ 已解决
- 风险等级：🟡 低
- 前端已完整实现收入卡片、档位卡片（当前/下一阶段）、升级提示、进度条组件的视觉设计。`perf-progress-bar` 和 `metric-card` 组件均已开发完成，WXSS 中包含完整的渐变、动画、布局样式。

## 详细审查

### 审查范围
- `apps/miniprogram/miniprogram/pages/performance/performance.wxml` — 收入卡片和档位卡片布局
- `apps/miniprogram/miniprogram/pages/performance/performance.wxss` — 视觉样式
- `apps/miniprogram/miniprogram/components/perf-progress-bar/` — 进度条组件
- `apps/miniprogram/miniprogram/components/metric-card/` — 指标卡片组件

### 发现

1. **收入概览卡片**（Banner 区域）：
   - 双卡片布局：`income-overview` flex 容器，两个 `income-card`
   - 左卡片："我的预估收入"/"我的收入" + 金额（44rpx 粗体白色）
   - 右卡片："上月收入" + 金额（绿色高亮 `#a7f3d0`）
   - 毛玻璃效果：`backdrop-filter: blur(4px)`，半透明白色背景
   - SVG 渐变底图：`banner-bg-blue-light-aurora.svg`

2. **档位卡片**（收入情况 Section）：
   - 当前档位：绿色渐变背景（`#f0fdf4 → #dcfce7`），绿色边框，绿色 badge
   - 下一阶段：黄色渐变背景（`#fefce8 → #fef9c3`），黄色边框，黄色 badge
   - 每个档位卡片展示：emoji 图标 + 档位标签 + 基础课费率 + 激励课费率
   - 费率展示：`{rate}元/h` 格式，带分隔线

3. **升级提示卡片**：
   - 蓝色渐变背景（`#eff6ff → #eef2ff`）
   - 左侧：⏱️ emoji + "距离下一阶段" + "需完成 X 小时"
   - 右侧：橙色渐变按钮 "到达即得 X元"

4. **perf-progress-bar 组件**：
   - 渐变填充条 + 高光动画 + 导火索火星效果
   - 支持动态刻度（`ticks` 数组从接口传入，不硬编码）
   - 档位高亮：`currentTier` 控制刻度高亮状态
   - 动画：`shine`（高光扫过）+ `spark`（火花粒子，6 个粒子）

5. **metric-card 组件**：
   - 通用指标卡片：标题 + 数值 + 单位 + 趋势标签
   - 趋势支持：up（绿色箭头）/ down（红色箭头）/ flat（横线）
   - 帮助图标：可选 `helpText`，点击触发 `helpTap` 事件
   - 空值处理：`null/undefined → '--'`

6. **前端仍使用 mock 数据**：
   - `performance.ts` 中 `loadData()` 使用 `setTimeout` + 空骨架数据
   - 注释标注 `// TODO: 替换为真实 API — 已清空为骨架项`
   - 视觉组件和布局已完成，但未接入真实 API

### 证据

```xml
<!-- performance.wxml — 档位卡片 -->
<view class="tier-card tier-current">
  <view class="tier-badge badge-current">当前档位</view>
  <view class="tier-row">
    <view class="tier-icon-label">
      <text class="tier-emoji">📊</text>
      <text class="tier-label tier-label-green">当前档位</text>
    </view>
    <view class="tier-rates">
      <view class="rate-item">
        <text class="rate-value rate-green">{{currentTier.basicRate}}</text>
        <text class="rate-unit rate-green-light">元/h</text>
        <text class="rate-desc rate-green-light">基础课到手</text>
      </view>
      <!-- ... 激励课费率 ... -->
    </view>
  </view>
</view>
```

```css
/* performance.wxss — 档位卡片样式 */
.tier-current {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border: 2rpx solid #86efac;
}
.tier-next {
  background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
  border: 2rpx solid #fde047;
}
.badge-current {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}
```

```typescript
// perf-progress-bar — 组件属性
properties: {
  filledPct: { type: Number, value: 0 },      // 进度百分比
  clampedSparkPct: { type: Number, value: 0 }, // 火星位置
  currentTier: { type: Number, value: 0 },     // 当前档位
  ticks: { type: Array, value: [] },           // 刻度数组（接口传入）
  shineRunning: { type: Boolean, value: false },
  sparkRunning: { type: Boolean, value: false },
}
```

### 建议（微调项）
- performance 页面尚未使用 `perf-progress-bar` 组件（WXML 中未引用），需在联调时集成
- performance 页面尚未使用 `metric-card` 组件，当前收入展示是内联实现
- 前端 mock 数据需替换为真实 API 调用（已有 TODO 标注）