Known · 元数据驱动的 .NET 全栈框架

说明

Items 给树形数据即可，组件自动布局——根节点居中，子节点向两侧展开，任意层级深度都能正常呈现；未给 Items 时用内置示例兜底，宿主零数据也能跑通全流程。JS 侧由 known.mindmap 驱动，纯 SVG 渲染，无外部依赖，与 echarts / viewer3d 同一套路：首次真正渲染才创建实例。底部工具条可展开所有节点、收起所有节点、适应画布、导出当前视图 PNG；订阅 OnExport 时快照交回宿主，未订阅则直接落地下载。两条边界：渲染依赖 SVG，无 SVG 支持的极老旧浏览器会降级为提示；超大节点数（>5000）时首次布局可能卡顿，建议分批加载。

常见能力：

树形数据自动布局
根节点居中双向展开
拖拽平移 / 滚轮缩放
节点选中高亮
展开 / 收起所有
适应画布
导出 PNG
内置示例兜底
纯 SVG 无依赖

用法

<MindMap Items="@nodes" Height="400px" />

@* 没有数据：用内置示例兜底 *@
<MindMap Height="400px" OnNodeClick="@OnNode" />

@* 导出交回宿主，宿主决定是存对象存储还是直接下载 *@
<MindMap Items="@data" OnExport="@async data => await oss.PutPngAsync(data)" />

API 参数

参数	类型	默认值	说明
`Editable`	`bool`	`true`	是否允许编辑：双击节点就地改文字、右键菜单、工具条「添加子节点」。折叠收起属视图操作，不受此开关影响。
`EnableExport`	`bool`	`true`	是否显示导出按钮。
`Height`	`string`	`"400px"`	画布高度，如 400px；宽度跟随容器。
`Id`	`string`	`null`	节点 DOM id，留空自动生成。同页多个思维导图时可用于 JS 侧定向取用。
`Items`	`List<MindMapNode>`	`null`	思维导图数据（树形结构）；留空则渲染内置示例。
`OnExport`	`EventCallback<string>`	—	事件导出回调，参数为 PNG 的 dataURL。未订阅时直接落地下载。
`OnNodeAdded`	`EventCallback<MindMapNode>`	—	事件新增节点回调，参数是已经挂到父节点下的新节点。
`OnNodeClick`	`EventCallback<string>`	—	事件节点点击回调。
`OnNodeRemoved`	`EventCallback<MindMapNode>`	—	事件删除节点回调，参数是刚从树上摘下来的节点（根节点不可删）。
`OnNodeTextChanged`	`EventCallback<MindMapNode>`	—	事件节点文本修改回调，参数的 Text 已是新值。
`Scheme`	`string`	`"default"`	配色风格：default（品牌蓝）/ vivid（多彩分支）/ outline（描边极简）/ mono（灰阶）。
`SchemeChanged`	`EventCallback<string>`	—	事件配色风格变化（配合 @bind-Scheme）。
`SelectedId`	`string`	`null`	当前选中节点 ID。
`SelectedIdChanged`	`EventCallback<string>`	—	事件选中变化回调。
`ShowToolbar`	`bool`	`true`	是否显示工具条（展开 / 收起 / 适应 / 导出）。
`Visible`	`bool`	`true`	取得或设置组件是否可见，默认为false。
`VisibleChanged`	`EventCallback<bool>`	—	事件取得或设置组件可见性变化时的回调事件。
`Class`	`string`	`null`	取得或设置组件的CSS类名，用于自定义样式。
`Disabled`	`bool`	`false`	取得或设置组件是否禁用，默认为false。
`Style`	`string`	`null`	取得或设置组件的内联样式，用于自定义样式。

所有组件均继承 BaseComponent，除上表参数外还支持 Class、Style、Disabled、Visible。