376 lines
14 KiB
Markdown
376 lines
14 KiB
Markdown
# 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` — 现有单页应用结构与视图切换方式。
|