补充代码

tjx

2025-10-17 9a3e0b4d2e539bb16f42835c2df55e5c9f2f8e29

 CLAUDE.md

@@ -4,35 +4,39 @@

## Project Overview

This is a **PDA (Personal Digital Assistant) web application** for the LongWei 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.
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 (收货/发货)  
- Material receiving/shipping (收货/发货)
- Production reporting (生产报工)
- Quality control inspections (质量检验)
- Barcode scanning and printing
- Bluetooth device integration
- 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` - provides common layout and references
- **Code-behind**: C# files in `App_Code/` (e.g., `Utility.cs`)
- **Configuration**: `Web.config` for app settings, `Scripts/config.js` for API endpoints
- **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
- **Vant UI** - mobile UI component library for Vue
- **Axios** - HTTP client for API calls
- **Flexible.js** - mobile responsive layout
- **Custom components**: Navigation, loading, back button functionality
- **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` (currently `localhost:5204/api/`)
- **PC Backend**: Separate API for PC-related operations (`192.168.0.51:8081/`)
- **Authentication**: Cookie-based with `loginGuid` and `loginAccount`
- **HTTP wrapper**: `Vue.prototype.AxiosHttp` for standardized API calls
- **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

@@ -48,23 +52,29 @@
## Development Workflow

### Building & Running
- **Development**: Open `GsPdaApp.sln` in Visual Studio
- **Debug mode**: Set in `Web.config` (`debug="true"`)
- **Local server**: Uses IIS Express (typically port 51933)
- **No build scripts**: Standard ASP.NET Web Forms compilation
- **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` - Server configuration, compilation settings
- `Scripts/config.js` - API endpoints, global Vue.js extensions
- `Mst.master` - Common page layout and script references
- **`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
- **Page structure**: Each `.aspx` page has corresponding `.aspx.cs` (C#) and `.js` (Vue.js) files
- **Vue instances**: Named `vm`, mounted to `#app` element
- **API calls**: Use `this.AxiosHttp(method, url, params)` wrapper
- **Authentication**: Check with `this.CHECKLOGIN()` or `this.GetLoginInfor()`
- **Navigation**: Use `this.GoBack()` for consistent back navigation
- **Styling**: Mobile-first with Vant UI components, custom CSS in `/Images/Style.css`
- **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

@@ -75,56 +85,106 @@
    data: function() {
        return {
            isLoading: false,
            // page-specific data
            userInfo: {
                loginGuid: '',
                loginAccount: '',
            },
            formData: {
                barcode: "",
                // other form fields
            }
        }
    },
    mounted() {
        this.CHECKLOGIN(); // Verify user authentication
        // initialization logic
        var that = this;
        // Always authenticate first
        this.userInfo = {
            loginGuid: this.GetLoginInfor().loginGuid,
            loginAccount: this.GetLoginInfor().loginAccount,
        };
        // Load initial data
    },
    methods: {
        // page-specific methods
        // Custom methods
    }
});
```

### API Integration
### API Integration Pattern
```javascript
// Standard API call pattern
this.AxiosHttp('get', 'endpoint', params).then(res => {
    if (res.success) {
        // handle success
        this.$playSound('success');
// 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 {
        // handle error  
        this.$playSound('error');
        this.$toast.fail(res.message);
        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/OK.wav`)
- Error operations: `this.$playSound('error')` (plays `/audio/NG.wav`)
- 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/Printing Integration
- Printing functionality integrated via `uni.webView.postMessage()`
- Print templates defined in `Vue.prototype.sendPrintMessage`
- Barcode scanning integrated with mobile hardware
### 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>

## Bluetooth Integration
- Located in `/H5/Bluetooth/` directory  
- Configuration via `BluetoothConfig.xml`
- MAC address management through dedicated pages
// 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 page**: `/UserLogin.aspx`  
- **Session storage**: Browser cookies (`loginGuid`, `loginAccount`)
- **Auto-redirect**: Unauthenticated users redirected to login
- **Session validation**: `CHECKLOGIN()` method on each page
- **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
- **Viewport**: Configured for mobile devices, no user scaling
- **Responsive**: Uses lib-flexible for different screen sizes  
- **Touch-friendly**: Vant UI components optimized for touch
- **Performance**: Minimized resource loading, efficient Vue.js patterns
## 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)