# 芝姐的小屋 - 原型展示

## 📱 原型文件列表

本次交付包含 4 个完整的可交互原型页面：

1. **zijie-home.html** - 首页（2.5D 温馨小屋）
2. **timeline.html** - 时光长廊（作品展示）
3. **message-wall.html** - 粉丝留言墙（瀑布流布局）
4. **ai-chat.html** - AI 芝姐对话（聊天界面）

## 🎨 设计特色

### 视觉风格
- **主题色**: 紫色系（芝姐应援色）
- **氛围**: 温暖、优雅、怀旧
- **布局**: 2.5D 小屋概念
- **动画**: 轻盈飘逸，飘落花瓣

### 核心亮点
✨ 飘落的紫色花瓣背景动画
💜 鼠标跟随的 3D 倾斜效果  
🎭 优雅的卡片悬停动画
📱 完全响应式设计
⚡ 流畅的页面过渡

## 🖥️ 如何查看原型

### 方法 1: 直接打开（推荐）
1. 下载所有 HTML 文件
2. 双击 `zijie-home.html` 在浏览器中打开
3. 从首页导航到其他页面

### 方法 2: 本地服务器
```bash
# 使用 Python
python -m http.server 8000

# 或使用 Node.js
npx http-server -p 8000

# 然后在浏览器访问
http://localhost:8000/zijie-home.html
```

## 🎯 功能说明

### 首页（zijie-home.html）
- **左侧**: 时光相册（4 个年代卡片）
- **中间**: AI 芝姐对话入口（可点击大头像）
- **右侧**: 展示柜（荣誉、角色、公益）
- **底部**: 进入时光长廊和留言墙的按钮

**交互体验**:
- 鼠标移动时，整个房间会有轻微的 3D 倾斜
- 照片卡片悬停时上浮
- AI 头像有旋转光晕效果

### 时光长廊（timeline.html）
- **顶部导航**: 返回、标题、搜索框
- **时间轴**: 快速跳转到不同年代
- **筛选器**: 按作品类型筛选
- **作品卡片**: 展示详情、收藏功能
- **滚动进度条**: 顶部显示浏览进度

**数据展示**:
- 70-80年代：初入银屏
- 90年代：巅峰时刻（新白娘子传奇）
- 2000年代：优雅转身
- 2010年代：不老女神
- 2020至今：继续前行

### 粉丝留言墙（message-wall.html）
- **瀑布流布局**: 自动适应不同高度的便签
- **5 种便签颜色**: 紫、薰衣草、粉、奶白、金
- **写留言功能**: 点击右上角按钮
- **点赞系统**: 可以给留言点赞
- **分类筛选**: 生日祝福、作品感想等

**交互细节**:
- 便签悬停时翘起
- 点赞后数字变化
- 热门留言有金色边框和 ✨ 标记

### AI 芝姐对话（ai-chat.html）
- **左侧边栏**: 快捷话题（4 个分类）
  - 🎭 聊聊经典角色
  - ✨ 保养与生活
  - 💝 人生感悟
  - 📚 兴趣爱好
- **聊天区**: 对话气泡（AI 和用户不同样式）
- **输入区**: 快捷建议 + 输入框
- **打字动画**: AI 回复前显示"正在输入"

**AI 回复预设**:
- 基于关键词匹配（实际开发中会接入 Claude API）
- 温柔亲切的语气
- 会使用"亲爱的"等称呼
- 带有 💜 等表情符号

## 🔄 页面导航流程

```
首页（zijie-home.html）
  ↓
├─→ 时光长廊（timeline.html）
│     - 查看作品详情
│     - 筛选和搜索
│     - 返回首页
│
├─→ 留言墙（message-wall.html）
│     - 浏览留言
│     - 写新留言
│     - 点赞和回复
│     - 返回首页
│
└─→ AI 对话（ai-chat.html）
      - 选择话题
      - 聊天互动
      - 返回首页
```

## 📋 原型的局限性

这些是**静态原型**，用于展示视觉风格和交互设计。部分功能是**模拟**的：

⚠️ **模拟功能**（点击会弹出提示）:
- 作品详情页
- 留言提交（需要后端）
- AI 对话（使用预设回复，非真实 AI）
- 搜索功能（仅 UI）
- 用户收藏（无数据持久化）

✅ **真实功能**:
- 所有动画和过渡效果
- 响应式布局
- 页面导航
- 交互反馈（悬停、点击等）

## 🎨 自定义建议

如果你想调整某些设计元素：

### 修改主色调
在 `<style>` 标签中找到 `:root` 部分：
```css
:root {
  --purple-deep: #6B4C9A;  /* 改成你喜欢的深紫色 */
  --purple-main: #9B7EBD;  /* 改成你喜欢的主紫色 */
  /* ... */
}
```

### 调整字体
```css
body {
  font-family: 'Noto Serif SC', serif; /* 改成其他字体 */
}
```

### 关闭飘落花瓣
注释掉首页中的 `.floating-petals` 相关代码

## 📚 技术细节

### 使用的技术
- **纯 HTML + CSS + JavaScript**（无框架，便于理解）
- **Google Fonts**（中文字体）
- **CSS 3D Transforms**（立体效果）
- **CSS Grid & Flexbox**（布局）
- **CSS Animations**（动画）

### 浏览器兼容性
✅ Chrome 90+  
✅ Firefox 88+  
✅ Safari 14+  
✅ Edge 90+  

⚠️ 不支持 IE（已停止支持）

### 性能优化
- 使用 CSS 动画（GPU 加速）
- 避免 JS 重绘
- 懒加载（概念，实际图片需配置）

## 🚀 下一步计划

### 开发阶段
1. ✅ **原型设计**（已完成）
2. ⏳ **前端开发**（Next.js + Tailwind）
3. ⏳ **后端开发**（API + 数据库）
4. ⏳ **AI 集成**（Claude API）
5. ⏳ **测试优化**
6. ⏳ **部署上线**

详细的开发计划见 `DESIGN_DOC.md`

## 💬 反馈与建议

如果你有任何想法或建议：
- 想调整某个颜色？
- 觉得某个动画太快/太慢？
- 想增加/删除某个功能？
- 对布局有新想法？

随时告诉我，我们可以一起迭代优化！

---

## 📄 文档列表

- `DESIGN_DOC.md` - 完整的设计文档
  - 视觉风格定义
  - 技术栈选择
  - 数据库设计
  - AI Prompt 设计
  - 开发计划
  - 功能建议

- `zijie-home.html` - 首页原型
- `timeline.html` - 时光长廊原型
- `message-wall.html` - 留言墙原型  
- `ai-chat.html` - AI 对话原型

---

## 🎉 享受浏览！

这个项目倾注了对芝姐的敬意和对设计的热爱。

希望你喜欢这些原型！💜

**用爱和温暖致敬芝姐五十年光影岁月。**