Zirui & Suomi 情侣周报 (v2.0)

用 React + TypeScript + Tailwind CSS 重构的情侣周报应用，记录 Zirui 和 Suomi 的甜蜜点滴 ❤️

技术栈

• 构建工具: Vite 5.x
• 框架: React 18+
• 语言: TypeScript
• 样式: Tailwind CSS
• 状态管理: Zustand
• 图表库: Recharts
• 动画库: Framer Motion
• 打包部署: Vercel

新功能特性

• ✅ 组件化架构
• ✅ TypeScript 类型检查
• ✅ Framer Motion 动画效果
• ✅ 响应式设计
• ✅ 每日亮点展示
• ✅ 话痨选手对比
• ✅ 活跃时间图表
• ✅ 暖心瞬间引用

快速开始

安装依赖

npm install

启动开发服务器

npm run dev

构建生产版本

npm run build

预览生产版本

npm run preview

项目结构

src/
├── components/
│   ├── Layout/         # 布局组件 (Header, Footer, Container)
│   ├── Weekly/         # 周报组件 (Selector, Title, Summary)
│   ├── Stats/          # 统计组件 (MessageCount, Keywords, TopEmoji)
│   ├── Charts/         # 图表组件 (ActivityChart, ChatterRatio)
│   ├── Quote/          # 引用组件 (WeeklyQuote)
│   └── Daily/          # 每日组件 (DailyHighlights)
├── hooks/
│   ├── useWeeklyData.ts
├── stores/
│   └── useWeeklyStore.ts
├── utils/
│   ├── formatters.ts
│   └── constants.ts
├── data/
│   └── types.ts
├── App.tsx
├── main.tsx
└── index.css

功能模块

1. 周报摘要

• 展示本周话题总结
• 记录日期范围

2. 聊天统计

• 消息总数统计
• 热词标签云
• 最爱表情展示

3. 数据可视化

• 活跃时间折线图 (Recharts)
• 话痨选手占比对比

4. 暖心瞬间

• 本周最感动的一句话
• 包含说话人和时间

5. 每日亮点

• 每日主题和话题
• 话题标签展示

动画效果

• 卡片入场动画 (fadeIn + slideUp)
• 数字滚动动画
• 表情浮动动画
• 图表切换过渡

部署

项目已配置 Vercel 部署：

1. 推送代码到 GitHub
2. 在 Vercel 中导入项目
3. 自动部署完成

访问地址: https://lovers-weekly.vercel.app

License

MIT