# @hlang-tech/editor-ui 中文文档

规范地址：https://npmcn.com/package/%40hlang-tech/editor-ui/

版本：0\.1\.1
npm 元数据更新时间：2026-11-01T05:51:11.519Z
中文译文更新时间：2026-11-01T08:38:04.053Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40hlang-tech/editor-ui
原文对照：https://npmcn.com/package/%40hlang-tech/editor-ui/?lang=original
项目主页：https://github.com/hlang-tech/hlang/tree/main/packages/editor-ui#readme
源码仓库：https://github.com/hlang-tech/hlang

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

- 包体积（解压后）：713 kB，32 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=18
- 运行依赖：3 个
- peer 依赖：react \>=18，react-dom \>=18，@xyflow/react ^12\.0\.0
- 首次发布：2026-11-01T04:19:01.912Z
- 最新版本发布：2026-11-01T05:51:11.343Z
- 已发布版本数：3（近 12 个月 3 个）

## 中文简介

为React Flow节点编辑器的hlang: node， edge， panel和shell组件的Lumen设计系统，构建在@hlang-org/editor- React上。

## 安装

```sh
npm install @hlang-tech/editor-ui
```

也可以使用：`pnpm add @hlang-tech/editor-ui`、`yarn add @hlang-tech/editor-ui`、`bun add @hlang-tech/editor-ui`

## README

![hlang editor-ui](https://raw.githubusercontent.com/hlang-tech/hlang/main/media/brand/packages/editor-ui.png)

# @hlang-tech / editor-ui

Lumen设计系统为hlang: React组件为一个节点编辑器构建在React Flow和 [`@hlang-tech/editor-react`](https://www.npmjs.com/package/@hlang-tech/editor-react)。黑色和银色的表面，图像和意图节点，活动边缘，以及画布周围的面板。

[![npm](https://img.shields.io/npm/v/@hlang-tech/editor-ui?color=c8ccd4&labelColor=0f1114)](https://www.npmjs.com/package/@hlang-tech/editor-ui) [![license](https://img.shields.io/npm/l/@hlang-tech/editor-ui?color=c8ccd4&labelColor=0f1114)](https://github.com/hlang-tech/hlang/blob/main/LICENSE)

> **状态:** 0.X，在积极发展中。API可以在任何小版本中更改。

![The Lumen editor built with editor-ui](https://raw.githubusercontent.com/hlang-tech/hlang/main/media/lumen-editor.png)

## 安装

```sh
npm install @hlang-tech/editor-ui @hlang-tech/editor-react @hlang-tech/editor-core @xyflow/react react react-dom
```

相同的构建发布为 `@hlang-org/editor-ui`。导入样式表一次：

```ts
import '@xyflow/react/dist/style.css';
import '@hlang-tech/editor-ui/styles.css';
```

## 使用

```tsx
import { ReactFlow, ReactFlowProvider } from '@xyflow/react';
import { useHlangFlow } from '@hlang-tech/editor-react';
import { createHlangFlowTypes } from '@hlang-tech/editor-ui';

const { nodeTypes, edgeTypes } = createHlangFlowTypes();

function Canvas({ core }) {
  const flow = useHlangFlow(core);
  return <ReactFlow {...flow} nodeTypes={nodeTypes} edgeTypes={edgeTypes} colorMode="dark" fitView />;
}
```

`createHlangFlowTypes` 为三种节点类型注册节点和边缘组件。节点呈现为框架图像 `imageUrl` 参数设置，否则为药丸。一条边表示源节点 `role` 参数作为标签。运行时契约没有改变：每个节点仍然是具有端口的可读、转换或可写节点。

看到 [操场上](https://github.com/hlang-tech/hlang/tree/main/examples/editor-react-playground) 对于一个完整的编辑器。

## 组件

| 区域 | 出口 |
| --- | --- |
| 节点和边 | `HlangNode`， `AssetNodeChrome`， `PillNodeChrome`， `NodeChrome`， `PortRow`， `SignalBar`， `NodeBodySlot`， `FlowEdge`， `createHlangFlowTypes` |
| Shell和工具栏 | `EditorShell`， `Toolbar`， `UndoRedo`， `RunButton`， `ToolbarStat`， `ToolbarGhostButton`， `ToolCluster` |
| 帆布 | `CanvasChrome`， `CanvasDock`， `EmptyState` |
| 面板 | `OutlineTree`， `RailTabs`， `AssetGrid`， `InspectorPanel`， `ParamForm`， `PositionPanel`， `PreviewPanel`， `DiagnosticBadge` |
| 创建节点 | `NodeSearch`， `useNodeSearch`， `useNodeSearchTriggers` （双击画布，或在空白区域上放置连接） |
| 交互 | `useEditorHotkeys`， `NodeContextMenu`， `useNodeContextMenu`， `NodeInteractionProvider`， `Cheatsheet`， `ToastProvider` |
| 现场执行 | `LiveSignalProvider`， `LiveSignalStore`， `useLiveSignals`， `useNodeLiveState`， `useEdgeFlowing` |
| 主题 | `TOKEN_NAMES`， `tokenVar`， `createTheme`， `EditorUIThemeProvider` |

### 键盘快捷键

`useEditorHotkeys(core)` 绑定undo (`⌘Z`)，重做(`⇧⌘Z` 或者 `⌘Y`)、复制、剪切、粘贴、复制(`⌘D`)，全选(`⌘A`)，并删除(`Delete` 或者 `Backspace`）。 `Ctrl` 替换 `⌘` 在Windows和Linux上。当文本字段有焦点时，快捷键将被忽略。

### 现场执行

`useLiveSignals(core, handle)` 将运行的活动和错误馈送到 `LiveSignalStore`。节点和边通过id订阅，因此只有状态改变的元素才会重新呈现。

### 主题

所有颜色、字体和半径都是CSS自定义属性(`--hl-*`）. 用 `createTheme({ 'hl-silver': '#d8dce4' })` 作为一个 `style`，或 `EditorUIThemeProvider`.

来源和文件： [github.com/hlang-tech/hlang](https://github.com/hlang-tech/hlang).

## 许可证

麻省理工学院

## 常见问题

### @hlang-tech/editor-ui 是什么？

为React Flow节点编辑器的hlang: node， edge， panel和shell组件的Lumen设计系统，构建在@hlang-org/editor- React上。

### 如何安装 @hlang-tech/editor-ui？

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

### @hlang-tech/editor-ui 支持 TypeScript 吗？

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

### @hlang-tech/editor-ui 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @hlang-tech/editor-ui 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=18。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @hlang-tech/editor-ui 可以商用吗？

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

### @hlang-tech/editor-ui 还在维护吗？

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