EternalAI/docs/plans/2026-06-20-001-feat-eternal-ai-full-navigation-plan.md

Eternal AI 完整功能与链接路由规划

Type: feat
Date: 2026-06-20
Origin: Eternal_AI_PRD_v1.docx（微信小程序 PRD v1.0）
Target repo: EternalAI
Status: active

---

1. Summary

本规划依据 Eternal_AI_PRD_v1.docx 对现有 HTML5 落地页进行补全，核心目标是：

1. 让首页四个入口（我的 XXX、蒸馏前任、关于 Eternal AI、申请入驻）分别指向 PRD 定义的独立页面，而不是全部打开同一个人设蒸馏表单。
2. 补齐 PRD 中缺失的 4 个页面：角色库页（P2）、角色详情页（P3）、关于 Eternal AI 页（P5）、创作者入驻页（P6）。
3. 将现有的人设蒸馏表单重新定位到「创作者管理中心 - 角色编辑」（P7），保留 Soul.md / config.yaml 生成功能。
4. 增加底部 tabBar（首页 / 蒸馏前任 / 我的专属创作者），与 PRD 导航结构一致。

当前已实现的页面：首页（P1）、登录/注册视图、蒸馏前任服务页（P4）、人设蒸馏表单（待重新定位）。

---

2. Problem Frame

现有实现把三个完全不同的用户意图塞进了同一个表单：

• 普通用户想找角色库 → 打开了登录/注册（已修正，但登录后无角色库可去）。
• 普通用户想购买蒸馏前任服务 → 打开了正确页面（P4）。
• 创作者想入驻 → 打开了人设蒸馏表单（错误：PRD 要求 P6 仅展示合作说明与微信二维码，不填表单）。
• 关于 Eternal AI → 仅有一个空锚点 #about，无实际页面。

此外，PRD 定义的角色库（P2）、角色详情（P3）、创作者管理中心（P7）均未实现，导致用户登录后没有内容，创作者也没有入口管理角色和收入。

---

3. Requirements Traceability

PRD 页面	访问权限	入口	当前状态	规划动作
P1 首页	所有人	打开站点	已实现	保持，调整链接
P2 角色库页	已登录 + 已绑定创作者	首页「我的 XXX」	缺失	新增
P3 角色详情页	已登录用户	P2 角色卡片	缺失	新增
P4 蒸馏前任页	所有人	首页「蒸馏前任」/ tabBar	已实现	保持，补充底部 tabBar 入口
P5 关于 Eternal AI 页	所有人	首页底部「关于 Eternal AI」	缺失	新增
P6 创作者入驻页	所有人	首页底部「申请入驻」	错误指向 creator 表单	改为微信联系说明页
P7 创作者管理中心	创作者账号登录后	tabBar「管理」	缺失	新增，复用现有 creator 表单作为「角色编辑」

---

4. Link Rationality（首页入口调整说明）

4.1 我的 XXX → 登录 → 角色库（P2）

为什么这样设计：

• PRD 中「我的 XXX」是角色库入口，而角色库需要登录后才能访问。
• 未登录用户点击后应先进入登录/注册；登录后根据是否绑定创作者决定展示内容。
• 登录态由前端本地模拟（localStorage 标记），后续由后端接管。

状态分支：

• 未登录 → 登录/注册视图。
• 已登录 + 已绑定创作者 → P2 角色库（显示该创作者上架的角色）。
• 已登录 + 未绑定创作者 → P2 角色库占位态，提示「你还没有绑定专属创作者」。

4.2 蒸馏前任 → P4 蒸馏前任服务页

为什么这样设计：

• 与 PRD 一致，面向情感类用户的自营服务。
• 保持现有 P4 页面结构：服务介绍、流程、价格、下单、客服微信、分润说明。

4.3 关于 Eternal AI → P5 关于页

为什么这样设计：

• PRD 明确这是建立女性用户信任的页面，需要展示平台简介、连接方式说明、FAQ（安全/隐私/账号/情感）。
• 当前空锚点 #about 无法承载任何信息，必须新建独立视图。

4.4 我是创作者，申请入驻 → P6 创作者入驻页

为什么这样设计：

• PRD 明确 P6「不做表单提交，直接走微信私聊沟通」。
• 现有的人设蒸馏表单是创作者入驻后的生产工具，不是入驻申请本身。
• 因此 footer 入口应改为展示合作模式、分润比例、负责人微信二维码的引导页。

4.5 底部 tabBar

为什么这样设计：

• PRD 底部导航为「首页 / 蒸馏前任 / 我的专属创作者」。
• 在 HTML5 站点中用固定底部 tabBar 模拟小程序导航，让 P4 和 P2/P7 都有全局入口。
• tabBar 在首页、蒸馏前任、角色库/创作者中心之间切换。

---

5. Implementation Units

U1. 调整「我的 XXX」链路：未登录进登录页，已登录进角色库

Goal: 让首页「我的 XXX」卡片根据登录态正确分流。

Requirements: PRD P1 板块三、P2 条件逻辑。

Dependencies: U2（角色库页必须先存在）。

Files:

• index.html
• app.js

Approach:

• 在 app.js 增加 authState 对象：{ isLoggedIn: bool, boundCreator: object|null }。
• 点击「我的 XXX」时：
  • 未登录 → showView('auth')，登录成功后写入 authState 并跳转 P2。
  • 已登录 → 直接 showView('role-library')。
• 登录/注册提交不再 alert，而是更新状态并跳转。

Test scenarios:

• 未登录点击「我的 XXX」→ 显示登录页。
• 登录成功后点击「我的 XXX」→ 显示角色库。
• 登录后 boundCreator 为空 → 角色库显示「未绑定创作者」提示。

---

U2. 新增角色库页（P2）

Goal: 展示创作者上架的所有 AI 角色。

Requirements: PRD P2。

Dependencies: U1。

Files:

• index.html（新增 #role-library view）
• styles.css
• app.js

Approach:

• 新增 view--role-library，顶部显示创作者自定义名称（如「云朵的后宫」）。
• 角色卡片列表：头像、名字、简短简介、价格。
• 点击卡片 → P3 角色详情。
• 空态：未绑定创作者时显示提示文案。

Test scenarios:

• 角色列表按 PRD 字段渲染。
• 点击卡片正确跳转角色详情。
• 未绑定创作者时显示空态提示。

---

U3. 新增角色详情页（P3）

Goal: 展示单个角色详情并模拟订阅/二维码流程。

Requirements: PRD P3。

Dependencies: U2。

Files:

• index.html（新增 #role-detail view）
• styles.css
• app.js

Approach:

• 新增 view--role-detail，包含：角色大图、名字、详细介绍、价格、付款按钮。
• 点击「付款」后切换到已付款态：显示微信专属二维码、可下载头像、引导文案。
• 由于无真实支付接口，付款按钮先切换本地状态并展示二维码占位图。

Test scenarios:

• 付款前态显示价格与按钮。
• 点击付款后切换到已付款态，显示二维码和头像下载。
• 返回按钮回到角色库。

---

U4. 新增关于 Eternal AI 页（P5）

Goal: 建立用户信任，解答安全、隐私、账号、情感类常见问题。

Requirements: PRD P5。

Dependencies: 无。

Files:

• index.html（新增 #about view）
• styles.css
• app.js

Approach:

• 新增 view--about，结构：平台简介、连接方式说明（Claw / iLink）、FAQ 折叠面板。
• FAQ 分类：安全类、隐私类、账号类、情感类。
• 首页底部「关于 Eternal AI」改为 data-action="open-about"。

Test scenarios:

• 点击 footer「关于 Eternal AI」打开 P5。
• FAQ 可展开/收起。
• 返回按钮回到首页。

---

U5. 重构创作者入驻页（P6）为微信联系引导

Goal: 将 footer「申请入驻」从 creator 表单改为 PRD 定义的入驻说明页。

Requirements: PRD P6。

Dependencies: 无。

Files:

• index.html（新增 #creator-onboarding view，或复用/替换原 footer 目标）
• styles.css
• app.js

Approach:

• 新增 view--creator-onboarding：入驻说明、合作模式（20% 平台 + 80% 创作者）、负责人微信二维码/微信号。
• 不提交表单，仅展示联系方式。
• footer「我是创作者，申请入驻」改为 data-action="open-creator-onboarding"。

Test scenarios:

• 点击 footer「申请入驻」打开 P6 说明页。
• 页面包含微信二维码和分润说明。
• 返回按钮回到首页。

---

U6. 将现有人设蒸馏表单重新定位为「创作者管理中心 - 角色编辑」

Goal: 保留 Soul.md / config.yaml 生成功能，但仅作为创作者后台工具。

Requirements: PRD P7 Tab 1 角色管理页；同时满足用户原始需求（生成 Hermes agent 配置文件）。

Dependencies: U5。

Files:

• index.html
• styles.css
• app.js

Approach:

• 当前 #creator view 从「landing footer 入口」改为「creator center 内部编辑页」。
• 入口文案调整：header 从「Eternal AI / 人设蒸馏器」改为「角色编辑 / 生成配置文件」。
• 保留 4 步表单和下载逻辑。

Test scenarios:

• 从创作者管理中心点击角色进入编辑页时，表单正常显示。
• 提交后仍能生成并下载 Soul.md + config.yaml。
• 返回按钮回到创作者管理中心的角色列表。

---

U7. 新增创作者管理中心（P7）

Goal: 为创作者提供角色管理、收入、账户设置入口。

Requirements: PRD P7。

Dependencies: U5, U6。

Files:

• index.html（新增 #creator-center view）
• styles.css
• app.js

Approach:

• 新增 view--creator-center，内部三个 tab：我的角色 / 收入 / 我的。
• 我的角色： 角色列表（头像、名字、状态），点击角色进入 U6 的编辑页，新增角色也进入同一表单。
• 收入： 可提现余额、流水明细、提现申请表单（收款方式 + 金额）。
• 我的： 创作者名字、自定义角色库名称（即首页「我的 XXX」显示文字）、退出登录。
• 该中心仅在 authState 标记为创作者时从 tabBar「管理」进入；普通用户该 tab 指向角色库或提示申请创作者。

Test scenarios:

• 三个 tab 可切换。
• 点击角色进入编辑表单。
• 自定义角色库名称保存后，首页「我的 XXX」同步更新。
• 收入页显示余额与流水，提现表单可提交（前端模拟）。

---

U8. 新增底部 tabBar 导航

Goal: 模拟 PRD 的小程序底部导航：首页 / 蒸馏前任 / 我的专属创作者。

Requirements: PRD P1 底部导航栏。

Dependencies: U2, U4, U7。

Files:

• index.html
• styles.css
• app.js

Approach:

• 在 index.html 底部新增 .tab-bar 固定元素。
• 三个 tab：首页 → P1；蒸馏前任 → P4；我的专属创作者 → 未登录进登录页，已登录普通用户进 P2，已登录创作者进 U7 创作者管理中心。
• tabBar 在当前页面对应 tab 上高亮。

Test scenarios:

• 三个 tab 正确切换视图。
• 高亮状态与当前视图一致。
• 未登录时点击第三个 tab 先进登录页。

---

U9. 统一视图路由与状态管理

Goal: 让多视图切换更可靠，便于后续接入真实后端。

Requirements: 全局路由一致性。

Dependencies: U1–U8。

Files:

• app.js
• index.html

Approach:

• 维护 views 字典，所有视图统一 showView(viewId) 切换。
• authState 和 creatorState 集中到顶部，提供 login(), logout(), bindCreator() 方法。
• 每次视图切换时滚动到顶部，并更新 tabBar 高亮。
• 保留 URL hash 与当前视图同步（可选，便于刷新后定位）。

Test scenarios:

• 任意返回按钮都能回到正确上一页或首页。
• 刷新页面后仍保持登录态（localStorage）。
• 视图切换无 JavaScript 报错。

---

6. Key Technical Decisions

决策	选项	选择	理由
登录态存储	localStorage / sessionStorage / 仅内存	localStorage	单页应用刷新后保持状态，后续后端接管时替换为 token 即可。
支付流程	真实支付接口 / 前端模拟	前端模拟	PRD 附录列明「自动支付接口暂不开发」，一期仅做 UI 状态切换。
角色数据	硬编码 mock / localStorage / 后端	硬编码 mock + 可扩展结构	一期先展示前端，数据结构按后端接口预留字段。
创作者表单定位	删除 / 保留在创作者中心	保留在创作者中心	满足用户原始需求：生成 Soul.md 与 config.yaml。
tabBar 实现	固定底部栏 / 无 tabBar	固定底部栏	与 PRD 一致，也弥补 HTML5 缺少小程序原生导航的问题。

---

7. Scope Boundaries

In Scope

• 首页四个入口的路由修正。
• P2、P3、P5、P6、P7 的页面结构与交互。
• 底部 tabBar。
• 前端模拟的登录态、创作者态、支付态。

Deferred to Follow-Up Work

• 真实后端 API 对接（登录、支付、角色 CRUD、收入流水）。
• 文件上传（蒸馏前任聊天记录），PRD 已明确一期走微信人工指导。
• 自动提现审核与转账，PRD 已明确一期手动处理。
• 运营后台。
• 创作者页面颜色主题自定义。

---

8. Risks & Dependencies

风险	影响	缓解
PRD 面向微信小程序，而当前是 HTML5 站点，部分交互（如微信扫码、小程序 tabBar）需要重新设计。	中	用 HTML5 可实现的等价交互替代：tabBar 用固定底部栏、扫码用二维码占位图、微信支付用模拟按钮。
创作者管理中心把现有人设蒸馏表单作为角色编辑页，表单字段可能与 PRD P7 的「角色管理页」字段不完全一致。	低	在 U6 中明确表单就是角色编辑工具，PRD P7 的其他字段（价格、用量、二维码）在角色列表中展示。
缺少真实后端，登录/支付状态容易在刷新或切换设备时丢失。	低	一期用 localStorage，并在计划中标注后续对接点。

---

9. Open Questions

1. 创作者入驻（P6）的负责人微信号和二维码是否已确定？需要真实素材占位还是先用示例图？
2. 角色库页（P2）的示例角色数据是否需要用户提供，还是先用 2–3 个虚构角色填充？
3. 首页「我的 XXX」中的 XXX 默认文案是否保留「我的 [XXX]」还是给一个默认占位如「我的角色库」？

---

10. Sources & Research

• Eternal_AI_PRD_v1.docx — 产品需求文档，定义 7 个页面及交互逻辑。
• 当前代码：index.html、app.js、styles.css — 现有单页应用结构与视图切换方式。