# 支付宝前端 - 任务计划

> 所属智能体: frontend-dev
> 状态: pending
> 创建: 2026-04-14

## 目标

实现支付宝当面付的前端功能，包括管理后台设置页、用户充值页改造、二维码模态框重构。

## 详细步骤

- [ ] 1. 重构 `WechatPayQRCodeModal.jsx` → 通用 `QRCodePayModal`（新增 title/subtitle/statusApiPath props）
- [ ] 2. 新建 `SettingsPaymentGatewayAlipay.jsx`：管理后台支付宝设置页
- [ ] 3. 修改 `PaymentSetting.jsx`：导入支付宝设置组件 + getOptions 解析 + 渲染
- [ ] 4. 修改 `topup/index.jsx`：支付宝状态变量 + API 调用 + 模态框渲染
- [ ] 5. 修改 `RechargeCard.jsx`：传递 enableAlipayTopUp prop
- [ ] 6. 更新 i18n 翻译文件
- [ ] 7. `bun run build` 验证编译通过

## 涉及文件

- `web/src/components/topup/WechatPayQRCodeModal.jsx` — 重构为通用模态框
- `web/src/pages/Setting/Payment/SettingsPaymentGatewayAlipay.jsx` — 新建
- `web/src/components/settings/PaymentSetting.jsx` — 修改
- `web/src/components/topup/index.jsx` — 修改
- `web/src/components/topup/RechargeCard.jsx` — 修改（最小）
- `web/src/i18n/locales/en.json` — 修改（翻译）

## 关键技术点

- QRCodePayModal 需要兼容微信和支付宝两种场景
- 支付宝轮询 API: /api/user/alipay/pay/status
- 支付宝创建订单 API: POST /api/user/alipay/pay
- 支付宝图标 SiAlipay 已存在于 RechargeCard.jsx
- i18n key 遵循现有命名规范