chore: 移除未使用的前端组件

- 删除 SmartClassifyButton.vue (无引用) - 删除 BudgetSummary.vue (无引用) - 归档变更记录
2026-02-20 22:39:29 +08:00
parent 5f9672744b
commit b173c83134
13 changed files with 163 additions and 709 deletions
--- a/openspec/changes/archive/2026-02-20-remove-unused-frontend-components/.openspec.yaml
+++ b/openspec/changes/archive/2026-02-20-remove-unused-frontend-components/.openspec.yaml
@@ -0,0 +1,2 @@
+schema: spec-driven
+created: 2026-02-20
--- a/openspec/changes/archive/2026-02-20-remove-unused-frontend-components/design.md
+++ b/openspec/changes/archive/2026-02-20-remove-unused-frontend-components/design.md
@@ -0,0 +1,54 @@
+## Context
+
+前端组件库存在两个未被引用的组件：
+- `SmartClassifyButton.vue` - 智能分类按钮，历史上可能用于快速分类功能，现已无引用
+- `BudgetSummary.vue` - 预算汇总卡片，功能已被 budgetV2 模块的子组件替代
+
+当前打包工具（Vite）的 tree-shaking 会移除未引用代码，但保留源文件会增加维护困惑和代码审查负担。
+
+## Goals / Non-Goals
+
+**Goals:**
+- 移除确认无引用的组件文件
+- 保持代码库整洁，降低维护成本
+
+**Non-Goals:**
+- 不涉及 `TransactionDetail.vue` vs `TransactionDetailSheet.vue` 的重构（两者虽然功能相似，但均有活跃引用）
+- 不涉及其他代码清理（如未使用的 composables、utils）
+
+## Decisions
+
+### 1. 删除策略：直接删除 vs 废弃标记
+
+**决策**: 直接删除
+
+**理由**:
+- 两个组件均无任何 import 引用，删除零风险
+- 无需废弃过渡期，因为没有使用方需要迁移
+- 简化变更流程，避免留下无效的废弃代码
+
+**备选方案**: 添加 `@deprecated` 注释并在下个版本删除 - 过度工程化，不必要
+
+### 2. 回归验证范围
+
+**决策**: 仅验证打包成功和页面正常渲染
+
+**理由**:
+- 删除的是零引用组件，理论上不会有任何运行时影响
+- 全量 E2E 测试成本过高，性价比低
+
+## Risks / Trade-offs
+
+| 风险 | 影响 | 缓解措施 |
+|------|------|----------|
+| 误删有引用的组件 | 页面报错 | 已通过 grep 全量搜索确认无引用 |
+| 动态引用未被发现 | 运行时报错 | 检查了 `:is` 动态组件和字符串引用模式 |
+
+## Migration Plan
+
+1. 删除 `SmartClassifyButton.vue`
+2. 删除 `BudgetSummary.vue`
+3. 运行 `pnpm build` 验证打包成功
+4. 运行 `pnpm dev` 启动开发服务器，访问主要页面验证无报错
+
+**回滚策略**: Git revert 即可恢复
--- a/openspec/changes/archive/2026-02-20-remove-unused-frontend-components/proposal.md
+++ b/openspec/changes/archive/2026-02-20-remove-unused-frontend-components/proposal.md
@@ -0,0 +1,28 @@
+## Why
+
+前端代码库中存在未使用的组件，增加了维护成本和打包体积。作为大版本迭代的清理工作，需要识别并移除这些无效代码，保持代码库整洁。
+
+## What Changes
+
+- 删除 `SmartClassifyButton.vue` - 无任何引用
+- 删除 `BudgetSummary.vue` - 无任何引用
+- 评估 `TransactionDetail.vue` 与 `TransactionDetailSheet.vue` 的重复问题（两者功能相似，需确认是否可合并）
+
+## Capabilities
+
+### New Capabilities
+
+无新增能力。
+
+### Modified Capabilities
+
+无需求变更。此变更为代码清理，不影响业务功能。
+
+## Impact
+
+- **删除文件**:
+  - `Web/src/components/SmartClassifyButton.vue`
+  - `Web/src/components/Budget/BudgetSummary.vue`
+- **风险评估**: 低风险。两个组件均无任何导入引用
+- **打包体积**: 减少无效代码约 ~5KB (gzip)
+- **测试影响**: 无需新增测试，仅需回归验证
--- a/openspec/changes/archive/2026-02-20-remove-unused-frontend-components/specs/removed-components.md
+++ b/openspec/changes/archive/2026-02-20-remove-unused-frontend-components/specs/removed-components.md
@@ -0,0 +1,13 @@
+## Overview
+
+此变更为代码清理，不涉及业务需求变更。
+
+## REMOVED Components
+
+### Requirement: SmartClassifyButton component
+**Reason**: 组件无任何引用，已被废弃
+**Migration**: 无需迁移，该组件从未被使用
+
+### Requirement: BudgetSummary component
+**Reason**: 功能已被 budgetV2 模块的子组件替代
+**Migration**: 使用 `BudgetCard.vue` 和 `BudgetChartAnalysis.vue` 替代
--- a/openspec/changes/archive/2026-02-20-remove-unused-frontend-components/tasks.md
+++ b/openspec/changes/archive/2026-02-20-remove-unused-frontend-components/tasks.md
@@ -0,0 +1,9 @@
+## 1. 移除未使用组件
+
+- [x] 1.1 删除 `Web/src/components/SmartClassifyButton.vue`
+- [x] 1.2 删除 `Web/src/components/Budget/BudgetSummary.vue`
+
+## 2. 验证
+
+- [x] 2.1 运行 `pnpm build` 验证打包成功
+- [x] 2.2 运行 `pnpm dev` 启动开发服务器，访问主要页面验证无报错
--- a/openspec/changes/archive/2026-02-20-unify-bill-list-components/.openspec.yaml
+++ b/openspec/changes/archive/2026-02-20-unify-bill-list-components/.openspec.yaml
@@ -0,0 +1,2 @@
+schema: spec-driven
+created: 2026-02-20
--- a/openspec/changes/archive/2026-02-20-unify-bill-list-components/design.md
+++ b/openspec/changes/archive/2026-02-20-unify-bill-list-components/design.md
@@ -0,0 +1,66 @@
+## Context
+
+项目中存在多处账单列表展示，但实现方式不一致：
+- `TransactionsRecord.vue`（标准）使用 `BillListComponent`，功能完整
+- `CategoryBillPopup.vue` 自定义实现，样式和交互与标准不一致
+- `calendarV2/modules/TransactionList.vue` 使用 `BillListComponent` 但配置可能不一致
+- `BudgetCard.vue` 使用 `BillListComponent` Custom 模式
+- `EmailRecord.vue` 使用 `BillListComponent` Custom 模式
+
+核心组件 `BillListComponent.vue` 已具备统一能力，但各使用方配置参数不统一。
+
+## Goals / Non-Goals
+
+**Goals:**
+- 统一所有账单列表的 UI 样式（图标、金额、标签布局）
+- 统一基础交互（左滑删除、点击详情、空状态）
+- 确保 `BillListComponent` 正确配置
+
+**Non-Goals:**
+- 不添加搜索功能（弹窗场景不需要）
+- 不修改 API 接口
+- 不重构 `BillListComponent` 核心代码
+
+## Decisions
+
+### 决策 1: 统一使用 BillListComponent
+
+**选择**: 所有账单列表统一使用 `BillListComponent.vue`
+
+**理由**:
+- 该组件已具备所有必要功能（筛选、分页、删除、多选）
+- 支持 API 模式和 Custom 模式
+- 已有完善的暗黑模式支持
+
+**备选方案**: 为每个场景创建独立组件 → 放弃（维护成本高、样式难以统一）
+
+### 决策 2: 标准配置模板
+
+**选择**: 定义统一的 props 配置模板
+
+```typescript
+// 弹窗场景标准配置
+const popupConfig = {
+  dataSource: 'custom',
+  transactions: [...],
+  enableFilter: false,    // 弹窗不需要筛选
+  showCheckbox: false,
+  showDelete: true,       // 支持删除
+  compact: true,          // 紧凑布局
+}
+```
+
+### 决策 3: 交互事件统一
+
+**选择**: 统一使用组件 emit 事件 + 全局事件总线
+
+- `@click` → 触发详情查看
+- `transaction-deleted` → 全局广播删除事件
+
+## Risks / Trade-offs
+
+| 风险 | 缓解措施 |
+|------|----------|
+| CategoryBillPopup 自定义实现，改动较大 | 先对比差异，逐步对齐 |
+| 各场景数据源不同 | 统一使用 Custom 模式，父组件管理数据 |
+| 事件处理不一致 | 统一使用组件 emit 事件 |
--- a/openspec/changes/archive/2026-02-20-unify-bill-list-components/proposal.md
+++ b/openspec/changes/archive/2026-02-20-unify-bill-list-components/proposal.md
@@ -0,0 +1,41 @@
+## Why
+
+当前项目中存在多处账单列表展示，但样式和功能不一致，导致用户体验不统一。统计页面分类账单弹窗与 `/balance` 标准页面的账单列表在 UI 样式和交互行为上存在明显差异。为提升用户体验一致性和降低维护成本，需要统一所有账单列表组件的样式和基础功能。
+
+## What Changes
+
+- 统一 4 处账单列表弹窗/组件的样式和交互：
+  - `CategoryBillPopup.vue`（统计页面分类账单弹窗）
+  - `calendarV2/modules/TransactionList.vue`（日历视图账单列表）
+  - `Budget/BudgetCard.vue`（预算关联账单弹窗）
+  - `EmailRecord.vue`（邮件关联账单弹窗）
+- 对齐以下方面到 `TransactionsRecord.vue` 标准：
+  - 列表项样式（图标、文字、金额布局）
+  - 左滑删除交互
+  - 点击查看详情交互
+  - 空状态展示
+- **不涉及**：搜索功能（弹窗场景不需要搜索）
+
+## Capabilities
+
+### New Capabilities
+
+无新增能力。
+
+### Modified Capabilities
+
+- `bill-list-display`: 统一账单列表展示样式和基础交互功能
+
+## Impact
+
+**前端组件**:
+- `Web/src/components/CategoryBillPopup.vue` - 统计分类账单弹窗
+- `Web/src/views/calendarV2/modules/TransactionList.vue` - 日历账单列表
+- `Web/src/components/Budget/BudgetCard.vue` - 预算关联账单弹窗
+- `Web/src/views/EmailRecord.vue` - 邮件关联账单弹窗
+
+**参考标准**:
+- `Web/src/views/TransactionsRecord.vue` - 标准账单列表实现
+- `Web/src/components/Bill/BillListComponent.vue` - 核心账单列表组件
+
+**API 依赖**: 无新增 API，复用现有 `getTransactionList` 接口
--- a/openspec/changes/archive/2026-02-20-unify-bill-list-components/specs/transaction-list-display/spec.md
+++ b/openspec/changes/archive/2026-02-20-unify-bill-list-components/specs/transaction-list-display/spec.md
@@ -0,0 +1,89 @@
+## ADDED Requirements
+
+### Requirement: CategoryBillPopup 统一样式
+统计页面分类账单弹窗必须使用 BillListComponent，样式与 Balance 页面一致。
+
+#### Scenario: 使用 BillListComponent
+- **WHEN** 用户在统计页面点击分类卡片
+- **THEN** 弹窗使用 `BillListComponent` 展示账单列表，配置为 `dataSource="api"` 模式
+
+#### Scenario: 列表项样式对齐
+- **WHEN** 账单列表渲染
+- **THEN** 使用与 `TransactionsRecord.vue` 相同的卡片样式（图标、金额、标签布局）
+
+#### Scenario: 左滑删除
+- **WHEN** 用户在账单项上左滑
+- **THEN** 显示红色删除按钮，点击后确认删除
+
+#### Scenario: 点击查看详情
+- **WHEN** 用户点击账单项
+- **THEN** 打开 `TransactionDetailSheet` 查看详情
+
+### Requirement: CalendarV2 TransactionList 对齐
+日历页面的交易列表样式必须与 Balance 页面一致。
+
+#### Scenario: 紧凑布局
+- **WHEN** 日历页面展示当天账单列表
+- **THEN** 使用 `compact={true}` 紧凑布局
+
+#### Scenario: 删除交互
+- **WHEN** 用户左滑删除账单
+- **THEN** 与 Balance 页面删除交互一致
+
+### Requirement: BudgetCard 关联账单对齐
+预算页面的关联账单弹窗样式必须与 Balance 页面一致。
+
+#### Scenario: 统一卡片样式
+- **WHEN** 预算卡片展示关联账单
+- **THEN** 账单项样式与 Balance 页面一致
+
+### Requirement: EmailRecord 关联账单对齐
+邮件记录页面的关联账单弹窗样式必须与 Balance 页面一致。
+
+#### Scenario: 统一卡片样式
+- **WHEN** 邮件记录展示关联账单
+- **THEN** 账单项样式与 Balance 页面一致
+
+#### Scenario: 删除功能
+- **WHEN** 用户删除账单
+- **THEN** 删除交互与 Balance 页面一致
+
+## MODIFIED Requirements
+
+### Requirement: 功能对等性
+新组件必须保持旧版所有功能，确保迁移不丢失特性。
+
+#### Scenario: 批量选择功能
+- **WHEN** TransactionsRecord 需要批量操作
+- **THEN** 新组件通过 `showCheckbox` 和 `selectedIds` 提供相同功能
+
+#### Scenario: 删除后刷新
+- **WHEN** 账单删除成功
+- **THEN** 新组件派发 `transaction-deleted` 全局事件，保持与旧版相同的事件机制
+
+#### Scenario: 自定义数据源
+- **WHEN** 页面需要展示离线或缓存数据
+- **THEN** 新组件通过 `dataSource="custom"` 和 `transactions` prop 支持自定义数据
+
+#### Scenario: 弹窗场景数据源
+- **WHEN** 弹窗组件（CategoryBillPopup、BudgetCard、EmailRecord）展示账单
+- **THEN** 使用 `dataSource="api"` 或 `dataSource="custom"`，并配置 `enableFilter={false}` 禁用筛选
+
+### Requirement: 视觉升级
+新组件必须基于 v2 的现代化设计，提供更好的视觉体验。
+
+#### Scenario: 卡片样式
+- **WHEN** 展示账单列表
+- **THEN** 使用 v2 的卡片样式（圆角、阴影、图标），调整为紧凑间距
+
+#### Scenario: 图标展示
+- **WHEN** 账单有分类信息
+- **THEN** 显示对应的分类图标（如餐饮用 food 图标），带有彩色背景
+
+#### Scenario: 标签样式
+- **WHEN** 显示账单类型
+- **THEN** 使用彩色标签（支出红色、收入绿色），位于卡片右上角
+
+#### Scenario: 空状态展示
+- **WHEN** 账单列表为空
+- **THEN** 显示统一的空状态图标和提示文案
--- a/openspec/changes/archive/2026-02-20-unify-bill-list-components/tasks.md
+++ b/openspec/changes/archive/2026-02-20-unify-bill-list-components/tasks.md
@@ -0,0 +1,41 @@
+## 1. 分析差异
+
+- [x] 1.1 对比 CategoryBillPopup.vue 与 TransactionsRecord.vue 的样式差异
+- [x] 1.2 对比 calendarV2/modules/TransactionList.vue 与标准的差异
+- [x] 1.3 对比 BudgetCard.vue 关联账单与标准的差异
+- [x] 1.4 对比 EmailRecord.vue 关联账单与标准的差异
+
+## 2. 修改 CategoryBillPopup
+
+- [x] 2.1 重构 CategoryBillPopup 使用 BillListComponent
+- [x] 2.2 配置 props: dataSource="custom", enableFilter=false, showDelete=true
+- [x] 2.3 统一列表项样式（图标、金额、标签）
+- [x] 2.4 实现左滑删除交互
+- [x] 2.5 实现点击查看详情（打开 TransactionDetailSheet）
+- [x] 2.6 测试删除和详情功能
+
+## 3. 修改 CalendarV2 TransactionList
+
+- [x] 3.1 检查 BillListComponent 配置
+- [x] 3.2 确保 compact={true} 紧凑布局
+- [x] 3.3 统一删除交互
+- [x] 3.4 测试日历页面账单列表
+
+## 4. 修改 BudgetCard 关联账单
+
+- [x] 4.1 检查 BillListComponent 配置
+- [x] 4.2 统一卡片样式
+- [x] 4.3 测试预算关联账单弹窗
+
+## 5. 修改 EmailRecord 关联账单
+
+- [x] 5.1 检查 BillListComponent 配置
+- [x] 5.2 统一卡片样式和删除功能
+- [x] 5.3 测试邮件关联账单弹窗
+
+## 6. 验证
+
+- [x] 6.1 验证所有弹窗的账单列表样式一致
+- [x] 6.2 验证删除功能在各场景正常工作
+- [x] 6.3 验证详情查看功能正常
+- [x] 6.4 验证暗黑模式适配