new-api/.plans/alipay-payment/frontend-dev/task-alipay-frontend/task_plan.md

支付宝前端 - 任务计划

所属智能体: 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 遵循现有命名规范