feat(points): apps/web/src/pages/points/Rules.tsx

2026-09-15 08:39:09 +08:00
parent c09b9d66a6
commit a47007ed23
1 changed files with 137 additions and 0 deletions
@@ -0,0 +1,137 @@
+/**
+ * 积分规则页（/app/points/rules）
+ * 静态展示积分获得、消耗、会员折扣等规则
+ */
+import React from "react"
+import { Card, Descriptions, Table, Tag, Typography, Divider, Space } from "antd"
+import { InfoCircleOutlined, CrownFilled, DiamondOutlined } from "@ant-design/icons"
+import PageHead from "@/components/layout/PageHead"
+import "./Points.css"
+
+const { Title, Text, Paragraph } = Typography
+
+const costData = [
+  { key: "ai_video", scene: "智能混剪", unit: "条（≤30s）", cost: 3, remark: "每加 30s +1" },
+  { key: "ai_voice", scene: "AI 配音（含克隆合成）", unit: "分钟", cost: 1, remark: "" },
+  { key: "ai_digital_human", scene: "AI 数字人", unit: "分钟", cost: 15, remark: "" },
+  { key: "douyin_extract", scene: "抖音文案提取", unit: "次", cost: 1, remark: "" },
+  { key: "ai_rewrite", scene: "AI 文案改写", unit: "次", cost: 1, remark: "" },
+  { key: "ai_title", scene: "AI 标题生成", unit: "次", cost: 1, remark: "" },
+  { key: "ai_cover", scene: "AI 封面生成", unit: "次", cost: 2, remark: "" },
+  { key: "voice_clone_train", scene: "声音克隆训练", unit: "次", cost: 0, remark: "免费" },
+]
+
+const earnData = [
+  { key: "new_user", channel: "注册奖励", points: "50~100", remark: "新人专享" },
+  { key: "recharge", channel: "充值购买", points: "100~2000/次", remark: "永久有效" },
+  { key: "subscribe", channel: "开通会员赠送", points: "见会员方案", remark: "季/年卡赠送更多" },
+  { key: "task", channel: "任务/活动奖励", points: "不定额", remark: "运营活动发放" },
+]
+
+const PointsRules: React.FC = () => {
+  return (
+    <div className="xx-points-page">
+      <PageHead title="积分规则" description="了解如何获得、使用与管理积分" />
+
+      <Card>
+        <Title level={5}>
+          <InfoCircleOutlined style={{ color: "#3b82f6" }} /> 什么是积分？
+        </Title>
+        <Paragraph>
+          积分是小虾 SaaS 用于结算 AI 能力的虚拟货币。每次使用智能混剪、AI 配音、AI 数字人、AI
+          改写等功能时，
+          会根据使用量扣除相应积分。积分永久有效，可通过充值、任务奖励、注册礼包等方式获取。
+        </Paragraph>
+
+        <Divider />
+
+        <Title level={5}>
+          <DiamondOutlined style={{ color: "#8b5cf6" }} /> 积分消耗规则
+        </Title>
+        <Table
+          className="xx-rules-table"
+          dataSource={costData}
+          pagination={false}
+          columns={[
+            { title: "功能场景", dataIndex: "scene", width: 200 },
+            { title: "计费单位", dataIndex: "unit", width: 140 },
+            {
+              title: "消耗积分",
+              dataIndex: "cost",
+              width: 110,
+              render: (v: number) =>
+                v === 0 ? (
+                  <Tag color="green">免费</Tag>
+                ) : (
+                  <Text strong style={{ color: "#ef4444" }}>
+                    {v}
+                  </Text>
+                ),
+            },
+            { title: "备注", dataIndex: "remark" },
+          ]}
+        />
+
+        <Paragraph type="secondary" style={{ marginTop: 12, fontSize: 12 }}>
+          免费用户每日享有 2 条免费混剪额度，超出后按上述标准 ×1.15 扣除积分；
+          付费会员按上述标准原价扣除积分。
+        </Paragraph>
+
+        <Divider />
+
+        <Title level={5} style={{ color: "#10b981" }}>
+          ↑ 积分获得方式
+        </Title>
+        <Table
+          className="xx-rules-table"
+          dataSource={earnData}
+          pagination={false}
+          columns={[
+            { title: "渠道", dataIndex: "channel", width: 200 },
+            { title: "积分数量", dataIndex: "points", width: 180 },
+            { title: "备注", dataIndex: "remark" },
+          ]}
+        />
+
+        <Divider />
+
+        <Title level={5}>
+          <CrownFilled style={{ color: "#f59e0b" }} /> 会员折扣
+        </Title>
+        <Descriptions bordered column={1} size="small">
+          <Descriptions.Item label="免费用户">
+            所有 AI 功能按标准价 ×1.15 消耗积分；每日 2 条免费混剪
+          </Descriptions.Item>
+          <Descriptions.Item label="付费会员（月/季/年卡）">
+            所有 AI 功能按标准价消耗；积分购买享 8~9 折；解锁批量导出、多平台发布等高级功能
+          </Descriptions.Item>
+          <Descriptions.Item label="年卡会员">
+            积分购买最低 8 折；开通即赠送 2000 积分
+          </Descriptions.Item>
+          <Descriptions.Item label="季卡会员">
+            积分购买 8.5 折；开通即赠送 400 积分
+          </Descriptions.Item>
+        </Descriptions>
+
+        <Divider />
+
+        <Title level={5}>退款与有效期</Title>
+        <ul style={{ paddingLeft: 20, lineHeight: 2 }}>
+          <li>充值积分永久有效，不会过期</li>
+          <li>AI 生成失败或服务异常时，已扣除的积分将自动退还</li>
+          <li>会员为虚拟商品，一经开通不支持退款；到期后会员权益自动失效，积分余额不受影响</li>
+          <li>如需发票请联系客服</li>
+        </ul>
+
+        <Space style={{ marginTop: 16 }}>
+          <Text type="secondary" style={{ fontSize: 12 }}>
+            规则更新时间：2026-09-15
+          </Text>
+        </Space>
+      </Card>
+    </div>
+  )
+}
+
+export default PointsRules
+export const Component = PointsRules