bindbox-game/docs/实时奖品价格统计/CONSENSUS_实时奖品价格统计.md

实时奖品价格统计功能 - 技术共识文档

需求确认

基于ALIGNMENT文档，确认在创建活动向导的第三步"添加奖品"页面中，实现实时统计所有奖品总价格的功能。

技术实现方案

1. 现有代码分析

通过代码审查发现，当前已实现部分功能：

• ✅ 已有totalCost计算属性（第505-511行）
• ✅ 已有价格缓存机制priceCache（第481行）
• ✅ 已有基础统计显示（第195行）

2. 技术优化方案

计算逻辑优化

// 现有的计算逻辑（已存在）
const totalCost = computed(() => {
  return rows.value.reduce((sum: number, r: any) => {
    const price = priceCache.value[r.product_id] || 0
    const qty = Number(r.quantity) || 0
    return sum + price * qty
  }, 0)
})

格式化函数增强

// 新增货币格式化函数
function formatCurrency(amount: number): string {
  return new Intl.NumberFormat('zh-CN', {
    style: 'currency',
    currency: 'CNY',
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  }).format(amount)
}

UI显示优化

<!-- 优化现有的统计显示 -->
<div class="reward-stats">
  <span class="stat-item">总计：{{ rows.length }} 个奖品</span>
  <span class="stat-item ml-4">总价值：{{ formatCurrency(totalCost) }}</span>
</div>

3. 性能优化策略

响应式优化

• 使用computed缓存计算结果，避免重复计算
• 利用Vue的依赖追踪，只在奖品数据变化时重新计算
• 计算复杂度O(n)，n为奖品数量，性能优异

内存优化

• 复用现有的priceCache，避免重复数据
• 使用轻量级计算，不产生额外内存开销

4. 用户体验优化

视觉增强

• 使用货币格式化显示，提升可读性
• 保持与现有UI风格一致
• 添加适当的间距和布局

响应式设计

• 适配移动端和桌面端
• 保持良好的可读性和可用性

验收标准

功能验收

• ✅ 实时计算所有奖品总价格
• ✅ 支持添加/修改/删除奖品时自动更新
• ✅ 显示格式为人民币格式（¥1,234.56）
• ✅ 计算精度为小数点后两位

性能验收

• ✅ 计算响应时间 < 100ms
• ✅ 支持至少50个奖品同时计算
• ✅ 不产生内存泄漏

代码质量验收

• ✅ 符合现有代码规范和风格
• ✅ 使用TypeScript类型安全
• ✅ 代码结构清晰，易于维护

UI/UX验收

• ✅ 与现有界面风格保持一致
• ✅ 显示位置合理，视觉层次清晰
• ✅ 响应式设计，适配各种屏幕

技术约束

技术栈约束

• 前端：Vue 3 + TypeScript + Element Plus + SCSS
• 状态管理：Vue Composition API
• 构建工具：Vite

代码规范约束

• 遵循项目现有的ESLint配置
• 使用现有的组件库和设计规范
• 保持与周边代码的一致性

性能约束

• 不得引入额外的性能开销
• 不得影响现有功能的性能
• 需要支持大数据量情况下的流畅体验

风险评估与应对

技术风险

1. 计算性能问题：通过computed缓存和算法优化解决
2. 精度丢失问题：使用Number类型和适当的格式化避免
3. 响应式失效：严格遵循Vue响应式规则

业务风险

1. 价格数据缺失：增加空值处理和默认值机制
2. 显示格式错误：使用标准的Intl.NumberFormat格式化

最终确认

• 技术方案可行，符合现有架构
• 性能指标可达，满足业务需求
• 代码质量可控，易于维护扩展
• 用户体验良好，界面友好直观