仪表盘与数据展示组件

适合用在哪里

仪表盘、数据表格、图表卡片、对比表和状态面板。

怎么用

1. 打开任意一个组件，看实时预览，切换深色 / 浅色背景。
2. 点「复制提示词」，粘贴到 Claude Code、Cursor、Codex 或 Trae；模型会读你的项目，把组件改写成你的框架，并把颜色、字体接到你的设计变量。
3. 或者在终端用 8pt CLI 装进项目，也可以在已接入 8pt MCP 的编辑器里直接说需求。

npm i -g @8pt-dev/cli
8pt login
8pt search "仪表盘与数据展示"
8pt add suiyun-dot-globe

全部 16 个仪表盘与数据展示组件

1. Dotted Globe Features 点阵地球特性

   居中标题与副句下方是一颗缓慢自转的点阵地球：橙色圆点拼出虚构大陆，背面经纬线淡淡透出，置于奶白底框里；底部一条三格特性带，每格线性图标、短标题和说明，悬停格子泛起暖色。

2. Release Spec Cards 发布公告卡组

   三张米灰圆角公告卡：顶部胶囊标记、栏目与时间，粗体标题和简述，底部用细线分隔的模型详情与系统说明两行链接，最下方整宽「阅读公告」按钮，悬停卡片轻抬、箭头右移。

3. Versus Compare Panel 对比连线面板

   左侧灰色“常规做法”叉号清单与右侧紫色“我们的方案”对勾清单并排，中间浮动徽标用曲线连向右侧，进入视口时曲线描绘、右侧条目依次滑入；底部一条核心优势横栏。

4. Clip Library Window 剪贴板资料库窗口

   深色毛玻璃应用窗口形式的剪贴板资料库：顶部搜索框与工具按钮，分类标签可筛选文字、颜色、素材等卡片，输入关键字实时过滤，点击任一卡片弹出「已复制」提示，卡片依次浮入。

5. Four Answer Window 四问答案窗口

   毛玻璃浏览器窗口里的四格答案面板：搜索框轮换关键词，进度条逐步走满，四张卡片依次从“读取中”切换为“就绪”，分别展示收入排行、下载条形图、广告素材扇形和付费墙手机。窄屏改为两列。

6. Top Apps Toggle Board 榜单切换卡

   天空底图上浮起的排行榜卡片，右上角黑色滑块分段切换“收入 / 下载”，切换时数值淡出淡入、进度条平滑伸缩，首行用主色高亮。窄屏自动隐藏进度条只留数值。

7. Three Step Flow 三步流程

   三个图标节点配代码标签横向排开，节点之间用细线相连，窄屏自动改成纵向排列。适合讲清检索、调用、结算这类三段式流程。

8. Agent Chat Window 智能体对话窗口

   AI 智能体的演示窗口：顶部胶囊页签切换五种任务，左边是用户需求气泡、环形进度从「处理中」走到「已处理」，再逐字打出交付说明；右边 9:16 成片预览跟着换，底部输入框的提示文案也随之变化。

9. Mac File Window Mac 文件窗口

   原生质感的 Mac 文件管理器窗口：侧边栏、分组切换（无 / 类型 / 日期）、彩色文件图标。点「整理」，零散文件飞进分类文件夹，底部弹出可撤销的提示。

10. Disk Cleanup Panel 磁盘清理面板

    分段存储条加分组勾选清单：「可放心清理」默认勾选，「由你决定」默认不勾。勾选时条纹段实时伸缩，移到废纸篓后可用空间增加，并能一键撤销。

11. Shortcut Keycaps 快捷键键帽

    把快捷键做成立体键帽卡片。空闲时逐张演示按下；指针移进来后，在真键盘上按 ⌘、⌥、⇧ 或字母，对应的键帽会同步按下，整组按全时卡片点亮。

12. Compare Table 对比表

    “我们 vs 默认方案”的对比表：自家列整列淡色高亮，对勾在进入视口时逐行亮起；悬停一行时整行提亮，方便逐条读。

13. Orbit Timeline 环形时间线

    节点沿轨道缓慢公转并保持正向，点击节点暂停并展开该阶段说明。

14. Avatar Stack 头像堆叠

    重叠的成员头像，悬停时依次展开并显示名字气泡，末尾 +N 计数。头像是首字母 + 渐变，无需图片。

15. Kanban Column 看板列

    两列看板，点击卡片把它移到另一列。用 FLIP 记录前后位置，只用 transform 补间，列表重排不跳动。

16. Code Diff Card 代码改动卡片

    审阅风格的改动卡片：文件名、增删统计、逐行淡入的 diff，悬停行高亮，一键复制新代码。

常见问题

相关阅读

• 怎么让 Claude Code、Cursor 做出好看的 UI
• 8pt MCP 安装与配置
• 整页模板
• 全部组件