13 KiB
13 KiB
需求确认
- AI服务：先用 Mock 数据开发，后期接入真实API（腾讯混元3D/Meshy）
- 功能入口：独立页面
- 生成历史：需要保存
---
技术架构
┌─────────────────────────────────────────────────────────┐
│ 前端 Vue 3 │
│ ┌─────────────────────────────────────────────────┐ │
│ │ AI 3D生成页面 (/ai-3d) │ │
│ │ - 文字输入 / 图片上传 │ │
│ │ - 生成进度展示 │ │
│ │ - 历史记录列表 │ │
│ │ - 3D预览（复用 ModelViewer） │ │
│ └─────────────────────────────────────────────────┘ │
└───────────────────────────┬─────────────────────────────┘
│
┌───────────────────────────▼─────────────────────────────┐
│ 后端 NestJS │
│ ┌─────────────────────────────────────────────────┐ │
│ │ AI 3D生成模块 │ │
│ │ - 提交生成任务 │ │
│ │ - 查询任务状态 │ │
│ │ - 获取历史记录 │ │
│ └──────────────────────┬──────────────────────────┘ │
│ │ │
│ ┌──────────────────────▼──────────────────────────┐ │
│ │ Mock Provider（开发阶段） │ │
│ │ - 模拟生成延迟（5-10秒） │ │
│ │ - 返回示例3D模型URL │ │
│ └─────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────┘
---
实现步骤
第一步：后端 - 创建数据模型
文件: backend/prisma/schema.prisma
新增 AI3DTask 表：
model AI3DTask {
id Int @id @default(autoincrement())
tenantId Int @map("tenant_id")
userId Int @map("user_id")
inputType String @map("input_type") // text | image
inputContent String @db.Text // 文字描述或图片URL
status String @default("pending") // pending|processing|completed|failed
resultUrl String? @map("result_url") // 生成的3D模型URL
errorMessage String? @map("error_message")
createTime DateTime @default(now()) @map("create_time")
completeTime DateTime? @map("complete_time")
tenant Tenant @relation(fields: [tenantId], references: [id])
user User @relation(fields: [userId], references: [id])
@@map("t_ai_3d_task")
}
第二步：后端 - 创建 AI 3D 模块
新建文件结构:
backend/src/ai-3d/
├── ai-3d.module.ts
├── ai-3d.controller.ts
├── ai-3d.service.ts
├── dto/
│ ├── create-task.dto.ts
│ └── query-task.dto.ts
└── providers/
└── mock.provider.ts # Mock实现
API 端点:
POST /api/ai-3d/generate # 提交生成任务
GET /api/ai-3d/tasks # 获取历史记录列表
GET /api/ai-3d/tasks/:id # 获取任务详情/状态
DELETE /api/ai-3d/tasks/:id # 删除任务
第三步：后端 - Mock Provider 实现
文件: backend/src/ai-3d/providers/mock.provider.ts
// Mock实现：模拟5-10秒生成延迟，返回示例模型
async generate(input: { type: 'text' | 'image', content: string }) {
// 模拟处理时间
await sleep(random(5000, 10000));
// 返回示例模型URL（使用公开的GLB示例）
return {
status: 'completed',
resultUrl: 'https://example.com/sample-model.glb'
};
}
第四步：前端 - 创建页面和API
新建文件结构:
frontend/src/
├── api/
│ └── ai-3d.ts # API接口
├── views/
│ └── ai-3d/
│ ├── index.vue # 主页面
│ └── components/
│ ├── GenerateForm.vue # 生成表单
│ ├── TaskList.vue # 历史列表
│ └── TaskCard.vue # 任务卡片
页面布局:
┌────────────────────────────────────────────────┐
│ AI 3D模型生成 │
├────────────────────────────────────────────────┤
│ ┌──────────────────┐ ┌────────────────────┐ │
│ │ 生成方式 │ │ 历史记录 │ │
│ │ ○ 文字描述 │ │ ┌────────────────┐ │ │
│ │ ○ 上传图片 │ │ │ 任务1 完成 ✓ │ │ │
│ │ │ │ └────────────────┘ │ │
│ │ [输入区域] │ │ ┌────────────────┐ │ │
│ │ │ │ │ 任务2 生成中...│ │ │
│ │ [生成] 按钮 │ │ └────────────────┘ │ │
│ └──────────────────┘ └────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────┐ │
│ │ 3D预览区域（选中任务后显示） │ │
│ │ │ │
│ └──────────────────────────────────────────┘ │
└────────────────────────────────────────────────┘
第五步：前端 - 添加路由和菜单
修改文件: frontend/src/router/index.ts
{
path: "ai-3d",
name: "AI3DGenerate",
component: () => import("@/views/ai-3d/index.vue"),
meta: {
title: "AI 3D生成",
requiresAuth: true,
},
}
---
关键文件清单
┌──────┬──────────────────────────────────────────────────────┐
│ 操作 │ 文件路径 │
├──────┼──────────────────────────────────────────────────────┤
│ 修改 │ backend/prisma/schema.prisma - 添加 AI3DTask 表 │
├──────┼──────────────────────────────────────────────────────┤
│ 新建 │ backend/src/ai-3d/ai-3d.module.ts │
├──────┼──────────────────────────────────────────────────────┤
│ 新建 │ backend/src/ai-3d/ai-3d.controller.ts │
├──────┼──────────────────────────────────────────────────────┤
│ 新建 │ backend/src/ai-3d/ai-3d.service.ts │
├──────┼──────────────────────────────────────────────────────┤
│ 新建 │ backend/src/ai-3d/dto/create-task.dto.ts │
├──────┼──────────────────────────────────────────────────────┤
│ 新建 │ backend/src/ai-3d/dto/query-task.dto.ts │
├──────┼──────────────────────────────────────────────────────┤
│ 新建 │ backend/src/ai-3d/providers/mock.provider.ts │
├──────┼──────────────────────────────────────────────────────┤
│ 修改 │ backend/src/app.module.ts - 注册 AI3D 模块 │
├──────┼──────────────────────────────────────────────────────┤
│ 新建 │ frontend/src/api/ai-3d.ts │
├──────┼──────────────────────────────────────────────────────┤
│ 新建 │ frontend/src/views/ai-3d/index.vue │
├──────┼──────────────────────────────────────────────────────┤
│ 新建 │ frontend/src/views/ai-3d/components/GenerateForm.vue │
├──────┼──────────────────────────────────────────────────────┤
│ 新建 │ frontend/src/views/ai-3d/components/TaskList.vue │
├──────┼──────────────────────────────────────────────────────┤
│ 新建 │ frontend/src/views/ai-3d/components/TaskCard.vue │
├──────┼──────────────────────────────────────────────────────┤
│ 修改 │ frontend/src/router/index.ts - 添加路由 │
└──────┴──────────────────────────────────────────────────────┘
---
验证方式
1. 数据库迁移
cd backend
npx prisma migrate dev --name add-ai-3d-task
2. 后端测试
cd backend && npm run start:dev
# 测试API
curl -X POST http://localhost:3001/api/ai-3d/generate \
-H "Authorization: Bearer <token>" \
-H "Content-Type: application/json" \
-d '{"type":"text","content":"一个红色的椅子"}'
3. 前端测试
cd frontend && npm run dev
# 访问 http://localhost:3000/<tenantCode>/ai-3d
# 测试文字生成、图片上传、历史记录功能
4. 完整流程测试
- 输入文字描述 → 点击生成 → 等待完成 → 预览3D模型
- 上传图片 → 点击生成 → 等待完成 → 预览3D模型
- 查看历史记录 → 点击历史任务 → 预览3D模型
---
后期扩展
Mock 开发完成后，接入真实 API 只需：
1. 新建 hunyuan-3d.provider.ts 或 meshy.provider.ts
2. 配置环境变量
3. 在 Service 中切换 Provider