79 lines
4.0 KiB
Markdown
79 lines
4.0 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 绘画/视频生成的前端操作平台，通过 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 插件配置（自动导入/组件注册/图标）
|
||
```
|
||
|
||
### 核心数据流
|
||
|
||
1. 用户在 `dialogBox` 中设置参数（模型、提示词、比例、上传图片等）
|
||
2. 点击生成 → `websocket.js:generate()` 被调用
|
||
3. 先通过 `createTask.js` 调用 `config/runninghub` 的 `Playload()` 构造任务数据（从远程 JSON 加载 workflow 配置）
|
||
4. 建立 WebSocket 连接，经过握手协议（`please give me taskId` → `OK! Please continue.`）提交任务
|
||
5. 任务排队中 → `displayStore.addGeneratingItem()` 在前端列表中插入 "生成中" 条目
|
||
6. 完成后 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。
|