feat(admin-v2): add billing management page

- 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>

admin-v2/src/layouts/AdminLayout.tsx

@@ -17,6 +17,7 @@ import {
   MoonOutlined,
   ApiOutlined,
   BookOutlined,
+  CrownOutlined,
 } from '@ant-design/icons'
 import { Avatar, Dropdown, Tooltip, Drawer } from 'antd'
 import { useAuthStore } from '@/stores/authStore'
@@ -44,6 +45,7 @@ const navItems: NavItem[] = [
   { path: '/usage', name: '用量统计', icon: <BarChartOutlined />, permission: 'admin:full', group: '运维' },
   { path: '/relay', name: '中转任务', icon: <SwapOutlined />, permission: 'relay:use', group: '运维' },
   { path: '/knowledge', name: '知识库', icon: <BookOutlined />, permission: 'knowledge:read', group: '资源管理' },
+  { path: '/billing', name: '计费管理', icon: <CrownOutlined />, permission: 'billing:read', group: '核心' },
   { path: '/logs', name: '操作日志', icon: <FileTextOutlined />, permission: 'admin:full', group: '运维' },
   { path: '/config', name: '系统配置', icon: <SettingOutlined />, permission: 'config:read', group: '系统' },
   { path: '/prompts', name: '提示词管理', icon: <MessageOutlined />, permission: 'prompt:read', group: '系统' },
@@ -207,6 +209,7 @@ const breadcrumbMap: Record<string, string> = {
   '/usage': '用量统计',
   '/relay': '中转任务',
   '/knowledge': '知识库',
+  '/billing': '计费管理',
   '/config': '系统配置',
   '/prompts': '提示词管理',
   '/logs': '操作日志',

admin-v2/src/pages/Billing.tsx

@@ -0,0 +1,352 @@
+// ============================================================
+// 计费管理 — 计划/订阅/用量/支付
+// ============================================================
+
+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>
+  )
+}

admin-v2/src/router/index.tsx

@@ -27,6 +27,7 @@ export const router = createBrowserRouter([
       { path: 'agent-templates', lazy: () => import('@/pages/AgentTemplates').then((m) => ({ Component: m.default })) },
       { path: 'api-keys', lazy: () => import('@/pages/ModelServices').then((m) => ({ Component: m.default })) },
       { path: 'usage', lazy: () => import('@/pages/Usage').then((m) => ({ Component: m.default })) },
+      { path: 'billing', lazy: () => import('@/pages/Billing').then((m) => ({ Component: m.default })) },
       { path: 'relay', lazy: () => import('@/pages/Relay').then((m) => ({ Component: m.default })) },
       { path: 'knowledge', lazy: () => import('@/pages/Knowledge').then((m) => ({ Component: m.default })) },
       { path: 'config', lazy: () => import('@/pages/Config').then((m) => ({ Component: m.default })) },

admin-v2/src/services/billing.ts

@@ -0,0 +1,101 @@
+import request, { withSignal } from './request'
+
+// === Types ===
+
+export interface BillingPlan {
+  id: string
+  name: string
+  display_name: string
+  description: string | null
+  price_cents: number
+  currency: string
+  interval: string
+  features: Record<string, unknown>
+  limits: Record<string, unknown>
+  is_default: boolean
+  sort_order: number
+  status: string
+  created_at: string
+  updated_at: string
+}
+
+export interface Subscription {
+  id: string
+  account_id: string
+  plan_id: string
+  status: string
+  current_period_start: string
+  current_period_end: string
+  trial_end: string | null
+  canceled_at: string | null
+  cancel_at_period_end: boolean
+  created_at: string
+  updated_at: string
+}
+
+export interface UsageQuota {
+  id: string
+  account_id: string
+  period_start: string
+  period_end: string
+  input_tokens: number
+  output_tokens: number
+  relay_requests: number
+  hand_executions: number
+  pipeline_runs: number
+  max_input_tokens: number | null
+  max_output_tokens: number | null
+  max_relay_requests: number | null
+  max_hand_executions: number | null
+  max_pipeline_runs: number | null
+  created_at: string
+  updated_at: string
+}
+
+export interface SubscriptionInfo {
+  plan: BillingPlan
+  subscription: Subscription | null
+  usage: UsageQuota
+}
+
+export interface PaymentResult {
+  payment_id: string
+  trade_no: string
+  pay_url: string
+  amount_cents: number
+}
+
+export interface PaymentStatus {
+  id: string
+  method: string
+  amount_cents: number
+  currency: string
+  status: string
+}
+
+// === Service ===
+
+export const billingService = {
+  listPlans: (signal?: AbortSignal) =>
+    request.get<BillingPlan[]>('/billing/plans', withSignal({}, signal))
+      .then((r) => r.data),
+
+  getPlan: (id: string, signal?: AbortSignal) =>
+    request.get<BillingPlan>(`/billing/plans/${id}`, withSignal({}, signal))
+      .then((r) => r.data),
+
+  getSubscription: (signal?: AbortSignal) =>
+    request.get<SubscriptionInfo>('/billing/subscription', withSignal({}, signal))
+      .then((r) => r.data),
+
+  getUsage: (signal?: AbortSignal) =>
+    request.get<UsageQuota>('/billing/usage', withSignal({}, signal))
+      .then((r) => r.data),
+
+  createPayment: (data: { plan_id: string; payment_method: 'alipay' | 'wechat' }) =>
+    request.post<PaymentResult>('/billing/payments', data).then((r) => r.data),
+
+  getPaymentStatus: (id: string, signal?: AbortSignal) =>
+    request.get<PaymentStatus>(`/billing/payments/${id}`, withSignal({}, signal))
+      .then((r) => r.data),
+}