# @cratis/scene\.blueprint\.default 中文文档

规范地址：https://npmcn.com/package/%40cratis/scene.blueprint.default/

版本：5\.2\.0
npm 元数据更新时间：2026-11-10T16:52:23.937Z
中文译文更新时间：2026-11-10T23:21:06.376Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40cratis/scene.blueprint.default
原文对照：https://npmcn.com/package/%40cratis/scene.blueprint.default/?lang=original
项目主页：https://www.cratis.io/screenplay/
源码仓库：https://github.com/Cratis/Scene

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

- 包体积（解压后）：7 MB，1332 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：4 个
- peer 依赖：react ^19\.0\.0，react-dom ^19\.0\.0，@cratis/arc \>=20\.3\.1 \<23，reflect-metadata 0\.2\.2，@cratis/arc\.react \>=20\.3\.1 \<23，@cratis/components ^4\.34\.0，@cratis/fundamentals ^7\.10\.3
- 首次发布：2026-08-16T10:56:21.720Z
- 最新版本发布：2026-11-10T16:52:23.521Z
- 近 30 天下载量：23635（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：137（近 12 个月 137 个）

## 中文简介

默认蓝图:应用程序外壳布局,进入其中的屏幕和对话框模板,填充槽的组件,以及两个主题.

## 安装

```sh
npm install @cratis/scene.blueprint.default
```

也可以使用：`pnpm add @cratis/scene.blueprint.default`、`yarn add @cratis/scene.blueprint.default`、`bun add @cratis/scene.blueprint.default`

## README

# @ cratis/ scene. blueprint. 默认

默认 **蓝图** 对于场景:应用程序外壳会选择一次,屏幕和 进入它们内部的对话框模板,填补它们的空位的组件,以及两个主题.

面向用户的文档 [`Documentation/blueprints/`](https://npmcn.com/Documentation/blueprints/index.md)。 。 。 . 该文件是撰稿人的说明:资料来源所遵循的惯例及其背后的理由.

## 版式

```text
blueprint.default/
├── defaultBlueprint.ts             the ScenePackage manifest + the ScenePackageBundle
├── defaultBlueprintComponents.ts   the ComponentRegistry - every bare name to its shell component
├── ComponentName.ts                the bare names this blueprint declares
├── packageName.ts                  the name a ui profile lists it under
├── configuration/                  the layout-mode state machine, its React provider and persistence
├── layouts/                        the two Layout definitions and the flow builders behind them
├── shell/                          the sixteen shell components, and layout.css
├── gallery/                        the screen and dialog templates, the screens, and preview helpers
├── themes/                         the two themes and the provider that applies them
└── for_*/                          BDD specs beside the code they specify
```

## 这四样东西,为什么是四

| 概念 | 这是什么 | 有多少个 |
| --- | --- | --- |
| **版式** | 应用程序的基础导航外观 | 从两个申请中选出一个 |
| **屏幕模板** | 可重复使用的形状 _内部_ 模块/ 特性/ 切片级布局 | 二十四岁 |
| **对话框模板** | 相同,用于叠加 - 不 `fitsSlot`,因为对话框没有占用父槽 | 3个 |
| **屏幕** | 实例:命名其布局和模板,并提供内容 | 二十四岁 |

屏幕模板说明它所属位置, 以 `fitsSlot`而不是被任何宿主告诉. 这个规则在每一个深度都组成:一个模块的模板符合布局 `content`,一个特征的适合 设置模块声明的档位,切片符合功能声明的档位. `nestScreenTemplates` 折叠链条从 内出,和 `ModuleWorkspace` → `FeatureSection` → `SliceSection` 不存在,而不是 仅说明.

## 区域(地块)

`topbar`, (中文(简体) ), `sidebar`, (中文(简体) ), `menu`, (中文(简体) ), `breadcrumb`, (中文(简体) ), `content`, (中文(简体) ), `footer`, (中文(简体) ), `rightPanel`, (中文(简体) ), `configPanel`, (中文(简体) ), `aside`。 。 。 .

坂井建立上巴/侧巴/菜单/内容/脚;溢价PrimeTek模板添加面包屑b 和右面板; `aside` 是一个满页屏幕的分块的品牌。 他们都在这里, 因为一个只覆盖自由模板所在区域的蓝图 迫使任何想要其他的都有一个叉子.

`SlotName` 是布局、模板和 shell 组件所使用的一个enum,因为一个已填入的槽 贝壳从不读出任何内容 也没有报告.

## 布局模式

8,加上无人选择的移动系统。 阶级词汇为PrimeTek的,不变.

| 模式 | 包装类 | 它会做什么 |
| --- | --- | --- |
| 静态 | `layout-static` | 侧边栏停靠于 18rem; 内容被匹配边距所驱动, 从未覆盖 |
| 重叠 | `layout-overlay` | 侧边栏停放在屏幕上; 打开时将它浮在面具后的内容上 |
| 斯莱姆 | `layout-slim` | 5rem 图标唯一的铁路, 圆形按钮; 子菜单弹出在铁路的宽度 |
| 滑动+ | `layout-slim-plus` | 7rem 栏杆,每个标签都放在其图标下 |
| 压缩 | `layout-compact` | 5rem有平方按钮的铁路;上行栏也由铁路宽度转动 |
| 水平 | `layout-horizontal` | 侧边栏去 `position: static` 进入顶端栏作为现行; 子菜单下移 |
| 启示 | `layout-reveal` | 完全面板从左侧翻译到4.25rem图标条后;在内容上盘旋滑行;取而代之的是一针将内容推出 |
| 绘图器 | `layout-drawer` | 一条5.25雷姆的铁路 _动画其宽度_ 满地徘徊 - 显示幻灯片, 抽屉会长出 - 并用同样的方式针出 |

州级: `layout-static-inactive`, (中文(简体) ), `layout-overlay-active`, (中文(简体) ), `layout-sidebar-active`, (中文(简体) ), `layout-sidebar-anchored`, (中文(简体) ), `layout-mobile`, (中文(简体) ), `layout-mobile-active`菜单: `layout-menu-light|dark|primary`颜色方案 : `layout-color-scheme-light|dark`。 。 。 .

**移动不是一个模式.** 在991px或以下时 `effectiveLayoutMode` 返回时 `overlay` 无论是什么 选择,模式拾取器会自行禁用,并说原因,选择被保留,所以当它返回 窗口增长。 断点导出为 `mobileBreakpoint` 因此调整听众和媒体查询大小 无法不同意.

## 国家所在的地方

一个 `LayoutConfigState`,一个 `LayoutConfigProvider`,一个 `useLayoutConfig`每一次过渡都是纯粹的 函数在记录中`layoutConfigTransitions.ts`),所以整个国产机器可以测试,没有 反应,一个函数将状态变为 CSS(`layoutWrapperClasses`) (中文(简体) ).

继续优惠 `localStorage` 下级 `cratis.scene.blueprint.default`: 模式、菜单主题、颜色 方案、主题名称和指针。 故意 _没有_ 侧边栏是否碰巧打开,是否 指针在上面,或者视门是否狭窄 - 恢复那些产生壳的外壳 没有人选择。 所有回读的都经过验证 与enums, 因为存储寿命超过 写它和未知模式的软件包版本在包装上设置了一个没有规则匹配的类.

## 调值词汇

十三个令牌, 匹配 `@cratis/scene.primereact`确切的表。 每个软件包增长的词汇 是一个无法依赖的软件包.

`primary.color`, (中文(简体) ), `primary.contrastColor`, (中文(简体) ), `surface.background`, (中文(简体) ), `surface.card`, (中文(简体) ), `surface.border`, (中文(简体) ), `surface.hover`, (中文(简体) ), `surface.overlay`, (中文(简体) ), `text.color`, (中文(简体) ), `text.mutedColor`, (中文(简体) ), `highlight.background`, (中文(简体) ), `highlight.color`, (中文(简体) ), `content.borderRadius`, (中文(简体) ), `focus.ring`。 。 。 .

`layout.css` 别名 `--scene-*` 自定义属性为 `--layout-*` 本地人一次,在顶部,没有 以下规则a `--scene-*` 名称 - 相同的桥型 `@cratis/components` 技术用途 `--cratis-*` 层。 凌驾于外观意味着压倒一切的象征 绝不编辑规则.

样式表是一个平面 `.css` 文件而不是从 TypeScript 导入, 因为此 repo 的滚动 配置没有 CSS 插件,添加一个不是此软件包的调用 。 主机进口 `@cratis/scene.blueprint.default/styles` 一次; 故事书在 `.storybook/preview.tsx`。 。 。 .

## 主题属性

| 主题 | 作者 | 链接 | 许可证 |
| --- | --- | --- | --- |
| 场景默认光 | 克拉蒂斯语Name | [https://cratis.io (英语)](https://cratis.io/) | 麻省理工学院 |
| 场景默认黑暗 | 克拉蒂斯语Name | [https://cratis.io (英语)](https://cratis.io/) | 麻省理工学院 |

两种调色板都原创到 Cratis - 一个中性灰色坡道,带有indigo口音 - 没有从任何语言中采用 已有预设,因此 `author` 说,而不是被留空。 一个有空的主题 归属读作"没人检查过" 一旦调色板被解开 没有它的功劳 没人知道 后来是哪一个 以后通过的任何文件都必须填满 `author`, (中文(简体) ), `authorUrl` 财务报告和审定财务报表 `license` 从源软件包本身的LICENSE文件,经过验证而不是假设.

两个主题都声明 `compatibleWith: ['core', 'Cratis.Blueprint.Default', 'PrimeReact', 'Cratis.Components', 'Tailwind']`。 。 。 . `core` 以下列目的列入清单: `incompatiblePackages` 没有暗示 豁免,所以一个主题省略了它 据报道它不兼容 `core` 包含所有列出的配置文件 它 - 这是每一个简介.

## 从其他地方借用的构成部分名称

屏幕模板名称组件 **赤线** 名称,所以 `resolveComponentName` 选择软件包 模板保持可移植性. `gallery/dependencyComponentNames.ts` 列出画廊借用的每个名字; 每一个都根据自有软件包的自有清单进行核对(`primeReactPackage.ts`, (中文(简体) ), `cratisComponentsPackage.ts`)而不是假设,一个 spec解决了所有它们.

两个名字 一个仪表盘显然想要 - `chart` 财务报告和审定财务报表 `fileUpload` - 由 _也没有_ 软件包,所以 模板使用存在的( 每月数字表; “变化相片” 按钮旁的图像) 而不是引用一些会变成红色占位符的东西.

`menu`, (中文(简体) ), `breadcrumb` 财务报告和审定财务报表 `sidebar` 由PrimeReact和本蓝图宣布。 这是超能力 优先级按设计工作:本蓝图在剖面图的上下级优先级列表中排到最后,所以它 shell 版本在PrimeReact 仍然可以到达时赢得空名 `PrimeReact.menu`。 。 。 .

## 预览

`GalleryScreenPreview` 一个画廊屏幕穿过真实路径 - 真实 `Screen`真实 `resolveComponentName`真实 `SceneElementView`,真实的注册。 里面没有什么只是预览的代码路径 .

它决心反对 `galleryProfile` 当其登记册执行每个配置文件声明的软件包时(PrimeReact by 画廊的每个部件都从它那里借来 `galleryPreviewProfile` 否则,所以部分捆绑 使什么是存在的而不是占位符。 只有明确列出的主机 `PrimeReact` 装入这些部件。 一个配置命名 仅限 `Cratis.Blueprint.Default` 解决 shell 和 Cratis 组件, 使基础模板, 并留下模板,要求模板目录中的可选软件包不兼容.

## Shell 控件和可选部件

该 shell 导入 Cratis 组件用于其图标按钮和相机 。 它的配置器使用端置的Cratis Dialog. 它的弹出菜单直接使用 React Aria 是因为 Cratis组件有一个动作菜单栏,但没有弹出菜单. 面包屑也用来 直接反应 Aria : 导航必须保留 Alt 选择和修改/ new-tab 点击的激活事件, cratis Breadcrumbs 目的地召回并不暴露。 贝壳图标是 SVG 而不是一个 已安装图标字体。 布局模式、断点、持久性、导航政策和主题切换 不变.

贝壳和地基不需要 `PrimeReactProvider` 或部件预设。 可选 `actionButton.icon` 属性使PrimeIcons类具有装饰性;使用它的主机提供了PrimeIcons字体. 按钮的标签仍然是其无障碍名称. 故事书没有应用部件提供者、预设或字体 在全球。 预览可选部件的故事拥有其提供者、预设和字体导入.

着陆、模块工作空间、地物分科和切片分科使用蓝图制头和控制 比库所选的卡片、文本和按钮。 它们的初级和二级行动保持其重点; 着陆的登录和启动动作保留了目标屏幕导航. 特性科保留其 (原始内容存档于2013-10-12). PrimiIcons. 标题为一次,包括完整的部件登记册.

旧的商业模板仍然借用部件 `scene.primereact`他们 `templateProvenance` 编辑 图片库依赖性词汇在本地声明此要求; 主机在其用户界面中选择软件包 当它选择这样的模板时配置文件。 外壳布局只声明自己的组件要求. 主题相容性元数据仍然支持两种主机.

## 故意没有建造

-   **没有路由器.** `menuItem` 财务报告和审定财务报表 `breadcrumb` 制成散列路线(`#/Dashboard`)对屏名. A 类 带有真实路由器的主机将外壳包裹并重写; 散列使相册可导航, 无 路由器,这是预览需要的.
-   **没有部件适配器 .** 每个部件的模板位置来自 PrimeReact 或 Cratis 组件 。 A 类 它自己运出桌子的蓝图 将是一个装有蓝图清单的组件库.
-   **没有布局安排渲染器.** 排版图 `FlowArrangement`s 由真实值评估 `evaluateFlowArrangement` ,但外壳以CSS定位其区域. 绘制 通常的安排是Scene#4的工作,在上方分层而不是在这里折叠.
-   **没有 `FreeformSlotArrangement`。 。 。 .** 两种布局都回流; 两种布局都没有固定位置的变体值 表示绝对位置.

## 此软件包外已知的缺口

-   **`yarn install` 自文件夹重新命名以来, 尚未运行** 从 `layout.default`所以亚恩的 工作空间状态仍然为旧路径命名 `yarn build` 编号 : `yarn test` 失败 `Package for @cratis/scene.blueprint.default@workspace:... not found in the project`运行 `yarn install` 一次; 在那之前, 大门会穿过 `npx tsc -b`, (中文(简体) ), `npx rollup -c ./rollup.config.mjs`, (中文(简体) ), `npx vitest run`, (中文(简体) ), `npx eslint --cache --quiet .` 财务报告和审定财务报表 `npx storybook build`,这是什么 `g:*` 剧本引用.
-   `Source/JavaScript/blueprint.default` 不在根头 `tsconfig.json` `references` (现在列出) `tailwind`, (中文(简体) ), `primereact` 财务报告和审定财务报表 `components`),所以是一个根 `npx tsc -b` 不建造它.
-   `FlowRow`, (中文(简体) ), `FlowColumn` (单位:千美元) `FlowGrid` 没有 `columns` 在结构上完全相同 `Scene.Model`, (中文(简体) ), 因此消费者无法从一列中分出一行值。 建造者在 `layouts/flowBuilders.ts` 保留 页:1 _意图_ 可在申报现场辨认 `grid()` 总是设定 `columns`但模型间隙是 真实的.

## 盖茨

```bash
npx tsc -b            # from the repository root
yarn build            # from this package
yarn test
yarn lint:ci
yarn build-storybook
```

## 常见问题

### @cratis/scene\.blueprint\.default 是什么？

默认蓝图:应用程序外壳布局,进入其中的屏幕和对话框模板,填充槽的组件,以及两个主题\.

### 如何安装 @cratis/scene\.blueprint\.default？

在项目目录运行 npm install @cratis/scene\.blueprint\.default，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^19\.0\.0）、react-dom（^19\.0\.0）、@cratis/arc（\>=20\.3\.1 \<23）、reflect-metadata（0\.2\.2）、@cratis/arc\.react（\>=20\.3\.1 \<23）、@cratis/components（^4\.34\.0）、@cratis/fundamentals（^7\.10\.3）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @cratis/scene\.blueprint\.default 支持 TypeScript 吗？

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

### @cratis/scene\.blueprint\.default 支持 ESM 还是 CommonJS？

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

### @cratis/scene\.blueprint\.default 可以商用吗？

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

### @cratis/scene\.blueprint\.default 的下载量有多少？

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

### @cratis/scene\.blueprint\.default 还在维护吗？

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