# 员工端 H5

Vue 3 + Vite + TypeScript + Vant 的移动端员工工作台。当前包含 mock 数据，可直接预览完整流程。

## 启动

```bash
yarn -i
yarn dev
```

本地预览地址默认是 `http://127.0.0.1:5173/`。

本地开发环境后端网关：

```bash
VITE_PROXY_TARGET=http://192.168.3.211:9999
```

## 环境变量

复制 `.env.example` 后按实际网关配置调整：

```bash
cp .env.example .env.local
```

关键配置：

- `VITE_USE_MOCK=true`：使用前端 mock 数据。
- `VITE_USE_MOCK=false`：调用真实后端接口。
- `VITE_PROXY_TARGET=http://192.168.3.211:9999`：本地 Vite 代理到后端网关。
- `VITE_API_BASE_URL`：打包后的接口网关地址。为空时使用当前站点同源地址。
- `VITE_AUTH_BASE=/auth`：登录服务前缀。
- `VITE_ADMIN_BASE=/admin`：用户与验证码服务前缀。
- `VITE_STAFF_BASE=/hotelStaff`：员工端接口前缀。
- `VITE_HOTEL_BIZ_BASE=/hotelBiz`：酒店业务通用接口前缀。
- `VITE_CLIENT_ID`、`VITE_CLIENT_SECRET`、`VITE_CLIENT_CONFIG_ID`：短信登录所需客户端配置。

## 环境文件

| 文件 | 用途 |
|---|---|
| `.env.local` | 本地开发配置，不提交到仓库 |
| `.env.test` | 测试环境打包配置 |
| `.env.production` | 生产环境打包配置 |

测试环境和生产环境推荐使用同源代理：

```bash
VITE_API_BASE_URL=
```

部署时由 Nginx 把 `/auth`、`/admin`、`/hotelStaff`、`/hotelBiz` 等接口前缀反向代理到后端网关。只有在确认后端网关允许跨域时，才建议把 `VITE_API_BASE_URL` 改成完整网关域名。

## 页面

- `/login`：手机号验证码登录。
- `/home`：工作台。
- `/orders`：订单列表。
- `/orders/:id`：订单详情，可进入核销。
- `/verify`：核销入口。
- `/verify/confirm`：核销确认。
- `/verify/result`：核销结果。
- `/events`：事件列表。
- `/events/create`：发布事件。
- `/mine`：我的。

## 文档

- [H5页面规划.md](./H5页面规划.md)：页面结构、核心流程和 MVP 范围。
- [docs/frontend-practices.md](./docs/frontend-practices.md)：接口接入、移动端兼容、扫码核销和部署经验。

## 校验

```bash
yarn typecheck
yarn build:test
yarn build:prod
```

## 打包

```bash
# 测试环境
yarn build:test

# 生产环境
yarn build:prod

# 默认生产打包
yarn build
```