## 1. 组件基础结构搭建

- [x] 1.1 创建 `Web/src/components/Bill/BillListComponent.vue` 文件
- [x] 1.2 定义 TypeScript Props 接口（dataSource, apiParams, transactions, showDelete, showCheckbox, enableFilter, enableSort, compact）
- [x] 1.3 定义 Emits 接口（load, click, delete, update:selectedIds）
- [x] 1.4 创建组件骨架（template、script setup、style scoped）
- [x] 1.5 添加必要的 Vant 组件导入（van-list, van-swipe-cell, van-dropdown-menu, van-loading, van-empty, van-icon, van-tag）

## 2. 数据管理和状态

- [x] 2.1 实现 `dataSource` 模式切换逻辑（api vs custom）
- [x] 2.2 创建响应式数据状态（transactions, loading, finished, page, pageSize）
- [x] 2.3 实现筛选状态管理（selectedType, selectedCategory, dateRange, sortBy）
- [x] 2.4 实现多选状态管理（localSelectedIds, 与 prop 同步）
- [x] 2.5 创建 computed 计算属性用于筛选和排序逻辑

## 3. API 数据加载

- [x] 3.1 导入 `@/api/transactionRecord` 的相关 API 方法
- [x] 3.2 实现初始加载逻辑（fetchTransactions 方法）
- [x] 3.3 实现分页加载逻辑（onLoad 方法，支持 van-list）
- [x] 3.4 实现筛选条件变更时的数据重载逻辑
- [x] 3.5 处理 API 错误和加载状态

## 4. 筛选功能实现

- [x] 4.1 创建筛选栏 UI（van-dropdown-menu，包含类型、分类、日期、排序四个下拉菜单）
- [x] 4.2 实现类型筛选（支出、收入、不计入、全部）
- [x] 4.3 实现分类筛选（动态获取分类列表或预设常用分类）
- [x] 4.4 实现日期范围筛选（使用 van-calendar 弹出层）
- [x] 4.5 实现排序功能（金额降序、金额升序、时间降序、时间升序）
- [x] 4.6 添加筛选重置功能
- [x] 4.7 根据 `enableFilter` prop 控制筛选栏显示/隐藏

## 5. 账单列表展示

- [x] 5.1 创建账单卡片布局（基于 v2 风格，左侧图标、中间内容、右侧金额）
- [x] 5.2 实现紧凑模式样式（减少卡片间距至 6px，内边距至 10px）
- [x] 5.3 实现账单图标显示（根据分类映射图标，使用 getIconByClassify 方法）
- [x] 5.4 实现金额格式化（带符号、颜色区分支出/收入）
- [x] 5.5 实现类型标签显示（右上角，支出红色、收入绿色）
- [x] 5.6 实现时间格式化显示（HH:MM 或 YYYY-MM-DD HH:MM）
- [x] 5.7 实现空状态展示（van-empty，带友好文案）

## 6. 左滑删除功能

- [x] 6.1 为每个账单项添加 van-swipe-cell 包裹
- [x] 6.2 创建删除按钮插槽（右侧滑出，红色按钮）
- [x] 6.3 实现删除确认对话框（van-dialog）
- [x] 6.4 实现删除 API 调用（deleteTransaction）
- [x] 6.5 删除成功后更新本地列表（移除对应项）
- [x] 6.6 显示删除成功/失败提示（van-toast）
- [x] 6.7 派发全局事件 `transaction-deleted`
- [x] 6.8 触发父组件 `@delete` 事件
- [x] 6.9 根据 `showDelete` prop 控制删除功能启用/禁用

## 7. 点击详情功能

- [x] 7.1 为账单卡片添加 @click 事件监听
- [x] 7.2 实现 handleClick 方法，触发 `@click` 事件并传递账单对象
- [x] 7.3 确保点击复选框或删除按钮时不触发详情事件（事件冒泡处理）

## 8. 多选功能

- [x] 8.1 在账单项左侧添加 van-checkbox（根据 `showCheckbox` prop 控制显示）
- [x] 8.2 实现 checkbox 选中状态与 `selectedIds` prop 同步
- [x] 8.3 实现 toggleSelection 方法（切换选中状态）
- [x] 8.4 触发 `@update:selectedIds` 事件更新父组件状态
- [ ] 8.5 添加全选/取消全选功能（可选，视需求）

## 9. 样式和主题适配

- [x] 9.1 使用 SCSS 编写组件样式
- [x] 9.2 使用 CSS 变量适配 Vant 主题（`var(--van-danger-color)` 等）
- [x] 9.3 实现暗黑模式适配（检查暗色背景下的显示效果）
- [x] 9.4 根据 `compact` prop 调整卡片间距和内边距
- [x] 9.5 确保移动端响应式布局（处理小屏幕、横屏等情况）
- [x] 9.6 添加过渡动画（卡片删除、列表加载等）

## 10. 页面迁移 - TransactionsRecord

- [x] 10.1 在 `TransactionsRecord.vue` 中导入新组件 `BillListComponent`
- [x] 10.2 替换旧 `TransactionList` 组件为 `BillListComponent`
- [x] 10.3 传递必要的 props（showCheckbox, selectedIds, apiParams）
- [x] 10.4 更新事件监听（@click, @delete, @update:selectedIds）
- [ ] 10.5 验证批量操作功能正常（选中、删除、导出等）
- [ ] 10.6 测试页面功能完整性

## 11. 页面迁移 - BillAnalysisView

- [x] 11.1 在 `BillAnalysisView.vue` 中导入新组件 `BillListComponent` (页面未使用旧组件，跳过)
- [x] 11.2 替换旧组件为 `BillListComponent` (页面未使用旧组件，跳过)
- [x] 11.3 传递筛选参数（如按分类、日期范围）(页面未使用旧组件，跳过)
- [x] 11.4 更新事件监听 (页面未使用旧组件，跳过)
- [x] 11.5 测试页面功能正常 (页面未使用旧组件，跳过)

## 12. 页面迁移 - 其他引用页面

- [x] 12.1 使用 grep 搜索所有引用旧 `TransactionList` 的文件
- [x] 12.2 逐个页面进行迁移（重复步骤 10-11 的流程）
- [x] 12.3 验证每个页面的功能和样式
- [x] 12.4 检查是否有遗漏的引用

## 13. CalendarV2 模块处理

- [x] 13.1 评估 `calendarV2/modules/TransactionList.vue` 的特殊功能（Smart 按钮、日期联动等）
- [x] 13.2 决定是保留该文件还是迁移到新组件
- [x] 13.3 如保留，添加注释说明其特殊性；如迁移，确保功能对等
- [x] 13.4 测试 CalendarV2 的交易列表功能

## 14. 清理旧代码

- [x] 14.1 删除 `Web/src/components/TransactionList.vue`
- [x] 14.2 检查并删除相关的未使用导入
- [x] 14.3 更新 `AGENTS.md` 或相关文档，说明新组件的使用方式
- [x] 14.4 提交代码变更（Git commit）

## 15. 测试和验证

- [ ] 15.1 编写单元测试（Vue Test Utils，测试 props、emits、筛选、排序逻辑）
- [ ] 15.2 手动测试所有功能点（筛选、排序、分页、删除、多选、详情）
- [ ] 15.3 测试暗黑模式显示效果
- [ ] 15.4 测试不同屏幕尺寸的响应式布局
- [ ] 15.5 测试 API 错误处理和边界情况（空数据、网络错误等）
- [ ] 15.6 回归测试所有迁移页面，确保无功能丢失
- [ ] 15.7 性能测试（加载 1000+ 条数据时的流畅度）

## 16. 文档和收尾

- [x] 16.1 编写组件使用文档（Props、Emits、Slots 说明）
- [x] 16.2 更新 `Web/src/views/AGENTS.md`（如有）
- [x] 16.3 在组件文件顶部添加 JSDoc 注释
- [x] 16.4 代码格式化（pnpm lint）
- [x] 16.5 构建测试（pnpm build）
- [x] 16.6 最终代码审查