# UniLife Frontend

## 🎓 项目简介

UniLife 是一个专为大学生设计的综合性生活平台，提供论坛交流、资源分享、课程管理等功能。本项目是 UniLife 的前端部分，采用现代化的技术栈和紫色主题设计。

## ✨ 特性

- 🎨 **现代化UI设计**: 紫色主题 + 玻璃态效果
- 📱 **响应式布局**: 完美适配桌面端和移动端
- 🚀 **高性能**: Vue 3 + Vite 构建，极快的开发体验
- 🔒 **类型安全**: 完整的TypeScript支持
- 🎯 **用户体验**: 流畅的动画和交互效果
- 🌈 **设计系统**: 统一的设计规范和组件库

## 🛠️ 技术栈

- **前端框架**: Vue 3.5
- **构建工具**: Vite 6.3
- **语言**: TypeScript 5.6
- **状态管理**: Pinia 2.2
- **路由**: Vue Router 4.4
- **UI组件**: Element Plus 2.9
- **HTTP客户端**: Axios 1.7
- **样式**: CSS3 + CSS变量
- **工具**: ESLint + Prettier

## 🚀 快速开始

### 环境要求

- Node.js >= 18.0.0
- npm >= 9.0.0

### 安装依赖

```bash
cd unilife-frontend
npm install
```

### 开发服务器

```bash
npm run dev
```

访问 http://localhost:5173 查看应用

### 构建生产版本

```bash
npm run build
```

### 预览生产版本

```bash
npm run preview
```

## 📁 项目结构

```
unilife-frontend/
├── public/                 # 静态资源
├── src/
│   ├── api/               # API接口
│   │   ├── index.ts       # Axios配置
│   │   └── auth.ts        # 认证相关API
│   ├── components/        # 公共组件
│   ├── layouts/           # 布局组件
│   ├── router/            # 路由配置
│   │   └── index.ts       # 主路由文件
│   ├── stores/            # 状态管理
│   │   └── user.ts        # 用户状态
│   ├── styles/            # 全局样式
│   │   └── globals.css    # 设计系统CSS变量
│   ├── types/             # TypeScript类型定义
│   │   └── index.ts       # 全局类型
│   ├── utils/             # 工具函数
│   ├── views/             # 页面组件
│   │   ├── auth/          # 认证页面
│   │   │   ├── LoginView.vue
│   │   │   └── RegisterView.vue
│   │   ├── forum/         # 论坛页面
│   │   ├── resources/     # 资源页面
│   │   ├── schedule/      # 课程表页面
│   │   ├── profile/       # 个人资料页面
│   │   └── HomeView.vue   # 首页
│   ├── App.vue            # 根组件
│   └── main.ts            # 入口文件
├── DESIGN_SYSTEM.md       # 设计系统文档
└── README.md              # 项目说明
```

## 🎨 设计系统

我们为 UniLife 创建了完整的设计系统，包括：

- **色彩系统**: 紫色主题色彩规范
- **间距系统**: 统一的间距标准
- **字体系统**: 层次化的字体规范
- **阴影系统**: 深度感的阴影效果
- **动画系统**: 流畅的过渡动画
- **组件规范**: 可复用的UI组件

详细信息请查看 [设计系统文档](./DESIGN_SYSTEM.md)

## 📄 页面说明

### 🏠 首页 (HomeView)
- Hero区域展示平台价值主张
- 功能特色介绍（6个核心功能）
- 使用步骤说明（3步上手）
- CTA区域引导用户注册
- 响应式设计，完美适配各种设备

### 🔐 登录页面 (LoginView)
- 玻璃态设计风格
- 用户名/邮箱登录支持
- 表单验证和错误提示
- 动画效果增强用户体验
- 记住密码功能

### ✍️ 注册页面 (RegisterView)
- 完整的用户信息收集
- 邮箱验证码功能
- 实时表单验证
- 密码强度检查
- 学生身份验证

### 💬 论坛页面 (ForumView)
- 基础结构已搭建
- 待后续功能完善

## 🔌 API集成

项目已配置完整的API客户端：

- **请求拦截器**: 自动添加认证token
- **响应拦截器**: 统一错误处理
- **类型安全**: 完整的TypeScript类型定义
- **错误处理**: 用户友好的错误提示

## 🔐 状态管理

使用 Pinia 进行状态管理：

- **用户状态**: 登录状态、用户信息管理
- **持久化**: localStorage自动同步
- **类型安全**: 完整的TypeScript支持

## 🛣️ 路由配置

- **路由守卫**: 自动认证检查
- **懒加载**: 按需加载页面组件
- **重定向**: 智能路由重定向
- **类型安全**: 路由参数类型检查

## 🎯 下一步计划

### 短期目标
- [ ] 完善论坛功能（帖子列表、详情、发布）
- [ ] 实现资源分享功能
- [ ] 开发课程表管理
- [ ] 个人资料页面

### 长期目标
- [ ] 消息通知系统
- [ ] 搜索功能优化
- [ ] 移动端App开发
- [ ] PWA支持

## 🤝 贡献指南

1. Fork 项目
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 开启 Pull Request

## 📜 许可证

本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情

## 📞 联系我们

- 项目地址: [GitHub](https://github.com/your-username/unilife-frontend)
- 问题反馈: [Issues](https://github.com/your-username/unilife-frontend/issues)
- 文档: [Wiki](https://github.com/your-username/unilife-frontend/wiki)

---

🎓 **让大学生活更精彩！**