（三）数据展示

1、表格

表格覆盖结构化数据的密集呈现场景。表格行高分为三档：紧凑型 32px，用于密集数据展示；常规型 40px，用于大多数场景；宽松型 48px，用于宽松阅读浏览模式。

1.1 表格形态

表格提供三种形态：基础形态用于纯信息查阅；行选择形态用于批量操作管理；可展开形态用于层级数据的父子展开，子数据层级不超过 2 层。通过三种形态组合实现从浏览到操作的完整数据交互，避免用户在多层页面间反复跳转。

表格提供单色和斑马纹两种样式：单色适用于列数较少、信息密度极高、需要严格纵向对齐阅读的场景；斑马纹适用于列数多、行数据长度不一、需要快速横向定位的宽表格。

1.2 表头显示/冻结

纵向滚动时，表头固定于顶部，确保字段与数据的对应关系不因滚动丢失。表头文字完整显示不折行，数据为空时使用「-」占位。

1.3 表格列分级显示/冻结

核心字段列设最大宽度，例如名称、标题、状态；次要字段列次之。项数较少时适当放宽列宽以撑满容器，避免过多留白。单元格内容超出时最多折两行并以省略号截断，hover 时以 Tooltip 展示完整内容。

当表格过宽时，冻结列以便于形成对照关系。

1.4 操作列

操作列固定于表格右侧，直接外露最多 3 项操作，超出时通过「更多」按钮聚合。每项操作最多 5 个字，超出时显示省略号，hover 时展示全部；当大于 3 个操作项时，通过更多按钮聚合，点击更多展示操作浮层，浮层内文字按照实际长度展示。

1.5 分页器

翻页控件固定于表格可视区域底部，不因滚动脱离视线。分页器通常包含页码、跳转和每页条数切换。

1.6 适配规则

宽屏适配（≥1920px）

在 1920px 及以上分辨率下，表格采用以下适配策略：页面宽度跟随内容区流式拉伸，不设最大宽度上限；列宽按权重比例分配，核心列（如名称、状态）设最小宽度阈值，辅助列自动拉伸填充剩余空间；固定列在横向滚动条出现前保持贴边吸附，避免宽屏下操作列漂移。

窄屏适配（≤1280px）

在 1280px 及以下分辨率下，优先隐藏低优先级列，保留核心字段可见；出现横向滚动条时，冻结首列（序号/名称）与操作列，防止行数据失焦；支持响应式侧边栏折叠，释放主内容区宽度；当宽度进一步压缩至 768px 时，表格切换为卡片列表模式，每行数据以独立卡片形式垂直展示。

区域级横向滚动

表格容器宽度小于 768px 时出现区域级横向滚动，滚动条归属于容器而非表格自身；大于 768px 时完整展现。

侧边导航适配

当表格内部有侧边导航时动态适配。表格容器宽度小于 1000px 时，内部筛选导航自动收起；大于 1000px 时展开，以释放横向空间。

2、时间轴

时间轴以方向、内容密度、对齐方式三个维度组织，覆盖从简洁时间流到复杂事件回溯的场景。

节点状态分为已完成、进行中、待处理三种，可通过颜色、实线或虚线进行区分；默认纵向排列，步骤极短时可切换横向。

3、轮播

轮播用于在有限空间内循环展示一组平级内容，解决内容过多与屏效受限之间的矛盾，让用户无需跳转页面即可浏览多组信息。

• 内容需为同一层级，数量控制在 3～5 个，避免记忆负担。
• 自动轮播间隔 4～6 秒，鼠标悬停暂停；必须提供指示器与切换箭头，明确当前位置与总数。
• 首帧放置核心内容，不依赖用户切换到后续帧。
• 轮播内容必须为平级信息，禁止混入操作型组件，例如表单、按钮。

提供三类不同指示器样式的轮播组件。

4、抽屉

抽屉从屏幕边缘滑出浮层面板，分为左、右、顶、底部出现，在当前页面内完成次要任务或展示补充信息，避免打断用户主流程。

• 抽屉内任务应在 3 步以内完成，复杂流程跳转独立页面。
• 展开时主内容区不可滚动，蒙层透明度 40%。
• 必须提供关闭按钮、蒙层点击、ESC 键盘三种关闭方式。
• 多层抽屉最多嵌套 3 层：主抽屉、子抽屉、确认弹窗。

5、卡片

卡片用于将一类信息集中化展示，增强区块感与可扫描性，解决零散信息缺乏归属、阅读节奏混乱的问题。

卡片按内容复杂度提供四档：极简卡片、带标题卡片、带副标题卡片、带副标题描述文案卡片，从极简信息单元到完整内容模块，逐级扩展信息承载量。

6、标签

标签用于对信息进行关键词分类或状态标记，通过色彩与形态的快速识别，帮助用户在密集信息中定位属性、筛选内容或感知状态。

标签按尺寸与交互类型组合，覆盖从密集标注到强操作的全场景：

尺寸	高度	纯展示	可操作
大	32px	页面级状态标识、醒目分类标记	表单内筛选标签组、需强点击热区的动态分类
中	24px	表格行内状态、卡片分类、常规信息标注	已选条件聚合、自定义筛选、动态标签管理
小	20px	极密集信息区状态标记、紧凑表格辅助标注	轻量动态分类、空间受限时的标签编辑

7、徽标

徽标用于状态、数量或新内容的轻量提示，以点或数字形式叠加于目标元素右上角，语义色区分紧急程度，数字超限时以 99+ 展示，为 0 时可隐藏，同一视图内不宜过多以避免视觉噪音。

8、头像

头像用于展示用户或实体的视觉标识，分为图片、文字（首字母/昵称）、图标三种形式，尺寸按使用场景分为 6 类，支持独立展示或折叠展示。