# @conductor-by-89soone/react 中文文档

规范地址：https://npmcn.com/package/%40conductor-by-89soone/react/

版本：0\.20\.0
npm 元数据更新时间：2026-10-29T14:16:25.961Z
中文译文更新时间：2026-11-10T15:08:10.462Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：236 kB，69 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：23 个
- peer 依赖：react ^18\.0\.0 \|\| ^19\.0\.0，react-dom ^18\.0\.0 \|\| ^19\.0\.0，lucide-react \>=0\.400\.0 \<2
- 首次发布：2026-07-17T08:54:35.415Z
- 最新版本发布：2026-10-29T14:16:24.827Z
- 近 30 天下载量：3778（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：35（近 12 个月 35 个）

## 中文简介

Accessable React 原始作"导师".

## 安装

```sh
npm install @conductor-by-89soone/react
```

也可以使用：`pnpm add @conductor-by-89soone/react`、`yarn add @conductor-by-89soone/react`、`bun add @conductor-by-89soone/react`

## README

# @ 导出者- by- 89soone/ react

为导体设计系统提供可访问回放原始. 互动行为建立在Radix UI上,视觉造型来自 `@conductor-by-89soone/css`。 。 。 .

## 安装

```bash
pnpm add @conductor-by-89soone/react @conductor-by-89soone/css lucide-react
```

React and React DOM 18或19是同级依赖关系.

## 使用

导入样式表一次, 然后从包根导入组件 :

```tsx
import "@conductor-by-89soone/css";
import { Button, Card } from "@conductor-by-89soone/react";

export function Example() {
  return (
    <Card>
      <Button variant="primary">Continue</Button>
    </Card>
  );
}
```

设定 `data-cdt-theme="dark"` 或者说 `data-cdt-theme="light"` 在文档根上。 当“导师”样式表缺失时, 开发会建立警告 .

### 从右到左

设定 `dir="rtl"` 在文档上将应用程序包入 `DirectionProvider`。基于 Radix 的组件( Tabs, RadioGroup, ToggleGroup, Selection, 菜单)和 DatePicker 日历从中读取它们的方向,包括哪个箭头键向前移动. `Toast.Provider` 没有:通过 `swipeDirection="left"` 在右到左的应用程序.

```tsx
import { DirectionProvider } from "@conductor-by-89soone/react";

export function App({ children }) {
  return <DirectionProvider dir="rtl">{children}</DirectionProvider>;
}
```

## 所需资源

节点.js 20或更新,回放18或19,回放DOM 18或19,并 `lucide-react` 0.400.0或更新(低于2.0.0).

## 许可证

麻省理工学院

## 工作台API(CR-041,审查延期)

以下新增为本地审查扩展; 安装先前发布的 0.3.1 包件不提供。 构建并安装匹配的符号, CSS, 和在评估这种变化时一起反应焦油球。 没有组件获取, 认证、 解析搜索语言、 推断关系或重复工作 没有消费者回电.

装入 `@conductor-by-89soone/css` 一次在应用程序根。 设定 `data-cdt-theme="dark"` 或者说 `data-cdt-theme="light"` 打开 `html`;两个调色板使用 相同的语义键。 没有新的提供者或远程字体要求。 对a 以当地为主的岛屿,通过该岛屿的元素作为 `Popover.Content container` 因此门户内容继承了它的主题. 一个正文门户继承文档 主题,而不是触发器被嵌入的主题.

在 Next App 路由器中,从根版式导入 CSS,并将状态/召回代码放入 一个小 `"use client"` 组件。 软件包保存客户端指令 组件模块,并保持其再出口桶无标记。 一个服务器组件 可以使客户端组件具有可序列的数据; 回调函数必须是 在客户端边界内创建。 仅SSR输出不能显示水分 或 RSC 兼容性; 查看执行的消费者的本地验证记录.

### 披露和重叠

```tsx
"use client";
import { Tabs, Popover, Collapsible, Button } from "@conductor-by-89soone/react";

export function Filters() {
  return <Tabs.Root defaultValue="results" activationMode="manual">
    <Tabs.List aria-label="Investigation view">
      <Tabs.Trigger value="results">Results</Tabs.Trigger>
      <Tabs.Trigger value="history">History</Tabs.Trigger>
      <Tabs.Trigger value="restricted" disabled>Unavailable</Tabs.Trigger>
    </Tabs.List>
    <Tabs.Content value="results" forceMount>
      <Popover.Root>
        <Popover.Trigger asChild><Button>More filters</Button></Popover.Trigger>
        <Popover.Content aria-label="Additional filters">
          <Collapsible.Root>
            <Collapsible.Trigger>Advanced conditions</Collapsible.Trigger>
            <Collapsible.Content>Consumer-owned filter fields</Collapsible.Content>
          </Collapsible.Root>
          <Popover.Close asChild><Button>Close</Button></Popover.Close>
        </Popover.Content>
      </Popover.Root>
    </Tabs.Content>
    <Tabs.Content value="history">History supplied by the consumer</Tabs.Content>
  </Tabs.Root>;
}
```

-   `Tabs.Root` 接受 Radix 选项 `value/onValueChange`, (中文(简体) ), `defaultValue`, (中文(简体) ), `orientation` 财务报告和审定财务报表 `activationMode`。导师默认为 **手动**:箭头/家/端移动 焦点, Enter/ Space 激活. `automatic` 选择使用廉价内容. 已禁用触发器被跳过 。 提供初始值。 非活动内容 默认卸载; `forceMount` 保存子状态但保持不活动 隐藏面板。 维持一个面板可以保持它的消费者效应运行.
-   `Popover` 提供 `Root/Trigger/Anchor/Content/Close/Arrow`打开Radix 州,出逃/外解雇,并重点恢复. 给予其内容 可访问名称; 使用 `asChild` 以避免巢扣.
-   `Collapsible` 提供 `Root/Trigger/Content`,被控制或不受控制 扩展和残疾道具。 输入/ 空间切换触发器 。 构成部分 不要求扩展数据:保留首发、缓存重开和明确 在消费者中重新尝试政策。 这是公开的,不是完全的Annion API.

### 搜索、过滤和结果

| API 密码 | 数据和互动合同 | 消费者责任/使用不当 |
| --- | --- | --- |
| `Combobox` | 需求 `label`, (中文(简体) ), `options: {id,label,disabled?}[]`, (中文(简体) ), `value`, (中文(简体) ), `query`, (中文(简体) ), `onValueChange`, (中文(简体) ), `onQueryChange`。 。 。 . `state` 准备就绪/装入/误入; `resultsQuery` 隐藏 stale 选项批次 。 下行拥有单选键盘行为. IME 组成不强制 Enter . `inputRef` 目标输入; 转发参考目标包. | 与其原始查询相关联的回复,根据需要提供错误/重试UI,并将所选值与打出文本分开. 不要将单选弹出标签为多选取或用当前查询键发布 stale results . |
| `MultiSelect` | `label/options/value/onValueChange`,可选禁用;带有已存在的 Radix 复选框控件、本地选项搜索和可移动选定的芯片的字段集/列出。 Tab 到达控件; 空格切换复选框 . | 提供稳定独有的身份证 以及你批准的选项 获取/ 装入/ 错误状态是外部状态 。 不要将这个复选框组作为单一的 Combobox 或推断来自已禁用控件的授权 . |
| `FilterChip` | 文本子女加所需数量 `removeLabel/onRemove`; 可选禁用。 删除是一个单独命名的按钮 . | 使用“ 移除寄存器过滤器” 等特定标签; 删除一个芯片不会自动解析或重写查询 . |
| `FilterToolbar` | 一个风格化的 div 转发 HTML 属性/ ref 。 它分组了普通可制表控件. | 如果需要, 请给出一个组名; 这不是一个 ARIA 工具栏, 带有旋转箭头键模型 . |
| `DataTable<Row>` | 需求 `label/rows/columns/rowId/rowLabel`. 列供应 `id/header/cell`,可选择排序/数字. `sort/onSortChange` 外部; `visibleColumns` 和密度控制显示。 语义表,单独命名的预览按钮,没有行点击处理器. | 在通过行前排序全部本地源或请求服务器排序 。 不排序一个光标页并请求全局顺序 。 稳定的身份证必须经过分类/等待。 单元格中的链接仍然独立于选择. |
| 数据表选择/输入 | `selectedId/onSelect(id, trigger)` 选择一个已装入的行进行预览. `hasMore/onLoadMore/loadingMore` 显示光标续作 。 没有计算页面或光标存储 . | 在会话状态中保存不透明光标; 在 URL 中共享条件而不使用光标 。 这不是“选择所有结果”。 拥有 URL 替换/推出和权限约束的重置器. |
| 数据表状态 | `state`: 准备/装入/误入/部分,可选 `message`;空行数组产生空态。 装入繁忙, 部分/ 过度保留提供的行 。 密度默认为舒适;紧凑是明确的. | 宣告行是否为 stale/ 部分使用信件 。 该组件没有排序,再大小,被针,或虚拟化引擎. |

```tsx
"use client";
import { useRef, useState } from "react";
import { DataTable, DetailInspector, WorkbenchLayout, CopyButton,
  type DataColumn } from "@conductor-by-89soone/react";

type Row = { id: string; title: string };
const rows: Row[] = [{ id: "sample:change:1", title: "검색 맥락 보존 / preserve context" }];
const columns: DataColumn<Row>[] = [
  { id: "title", header: "Title", cell: row => row.title },
];
export function SearchPreview() {
  const [selectedId, select] = useState<string | null>(null);
  const [width, setWidth] = useState(40);
  const trigger = useRef<HTMLButtonElement | null>(null);
  const selected = rows.find(row => row.id === selectedId);
  return <WorkbenchLayout width={width} onWidthChange={setWidth}
    inspector={selected && <DetailInspector label="Selected change"
      returnFocusRef={trigger} onClose={() => select(null)}>
      <p>{selected.title}</p><code>{selected.id}</code>
      <CopyButton value={selected.id} label="Copy identifier" />
    </DetailInspector>}>
    <DataTable label="Loaded changes" rows={rows} columns={columns}
      rowId={row => row.id} rowLabel={row => row.title} selectedId={selectedId}
      onSelect={(id, button) => { trigger.current = button; select(id); }} />
  </WorkbenchLayout>;
}
```

`WorkbenchLayout` \* 接受儿童,并配备一名可选择的监察员,其控制下 25-60%的检查员 `width` (违约40)和 `onWidthChange`本地范围 控件支持键盘调整;小屏幕堆叠区域. 这不是 可拖动分隔符或模式焦点陷阱. `DetailInspector` 关闭其 按钮或未处理 `onClose`,然后聚焦 `returnFocusRef` 无 正在滚动。 保留选中行; 如果该行消失, 消费者必须 选择有意义的倒置。 预览使用已存在的行数据,不提出请求.

`PathList` 带 `items: {id,label,children?,state?}[]`选项 `selectedId/onPathSelect`。文件夹最初是崩溃的本地细节; Tab 和 输入/空间操作摘要,叶为按钮. `state: loading/error` 报告 懒惰数据状态;取回/重试是外部状态. 这是一个 **路径列表**而不是阿里亚人 TreeView:没有树箭键或打字头承诺. `Breadcrumb` 是一个导航 包装( 默认可访问名称“ qq” ); 供应链接/ 分隔符/ 当前页面 语义从小. `Skeleton` 需求 `label` 并报告装入状态. `CopyButton` 报告剪贴板成功/失败,并忽略其他反馈 当前值; 为无法使用的剪贴板同时显示可选文本 倒计时。 这些APIs都没有持续存储导航或剪贴板数据.

### 关系探索

该图也可从可选的 `@conductor-by-89soone/react/relation` 条目,导出 `RelationGraph`, (中文(简体) ), `layoutRelationNodes`和他们的公共类型. 它使用相同的执行和共享的导行样式表,没有额外的 视觉依赖. 在客户端组件中使用此条目或动态导入 以隔离图加载;仅导入按钮不会加载图码.

```tsx
import { RelationGraph } from "@conductor-by-89soone/react";

export function Relations() {
  return <RelationGraph label="Synthetic change relationships" state="partial"
    stateMessage="Synthetic data; production relationship service is not connected"
    nodes={[
      { id: "sample:change:a", label: "Change A" },
      { id: "sample:change:b", label: "Change B" },
    ]}
    edges={[{ id: "sample:edge:ab", source: "sample:change:a",
      target: "sample:change:b", type: "references", label: "references",
      evidence: "Synthetic example text links A to B", confidence: "inferred",
      ambiguous: true }]} />;
}
```

`RelationGraph` 接收节点和边缘;节点ID和边缘ID是独立的, 稳定、有消费者定义的标识。 边缘读取为 **来源 标签 目标**可选 `unresolved/ambiguous/retracted` 旗帜是独立的; 将消费者的分离状态映射到 `retracted` 不丢弃其他旗帜. 缺失的端点元数据显示为无法获取的信息,而不是获取. `confidence` 财务报告和审定财务报表 `evidence` 是文本,而不是推论引擎或 HTML 渲染器. 注意卫生 _数据范围_ 在通过前在服务器上: `unavailable` 是一个 演示文稿提示,而不是授权,并且不隐藏所提供的私人标签. 永远不要通过未经授权的节点,隐藏的计数,或者无法进入的连接边缘.

节点搜索,类型过滤,节点/对接选择,相邻强调,缩放, 方向性平板按钮,适中视图,和所选证据组成一个只读流. SVG 隐藏在辅助技术中;语义节点/对接表显示 相同的选择和具有正常链接/按钮的信息。 没有图表 编辑、拖入连接、删除、节点移动或递归取回。 节点使用 确定身份命令; 几何位置不是时间, 依赖命令, 合并序列,信心,或重要性. 循环是允许的.

`selection/onSelectionChange` 财务报告和审定财务报表 `viewport/onViewportChange` 可加以控制; 否则,他们的状态是本地化的。 消费者可以保留 这些值贯穿它自己的导航,但软件包并没有增加持久性. `state` 支持准备/装入/空出/误入/部分 `stateMessage` 用品 上下文. `onRetry` 仅对错误进行明确的重试;它不自动翻转. 过滤器可以在不重置选择的情况下隐藏所选的边缘;细节是这样说的. 仅对确认的缺席使用空状态,而不是对未解决或部分数据使用空状态. 通用组件没有生产图端点;演示为合成.

### 处理状态

```tsx
import { ProcessingStatus } from "@conductor-by-89soone/react";

export function Processing() {
  return <ProcessingStatus label="Synthetic processing stages" stages={[
    { id: "received", label: "Received", status: "complete", detail: "Receipt confirmed" },
    { id: "stored", label: "Durably stored", status: "complete", detail: "Storage confirmed" },
    { id: "processed", label: "Processed", status: "delayed", detail: "Waiting for the consumer worker" },
    { id: "indexed", label: "Indexed", status: "unknown", detail: "Search freshness not confirmed" },
  ]} />;
}
```

`ProcessingStatus` 接受 `label` 财务报告和审定财务报表 `stages` 稳定 `id`, (中文(简体) ), `label`, (中文(简体) ), `status: complete/pending/delayed/failed/unknown`和解释性说明 `detail`。 。 。 . 可选 `action` 已经 `label/onAction/disabledReason/busy`; 在那里省略时 不被允许的动作, 在无法使用时显示理由, 并调回 成果可见。 现有的"时间线","徽"和"按钮"渲染出模式. 本地按钮键盘行为适用. 没有百分比,ETA,请求, 自动重试,或计时器。 一个完整的接收阶段 没有任何关于持久 存储或索引新鲜度。 在部分失败的同时,保留成功阶段. 消费者保留他们已经批准的投票和授权政策.

### 消费成分的迁移

1.  构建和包装所有三个软件包,安装匹配的柏油球,导入CSS一次, ,并在应用程序推出前验证反应对等分辨率和下个水合.
2.  用化合物替换本地标签 `Tabs` 部件; 明确选择手动或 自动激活,初始值,控制选择,和面板寿命. 继续从键盘焦点变化中获取昂贵的图像 .
3.  将本地过滤值/ 选项映射到 `Combobox`, (中文(简体) ), `MultiSelect`,以及 `FilterChip`。 。 。 . 继续查询解析、 stale- request 生成、会话绑定光标和 URL 在消费者中替换/推出语义.
4.  将表格/工作台演示文稿替换为 `DataTable/WorkbenchLayout/DetailInspector`。 。 。 . 保持稳定身份,流行回用,细节路由,回放回放. 明确添加紧凑密度;现有的卡片样式不变.
5.  调整已授权的关系 `RelationNode/RelationEdge`; 保留 方向、模糊性、未解决/分离状态、证据和信心. 保留懒惰的首次扩展并缓存重开; 不打开一个待定 将关系类别归入“不存在的所有关系”。 计划图 API 仍然 需要消费者适配器和生产一体化工作.
6.  使用 `AppShellNavTrigger` 在相同情况下 `AppShell` 上下文( 使用时 `asChild` 带有已存在的按钮). 保持路由至主焦点. 仅在消费者复制后删除任何旧动画框倒置 与新软件包的逃出/外-近/导航重点;软件包回归 仅凭测试并不能证明原消费者已经迁移.

这种寄存器改变不会迁移或写给生产消费者. 已发布的版本更改、视觉/API快照、浏览器矩阵、计量捆绑 费用,以及无法进行的检查,必须与执行记录一并审查.

## 常见问题

### @conductor-by-89soone/react 是什么？

Accessable React 原始作"导师"\.

### 如何安装 @conductor-by-89soone/react？

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

### @conductor-by-89soone/react 支持 TypeScript 吗？

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

### @conductor-by-89soone/react 支持 ESM 还是 CommonJS？

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

### @conductor-by-89soone/react 可以商用吗？

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

### @conductor-by-89soone/react 的下载量有多少？

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

### @conductor-by-89soone/react 还在维护吗？

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