From c09b9d66a6ec02da154cabfecb3793a5c72c2f98 Mon Sep 17 00:00:00 2001
From: xiaoxia <dev@xiaoxiajianji.com>
Date: Tue, 15 Sep 2026 08:39:07 +0800
Subject: [PATCH] feat(points): apps/web/src/pages/points/Packages.tsx

---
 apps/web/src/pages/points/Packages.tsx | 167 +++++++++++++++++++++++++
 1 file changed, 167 insertions(+)
 create mode 100644 apps/web/src/pages/points/Packages.tsx

diff --git a/apps/web/src/pages/points/Packages.tsx b/apps/web/src/pages/points/Packages.tsx
new file mode 100644
index 000000000..17ef5f025
--- /dev/null
+++ b/apps/web/src/pages/points/Packages.tsx
@@ -0,0 +1,167 @@
+/**
+ * 积分充值页（/app/points/recharge）
+ * 单独展示积分包，供入口直接跳转使用
+ * 主 Plans 页面也有充值区，这里提供独立 URL 方便从"积分不足"弹窗跳转
+ */
+import React, { useEffect, useState } from "react"
+import { Card, Col, Row, Button, Tag, Typography, Space, Modal, message, Tooltip } from "antd"
+import { DiamondOutlined, SafetyCertificateOutlined, CrownFilled } from "@ant-design/icons"
+import { useNavigate } from "react-router-dom"
+import PageHead from "@/components/layout/PageHead"
+import { usePointsStore } from "@/store/pointsStore"
+import { createPointsOrder, getPointsPackages } from "@/api/points"
+import type { PointsPackage } from "@/api/points/types"
+import "./Points.css"
+
+const { Title, Text, Paragraph } = Typography
+
+const PointsRecharge: React.FC = () => {
+  const navigate = useNavigate()
+  const { balance, init } = usePointsStore()
+  const [packages, setPackages] = useState<PointsPackage[]>([])
+  const [buying, setBuying] = useState<string | null>(null)
+
+  useEffect(() => {
+    init()
+    getPointsPackages()
+      .then((r) => setPackages(r.packages))
+      .catch(() => {})
+  }, [init])
+
+  const getPackPrice = (pkg: PointsPackage): number => {
+    const mt = balance?.member_type ?? "free"
+    const key = `discounted_price_for_${mt}` as const
+    return (pkg as any)[key] ?? pkg.price
+  }
+
+  const handleBuy = async (pkg: PointsPackage) => {
+    try {
+      setBuying(pkg.id)
+      const order = await createPointsOrder({ package_id: pkg.id })
+      Modal.info({
+        title: "支付功能开发中",
+        icon: <SafetyCertificateOutlined />,
+        content: (
+          <div>
+            <Paragraph>
+              订单已创建（{order.id.slice(0, 16)}…），金额{" "}
+              <b>¥{(order.price_cents / 100).toFixed(2).replace(/\.00$/, "")}</b>。
+              微信/支付宝支付正在接入中。
+            </Paragraph>
+            <Paragraph type="secondary" style={{ marginBottom: 0 }}>
+              现阶段所有功能免费体验，积分仅为演示数据。
+            </Paragraph>
+          </div>
+        ),
+        okText: "知道了",
+      })
+    } catch (e: any) {
+      message.error(e?.message ?? "下单失败")
+    } finally {
+      setBuying(null)
+    }
+  }
+
+  return (
+    <div className="xx-points-page">
+      <PageHead
+        title="积分充值"
+        description="积分永久有效，可用于全部 AI 功能；付费会员享折扣"
+        extra={
+          <Space>
+            {!balance?.is_member && (
+              <Button icon={<CrownFilled />} onClick={() => navigate("/app/subscription")}>
+                升级会员 8 折起
+              </Button>
+            )}
+            <Button onClick={() => navigate("/app/points/transactions")}>积分明细</Button>
+          </Space>
+        }
+      />
+
+      {balance && (
+        <Card
+          bordered={false}
+          style={{ marginBottom: 16, background: "linear-gradient(135deg,#ede9fe,#fce7f3)" }}
+        >
+          <Space size="large">
+            <div>
+              <Text type="secondary">当前可用积分</Text>
+              <div style={{ fontSize: 28, fontWeight: 800, color: "#7c3aed" }}>
+                <DiamondOutlined /> {balance.balance.toLocaleString()}
+              </div>
+            </div>
+          </Space>
+        </Card>
+      )}
+
+      <Title level={4}>选择积分包</Title>
+      <Row gutter={[20, 20]}>
+        {packages.map((pkg) => {
+          const price = getPackPrice(pkg)
+          const discount = price < pkg.price ? Math.round((1 - price / pkg.price) * 100) : 0
+          const unit = price / pkg.points
+          return (
+            <Col xs={24} sm={12} md={8} key={pkg.id}>
+              <Card
+                className={`xx-pkg-card ${pkg.id === "basic_pack" ? "recommended" : ""} ${discount > 0 ? "has-discount" : ""}`}
+                hoverable
+              >
+                {pkg.id === "basic_pack" && <div className="xx-pkg-badge">热门</div>}
+                {discount > 0 && (
+                  <Tag color="gold" className="xx-pkg-discount">
+                    会员{10 - discount / 10}折
+                  </Tag>
+                )}
+                <div className="xx-pkg-name">{pkg.name}</div>
+                <div className="xx-pkg-points">
+                  <DiamondOutlined /> {pkg.points.toLocaleString()} 积分
+                </div>
+                <div className="xx-pkg-price">
+                  <span className="currency">¥</span>
+                  <span className="amount">
+                    {(price / 100).toFixed(price % 100 === 0 ? 0 : 1).replace(/\.0$/, "")}
+                  </span>
+                  {discount > 0 && (
+                    <span className="xx-pkg-origin">¥{(pkg.price / 100).toFixed(0)}</span>
+                  )}
+                </div>
+                <div className="xx-pkg-unit">≈¥{unit.toFixed(3)}/积分 · 永久有效</div>
+                <Button
+                  block
+                  type={pkg.id === "basic_pack" ? "primary" : "default"}
+                  loading={buying === pkg.id}
+                  onClick={() => handleBuy(pkg)}
+                  size="large"
+                  style={{ marginTop: 16 }}
+                >
+                  立即购买
+                </Button>
+              </Card>
+            </Col>
+          )
+        })}
+      </Row>
+
+      <Card style={{ marginTop: 24 }}>
+        <Title level={5}>积分消耗说明</Title>
+        <ul style={{ paddingLeft: 20, color: "var(--text-secondary)", lineHeight: 2 }}>
+          <li>智能混剪：3 积分/条（≤30s），每加 30s +1 积分</li>
+          <li>AI 配音 / 声音克隆合成：1 积分/分钟</li>
+          <li>AI 数字人：15 积分/分钟</li>
+          <li>抖音链接提取 / AI 改写 / AI 标题 / AI 封面：1~2 积分/次</li>
+          <li>声音克隆训练：免费</li>
+          <li>免费用户每日 2 条混剪免费，其余 AI 功能消耗为会员价 ×1.15</li>
+        </ul>
+        <Tooltip title="具体规则以系统实际计算为准">
+          <Text type="secondary" style={{ fontSize: 12 }}>
+            <SafetyCertificateOutlined /> 所有规则以页面实际显示为准
+          </Text>
+        </Tooltip>
+      </Card>
+    </div>
+  )
+}
+
+export default PointsRecharge
+export const Component = PointsRecharge