# 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