我用claude code复刻了一夜爆火的SBTI 人格测试

SBTI 人格测试是一款在中文互联网爆火的趣味心理测试，基于五大心理模型（自我、情感、态度、行动、社交），通过 15 个维度将测试者匹配到 27 种人格类型之一。

原作者：（早上都还能看到，写文章这会儿搜不到了，B站视频貌似现在也没了23333）

原开源项目 [serenakeyitan/sbti-wiki](https://github.com/serenakeyitan/sbti-wiki) 仅提供了人格百科结果展示，不含完整的测试流程。

本项目是对 SBTI 人格测试的完整复刻，包含从答题到出结果的全流程，并在视觉设计上采用了独特的极简日式和风美学。

我部署的地址：https://sbti.wuyanshuo.cn

—

## 技术栈

| 技术 | 版本 | 用途 |
|——|——|——|
| **Next.js** | 16 | React 全栈框架，App Router 架构 |
| **React** | 19 | UI 组件库 |
| **TypeScript** | 5 | 类型安全的开发语言 |
| **Tailwind CSS** | 4 | 原子化 CSS 框架，内联主题系统 |
| **html2canvas** | 1.4 | 将 DOM 渲染为 PNG 图片，用于生成分享卡片 |
| **next/font** | — | Google Fonts 自动优化加载 |

纯前端项目，无后端依赖，所有逻辑在浏览器端运行。

—

## 功能特性

### 完整测试流程

– **31 道标准题 + 1 道隐藏题**：单题展示模式，选择后自动进入下一题
– **条件逻辑**：第 22 题（爱好题）选择「饮酒」后，自动插入隐藏的饮酒态度题
– **墨水渐变进度条**：实时显示答题进度
– **返回修改**：可回到上一题修改已选答案
– **左右滑入动画**：题目切换时带有平滑的过渡效果

### 智能评分算法

– **15 维度原始分计算**：每个维度由 2 道题决定，原始分范围 2-6
– **三级分桶**：≤3 为低（L），=4 为中（M），≥5 为高（H）
– **曼哈顿距离匹配**：将用户的 15 位 H/M/L 向量与 25 个标准人格模板比较，取相似度最高者
– **特殊路径**：DRUNK（酒鬼）人格由隐藏题直接锁定；HHHH（傻乐者）为最高匹配度 < 60% 时的兜底人格

### 结果展示

– **人格头部**：人格代号、中文名、引言、人格形象图片
– **稀有度徽章**：常见 / 中等 / 稀有 / 极稀有，显示百分比和「约 1/X 人」
– **15 轴 SVG 雷达图**：纯手写 SVG，展示各维度原始分分布
– **维度详情表**：5 大模型 × 3 维度，每个维度配有印章风 H/M/L 徽章和解释文案
– **可折叠完整解读**：原站的详细人格描述

### 分享图片生成

– 点击「保存分享图片」生成 750×1334 PNG 分享卡片
– 卡片包含：标题、人格代号与名称、形象图片、迷你雷达图、稀有度、一句话描述
– 移动端优先尝试 Web Share API，桌面端直接触发下载
– 分享卡片使用纯内联样式渲染，兼容 html2canvas

### 人格百科

– **27 种人格卡片网格**：响应式布局（手机 2 列 / 平板 3 列 / 桌面 4 列）
– **稀有度筛选**：全部 / 常见 / 中等 / 稀有 / 极稀有
– **人格形象图片**：每张卡片展示对应的人格插图
– **详情模态框**：点击卡片弹出完整档案，包含图片、引言、稀有度、维度模板、深度解读

### 明暗模式

– **自动适配系统设置**：首次访问自动跟随操作系统的浅色/深色偏好
– **手动三档切换**：右上角按钮循环切换——自动 → 浅色 → 深色
– **无闪烁加载**：通过 “ 内联脚本在页面渲染前应用主题- **偏好记忆**：用户的选择保存在 localStorage 中，下次访问自动恢复- **全组件适配**：所有卡片、按钮、徽章、进度条、分隔线均有对应的暗色样式

### 设计风格

采用极简日式和风（Japanese Zen / Washi）美学：

– **和纸纹理背景**：CSS 径向渐变 + SVG 噪点滤镜模拟纸质感
– **墨色调色板**：和纸色 `#F7F3EE`、墨色 `#2C2C2C`、樱花粉 `#D4A4AA`、竹绿 `#7BA17B`、靛蓝 `#3F5F8F`
– **印章风徽章**：H/M/L 维度等级使用带微旋转的圆形印章样式
– **墨水动画**：淡入浮现、左右滑入、印章盖下、悬浮呼吸等动效
– **字体搭配**：Noto Serif SC（标题衬线体）+ Noto Sans SC（正文无衬线体）

—

## 项目结构

“`
sbti-test/
├── docs/                   # 项目文档
│   ├── 项目介绍.md          # 本文件
│   ├── 功能说明.md          # 详细功能文档
│   └── 部署文档.md          # 部署指南
├── public/
│   └── images/             # 27 种人格形象图片
├── src/
│   ├── app/
│   │   ├── layout.tsx      # 根布局（字体、主题、元数据）
│   │   ├── globals.css     # 全局样式（主题色、暗色模式、动画）
│   │   ├── page.tsx        # 首页
│   │   ├── test/page.tsx   # 测试页（客户端组件）
│   │   ├── result/page.tsx # 结果页（客户端组件）
│   │   └── encyclopedia/page.tsx  # 百科页
│   ├── components/
│   │   ├── ThemeProvider.tsx       # 明暗模式上下文
│   │   ├── ui/                     # 基础 UI 组件
│   │   │   ├── ZenCard.tsx         # 毛玻璃卡片
│   │   │   ├── SealBadge.tsx       # 印章风徽章
│   │   │   ├── InkButton.tsx       # 墨色按钮
│   │   │   ├── InkProgress.tsx     # 墨水进度条
│   │   │   ├── InkDivider.tsx      # 渐变分隔线
│   │   │   └── ThemeToggle.tsx     # 明暗切换按钮
│   │   └── result/
│   │       ├── RadarChart.tsx      # 15 轴 SVG 雷达图
│   │       └── DimensionTable.tsx  # 维度详情表
│   ├── data/
│   │   ├── questions.ts    # 32 道题目及维度映射
│   │   ├── outcomes.json   # 27 种人格完整数据
│   │   └── dimensions.ts   # 15 维度定义及解释
│   └── lib/
│       ├── scoring.ts      # 评分算法（原始分→分桶→匹配）
│       ├── share.ts        # 分享图片生成
│       ├── images.ts       # 人格图片路径映射
│       └── constants.ts    # 颜色、维度顺序、稀有度等级
├── package.json
├── next.config.ts
├── tailwind.config.ts
└── tsconfig.json
“`

—

## 快速部署

### 方式一：PM2 部署（推荐）

“`bash
# 解压项目
tar -xzf sbti-test.tar.gz
cd sbti-test

# 安装依赖（需要 Node.js >= 18.18）
npm install –production=false

# 构建
npm run build

# 启动（PM2 进程管理，开机自启）
npm install -g pm2
pm2 start npm –name “sbti-test” — start
pm2 startup && pm2 save
“`

默认监听 3000 端口，通过 Nginx 反向代理绑定域名：

“`nginx
server {
listen 80;
server_name your-domain.com;

location / {
proxy_pass http://127.0.0.1:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection ‘upgrade’;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
}
“`

### 方式二：Docker 部署

“`bash
# 项目根目录创建 Dockerfile
cat > Dockerfile <<‘EOF’ FROM node:20 WORKDIR /app COPY package*.json ./ RUN npm install –production=false COPY . . RUN npx next build EXPOSE 3000 CMD [“npm”, “run”, “start”] EOF # 构建并运行 docker build -t sbti-test . docker run -d –name sbti-test -p 3000:3000 –restart unless-stopped sbti-test “` > 注意：Docker 基础镜像请使用 `node:20`（非 Alpine），Alpine 版本的 Turbopack 存在兼容性问题。国内服务器需配置 Docker 镜像加速。

### 宝塔面板部署

1. 通过宝塔的 **Node.js 版本管理器** 安装 Node.js 18 或 20
2. 上传并解压项目到网站目录
3. 在网站目录下执行 `npm install –production=false && npm run build`
4. 用 PM2 启动服务
5. 在宝塔面板的网站设置中添加 **反向代理**，目标 URL 填 `http://127.0.0.1:3000`

详细部署方案请参考 [部署文档.md](部署文档.md)。

—

## 环境要求

– Node.js >= 18.18（推荐 20.x LTS）
– npm >= 9
– 内存 >= 512MB（构建时需要更多）
– 无需数据库，无需后端服务，无需配置环境变量

—

## 数据来源

– 测试题目：从原版 SBTI 测试 HTML 中提取，包含完整的题目文本、选项值和维度映射
– 人格数据：基于 [serenakeyitan/sbti-wiki](https://github.com/serenakeyitan/sbti-wiki) 的 outcomes.json 适配
– 人格图片：来源于原开源项目

本项目仅供娱乐参考，不构成任何心理学诊断。