Files
Neo-ZQYY/docs/prd/Neo_Specs/review-audit/P7-NS1-06.md
Neo 6f8f12314f feat: 累积功能变更 — 聊天集成、租户管理、小程序更新、ETL 增强、迁移脚本
包含多个会话的累积代码变更:
- backend: AI 聊天服务、触发器调度、认证增强、WebSocket、调度器最小间隔
- admin-web: ETL 状态页、任务管理、调度配置、登录优化
- miniprogram: 看板页面、聊天集成、UI 组件、导航更新
- etl: DWS 新任务(finance_area_daily/board_cache)、连接器增强
- tenant-admin: 项目初始化
- db: 19 个迁移脚本(etl_feiqiu 11 + zqyy_app 8)
- packages/shared: 枚举和工具函数更新
- tools: 数据库工具、报表生成、健康检查
- docs: PRD/架构/部署/合约文档更新

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-04-06 00:03:48 +08:00

4.4 KiB
Raw Permalink Blame History

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

简要结论

  • 状态: 已解决
  • 风险等级:🟡
  • 前端已完整实现收入卡片、档位卡片(当前/下一阶段)、升级提示、进度条组件的视觉设计。perf-progress-barmetric-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.tsloadData() 使用 setTimeout + 空骨架数据
    • 注释标注 // TODO: 替换为真实 API — 已清空为骨架项
    • 视觉组件和布局已完成,但未接入真实 API

证据

<!-- 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>
/* 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%);
}
// 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 标注)