# 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 mobile application for quality control (QC) and warehouse management in a MES (Manufacturing Execution System) environment. The app is specifically designed for PDA devices and supports both Android and iOS platforms. **App Details:** - Name: GS-MES-AP (广深科技 MES Application) - Framework: uni-app with Vue 2 - Version: 1.1.1.4 - Company: 广深科技 (Guangshen Technology) ## Architecture ### Core Structure - **Frontend Framework**: Vue 2 with uni-app cross-platform framework - **State Management**: Vuex store for application state - **Routing**: uni-app page-based routing defined in `pages.json` - **Entry Point**: `main.js` - contains global configurations, prototypes, and app initialization ### Key Directories - `pages/` - All application pages organized by functionality: - `BasePages/` - Core app pages (login, main, user, messages) - `QC/` - Quality control modules (XJ-巡检, SJ-首检, RKJ-入库检, LLJ-来料检) - `Warehouse/` - Warehouse management (inventory, purchases, returns) - `Test/` - Testing and development pages - `Allocation/` - Transfer operations (in/out) - `components/` - Reusable UI components and third-party components - `static/` - Static assets (images, CSS, audio files) - `store/` - Vuex state management - `common/` - Shared utilities and mixins - `utils/` - Utility functions ### Main Functionality Areas 1. **Quality Control (QC)**: - 巡检 (XJ) - Patrol Inspection - 首检 (SJ) - First Article Inspection - 入库检 (RKJ) - Incoming Inspection - 来料检 (LLJ) - Material Inspection 2. **Warehouse Management**: - Purchase inventory management - Material receipt and returns - Location changes and transfers - Barcode printing and scanning 3. **User Management**: - Login/logout functionality - User profile and settings - Message center for notifications ## Development Environment This is a uni-app project with no traditional package.json build scripts. Development and building should be done through: 1. **HBuilderX IDE** (recommended uni-app development environment) 2. **uni-app CLI** if using command line ### Build Commands Since this is a uni-app project without npm scripts, use: - Development: Open project in HBuilderX and use built-in dev server - Build for production: Use HBuilderX build tools or uni-app CLI - No traditional lint/test commands found in the codebase ### Key Configuration Files - `manifest.json` - App configuration, permissions, and platform settings - `pages.json` - Page routing and navigation configuration - `uni.scss` - Global SCSS variables - `App.vue` - Root component with global styles ### Development Workflow 1. **Project Setup**: Open the project in HBuilderX IDE 2. **Development**: Use HBuilderX's built-in development server for hot reload 3. **Building**: Use HBuilderX's build tools to generate platform-specific builds 4. **Testing**: Manual testing on real devices or emulators (no automated test suite) ## API and Data Flow ### Server Configuration Server endpoints are configured in `store/index.js`: - Local development: `http://localhost:10054/api` - Internal network: `http://192.168.11.251:10054` - Current active API: `http://localhost:10054/api` (configured in `serverAPI`) ### Network Environment Switching The app supports switching between internal and external network environments via the `networkFlag` state in the Vuex store. ### Request Methods Global request methods available on Vue prototype: - `this.$get()` - GET requests with loading indicators - `this.$post()` - POST requests with loading indicators - `this.$postSyncPost()` - Synchronous POST requests - `this.$toERP()` - ERP system requests - `this.$uni_request()` - Core request wrapper - `this.$uni_requestNew()` - Alternative request method - `this.$sendPostRequest()` - Wrapper for ERP POST requests ### Global Utility Methods Additional utility methods available on Vue prototype: - `this.$camera()` - Camera and image selection functionality - `this.$fileUpload()` - File upload with base64 encoding - `this.$getDate()` - Date formatting utility - `this.$getUrlParams()` - URL parameter extraction - `this.$showMessage()` - Toast notification display - `this.$showDialog()` - Modal dialog display - `this.$setTitle()` - Navigation title setting - `this.$getUserMenu()` - User menu retrieval ### Authentication User authentication managed through: - Login info stored in `this.$loginInfo` prototype - User data persisted in uni.storage - Forced login required (`forcedLogin: true`) - Global authentication check via `globalMixin.js` (currently commented out) - Session management with `this.$login()` and `this.$logout()` methods ## Mobile-Specific Features ### Hardware Integration - **Camera**: Photo capture for QC inspections (configured in `manifest.json`) - **Barcode Scanner**: For inventory and QC operations (Barcode module enabled) - **Printer**: Bluetooth printing for labels and barcodes (via `kk-printer` component) - **Audio**: Sound notifications for OK/NG status (located in `static/audio/`) ### Device Permissions Configured in `manifest.json` for Android: - Camera access for photo capture - Storage access for file operations - Network access for API communications - Bluetooth for printer connectivity ### Platform Support - Android permissions configured in `manifest.json` - iOS configuration included - Cross-platform compatibility via uni-app ## Common Patterns ### Page Navigation Pages use uni-app navigation with parameters passed via URL query strings. Use `this.$getUrlParams(url)` to extract parameters. ### Data Validation QC modules include image upload functionality for inspection records with base64 encoding. ### State Management Vuex store maintains server configuration and app state. Network settings can be switched between internal/external environments. ### Error Handling Global error handling through unified request methods with toast notifications for user feedback. ### Component Organization - **Third-party Components**: Located in `components/` directory - `kk-printer` - Bluetooth printer integration - `uni-*` - Official uni-app UI components - `mpvue-*` - Vue-based utility components - **Custom Components**: Project-specific components in `components/` - `page-head` and `page-foot` - Layout components - `product.vue` - Product display component ### Code Style and Conventions - Vue 2 syntax with Options API - Chinese comments and variable names for business logic - Prototype-based method attachment for global utilities - Base64 encoding for image uploads - Toast notifications for user feedback - Modal dialogs for confirmations ### File Structure Conventions - QC pages follow pattern: `List.vue` → `Add.vue` → `detail.vue` → `ImageItem.vue` - Each QC module (XJ, SJ, RKJ, LLJ) has identical structure - Warehouse operations follow similar patterns - Test pages in `Test/` directory for development