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