初始化
This commit is contained in:
155
README.md
Normal file
155
README.md
Normal file
@@ -0,0 +1,155 @@
|
||||
# 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调用的实际效果。
|
||||
Reference in New Issue
Block a user