# @bsuite/page-builder 中文文档

规范地址：https://npmcn.com/package/%40bsuite/page-builder/

版本：2\.8\.4
npm 元数据更新时间：2026-11-08T03:28:38.813Z
中文译文更新时间：2026-11-08T17:21:47.531Z
软件包许可：UNLICENSED

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

原始 npm 页面：https://www.npmjs.com/package/%40bsuite/page-builder
原文对照：https://npmcn.com/package/%40bsuite/page-builder/?lang=original
项目主页：https://github.com/Arcane-Fly/bsuite#readme
源码仓库：https://github.com/Arcane-Fly/bsuite

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

- 包体积（解压后）：416 kB，81 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：react \>=18 \<21，react-dom \>=18 \<21，lucide-react \>=0\.400\.0，@bsuite/theme \>=0\.7\.0 \<2，@dnd-kit/core ^6，react-resizable ^3 \|\| ^4，@dnd-kit/sortable ^10，react-grid-layout ^2，@dnd-kit/utilities ^3
- 首次发布：2026-04-27T11:12:45.389Z
- 最新版本发布：2026-11-08T03:28:38.658Z
- 近 30 天下载量：3324（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：68（近 12 个月 68 个）

## 中文简介

共享 BSet 响应页面构建器网格和布局持久性原始

## 安装

```sh
npm install @bsuite/page-builder
```

也可以使用：`pnpm add @bsuite/page-builder`、`yarn add @bsuite/page-builder`、`bun add @bsuite/page-builder`

## README

# @bsuite/页面构建器

共享 BSuite 响应页面构建器网格原始.

输出 :

-   `PageGridLayout`
-   `usePageGridLayout`
-   `rescaleLayout`
-   `computeAutoHeightRows`
-   `GridLayouts`, (中文(简体) ), `GridLayoutItem`, (中文(简体) ), `WidgetMeta`类型

消费者应用必须依赖于已发布的 npm 软件包,而不是 `workspace:*` 或者说 `file:` 链接,因为每个应用程序独立部署.

编辑班纳焦点揭示,扩展控制取景口盖,编辑班纳焦点环 padding 发布为 `2.8.4`。 。 。 .

## 测量自重(`autoHeight`,0.5.0+) (中文(简体) )

通过设置将部件切入内容驱动的高度 `autoHeight: true` 联 合 国 `GridLayoutItem`数字 :

```ts
const defaultLayouts: GridLayouts = {
  lg: [
    // Fixed card — user resizes it manually, height persists.
    { i: 'summary', x: 0, y: 0, w: 6, h: 8 },
    // Measured card — height tracks rendered content; `h` is only the
    // initial seed used until the first measurement lands.
    { i: 'details', x: 6, y: 0, w: 6, h: 20, autoHeight: true },
  ],
};
```

行为和保障:

-   A 类 `ResizeObserver` 在不受约束的计量包装器上读取内容 内在高; `computeAutoHeightRows` 使用 不变 `rowHeight`编号 :`margin` 网格由网格制成,所以环相通 固定点而不是斜向.
-   自动加高器件 `isResizable: false` 自动——不要 也可以为它们编织一个手动调整大小的路径.
-   测量行是 **生成, 仅包含记忆状态**: 合并到已保存的部分 每个查看器在渲染时的布局,以及 **从来没有坚持过**A级 只读查看器切换卡片中的标签产生零偏好 写作。 用户驱动 `x`编号 :`y`编号 :`w` (和 `h` 非自动八项) 持久性不变.
-   更新为 raAF- bridged (所有在框架内安放的卡片都作为一个国家适用) 更新)并压制了中拖/中缩放,再在手势端被冲出.

添加时 `autoHeight` 到一个已有的页面布局,将该页面的 `layoutVersion` 因此 stale 坚持的布局(没有旗帜)被重置.

## 编辑-模式铬 (2.7.1-next.0+)

`PAGE_GRID_EDITING_EVENT` 报告的变动情况 `2.7.1-next.1`。 。 。 . 内容 `{ pageKey, editing }` 有效载荷和事件名称不变。 匹配 画布 DOM 在听众运行前更新, 包括保存和退出使用时 a 反应过渡。 初始升起、状态不变和已放弃的过渡 不发出通知。 消费者必须匹配页面密钥并保存 在同步其头控件时注重幸存输入.

从 `2.7.1-next.5`,一个标题保存退出调度( E) `PAGE_GRID_SAVE_EVENT` 与 `{ pageKey }`。帆布会等待所有的首选适配器,并保持它的 在失败时可见控制和出错,并释放已承诺的编辑 通知成功与否。 信头在清除前等待通知 编辑模式。 现有的开放/关闭事件仍可供路线导航.

选定深度显示单独休息、光互动和暗互动 阴影变量。 光相互作用添加中性高; 暗相互作用 在保留所选深度的同时,添加角色约束的发光. 明确为零 保持平稳。 消费者必须读取所有三个变量; 拥有铬的网格项目 已经做了。 默认所画的网格卡现在使用中性高地 2, 使用 交互反馈,匹配D2C卡恢复.

从 `2.7.1-next.6`,应用程序卡导入 `useCardPadding` 财务报告和审定财务报表 `CardPaddingBoundary` 从 `@bsuite/page-builder/card-padding`。阅读 在渲染出卡片前设置,将定义值应用到所绘表面, 并用没有垫子的分界线包裹其子孙。 那么内卡 保持它们的相距;一个被嵌入的网格会建立它自己的独立内置. 电网不会给孩子造成困扰 当它自己涂上铬时 此替换 消费者服务 `@scope` 规则,不包括支持的 Safari/Firefox 基线。 子路径将一个独立的卡导入从网格代码中分离出来.

当画布编辑器打开时, 每个网格项都会产生入流条 (单位:千美元)`[data-slot="grid-item-editor-chrome"]`在卡片内容上方:部件 名称和一个隐藏控件。 条子是 **没有** 绝对位置在 牌头。 AutoHeight用内容测量,使电网增长; 离开编辑模式将其删除并恢复仅包含内容的测量. 在消费者中不要重塑这种形式——这是共同合同.

**图层:上行/下行.** 在(上)或 在(下)其最近的可移动相邻按网格 DRAWS 顺序后:上至 底部,然后从左到右,在反应-网格-放出压缩了布局后。 这个 已保存的更改 `x`编号 :`y` 在作者单位中,没有其它:大小、旗帜、隐藏 牌,被锁的牌和不需要移动的每张牌都保存保存 价值,以及 `_grid_base_cols` 别动 图层面板、 移动按钮和 dOM / 标签顺序都遵循已绘制的顺序 。 锁定、删除、添加和压缩 在同一作者布局上的布局 。 Contract 使用反应- 网格放出 压缩机和锁上卡片的位置.

限制,说明而不是隐藏:

-   锁定的卡片( E)`static` 或者说 `isDraggable: false`)从不动和走步 过它. `isResizable: false` 一个人不是锁.
-   隐藏或没有内容的卡既不是合伙人也不是障碍.
-   其他牌只有在交换时才会移动;它们被推出 下来,永远不要调整大小。 如果没有重叠或锁上卡片的交换方式, 移动被拒绝, 什么都没有写, 和残疾按钮说明原因.
-   单列电话堆栈( U)`xxs`,在 480px 下显示容器 相同的顺序:在测量高后,从所绘制的顺序重新排列出来, 仅用于显示。 用户的电话布局 `defaultLayouts` 实值 在作者默认对象生效时保持给定。 版本门 第一次访问时可能持续默认值;在重新装入之后读取 计数为存储布局。 一旦读取存储的布局,其 `lg` 替换它,钩子 滴数 `xxs` 在读取时,电话堆栈被衍生出来,然后再次重装。 这个 公开 `buildResponsiveLayouts` 推论不变.
-   重新排序 DOM 中的现有网格项目( 保留输入状态); 内嵌 `iframe` 在重新装入的卡片中更改位置, 就像它那样 上一个移动.

标签带有 `min-w-0 truncate` (单位:千美元) `title` 与全名. 这是 在窄卡上装入,而不是装饰:没有它标签的自动 最小大小是它的分量,一个长而未断的部件名称会推动 `ml-auto` 隐藏卡盒外的按钮。 双向测量 `scripts/editor-chrome-geometry.mjs`,它复制 缺陷与两者 运行时取消课程.

## 常见问题

### @bsuite/page-builder 是什么？

共享 BSet 响应页面构建器网格和布局持久性原始

### 如何安装 @bsuite/page-builder？

在项目目录运行 npm install @bsuite/page-builder，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=18 \<21）、react-dom（\>=18 \<21）、lucide-react（\>=0\.400\.0）、react-resizable（^3 \|\| ^4）、react-grid-layout（^2）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @bsuite/page-builder 支持 TypeScript 吗？

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

### @bsuite/page-builder 支持 ESM 还是 CommonJS？

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

### @bsuite/page-builder 可以商用吗？

@bsuite/page-builder 使用 UNLICENSED 许可。作者声明为 UNLICENSED，即不授予公开使用许可（与公共领域的 Unlicense 不同）。使用前需获得作者授权。以上为概括，不构成法律意见，请以许可原文为准。

### @bsuite/page-builder 的下载量有多少？

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

### @bsuite/page-builder 还在维护吗？

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