@eyeauras/workbench
主机中性 TypeScript 工作台服务,贡献点,布局,风格,以及必须的 DOM 在Visual Studio代码后形状的外壳.
快速启动
使用具有CSS-导入支持的ESM浏览器捆绑器(例如Vite),浏览器DOM,和大小主机.
npm install @eyeauras/[email protected] monaco-editor@^0.52.2 @vscode/codicons
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。 只有摩纳哥的实际编辑需要编辑人员。 见
完全快速启动 用于反应,构建先决条件和软件包选择.
API 和控制
富人动作UI(/controls: WorkbenchDropdownMenu 打开整个触发器的菜单;
WorkbenchButtonWithDropdown 将主要行动与替代品分开; createWorkbenchToolbar
提供活的 VS 代码工具栏渲染. WorkbenchContextMenuService 与问题共享.
打开外壳 createWorkbench(host, { actionUI: createWorkbenchActionUI }); 已有
menus.createToolbar(menu, className?) 电话保持兼容。 见寄存器的
行动指南。 。 。 .
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; 状态流经
修订频道。 见 软件包指南。 。 。 .
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代码按钮组成;已存在的按钮和确认按钮行为不变.
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) 用于消费者拥有的显示标签。 默认内容保存准确性
资源字符串; 框架从未将其描述为路径.
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 存储器。参见其根读取 用于API定向,架构,以及消费者需求.
信件框和输入对话框
使用 workbench.services.messageBoxes.show() 用于保存提示和自定义对话框。 内容收到 a
键入用于验证的动作上下文,注意格式提交和输入焦点。 反应消费者可以使用
renderReactMessageBoxContent(context => <YourContent context={context} />) 从
@eyeauras/workbench-react/core见 信件盒 API 并完成 React 输入示例。 。 。 .
工具提示和悬牌
使用 workbench.services.hover.setupDelayedHover(target, options, { groupId }),或创建独立的
WorkbenchHoverService。内容接受文本、DOM元素或可支配渲染器。 选择一边
与 position 与边缘或中心匹配 alignment: "start" | "center" | "end"。 。 。 .
相关目标可以共享 groupId 在第一个预览出现后立即切换。 选择保留
当前卡片打开; Alt+Arrow Down 输入后, Escape 关闭该卡片, 注意重心恢复.
以自有观点处置登记.
可选的反应适配器是 WorkbenchTooltip 从 @eyeauras/workbench-react/hover。 。 。 .
见 自动指南 页:1
DOM/React example,默认,本地波波弗倒计时和生命周期细节. 控制演示包括
绕行/ 工具提示 和单独的十二分 软锚 实例.
已注册的主控轨道切换器 registerToggle 接受 position: "primary" 用于顶部组或 "secondary" 用于底组。 被允许的安置仍然是次要的。 仅此更改位置; 主机控制状态和保留按钮身份不变 .
信件框接受可选选项 width 在基于表格内容的 CSS 像素中; shell 仍然将对话框限制在视图端口。 其他对话框保留标准宽度 .