# @allfitone/react 中文文档

规范地址：https://npmcn.com/package/%40allfitone/react/

版本：0\.16\.0
npm 元数据更新时间：2026-11-04T18:09:25.017Z
中文译文更新时间：2026-11-09T20:01:50.370Z
软件包许可：UNLICENSED

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

原始 npm 页面：https://www.npmjs.com/package/%40allfitone/react
原文对照：https://npmcn.com/package/%40allfitone/react/?lang=original
项目主页：https://github.com/allfitone/allfitone-design-system#readme
源码仓库：https://github.com/allfitone/allfitone-design-system

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

- 包体积（解压后）：700 kB，237 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=22
- 运行依赖：13 个
- peer 依赖：react \>=19，react-dom \>=19
- 首次发布：2026-07-25T00:00:52.863Z
- 最新版本发布：2026-11-04T18:09:24.831Z
- 近 30 天下载量：1761（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：29（近 12 个月 29 个）

## 中文简介

Allfit One设计系统的React and Next.js适配器.

## 安装

```sh
npm install @allfitone/react
```

也可以使用：`pnpm add @allfitone/react`、`yarn add @allfitone/react`、`bun add @allfitone/react`

## README

# @ allfitone/ 反应

Allfit One基金会的React and Next.js适配器. 导入明显的子路径, 因此应用程序只包含它们使用的能力 .

```tsx
import { BrandLockup, ProductLockup } from "@allfitone/react/brand";
import { BackIcon, FoundationIcon } from "@allfitone/react/icons";
import { semanticColor } from "@allfitone/react/tokens";
import "@allfitone/react/tokens.css";
import "@allfitone/react/app.css";
import "@allfitone/react/styles.css";

import { Button } from "@allfitone/react/components/button";
import { Dialog } from "@allfitone/react/components/dialog";
import { AnimatedBrandLockup } from "@allfitone/react/components/animated-brand-lockup";

<ProductLockup product="studio" surface="dark" title="Allfit Studio" />;
```

## 入境点

-   `@allfitone/react/brand`:可访问的主品牌徽标外加空间,工作室,后台SVG文字标记和共享-logo锁定组件.
-   `@allfitone/react/icons`:语义学Lucide图标组件和图标元数据.
-   `@allfitone/react/tokens`: 键入平台中性符号值.
-   `@allfitone/react/tokens.css`: 生成了Web令牌变量和主题选择器.
-   `@allfitone/react/app.css`:应用程序画布,浏览器重置,和产品-font桥.
-   `@allfitone/react/styles.css`:编译了Tailwind 4组件公用事业和AllFIT One shadcn桥.
-   `@allfitone/react/components/*`: 明显的组件分路口;没有全组件管.
-   `@allfitone/react/lib/utils`: 公开 `cn` 类组合工具.

包根只包含平台元数据. 这样做可以防止意外的大部件进口,并保持捆绑分析的可预测性.

## 构成部分合同

构件API遵循了Base UI上的shadcn组成,而其视觉变体,指针,目标尺寸,焦点处理,以及可访问性默认属于ALLFIT One. 在此顺序的应用程序根导入 CSS 一次 : `tokens.css`, (中文(简体) ), `app.css`,则 `styles.css`更改主题 `data-afo-theme="dark|light"` 文档元素.

`app.css` 将应用程序级别的视觉决定保留在设计系统中。 装入字体的产品 `next/font` 应使生成的姓氏暴露为 `--afo-app-font-display` 财务报告和审定财务报表 `--afo-app-font-body`数字 :

```tsx
const display = Barlow_Condensed({
  subsets: ["latin"],
  variable: "--afo-app-font-display",
  weight: ["500", "600", "700"],
});

const body = Manrope({
  subsets: ["latin"],
  variable: "--afo-app-font-body",
});
```

可用的公共组件子路径有:

-   动作 : `button` 财务报告和审定财务报表 `icon-button`· ;
-   导航 : `breadcrumb`, (中文(简体) ), `navigation-menu`, (中文(简体) ), `dropdown-menu`, (中文(简体) ), `pagination`, (中文(简体) ), `drawer`, (中文(简体) ), `sidebar`, (中文(简体) ), `workspace-shell`, (中文(简体) ), `setup-shell`,以及 `command`· ;
-   条目 : `access-shell` 用于响应性强、由品牌主导的认证和产品输入网页, `setup-shell` 多步骤激活和登入, `device-gate` 用设备指导取代紧凑的电话工作空间,以及 `site-shell` 公共产品网站共用标题和页脚;
-   窗体: `field`, (中文(简体) ), `label`, (中文(简体) ), `input`,以及 `textarea`· ;
-   选择 : `checkbox`, (中文(简体) ), `radio-group`, (中文(简体) ), `switch`, (中文(简体) ), `toggle-group`, (中文(简体) ), `select`, (中文(简体) ), `combobox`, (中文(简体) ), `date-picker`, (中文(简体) ), `time-picker`, (中文(简体) ), `calendar`, (中文(简体) ), `tabs`,以及 `choice-card`· ;
-   数据显示 : `table`, (中文(简体) ), `data-table`, (中文(简体) ), `avatar`, (中文(简体) ), `badge`, (中文(简体) ), `card`, (中文(简体) ), `skeleton`,以及 `empty`· ;
-   签名 : `accent-block`, (中文(简体) ), `stat-strip`, (中文(简体) ), `tick-ring`, (中文(简体) ), `pulse-mark`,以及 `animated-brand-lockup`· ;
-   覆盖 : `dialog`, (中文(简体) ), `alert-dialog`, (中文(简体) ), `sheet`, (中文(简体) ), `popover`, (中文(简体) ), `tooltip`,则 `CommandDialog` 来自 `command`· ;
-   反馈 : `progress`, (中文(简体) ), `alert`, (中文(简体) ), `sonner`,以及 `spinner`· ;
-   组成: `collapsible` 财务报告和审定财务报表 `separator`。 。 。 .

没有所有部件的管子。 从其明确的组件导入 `@allfitone/react/components/{name}` 子路径.

`SetupShell` 拥有响应头、 进度列表、 舞台和分页 用于激活和设置流的分级. `SetupProgressStep` 获取其 已完成图标和 `aria-current` 状态从 `status`;产品仅提供 索引和标签。 使用 `SetupPanelTitle as="h2"` 当面板坐落在 现有页面标题.

`ChoiceCard` 是一个交互式表面,默认情况下作为按钮提供,或 结束 `render` 导航 编写其眉毛、标题、描述和 内置动作槽; 不在 纸牌.

正在装入动作 `Spinner` 在禁用状态内 `Button`; 组件不显示 `isLoading` 道具 (英语). 只使用图标的动作 `IconButton`,其类型脚本合同要求 `aria-label`。 。 。 .

`Table` 曝光情况 `comfortable` 财务报告和审定财务报表 `compact` 保持本地密度 表格语义。 使用 `scrollAreaLabel` 当预计水平溢出时 键盘用户可以到达滚动区域. 排序用 `aria-sort` 打开 `TableHead` 和视觉中性 `TableSortButton`; 选中 行对齐 `selected` 名称 `Checkbox`,以及 `TableState` 提供装入, 空和错误的构成 .

`DataTable` 以那些原始人为基础 拥有坦斯塔克动力的无头层. 创建实例 `useDataTable`,然后作曲 `DataTableToolbar`, (中文(简体) ), `DataTableFilterInput`, (中文(简体) ), `DataTableViewOptions`, (中文(简体) ), `DataTableSelectionBar`,以及 `DataTablePagination` 视需要而定。 通过 TanStack `state` 财务报告和审定财务报表 `on*Change` 选项 来控制排序、过滤器、能见度、选择和从a到a的页码 服务器支持的产品屏幕.

`Avatar` 在图像加载和失败中保持身份清晰。 名称 根为 `aria-label` 或者说 `aria-labelledby`,包括 `AvatarFallback`,并使用 `decorative` 仅在等同的可见身份文本旁。 存在状态对数 带有显著图标和标签的语义颜色; 群体暴露其剩余 成员数入为出.

`Command` 过滤键盘-第一个工作空间目的地和行动并进行排序. 给根一个描述 `label`,编译一个命名的输入,分组的项目, 快捷键和空状态,并提供稳定的项目值. `CommandDialog` 使用公共对话框焦点合同中的相同命令孩子 而不是引入单独的全局搜索 API。 当一个受控全球 快捷键打开对话框而无需 `DialogTrigger`,保留引用要素 {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}在裁判室里 交给你 `finalFocus`。 。 。 .

`ToggleGroup` 由2到7个紧凑的按键组成,用于模式、地方、, 或者过滤选择。 内容 `value`, (中文(简体) ), `defaultValue`,以及 `onValueChange` 合同 总是在单数组和 `multiple` 模式。 给每组一个 可访问名称。 单个组在活动项目时可以返回空数组 ; 消费者,如需要一个值的地方切换器 必须拒绝这种空洞的改变。 使用 `Tabs` 当选择控制面板和 `RadioGroup` 当必须提交一个表格值时.

`Combobox` 过滤预先定义的项目收藏并支持单项或多项 选择、 组合丰富的选项、 可移动芯片、 以及自动加载、 空的和 错误消息 。 保留 `ComboboxStatus` 安装并更新儿童时 远程请求更改状态 。 对于同步收藏, 保留所选项目 输入 `items` 数组使其标签仍然可用.

`Calendar` 作曲 React DayPicker 用于单个日期和范围. 其公众 支持可控选择、 禁用匹配器、 语言和时区 配置,多个响应月, 和犬科44px日期网格. 导入 `DateRange` 财务报告和审定财务报表 `Matcher` 类型来自同一组件子路径.

`DatePicker` 围绕一个控件组成一个输入字段、 Popover 和 Calendar 或无控制 `Date | undefined` 数值。 它保持其公认的格式可见, 校验已键入的日期和已禁用的日历匹配器,并曝光无效的文本 或无状态,不需要在 产品. `formatLabel` 命名产品语言中的可见格式.

`TimePicker` 是DatePicker一天的对应时间。 它的价值是一个 `HH:MM` 24小时时钟上的字符串,没有日期或时区;产品结合 与两者。 时间可以打入,也可以从提供的列表中选择 `step` 分钟,在当前时间打开,然后按箭头移动,页(一个小时), 家和端的钥匙。 每个可见和公布的词都是道具.

`Alert` 提供 `info`, (中文(简体) ), `success`, (中文(简体) ), `warning`,以及 `danger` 挂载 自动语义图标,标题,描述,和可选动作. 静态 调用默认情况下保持沉默; 使用 `live="polite"` 用于更新状态或 `live="assertive"` 在运行时插入紧急故障.

`Progress` 以其轨迹和指标构成一个可见的标签和值. 使用 `value={null}` 用于不确定的操作,以及成对域特异性 可见值为 `getAriaValueText`编辑 `full` 财务报告和审定财务报表 `compact` 变量共享 在同一语义上,在启用减速运动时保留静态信号.

`AnimatedBrandLockup` 是 Cononical Allfit One 的选入网页入口 关起来 它演奏一次,当请求减少运动时, 使最终框架, 并可以通过更改重放 `replayKey`静态品牌消费者应保持 使用 `BrandLockup` 从 `@allfitone/react/brand`。 。 。 .

`DeviceGate` 对于需要平板电脑或 桌面工作空间。 在紧凑倒计时前完成 `DeviceGateContent`。 。 。 . 使用 `DeviceGateActions` 产品自主回收行动,如复制a 工作空间链接; 槽提供了响应性布局,但没有拥有剪贴板, 电子邮件,QR,或导航行为. 打开可读取的倒置名称 `DeviceGateMain` 因此,它的可见 `main` 仍然是最高一级的地标. 倒置取代下面的产品内容 `600px` 宽而粗的指针 下方的地貌视图 `600px` 高; 没有用户代理检测或客户端 需要水分补充。 时 `600px` 平板电脑内容 可用.

## 常见问题

### @allfitone/react 是什么？

Allfit One设计系统的React and Next\.js适配器\.

### 如何安装 @allfitone/react？

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

### @allfitone/react 支持 TypeScript 吗？

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

### @allfitone/react 支持 ESM 还是 CommonJS？

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

### @allfitone/react 需要什么版本的 Node\.js？

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

### @allfitone/react 可以商用吗？

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

### @allfitone/react 的下载量有多少？

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

### @allfitone/react 还在维护吗？

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