WangLeo
72267ab2c9
- POST /api/v1/tasks 创建任务，每 20 秒轮询 GET /api/v1/tasks/{id} 获取结果
- 新增 modelApi.js 通过 /suanli/v1/platforms/:code/models 获取模型 UUID
- dialogBox/canvas 集成 getModelId 查找，result 字段改为 request
- createTask 精简为仅返回 Playload，供 body 使用
- 更新 CLAUDE.md 反映新架构
91 lines
4.2 KiB
Markdown
91 lines
4.2 KiB
Markdown
# CLAUDE.md
|
||
|
||
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
||
|
||
## 常用命令
|
||
|
||
```bash
|
||
pnpm dev # 启动 Vite 开发服务器
|
||
pnpm build # 生产构建
|
||
pnpm preview # 预览生产构建
|
||
```
|
||
|
||
## 技术栈
|
||
|
||
Vue 3 (Composition API) + Vite 7 + Pinia + Vue Router + Element Plus + Less + pnpm
|
||
|
||
## 架构概览
|
||
|
||
AI 绘画/视频生成前端操作平台，通过 HTTP 接口对接后端和第三方 AI 平台（RunningHub），提交生成任务并轮询结果。
|
||
|
||
### 关键目录
|
||
|
||
```
|
||
src/
|
||
├── main.js # 入口：创建 Vue 应用，安装 Pinia/Router/VueVirtualScroller
|
||
├── router/index.js # 路由定义 + token 验证守卫
|
||
├── stores/ # Pinia 状态管理
|
||
│ ├── user.js # 用户认证、信息、免费次数
|
||
│ └── display.js # 生成历史列表、UI 状态（滚动、画布等）
|
||
├── apis/ # HTTP API 模块（auth/display），通过 axios 实例调用
|
||
├── components/ # 通用组件
|
||
│ ├── dialogBox/ # 生成参数输入面板（核心交互入口），含模型选择、比例、上传等子组件
|
||
│ ├── virtual-scroller/# 虚拟滚动列表组件（自定义实现，reverse 模式）
|
||
│ └── canvas/ # 图片画布编辑（圆/矩形选区，局部重绘）
|
||
├── views/ # 页面（home、login）
|
||
├── utils/
|
||
│ ├── request.js # Axios 实例，拦截器处理 token 和不同服务的 baseURL 路由
|
||
│ ├── websocket.js # 任务生成入口：HTTP POST 创建任务 + 20s 轮询获取结果
|
||
│ ├── createTask.js # 调用平台适配器 Playload() 构造任务 body
|
||
│ ├── modelConfig.js # 从远程 JSON 加载 workflow 配置，localStorage 每日缓存
|
||
│ ├── modelApi.js # 从 /suanli/v1/platforms/:code/models 获取模型列表及 UUID
|
||
│ └── auth.ts # token 存取工具（localStorage）
|
||
├── config/
|
||
│ ├── index.js # 平台配置入口，导出 runninghub 适配器
|
||
│ └── runninghub/ # RunningHub 平台适配器：Playload() 构造和 result() 解析
|
||
```
|
||
|
||
### 核心数据流
|
||
|
||
1. 用户在 `dialogBox` 中设置参数（模型、提示词、比例、上传图片等）
|
||
2. 点击生成 → `dialogBox:handleStart()` 组装 data（含 modelId、params、imgs、request）
|
||
3. 调用 `websocket.js:generate(data, generateData)`
|
||
4. `generate()` 内部先通过 `createTask(data)` → `runninghub.Playload()` 构造 RunningHub workflow payload 作为 body
|
||
5. 调用 `modelApi.getModelId(type, modelName)` 从 `/suanli/v1/platforms/:code/models` 查找模型 UUID（带 localStorage 每日缓存）
|
||
6. POST `/api/v1/tasks` 提交任务（`{ model_id, body, request }`），携带 `X-Session-Id` 用于预扣费
|
||
7. 返回 task_id → `displayStore.addGeneratingItem()` 在前端列表插入"生成中"条目
|
||
8. 每 20 秒轮询 GET `/api/v1/tasks/{task_id}`，completed 时调用 `updateItemToSuccess()` 更新列表
|
||
|
||
### 平台编码映射
|
||
|
||
| 类型 | 平台编码 |
|
||
|------|----------|
|
||
| Painting | `ai_painting_talk` |
|
||
| Video | `ai_video_talk` |
|
||
|
||
### 自动导入
|
||
|
||
- `unplugin-auto-import`：自动导入 Vue/Router/Pinia API，`.vue` 中无需手动 import
|
||
- `unplugin-vue-components`：自动注册 `src/components/` 下的组件和 Element Plus 组件
|
||
- Element Plus 图标通过 `unplugin-icons` 按需加载
|
||
|
||
### 环境变量
|
||
|
||
`VITE_API_BASE_URL` 定义主 API 地址（含 `/api` 后缀）。请求拦截器根据 URL 前缀自动切换后端服务：
|
||
|
||
| 前缀 | 用途 |
|
||
|------|------|
|
||
| `/pay` | 支付服务 |
|
||
| `/api`（默认） | 主服务（含任务创建 `/api/v1/tasks`） |
|
||
|
||
新增的 `/suanli` 接口使用 `VITE_API_BASE_URL` 去掉 `/api` 后缀作为基础 URL。
|
||
|
||
### 路由守卫
|
||
|
||
`src/router/index.js` 的 `beforeEach` 守卫检查 token 存在性和有效性（调用 `/auth/check/token`），无效则跳转 `/login`。支持通过 URL query `?token=xxx` 传入 token。
|
||
|
||
### Authorization 头
|
||
|
||
- 通过 axios 的请求（auth/display 等）：拦截器自动加 `Bearer` 前缀
|
||
- 通过 fetch 的请求（任务创建/轮询/模型列表）：直接传 token，**不加** `Bearer` 前缀
|