# @ai-matrx/records-ui 中文文档

规范地址：https://npmcn.com/package/%40ai-matrx/records-ui/

版本：0\.116\.126
npm 元数据更新时间：2026-10-30T12:35:04.253Z
中文译文更新时间：2026-11-05T18:04:09.553Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40ai-matrx/records-ui
原文对照：https://npmcn.com/package/%40ai-matrx/records-ui/?lang=original
项目主页：https://github.com/AI-Matrix-Engine/aidream/tree/main/apps/shared/records-ui#readme
源码仓库：https://github.com/AI-Matrix-Engine/aidream

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：27.1 MB，114 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=20
- 运行依赖：7 个
- peer 依赖：react \>=18\.0\.0，recharts \>=3\.0\.0，react-dom \>=18\.0\.0，@dnd-kit/core \>=6\.3\.1，@dnd-kit/sortable \>=10\.0\.0，@dnd-kit/utilities \>=3\.2\.2，@tanstack/react-query \>=5\.100\.0
- 首次发布：2026-09-19T07:34:51.812Z
- 最新版本发布：2026-10-30T12:35:04.030Z
- 近 30 天下载量：107469（2026-10-05 至 2026-11-03，npm 官方下载统计）
- 已发布版本数：507（近 12 个月 507 个）

## 中文简介

AI Mattrx唱片商店的31个犬形屏幕:网格、生成记录表、字段编辑器、表格设置、关系拾取器、取取、查看、导入/导出、自定义字段、动作收件箱、历史、评论、表格、图表、文档、记录聊天、A

## 安装

```sh
npm install @ai-matrx/records-ui
```

也可以使用：`pnpm add @ai-matrx/records-ui`、`yarn add @ai-matrx/records-ui`、`bun add @ai-matrx/records-ui`

## README

# @ai-matrx/ records-ui (英语)

该平台的主要唱片UI组件. 这里的每个组件读取 仅写通过 [`@ai-matrx/records`](https://npmcn.com/package/%40ai-matrx/records/README.md)时 `@ai-matrx/design-system`自己的原始和数据表,并携带 `@ai-matrx/alchemy`单子,一个人到达一个.

在这个平台上没有每个地物的发言权。 需要的特性 网格、窗体、取取器或取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取 几行线.

## 捆绑一次

```tsx
import { RecordsProvider } from "@ai-matrx/records/react";
import { RecordsUiProvider } from "@ai-matrx/records-ui";
import "@ai-matrx/design-system/styles.css";

<RecordsProvider config={{ dataSource: supabase, organizationId, actor: { actor: "user", user_id } }}>
  <RecordsUiProvider value={{ rights: (table) => myRights(table), density: "condensed" }}>
    {children}
  </RecordsUiProvider>
</RecordsProvider>;
```

`rights` 是决定一个人是否看到管理者的港口 控制系统。 不受限制,它回答"不" 有原因, 并且每一个这样的控制是 ABSENT——这个包件船没有其中任何一种残废的变体.

## 然后,每行数行

```tsx
import {
  Grid, RecordForm, FieldEditor, TableSettings, RelationPicker,
  Peek, ImportWizard, ExportMenu, CustomFieldsSection,
} from "@ai-matrx/records-ui";

<Grid tableId={id} onOpenRecord={setPeeking} onAddField={openSettings} />           // records as rows, fields as columns
<RecordForm tableId={id} />                                                          // create, generated from the Field records
<RecordForm tableId={id} recordId={recordId} />                                      // edit, with the conflict shown when someone wins
<Peek tableId={id} recordId={recordId} onClose={close} />                            // any custom table's record, no per-table code
<TableSettings tableId={id} />                                                       // rename · reorder · retype · delete
<FieldEditor tableId={id} field={field} />                                           // one Field's type, rules and sensitivity
<ImportWizard tableId={id} onProposeField={propose} />                               // map columns, preview rows, propose the rest
<ExportMenu tableId={id} label="Deals" />                                            // CSV · XLSX · Alchemy
<CustomFieldsSection tableId={entityTableId} recordId={record.id} />                 // THE one line a standard entity page adds
```

`RelationPicker` 用于 `RecordForm` 自动用于任意 `relation` 字段; 当屏幕只需要取取器时直接挂起它 .

## 视图、队列、历史和评论

```tsx
<ViewBar tableId={id} onActiveView={setView} seed={[{ name: "By stage", subject: id, layout: "kanban", groupField: "stage" }]} />
<ViewSwitcher view={view} />                                                         // grid · kanban · calendar · gallery, one membership Rule
<ActionInbox tableId={id} seed={[...]} />                                            // approvals, assignments and agent proposals, one queue
<HistoryPanel tableId={id} recordId={recordId} />                                    // the timeline IS the record; undo is the store's soft delete
<CommentThread tableId={id} recordId={recordId} />                                   // a comment is a record
<FormBuilder tableId={id} seed={[form]} />  <FormRunner form={form} />               // a form is a view on a real Table
<DashboardCanvas tableId={id} seed={[dashboard]} />  <ChartBlock spec={chart} />     // every block is one `record_aggregate`
<NotifyRuleEditor tableId={id} />                                                    // a subscription is a Rule record over a saved view
<DocTemplate tableId={id} seed={[tpl]} />  <DocRender templateId={t} recordId={r} /> // tokens resolved by the store
<SignBlock tableId={id} recordId={r} render={render} />                              // the signature is checked against the exact bytes
```

## 说到唱片,让经纪人保持它充满

```tsx
<RecordChat tableId={id} recordId={recordId} />                                      // the HOST's chat surface, this record as its context
<EnrichPanel tableId={id} recordId={recordId} />                                     // per-field AI fill, freshness and provenance
```

`RecordChat` 船舶 **无聊天 UI**. AI Matrx有一个—— matrx前端的 `AgentConversationColumn` 它读到应用程序的Redux商店, 所以一个包 输入它就会不再是一个包裹, 和第二个在这里漂浮 一个月之内. `RecordChat` 构建仅记录存储可构建的部分 : 通过读取门读取的记录,每个值都带有其字段的单位和 格式( 提供代理 `$48,000`从不裸露 `48000`),字段为 存储 MASCKED 大声命名 `secret` 财务报告和审定财务报表 `on_demand` 挡住的 与缘由. 然后它把它交给 `chat` 端口 :

```tsx
<RecordsUiProvider value={{
  chat: (ctx) => {
    const { conversationId } = useAgentLauncher(agentId, {
      surfaceKey: ctx.surfaceKey,
      runtime: { context: Object.fromEntries(ctx.entries.map((e) => [e.key, e.value])) },
    });
    return <AgentConversationColumn conversationId={conversationId} surfaceKey={ctx.surfaceKey} />;
  },
}}>
```

通过一个 **任务**从来没有钉住UUID。 不受约束, 面板 以理由缺席,不画作曲.

`EnrichPanel` 读取代理从字段填充的字段 个人(`source = agent`以及从何时开始 `review_interval_days`,以及 将每个值从自己的信封中取出 `updated_at`,哪个 因为其中一个地方变了 所以会叫每个地方都变了 填满自己去 通过 **服务器 `records` 工具**因为一个被盖章的演员 `agent` 代表一个人只能由服务器诚实地制作:

```tsx
<RecordsUiProvider value={{
  enrich: (ask) => fetch("/api/ai/tools/execute", { method: "POST", body: JSON.stringify({
    tool_name: "records", surface: "records-ui:enrich",
    arguments: { action: "record_write", record_id: ask.recordId, values: {/* the agent's answers */} },
  })}).then((r) => r.json()).then((r) => ({ ok: r.ok, message: r.output })),
}}>
```

两个开关今天坐在电话前 面板都叫两个 而不是旋转:接头 `custom/code_paths_enabled` 解决错误,和 页:1 `records` 排成一行 `tool.binding` 实值 `is_active = false`。 。 。 .

## 工作:核对表、预订和没有信号的电话

```tsx
<ChecklistRunner tableId={id} seed={[{ name: "Onboarding", subject: id, steps: [{ title: "Confirm the address" }] }]} />
<BookingSlots tableId={id} form={bookingForm} availability={{ fromHour: 9, toHour: 17, everyMinutes: 60, days: 5 }} />
<CaptureSheet tableId={id} readingField="amount" noteField="title" />
```

`ChecklistRunner` 使每一步成为 **真实记录** 可转让、可评论, 可出口的、具有历史意义的——整个图由单一行为创造 (单位:千美元)`custom.work_template_instantiate` 在写任何一篇之前,先判断它 半成品的核对表不是这家商店可以进入的状态。 各州和 提供的移动来自 `custom.work_states()`; 商店不列出移动 下一个不显示灰色,它不存在.

`BookingSlots` 握住空档 **第一个** 接下来是细节 细节首先是两个人如何填表 其中一人发现 结束。 每个插槽有一个被扣是数据库中的 UNIQUE INDEX,而不是检查这个 屏幕制作,所以一个种族的失败者读取数据库本身的句子命名 拒绝的指数。 保存在一个槽中 结束 `custom.work_slots_declare`; 如果商店无法构建索引 拒绝,而这个屏幕显示拒绝 而不是一个采摘者将出售 同一个小时两次.

`CaptureSheet` 是离线捕捉合同, 并且两者都减半 事项: **客户端 薄荷 id** 人一触即发——离线 第一次尝试,永远不要重新考虑再试验 **店铺的破烂**,所以一个 重新连接同一捕捉器的电话 写了30次记录 每次都得到同样的身份证明 捆绑 `captureQueue` 以保留队列 被重新装入; 不装入, 它在记忆中的 页面的生命,并这样说.

## 外人:门户、公共网页、嵌入式

```tsx
<PortalShell tableId={id} form={intakeForm} />                                       // their list, their record, their form
<PublicViewPage slug={params.slug} />                                                // a signed-out visitor's page
<EmbedFrame tableId={id} formId={formId} embedUrl="https://app.example/embed" />     // issue the token
const { binding, error } = useEmbedHandshake({ secret, requiredMode: "read" });       // and verify it, inside the iframe
```

`PortalShell` 询问 `iam` 此人不是自己决定: "外部"是指没有成员 **非个人** 组织,因为 注册薄荷,每个人都是个人的 另一本读物就没人了 外为. 他们能达到的就是 `iam.external_principal_reach` - 准确的说 资源 idsicity 一次一次递给他们,从未"他们 组织记录".

`PublicViewPage` 使出版物具有约束力 **共享不是出版物**页:1 地址,无人制造, 一个被撤销, 一个其车道关闭 全部解决 因为一个地址对被撤销的地址有不同的回答 约束将是一个存在论者。 每个读数都带商店的 "没有被扫描"注解(D-15)——一个功能,所以页面,API和收录 排成一行不能变成三个不同的录取点。 到达出版的快乐 路径需要请求命名空间 **和经核实的出版商**,是个人 站在开放的互联网背后 而不是屏幕可能伪造的东西.

`EmbedFrame` 薄荷通过一个符号 `custom.anon_token_issue`显示秘密 **一次** (只储存其摘要),并在拒绝之前说明规则:a 符号带有一个决定——读取或写出,从不同时写出——它的出处列表是: 需要并准确匹配,所以 `example.com.evil.test` 检查后缀失败 比赛会通过.

## 每一个都一样

-   **店自有句.** 拒绝从未重新措辞。 "别人 当你在做这个工作时 改变了这个记录", 因为店里是这么说的 冲突就随着它而来 字段.
-   **缺席 从不死.** 一个人不得使用的控制是不能提供的。 那边 在此软件包中,没有禁用"+",也没有灰色设置面板.
-   **A Field决定它的编辑.** 13个对等类型来自商店 (单位:千美元)`custom.parity_field_types()`),生成为 `@ai-matrx/records`单位 而格式则出现在字段上,因为它们会改变数值的含义.
-   **什么都没有悄悄地掉下来.** 显示未映射的导入列 (b) 一份没有实况报道的清单 尚不存在的车道被命名.
-   **深色,一行头,光和暗,iOS安全**,通过设计 系统本身的符号——这个软件包没有设置自己的颜色.

## 演示

`pnpm demo` 运行每个组件对 **一个活店**无头,打开 该车道的自有港口(127.0.0.1:305),并站起自有的站台、田地和 记录它第一次运行。 它的数据接合是平台的服务器道 在打开产品开关的每个请求中 作为测试身份( e)`test@test.com`通过商店的自有门,并设置 在承诺之前,每个开关都退后,所以没有其他会话能观察到 打开. `pnpm test` 使jsdom中的相同页面与服务器相对 说一个人会看到什么.

它故意读到现场商店: `custom.anon_*`,嵌入的标志 外部主机和出版物装订只存在在那里,演示指向 排练时会回答 `door_absent` 包的三分之一和 把它称为一个发现.

## 31个组成部分

|  |  |  |
| --- | --- | --- |
| `Grid` | `RecordForm` | `FieldEditor` |
| `TableSettings` | `RelationPicker` | `Peek` |
| `ViewSwitcher` | `ViewBar` | `ImportWizard` |
| `ExportMenu` | `CustomFieldsSection` | `ActionInbox` |
| `ProposalRow` | `HistoryPanel` | `CommentThread` |
| `FormBuilder` | `FormRunner` | `ChartBlock` |
| `DashboardCanvas` | `NotifyRuleEditor` | `DocTemplate` |
| `DocRender` | `SignBlock` | `RecordChat` |
| `EnrichPanel` | `ChecklistRunner` | `BookingSlots` |
| `CaptureSheet` | `PortalShell` | `PublicViewPage` |
| `EmbedFrame` |  |  |

## 图标

| 命令 | 它会做什么 |
| --- | --- |
| `pnpm demo` | 每个组件,在排练分支上直播,无头 |
| `pnpm test` | 演示页毫无头绪 |
| `pnpm build` | {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}你来干什么 `dist` (sm + cjs + d.ts),然后是客户端边界印章 |
| `pnpm check:package` | · 出口协议 |

## 常见问题

### @ai-matrx/records-ui 是什么？

AI Mattrx唱片商店的31个犬形屏幕:网格、生成记录表、字段编辑器、表格设置、关系拾取器、取取、查看、导入/导出、自定义字段、动作收件箱、历史、评论、表格、图表、文档、记录聊天、A

### 如何安装 @ai-matrx/records-ui？

在项目目录运行 npm install @ai-matrx/records-ui，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=18\.0\.0）、recharts（\>=3\.0\.0）、react-dom（\>=18\.0\.0）、@dnd-kit/core（\>=6\.3\.1）、@dnd-kit/sortable（\>=10\.0\.0）、@dnd-kit/utilities（\>=3\.2\.2）、@tanstack/react-query（\>=5\.100\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @ai-matrx/records-ui 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @ai-matrx/records-ui 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @ai-matrx/records-ui 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=20。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @ai-matrx/records-ui 可以商用吗？

@ai-matrx/records-ui 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @ai-matrx/records-ui 的下载量有多少？

根据 npm 官方下载统计，@ai-matrx/records-ui 在 2026/10/05 – 2026/11/03 这 30 天内被下载 107,469 次，日均约 3,582 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @ai-matrx/records-ui 还在维护吗？

最新版本 0\.116\.126 发布于 2026/10/30（6 天前）；至今共发布 507 个版本，其中过去 12 个月发布了 507 个；首次发布于 2026/09/19。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。