# 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`：统一定义后端与问卷服务地址。