# @dbx-tools/ui 中文文档

规范地址：https://npmcn.com/package/%40dbx-tools/ui/

版本：0\.9\.206
npm 元数据更新时间：2026-11-10T19:19:52.885Z
中文译文更新时间：2026-11-11T17:48:46.395Z
软件包许可：Apache-2\.0

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

原始 npm 页面：https://www.npmjs.com/package/%40dbx-tools/ui
原文对照：https://npmcn.com/package/%40dbx-tools/ui/?lang=original
项目主页：https://github.com/reggie-db/dbx-tools#readme
源码仓库：https://github.com/reggie-db/dbx-tools

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

- 包体积（解压后）：158 kB，41 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：12 个
- peer 依赖：react ~19\.2\.4，react-dom ~19\.2\.4
- 首次发布：2026-10-08T15:34:44.781Z
- 最新版本发布：2026-11-10T19:19:52.477Z
- 近 30 天下载量：8193（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：90（近 12 个月 90 个）

## 中文简介

AppKit React Foundation 有品牌、认证、电子邮件和搜索表面

## 安装

```sh
npm install @dbx-tools/ui
```

也可以使用：`pnpm add @dbx-tools/ui`、`yarn add @dbx-tools/ui`、`bun add @dbx-tools/ui`

## README

# @dbx-tools/ ui (英语)

在共享 Databricks AppKit UI 基金会中使用此反应软件包,品牌化, 无密码认证,电子邮件表面,和Databricks AI搜索控制. 仅导入您的浏览器应用程序使用的子路径 .

## 基金会

```tsx
import { Button, BrandPicker } from "@dbx-tools/ui/react";
import "@dbx-tools/ui/styles.css";
```

`./react` 再出口 Databricks AppKit UI 原始并添加 `BrandPicker`。 。 。 . `./styles.css` 提供Tailwind、向下流、代码块和牌子桥 dbx-tools UI 软件包的样式.

同样的出入口出口 `BrowserDebugCaptureButton` 财务报告和审定财务报表 `useBrowserDebugCapture`。它们仅在 AppKit 服务器发布时出现 调试- 抓取插件配置 。 通过命名的 CSS 选择器 `targets` 包含组件矩形、滚动度量、数据集状态或内置 CSS 浏览器事件快照中的视图变量 .

## 选择用户界面软件包

-   使用 `@dbx-tools/ui` 用于常见的 AppKit 组件、品牌、认证、, 电子邮件和搜索 导入其基本样式表和任何特性样式表 . 认证组件调用 [@dbx-工具/自动门](https://npmcn.com/package/node/auth-gate) 路线。 搜索组件配对 [@ dbx 工具/ 搜索](https://npmcn.com/package/node/search) 并使用 AppKit 发布 `aiSearch` 客户端配置 .
-   使用 [@dbx-tools/ui-mastra (英语)](https://npmcn.com/package/%40dbx-tools/mastra) 与 [@dbx-tools/appkit-mastra (英语)](https://npmcn.com/package/node/appkit-mastra)导入 AppKit 用户界面 mastra 样式表之前的样式表。 在应用程序内挂载聊天 认证边界 。 客户端读取已发布的插件 `clientConfig()` 载荷.

## 标记

```tsx
import { BrandProvider, BrandLogo } from "@dbx-tools/ui/branding/react";
import { applyBrandContext } from "@dbx-tools/ui/branding/browser";
import { dbxToolsAssetDataUrls } from "@dbx-tools/ui/branding/assets";
```

导入 `@dbx-tools/ui/branding/styles.css` 默认品牌变量。 静态 SVG资产出口于 `@dbx-tools/ui/branding/assets/*`。 。 。 .

## 认证

```tsx
import { AuthGate, PasskeyManager } from "@dbx-tools/ui/auth/react";
```

这些组件使用浏览器安全 `@dbx-tools/shared-auth` 合同和合同 提供的路线 `@dbx-tools/auth-gate`设置 `passkeyNamePrefix` 打开 用于覆盖人性化隧道前使用的服务器前缀的组件 子域名.

## 电子邮件

```tsx
import { EmailApprovalCard, EmailComposeView } from "@dbx-tools/ui/email/react";
import "@dbx-tools/ui/email/styles.css";
```

电子邮件组件消耗 `@dbx-tools/shared-email` 财务报告和审定财务报表 `@dbx-tools/shared-email-template`运输和批准仍然是服务器的关切.

## 搜索

```tsx
import { SearchBox, SearchResults, useSearch } from "@dbx-tools/ui/search/react";
import "@dbx-tools/ui/search/styles.css";
```

搜索组件消耗 [@ dbx- 工具/ 共享搜索](https://npmcn.com/package/shared/search) 和 AppKit 的浏览器查询 钩. 后端选择和工作空间访问仍然在 [@ dbx 工具/ 搜索](https://npmcn.com/package/node/search)。 。 。 .

## 软件包出口

-   `./react`, (中文(简体) ), `./styles.css`:常见的AppKit UI基金会.
-   `./branding/react`, (中文(简体) ), `./branding/browser`, (中文(简体) ), `./branding/assets`:品牌运行时间和资产.
-   `./auth/react`:无密码的签入和密码管理.
-   `./email/react`, (中文(简体) ), `./email/styles.css`:批准,预览,并作曲UI.
-   `./search/react`, (中文(简体) ), `./search/styles.css`: Databricks AI 搜索控制并状态.

## 常见问题

### @dbx-tools/ui 是什么？

AppKit React Foundation 有品牌、认证、电子邮件和搜索表面

### 如何安装 @dbx-tools/ui？

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

### @dbx-tools/ui 支持 TypeScript 吗？

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

### @dbx-tools/ui 支持 ESM 还是 CommonJS？

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

### @dbx-tools/ui 可以商用吗？

@dbx-tools/ui 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @dbx-tools/ui 的下载量有多少？

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

### @dbx-tools/ui 还在维护吗？

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