# year_review

**Repository Path**: ppshux/year_review

## Basic Information

- **Project Name**: year_review
- **Description**: ppshu的个人年度总结展示类平台
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-12-26
- **Last Updated**: 2026-05-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# NovaW Annual Review 2025

> 一个现代化的年度总结展示网站，用数据和时间线记录一年的成长与进步

[![Vue 3](https://img.shields.io/badge/Vue-3.5.24-4FC08D?logo=vue.js)](https://vuejs.org/)
[![Django](https://img.shields.io/badge/Django-5.0.6-092E20?logo=django)](https://www.djangoproject.com/)
[![TailwindCSS](https://img.shields.io/badge/TailwindCSS-3.4.1-38B2AC?logo=tailwind-css)](https://tailwindcss.com/)
[![License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)

## 📖 项目简介

NovaW Annual Review 2025 是一个前后端分离的年度总结展示网站，旨在以优雅的方式展示一年来的工作成果、学习进展、生活足迹和未来规划。项目采用现代化的技术栈，支持电脑端、iPad端和手机端的完美适配。

## ✨ 功能特性

### 🎯 核心模块

- **🏗️ Engineering（工程主线）** - 展示所有工程项目，包含技术栈、截图、GitHub提交热力图和技术树时间线
- **📚 English（英语主线）** - 记录英语学习历程，包含六级成绩、外企目标路线图和学习记录
- **🎵 Music（音乐主线）** - 展示音乐作品、年度Top Picks、番尼乐队简介和技能进展曲线
- **✍️ Writing（写作主线）** - 展示年度写作作品和摘要
- **📊 Annual Reviews（平台年度总结）** - 聚合各大平台的年度报告（酷狗、B站、抖音、微信阅读等）
- **🗺️ Footprints（足迹主线）** - 记录到访城市，包含照片、感悟和Roamio链接
- **🚀 Future Plans（未来计划）** - 规划未来目标，支持优先级、状态追踪和倒计时

### 🎨 设计特色

- **电影黑白 + 柔和蓝** 的视觉风格
- **响应式设计** - 完美适配手机、iPad和桌面端
- **流畅动画** - Fade-in、Slide-up、Parallax等动效
- **汉堡菜单** - 移动端友好的导航体验
- **大触摸目标** - 所有交互元素 ≥ 44px

## 🛠️ 技术栈

### 前端
- **Vue 3.5.24** - 渐进式JavaScript框架
- **Vite 7.2.4** - 下一代前端构建工具
- **Vue Router 4** - 官方路由管理器
- **Pinia 2** - 新一代状态管理
- **TailwindCSS 3.4.1** - 实用优先的CSS框架
- **Axios** - HTTP客户端

### 后端
- **Django 5.0.6** - 高级Python Web框架
- **Django REST Framework** - 强大的RESTful API工具包
- **SQLite** - 轻量级数据库（开发环境）
- **django-cors-headers** - CORS跨域处理

### 部署
- **Nginx** - Web服务器和反向代理
- **Gunicorn** - Python WSGI HTTP服务器
- **Supervisor** - 进程管理工具
- **阿里云** - 云服务器

## 📁 项目结构

```
year_review_2025/
├── backend/                    # Django后端
│   └── year_review_2025/
│       ├── manage.py
│       └── year_review_2025/
│           ├── settings.py
│           ├── urls.py
│           └── ...
├── web/                       # Vue3前端
│   └── web/
│       ├── src/
│       │   ├── pages/         # 页面组件
│       │   ├── components/    # 通用组件
│       │   ├── api/           # API调用
│       │   ├── router/        # 路由配置
│       │   └── stores/        # 状态管理
│       ├── public/
│       └── package.json
├── DESIGN_DRAFT.md            # 详细设计文档
└── README.md                  # 项目说明文档
```

## 🚀 快速开始

### 环境要求

- **Python** >= 3.8
- **Node.js** >= 16.0
- **npm** >= 8.0

### 后端设置

1. **进入后端目录**
```bash
cd backend/year_review_2025
```

2. **创建虚拟环境（推荐）**
```bash
python -m venv venv
# Windows
venv\Scripts\activate
# Linux/Mac
source venv/bin/activate
```

3. **安装依赖**
```bash
pip install -r requirements.txt
```

4. **数据库迁移**
```bash
python manage.py makemigrations
python manage.py migrate
```

5. **创建超级用户（可选）**
```bash
python manage.py createsuperuser
```

6. **运行开发服务器**
```bash
python manage.py runserver
```

后端API将在 `http://localhost:8000` 运行

### 前端设置

1. **进入前端目录**
```bash
cd web/web
```

2. **安装依赖**
```bash
npm install
```

3. **配置环境变量**

创建 `.env.development` 文件：
```env
VITE_API_BASE_URL=http://localhost:8000/api
VITE_GITHUB_USERNAME=your-github-username
```

4. **启动开发服务器**
```bash
npm run dev
```

前端将在 `http://localhost:5173` 运行

### 构建生产版本

**前端构建**
```bash
cd web/web
npm run build
```

构建产物将在 `dist/` 目录

## 📡 API 接口

所有API接口的基础路径为 `/api/`

### 主要接口

- `GET /api/projects/` - 获取工程项目列表
- `GET /api/skills/` - 获取技术树时间线
- `GET /api/github-stats/` - 获取GitHub统计数据
- `GET /api/english/records/` - 获取英语学习记录
- `GET /api/english/goals/` - 获取外企目标路线图
- `GET /api/music/` - 获取音乐作品列表
- `GET /api/music/top-picks/` - 获取年度Top Picks
- `GET /api/music/progress/` - 获取音乐进展数据
- `GET /api/writing/` - 获取写作作品列表
- `GET /api/footprints/` - 获取足迹列表
- `GET /api/annual/` - 获取平台年度报告
- `GET /api/future-plans/` - 获取未来计划列表

详细API文档请参考 [DESIGN_DRAFT.md](./DESIGN_DRAFT.md)

## 🎨 设计规范

### 响应式断点

- **手机端**: < 640px（单列布局）
- **大屏手机**: 640px - 767px
- **iPad竖屏**: 768px - 1023px（双列）
- **iPad横屏/笔记本**: 1024px - 1279px（三列）
- **桌面端**: ≥ 1280px（多列）

### 颜色系统

- **主色调**: 电影黑白 + 柔和蓝（#4a90e2）
- **背景色**: #ffffff（浅色模式）
- **文字色**: #0a0a0a（主文字），#666666（次要文字）

详细设计规范请参考 [DESIGN_DRAFT.md](./DESIGN_DRAFT.md)

## 📦 部署

### 生产环境部署（阿里云）

1. **后端部署**
   - 使用 Gunicorn + Supervisor 管理进程
   - 配置 Nginx 反向代理

2. **前端部署**
   - 构建静态文件：`npm run build`
   - 将 `dist/` 目录部署到 Nginx

3. **Nginx 配置**
   - 静态文件服务前端
   - `/api/` 路径代理到后端服务

详细部署配置请参考 [DESIGN_DRAFT.md](./DESIGN_DRAFT.md) 中的部署部分

## 🔧 开发规范

### Git 提交规范

- `feat`: 新功能
- `fix`: 修复bug
- `docs`: 文档更新
- `style`: 代码格式调整
- `refactor`: 重构
- `test`: 测试相关
- `chore`: 构建/工具相关

### 代码规范

- 遵循各语言的官方编码规范
- 使用 ESLint（前端）和 flake8（后端）进行代码检查
- 组件命名使用 PascalCase
- 文件命名使用 kebab-case

## 📝 待办事项

- [ ] 完善数据模型和API接口
- [ ] 实现前端页面组件
- [ ] 添加动画效果
- [ ] 响应式适配优化
- [ ] 性能优化
- [ ] 单元测试
- [ ] 部署到生产环境

## 🤝 贡献

欢迎提交 Issue 和 Pull Request！

## 📄 许可证

[MIT License](LICENSE)

## 👤 作者

**NovaW**

- Gitee: [@ppshux](https://gitee.com/ppshux)
- 项目地址: [year_review_2025](https://gitee.com/ppshux/year_review_2025)

## 🙏 致谢

感谢以下优秀的开源项目：

- [Vue.js](https://vuejs.org/)
- [Django](https://www.djangoproject.com/)
- [TailwindCSS](https://tailwindcss.com/)
- [Vite](https://vitejs.dev/)

---

**⭐ 如果这个项目对你有帮助，欢迎 Star！**