From db6f17ca3d2ae04228a16796a9e0496127af1a51 Mon Sep 17 00:00:00 2001 From: root Date: Mon, 23 Feb 2026 09:52:46 +0000 Subject: [PATCH] =?UTF-8?q?docs:=20=E6=B7=BB=E5=8A=A0=E9=9C=80=E6=B1=82?= =?UTF-8?q?=E4=B8=8E=E5=BC=80=E5=8F=91=E6=96=87=E6=A1=A3=20DEVELOPMENT.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- DEVELOPMENT.md | 124 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 124 insertions(+) create mode 100644 DEVELOPMENT.md diff --git a/DEVELOPMENT.md b/DEVELOPMENT.md new file mode 100644 index 0000000..e613e9e --- /dev/null +++ b/DEVELOPMENT.md @@ -0,0 +1,124 @@ +# 灵镜 H5 验证版 - 需求与开发文档 + +> 最后更新：2026-02-23 + +--- + +## 项目概述 + +灵镜是一个AI灵魂测试器，通过30题深度对话发现用户的性格特点、潜能、天赋和发展路线，生成专属洞察报告。 + +**访问地址**：https://lingjing.darkerilclaw.com +**服务器**：103.201.130.54，端口3200，PM2进程：lingjing-api +**项目路径**：/root/Projects/lingjing/ + +--- + +## 技术栈 + +- 前端：Next.js + Tailwind CSS（app router） +- 后端：Node.js + Express（server.js） +- AI模型：GPT-5.3-Codex（ycapis API） +- 部署：PM2 + Caddy反代 + +--- + +## 设计原则（范总确认） + +1. **沉浸感第一** — 黑色背景星空飞驰，全屏无边栏，像飞船在宇宙前行 +2. **仪式感** — 开场动画：灵镜淡入淡出 → 副标题 → 开始探索按钮 +3. **未知感** — 不显示进度（已删除1/30进度条），用户不知道什么时候结束 +4. **一问一答沉浸** — 每个问题淡入，回答后问答一起淡出消失，不可回看 +5. **按钮风格** — 纯白文字+下划线，不用边框按钮 + +--- + +## 页面结构 + +``` +/ → 重定向到 /chat +/chat → 主对话页（开场动画 + 沉浸问答） +/waiting → 等待生成报告 +/report-preview → 免费版预览报告 +/report-full → 完整报告（暂时不接支付） +``` + +--- + +## 开场动画流程（/chat页面） + +1. 星空飞驰背景全程运行（Canvas动画） +2. 0.6s后：「灵镜」字样淡入（font-light, tracking-[0.3em]） +3. 2.2s后：「灵镜」淡出 +4. 3.0s后：「一场温柔但有穿透力的对话」淡入 +5. 4.8s后：副标题淡出 +6. 5.6s后：「开始探索」按钮出现 +7. 用户点击后：请求API → 进入沉浸问答 + +--- + +## 沉浸问答流程 + +- 每题全屏居中展示，问题文字淡入 +- 用户在textarea输入回答 +- 点击「继续 →」或回车：问答淡出 → 下一题淡入 +- 没有进度显示，没有历史记录 +- 完成后跳转 /waiting + +--- + +## 当前已知Bug（需要修复） + +### 🔴 Bug1：「继续 →」按钮颜色不是白色 + +**现象**：`app/chat/page.jsx` 里的「继续 →」按钮，设计要求纯白色文字+下划线，但实际显示不是白色。 + +**已尝试但无效的方案**： +- Tailwind class: `text-white` +- 内联style: `color: 'white'` / `color: '#fff'` +- globals.css加 `button { color: inherit }` +- globals.css加 `.continue-btn { color: #fff !important; -webkit-text-fill-color: #fff !important; }` +- 多次 `rm -rf .next && npm run build` + +**怀疑原因**：可能是某个父容器、Tailwind preflight或CSS层叠顺序在覆盖button颜色，具体原因未定位。 + +**需要小周**：用开发者工具或直接审查CSS层叠，找到是谁覆盖了颜色，给出根治方案。 + +--- + +## AI配置 + +``` +API: https://ycapis.com/v1/chat/completions +Model: gpt-5.3-codex +API Key: 在 .env 文件中 YCAPIS_API_KEY +``` + +System Prompt完整版：`/root/Projects/dochub-next/content-private/project-lingjing/system-prompt-v1.md` + +--- + +## 已完成的改动记录 + +| 时间 | 改动内容 | +|------|---------| +| 今日 | 项目初始化（Next.js + Express） | +| 今日 | 暗黑主题（#0a0a0a背景，白色文字） | +| 今日 | 星空飞驰Canvas动画 | +| 今日 | 开场淡入淡出动画序列 | +| 今日 | 沉浸式单题问答界面 | +| 今日 | PWA manifest + 图标（可添加到主屏幕） | +| 今日 | 首页改为直接重定向到/chat（去掉多余入口） | +| 今日 | 删除进度条（1/30） | +| 今日 | 按钮从边框样式改为文字+下划线样式 | +| 今日 | 模型从DeepSeek改为GPT-5.3-Codex（ycapis） | +| 今日 | 「继续 →」按钮白色问题（未解决，待修复）| + +--- + +## 下一步计划 + +1. 修复「继续 →」按钮颜色问题 +2. 接入真实AI对话（目前后端有fallback逻辑） +3. 报告页UI优化 +4. 测试完整对话+报告生成流程