253 lines
4.3 KiB
Markdown
253 lines
4.3 KiB
Markdown
# 开心APP - 前端应用
|
|
|
|
基于Vue 3 + Ant Design Vue的现代化情绪陪伴应用前端。
|
|
|
|
## 技术栈
|
|
|
|
- **Vue 3** - 渐进式JavaScript框架
|
|
- **TypeScript** - 类型安全的JavaScript超集
|
|
- **Ant Design Vue** - 企业级UI组件库
|
|
- **Vite** - 下一代前端构建工具
|
|
- **Vue Router** - 官方路由管理器
|
|
- **Pinia** - 状态管理库
|
|
- **Sass** - CSS预处理器
|
|
|
|
## 功能特性
|
|
|
|
- 🤖 **智能对话** - 与AI助手"开开"实时聊天
|
|
- 📝 **情绪日记** - 记录和分享日常心情
|
|
- 👤 **个人展板** - 自定义个人信息展示
|
|
- 📊 **话题追踪** - 关注和管理感兴趣的话题
|
|
- 📈 **数据可视化** - 心情统计图表
|
|
- ⚙️ **用户管理** - 登录、注册、设置
|
|
|
|
## 项目结构
|
|
|
|
```
|
|
src/
|
|
├── assets/ # 静态资源
|
|
│ ├── images/ # 图片资源
|
|
│ └── styles/ # 样式文件
|
|
├── components/ # 公共组件
|
|
│ ├── common/ # 通用组件
|
|
│ ├── layout/ # 布局组件
|
|
│ └── ui/ # UI组件
|
|
├── views/ # 页面组件
|
|
│ ├── Home/ # 首页
|
|
│ ├── Chat/ # 聊天页面
|
|
│ ├── Diary/ # 日记页面
|
|
│ ├── Dashboard/ # 个人展板
|
|
│ └── ...
|
|
├── router/ # 路由配置
|
|
├── stores/ # Pinia状态管理
|
|
├── services/ # API服务
|
|
├── utils/ # 工具函数
|
|
├── types/ # TypeScript类型定义
|
|
├── App.vue # 根组件
|
|
└── main.ts # 应用入口
|
|
```
|
|
|
|
## 快速开始
|
|
|
|
### 环境要求
|
|
|
|
- Node.js >= 16.0.0
|
|
- npm >= 8.0.0
|
|
|
|
### 安装依赖
|
|
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
### 开发模式
|
|
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
应用将在 http://localhost:3000 启动
|
|
|
|
### 构建生产版本
|
|
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
### 预览生产版本
|
|
|
|
```bash
|
|
npm run preview
|
|
```
|
|
|
|
### 代码检查
|
|
|
|
```bash
|
|
npm run lint
|
|
```
|
|
|
|
### 代码格式化
|
|
|
|
```bash
|
|
npm run format
|
|
```
|
|
|
|
### 类型检查
|
|
|
|
```bash
|
|
npm run type-check
|
|
```
|
|
|
|
## 开发指南
|
|
|
|
### 项目启动
|
|
|
|
1. 克隆项目到本地
|
|
2. 安装依赖：`npm install`
|
|
3. 启动开发服务器：`npm run dev`
|
|
4. 在浏览器中打开 http://localhost:3000
|
|
|
|
### 开发流程
|
|
|
|
1. 创建新分支进行开发
|
|
2. 编写代码并确保通过所有检查
|
|
3. 提交代码并创建Pull Request
|
|
4. 代码审查通过后合并到主分支
|
|
|
|
### 代码规范
|
|
|
|
- 使用TypeScript进行类型安全开发
|
|
- 遵循ESLint和Prettier配置的代码规范
|
|
- 组件命名使用PascalCase
|
|
- 文件命名使用kebab-case
|
|
- 变量和函数使用camelCase
|
|
|
|
## 环境配置
|
|
|
|
### 开发环境
|
|
|
|
复制 `.env` 文件并根据需要修改配置：
|
|
|
|
```bash
|
|
cp .env.example .env
|
|
```
|
|
|
|
### 生产环境
|
|
|
|
配置 `.env.production` 文件中的生产环境变量。
|
|
|
|
## 部署
|
|
|
|
### 传统部署
|
|
|
|
#### 构建
|
|
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
构建产物将生成在 `dist` 目录中。
|
|
|
|
#### 部署到服务器
|
|
|
|
将 `dist` 目录中的文件部署到Web服务器即可。
|
|
|
|
#### 使用部署脚本
|
|
|
|
```bash
|
|
# 开发环境
|
|
./deploy.sh dev
|
|
|
|
# 测试环境
|
|
./deploy.sh test
|
|
|
|
# 生产环境
|
|
./deploy.sh prod
|
|
```
|
|
|
|
### Docker部署
|
|
|
|
#### 构建Docker镜像
|
|
|
|
```bash
|
|
docker build -t emotion-museum-web .
|
|
```
|
|
|
|
#### 运行容器
|
|
|
|
```bash
|
|
docker run -d -p 3000:80 --name emotion-museum-web emotion-museum-web
|
|
```
|
|
|
|
#### 使用Docker Compose
|
|
|
|
```bash
|
|
# 生产模式
|
|
docker-compose up -d
|
|
|
|
# 开发模式
|
|
docker-compose --profile dev up -d
|
|
```
|
|
|
|
### Nginx配置示例
|
|
|
|
```nginx
|
|
server {
|
|
listen 80;
|
|
server_name your-domain.com;
|
|
root /path/to/dist;
|
|
index index.html;
|
|
|
|
location / {
|
|
try_files $uri $uri/ /index.html;
|
|
}
|
|
|
|
location /api {
|
|
proxy_pass http://backend-server;
|
|
proxy_set_header Host $host;
|
|
proxy_set_header X-Real-IP $remote_addr;
|
|
}
|
|
}
|
|
```
|
|
|
|
## 开发规范
|
|
|
|
### 组件命名
|
|
|
|
- 组件名使用PascalCase
|
|
- 文件名使用kebab-case
|
|
- 变量和函数使用camelCase
|
|
|
|
### 代码风格
|
|
|
|
项目使用ESLint和Prettier进行代码规范检查和格式化。
|
|
|
|
### Git提交规范
|
|
|
|
使用约定式提交格式：
|
|
|
|
```
|
|
feat: 新功能
|
|
fix: 修复bug
|
|
docs: 文档更新
|
|
style: 代码格式调整
|
|
refactor: 代码重构
|
|
test: 测试相关
|
|
chore: 构建过程或辅助工具的变动
|
|
```
|
|
|
|
## 浏览器支持
|
|
|
|
- Chrome >= 87
|
|
- Firefox >= 78
|
|
- Safari >= 14
|
|
- Edge >= 88
|
|
|
|
## 许可证
|
|
|
|
MIT License
|
|
|
|
## 联系方式
|
|
|
|
如有问题或建议，请联系开发团队。
|