# @jocoding-ax-partners/react 中文文档

规范地址：https://npmcn.com/package/%40jocoding-ax-partners/react/

版本：4\.0\.0
npm 元数据更新时间：2026-11-01T13:51:14.511Z
中文译文更新时间：2026-11-01T13:59:24.938Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：138 kB，63 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：3 个
- peer 依赖：react ^19，react-dom ^19，@heroui/react ^3\.2\.4，ag-grid-react ^36\.1\.0，ag-grid-community ^36\.1\.0，@phosphor-icons/react ^2\.1\.10，@jocoding-ax-partners/design-system ^5\.1\.0
- 首次发布：2026-09-04T07:52:33.275Z
- 最新版本发布：2026-11-01T08:11:00.149Z
- 已发布版本数：8（近 12 个月 8 个）

## 中文简介

共享的React组件 `CodeBlock`， `ConfirmProvider`/`useConfirm`， `HoverReadout`， `Input`， `List`， `Pagination`， `SearchBox`， `SidePanel`， `Skeleton`， `StatCard`， `StatusDot`， `NavItem`， `NavList`， `Sidebar`， `TopBar`， `AppHeader`， `Breadcrumbs`爸爸,

## 安装

```sh
npm install @jocoding-ax-partners/react
```

也可以使用：`pnpm add @jocoding-ax-partners/react`、`yarn add @jocoding-ax-partners/react`、`bun add @jocoding-ax-partners/react`

## README

# @jocoding-ax-partners /反应

共享的React组件 `CodeBlock`， `ConfirmProvider`/`useConfirm`， `HoverReadout`， `Input`， `List`， `Pagination`， `SearchBox`， `SidePanel`， `Skeleton`， `StatCard`， `StatusDot`， `NavItem`， `NavList`， `Sidebar`， `TopBar`， `AppHeader`， `Breadcrumbs`， `PageHeader`， `PageContainer`， `TabNav`， `KpiStatBar`， `KpiSearchButton` -加a `cn` 助手, 情况下 `@heroui/react` 没有等价的。除了 `Breadcrumbs` 都是从 axhub-frontend。

`NavItem`， `NavList`， `Sidebar`， `TopBar`， `PageHeader`， `PageContainer`, `TabNav` 是AxHub的导航外壳，规范化-相同的类字符串和相同的标记 他们被提升的组件。

`Breadcrumbs` 是 **这是新产品，不是促销**：轴前侧无 面包屑路径组件。它取代了手卷 `.breadcrumbs` BEM阻断APTA 携带和使用与上述组件相同的设计令牌构建。

它们都不依赖于任何路由器——消费者注入自己的路由器 `Link` 通过一个 `renderLink` 并通过它们的API形状来强制可访问性 公约: `NavItem` 如果没有给出则抛出 `href` 也不 `onSelect`，所以。 非交互式 `<div onClick>` 不能用它来构建导航项。

## 安装

```bash
npm install @jocoding-ax-partners/react @heroui/react@^3 @phosphor-icons/react@^2 react@^19 react-dom@^19
```

## 所需的设置：添加一个顺风 `@source`

这些组件在其源代码中使用Tailwind实用程序类进行样式化，而不是 预编译的CSS。Tailwind v4只有在找到正确的情况下才会生成实用程序 类名在它扫描的文件中 **顺风不扫描 `node_modules` 由 默认的**。没有告诉它，类喜欢 `h-1.5`， `bg-success-strong`， `text-[12px]`, `tracking-[0.04em]` 都是默默的掉落，每一次 组件在此包中呈现无样式(例如： `StatusDot`点崩溃 来 `0×0`， `CodeBlock` 呈现为未样式的黑色文本)。

将这一行添加到您的顺风CSS条目文件中 `@import "tailwindcss"`：

```css
@source "../node_modules/@jocoding-ax-partners/react/dist";
```

路径必须指向包的安装位置 `node_modules` （调整引线） `../` 段来匹配你的CSS文件的位置)-那 是Tailwind将跳过的目录。

## 使用

```tsx
import { StatusDot } from "@jocoding-ax-partners/react";

<StatusDot tone="active">Active</StatusDot>;
```

## 应用程序标题（GNB）和帐户菜单

`AppHeader` 是APTA和AxLMS共享的全宽度产品标头。它包装 `TopBar`徽标和顶部菜单进去 `leading`, `trailing` 槽(通知 铃声，主题切换)和帐户按钮进去 `actions`.

```tsx
import { AppHeader } from "@jocoding-ax-partners/react";

<AppHeader
  logo={<Logo />}
  nav={[
    { label: "Dashboard", href: "/", active: true },
    { label: "Help", href: "/help" },
  ]}
  user={{ name: "Sky Kim", email: "sky@acme.com" }}
  accountItems={[
    { label: "Account settings", href: "https://acme.axhub.ai/settings/profile", external: true },
    ...(canAdmin ? [{ label: "Admin", href: "/manage" }] : []),
  ]}
  onLogout={hubLogout}
  renderLink={(props) => <Link to={props.href} {...props} />}
  trailing={<ThemeToggle />}
/>;
```

-   **没有权限检查。** 应用程序决定 `accountItems` 通过;头 按照给定的方式呈现它们，后面跟着始终存在的注销项。
-   `external` 在新窗口中打开的项目(`target="_blank"`， `rel="noreferrer"`) - - - `NavLinkRenderProps` 现在是可选的 `target`/`rel`这是一种习俗 `renderLink` 必须转发。
-   如果 `onLogout` 返回一个Promise，注销项在挂起时被禁用 如果拒绝，则在菜单中显示一行错误。
-   帐户菜单是一个弹出窗口 `md` 上面和下面的底部 `md`。键盘 遵循WAI-ARIA菜单按钮模式（在第一项上输入/Space/↓open，↑on） 最后，↑/↓/Home/End移动，Esc关闭并返回焦点，Tab关闭)。
-   高度读取应用程序的 `--gnb-h` 变量并回落到 `--topbar-height`;这个 包没有添加新的令牌。顶部菜单隐藏在下面 `md`.

## 可选的ag网格外壳

只有当应用渲染数据网格时才安装Community包：

```bash
npm install ag-grid-community@^36.1.0 ag-grid-react@^36.1.0
```

从专用子路径导入，这样根包消费者就不会加载ag-grid：

```tsx
import { AgDataGrid, useGridColumnState } from "@jocoding-ax-partners/react/ag-grid";

const gridState = useGridColumnState("members-grid.ag");
<AgDataGrid isDark={theme === "dark"} columnDefs={columns} rowData={rows} {...gridState} />;
```

`isDark` 是显式的，因为包不拥有消费者的主题商店。

## 常见问题

### @jocoding-ax-partners/react 是什么？

共享的React组件 CodeBlock， ConfirmProvider/useConfirm， HoverReadout， Input， List， Pagination， SearchBox， SidePanel， Skeleton， StatCard， StatusDot， NavItem， NavList， Sidebar， TopBar， AppHeader， Breadcrumbs爸爸,

### 如何安装 @jocoding-ax-partners/react？

在项目目录运行 npm install @jocoding-ax-partners/react，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^19）、react-dom（^19）、@heroui/react（^3\.2\.4）、@phosphor-icons/react（^2\.1\.10）、@jocoding-ax-partners/design-system（^5\.1\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @jocoding-ax-partners/react 支持 TypeScript 吗？

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

### @jocoding-ax-partners/react 支持 ESM 还是 CommonJS？

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

### @jocoding-ax-partners/react 可以商用吗？

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

### @jocoding-ax-partners/react 还在维护吗？

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