feat: 统一交易详情组件，替换为 TransactionDetailSheet，增强功能并删除旧组件

openspec/changes/archive/2026-02-21-unify-bill-detail-component/.openspec.yaml

@@ -0,0 +1,2 @@
+schema: spec-driven
+created: 2026-02-21

openspec/changes/archive/2026-02-21-unify-bill-detail-component/design.md

@@ -0,0 +1,78 @@
+## 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 即可，无数据迁移风险

openspec/changes/archive/2026-02-21-unify-bill-detail-component/proposal.md

@@ -0,0 +1,33 @@
+## Why
+
+当前项目中存在两个交易详情组件：`TransactionDetailSheet.vue`（calendarV2 使用）和 `TransactionDetail.vue`（TransactionsRecord 使用），导致用户在不同页面查看交易详情时视觉体验不一致。需要统一为 calendarV2 页面的详情样式，提升用户体验一致性并减少维护成本。
+
+## What Changes
+
+- **统一交易详情组件**：将所有页面的交易详情统一使用 `TransactionDetailSheet.vue` 组件
+- **更新 TransactionsRecord 页面**：将详情组件从 `TransactionDetail.vue` 替换为 `TransactionDetailSheet.vue`
+- **弃用旧组件**：移除不再使用的 `TransactionDetail.vue` 组件
+- **增强 TransactionDetailSheet**：确保组件具备完整功能（余额编辑支持、建议分类提示等）
+
+## Capabilities
+
+### New Capabilities
+
+- `unified-transaction-detail`: 统一的交易详情弹窗组件，支持金额编辑、分类选择、时间修改、删除操作，所有页面共用同一视觉样式
+
+### Modified Capabilities
+
+- 无（现有功能保持不变，仅统一样式）
+
+## Impact
+
+**受影响的文件**：
+- `Web/src/views/TransactionsRecord.vue` - 替换详情组件引用
+- `Web/src/components/Transaction/TransactionDetail.vue` - 删除或标记弃用
+
+**不受影响的文件**：
+- `Web/src/views/calendarV2/Index.vue` - 已使用 TransactionDetailSheet
+- `Web/src/components/Transaction/CategoryBillPopup.vue` - 已使用 TransactionDetailSheet
+- `Web/src/components/Transaction/TransactionDetailSheet.vue` - 基准组件，保持不变
+
+**API 无变更**：仅前端组件层面的统一

openspec/changes/archive/2026-02-21-unify-bill-detail-component/specs/unified-transaction-detail/spec.md

@@ -0,0 +1,74 @@
+## ADDED Requirements
+
+### Requirement: 统一的交易详情弹窗组件
+
+系统 SHALL 提供统一的交易详情弹窗组件 `TransactionDetailSheet.vue`，所有页面使用同一组件查看和编辑交易详情。
+
+#### Scenario: 从任意页面打开交易详情
+- **WHEN** 用户在 calendarV2、TransactionsRecord 或其他页面点击交易记录
+- **THEN** 系统显示统一的 TransactionDetailSheet 弹窗组件
+
+#### Scenario: 详情弹窗显示交易信息
+- **WHEN** 弹窗打开
+- **THEN** 显示金额（可点击编辑）、时间、备注、类型、分类
+
+#### Scenario: 编辑金额
+- **WHEN** 用户点击金额区域
+- **THEN** 进入金额编辑模式，显示数字输入框
+- **AND** 失焦后自动保存格式化的金额值
+
+### Requirement: 建议分类提示功能
+
+系统 SHALL 在交易详情弹窗中显示 AI 建议的分类提示（当存在未确认分类时）。
+
+#### Scenario: 显示建议分类提示
+- **WHEN** 交易存在 `unconfirmedClassify` 字段且与当前分类不同
+- **THEN** 在分类选择区域上方显示建议提示条
+- **AND** 提示条包含建议的分类名称和应用按钮
+
+#### Scenario: 应用建议分类
+- **WHEN** 用户点击"应用"按钮
+- **THEN** 自动填充建议的分类到分类字段
+- **AND** 如果存在 `unconfirmedType`，同时更新交易类型
+
+### Requirement: 交易保存功能
+
+系统 SHALL 允许用户修改交易详情并保存。
+
+#### Scenario: 保存修改的交易
+- **WHEN** 用户修改交易信息后点击"保存"按钮
+- **AND** 必填字段（金额、分类、时间）已填写
+- **THEN** 系统调用更新 API 并显示成功提示
+- **AND** 关闭弹窗并刷新交易列表
+
+#### Scenario: 保存时验证失败
+- **WHEN** 用户点击"保存"但必填字段未填写
+- **THEN** 显示对应的错误提示信息
+
+### Requirement: 交易删除功能
+
+系统 SHALL 允许用户删除交易记录。
+
+#### Scenario: 删除交易确认
+- **WHEN** 用户点击"删除"按钮
+- **THEN** 显示确认对话框
+
+#### Scenario: 确认删除交易
+- **WHEN** 用户在确认对话框中点击"删除"
+- **THEN** 系统调用删除 API
+- **AND** 成功后关闭弹窗并刷新交易列表
+- **AND** 显示删除成功提示
+
+### Requirement: 页面兼容性
+
+系统 SHALL 确保统一组件在所有使用场景正常工作。
+
+#### Scenario: TransactionsRecord 页面使用详情组件
+- **WHEN** 用户在 TransactionsRecord 页面点击交易记录
+- **THEN** 显示 TransactionDetailSheet 弹窗
+- **AND** 功能与原 TransactionDetail 组件一致
+
+#### Scenario: calendarV2 页面使用详情组件
+- **WHEN** 用户在 calendarV2 页面点击交易记录
+- **THEN** 显示 TransactionDetailSheet 弹窗
+- **AND** 保持原有功能和交互不变

openspec/changes/archive/2026-02-21-unify-bill-detail-component/tasks.md

@@ -0,0 +1,25 @@
+## 1. 增强组件功能
+
+- [x] 1.1 在 TransactionDetailSheet.vue 中添加建议分类提示功能
+- [x] 1.2 添加建议提示 UI 组件（显示 unconfirmedClassify 和应用按钮）
+- [x] 1.3 实现应用建议分类逻辑（更新 classify 和 type 字段）
+
+## 2. 迁移页面引用
+
+- [x] 2.1 修改 TransactionsRecord.vue，将 TransactionDetail 组件替换为 TransactionDetailSheet
+- [x] 2.2 更新 TransactionsRecord.vue 中的事件处理（save → save, delete → delete）
+- [x] 2.3 测试 TransactionsRecord 页面的详情功能
+
+## 3. 清理旧代码
+
+- [x] 3.1 确认无其他页面引用 TransactionDetail.vue
+- [x] 3.2 删除 TransactionDetail.vue 组件文件
+- [x] 3.3 更新相关文档（如有）
+
+## 4. 测试验证
+
+- [x] 4.1 测试 calendarV2 页面交易详情功能（无回归）
+- [x] 4.2 测试 TransactionsRecord 页面交易详情功能
+- [x] 4.3 测试 CategoryBillPopup 中交易详情功能
+- [x] 4.4 测试建议分类提示功能
+- [x] 4.5 运行前端 lint 检查

openspec/specs/unified-transaction-detail/spec.md

@@ -0,0 +1,74 @@
+## Requirements
+
+### Requirement: 统一的交易详情弹窗组件
+
+系统 SHALL 提供统一的交易详情弹窗组件 `TransactionDetailSheet.vue`，所有页面使用同一组件查看和编辑交易详情。
+
+#### Scenario: 从任意页面打开交易详情
+- **WHEN** 用户在 calendarV2、TransactionsRecord 或其他页面点击交易记录
+- **THEN** 系统显示统一的 TransactionDetailSheet 弹窗组件
+
+#### Scenario: 详情弹窗显示交易信息
+- **WHEN** 弹窗打开
+- **THEN** 显示金额（可点击编辑）、时间、备注、类型、分类
+
+#### Scenario: 编辑金额
+- **WHEN** 用户点击金额区域
+- **THEN** 进入金额编辑模式，显示数字输入框
+- **AND** 失焦后自动保存格式化的金额值
+
+### Requirement: 建议分类提示功能
+
+系统 SHALL 在交易详情弹窗中显示 AI 建议的分类提示（当存在未确认分类时）。
+
+#### Scenario: 显示建议分类提示
+- **WHEN** 交易存在 `unconfirmedClassify` 字段且与当前分类不同
+- **THEN** 在分类选择区域上方显示建议提示条
+- **AND** 提示条包含建议的分类名称和应用按钮
+
+#### Scenario: 应用建议分类
+- **WHEN** 用户点击"应用"按钮
+- **THEN** 自动填充建议的分类到分类字段
+- **AND** 如果存在 `unconfirmedType`，同时更新交易类型
+
+### Requirement: 交易保存功能
+
+系统 SHALL 允许用户修改交易详情并保存。
+
+#### Scenario: 保存修改的交易
+- **WHEN** 用户修改交易信息后点击"保存"按钮
+- **AND** 必填字段（金额、分类、时间）已填写
+- **THEN** 系统调用更新 API 并显示成功提示
+- **AND** 关闭弹窗并刷新交易列表
+
+#### Scenario: 保存时验证失败
+- **WHEN** 用户点击"保存"但必填字段未填写
+- **THEN** 显示对应的错误提示信息
+
+### Requirement: 交易删除功能
+
+系统 SHALL 允许用户删除交易记录。
+
+#### Scenario: 删除交易确认
+- **WHEN** 用户点击"删除"按钮
+- **THEN** 显示确认对话框
+
+#### Scenario: 确认删除交易
+- **WHEN** 用户在确认对话框中点击"删除"
+- **THEN** 系统调用删除 API
+- **AND** 成功后关闭弹窗并刷新交易列表
+- **AND** 显示删除成功提示
+
+### Requirement: 页面兼容性
+
+系统 SHALL 确保统一组件在所有使用场景正常工作。
+
+#### Scenario: TransactionsRecord 页面使用详情组件
+- **WHEN** 用户在 TransactionsRecord 页面点击交易记录
+- **THEN** 显示 TransactionDetailSheet 弹窗
+- **AND** 功能与原 TransactionDetail 组件一致
+
+#### Scenario: calendarV2 页面使用详情组件
+- **WHEN** 用户在 calendarV2 页面点击交易记录
+- **THEN** 显示 TransactionDetailSheet 弹窗
+- **AND** 保持原有功能和交互不变