# @eyeauras/workbench-react 中文文档

规范地址：https://npmcn.com/package/%40eyeauras/workbench-react/

版本：0\.3\.44
npm 元数据更新时间：2026-11-02T19:13:28.439Z
中文译文更新时间：2026-11-14T06:31:06.131Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：582 kB，134 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：react \>=18\.3\.1，react-dom \>=18\.3\.1，@eyeauras/workbench 0\.3\.44
- 首次发布：2026-10-13T19:48:57.185Z
- 最新版本发布：2026-11-02T19:13:28.233Z
- 近 30 天下载量：2554（2026-10-14 至 2026-11-12，npm 官方下载统计）
- 已发布版本数：20（近 12 个月 20 个）

## 中文简介

对 @eyeauras/workbench 进行回放适配器和可重用控制.

## 安装

```sh
npm install @eyeauras/workbench-react
```

也可以使用：`pnpm add @eyeauras/workbench-react`、`yarn add @eyeauras/workbench-react`、`bun add @eyeauras/workbench-react`

## README

# `@eyeauras/workbench-react`

可选反应上下文、钩子、网格门户、布局和对主机中性可重复使用的控制 `@eyeauras/workbench` 核心键.

## 安装

```bash
npm install @eyeauras/workbench@0.3.44 @eyeauras/workbench-react@0.3.44 react react-dom monaco-editor@^0.52.2 @vscode/codicons
```

## 快速启动

需要React/React DOM QQ18.3.1,核心摩纳哥对等器,以及一个有CSS支持的React启用浏览器捆绑器.

反应行渲染通过 `@eyeauras/workbench-react/tree`; 见 [树内容指南](https://github.com/iXab3r/EyeAuras.UI.Workbench/blob/master/packages/workbench-react/docs/tree.md)。 。 。 . TypeScript 应用程序也安装 `@types/react` 财务报告和审定财务报表 `@types/react-dom`; 安装 `@vscode/codicons` 用于图标.

```tsx
import { createWorkbench } from "@eyeauras/workbench";
import { createReactWorkbenchPage, useWorkbench } from "@eyeauras/workbench-react/core";
import "@vscode/codicons/dist/codicon.css";
function Home() {
  const workbench = useWorkbench();
  return <button onClick={() => workbench.services.notifications.info("Ready")}>Notify</button>;
}
const host = document.createElement("div");
host.style.cssText = "width:100%;height:600px";
document.body.append(host);
const workbench = createWorkbench(host);
workbench.registerPage(createReactWorkbenchPage({ id: "home", title: "Home", render: () => <Home /> }));
workbench.showPage("home");
export function dispose() { workbench.dispose(); host.remove(); }
```

页面用品 `WorkbenchProvider` 并处理其反应根。 对于根,你创造自己,包裹 工作车钩 `<WorkbenchProvider workbench={workbench}>`。需要独立的控制 `installWorkbenchStyles(document)` 从 `@eyeauras/workbench/styles`; 提供者安装无样式. 这个 [完全快速启动](https://github.com/iXab3r/EyeAuras.UI.Workbench/blob/master/docs/QUICKSTART.md) 包括安装和主机设置.

React仍为适配器;核心工作台并非React自有. 见 [EyeAuras UI Workbench 存储器](https://github.com/iXab3r/EyeAuras.UI.Workbench) 一揽子指导 和实例.

这个 `@eyeauras/workbench-react/controls` 子路径包括核心的仅生命周期反应适配器 输入框,按钮,反馈按钮,切换,进步列,选择框,ComboBox,以及TagEditor控制. 他们的行为和 DOM 仍为 `@eyeauras/workbench/controls`; 输入框/ 组合框/ TagEditor 转发本地文件 `placeholder` 水印加字符串 `prefix`编号 :`suffix` 饰相.

适应器状态遵循普通反应合同: `value`, (中文(简体) ), `checked`, (中文(简体) ), `selectedIndex`,以及 `values` 为: 当主机拒绝编辑时控制并恢复; `defaultValue` 编号 : `defaultValues` 消耗 只有在山上。 新的内置提供者、验证器、规范化器或选项身份不处理和 重新创建基础控制.

TagEditor保留了核心键盘,内置编辑,可访问性,IME,和造型行为. 内容 `editable` 选项只控制重命名;标记仍可移动。 把文件放进去 `--ea-tag-editor-*` 自定义适配器上的属性 `className` 宿主(或祖先);他们 继承到核心控件。 稳定槽级列表和可变表位于核心包中 读取。 使用 `ariaDescription` 当默认的英语键盘帮助必须本地化时.

`WorkbenchFeedbackButton` 可从根部获取,并且 `/controls`它使用核心选项 反应节点 `icon` 插槽和一个 `onError(error)` 调用。 图标是门户;执行和计时器仍保留 进入核心 更改道具不会重新启动待决动作 。 在它上贴上主题符号 `className` 主持人. 核心README文件产生语义,稳定的分量和处置. 它不会取代确认按钮.

`WorkbenchDropdownMenu`, (中文(简体) ), `WorkbenchButtonWithDropdown` 财务报告和审定财务报表 `WorkbenchToolbar` 从根部和 `/controls`。放下控制器借入 `contextMenus`; 工具栏接收 `menus` 和菜单标识。 他们适应 关键的核心,只处理自己的控制。 服务和二级变体是建筑 依赖性。 仓库的 `docs/ACTIONS.md` 记录完整的合同.

常设机构 `WorkbenchConfirmButton` 财务报告和审定财务报表 `WorkbenchToggleTextBox` 导出保留原根 和专注的附庸API。 它们现在的可再利用状态和寿命来自轻核心子路径,而 反应相容层保留现有的JSX,ReactNode插槽,原生道具,SSR输出,以及 DOM/无障碍合同.

## 信件框和输入对话框

使用 `workbench.services.messageBoxes.show()` 用于保存提示和自定义对话框。 内容收到 a 键入用于验证的动作上下文,注意格式提交和输入焦点。 反应消费者可以使用 `renderReactMessageBoxContent(context => <YourContent context={context} />)` 从 `@eyeauras/workbench-react/core`见 [信件盒 API 并完成 React 输入示例](https://github.com/iXab3r/EyeAuras.UI.Workbench/blob/master/docs/MESSAGE-BOXES.md)。 。 。 .

## 数字上下

`WorkbenchNumericUpDown` 从软件包根导出,并 `/controls`它构成现有的 反应自有 `WorkbenchNumberField`,也由 RandomTimeSpan 和 valueMinMax Range 使用,带有数字 状态。 它使用共享的工作台输入,fiffix,焦点和阶梯主题样式.

```tsx
import { WorkbenchNumericUpDown } from "@eyeauras/workbench-react/controls";

<WorkbenchNumericUpDown
  ariaLabel="Probability"
  value={probability}
  minimum={0}
  maximum={100}
  step={0.5}
  suffix="%"
  onValueChange={setProbability}
/>
```

`value` 是一个有限的控制数字。 可选 `minimum`编号 :`maximum` 是有限度的; `step` 是正数 默认值为 1。 打字会保留本地草稿直到 Enter 或模糊 。 空出/ 无效草稿并恢复逃逸 被接受的数值。 将夹子装入边框而不按下小数键键入步格 . ArrowUp/ArrowDown和按钮从草稿中跳出(或者如果草稿无效而被接受值), 立即承诺并保持焦点。 父母可以接受、改变或拒绝拟议价值; 字段在涂料前调节。 外部价值/约束性变动取代在建草案.

`prefix`编号 :`suffix` 是内在、不可编辑的文本。 供应单位 `ariaLabel` 需要时 可访问名称. `disabled` 禁用输入和两个动作; `id` 以本地输入为目标 外部标签. `inputClassName` 添加输入铬和 `inputTestId` 在需要时识别输入. 标准紧凑场在350-400 px检查员内工作。 数字显示在演示中 随机时间跨度段 .

`WorkbenchNumberField` 还从软件包根导出,并且 `/controls` 用于控制字符串缓冲 消费者。 使用 `inputType="text"` 与 `inputMode="numeric"` 或者说 `"decimal"` 保存原始草稿,例如: `-` 财务报告和审定财务报表 `12a`;呼叫者拥有解析,有效性(`ariaInvalid`页:1`onStep`)和改变时间. `onCommit` 是可选的:没有它,则模糊并 Enter 获取不承诺政策。 默认 `inputType="number"` 保留本地数字编辑。 两种模式都采用相同的字体框架,fix和阶梯布局.

### 原生形式语义

`WorkbenchInputBox` 转发 `id`, (中文(简体) ), `name`, (中文(简体) ), `autoComplete`, (中文(简体) ), `required`,以及 `readOnly` 它的原生输入 而不重建它. `autoFocus` 注重挂载; `selectOnFocus` 为复制选择只读结果. `onBlur(value)` 遵守现有案文 `onKeyDown(event)` 接收本地键盘事件,包括 `preventDefault()`。数值变化仍在使用 `onValueChange`;这些钩子不会引入第二个承诺状态机器.

`WorkbenchSelectBox.id` 瞄准它的本地选择. `WorkbenchToggle.id` 支持一个外部 `label htmlFor`:共享控制激活并聚焦摩纳哥的非本地复选框,尊重残疾状态并删除处理时的收听器. 其可使用的名称尚存 `title`。 。 。 .

`WorkbenchButton` 是普通动作,不是本地提交按钮。 要求隐含格式 输入提交或浏览器验证保留其原生 `button type="submit"` 和已有的窗体处理器; 不要用第二个点击/键盘处理器来模拟提交.

### Scalar 滑动事件时间

`WorkbenchValueRange` 默认为 `changeMode="commit"`: 本地输入预览; 指针放出, 支持范围键放出或模糊一次发出, 如果拒绝, 则恢复接受值 . `changeMode="input"` 使用同样的 `onValueChange` ; 释放/blur 从不发送第二个命令。 指针取消恢复当前已接受的值,并且无法撤销已经接受的活的更新 。 外部价值变化取代了本地的草稿. 数字编辑器承诺保留它们在两种模式中的现有行为.

`sliderStep` 默认数字 `step`,但接受自己的正数或 `"any"`。视觉滑动器域不限制数值;使用 `minimum`编号 :`maximum` 只有实际界限. `showValueEditor={false}` 与 `showValueReadout` 保持一个不可忽略的值和后缀可见.

### 确认寿命

`WorkbenchConfirmButton` 和通过范围对象(默认为所有者文件)强制控制共享独占性。 装上另一个控制 范围取消了前一个。 明确独立区域的范围;不增加消费者登记. `armTimeoutMs={null}` 禁用自失能; 0 仍然是立即超时.

默认策略取消焦点离开控制和外部指针. `cancelOnFocusLeave={false}` 财务报告和审定财务报表 `cancelOnOutsidePointer={false}` 保留故意的持久性确认,同时禁用、卸载、明确取消和另一个解除武装. `destructive={false}` 使用中性主题颜色而不改变脚印。 主删除配置/关闭会话需要持续的政策;AI使用默认的外/焦点政策,不计时. 立即撤走他们.

### 原生形式复选框

使用 `WorkbenchCheckbox` 用于窗体复选框和 `WorkbenchToggle` 为摩纳哥图标切换。 复选框保存本地输入, 所以标签、表单和 `:disabled` 本地行为,而安装的 Workbench 样式则从本地脚印中的复选框符号中绘制出其框. 它转发本地输入属性并暴露受控 `checked` 编号 : `onCheckedChange`. Monaco Toggle 仅限图标的 DIV 不是一个视觉取而代之的. 选择框同时转发 `title` 财务报告和审定财务报表 `ariaInvalid` 输入方法健康和描述的实际选择要素.

`useWorkbenchConfirm` 曝光当前主机演示文稿中相同的控制器后置生命周期. 附加 `rootRef` 至其稳定的包装和使用 `armed`, (中文(简体) ), `activate` 财务报告和审定财务报表 `cancel`;共享范围和外指寿命仍然具有权威性. 当标准按钮脚印无法保存已存在的屏幕(例如主窗关闭/取消对)时使用. 不复制主机中的注册或状态机器 .

`WorkbenchValueRange` 接受 `appearance="native"` 带有主机 `className` 用于现有本土形式布局(百分比和形成滑动器)。 它使用相同的输入和值值生命周期;浏览器渲染替换了工作板轨道/工具提示,并保留了本地百分比读出 `%` 旁边的号码。 默认的工作台外观不变.

值程代表数草稿和小数级步骤到 WorkbenchNummericUpDown;空输入不会变为零. `inputTestId` 达到实际数字输入。 原生外观直接在主机布局中使相同的数值控制.

### 财产/形式网格

光线@eyeauras/workbench-react/property-grid 出口 Workbench PropertyGrid, 工厂 工厂 工厂 工厂 工厂 工厂, 和Workbench PropertyTrailing(工作中心), 工作中心(Workbench), 工作中心(Workbench), 工作中心(Workbench), 工作中心(Property Trrailing) 已命名的列和显行支持独立的续作. 见 [属性网格作者](https://github.com/iXab3r/EyeAuras.UI.Workbench/blob/master/docs/PROPERTY-GRID.md) 扩大规模、无障碍、反应迅速 预算和实例。 在主机中安装现有的 Workbench 样式; React 条目不导入 CSS .

### 工具提示和悬牌

导入 `WorkbenchTooltip` 从 `@eyeauras/workbench-react/hover` 并把它变成 `WorkbenchProvider`。 。 。 . 它接受一名携带DOM参考文件或 `targetRef` 用于现有元素. `content` 是反应节点; 设定 `interactive` 财务报告和审定财务报表 `ariaLabel` 有动作的牌. `position` 选择边并 `alignment` 选择 `start`, (中文(简体) ), `center` 或者说 `end` 在垂直轴上。 相关目标共享a `groupId`。 。 。 .

适配器使用一个传送门进入核心徘徊寿命周期,保留反应上下文,状态,起草和 重点贯穿所有更新. `handleRef` 暴露出明确的显示/隐藏/更新/处置控制. 备选案文保留 牌; Alt+Arrow Down 输入后 Escape 关闭. 见 [自动指南](https://github.com/iXab3r/EyeAuras.UI.Workbench/blob/master/docs/HOVER.md) 用于文本和 图像/按钮示例,分组列表和键盘行为. 控制演示包括 **绕行/ 工具提示** 和单独的 **软锚** 几何譬喻.

## 活动编辑组动作

`WorkbenchVscodeGridLayout.activeGroupToolbar` 使一个反应命令表面在旁边 选项卡,包括由标签拖放/分页创建的组. 有个控制器 `activeTabId`,表面等待到该标签属于活动者 组合。 一个团体的明确 `toolbar` 以优先为准。 更新和组交换机保留 编辑器门户; 处置一组处理其工具栏门户.

中立的核心 `renderGroupToolbar(groupId, container)` 是倒置渲染器,用于 初始、添加/分割和恢复组。 明确 `group.renderToolbar` 保留所有权 当供应。 集团拥有退回的可支配物品. 这保存命令表面策略 在消费者中,而电网拥有物理组寿命.

## 常见问题

### @eyeauras/workbench-react 是什么？

对 @eyeauras/workbench 进行回放适配器和可重用控制\.

### 如何安装 @eyeauras/workbench-react？

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

### @eyeauras/workbench-react 支持 TypeScript 吗？

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

### @eyeauras/workbench-react 支持 ESM 还是 CommonJS？

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

### @eyeauras/workbench-react 可以商用吗？

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

### @eyeauras/workbench-react 的下载量有多少？

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

### @eyeauras/workbench-react 还在维护吗？

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