数据列表是展示和管理结构化数据的核心模式。在 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.1、v1.3.0-rc.2 - 最新稳定版标注”Latest”标签
- 版本标签使用等宽字体
提供下载入口
资源类数据列表必须提供清晰的下载操作入口。
- 下载按钮在列表项右侧或操作列中
- 支持多格式下载时使用下拉菜单
- 下载前显示文件大小
- 下载进度通过浏览器原生下载管理处理