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

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

diff --git a/apps/web/src/pages/points/Center.tsx b/apps/web/src/pages/points/Center.tsx
new file mode 100644
index 000000000..ce340f23b
--- /dev/null
+++ b/apps/web/src/pages/points/Center.tsx
@@ -0,0 +1,308 @@
+/**
+ * 积分中心主页（/app/points）
+ * 展示余额、会员信息、本月统计、快捷入口
+ */
+import React, { useEffect } from "react"
+import {
+  Card,
+  Col,
+  Row,
+  Statistic,
+  Button,
+  Space,
+  Tag,
+  Typography,
+  Progress,
+  List,
+  Avatar,
+  Empty,
+} from "antd"
+import {
+  DiamondOutlined,
+  CrownFilled,
+  ArrowUpOutlined,
+  ArrowDownOutlined,
+  HistoryOutlined,
+  RechargeOutlined,
+  FileTextOutlined,
+  InfoCircleOutlined,
+} from "@ant-design/icons"
+import { useNavigate } from "react-router-dom"
+import PageHead from "@/components/layout/PageHead"
+import { usePointsStore } from "@/store/pointsStore"
+import "./Points.css"
+
+const { Title, Text } = Typography
+
+const SOURCE_NAME: Record<string, string> = {
+  recharge: "充值",
+  task_reward: "任务奖励",
+  ai_voice: "AI 配音",
+  ai_digital_human: "AI 数字人",
+  ai_video: "智能混剪",
+  voice_clone_train: "声音克隆训练",
+  voice_clone_synth: "声音克隆合成",
+  douyin_extract: "抖音提取",
+  ai_rewrite: "AI 改写",
+  ai_title: "AI 标题",
+  ai_cover: "AI 封面",
+  subscription_bonus: "会员赠送",
+  admin_adjust: "管理员调整",
+  refund: "失败退还",
+}
+
+const PointsCenter: React.FC = () => {
+  const navigate = useNavigate()
+  const { balance, subscription, init, loading } = usePointsStore()
+
+  useEffect(() => {
+    init()
+  }, [init])
+
+  const bal = balance?.balance ?? 0
+  const earned = balance?.total_earned ?? 0
+  const spent = balance?.total_spent ?? 0
+  const isMember = !!balance?.is_member
+  const freeUsed = balance?.free_clips_used ?? 0
+  const freeLimit = balance?.free_clips_limit ?? 2
+  const freeRemain = balance?.free_clips_remaining ?? (isMember ? 0 : 2)
+
+  // 近 5 条流水 mock（实际从 transactions 页加载）
+  const recentTx = [
+    { type: "spend", source: "ai_voice", amount: 1, time: "今天 10:30" },
+    { type: "spend", source: "ai_video", amount: 3, time: "今天 09:15" },
+    { type: "earn", source: "task_reward", amount: 20, time: "昨天" },
+  ]
+
+  return (
+    <div className="xx-points-page">
+      <PageHead
+        title="积分中心"
+        description="管理积分余额、查看流水、充值使用"
+        extra={
+          <Space>
+            <Button icon={<FileTextOutlined />} onClick={() => navigate("/app/points/rules")}>
+              积分规则
+            </Button>
+            <Button
+              type="primary"
+              icon={<RechargeOutlined />}
+              onClick={() => navigate("/app/subscription")}
+            >
+              充值积分
+            </Button>
+          </Space>
+        }
+      />
+
+      {/* 顶部大卡 */}
+      <Card className="xx-points-hero" bordered={false}>
+        <Row gutter={24} align="middle">
+          <Col xs={24} md={14}>
+            <Space direction="vertical" size={8} style={{ width: "100%" }}>
+              <Text type="secondary" style={{ color: "rgba(255,255,255,0.8)" }}>
+                当前可用积分
+              </Text>
+              <div className="xx-points-hero-balance">
+                <DiamondOutlined />
+                <span>{loading ? "…" : bal.toLocaleString()}</span>
+              </div>
+              <Space size={8} wrap>
+                {isMember ? (
+                  <Tag color="gold" icon={<CrownFilled />} style={{ padding: "4px 10px" }}>
+                    {subscription?.member_type === "yearly"
+                      ? "年卡"
+                      : subscription?.member_type === "quarterly"
+                        ? "季卡"
+                        : "月卡"}
+                    会员
+                  </Tag>
+                ) : (
+                  <Tag
+                    style={{
+                      padding: "4px 10px",
+                      background: "rgba(255,255,255,0.2)",
+                      color: "#fff",
+                      border: "none",
+                    }}
+                  >
+                    免费会员
+                  </Tag>
+                )}
+                {balance?.member_expires_at && (
+                  <Text style={{ color: "rgba(255,255,255,0.85)", fontSize: 12 }}>
+                    到期 {new Date(balance.member_expires_at).toLocaleDateString("zh-CN")}
+                  </Text>
+                )}
+                {!isMember && (
+                  <Button
+                    size="small"
+                    type="primary"
+                    onClick={() => navigate("/app/subscription")}
+                    style={{ background: "#fff", color: "#7c3aed", borderColor: "#fff" }}
+                  >
+                    <CrownFilled /> 升级会员享 8 折
+                  </Button>
+                )}
+              </Space>
+            </Space>
+          </Col>
+          <Col xs={24} md={10}>
+            {/* 今日免费额度 */}
+            {!isMember && freeLimit > 0 && (
+              <div className="xx-points-free-quota">
+                <div className="xx-points-free-title">
+                  <InfoCircleOutlined /> 今日免费混剪
+                </div>
+                <Progress
+                  percent={Math.round((freeUsed / freeLimit) * 100)}
+                  strokeColor={{ "0%": "#f59e0b", "100%": "#ef4444" }}
+                  format={() => `${freeUsed}/${freeLimit} 条`}
+                />
+                <Text style={{ color: "rgba(255,255,255,0.8)", fontSize: 12 }}>
+                  剩余 {freeRemain} 条免费混剪，超出部分消耗积分
+                </Text>
+              </div>
+            )}
+          </Col>
+        </Row>
+      </Card>
+
+      {/* 统计 */}
+      <Row gutter={[16, 16]} style={{ marginTop: 16 }}>
+        <Col xs={12} md={6}>
+          <Card>
+            <Statistic
+              title="累计获得"
+              value={earned}
+              prefix={<ArrowUpOutlined style={{ color: "#10b981" }} />}
+              valueStyle={{ color: "#10b981" }}
+            />
+          </Card>
+        </Col>
+        <Col xs={12} md={6}>
+          <Card>
+            <Statistic
+              title="累计消耗"
+              value={spent}
+              prefix={<ArrowDownOutlined style={{ color: "#ef4444" }} />}
+              valueStyle={{ color: "#ef4444" }}
+            />
+          </Card>
+        </Col>
+        <Col xs={12} md={6}>
+          <Card>
+            <Statistic
+              title="可用积分"
+              value={bal}
+              prefix={<DiamondOutlined style={{ color: "#8b5cf6" }} />}
+              valueStyle={{ color: "#8b5cf6" }}
+            />
+          </Card>
+        </Col>
+        <Col xs={12} md={6}>
+          <Card>
+            <Statistic
+              title={isMember ? "会员等级" : "今日免费剩余"}
+              value={isMember ? (subscription?.member_type_name ?? "付费会员") : `${freeRemain} 条`}
+              prefix={<CrownFilled style={{ color: "#f59e0b" }} />}
+              valueStyle={{ color: "#f59e0b" }}
+            />
+          </Card>
+        </Col>
+      </Row>
+
+      {/* 快捷入口 & 最近流水 */}
+      <Row gutter={[16, 16]} style={{ marginTop: 8 }}>
+        <Col xs={24} md={14}>
+          <Card
+            title={
+              <Space>
+                <HistoryOutlined />
+                最近流水
+              </Space>
+            }
+            extra={<a onClick={() => navigate("/app/points/transactions")}>查看全部 →</a>}
+          >
+            {recentTx.length === 0 ? (
+              <Empty description="暂无积分流水" />
+            ) : (
+              <List
+                dataSource={recentTx}
+                renderItem={(item) => (
+                  <List.Item>
+                    <List.Item.Meta
+                      avatar={
+                        <Avatar
+                          size="small"
+                          style={{
+                            background: item.type === "earn" ? "#d1fae5" : "#fee2e2",
+                            color: item.type === "earn" ? "#059669" : "#dc2626",
+                          }}
+                          icon={item.type === "earn" ? <ArrowUpOutlined /> : <ArrowDownOutlined />}
+                        />
+                      }
+                      title={SOURCE_NAME[item.source] ?? item.source}
+                      description={item.time}
+                    />
+                    <div
+                      style={{
+                        color: item.type === "earn" ? "#10b981" : "#ef4444",
+                        fontWeight: 700,
+                      }}
+                    >
+                      {item.type === "earn" ? "+" : "-"}
+                      {item.amount}
+                    </div>
+                  </List.Item>
+                )}
+              />
+            )}
+          </Card>
+        </Col>
+        <Col xs={24} md={10}>
+          <Card title="快捷操作">
+            <Space direction="vertical" style={{ width: "100%" }} size={10}>
+              <Button
+                block
+                size="large"
+                type="primary"
+                icon={<RechargeOutlined />}
+                onClick={() => navigate("/app/subscription")}
+              >
+                充值积分
+              </Button>
+              <Button
+                block
+                size="large"
+                icon={<HistoryOutlined />}
+                onClick={() => navigate("/app/points/transactions")}
+              >
+                积分明细
+              </Button>
+              <Button
+                block
+                size="large"
+                icon={<CrownFilled />}
+                onClick={() => navigate("/app/subscription")}
+              >
+                {isMember ? "续费/升级会员" : "升级付费会员"}
+              </Button>
+              <Button
+                block
+                size="large"
+                icon={<FileTextOutlined />}
+                onClick={() => navigate("/app/points/rules")}
+              >
+                积分消耗规则
+              </Button>
+            </Space>
+          </Card>
+        </Col>
+      </Row>
+    </div>
+  )
+}
+
+export default PointsCenter
+export const Component = PointsCenter