shenlu/MES

Fork 0

Files

hhh aed67ce1fd 初始代码

2026-04-02 10:39:03 +08:00

7.8 KiB

Raw Blame History

移动端适配说明文档

概述

本项目已完成移动端适配的基础架构搭建，支持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`	个人中心	是

已完成功能

✅ 第一阶段：基础架构

添加 Vant UI 组件库依赖
配置 Babel 支持 Vant 按需引入
创建设备检测工具
创建移动端路由模块
创建移动端布局组件（顶部导航栏 + 底部标签栏）
修改登录逻辑支持设备检测
修改路由守卫支持设备类型保护

✅ 第二阶段：工单模块

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

待开发功能

🔲 第三阶段：完善工单模块

报工表单页面
领料管理页面
工单状态操作（开始、暂停、关闭）

🔲 第四阶段：其他模块

仓库模块
质检模块
设备模块
其他业务模块...

安装和运行

1. 安装依赖

cd mes-ui
npm install

2. 启动开发服务器

npm run dev

3. 访问地址

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

4. 测试移动端

方法一：使用浏览器开发者工具

打开 Chrome 浏览器
按 F12 打开开发者工具
点击设备切换按钮（或按 Ctrl+Shift+M）
选择移动设备型号（如 iPhone 12）
刷新页面

方法二：使用真机测试

确保手机和电脑在同一局域网
获取电脑IP地址（如 192.168.1.100）
在手机浏览器访问 http://192.168.1.100:80

API接口复用

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

示例:

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

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

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

开发指南

添加新的移动端页面

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

示例:

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

使用 Vant 组件

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

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

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

调用API接口

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

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('加载失败')
      }
    }
  }
}

注意事项

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

常见问题

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

A: 可以使用设备检测工具手动设置：

import { setDeviceType } from '@/utils/device'

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

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

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

A: 移动端和PC端共用同一个Vuex store，直接访问即可：

computed: {
  userName() {
    return this.$store.state.user.name
  }
}

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

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

更新日志

2026-03-07

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

联系方式

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

7.8 KiB Raw Blame History Unescape Escape