# 移动端 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. 添加骨架屏加载效果