数据列表是展示和管理结构化数据的核心模式。在 Alius 平台中,设备、组件、API、版本、资源等信息均通过列表形式呈现。

列表模式

表格 Table

用于展示结构化、可比较的数据集合。

  • 列标题固定,不随内容滚动
  • 每列对齐方式一致:文本左对齐,数字右对齐,状态居中
  • 支持列排序,点击列标题切换升降序
  • 行高统一,内容超出时截断并显示省略号
  • 行悬停时高亮背景色
  • 数据量较大时支持分页,默认每页 20 条
  • 支持行选择(复选框),选中行在视觉上区分
  • 空表格显示空状态提示

卡片列表 Card List

用于展示视觉丰富、信息聚合度高的数据项。

  • 每张卡片包含标题、描述、状态标签、操作入口
  • 卡片宽度一致,网格排列
  • 支持列表视图和网格视图切换
  • 卡片间距统一,使用系统间距规范
  • 悬停时显示操作按钮或阴影变化
  • 空状态显示引导文案和创建入口

资源列表 Resource List

用于展示可下载、可引用的资源文件列表。

  • 展示文件名、文件类型、文件大小、更新时间
  • 提供下载入口和预览入口
  • 支持按文件类型过滤
  • 文件类型使用图标区分
  • 列表项可点击展开详情

版本列表 Version List

用于展示产品的版本发布历史。

  • 展示版本号、发布日期、变更摘要
  • 最新版本在顶部,并标注”最新”标签
  • 每个版本提供下载入口和更新日志链接
  • 预发布版本标注”Beta”或”RC”标签
  • 支持按版本类型筛选(稳定版、预发布版)

组件列表 Component List

用于展示机器人组件或模块的清单。

  • 展示组件名称、型号、状态、兼容性信息
  • 支持按类别过滤(传感器、执行器、控制板等)
  • 组件状态使用颜色标签:可用(绿色)、停产(灰色)、预售(蓝色)
  • 点击组件可查看详情和文档

API 列表 API List

用于展示 API 接口的索引列表。

  • 展示接口名称、请求方法、路径、简要描述
  • 请求方法使用颜色标签:GET(绿色)、POST(蓝色)、PUT(橙色)、DELETE(红色)
  • 支持按标签或模块过滤
  • 支持关键词搜索
  • 点击可跳转到 API 详情页

设备列表 Device List

用于展示已连接或管理的机器人设备列表。

  • 展示设备名称、型号、连接状态、固件版本、最后在线时间
  • 连接状态使用颜色标签:在线(绿色)、离线(灰色)、连接中(黄色)、错误(红色)
  • 支持按状态过滤
  • 提供设备操作入口:连接、断开、配置、升级固件
  • 支持设备搜索

设计原则

支持过滤与搜索

数据列表必须提供过滤和搜索能力,帮助用户快速定位目标数据。

  • 列表顶部提供搜索输入框
  • 常用过滤条件以下拉或标签形式展示
  • 过滤条件可组合使用
  • 清空过滤条件的操作应明显
  • 搜索和过滤结果实时更新,无需手动刷新

使用状态标签

列表中的状态信息应使用颜色标签直观表达。

  • 标签颜色语义统一:成功/可用为绿色,警告/进行中为黄色/橙色,错误/不可用为红色,中性/禁用为灰色
  • 标签文字简短,不超过 4 个中文字符
  • 标签样式统一使用圆角矩形

展示更新时间

数据列表中的时间信息应展示具体时间而非相对时间。

  • 格式:2026-06-09 14:30
  • 列表视图中展示完整时间
  • 卡片视图中可简化为日期
  • 排序时默认按更新时间倒序

使用版本标签

涉及版本信息的数据项应使用统一的版本标签格式。

  • 版本号格式:v主版本.次版本.修订号,如 v1.2.3
  • 预发布版本附加后缀:v2.0.0-beta.1v1.3.0-rc.2
  • 最新稳定版标注”Latest”标签
  • 版本标签使用等宽字体

提供下载入口

资源类数据列表必须提供清晰的下载操作入口。

  • 下载按钮在列表项右侧或操作列中
  • 支持多格式下载时使用下拉菜单
  • 下载前显示文件大小
  • 下载进度通过浏览器原生下载管理处理