初始代码
This commit is contained in:
292
yawei-mes/mes-ui/MOBILE_ADAPTATION.md
Normal file
292
yawei-mes/mes-ui/MOBILE_ADAPTATION.md
Normal file
@@ -0,0 +1,292 @@
|
||||
# 移动端适配说明文档
|
||||
|
||||
## 概述
|
||||
|
||||
本项目已完成移动端适配的基础架构搭建，支持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
|
||||
- ✅ 完成移动端基础架构搭建
|
||||
- ✅ 完成设备自动检测和路由保护
|
||||
- ✅ 完成移动端布局组件（导航栏 + 标签栏）
|
||||
- ✅ 完成移动端首页
|
||||
- ✅ 完成工单列表和详情页面
|
||||
- ✅ 完成工单卡片组件
|
||||
|
||||
## 联系方式
|
||||
|
||||
如有问题，请联系开发团队。
|
||||
Reference in New Issue
Block a user