@teamix-evo/ui 0.7.1 → 0.7.2

package/src/components/tooltip/meta.md

@@ -87,6 +87,29 @@
 </TooltipProvider>
 ```
 
+### AllPositions
+
+12 方向矩阵：side × align 组合。
+
+```tsx
+<TooltipProvider>
+  <div className="grid grid-cols-3 gap-4">
+    {sides.flatMap((side) =>
+      aligns.map((align) => (
+        <Tooltip key={`${side}-${align}`}>
+          <TooltipTrigger asChild>
+            <Button>{`${side}-${align}`}</Button>
+          </TooltipTrigger>
+          <TooltipContent side={side} align={align}>
+            {`${side} / ${align}`}
+          </TooltipContent>
+        </Tooltip>
+      )),
+    )}
+  </div>
+</TooltipProvider>
+```
+
 ### WithoutArrow
 
 隐藏箭头：showArrow={false}。

package/src/components/transfer/index.tsx

@@ -304,7 +304,7 @@ function TransferPanel({
       className={cn(panelVariants({ size }))}
     >
       {/* Header */}
-      <div className="flex items-center gap-2 border-b border-border px-2 py-2">
+      <div className="flex items-center gap-2 border-b border-border p-2">
         {showHeaderCheckbox ? (
           <Checkbox
             checked={
@@ -413,7 +413,7 @@ function TransferPanel({
                       e.stopPropagation();
                       onItemRemove?.(item.key);
                     }}
-                    className="inline-flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-sm text-muted-foreground opacity-0 transition-colors hover:text-foreground group-hover/transfer-item:opacity-100"
+                    className="inline-flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-sm text-muted-foreground opacity-0 transition-colors group-hover/transfer-item:opacity-100 hover:text-foreground"
                   >
                     <X className="size-3.5" />
                   </span>

package/src/components/transfer/meta.md

@@ -50,6 +50,24 @@ Transfer > TransferPanel × 2 + Operations
 
 ## 示例
 
+### Basic
+
+```tsx
+<Transfer dataSource={dataSource} defaultTargetKeys={['item-1'} 'item-5']={'item-5']} />
+```
+
+### WithSearch
+
+```tsx
+<Transfer dataSource={dataSource} showSearch defaultTargetKeys={['item-2']} />
+```
+
+### SearchPerSide
+
+```tsx
+<Transfer dataSource={dataSource} showSearch={[true} false]={false]} boolean]={boolean]} defaultTargetKeys={['item-2']} />
+```
+
 ### Sizes
 
 ```tsx
@@ -74,3 +92,82 @@ Transfer > TransferPanel × 2 + Operations
   />
 </div>
 ```
+
+### SimpleMode
+
+```tsx
+<Transfer dataSource={dataSource} mode="simple" defaultTargetKeys={['item-1']} titles={['可选项'} '已选项']={'已选项']} />
+```
+
+### OneWay
+
+```tsx
+<Transfer dataSource={dataSource} oneWay defaultTargetKeys={['item-2'} 'item-5']={'item-5']} titles={['可选项'} '已选项']={'已选项']} />
+```
+
+### WithDescription
+
+```tsx
+<Transfer dataSource={dataSourceWithDescription} defaultTargetKeys={['member-1']} titles={['可分配'} '已分配']={'已分配']} />
+```
+
+### CustomRender
+
+```tsx
+<span className="inline-flex items-center gap-1.5">
+  <Folder className="size-3 text-muted-foreground" />
+  {item.title}
+</span>
+```
+
+### CustomOperations
+
+```tsx
+<Transfer dataSource={dataSource} defaultTargetKeys={['item-1']} operations={[<ChevronsRight />} <ChevronsLeft />]
+      React.ReactNode={<ChevronsLeft />]
+      React.ReactNode} React.ReactNode={React.ReactNode} ]={]} />
+```
+
+### Disabled
+
+```tsx
+<Transfer dataSource={dataSource} disabled defaultTargetKeys={['item-1'} 'item-4']={'item-4']} />
+```
+
+### PartialDisabled
+
+```tsx
+<Transfer dataSource={dataSource} leftDisabled defaultTargetKeys={['item-2'} 'item-5']={'item-5']} titles={['左侧禁用'} '右侧可操作']={'右侧可操作']} />
+```
+
+### WithLocale
+
+```tsx
+<Transfer dataSource={dataSource} showSearch titles={['可分配成员'} '已分配成员']={'已分配成员']} locale={{
+      itemUnit: '人'} itemsUnit="人" notFoundContent="没有匹配的成员" searchPlaceholder="按姓名搜索" }={}} />
+```
+
+### CustomPanel
+
+```tsx
+<li
+  key={item.key}
+  className={`flex cursor-pointer items-center gap-2 rounded-sm px-1.5 py-1 hover:bg-accent/50 ${
+    checked ? 'bg-accent/40' : ''
+  } ${
+    disabled || item.disabled
+      ? 'pointer-events-none opacity-50'
+      : ''
+  }`}
+  onClick={() => onItemSelect(item.key, !checked)}
+>
+  <span
+    className={`inline-block size-1.5 rounded-full ${
+      direction === 'left'
+        ? 'bg-primary'
+        : 'bg-muted-foreground'
+    }`}
+  />
+  {item.title}
+</li>
+```

package/src/components/tree/index.tsx

@@ -25,24 +25,254 @@ import {
 import { cn } from '@/lib/utils';
 import { Checkbox } from '@/components/checkbox';
 
-import {
-  applyCheckedStrategy,
-  collectIndeterminateKeys,
-  expandWithParents,
-  findNode,
-  flattenVisible,
-  getAllKeys,
-  isFullyChecked,
-  isIndeterminate,
-  toggleWithCascade,
-  type FlatTreeNode,
-  type TreeNodeBase,
-} from './utils';
+// ─── Tree Utilities ─────────────────────────────────────────────────────────
+
+/** 所有树节点共享的可选基础字段。 */
+interface TreeNodeBase {
+  /** 整体禁用：不可选 / 不可勾选 / 不可展开收起。 */
+  disabled?: boolean;
+  /** 仅禁用复选框（多选 / 勾选下生效）。 */
+  disableCheckbox?: boolean;
+  /** 强制叶子节点：无展开箭头 / 不参与 cascade。 */
+  isLeaf?: boolean;
+}
+
+/** 在数据树中按 key 查找节点。 */
+function findNode<T extends { children?: T[] }>(
+  data: T[],
+  key: string,
+  getKey: (n: T) => string,
+): T | undefined {
+  for (const node of data) {
+    if (getKey(node) === key) return node;
+    if (node.children) {
+      const found = findNode(node.children, key, getKey);
+      if (found) return found;
+    }
+  }
+  return undefined;
+}
+
+/** 收集整棵树所有节点 key（含中间节点）。 */
+function getAllKeys<T extends { children?: T[] }>(
+  data: T[],
+  getKey: (n: T) => string,
+): string[] {
+  const keys: string[] = [];
+  const walk = (nodes: T[]) => {
+    for (const node of nodes) {
+      keys.push(getKey(node));
+      if (node.children) walk(node.children);
+    }
+  };
+  walk(data);
+  return keys;
+}
+
+/** 收集节点下所有未禁用 / 未 disableCheckbox 的后代 key（含自身）。 */
+function collectCheckable<T extends TreeNodeBase & { children?: T[] }>(
+  node: T,
+  getKey: (n: T) => string,
+): string[] {
+  const out: string[] = [];
+  const walk = (n: T) => {
+    if (n.disabled || n.disableCheckbox) return;
+    out.push(getKey(n));
+    n.children?.forEach(walk);
+  };
+  walk(node);
+  return out;
+}
+
+/**
+ * 节点是否 fully checked —— 对齐 antd `rc-tree` `conductCheck` 语义：
+ * - 叶子（或所有子均不可勾选）：`checked.has(self)`
+ * - 非叶子：所有 checkable 子均 fully checked，不依赖 self 在 set 中
+ *   （避免受控展开后 parent in set 误判为 fully，导致取消子项被压缩推导反吐）。
+ */
+function isFullyChecked<T extends TreeNodeBase & { children?: T[] }>(
+  node: T,
+  checked: Set<string>,
+  getKey: (n: T) => string,
+): boolean {
+  const children = node.children?.filter(
+    (c) => !c.disabled && !c.disableCheckbox,
+  );
+  if (!children || children.length === 0) {
+    return checked.has(getKey(node));
+  }
+  return children.every((c) => isFullyChecked(c, checked, getKey));
+}
+
+/** 是否处于半选状态：自身未 fully checked 但有任一后代被选。 */
+function isIndeterminate<T extends TreeNodeBase & { children?: T[] }>(
+  node: T,
+  checked: Set<string>,
+  getKey: (n: T) => string,
+): boolean {
+  if (isFullyChecked(node, checked, getKey)) return false;
+  const stack: T[] = node.children ? [...node.children] : [];
+  while (stack.length) {
+    const cur = stack.pop()!;
+    if (checked.has(getKey(cur))) return true;
+    if (cur.children) stack.push(...cur.children);
+  }
+  return false;
+}
+
+/** 把内部完整 checkedSet 按策略压缩为出参。 */
+function applyCheckedStrategy<T extends TreeNodeBase & { children?: T[] }>(
+  data: T[],
+  checked: Set<string>,
+  strategy: 'parent' | 'child' | 'all',
+  getKey: (n: T) => string,
+): string[] {
+  const out: string[] = [];
+  const walk = (nodes: T[]) => {
+    for (const node of nodes) {
+      const fully = isFullyChecked(node, checked, getKey);
+      if (strategy === 'parent') {
+        if (fully) {
+          out.push(getKey(node));
+          continue;
+        }
+        if (node.children) walk(node.children);
+      } else if (strategy === 'child') {
+        const isLeaf =
+          node.isLeaf ?? (!node.children || node.children.length === 0);
+        if (isLeaf && (fully || checked.has(getKey(node)))) {
+          out.push(getKey(node));
+        }
+        if (node.children) walk(node.children);
+      } else {
+        if (fully || checked.has(getKey(node))) out.push(getKey(node));
+        if (node.children) walk(node.children);
+      }
+    }
+  };
+  walk(data);
+  return out;
+}
+
+/** 父子联动模式：勾选 / 取消时同步 ancestor / descendant。 */
+function toggleWithCascade<T extends TreeNodeBase & { children?: T[] }>(
+  data: T[],
+  current: Set<string>,
+  target: T,
+  nextChecked: boolean,
+  getKey: (n: T) => string,
+): Set<string> {
+  const next = new Set(current);
+  // 1. 同步所有可勾选后代（含自身）
+  for (const v of collectCheckable(target, getKey)) {
+    if (nextChecked) next.add(v);
+    else next.delete(v);
+  }
+  // 2. 找到 target 的祖先链，倒序回算
+  const parents: T[] = [];
+  const walk = (nodes: T[], chain: T[]): boolean => {
+    for (const node of nodes) {
+      if (node === target) {
+        parents.push(...chain);
+        return true;
+      }
+      if (node.children && walk(node.children, [...chain, node])) return true;
+    }
+    return false;
+  };
+  walk(data, []);
+  for (let i = parents.length - 1; i >= 0; i--) {
+    const p = parents[i]!;
+    if (isFullyChecked(p, next, getKey)) next.add(getKey(p));
+    else next.delete(getKey(p));
+  }
+  return next;
+}
+
+/** 收集树中所有节点的半选 key 列表（用于 onCheck info）。 */
+function collectIndeterminateKeys<T extends TreeNodeBase & { children?: T[] }>(
+  data: T[],
+  checked: Set<string>,
+  getKey: (n: T) => string,
+): string[] {
+  const out: string[] = [];
+  const walk = (nodes: T[]) => {
+    for (const node of nodes) {
+      if (isIndeterminate(node, checked, getKey)) out.push(getKey(node));
+      if (node.children) walk(node.children);
+    }
+  };
+  walk(data);
+  return out;
+}
+
+// ─── 展平 / 自动展开父级 ────────────────────────────────────────────────────
+
+/** 扁平节点（虚拟滚动消费）。 */
+interface FlatTreeNode<T> {
+  /** 当前节点。 */
+  node: T;
+  /** 层级，根 = 0。 */
+  level: number;
+  /** 父节点 key 链（自顶向下，不含自身）。 */
+  parentKeys: string[];
+  /** 是否叶子。 */
+  isLeaf: boolean;
+}
+
+/** 按 expandedKeys 展开当前可见节点列表，root → leaf 顺序。 */
+function flattenVisible<T extends { children?: T[]; isLeaf?: boolean }>(
+  data: T[],
+  expandedKeys: Set<string>,
+  getKey: (n: T) => string,
+): FlatTreeNode<T>[] {
+  const out: FlatTreeNode<T>[] = [];
+  const walk = (nodes: T[], level: number, chain: string[]) => {
+    for (const node of nodes) {
+      const key = getKey(node);
+      const hasChildren = !!(node.children && node.children.length > 0);
+      const isLeaf = node.isLeaf ?? !hasChildren;
+      out.push({ node, level, parentKeys: chain, isLeaf });
+      if (hasChildren && expandedKeys.has(key)) {
+        walk(node.children!, level + 1, [...chain, key]);
+      }
+    }
+  };
+  walk(data, 0, []);
+  return out;
+}
+
+/** 把命中节点的所有祖先 key 自动并入展开集合（autoExpandParent 用）。 */
+function expandWithParents<T extends { children?: T[] }>(
+  data: T[],
+  keys: string[],
+  getKey: (n: T) => string,
+): string[] {
+  const target = new Set(keys);
+  const out = new Set(keys);
+  const walk = (nodes: T[], chain: string[]): boolean => {
+    let hit = false;
+    for (const node of nodes) {
+      const key = getKey(node);
+      const childHit = node.children
+        ? walk(node.children, [...chain, key])
+        : false;
+      if (target.has(key) || childHit) {
+        // 把当前节点的祖先加进来
+        for (const k of chain) out.add(k);
+        hit = true;
+      }
+    }
+    return hit;
+  };
+  walk(data, []);
+  return Array.from(out);
+}
 
 // ─── Variants ────────────────────────────────────────────────────────────────
 
 const treeNodeVariants = cva(
-  'group/tree-node relative flex items-center gap-1 rounded-sm text-xs select-none transition-colors data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground',
+  'group/tree-node relative flex items-center gap-1 rounded-sm text-xs transition-colors select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground',
   {
     variants: {
       size: {
@@ -546,7 +776,7 @@ function TreeNodeRow({ node, level }: { node: TreeNode; level: number }) {
             <span
               aria-hidden
               data-slot="tree-line"
-              className="pointer-events-none absolute top-0 bottom-0 w-px bg-border"
+              className="pointer-events-none absolute inset-y-0 w-px bg-border"
               style={{
                 left: `${
                   level * INDENT_PER_LEVEL + NODE_BASE_PADDING_LEFT + 8

package/src/components/tree/meta.md

@@ -48,6 +48,135 @@
 
 ## 示例
 
+### Selectable
+
+受控选中 + 节点级 selectable 覆盖 + multiple 多选选中，对应 cd `control-select`。
+
+```tsx
+<div className="flex flex-col gap-2">
+  <label className="flex items-center gap-2 text-xs">
+    <Checkbox
+      checked={multi}
+      onCheckedChange={(next) => {
+        setMulti(next === true);
+        setKeys([]);
+      }}
+    />
+    支持多选 multiple
+  </label>
+  <Tree
+    treeData={treeData}
+    defaultExpandAll
+    multiple={multi}
+    selectedKeys={keys}
+    onSelect={(next) => setKeys(next)}
+  />
+  <span className="text-xs text-muted-foreground">
+    selectedKeys: {JSON.stringify(keys)}
+  </span>
+</div>
+```
+
+### Checkable
+
+勾选：checkable + checkStrictly 切换 + 三档 checkedStrategy 输出对比， 对应 cd `control-check`。
+
+```tsx
+<div className="flex flex-col gap-3">
+  <label className="flex items-center gap-2 text-xs">
+    <Checkbox
+      checked={strictly}
+      onCheckedChange={(next) => {
+        setStrictly(next === true);
+        setKeys([]);
+      }}
+    />
+    取消父子关联 checkStrictly
+  </label>
+  <Tree
+    treeData={treeData}
+    defaultExpandAll
+    checkable
+    checkStrictly={strictly}
+    checkedKeys={keys}
+    onCheck={(next) => setKeys(next)}
+  />
+  <span className="text-xs text-muted-foreground">
+    checkedKeys: {JSON.stringify(keys)}
+  </span>
+</div>
+```
+
+### CheckedStrategy
+
+三档回填策略对比：parent / child / all。
+
+```tsx
+<div className="flex flex-col gap-4">
+  <Demo strategy="all" />
+  <Demo strategy="parent" />
+  <Demo strategy="child" />
+</div>
+```
+
+### WithLine
+
+连接线 showLine：在子树左侧加一根 1px 线条，对应 cd `line`。
+
+```tsx
+<Tree treeData={treeData} defaultExpandAll showLine />
+```
+
+### WithIcon
+
+自定义图标 + showIcon，对应 cd `icon`。
+
+```tsx
+<Tree treeData={orgTree} defaultExpandAll showIcon />
+```
+
+### LoadData
+
+异步加载：点击展开非 isLeaf 节点时调用 loadData，期间显示 spinner。 对应 cd `dynamic`。
+
+```tsx
+const [data, setData] = React.useState<TreeNode[]>([
+  { key: '0', label: '点击展开加载' },
+  { key: '1', label: '点击展开加载' },
+  { key: '2', label: '叶子节点', isLeaf: true },
+]);
+const onLoad = (node: TreeNode) =>
+  new Promise<void>((resolve) => {
+    setTimeout(() => {
+      setData((prev) => addChildren(prev, node.key));
+      resolve();
+    }, 800);
+  });
+return <Tree treeData={data} loadData={onLoad} />;
+```
+
+### Search
+
+搜索高亮：外部 Input 驱动 expandedKeys + filterTreeNode 高亮命中节点。 搜索时 autoExpandParent=true 自动展开命中节点的祖先链。对应 cd `search-tree`。
+
+```tsx
+<div className="flex w-72 flex-col gap-2">
+  <Input
+    size="sm"
+    placeholder="搜索节点 label"
+    value={keyword}
+    onChange={(e) => setKeyword(e.target.value)}
+  />
+  <Tree
+    treeData={treeData}
+    expandedKeys={expanded}
+    onExpand={(next) => setExpanded(next)}
+    autoExpandParent={!!keyword}
+    filterTreeNode={(n) => matchedKeys.has(n.key)}
+  />
+</div>
+```
+
 ### BlockNode
 
 节点占满整行 blockNode：常用于在节点尾部追加操作按钮。配合 titleRender。 对应 cd `node-block`。
@@ -78,6 +207,28 @@
 />
 ```
 
+### Virtual
+
+虚拟滚动：1000+ 节点开启 virtual，对应 cd `virtual-tree`。
+
+```tsx
+const big = React.useMemo<TreeNode[]>(() => {
+  const out: TreeNode[] = [];
+  for (let i = 0; i < 50; i++) {
+    out.push({
+      key: `g-${i}`,
+      label: `分组 ${i}`,
+      children: Array.from({ length: 30 }).map((_, j) => ({
+        key: `g-${i}-${j}`,
+        label: `节点 ${i}-${j}`,
+      })),
+    });
+  }
+  return out;
+}, []);
+return <Tree treeData={big} defaultExpandAll virtual />;
+```
+
 ### Sizes
 
 尺寸：sm / default 两档行高。

package/src/components/tree-select/index.tsx

@@ -21,7 +21,21 @@ import { cn } from '@/lib/utils';
 import { Spinner } from '@/components/spinner';
 import { Tree } from '@/components/tree';
 import type { TreeNode } from '@/components/tree';
-import { findNode } from '@/components/tree/utils';
+/** 在数据树中按 key 查找节点。 */
+function findNode<T extends { children?: T[] }>(
+  data: T[],
+  key: string,
+  getKey: (n: T) => string,
+): T | undefined {
+  for (const node of data) {
+    if (getKey(node) === key) return node;
+    if (node.children) {
+      const found = findNode(node.children, key, getKey);
+      if (found) return found;
+    }
+  }
+  return undefined;
+}
 
 // ─── Variants ────────────────────────────────────────────────────────────────
 
@@ -327,7 +341,7 @@ function TreeSelect({
             align="start"
             {...popoverProps}
             className={cn(
-              'z-50 min-w-(--radix-popover-trigger-width) origin-(--radix-popover-content-transform-origin) rounded-md bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
+              'z-50 min-w-(--radix-popover-trigger-width) origin-(--radix-popover-content-transform-origin) rounded-md bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
               popoverProps?.className,
             )}
           >