SBTI

一个尽量贴近原版内容与测试体验的 SBTI 人格测试镜像项目，面向浏览器静态部署场景。

在线体验

• 站点地址：https://sbti.hnwen17.top
• 作者主页：https://www.hnwen17.top

项目简介

本项目围绕全网传播较广的 SBTI 人格测试页面进行镜像整理与前端改造，在尽量保留原始题目、结果文案、梗图素材和整体测试风格的前提下，补充更适合移动端访问和结果传播的交互体验。

当前版本重点完成了以下工作：

• 整理并接入原版题库、结果文案与结果梗图
• 将答题流程改为逐题切换，减少长表单滚动负担
• 优化手机端排版与触控体验
• 补充基础无障碍支持，包括语义结构、可聚焦控件和结果阅读体验
• 支持结果链接分享
• 支持生成结果分享图，分享图内附带站点二维码，扫码可直接进入测试

功能特性

• 高还原度的题目与结果呈现
• 单题作答流程
• 结果页一键分享链接
• 结果页生成分享图片
• 适配桌面端与移动端浏览器
• 保留联系入口与站点跳转

项目结构

.
├─ index.html           # 当前站点主页面，包含主要样式与交互逻辑
├─ public/
│  ├─ image/            # 测试结果梗图与站点二维码
│  ├─ favicon.svg
│  └─ icons.svg
├─ src/                 # 预留的 Vite / TypeScript 开发目录
├─ package.json
└─ tsconfig.json

本地开发

安装依赖：

npm install

启动本地开发环境：

npm run dev

构建生产版本：

npm run build

构建完成后，产物输出到 dist/，可直接作为静态站点部署。

部署说明

本项目适合部署到任意支持静态文件托管的环境，例如 Nginx、宝塔站点、对象存储静态托管或 GitHub Pages 类平台。

部署时需要保证以下资源路径可正常访问：

• /index.html
• /image/*
• /favicon.svg
• /icons.svg

如果使用 Vite 构建产物部署，直接上传 dist/ 目录即可。

技术说明

• 当前线上版本以静态页面方式运行，主逻辑位于根目录 index.html
• 仓库保留了 Vite 与 TypeScript 工具链，便于后续维护和重构
• 图片分享基于前端 Canvas 生成
• 分享链接优先调用浏览器原生分享能力，无法调用时再回退到复制链接

版权与来源说明

本项目所使用或整理的以下内容，属于原始 SBTI 测试相关创意内容：

• 题目文本
• 结果文案
• 人物设定
• 梗图素材
• 相关视觉表达

参考镜像仓库 UnluckyNinja/SBTI-test 的公开说明可知，原作者并未声明开源许可；因此，本仓库也不对上述原始内容作二次开源授权声明。

本仓库仅对自行新增或调整的前端实现部分负责，包括但不限于：

• 单题切换流程
• 移动端适配
• 无障碍优化
• 分享逻辑
• 页面结构与交互整理

如需将本项目进一步用于二次分发、商用或再次开源，建议先取得原作者授权，或将未获授权的原始内容替换为可合法分发的自有内容。

更详细的第三方内容声明见 NOTICE.md。

致谢

• 原始内容作者：B 站 @蛆肉儿串儿
• 参考镜像站：https://sbti.unun.dev
• 参考镜像仓库：https://github.com/UnluckyNinja/SBTI-test