# @alfadocs/ui-kit-debug 中文文档

规范地址：https://npmcn.com/package/%40alfadocs/ui-kit-debug/

版本：1\.116\.0
npm 元数据更新时间：2026-11-05T00:43:25.062Z
中文译文更新时间：2026-11-06T00:51:21.816Z
软件包许可：BUSL-1\.1

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

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

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

- 包体积（解压后）：67.3 MB，4509 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=22\.6\.0
- 运行依赖：35 个
- peer 依赖：react ^18\.2\.0 \|\| ^19\.0\.0，i18next ^26\.0\.4，react-dom ^18\.2\.0 \|\| ^19\.0\.0，apexcharts ^5\.10\.1，pdfjs-dist ^5\.6\.205，ag-grid-react ^35\.2\.1，react-i18next ^17\.0\.3，signature\_pad ^5\.1\.3，react-apexcharts ^2\.0\.0，@stripe/stripe-js ^1\.41\.0 \|\| ^2 \|\| ^3 \|\| ^4 \|\| ^5 \|\| ^6 \|\| ^7 \|\| ^8 \|\| ^9，ag-grid-community ^35\.2\.1，libphonenumber-js ^1\.12\.41，@fullcalendar/core ^6\.1\.20，@fullcalendar/list ^6\.1\.20，@fullcalendar/react ^6\.1\.20，@fullcalendar/daygrid ^6\.1\.20，@fullcalendar/resource ^6\.1\.20，@fullcalendar/timegrid ^6\.1\.20，@fullcalendar/timeline ^6\.1\.20，@stripe/react-stripe-js ^1\.16\.0 \|\| ^2 \|\| ^3 \|\| ^6，@fullcalendar/interaction ^6\.1\.20，@vis\.gl/react-google-maps ^1\.1\.0 \|\| ^2，@fullcalendar/resource-timegrid ^6\.1\.20，@fullcalendar/resource-timeline ^6\.1\.20
- 首次发布：2026-05-11T14:27:36.100Z
- 最新版本发布：2026-11-05T00:43:24.865Z
- 近 30 天下载量：7787（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：340（近 12 个月 340 个）

## 中文简介

AlfaDocs共享设计系统——用于平台,预订,和alfalax的活字符号,组件,图案等翻译. (debug building——与@alfadocs/ui-kit相同的运行时间,用于符号化的船舶源地图).

## 安装

```sh
npm install @alfadocs/ui-kit-debug
```

也可以使用：`pnpm add @alfadocs/ui-kit-debug`、`yarn add @alfadocs/ui-kit-debug`、`bun add @alfadocs/ui-kit-debug`

## README

# @alfadocs/ui-kit (英语)

阿尔法道克设计系统——反应组件,符号,和翻译.

> 释出. 破坏改变土地在主要领域 [变动情况](https://npmcn.com/package/%40alfadocs/ui-kit-debug/CHANGELOG.md)。 。 。 .

## 安装

```bash
npm install @alfadocs/ui-kit
```

需要反应 18+ 和节点 22.6.

### 源地图( 可选)

默认 `@alfadocs/ui-kit` 无防弹船 `.map` 要保存的文件 安装小型(4.6 MB tarball / 17.3 MB 已拆卸,而9.5 MB / 36.8 MB ) 用于调试构建). 浏览器仅当 devtools是开放的,所以终端用户不支付这个成本不管.

如果您需要符号化的堆栈痕迹( Sentry / Rollbar上传, 内浏览器) 调试工具箱内部,安装 `-debug` 而不是兄弟俩 两者 软件包为运行时间- 相同和版本锁定 :

```jsonc
// package.json — alias-install so imports still resolve as @alfadocs/ui-kit.
// Pin the exact version you already have installed, not a range: maps from a
// different release point at lines that have moved.
"@alfadocs/ui-kit": "npm:@alfadocs/ui-kit-debug@0.98.1"
```

或者作为一个单独的 dev- only dep, 如果你的错误报告员接受一个地图 兄弟姐妹的包裹.

永远不要犯别名——它改写了锁文件,所以 `npm ci` 将拉动 调试构建到生产图像中 。 见"史记"-"三十. 调试——源代码 地图和调试包"全向导.

## 解决问题

### `npm install` 失败 `ETARGET No matching version found for @alfadocs/ui-kit@<x.y.z>` 尽管该版本存在于 npmjs.org

这几乎总是意味着你的 `~/.npmrc` (或项目一级) `.npmrc`拥有一个 暂停 `@alfadocs:registry=` 线条指向其它位置 `https://registry.npmjs.org/`。 。 。 . `@alfadocs/ui-kit` 专门出版 (原始内容存档于2018-09-26). com.org `0.1.0` 起; 键 `@alfadocs` gitHub 上的镜框 包只包含遗留 `0.0.x` 建造和保养.

刚才 `0.1.x` 同一检出范围内的凸起可以掩盖这个——npm再利用 解析的 tarball URL 从 `package-lock.json` 永远不要重新咨询 范围映射。 首个新决心(一个新的未成年人,一个干净的离职,一个 `rm -rf node_modules`)是死端浮出水面时.

**修补.** 打开 `~/.npmrc` 删除任何 `@alfadocs:registry=…` 线条 - 或 设定为 npm 默认值,该值是多余但无害的:

```
@alfadocs:registry=https://registry.npmjs.org/
```

然后重新运行 `npm install`。 。 。 .

**一发一发** (如果你不能编辑您的) `.npmrc` 现在:

```bash
npm install --@alfadocs:registry=https://registry.npmjs.org
```

## 使用量

### 键

在您的应用根导入设计符后, CSS 自定义 属性在任何地方都有:

```ts
import '@alfadocs/ui-kit/tokens';
```

这个完整的样式表包括所有四个第三方桥. 对于一个应用 仅使用工具包的一部分,选择核心并添加其组件所需的桥梁:

```ts
import '@alfadocs/ui-kit/styles/core.css';
import '@alfadocs/ui-kit/styles/ag-grid.css'; // DataTable
```

| 在核心后添加 | 需要它的组成部分和模式 |
| --- | --- |
| `@alfadocs/ui-kit/styles/ag-grid.css` | `DataTable`, (中文(简体) ), `PatientTable`, (中文(简体) ), `FileManager` (列表视图),Heatmap的"View as table",和日历图案的表单 |
| `@alfadocs/ui-kit/styles/redactor.css` | `RichTextEditor` 与东道主的 Redactor 运行时间, `NotesPanel`, (中文(简体) ), `help-me-write-templates` |
| `@alfadocs/ui-kit/styles/fullcalendar.css` | `Calendar`, (中文(简体) ), `CalendarWorkspace` 和日历图案 |
| `@alfadocs/ui-kit/styles/apexcharts.css` | `Chart`, (中文(简体) ), `Sparkline`,并比较面板和演化网格 |

任何制造这些部件的其他部件 都需要同样的桥梁.

选择其中之一 `tokens` 或核心加所需桥梁。 核心保留全部 符号、主题、基本规则、组件公用事业和工具包字体声明. 取相和订相组件不需要桥. 供应商 Java 脚本和 仍然像以前一样安装或提供可选对等依赖. 先装入核心从而建立CSS层顺序. 如果复制已构建 样式表,保留在 `fonts/` 目录, 如 `tokens.css`。 。 。 .

然后在根元素上应用一个主题类:

```html
<html class="theme-light">
  <!-- or theme-dark, optionally combined with theme-accessible -->
</html>
```

### 构成部分

每个组件也可作为自身子路径导入,用于: 更窄的捆绑 :

```tsx
import { Button } from '@alfadocs/ui-kit/button';
import { Card } from '@alfadocs/ui-kit/card';

export function Example() {
  return (
    <Card>
      <Card.Body>
        <Button intent="primary">Save</Button>
      </Card.Body>
    </Card>
  );
}
```

或从根入入出一切:

```tsx
import { Button, Card } from '@alfadocs/ui-kit';
```

### i18n (英语)

装箱的船 `react-i18next` 预配置和本地化捆绑 内 `dist/locales/`数字 :

```ts
import i18n from '@alfadocs/ui-kit/i18n';
import en from '@alfadocs/ui-kit/locales/en.json';

i18n.addResourceBundle('en', 'ui', en);
```

## 东道国一体化

工具箱的可忽略的原始人—— `Dialog`, (中文(简体) ), `Popover`, (中文(简体) ), `DropdownMenu`, (中文(简体) ), `Tooltip`, (中文(简体) ), `Select`, (中文(简体) ), `ContextMenu`, (中文(简体) ), `NavigationMenu`, (中文(简体) ), `AlertDialog` —— 说 都建立在Radix的上层 `@radix-ui/react-dismissable-layer`,该附件 气泡相间 `pointerdown` 收听器打开 `document` 以检测外部 点击。 正在结束应用程序 **绝对不能** 记录抓取相 `document` (或 `body`()收听者打电话 `event.stopPropagation()` 打开 `pointerdown` 编号 : `mousedown` 编号 : `click` ——抓捕阶段消费者运行 在拉迪克斯的探测器被饿死之前 上面的线被卡住了.

```js
// Will break every dismissable primitive in the kit
document.addEventListener('pointerdown', (e) => e.stopPropagation(), true);
```

如果遗留的脚本必须拦截指针事件 `document` 职等 (j查询插件,靴子模式,内部全局菜单处理器等):

-   将收听者限定为特定容器,而不是 `document` 编号 : `body`。 。 。 .
-   放下枪 `useCapture: true` 旗帜——气泡相听者向ATER Radix开火而不要干涉.
-   放下枪 `stopPropagation()` 如果它没有负载,请打电话.

每个可删除的组件的"故事书"页面都包含一个 `WithHostInterference` 故事复制了诊断失败模式.

## 同伴依赖关系

`react`, (中文(简体) ), `react-dom`, (中文(简体) ), `react-i18next`, (中文(简体) ), `i18next`尾风CSS不是 需要消耗装具的部件 符号样式表显示 CSS 自定义属性, 您可以从中引用 你的风格.

## 许可证

[业务来源许可证1.1](https://npmcn.com/package/%40alfadocs/ui-kit-debug/LICENSE) 生产用途 允许;提供特许工作或其中很大一部分, 作为相互竞争的主机、嵌入式或再品牌设计系统或 组件-图书馆产品不是。 许可工作转换为 在 LICENSE 指定的更改日期上的 Apache 许可证 2.0 .

BUSL赠款以外的商业许可安排,联系人 阿尔法道克股份有限公司.

## 常见问题

### @alfadocs/ui-kit-debug 是什么？

AlfaDocs共享设计系统——用于平台,预订,和alfalax的活字符号,组件,图案等翻译\. \(debug building——与@alfadocs/ui-kit相同的运行时间,用于符号化的船舶源地图\)\.

### 如何安装 @alfadocs/ui-kit-debug？

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

### @alfadocs/ui-kit-debug 支持 TypeScript 吗？

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

### @alfadocs/ui-kit-debug 支持 ESM 还是 CommonJS？

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

### @alfadocs/ui-kit-debug 需要什么版本的 Node\.js？

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

### @alfadocs/ui-kit-debug 可以商用吗？

@alfadocs/ui-kit-debug 使用 BUSL-1\.1 许可。声明的许可为 BUSL-1\.1，请阅读许可原文确认使用条件。以上为概括，不构成法律意见，请以许可原文为准。

### @alfadocs/ui-kit-debug 的下载量有多少？

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

### @alfadocs/ui-kit-debug 还在维护吗？

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