zlwuandCursor
a4b13fa2bc
Track the weighbridge mobile-h5 codebase (excluding node_modules, dist, and local .env) so subsequent adaptation tasks can evolve it in-repo. Co-authored-by: Cursor <cursoragent@cursor.com>
243 lines
5.7 KiB
Markdown
243 lines
5.7 KiB
Markdown
# 移动端 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` - 登录页背景图
|
||
|
||
## 安装依赖
|
||
|
||
```bash
|
||
cd mobile-h5
|
||
npm install
|
||
```
|
||
|
||
## 开发
|
||
|
||
```bash
|
||
npm run dev
|
||
```
|
||
|
||
访问 http://localhost:5174
|
||
|
||
## 构建
|
||
|
||
```bash
|
||
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 组件已配置自动引入，可直接使用：
|
||
|
||
```vue
|
||
<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 端复制，可直接使用：
|
||
|
||
```typescript
|
||
import { UserService } from '@/api/usersApi'
|
||
import { weighingApi } from '@/api/weighingApi'
|
||
import { planApi } from '@/api/plansApi'
|
||
```
|
||
|
||
### 状态管理
|
||
|
||
Store 文件已从 Web 端复制，可直接使用：
|
||
|
||
```typescript
|
||
import { useUserStore } from '@/store/modules/user'
|
||
|
||
const userStore = useUserStore()
|
||
const userInfo = userStore.getUserInfo
|
||
```
|
||
|
||
### 路由跳转
|
||
|
||
```typescript
|
||
import { useRouter } from 'vue-router'
|
||
|
||
const router = useRouter()
|
||
router.push('/plans')
|
||
```
|
||
|
||
## 注意事项
|
||
|
||
1. **功能一致性**: 所有功能逻辑与 Web 端保持一致
|
||
2. **数据格式**: API 接口、数据格式与 Web 端完全相同
|
||
3. **权限控制**: 用户角色判断与 Web 端一致
|
||
4. **移动端优化**: 仅展示形式适配移动端，功能逻辑不变
|
||
|
||
## 环境变量
|
||
|
||
创建 `.env` 文件（参考 `.env.example`）：
|
||
|
||
```env
|
||
VITE_API_BASE_URL=http://localhost:8000
|
||
```
|
||
|
||
## 浏览器支持
|
||
|
||
- iOS Safari 12+
|
||
- Android Chrome 80+
|
||
- 微信内置浏览器
|
||
- 其他现代移动浏览器
|
||
|
||
## 后续优化建议
|
||
|
||
1. 添加下拉刷新功能
|
||
2. 优化长列表性能（虚拟滚动）
|
||
3. 添加离线缓存
|
||
4. 优化图片加载
|
||
5. 添加骨架屏加载效果
|