# 员工端 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
```

## Docker 部署

镜像内使用 Nginx 托管前端静态资源，并代理 `/auth`、`/admin`、`/hotelStaff`、`/hotelBiz` 到后端网关。前端环境文件中的 `VITE_API_BASE_URL` 保持为空即可。

构建生产镜像：

```bash
docker build --build-arg BUILD_MODE=prod -t hotel-biz-h5:prod .
```

构建测试镜像：

```bash
docker build --build-arg BUILD_MODE=test -t hotel-biz-h5:test .
```

直接运行：

```bash
docker run -d \
  --name hotel-biz-h5 \
  -p 10086:10086 \
  -e BACKEND_GATEWAY=http://192.168.3.211:9999 \
  hotel-biz-h5:prod
```

使用 compose：

```bash
docker compose up -d --build
```

测试环境使用独立 compose 文件：

```bash
docker compose -f docker-compose.test.yml up -d --build
```

测试环境默认后端网关是：

```bash
BACKEND_GATEWAY=http://8.138.234.141/ingress
```

如果测试服务器上的网关地址不同，可以启动时覆盖：

```bash
BACKEND_GATEWAY=http://测试网关地址 H5_PORT=10086 docker compose -f docker-compose.test.yml up -d --build
```

`BACKEND_GATEWAY` 是容器内 Nginx 代理到的后端网关地址，不要以 `/` 结尾。生产环境如果前面还有宿主机 Nginx，宿主机 Nginx 只需要负责域名、HTTPS 证书，并把流量转发到 `127.0.0.1:10086`。

生产扫码建议通过 HTTPS 访问，否则部分移动浏览器或微信内置浏览器可能无法打开摄像头。