dibang-xiaoshou/mobile-h5

移动端 H5 项目

基于 Vue 3 + Vite + Vant 的纯 H5 移动端应用，功能与 Web 端（art-design-pro）完全一致，仅展示形式适配移动端。

技术栈

• 框架: Vue 3
• 构建工具: Vite
• UI 组件库: Vant 4（自动引入）
• 状态管理: Pinia
• 路由: Vue Router
• HTTP 客户端: Axios
• 样式: SCSS
• 日期处理: dayjs

项目结构

mobile-h5/
├── src/
│   ├── api/              # API 接口（与 Web 端共享）
│   ├── assets/           # 静态资源
│   │   ├── img/         # 图片资源（logo、头像、背景图等）
│   │   └── styles/      # 样式文件
│   ├── router/          # 路由配置
│   ├── store/           # 状态管理（与 Web 端共享）
│   │   └── modules/    # Store 模块
│   ├── utils/           # 工具函数（与 Web 端共享）
│   │   └── http/       # HTTP 请求封装
│   ├── views/           # 页面
│   │   ├── login/       # 登录页 ✅
│   │   ├── dashboard/   # 仪表盘 ✅
│   │   ├── plans/       # 计划管理 ✅
│   │   ├── inventory/   # 出入库管理 ✅
│   │   ├── weighing/    # 地磅单管理 ✅
│   │   ├── master-data/ # 基础资料 ✅
│   │   └── user/        # 用户管理 ✅
│   ├── App.vue          # 根组件
│   └── main.ts          # 入口文件
├── index.html
├── package.json
├── vite.config.ts
└── tsconfig.json

资源文件

已复制的资源文件：

• logo-sx.png - Logo
• favicon.ico - 网站图标
• avatar11.png - 默认头像
• sx1.jpg - 登录页背景图

安装依赖

cd mobile-h5
npm install

开发

npm run dev

访问 http://localhost:5174

构建

npm run build

构建产物在 dist 目录。

功能模块

✅ 已完成

1. 登录页面

   • 用户名/密码登录
   • 使用背景图片 sx1.jpg
   • Logo 显示

2. 仪表盘

   • 今日入库/出库统计
   • 功能菜单导航
   • 用户信息显示

3. 计划管理

   • 计划列表（卡片式展示）
   • 新增/编辑计划
   • 查看关联数据
   • 生成出入库单
   • 删除计划
   • 搜索功能

4. 出入库管理

   • 出入库记录列表（卡片式展示）
   • 新增/编辑记录
   • 查看关联数据
   • 生成地磅单
   • 删除记录
   • 搜索功能

5. 地磅单管理

   • 地磅单列表（卡片式展示）
   • 新增/编辑地磅单
   • 毛重/皮重/净重计算
   • 自动填充时间
   • 作废功能
   • 删除功能
   • 搜索功能

6. 基础资料

   • 往来单位管理（标签页）
   • 货物管理（标签页）
   • 新增/编辑/删除功能
   • 搜索功能

7. 用户管理

   • 用户列表（卡片式展示）
   • 新增/编辑用户
   • 删除用户
   • 角色管理（管理员/操作员）

移动端适配特点

布局方式

• 使用卡片式布局替代表格
• 列表使用 van-list 组件支持下拉加载
• 表单使用底部弹窗（van-popup）展示

组件使用

• 列表: van-list + 卡片式布局
• 表单: van-form + van-field
• 选择器: van-picker（公司、货物选择）
• 日期选择: 原生 input type="date"（移动端原生体验更好）
• 弹窗: van-popup（底部弹出）
• 按钮: van-button
• 标签: van-tag
• 搜索: van-search
• 反馈: Toast、Dialog、Notify

交互优化

• 点击卡片查看详情
• 底部弹窗编辑表单
• 下拉刷新和上拉加载
• 触摸友好的按钮尺寸

与 Web 端的差异

功能	Web 端	移动端
UI 框架	Element Plus	Vant 4
列表展示	表格（el-table）	卡片列表
表单弹窗	居中对话框	底部弹窗
日期选择	el-date-picker	原生 input[type="date"]
消息提示	ElMessage	Toast
确认对话框	ElMessageBox	Dialog

开发说明

组件自动引入

所有 Vant 组件已配置自动引入，可直接使用：

<template>
  <!-- 直接使用，无需 import -->
  <van-button type="primary">按钮</van-button>
  <van-field v-model="value" label="输入框" />
  <van-popup v-model:show="show">弹窗</van-popup>
</template>

<script setup lang="ts">
// 不需要 import 组件
const show = ref(false)
const value = ref('')
</script>

API 调用

API 文件已从 Web 端复制，可直接使用：

import { UserService } from '@/api/usersApi'
import { weighingApi } from '@/api/weighingApi'
import { planApi } from '@/api/plansApi'

状态管理

Store 文件已从 Web 端复制，可直接使用：

import { useUserStore } from '@/store/modules/user'

const userStore = useUserStore()
const userInfo = userStore.getUserInfo

路由跳转

import { useRouter } from 'vue-router'

const router = useRouter()
router.push('/plans')

注意事项

1. 功能一致性: 所有功能逻辑与 Web 端保持一致
2. 数据格式: API 接口、数据格式与 Web 端完全相同
3. 权限控制: 用户角色判断与 Web 端一致
4. 移动端优化: 仅展示形式适配移动端，功能逻辑不变

环境变量

创建 .env 文件（参考 .env.example）：

VITE_API_BASE_URL=http://localhost:8000

浏览器支持

• iOS Safari 12+
• Android Chrome 80+
• 微信内置浏览器
• 其他现代移动浏览器

后续优化建议

1. 添加下拉刷新功能
2. 优化长列表性能（虚拟滚动）
3. 添加离线缓存
4. 优化图片加载
5. 添加骨架屏加载效果