EdgeX 工业网关 UI 设计规范

核心设计理念

采用极简线构风格设计并基于 Arco Design Pro 组件库实现(不在使用 Vuetify)。优化内容应包括但不限于页面布局重构、视觉元素简化、交互体验提升、响应式适配及性能优化。

设计原则

确保设计符合极简线构风格的核心特征：

• 简洁的线条运用：使用 1-2px 的细线条，避免厚重的边框和阴影
• 清晰的视觉层次：通过间距、颜色和排版建立明确的信息层级
• 克制的色彩搭配：以中性色调为主，辅以功能性色彩（如状态提示）
• 充足的留白空间：保持适当的间距，避免视觉拥挤

组件规范

1. 图标规范

• 使用方式：采用 Arco Design 图标库，统一使用组件形式调用 ，避免直接使用 SVG 图标。(找不到图标时，使用 Arco Design 图标库的默认图标)
• 导入方式：

  import {
    IconApps, IconLink, IconSettings, IconArrowUp, 
    IconFile, IconTool, IconSunFill, IconMoonFill,
    IconUser, IconLock, IconRefresh, IconArrowRight,
    IconArrowLeft, IconCaretDown, IconPlus, IconDelete,
    IconScan, IconEye, IconClockCircle, IconInfoCircle
  } from '@arco-design/web-vue/es/icon'
  

• 使用方式：

  <icon-apps />
  <icon-link :size="14" />
  

• 尺寸规范：
  • 按钮图标：14-16px
  • 导航图标：18px
  • 标题图标：20-24px
  • 空状态图标：48px
• 风格一致：所有图标使用 Arco Design 图标库，确保视觉风格统一
• 色彩适应：使用 Arco Design 图标的默认颜色机制，确保图标颜色随主题变化

2. 表单规范

• 布局：采用水平布局，标签与输入框在同一行
• 对齐：
  • 所有输入框左对齐
  • 标签宽度统一，确保视觉对齐
  • 使用 Arco Design 的 label-col-props 和 wrapper-col-props 控制布局
• 文字处理：
  • 标签文字不换行，使用 white-space: nowrap
  • 长标签使用省略号：text-overflow: ellipsis
• 间距：
  • 表单项间距：16px
  • 标签与输入框间距：12px
  • 输入框之间保持一致的垂直间距
• 响应式：在小屏幕设备上自动切换为垂直布局

3. 表格规范

• 整体布局：
  • 表格与工具栏100%融合，消除双边线效果
  • 工具栏位于表格上方，包含操作按钮和筛选控件
  • 操作列固定在右侧
• 表头：
  • 表头文字不得缩略，确保完整显示
  • 表头背景色使用浅灰色 (#f8fafc)，与内容区区分
  • 表头文字加粗，提高辨识度
  • 表头无圆角，与表格主体无缝衔接
• 内容：
  • 单元格内容左对齐
  • 状态信息使用标签（Tag）组件显示
  • 设备名称单元格：采用垂直布局，设备名称在上，设备ID在下，左对齐显示
  • 单元格内容强制单行显示，多余内容缩略并在鼠标悬停时显示完整内容
• 边框：
  • 使用 1px 细边框，保持线构风格
  • 消除表格最后一列的右边框，避免多余线条
• 间距：
  • 行高：36px
  • 单元格内边距：12px
• 样式：
  • 表格容器无圆角，边框颜色统一为 #e5e7eb
  • 表格悬停效果：轻微背景色变化 (#f9fafb)
  • 表格选中状态：蓝色边框和浅色背景 (#eff6ff)

4. 卡片规范

• 样式：
  • 1px 边框，2px 圆角
  • 悬停效果：轻微阴影和边框颜色变化
  • 选中状态：蓝色边框和浅色背景
  • 底部线条：使用 1px dashed #cbd5e1 虚线样式，与设备底部保持一致
• 布局：
  • 卡片头部：标题和状态信息
  • 卡片内容：核心信息展示
  • 卡片底部：操作按钮
• 响应式：使用栅格系统确保在不同屏幕尺寸下的正确显示

5. 按钮规范

• 尺寸：
  • 主要按钮：高度 32px
  • 次要按钮：高度 28px
  • 图标按钮：28px × 28px
• 样式：
  • 主要按钮：实心填充，背景色 #0f172a
  • 次要按钮：描边样式
  • 文本按钮：无背景
  • 直角风格：所有按钮使用零圆角设计，符合工业极简风格
• 图标：
  • 按钮图标与文字垂直居中对齐
  • 图标尺寸：14-16px
• 工具栏按钮：
  • 工具栏位于表格上方，包含操作按钮和筛选控件
  • 按钮间距：8px
  • 按钮布局：右对齐，与左侧标题形成视觉平衡

6. 协议标签规范

• 样式：
  • 背景色：#0ea5e9
  • 文字颜色：白色
  • 字体：monospace
  • 字体大小：10px
  • 内边距：0 4px
  • 圆角：2px
  • 宽度：自适应内容

交互规范

• 反馈：所有操作要有明确的视觉反馈
• 加载：数据加载时显示骨架屏或加载动画
• 错误处理：表单验证和操作错误要有清晰的提示
• 状态管理：按钮、开关等控件的状态变化要直观可见

性能优化

• 组件复用：合理使用组件化思想，避免重复代码
• 懒加载：对于大型组件和图表使用懒加载
• 代码分割：按路由或功能模块进行代码分割
• 图标优化：使用内嵌 SVG 减少网络请求

响应式设计

• 断点设置：
  • 小屏幕：< 768px
  • 中等屏幕：768px - 1024px
  • 大屏幕：> 1024px
• 布局调整：
  • 小屏幕：单列布局，垂直表单
  • 中等屏幕：双列布局
  • 大屏幕：多列布局
• 字体大小：根据屏幕尺寸自动调整，确保可读性

浏览器兼容性

• 支持主流现代浏览器：Chrome、Firefox、Safari、Edge
• 确保在不同浏览器中视觉效果一致
• 针对 IE11 提供基本兼容性支持

实现目标

优化完成后需达到：

• 视觉简洁：符合极简线构风格，界面干净整洁
• 交互直观：操作流程清晰，用户体验流畅
• 性能优良：页面加载快速，响应及时
• 跨设备兼容：在不同设备和浏览器环境下均能正常展示和运行