71 lines
2.3 KiB
Markdown
71 lines
2.3 KiB
Markdown
|
# CLAUDE.md
|
||
|
|
|
||
|
|
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
||
|
|
|
||
|
|
## 项目概述
|
||
|
|
|
||
|
|
yolo-web-frontend 是一个 Vue 3 Web 前端应用，主要作为 Electron 桌面应用的 UI 层运行，提供 TikTok 自动化管理功能。
|
||
|
|
|
||
|
|
## 常用命令
|
||
|
|
|
||
|
|
```bash
|
||
|
|
npm run dev # 启动开发服务器 (端口 5173)
|
||
|
|
npm run build # 生产环境构建 (输出到 dist/)
|
||
|
|
npm run preview # 预览生产构建
|
||
|
|
```
|
||
|
|
|
||
|
|
## 技术栈
|
||
|
|
|
||
|
|
- **框架**: Vue 3 + Composition API (`<script setup>`)
|
||
|
|
- **构建工具**: Vite 5
|
||
|
|
- **UI 组件库**: Element Plus
|
||
|
|
- **样式**: Tailwind CSS 3 + Less
|
||
|
|
- **状态管理**: Pinia
|
||
|
|
- **路由**: Vue Router 5 (Hash History 模式)
|
||
|
|
- **国际化**: Vue I18n (中/英文)
|
||
|
|
- **HTTP 请求**: Axios
|
||
|
|
- **实时通信**: GoEasy
|
||
|
|
|
||
|
|
## 架构说明
|
||
|
|
|
||
|
|
### 路径别名
|
||
|
|
`@` 映射到 `src/` 目录
|
||
|
|
|
||
|
|
### 目录结构
|
||
|
|
- `src/pages/` - 顶层页面组件 (LoginPage, ConfigPage, UpdateChecker)
|
||
|
|
- `src/views/` - 业务视图页面
|
||
|
|
- `src/views/tk/` - TikTok 相关主视图
|
||
|
|
- `src/views/tk-mini/` - TikTok Mini 程序视图
|
||
|
|
- `src/layout/` - 布局组件 (WorkbenchLayout, TkLayout)
|
||
|
|
- `src/components/` - 可复用组件
|
||
|
|
- `src/components/tk-mini/` - TikTok Mini 专用组件
|
||
|
|
- `src/stores/` - Pinia 状态存储
|
||
|
|
- `src/api/` - API 请求模块
|
||
|
|
- `src/utils/` - 工具函数
|
||
|
|
- `src/locales/` - 国际化翻译文件
|
||
|
|
|
||
|
|
### 应用入口流程
|
||
|
|
1. `main.js` 初始化 Vue 应用，注册 Pinia、Router、I18n、Element Plus
|
||
|
|
2. `App.vue` 作为根组件，管理页面状态 (login → config → browser)
|
||
|
|
3. 在 Electron 环境下会进行强制更新检查
|
||
|
|
|
||
|
|
### Electron 集成
|
||
|
|
应用通过 `window.electronAPI` 与 Electron 主进程通信，主要接口包括：
|
||
|
|
- 视图管理: `showViews()`, `hideViews()`
|
||
|
|
- 自动化控制: `startTikTokAutomation()`, `stopTikTokAutomation()`
|
||
|
|
- 状态同步: `getRotationStatus()`, `getGreetingStats()`
|
||
|
|
- 登录管理: `logout()`, `checkHealth()`
|
||
|
|
|
||
|
|
使用 `src/utils/electronBridge.js` 中的 `isElectron()` 判断运行环境。
|
||
|
|
|
||
|
|
### 本地存储键
|
||
|
|
- `user_data` - 用户登录信息
|
||
|
|
- `autoDm_runConfig` - 自动化运行配置
|
||
|
|
|
||
|
|
## 代码规范
|
||
|
|
|
||
|
|
- Vue 组件使用 `<script setup>` 语法
|
||
|
|
- 组件文件使用 PascalCase 命名
|
||
|
|
- 工具函数使用 camelCase 命名
|
||
|
|
- 样式优先使用 Tailwind CSS 类，复杂样式使用 Less
|