cloud
3.2 KiB
3.2 KiB
name, description
| name | description |
|---|---|
| edge-frontend-design | 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 框架。
- 不把内部技术细节展示给最终用户。
- 卡片、按钮、启停、危险操作样式要与已有模块一致。
视觉基线
后续前端设计按以下口径走：
- 暗色底。
- 细边框。
- 蓝紫作为主操作色。
- 状态色克制使用，只用于表达成功、警告、错误、运行中等明确状态。
- 避免营销页式大渐变。
- 避免装饰感过强的科技视觉，如大面积霓虹、发光线框、玻璃拟态、纯装饰光效。
- 页面应像工业网关/运维工具，而不是宣传页或展示大屏。
现有颜色基线：
背景：#0d0d14 / #14141e
面板：#1e1e2e
边框：#2a2a3a
主文字：#e0e0e0
标题文字：#ffffff
主操作色：#6366f1
工作流
- 明确目标用户：现场用户、运维、管理员、开发。
- 梳理核心任务：用户进页面后最需要完成什么。
- 阅读现有页面，提取布局、按钮、表格、弹窗和状态样式。
- 先给信息架构，再给具体组件布局。
- 覆盖加载、空状态、错误、保存中、权限不足、操作成功。
- 实现时遵循
frontend-ui-conventions、frontend-conventions、frontend-dialog。
当前项目常见布局
- 高级功能：模块标签页 + 左右均分列表/配置区 + 底部操作区靠右。
- 数据查看/AI 分析：图表区域与报告区域独立，报告内容向下延展，不向上挤占图表。
- 配置页：表单和列表并排，避免单列垂直堆叠导致右侧空白。
- 规则列表：单条启用/停用放操作列，不使用复选框表达启停。
交互要求
- 点击连接、扫描、保存、分析、启停等耗时操作，按钮必须出现 loading 或局部状态反馈。
- 危险操作必须二次确认。
- 失败提示要说明可执行下一步，不只显示接口失败。
- 普通按钮、危险按钮、启停按钮风格要统一。
- 长文本和长报告必须支持滚动查看，不能遮挡上方关键内容。
文案规则
- 用户可见文案使用业务语言。
- 不展示 AI Provider 名称、内部模型名、helper、SDK 路径、接口路径、堆栈、SQL。
- 参数说明写影响和建议值。
- 空状态告诉用户下一步操作。
设计检查
- 是否有大片空白。
- 文本是否溢出。
- 窄屏是否可用。
- 操作后是否有反馈。
- 图表、表格、报告是否互相遮挡。
- 权限不足是否有清晰状态。
- 与相邻模块按钮和标签风格是否一致。