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>
116 lines
3.3 KiB
Markdown
116 lines
3.3 KiB
Markdown
# 移动端开发说明
|
||
|
||
## 已完成功能
|
||
|
||
### 1. 登录页面 (`/login`)
|
||
- ✅ 用户名/密码登录
|
||
- ✅ 使用背景图片 `sx1.jpg`
|
||
- ✅ Logo 显示 `logo-sx.png`
|
||
- ✅ 登录成功后跳转到仪表盘
|
||
|
||
### 2. 仪表盘 (`/dashboard`)
|
||
- ✅ 今日入库/出库统计（车辆数）
|
||
- ✅ 功能菜单导航（卡片式）
|
||
- ✅ 用户信息显示（头像 + 用户名）
|
||
- ✅ 退出登录功能
|
||
- ✅ 管理员可见用户管理入口
|
||
|
||
### 3. 计划管理 (`/plans`)
|
||
- ✅ 计划列表（卡片式展示）
|
||
- ✅ 搜索功能（往来单位/计划号）
|
||
- ✅ 新增计划
|
||
- ✅ 编辑计划
|
||
- ✅ 查看关联数据（出入库单、地磅单）
|
||
- ✅ 生成出入库单（跳转到出入库页面）
|
||
- ✅ 删除计划
|
||
- ✅ 执行状态显示（待入库/入库中/已入库等）
|
||
|
||
### 4. 出入库管理 (`/inventory`)
|
||
- ✅ 出入库记录列表（卡片式展示）
|
||
- ✅ 搜索功能（往来单位/产品）
|
||
- ✅ 新增记录
|
||
- ✅ 编辑记录
|
||
- ✅ 查看关联数据（计划、地磅单）
|
||
- ✅ 生成地磅单（跳转到地磅单页面）
|
||
- ✅ 删除记录
|
||
- ✅ 支持从计划管理跳转并自动填充数据
|
||
|
||
### 5. 地磅单管理 (`/weighing`)
|
||
- ✅ 地磅单列表（卡片式展示）
|
||
- ✅ 搜索功能（车牌号/货物名称）
|
||
- ✅ 新增地磅单
|
||
- ✅ 编辑地磅单
|
||
- ✅ 毛重/皮重/净重计算（自动）
|
||
- ✅ 毛重/皮重时间自动填充
|
||
- ✅ 作废功能
|
||
- ✅ 删除功能
|
||
- ✅ 查看关联数据（计划、出入库单）
|
||
- ✅ 支持从出入库管理跳转并自动填充数据
|
||
|
||
### 6. 基础资料 (`/master-data`)
|
||
- ✅ 标签页切换（往来单位/货物）
|
||
- ✅ 往来单位管理
|
||
- 列表展示
|
||
- 新增/编辑/删除
|
||
- 搜索功能
|
||
- ✅ 货物管理
|
||
- 列表展示
|
||
- 新增/编辑/删除
|
||
- 搜索功能
|
||
|
||
### 7. 用户管理 (`/user`)
|
||
- ✅ 用户列表（卡片式展示）
|
||
- ✅ 新增用户
|
||
- ✅ 编辑用户（修改密码、角色）
|
||
- ✅ 删除用户（admin 用户不可删除）
|
||
- ✅ 角色显示（管理员/操作员）
|
||
|
||
## 技术实现
|
||
|
||
### 组件使用
|
||
- **列表**: `van-list` + 自定义卡片组件
|
||
- **表单**: `van-form` + `van-field`
|
||
- **选择器**: `van-picker`（公司、货物）
|
||
- **日期选择**: 原生 `input[type="date"]`
|
||
- **弹窗**: `van-popup`（底部弹出，高度 90%）
|
||
- **按钮**: `van-button`
|
||
- **标签**: `van-tag`
|
||
- **搜索**: `van-search`
|
||
- **反馈**: `Toast`、`Dialog`、`Notify`
|
||
- **加载**: `van-loading`
|
||
- **空状态**: `van-empty`
|
||
|
||
### 数据流
|
||
- API 调用与 Web 端完全一致
|
||
- Store 状态管理与 Web 端共享
|
||
- 路由跳转支持参数传递
|
||
- 表单验证与 Web 端一致
|
||
|
||
### 移动端优化
|
||
- 卡片式布局，信息层次清晰
|
||
- 底部弹窗表单，符合移动端操作习惯
|
||
- 触摸友好的按钮尺寸
|
||
- 下拉加载更多数据
|
||
- 原生日期选择器，体验更好
|
||
|
||
## 功能对比
|
||
|
||
| 功能 | Web 端 | 移动端 | 状态 |
|
||
|------|--------|--------|------|
|
||
| 登录 | ✅ | ✅ | 一致 |
|
||
| 仪表盘 | ✅ | ✅ | 一致 |
|
||
| 计划管理 | ✅ | ✅ | 一致 |
|
||
| 出入库管理 | ✅ | ✅ | 一致 |
|
||
| 地磅单管理 | ✅ | ✅ | 一致 |
|
||
| 基础资料 | ✅ | ✅ | 一致 |
|
||
| 用户管理 | ✅ | ✅ | 一致 |
|
||
|
||
## 下一步
|
||
|
||
项目已完整实现所有功能，可以：
|
||
1. 运行 `npm install` 安装依赖
|
||
2. 运行 `npm run dev` 启动开发服务器
|
||
3. 测试各项功能
|
||
4. 根据实际使用情况优化 UI/UX
|
||
|