MES/yawei-mes/mes-ui/MOBILE_ADAPTATION.md

# 移动端适配说明文档

## 概述

本项目已完成移动端适配的基础架构搭建，支持PC端和移动端自动识别和路由跳转。

## 技术栈

- **UI组件库**: Vant 2.12.54 (移动端) + Element UI 2.15.12 (PC端)
- **框架**: Vue 2.6.12
- **路由**: Vue Router 3.4.9
- **状态管理**: Vuex 3.6.0

## 目录结构

```
mes-ui/src/
├── views/
│   ├── mobile/                          # 移动端页面目录
│   │   ├── layout/                      # 移动端布局
│   │   │   ├── MobileLayout.vue        # 主布局
│   │   │   └── components/
│   │   │       ├── MobileNavBar.vue    # 顶部导航栏
│   │   │       └── MobileTabBar.vue    # 底部标签栏
│   │   ├── home/                        # 首页
│   │   │   └── index.vue
│   │   ├── workOrder/                   # 工单模块
│   │   │   ├── list.vue                # 工单列表
│   │   │   ├── detail.vue              # 工单详情
│   │   │   └── pickManage.vue          # 领料管理
│   │   ├── report/                      # 报工模块
│   │   │   ├── list.vue                # 报工列表
│   │   │   └── form.vue                # 报工表单
│   │   ├── profile/                     # 个人中心
│   │   │   └── index.vue
│   │   └── components/                  # 移动端公共组件
│   │       └── MobileWorkOrderCard.vue # 工单卡片
│   └── mes/                             # PC端页面（原有）
├── router/
│   ├── index.js                         # 主路由
│   └── mobile.js                        # 移动端路由模块
├── utils/
│   └── device.js                        # 设备检测工具
└── api/                                 # API接口（PC和移动端共用）
```

## 核心功能

### 1. 设备自动检测

系统会自动检测用户设备类型（PC或移动端），并在登录后自动跳转到对应界面。

**检测规则**:
- User Agent 包含移动设备标识
- 或屏幕宽度 <= 768px

**实现文件**: `src/utils/device.js`

### 2. 路由自动保护

路由守卫会自动检查设备类型和访问路径是否匹配：
- 移动设备访问PC页面 → 自动重定向到移动端首页
- PC设备访问移动页面 → 自动重定向到PC端首页

**实现文件**: `src/permission.js`

### 3. 登录后自动跳转

用户登录成功后，系统会根据设备类型自动跳转：
- 移动设备 → `/mobile/home`
- PC设备 → `/index`

**实现文件**: `src/views/login.vue`

## 移动端路由

所有移动端路由以 `/mobile` 开头：

| 路径 | 页面 | 显示TabBar |
|------|------|-----------|
| `/mobile/home` | 首页 | 是 |
| `/mobile/workOrder` | 工单列表 | 是 |
| `/mobile/workOrder/detail/:id` | 工单详情 | 否 |
| `/mobile/workOrder/pickManage/:workOrderId` | 领料管理 | 否 |
| `/mobile/report` | 报工列表 | 是 |
| `/mobile/report/add/:workOrderEntryId` | 报工表单 | 否 |
| `/mobile/report/add/continuous/:workOrderId` | 连续制造报工 | 否 |
| `/mobile/profile` | 个人中心 | 是 |

## 已完成功能

### ✅ 第一阶段：基础架构
1. 添加 Vant UI 组件库依赖
2. 配置 Babel 支持 Vant 按需引入
3. 创建设备检测工具
4. 创建移动端路由模块
5. 创建移动端布局组件（顶部导航栏 + 底部标签栏）
6. 修改登录逻辑支持设备检测
7. 修改路由守卫支持设备类型保护

### ✅ 第二阶段：工单模块
1. 移动端首页（快捷入口、待办事项、数据统计）
2. 工单列表页面（搜索、筛选、下拉刷新、上拉加载）
3. 工单卡片组件
4. 工单详情页面（基本信息、报工排产、领料记录）
5. 占位页面（报工列表、报工表单、领料管理、个人中心）

## 待开发功能

### 🔲 第三阶段：完善工单模块
- 报工表单页面
- 领料管理页面
- 工单状态操作（开始、暂停、关闭）

### 🔲 第四阶段：其他模块
- 仓库模块
- 质检模块
- 设备模块
- 其他业务模块...

## 安装和运行

### 1. 安装依赖

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

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

```bash
npm run dev
```

### 3. 访问地址

- PC端: http://localhost:80
- 移动端: 使用手机浏览器访问或使用浏览器开发者工具切换到移动设备模式

### 4. 测试移动端

**方法一：使用浏览器开发者工具**
1. 打开 Chrome 浏览器
2. 按 F12 打开开发者工具
3. 点击设备切换按钮（或按 Ctrl+Shift+M）
4. 选择移动设备型号（如 iPhone 12）
5. 刷新页面

**方法二：使用真机测试**
1. 确保手机和电脑在同一局域网
2. 获取电脑IP地址（如 192.168.1.100）
3. 在手机浏览器访问 http://192.168.1.100:80

## API接口复用

移动端和PC端共用相同的后端API接口，无需修改后端代码。

**示例**:
```javascript
// PC端和移动端都使用相同的API
import { listWorkOrder, getWorkOrder } from '@/api/mes/production/workOrder'

// 获取工单列表
listWorkOrder({ pageNum: 1, pageSize: 10 })

// 获取工单详情
getWorkOrder(workOrderId)
```

## 开发指南

### 添加新的移动端页面

1. 在 `src/views/mobile/` 下创建页面组件
2. 在 `src/router/mobile.js` 中添加路由配置
3. 根据需要设置 `meta.showTabBar` 控制是否显示底部标签栏

**示例**:
```javascript
// src/router/mobile.js
{
  path: 'newPage',
  component: () => import('@/views/mobile/newModule/newPage'),
  name: 'MobileNewPage',
  meta: { 
    title: '新页面', 
    showTabBar: false,  // 不显示底部标签栏
    requiresAuth: true 
  }
}
```

### 使用 Vant 组件

Vant 组件已配置按需引入，直接在组件中导入使用即可：

```vue
<script>
import { Button, Cell, Toast } from 'vant'

export default {
  components: {
    [Button.name]: Button,
    [Cell.name]: Cell
  },
  methods: {
    showToast() {
      Toast('提示信息')
    }
  }
}
</script>
```

### 调用API接口

移动端直接复用PC端的API接口：

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

export default {
  methods: {
    async loadData() {
      try {
        const response = await listWorkOrder(this.queryParams)
        this.list = response.rows
      } catch (error) {
        this.$toast.fail('加载失败')
      }
    }
  }
}
```

## 注意事项

1. **样式隔离**: 移动端页面使用 Vant 组件，PC端页面使用 Element UI，两者样式互不影响
2. **路由命名**: 移动端路由名称建议以 `Mobile` 开头，便于区分
3. **响应式设计**: 移动端页面应适配 320px - 768px 宽度的设备
4. **触摸优化**: 确保可点击元素最小尺寸为 44px × 44px
5. **性能优化**: 使用虚拟滚动、图片懒加载等技术优化性能

## 常见问题

### Q: 如何手动切换PC/移动模式？

A: 可以使用设备检测工具手动设置：
```javascript
import { setDeviceType } from '@/utils/device'

// 切换到移动模式
setDeviceType('mobile')
location.reload()

// 切换到PC模式
setDeviceType('pc')
location.reload()
```

### Q: 移动端页面如何访问Vuex状态？

A: 移动端和PC端共用同一个Vuex store，直接访问即可：
```javascript
computed: {
  userName() {
    return this.$store.state.user.name
  }
}
```

### Q: 如何调试移动端页面？

A: 
1. 使用Chrome开发者工具的设备模拟功能
2. 使用真机 + Chrome远程调试
3. 使用 vconsole 在移动端显示控制台

## 更新日志

### 2026-03-07
- ✅ 完成移动端基础架构搭建
- ✅ 完成设备自动检测和路由保护
- ✅ 完成移动端布局组件（导航栏 + 标签栏）
- ✅ 完成移动端首页
- ✅ 完成工单列表和详情页面
- ✅ 完成工单卡片组件

## 联系方式

如有问题，请联系开发团队。