@teamix-evo/ui 0.7.0 → 0.7.2

package/src/components/tree-select/meta.md

@@ -44,6 +44,14 @@
 
 ## 示例
 
+### Multiple
+
+多选模式：父子联动勾选，半选状态由 indeterminate 表达。
+
+```tsx
+<TreeSelect treeData={treeData} multiple defaultExpandAll />
+```
+
 ### CheckStrictly
 
 父子独立勾选：勾选父级不影响子级，反之亦然。
@@ -52,6 +60,103 @@
 <TreeSelect treeData={treeData} multiple checkStrictly defaultExpandAll />
 ```
 
+### CheckedStrategy
+
+三种回填策略对比：parent / child / all。
+
+```tsx
+<div className="flex flex-col gap-3">
+  <div className="flex items-center gap-2">
+    <span className="w-16 text-xs text-muted-foreground">parent</span>
+    <TreeSelect
+      treeData={treeData}
+      multiple
+      showCheckedStrategy="parent"
+      value={parentVal}
+      onChange={(v) => setParentVal(v as string[])}
+      defaultExpandAll
+    />
+    <span className="text-xs text-muted-foreground">
+      出参：{JSON.stringify(parentVal)}
+    </span>
+  </div>
+  <div className="flex items-center gap-2">
+    <span className="w-16 text-xs text-muted-foreground">child</span>
+    <TreeSelect
+      treeData={treeData}
+      multiple
+      showCheckedStrategy="child"
+      value={childVal}
+      onChange={(v) => setChildVal(v as string[])}
+      defaultExpandAll
+    />
+    <span className="text-xs text-muted-foreground">
+      出参：{JSON.stringify(childVal)}
+    </span>
+  </div>
+  <div className="flex items-center gap-2">
+    <span className="w-16 text-xs text-muted-foreground">all</span>
+    <TreeSelect
+      treeData={treeData}
+      multiple
+      showCheckedStrategy="all"
+      value={allVal}
+      onChange={(v) => setAllVal(v as string[])}
+      defaultExpandAll
+    />
+    <span className="text-xs text-muted-foreground">
+      出参：{JSON.stringify(allVal)}
+    </span>
+  </div>
+</div>
+```
+
+### WithSearch
+
+内置搜索：按 label 字段本地过滤。
+
+```tsx
+<TreeSelect treeData={treeData} showSearch defaultExpandAll />
+```
+
+### AsyncSearch
+
+异步搜索：提供 onSearch 由外部接管 treeData，组件不再做本地过滤。
+
+```tsx
+const [data, setData] = React.useState<TreeSelectNode[]>([
+  {
+    value: 'zhejiang',
+    label: '浙江',
+    children: [{ value: 'sx', label: '绍兴' }],
+  },
+]);
+const timer = React.useRef<ReturnType<typeof setTimeout>>();
+return (
+  <TreeSelect
+    treeData={data}
+    showSearch
+    defaultExpandAll
+    onSearch={(kw) => {
+      if (timer.current) clearTimeout(timer.current);
+      if (!kw) {
+        setData([
+          {
+            value: 'zhejiang',
+            label: '浙江',
+            children: [{ value: 'sx', label: '绍兴' }],
+          },
+        ]);
+        return;
+      }
+      timer.current = setTimeout(() => {
+        setData([{ value: kw, label: kw }]);
+      }, 300);
+    }}
+  />
+);
+```
+
 ### Sizes
 
 三档尺寸：sm / default / lg，对齐 Button、Input、Select。
@@ -76,3 +181,48 @@
   allowClear
 />
 ```
+
+### Loading
+
+加载态：把右侧图标替换为旋转 spinner，与 Select 行为一致。
+
+```tsx
+<TreeSelect treeData={treeData} loading />
+```
+
+### Disabled
+
+整体禁用。
+
+```tsx
+<TreeSelect treeData={treeData} disabled defaultValue="fe-1" />
+```
+
+### Invalid
+
+错误态：通过 aria-invalid 触发 destructive 边框与 ring。
+
+```tsx
+<TreeSelect treeData={treeData} aria-invalid />
+```
+
+### Controlled
+
+受控 value + 受控 open。
+
+```tsx
+<div className="flex flex-col items-start gap-2">
+  <TreeSelect
+    treeData={treeData}
+    multiple
+    value={value}
+    onChange={(v) => setValue(v as string[])}
+    open={open}
+    onOpenChange={setOpen}
+    defaultExpandAll
+  />
+  <span className="text-xs text-muted-foreground">
+    value: {JSON.stringify(value)} · open: {String(open)}
+  </span>
+</div>
+```

package/src/components/typography/index.tsx

@@ -72,7 +72,7 @@ function Prose({ className, ...props }: ProseProps) {
         '[&_pre]:my-4 [&_pre]:overflow-x-auto [&_pre]:rounded-md [&_pre]:bg-muted [&_pre]:p-4',
         '[&_pre_code]:bg-transparent [&_pre_code]:p-0',
         // blockquote / hr
-        '[&_blockquote]:my-4 [&_blockquote]:border-l-4 [&_blockquote]:border-border [&_blockquote]:pl-4 [&_blockquote]:italic [&_blockquote]:text-muted-foreground',
+        '[&_blockquote]:my-4 [&_blockquote]:border-l-4 [&_blockquote]:border-border [&_blockquote]:pl-4 [&_blockquote]:text-muted-foreground [&_blockquote]:italic',
         '[&_hr]:my-6 [&_hr]:border-border',
         className,
       )}
@@ -220,7 +220,7 @@ function Text({
     del && 'line-through',
     italic && 'italic',
     underline && 'underline underline-offset-4',
-    disabled && 'cursor-not-allowed select-none opacity-50',
+    disabled && 'cursor-not-allowed opacity-50 select-none',
     ellipsis && 'inline-block max-w-full truncate align-bottom',
     code && 'rounded bg-muted px-1.5 py-0.5 font-mono text-[0.875em]',
     className,
@@ -236,7 +236,7 @@ function Text({
           type="button"
           onClick={handleCopy}
           aria-label={copied ? '已复制' : '复制'}
-          className="cursor-pointer rounded-sm p-0.5 text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          className="cursor-pointer rounded-sm p-0.5 text-muted-foreground transition-colors hover:text-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none"
         >
           {copied ? (
             <Check className="size-3.5 text-success" />

package/src/components/upload/index.tsx

@@ -476,7 +476,7 @@ function UploadList({
             data-status={file.status}
             className={cn(
               'group flex items-center gap-2 rounded-sm px-2 py-1 text-xs transition-colors hover:bg-accent/50',
-              listType === 'image' && 'items-center gap-2 px-1.5 py-1.5',
+              listType === 'image' && 'items-center gap-2 p-1.5',
               isError && 'text-destructive',
             )}
           >
@@ -686,7 +686,7 @@ function Upload({
           <button
             type="button"
             tabIndex={-1}
-            className="inline-flex cursor-pointer items-center gap-1.5 rounded-md border border-input bg-card px-2.5 h-8 text-xs transition-colors hover:bg-muted hover:text-foreground"
+            className="inline-flex h-8 cursor-pointer items-center gap-1.5 rounded-md border border-input bg-card px-2.5 text-xs transition-colors hover:bg-muted hover:text-foreground"
           >
             <UploadIcon className="size-3.5" aria-hidden />
             上传文件
@@ -813,7 +813,7 @@ function UploadDragger({
           handleFiles(e.dataTransfer.files);
         }}
         className={cn(
-          'flex cursor-pointer flex-col items-center justify-center gap-2 rounded-md border border-dashed border-input bg-card px-6 py-8 text-center transition-colors hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
+          'flex cursor-pointer flex-col items-center justify-center gap-2 rounded-md border border-dashed border-input bg-card px-6 py-8 text-center transition-colors hover:bg-muted/50 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none',
           dragOver && 'border-primary bg-primary/5',
           disabled && 'pointer-events-none opacity-50',
         )}

package/src/components/upload/meta.md

@@ -44,6 +44,12 @@
 
 ## 示例
 
+### Basic
+
+```tsx
+<Upload customRequest={mockRequest} defaultFileList={[sampleDoc]} />
+```
+
 ### Drag
 
 ```tsx
@@ -54,6 +60,47 @@
 />
 ```
 
+### ImageList
+
+```tsx
+<Upload listType="image" multiple accept="image/*" customRequest={mockRequest} defaultFileList={[
+      sampleImage} {
+        uid: 'sample-3'={{
+        uid: 'sample-3'} name="cover.jpg" status="uploading" percent={40} thumbUrl="https://img.alicdn.com/tfs/TB1x4QlgxYaK1RjSZFnXXa80pXa-1400-742.png" }={}} {
+        uid: 'sample-4'={{
+        uid: 'sample-4'} name="broken.png" status="error" error={new Error('上传失败')} }={}} ]={]} />
+```
+
+### Multiple
+
+```tsx
+<Upload multiple accept="image/*" customRequest={mockRequest} />
+```
+
+### MaxCountAndSize
+
+```tsx
+<div className="flex flex-col gap-2">
+  <Upload
+    multiple
+    maxCount={3}
+    maxSize={2 * 1024 * 1024}
+    customRequest={mockRequest}
+    onLimitExceed={(file) =>
+      setHint(`已超出最大数量 (3)，已忽略 ${file.name}`)
+    }
+    onSizeExceed={(file) => setHint(`${file.name} 超过 2MB 体积限制`)}
+  />
+  {hint ? (
+    <span className="text-xs text-destructive">{hint}</span>
+  ) : (
+    <span className="text-xs text-muted-foreground">
+      最多 3 个文件，单文件 ≤ 2MB
+    </span>
+  )}
+</div>
+```
+
 ### BeforeUpload
 
 ```tsx
@@ -73,6 +120,41 @@
 </div>
 ```
 
+### CustomRequest
+
+```tsx
+<Upload multiple customRequest={mockRequest} />
+```
+
+### Controlled
+
+```tsx
+<div className="flex flex-col gap-2">
+  <Upload
+    fileList={fileList}
+    onChange={(next) => setFileList(next)}
+    customRequest={mockRequest}
+  />
+  <div className="flex items-center gap-2">
+    <Button variant="outline" onClick={() => setFileList([sampleDoc])}>
+      重置
+    </Button>
+    <Button variant="outline" onClick={() => setFileList([])}>
+      清空
+    </Button>
+    <span className="text-xs text-muted-foreground">
+      当前 {fileList.length} 个文件
+    </span>
+  </div>
+</div>
+```
+
+### Disabled
+
+```tsx
+<Upload disabled defaultFileList={[sampleDoc]} />
+```
+
 ### ItemRender
 
 ```tsx

package/src/components/tree/utils.ts

@@ -1,269 +0,0 @@
-/**
- * Tree / TreeSelect 共用算法工具。
- *
- * - 抽离自原 `tree-select/index.tsx`，泛化为接受 `getKey` 适配 `key` / `value` 两种字段命名。
- * - 全为纯函数，无副作用，便于在 Tree 与 TreeSelect 间共享。
- */
-import * as React from 'react';
-
-/** 所有树节点共享的可选基础字段。 */
-export interface TreeNodeBase {
-  /** 整体禁用：不可选 / 不可勾选 / 不可展开收起。 */
-  disabled?: boolean;
-  /** 仅禁用复选框（多选 / 勾选下生效）。 */
-  disableCheckbox?: boolean;
-  /** 强制叶子节点：无展开箭头 / 不参与 cascade。 */
-  isLeaf?: boolean;
-}
-
-/** 在数据树中按 key 查找节点。 */
-export 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（含中间节点）。 */
-export 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（含自身）。 */
-export 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，导致取消子项被压缩推导反吐）。
- */
-export 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 但有任一后代被选。 */
-export 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 按策略压缩为出参。 */
-export 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。 */
-export 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）。 */
-export 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;
-}
-
-// ─── 展平 / 自动展开父级 ────────────────────────────────────────────────────
-
-/** 扁平节点（虚拟滚动消费）。 */
-export interface FlatTreeNode<T> {
-  /** 当前节点。 */
-  node: T;
-  /** 层级，根 = 0。 */
-  level: number;
-  /** 父节点 key 链（自顶向下，不含自身）。 */
-  parentKeys: string[];
-  /** 是否叶子。 */
-  isLeaf: boolean;
-}
-
-/** 按 expandedKeys 展开当前可见节点列表，root → leaf 顺序。 */
-export 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 用）。 */
-export 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);
-}
-
-// ─── React 受控/非受控辅助 ──────────────────────────────────────────────────
-
-/** 用受控值 + 默认值计算最终值，并返回 setter（仅在非受控时生效）。 */
-export function useControllableState<T>(
-  controlled: T | undefined,
-  defaultValue: T,
-): [T, (next: T) => T] {
-  const [internal, setInternal] = React.useState<T>(defaultValue);
-  const isControlled = controlled !== undefined;
-  const value = isControlled ? (controlled as T) : internal;
-  const set = React.useCallback(
-    (next: T) => {
-      if (!isControlled) setInternal(next);
-      return next;
-    },
-    [isControlled],
-  );
-  return [value, set];
-}