191 lines
3.5 KiB
Markdown
191 lines
3.5 KiB
Markdown
# AIGC 前端项目
|
||
|
||
基于 Vue 3 + TypeScript + Vite + Element Plus 的 AIGC 应用前端。
|
||
|
||
## 功能特性
|
||
|
||
- 🎓 自动生成论文
|
||
- 📊 生成答辩 PPT
|
||
- 📝 生成开题报告、任务书、实习报告
|
||
- 🔍 AIGC 检测
|
||
- ✂️ 论文降重 / AIGC 降权
|
||
- 💰 积分充值系统
|
||
|
||
## 技术栈
|
||
|
||
- **框架**: Vue 3 (Composition API)
|
||
- **语言**: TypeScript
|
||
- **构建工具**: Vite
|
||
- **UI 组件**: Element Plus
|
||
- **图标**: Element Plus Icons
|
||
|
||
## 开发环境
|
||
|
||
### 环境要求
|
||
|
||
- Node.js >= 16
|
||
- npm >= 8
|
||
|
||
### 安装依赖
|
||
|
||
```bash
|
||
npm install
|
||
```
|
||
|
||
### 启动开发服务器
|
||
|
||
```bash
|
||
npm run dev
|
||
```
|
||
|
||
访问 http://localhost:5173
|
||
|
||
### 构建生产版本
|
||
|
||
```bash
|
||
npm run build
|
||
```
|
||
|
||
### 预览生产构建
|
||
|
||
```bash
|
||
npm run preview
|
||
```
|
||
|
||
## 环境配置
|
||
|
||
项目支持开发和生产环境自动切换：
|
||
|
||
### 开发环境
|
||
|
||
使用 `.env.development`，API 地址为本地后端：
|
||
|
||
```
|
||
VITE_API_BASE_URL=http://localhost:20006
|
||
```
|
||
|
||
### 生产环境
|
||
|
||
使用 `.env.production`，需要配置实际服务器地址：
|
||
|
||
```
|
||
VITE_API_BASE_URL=http://your-server-ip:20006
|
||
```
|
||
|
||
## 项目结构
|
||
|
||
```
|
||
aigc-ui/
|
||
├── public/ # 静态资源
|
||
├── src/
|
||
│ ├── api/ # API 接口
|
||
│ │ ├── check.ts # AIGC 检测
|
||
│ │ ├── paper.ts # 论文生成
|
||
│ │ ├── payment.ts # 支付相关
|
||
│ │ └── user.ts # 用户相关
|
||
│ ├── config/ # 配置文件
|
||
│ │ └── api.ts # API 统一配置
|
||
│ ├── App.vue # 主组件
|
||
│ └── main.ts # 入口文件
|
||
├── .env.development # 开发环境配置
|
||
├── .env.production # 生产环境配置
|
||
├── vite.config.ts # Vite 配置
|
||
├── tsconfig.json # TypeScript 配置
|
||
└── package.json # 项目依赖
|
||
|
||
```
|
||
|
||
## 部署
|
||
|
||
详细部署文档请查看 [DEPLOYMENT.md](./DEPLOYMENT.md)
|
||
|
||
### 快速部署
|
||
|
||
```bash
|
||
# 1. 修改生产环境配置
|
||
vim .env.production
|
||
|
||
# 2. 构建
|
||
npm run build
|
||
|
||
# 3. 部署 dist 目录到服务器
|
||
```
|
||
|
||
### 使用部署脚本
|
||
|
||
```bash
|
||
# 本地构建并打包
|
||
./deploy.sh
|
||
|
||
# 自动部署到服务器
|
||
./deploy-to-server.sh user@server-ip /var/www/aigc
|
||
```
|
||
|
||
## 开发指南
|
||
|
||
### API 调用
|
||
|
||
所有 API 请求统一使用 `src/config/api.ts` 中的 `request` 函数：
|
||
|
||
```typescript
|
||
import { request } from '../config/api'
|
||
|
||
// GET 请求
|
||
const data = await request<ResponseType>('/api/path', {
|
||
method: 'GET'
|
||
})
|
||
|
||
// POST 请求
|
||
const data = await request<ResponseType>('/api/path', {
|
||
method: 'POST',
|
||
body: JSON.stringify(payload)
|
||
})
|
||
```
|
||
|
||
### 添加新功能
|
||
|
||
1. 在 `src/api/` 下创建对应的 API 文件
|
||
2. 在 `App.vue` 中添加功能入口
|
||
3. 实现业务逻辑
|
||
|
||
### 代码规范
|
||
|
||
- 使用 TypeScript 类型定义
|
||
- 遵循 Vue 3 Composition API 风格
|
||
- 使用 async/await 处理异步操作
|
||
- 统一错误处理
|
||
|
||
## 常见问题
|
||
|
||
### 1. API 请求失败
|
||
|
||
检查：
|
||
- 后端服务是否启动
|
||
- `.env.development` 或 `.env.production` 中的 API 地址是否正确
|
||
- 浏览器控制台的网络请求
|
||
|
||
### 2. 开发环境跨域问题
|
||
|
||
开发环境下，前端运行在 5173 端口，后端在 20006 端口，需要后端支持 CORS。
|
||
|
||
### 3. 生产环境 404
|
||
|
||
使用 Nginx 部署时，需要配置：
|
||
|
||
```nginx
|
||
location / {
|
||
try_files $uri $uri/ /index.html;
|
||
}
|
||
```
|
||
|
||
## 相关链接
|
||
|
||
- [Vue 3 文档](https://vuejs.org/)
|
||
- [Vite 文档](https://vitejs.dev/)
|
||
- [Element Plus 文档](https://element-plus.org/)
|
||
- [TypeScript 文档](https://www.typescriptlang.org/)
|
||
|
||
## License
|
||
|
||
MIT
|