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 绘画/视频生成的前端操作平台，通过 WebSocket 连接后端和第三方 AI 平台（RunningHub）提交生成任务并接收结果。

关键目录

src/
├── main.js              # 入口：创建 Vue 应用，安装 Pinia/Router/VueVirtualScroller
├── router/index.js       # 路由定义 + token 验证守卫
├── stores/              # Pinia 状态管理
│   ├── user.js          # 用户认证、信息、免费次数
│   ├── display.js       # 生成历史列表、UI 状态（滚动、画布等）
│   └── param.js         # 占位 store（当前为空）
├── apis/                # HTTP API 模块
│   ├── auth/            # 登录/登出/用户信息/验证码
│   └── display/         # 获取历史列表/收藏/删除
├── components/          # 通用组件
│   ├── dialogBox/       # 生成参数输入面板（核心交互入口），含模型选择、比例、上传等子组件
│   ├── virtual-scroller/# 虚拟滚动列表组件（自定义实现）
│   ├── canvas/          # 图片画布编辑（圆/矩形选区，局部重绘）
│   └── ...
├── views/               # 页面
│   ├── home/index.vue   # 主页面容器（dialogBox + display）
│   ├── home/display/    # 历史记录展示区
│   └── login/           # 登录页（跳转外部登录）
├── utils/
│   ├── request.js       # Axios 实例，拦截器处理 token 和不同服务的 baseURL 路由
│   ├── websocket.js     # WebSocket 生成任务的核心流程（心跳、提交流程、结果处理）
│   ├── createTask.js    # 根据配置构造任务 payload
│   ├── modelConfig.js   # 从远程 JSON 加载模型配置，localStorage 每日缓存
│   ├── auth.ts          # token 存取工具（localStorage）
│   └── encrypt.ts       # 加密工具（Base64/MD5/RSA/AES）
├── config/
│   ├── index.js         # 平台配置入口
│   └── runninghub/      # RunningHub 平台适配器：Payload 构造和 Result 解析
└── config/              # 项目根目录下
    └── plugins.js       # Vite 插件配置（自动导入/组件注册/图标）

核心数据流

用户在 dialogBox 中设置参数（模型、提示词、比例、上传图片等）
点击生成 → websocket.js:generate() 被调用
先通过 createTask.js 调用 config/runninghub 的 Playload() 构造任务数据（从远程 JSON 加载 workflow 配置）
建立 WebSocket 连接，经过握手协议（please give me taskId → OK! Please continue.）提交任务
任务排队中 → displayStore.addGeneratingItem() 在前端列表中插入 "生成中" 条目
完成后 WebSocket 关闭（code=1000 reason=success） → getTask() 解析结果 URL → updateItemToSuccess() 更新列表

自动导入

unplugin-auto-import 自动导入 Vue/VRouter/Pinia API，无需在 .vue 文件中手动 import { ref, computed, watch } from 'vue'
unplugin-vue-components 自动注册 src/components/ 下的组件和 Element Plus 组件
Element Plus 图标通过 unplugin-icons 按需加载

环境变量

有两套环境文件。VITE_API_BASE_URL 定义主 API 地址，请求拦截器根据 URL 前缀自动切换不同的后端服务（主服务/支付服务/AIGC 工作流服务）。VITE_API_WORKFLOW_WS 定义 WebSocket 地址。

路由守卫

src/router/index.js 的 beforeEach 守卫检查 token 存在性和有效性（调用 /auth/check/token），无效则跳转 /login。支持通过 URL query ?token=xxx 传入 token。

4.0 KiB Raw Permalink Blame History Unescape Escape