95 lines
3.1 KiB
Markdown
95 lines
3.1 KiB
Markdown
# CLAUDE.md
|
|
|
|
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
|
|
|
## Development Commands
|
|
|
|
```bash
|
|
# Install dependencies
|
|
pnpm install
|
|
|
|
# Development server with hot reload
|
|
pnpm dev
|
|
|
|
# Build for production
|
|
pnpm build
|
|
|
|
# Type checking
|
|
pnpm type-check
|
|
|
|
# Lint and fix code
|
|
pnpm lint
|
|
|
|
# Format code
|
|
pnpm format
|
|
|
|
# Run unit tests
|
|
pnpm test:unit
|
|
```
|
|
|
|
## Project Architecture
|
|
|
|
This is a **Multi-Agent Coordination Platform** (多智能体协同平台) built with Vue 3, TypeScript, and Vite. The application enables users to create and manage AI agents with specialized roles and coordinate them to complete complex tasks through visual workflows.
|
|
|
|
### Tech Stack
|
|
- **Vue 3** with Composition API and TypeScript
|
|
- **Vite** for build tooling and development
|
|
- **Element Plus** for UI components
|
|
- **Pinia** for state management
|
|
- **Tailwind CSS** for styling
|
|
- **Vue Router** for routing (minimal usage)
|
|
- **JSPlumb** for visual workflow connections
|
|
- **Axios** for API requests with custom interceptors
|
|
|
|
### Key Architecture Components
|
|
|
|
#### State Management (`src/stores/modules/agents.ts`)
|
|
Central store managing:
|
|
- Agent definitions with profiles and icons
|
|
- Task workflow data structures (`IRawStepTask`, `TaskProcess`)
|
|
- Search functionality and current task state
|
|
- Raw plan responses with UUID generation for tasks
|
|
|
|
#### Request Layer (`src/utils/request.ts`)
|
|
Custom Axios wrapper with:
|
|
- Proxy configuration for `/api` -> `http://localhost:8000`
|
|
- Response interceptors for error handling
|
|
- `useRequest` hook for reactive data fetching
|
|
- Integrated Element Plus notifications
|
|
|
|
#### Component Structure
|
|
- **Layout System** (`src/layout/`): Main application layout with Header and Main sections
|
|
- **Task Templates** (`src/layout/components/Main/TaskTemplate/`): Different task types including AgentRepo, TaskSyllabus, and TaskResult
|
|
- **Visual Workflow**: JSPlumb integration for drag-and-drop agent coordination flows
|
|
|
|
#### Icon System
|
|
- SVG icons stored in `src/assets/icons/`
|
|
- Custom `SvgIcon` component with vite-plugin-svg-icons
|
|
- Icon categories include specialist roles (doctor, engineer, researcher, etc.)
|
|
|
|
### Build Configuration
|
|
|
|
#### Vite (`vite.config.ts`)
|
|
- Element Plus auto-import and component resolution
|
|
- SVG icon caching with custom symbol IDs
|
|
- Proxy setup for API requests to backend
|
|
- Path aliases: `@/` maps to `src/`
|
|
|
|
#### Docker Deployment
|
|
- Multi-stage build: Node.js build + Caddy web server
|
|
- API proxy configured via Caddyfile
|
|
- Environment variable support for different deployment modes
|
|
|
|
### Data Models
|
|
Key interfaces for the agent coordination system:
|
|
- `Agent`: Name, Profile, Icon
|
|
- `IRawStepTask`: Individual task steps with agent selection and inputs
|
|
- `TaskProcess`: Action descriptions with important inputs
|
|
- `IRichText`: Template-based content formatting with style support
|
|
|
|
### Development Notes
|
|
- Uses pnpm as package manager (required by package.json)
|
|
- Node version constraint: ^20.19.0 or >=22.12.0
|
|
- Dark theme enabled by default in App.vue
|
|
- Auto-imports configured for Vue APIs
|
|
- No traditional Vue routes - uses component-based navigation |