# CLAUDE.md

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

## 项目概述

这是宝应梦阳WMS前端项目（BOX料箱库版本），基于Vue 3和Element Plus开发的现代化Web管理界面，用于仓库管理系统的操作和监控。

## 开发环境设置

### 基本命令
```bash
# 进入项目目录
cd 202504-Wms-MengYang-box/wms_web_mengyang

# 安装依赖
npm install

# 启动开发服务器
npm run serve

# 构建生产版本
npm run build

# 代码检查和修复
npm run lint
```

### 开发配置
- **开发端口**：12306
- **路由模式**：Hash路由 (`createWebHashHistory`)
- **默认路由**：登录页面 (`/`) -> 主页 (`/home`) -> 库存页面 (`/stock`)
- **代理配置**：Microsoft OAuth认证代理

## 技术栈

### 核心框架
- **Vue 3.2.13** - 前端框架（Composition API）
- **Vue Router 4.0.3** - 路由管理
- **Vuex 4.0.0** - 状态管理
- **Element Plus 2.4.0** - UI组件库

### 主要依赖
- **Axios 1.3.3** - HTTP请求库
- **Moment 2.29.4** - 日期处理
- **XLSX 0.18.5** - Excel文件处理
- **QRCode.vue 3.4.1** - 二维码生成
- **Vue3-print-nb 0.1.4** - 打印功能
- **File-saver 2.0.5** - 文件下载

### 开发工具
- **Sass 1.83.4** - CSS预处理器
- **Vue CLI 5.0** - 构建工具
- **ESLint** - 代码质量检查（已关闭未使用变量警告）

## 项目架构

### 目录结构
```
src/
├── api/           # API接口封装
├── assets/        # 静态资源
├── components/    # 可复用组件
├── constant/      # 常量配置
├── excel/         # Excel上传组件
├── http/          # HTTP请求配置
├── layout/        # 业务页面组件
├── print/         # 打印相关组件
├── router/        # 路由配置
├── store/         # Vuex状态管理
├── styles/        # 全局样式
├── utils/         # 工具函数
└── views/         # 主要视图组件
```

### 核心业务模块

#### 1. 仓库作业 (`layout/`)
**库存管理**
- `stock.vue` - 库存查询和管理
- `inventory.vue` - 库存盘点
- `inventoryRecord.vue` - 盘点记录

**入出库作业**
- `goodsIn.vue` - 入库作业界面
- `goodsOut.vue` - 出库作业界面
- `orderIn.vue` - 入库单管理
- `orderOut.vue` - 出库单管理

**任务监控**
- `taskMonitor.vue` - 任务执行监控
- `pickTaskMonitor.vue` - 拣选任务监控
- `inTaskRecord.vue` - 入库任务记录
- `outTaskRecord.vue` - 出库任务记录

#### 2. 基础数据管理
- `goods.vue` - 物料信息管理
- `locationsTable.vue` - 库位信息管理
- `standSettings.vue` - 站台（库口）设置
- `vehicle.vue` - 料箱监控

#### 3. 配料系统
- `kitting.vue` - 配料作业
- `kittingList.vue` - 配料单管理
- `kittingRelation.vue` - 配料关系配置
- `clcKanban.vue` - 需求看板

#### 4. 系统管理
- `wmsConfigNew.vue` - 系统配置
- `role_user.vue` - 用户角色管理
- `role_permission.vue` - 权限管理
- `wmsLog.vue` - 系统日志

### API接口模块 (`api/`)

**核心业务接口**
- `goods.js` - 物料信息API
- `stock.js` - 库存相关API
- `task.js` - 任务管理API
- `location.js` - 库位管理API

**作业流程接口**
- `orderIn.js` - 入库订单API
- `orderOut.js` - 出库订单API
- `kateWork.js` - 配料作业API

**系统功能接口**
- `login.js` - 登录认证API
- `user.js` - 用户管理API
- `config.js` - 系统配置API
- `excel.js` - Excel处理API

### 公共组件 (`components/`)
- `sideMenu.vue` - 侧边菜单导航
- `appTag.vue` - 标签页管理

### 工具模块 (`utils/`)
- `dateUtils.js` - 日期处理工具
- `formatter.js` - 数据格式化
- `hashUtils.js` - 哈希计算
- `stringUtils.js` - 字符串处理
- `loading.js` - 加载状态管理
- `myMessageBox.js` - 消息提示封装

## 开发注意事项

### 路由配置
- 使用Hash路由模式，兼容性更好
- 实现了路由守卫，未登录用户自动跳转登录页
- 登录状态通过`sessionStorage`中的`user`字段判断

### 状态管理
- 使用Vuex进行全局状态管理
- 主要管理用户信息、菜单权限、标签页状态

### HTTP请求
- 统一使用Axios进行API调用
- 请求封装在`/http/request.js`中
- API接口按业务模块分类组织

### Excel处理
- 支持Excel文件上传和解析
- 专门的Excel上传组件位于`excel/`目录
- 支持多种业务数据的Excel导入导出

### 打印功能
- 使用`vue3-print-nb`实现打印功能
- 打印组件位于`print/`目录

### 样式规范
- 使用Sass预处理器
- 全局样式文件：`styles/index.scss`
- 响应式设计，支持不同屏幕尺寸

## 常见开发任务

### 添加新页面
1. 在`layout/`目录创建Vue组件
2. 在`router/index.js`中配置路由
3. 如需API调用，在`api/`目录创建对应接口文件
4. 更新侧边菜单配置

### Excel上传功能
1. 参考`excel/`目录下的现有组件
2. 使用Element Plus的上传组件
3. 后端API处理Excel数据解析

### 新增API接口
1. 在`api/`目录按模块创建文件
2. 使用`@/http/request`进行请求封装
3. 导出接口函数供组件使用

### 调试和测试
- 使用Vue DevTools检查组件状态
- 浏览器开发者工具调试网络请求
- ESLint检查代码质量
- 在不同浏览器中测试兼容性

## 后端API集成

### 默认后端地址
根据当前配置，后端API地址需要在`http/request.js`中配置，通常为：
- 开发环境：`http://localhost:12315`
- 生产环境：`http://10.18.58.21:12315`

### 认证机制
- 支持Microsoft OAuth认证代理
- 登录状态存储在`sessionStorage`中
- 路由守卫自动验证用户登录状态