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
35 lines
1.9 KiB
Markdown
35 lines
1.9 KiB
Markdown
## Why
|
||
|
||
`TransactionDetailSheet.vue` 组件有良好的样式设计（圆角、Inter 字体、清晰的布局层次），但头部标题和底部操作按钮没有固定定位，当内容较多时会随着滚动而移动，影响用户体验。同时，项目中其他弹窗可能也需要类似的固定头部/底部布局。因此需要将 TransactionDetailSheet 的样式和布局模式抽取为通用的 PopupContainer v2 组件，提供固定头部和底部的能力，方便在项目中复用。
|
||
|
||
## What Changes
|
||
|
||
- 创建新的 `PopupContainerV2.vue` 通用弹窗组件
|
||
- 使用 TransactionDetailSheet 的样式风格（`borderTopLeftRadius: 16px`, Inter 字体, `#ffffff` / `#18181b` 背景）
|
||
- 提供固定头部区域（标题 + 可选关闭按钮）
|
||
- 提供可滚动内容区域（default 插槽）
|
||
- 提供固定底部区域（footer 插槽）
|
||
- 支持暗色模式
|
||
- 重构 `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）保持不变，不影响调用方
|