AIGC/aigc-ui

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

安装依赖

npm install

启动开发服务器

npm run dev

访问 http://localhost:5173

构建生产版本

npm run build

预览生产构建

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

快速部署

# 1. 修改生产环境配置
vim .env.production

# 2. 构建
npm run build

# 3. 部署 dist 目录到服务器

使用部署脚本

# 本地构建并打包
./deploy.sh

# 自动部署到服务器
./deploy-to-server.sh user@server-ip /var/www/aigc

开发指南

API 调用

所有 API 请求统一使用 src/config/api.ts 中的 request 函数：

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 部署时，需要配置：

location / {
    try_files $uri $uri/ /index.html;
}

相关链接

• Vue 3 文档
• Vite 文档
• Element Plus 文档
• TypeScript 文档

License

MIT