# 移动端适配 - 快速开始

## 🚀 快速安装

### 1. 安装依赖

```bash
cd mes-ui
npm install
```

这会自动安装新添加的 Vant UI 组件库和相关依赖。

### 2. 启动开发服务器

```bash
npm run dev
```

### 3. 访问测试

**PC端测试**:
- 直接在浏览器访问: http://localhost:80

**移动端测试**:
- 方法一：Chrome开发者工具
  1. 按 F12 打开开发者工具
  2. 点击设备切换按钮（或按 Ctrl+Shift+M）
  3. 选择移动设备（如 iPhone 12）
  4. 刷新页面

- 方法二：真机测试
  1. 确保手机和电脑在同一局域网
  2. 在手机浏览器访问: http://你的电脑IP:80

## ✅ 已完成功能

### 基础架构
- ✅ 设备自动检测（PC/移动端）
- ✅ 登录后自动跳转到对应界面
- ✅ 路由自动保护（防止设备类型不匹配）
- ✅ 移动端布局（顶部导航栏 + 底部标签栏）

### 工单模块
- ✅ 移动端首页（快捷入口、待办事项、数据统计）
- ✅ 工单列表（搜索、筛选、下拉刷新、上拉加载）
- ✅ 工单详情（基本信息、报工排产、领料记录）
- ✅ 工单卡片组件

### 占位页面
- ✅ 报工列表
- ✅ 报工表单
- ✅ 领料管理
- ✅ 个人中心

## 📱 移动端路由

| 路径 | 页面 | 状态 |
|------|------|------|
| `/mobile/home` | 首页 | ✅ 已完成 |
| `/mobile/workOrder` | 工单列表 | ✅ 已完成 |
| `/mobile/workOrder/detail/:id` | 工单详情 | ✅ 已完成 |
| `/mobile/workOrder/pickManage/:workOrderId` | 领料管理 | 🔲 待开发 |
| `/mobile/report` | 报工列表 | 🔲 待开发 |
| `/mobile/report/add/:workOrderEntryId` | 报工表单 | 🔲 待开发 |
| `/mobile/profile` | 个人中心 | ✅ 已完成 |

## 🎯 测试步骤

### 1. 测试设备检测

1. 使用PC浏览器登录系统
2. 应该自动跳转到PC端首页 `/index`
3. 切换到移动设备模式（F12 → 设备切换）
4. 刷新页面并重新登录
5. 应该自动跳转到移动端首页 `/mobile/home`

### 2. 测试移动端首页

- 查看用户信息卡片
- 点击快捷入口（工单列表、生产报工等）
- 查看待办事项
- 查看今日数据统计

### 3. 测试工单列表

- 下拉刷新列表
- 上拉加载更多
- 搜索工单（输入工单编号或产品名称）
- 筛选工单（按状态、客户名称）
- 点击工单卡片进入详情

### 4. 测试工单详情

- 查看基本信息
- 切换标签页（报工排产、领料记录）
- 点击底部操作按钮（生产报工、工单领料）

### 5. 测试底部导航

- 点击底部标签栏切换页面
- 首页、工单、报工、我的

## 🔧 开发说明

### 文件结构

```
mes-ui/src/
├── views/mobile/          # 移动端页面
├── router/mobile.js       # 移动端路由
├── utils/device.js        # 设备检测工具
└── api/                   # API接口（PC和移动端共用）
```

### 添加新页面

1. 在 `src/views/mobile/` 创建页面组件
2. 在 `src/router/mobile.js` 添加路由
3. 使用 Vant 组件开发UI

### API调用

移动端直接复用PC端API：

```javascript
import { listWorkOrder } from '@/api/mes/production/workOrder'

// 调用API
const response = await listWorkOrder({ pageNum: 1, pageSize: 10 })
```

## ⚠️ 注意事项

1. **依赖安装**: 首次运行前必须执行 `npm install`
2. **端口冲突**: 如果80端口被占用，修改 `vue.config.js` 中的端口
3. **后端API**: 确保后端服务已启动（默认 http://localhost:8080）
4. **浏览器兼容**: 建议使用 Chrome 浏览器测试

## 📝 下一步开发

1. 完善报工表单页面
2. 完善领料管理页面
3. 添加工单状态操作功能
4. 添加其他业务模块

## 🐛 常见问题

### Q: npm install 失败？
A: 尝试清除缓存后重新安装：
```bash
npm cache clean --force
npm install
```

### Q: 移动端页面显示不正常？
A: 检查是否正确安装了 Vant 依赖，查看浏览器控制台是否有错误。

### Q: 登录后没有自动跳转？
A: 检查 `src/utils/device.js` 和 `src/permission.js` 是否正确创建。

## 📞 技术支持

如有问题，请查看详细文档：`MOBILE_ADAPTATION.md`