# CLAUDE.md

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

## Project Overview

This is a uni-app based PDA (Personal Digital Assistant) application for factory warehouse and quality inspection management. The app is designed for handheld terminals and supports cross-platform deployment to mobile devices.

**Key Features:**
- Barcode scanning for inventory management
- Quality inspection workflows (incoming, first inspection, warehouse inspection, patrol inspection)
- Warehouse operations (receipt, shipment, allocation, location changes)
- ERP system integration
- Bluetooth printing capabilities
- Message center for operation tracking

## Development Commands

Since this is a uni-app project without a package.json, development is typically done through HBuilderX IDE or uni-app CLI:

### Using HBuilderX IDE (Recommended)
- **Development**: Open project in HBuilderX and run to desired platform
- **Build**: Use HBuilderX's build menu for production builds

### Using uni-app CLI (if available)
```bash
# Install dependencies (if package.json exists)
npm install

# Development
npm run dev:h5         # H5 preview
npm run dev:app        # App preview
npm run dev:mp-weixin  # WeChat Mini Program

# Production builds
npm run build:h5       # Build for H5
npm run build:app      # Build for App
npm run build:mp-weixin # Build for WeChat Mini Program
```

### Testing
- No automated tests are currently configured
- Manual testing should be done on actual PDA devices with barcode scanning capabilities

## Architecture Overview

### Core Technology Stack
- **Framework**: uni-app (Vue.js 2 based cross-platform framework)
- **State Management**: Vuex (store/index.js)
- **UI Components**: Custom components + uni-app built-in components
- **Platform**: Primarily Android PDA devices with barcode scanning
- **Build Tool**: HBuilderX or uni-app CLI

### Key Application Structure

**Main Entry Points:**
- `main.js`: Application bootstrap with global configurations and prototypes
- `App.vue`: Root component
- `pages.json`: Page routing and navigation configuration
- `manifest.json`: App configuration including permissions and platform settings

**Core Directories:**
- `pages/`: All application pages organized by feature
  - `BasePages/`: Authentication, user management, main navigation
  - `QC/`: Quality inspection workflows (LLJ, SJ, RKJ, XJ)
  - `Warehouse/`: Inventory management operations
  - `Allocation/`: Transfer operations
  - `BarcodePrint/`: Barcode printing functionality
- `store/`: Vuex state management
- `utils/`: Utility functions (scanning, messaging, printing)
- `common/`: Global styles, mixins, and utilities
- `components/`: Reusable UI components
- `static/`: Static assets (images, icons, fonts)

### State Management Pattern

The application uses Vuex for state management with a focus on:
- **Server Configuration**: Dynamic server URL management with presets
- **User Authentication**: Login state and user information
- **Global Settings**: App-wide configuration

Key mutations:
- `updateServerAPI(state, url)`: Updates server endpoint and persists to storage
- `addServerPreset(state, preset)`: Adds new server configuration preset

### API Integration Patterns

**HTTP Request Wrapper:**
The app uses custom HTTP wrappers in `main.js`:
- `$post(params)`: Standard POST requests to internal API
- `$get(params)`: Standard GET requests to internal API  
- `$sendPostRequest(params)`: POST requests to external ERP systems
- `$toERP(params)`: Low-level ERP integration requests

**Request Pattern:**
```javascript
// Internal API calls
this.$post({
  url: "/api/endpoint",
  data: requestData,
  showLoading: true
})

// ERP integration calls
this.$sendPostRequest({
  url: "http://erp-server/api/endpoint",
  data: requestData,
  contentType: "application/json"
})
```

### Authentication System

**Login Flow:**
1. User authentication through `pages/BasePages/login.vue`
2. User info stored in global `$loginInfo` object
3. Authentication check via `common/globalMixin.js`
4. Automatic redirect to login if not authenticated

**User Information Storage:**
- Account, username, department stored in uni.getStorageSync()
- Global access through `this.$loginInfo`

### PDA-Specific Features

**Barcode Scanning:**
- Broadcast receiver implementation in `utils/scanCode.js`
- Supports PDA hardware scanning via Android broadcasts
- Intent action: `com.android.server.scannerservice.broadcast`
- Scan trigger: `com.scan.onStartScan`

**Bluetooth Printing:**
- Integrated in `components/kk-printer/`
- Supports Android 11+ with proper permissions
- Print templates in `utils/printTemplate.js`

### Message Center Architecture

**Purpose**: Tracks all operations for audit and error handling
**Implementation**: `utils/messageCenter.js`

**Key Functions:**
- `saveMessage()`: Records operation attempts
- `updateMessage()`: Updates operation status
- Used for ERP integration failure tracking

### Page Architecture Patterns

**List Pages Pattern:**
- Pull-to-refresh and infinite scroll
- Tab-based filtering
- Search functionality
- Status indicators (pending, approved, rejected)

**Detail Pages Pattern:**
- Header information section
- Basic information display
- Material information tables
- Action buttons (scan, submit, audit)

**Form Pages Pattern:**
- Barcode scanning integration
- Real-time validation
- Camera integration for photo uploads
- ERP submission workflows

## Development Guidelines

### Code Conventions
- Use Vue.js 2 syntax
- Follow uni-app component naming conventions
- Maintain consistent page layouts across modules
- Use the established HTTP request patterns
- Always handle loading states with `showLoading`

### UI Design Standards
- **Cross-Platform Compatibility**: Use `<view>` components instead of `<text>` for dynamic content to ensure consistent display across platforms
- **QC Module Consistency**: All quality control modules (LLJ, SJ, XJ, RKJ) follow unified UI patterns:
  - Enhanced table headers with project statistics (total/passed/failed/pending counts)
  - Simple table design for accessibility (inspired by RKJ module)
  - Consistent status indicators and progress tracking
  - Standardized card layouts and responsive design
- **Responsive Design**: Support for both large PDA screens and mobile devices with adaptive layouts
- **Status Indicators**: Use consistent color coding across modules (green for passed, red for failed, orange for pending)

### PDA Development Considerations
- Test on actual PDA hardware with barcode scanning
- Consider small screen sizes and touch interactions
- Ensure proper Android permissions for hardware features
- Test Bluetooth printing with target printer models

### ERP Integration
- Use message center for operation tracking
- Implement proper error handling and retry mechanisms
- Follow established request/response patterns
- Test connectivity with different network conditions

### Security Considerations
- User authentication is required for all operations
- Sensitive data should not be logged or stored insecurely
- Server endpoints are configurable for different environments

## Quality Control (QC) Module Architecture

### Module Structure and Patterns
All QC modules (LLJ, SJ, XJ, RKJ) follow a standardized architecture:

**Page Types:**
- `Add.vue`: Form entry with enhanced statistics table headers
- `List.vue`: Clean card-based listing with search and filter capabilities
- `detail.vue`: Simple table design for inspection records with progress tracking
- `ImageItem.vue`: 100% reusable image management component across all modules

**Key Design Features:**
- **Statistics Headers**: Display project counts (total, passed, failed, pending) in inspection tables
- **Progress Indicators**: Show completion status (e.g., "检验记录 (3/5)") with visual status badges
- **Unified Styling**: Consistent gradients, hover effects, and responsive grid layouts
- **Simple Tables**: User-friendly table design optimized for accessibility and older users

### QC Module Naming Conventions
- **LLJ**: 来料检验 (Incoming Material Inspection)
- **SJ**: 首检 (First Article Inspection)  
- **XJ**: 巡检 (Patrol Inspection)
- **RKJ**: 入库检验 (Warehouse Receipt Inspection)

## Common Development Tasks

### Adding New Pages
1. Create page in appropriate `pages/` subdirectory
2. Add route configuration in `pages.json`
3. Follow existing page architecture patterns (refer to QC modules for standardized layouts)
4. Implement proper authentication checks

### Modifying API Endpoints
1. Update server presets in `store/index.js` if needed
2. Use existing HTTP wrapper methods
3. Implement proper error handling
4. Add message center integration for critical operations

### Working with Hardware Features
1. Barcode scanning: Use `utils/scanCode.js` broadcast system
2. Printing: Use `components/kk-printer/` components
3. Camera: Use `this.$camera()` global method
4. Ensure proper Android permissions in `manifest.json`

### Maintaining QC Module Consistency
1. **UI Updates**: When modifying one QC module, consider applying changes across all four modules
2. **Component Reuse**: Use shared components like `ImageItem.vue` for common functionality
3. **Style Standards**: Follow the established simple table design and statistics header patterns
4. **Cross-Platform Testing**: Always test `<view>` vs `<text>` component usage for platform compatibility

### Testing Strategy
- Manual testing on target PDA devices
- Test barcode scanning with actual hardware
- Verify ERP integration endpoints
- Test network connectivity scenarios
- Validate printing functionality with target printers
- **Cross-Platform UI Testing**: Verify component rendering consistency across H5, Android App, and mini-programs