# @bridge-ds/toolbar 中文文档

规范地址：https://npmcn.com/package/%40bridge-ds/toolbar/

版本：0\.8\.2
npm 元数据更新时间：2026-11-08T02:36:32.413Z
中文译文更新时间：2026-11-08T15:42:22.292Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40bridge-ds/toolbar
原文对照：https://npmcn.com/package/%40bridge-ds/toolbar/?lang=original
项目主页：https://github.com/the-bridge-company/ai-design-system-demo/tree/main/packages/toolbar#readme
源码仓库：https://github.com/the-bridge-company/ai-design-system-demo

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

- 包体积（解压后）：635 kB，34 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：3 个
- peer 依赖：react \>=18，react-dom \>=18
- 首次发布：2026-10-30T17:54:21.796Z
- 最新版本发布：2026-11-08T02:36:32.053Z
- 近 30 天下载量：2002（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：11（近 12 个月 11 个）

## 中文简介

用"桥"设计系统所建产品的"桥"工具栏:从"桥"工作室用"?" Bridge="开通",将正版产品在前后之间翻出并显示所变.

## 安装

```sh
npm install @bridge-ds/toolbar
```

也可以使用：`pnpm add @bridge-ds/toolbar`、`yarn add @bridge-ds/toolbar`、`bun add @bridge-ds/toolbar`

## README

# @ bridge-ds/tool栏

用"桥"设计系统所建产品的"桥"工具箱. Bridge Studio 打开产品 `?bridge=<change>` ("在产品中尝试");工具栏让任何人浏览真正的产品,然后在产品之间翻转 **活性产品** (以前)和 **这个变化** (之后),与 **显示变化**。 。 。 .

-   **代码更改** (在产品存储处的探索,一个特征分支): 之前的产品在 生产, 后面是分支的预览. 翻转保持屏幕和滚动位置。 生产是另一个 源代码,所以工具栏无法测量差异: 更改标记UI的每个新区域或已更改区域 `data-bridge-change="<short plain label>"` 在最外层的元素(布里奇在每次探索中告诉克洛德). 在这个变化中,这些区域被概括,计算("1已改变","1/3已改变"),并像符号一样走过 更改,带有孤立,更改则列出名称。 在Live产品上,酒吧说有多少人等待这个变化 ("一于此变"有变. 改变什么也没有说.
    
    ```tsx
    <div role="status" data-bridge-change="Orders waiting to ship alert">30 orders are waiting to ship</div>
    ```
    
-   **输入更改** 设计系统:活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的 工具栏一打开, 每个不同的表面都会被勾画出并在栏中被计算("13已更改",再"2/13已更改"). 上个和下个滚动 以读取为序并勾画出比其他的更坚固;隔绝使其余的页面变暗(Esc将其关闭)。 这个 轮廓,在翻到 Live 产品时,位置和孤立控制,因为两边是同一页.
    

键盘 : **页:1** 翻转 Live 产品 和 此更改在同一屏幕和滚动位置, **C级** 转动轮廓 不停地, **英格兰** 结束孤立。 你打字的时候,他们都不开火.

无 `?bridge=` (或记起它的会话)它使无所事事和负载无所事事:工具栏及其样式 是个懒汉.

工具栏是Bridge的铬,任何产品上看起来都是一样的,无论它的设计系统,标志或全球CSS: 它的块承载着它所制造的桥构件(他们自己的类别名称, `bridge-tb_*`和桥牌 值,范围为工具栏本身的元素。 它从不为自己的外观读出页面的标志.

## 上马

```sh
npm i @bridge-ds/toolbar
```

应用程序根部的一行 设计系统内部 `ThemeProvider`数字 :

```tsx
import { BridgeToolbar } from '@bridge-ds/toolbar';

<BridgeToolbar ds="acme/design-system" product="checkout" />
```

`ds` 是设计系统存储器,并且 `product` 产品的关键所在 `bridge.config.json` `products[]`时 工作室打开页面,工具栏读取了来自 GitHub 的配置,每次会话一次:产品存储器(其中其存储器) 勘探是牵引请求, `production` (在代码更改之前), `preview` (分支预览模板 只允许主机移交制作)和制作工作室(`previews.production.docs`回来的路和 (原始内容存档于2018-10-21). live sorms. `bridge connect` 以您的数值打印此行.

```json
{ "key": "checkout", "name": "Checkout", "repo": "acme/checkout", "framework": "react",
  "preview": "https://checkout-git-{branch}-acme.vercel.app", "production": "https://checkout.acme.com" }
```

## 选项

| Prop | 它会做什么 |
| --- | --- |
| `studio`, (中文(简体) ), `production`, (中文(简体) ), `preview` | 覆盖配置所描述的内容( 例如像以前一样的 URL) . |
| `deployEnv` | `"production"` 或者说 `"preview"` 当你的建筑知道它的时候 `VERCEL_ENV`),可选:在其他主机上(Cloudflare Pages,Netlify),一个主机匹配预览模板的页面算作预览. |
| `build` | 每个事实一次,在建设时间读出:在运行时间不读出配置. |
| `scope` | 钩子回来了 `{ theme, brand, density, shop, set }` 当您的应用保持主题和商店状态。 默认: `data-theme`, (中文(简体) ), `data-brand` 财务报告和审定财务报表 `data-density` 属性 `ThemeProvider asRoot` 打开 `<html>`。 。 。 . |
| `shops` | `{ id, name, brand }[]` ,用于屏幕列表和“切换到”. |
| `together` | 最新库符号文件的加载器( U)`togetherBase` 从 `@bridge-ds/toolbar/together`),所以工作室的"一起尝试他们"运行在你的出品上. |
| `proxy` | Bridge的出处,它的读取代理服务工具栏的GitHub读取. 默认 `https://bridge.floriangouloubi.com`· ; `null` 直接读取 GitHub. |

读取通过 Bridge 的读取代理(`<proxy>/api/contribute?repo=<ds>&gh=<path>`: 允许列表、缓存、只读 在服务器上),所以访客从来没有遇到GitHub的60个匿名读取一小时的限制. 桥梁为公共设计服务 系统及其公共产品储存库 `bridge.config.json` 列表,以定义名称的来源 (单位:千美元)`production` 财务报告和审定财务报表 `preview` 每个产品,和本地主机。 当桥拒绝或无法到达时,工具栏 直接读取 GitHub( 匿名, 公共寄存器): 最多有少数API 读取每个更改和会话 .

## 常见问题

### @bridge-ds/toolbar 是什么？

用"桥"设计系统所建产品的"桥"工具栏:从"桥"工作室用"?" Bridge="开通",将正版产品在前后之间翻出并显示所变\.

### 如何安装 @bridge-ds/toolbar？

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

### @bridge-ds/toolbar 支持 TypeScript 吗？

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

### @bridge-ds/toolbar 支持 ESM 还是 CommonJS？

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

### @bridge-ds/toolbar 可以商用吗？

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

### @bridge-ds/toolbar 的下载量有多少？

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

### @bridge-ds/toolbar 还在维护吗？

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