在线预览：https://sbti.lzw.me
🔥 SBTI (Silly Big Personality Test) - 傻乎乎的大人格测试
MBTI已经过时，SBTI来了！
- 🎯 30种人格类型 - 死者、吗喽、ATM、小丑、摸鱼王...
- ⏱️ 快速测试 - 12道趣味选择题，约2分钟完成
- 🎨 多风格分享卡 - 暗黑系、可爱风、极简风，一键生成专属图片
- 📊 实时统计 - 查看各类型分布、人气排行
- 📱 响应式设计 - 完美适配移动端和桌面端
- 🔍 SEO优化 - 完整的Meta标签、结构化数据
npm installnpm run dev使用 concurrently 同时启动 Vite 开发服（默认 3000） 与 统计 API（默认 3001）；Vite 已将 /api 代理到本机 3001。浏览器访问 http://localhost:3000。
仅跑前端（不启 API、统计页会请求失败）时：
npm run dev:frontend统计接口：GET /api/stats、POST /api/events/test-complete（JSON：{ "typeCode": "MALO" }）。数据写入 server/data/stats.db（SQLite3，Node 内置 node:sqlite，建议 Node 22.5+ / 24+）。启动时控制台可能出现 SQLite 实验性特性提示，可忽略。
npm run buildprebuild 会执行 scripts/generate-seo.mjs，生成 public/sitemap.xml、public/robots.txt、server/valid-codes.json。
npm testnpm run preview.
├── public/ # 静态资源（含构建期生成的 sitemap / robots）
├── scripts/
│ ├── generate-seo.mjs # prebuild：站点地图、robots、valid-codes
│ └── build.mjs # 打部署包 dist/sbti-test-pro.zip
├── server/
│ ├── stats-api.cjs # 匿名统计 API（Express）
│ ├── valid-codes.json # prebuild 生成，供 API 校验 typeCode
│ └── data/ # 运行时 SQLite（stats.db，不入库可本地生成）
├── src/
│ ├── api/ # 前端请求统计 API 的封装
│ ├── components/
│ │ ├── common/
│ │ ├── test/
│ │ ├── result/
│ │ └── share/
│ ├── pages/
│ │ ├── Home.tsx
│ │ ├── Test.tsx
│ │ ├── Result.tsx
│ │ ├── Stats.tsx
│ │ ├── About.tsx
│ │ ├── TypesIndex.tsx # 人格图鉴列表
│ │ ├── TypeDetail.tsx # 单类型详情
│ │ └── Privacy.tsx
│ ├── config/ # 站点配置等
│ ├── data/
│ │ ├── questions.ts
│ │ └── personalityTypes.ts
│ ├── store/
│ │ └── useStore.ts
│ ├── utils/
│ ├── hooks/
│ ├── App.tsx
│ ├── main.tsx
│ └── index.css # Tailwind 入口（Tailwind v4 + @tailwindcss/vite）
├── index.html
├── package.json
├── tailwind.config.js
├── vite.config.ts
├── vitest.config.ts
└── tsconfig.json
- 框架: React 19 + TypeScript 6
- 构建: Vite 8（
@vitejs/plugin-react） - 样式: Tailwind CSS 4（
@tailwindcss/vite插件，保留tailwind.config.js主题扩展） - 路由: React Router 7
- 动画: Framer Motion 12
- 图表: Recharts 3
- 状态: Zustand 5
- SEO: react-helmet-async
- 图片生成: html2canvas
- 统计 API: Express 5 + cors（
server/stats-api.cjs，SQLitenode:sqlite） - 测试: Vitest 4
| 代码 | 名称 | 标签 |
|---|---|---|
| DEAD | 死者 | 精神已死、彻底躺平 |
| MALO | 吗喽 | 佛系打工人、摆烂但活着 |
| ATM | ATM送钱者 | 老好人、人形ATM |
| CTRL | 拿捏者 | 人间清醒、控场大师 |
| JOKE | 小丑 | 搞笑担当、用快乐掩盖心碎 |
| FAKE | 伪人 | 人前一套、人后一套 |
| SOLO | 孤儿 | 独来独往、自我封闭 |
| GOGO | 行动派 | 说干就干、执行力拉满 |
| DRUNK | 酒鬼 | 借酒消愁、爱疯爱浪 |
| OJBC | 无所谓人 | 极致随缘、怎么都好 |
| ... | ... | ... |
共30种人格类型等你发现！
经典SBTI风格，丧系暗黑系设计，适合朋友圈装酷。
粉嫩少女心，适合小红书分享。
高级感满满，适合商务人士。
在仓库根目录创建 .env / .env.production（按需）：
| 变量 | 说明 |
|---|---|
VITE_SITE_URL |
站点绝对根 URL，无尾斜杠（如 https://your-domain.com）。用于分享链接、canonical、构建期替换 index.html 中的占位域名与 OG 图绝对路径。 |
VITE_STATS_API_URL |
统计 API 根 URL（无尾斜杠）。留空时前端请求同源相对路径 /api（需托管侧将 API 反代到同一源；本地可用 npm run dev 走 Vite 代理）。生产环境若前后端分域，请设为 API 源并配置服务端 ALLOWED_ORIGIN CORS。 |
- 进程入口：
node server/stats-api.cjs，环境变量：PORT、ALLOWED_ORIGIN（建议设为前端源，如https://your-domain.com）。 - 限流：单 IP 约 60 次/小时上报；超限返回
429。 - 监控：查看进程标准输出与托管平台 HTTP 5xx/429 比例即可。
编辑 src/data/questions.ts：十五维题每个选项为 { text, value? }，value 为 1–3，与原版 main.js 一致；未写 value 时按选项在题中的顺序默认为 1、2、3。补充题（饮酒门禁等）由组卷逻辑写入 value，无需手填。
编辑 src/data/personalityTypes.ts，遵循 PersonalityType 接口格式；重新构建以更新站点地图与 valid-codes.json。
当前人格图鉴与结果页使用 CSR + react-helmet-async 更新标题与描述；纯爬虫对动态页的收录可能弱于 SSG/SSR。若需强 SEO，可在后续变更中为人格页做预渲染（见 OpenSpec 变更 sbti-phase-a-through-d 任务 4.7）。
- 连续同选偏移、隐藏分支等进阶计分规则。
- 第四套「平台特供」分享图模板。
npm install -g vercel
vercelnpm install -g netlify-cli
netlify deploy --prod直接连接GitHub仓库即可。
# 构建用于部署的产物 dist/sbti-test-pro.zip（需本机有 zip 命令）
npm run b
# 上传 sbti-test-pro.zip 至服务器并解压
unzip -oq sbti-test-pro.zip
cd sbti-test-pro
npm install --omit=dev
pm2 start server/stats-api.cjs --name sbti解压包内前端静态文件在 frontend/，Nginx 根目录指向 frontend/，/api 反代到 Node 进程（默认 PORT=3001，可按托管环境设置）；包内 package.json 提供 npm run start:api。
本项目所依据的 SBTI（傻乎乎的大人格测试） 题材与相关内容，原作首发于哔哩哔哩（B 站）UP 主，个人空间：https://space.bilibili.com/417038183。
感谢该 UP 主带来的创意与公开内容；本仓库为独立实现与二次分发，若你对测试文案、梗或视觉风格有版权或署名方面的要求，欢迎通过 Issue 联系维护者协商处理。
MIT License - 随意使用，但请保留署名。
MBTI已经过时，SBTI来了！
sbti.lzw.me