fix

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

@@ -0,0 +1,34 @@
+## 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）保持不变，不影响调用方