94 lines
2.3 KiB
Markdown
94 lines
2.3 KiB
Markdown
# 员工端 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
|
|
```
|