EmailBill/openspec/changes/archive/2026-02-20-refactor-popup-container-component/specs/transaction-detail-ui/spec.md

ADDED Requirements

Requirement: PopupContainerV2 提供固定布局能力

PopupContainerV2 组件 SHALL 提供固定头部、可滚动内容、固定底部的布局模式，并采用 TransactionDetailSheet 的样式风格（16px 圆角、Inter 字体、纯白背景）。

Scenario: PopupContainerV2 基础结构

• WHEN 使用 PopupContainerV2 组件
• THEN 组件基于 van-popup 实现底部弹窗
• THEN 弹窗顶部圆角为 16px（borderTopLeftRadius 和 borderTopRightRadius）
• THEN 背景色为 #ffffff（亮色模式）或 #18181b（暗色模式）

Scenario: PopupContainerV2 固定头部

• WHEN 传入 title prop
• THEN 头部显示标题文本，字体为 Inter，18px，font-weight 600
• THEN 头部右侧显示关闭按钮（van-icon cross）
• THEN 头部固定在顶部，不随内容滚动

Scenario: PopupContainerV2 可滚动内容区域

• WHEN 在 default 插槽中放置内容
• THEN 内容区域可独立滚动
• THEN 滚动时头部和底部保持固定
• THEN 内容区域不提供默认 padding，由使用方控制

Scenario: PopupContainerV2 固定底部

• WHEN 在 footer 插槽中放置操作按钮
• THEN 底部区域固定在底部，不随内容滚动
• THEN 底部区域保持与内容区域的视觉分隔

Scenario: PopupContainerV2 暗色模式支持

• WHEN 系统启用暗色模式（prefers-color-scheme: dark）
• THEN 背景色切换为 #18181b
• THEN 标题文本颜色切换为 #fafafa
• THEN 关闭按钮颜色切换为 #a1a1aa

MODIFIED Requirements

Requirement: TransactionDetailSheet 使用 PopupContainerV2 实现固定布局

TransactionDetailSheet 组件 SHALL 使用 PopupContainerV2 组件实现底部弹窗，并确保头部标题和底部操作按钮固定不随内容滚动。

Scenario: 打开交易详情弹窗

• WHEN 用户点击交易记录打开详情弹窗
• THEN 弹窗从底部弹出，使用 PopupContainerV2 组件
• THEN 弹窗顶部圆角为 16px
• THEN 头部显示固定标题"交易详情"，字体为 Inter 18px
• THEN 底部固定显示"删除"和"保存"按钮
• THEN 中间内容区域（金额、时间、备注、类型、分类）可独立滚动

Scenario: 滚动交易详情内容

• WHEN 用户在交易详情弹窗中滚动内容
• THEN 头部标题始终固定在顶部可见
• THEN 底部操作按钮（删除、保存）始终固定在底部可见
• THEN 只有中间内容区域发生滚动

Scenario: 展开分类选择器后滚动

• WHEN 用户点击"分类"字段展开分类选择器
• THEN 分类选择器在内容区域内展开
• THEN 如果内容超出可视区域，用户可以滚动查看所有分类选项
• THEN 头部标题和底部按钮仍然保持固定

Requirement: 保持现有功能和交互不变

TransactionDetailSheet 组件在重构后 SHALL 保持所有现有的功能和交互逻辑不变，包括但不限于金额编辑、日期选择、分类选择、保存、删除等操作。

Scenario: 金额编辑功能保持不变

• WHEN 用户点击金额数值进入编辑模式
• THEN 金额输入框自动聚焦并选中当前值
• THEN 用户输入新金额后失焦时自动格式化为两位小数

Scenario: 日期时间选择功能保持不变

• WHEN 用户点击"时间"字段
• THEN 弹出 van-datetime-picker 日期时间选择器
• THEN 选择器显示在最顶层（不受 PopupContainerV2 层级影响）
• THEN 确认后时间更新为选择的值

Scenario: 分类选择功能保持不变

• WHEN 用户点击"分类"字段
• THEN 展开 ClassifySelector 组件
• THEN 用户可以选择分类
• THEN 选择后自动触发保存

Scenario: 保存和删除功能保持不变

• WHEN 用户点击"保存"按钮
• THEN 验证必填字段（金额、分类、时间）
• THEN 调用 updateTransaction API 更新数据
• THEN 成功后显示提示并关闭弹窗
• WHEN 用户点击"删除"按钮
• THEN 显示确认对话框
• THEN 确认后调用 deleteTransaction API 删除数据
• THEN 成功后显示提示并关闭弹窗

Requirement: 组件对外 API 兼容

TransactionDetailSheet 组件的 props 和 events SHALL 保持与重构前完全一致，确保零破坏性变更。

Scenario: Props 保持不变

• WHEN 父组件传递 show 和 transaction props
• THEN TransactionDetailSheet 正常接收并响应这些 props
• THEN 不需要修改任何调用方代码

Scenario: Events 保持不变

• WHEN 用户保存或删除交易
• THEN TransactionDetailSheet 触发 update:show, save, delete 事件
• THEN 事件参数格式与重构前完全一致