From d9d6404218775aa1db81b22536f2813ff09f6e55 Mon Sep 17 00:00:00 2001
From: Eternal AI Builder <builder@eternal.ai>
Date: Sat, 20 Jun 2026 18:10:03 +0800
Subject: [PATCH] Add full feature and navigation rationality plan

---
 ...01-feat-eternal-ai-full-navigation-plan.md | 375 ++++++++++++++++++
 1 file changed, 375 insertions(+)
 create mode 100644 docs/plans/2026-06-20-001-feat-eternal-ai-full-navigation-plan.md

diff --git a/docs/plans/2026-06-20-001-feat-eternal-ai-full-navigation-plan.md b/docs/plans/2026-06-20-001-feat-eternal-ai-full-navigation-plan.md
new file mode 100644
index 0000000..3a6f3da
--- /dev/null
+++ b/docs/plans/2026-06-20-001-feat-eternal-ai-full-navigation-plan.md
@@ -0,0 +1,375 @@
+# 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` — 现有单页应用结构与视图切换方式。