移动端 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- Logofavicon.ico- 网站图标avatar11.png- 默认头像sx1.jpg- 登录页背景图
安装依赖
cd mobile-h5
npm install
开发
npm run dev
构建
npm run build
构建产物在 dist 目录。
功能模块
✅ 已完成
-
登录页面
- 用户名/密码登录
- 使用背景图片
sx1.jpg - Logo 显示
-
仪表盘
- 今日入库/出库统计
- 功能菜单导航
- 用户信息显示
-
计划管理
- 计划列表（卡片式展示）
- 新增/编辑计划
- 查看关联数据
- 生成出入库单
- 删除计划
- 搜索功能
-
出入库管理
- 出入库记录列表（卡片式展示）
- 新增/编辑记录
- 查看关联数据
- 生成地磅单
- 删除记录
- 搜索功能
-
地磅单管理
- 地磅单列表（卡片式展示）
- 新增/编辑地磅单
- 毛重/皮重/净重计算
- 自动填充时间
- 作废功能
- 删除功能
- 搜索功能
-
基础资料
- 往来单位管理（标签页）
- 货物管理（标签页）
- 新增/编辑/删除功能
- 搜索功能
-
用户管理
- 用户列表（卡片式展示）
- 新增/编辑用户
- 删除用户
- 角色管理（管理员/操作员）
移动端适配特点
布局方式
- 使用卡片式布局替代表格
- 列表使用
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')
注意事项
- 功能一致性: 所有功能逻辑与 Web 端保持一致
- 数据格式: API 接口、数据格式与 Web 端完全相同
- 权限控制: 用户角色判断与 Web 端一致
- 移动端优化: 仅展示形式适配移动端，功能逻辑不变
环境变量
创建 .env 文件（参考 .env.example）：
VITE_API_BASE_URL=http://localhost:8000
浏览器支持
- iOS Safari 12+
- Android Chrome 80+
- 微信内置浏览器
- 其他现代移动浏览器
后续优化建议
- 添加下拉刷新功能
- 优化长列表性能（虚拟滚动）
- 添加离线缓存
- 优化图片加载
- 添加骨架屏加载效果