# 设计进度摘要

> 项目：良人伊欣博客重设计（lryx-blog）  
> 更新日期：2026-06-19  
> 当前阶段：线框图设计（ui-wireframe）进行中

---

## 一、项目背景

**项目名**：lryx-blog  
**平台**：网页（PC + 移动响应式）+ 微信小程序  
**定位**：「良人伊欣」— 宁白久 & 刘小Q 的双人博客，以全栈技术 + 科技前沿内容为主、生活随笔为辅

**核心特点**：
- 双作者系统（宁白久-技术/蓝色，刘小Q-生活/粉色）
- 配色按内容类型区分（技术文章蓝色调，生活文章粉色调）+ 作者署名
- 电子宠物功能（阿喵和阿汪，养成系统 + AI Agent）

---

## 二、已完成的工作

### 2.1 需求分析（ui-brief）✅

**文件位置**：`projects/lryx-blog/brief.md`

**已完成的内容**：
- 产品定位、目标用户画像、核心任务流
- 页面清单（14 个页面，P0-P3 分级）
- 视觉风格方向（活泼亲和，双色系统）
- 约束与规范、参考资料

**关键决策**：
1. 首页排版：混合时间线列表（技术+生活混排），非双板块并列
2. 配色方案：按内容类型区分（蓝=技术，粉=生活）+ 作者署名
3. 作者独立页：个人介绍 + 社交链接（可自定义渠道）+ 文章列表（最新+精选混排）+ 数据统计
4. 社交链接交互：微信/抖音扫码、邮箱显示地址、QQ 显示号码、其他直接跳转

**页面清单**：

| 优先级 | 页面 |
|--------|------|
| P0 | 首页、技术博客列表页、生活随想列表页、文章详情页、留言板 |
| P1 | 关于页、作者独立页、搜索/标签页、日记（说说）、相册、计划进度页、**宠物专属页** |
| P2 | 归档页、链接收藏页 |
| P3 | 项目展示页 |

### 2.2 首页线框图（ui-wireframe）✅ v5

**文件位置**：`output/lryx-blog/home-wireframe.html`

**首页布局**（从上到下）：
1. **顶部导航**：文字 Logo + 主导航（主页/技术博文/生活随想/链接收藏/留言本/我们）+ 通知公告📢 + 搜索🔍 + 暗色模式🌙
2. **网站介绍区**：英文 slogan "Record Life and Remember Love" + LOGO 占位 + 欢迎语
3. **双作者形象区**：两位作者头像+名字+简介，中间用爱心分割，显示"相识 3897 天"
4. **最新动态区块**：整体命名"最新动态"
   - 最新公告：醒目左边框样式 + "📢 公告"标签 + 只展示最新 1 条 + 右侧"💬 反馈 (N)"按钮
   - 最新说说：右上角"查看全部说说 →"链接，每条说说有"💬 评论"和"👍 点赞"按钮
5. **宠物窝卡片**：阿喵和阿汪的小窝
   - 左右两栏展示两只宠物
   - 每只宠物：头像 + 当前动作 + 状态条（心情/饱腹度/等级）+ 互动按钮（🍖喂食/🤚抚摸/💬对话/📊成长记录）
6. **混合时间线列表**：技术+生活文章按时间倒序混排
   - 每篇卡片：封面图 + 类型标签 + 原创/转载标签 + 置顶标签 + 标题 + 摘要 + 作者 + 标签 + 评论数
7. **底部区域**：
   - 两个计时器（在一起时间 + 小宝贝时间）
   - 友情链接列表 + "更多"入口
   - 备案号 + 版权信息
8. **右下角悬浮工具栏**（所有页面通用）：
   - ↑ 回到顶部
   - 💬 留言板
   - 🏠 宠物窝跳转

**智能悬浮交互**（已设计，待实现）：
- 滚动离开宠物窝区块 → 右下角出现悬浮按钮
- Hover 展开迷你预览卡片
- 点击回到宠物窝区块

### 2.3 电子宠物功能设计 ✅

**文件位置**：`projects/lryx-blog/pet-design.md`

**核心概念**：
- 两只宠物：阿喵（猫，代表宁白久）和阿汪（狗，代表刘小Q）
- 状态系统：心情、饱腹度、等级等数值驱动
- 成长机制：博客活动影响宠物成长
- AI Agent：后期接入 LLM，宠物可以对话

**页面展示方案**：
1. **首页宠物窝卡片**：快速查看状态 + 简单互动
2. **其他页面浮动宠物**：右下角悬浮，随机动作，点击对话
3. **宠物专属页**（P1）：深度互动 + 详细信息 + 游戏化元素

**数据模型**（TypeScript 接口）：
- Pet：基础信息（id、name、type、owner、level、exp）
- PetState：状态（mood、hunger、energy、health、currentAction）
- GrowthLog：成长记录
- VisitorInteraction：访客互动记录

**交互设计**：
- 喂食：饱腹度+20，心情+5，冷却 6 小时
- 抚摸：心情+10，冷却 1 小时
- 对话：AI Agent 回复，每天 10 次限制
- 博客联动：作者发文 → 宠物获得经验值；访客阅读 → 宠物心情提升

**实现阶段**：
- Phase 1（MVP，2-3 天）：静态展示 + 简单互动
- Phase 2（3-5 天）：Lottie 动画 + 浮动宠物
- Phase 3（5-7 天）：AI Agent 对话
- Phase 4（7-10 天）：完整养成系统

---

## 三、待完成的工作

### 3.1 其他页面的线框图（ui-wireframe）

按优先级排序：

**P0 页面**（MVP 核心）：
- [ ] 文章详情页（通用模板，技术/生活共用）
- [ ] 技术博客列表页
- [ ] 生活随想列表页
- [ ] 留言板

**P1 页面**（体验完整）：
- [ ] 作者独立页（/author/jelon、/author/joanna）
- [ ] 关于页
- [ ] 搜索/标签页
- [ ] 日记（说说）页
- [ ] 相册页
- [ ] 计划进度页
- [ ] **宠物专属页**（/pets，比首页小窝更丰富的交互）

**P2 页面**（锦上添花）：
- [ ] 归档页
- [ ] 链接收藏页

### 3.2 高保真设计（ui-design）

线框图确认后，用 `/ui-design` 生成高保真 HTML：
- 应用真实配色（蓝色 #3B82F6 / 粉色 #EC4899）
- 真实图片和图标
- 完整的视觉细节

### 3.3 设计规范（ui-spec）

生成设计规范文档：
- 色彩系统
- 字体规范
- 间距系统
- 组件库（按钮、卡片、表单等）
- 交互动效规范

---

## 四、关键文件位置

```
aidesign/
├── projects/lryx-blog/
│   ├── brief.md              # 需求文档（v3，已确认）
│   └── pet-design.md         # 电子宠物设计方案（v1）
├── output/lryx-blog/
│   └── home-wireframe.html   # 首页线框图（v5）
├── design-systems/           # 设计系统（tokens、icons、palettes）
└── PROGRESS.md               # 本文件（进度摘要）
```

---

## 五、新会话启动指南

### 5.1 恢复上下文

新会话开头说：

```
先读 aidesign/PROGRESS.md 恢复进度，然后继续画线框图。
```

或更详细：

```
先读 aidesign/PROGRESS.md 和 aidesign/projects/lryx-blog/brief.md 恢复上下文，
然后画文章详情页的线框图。
```

### 5.2 工作流

```
/ui-brief → /ui-wireframe → /ui-design → /ui-variants → /ui-spec → /ui-handoff
```

当前进度：
- ✅ /ui-brief（已完成）
- 🔄 /ui-wireframe（进行中，首页完成，其他页面待画）
- ⏳ /ui-design（待开始）

### 5.3 下一步行动

1. 画文章详情页线框图（P0，最关键的阅读体验）
2. 画技术博客列表页线框图（P0）
3. 画生活随想列表页线框图（P0）
4. 画留言板线框图（P0）
5. 首页线框图确认后，用 /ui-design 生成高保真

---

## 六、Git 仓库

**远程地址**：http://git.liangrenyixin.cn/lryx/nest-design.git  
**分支**：main  
**最新提交**：`9219734` - Add pet feature: wireframe card, design spec, and floating toolbar

**提交历史**：
- `9219734` - 添加电子宠物功能（宠物窝卡片、设计方案、悬浮工具栏）
- `89b9e76` - 初始提交（UI 设计工作台基础结构）

---

## 七、设计决策记录

### 7.1 首页排版

**决策**：混合时间线列表（技术+生活混排）  
**理由**：
- 个人博客更新频率不高，双板块容易「一边空一边满」
- 混合列表更适合移动端，设计工作量减半
- 读者习惯时间线浏览

### 7.2 配色方案

**决策**：按内容类型区分（蓝=技术，粉=生活）+ 作者署名  
**理由**：
- 按人区分的前提是「两人内容严格分工」，但实际可能都会写技术和生活
- 按内容区分更符合读者心智：蓝色 = 技术干货，粉色 = 生活温馨
- 作者身份通过署名 + 头像体现，不需要靠颜色强化

### 7.3 公告按钮文字

**决策**：用"反馈"而非"评论"  
**理由**：
- 公告场景下，读者的互动更多是"回应公告内容"（提问/建议/报告问题）
- "反馈"更贴合公告的官方属性

### 7.4 说说区块"全部说说"按钮

**决策**：不加按钮，用作者头像跳转作者页  
**理由**：
- 首页核心是文章列表，说说是辅助内容，权重不高
- 点击作者头像 → 跳转到作者独立页 → 那里已经有该作者的所有内容

---

**最后更新**：2026-06-19  
**更新人**：Claude（AI 助手）