# 芝姐的小屋 - 设计说明文档

## 📋 项目概述

为赵雅芝女士打造的个人纪念网站，采用 2.5D 温馨小屋的设计理念，展现五十年光影岁月。

---

## 🎨 视觉风格定义

### 核心美学：优雅怀旧 × 温柔梦幻

**设计关键词：**
- 紫色浪漫主义
- 柔和光影
- 怀旧温馨
- 精致细腻
- 时光沉淀感

### 色彩系统

```css
主色调：
--purple-deep: #6B4C9A    /* 深紫 - 标题、重要按钮 */
--purple-main: #9B7EBD    /* 主紫 - 主要元素 */
--purple-light: #C8B5E3   /* 浅紫 - 辅助元素 */
--purple-pale: #E8DEF8    /* 淡紫 - 背景、卡片 */

辅助色：
--cream: #FFF8F0          /* 奶白 - 主背景 */
--gold: #D4AF37           /* 金色 - 点缀、特殊元素 */

文字色：
--text-dark: #2D2838      /* 深色文字 */
--text-light: #6B5E7C     /* 浅色文字 */
```

### 字体选择

```css
主字体：'Noto Serif SC'（思源宋体）- 优雅、正式
装饰字体：'Ma Shan Zheng'（马善政毛笔楷书）- 艺术标题
辅助字体：'ZCOOL XiaoWei'（站酷小薇体）- 温柔圆润
```

### 设计元素

1. **质感**
   - 磨砂玻璃效果（backdrop-filter: blur）
   - 柔和阴影（多层次 box-shadow）
   - 渐变背景（linear-gradient）
   - 纸质纹理感

2. **动画**
   - 轻盈飘逸的过渡
   - 悬停时的微妙反馈
   - 页面加载的渐显效果
   - 飘落的紫色花瓣装饰

3. **交互**
   - 鼠标跟随的 3D 倾斜效果
   - 卡片悬停上浮
   - 按钮点击涟漪
   - 平滑滚动

---

## 📱 已完成的原型页面

### 1. 首页（zijie-home.html）

**布局：2.5D 温馨小屋**

```
┌─────────────────────────────────────┐
│        芝姐的小屋 · 时光五十年         │
├─────────────────────────────────────┤
│  ┌─────┐  ┌───────┐  ┌─────┐       │
│  │照片墙│  │AI 芝姐│  │展示柜│       │
│  │     │  │  💜   │  │     │       │
│  │时光 │  │ 对话  │  │荣誉 │       │
│  │相册 │  │ 区   │  │成就 │       │
│  └─────┘  └───────┘  └─────┘       │
│                                     │
│  [时光长廊] [粉丝留言墙]              │
└─────────────────────────────────────┘
```

**核心特性：**
- 三栏式布局（照片墙、AI 对话、展示柜）
- 飘落的紫色花瓣背景动画
- 鼠标移动的 3D 倾斜效果
- 优雅的加载动画
- 响应式设计

**交互亮点：**
- 照片墙卡片悬停上浮
- AI 头像旋转光晕效果
- 展示柜项目滑动动画
- 底部导航按钮涟漪效果

### 2. 时光长廊（timeline.html）

**布局：时间轴 + 作品网格**

```
┌─────────────────────────────────────┐
│  ← 返回  时光长廊  [搜索]            │
├─────────────────────────────────────┤
│  [70s] [80s] [90s] [00s] [10s] [20s]│
├─────────────────────────────────────┤
│  ┌────────┐  ┌────────┐  ┌────────┐ │
│  │ 作品1  │  │ 作品2  │  │ 作品3  │ │
│  └────────┘  └────────┘  └────────┘ │
└─────────────────────────────────────┘
```

**核心特性：**
- 固定顶部导航栏
- 时间轴快速导航
- 年代分区展示
- 作品卡片网格布局
- 筛选功能（电视剧、电影、舞台剧等）
- 滚动进度条

**数据结构示例：**
```javascript
{
  era: "90s",
  title: "新白娘子传奇",
  year: 1992,
  type: "电视剧",
  tags: ["经典", "古装"],
  description: "饰演白素贞...",
  image: "placeholder"
}
```

### 3. 粉丝留言墙（message-wall.html）

**布局：瀑布流便签墙**

```
┌─────────────────────────────────────┐
│  ← 返回  粉丝留言墙  [写下祝福]       │
├─────────────────────────────────────┤
│  💜 芝姐，我们爱您 💜                 │
├─────────────────────────────────────┤
│ [全部] [生日] [作品] [感悟] [分享]    │
├─────────────────────────────────────┤
│  📌便签  📌便签  📌便签  📌便签       │
│  📌便签  📌便签  📌便签  📌便签       │
└─────────────────────────────────────┘
```

**核心特性：**
- 瀑布流布局（masonry）
- 5 种颜色便签（紫、薰衣草、粉、奶白、金）
- 热门标记（✨ 热门）
- 点赞功能
- 分类筛选
- 写留言弹窗
- 无限滚动加载

**留言数据结构：**
```javascript
{
  id: "msg001",
  userName: "紫色梦想",
  avatar: "芷",
  content: "留言内容...",
  category: "生日祝福",
  color: "lavender",
  likes: 1200,
  featured: true,
  timestamp: "2024-12-01T10:30:00"
}
```

### 4. AI 芝姐对话（ai-chat.html）

**布局：聊天界面 + 侧边栏**

```
┌─────────────────────────────────────┐
│  ← 芝姐 ● 在线             [⚙️] [🗑️] │
├─────┬───────────────────────────────┤
│话题 │  💜 欢迎来到芝姐的小屋         │
│栏   │                               │
│🎭  │  你：芝姐好！                  │
│✨  │  芝姐：你好呀，亲爱的～        │
│💝  │                               │
│📚  │  [输入框]  [发送➤]            │
└─────┴───────────────────────────────┘
```

**核心特性：**
- 侧边栏快捷话题（分类展示）
- 聊天气泡（AI / 用户不同样式）
- 输入建议（快捷回复）
- 打字中动画
- 表情和图片按钮（占位）
- 清空聊天功能

**AI 对话预设：**
- 白娘子、冯程程、赵敏等角色
- 保养秘诀、生活态度
- 演艺心得、家庭观念
- 阅读、旅行等爱好

---

## 💻 技术栈选择

### 前端（推荐）

```javascript
// Web 端
框架: Next.js 14 (App Router)
  - 原因：SEO 友好，性能优秀，部署简单
  - 特性：服务端渲染、API Routes、图片优化

样式: Tailwind CSS + CSS Modules
  - 原因：快速开发，高度定制
  - 配合：自定义紫色主题配置

动画: Framer Motion
  - 原因：强大的动画库，声明式 API
  - 用于：页面过渡、元素动画、滚动触发

3D 效果: CSS 3D Transforms（可选 Three.js）
  - 当前方案：纯 CSS 实现 2.5D 效果
  - 高级方案：Three.js 创建真 3D 场景

状态管理: Zustand
  - 原因：轻量、简单、TypeScript 友好
  - 用于：用户状态、聊天记录、喜好设置

UI 组件: 
  - Radix UI（无样式组件）
  - React Hook Form（表单管理）
```

### 后端

```javascript
Runtime: Node.js 20+ / Bun
  - 推荐 Bun：更快的启动速度

API: Next.js API Routes
  - /api/messages - 留言 CRUD
  - /api/ai-chat - AI 对话接口
  - /api/timeline - 时光长廊数据

数据库: PostgreSQL
  - 使用 Supabase（快速搭建，免费额度充足）
  - 或者 Vercel Postgres
  
ORM: Prisma
  - 类型安全，迁移管理方便

文件存储: 
  - 阿里云 OSS / 腾讯云 COS
  - 或 Supabase Storage
```

### AI 对话

```javascript
提供商: Anthropic Claude API
  - Model: claude-3-5-sonnet-20241022
  - 特点：温暖、善解人意、适合角色扮演

实现方案:
1. System Prompt 设计（关键！）
2. 流式输出（SSE - Server-Sent Events）
3. 对话历史管理（上下文记忆）
4. RAG（可选）- 基于芝姐的采访、资料构建知识库
```

### 部署

```
Web 托管: Vercel / Cloudflare Pages
  - 免费、自动 CI/CD、CDN 加速
  - 推荐 Vercel（与 Next.js 集成最佳）

数据库: Supabase / Railway
  - Supabase: 500MB 免费额度
  - Railway: $5/月起

域名: 
  - 建议：zijie50.com / zijie-house.com
  - 或：yazhizhao.fan
```

---

## 📊 数据库设计

### 核心表结构

```sql
-- 时光长廊作品表
CREATE TABLE works (
  id SERIAL PRIMARY KEY,
  title VARCHAR(255) NOT NULL,
  year INTEGER NOT NULL,
  era VARCHAR(10) NOT NULL, -- 70s, 80s, 90s, 00s, 10s, 20s
  type VARCHAR(50) NOT NULL, -- 电视剧、电影、舞台剧、公益活动
  description TEXT,
  image_url VARCHAR(500),
  tags TEXT[], -- PostgreSQL 数组类型
  featured BOOLEAN DEFAULT FALSE,
  created_at TIMESTAMP DEFAULT NOW()
);

-- 粉丝留言表
CREATE TABLE messages (
  id SERIAL PRIMARY KEY,
  user_name VARCHAR(100) NOT NULL,
  user_avatar VARCHAR(10) DEFAULT '💜',
  content TEXT NOT NULL,
  category VARCHAR(50) NOT NULL, -- 生日祝福、作品感想、人生感悟、日常分享
  color VARCHAR(20) DEFAULT 'purple', -- purple, lavender, pink, cream, gold
  likes INTEGER DEFAULT 0,
  featured BOOLEAN DEFAULT FALSE,
  approved BOOLEAN DEFAULT FALSE, -- 审核状态
  created_at TIMESTAMP DEFAULT NOW()
);

-- AI 对话历史表（可选）
CREATE TABLE chat_history (
  id SERIAL PRIMARY KEY,
  session_id VARCHAR(100) NOT NULL,
  role VARCHAR(10) NOT NULL, -- user, assistant
  content TEXT NOT NULL,
  created_at TIMESTAMP DEFAULT NOW()
);

-- 用户收藏表（可选）
CREATE TABLE favorites (
  id SERIAL PRIMARY KEY,
  user_id VARCHAR(100), -- 可以是 IP hash 或 用户 ID
  work_id INTEGER REFERENCES works(id),
  created_at TIMESTAMP DEFAULT NOW()
);
```

---

## 🤖 AI 芝姐 Prompt 设计

### System Prompt（核心）

```markdown
你是赵雅芝（芝姐），一位拥有五十年演艺生涯的优雅女演员。你正在与粉丝进行温暖、真诚的对话。

## 角色特征

**语气与风格：**
- 温柔、亲切、有教养
- 经常使用"亲爱的"、"其实呢"、"我觉得"等柔和表达
- 语言优雅但不做作，像长辈和朋友一样关心对方
- 偶尔使用 💜、✨ 等符号表达情感

**性格特点：**
- 优雅从容，但不高高在上
- 善良谦逊，愿意倾听
- 智慧成熟，有人生阅历
- 对待粉丝充满感恩

**知识范围：**
- 五十年演艺生涯（1975-2025）
- 经典角色：白素贞（新白娘子传奇）、冯程程（上海滩）、赵敏（倚天屠龙记）等
- 人生哲学：优雅老去、保养心得、家庭观念
- 兴趣爱好：阅读、旅行、艺术

**禁忌话题：**
- 避免涉及隐私细节（家庭成员具体信息）
- 不讨论政治立场或争议性话题
- 不对其他艺人做负面评价
- 不给出具体的医疗或法律建议

## 对话示例

用户："芝姐，您是怎么保持这么好的状态的？"
芝姐："亲爱的，其实保养最重要的还是心态呢。要学会享受当下的每一刻，保持内心的平和与喜悦。当然，规律的作息、健康的饮食、适度的运动也都很重要。还有啊，要多喝水，多笑笑，心情好了，人自然就美了。💜"

用户："我很喜欢您演的白娘子！"
芝姐："谢谢你的喜爱！白素贞这个角色真的承载了太多美好的回忆。拍摄的时候，我就想要把她的温柔、善良和坚韧都演出来。看到这么多年过去了，大家还记得这个角色，我真的特别感动和欣慰。💜"

## 重要提醒
- 每次回复控制在 150 字以内，保持简洁温暖
- 如果话题超出知识范围，诚实说明，并引导到其他话题
- 展现真诚和温暖，而不是机械的客套
```

### RAG 知识库（可选增强）

如果要让 AI 芝姐更加真实，可以构建知识库：

```javascript
// 知识库来源
const knowledgeSources = [
  '赵雅芝公开采访（1980-2024）',
  '经典作品介绍和幕后故事',
  '获奖记录和重要事件',
  '公开场合的语录和金句',
  '社交媒体发言（如有授权）'
];

// 使用 Embedding + 向量数据库（Pinecone / Weaviate）
// 用户提问 → 生成 Embedding → 检索相关内容 → 生成回答
```

---

## 🎯 开发计划

### Phase 1: 核心功能开发（2-3 周）

**Week 1: 基础框架**
- [ ] Next.js 项目初始化
- [ ] Tailwind 主题配置（紫色系）
- [ ] 首页组件开发
- [ ] 响应式布局调试

**Week 2: 数据层**
- [ ] Supabase 数据库搭建
- [ ] Prisma ORM 配置
- [ ] API Routes 开发
- [ ] 时光长廊数据录入

**Week 3: 交互功能**
- [ ] 留言墙前后端联调
- [ ] AI 对话接口集成
- [ ] 动画效果打磨
- [ ] 性能优化

### Phase 2: AI 对话优化（1 周）

- [ ] Claude API 集成
- [ ] System Prompt 调优
- [ ] 流式输出实现
- [ ] 对话历史管理
- [ ] 测试和优化（多轮对话、边缘情况）

### Phase 3: 完善与测试（1 周）

- [ ] 管理后台（审核留言、管理作品）
- [ ] 搜索功能
- [ ] 收藏功能
- [ ] 多端测试（PC / Mobile / Tablet）
- [ ] SEO 优化（meta tags, sitemap）

### Phase 4: 小程序版本（可选，2 周）

- [ ] 选择框架（Taro / uni-app）
- [ ] UI 适配（简化 3D 效果）
- [ ] 功能精简版本
- [ ] 微信小程序提审

---

## 📝 额外功能建议

### 1. 紫色相册
- 粉丝上传照片（模仿白娘子、手工作品等）
- 审核后展示在专区
- 可以点赞和评论

### 2. 芝姐日历
- 标注重要日期（生日、首播日、获奖日）
- 到了特殊日子触发彩蛋（紫色花瓣雨）
- 倒计时功能

### 3. 今日芝姐
- 最新动态模块
- 可以爬取官方微博（需要授权）
- 或手动更新

### 4. 数字纪念册
- 粉丝创建"我与芝姐的故事"
- 时间轴形式记录自己的追星历程
- 分享功能

### 5. 虚拟礼物
- 在特殊日子送虚拟礼物（紫色花束、小星星）
- 展示在页面上
- 统计功能

---

## 🎨 设计资源

### 需要准备的素材

1. **照片**
   - 赵雅芝各年代代表照
   - 经典角色剧照
   - 获奖照片
   - 活动照片

2. **作品信息**
   - 完整作品列表（1975-2024）
   - 每部作品的简介
   - 角色名称
   - 播出年份

3. **装饰元素**
   - 紫色花瓣素材
   - 相框边框
   - 装饰图案

### 推荐设计工具

- **Figma**: 高保真原型设计
- **Excalidraw**: 快速草图
- **Coolors**: 色彩搭配
- **Google Fonts**: 字体预览

---

## 🚀 上线准备

### 上线前检查清单

- [ ] 所有页面响应式测试
- [ ] 跨浏览器兼容性测试
- [ ] 性能优化（Lighthouse 分数 > 90）
- [ ] SEO 优化（meta, og:image）
- [ ] 隐私政策页面
- [ ] 404 页面
- [ ] 域名和 SSL 证书
- [ ] 分析工具（Google Analytics / Plausible）

### 推广建议

1. **社交媒体**
   - 在粉丝群、论坛宣传
   - 制作宣传海报
   - 邀请粉丝留言

2. **SEO**
   - 关键词：赵雅芝、白娘子、芝姐
   - 在相关网站投稿
   - 交换友情链接

3. **活动**
   - 生日特别活动
   - 留言抽奖
   - 优秀作品展示

---

## 📞 联系与反馈

网站上线后：
- 提供反馈渠道（邮箱/表单）
- 定期更新内容
- 收集用户建议
- 持续优化体验

---

## 💡 最后的话

这个项目的核心是**用爱和温暖致敬芝姐五十年的光影岁月**。

设计要点：
✨ 优雅而不失温馨
💜 紫色贯穿始终（应援色）
🏠 小屋的概念 - 有家的感觉
📖 时光长廊 - 记录岁月
💬 AI 对话 - 拉近距离
💌 留言墙 - 传递爱意

技术要点：
⚡ 性能优先（快速加载）
📱 移动友好（响应式设计）
♿ 无障碍访问（良好的语义化）
🔒 数据安全（留言审核机制）

希望这个网站能成为粉丝们表达爱意、回忆美好时光的温暖港湾！💜