       ┌─────────────────────────────────────────────┐
       │  ░░░ 다중 SVG 웨이브 (5겹) + 오로라 + 빛 점  │
       │                                             │
       │            🌀 (회전 로고)                    │
       │            플랜트펄스                        │
       │            엣지                   │
       │            [HOSTNAME 뱃지]                  │
       │                                             │
       │            👤 [사용자 ID]                    │
       │            🔑 [패스워드]                     │
       │                                             │
       │            [🔓 로그인]                       │
       │                                             │
       │            KOPENS ©                         │
       │                                             │
       │                          ┌──────────────┐   │
       │                          │ IIoT 게이트   │   │
       │                          │ 웨이 일러스트 │   │
       │                          └──────────────┘   │
       └─────────────────────────────────────────────┘

1.1 背景视觉效果

深海军蓝渐变 — linear-gradient(135deg, #061830 0%, #0a2452 35%, #07182f 75%, #03101f 100%)
5层 SVG 波浪（.login_wave .wv1 ~ .wv5）— 以不同的振幅/相位平滑流动
极光 conic-gradient（.login_aurora）— 从屏幕中心缓慢旋转
6个光晕 orb（.orb）— 径向渐变，在不同坐标处漂浮
右下角 IIoT 网关插图（.edge_pc_deco .edge_gw_svg）— clamp(200px, 22vw, 320px) 投影 + breathe 动画。用于可视化 PlantPulse Edge 的身份标识

这些效果都通过内联 <style> 或 pp-login.css 定义 — 跳转到其他页面时即消失（仅应用于登录页）。

1.2 表单区域

区域	内容
Logo + 名称	PlantPulse Edge Logo（旋转）+ 中文名称
HOSTNAME 徽章	`${edge_context.hostname}` — 立即标识是哪台网关
用户 ID	英文/数字/@ — 占位符用户 ID
密码	明文传输 — 建议使用 HTTPS
登录按钮	提交

2. 操作流程

步骤	结果
表单提交	`POST /login/login`（user_id + password）
响应 OK	显示 3 秒加载转圈（`fa-spinner-third fa-spin`）→ 跳转到 `/ui/main`
响应失败	显示警示框（抖动动画，红色强调）— “请确认登录 ID 和密码后，再准确输入。”

会话属性 _USER_LOGIN（JSONObject）中存储用户信息 — UserFilter / ApiAuthFilter 依据该属性判断会话是否通过。

如果 3 秒加载感觉太长

这是为了给平台侧令牌验证/重定向的竞态条件一个稳定完成的时间。如果过快跳转到 /ui/main，首次访问可能会被 401 认证重定向，导致重新进入登录界面，因此这是为了 UX 稳定性而有意设置的延迟。

3. 输入验证

字段	约束
用户 ID	4–20 个字符（英文 / 数字 / @ 等）
密码	4–20 个字符，明文传输（建议使用 HTTPS）

required="true" — 通过 HTML5 验证阻止空值。也应用了 minlength/maxlength。

4. 常见陷阱

症状	原因 / 解决方法
登录后立即回到登录界面	会话 Cookie 被拦截 / 域名混用（HTTPS ↔ HTTP）。请使用相同来源访问
所有密码都被拒绝	Cassandra `pe.app_user_login` 表为空。请向系统管理员请求注册初始用户
会话频繁中断	Tomcat 会话超时过短 — 增加 `app.properties` 中的 `security.session.timeout.minutes`。或设置 PersistentManager + FileStore（已应用 — 重启后也能保持会话）
在其他 PC 上同时登录	允许（多会话）— 不支持强制 RBAC / 单点登录
IIoT 插件显示不出来	浏览器缩放过小或视口非常窄时（clamp 的最小 200px 大于视口）。建议使用桌面端

5. 安全说明

建议使用 HTTPS — 暴露到外网时强制 HTTPS（在 Tomcat 连接器或 nginx/Apache 反向代理前端部署）
REST /api/v1/* 需要认证 — 如果 ApiAuthFilter 满足以下任一认证方式则通过：
- X-API-Key 头部（由 EDGE_REST_API_KEY_FILE 或 EDGE_REST_API_KEY 注入的值）
- Authorization: Bearer <key> 头部
- 或 登录会话（浏览器已登录状态）— 存在 _USER_LOGIN 属性则会话通过
查询参数形式的 ?api_key=<key> 可能会在 URL 记录/代理缓存中留下密钥，因此以 401 拒绝
密钥在 app.properties 的 edge.rest.api.key 中设置，且仅在 edge.rest.api.auth=true 时强制。详细内容请参阅 REST API 指南
API 调用审计日志 — 每次 /api/* 调用都会由 ApiAccessLogFilter 记录一行日志（方法/路径/状态/耗时/IP/用户/认证模式/UA），IP 默认按 RemoteAddr 标准，apikey 明文仅显示前 4 位并加上长度掩码
密码修改 — 右上角齿轮 → 环境设置 → edge.admin_password → 保存 → 重启（详见）

了解更多

登录后的首个界面：主界面
修改密码和 API 密钥：密码 · API 密钥修改
REST API 认证详情：REST API 指南

1. 界面构成​

1.1 背景视觉效果​

1.2 表单区域​

2. 操作流程​

3. 输入验证​

4. 常见陷阱​

5. 安全说明​

了解更多​

1. 界面构成