# @ai-matrx/design-system 中文文档 规范地址：https://npmcn.com/package/%40ai-matrx/design-system/ 版本：0\.86\.407 npm 元数据更新时间：2026-10-30T11:54:00.793Z 中文译文更新时间：2026-11-05T17:42:21.686Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40ai-matrx/design-system 原文对照：https://npmcn.com/package/%40ai-matrx/design-system/?lang=original 项目主页：https://github.com/AI-Matrix-Engine/aidream/tree/main/apps/shared/design-system#readme 源码仓库：https://github.com/AI-Matrix-Engine/aidream ## 关键信息（来自 npm 元数据） - 包体积（解压后）：43.6 MB，708 个文件 - 模块格式：ESM + CJS - TypeScript 类型：包内自带 - Node.js 要求：\>=20 - 运行依赖：35 个 - peer 依赖：react \>=18\.0\.0，recharts \>=3\.0\.0，react-dom \>=18\.0\.0，typescript \>=5\.0\.0，@tailwindcss/typography 0\.5\.20 - 首次发布：2026-08-22T23:10:22.493Z - 最新版本发布：2026-10-30T11:54:00.612Z - 近 30 天下载量：174463（2026-10-05 至 2026-11-03，npm 官方下载统计） - 已发布版本数：766（近 12 个月 766 个） ## 中文简介 AI Matrx语义反应原生相通于Vite,Next.js,桌面,以及客户所构建的应用程序. ## 安装 ```sh npm install @ai-matrx/design-system ``` 也可以使用：`pnpm add @ai-matrx/design-system`、`yarn add @ai-matrx/design-system`、`bun add @ai-matrx/design-system` ## README # @ai-matrx/ 设计系统 AI Matrx React应用共享的小型语义UI基础——在Vite和Next.js主机之间其行为和变体完全相同的原始人. **控件 :** 按钮,徽章,标签,分隔符,输入家族,文本区家族,复选框,开关,无线电组,滑行器,Togle + Toggle Group, Avatar, Progress. **无框架字段 :** `Field` 从 `@ai-matrx/design-system/controls` 财务报告和审定财务报表 `ProInput` 编号 : `ProTextarea` 从 `@ai-matrx/design-system/writing-field` 接受 `bare`。周围的地表拥有边框、填充和焦点处理;场面画出无,包括在桌面外观下。 一个赤裸的 `ProTextarea` 保留其文本设置和保留其麦克风和菜单控件的空间。 已存在的默认字段保持其正常的样式. **内容传输 :** 移动到 `@ai-matrx/alchemy/react/workspace` (0.69.0, ALC-16); 它提供 Matrx Alchemy 的内嵌格言, 无障碍菜单, 预测捕捉工作空间, 可选的 AI 能力接合, 以及本地范围 `SurfaceHandle` 供养. 其来源通过用户动作获取; 准备保存了不可改变的正本, 保存了手动和备用源会话, 栅栏 stale async results, 并跟踪每个副本/下载 `Transport`导入 `@ai-matrx/design-system/content-transfer.css` 与套件结构表. ```tsx ({ content: rawText, filename: "worker.log", extension: "txt", mime: "text/plain", }), }, ], }} /> ``` 明确文件名是用它的字节捕捉到的精确安全的基础名 。 允许它使用由标签产生的默认值; 不安全值会明显地使导出失败 . **表面 :** 卡,表,塔布,Andion,可折叠,Scrollrea,Popover,工具提示,HoverCard,工作表,Dialog,提醒Dialog, Drawer, BottomSheet + TabbedBottom Sheet, 提醒,可折叠, Skeleton. **菜单 :** 滴下梅努,上下文梅努,命令/命令Dialog,选择,CreatablePicker. **编成 :** 可编辑标签、 分页控制、 ArchiveFilter、 计分器、 超流工具栏、 确认Dialog + 确认DialogHost. **虎克+公用事业:** `useScrollFade`, (中文(简体) ), `useIsMobile`, (中文(简体) ), `usePortalContainer`, (中文(简体) ), `useDialogContainer`, (中文(简体) ), `useDrawerDirection`, (中文(简体) ), `cn`。 。 。 . **确定的对话在这里存在 `confirm()` 住在这里 `@ai-matrx/kit`。 。 。 .** 由于0.11 0 / 包0.9.0,表面是一个执行,在拥有提醒-Dialog的包中,运动层和上覆相接符. 在您的提供者根附近挂起主机并呼叫 `confirm()` 它们通过一个登记册共享一个登记册 `globalThis` 位置 : ```tsx // app root, once import { ConfirmDialogHost } from "@ai-matrx/design-system"; // anywhere — a thunk, a util, a click handler import { confirm } from "@ai-matrx/kit/confirm-opener"; if (!(await confirm({ title: "Re-run research", description: "This discards the 14 pages you already have (~$50 and 10 minutes) and starts over.", variant: "destructive", confirmLabel: "Discard and re-run", }))) return; ``` 使用声明 `` 当对话框必须在完成同步工作时与旋转器保持开口时, 内入。 命名后果:一个只写"你确定吗?"的确认不符合平台的破坏性和成本行动法. **脚步动作通过出入口保持触摸大小.** Dialog, AwardDialog, Drawer, Sheet 和 BottomSheet footers 在粗指针上或下1024px上应用了44px动作地板. 导入软件包样式表; 不需要主机子树类 。 Fine-pointer 桌面保持其宣布的密度 。 国家控制和传教联系保持其规模;例外的契约行动可以使用 `data-touch-exempt` 有电话站的理由. **每个清单都包含一个可归档的实体 `ArchiveFilter`。 。 。 .** 艾滋病毒/艾滋病法律(Arman, 2026-09-09 - `common-docs/policies/archived-items.md`:每个列表的存档过滤器,默认隐藏存档行,看到它们就是一击. `ArchiveFilter` 这是唯一的控制—— `active` (默认) / `archived` 编号 : `all`,用"Next.js"应用的同名词表示. ```tsx import { ArchiveFilter, DEFAULT_ARCHIVE_FILTER, type ArchiveFilterValue } from "@ai-matrx/design-system"; const [archived, setArchived] = React.useState(DEFAULT_ARCHIVE_FILTER); const rows = useRows({ archived }); // the SERVER applies the predicate ``` 将值传递给读者,永远不要过滤已经牵线搭桥的页面:计数,徽章和页标必须描述列表内容. `toArchiveFilter()` 将未信任的值(URL param,存储首选项)缩入三态,默认为 `active` 所以,没有什么能悄悄地扩大. **工具提示住在这里,只有这里.** `@ai-matrx/tap-target` 由于设计系统0.7.0 / 水龙头目标0.2.0 它消耗了这个,再出口也无济于事. 当宿主在DENSITY上 筑起原始的地盘时 密度是道具而不是叉子: `Card size="sm|md|lg"`, (中文(简体) ), `Table size="sm|md"`, (中文(简体) ), `Accordion size="sm|md"`, (中文(简体) ), `Switch`编号 :`Avatar`编号 :`Checkbox`编号 :`Slider`编号 :`RadioGroup`编号 :`Toggle` `size`, (中文(简体) ), `ResizableHandle size="xs".."4xl"`。它在根上被宣布一次,每件物品都从上下文读取,所以卡片不能混合垫片,无线电组不能混合控制大小. **带有组件的动船——全部.** 这里每出动画 (单位:千美元)`Dialog`, (中文(简体) ), `AlertDialog`, (中文(简体) ), `Sheet`, (中文(简体) ), `CommandDialog`, (中文(简体) ), `Popover`, (中文(简体) ), `DropdownMenu`, (中文(简体) ), `ContextMenu`, (中文(简体) ), `HoverCard`, (中文(简体) ), `Select`, (中文(简体) ), `Tooltip`, (中文(简体) ), `Accordion`, (中文(简体) ), `Collapsible`, (中文(简体) ), `Skeleton`从框出动画 `styles.css`。 。 。 . **你从来没有 定义密钥框, 添加 `animate-*` 工具,或安装 `tailwindcss-animate` 编号 : `tw-animate-css` 用于此软件包的任意** ——该插件已装入 从主机的 CSS 条目, 这就是为什么四个应用中的三个已经使用 此软件包在每封面上都有零动画, 没有显示错误 (0.10.0) (中文(简体) ). `prefers-reduced-motion` 受报应. 刺激是一种象征性的改变,而不是一种覆盖——设置 `--matrx-motion-duration-fast` 编号 : `-base` 编号 : `-slow` 编号 : `-sheet`, (中文(简体) ), `--matrx-motion-ease-out` 编号 : `-in`,或 `--matrx-motion-popper-travel`对于一个必须立即出现的地表, 通过 `animated={false}`· ; `CollapsibleContent`选择退出会阻止它 剪接它的身体, 对于罕见的面板 与一个孩子必须溢出. **移动是抽水机的工作.** `Drawer` 拥有iOS规则 每一个主机正在重新开发 - `dvh` 永远 `vh`, (中文(简体) ), `pb-safe`编号 :`pt-safe` 44px抓取目标, `DrawerBody` 作为 `flex-1 min-h-0` 卷轴硬-和 `direction` 使上/下抽屉成为道具而不是叉. 每个触控( A)`Slider`, (中文(简体) ), `RadioGroup`, (中文(简体) ), `ResizableHandle`)在粗指针上搭载了隐形的44px目标,而桌面密度未受影响. ```bash pnpm add @ai-matrx/design-system ``` ```tsx import { Badge, Button } from "@ai-matrx/design-system"; Ready ``` 主机形状的系统被注入,从未导入: 包裹子树 in `PortalContainerProvider` 在对话框或弹出体上指向嵌入式波波弗传送门,并手 `OverflowToolbar` 菜单和工具提示系统 `renderOverflowMenu` 编号 : `renderTooltip` 道具来. `@ai-matrx/kit` 是真实的依赖(自动安装). `web-theme.css` 为主机 CSS 构建注册 Tailwind Typology 。 安装 `@tailwindcss/typography@0.5.20` 在任何导入样式表的主机中。 它是一个可选的对等点,所以仅限组件的消费者不会在运行时安装构建插件. ## Styling —— 包装它的 CSS, 主机拥有值 软件包是 **对契约和船舶的看法 需要工作的组件**这是 **没有** 认为你的颜色. ```tsx // app root, once import "@ai-matrx/design-system/tokens.css"; // default token VALUES — override these import "@ai-matrx/design-system/styles.css"; // structural CSS — required ``` ```css /* your Tailwind/CSS entry — FIRST line, before @import "tailwindcss" */ @layer matrx-design-system-tokens, matrx-design-system; ``` - **`styles.css` (必须)** ——每个规则各组成部分需要使权利: 页:1 `.matrx-scroll-fade` 后方的遮盖几何 `useScrollFade`,则 `.matrx-mobile-sheet` 密度重报 `TabbedBottomSheet` 组合 `.matrx-glass-thin-border` 铬, `.pb-safe`, (中文(简体) ), `.shadow-input`它的硬码 无颜色 : 每个颜色从一个符号中解析 . - **`tokens.css` (默认值)** 中性、合理的默认 表示软件包在两个主题中都读取过,所以一个新鲜的应用程序可以正确 **未主题**这不是一个品牌. - **`theme.css` ( Tailwind v4 主机, 可选)** —— 说 `@import "@ai-matrx/design-system/theme.css";` 从您的 Tailwind 条目图中 语义上彩色公用设施(`bg-background`, (中文(简体) ), `text-muted-foreground`, (...) (中文(简体) ) 将数据包构建成扫描源。 一个主机 已经绘制了此词汇( matrx- frontend does, 作为品牌 superset)跳过此文件并保留自己的. **盖取出你的品牌.** 重新宣布任何标志—— `--primary`, (中文(简体) ), `--background`,则 `--matrx-glass-*` 材料,上方的轴线——任何地方 在你自己的CSS系统。 软件包默认存在 `matrx-design-system-tokens` 层和一行 `@layer` 声明 上面把层放在级联的底部,所以 **任意** 东道主 宣告胜出:分层或未分层,前后,无论 具体性。 一次宣布地层顺序, 问题永远不会出现. 尾风 CSS v4 忽略 `node_modules` 默认,所以一个没有 导入 `theme.css` 仍在 Tailwind 旁注册软件包构建 导入 : ```css @import "tailwindcss"; @source "../node_modules/@ai-matrx/design-system/dist"; ``` 工作空间消费者点 `@source` 时间 `apps/shared/design-system/src`。 。 。 . **色彩角色——取出意思,总是用对子自己的文字符号.** - `primary` (蓝色行动) `bg-primary text-primary-foreground`。 。 。 . - `secondary` =安静地GRAY表面(阴影含义) = `bg-secondary text-secondary-foreground`。从没有文本、边框、环或梯度颜色. - `brand-secondary` 苏普莱品牌口音 `bg-brand-secondary text-brand-secondary-foreground`;作为正文/边框/渐变: `text-`编号 :`border-`编号 :`from-brand-secondary`。 。 。 . - `muted` 编号 : `accent` =灰色的行,徘徊,井. `text-muted-foreground` 为安静的文本. - `destructive` `success` `warning` `info` 在页面和卡片上读作TEXT(`text-destructive`并充满他们的 `-foreground`。 。 。 . - 以文字形式表达的语气 `-ink` 符号 : `bg-success/15 text-success-ink`。 。 。 . - 警卫: `token-contrast.test.ts` (每对 ~ 4.5:1, 两个主题)和 `secondary-role.census.test.ts` (不滥用任何包装). ## 释放门 ```bash pnpm --filter @ai-matrx/design-system typecheck pnpm --filter @ai-matrx/design-system test pnpm --filter @ai-matrx/design-system check:package ``` 大门对包装的柏油球进行验证申报和出口,将其安装入一空项目,并进口公共入口. ## 数据表 只有浏览器的表格游戏场有两个明确的预设: **能力实例** 这是它的 示例启动配置,同时 **软件包默认值** 反映表格来源的 默认值。 后者使用正常密度,除非一个宿主提供一个独立的斑马行, 粘贴页眉、视图标签、列大小调整/重排、复制、选择和25行页码; 分组、保存视图、摘要、电子表格、编辑、格式化、造型、侧面、细节和 验证需要配置。 其现状审查和所有人审查意见是: 提供了本地起始示例,使用与用户创建的视图相同的保存视图主机合同. 它们是可编辑的,只在浏览器的本地存储中持续;生产主机拥有 持久存储,授权, 和任何基于数据库的真相. 桌面列默认可以调整 。 可选 `summary` 供应 KPI 工具栏上方的参数和与行下方的列编号对齐的总数. 调用在 pagination 之前接收过滤行, + `isFiltered` 财务报告和审定财务报表 `coverage` (单位:千美元)`all`, (中文(简体) ), `loaded`,或 `page`) (中文(简体) ). 表格上标注了范围,从未 调用集合表示空加载或失败。 保留 stale 行为 标有标签;没有的总量仍然可见。 使用 `summary.source` 仅限 调用器提供的完整源总数; 缺失源值从未被替换 包含已装入页面的汇总. ```tsx summary={{ metrics: [{ id: "amount", label: "Amount", value: ({ rows }) => rows.reduce((n, row) => n + row.amount, 0) }], totals: { amount: ({ rows }) => rows.reduce((n, row) => n + row.amount, 0) }, }} ``` ```tsx import { MatrxDataTable } from "@ai-matrx/design-system/data-table"; import { usePaginatedData } from "@ai-matrx/data/react"; // The caller owns loadPage, source identity, and query state. const pagination = usePaginatedData({ queryKey, initialCursor: 0, loadPage, getRowId }); ; ``` URL/源拥有者可以在不重建表格的情况下控制列:通过 `columnState={{ order, hidden, onChange }}` 财务报告和审定财务报表 `reorderableColumns`编辑 然后将列对话框和页眉拖入 `onChange`。 。 。 . 对话框提供拖动命令和标记箭头控件; 标记列 `hideable: false` 保持可见. 使用应用程序解析的首选项 `scroll`· ; `manual` 总是保留装入 再来 精确页数来源使用 `controlled` 与 `totalItems`; 已满载 客户端数组使用本地模式或 `controlled-local`。部分服务器结果必须 没有声称客户端过滤搜索了整个源。 查询身份必须覆盖 认证、组织、过滤、排序和页面大小。 接收页面加载器 中止符号并返回行,下一个光标(完成时为倒数),以及 可选精确总数。 重复的光标明显会失败而不是循环. 特定框架身份端口通过 `@ai-matrx/design-system/data-table/host`公用事业和类型 导出图中列出的子路径 。 软件包保留副本/子集/导出, 行 窗口、层次、选择、内置编辑和可访问的手工页码. 可编辑的附加表格在 组件寿命。 恢复该身份可恢复其草稿;草稿来自 其他结果提供复制和确认的丢弃,从不针对当前保存 作行相会. 应用程序具有超载的持久性,必须重载表格 当更改经认证的用户时,不会暴露先用草稿. ### 表格行动作 标准 `MatrxDataTable.rowActions` 返回图标描述符,绝不重现内容 : ```tsx rowActions={(row) => [{ id: "inspect", icon: Eye, label: `Inspect ${row.name}`, tooltip: "Open record details", onClick: () => openRecord(row.id), variant: "ghost", tone: "primary", }]} ``` `label` 是可访问的名称和默认的工具提示,而不是可见的按钮文本. `disabled` 财务报告和审定财务报表 `loading` 保留图标按钮;表格拥有密度和大小. `onClick` 接收 按钮事件。 菜单、编辑器或其他反应内容必须 在自己的一栏中宣布: `{ id: "workflow", header: "Workflow", customActions: (row, controls) => }`自定义列载活 记录控件,从不参与排序/过滤/复制/平面表数据,并且不可拖动 (他们的头可能包含控制). 隐藏自定义列也隐藏在移动卡中 。 带有可见自定义一栏的表格绘制 One 动作一栏:行副本在 第一个可见自定义列的开始,内置行动作列仅用于 标准图标 `rowActions` 或窗口按钮。 下 `fitToWidth` 自定义列宽至 其最宽的行条或标题,绝不是缩放的;当它结束行时,它被钉在右边 就像内置专栏. #### 已声明一次行动作, 并附带“ QQ” 溢出菜单 `rowActionDefs` 宣布整个表格的行动一次; `rowActionsInline` 盖数 显示为图标(默认值:无封顶,所以不选入的表格不变)。 第一个N,在 命令,是图标;其余的则在条尾变成一个“qq”菜单,每个项目带有 它的图标和标签。 对一行不适用的动作会被绘制到其槽中(与 `unavailableTooltip`),从未被删除,因此图标排出柱子下. ```tsx rowActionsInline={3} rowActionDefs={[ { id: "track", icon: Radar, label: "Track", appliesTo: (p) => !p.tracked, unavailableTooltip: "Already tracked", onClick: (p) => track(p) }, { id: "open", icon: ExternalLink, label: "Open", onClick: (p) => window.open(p.url) }, { id: "edit", icon: Pencil, label: "Edit", onClick: (p) => edit(p) }, { id: "delete", icon: Trash, label: "Delete", tone: "destructive", onClick: (p) => remove(p) }, ]} ``` `rowActionsInline` 也覆盖平原 `rowActions` 列表中选择一个选项。 播放场 : `?scenario=row-actions-overflow`。 。 。 . #### 保存的视图和列默认值 保存视图( 或 URL 拥有) `columnState`只决定其名称中的列 `order` 或者说 `hidden`。稍后添加或宣布的一栏 `hidden: true`更古老的州从未提及 保留列本身的默认值. ### 钻倒 当一个人需要问"多少,多少,按什么"表时使用: 组为一 尺寸,从顶端绕出第二个, 选择措施,点击一组钻入, 将窗口与以前的窗口进行比较。 每个州都是一个人可以共享的URL. **已装入行——一道道具.** "Loaded"是指COMPLETE设定:来源的每行都是 内 `data`. 在一个部分来源上——服务器定位(`controlled` 编号 : `controlled-append`页:1 `coverage` 或者说 `facets.totalRows` 大于所持行数——表以文字拒绝 ("63 of 4,812,004行加载:组在服务器上")而不是打印任意的计数 正在装入; 使用下面的服务器路径. ```tsx import { MatrxDataTable } from "@ai-matrx/design-system/data-table"; j.id} drill={{ local: true }} /> ``` 尺寸(每行评出毛值文字,是/否,日期与粒相接——绝不是 id或一近同列)和计量(计数;总和、平均值、分数、最大数) 其本身 `format`)推断自 `columns`。表格的搜索和列过滤器缩小 团体数起。 缩小或延长 `drill={{ local: true, dimensions: ["status", "owner"], measures: ["count", "sum_amount"], extraMeasures: [...] }}`; 其他旋钮 : `url` (前缀,默认) `drill`,或 `false`, (中文(简体) ), `timeZone`, (中文(简体) ), `limit` (一组在其它组之前,默认为100), `ceiling` (默认) 5万行——通过表格,并命名了服务器路径;从不默不作声地切入),, `source` (单位:千美元)`{ total }`, (中文(简体) ), `{ paged: true }` 或者说 `{ cap }` 当表不能显示它的部分来源时, `hide` (指示、计量或列键从未提供——不是作为维度、计量或 推定属性). 表格本身的内容是: `coverage.total` 编号 : `matched` 编号 : `cap`, (中文(简体) ), `facets.totalRows`页:1 `controlled-local` 或者说 `controlled-append` 来源的 `sourceProcessing.sourceTotal`和附件 来源的 `pagination.totalItems`. 达到 `coverage.cap` 拒绝( “列表封顶为 200 : 组合在服务器上“”;没有下页的附录源及其总持有量是 COMPLETE 和 组合。 虽然线索缩小了一个完整的列表,但主机的覆盖度并没有被重报为"Filltering" n装入". 其一栏中的推断出指纹 `format` (资金、期限、百分比;a) 空白读作"-",所以 `extraMeasures` 仅用于新的标签或操作。 一项措施可能会说其空白: `nulls: "unknown"` (缺少输入的组读取未知)或 `"count"` (已知部分,然后 “未知”);回答行带 `unknown[measure]`在开发一个层次、一个突破或一个 已命名的维度, 而非维度被警告过一次, 以及栏被丢弃的原因 (近同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同)同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同同 `drillDroppedItems` 返回用于测试的同行. **团体上方的图表? 还有一个选择** (Arman, 2026-10-25: 该图为表的一部分: ```tsx j.id} drill={{ local: true, chart: true }} /> ``` `chart` 实值 `true` 或者说 `{ measure, stack, time, seriesLimit, height }` (单位:千美元)`MatrxDataTableDrillChart`) (中文(简体) ). 栏从组数的同一行计算,所以表格的搜索和过滤缩小 都一样 服务器回答的钻口 `chart` 加号 `chartAnswers` 编号 : `chartError` (两轮) `drillChartQuestions` (计划) 表格从不导入重写: HOST 绑定了一次图表 (单位:千美元)`MatrxDataTableHost.DrillChart = MatrxDrillChart` 从 `./data-table/drill-chart`; 懒惰地装载; 无主机显示“ 图表不可用” 图表将位于何处 。 警卫: `src/data-table/MatrxDataTable.drill-chart.test.tsx`。 。 。 . **服务器上的行 — 已声明的定义 :** (单位:千美元) `*.drill.ts` 定义 `apps/shared/records/scripts/drill-definitions/`读取 `@ai-matrx/records` (单位:千美元)`drillAsk`() ——挂载 `DrillExplorer` (matrx-前端) 或 `useDrill` / 记录- 网格钻 (单位:千美元)`@ai-matrx/records-ui`)),该递桌子 `{ dimensions, measures, question, onQuestionChange, answers }`。同一屏幕;以本地交换服务器更改无用户界面. #### 如何申报水平 钻倒是一个关于你点击的东西的表格,而不是一个列表. 每个维度都可以宣布 其LEVEL外观类似——当地和服务器上相同的形状(`MatrxDrillLevel`: | 密钥 | 手段 | 示例 | | --- | --- | --- | | `breakouts` | 一旦其一个值被钻出(并在行菜单的"突出"中第一个),则作为一击"By..."芯片提供的尺寸引用,顺序 | 人员 + `["provider", "model", "agent", "feature", "conversation", "at:day"]` | | `show` | 组合时显示的措施(一个芯片、小组菜单、钻入其中) | 谈话 ~ `["cost", "calls", "tokens_in", "tokens_out", "started", "last_activity"]` | | `attributes` | 描述 ONE 值的是什么: 列在它分组时, 以及所钻取的值头 。 服务器: 尺寸密钥, 每个组有一个值 。 本地: 任意一列密钥 | 人员 + `["organization"]`;型号 `["provider"]` | | `records` | "参见这些记录"栏目显示于此级别 | 谈话 ~ `["created_at", "agent_id", "cost"]` | 突围可能会命名为 定义的维度, `:` (单位:千美元)`ai_usage_executions:conversation` 由Ai usage的人物, 滚动没有对话。 这个 主机通过 `drill.cross` (单位:千美元)`MatrxDrillCross`数字 : `label(source, ref)` - 维基语录 或无 = 未提供; `open(source, ref, question)` 交换源,按 `ref`,携带 线索和窗口. `parseBreakoutRef` 读取一; `drillLevelProblems(dims, measures, { siblings: { ai_usage_executions: [...keys] } })` 判断它。 钻取其一级价值的地盘 突破( 在宣布路径之后), 等级为 `show`页:1 包含一个地址(`?drill.by=conversation` → `drillQuestionFromParams(params, fallback, prefix, dimensions)`, (中文(简体) ), `useDrillUrlState({ dimensions })`, (中文(简体) ), `drillSettleShow`) (中文(简体) ). `attributes: []` 说一个关卡没有. 已钻取的屏幕本身所做的: 每个页眉数字都有可见的标签; 关系值 (单位:千美元)`entity`)提供其记录门(打开,预览,同类菜单,通过主机 `resolveEntityDoors`)除了它的crumb,在一组行的QQ菜单中,"见记录"列出 值记录; 标签为“ label ” 的两组( 一个属性, 再过一会儿 量子.. `drillDistinctLabels`); 线索过滤器或每个组的属性列 记录列表的过滤、页眉和常数 列; 失败属性已读 (`MatrxDrillAttribute.error`, (中文(简体) ), `MatrxDrillFocusAttribute.error`)为 在峡谷里说 `ErrorBox`,从来没有像"——". 行走选择器 : `data-matrx-drill-group` 编号 : `data-matrx-drill-value` 编号 : `data-matrx-drill-level` (一组行), `data-matrx-drill-into` (它的标签), `data-matrx-drill-breakout` (+ 数) `-breakout-source` 为了一个兄弟, `data-matrx-drill-see-records`, (中文(简体) ), `data-matrx-drill-focus-doors`, (中文(简体) ), `data-matrx-drill-focus-total`, (中文(简体) ), `data-matrx-drill-focus-attribute`, (中文(简体) ), `data-matrx-drill-crumb`, (中文(简体) ), `data-matrx-drill-failed`, (中文(简体) ), `data-matrx-drill-unknown`。 。 。 . #### 组合动作、门、名称、固定过滤器和控件位置 | 选项 | 打开 | 手段 | | --- | --- | --- | | `groupActions(groups)` | a 尺寸 | 在组合行的QQ菜单及其右键菜单中绘制的项目(在 lint 类上“复制修改简报”); 选择器 `data-matrx-drill-group-action` | | `doorFor(value)` | a 尺寸 | 名称组打开的地方: `{ entity, id }` 通过主机 `resolveEntityDoors`,或 `{ href }` (一页). `entity` 单独打开一个值 是一个记录 ID | | `labelFrom` | a 尺寸,或当地 `labelFrom: { owner_id: "owner_name" }` | 列(局部)或维度(服务器, `useDrill`每一值名称都值; `labelFor` 给定时获胜 | | `controls: "toolbar" | "trail"` | 钻孔配置 | 工具栏或自己行中的线索+窗口/计量/分组(`MatrxDrillBar`, (中文(简体) ), `data-matrx-drill-bar`) (中文(简体) ). 默认 `"trail"` 下级 `hideToolbar`,则 `"toolbar"`。 。 。 . `MatrxDrillControls` 是一个页面的自行的三个菜单 | | `base: [{ label, value }]` | 钻孔配置 | 该主机的固定过滤器(一个站点),在线索中首先说成是 crumb 不点击删除(`data-matrx-drill-base`); 主机应用(`useDrill({ base })`(中文(简体) ) | 空白文本值和缺失文本值是 ONE “ 无值” 组, 本地和服务器门中 . 无任何声明=推断:突围是所有其他维度,最少的数值先于,最后于 一天; `show` 是问题本身; 属性( 本地模式) 是具有一个值的列 在每一组人中. 当地——一道道具,按尺寸键: ```tsx j.id} drill={{ local: true, levels: { owner: { breakouts: ["client", "project", "status", "due:month"], attributes: ["team"], show: ["count", "sum_amount"] }, client: { attributes: ["industry"] }, } }} /> ``` 服务器——关于它的维度 `*.drill.ts` (判决人: `platform.drill_definition_problems`· ; `drill_describe` 手放在屏幕上: ```ts { key: "person", label: "Person", from: "person_id", kind: "relation", relation: { token: "user", person: true }, level: { breakouts: ["provider", "model", "agent", "feature", "conversation", "at:day"], attributes: ["organization"] } }, ``` 一个自首的宿主 `drill.attributes` (分组时各栏)和 `drill.focusAttributes` (钻入值头) `MatrxDataTableDrillConfig`,或同为 `attributes` 改为 `MatrxDrillAnswerTable` 财务报告和审定财务报表 `focusAttributes` 编号 : `measures` 编号 : `answers` 改为 `MatrxDrillTrail`。帮助者: `drillWithLevels`, (中文(简体) ), `drillBreakouts`, (中文(简体) ), `drillRegroup`, (中文(简体) ), `drillLevelShow`, (中文(简体) ), `drillLevelProblems` (当地验证人), `drillGroupAttributesLocally`, (中文(简体) ), `drillInferAttributes`, (中文(简体) ), `parseBreakoutRef`, (中文(简体) ), `drillSettleShow`, (中文(简体) ), `drillDistinctLabels`, (中文(简体) ), `drillDroppedItems`。 。 。 . 尝试一下:在http://127.0.0.1:3026/?cenario=drill-level-worse上开放游乐场. (Ada 标题) 和她的筹码, `drill-level-breakout` (按客户分类), `drill-level-attributes` (客户: 他们的行业。 此外,http://127.0.0.1:3026/?cenario=drill-start (中文(简体) )`pnpm demo`; 还 `drill-blocked-by-owner`, (中文(简体) ), `drill-pivot-month`, (中文(简体) ), `drill-chart`, (中文(简体) ), `drill-search`, (中文(简体) ), `drill-partial`, (中文(简体) ), `drill-ceiling`)——任何设置都是链接(其面板中的Copy链接;demo/README.md §Links). 状态 : `common-docs/systems/data/drill-down/STATE.md`。 。 。 . ## 常见问题 ### @ai-matrx/design-system 是什么？ AI Matrx语义反应原生相通于Vite,Next\.js,桌面,以及客户所构建的应用程序\. ### 如何安装 @ai-matrx/design-system？ 在项目目录运行 npm install @ai-matrx/design-system，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=18\.0\.0）、react-dom（\>=18\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。它还提供命令行工具 matrx-check-close-in-flow，可以用 npx matrx-check-close-in-flow 直接运行。 ### @ai-matrx/design-system 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @ai-matrx/design-system 支持 ESM 还是 CommonJS？ 同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。 ### @ai-matrx/design-system 需要什么版本的 Node\.js？ package\.json 的 engines 字段要求 Node\.js \>=20。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。 ### @ai-matrx/design-system 可以商用吗？ @ai-matrx/design-system 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @ai-matrx/design-system 的下载量有多少？ 根据 npm 官方下载统计，@ai-matrx/design-system 在 2026/10/05 – 2026/11/03 这 30 天内被下载 174,463 次，日均约 5,815 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @ai-matrx/design-system 还在维护吗？ 最新版本 0\.86\.407 发布于 2026/10/30（6 天前）；至今共发布 766 个版本，其中过去 12 个月发布了 766 个；首次发布于 2026/08/23。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。