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调用的实际效果。
|