# @edv4h/usketch-plugin-debug-hud 中文文档

规范地址：https://npmcn.com/package/%40edv4h/usketch-plugin-debug-hud/

版本：3\.4\.4
npm 元数据更新时间：2026-11-10T02:58:47.375Z
中文译文更新时间：2026-11-14T07:09:28.407Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40edv4h/usketch-plugin-debug-hud
原文对照：https://npmcn.com/package/%40edv4h/usketch-plugin-debug-hud/?lang=original
项目主页：https://github.com/EdV4H/usketch#readme
源码仓库：https://github.com/EdV4H/usketch

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

- 包体积（解压后）：171 kB，83 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：react \>=19
- 首次发布：2026-04-22T07:58:55.486Z
- 最新版本发布：2026-11-10T02:58:46.961Z
- 近 30 天下载量：2160（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：29（近 12 个月 29 个）

## 中文简介

暂无中文简介

## 安装

```sh
npm install @edv4h/usketch-plugin-debug-hud
```

也可以使用：`pnpm add @edv4h/usketch-plugin-debug-hud`、`yarn add @edv4h/usketch-plugin-debug-hud`、`bun add @edv4h/usketch-plugin-debug-hud`

## README

# @ edv4h/ usketch- plugin- debug- hud

屏幕固定 **控制 + 调试面板**。用后置键切换(`` ` ``) (中文(简体) ). 除了检查(形状,事件,FPS,同步,迷你地图),它是一种 **普遍 控制表面**: 每一个插件操作都可以从这里驱动, 所以主机应用程序 不需要每个插件添加铃声 UI .

```ts
import { createDebugHudPlugin } from "@edv4h/usketch-plugin-debug-hud";
const plugins = [/* ... */, createDebugHudPlugin()];
```

默认隐藏; 按 `` ` `` 打开。 (仅限 正在切换中 .

## 控制面板

-   **工具** - 每个注册工具一个按钮(`tools.getOrdered()`),单击 `store.setActiveToolId(id)`。 。 。 .
-   **行动** ——每个 `PluginAction` 注册的插件(见下文),分组 作为按钮/参数自动形成.
-   **释放事件** 原始后退:输入任何事件名称+JSON有效载荷和 `events.emit(...)`。让您驱动一个插件未曝光的操作 一个动作.
-   **默认样式/ 清除画布** 编辑 `store` 默认样式; 批次删除 .

### 导航许多插件

拥有HUD贡献的每个插件都获得自己的部分. 有几十个 插件会是一个长卷轴, 所以 :

-   插件区开始 **崩溃**;页眉显示每个控件数 别动 在码头头的qq会同时崩溃每个插件部分.
-   **☆/★针** 插件: 被绑定的路段移动到顶端的 “ Pinned” 组 自动打开.
-   打开/ 绑定状态持续在 `localStorage` (单位:千美元)`usketch-debug-hud-dock`) (中文(简体) ).
-   搜索框(顶部有刺, `Esc` 清除)匹配插件名称 / id, 动作标签 / 组 / id, 设置标签 / 字段名称, 以及面板标题 . 匹配区域在查询活动时被强制扩展; 插件名 匹配时显示该插件的所有控件 .

## 向 HUD 显示插件操作

在您的插件中注册动作 `setup` 通过 `ctx.actions` - 高级UD使 对每个没有辅助用户界面的控制。 示例(fredraw) :

```ts
const off = ctx.actions.register({
  id: "freedraw:color",
  label: "Color",
  group: "Freedraw",
  params: [{ name: "color", type: "color", default: "#1e1e1e" }],
  run: ({ color }) => ctx.events.emit("freedraw:set-color", { color }),
});
// call off() in teardown
```

`PluginAction` 字段 : `id`, (中文(简体) ), `label`选项 `group` 编号 : `icon` 编号 : `order`, (中文(简体) ), 选项 `params` (单位:千美元)`ActionParam[]` —— 说 `string|number|boolean|color|enum`, (中文(简体) ), `run(args)`选择 `isActive()` 编号 : `isEnabled()` 切换/ 上下文 状态。 无参数动作变成按钮; 选择文字动作 (如"已选中的通卡") `isEnabled()` 转到当前选择的门上.

迁移至今:放出生地,生地,有背景,有牌,有粘. 其他人跟着 相同的一行图案( 将插件的现有事件从 `run`) (中文(简体) ).

## 常见问题

### 如何安装 @edv4h/usketch-plugin-debug-hud？

在项目目录运行 npm install @edv4h/usketch-plugin-debug-hud，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=19）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @edv4h/usketch-plugin-debug-hud 支持 TypeScript 吗？

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

### @edv4h/usketch-plugin-debug-hud 支持 ESM 还是 CommonJS？

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

### @edv4h/usketch-plugin-debug-hud 可以商用吗？

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

### @edv4h/usketch-plugin-debug-hud 的下载量有多少？

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

### @edv4h/usketch-plugin-debug-hud 还在维护吗？

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