# @drawbridge/components 中文文档

规范地址：https://npmcn.com/package/%40drawbridge/components/

版本：0\.1\.27
npm 元数据更新时间：2026-11-12T20:51:10.630Z
中文译文更新时间：2026-11-12T21:51:31.752Z
软件包许可：ISC

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

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

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

- 包体积（解压后）：4.5 MB，984 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：9 个
- peer 依赖：qs \>=6\.15\.2，next \>=14，react \>=18，recharts \>=2\.15\.1，analytics \>=0\.8\.14，inapp-spy \>=5\.0\.10，@tiptap/pm \>=3\.23\.6，@uppy/core \>=5\.2\.0，tinycolor2 \>=1\.6\.0，react-share \>=5\.3\.0，@tiptap/core \>=3\.23\.6，@uppy/aws-s3 \>=5\.1\.0，@tiptap/react \>=3\.23\.6，react-joyride \>=2\.9\.3，@sentry/nextjs \>=10\.58\.0，react-colorful \>=5\.6\.1，canvas-confetti \>=1\.9\.3，react-countdown \>=2\.3\.6，react-hook-form \>=7\.62\.0，react-day-picker \>=9\.14\.0，socket\.io-client \>=4\.8\.3，@headlessui/react \>=2\.1\.2，@stripe/stripe-js \>=3\.3\.0，react-code-blocks \>=0\.1\.6，@hookform/resolvers \>=3\.1\.1，@tiptap/starter-kit \>=3\.23\.6，@shopify/checkout-kit \>=4\.0\.0-alpha\.4，@tanstack/react-query \>=5\.54\.1，@tanstack/react-table \>=8\.21\.3，@uppy/golden-retriever \>=5\.2\.1，@stripe/react-stripe-js \>=3\.9\.0，@vis\.gl/react-google-maps \>=1\.5\.5，react-google-recaptcha-v3 \>=1\.10\.1，@drawbridge/drawbridge-utils \>=0\.0\.230，@analytics/google-tag-manager \>=0\.5\.5，@tanstack/react-query-devtools \>=5\.54\.1，@drawbridge/drawbridge-telemetry \>=0\.0\.19
- 首次发布：2026-04-15T04:25:23.079Z
- 最新版本发布：2026-11-12T20:51:10.431Z
- 近 30 天下载量：4467（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：103（近 12 个月 103 个）

## 中文简介

Drawbridge的组件. 三个文件夹: `shared/` 在仪表板和桥页上, `dashboard/` 财务报告和审定财务报表 `bridge/` 在一个。 备选案文和代号 `components/styles.css`,这两个应用程序都导入;一个呼叫站点添加了布局类l

## 安装

```sh
npm install @drawbridge/components
```

也可以使用：`pnpm add @drawbridge/components`、`yarn add @drawbridge/components`、`bun add @drawbridge/components`

## README

# @ drawbridge/ 组件

Drawbridge的组件. 三个文件夹: `shared/` 在仪表板和桥页上, `dashboard/` 财务报告和审定财务报表 `bridge/` 在一个。 备选案文和代号 `components/styles.css`,这两个应用程序都导入;一个调用站点只添加布局类,从不添加颜色.

## 关于一个组成部分的工作

```
npm run app              # every component, every state, at http://localhost:3003 (the family's ports: dashboard 3000, share 3001, website 3002)
npm run test:app         # renders every story in Chromium; fails on an error
npm test                 # exports resolve, every component has a story, unit tests
```

无组件 `.stories.js` 除了失败 `npm test`每个可见状态一个故事.

## 网上的应用程序

`https://components.trydrawbridge.com` 是这个应用程序,从 `main` 在每一次推动中`.do/app.yaml`, (中文(简体) ), `Dockerfile`: `npm run app:build` 使静态网站和 `server.js` 在家庭的中转门后 `BASIC_AUTH_USERNAME` 财务报告和审定财务报表 `BASIC_AUTH_PASSWORD` digitalOcean应用软件上的对等设定,同样值打开了dev仪表板和网站. 两者均取消,网站公开; `/health` 总是开放.

## 在不出版的应用程序中看到它

```
npm run dev                                   # here: rebuilds dist on change
cd ../drawbridge-app-web && npm link ../drawbridge-components
npm run dev                                   # the app resolves the package from this checkout
```

撤销与 `npm unlink @drawbridge/components && npm install` 在应用程序。 永远不要从一个专题分支发布.

## 添加或移动组件

把文件放进它的文件夹,写它的故事和它的故事 `types/<folder>/<name>.d.ts`,则 `npm run exports` 重新生成导出地图。 永远不要手剪 `exports`。 。 。 .

## 常见问题

### @drawbridge/components 是什么？

Drawbridge的组件\. 三个文件夹: shared/ 在仪表板和桥页上, dashboard/ 财务报告和审定财务报表 bridge/ 在一个。 备选案文和代号 components/styles\.css,这两个应用程序都导入;一个呼叫站点添加了布局类l

### 如何安装 @drawbridge/components？

在项目目录运行 npm install @drawbridge/components，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：qs（\>=6\.15\.2）、next（\>=14）、react（\>=18）、react-countdown（\>=2\.3\.6）、react-hook-form（\>=7\.62\.0）、@headlessui/react（\>=2\.1\.2）、@hookform/resolvers（\>=3\.1\.1）、@tanstack/react-query（\>=5\.54\.1）、react-google-recaptcha-v3（\>=1\.10\.1）、@drawbridge/drawbridge-utils（\>=0\.0\.230）、@tanstack/react-query-devtools（\>=5\.54\.1）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @drawbridge/components 支持 TypeScript 吗？

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

### @drawbridge/components 支持 ESM 还是 CommonJS？

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

### @drawbridge/components 可以商用吗？

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

### @drawbridge/components 的下载量有多少？

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

### @drawbridge/components 还在维护吗？

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