树形

tree

与 behaviors/tree 配套：三层可折叠 + 叶子单选 + 禁用节点。

示例

素材库
- 角色立绘
  - 主角·常服.png
  - 主角·礼服.png
- 背景音乐
- 未授权素材（禁用）
剧本（默认折叠）
- 第一章.txt
- 第二章.txt

<ul class="tree">
  <li>
    <div class="tree-node" style="--depth:0">
      <button class="tree-toggle" type="button" aria-expanded="true" aria-label="折叠/展开"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg></button>
      <span class="tree-label">素材库</span>
    </div>
    <ul>
      <li>
        <div class="tree-node" style="--depth:1">
          <button class="tree-toggle" type="button" aria-expanded="true" aria-label="折叠/展开"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg></button>
          <span class="tree-label">角色立绘</span>
        </div>
        <ul>
          <li><div class="tree-node is-selected" style="--depth:2"><span class="tree-toggle" aria-hidden="true"></span><span class="tree-label">主角·常服.png</span></div></li>
          <li><div class="tree-node" style="--depth:2"><span class="tree-toggle" aria-hidden="true"></span><span class="tree-label">主角·礼服.png</span></div></li>
        </ul>
      </li>
      <li><div class="tree-node" style="--depth:1"><span class="tree-toggle" aria-hidden="true"></span><span class="tree-label">背景音乐</span></div></li>
      <li><div class="tree-node is-disabled" style="--depth:1"><span class="tree-toggle" aria-hidden="true"></span><span class="tree-label">未授权素材（禁用）</span></div></li>
    </ul>
  </li>
  <li>
    <div class="tree-node" style="--depth:0">
      <button class="tree-toggle is-collapsed" type="button" aria-expanded="false" aria-label="折叠/展开"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg></button>
      <span class="tree-label">剧本（默认折叠）</span>
    </div>
    <ul hidden>
      <li><div class="tree-node" style="--depth:1"><span class="tree-toggle" aria-hidden="true"></span><span class="tree-label">第一章.txt</span></div></li>
      <li><div class="tree-node" style="--depth:1"><span class="tree-toggle" aria-hidden="true"></span><span class="tree-label">第二章.txt</span></div></li>
    </ul>
  </li>
</ul>

安装

bun add @icen.ai/ui
import '@icen.ai/ui/components/content.css';

用法

import { initTree } from '@icen.ai/ui/behaviors/tree';
initTree();
// toggle 折叠/展开子 ul；点击叶子节点单选（.is-selected）