# @boost33/ui 中文文档

规范地址：https://npmcn.com/package/%40boost33/ui/

版本：0\.8\.1
npm 元数据更新时间：2026-11-05T02:17:51.343Z
中文译文更新时间：2026-11-08T11:22:59.687Z
软件包许可：UNLICENSED

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

原始 npm 页面：https://www.npmjs.com/package/%40boost33/ui
原文对照：https://npmcn.com/package/%40boost33/ui/?lang=original

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

- 包体积（解压后）：950 kB，172 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=22
- 运行依赖：0 个
- peer 依赖：react ^19\.0\.0，react-dom ^19\.0\.0
- 首次发布：2026-09-09T15:12:13.661Z
- 最新版本发布：2026-11-05T02:17:51.053Z
- 近 30 天下载量：2715（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：19（近 12 个月 19 个）

## 中文简介

软件包里有Boost33产品.

## 安装

```sh
npm install @boost33/ui
```

也可以使用：`pnpm add @boost33/ui`、`yarn add @boost33/ui`、`bun add @boost33/ui`

## README

# @boost33/ui (英语)

软件包里有Boost33产品 十四个组成部分 设计符号它们被绘制出来,发布于公共 npm. 今天有11艘舰只; 账户Menu、通知中心和命令Palette属于v1的范围,而不是 已经建成了 在外壳上,它也会飞来飞去 `LaunchLoader`,屏幕是产品 当另一个打开时显示,然后 `DotMatrixLoader` 它与画.

是因为产品切换器和钱包芯片 在钱包和 没有别的地方,而且因为一个侧边栏固定在一个应用程序中,没有固定在另一个应用程序中 三个.

## 定向

|  |  |
| --- | --- |
| 我们如何在这里建设 | `CLAUDE.md` |
| 我们所建造的 | 线性文档 **共享应用程序外壳** |
| 词汇 | `CONTEXT.md`,和倡议的 **词汇** 文档 |
| 已解决决定 | `docs/adr/` |
| 不同版本之间有什么变化 | `CHANGELOG.md` |
| 车票 | 线性, 项目 **Boost33 共享用户界面** |

## 图标

```bash
npm run typecheck
npm run test           # behaviour only — screenshots run in CI
npm run lint
npm run afk            # one Linear issue, unattended, in a container
```

## 在第一个AFK运行前

```bash
cp ~/.config/toolkit/afk.env .sandcastle/.env
npx sandcastle docker build-image              # once per machine
npm run afk                                    # watch the whole first iteration
```

在日志中注意真正的测试输出,而不是代理对其的总结.

## 消费者

钱包首先迁移,第二分数. **在从这两次渲染之前没有 1.0 软件包** ——在那之前它有一个消费者,这是一个带有版本号码的叉子.

### 字体: 映射悬钩 `:root`没有 `body`

工具箱的面孔读取了三个钩子, `--boost33-font-display`, (中文(简体) ), `--boost33-font-sans` 财务报告和审定财务报表 `--boost33-font-mono`,以及 `tokens.css` 解决他们 **打开 `:root`** (单位:千美元)`--font-sans: var(--boost33-font-sans, Inter), …`) (中文(简体) ). 自定义属性解决 在它被宣布的地方, 所以一个钩子只设置 `body` 从来没有到达工具包 工具箱悄悄地倒回了Inter, Outfit和Geist Mono.

与 `next/font`,将每个字体的 `.variable` 课开始 `<html>`没有 `<body>`, (中文(简体) ), 绘制钩子 `:root`数字 :

```css
:root {
  --boost33-font-display: var(--font-outfit);
  --boost33-font-sans: var(--font-inter);
}
```

为了检查它,检查任何工具包元素(一行导航)并读取其计算 `font-family`。一个错误的提醒:在无法使用谷歌字体的 dev运行中 已达到, `next/font` 自行替换 `'Inter Fallback'`,而dev日志说 `` Failed to download `Inter` `` 。这是网络,而不是绘图(由 - 出局了).

### 服务器组件: 从未将一个函数传递给工具包的客户端组件

本软件包的三个模块是客户组件(`'use client'`: **`AppSwitcher`**, (中文(简体) ), **`WalletChip`** 和内部 `NavHeightBudgetWarning`。 。 。 . 其他的一切都会.. `AppShell`, (中文(简体) ), `TopBar`, (中文(简体) ), `Sidebar`, (中文(简体) ), `NavItem`, (中文(简体) ), `NavSection`, (中文(简体) ), `NotificationButton`, (中文(简体) ), `PageHeader`, (中文(简体) ), `Wordmark` 和标记 -- -- 制作在 服务器.

服务器组件不能将函数或组件传递给客户端组件 : 道具跨越边界序列化, Next拒绝任何非 纯数据。 这么说吧 **从服务器组件, 绝不通过 `linkComponent`, (中文(简体) ), `onTopUp`, (中文(简体) ), `onOpenChange` 或任何其他函数 `AppSwitcher` 或者说 `WalletChip`。 。 。 .** 下个掷出( “功能不能直接传递给客户端 ) 部件"),每个被签入者都会使返回达到500个(由护照找到). `renderToStaticMarkup` 他们使一棵没有树 边界.

把两个放在一个小的里面 `'use client'` 文档,其中 导入您的路由器 `Link` 生成 `<AppSwitcher linkComponent={Link} …/>` 财务报告和审定财务报表 `<WalletChip onTopUp={…} …/>`,然后将文件的组件传入 苹果壳 `switcher` 财务报告和审定财务报表 `wallet` 插槽 。 可串行道具( S)`products`, (中文(简体) ), `labels`, (中文(简体) ), `locale`,余额)仍然可以从服务器通过它而来. `AppShell` 财务报告和审定财务报表 `NavItem` 带 `linkComponent` 安全:它们是服务器模块, 因此,函数从未跨越边界.

## 发射屏幕

`LaunchLoader` 是演示文稿。 使得它拥有时间和 通过 a `caption` (单位:千美元) `progress` (0-100,或 `null` 没有 诚实的号码。 每种产品的背景都包含在内: 黑色 有一道模糊的白橙色发光 从中间上升 屏幕。 没有产品颜色可以通行; `stops` 已贬值和被忽略 自0.5.1起 标题坐直 在发光 `npm run launch-contrast-check` 测量它.

发光由软件包样式表绘制,不取道道具,所以两侧 跳出一个相同的屏幕。 将地色也印入地上 所以瞬间 在样式表和标记到达之前, 颜色已经是黑色而不是白色 :

```tsx
import { LaunchLoader, launchBackdropCss } from '@boost33/ui'

<style dangerouslySetInnerHTML={{ __html: launchBackdropCss() }} />
<LaunchLoader caption={caption} progress={progress} />
```

一个动画背景,当一个人存在,进入 `backdrop` 插槽 。 屏幕 必须保持完整的没有它。 见 `CHANGELOG.md` (B33-1389,B33-1401)全资合同.

## 常见问题

### @boost33/ui 是什么？

软件包里有Boost33产品\.

### 如何安装 @boost33/ui？

在项目目录运行 npm install @boost33/ui，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^19\.0\.0）、react-dom（^19\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @boost33/ui 支持 TypeScript 吗？

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

### @boost33/ui 支持 ESM 还是 CommonJS？

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

### @boost33/ui 需要什么版本的 Node\.js？

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

### @boost33/ui 可以商用吗？

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

### @boost33/ui 的下载量有多少？

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

### @boost33/ui 还在维护吗？

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