mz-wow-talent-tree

一个可嵌入页面的《魔兽世界》天赋树组件。对外提供 create(container, options) 用于挂载/销毁，并可获取当前选择的天赋字符串。

安装

npm i mz-wow-talent-tree
# or
pnpm add mz-wow-talent-tree

快速开始（推荐：Vite/webpack 等打包器）

import { create } from "mz-wow-talent-tree";
import "mz-wow-talent-tree/compDist/app.css";

const instance = create("#talent-tree", {
  specId: 72,
  level: 90,
  talents: "",
  readOnly: true,
});

// 需要时获取当前天赋字符串（例如提交表单）
console.log(instance.getTalentString());

// 卸载
// instance.destroy();

HTML 容器示例：

<div id="talent-tree" style="width: 900px; height: 600px"></div>

API

create(container, options?)

• container
  • 类型：string | HTMLElement
  • 说明：CSS 选择器或 DOM 节点。传选择器时内部会 document.querySelector，找不到会抛错。
• 返回值：{ destroy(): void; getTalentString(): string | undefined }

返回值方法

• destroy()：卸载组件（内部调用 ReactDOM.unmountComponentAtNode）。
• getTalentString()：返回当前用户选择的天赋字符串；如果用户还没产生变更，可能是 undefined。

options（完整参数）

| 参数 | 类型 | 默认值 | 说明 | |---|---|---|---| | specId | number | 72 | 专精 ID（决定加载哪套天赋数据）。 | | level | number | 90 | 角色等级（影响可用点数/解锁等）。 | | talents | string \| object | "" | 初始天赋（通常传字符串）。传无效/过期字符串会提示。 | | exclude | any[] | [] | 排除列表（配合 allowExclude 使用）。 | | strokeWidth | number | 2 | 连线粗细。 | | mini | boolean | false | 迷你模式（更紧凑的展示/底部能力图标）。 | | showRanks | boolean | true | 是否显示 rank（层数/点数）。 | | hideExport | boolean | false | 是否隐藏导出相关 UI。 | | allowExclude | boolean | false | 是否允许排除天赋（用于“禁用/不考虑”某些天赋的交互）。 | | readOnly | boolean | true | 是否只读（不允许点选变更）。 | | hideFooter | boolean | false | 是否隐藏底部（mini 模式下的底部区域）。 | | hideHeader | boolean | false | 是否隐藏顶部区域。 | | name | string \| null | null | 标题文案（有值则显示）。 | | showCopy | boolean | true | 是否显示“复制”按钮（非 mini 模式下生效）。 | | width | number | 自动 | 组件宽度。未传时：create() 会用容器 clientWidth。 |

注意：当前实现里，create() 会覆盖 options.onChange（内部用于缓存导出数据），因此外部传 onChange 不会生效。