# CLAUDE.md

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

## Project Overview

This is a **PDA (Personal Digital Assistant) web application** for LanBao MES (Manufacturing Execution System). It's built as an ASP.NET Web Forms application targeting .NET Framework 4.8, designed for mobile/PDA devices used in manufacturing environments.

The application handles various manufacturing operations including:
- Material receiving/shipping (收货/发货)
- Production reporting (生产报工)
- Quality control inspections (质量检验)
- Barcode scanning and printing with thermal printers
- Inventory management (在库分料, 库位变更)
- Purchase/sales operations (采购退货, 销售出库)

## Architecture & Technology Stack

### Backend
- **ASP.NET Web Forms** (.NET Framework 4.8)
- **Master Page**: `Mst.master` at root - provides common layout, script references, and Vue.js initialization
- **Code-behind**: C# utility classes in `App_Code/` (e.g., `Utility.cs` for HTTP requests and authentication)
- **Configuration**: `Web.config` for compilation settings, `Scripts/config.js` for API endpoints and global Vue extensions

### Frontend
- **Vue.js 2.x** - primary frontend framework (loaded from `/Scripts/vue.min.js`)
- **Vant UI** - mobile-first component library for Vue (loaded from `/scripts/vant/`)
- **Axios 0.25.0** - HTTP client for API calls
- **lib-flexible** - responsive layout adaptation for different mobile screen sizes
- **js.cookie** - Cookie management library
- **uni.webview** - Bridge for native mobile app integration (printing, scanning)

### API Integration
- **Primary API**: Configurable in `Scripts/config.js` as `APIURL` (default: `http://192.168.0.51:8083/api/`)
- **PC Backend**: Separate API as `APIURL_PC` (default: `http://192.168.0.51:8081/`)
- **Authentication**: Cookie-based with `loginGuid` (user GUID) and `loginAccount` (username)
- **HTTP wrapper**: `Vue.prototype.AxiosHttp(method, url, params, isToken, isPC)` for standardized API calls
  - `isToken`: defaults to true, adds `loginGuid` as token header
  - `isPC`: 0 for PDA API, 1 for PC API

## Directory Structure

```
/H5/                    - Main application pages (.aspx files)
/H5/Js/                 - Page-specific JavaScript/Vue.js files
/Scripts/               - Shared JavaScript libraries and config
/Images/                - Static assets and CSS
/App_Code/              - Server-side utility classes
/audio/                 - Sound files for success/error feedback
```

## Development Workflow

### Building & Running
- **Solution**: Open `GsPdaApp.sln` in Visual Studio 2017 or later
- **Debug mode**: Set in `Web.config` (`<compilation debug="true" targetFramework="4.8">`)
- **Local server**: Uses IIS Express (development server)
- **Build**: Standard ASP.NET Web Forms compilation (F5 to build and run)
- **No separate build commands** - Visual Studio handles compilation automatically

### Key Configuration Files
- **`Web.config`** - ASP.NET compilation settings, assembly references
- **`Scripts/config.js`** - API base URLs (`APIURL`, `APIURL_PC`), global Vue.js extensions and prototypes
- **`Mst.master`** - Master page template with common scripts (Vue, Vant, Axios, flexible.js)
- **Cache busting**: Query strings used in master page (e.g., `config.js?<%=123611131 %>`) to force browser refresh

### Code Conventions
- **Three-file pattern**: Each feature has `.aspx` (markup), `.aspx.cs` (code-behind), and `.js` (Vue.js logic)
  - Example: `H5/BarCf.aspx` + `H5/BarCf.aspx.cs` + `H5/Js/BarCf.js`
- **Vue instances**: Always named `vm`, mounted to `#app` element in `Mst.master`
- **API calls**: Use `this.AxiosHttp(method, url, params, isToken, isPC)` - never use Axios directly
- **Authentication**:
  - Call `this.CHECKLOGIN()` in `mounted()` to verify session
  - Use `this.GetLoginInfor()` to retrieve `loginGuid` and `loginAccount` from cookies
- **Navigation**: Use `this.GoBack()` which redirects to `/H5/Default.aspx` with user context
- **Focus management**: Use `v-focus.noKeyboard` directive to focus inputs without triggering mobile keyboard
- **Number input sanitization**: Use `.replace(/[^\d.]/g, '')` pattern for decimal inputs

## Common Development Patterns

### Page Structure Template
```javascript
var vm = new Vue({
    el: '#app',
    data: function() {
        return {
            isLoading: false,
            userInfo: {
                loginGuid: '',
                loginAccount: '',
            },
            formData: {
                barcode: "",
                // other form fields
            }
        }
    },
    mounted() {
        var that = this;
        // Always authenticate first
        this.userInfo = {
            loginGuid: this.GetLoginInfor().loginGuid,
            loginAccount: this.GetLoginInfor().loginAccount,
        };
        // Load initial data
    },
    methods: {
        // Custom methods
    }
});
```

### API Integration Pattern
```javascript
// Standard API call - response format: { status: 0, message: "", data: { tbBillList: {} } }
that.isLoading = true;
that.AxiosHttp('post', 'endpoint/action', {
    param1: value1,
    param2: value2
}, false)  // isToken=false for login, true for authenticated calls
.then(function(res) {
    var json = res;
    if (json.status == 0) {  // Success - note: status is integer 0, not boolean
        // Process data
        var data = json.data.tbBillList;
        that.$playSound('success');
        that.$notify({ type: 'success', message: json.message });
    } else {
        that.$toast.fail(json.message);
        that.$playSound('error');
    }
    that.isLoading = false;
})
.catch(function(error) {
    that.isLoading = false;
    that.$toast.fail("网络错误，请重试！");
    console.log(error);
});
```

### Audio Feedback
- Success operations: `this.$playSound('success')` (plays `/audio/YES.wav`)
- Error operations: `this.$playSound('error')` (plays `/audio/NO.wav`)
- Audio playback is try-catch wrapped to handle failures gracefully

### Barcode Scanning & Input Focus
```javascript
// Typical barcode input field with auto-focus
<van-field
    ref="barcode"
    v-model="formData.barcode"
    label="物料条码"
    v-focus.noKeyboard
    @keyup.enter.native="getScan"
></van-field>

// After processing, refocus and clear
that.$refs.barcode.focus();
that.formData.barcode = null;
```

### Printing Integration
- Uses `uni.webView.postMessage()` to send print commands to native wrapper app
- Print templates defined in `Vue.prototype.sendPrintMessage` in `Scripts/config.js`
- Supports thermal printers with custom TSPL commands
- Print data format includes barcode, QR codes, item details, timestamps
- Printer IP/Port configured per-function via API response (`tbBillList.printInfo`)

## Authentication & Session Management
- **Login endpoint**: `login/login` (POST with `userID` and `userPass`)
- **Session storage**: Cookies managed by `js.cookie` library
  - `loginGuid` - User GUID (used as API token)
  - `loginAccount` - Username
  - `loginName` - User display name
  - `orgId`, `orgNo`, `orgName` - Organization information
  - `passwd`, `rememberPwd` - Optional password persistence
- **Session validation**:
  - `CHECKLOGIN()` - Redirects to `/UserLogin.aspx` if not authenticated
  - `GetLoginInfor()` - Returns login object or redirects if invalid
- **Token header**: Automatically added to API calls as `token: loginGuid` when `isToken=true`

## Mobile Optimization & UX
- **Viewport**: `user-scalable=no` prevents zoom, optimized for industrial PDA devices
- **Responsive layout**: lib-flexible adapts to different screen DPIs
- **Input handling**:
  - `v-focus.noKeyboard` directive focuses without triggering soft keyboard
  - `.replace(/[^\d.]/g, '')` for numeric input sanitization
- **Loading states**: Global `comLoading` component triggered by `isLoading` flag
- **Navigation**: Standardized `GoBack()` preserves user context and tab index
- **Vant components**: Optimized for touch (van-button, van-field, van-nav-bar, van-notice-bar, van-toast)