cloud
85 lines
3.2 KiB
Markdown
85 lines
3.2 KiB
Markdown
---
|
|
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。
|
|
- 参数说明写影响和建议值。
|
|
- 空状态告诉用户下一步操作。
|
|
|
|
## 设计检查
|
|
|
|
- 是否有大片空白。
|
|
- 文本是否溢出。
|
|
- 窄屏是否可用。
|
|
- 操作后是否有反馈。
|
|
- 图表、表格、报告是否互相遮挡。
|
|
- 权限不足是否有清晰状态。
|
|
- 与相邻模块按钮和标签风格是否一致。
|