# @eyeauras/workbench 中文文档

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

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

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

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

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

- 包体积（解压后）：3.2 MB，570 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：monaco-editor ^0\.52\.2，@vscode/codicons ^0\.0\.36
- 首次发布：2026-10-13T18:38:08.035Z
- 最新版本发布：2026-11-02T19:12:44.269Z
- 近 30 天下载量：2855（2026-10-14 至 2026-11-12，npm 官方下载统计）
- 已发布版本数：21（近 12 个月 21 个）

## 中文简介

主机中性 VS 代码形的工作台服务,布局,以及 DOM shell.

## 安装

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

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

## README

# `@eyeauras/workbench`

主机中性 TypeScript 工作台服务,贡献点,布局,风格,以及必须的 DOM 在Visual Studio代码后形状的外壳.

## 快速启动

使用具有CSS-导入支持的ESM浏览器捆绑器(例如Vite),浏览器DOM,和大小主机.

```sh
npm install @eyeauras/workbench@0.3.44 monaco-editor@^0.52.2 @vscode/codicons
```

```ts
import { createWorkbench } from "@eyeauras/workbench";
import "@vscode/codicons/dist/codicon.css";
const host = document.createElement("div");
host.style.cssText = "width:100%;height:600px";
document.body.append(host);
const workbench = createWorkbench(host, { productName: "My application" });
workbench.registerView({
  id: "files", title: "Files", location: "sidebar", icon: "files",
  render(container) { container.textContent = "Your files"; },
});
workbench.openEditor({ id: "welcome", title: "Welcome", editorType: "text", data: "Hello" });
// Call on host unmount; renderers may return their own resource disposable.
export function dispose() { workbench.dispose(); host.remove(); }
```

外壳安装了共享样式并观察再大小. 需要独立的控制 `installWorkbenchStyles(document)` 从 `@eyeauras/workbench/styles` 一次 一次吗 科迪肯课程也需要 上方的字体 CSS。 只有摩纳哥的实际编辑需要编辑人员。 见 [完全快速启动](https://github.com/iXab3r/EyeAuras.UI.Workbench/blob/master/docs/QUICKSTART.md) 用于反应,构建先决条件和软件包选择.

## API 和控制

富人动作UI(`/controls`: `WorkbenchDropdownMenu` 打开整个触发器的菜单; `WorkbenchButtonWithDropdown` 将主要行动与替代品分开; `createWorkbenchToolbar` 提供活的 VS 代码工具栏渲染. `WorkbenchContextMenuService` 与问题共享. 打开外壳 `createWorkbench(host, { actionUI: createWorkbenchActionUI })`; 已有 `menus.createToolbar(menu, className?)` 电话保持兼容。 见寄存器的 [行动指南](https://github.com/iXab3r/EyeAuras.UI.Workbench/blob/master/docs/ACTIONS.md)。 。 。 .

`monaco-editor` 是一个需要的对等依赖,因为软件包重新使用 VS 代码的上下文密钥解析器. `@vscode/codicons` 是可选的。 导入 `@eyeauras/workbench/vscode-grid`, (中文(简体) ), `@eyeauras/workbench/controls`,或 `@eyeauras/workbench/problems` 只有在主机捆绑器能够解析时 CSS从JavaScript进口. 总计 `@eyeauras/workbench` root是面向浏览器的, 摩纳哥有地表和进口网格/分镜CSS.

拥有的通知服务、土司渲染器、分块布局和样式安装器也可作为 独立的光子路径。 每个模块都可以不安装 DOM shim而装入节点; DOM 值是 只在引用在其上运行的渲染器、布局或样式安装器时才需要.

网格的标签溢出取出器使用借入的 `contextMenus` 创建/恢复中提供的服务 选项。 炮弹供应 `actionUI` 服务; React 网格适配器拥有终生服务. 独立的必经网格可以通过 `WorkbenchContextMenuService` 从 `/controls`没有菜单 服务网格使其标签条没有溢出取出器。 处理网格会关闭自己的网格 弹出,从不借服务.

设定 `WorkbenchGridGroup.preserveEmpty: true` 对于位置和大小的文档组 必须在关闭或移动其最后一个标签时幸存。 它保持了正常的空占位符和 通过布局序列化/恢复来进行圆通. 默认仍然删除空组 .

### 树

使用 `@eyeauras/workbench/tree` 带有可选选择、输入、引导和拖放子路径. 消费者供应a `TreeSource` 独立绑定的内容 VM; 状态流经 修订频道。 见 [软件包指南](https://github.com/iXab3r/EyeAuras.UI.Workbench/blob/master/packages/workbench/docs/tree.md)。 。 。 .

```ts
import { WorkbenchNotificationService } from "@eyeauras/workbench/notifications";
import { renderNotificationToasts } from "@eyeauras/workbench/notification-toasts";
import { createWorkbenchSplitLayout } from "@eyeauras/workbench/split-layout";
import { installWorkbenchStyles, workbenchStyles } from "@eyeauras/workbench/styles";
import { WorkbenchComboBox, WorkbenchTagEditor } from "@eyeauras/workbench/controls";
import { WorkbenchConfirmButton } from "@eyeauras/workbench/controls/confirm-button";
import { WorkbenchToggleTextBox } from "@eyeauras/workbench/controls/toggle-text-box";
import { WorkbenchProblemsIndicator, WorkbenchProblemsView } from "@eyeauras/workbench/problems";
```

控制子路径将 VS 代码的 `InputBox`, (中文(简体) ), `Button`, (中文(简体) ), `Toggle`, (中文(简体) ), `ProgressBar`, (中文(简体) ), `SelectBox`, (中文(简体) ), `List`, (中文(简体) ), 财务报告和审定财务报表 `ContextView` 在稳定的框架中立的API后面. `ComboBox<T>` 增加可删除的建议 打开整套建议集的无障碍披露按钮; `TagEditor` 为字符串标记和正常的重复拒绝来作曲. 输入框 `placeholder` 实值 其本土水印; 字符串 `prefix` 财务报告和审定财务报表 `suffix` 涂上字段而不输入其值. 共享上下文View 门户网站使用本地 `popover="auto"` 可用时, 固定控件接收到一个 浏览器管理的顶层, 光断层,以及 `Esc` 而不是自行实施解雇.

### 反馈按钮

`WorkbenchFeedbackButton` 是从 `@eyeauras/workbench/controls`。 。 。 . 它由VS代码按钮组成;已存在的按钮和确认按钮行为不变.

```ts
import { WorkbenchFeedbackButton } from "@eyeauras/workbench/controls";

const copy = new WorkbenchFeedbackButton(container, {
  action: () => navigator.clipboard.writeText(text),
  idle: { label: "Copy" },
  pending: { label: "Copying…" },
  success: { label: "Copied" },
  error: { label: "Copy failed" },
  resetMs: 3000,
});
copy.onDidFail(error => reportError(error));
// Dispose with the containing view.
```

每张脸都接受 `label`,装饰性 `icon: Node`,以及 `ariaLabel` (仅在图标时需要). 每张相片提供不同的图标节点;不嵌入交互式内容. 通过 一个有礼貌的生活区域。 解决行动意味着成功,包括解决 `false`; 投出/拒绝 失败。 重复激活仅在待发或被禁用时被忽略. `update` 无需更改选项 重新启动运行中的动作或结果定时器;省略的面部使用默认的英文文本并经过 `undefined` 恢复默认值. `dispose` 删除 UI/timers 但不取消主机操作 .

所有面相从一开始就共享图标/文本列并保留布局空间,因此图标和图 标签跳出状态之间的开始 。 等待区块再入时不应用主机缺陷的凹陷. 控制受母宽限制;长标签切换为 一个完整的工具提示。 样式 `.ea-workbench-feedback-button` 联 合 国 `[data-state]`, (中文(简体) ), `.ea-workbench-feedback-face`, (中文(简体) ), `.ea-workbench-feedback-icon`, (中文(简体) ), `.ea-workbench-feedback-label` 插槽; 使用通常继承的 `--vscode-button-background`, (中文(简体) ), `--vscode-button-hoverBackground`, (中文(简体) ), `--vscode-button-foreground`,以及 `--vscode-button-border` 标志。 演示控制标签包含成功 和失败实例; 紧凑问题弹出用于 Copy All.

### 标签编辑器键盘和样式合同

田地住一行. 芯片和现有输入共享一个内部横向取景口; 键盘焦点显示活动项目而不滚动主机文档。 滚动按钮保留 一个稳定的脚印并按一个取景口宽度移动; 本地卷轴限制在两端夹住它们. 端部仍可使用,与编辑一起被禁用. 社保局拥有测距和剪接能力; 没有调整观察员规模或投票决定布局.

当它的输入是空的, `ArrowLeft` 或第一个 `Backspace` 移动到最后标记而不变异 这个值. `ArrowLeft` 编号 : `ArrowRight` 然后在标签中移动,然后返回输入. `Enter` 或单击 编辑已设置的重点标签; `Enter` 或逗号, `Escape` 取消, 并进行有效的自由形式编辑 承诺的模糊. `Backspace` 或者说 `Delete` 删除键盘聚焦标记。 设定 `editable: false` 何时 现有的标记可以删除,但不能重新命名。 IME成分从未被确认为标记.

默认可访问描述解释空输入快捷键; set `ariaDescription` 改为 提供本地化指令。 增加、编辑和删除更改通过礼貌直播宣布 区域。 空和重复的编辑保持开放,以便用户能够更正.

以下档次为稳定的定制点: `.ea-workbench-tag-editor`, (中文(简体) ), `.ea-workbench-tag-viewport`, (中文(简体) ), `.ea-workbench-tag-scroll`, (中文(简体) ), `.ea-workbench-tags`, (中文(简体) ), `.ea-workbench-tag`, (中文(简体) ), `.ea-workbench-tag-label`, (中文(简体) ), `.ea-workbench-tag-remove`,以及 `.ea-workbench-tag-input`。正在编辑的标签也带有 `.ea-workbench-tag.is-editing`。现有的 COMBOX 输入被移动到该槽中,因此定制 不需要计算第二个输入或单独的编辑模式。 优先继承习惯 颜色属性 :

| 财产 | 目的 |
| --- | --- |
| `--ea-tag-editor-background` | 编辑背景 |
| `--ea-tag-editor-border-color` | 闲置边框 |
| `--ea-tag-editor-focus-border-color` | 边框内的重点 |
| `--ea-tag-editor-tag-background` | 标签背景 |
| `--ea-tag-editor-tag-foreground` | 标记文本/ 移动前景 |
| `--ea-tag-editor-tag-remove-hover-background` | 删除按钮徘徊背景 |

每个属性回落到匹配的VS代码主题变量. 摩纳哥内部课程和DOM 文件槽不是定制 API.

`ConfirmButton` 财务报告和审定财务报表 `ToggleTextBox` 是既定反应复合材料的框架中立形式. 扩展确认可能通过对齐使用只使用图标的取消动作 `cancelIcon` 与 `cancelAriaLabel`。 。 。 . 它们的直通子路径是故意轻:它们不导入含有 CSS 的集合 VS 码 控制切片.

`workbench.services.diagnostics` 是用于验证、编译和运行时间的共享主机中性存储 发现。 出版商用马厩表示自己 `owner` 以精确的资源发布 字符串; `set(owner, resource, diagnostics)` 替换一tuple,同时 `replaceOwner(owner, entries)` 在解剖学上取代了那个主人的完整快照而不触及其他主人. 阅读是不可改变的 可以通过所有者、资源或严重程度过滤。 摩纳哥标值预测由下列单位提供: `@eyeauras/workbench-monaco`;其他演示文稿可以独立地读取同一商店.

这个 `@eyeauras/workbench/problems` 子路径提供两个可重复使用的演示文稿,但不添加另一个 存储. `WorkbenchProblemsView` 是一个 IDE 风格的列表后置网格, 包含 Severity, 代码, 信件, 文件/ 位置 , 和源列, 横跨显示字段的文本过滤、 重度切换、 稳定的多选择和 a 可见 `Showing X of Y` 总结。 Ctrl/Cmd+C 复制选择;其上下文/流出菜单也曝光 打开、 复制所选文件并复制所有问题 。 复制 所有的一切总是意味着当前过滤和排序的投影, 不只是虚拟化的行。 短小的细胞在盘旋时会披露其全文.

`WorkbenchProblemsIndicator` 是无法匹配的窗口和对话框的自成一体的演示文稿 整个网格。 其指标显示最高的非零严重性,并打开一个包含每名 诊断所有断裂. `maxVisible` 仅限制滚动前的视图端口; 它从不切换 数据。 弹出会激活行,用 Ctrl/Cmd+C 复制焦点行,并从中复制完整列表 其标题不需要单独的问题视图。 两者 部件更新从 `onDidChangeDiagnostics`,接受可选 `openDiagnostic(diagnostic)` 调用并接受 `formatResource(resource)` 用于消费者拥有的显示标签。 默认内容保存准确性 资源字符串; 框架从未将其描述为路径.

```ts
const problems = new WorkbenchProblemsView(container, workbench.services.diagnostics, {
  formatResource: (resource) => ({ label: resource }),
  openDiagnostic: (diagnostic) => openResource(diagnostic.resource, diagnostic.range),
  // Optional host boundary and row serialization; navigator.clipboard and IDE-style text are the defaults.
  writeClipboardText: (text) => hostClipboard.writeText(text),
  formatClipboardRow: (row) => `${row.diagnostic.resource}: ${row.diagnostic.message}`,
});

const indicator = new WorkbenchProblemsIndicator(statusHost, workbench.services.diagnostics, {
  openDiagnostic: (diagnostic) => openResource(diagnostic.resource, diagnostic.range),
  maxVisible: 6,
  writeClipboardText: (text) => hostClipboard.writeText(text),
});
```

用主机视图处理这两个部件 。 文本和重度过滤器是显示状态; 诊断 仍然完全归其出版商所有.

软件包是在 [EyeAuras UI Workbench 存储器](https://github.com/iXab3r/EyeAuras.UI.Workbench)。参见其根读取 用于API定向,架构,以及消费者需求.

## 信件框和输入对话框

使用 `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)。 。 。 .

## 工具提示和悬牌

使用 `workbench.services.hover.setupDelayedHover(target, options, { groupId })`,或创建独立的 `WorkbenchHoverService`。内容接受文本、DOM元素或可支配渲染器。 选择一边 与 `position` 与边缘或中心匹配 `alignment: "start" | "center" | "end"`。 。 。 . 相关目标可以共享 `groupId` 在第一个预览出现后立即切换。 选择保留 当前卡片打开; Alt+Arrow Down 输入后, Escape 关闭该卡片, 注意重心恢复. 以自有观点处置登记.

可选的反应适配器是 `WorkbenchTooltip` 从 `@eyeauras/workbench-react/hover`。 。 。 . 见 [自动指南](https://github.com/iXab3r/EyeAuras.UI.Workbench/blob/master/docs/HOVER.md) 页:1 DOM/React example,默认,本地波波弗倒计时和生命周期细节. 控制演示包括 **绕行/ 工具提示** 和单独的十二分 **软锚** 实例.

已注册的主控轨道切换器 `registerToggle` 接受 `position: "primary"` 用于顶部组或 `"secondary"` 用于底组。 被允许的安置仍然是次要的。 仅此更改位置; 主机控制状态和保留按钮身份不变 .

信件框接受可选选项 `width` 在基于表格内容的 CSS 像素中; shell 仍然将对话框限制在视图端口。 其他对话框保留标准宽度 .

## 常见问题

### @eyeauras/workbench 是什么？

主机中性 VS 代码形的工作台服务,布局,以及 DOM shell\.

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

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

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

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

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

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

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

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

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

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

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

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