需求确认 - 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 " \ -H "Content-Type: application/json" \ -d '{"type":"text","content":"一个红色的椅子"}' 3. 前端测试 cd frontend && npm run dev # 访问 http://localhost:3000//ai-3d # 测试文字生成、图片上传、历史记录功能 4. 完整流程测试 - 输入文字描述 → 点击生成 → 等待完成 → 预览3D模型 - 上传图片 → 点击生成 → 等待完成 → 预览3D模型 - 查看历史记录 → 点击历史任务 → 预览3D模型 --- 后期扩展 Mock 开发完成后，接入真实 API 只需： 1. 新建 hunyuan-3d.provider.ts 或 meshy.provider.ts 2. 配置环境变量 3. 在 Service 中切换 Provider