61 lines
2.9 KiB
Markdown
61 lines
2.9 KiB
Markdown
|
## 1. 创建 PopupContainerV2.vue 组件
|
|||
|
|
|
|||
|
|
- [x] 1.1 创建文件 `Web/src/components/PopupContainerV2.vue`
|
|||
|
|
- [x] 1.2 实现基础结构（基于 van-popup，16px 圆角，#ffffff / #18181b 背景）
|
|||
|
|
- [x] 1.3 实现固定头部区域（标题 + 关闭按钮，Inter 18px font-weight 600）
|
|||
|
|
- [x] 1.4 实现可滚动内容区域（default 插槽，flex: 1, overflow-y: auto）
|
|||
|
|
- [x] 1.5 实现固定底部区域（footer 插槽，border-top 分隔线）
|
|||
|
|
- [x] 1.6 实现暗色模式支持（@media prefers-color-scheme: dark）
|
|||
|
|
- [x] 1.7 添加组件文档注释（说明 API、使用示例、与 v1 的区别）
|
|||
|
|
|
|||
|
|
## 2. 重构 TransactionDetailSheet.vue 使用 PopupContainerV2
|
|||
|
|
|
|||
|
|
- [x] 2.1 引入 PopupContainerV2 组件
|
|||
|
|
- [x] 2.2 将 van-popup 替换为 PopupContainerV2
|
|||
|
|
- [x] 2.3 移除自定义 `.sheet-header` 头部区域（使用 PopupContainerV2 的 title prop）
|
|||
|
|
- [x] 2.4 将金额区域、表单区域、分类选择器保留在 default 插槽中
|
|||
|
|
- [x] 2.5 将操作按钮区域（删除、保存）移入 PopupContainerV2 的 `#footer` 插槽
|
|||
|
|
- [x] 2.6 移除 handleClose 方法（PopupContainerV2 自动处理）
|
|||
|
|
|
|||
|
|
## 3. 调整 TransactionDetailSheet 样式
|
|||
|
|
|
|||
|
|
- [x] 3.1 移除 `.transaction-detail-sheet` 外层容器样式
|
|||
|
|
- [x] 3.2 调整各内容区域的 padding（金额区域、表单区域、分类选择器）
|
|||
|
|
- [x] 3.3 移除 `.sheet-header` 相关样式
|
|||
|
|
- [x] 3.4 调整暗色模式样式（移除已由 PopupContainerV2 处理的部分）
|
|||
|
|
|
|||
|
|
## 4. 功能验证
|
|||
|
|
|
|||
|
|
- [x] 4.1 测试弹窗打开/关闭功能
|
|||
|
|
- [x] 4.2 测试金额编辑功能（点击进入编辑模式、输入、失焦格式化）
|
|||
|
|
- [x] 4.3 测试日期时间选择功能（弹出选择器、确认更新）
|
|||
|
|
- [x] 4.4 测试类型切换功能（支出/收入/不计）
|
|||
|
|
- [x] 4.5 测试分类选择功能（展开选择器、选择分类、自动保存）
|
|||
|
|
- [x] 4.6 测试备注输入功能
|
|||
|
|
- [x] 4.7 测试保存功能（验证、API 调用、成功提示）
|
|||
|
|
- [x] 4.8 测试删除功能（确认对话框、API 调用、成功提示）
|
|||
|
|
|
|||
|
|
## 5. 布局验证
|
|||
|
|
|
|||
|
|
- [x] 5.1 验证头部标题固定不滚动
|
|||
|
|
- [x] 5.2 验证底部操作按钮固定不滚动
|
|||
|
|
- [x] 5.3 验证内容区域可独立滚动
|
|||
|
|
- [x] 5.4 验证分类选择器展开后的滚动体验
|
|||
|
|
- [x] 5.5 验证不同内容长度下的布局表现
|
|||
|
|
- [x] 5.6 验证弹窗圆角为 16px
|
|||
|
|
- [x] 5.7 验证标题字体为 Inter 18px font-weight 600
|
|||
|
|
|
|||
|
|
## 6. 兼容性验证
|
|||
|
|
|
|||
|
|
- [x] 6.1 验证 Props 接口不变（show, transaction）
|
|||
|
|
- [x] 6.2 验证 Events 接口不变（update:show, save, delete）
|
|||
|
|
- [x] 6.3 验证调用方无需修改代码
|
|||
|
|
- [x] 6.4 测试日期选择器弹窗的 z-index 层级（确保在 PopupContainerV2 之上）
|
|||
|
|
- [x] 6.5 验证暗色模式下的样式表现
|
|||
|
|
|
|||
|
|
## 7. 清理和文档
|
|||
|
|
|
|||
|
|
- [x] 7.1 移除不再使用的代码和注释
|
|||
|
|
- [x] 7.2 确保代码符合项目 ESLint 规范（`pnpm lint`）
|
|||
|
|
- [x] 7.3 在本地运行前端项目验证无报错（`pnpm build`）
|