# @\_linked/shape-ui 中文文档

规范地址：https://npmcn.com/package/%40_linked/shape-ui/

版本：2\.9\.5
npm 元数据更新时间：2026-11-02T00:35:46.695Z
中文译文更新时间：2026-11-06T18:55:32.448Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40_linked/shape-ui
原文对照：https://npmcn.com/package/%40_linked/shape-ui/?lang=original
项目主页：https://github.com/linked-fw/shape-ui#readme
源码仓库：https://github.com/linked-fw/shape-ui

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

- 包体积（解压后）：1.2 MB，223 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：5 个
- peer 依赖：react ^18 \|\| ^19，@\_linked/css ^0\.3\.0，framer-motion \>=11，@\_linked/icons ^1\.0\.0，@\_linked/primitives ^1\.2\.0
- 首次发布：2026-09-10T20:48:02.872Z
- 最新版本发布：2026-11-02T00:35:46.227Z
- 近 30 天下载量：2444（2026-10-05 至 2026-11-03，npm 官方下载统计）
- 已发布版本数：25（近 12 个月 25 个）

## 中文简介

由形状驱动的 UI : 编辑器,任意形状实例上的表格,从它的属性衍生出来的窗体,只读视图和关系拾取器——外加通过链接查询DSL的读写路径.

## 安装

```sh
npm install @_linked/shape-ui
```

也可以使用：`pnpm add @_linked/shape-ui`、`yarn add @_linked/shape-ui`、`bun add @_linked/shape-ui`

## README

# `@_linked/shape-ui`

由形状驱动的UI.

每个组成部分都有一个 `Shape` 和属性形状, 并对此进行控制—— 文本 字段、选取器、取枣机、相机。 有用吗 _任意_ 形状,不是已知的,这就是 整个点: 添加属性的应用程序会为此获得一个编辑器而不写入 一个.

```tsx
<TextfieldEditor of={person} property={givenName} />
```

## 其所坐处

| 层 | 软件包 | 已经知道 |
| --- | --- | --- |
| 设计符号 | `@_linked/css` | 无 |
| 无头组件 | `@_linked/primitives` | dOM 和标志 |
| 数据绑定 | `@_linked/react` | 形状和查询; 无部件的船舶 |
| **形状驱动 UI** | **`@_linked/shape-ui`** | 如何制造任意形状 |
| 产品表面 | 应用程序 | 一个产品的域名词汇 |

这里的一切都使 `@_linked/primitives` 控制并添加形状绑定。 没什么 这里知道一个特定的产品.

**保持这一层而不是重建.** 需要形状驱动的产品 字段延伸这里的内容; 应用程序内第二个执行是 同一成分最终存在了三次,然后漂移.

## 东道主

桌子、表格和拾取者问 `DataManagerHost` 对于什么取决于应用程序 在他们周围,供给一次 `<DataManagerHostProvider host={host}>` 并阅读 `useDataManagerHost()`。主机名称没有工程、分支或数据集:查询由 `LinkedStorage`。 。 。 .

| 成员 | 需求 | 它是为了什么 |
| --- | --- | --- |
| `resolveShape(iri)` | 对 | 一个形状的线元数据,用于显示和一个字段或窗体使用的形状 |
| `resolveCatalog()` | 没有 | 每个形状的线元数据; `sh:class`\- 只有他们之间的关系才能解决 |
| `resolveShapeCatalog()` | 没有 | 页:1 `ShapeCatalog` 每个查询都建在( 下面) |
| `dataRoot` | 用于创建 | 以 IRI 为底点的新实例 |
| `searchInstances`, (中文(简体) ), `createInstance`, (中文(简体) ), `updateInstance` | 没有 | 缺席时从 DSL 中填入 |
| `readInstance`, (中文(简体) ), `inlineCreate`, (中文(简体) ), `navigate`, (中文(简体) ), `picking` | 没有 | 特定主机读取和流量 |

**哪个形状的查询解决了.** 无 `resolveShapeCatalog`默认值 搜索、创建和更新他们在核心全球登记册中解析的形状 (单位:千美元)`registerRuntimeShapes`),它适合一个具有一组形状的应用程序. 一个服务于 返回 a `ShapeCatalog` (单位:千美元)`@_linked/core`(中文(简体) ) 改为:

```ts
import {ShapeCatalog} from '@_linked/core/utils/ShapeCatalog';

const host: DataManagerHost = {
  dataRoot,
  resolveShape: async (iri) => wires[iri],
  resolveCatalog: async () => wires,
  resolveShapeCatalog: async () => ShapeCatalog.from(wires, {name: `${project}#${branch}`}),
};
```

提供者每个主机对象要求一次( 重试一个拒绝, 如 `resolveCatalog`) (中文(简体) ). 每一个默认值然后在内部构建查询 `withShapeCatalog(catalog, …)` 并且没有注册。 在目录装入时打个电话等待它;在它之后 失败时, 电话会拒绝, 而不是退回登记。 另一个范围的主机 必须是新对象. `useHostShapeCatalog()` 返回已装入目录,用于查询 一个主机自称: `selectInstances`, (中文(简体) ), `selectInstance`, (中文(简体) ), `searchInstancesWithDsl`, (中文(简体) ), `createInstanceWithDsl` 财务报告和审定财务报表 `updateInstanceWithDsl` 每一个 `{catalog}` 作为他们最后的 参数.

**所传田地.** 一个主机的电线列出一个形状 继承的财产形状旁边的 自己可以标记每个继承的 `inheritedFrom: {id}`,其形状为宣布 这个. `AddInstanceForms` 财务报告和审定财务报表 `EditInstanceForms` 然后在字段标签下命名形状 在“添加可选字段”菜单(“从动作”中)中,按其标签排列 `allShapes` 否则,最后 (b) 其IRI部分内容. `inheritedFromName(property, shapes)` 给与同一个名字.

## 测试

```sh
npm test
```

贾斯特,完毕 `src/**/*.test.ts` 财务报告和审定财务报表 `src/**/*.test.tsx`CI在每一个公关上运行.

## 为什么名字变了

这个包裹是 `@_linked/ui`。这个名字只说“不是后端”——信息最少 为最需要说明合同的层提供的标签. `shape-ui` 说 何为.

## 常见问题

### @\_linked/shape-ui 是什么？

由形状驱动的 UI : 编辑器,任意形状实例上的表格,从它的属性衍生出来的窗体,只读视图和关系拾取器——外加通过链接查询DSL的读写路径\.

### 如何安装 @\_linked/shape-ui？

在项目目录运行 npm install @\_linked/shape-ui，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^18 \|\| ^19）、@\_linked/css（^0\.3\.0）、framer-motion（\>=11）、@\_linked/icons（^1\.0\.0）、@\_linked/primitives（^1\.2\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @\_linked/shape-ui 支持 TypeScript 吗？

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

### @\_linked/shape-ui 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @\_linked/shape-ui 可以商用吗？

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

### @\_linked/shape-ui 的下载量有多少？

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

### @\_linked/shape-ui 还在维护吗？

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