lingjing/DEVELOPMENT.md

3.8 KiB
Raw Blame History

灵镜 H5 验证版 - 需求与开发文档

最后更新2026-02-23


项目概述

灵镜是一个AI灵魂测试器通过30题深度对话发现用户的性格特点、潜能、天赋和发展路线生成专属洞察报告。

访问地址https://lingjing.darkerilclaw.com 服务器103.201.130.54端口3200PM2进程lingjing-api 项目路径/root/Projects/lingjing/


技术栈

  • 前端Next.js + Tailwind CSSapp router
  • 后端Node.js + Expressserver.js
  • AI模型GPT-5.3-Codexycapis 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-Codexycapis
今日 「继续 →」按钮白色问题(未解决,待修复)

下一步计划

  1. 修复「继续 →」按钮颜色问题
  2. 接入真实AI对话目前后端有fallback逻辑
  3. 报告页UI优化
  4. 测试完整对话+报告生成流程