Files
EmailBill/openspec/changes/archive/2026-02-21-unify-bill-detail-component/design.md
SunCheng 749624f290
All checks were successful
Docker Build & Deploy / Build Docker Image (push) Successful in 17s
Docker Build & Deploy / Deploy to Production (push) Successful in 6s
Docker Build & Deploy / Cleanup Dangling Images (push) Successful in 1s
Docker Build & Deploy / WeChat Notification (push) Successful in 1s
feat: 统一交易详情组件,替换为 TransactionDetailSheet,增强功能并删除旧组件
2026-02-21 12:11:50 +08:00

2.6 KiB
Raw Blame History

Context

当前项目存在两个交易详情组件,视觉样式和功能存在差异:

组件 使用位置 特点
TransactionDetailSheet.vue calendarV2, CategoryBillPopup 简洁卡片式设计,点击金额可编辑,无建议分类提示
TransactionDetail.vue TransactionsRecord 传统表单设计,有建议分类提示,支持余额编辑

核心差异

  1. 视觉样式TransactionDetailSheet 更现代简洁
  2. 建议分类提示:仅 TransactionDetail.vue 支持显示 AI 建议的分类
  3. 余额编辑TransactionDetail.vue 支持余额编辑

Goals / Non-Goals

Goals:

  • 统一所有页面的交易详情视觉样式,使用 TransactionDetailSheet 的设计
  • 保留 TransactionDetail.vue 中的必要功能(建议分类提示)
  • 简化组件维护,减少重复代码

Non-Goals:

  • 不修改 API 接口
  • 不修改后端逻辑
  • 不增加新功能(仅整合现有功能)

Decisions

决策 1选择 TransactionDetailSheet 作为基准组件

理由

  • 视觉设计更现代,用户体验更好
  • 已被 calendarV2主要入口和 CategoryBillPopup 使用
  • 代码结构更清晰,使用 Composition API

替代方案

  • 方案 A合并两个组件为一个通过 props 控制样式 → 拒绝,增加复杂度
  • 方案 B保持两个组件分别维护 → 拒绝,维护成本高,用户体验不一致

决策 2将建议分类提示功能迁移到 TransactionDetailSheet

理由

  • 该功能是智能分类体验的核心部分
  • 用户在 TransactionsRecord 页面查看未确认分类的交易时需要此提示

实现方式

  • 在 TransactionDetailSheet 的分类选择区域上方添加建议提示条
  • 点击"应用"后自动填充建议的分类和类型

决策 3删除旧的 TransactionDetail.vue 组件

理由

  • 功能已完全迁移到 TransactionDetailSheet
  • 避免代码冗余和维护负担

Risks / Trade-offs

风险 缓解措施
用户习惯旧界面样式 新界面更简洁直观,学习成本低
迁移过程中遗漏功能 详细对比两个组件功能,确保无遗漏
建议分类提示功能迁移不完整 测试未确认分类交易的显示和交互

Migration Plan

  1. Phase 1: 增强 TransactionDetailSheet

    • 添加建议分类提示功能
    • 确保所有功能完整
  2. Phase 2: 更新 TransactionsRecord 页面

    • 替换组件引用
    • 调整事件处理
  3. Phase 3: 清理

    • 删除 TransactionDetail.vue
    • 更新相关文档

回滚策略Git revert 即可,无数据迁移风险