feat: #1895 会员+积分系统前端（两档会员 + 积分充值/明细/扣费提示） #1920

Merged

auto-approve-bot merged 62 commits from feature/1895-membership-points-web into develop 2026-09-15 10:05:45 +08:00

Conversation 4 Commits 62 Files Changed 22

+3267 -279

xiaoxia commented 2026-09-15 08:40:20 +08:00

Owner

Copy Link

Copy Source

#1895 会员+积分系统前端（v2 两档会员制）

实现设计文档 membership-points-design-v2.md 中前端部分。后端 PR 合入前接口使用 mock 数据（api/points/index.ts 内 POINTS_API_MOCK=true 开关），后端就绪后切 false 即可。

变更清单

1. 顶部导航入口（Header）

• 增加积分徽章（PointsBadge 组件），实时显示当前积分，点击进入积分中心
• 免费用户显示「升级会员」入口（橙红渐变按钮，带 tooltip 引导）
• 付费用户显示金冠标识（月/季/年），hover 显示到期时间
• 用户头像下拉菜单新增「我的积分」「积分明细」「充值积分」三个入口
• 手机端汉堡菜单顶部显示积分徽章+升级入口

2. 会员订阅页（/app/subscription 重构 Plans）

• 当前状态卡片：身份/积分余额/今日免费额度进度条
• 计费周期切换（月¥19.9 / 季¥39.9 推荐 / 年¥159）
• 两档会员对比卡：免费 vs 付费（8 项权益对比，推荐标识）
• 积分包购买区：体验包100/¥9.9、基础包500/¥39（热门）、专业包2000/¥129，会员折扣自动计算
• 支付按钮弹「支付功能开发中」提示

3. 积分中心系列页面

• /app/points（Center）：余额大卡（渐变紫粉）、统计卡片、最近流水、快捷入口
• /app/points/transactions（Transactions）：积分流水列表（获得/消耗/退还），支持类型/来源/日期/关键字筛选、分页
• /app/points/recharge（Packages）：积分包购买页（供「积分不足」弹窗直接跳转）
• /app/points/rules（Rules）：积分消耗规则说明表

4. 生成流程积分扣费提示

• 步骤4「确认生成」按钮内显示本次预估消耗积分（钻石徽章）
• 完全使用每日免费额度时显示「使用 N 次免费额度」绿色标签
• 积分不足时禁用生成按钮，显示「积分不足」+「去充值」按钮，hover 提示差额
• 点击「去充值」跳转到 /app/points/recharge
• 提交前二次校验余额，不足时 toast 提示

5. API & Store

• api/points/types.ts：定义 PointsBalance/PointsTransaction/PointsPackage/SubscriptionPlan 等完整类型
• api/points/index.ts：封装所有积分/会员 API（余额、流水、积分包、订单、订阅、规则、预检查），含 mock 数据
• store/pointsStore.ts：Zustand store 管理余额/订阅/规则，提供 init/refreshBalance/optimisticDeduct/optimisticAdd，60s 自动刷新
• 不改动现有 api/subscription/*（保留旧订阅 API，后续按需迁移）

6. 路由 & 导航

• router/appRoutes.tsx 新增 /app/points、/app/points/transactions、/app/points/recharge、/app/points/rules 4 个 lazy 路由
• config/navigation.ts 侧边栏系统分组增加「会员订阅」「积分中心」入口

7. 通用组件

• components/common/PointsBadge：钻石图标+数字徽章，支持大小、点击、className
• components/common/PointsCost：积分消耗小标签（场景+数值，带颜色区分）
• 新 CSS 全部采用现有 CSS 变量，风格与现有页面一致

说明

• 所有新页面 lazy 懒加载，不影响首屏体积
• UI 响应式适配手机端（<768px）
• 与后端并行开发：接口路径对齐设计文档，mock 开关一行切换真实接口
• 免费用户每日 2 条混剪免费额度逻辑前端实现；付费会员消耗按标准价，免费用户 ×1.15（向上取整）
• 未删除任何现有文件/组件；旧 subscription/UpgradeSubscription.tsx 和 subscription/Billing.tsx 保持原样路由保留

## #1895 会员+积分系统前端（v2 两档会员制） 实现设计文档 `membership-points-design-v2.md` 中前端部分。后端 PR 合入前接口使用 mock 数据（`api/points/index.ts` 内 `POINTS_API_MOCK=true` 开关），后端就绪后切 false 即可。 ### 变更清单 **1. 顶部导航入口（Header）** - 增加积分徽章（`PointsBadge` 组件），实时显示当前积分，点击进入积分中心 - 免费用户显示「升级会员」入口（橙红渐变按钮，带 tooltip 引导） - 付费用户显示金冠标识（月/季/年），hover 显示到期时间 - 用户头像下拉菜单新增「我的积分」「积分明细」「充值积分」三个入口 - 手机端汉堡菜单顶部显示积分徽章+升级入口 **2. 会员订阅页（`/app/subscription` 重构 Plans）** - 当前状态卡片：身份/积分余额/今日免费额度进度条 - 计费周期切换（月¥19.9 / 季¥39.9 推荐 / 年¥159） - 两档会员对比卡：免费 vs 付费（8 项权益对比，推荐标识） - 积分包购买区：体验包100/¥9.9、基础包500/¥39（热门）、专业包2000/¥129，会员折扣自动计算 - 支付按钮弹「支付功能开发中」提示 **3. 积分中心系列页面** - `/app/points`（Center）：余额大卡（渐变紫粉）、统计卡片、最近流水、快捷入口 - `/app/points/transactions`（Transactions）：积分流水列表（获得/消耗/退还），支持类型/来源/日期/关键字筛选、分页 - `/app/points/recharge`（Packages）：积分包购买页（供「积分不足」弹窗直接跳转） - `/app/points/rules`（Rules）：积分消耗规则说明表 **4. 生成流程积分扣费提示** - 步骤4「确认生成」按钮内显示本次预估消耗积分（钻石徽章） - 完全使用每日免费额度时显示「使用 N 次免费额度」绿色标签 - 积分不足时禁用生成按钮，显示「积分不足」+「去充值」按钮，hover 提示差额 - 点击「去充值」跳转到 `/app/points/recharge` - 提交前二次校验余额，不足时 toast 提示 **5. API & Store** - `api/points/types.ts`：定义 PointsBalance/PointsTransaction/PointsPackage/SubscriptionPlan 等完整类型 - `api/points/index.ts`：封装所有积分/会员 API（余额、流水、积分包、订单、订阅、规则、预检查），含 mock 数据 - `store/pointsStore.ts`：Zustand store 管理余额/订阅/规则，提供 init/refreshBalance/optimisticDeduct/optimisticAdd，60s 自动刷新 - 不改动现有 `api/subscription/*`（保留旧订阅 API，后续按需迁移） **6. 路由 & 导航** - `router/appRoutes.tsx` 新增 `/app/points`、`/app/points/transactions`、`/app/points/recharge`、`/app/points/rules` 4 个 lazy 路由 - `config/navigation.ts` 侧边栏系统分组增加「会员订阅」「积分中心」入口 **7. 通用组件** - `components/common/PointsBadge`：钻石图标+数字徽章，支持大小、点击、className - `components/common/PointsCost`：积分消耗小标签（场景+数值，带颜色区分） - 新 CSS 全部采用现有 CSS 变量，风格与现有页面一致 ### 说明 - 所有新页面 lazy 懒加载，不影响首屏体积 - UI 响应式适配手机端（<768px） - 与后端并行开发：接口路径对齐设计文档，mock 开关一行切换真实接口 - 免费用户每日 2 条混剪免费额度逻辑前端实现；付费会员消耗按标准价，免费用户 ×1.15（向上取整） - 未删除任何现有文件/组件；旧 `subscription/UpgradeSubscription.tsx` 和 `subscription/Billing.tsx` 保持原样路由保留

xiaoxia added 22 commits 2026-09-15 08:40:21 +08:00

feat(points): apps/web/src/api/points/types.ts f497686649

feat(points): apps/web/src/api/points/index.ts 05e56184d6

feat(points): apps/web/src/store/pointsStore.ts cd1c7bc26e

feat(points): apps/web/src/components/common/PointsBadge/index.tsx a6cb79292e

feat(points): apps/web/src/components/common/PointsBadge/PointsBadge.css 53baca6b5d

feat(points): apps/web/src/components/common/PointsCost/index.tsx f0f74cef51

feat(points): apps/web/src/components/common/PointsCost/PointsCost.css 5579a40468

feat(points): update apps/web/src/components/layout/Header.tsx b7de70fa7d

feat(points): update apps/web/src/components/layout/Header.css 2930c18ca6

feat(points): update apps/web/src/config/navigation.ts eceb8217e6

feat(points): update apps/web/src/router/appRoutes.tsx a090ab8048

feat(points): update apps/web/src/pages/subscription/Plans.tsx ff310d5b46

feat(points): update apps/web/src/pages/subscription/Plans.css e2ffd43b29

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

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

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

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

feat(points): apps/web/src/pages/points/Points.css c35e211123

feat(points): update apps/web/src/pages/generate/GeneratePage.tsx 6ec432427d

feat(points): update apps/web/src/pages/generate/components/GenerateStepActions.tsx 9437761d8b

feat(points): apps/web/src/pages/generate/hooks/pointsCost.ts 0ca07e11cb

feat(points): apps/web/src/pages/generate/generate-points.css d396282fc7

xiaoxia added 1 commit 2026-09-15 08:53:06 +08:00

fix(lint): resolve unused vars and any types in apps/web/src/api/points/index.ts c45ef34709

xiaoxia added 1 commit 2026-09-15 08:53:06 +08:00

fix(lint): resolve unused vars and any types in apps/web/src/components/common/PointsCost/index.tsx b08944b109

xiaoxia added 1 commit 2026-09-15 08:53:10 +08:00

fix(lint): resolve unused vars and any types in apps/web/src/components/layout/Header.tsx 0d7e455ee1

xiaoxia added 1 commit 2026-09-15 08:53:14 +08:00

fix(lint): resolve unused vars and any types in apps/web/src/pages/generate/components/GenerateStepActions.tsx ab7e45a83f

xiaoxia added 1 commit 2026-09-15 08:53:19 +08:00

fix(lint): resolve unused vars and any types in apps/web/src/pages/points/Center.tsx 213fbb333f

xiaoxia added 1 commit 2026-09-15 08:53:23 +08:00

fix(lint): resolve unused vars and any types in apps/web/src/pages/points/Packages.tsx e7ffaf1f53

xiaoxia added 1 commit 2026-09-15 08:53:29 +08:00

fix(lint): resolve unused vars and any types in apps/web/src/pages/points/Transactions.tsx 630b64ca3b

xiaoxia added 1 commit 2026-09-15 08:53:34 +08:00

fix(lint): resolve unused vars and any types in apps/web/src/pages/subscription/Plans.tsx eb292d79f3

xiaoxia added 1 commit 2026-09-15 09:32:13 +08:00

fix(1895): api/points/types.ts - apply TS/Lint fixes (ThunderboltOutlined/actions/typed/no-unused) b842d54c1d

xiaoxia added 1 commit 2026-09-15 09:32:25 +08:00

fix(1895): api/points/index.ts - apply TS/Lint fixes (ThunderboltOutlined/actions/typed/no-unused) 141a70edfe

xiaoxia added 1 commit 2026-09-15 09:33:42 +08:00

fix(1895): store/pointsStore.ts - apply TS/Lint fixes (ThunderboltOutlined/actions/typed/no-unused) c726e50da6

xiaoxia added 1 commit 2026-09-15 09:33:59 +08:00

fix(1895): components/common/PointsBadge/index.tsx - TS/Lint fixes (ThunderboltOutlined/actions/typed/no-unused) be7c67f505

xiaoxia added 1 commit 2026-09-15 09:34:04 +08:00

fix(1895): components/common/PointsBadge/PointsBadge.css - TS/Lint fixes (ThunderboltOutlined/actions/typed/no-unused) 3e65acc396

xiaoxia added 1 commit 2026-09-15 09:34:13 +08:00

fix(1895): components/common/PointsCost/index.tsx - TS/Lint fixes (ThunderboltOutlined/actions/typed/no-unused) 5857114e1f

xiaoxia added 1 commit 2026-09-15 09:34:17 +08:00

fix(1895): components/common/PointsCost/PointsCost.css - TS/Lint fixes (ThunderboltOutlined/actions/typed/no-unused) 070e82845c

xiaoxia added 1 commit 2026-09-15 09:34:23 +08:00

fix(1895): components/layout/Header.tsx - TS/Lint fixes (ThunderboltOutlined/actions/typed/no-unused) 49495e6b50

xiaoxia added 1 commit 2026-09-15 09:34:26 +08:00

fix(1895): components/layout/Header.css - TS/Lint fixes (ThunderboltOutlined/actions/typed/no-unused) bc7edc2e15

xiaoxia added 1 commit 2026-09-15 09:34:33 +08:00

fix(1895): config/navigation.ts - TS/Lint fixes (ThunderboltOutlined/actions/typed/no-unused) 1bc270dd82

xiaoxia added 1 commit 2026-09-15 09:34:37 +08:00

fix(1895): router/appRoutes.tsx - TS/Lint fixes (ThunderboltOutlined/actions/typed/no-unused) e805f4159c

xiaoxia added 1 commit 2026-09-15 09:34:42 +08:00

fix(1895): pages/points/Center.tsx - TS/Lint fixes (ThunderboltOutlined/actions/typed/no-unused) 16699b4bdf

xiaoxia added 1 commit 2026-09-15 09:34:50 +08:00

fix(1895): pages/points/Transactions.tsx - TS/Lint fixes (ThunderboltOutlined/actions/typed/no-unused) 4b994e80aa

xiaoxia added 1 commit 2026-09-15 09:34:53 +08:00

fix(1895): pages/points/Packages.tsx - TS/Lint fixes (ThunderboltOutlined/actions/typed/no-unused) f230ad35a9

xiaoxia added 1 commit 2026-09-15 09:34:59 +08:00

fix(1895): pages/points/Rules.tsx - TS/Lint fixes (ThunderboltOutlined/actions/typed/no-unused) 5e8db6dfbb

xiaoxia added 1 commit 2026-09-15 09:35:06 +08:00

fix(1895): pages/points/Points.css - TS/Lint fixes (ThunderboltOutlined/actions/typed/no-unused) 8d3ac35801

xiaoxia added 1 commit 2026-09-15 09:35:15 +08:00

fix(1895): pages/subscription/Plans.tsx - TS/Lint fixes (ThunderboltOutlined/actions/typed/no-unused) 8137208451

xiaoxia added 1 commit 2026-09-15 09:35:20 +08:00

fix(1895): pages/subscription/Plans.css - TS/Lint fixes (ThunderboltOutlined/actions/typed/no-unused) ae070b67a8

xiaoxia added 1 commit 2026-09-15 09:35:25 +08:00

fix(1895): pages/generate/hooks/pointsCost.ts - TS/Lint fixes (ThunderboltOutlined/actions/typed/no-unused) 4914b82cd9

xiaoxia added 1 commit 2026-09-15 09:35:28 +08:00

fix(1895): pages/generate/components/GenerateStepActions.tsx - TS/Lint fixes (ThunderboltOutlined/actions/typed/no-unused) 1ad8756500

xiaoxia added 1 commit 2026-09-15 09:35:33 +08:00

fix(1895): pages/generate/GeneratePage.tsx - TS/Lint fixes (ThunderboltOutlined/actions/typed/no-unused) 6a7261577f

xiaoxia added 1 commit 2026-09-15 09:35:39 +08:00

fix(1895): pages/generate/generate-points.css - TS/Lint fixes (ThunderboltOutlined/actions/typed/no-unused) de55dd13f1

xiaoxia added 1 commit 2026-09-15 09:45:00 +08:00

fix(1895): components/common/PointsBadge/index.tsx - fix TS errors (props, arg count, RechargeOutlined, stale GeneratePage, no-unused) f58bcd3c77

xiaoxia added 1 commit 2026-09-15 09:45:06 +08:00

fix(1895): pages/points/Center.tsx - fix TS errors (props, arg count, RechargeOutlined, stale GeneratePage, no-unused) 00269b11ca

xiaoxia added 1 commit 2026-09-15 09:45:09 +08:00

fix(1895): pages/subscription/Plans.tsx - fix TS errors (props, arg count, RechargeOutlined, stale GeneratePage, no-unused) 3db85c89ad

xiaoxia added 1 commit 2026-09-15 09:45:14 +08:00

fix(1895): pages/generate/GeneratePage.tsx - fix TS errors (props, arg count, RechargeOutlined, stale GeneratePage, no-unused) bc32dec0c3

xiaoxia added 1 commit 2026-09-15 09:51:00 +08:00

fix(1895): pages/points/Packages.tsx - fix TS errors (import types, hasEnoughPoints API, field names, DiscountKey) d85f126dc7

xiaoxia added 1 commit 2026-09-15 09:51:04 +08:00

fix(1895): pages/subscription/Plans.tsx - fix TS errors (import types, hasEnoughPoints API, field names, DiscountKey) 61f3f21fd0

xiaoxia added 1 commit 2026-09-15 09:51:09 +08:00

fix(1895): pages/generate/GeneratePage.tsx - fix TS errors (import types, hasEnoughPoints API, field names, DiscountKey) 7c313cf09e

xiaoxia added 1 commit 2026-09-15 09:55:32 +08:00

fix(1895): remove unused PointsPackage import c3d9f35c0d

gitea-actions bot commented 2026-09-15 09:57:09 +08:00

Copy Link

Copy Source

🚀 预览环境已部署

项目	详情
PR号	#1920
预览链接	https://pr-1920.preview.xiaoxiajianji.com
API环境	staging

💡 预览环境使用 staging API 数据，请勿在预览环境中操作重要数据。

🔄 每次提交新代码后预览环境会自动更新。

🗑️ PR 关闭或合并后，预览环境会自动清理。

🚀 **预览环境已部署** | 项目 | 详情 | |------|------| | PR号 | #1920 | | 预览链接 | [https://pr-1920.preview.xiaoxiajianji.com](https://pr-1920.preview.xiaoxiajianji.com) | | API环境 | staging | > 💡 预览环境使用 staging API 数据，请勿在预览环境中操作重要数据。 > > 🔄 每次提交新代码后预览环境会自动更新。 > > 🗑️ PR 关闭或合并后，预览环境会自动清理。

auto-approve-bot approved these changes 2026-09-15 09:57:22 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

auto-approve-bot approved these changes 2026-09-15 09:57:22 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

auto-approve-bot merged commit c2997a11c2 into develop 2026-09-15 10:05:45 +08:00

auto-approve-bot deleted branch feature/1895-membership-points-web 2026-09-15 10:05:45 +08:00

gitea-actions bot commented 2026-09-15 10:08:02 +08:00

Copy Link

Copy Source

🗑️ 预览环境已清理

PR #1920 已关闭或合并，对应的预览环境已被清理。

如有需要，可以重新打开 PR 来重新生成预览环境。

🗑️ **预览环境已清理** PR #1920 已关闭或合并，对应的预览环境已被清理。 > 如有需要，可以重新打开 PR 来重新生成预览环境。

Sign in to join this conversation.

Reviewers

No Reviewers

auto-approve-bot

Labels

Clear labels

architecture

架构设计

backend

后端相关

blocked

阻塞中

bug

Bug修复

ci-bug

CI本身的bug

ci-optimization

CI优化类任务

ci-pipeline

CI流水线/workflow相关

cleanup

代码清理

devops

运维/部署/CI

documentation

文档相关

feature

新功能

frontend

前端相关

P0

阻塞性，必须立即处理

P1

高优先级

P2

中优先级

P3

低优先级/后考虑

question

需要讨论确认

ready

PR CI通过，可合并

refactor

代码重构

No Label

Milestone

No items

No Milestone

Projects

Clear projects

No project

Assignees

Clear assignees

auto-approve-bot frontend-dev xiaoxia

No Assignees

3 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: xiaoxia/xiaoxia-saas#1920