# HakkoAI · Web 端 Roleplay 体系 — 产品设计文档 **v3**

> **这是什么**:HakkoAI **web-app**(`app.hakko.ai`,登录后的角色发现 / roleplay 聊天 / 陪伴 / 变现)的整体产品设计。
> 入口 = 官网 `hakko.ai` 导航栏 **Companion** 点击跳转。骨架参考 Telloria / emochi / PolyBuzz 的 web IA,**按 HakkoAI App 的真实用户旅途与真实后端能力重塑**,视觉 100% 用 HakkoAI 设计系统(暗色 `#0A0A0B` / 粉 `#FF77B7` / Figtree)。
> **配套交付**:本文档 + `pages/` 下 1:1 高保真 HTML mockup + `index.html` 画廊 + 统一组件(header / footer / 弹窗登录)。**只做 mockup,不碰生产代码**。
> 整理:2026-06-10(**v2 按 13 条需求 A–M 重写**)→ 2026-06-11(**v3 按用户评审重构导航体系**,见 §0.3)→ 2026-06-12(**v6 品牌/交互**:① 真实官方 logo mark 内联自 `design/logos/svga/`;② 视觉向 hakko.ai 主站统一——底色 `#0C0D0F`、Figtree 字体与 `#f998bb→#ff63a5` 粉渐变本就与主站同源,官网那些 tab 内容不变;③ 上下文生成**串行 image→video**(选消息→先生图→从图 Animate 成视频,无直接生视频);④ character 新增 **Comments** tab;⑤ 排序 selector 改自定义组件)｜ 设计系统权威:[`../design.md`](../design.md) · [`../app_system/DESIGN_PRINCIPLES.md`](../app_system/DESIGN_PRINCIPLES.md)｜架构路由:[`../ARCHITECTURE.md §4.6`](../ARCHITECTURE.md)

---

## 0. 修订摘要(v2 相对 v1)

### 0.1 本轮 13 条需求(A–M)落点

| | 需求 | 本文承接处 |
|---|---|---|
| **A** | www↔app 入口(导航 Companion / Sign In 引导 / 首页 companion 加 Chat + UGC;signin / PC google 回跳 / TOS / Privacy 体验优化) | §1 §2 §8(P0) |
| **B** | 不只 PGC——线上有大量 public character / voice / video UGC,**混排可筛选** | §5 §8(P2) |
| **C** | 全站统一 **footer**(保留 www 体系设计);header 用 app 式,logo 旁可**回 www**;app 内加 pc/mac/app **下载引导** | §3.1 §3.2 §8(P0) |
| **D** | 主视觉跟随 app 更新的 **logo/字体**;字标 **「HakkoAI」中间不留空格**(跨端整体对齐另起 session) | §10 |
| **E** | 路由:discover→**直接进 chat**;chat 点头像→character | §3.4 §8(P2/P3/P4) |
| **F** | webapp companion = 对齐 app 的 live 系统,**保留但改名 Live**;引 **Live2D web SDK**,仅有 live2d 的人物可用 | §7 §8(P5) |
| **G** | IM 兼容 app **全部能力**(含 contextual image/video generation 接线);**无登录可浏览**,**任何扣 credit 行为弹登录窗**;整页登录→**弹窗登录**(emochi/PolyBuzz 式) | §4 §6 §8(P1/P4) |
| **H** | shop 去掉 daily reward 入口,改 **从 profile 进**;profile 提供 **hover 下拉** 承载主入口;**Pro 标签移到头像右下**,不占导航栏 | §3.1 §3.3 §8(P11/P12) |
| **I** | 全站 **15 种语言** 本地化选择 | §3.5 |
| **J** | **去掉独立 P7**,点 Chats 直进 P4,默认选中最近聊的角色,无则用 **Hakko 默认角色** | §3.4 §8(P4) |
| **K** | P4 界面 **左右都有收起侧栏按钮** | §8(P4) |
| **L** | P9 会员权益读 **mindcraft 真实线上配置** 更新 | §9 |
| **M** | 人物列表布局/设计调整(emochi 式)+ **Google one-tap 自动登录弹窗** | §5 §8(P2) |

### 0.2 真实代码依据(grounding — 本轮新增,推翻了 v1 几处臆测)

> 三份只读侦察(official-site / mindcraft / renderer doudou-client-main),`file:line` 级。**v1 的几处从 Telloria 借来的设定被真实代码推翻**,v2 已校正:

- **15 语言已存在**:`official-site/app/constants/i18n.ts` 已定义恰好 15 种:`en/ja/hant/es/pt/fr/de/it/ko/ru/id/vi/ar(RTL)/hi/th`。需求 I = 直接用这套(阿语 RTL)。
- **真实 app IM 没有 edit/regenerate/branch**:`doudou-client-main/.../chat/components/MessageActions.vue` 的真实动作集 = `like/dislike/report/share/pin(pinToggle)/recall/delete`(`addMemory` 当前注释掉);但**有** memory 抽屉(`memory/MemoryDrawer.vue`:pinned + events + 编辑)、语音播放/TTS、**图片+视频生成**(后端 `user_media_serv.py`,`MEDIA_KEY_IMAGE=0 / VIDEO=1`,扣 `CHANGE_COINS / CHANGE_DIAMONDS`)、gift、换背景、语音通话(RTC/TRTC)。→ v2 的 P4 按真实集重做(去 edit/branch,补图视频生成接线)。
- **UGC 混排是后端既有能力**:`character_ctrl.py /api/character/mobile/character_square` 已把官方(`source_type=1`)+ UGC(`=2`)混排,按 `species/body/rs_tags` + `order_by`(0 综合/1 热度/2 最新)筛;UGC 模型 `ugc_character.py`:`is_public_by_user`、`audit_status`(1 待审/2 通过/3 拒)、`creator_id`、`tts_info/timbre_id`、`UgcFigures`(avatar/card/**design_video**)、remix(`parent/root_character_id`);NSFW 开关 `adult_content_switch`(默认开)。→ §5 直接对齐。
- **会员是 Pro/Ultra + 月/季/年,但数值在 DB**:`vip.py` `PackageLevel{FREE0,PRO1,ULTRA2}` × `PackageType{YEAR1,SEASON2,MONTH3}`;权益与价格在 `VipPlan.benefit_list*` / `current_price`(DB,`vip_repo.get_vip_plan_list` is_online=1),**代码里没有**。→ §9 用占位数值 + 标注待接线上。签到奖励**在代码里**(`constant.py`:免费用户 7 天周期 100–700 coins/天,JP 200–1100)。
- **官网现状**:header `InternationalHeader.vue` 的 Companion = 锚点 `/#companion`;Sign In = 整页跳 `account.hakko.ai`(DouOAuth SDK,client `1dbd92e7…`),**无弹窗、无 app.hakko.ai 入口**;footer `footer/International.vue` = 5 列(PRODUCT/COMPANY/RESOURCES/LEGAL/SNS)+ 底部版权;Privacy/Terms 页(`pages/privacy.vue`/`terms.vue`)从 `api.magicneko.com:8760` 拉 HTML、标题硬编码中文(待 i18n);下载页 `pages/download.vue`(PC Win/Mac + 移动)。
- **Live2D web 缺 SDK**:renderer 只有桌面版 `@doudou/live2d-desktop-pet`(Electron/WPF),**无 web Cubism SDK**;是否有 live2d 看 `stores/modelDisplay.ts` 的 `model_display_type`(`live2d|image`,来自 `modelInfo.desktop_l2d_info`)。→ §7 标注需引 web SDK + has-live2d 门控。

### 0.3 v3 修订(2026-06-11,用户逐页评审后定稿) — **导航体系重构 + chat 强化 + 两货币**

> 用户评审 v2 后的口径,**覆盖 §3.1/§3.4 的 v2 写法**;统一 chrome 实现在 `js/shell.js`(v3)。

1. **顶部 header = 官网菜单**(不再是 app 产品 tab):渐变线框 logo 标 + **HakkoAI** 字标 + `Home / Use Cases / Companion / Resources▾`(清单取自 official-site `app/utils/state.ts` 真实导航)+ 右侧 语言 EN / 💎⚡资产 / ⬇Get App / 头像(Pro 右下)。**去掉 ‹www 钮**——官网菜单本身就是回官网的路。
2. **新增左侧栏**(app 导航主承载):**Create**(粉渐变 CTA 置顶,访客点击触发扣费门控)→ `Explore / Live / Hakko+ / Shop` → **CHATS = 会话历史列表**(头像/预览/未读,点行直进 chat;访客显示登录引导)→ 底部 Settings + Discord/Privacy/Terms。**「Chats」顶部 tab 取消**,会话入口全在侧栏;chat 页可整栏收起(`HKShell.toggleSidebar()`),≤980 变抽屉(header 汉堡 + scrim)。
3. **Discover 改名 Explore**(路由 `/explore`):**取消分块,单一无限下拉信息流**;卡片对齐 emochi(9:16 大图 + 💬计数 + UGC/Video/Voice 角标 + 名/两行简介/弱化 tag/@creator);来源/题材/排序筛选保留。
4. **chat 强化**:空输入时主按钮 = **Go on**(直接推进剧情),输入后变发送;**＋号 = 上传图片/进入生成**;**图/视频 Generate 必须先选中 1+ 条消息**(✨进入选择模式 → 勾选气泡 → 底部浮条 → 金色确认);右面板收起/展开合并到同一个 Memory 按钮。
5. **两货币定稿**(用户口径确认,**无第三货币**):💎 Gems(充值硬通货,永不过期)+ ⚡ Credits(行动点,按档日补+倒计时);**Coins 取消,任务/活动奖励直接发 ⚡/💎**。Shop 侧栏项 → wallet,Hakko+ 侧栏项 → membership。
6. **P1 弹窗页落地**:`onboarding.html` 重做为「弹窗覆盖 Explore」形态(one-tap + Google/Apple/email → OTP → orb 建档 → Welcome Gift),整页登录废弃;`_kit.html` 改为直接渲染 shell 真实产物(自真化)。

---

## 1. 定位:www = 入口门户,web-app = 实际承载(需求 A)

| 表面 | 域 | 仓库 | 职责 |
|---|---|---|---|
| **官网 www** | `hakko.ai` | `official-site`(Nuxt 4,pnpm,`TARGET=GLOBAL`) | **game companion 软件的下载 + 进入入口**:营销落地、下载(PC/Mac/App)、companion 展示、法务页;**是流量入口,不是产品本身** |
| **web-app** | `app.hakko.ai` | `doudou-client-main` 的 web build(`environmentManager type:'web'`) | **roleplay 产品本体**:发现 / 角色 / 聊天 / Live / 创建 / 商业化;与 PC/Mac 壳同一套 renderer 代码 |

> 原则:**www 与 app 分开无问题**;关键是**把 www 的入口开给 app**(§2),并把 app 的下载引导回流到 www 的客户端(§3.1 下载引导)。

## 2. www → web-app 入口矩阵(需求 A,含我补充项)

| # | 入口位置 | 现状(grounding) | 改法 |
|---|---|---|---|
| A-1 | 导航栏 **Companion** | 锚点 `/#companion`(首页区块) | 改为 → **web-app `app.hakko.ai/discover`**(带 UTM);新访客先逛货架转化最高 |
| A-2 | **Sign In** | 整页跳 `account.hakko.ai`(DouOAuth) | 改为 **弹窗登录**(§4),登录后落 web-app;web-app 内再引导下载客户端 |
| A-3 | 首页 **companion 展示**(`Companion.vue` 轮播) | 仅展示 + 隐藏的 Telegram 绑定,**无 Chat 入口、无 UGC** | 每张 companion 卡加 **「Chat」按钮**直接深链进 web-app chat;**模块升级容纳 UGC**(§5) |
| A-4 ✚ | hero 主 CTA | 「下载」为主 | 增「**Try in browser**」→ web-app /discover(零安装即试) |
| A-5 ✚ | **download 页** ↔ web-app | 仅下载 | 双向互链:download 页加「先在浏览器试用」;web-app 内加下载客户端引导(§3.1) |
| A-6 ✚ | **footer** PRODUCT 列 | Downloads/Use Cases/Companion | 增「**Web App**」入口 |
| A-7 ✚ | 角色**公开落地页**(可 SEO) | 无 | 角色公开页 `hakko.ai`→深链 `app.hakko.ai/character/:id`;未登录可看,深度动作触发登录(§4) |
| A-8 | **signin / PC google 回跳 / TOS / Privacy** 体验 | 整页 OAuth;法务页拉远端 HTML、标题硬编码中文 | 弹窗登录(§4)、PC Google 回跳成功页美化、TOS/Privacy 用统一暗色排版 + i18n 标题(§8 P0-法务) |

## 3. 信息架构(IA)

### 3.1 全局 chrome:顶部官网菜单 + 左侧栏(v3 定稿,需求 C/H + 用户评审)

```
┌──────────────────────────────────────────────────────────────────────────────┐
│ [☰] [◇HakkoAI]  Home  Use Cases  Companion  Resources▾   [🌐EN] [💎1,280+]   │ ← header =
│                                                  [⚡2,350+] [⬇Get App] [头像·Pro]│   官网菜单
├───────────────┬──────────────────────────────────────────────────────────────┤
│ [＋ Create]   │                                                              │
│  ◎ Explore    │                                                              │
│  ♡ Live       │              .hkw-main(各页内容)                              │
│  ♕ Hakko+     │                                                              │
│  🛍 Shop      │                                                              │
│  CHATS ───────│                                                              │
│  · Nika   now │                                                              │
│  · Hakko   ①  │                                                              │
│  · …          │                                                              │
│  ⚙ Settings   │                                                              │
└───────────────┴──────────────────────────────────────────────────────────────┘
```

- **顶部 header = 官网菜单**(`Home/Use Cases/Companion/Resources▾`,真实清单来自 official-site `state.ts`)+ 渐变线框 **logo 标** + **HakkoAI** 无空格字标(需求 D)。**无 ‹www 钮**——点官网菜单任意项即回 `hakko.ai`(需求 C 的「回官网」由菜单本身承担)。
- 右侧:语言 EN ▾ · 资产 pill(💎/⚡,点 `+`→ /wallet)· **⬇ Get App**(PC/Mac/App hover 下拉,需求 C)· **头像**(右下 **Pro/Ultra 徽标**,需求 H;hover 出下拉 §3.3)。未登录:资产/头像 → 粉色 **Log in**(=弹窗)。
- **左侧栏 = app 导航主承载**:**Create** 粉渐变 CTA 置顶(访客点击触发扣费门控)→ `Explore / Live / Hakko+ / Shop` → **CHATS 会话历史**(取代 v2 的顶部 Chats tab;点行直进 chat,访客显示登录引导)→ 底部 Settings + Discord/Privacy/Terms。
- chat 页可**整栏收起**(`HKShell.toggleSidebar()`);**≤980 侧栏变抽屉**(header 汉堡 + scrim,`HKShell.drawer()`)。

### 3.2 统一 footer(全站一致,保留 www 体系设计)(需求 C)

**1:1 复刻 `official-site/app/components/base/footer/International.vue` 的 5 列结构**,app 与 www 共用同一个 footer 组件:

| 列 | 链接 |
|---|---|
| **PRODUCT** | Downloads · Use Cases · Companion · **Web App**(✚A-6) |
| **COMPANY** | About Us · Vision & Mission · About HakkoAI · Contact |
| **RESOURCES** | Blog · FAQ · Quick Start · Supported Games |
| **LEGAL** | Privacy Policy · Service Agreement · Companion Creation Agreement |
| **SNS** | Discord · X · YouTube · TikTok |

底部:logo + © 版权(黑底)+ **语言切换器**(§3.5)。`.hkw-foot-*` 组件移植到 `css/app.css`。

### 3.3 Profile hover 下拉(承载主功能入口)(需求 H)

头像 hover → 下拉面板(不再把这些塞进导航栏):
```
┌─────────────────────────┐
│ 头像 + name + Pro 徽标   │
│ 💎1,280  ⚡2,350         │
├─────────────────────────┤
│ My Profile              │
│ My Companions / Creations│
│ ⭐ Daily Rewards (✚迁移自 shop, 需求 H) │
│ Wallet · Membership      │
│ Settings                │
│ Sign out                │
└─────────────────────────┘
```
- **Daily Rewards 入口从 shop 移到这里**(需求 H);shop 只保留 membership / wallet 商业化簇。

### 3.4 路由表(去 P7、Companion→Live、新路由)

| 路由 | 页面 | mockup | 登录 | 入口(v3) | 变化 |
|---|---|---|---|---|---|
| `/explore` | ★发现(默认落点,原 /discover) | `discover.html` | 可匿名 | 侧栏 Explore | **无限流 + emochi 卡**(B/M,§0.3) |
| `/character/:id` | ★角色详情 | `character.html` | 可匿名 | — | **从 chat 头像进**(E) |
| `/chat/:id` | ★Roleplay | `chat.html` | 需登录 | **侧栏 CHATS 行** | 会话列表入全局侧栏;Go on/选择式生成(§0.3) |
| `/live/:id` | **Live**(原 Companion) | `live.html` | 需登录 | 侧栏 Live | 改名 + Live2D web(F);亲密度卡随角色切换 |
| `/call/:id` | 语音/视频通话 | `call.html` | 需登录 | Live 页内 | |
| ~~`/chats`~~ | ~~P7 会话列表~~ | — | — | — | **删除**:会话历史 = 全局侧栏 CHATS(J) |
| `/create` | 创建 | `create.html` | 需登录 | **侧栏 Create CTA** | 访客点击触发扣费门控 |
| `/membership` | 会员/付费墙 | `membership.html` | 可匿名 | 侧栏 **Hakko+** | 真实档位 + 占位(L) |
| `/wallet` | 钱包/充值 | `wallet.html` | 需登录 | 侧栏 **Shop** | **两货币**(§0.3) |
| `/rewards` | 签到+新人礼 | `checkin.html` | 需登录 | **从 profile 下拉进**(H) | 奖励发 ⚡/💎 |
| `/profile` | 个人主页 | `profile.html` | 需登录 | 头像 | 下拉入口(H) |
| `/settings` | 设置 | `settings.html` | 需登录 | 头像 / 侧栏底部 | 15 语言(I) |
| `/scenes` | 场景视频流 | `scenes.html` | 可匿名 | Explore 内 | |
| `/login`(弹窗) | 登录/引导 | `onboarding.html` | — | — | **弹窗覆盖 Explore**(G,已落地 §0.3) |
| — | **www 入口示意** | `www-entry.html` | — | — | ✚新增(A) |

- **核心路由叙事(E)**:`explore` 点卡 → **直接进 `/chat`** → chat 顶部点**头像** → `/character`。
- **会话入口(J,v3)**:全局**侧栏 CHATS** 即会话历史,点行直进对应 `/chat/:id`;无历史时默认 **Hakko**。

### 3.5 15 语言本地化(需求 I)

用官网真实 15 语言(`i18n.ts`):`en · ja · 繁中(hant) · es · pt · fr · de · it · ko · ru · id · vi · العربية(ar,RTL) · hi · ไทย(th)`。切换器在 footer + 设置页;策略 `prefix_except_default`(en 无前缀);**ar 走 RTL** 镜像布局。

---

## 4. 用户旅途:弹窗登录 + 无登录浏览 + 扣费门控(需求 G)

| 阶段 | 旅途 | 关键规则 |
|---|---|---|
| ① 进入 | 官网 Companions → `/discover`,**无需登录可浏览** discover / 角色详情 / scenes | 浏览不拦 |
| ② 触发登录 | **任何扣 credit 的行为**(开聊、生成图/视频、送礼、签到领取、收藏…)→ **弹出登录窗** | 不整页跳转 |
| ③ 登录弹窗 | **emochi / PolyBuzz 式弹窗**:Google **one-tap** 自动登录(顶部)+ email-OTP(login_Hakko)+ Apple | 见 §8 P1 |
| ④ 建档 | name / gender / birthday(orb 吉祥物 + 进度条,可 Skip)→ Welcome Gift | 弹窗内多步 |
| ⑤ 核心循环 | discover→chat→(live/通话/创建)→签到/付费 | 同账号同资产跨端 |

> **登录形态从「整页跳 account.hakko.ai」改为「弹窗」**(需求 G + 参考截图的 Google one-tap)。弹窗成功后**就地继续**刚才被拦截的动作,不丢上下文。

## 5. PGC + UGC 体系(混排可筛选)(需求 B / M)

HakkoAI **不只是 PGC**:线上 mindcraft 有大量 **public character / voice / video UGC**。Discover 采用**混排 + 可筛选**(对齐后端 `character_square`):

- **混排**:官方(`source_type=1`)与 UGC(`source_type=2`)同网格混排;UGC 仅 `audit_status=2(通过)` 且 `is_public_by_user` 才公开。
- **筛选 chips(emochi 式,内联到 nav 下方)**:
  - **来源**:All / Official / Community(UGC)
  - **排序**(`order_by`):综合 / 🔥热度 / 🆕最新
  - **题材 / 性格 tag**(`rs_tags`:species / body / design;+ 截图里的 浪漫/戏剧/喜剧/占有欲/忠诚/顽皮/保护…)
  - **NSFW** 开关(`adult_content_switch`,默认开,可关)
- **卡片(需求 M,emochi 化)**:大图主导卡 + **底部渐变** + 左上**计数徽标**(chats,如 1.5M)+ 名 + 一行 intro + **tag 行**;UGC 卡角标 `by @creator` + remix 标。
- **内容类型**:character / **voice**(试听)/ **video**(`UgcFigures.design_video` / scenes 流)混入或分 tab。

## 6. IM 能力对齐(真实 app 能力集)(需求 G)

> v2 **按 renderer 真实能力重做**(不再照搬 Telloria 的 edit/branch):

| 能力 | 真实出处 | web P4 呈现 |
|---|---|---|
| 消息动作 | `MessageActions.vue`:like / dislike / report / share / **pin** / recall / delete | hover 动作条(**不含 edit/regenerate/branch**) |
| 记忆面板 | `memory/MemoryDrawer.vue`:Pinned + Events + 编辑 | 右栏 Memory tab(pinned 配额按档位;events/journal) |
| **图片生成** | `user_media_serv.py` `MEDIA_KEY_IMAGE=0`,Genova/Kling | 输入区 + 结果卡;**金色确认**扣 `⚡/💎` |
| **视频生成** | `user_media_serv.py` `MEDIA_KEY_VIDEO=1` | 同上;**MEDIA_GENERATION_RESULT** 异步结果卡 |
| 语音播放 / TTS | `AudioPlayButton.vue` / `tts/` | 气泡 ▶ + 波形 |
| 语音/视频通话 | `rtc_ctrl.py`(TRTC),分钟计费 `change_rtc_seconds` | 顶条入口 → §8 P6 |
| 礼物 gift | `MessageInput.vue @sendGift` | 礼物面板(💎标价,粉 Send) |
| 换背景 | `MessageInput.vue @changeBackground` | 顶条入口 |
| 模式 | 演绎/对话模式;location advice | chat mode + settings tab |
| 货币事件 | `im_schema.py`:`CHANGE_COINS / CHANGE_DIAMONDS` | 扣费先标价 → 未登录触发弹窗(§4) |

## 7. Live 系统(Companion 改名 + Live2D web)(需求 F)

- **保留,改名 `Companion` → `Live`**(对齐 app 的 live 系统;app 有 `mobile/hakko/lib/pages/live/`)。
- **Live2D web**:renderer 现仅桌面 `@doudou/live2d-desktop-pet`(无 web SDK)。web Live 页**需引入 Web Live2D SDK**(`pixi-live2d-display` / Cubism Web `live2dcubismcore`)——本 mockup 在文档与页面层标注此依赖,实际接入在 design-implement 阶段。
- **has-live2d 门控**:仅 `model_display_type=live2d`(来自 `modelInfo.desktop_l2d_info`)的角色进 Live 大舞台;**无 live2d 的角色**在 Live 页回退为大图立绘 + 提示「该角色暂无 Live2D」,主要互动走 chat。
- 内容:Live2D/立绘大舞台 + 亲密度 intimacy + games + 语音/视频通话入口 + 每日互动。

## 8. 逐页规格(P0–P14,v2 修订)

> 通用:桌面 1440 画布 + 浏览器 chrome(omnibox 显示真实路由)+ **app 式 header(§3.1)** + **统一 footer(§3.2)**;组件来自 `css/app.css`(`.hkw-*`,token 引 `tokens.css`);角色用 `data/characters.js` 真实 14 角色 + CDN 图;英文皮肤,字标 **HakkoAI** 无空格斜体 800。

- **P0 · www 入口示意 `www-entry.html`(✚新增, A/C)**:官网 nav(Home/Use Cases/**Companions**/Resources/Sign In)→ 点 Companions 跳 web-app 示意;首页 companion 模块(加 **Chat 按钮** + **UGC 容纳**);Sign In **弹窗登录** 预览;footer = 统一 footer;并示意 **PC Google 回跳成功页 + TOS/Privacy** 暗色排版。
- **P1 · 弹窗登录 + Onboarding `onboarding.html`(G/M)**:**弹窗**(非整页)——Google **one-tap** 卡(顶,参考截图)+ email-OTP(login_Hakko `#0F161C`/OTP 22/500/粉渐变 CTA)+ Apple;成功后弹窗内多步建档(orb + 进度条)→ Welcome Gift。覆盖在 **Explore** 之上(背景可见,**已落地** §0.3)。
- **P2 ★ Explore `discover.html`(B/M/E,v3 改名 + 无限流)**:v3 chrome(§3.1)+ 置顶筛选条(来源 All/Official/Community ｜ 题材 ｜ 排序 Smart/Trending/Newest)→ **单一无限下拉信息流**(取消分块):emochi 9:16 大图卡 + 💬计数 + UGC/Video/Voice 角标 + 名/两行简介/弱化 tag/@creator;**Google one-tap** 浮层;点卡**直接进 chat**(E);未登录可逛,扣 credit 动作弹登录。响应式 >1240 约 6 列 → 移动 ~3 列,≤980 侧栏变抽屉。
- **P3 ★ Character `character.html`(E)**:**从 chat 头像进**;左 sticky 大 hero,右 名/昵称/作者(+Follow)/tags/greeting/About/**Character|Album** tab/语音试听/Related;sticky CTA:Start Chat(粉)+ Add to Live(outline,仅 live2d 角色)+ 喜欢/分享。
- **P4 ★ Chat `chat.html`(G/J/K,v3)**:**舞台 + 右面板**(会话列表已上移到全局侧栏 CHATS,J)。**左收起钮(舞台左上)= 收起全局侧栏**,右面板收起/展开走同一个 Memory 按钮(K)。中:角色 chatbg + 顶条(头像→进 character / 名 / 亲密度 mini / 语音通话 / 视频 / 礼物 / 生成 / memory)+ 消息流(intro card / AI 气泡 / 紫用户气泡 / **图片生成卡 / 视频生成卡 / 用户上传图** / scene card / 建议回复)+ **真实动作条(like/dislike/pin/share/recall/delete,§6)** + quick prompts。**输入区(v3)**:空输入时主按钮 = **Go on**(直接推进剧情),输入后变发送;**＋号 = 上传图片/进入生成**;**图/视频 Generate 必须先选中 1+ 条消息**(✨选择模式 → 勾选 → 底部浮条 → 金色确认 Image ⚡20 / Video 💎30)。**扣费动作未登录 → 弹窗登录**(G)。
- **P5 · Live `live.html`(F)**:原 companion.html 改名;**Live2D web 舞台**(有 live2d 的角色)/ 立绘回退(无 live2d)+ 亲密度(Hakko Lv.9 / Nika Lv.6)+ games + 通话双钮 + 切换 companion 横条;页内标注 **Web Live2D SDK 依赖**。
- **P6 · Call `call.html`**:全屏 chatbg + 计时 pill + action rail + callbar(挂断红)+ Free 时长提示(Ultra ∞)。
- **P8 · Create `create.html`**:4 步(Profile→Definition→Generate Image→Voice)+ 实时预览;UGC 公开需审核(`audit_status`)标注;**金色 ⚡ 花费确认**。
- **P9 · Membership `membership.html`(L)**:**Pro / Ultra × 月/季/年**(对齐 `PackageLevel/PackageType`);权益行用真实 schema(模型档 / 日补 credits / pinned 配额 / 通话分钟 / 图视频生成额度·优先级 / 自定义语音);**数值占位 + 标注「待接 `vip_repo.get_vip_plan_list`」**;Pro=粉 CTA,Ultra=金 CTA;Stripe / Apple / Google Pay。
- **P10 · Wallet / Shop `wallet.html`(v3 两货币)**:💎Gems + ⚡Credits(日补 + 倒计时,任务/活动奖励并入)**两余额卡**(Coins 取消,§0.3)+ Gems 充值包 6 档(金色购买钮,Stripe)+ Hakko+ 日补 upsell 横幅 + 交易记录(生成/礼物/日补/签到,与各页花费一致)。
- **P11 · Daily Check-in `checkin.html`(H)**:7 天签到 + Welcome Gift 新人任务;**入口从 profile 下拉进**(不在 shop);**奖励以 ⚡/💎 呈现**(v3 两货币;后端 `constant.py` 的 coins 档位 100–700/天在落地时映射)。
- **P12 · Profile `profile.html`(H)**:头卡(头像 + **Pro 徽标在头像右下**)+ stats + 快捷入口 + tab(My Companions / My Creations〔Public/Under Review/Private/Draft〕/ Liked);**header 头像 hover 下拉**承载主入口(§3.3)。
- **P13 · Settings `settings.html`(I)**:左子导航 + 右分组;**15 语言切换器**;Account(关联 Google/Apple、Redeem、套餐、Delete)、General、Chat&Voice、About(Terms/Privacy)。
- **P14 · Scenes `scenes.html`(B)**:9:16 视频发现流(可并入 discover 的 video tab);UGC `design_video` 来源。

## 9. 经济与变现(需求 L — 占位 + 标注待接线上)

- **货币(v3 两货币定稿,用户口径确认)**:💎Gems(`#5AD6FF`,充值硬通货:礼物/视频生成,永不过期)· ⚡Credits(`#7B9CFF`,行动点:图片/场景生成/高级模型,**按档日补 + 倒计时**)。**无第三货币——Coins 取消,签到/任务/活动奖励直接发 ⚡/💎**(对外两币;后端 `im_schema` 的 `CHANGE_DIAMONDS/CHANGE_COINS` 在落地时做映射)。
- **档位(真实结构,数值占位)**:`Free → Pro(粉)→ Ultra(金 #F6B826)`,周期 **月 / 季 / 年**(`PackageType` YEAR/SEASON/MONTH);H+ = 会员体系总称。
- **权益行(真实维度,数值标注「待接线上」)**:模型档(Flash/Plus/Max)· 日补 credits · pinned 配额 · 通话分钟 · 图/视频生成额度 + 队列优先级 · 自定义语音(Ultra)· 徽标。
  > ⚠️ **真实数值与价格只在 DB(`VipPlan.benefit_list*` / `current_price`)**,本 mockup 用占位并在页面角标「TBD · 接 `vip_repo.get_vip_plan_list`」;v1 的 $9.99/$19.99 来自 app 实拍,作占位保留待核。
- **CTA 语义**:粉 = 创建/继续/订阅/正向确认;金 = 花积分确认(图/视频生成)+ Ultra;紫 `#7455D8` 仅用户气泡。**扣费先标价**,未登录触发弹窗(§4)。

## 10. 设计系统(需求 D)

- **字标**:**「HakkoAI」无空格**(v1/现 baseline 是「Hakko AI」带空格,作废),Figtree **800 斜体**;跟随 app 已更新的 logo/字体。真实 app 用图片 logo(`logo-global.webp`),web mockup 用文字字标同形。
- **字体**:Figtree(`Figtree:ital,wght@0,400..800;1,800`)。
- **Token**:全引 [`../app_system/css/tokens.css`](../app_system/css/tokens.css)(暗色 `#0A0A0B` / 粉 `#FF77B7` / 金 `#F6B826` / 紫 `#7455D8` / gem-cyan/credit-blue/coin-gold)。
- **组件移植**:`.hk-*`(移动)→ `.hkw-*`(桌面);web 框架(browser chrome / **app header §3.1** / **统一 footer §3.2** / **弹窗登录 §4**)。
- > **跨端(pc/app/web)整体设计对齐 = 另起一个 session 的任务**(需求 D 注明),本交付仅 web。

## 11. 落地注记(本交付之外,给 design-implement)

| 项 | 注记 |
|---|---|
| 目标仓 | `desktop/doudou-client-main`(`hakko-dev`)web build;路由 `router/hakko.ts` |
| 官网 | `web/official-site`(`dev`,`TARGET=GLOBAL`):nav Companions → 外链 `app.hakko.ai/discover`;footer 抽成共享组件;Privacy/Terms 页 i18n + 暗色排版;弹窗登录替换整页 OAuth |
| **L 真实数值** | 接线上:`vip_repo.get_vip_plan_list()`(DB)/ hakko 后端 `/api/vip` → 填 membership 真值 |
| **F web Live2D** | 引 `pixi-live2d-display` / Cubism Web;`model_display_type` 门控 |
| **G 图视频生成** | 接 `user_media`(Genova/Kling);`MEDIA_GENERATION_RESULT` 异步回卡 |
| 后端 | mindcraft(`NACOS_GROUP=hakko`)已有 App 同款接口(角色/会话/资产/签到/UGC/RTC/media);web 主要是前端表面 |

## 12. 交付物清单

```
design/web-roleplay/
├── PRODUCT_DESIGN.md      ← 本文档(v2)
├── index.html             ← 画廊(更新:新页/ Live / 去 P7)
├── css/app.css            ← web 组件库(+ 统一 footer / 弹窗登录 / 新字标 / app header)
├── data/characters.js     ← 14 真实角色(CDN 图)
└── pages/
    www-entry · onboarding(弹窗) · discover★ · character★ · chat★ · live · call ·
    create · membership · wallet · checkin · profile · settings · scenes  .html
```

**查看**:浏览器开 `index.html`(或单页);联网加载 CDN 角色图与 Figtree,离线回退渐变 + 系统字体。