ChronoMail - 时光胶囊邮箱

项目简介

ChronoMail是一个基于Vue3的时光胶囊邮箱应用，用户可以撰写邮件并设定未来的发送时间，将此刻的心情、想法和祝福寄给未来的自己或他人。

技术栈

• Vue 3
• Vue Router
• Vant UI组件库
• Axios
• Electron

功能特点

• 📧 撰写时光胶囊邮件
• ⏰ 设定未来发送时间
• 🌌 深空主题UI设计
• 📱 移动端适配
• 🔐 用户登录注册
• 📬 收件箱和发件箱管理
• 🕐 时间线展示
• 🤖 AI写作辅助
• 📊 数据统计
• 🎨 自定义胶囊样式

API接口对接

本项目已完整对接后端API，支持以下功能：

用户认证

• 用户注册与登录
• Token刷新机制
• 自动登录状态保持

邮件管理

• 创建未来邮件
• 获取邮件列表（收件箱/发件箱/草稿箱）
• 邮件详情查看
• 邮件编辑与删除
• 邮件撤销发送

时光胶囊

• 胶囊视图展示
• 胶囊样式自定义
• 3D空间效果

AI助手

• 写作辅助
• 情感分析
• 未来预测

个人空间

• 时间线展示
• 数据统计
• 用户信息管理

文件上传

• 附件上传
• 头像上传

推送通知

• 设备注册
• 通知设置

详细的API文档请参考：README-API.md

安装和运行

安装依赖

npm install

启动开发服务器

npm run serve

构建生产版本

npm run build

运行Electron应用

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

# 开发环境配置
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调用的实际效果。