# 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。