c8dc654fd4
- Plan cards with feature comparison and pricing - Usage progress bars with quota visualization - Alipay/WeChat Pay method selection modal - Payment status polling with auto-refresh on success - Navigation + route registration Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
353 lines
12 KiB
TypeScript
353 lines
12 KiB
TypeScript
// ============================================================
|
||
// 计费管理 — 计划/订阅/用量/支付
|
||
// ============================================================
|
||
|
||
import { useState } from 'react'
|
||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
|
||
import {
|
||
Button, message, Tag, Modal, Card, Row, Col, Statistic, Typography,
|
||
Progress, Space, Radio, Spin, Empty, Divider,
|
||
} from 'antd'
|
||
import {
|
||
CrownOutlined, CheckCircleOutlined, ThunderboltOutlined,
|
||
RocketOutlined, TeamOutlined, AlipayCircleOutlined,
|
||
WechatOutlined, LoadingOutlined,
|
||
} from '@ant-design/icons'
|
||
import { PageHeader } from '@/components/PageHeader'
|
||
import { ErrorState } from '@/components/ErrorState'
|
||
import { billingService } from '@/services/billing'
|
||
import type { BillingPlan, SubscriptionInfo, PaymentResult } from '@/services/billing'
|
||
|
||
const { Text, Title } = Typography
|
||
|
||
// === 计划卡片 ===
|
||
|
||
const planIcons: Record<string, React.ReactNode> = {
|
||
free: <RocketOutlined style={{ fontSize: 24 }} />,
|
||
pro: <ThunderboltOutlined style={{ fontSize: 24 }} />,
|
||
team: <TeamOutlined style={{ fontSize: 24 }} />,
|
||
}
|
||
|
||
const planColors: Record<string, string> = {
|
||
free: '#8c8c8c',
|
||
pro: '#863bff',
|
||
team: '#47bfff',
|
||
}
|
||
|
||
function PlanCard({
|
||
plan,
|
||
isCurrent,
|
||
onSelect,
|
||
}: {
|
||
plan: BillingPlan
|
||
isCurrent: boolean
|
||
onSelect: (plan: BillingPlan) => void
|
||
}) {
|
||
const color = planColors[plan.name] || '#666'
|
||
const limits = plan.limits as Record<string, unknown> | undefined
|
||
const maxRelay = (limits?.max_relay_requests_monthly as number) ?? '∞'
|
||
const maxHand = (limits?.max_hand_executions_monthly as number) ?? '∞'
|
||
const maxPipeline = (limits?.max_pipeline_runs_monthly as number) ?? '∞'
|
||
|
||
return (
|
||
<Card
|
||
className={`relative overflow-hidden transition-all duration-200 hover:shadow-lg ${
|
||
isCurrent ? 'ring-2 ring-offset-2' : ''
|
||
}`}
|
||
style={isCurrent ? { borderColor: color, '--tw-ring-color': color } as React.CSSProperties : {}}
|
||
>
|
||
{isCurrent && (
|
||
<div
|
||
className="absolute top-0 right-0 px-3 py-1 text-xs font-medium text-white rounded-bl-lg"
|
||
style={{ background: color }}
|
||
>
|
||
当前计划
|
||
</div>
|
||
)}
|
||
|
||
<div className="text-center mb-4">
|
||
<div style={{ color }} className="mb-2">
|
||
{planIcons[plan.name] || <CrownOutlined style={{ fontSize: 24 }} />}
|
||
</div>
|
||
<Title level={4} style={{ margin: 0 }}>{plan.display_name}</Title>
|
||
{plan.description && (
|
||
<Text type="secondary" className="text-sm">{plan.description}</Text>
|
||
)}
|
||
</div>
|
||
|
||
<div className="text-center mb-4">
|
||
<span className="text-3xl font-bold" style={{ color }}>
|
||
¥{plan.price_cents === 0 ? '0' : (plan.price_cents / 100).toFixed(0)}
|
||
</span>
|
||
<Text type="secondary"> /{plan.interval === 'month' ? '月' : '年'}</Text>
|
||
</div>
|
||
|
||
<div className="space-y-2 text-sm">
|
||
<div className="flex items-center gap-2">
|
||
<CheckCircleOutlined style={{ color: '#52c41a' }} />
|
||
<span>中转请求: {maxRelay === Infinity ? '无限' : `${maxRelay} 次/月`}</span>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<CheckCircleOutlined style={{ color: '#52c41a' }} />
|
||
<span>Hand 执行: {maxHand === Infinity ? '无限' : `${maxHand} 次/月`}</span>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<CheckCircleOutlined style={{ color: '#52c41a' }} />
|
||
<span>Pipeline 运行: {maxPipeline === Infinity ? '无限' : `${maxPipeline} 次/月`}</span>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<CheckCircleOutlined style={{ color: '#52c41a' }} />
|
||
<span>知识库: {plan.name === 'free' ? '基础' : '高级'}</span>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<CheckCircleOutlined style={{ color: '#52c41a' }} />
|
||
<span>优先级队列: {plan.name === 'team' ? '最高' : plan.name === 'pro' ? '高' : '标准'}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<Divider />
|
||
|
||
<Button
|
||
block
|
||
type={isCurrent ? 'default' : 'primary'}
|
||
disabled={isCurrent}
|
||
onClick={() => onSelect(plan)}
|
||
style={!isCurrent ? { background: color, borderColor: color } : {}}
|
||
>
|
||
{isCurrent ? '当前计划' : '升级'}
|
||
</Button>
|
||
</Card>
|
||
)
|
||
}
|
||
|
||
// === 用量进度条 ===
|
||
|
||
function UsageBar({ label, current, max }: { label: string; current: number; max: number | null }) {
|
||
const pct = max ? Math.min((current / max) * 100, 100) : 0
|
||
const displayMax = max ? max.toLocaleString() : '∞'
|
||
|
||
return (
|
||
<div className="mb-3">
|
||
<div className="flex justify-between text-xs text-neutral-500 dark:text-neutral-400 mb-1">
|
||
<span>{label}</span>
|
||
<span>{current.toLocaleString()} / {displayMax}</span>
|
||
</div>
|
||
<Progress
|
||
percent={pct}
|
||
showInfo={false}
|
||
strokeColor={pct >= 90 ? '#ff4d4f' : pct >= 70 ? '#faad14' : '#863bff'}
|
||
size="small"
|
||
/>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// === 主页面 ===
|
||
|
||
export default function Billing() {
|
||
const queryClient = useQueryClient()
|
||
const [payModalOpen, setPayModalOpen] = useState(false)
|
||
const [selectedPlan, setSelectedPlan] = useState<BillingPlan | null>(null)
|
||
const [payMethod, setPayMethod] = useState<'alipay' | 'wechat'>('alipay')
|
||
const [payResult, setPayResult] = useState<PaymentResult | null>(null)
|
||
const [pollingPayment, setPollingPayment] = useState<string | null>(null)
|
||
|
||
const { data: plans = [], isLoading: plansLoading, error: plansError, refetch } = useQuery({
|
||
queryKey: ['billing-plans'],
|
||
queryFn: ({ signal }) => billingService.listPlans(signal),
|
||
})
|
||
|
||
const { data: subInfo, isLoading: subLoading } = useQuery({
|
||
queryKey: ['billing-subscription'],
|
||
queryFn: ({ signal }) => billingService.getSubscription(signal),
|
||
})
|
||
|
||
// 支付状态轮询
|
||
const { data: paymentStatus } = useQuery({
|
||
queryKey: ['payment-status', pollingPayment],
|
||
queryFn: ({ signal }) => billingService.getPaymentStatus(pollingPayment!, signal),
|
||
enabled: !!pollingPayment,
|
||
refetchInterval: pollingPayment ? 3000 : false,
|
||
})
|
||
|
||
// 支付成功后刷新
|
||
if (paymentStatus?.status === 'succeeded' && pollingPayment) {
|
||
setPollingPayment(null)
|
||
setPayModalOpen(false)
|
||
setPayResult(null)
|
||
message.success('支付成功！计划已更新')
|
||
queryClient.invalidateQueries({ queryKey: ['billing-subscription'] })
|
||
}
|
||
|
||
const createPaymentMutation = useMutation({
|
||
mutationFn: (data: { plan_id: string; payment_method: 'alipay' | 'wechat' }) =>
|
||
billingService.createPayment(data),
|
||
onSuccess: (result) => {
|
||
setPayResult(result)
|
||
setPollingPayment(result.payment_id)
|
||
// 打开支付链接
|
||
window.open(result.pay_url, '_blank', 'width=480,height=640')
|
||
},
|
||
onError: (err: Error) => message.error(err.message || '创建支付失败'),
|
||
})
|
||
|
||
const handleSelectPlan = (plan: BillingPlan) => {
|
||
if (plan.price_cents === 0) return
|
||
setSelectedPlan(plan)
|
||
setPayResult(null)
|
||
setPayModalOpen(true)
|
||
}
|
||
|
||
const handleConfirmPay = () => {
|
||
if (!selectedPlan) return
|
||
createPaymentMutation.mutate({
|
||
plan_id: selectedPlan.id,
|
||
payment_method: payMethod,
|
||
})
|
||
}
|
||
|
||
if (plansError) {
|
||
return (
|
||
<>
|
||
<PageHeader title="计费管理" description="管理订阅计划和用量配额" />
|
||
<ErrorState message={(plansError as Error).message} onRetry={() => refetch()} />
|
||
</>
|
||
)
|
||
}
|
||
|
||
const currentPlanName = subInfo?.plan?.name || 'free'
|
||
const usage = subInfo?.usage
|
||
|
||
return (
|
||
<div>
|
||
<PageHeader title="计费管理" description="管理订阅计划和用量配额" />
|
||
|
||
{/* 当前计划 + 用量 */}
|
||
{subInfo && usage && (
|
||
<Card className="mb-6" title={<span className="text-sm font-semibold">当前用量</span>}>
|
||
<Row gutter={[24, 16]}>
|
||
<Col xs={24} md={8}>
|
||
<UsageBar
|
||
label="中转请求"
|
||
current={usage.relay_requests}
|
||
max={usage.max_relay_requests}
|
||
/>
|
||
</Col>
|
||
<Col xs={24} md={8}>
|
||
<UsageBar
|
||
label="Hand 执行"
|
||
current={usage.hand_executions}
|
||
max={usage.max_hand_executions}
|
||
/>
|
||
</Col>
|
||
<Col xs={24} md={8}>
|
||
<UsageBar
|
||
label="Pipeline 运行"
|
||
current={usage.pipeline_runs}
|
||
max={usage.max_pipeline_runs}
|
||
/>
|
||
</Col>
|
||
</Row>
|
||
|
||
{subInfo.subscription && (
|
||
<div className="mt-4 text-xs text-neutral-400">
|
||
订阅周期: {new Date(subInfo.subscription.current_period_start).toLocaleDateString()} — {new Date(subInfo.subscription.current_period_end).toLocaleDateString()}
|
||
</div>
|
||
)}
|
||
</Card>
|
||
)}
|
||
|
||
{/* 计划选择 */}
|
||
<Title level={5} className="mb-4">选择计划</Title>
|
||
|
||
{plansLoading ? (
|
||
<div className="flex justify-center py-8"><Spin /></div>
|
||
) : (
|
||
<Row gutter={[16, 16]}>
|
||
{plans.map((plan) => (
|
||
<Col key={plan.id} xs={24} sm={12} lg={8}>
|
||
<PlanCard
|
||
plan={plan}
|
||
isCurrent={plan.name === currentPlanName}
|
||
onSelect={handleSelectPlan}
|
||
/>
|
||
</Col>
|
||
))}
|
||
</Row>
|
||
)}
|
||
|
||
{/* 支付弹窗 */}
|
||
<Modal
|
||
title={selectedPlan ? `升级到 ${selectedPlan.display_name}` : '支付'}
|
||
open={payModalOpen}
|
||
onCancel={() => {
|
||
setPayModalOpen(false)
|
||
setPollingPayment(null)
|
||
setPayResult(null)
|
||
}}
|
||
footer={payResult ? null : undefined}
|
||
onOk={handleConfirmPay}
|
||
okText={createPaymentMutation.isPending ? '处理中...' : '确认支付'}
|
||
confirmLoading={createPaymentMutation.isPending}
|
||
>
|
||
{payResult ? (
|
||
<div className="text-center py-4">
|
||
<LoadingOutlined style={{ fontSize: 32, color: '#863bff' }} className="mb-4" />
|
||
<Title level={5}>等待支付确认...</Title>
|
||
<Text type="secondary">
|
||
支付窗口已打开，请在新窗口完成支付。
|
||
<br />
|
||
支付金额: ¥{(payResult.amount_cents / 100).toFixed(2)}
|
||
</Text>
|
||
<div className="mt-4">
|
||
<Button onClick={() => { setPollingPayment(null); setPayModalOpen(false); setPayResult(null) }}>
|
||
关闭
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div>
|
||
{selectedPlan && (
|
||
<div className="text-center mb-6">
|
||
<div className="text-2xl font-bold" style={{ color: planColors[selectedPlan.name] || '#666' }}>
|
||
¥{(selectedPlan.price_cents / 100).toFixed(0)}
|
||
</div>
|
||
<Text type="secondary">/{selectedPlan.interval === 'month' ? '月' : '年'}</Text>
|
||
</div>
|
||
)}
|
||
|
||
<Title level={5} className="text-center mb-4">选择支付方式</Title>
|
||
|
||
<Radio.Group
|
||
value={payMethod}
|
||
onChange={(e) => setPayMethod(e.target.value)}
|
||
className="w-full"
|
||
>
|
||
<Space direction="vertical" className="w-full" size={12}>
|
||
<Radio value="alipay" className="w-full">
|
||
<div className="flex items-center gap-3 p-3 border rounded-lg w-full hover:border-blue-400 transition-colors">
|
||
<AlipayCircleOutlined style={{ fontSize: 28, color: '#1677ff' }} />
|
||
<div>
|
||
<div className="font-medium">支付宝</div>
|
||
<div className="text-xs text-neutral-400">推荐个人用户</div>
|
||
</div>
|
||
</div>
|
||
</Radio>
|
||
<Radio value="wechat" className="w-full">
|
||
<div className="flex items-center gap-3 p-3 border rounded-lg w-full hover:border-green-400 transition-colors">
|
||
<WechatOutlined style={{ fontSize: 28, color: '#07c160' }} />
|
||
<div>
|
||
<div className="font-medium">微信支付</div>
|
||
<div className="text-xs text-neutral-400">扫码支付</div>
|
||
</div>
|
||
</div>
|
||
</Radio>
|
||
</Space>
|
||
</Radio.Group>
|
||
</div>
|
||
)}
|
||
</Modal>
|
||
</div>
|
||
)
|
||
}
|