Life Simulator 人生模拟器Life Simulator 一个移动端优先的 H5 风格人生选择小游戏，基

Life Simulator

一个移动端优先的 H5 风格人生选择小游戏，基于 Next.js App Router + TypeScript + Tailwind CSS 构建。
项目包含多产品主题入口、六步选择流程、五维评分、结果页分享图、AI 深度分析、邀请解锁和轻量支付链路，适合做互动内容产品、裂变落地页或娱乐化测试 Demo。

Features

多产品入口：同一套玩法，支持多主题皮肤与独立路由
六步人生选择：每一步都会影响五维能力分布
五维结算：身心健康、物质积累、亲密关系、事业成长、自由自主
结果匹配：根据五维分数匹配本地结局
分享图生成：支持生成结局海报和对比分图
AI 分析：支持体验次数、付费解锁、邀请解锁
支付跳转：当前内置微信收款码页面，也可替换为外部支付链接

Tech Stack

Next.js 15
React 19
TypeScript
Tailwind CSS
Framer Motion
html2canvas

Getting Started

Requirements

Node.js 20+ 推荐
npm 10+ 推荐

Install

npm install

Run Dev Server

npm run dev

默认访问：

http://localhost:3000

如果 3000 端口被占用，Next.js 会自动切换到 3001、3002 等端口。

Production Build

npm run build
npm start

Environment Variables

项目使用 .env.local 存放本地配置，.env.example 作为示例模板。

你可以这样开始：

cp .env.example .env.local

AI Provider

项目优先支持 月之暗面 / Kimi，如果未配置 Moonshot，则回退到 OpenAI 兼容配置。

推荐配置：

MOONSHOT_API_KEY=your_key_here
MOONSHOT_BASE_URL=https://api.moonshot.cn/v1
MOONSHOT_MODEL=moonshot-v1-8k

备用 OpenAI 兼容配置：

OPENAI_API_KEY=your_key_here
OPENAI_BASE_URL=https://api.openai.com/v1
OPENAI_MODEL=gpt-4o-mini

说明：

如果没有配置 AI key，结果页仍可使用“体验版解析”
如果配置了 Moonshot key，/api/ai-analyze 会真正调用模型
体验版与正式版都走同一个接口，只是数据来源不同

Payment Link

当前项目沿用了环境变量名 NEXT_PUBLIC_STRIPE_PAYMENT_LINK，但它已经被用作“通用支付跳转链接”，不局限于 Stripe。

默认本地值：

NEXT_PUBLIC_STRIPE_PAYMENT_LINK=/pay/wechat?amount=1

说明：

当前内置的是本地微信收款码页面
如果你有自己的支付落地页，可以直接替换成外部链接
如果希望真正自动确认支付，需要接入支持回调的支付方案

AI Analysis Behavior

结果页的 AI 分析分为三层：

免费体验：每个浏览器本地 1 次
已支付用户：可直接请求完整 AI 分析
邀请解锁用户：可按产品维度解锁完整分析

接口位置：

src/app/api/ai-analyze/route.ts

当前分析风格已经做过强化：

先肯定用户，给足情绪价值
再做结构化分析
最后给职业、资源、关系与 7 日行动建议

Payment Behavior

当前支付链路是轻量方案：

结果页点击“支付解锁”
跳到本地微信支付页
用户扫码
点击“我已支付，返回解锁”

注意：

这条链路适合 Demo、内容页或内部验证
如果使用静态微信收款码，前端无法自动判断是否真实到账
如果你要“已支付才自动解锁”，需要接微信商户支付或其他带 webhook 的支付平台

Project Structure

src/
  app/
    api/
    p/[slug]/
    pay/wechat/
  components/
  config/
  context/
  data/
  lib/
  screens/
public/

关键文件：

src/screens/PlayScreen.tsx：选择流程页
src/screens/ResultScreen.tsx：结果页与 AI/支付/分享逻辑
src/app/api/ai-analyze/route.ts：AI 分析接口
src/components/ShareResultCard.tsx：结局分享卡
src/components/CompareShareCard.tsx：对比分图卡
src/app/pay/wechat/page.tsx：本地微信支付页
src/config/products.ts：产品配置

Notes

.env.local 已被 .gitignore 忽略，不会进入仓库
分享图使用 html2canvas，设计上应避免过于激进的文字特效
当前 next 已锁定为 15.1.0，主要为了兼容本机 wasm SWC 方案
如果后续升级 Next.js，建议同步验证本地构建与分享图效果

Scripts

npm run dev
npm run build
npm run start
npm run lint

License

仅供学习、演示和原型验证使用。

仓库地址

github.com/fhj414/life…

体验地址

renshengmoni.space/

Life Simulator 人生模拟器