数据从后端取回来之后，放在什么容器里展示，决定了用户怎么看它。VibeHub 的"内容与数据展示"分类有 20 个组件，但这篇只教你怎么选、怎么说。
第一个选择：Table vs List vs Card
这是最重要的选择——相当于决定你的数据页面"长什么样"。
表格（Table）
多行多列，同一组字段整齐排列，方便比较。
什么数据适合表格：订单列表、用户列表、项目列表——需要横着对比不同条目的同一字段。
VibeHub 里的原话："表格是按行和列展示同一组字段、便于比较多条记录的数据组件。"
喂给 AI 的话："用 Table 展示订单列表。列：订单号/客户名/金额/状态/下单时间/操作。金额右对齐，状态用 Tag 标签显示（已支付绿色/待付款橙色/已取消灰色）。支持按时间排序。"
列表（List）
纵向一条一条排列，每条结构可以不一样。更适合动态流。
什么数据适合列表：通知消息、动态 feed、评论列表——每条内容长度不一，不需要横向对比。
VibeHub 里的原话："列表是按相同结构连续排列多条内容或记录的数据组件。"
喂给 AI 的话："用 List 展示通知列表。每条包含：用户头像(圆)、用户名(粗体)、操作内容(普通)、时间(灰色小字)。最新消息在最上面。"
卡片（Card）
把一条数据的标题、摘要、图片和操作组合在一个方块里。
什么数据适合卡片：产品展示、文章预览、商品列表——需要视觉吸引力的。
VibeHub 里的原话："卡片是把同一对象的标题、摘要、图片和操作组织在一起的内容容器。"
喂给 AI 的话："用 Card Grid 展示产品列表。每张 Card 包含：产品图片（16:9 比例）、标题（粗体）、价格（右对齐红色）、'加入购物车'按钮。Card 有阴影，Hover 时上移 4px。"
选哪个（简单判断）：
状态标记三件套
标签（Tag）
短文字标状态。适合显示"进行中/已完成/已逾期"或者"前端/后端/设计"。
VibeHub 里的原话："标签是用短文字标记内容状态、类别、属性或筛选条件的组件。"
喂给 AI 的话："状态用 Tag 标签显示。进行中蓝色、已完成绿色、已逾期红色。每个 Tag 右侧带 × 可关闭。"
徽标（Badge）
小圆点或数字，贴在另一个元素旁边，表示"这里有新东西"。
VibeHub 里的原话："徽标是附着在其他元素旁、补充数量或状态的简短标记。"
喂给 AI 的话："消息图标右上角加红色圆形 Badge，显示未读数。超过 99 显示 99+。"
头像（Avatar）
显示用户头像的圆圈。有图片显示图片，没图片显示首字。
VibeHub 里的原话："头像是用于识别用户、团队或组织的图像、首字或标志组件。"
喂给 AI 的话："用户列表每行显示圆形 Avatar。有头像的显示图片，没有的显示用户名首字（蓝色背景白色文字）。群组场景显示多人群像叠加。"
详情展示三件套
描述列表（Descriptions）
一行"字段名：值"的只读展示。适合详情页。
VibeHub 里的原话："描述列表是以'字段名：值'成对方式展示一条记录只读详情的数据组件。"
喂给 AI 的话："用 Descriptions 展示订单详情。字段：订单号/客户/金额/状态/创建时间/更新时间。标签左对齐蓝色，值右对齐黑色。"
统计数值（Statistic）
一个大号数字加单位，突出展示核心指标。
VibeHub 里的原话："统计数值是突出显示单个关键指标及其单位或趋势的数据组件。"
喂给 AI 的话："仪表盘用 Statistic 展示核心数据。本月销售额 ¥864,000（绿色 ↑ 12.5%）、活跃用户 12,846（红色 ↓ 2.1%）。"
引用（Quote）
引用的原话，左边加一条竖线区分。
VibeHub 里的原话："引用是从正文中区分出来、并标明来源的原话或文字摘录。"
喂给 AI 的话："用户评价用 Quote 引用样式。左边 3px 蓝色竖线，灰色背景，下方标注用户姓名和职位。"
内容切换两兄弟
标签页（Tabs）
顶部一排标签，点击切换下方内容。适合 3 个以上面板。
VibeHub 里的原话："标签页是在同一页面内切换平级内容面板的导航组件。全部 / 进行中 / 已完成。"
喂给 AI 的话："用 Tabs 切换分类：全部 / 进行中 / 已完成 / 已归档。当前标签底部有蓝色下划线高亮，切换时有平滑过渡。"
分段控件（Segmented）
并排几个小按钮，只能选一个。适合 2-3 个模式切换。
VibeHub 里的原话："分段控件是将少量互斥选项并排显示、用于快速切换模式的选择控件。列表 / 看板 / 日历。"
喂给 AI 的话："视图切换用 Segmented 分段控件：列表视图 / 看板视图。选中项背景深色文字白色，未选中项灰色背景。"
特殊数据结构
折叠面板（Collapse）
点击标题展开内容。适合 FAQ、分组设置。
喂给 AI 的话："用 Collapse 展示 FAQ。每个问题作为面板标题，点击展开答案。同一时间只能展开一个。"
时间轴（Timeline）
按时间顺序展示事件。适合物流、操作日志。
VibeHub 里的原话："时间轴是按时间顺序展示一组事件、状态或记录的数据组件。"
喂给 AI 的话："用 Timeline 展示物流轨迹。每个节点：时间(左对齐) + 状态描述(右对齐)。最新事件在最上面，已完成绿色圆点，进行中蓝色圆点。"
树形控件（Tree）
可展开的树状结构。适合组织架构、文件目录。
VibeHub 里的原话："树形控件是用可展开的父子节点展示层级数据的组件。"
喂给 AI 的话："用 Tree 展示组织架构。一级节点：研发部/设计部/市场部。研发部下展开：前端组/后端组。可展开折叠，选中节点高亮。"
走马灯（Carousel）
多张内容轮播展示。适合 Banner、产品展示。
VibeHub 里的原话："走马灯是在同一位置轮流展示多张内容或多个页面的轮播组件。"
喂给 AI 的话："首页用 Carousel 轮播 3 张 Banner。每张停留 3 秒，自动播放。底部有指示圆点，左右两侧有箭头可手动切换。带淡入淡出过渡。"
文件项（File）
显示单个文件的卡片。文件名、大小、类型、状态、操作。
喂给 AI 的话："附件列表用 File 文件项。显示：文件图标(PDF/图片/文档)、文件名、大小(2.4 MB)、上传时间。右侧有下载和删除按钮。"
图标（Icon）
统一的小图标库。所有操作按钮前加一个图标，风格一致。
喂给 AI 的话："所有菜单项前面加 Icon。仪表盘用 📊、项目用 📁、设置用 ⚙️。用统一的图标库，不要混用不同风格的图标。"
图片（Image）
加载图片用的。支持预览、加载失败显示占位图。
喂给 AI 的话："商品图片用 Image 组件。点击可放大预览。加载失败显示灰色占位图加'加载失败'文字。图片比例统一 4:3。"
视频（Video）
嵌入视频播放器。支持播放/暂停、进度条、时长显示。
喂给 AI 的话："产品演示区用 Video 视频播放器。显示时长'02:18'，自动播放关闭，控件显示播放/暂停和音量。"
最容易忽略的一个组件
空状态（Empty）
没有数据的时候显示什么？如果不告诉 AI，它可能给一个空白区域，用户看到一脸懵。
VibeHub 里的原话："空状态是在内容区域没有可展示数据时说明原因和下一步的界面状态。还没有任何项目。创建第一个项目，开始协作吧。"
喂给 AI 的话："列表没有数据时显示 Empty 空状态。插图 + 标题'还没有任何项目' + 描述'创建你的第一个项目开始使用' + 按钮'新建项目'。不要只显示空白。"
实战：完整的数据管理页面
"用 Sidebar 布局。右侧内容区：
- 顶部用 Tabs 切换：全部项目 / 进行中 / 已完成
- 下方用 Table 展示项目列表。列：项目名/负责人/状态(Tag)/进度(Progress)/截止时间/操作
- 每行末尾 Dropdown 操作：编辑/复制链接/删除
- 表格上方用 Statistic 展示：总项目数/进行中/已完成"
AI 速览
