# CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

## Project Overview

This is the **青岛机场无人驾驶车辆协同云平台** (Qingdao Airport Autonomous Vehicle Collaborative Cloud Platform), a Vue 3 based web application for managing and monitoring autonomous vehicles at Qingdao Airport. The project uses RuoYi-Vue3 as the base framework.

## Development Commands

```bash
# Install dependencies
npm install

# Development server (runs on port 6580)
npm run dev
# or
yarn dev

# Build for production
npm run build:prod

# Build for staging
npm run build:stage

# Preview production build
npm run preview
```

**Note**: This project does not have configured linting, testing, or type checking scripts. Manual code review and browser testing are the primary quality assurance methods.

## Architecture Overview

### Tech Stack
- **Frontend Framework**: Vue 3.2.45 with Composition API
- **UI Library**: Element Plus 2.2.21
- **State Management**: Pinia 2.0.22
- **Router**: Vue Router 4.1.4
- **Build Tool**: Vite 3.2.3
- **Map Integration**: OpenLayers 6.15.1 with SuperMap iclient-ol
- **Real-time Communication**: WebSocket + STOMP protocol (@stomp/stompjs, sockjs-client)

### Key Features
- **Vehicle Management**: Real-time monitoring and control of autonomous vehicles
- **Map Visualization**: OpenLayers-based mapping with SuperMap integration for airport layouts
- **Real-time Data**: WebSocket connections for live vehicle tracking and status updates
- **System Administration**: User management, role-based permissions, operational logs

### Project Structure

#### Core Directories
- `src/views/platform/` - Main platform dashboard
- `src/views/car/` - Vehicle management interfaces (monitor, park, type)
- `src/components/map/` - OpenLayers map components and controls
- `src/components/car/` - Vehicle-specific UI components
- `src/api/` - API service definitions organized by domain
- `src/utils/websocket.js` - WebSocket service for real-time communication

#### Map System Architecture
The mapping system is built around OpenLayers with these key components:

**Core Map Component**: `src/components/map/OpenLayersMap.vue`
- Initializes map with EPSG:4528 projection for airport coordinates
- Integrates SuperMap tile services for base mapping

**Control Systems**:
- `VehicleAnimationSystem.vue` - Smooth vehicle movement animations with 60FPS engine
- `VehicleMovementControlRefactored.vue` - Enhanced vehicle tracking with motion prediction
- `LayerSwitcher.vue` - Dynamic layer management
- `VehicleStyleManager.vue` - Vehicle appearance and styling

**Real-time Features**:
- Motion prediction algorithms for smooth vehicle transitions
- 300ms timeout handling for connection interruptions  
- Physical engine simulation based on vehicle speed and direction

### WebSocket Integration

The application uses a custom WebSocket service (`src/utils/websocket.js`) for real-time vehicle data:
- Auto-reconnection with configurable intervals
- Event-driven message handling
- Connection state management
- STOMP protocol support for structured messaging

### Development Server Configuration

The Vite development server is configured to:
- Run on port 6580 with auto-open
- Proxy API requests to backend servers:
  - `/dev-api` → `http://10.0.0.126:8080` (田哥 server)
  - Alternative: `http://10.0.0.17:8099` (昊天 server)

### Map Coordinate System

The project uses a custom projection `EPSG:4528` for airport mapping:
```javascript
proj4.defs("EPSG:4528", "+proj=tmerc +lat_0=0 +lon_0=120 +k=1 +x_0=40500000 +y_0=0 +ellps=GRS80 +units=m +no_defs");
```

Center coordinates: `[40507885.133754, 4025694.476392]`

### Component Patterns

**Global Components** (auto-registered):
- `Pagination` - Standardized pagination
- `RightToolbar` - Table operation toolbar
- `FileUpload` / `ImageUpload` - File handling
- `TreeSelect` - Hierarchical selection
- `DictTag` - Dictionary value display

**Route Structure**:
- Static routes defined in `src/router/index.js`
- Dynamic routes based on user permissions
- Layout-based routing with nested components

### Performance Optimizations

**Vehicle Animation System**:
- `requestAnimationFrame` for 60FPS smooth animations
- Distance threshold checks (0.1m) to avoid unnecessary calculations
- Motion history tracking (3 points) for trajectory prediction
- Easing functions for natural movement curves

### Known Issues & TODO
As documented in README.md:
1. Left sidebar menu state not preserved on refresh
2. First-level menu missing background color when second-level menu is selected

### API Backend Integration
- Uses axios for HTTP requests with interceptors
- JWT token authentication via js-cookie
- Centralized error handling and response formatting