6e95568906
All checks were successful
Docker Build & Deploy / Build Docker Image (push) Successful in 18s
Docker Build & Deploy / Deploy to Production (push) Successful in 6s
Docker Build & Deploy / Cleanup Dangling Images (push) Successful in 0s
Docker Build & Deploy / WeChat Notification (push) Successful in 1s
1.9 KiB
1.9 KiB
Why
TransactionDetailSheet.vue 组件有良好的样式设计（圆角、Inter 字体、清晰的布局层次），但头部标题和底部操作按钮没有固定定位，当内容较多时会随着滚动而移动，影响用户体验。同时，项目中其他弹窗可能也需要类似的固定头部/底部布局。因此需要将 TransactionDetailSheet 的样式和布局模式抽取为通用的 PopupContainer v2 组件，提供固定头部和底部的能力，方便在项目中复用。
What Changes
- 创建新的
PopupContainerV2.vue通用弹窗组件- 使用 TransactionDetailSheet 的样式风格（
borderTopLeftRadius: 16px, Inter 字体,#ffffff/#18181b背景） - 提供固定头部区域（标题 + 可选关闭按钮）
- 提供可滚动内容区域（default 插槽）
- 提供固定底部区域（footer 插槽）
- 支持暗色模式
- 使用 TransactionDetailSheet 的样式风格（
- 重构
TransactionDetailSheet.vue使用新的 PopupContainerV2 组件- 移除原有的头部和布局代码
- 将内容和操作按钮迁移到对应插槽
- 保持所有业务逻辑和功能不变
Capabilities
New Capabilities
popup-container-v2: 新的通用弹窗组件，提供固定头部/底部布局，采用 TransactionDetailSheet 的样式风格
Modified Capabilities
transaction-detail-ui: TransactionDetailSheet 的 UI 布局从直接使用 van-popup 改为使用 PopupContainerV2，头部和底部固定，内容区域可滚动
Impact
- 新增文件:
Web/src/components/PopupContainerV2.vue - 受影响文件:
Web/src/components/Transaction/TransactionDetailSheet.vue - 用户影响: 改善交易详情弹窗的交互体验，头部和操作按钮始终可见
- 可复用性: 新组件可用于项目中其他需要固定头部/底部的弹窗场景
- 兼容性: TransactionDetailSheet 对外 API（props、events）保持不变，不影响调用方