56 lines
3.5 KiB
Markdown
Executable File
56 lines
3.5 KiB
Markdown
Executable File
# est-frame 框架说明
|
||
|
||
est-frame 是 EST 系统平台的前端框架，基于 Docusaurus 搭建门户与导航，负责登录鉴权、权限控制、以及将各功能子系统（布线/无线测试、场景模拟、竞赛等）通过 iframe 无缝嵌入。后端接口由 est-api 仓库提供。
|
||
|
||
## 运行与构建
|
||
- Node 版本要求：`>= 18`
|
||
- 安装依赖：`npm install`
|
||
- 本地开发：`npm start`（默认监听 `0.0.0.0:3001`）
|
||
- 生产构建：`npm run build`
|
||
|
||
## 端口与服务约定
|
||
- `API_BASE_URL`：`${protocol}//${hostname}:3000`（见 `src/config.js`）
|
||
- 提供 `/login`、`/check-auth`、`/user-info`、`/update-activity`、`/network-config` 等接口。
|
||
- `SURVEY_URL`：`${protocol}//${hostname}:3005`（考试服务）。
|
||
- 子系统（iframe 注入，见 `DynamicAuthIframe` 的 `routeToPortMap`）
|
||
- `:3002`：`/FlukeMoniPage`、`/NetAllyMoniPage`、`/Control` （est-moni仓库）
|
||
- `:3003`：`/Office`、`/Industry`、`/DataCenter`、`/Competition`、`/CompetitionAdmin`（est-dsx仓库）
|
||
|
||
> 提示：上述服务需独立运行并允许被本项目页面 iframe 加载；本项目通过 URL 查询参数将登录态与用户上下文传递给子系统。
|
||
|
||
## 鉴权与权限
|
||
- 登录页：`src/pages/login.js`，组件：`LoginComponent`
|
||
- 提交到 `/login`，前端使用 AES 加密。
|
||
- 成功后保存 `authToken`、`username` 并触发后续鉴权检查。
|
||
- 鉴权钩子：`src/hooks/useAuth.js`
|
||
- 初始化调用 `/check-auth` 验证令牌，成功则继续 `/user-info` 获取并缓存 `username`、`organization`、`userLevel`、`model` 等；每 5 分钟向 `/update-activity` 上报心跳。
|
||
- 页面包裹：`src/components/AuthWrapper.js`
|
||
- 除登录页外均受保护；加载超时（5s）或未登录将重定向 `/login`。
|
||
- 根据 `userLevel` 控制访问：
|
||
- Level 0：仅 Fluke 相关路由
|
||
- Level 2：仅 NetAlly 路由
|
||
- Level 3：Fluke + NetAlly
|
||
- Level 4：Fluke + NetAlly + 基础场景 + 竞赛
|
||
- Level ≥8：包含管理员路由在内的全部访问
|
||
- 布局覆写：`src/theme/Layout.js` 将非登录页统一置于 `AuthWrapper` 下。
|
||
|
||
## 页面与功能（src/pages）
|
||
- `index.js`：首页门户，展示站点标题与功能入口（`HomepageFeatures`）。
|
||
- `login.js`：登录入口（`LoginComponent`）。
|
||
- `FlukeMoniPage.js` / `NetAllyMoniPage.js` / `Control.js`：通过 `DynamicAuthIframe` 加载 `:3002` 对应子系统。
|
||
- `Office.js` / `Industry.js` / `DataCenter.js`：通过 `DynamicAuthIframe` 加载 `:3003` 场景模拟页面，并携带 `faultScenarios` 参数；包含最佳体验的全屏提示。
|
||
- `Competition.js`：加载 `:3003` WorldSkill 竞赛场景。
|
||
- `CompetitionAdmin.js`：加载 `:3003/admin` 竞赛管理。
|
||
- `Survey.js`：加载问卷/调查（也可使用 `SurveyEmbed` 在文档页嵌入：`/s/{surveyId}?estorg=&estuser=`）。
|
||
- `AdminPanel.js`：管理面板（`components/AdminPanel`）。
|
||
- `About.js`：示例页，调用 `/network-config` 读取并展示网络配置。
|
||
|
||
## 关键组件与配置（src/components, src/theme, src/config.js）
|
||
- `useAuth`：封装登录状态、用户信息、心跳与工具方法（`login/logout/checkAuthStatus/getUserInfo`）。
|
||
- `AuthWrapper`：路由访问控制与未登录重定向。
|
||
- `DynamicAuthIframe`：根据当前路由映射至子系统地址，统一附加 `token/org/user/userLevel/estmodel` 等参数。
|
||
- `SurveyEmbed`：用于在页面内嵌问卷服务（来源 `SURVEY_URL`）。
|
||
- `DynamicTitle`：根据上下文动态设置页面标题。
|
||
- `src/config.js`：统一定义后端与问卷服务地址。
|
||
|