# 《岁月时书》MVP（PRD 2.0）

一定要使用 docs/color.png 的配色（不使用渐变），界面简洁，交互优雅

## 0. 设计原则

* **微信式聊天体验**：熟悉的交互，降低学习成本
* **多模态输入**：文字、语音、图片、表情
* **AI 引导对话**：提问、陪伴、引导，最终目的是完成回忆录
* **结果导向**：用户随时能看到"书在变厚"

---

## 1. 配色方案（docs/color.png）

```
#200028 - 深紫色（文字主色）
#8C8EA3 - 石板紫（次要文字、占位符）
#A177A6 - 中紫色（主题色、按钮、头部背景）
#CEB0DA - 薰衣草色（头像背景、高亮）
#DBBABA - 腮红色（用户头像）
#FAF7F8 - 奶油色（页面背景）
#FFFFFF - 白色（卡片、气泡）
```

**注意：不使用渐变色，使用纯色**

---

## 2. 信息架构

```text
[对话列表] chat-list.html <——主入口（默认首页）
   ├─ 对话列表（联系人）
   ├─ 底部导航栏
   └─ 点击进入聊天详情

[聊天详情] chat.html <——全屏聊天（微信风格）
   ├─ 顶部：返回按钮 + 联系人名称
   ├─ 消息区域（AI白色气泡/用户紫色气泡）
   ├─ 输入区域（文字/语音/表情/图片）
   └─ 无底部导航（全屏沉浸）

[我的回忆录] demo.html > 回忆录tab <——阅读页（电子书体验）
   ├─ 目录（章节）
   ├─ 章节正文（排版优雅+插图）
   └─ 导出 PDF / 分享链接（付费口）

[我的] demo.html > 我的tab <——个人主页
   ├─ 套餐与付费
   ├─ 数据与隐私
   ├─ 设置
   └─ 帮助
```

---

## 3. 页面 1：对话列表（chat-list.html）

### 3.1 页面目标

* 让用户 **一眼看到对话入口**
* 微信式联系人列表体验
* 显示最近消息预览

### 3.2 核心组件（从上到下）

**A. 顶部头部**

* 应用标题：`岁月时书`
* 副标题：`用对话，留住珍贵的记忆`
* 背景色：中紫色 `#A177A6`

**B. 对话列表**

* 联系人头像（圆角方形，薰衣草色背景）
* 联系人名称：`回忆录助手`
* 最新消息预览（单行省略）
* 时间戳

**C. 小贴士卡片**

* 引导用户了解产品用途

**D. 底部导航栏**

* 对话（当前）
* 回忆录
* 我的

### 3.3 功能清单

* [x] 显示对话列表
* [x] 点击进入聊天详情
* [x] 底部导航切换页面

---

## 4. 页面 2：聊天详情（chat.html）

### 4.1 页面目标

* **全屏沉浸式聊天**，无底部导航干扰
* **微信式交互**：熟悉的聊天体验
* **AI 主动引导**：提问、追问、陪伴

### 4.2 核心组件（从上到下）

**A. 顶部导航栏**

* 返回按钮（返回对话列表）
* 联系人名称：`回忆录助手`
* 在线状态
* 背景色：中紫色 `#A177A6`

**B. 消息区域**

* AI 消息：白色气泡，左侧显示，薰衣草色头像 `#CEB0DA`
* 用户消息：紫色气泡 `#A177A6`，右侧显示，腮红色头像 `#DBBABA`
* 时间戳（居中显示）
* 支持：文字、图片、语音消息

**C. 输入区域**

* 语音/键盘切换按钮
* 文字输入框 / 按住说话按钮
* 表情选择器
* 更多选项（照片、拍摄）
* 发送按钮（有文字时显示，中紫色背景）

**D. 扩展面板**

* 表情选择器：常用表情 32 个
* 更多选项：照片、拍摄

### 4.3 AI 对话逻辑

* 用户发送消息后，AI 显示"正在输入..."
* AI 回复引导性问题，帮助用户回忆
* 示例回复：
  - "这个故事真让人感动！能再详细说说当时的场景吗？"
  - "那个时候您多大年纪？身边有哪些人陪着您？"
  - "您有没有保留那个时候的照片或者物件？"
  - "这段记忆很宝贵呢。后来这件事有什么后续吗？"

### 4.4 功能清单

* [x] 文字消息发送/接收
* [x] 语音消息（按住说话，上滑取消）
* [x] 图片消息
* [x] 表情输入
* [x] AI 自动回复（引导式提问）
* [x] 返回对话列表

---

## 5. 页面 3：我的回忆录（阅读电子书体验）

### 5.1 页面目标

* 打开就是"书"的感觉：**优雅排版 + 章节清晰 + 可插图**
* 能让用户产生：**"真的成书了"** 的成就感
* 付费/导出在这里完成（不打扰阅读）

### 5.2 阅读体验

**A. 目录页（默认进入）**

* 书名 + 副标题
* 章节列表（带进度）
* "最近更新"提示

**B. 章节阅读页**

* 章节标题（大号）
* 段落排版：行距舒适、首行缩进
* 引用块：把金句提出来
* 插图展示

**C. 书内工具条**

* 目录
* 导出 PDF（付费点）
* 分享链接（付费点）

### 5.3 功能清单

* [x] 目录 + 章节阅读
* [x] 章节内容展示
* [x] 显示插图
* [x] 导出 PDF 入口
* [x] 生成分享链接入口

---

## 6. 页面 4：我的（个人主页）

### 6.1 页面目标

* 放所有"非核心"功能：设置、付费、客服、隐私
* 不打扰聊天主路径

### 6.2 模块结构

**A. 账户卡片**

* 头像/昵称
* 当前套餐状态

**B. 套餐与付费**

* 升级套餐
* 我的订单

**C. 数据与隐私**

* 导出所有数据

**D. 设置**

* 语速
* 大字模式
* 夜间模式
* 每日提醒

**E. 帮助**

* 常见问题
* 反馈与客服
* 关于我们

---

## 7. MVP 版本范围

### 必做

* [] 对话列表页面
* [] 全屏聊天页面
* [] 文字/语音/图片/表情输入
* [] AI 自动回复
* [] 微信风格界面
* [ ] 真实 AI 对接
* [ ] 语音识别
* [ ] 图片上传到服务器
* [ ] 聊天记录持久化
* [ ] 回忆录自动生成，在线阅读
* [ ] 用户登录/注册
* [ ] 套餐购买