EmailBill/openspec/changes/archive/2026-02-20-refactor-popup-container-component/tasks.md

1. 创建 PopupContainerV2.vue 组件

• 1.1 创建文件 Web/src/components/PopupContainerV2.vue
• 1.2 实现基础结构（基于 van-popup，16px 圆角，#ffffff / #18181b 背景）
• 1.3 实现固定头部区域（标题 + 关闭按钮，Inter 18px font-weight 600）
• 1.4 实现可滚动内容区域（default 插槽，flex: 1, overflow-y: auto）
• 1.5 实现固定底部区域（footer 插槽，border-top 分隔线）
• 1.6 实现暗色模式支持（@media prefers-color-scheme: dark）
• 1.7 添加组件文档注释（说明 API、使用示例、与 v1 的区别）

2. 重构 TransactionDetailSheet.vue 使用 PopupContainerV2

• 2.1 引入 PopupContainerV2 组件
• 2.2 将 van-popup 替换为 PopupContainerV2
• 2.3 移除自定义 .sheet-header 头部区域（使用 PopupContainerV2 的 title prop）
• 2.4 将金额区域、表单区域、分类选择器保留在 default 插槽中
• 2.5 将操作按钮区域（删除、保存）移入 PopupContainerV2 的 #footer 插槽
• 2.6 移除 handleClose 方法（PopupContainerV2 自动处理）

3. 调整 TransactionDetailSheet 样式

• 3.1 移除 .transaction-detail-sheet 外层容器样式
• 3.2 调整各内容区域的 padding（金额区域、表单区域、分类选择器）
• 3.3 移除 .sheet-header 相关样式
• 3.4 调整暗色模式样式（移除已由 PopupContainerV2 处理的部分）

4. 功能验证

• 4.1 测试弹窗打开/关闭功能
• 4.2 测试金额编辑功能（点击进入编辑模式、输入、失焦格式化）
• 4.3 测试日期时间选择功能（弹出选择器、确认更新）
• 4.4 测试类型切换功能（支出/收入/不计）
• 4.5 测试分类选择功能（展开选择器、选择分类、自动保存）
• 4.6 测试备注输入功能
• 4.7 测试保存功能（验证、API 调用、成功提示）
• 4.8 测试删除功能（确认对话框、API 调用、成功提示）

5. 布局验证

• 5.1 验证头部标题固定不滚动
• 5.2 验证底部操作按钮固定不滚动
• 5.3 验证内容区域可独立滚动
• 5.4 验证分类选择器展开后的滚动体验
• 5.5 验证不同内容长度下的布局表现
• 5.6 验证弹窗圆角为 16px
• 5.7 验证标题字体为 Inter 18px font-weight 600

6. 兼容性验证

• 6.1 验证 Props 接口不变（show, transaction）
• 6.2 验证 Events 接口不变（update:show, save, delete）
• 6.3 验证调用方无需修改代码
• 6.4 测试日期选择器弹窗的 z-index 层级（确保在 PopupContainerV2 之上）
• 6.5 验证暗色模式下的样式表现

7. 清理和文档

• 7.1 移除不再使用的代码和注释
• 7.2 确保代码符合项目 ESLint 规范（pnpm lint）
• 7.3 在本地运行前端项目验证无报错（pnpm build）