@c2-markdown-ui/svelte 0.0.0-stage → 0.4.2

package/src/lib/widgets/TreeSelect.svelte

@@ -0,0 +1,924 @@
+<script lang="ts">
+  /** 树形选择器（对齐 antd TreeSelect）
+   *  静态数据源两种格式（兼容共存，data 优先）：
+   *  1. choices：扁平路径数组，每项用 / 分隔层级，每段支持 key:label
+   *  2. data：嵌套对象树（TreeNode[]），如 [{value:'zj',label:'浙江',children:[...]}]
+   *  url：远端数据源，fetch 拉取嵌套树，data/choices 作为初始/后备
+   *  multiple：多选模式（antd 默认单选，multiple 开启多选）
+   *  checkStrictly：父子节点选中不关联（antd checkStrictly）
+   *  showCheckedStrategy：回显策略 all 全部 / parent 仅顶层父级 / child 仅叶子（antd SHOW_ALL/SHOW_PARENT/SHOW_CHILD）
+   *  maxTagCount：触发器最多显示标签数，超出 +N（antd maxTagCount）
+   *  treeLine：显示树连接线（antd treeLine）
+   *  searchable：可搜索（antd showSearch，默认关闭） */
+  interface TreeNode {
+    value?: string | number;
+    key?: string | number;
+    label?: string | number;
+    children?: TreeNode[];
+    loaded?: boolean;
+    [extra: string]: any;
+  }
+  interface Props {
+    choices: string[];
+    /** 嵌套对象树数据源（与扁平路径 choices 兼容共存，优先于 choices） */
+    data?: TreeNode[];
+    /** 远端数据源 URL */
+    url?: string;
+    /** 懒加载模式（url 存在时生效）：首次只拉根级，点击父级后逐级请求子级 */
+    lazy?: boolean;
+    /** 多选模式：开启后显示复选框，返回 value[]；关闭（默认）单选，返回 value */
+    multiple?: boolean;
+    /** 父子节点选中不关联（antd checkStrictly） */
+    checkStrictly?: boolean;
+    /** 选中值回显策略：all / parent / child（antd showCheckedStrategy） */
+    showCheckedStrategy?: string;
+    /** 触发器最多显示的标签数（antd maxTagCount） */
+    maxTagCount?: number;
+    /** 树连接线（antd treeLine） */
+    treeLine?: boolean;
+    label?: string;
+    default?: string | string[];
+    placeholder?: string;
+    hint?: string;
+    required?: boolean;
+    message?: string;
+    error?: string;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 是否可搜索：开启后下拉面板内置搜索框，按 label 过滤节点（默认关闭） */
+    searchable?: boolean;
+    onchange: (value: string | string[]) => void;
+  }
+  let {
+    choices,
+    data,
+    url = '',
+    lazy = false,
+    multiple = false,
+    checkStrictly = false,
+    showCheckedStrategy = 'all',
+    maxTagCount,
+    treeLine = false,
+    label = '',
+    default: initial,
+    placeholder = '',
+    hint = '',
+    required = false,
+    message = '',
+    error = '',
+    disabled = false,
+    searchable = false,
+    onchange
+  }: Props = $props();
+
+  // ---------- 数据解析 ----------
+  interface TreeNodeItem {
+    value: string;
+    label: string;
+    children: TreeNodeItem[];
+    isLeaf: boolean;
+    loaded?: boolean;
+  }
+
+  function parseSeg(seg: string): { value: string; label: string } {
+    const idx = seg.indexOf(':');
+    if (idx > 0) {
+      const v = seg.slice(0, idx).trim();
+      const l = seg.slice(idx + 1).trim();
+      if (v && l) return { value: v, label: l };
+    }
+    return { value: seg.trim(), label: seg.trim() };
+  }
+
+  function nodesToTree(nodes: TreeNode[] | undefined, isLazy = false): TreeNodeItem[] {
+    if (!Array.isArray(nodes)) return [];
+    return nodes.map(n => {
+      const v = n.value ?? n.key;
+      const children = n.children;
+      const hasChildren = Array.isArray(children) && children.length > 0;
+      const wasLoaded = n.loaded === true;
+      return {
+        value: String(v ?? ''),
+        label: String(n.label ?? v ?? ''),
+        children: hasChildren ? nodesToTree(children, isLazy) : [],
+        isLeaf: isLazy ? !hasChildren && wasLoaded : !hasChildren,
+        loaded: hasChildren || wasLoaded,
+      };
+    });
+  }
+
+  function normalizeRemoteTree(json: any): TreeNode[] {
+    let list = json;
+    if (!Array.isArray(json)) {
+      list = Array.isArray(json?.data) ? json.data
+        : Array.isArray(json?.options) ? json.options
+        : Array.isArray(json?.choices) ? json.choices
+        : Array.isArray(json?.items) ? json.items
+        : Array.isArray(json?.tree) ? json.tree
+        : Array.isArray(json?.treeData) ? json.treeData
+        : [];
+    }
+    const map = (arr: any[]): TreeNode[] =>
+      (arr || [])
+        .map((it: any): TreeNode | null => {
+          if (!it || typeof it !== 'object') return null;
+          const value = it.value ?? it.key;
+          if (value === undefined || value === null || value === '') return null;
+          const node: TreeNode = { value: String(value) };
+          const label = it.label ?? it.name ?? it.text;
+          if (label !== undefined && label !== null) node.label = String(label);
+          if (Array.isArray(it.children) && it.children.length > 0) {
+            node.children = map(it.children);
+          }
+          return node;
+        })
+        .filter((n: TreeNode | null): n is TreeNode => n !== null);
+    return map(list);
+  }
+
+  // ---------- 树数据源 ----------
+  let remoteData = $state<TreeNode[] | null>(null);
+  let loading = $state(false);
+  let loadingPath = $state('');
+
+  const tree = $derived.by(() => {
+    if (remoteData) return nodesToTree(remoteData, lazy);
+    if (Array.isArray(data) && data.length > 0) return nodesToTree(data, lazy);
+    const root: TreeNodeItem[] = [];
+    for (const path of choices) {
+      if (!path) continue;
+      const segs = path.split('/').map(s => s.trim()).filter(Boolean);
+      if (segs.length === 0) continue;
+      let level = root;
+      for (let i = 0; i < segs.length; i++) {
+        const { value, label } = parseSeg(segs[i]);
+        let node = level.find(n => n.value === value);
+        if (!node) {
+          node = { value, label, children: [], isLeaf: i === segs.length - 1 };
+          level.push(node);
+        }
+        level = node.children;
+      }
+    }
+    return root;
+  });
+
+  // ---------- 初始选中值 ----------
+  /** 默认值语义（对齐 antd TreeSelect defaultValue）：
+   *  逗号分隔多值；每个值支持 / 分隔路径（zj/hz）或节点 value（hz），
+   *  路径写法按段逐级查找（段先按 value 匹配、再按 label 匹配），定位到路径末端节点。
+   *  返回选中节点 value 数组 + 路径祖先 value 数组（用于初始展开） */
+  function resolveInitial(): { values: string[]; ancestors: string[] } {
+    if (!initial) return { values: [], ancestors: [] };
+    const paths = Array.isArray(initial)
+      ? initial.map(String)
+      : initial.split(',').map(s => s.trim()).filter(Boolean);
+    const values: string[] = [];
+    const ancestors: string[] = [];
+    for (const path of paths) {
+      const segs = path.split('/').map(s => s.trim()).filter(Boolean);
+      let level = tree;
+      let node: TreeNodeItem | undefined;
+      const chain: string[] = [];
+      for (const seg of segs) {
+        const found = level.find(n => n.value === seg) ?? level.find(n => n.label === seg);
+        if (!found) { node = undefined; break; }
+        chain.push(found.value);
+        node = found;
+        level = found.children;
+      }
+      if (node) {
+        values.push(node.value);
+        ancestors.push(...chain.slice(0, -1));
+      }
+    }
+    return {
+      values: [...new Set(values)],
+      ancestors: [...new Set(ancestors)]
+    };
+  }
+
+  /** 用户是否交互过（勾选/清空）：交互后不再跟随 default 变化，避免覆盖用户选择 */
+  let touched = false;
+  let selected = $state<string[]>([]);
+
+  // ---------- 展开状态 ----------
+  /** 展开的节点 value 集合 */
+  let expanded = $state<Set<string>>(new Set());
+
+  // 挂载/数据源就绪/default 变化（编辑器面板写回 DSL 后 morphdom 复用实例）时回填默认值
+  $effect(() => {
+    if (touched) return;
+    const { values, ancestors } = resolveInitial();
+    selected = values;
+    expanded = new Set(ancestors);
+  });
+
+  // ---------- 搜索 ----------
+  let query = $state('');
+  let searchEl: HTMLInputElement | undefined = $state();
+
+  /** 过滤后的节点：保留匹配项及其所有祖先路径 */
+  const filteredTree = $derived.by(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return null; // null 表示不过滤
+    function matchLabel(node: TreeNodeItem): boolean {
+      return node.label.toLowerCase().includes(q) ||
+        node.children.some(c => matchLabel(c));
+    }
+    function prune(node: TreeNodeItem): TreeNodeItem | null {
+      if (node.label.toLowerCase().includes(q)) return node;
+      const filteredChildren = node.children
+        .map(c => prune(c))
+        .filter((c): c is TreeNodeItem => c !== null);
+      if (filteredChildren.length > 0) {
+        return { ...node, children: filteredChildren };
+      }
+      return null;
+    }
+    const pruned = tree
+      .map(n => prune(n))
+      .filter((n): n is TreeNodeItem => n !== null);
+    return pruned.length > 0 ? pruned : null;
+  });
+
+  /** 搜索模式：展开所有匹配路径的祖先节点 */
+  $effect(() => {
+    if (query.trim() && filteredTree !== null) {
+      function collectAncestors(nodes: TreeNodeItem[], ancestors: string[] = []) {
+        for (const node of nodes) {
+          expanded.add(node.value);
+          if (node.children.length > 0) {
+            collectAncestors(node.children, [...ancestors, node.value]);
+          }
+        }
+      }
+      collectAncestors(filteredTree);
+    }
+  });
+
+  // ---------- 展示文案 ----------
+  function getLabel(value: string): string {
+    function find(nodes: TreeNodeItem[], v: string): string | undefined {
+      for (const n of nodes) {
+        if (n.value === v) return n.label;
+        const found = find(n.children, v);
+        if (found) return found;
+      }
+    }
+    return find(tree, value) ?? value;
+  }
+
+  const display = $derived.by(() => {
+    if (selected.length === 0) return '';
+    if (!multiple) return getLabel(selected[0]);
+    const values = applyStrategy(selected);
+    const limit = typeof maxTagCount === 'number' && maxTagCount >= 0 ? maxTagCount : Infinity;
+    const parts = values.slice(0, limit).map(v => getLabel(v));
+    if (values.length > limit) parts.push(`+${values.length - limit}`);
+    return parts.join(', ');
+  });
+
+  // ---------- 展开/折叠 ----------
+  function toggleExpand(value: string) {
+    if (expanded.has(value)) {
+      expanded.delete(value);
+    } else {
+      expanded.add(value);
+    }
+    expanded = new Set(expanded);
+  }
+
+  function expandAll() {
+    function collect(nodes: TreeNodeItem[]) {
+      for (const n of nodes) {
+        // 懒加载模式：未加载子级的节点不预置展开（首次点击时展开并逐级拉取）；
+        // 已加载的非叶子节点正常展开
+        if (n.isLeaf) continue;
+        if (lazy && url && !n.loaded) continue;
+        expanded.add(n.value);
+        collect(n.children);
+      }
+    }
+    collect(tree);
+    expanded = new Set(expanded);
+  }
+
+  function collapseAll() {
+    expanded = new Set();
+  }
+
+  // ---------- 选择逻辑（多选） ----------
+  function getAllValues(node: TreeNodeItem): string[] {
+    const vals = [node.value];
+    for (const c of node.children) vals.push(...getAllValues(c));
+    return vals;
+  }
+
+  function findNode(value: string, nodes: TreeNodeItem[] = tree): TreeNodeItem | undefined {
+    for (const n of nodes) {
+      if (n.value === value) return n;
+      const found = findNode(value, n.children);
+      if (found) return found;
+    }
+  }
+
+  /** 节点是否被全选：checkStrictly 下仅看自身；关联模式下所有后代都被选中 */
+  function isNodeChecked(node: TreeNodeItem): boolean {
+    if (checkStrictly || !multiple) return selected.includes(node.value);
+    if (node.children.length === 0) return selected.includes(node.value);
+    return node.children.every(c => isNodeChecked(c));
+  }
+  /** 节点是否被半选（部分后代被选中，仅关联模式非叶子有意义） */
+  function isNodeIndeterminate(node: TreeNodeItem): boolean {
+    if (checkStrictly || node.children.length === 0) return false;
+    const childStates = node.children.map(c => isNodeChecked(c) || isNodeIndeterminate(c));
+    return childStates.some(Boolean) && !childStates.every(Boolean);
+  }
+
+  /** 按回显策略（antd showCheckedStrategy）过滤选中值：
+   *  all 全部 / parent 仅返回最顶层的全选父级 / child 仅返回叶子 */
+  function applyStrategy(values: string[]): string[] {
+    if (!multiple || checkStrictly || showCheckedStrategy === 'all') return values;
+    const set = new Set(values);
+    /** 从根到目标节点的祖先链（含自身） */
+    function chainOf(v: string): TreeNodeItem[] {
+      const chain: TreeNodeItem[] = [];
+      function walk(nodes: TreeNodeItem[]): boolean {
+        for (const p of nodes) {
+          chain.push(p);
+          if (p.value === v) return true;
+          if (walk(p.children)) return true;
+          chain.pop();
+        }
+        return false;
+      }
+      walk(tree);
+      return chain;
+    }
+    if (showCheckedStrategy === 'child') {
+      return values.filter(v => {
+        const n = findNode(v);
+        return !n || n.children.length === 0;
+      });
+    }
+    // parent：叶子或全选父级保留，但被全选祖先覆盖的后代不显示
+    return values.filter(v => {
+      const chain = chainOf(v);
+      if (chain.length === 0) return true;
+      const fullyChecked = (n: TreeNodeItem) =>
+        n.children.length === 0 || n.children.every(c => set.has(c.value));
+      for (let i = 0; i < chain.length - 1; i++) {
+        if (fullyChecked(chain[i])) return false; // 存在全选祖先
+      }
+      return fullyChecked(chain[chain.length - 1]);
+    });
+  }
+
+  function toggleNode(node: TreeNodeItem) {
+    if (multiple) {
+      touched = true;
+      if (checkStrictly) {
+        // 父子不关联：只切换单节点
+        if (selected.includes(node.value)) {
+          selected = selected.filter(v => v !== node.value);
+        } else {
+          selected = [...selected, node.value];
+        }
+        onchange(selected);
+        return;
+      }
+      const allVals = getAllValues(node);
+      const allSelected = allVals.every(v => selected.includes(v));
+      if (allSelected) {
+        selected = selected.filter(v => !allVals.includes(v));
+      } else {
+        const newSelected = new Set(selected);
+        allVals.forEach(v => newSelected.add(v));
+        selected = Array.from(newSelected);
+      }
+      onchange(applyStrategy(selected));
+    } else {
+      touched = true;
+      selected = [node.value];
+      onchange(node.value);
+      open = false;
+    }
+  }
+
+  // ---------- 懒加载 ----------
+  function fillChildren(nodes: TreeNode[], path: string[], children: TreeNode[]): TreeNode[] {
+    return nodes.map(n => {
+      const v = String(n.value ?? n.key ?? '');
+      if (v !== path[0]) return n;
+      if (path.length === 1) return { ...n, children, loaded: true };
+      return { ...n, children: fillChildren(n.children || [], path.slice(1), children) };
+    });
+  }
+
+  async function loadChildren(node: TreeNodeItem, path: string[]) {
+    if (!url || node.loaded) return;
+    loadingPath = path.join('/');
+    try {
+      const sep = url.includes('?') ? '&' : '?';
+      const res = await fetch(`${url}${sep}parent=${encodeURIComponent(node.value)}`);
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const json: any = await res.json();
+      const list = normalizeRemoteTree(json);
+      if (remoteData) remoteData = fillChildren(remoteData, path, list);
+    } catch {
+      // 静默处理
+    } finally {
+      loadingPath = '';
+    }
+  }
+
+  // ---------- 面板开关 ----------
+  let open = $state(false);
+  let rootEl: HTMLElement | undefined = $state();
+
+  $effect(() => {
+    function onDocClick(e: MouseEvent) {
+      if (rootEl && !rootEl.contains(e.target as globalThis.Node)) open = false;
+    }
+    document.addEventListener('mousedown', onDocClick);
+    return () => document.removeEventListener('mousedown', onDocClick);
+  });
+
+  $effect(() => {
+    if (!url) { remoteData = null; return; }
+    loading = true;
+    let cancelled = false;
+    (async () => {
+      try {
+        const res = await fetch(url);
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        const json: any = await res.json();
+        if (cancelled) return;
+        const list = normalizeRemoteTree(json);
+        if (list.length === 0) throw new Error('响应中没有可用选项');
+        remoteData = list;
+      } catch {
+        // 静默回落
+      } finally {
+        if (!cancelled) loading = false;
+      }
+    })();
+    return () => { cancelled = true; };
+  });
+
+  $effect(() => {
+    if (open && searchable) {
+      query = '';
+      if (searchEl) searchEl.focus();
+    }
+  });
+
+  function toggleOpen() {
+    if (disabled) return;
+    open = !open;
+    if (open) expandAll();
+  }
+
+  function clearValue(e: MouseEvent) {
+    e.stopPropagation();
+    touched = true;
+    selected = [];
+    onchange(multiple ? [] : '');
+  }
+
+  const shownError = $derived(error || '');
+
+  // ---------- 渲染树节点 ----------
+  function renderNode(node: TreeNodeItem, depth: number = 0): any {
+    const isExpand = expanded.has(node.value);
+    const isLoad = loadingPath && loadingPath.startsWith(node.value + '/');
+    const checked = multiple ? isNodeChecked(node) : selected.includes(node.value);
+    const indeterminate = multiple && isNodeIndeterminate(node);
+    const isLoadingNode = loadingPath === node.value;
+
+    return {
+      node, depth, isExpand, isLoad, checked, indeterminate, isLoadingNode
+    };
+  }
+
+  /** 递归渲染节点（避免在 template 中使用复杂的递归逻辑） */
+  function collectVisibleNodes(nodes: TreeNodeItem[], depth: number = 0): ReturnType<typeof renderNode>[] {
+    const result: ReturnType<typeof renderNode>[] = [];
+    const activeTree = filteredTree !== null ? flattenFiltered(filteredTree) : nodes;
+    const treeToUse = filteredTree !== null ? filteredTree : nodes;
+
+    function walk(ns: TreeNodeItem[], d: number) {
+      for (const n of ns) {
+        result.push(renderNode(n, d));
+        if (!n.isLeaf && expanded.has(n.value)) {
+          walk(n.children, d + 1);
+        }
+      }
+    }
+    walk(treeToUse, 0);
+    return result;
+  }
+
+  function flattenFiltered(nodes: TreeNodeItem[]): TreeNodeItem[] {
+    const result: TreeNodeItem[] = [];
+    function collect(ns: TreeNodeItem[]) {
+      for (const n of ns) {
+        result.push(n);
+        collect(n.children);
+      }
+    }
+    collect(nodes);
+    return result;
+  }
+
+  const visibleNodes = $derived(collectVisibleNodes(tree));
+
+  /** 查找从根到目标节点的 value 路径（懒加载 fillChildren 按路径逐级定位挂载点） */
+  function nodePathOf(target: string, nodes: TreeNodeItem[] = tree): string[] | null {
+    for (const n of nodes) {
+      if (n.value === target) return [n.value];
+      if (n.children.length > 0) {
+        const sub = nodePathOf(target, n.children);
+        if (sub) return [n.value, ...sub];
+      }
+    }
+    return null;
+  }
+
+  function handleNodeClick(node: TreeNodeItem) {
+    if (disabled) return;
+    if (!node.isLeaf) {
+      toggleExpand(node.value);
+      if (lazy && url && !node.loaded) {
+        const path = nodePathOf(node.value) ?? [node.value];
+        void loadChildren(node, path);
+      }
+    } else {
+      toggleNode(node);
+    }
+  }
+
+  function handleCheck(node: TreeNodeItem, e: MouseEvent) {
+    e.stopPropagation();
+    toggleNode(node);
+  }
+
+  function handleNodeSelect(node: TreeNodeItem, e: MouseEvent) {
+    e.stopPropagation();
+    toggleNode(node);
+  }
+</script>
+
+<div class="selector widget-tree-select" bind:this={rootEl}>
+  {#if label || hint || required}
+    <div class="widget-label-row">
+      {#if required}<span class="widget-required-mark" aria-hidden="true">*</span>{/if}
+      {#if label}<label>{label}</label>{/if}
+      {#if hint}<span class="widget-hint" data-hint={hint}>ⓘ</span>{/if}
+    </div>
+  {/if}
+  <div class="widget-field-content">
+    <button type="button" class="ts-trigger" class:widget-input-error={!!shownError} onclick={toggleOpen} aria-expanded={open} {disabled}>
+      {#if loading}
+        <span class="ts-placeholder">加载中…</span>
+      {:else if selected.length > 0}
+        <span class="ts-value">{display}</span>
+      {:else}
+        <span class="ts-placeholder ts-placeholder-empty">{placeholder || '请选择'}</span>
+      {/if}
+      {#if !disabled && selected.length > 0}
+        <span class="ts-clear" role="button" tabindex="-1" aria-label="清空" onclick={(e) => clearValue(e)}>×</span>
+      {:else if !disabled}
+        <span class="ts-arrow" class:ts-arrow-open={open} aria-hidden="true">▾</span>
+      {/if}
+    </button>
+    {#if shownError}<div class="widget-error-text" role="alert">{shownError}</div>{/if}
+
+    {#if open}
+      <div class="ts-panel">
+        {#if searchable}
+          <div class="ts-search">
+            <input
+              bind:this={searchEl}
+              type="text"
+              class="ts-search-input"
+              bind:value={query}
+              placeholder="搜索节点…"
+            />
+          </div>
+        {/if}
+        <div class="ts-toolbar">
+          <button type="button" class="ts-tool-btn" onclick={expandAll}>展开全部</button>
+          <button type="button" class="ts-tool-btn" onclick={collapseAll}>折叠全部</button>
+        </div>
+        <div class="ts-tree" role="tree">
+          {#if visibleNodes.length === 0}
+            <div class="ts-empty">{loading ? '加载中…' : query.trim() ? '无匹配结果' : '暂无数据'}</div>
+          {:else}
+            {#each visibleNodes as { node, depth, isExpand, isLoadingNode } (node.value)}
+              <div
+                class="ts-node"
+                class:ts-node-selected={!multiple && selected.includes(node.value)}
+                class:ts-tree-line={treeLine}
+                style="padding-left: {depth * 20 + 8}px"
+                role="treeitem"
+                aria-expanded={!node.isLeaf ? isExpand : undefined}
+              >
+                {#if !node.isLeaf}
+                  <button
+                    type="button"
+                    class="ts-expand-btn"
+                    onclick={() => handleNodeClick(node)}
+                    aria-label={isExpand ? '折叠' : '展开'}
+                  >
+                    {#if isLoadingNode}
+                      <span class="ts-loading-icon"></span>
+                    {:else}
+                      <span class="ts-expand-arrow" class:ts-expanded={isExpand}>▶</span>
+                    {/if}
+                  </button>
+                {:else}
+                  <span class="ts-leaf-spacer"></span>
+                {/if}
+
+                {#if multiple}
+                  <button
+                    type="button"
+                    class="ts-checkbox"
+                    class:ts-checked={isNodeChecked(node)}
+                    class:ts-indeterminate={isNodeIndeterminate(node)}
+                    onclick={(e) => handleCheck(node, e)}
+                    aria-label={isNodeChecked(node) ? '取消选择' : '选择'}
+                  >
+                    {#if isNodeChecked(node)}
+                      <span class="ts-check-icon">✓</span>
+                    {:else if isNodeIndeterminate(node)}
+                      <span class="ts-check-icon">−</span>
+                    {/if}
+                  </button>
+                {/if}
+
+                <button
+                  type="button"
+                  class="ts-label"
+                  class:ts-label-selected={!multiple && selected.includes(node.value)}
+                  onclick={(e) => handleNodeSelect(node, e)}
+                >
+                  {node.label}
+                </button>
+              </div>
+            {/each}
+          {/if}
+        </div>
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .widget-tree-select {
+    position: relative;
+  }
+
+  .ts-trigger {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    width: 100%;
+    padding: 0.625rem 0.75rem;
+    border: 1px solid #d9d9d9;
+    border-radius: 6px;
+    font-size: 0.875rem;
+    background-color: #ffffff;
+    cursor: pointer;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+    text-align: left;
+  }
+  .ts-trigger:hover { border-color: #4096ff; }
+  .ts-trigger:focus {
+    outline: none;
+    border-color: #1677ff;
+    box-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);
+  }
+  .ts-trigger:disabled {
+    background-color: #f5f5f5;
+    color: rgba(0, 0, 0, 0.25);
+    border-color: #d9d9d9;
+    cursor: not-allowed;
+  }
+  .ts-trigger:disabled:hover { border-color: #d9d9d9; }
+
+  .ts-value {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: rgba(0, 0, 0, 0.88);
+  }
+  .ts-placeholder {
+    flex: 1 1 auto;
+    color: rgba(0, 0, 0, 0.45);
+  }
+  .ts-placeholder-empty { color: rgba(0, 0, 0, 0.45); }
+  .ts-arrow { color: rgba(0, 0, 0, 0.45); font-size: 0.75rem; transition: transform 0.2s ease; }
+  .ts-arrow-open { transform: rotate(180deg); }
+  .ts-clear {
+    padding: 0 0.25rem;
+    color: rgba(0, 0, 0, 0.45);
+    font-size: 1rem;
+    line-height: 1;
+  }
+  .ts-clear:hover { color: rgba(0, 0, 0, 0.88); }
+
+  .ts-panel {
+    position: absolute;
+    z-index: 50;
+    top: calc(100% + 4px);
+    left: 0;
+    right: 0;
+    display: flex;
+    flex-direction: column;
+    background: #ffffff;
+    border: 1px solid #d9d9d9;
+    border-radius: 8px;
+    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+    max-height: 280px;
+    overflow: hidden;
+  }
+
+  .ts-search {
+    padding: 0.5rem;
+    border-bottom: 1px solid #f0f0f0;
+    flex-shrink: 0;
+  }
+  .ts-search-input {
+    width: 100%;
+    padding: 0.375rem 0.625rem;
+    border: 1px solid #d9d9d9;
+    border-radius: 4px;
+    font-size: 0.8125rem;
+    box-sizing: border-box;
+  }
+  .ts-search-input:focus {
+    outline: none;
+    border-color: #1677ff;
+    box-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);
+  }
+
+  .ts-toolbar {
+    display: flex;
+    gap: 0.5rem;
+    padding: 0.375rem 0.5rem;
+    border-bottom: 1px solid #f0f0f0;
+    flex-shrink: 0;
+  }
+  .ts-tool-btn {
+    padding: 0.125rem 0.5rem;
+    border: 1px solid #d9d9d9;
+    border-radius: 4px;
+    background: #ffffff;
+    font-size: 0.75rem;
+    color: rgba(0, 0, 0, 0.65);
+    cursor: pointer;
+    transition: all 0.15s ease;
+  }
+  .ts-tool-btn:hover {
+    border-color: #1677ff;
+    color: #1677ff;
+  }
+
+  .ts-tree {
+    flex: 1 1 auto;
+    overflow-y: auto;
+    padding: 0.375rem 0;
+    min-height: 60px;
+  }
+
+  .ts-node {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.25rem 0.5rem;
+    cursor: pointer;
+    border-radius: 4px;
+    transition: background 0.15s ease;
+  }
+  .ts-node:hover { background: #f5f5f5; }
+  .ts-node-selected { background: #e6f4ff; }
+  /* 树连接线（antd treeLine）：横向连线 + 纵向缩进引导线 */
+  .ts-node.ts-tree-line { position: relative; }
+  .ts-node.ts-tree-line::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 8px;
+    border-left: 1px solid #d9d9d9;
+  }
+  .ts-node.ts-tree-line:first-child::before { top: 50%; }
+  .ts-node.ts-tree-line:last-child::before { bottom: 50%; }
+  .ts-node.ts-tree-line::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 8px;
+    width: 12px;
+    border-top: 1px solid #d9d9d9;
+  }
+
+  .ts-expand-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    border: none;
+    background: transparent;
+    padding: 0;
+    cursor: pointer;
+    flex-shrink: 0;
+  }
+  .ts-expand-arrow {
+    font-size: 0.625rem;
+    color: rgba(0, 0, 0, 0.45);
+    transition: transform 0.2s ease;
+    display: inline-block;
+  }
+  .ts-expand-arrow.ts-expanded { transform: rotate(90deg); }
+
+  .ts-loading-icon {
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    border: 2px solid #d9d9d9;
+    border-top-color: #1677ff;
+    border-radius: 50%;
+    animation: ts-spin 0.8s linear infinite;
+  }
+  @keyframes ts-spin {
+    to { transform: rotate(360deg); }
+  }
+
+  .ts-leaf-spacer {
+    display: inline-block;
+    width: 18px;
+    flex-shrink: 0;
+  }
+
+  .ts-checkbox {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    border: 1px solid #d9d9d9;
+    border-radius: 4px;
+    background: #ffffff;
+    cursor: pointer;
+    flex-shrink: 0;
+    transition: all 0.15s ease;
+    padding: 0;
+  }
+  .ts-checkbox:hover { border-color: #1677ff; }
+  .ts-checkbox.ts-checked {
+    background: #1677ff;
+    border-color: #1677ff;
+    color: #ffffff;
+  }
+  .ts-checkbox.ts-indeterminate {
+    background: #1677ff;
+    border-color: #1677ff;
+    color: #ffffff;
+  }
+
+  .ts-check-icon {
+    font-size: 0.75rem;
+    font-weight: 700;
+    line-height: 1;
+  }
+
+  .ts-label {
+    flex: 1 1 auto;
+    min-width: 0;
+    border: none;
+    background: transparent;
+    font-size: 0.875rem;
+    color: rgba(0, 0, 0, 0.88);
+    cursor: pointer;
+    text-align: left;
+    padding: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .ts-label.ts-label-selected { color: #1677ff; font-weight: 500; }
+
+  .ts-empty {
+    padding: 0.75rem 0.5rem;
+    font-size: 0.8125rem;
+    color: rgba(0, 0, 0, 0.45);
+    text-align: center;
+  }
+</style>