# @fungi\.computer/maosaico 中文文档 规范地址：https://npmcn.com/package/%40fungi.computer/maosaico/ 版本：0\.1\.2 npm 元数据更新时间：2026-11-09T05:35:40.100Z 中文译文更新时间：2026-11-15T19:12:18.968Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40fungi.computer/maosaico 原文对照：https://npmcn.com/package/%40fungi.computer/maosaico/?lang=original 项目主页：https://github.com/fungi-computer/maosaico#readme 源码仓库：https://github.com/fungi-computer/maosaico ## 关键信息（来自 npm 元数据） - 包体积（解压后）：77.2 kB，23 个文件 - 模块格式：ES Module - TypeScript 类型：包内自带 - 运行依赖：1 个 - peer 依赖：react \>=17 - 首次发布：2026-10-15T07:59:53.595Z - 最新版本发布：2026-11-09T05:35:39.808Z - 近 30 天下载量：4771（2026-10-16 至 2026-11-14，npm 官方下载统计） - 已发布版本数：5（近 12 个月 5 个） ## 中文简介 容器相对布局和指针所有权 ## 安装 ```sh npm install @fungi.computer/maosaico ``` 也可以使用：`pnpm add @fungi.computer/maosaico`、`yarn add @fungi.computer/maosaico`、`bun add @fungi.computer/maosaico` ## README # 毛萨伊科`@fungi.computer/maosaico`(中文(简体) ) Maosaico在量度容器内安排反相板. 它支持浮动 框架和可选的平板,同时保留窗格内容、样式、控件和 DOM关注主机. ## 安装或设置 ```sh npm install @fungi.computer/maosaico react react-dom ``` Maosaico需要React 17 或 更新为同伴依赖. 软件包导出 `MaosaicoRoot`, (中文(简体) ), `useMaosaicoItem`, (中文(简体) ), `useMaosaicoLayout`, (中文(简体) ), `MaosaicoLayers`, (中文(简体) ), `useLayer`,以及 `usePointerDrag` 从 `@fungi.computer/maosaico`。 。 。 . `usePointerDrag` 提供俘获的DOM道具 来电手势. 内容 `move` 回调收到增量像素三角洲; 取消并卸载 释放相同的捕获。 可选的第三个 `AbortSignal` 让呼叫者取消 一种姿态; 逃生政策留在呼叫者手中。 格罗夫用它与盖子 `ResizeHandle` 而不引入竖起的根 一个侧边栏宽度. ## 快开始 这个示例记录了窗帘,并要求Maosaico将其打入 提供的界限 : ```tsx import { MaosaicoRoot, useMaosaicoItem } from "@fungi.computer/maosaico"; function Pane({ id }: { id: string }) { const pane = useMaosaicoItem({ id, frame: { x: 0, y: 0, width: 320, height: 240 }, minima: { width: 180, height: 120 }, }); return ( ); } function Workspace() { return (
); } ``` 这个草图是说明性的;布局测试练习了公共反应边界 和窗格注册 [`test/tiling.test.tsx`](https://npmcn.com/package/%40fungi.computer/maosaico/test/tiling.test.tsx)。 。 。 . ## 核心概念 `MaosaicoRoot` 拥有一个根的布局状态。 通过当前容器大小 作为 `bounds`没有 `tiling`,窗帘使用浮动相框。 与 `tiling`选择 `layout: "main-left" | "main-top" | "columns" | "rows" | "grid"`。 。 。 . `main-left` 实值 默认值:第一个面板是旁边的主面板和相伴堆放. `main-top` 将主窗帘置于同伴之上 喜欢的 `mainSize` 实值 主要宽度或高度,分别被夹到平面上并可用 空格; 这些布局会显示一个可拖动的分隔符 . `columns`, (中文(简体) ), `rows`,以及 `grid` 使用等单元格并忽略 `mainSize`他们已经 无主分法. 网格从平方开始接近平方,并适应 容器容量。 平面布局保留了主牌和组外溢 最后的细胞,显示该组最近的焦点面板。 微型账户 对于一个组的每个成员,所以更改其活动标签不移动单元格. 如果一个最小值不能匹配, 一个全容器标签组会保存一个窗帘 可读取. 呼叫者从 `tabGroups`; 隐藏的窗格保持挂载. `useMaosaicoItem` 登记身份、起始框架和最小尺寸。 这个 返回绑定提供了当前框架、能见度、活动状态、拖动 道具,还有 `focus`, (中文(简体) ), `snap`,以及 `restore` 行动。 保持按键内容挂载 当窗格被隐藏时; 应用 `hidden={!visible}` 因此隐藏内容会留下输入 和无障碍导航。 关闭窗帘意味着把它从挂起 列表中选择一个选项. ### 壳层 `MaosaicoLayers` 使五个与世隔绝的同父异母的树根被覆盖: `chrome`, (中文(简体) ), `popover`, (中文(简体) ), `dialog`, (中文(简体) ), `toast`, (中文(简体) ), `tooltip`把它挂在外壳的位置上 容器,外侧被剪的相片。 主机加载了 Stipe 的样式表; Maosaico 消耗其分层符号。 重叠根为指向透明; 设置 `pointerEvents: "auto"` 内容. `MaosaicoRegion` 供应 `desktop` 财务报告和审定财务报表 `windows` 层在主机中 定位工作区。 它转发了普通的地盘属性和一个参考者,保留 主机的定位样式,并拥有孤立和地层符号. 内部 `MaosaicoLayers`,它也登记该地区 `useLayer`。窗口区域 当对话框根包含被绘出的内容时为惰性; 关闭对话框 释放它而不重载窗口或桌面内容. `useLayer("popover")` 返回最近的提供者的门户容器。 没错 `null` 直到根挂起, 在服务器渲染时。 在提供者之外 它会返回 `document.body`,所以独立覆盖保留一个普通的门户 集装箱。 将容器传递给维护的上盖原始, 或使用回放 DOM的电话 `createPortal`选择一层不执行定位, 轻而易举,焦点陷阱 或iframe 隔离. 将窗口内容放入 `` 合并 绑定 `stackingStyle` 进入每个窗口的样式。 它的等级很密集,开始 ,并遵循布局所有者的重点顺序. `useMaosaicoLayout().stackingStyle` 直接排列分隔符和坐标装饰符 在同一区域内的窗口之上。 随意地,许多军衔都留在下方 `chrome` 因为窗口根拥有其堆叠上下文。 每个外壳 根和窗口顺序是独立的; 门户内容在 其他地层根会改变. `useMaosaicoLayout` 提供焦点和交换命令,缩放和还原,平板 顺序、分页组、分页交互和待补信息。 通过 a `containerRef` 相对于定位工作空间的边缘突起,例如 工具栏下方的工作台. ## API 参考 见生成 [API 参考](https://npmcn.com/package/%40fungi.computer/maosaico/docs/api/README.md) 与公众 [出口和类型](https://npmcn.com/package/%40fungi.computer/maosaico/src/index.ts). 国家等执行细节 藏品仍为私人收藏. ## 实例和检查 这个 [共享工作台中的布局/ 自动铺设](https://npmcn.com/package/%40fungi.computer/caps/workbench/maosaico.stories.tsx) 显示平板、分页、分页调整大小、浮动面板、缩放、焦点和 交换 从寄存器根运行工作台 ```sh pnpm workbench:serve ``` 重点测试涵盖布局、平板、指针合同以及公众 边框 : ```sh pnpm --filter @fungi.computer/maosaico test ``` 浏览器验证还通过公开绑定、检查挂载了33个窗口 铬在升起窗口之前和之后都得到真正的指针点击 消耗斯提普的实际CSS,而不是复制其数字. 浏览器指针证明与 `pnpm --filter @fungi.computer/maosaico browser:contract`;没有证明 装有Tourtois App. ## 限制和错误 Maosaico 存储布局状态只用于挂起根的寿命. 没错 不坚持帧、提供 App 身份、 自己的键盘政策或移动/聚焦 打电话者的内容。 主机提供界限、迷你马、控件、主题和 动画. 调整手势和平板模式不会提供快活目标. 边框、小型和大小偏好是布局测量,必须是有限度的 和无负的。 Maosaico 适应 MaoMaoLabs 的核心手势 和快速的行为; 见 [`LICENSE`](https://npmcn.com/package/%40fungi.computer/maosaico/LICENSE) 因为它的麻省理工学院许可条件和归属. ## 贡献和许可证 从寄存器根构建它 `pnpm --filter @fungi.computer/maosaico build`Maosaico获得麻省理工学院许可;见 [`LICENSE`](https://npmcn.com/package/%40fungi.computer/maosaico/LICENSE)。 。 。 . `MaosaicoLayers onDismiss` 报告主机窗口模糊并焦点输入 窗口区域。 用帽子来作曲 `OverlayRoot subscribeDismiss` 退休人员 瞬间弹出和工具提示在一起; 屏蔽对话框和土司保持直播 . ### 受控便当网格 `arrangeBento` 调用器拥有的再流动 `{ id, col, row, w, h }` 安置到1个, 2或4个栏. Spans 夹住当前网格; 相撞将占用者推倒 和纵向差距 ID在网格内是独一无二的. `applyBentoOps` 接受移动和调整意图而不改变输入. `bentoFrames` 将所接受的单元格映射到容器-相干像素框架。 每个 已接受的移动或调整所有牌的收缩大小为 `arrangeBento` 固定点; 向下移动通过相交占地. 单元格及其范围必须适合 有限度的安全整数; 重复的ID抛出. 没有发动机产品配额 瓦片计数或大小. `useMaosaicoBento` 使用这些位置,测量 `width`, (中文(简体) ), `columns`, (中文(简体) ), `rowHeight`, (中文(简体) ), `gap` 还有一个 `onChange(ops)` 调用。 可选 `rowHeights` 为单个行提供测量到的像素高度; 缺少行使用 `rowHeight`。框架和指针按键可以共享这些行边界。 变化 测量可以取消飞行中的手势;相等的新鲜阵列可以保存。 这些 测量决不改变整数位置。 内容 `previewId` 名称 活的手势瓷砖。 内容 `frames` 包括直播指针预览。 展开 `bind(id, "move")` 或者说 `bind(id, "resize")` 插入可聚焦控件 `touchAction: "none"`。箭头键提议一个单元格; 逃出,丢失的捕获, 停用、卸载和主机几何变化取消指针手势。 A 类 完成投放 `onChange`; 主机接受它们 与 `applyBentoOps` 并供应新的安置. 主机选择断点并坚持自己的布局. 返回不会 重写存储, 便当不会改变 `MaosaicoRoot` 窗口行为。 这个 [控制便当故事](https://npmcn.com/package/%40fungi.computer/caps/workbench/bento.stories.tsx) 编曲 Caps 科卡和按钮。 这个 [浏览器合同](https://npmcn.com/package/%40fungi.computer/maosaico/test/browser/bento.proof.tsx) 练习真正的抓取点移动、调整大小、取消和键盘输入. ## 本地主机 `@fungi.computer/maosaico/headless` 出口 `createMaosaicoState` 财务报告和审定财务报表 `arrangeTiles` 没有反应渲染器。 土生土长的TUI外壳也一样 在终端单元格中聚焦、分组、分出和缩放状态。 浏览器便当和 窗口几何保持其现有的切入点和规则. ## 包装的消费者准备状态 运行 `pnpm run build`, (中文(简体) ), `pnpm run pack` 财务报告和审定财务报表 `pnpm run stranger` 本包中. 保存的陌生人证明只安装了包裹 tarball 到新鲜npm 消费者,检查准确的运出文件,运行公共运行时间固定和 编译每个 JavaScript 入口, 严格节点Next 且没有库检查 跳过。 此资格不发布 npm 发布或推动仓库 分页. ## 常见问题 ### @fungi\.computer/maosaico 是什么？ 容器相对布局和指针所有权 ### 如何安装 @fungi\.computer/maosaico？ 在项目目录运行 npm install @fungi\.computer/maosaico，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=17）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @fungi\.computer/maosaico 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @fungi\.computer/maosaico 支持 ESM 还是 CommonJS？ 以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。 ### @fungi\.computer/maosaico 可以商用吗？ @fungi\.computer/maosaico 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @fungi\.computer/maosaico 的下载量有多少？ 根据 npm 官方下载统计，@fungi\.computer/maosaico 在 2026/10/16 – 2026/11/14 这 30 天内被下载 4,771 次，日均约 159 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @fungi\.computer/maosaico 还在维护吗？ 最新版本 0\.1\.2 发布于 2026/11/09（6 天前）；至今共发布 5 个版本，其中过去 12 个月发布了 5 个；首次发布于 2026/10/15。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。