HeartScope

中文 | English

一个面向男性用户的关系风险观察工具：用 1200+ 情境题库、三维坐标模型和结构化报告，帮助判断一段关系是否值得继续投入。

在线体验 / Live Demo

HeartScope 不是心理诊断，也不是婚恋咨询；它是一个偏娱乐化、结构化的关系风险观察模型，用来帮助用户在新关系、暧昧关系或已有关系中多一个理性避雷参考。

项目简介

HeartScope 是一个纯前端 H5 关系风险观察模型，面向广大男性同胞，用于在认识一段新关系、暧昧关系或已有对象时，辅助判断对方是否值得继续交往。

项目把关系中常见但容易被忽略的信号结构化，包括外在吸引、关系波动、情绪拉扯、边界感、沟通复盘、生活处理能力和长期稳定性。用户完成情境化测试后，系统会输出三维坐标、风险等级、类型判定、继续了解值、置信度和综合建议。

核心功能

功能	说明
1200+ 情境化题库	题库覆盖颜值指数、作妖指数、智商指数三个方向，每个维度约 400 道题。
三种题量模式	支持 18 题快速观察、36 题标准分析、60 题深度报告。
两种填写视角	支持自测模式，也支持根据身边女生或对象表现填写的观察代测模式。
三维关系风险模型	使用 Three.js 生成可旋转、可缩放的 3D 坐标模型。
风险区域可视化	模型中包含危险区、普通区、最佳区和彩蛋区。
结构化结果报告	输出风险等级、类型判定、继续了解值、置信度、三轴解析和综合建议。
多图表展示	包含 3D Vector Model、三轴雷达图、二维风险平面图和移动端条形图。
移动端适配	针对手机端优化答题按钮、自动翻页、结果页布局和 3D 展示顺序。
匿名使用	不要求登录，不上传照片，不读取通讯录，不读取定位。
开发者模式	GitHub 版本保留开发者模式，便于调试不同风险区域的示例结果。

三维评分模型

HeartScope 使用 X/Y/Z 三轴呈现关系观察结果：

轴	名称	观察内容
X	颜值指数	外在呈现、质感、整洁度、场合感和吸引力。
Y	作妖指数	情绪波动、关系拉扯、试探行为、边界感和冲突处理。
Z	智商指数	生活处理能力、理性决策、沟通复盘和风险意识。

三轴结果会共同影响最终的风险等级、类型判定和继续了解值。

结果报告包含什么

完成测试后，系统会生成：

• 三维坐标模型和结果球位置
• 风险等级
• 类型判定
• 继续了解值
• 置信度
• 三轴雷达图
• 二维风险平面图
• 颜值 / 作妖 / 智商三轴解析
• 综合建议
• 注意事项弹窗

这些结果不是为了给某个人贴绝对标签，而是帮助用户识别一段关系里可能存在的风险信号，判断是否适合继续投入时间、情绪和资源。

技术栈

分类	技术
构建工具	Vite
开发语言	TypeScript
3D 可视化	Three.js, OrbitControls, CSS2DRenderer
图表	Canvas
样式	CSS
部署	Vercel 静态部署
架构	纯前端 H5

当前公开版本为纯前端实现，答题、评分和结果生成均在浏览器端完成。核心评分逻辑位于 apps/client/src/local-engine.ts。

项目结构

HeartScope-development/
├── apps/
│   └── client/
│       ├── index.html
│       ├── package.json
│       ├── tsconfig.json
│       ├── vite.config.ts
│       └── src/
│           ├── main.ts              # SPA 页面、答题流程、结果页
│           ├── local-engine.ts      # 浏览器端本地评分引擎
│           ├── questions.ts         # 1200+ 题库数据
│           ├── three-scene.ts       # Three.js 三维模型
│           ├── radar-chart.ts       # 三轴雷达图
│           ├── bubble-plane.ts      # 二维风险平面图
│           ├── interaction/         # 鼠标、磁吸、动效交互
│           ├── styles/main.css      # 全局样式和移动端适配
│           └── types/index.ts       # 类型定义
├── package.json
├── package-lock.json
├── README.md
└── README_EN.md

环境准备

• Node.js 18 或更高版本
• npm（随 Node.js 一起安装）

本地开发

1. 获取项目

如果你是从 GitHub 克隆项目：

git clone https://github.com/xiaopan369/HeartScope
cd HeartScope-development

如果你是下载 ZIP 压缩包，解压后进入项目根目录：

cd HeartScope-development

2. 安装依赖

npm install

3. 启动开发服务

npm run dev

默认本地地址：

http://localhost:5173

4. 生产构建

npm run build

构建产物会输出到：

apps/client/dist

5. 本地预览构建产物

npm run preview

安装验证

本仓库已验证：

npm install
npm run build

验证结果：npm install 成功下载依赖，npm run build 构建通过。

部署说明

公开版本推荐使用 HeartScope-public/ 目录部署，因为该版本已经移除开发者模式入口。

Vercel 配置：

{
  "buildCommand": "vite build --config apps/client/vite.config.ts",
  "outputDirectory": "apps/client/dist",
  "installCommand": "npm install"
}

开发者模式

development 版本默认保留开发者模式，方便本地调试不同结果区域：

• 危险区
• 普通区
• 最佳区
• 彩蛋区

开发者模式可以跳过答题，直接生成示例结果，适合调试 3D 模型、区域标签、结果页布局、移动端样式和弹窗交互。

如何关闭开发者模式

公开发布时建议关闭或删除开发者模式，避免普通用户跳过答题直接进入结果页。

1. 打开 apps/client/src/main.ts。
2. 删除首页按钮区域中的 开发者模式 按钮。
3. 删除 document.getElementById('devBtn') 对应的点击事件绑定。
4. 从 PageState 中移除 dev-mode。
5. 从页面路由表中移除 'dev-mode': rDevMode。
6. 如需彻底移除调试代码，删除 DEV_PRESETS、rDevMode() 和 generateDevResult()。
7. 执行构建确认没有残留引用：

npm run build

简单区分：

• HeartScope-development/：保留开发者模式，适合上传 GitHub 和后续开发。
• HeartScope-public/：移除开发者模式，适合公开部署到 Vercel。

隐私说明

HeartScope 默认匿名使用：

• 不要求登录
• 不上传照片
• 不读取通讯录
• 不读取定位
• 不需要后端数据库
• 当前公开版答题和评分均在浏览器端完成

免责声明

HeartScope 仅供成年人娱乐、关系观察和自我参考使用，不构成心理、医学、法律、婚恋或任何专业建议。

测试结果只代表本次填写视角下的观察样本，不应被用于羞辱、控制、网暴、PUA 或伤害他人。真正的关系判断仍应结合现实相处、长期行为一致性、个人边界感和实际沟通情况综合考虑。

License

Private project. All rights reserved.