---
name: edge-frontend-design
description: edge_collector 前端页面设计与 UI 落地规范。用于设计或优化边缘侧 frontend/config_app、云平台 frontend/cloud_app 页面、组件、布局、交互、按钮状态、弹窗、图表、AI 分析、WiFi、端口转发、内网穿透等用户界面时，结合当前 React/Vite/CSS Modules 暗色主题输出可落地设计。
---

# edge_collector 前端设计

## 适用前端

- 边缘侧：`frontend/config_app`
- 云平台：`frontend/cloud_app`

## 设计原则

- 先阅读相邻页面和 CSS Modules，沿用当前视觉语言。
- 首屏直接呈现可用工具，不做营销式 landing page。
- 工业/运维页面要安静、清晰、密集但不拥挤。
- 不引入新的 UI 框架。
- 不把内部技术细节展示给最终用户。
- 卡片、按钮、启停、危险操作样式要与已有模块一致。

## 视觉基线

后续前端设计按以下口径走：

- 暗色底。
- 细边框。
- 蓝紫作为主操作色。
- 状态色克制使用，只用于表达成功、警告、错误、运行中等明确状态。
- 避免营销页式大渐变。
- 避免装饰感过强的科技视觉，如大面积霓虹、发光线框、玻璃拟态、纯装饰光效。
- 页面应像工业网关/运维工具，而不是宣传页或展示大屏。

现有颜色基线：

```text
背景：#0d0d14 / #14141e
面板：#1e1e2e
边框：#2a2a3a
主文字：#e0e0e0
标题文字：#ffffff
主操作色：#6366f1
```

## 工作流

1. 明确目标用户：现场用户、运维、管理员、开发。
2. 梳理核心任务：用户进页面后最需要完成什么。
3. 阅读现有页面，提取布局、按钮、表格、弹窗和状态样式。
4. 先给信息架构，再给具体组件布局。
5. 覆盖加载、空状态、错误、保存中、权限不足、操作成功。
6. 实现时遵循 `frontend-ui-conventions`、`frontend-conventions`、`frontend-dialog`。

## 当前项目常见布局

- 高级功能：模块标签页 + 左右均分列表/配置区 + 底部操作区靠右。
- 数据查看/AI 分析：图表区域与报告区域独立，报告内容向下延展，不向上挤占图表。
- 配置页：表单和列表并排，避免单列垂直堆叠导致右侧空白。
- 规则列表：单条启用/停用放操作列，不使用复选框表达启停。

## 交互要求

- 点击连接、扫描、保存、分析、启停等耗时操作，按钮必须出现 loading 或局部状态反馈。
- 危险操作必须二次确认。
- 失败提示要说明可执行下一步，不只显示接口失败。
- 普通按钮、危险按钮、启停按钮风格要统一。
- 长文本和长报告必须支持滚动查看，不能遮挡上方关键内容。

## 文案规则

- 用户可见文案使用业务语言。
- 不展示 AI Provider 名称、内部模型名、helper、SDK 路径、接口路径、堆栈、SQL。
- 参数说明写影响和建议值。
- 空状态告诉用户下一步操作。

## 设计检查

- 是否有大片空白。
- 文本是否溢出。
- 窄屏是否可用。
- 操作后是否有反馈。
- 图表、表格、报告是否互相遮挡。
- 权限不足是否有清晰状态。
- 与相邻模块按钮和标签风格是否一致。