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