airport-qingdao-vue3/CLAUDE.md

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

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

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