关于朋友发我SBTI测试网页打不开了，我就自己 Vibe Coding 了一个这件事

[aru_58]

昨天朋友圈被一个叫 SBTI 的赛博人格测试刷屏，朋友发我的时候点进去一看——站已经挂了。

等了几天还是打不开，手痒，想着反正题库和人格数据都能找到，不如自己重新搓一个。于是花了两个小时, 从零 Vibe Coding 出了一个完整的测试站点，现在已经部署上线了。

在线体验: https://sbti.x4v.cn

开源仓库: https://github.com/zcjunblog/sbti-cloudbase

简单说就是一个完整的人格测试网站：

30 道标准题 + 2 道隐藏支线**，答完会根据 15 个维度匹配 27 种赛博人格

每种人格都有专属插画、代号和毒舌描述**，比如「拿捏者 CTRL」「多情者 LOVE-R」「尤物 SEXY」

还有两个隐藏人格——命中饮酒支线会变成「酒鬼 DRUNK」，匹配度太低会被归为「HHHH」

测试完会生成一张 **1080×1600 的海报**（Canvas 绘制 + 二维码），可以直接发朋友圈。

| 分类 | 选型 |
|------|------|
| 前端框架 | Next.js 16 + React 19 + TypeScript |
| 样式 | Tailwind CSS v4 |
| 部署 | 腾讯云 CloudBase（静态托管 + 云函数 + 云数据库） |
| 海报生成 | Canvas API + qrcode |

 

整体架构是 纯静态前端 + Serverless 后端：

用户浏览器
├── 静态页面（CDN）
└── 排行榜数据 → 云函数 → 云数据库

Next.js 配置了 output: "export" 静态导出，构建后生成纯 HTML 文件，部署到 CloudBase 静态托管走 CDN。排行榜相关的读写通过两个云函数完成，数据存在 CloudBase 的文档型数据库里。

所有测试判定逻辑都在浏览器本地完成，不需要请求服务端。服务端只负责排行榜的统计。

一个三阶段过渡：

1. 选中的选项变绿色高亮 + ✓，其他选项淡出

2. 整个题目区域向下滑动渐隐

3. 新题目自然出现

配合 `navigator.vibrate()` 的触感反馈，在手机上体验还不错。

用 Canvas API 在客户端绘制 1080×1600 的 PNG 海报，包含人格信息、插画和二维码。有几个坑：

人格插画的宽高比不统一，用 object-contain 模式 + 底部对齐，避免拉伸

海报预览弹窗在小屏幕上会超出视口，改成了限制最大高度 + 图片自适应缩放

二维码用 qrcode 库生成 DataURL，直接画到 Canvas 上

用 submissionId（UUID）直接作为云数据库文档的 _id。插入重复 _id 时数据库会报错，利用这个唯一约束天然防重，不需要先查再写的两步操作。

计数用 _.inc(1) 原子递增，天然支持并发，不需要锁。

参考微信小程序的风格——屏幕正中、黑色半透明圆角卡片、3.5 秒自动消失。比顶部横幅或底部 Snackbar 更适合移动端的操作反馈。

最开始排行榜数据就是一个本地 JSON 文件，用 Node.js `fs` 读写。简单是简单，但有几个问题：

1. 不能部署到静态托管——没有 Node.js 运行时

2. 多实例会互相覆盖——每个进程有独立的写入队列

3. submissions 记录无限增长——10 万次提交 ≈ 15MB 的 JSON

迁移到 CloudBase 后：

排行榜数据存在云数据库的 sbti-rankings 集合（27 条文档）

去重记录存在 sbti-submissions 集合

rank 和 share 不存数据库，由云函数实时计算

前端改成客户端组件 useEffect 调用云函数获取数据

整个迁移的核心改动：删掉 `rankings-store.ts`（176 行本地文件读写）和 `api/` 目录（Next.js API 路由），新增 `cloudbase-api.ts`（48 行客户端 API）和两个云函数（各约 60 行）。

sbti-cloudbase/
├── functions/ # CloudBase 云函数
│ ├── sbti-rankings-get/ # 查询排行榜
│ └── sbti-rankings-submit/ # 提交结果
├── src/
│ ├── app/ # 页面（首页、测试、结果、图鉴、榜单、说明、法律）
│ ├── components/ # 组件（答题流程、结果面板、海报、排行榜）
│ ├── lib/ # 业务逻辑（测试引擎、CloudBase API）
│ └── data/ # 静态数据（题库、人格定义）
├── cloudbaserc.json # CloudBase 部署配置
└── next.config.ts # 静态导出配置

两个小时从零到上线，Vibe Coding 的效率确实惊人。核心判定逻辑、15 维折算、Canvas 海报这些比较复杂的部分，AI 基本都能一次性写对，省了大量时间。

去测测你是什么赛博人格 → https://sbti.x4v.cn