155 lines
3.7 KiB
Markdown
155 lines
3.7 KiB
Markdown
# ChronoMail - 时光胶囊邮箱
|
||
|
||
## 项目简介
|
||
ChronoMail是一个基于Vue3的时光胶囊邮箱应用，用户可以撰写邮件并设定未来的发送时间，将此刻的心情、想法和祝福寄给未来的自己或他人。
|
||
|
||
## 技术栈
|
||
- Vue 3
|
||
- Vue Router
|
||
- Vant UI组件库
|
||
- Axios
|
||
- Electron
|
||
|
||
## 功能特点
|
||
- 📧 撰写时光胶囊邮件
|
||
- ⏰ 设定未来发送时间
|
||
- 🌌 深空主题UI设计
|
||
- 📱 移动端适配
|
||
- 🔐 用户登录注册
|
||
- 📬 收件箱和发件箱管理
|
||
- 🕐 时间线展示
|
||
- 🤖 AI写作辅助
|
||
- 📊 数据统计
|
||
- 🎨 自定义胶囊样式
|
||
|
||
## API接口对接
|
||
|
||
本项目已完整对接后端API，支持以下功能：
|
||
|
||
### 用户认证
|
||
- 用户注册与登录
|
||
- Token刷新机制
|
||
- 自动登录状态保持
|
||
|
||
### 邮件管理
|
||
- 创建未来邮件
|
||
- 获取邮件列表（收件箱/发件箱/草稿箱）
|
||
- 邮件详情查看
|
||
- 邮件编辑与删除
|
||
- 邮件撤销发送
|
||
|
||
### 时光胶囊
|
||
- 胶囊视图展示
|
||
- 胶囊样式自定义
|
||
- 3D空间效果
|
||
|
||
### AI助手
|
||
- 写作辅助
|
||
- 情感分析
|
||
- 未来预测
|
||
|
||
### 个人空间
|
||
- 时间线展示
|
||
- 数据统计
|
||
- 用户信息管理
|
||
|
||
### 文件上传
|
||
- 附件上传
|
||
- 头像上传
|
||
|
||
### 推送通知
|
||
- 设备注册
|
||
- 通知设置
|
||
|
||
详细的API文档请参考：[README-API.md](./README-API.md)
|
||
|
||
## 安装和运行
|
||
|
||
### 安装依赖
|
||
```bash
|
||
npm install
|
||
```
|
||
|
||
### 启动开发服务器
|
||
```bash
|
||
npm run serve
|
||
```
|
||
|
||
### 构建生产版本
|
||
```bash
|
||
npm run build
|
||
```
|
||
|
||
### 运行Electron应用
|
||
```bash
|
||
npm run electron:serve
|
||
```
|
||
|
||
## 项目结构
|
||
```
|
||
src/
|
||
├── api/ # API接口模块
|
||
│ ├── index.js # API方法集合
|
||
│ └── request.js # Axios实例和拦截器配置
|
||
├── assets/ # 静态资源
|
||
│ └── styles/ # 样式文件
|
||
├── components/ # 公共组件
|
||
├── router/ # 路由配置
|
||
├── store/ # 状态管理
|
||
├── utils/ # 工具函数
|
||
├── views/ # 页面组件
|
||
│ ├── Login.vue # 登录页
|
||
│ ├── Register.vue # 注册页
|
||
│ ├── Home.vue # 首页
|
||
│ ├── Compose.vue # 撰写邮件
|
||
│ ├── Inbox.vue # 收件箱
|
||
│ ├── Sent.vue # 发件箱
|
||
│ ├── Profile.vue # 个人中心
|
||
│ ├── Timeline.vue # 时间线
|
||
│ ├── CapsuleDetail.vue # 胶囊详情
|
||
│ └── ApiDemo.vue # API示例
|
||
├── App.vue # 根组件
|
||
└── main.js # 入口文件
|
||
```
|
||
|
||
## 开发说明
|
||
1. 本项目使用Vue 3 Composition API
|
||
2. 使用Vant UI组件库进行界面开发
|
||
3. 使用Vue Router进行路由管理
|
||
4. 使用Axios进行HTTP请求
|
||
5. 使用Vue 3响应式API进行状态管理
|
||
6. 项目采用深空主题设计，营造时光穿梭的视觉体验
|
||
|
||
## 环境配置
|
||
|
||
项目使用环境变量来配置不同环境的API地址：
|
||
|
||
- 开发环境：`.env.development`
|
||
- 生产环境：`.env.production`
|
||
|
||
```bash
|
||
# 开发环境配置
|
||
VUE_APP_API_BASE_URL=http://localhost:3000/api/v1
|
||
VUE_APP_TITLE=ChronoMail - 未来邮箱
|
||
|
||
# 生产环境配置
|
||
VUE_APP_API_BASE_URL=https://api.chronomail.com/api/v1
|
||
VUE_APP_TITLE=ChronoMail - 未来邮箱
|
||
```
|
||
|
||
## 注意事项
|
||
- 所有API请求都会自动添加Authorization头，格式为`Bearer {token}`
|
||
- 当收到401或403响应时，会自动清除用户信息并跳转到登录页
|
||
- 文件上传需要使用FormData格式
|
||
- 日期格式统一使用ISO 8601标准
|
||
- 所有状态变更都应通过相应的Actions方法进行，以保证状态一致性
|
||
|
||
## API示例页面
|
||
|
||
项目包含一个API示例页面（`/api-demo`），展示了如何在Vue组件中使用各种API接口，包括：
|
||
- 用户认证
|
||
- 邮件操作
|
||
- 胶囊管理
|
||
- AI助手调用
|
||
|
||
您可以在登录后访问该页面，查看API调用的实际效果。 |