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
|