WangLeo 72267ab2c9 重构任务提交为 HTTP 接口，替换 WebSocket 方案

- 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 反映新架构

2026-06-01 18:27:11 +08:00

4.2 KiB

Raw Blame History

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

常用命令

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() 解析

核心数据流

用户在 dialogBox 中设置参数（模型、提示词、比例、上传图片等）
点击生成 → dialogBox:handleStart() 组装 data（含 modelId、params、imgs、request）
调用 websocket.js:generate(data, generateData)
generate() 内部先通过 createTask(data) → runninghub.Playload() 构造 RunningHub workflow payload 作为 body
调用 modelApi.getModelId(type, modelName) 从 /suanli/v1/platforms/:code/models 查找模型 UUID（带 localStorage 每日缓存）
POST /api/v1/tasks 提交任务（{ model_id, body, request }），携带 X-Session-Id 用于预扣费
返回 task_id → displayStore.addGeneratingItem() 在前端列表插入"生成中"条目
每 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 前缀

4.2 KiB Raw Blame History Unescape Escape