unilife/unilife-frontend

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

安装依赖

cd unilife-frontend
npm install

开发服务器

npm run dev

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

构建生产版本

npm run build

预览生产版本

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组件

详细信息请查看 设计系统文档

📄 页面说明

🏠 首页 (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 文件了解详情

📞 联系我们

• 项目地址: GitHub
• 问题反馈: Issues
• 文档: Wiki

---

🎓 让大学生活更精彩！