lingee-ui 0.0.7 → 0.0.8

package/dist/tabs/index.d.ts

@@ -58,7 +58,7 @@ interface TabsProps<T extends string = string> extends Omit<HTMLAttributes<HTMLD
 }
 
 declare const tabsVariants: (props?: ({
-    variant?: "segmented" | "rounded" | "solid" | "outline" | "underline" | null | undefined;
+    variant?: "solid" | "underline" | "outline" | "segmented" | "rounded" | null | undefined;
     size?: "sm" | "md" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const Tabs: <T extends string = string>(props: TabsProps<T> & {

package/dist/tabs/index.js

@@ -1 +1 @@
-'use strict';var chunkKT3HSLBA_js=require('../chunk-KT3HSLBA.js');require('../chunk-PQVYDWUK.js'),require('../chunk-DCDWEVW4.js');Object.defineProperty(exports,"Tabs",{enumerable:true,get:function(){return chunkKT3HSLBA_js.b}});Object.defineProperty(exports,"tabsVariants",{enumerable:true,get:function(){return chunkKT3HSLBA_js.a}});
+'use strict';var chunkVHOWVMZ3_js=require('../chunk-VHOWVMZ3.js');require('../chunk-7TZ6IXXG.js'),require('../chunk-DCDWEVW4.js');Object.defineProperty(exports,"Tabs",{enumerable:true,get:function(){return chunkVHOWVMZ3_js.b}});Object.defineProperty(exports,"tabsVariants",{enumerable:true,get:function(){return chunkVHOWVMZ3_js.a}});

package/dist/tabs/index.mjs

@@ -1 +1 @@
-export{b as Tabs,a as tabsVariants}from'../chunk-RM4W5RV7.mjs';import'../chunk-KQ733636.mjs';import'../chunk-DN2VKVCV.mjs';
+export{b as Tabs,a as tabsVariants}from'../chunk-AP6UHKTU.mjs';import'../chunk-QBEHOXXU.mjs';import'../chunk-DN2VKVCV.mjs';

package/dist/toast/index.js

@@ -1 +1 @@
-'use strict';var chunkPQVYDWUK_js=require('../chunk-PQVYDWUK.js');require('../chunk-DCDWEVW4.js');Object.defineProperty(exports,"Toaster",{enumerable:true,get:function(){return chunkPQVYDWUK_js.a}});Object.defineProperty(exports,"toast",{enumerable:true,get:function(){return chunkPQVYDWUK_js.b}});
+'use strict';var chunk7TZ6IXXG_js=require('../chunk-7TZ6IXXG.js');require('../chunk-DCDWEVW4.js');Object.defineProperty(exports,"Toaster",{enumerable:true,get:function(){return chunk7TZ6IXXG_js.a}});Object.defineProperty(exports,"toast",{enumerable:true,get:function(){return chunk7TZ6IXXG_js.b}});

package/dist/toast/index.mjs

@@ -1 +1 @@
-export{a as Toaster,b as toast}from'../chunk-KQ733636.mjs';import'../chunk-DN2VKVCV.mjs';
+export{a as Toaster,b as toast}from'../chunk-QBEHOXXU.mjs';import'../chunk-DN2VKVCV.mjs';

package/dist/tree/index.css

@@ -0,0 +1 @@
+.lg-toast-wrapper{width:100%;display:flex;justify-content:center;pointer-events:none}.lg-toast{border-radius:var(--lg-radius-x-large);box-shadow:0 1px 2px #0000000a,0 1px 4px #0000000a;padding:8px 12px;display:inline-flex;align-items:flex-start;max-width:560px;pointer-events:auto;font-size:16px;line-height:24px;color:var(--lg-g-fg-color-black-strong);white-space:nowrap}.lg-toast__icon{width:20px;height:20px;margin-top:2px;margin-right:8px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.lg-toast__content{word-break:break-word;white-space:normal}.lg-toast__close{width:16px;height:16px;margin-top:4px;margin-left:16px;padding:0;border:none;background:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--lg-g-fg-color-black-muted)}.lg-toast--info{background:linear-gradient(to right,var(--lg-primary-50),var(--lg-blue-10));border:1px solid var(--lg-g-border-color-primary-soft)}.lg-toast--info .lg-toast__icon{color:var(--lg-g-fg-color-primary-default)}.lg-toast--success{background:linear-gradient(to right,var(--lg-green-50),var(--lg-green-10));border:1px solid var(--lg-g-border-color-success-subtle)}.lg-toast--success .lg-toast__icon{color:var(--lg-g-fg-color-success-default)}.lg-toast--warning{background:linear-gradient(to right,var(--lg-orange-50),var(--lg-orange-10));border:1px solid var(--lg-g-border-color-warning-subtle)}.lg-toast--warning .lg-toast__icon{color:var(--lg-g-fg-color-warning-default)}.lg-toast--error{background:linear-gradient(to right,var(--lg-red-50),var(--lg-red-10));border:1px solid var(--lg-g-border-color-danger-subtle)}.lg-toast--error .lg-toast__icon{color:var(--lg-g-fg-color-danger-default)}@keyframes lg-spin-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.lg-spin{--_spin-size-sm: 16px;--_spin-size-md: 24px;--_spin-size-lg: 32px;--_spin-track-width: 3px;--_spin-track-color: var(--lg-g-border-color-black-soft);--_spin-indicator-color: var(--lg-g-fg-color-black-default);--_spin-duration: .8s;display:inline-flex;align-items:center;justify-content:center}.lg-spin__indicator{display:block;width:var(--_spin-size-lg);height:var(--_spin-size-lg);border-radius:50%;border:var(--_spin-track-width) solid var(--_spin-track-color);border-top-color:var(--_spin-indicator-color);animation:lg-spin-rotate var(--_spin-duration) linear infinite}.lg-spin--sm .lg-spin__indicator{width:var(--_spin-size-sm);height:var(--_spin-size-sm);border-width:2px}.lg-spin--md .lg-spin__indicator{width:var(--_spin-size-md);height:var(--_spin-size-md)}.lg-spin--lg .lg-spin__indicator{width:var(--_spin-size-lg);height:var(--_spin-size-lg)}.lg-spin--paused .lg-spin__indicator{animation-play-state:paused}.lg-spin--nested{position:relative}.lg-spin__content{transition:opacity .3s}.lg-spin__content--loading{opacity:.4;pointer-events:none;user-select:none}.lg-spin__overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}.lg-spin__tip{font-size:14px;color:var(--lg-g-fg-color-black-default)}.lg-empty{--_empty-color: var(--lg-g-fg-color-black-aint);display:flex;align-items:center;justify-content:center;color:var(--_empty-color)}.lg-empty__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--_empty-color)}.lg-empty__text{text-align:center;white-space:nowrap;color:var(--_empty-color)}.lg-empty--md{flex-direction:column;gap:4px}.lg-empty--md .lg-empty__text{font-size:14px;line-height:20px}.lg-empty--lg{flex-direction:column;gap:8px}.lg-empty--lg .lg-empty__text{font-size:16px;line-height:24px}.lg-empty--sm{flex-direction:row;gap:4px}.lg-empty--sm .lg-empty__text{font-size:12px;line-height:18px}.lg-empty-card{--_empty-card-content-height: 18px;--_empty-card-pad-y: 23px;--_empty-card-pad-y-loose: 44px;display:flex;align-items:center;justify-content:center;gap:4px;width:100%;box-sizing:border-box;color:var(--lg-g-fg-color-black-aint);background:transparent;border:none;font-family:inherit}.lg-empty-card__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:inherit}.lg-empty-card__text{text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:inherit}.lg-empty-card--block .lg-empty-card__text{font-size:12px;line-height:18px}.lg-empty-card--inline{--_empty-card-content-height: 18px;--_empty-card-pad-y: 4px;--_empty-card-pad-y-loose: 12px}.lg-empty-card--inline .lg-empty-card__text{font-size:12px;line-height:18px}.lg-empty-card--spacing-none{padding:0;min-height:var(--_empty-card-content-height)}.lg-empty-card--spacing-normal{padding:var(--_empty-card-pad-y) 0;min-height:calc(var(--_empty-card-content-height) + var(--_empty-card-pad-y) * 2)}.lg-empty-card--spacing-loose{padding:var(--_empty-card-pad-y-loose) 0 var(--_empty-card-pad-y);min-height:calc(var(--_empty-card-content-height) + var(--_empty-card-pad-y-loose) + var(--_empty-card-pad-y))}.lg-empty-card--inline.lg-empty-card--spacing-normal{padding:var(--_empty-card-pad-y) 12px}.lg-empty-card--inline.lg-empty-card--spacing-loose{padding:var(--_empty-card-pad-y-loose) 12px var(--_empty-card-pad-y)}.lg-empty-card--retryable{cursor:pointer;border-radius:var(--lg-radius-x-medium);transition:background-color .2s ease}.lg-empty-card--retryable:hover{background:var(--lg-g-bg-color-black-faint)}.lg-tree{--_tree-item-height: 32px;--_tree-item-gap: 2px;--_tree-item-radius: 20px;--_tree-item-padding-x: 10px;--_tree-indent-width: 24px;--_tree-font-size: 14px;--_tree-line-height: 22px;--_tree-item-color: var(--lg-g-fg-color-black-strong);--_tree-item-color-selected: var(--lg-g-fg-color-black-intense);--_tree-item-color-disabled: var(--lg-g-fg-color-black-default);--_tree-item-bg-hover: var(--lg-g-bg-color-black-faint);--_tree-item-bg-selected: var(--lg-g-bg-color-black-subtle);--_tree-guide-color: var(--lg-g-border-color-black-subtle);--_tree-icon-opacity: .64;--_tree-checkbox-radius: 4px;--_tree-checkbox-border-width: 1.33px;--_tree-checkbox-border-color: var(--lg-g-border-color-black-moderate);--_tree-checkbox-border-color-hover: var(--lg-g-border-color-primary-default);--_tree-checkbox-bg-checked: var(--lg-g-bg-color-primary-default);--_tree-checkbox-bg-disabled: var(--lg-g-bg-color-black-faint);--_tree-checkbox-border-color-disabled: var(--lg-g-border-color-black-muted);--_tree-checkbox-icon-color: var(--lg-g-fg-color-white-heavy);--_tree-transition: .2s cubic-bezier(.645, .045, .355, 1);position:relative;font-size:var(--_tree-font-size);line-height:var(--_tree-line-height);color:var(--_tree-item-color);user-select:none}.lg-tree--sm{--_tree-item-height: 28px}.lg-tree--lg{--_tree-item-height: 36px}.lg-tree__loading-mask{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;background:var(--lg-g-bg-color-white-translucent-strong)}.lg-tree--loading .lg-tree-list{pointer-events:none}.lg-tree__empty{display:flex;align-items:center;justify-content:center;padding:24px 0}.lg-tree-list-holder-inner{gap:var(--_tree-item-gap)}.lg-tree-treenode{position:relative;display:flex;align-items:center;height:var(--_tree-item-height);margin:0;padding:0;outline:none;list-style:none}.lg-tree-treenode-active .lg-tree-node-content-wrapper{box-shadow:0 0 0 2px var(--lg-g-bg-color-primary-translucent-soft)}.lg-tree-treenode-disabled{cursor:not-allowed}.lg-tree-treenode-disabled .lg-tree-node-content-wrapper{color:var(--_tree-item-color-disabled);cursor:not-allowed}.lg-tree-treenode-disabled .lg-tree-node-content-wrapper:hover{background:transparent}.lg-tree-indent{align-self:stretch;display:flex;flex-shrink:0;white-space:nowrap;user-select:none}.lg-tree-indent-unit{position:relative;display:inline-block;width:var(--_tree-indent-width);height:100%}.lg-tree--guide-line .lg-tree-indent-unit:before{content:"";position:absolute;top:calc(var(--_tree-item-gap) / -1);bottom:calc(var(--_tree-item-gap) / -1);left:15px;width:1px;background:var(--_tree-guide-color)}.lg-tree--guide-line .lg-tree-indent-unit-end:before{bottom:0}.lg-tree-switcher{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px;margin-right:6px;margin-left:var(--_tree-item-padding-x);color:var(--_tree-item-color);background:transparent;border:none;border-radius:4px;cursor:pointer;opacity:var(--_tree-icon-opacity);transition:opacity var(--_tree-transition)}.lg-tree-switcher:hover{opacity:1}.lg-tree-switcher-noop{width:0;margin-right:0;cursor:default}.lg-tree__switcher-icon{transition:transform var(--_tree-transition)}.lg-tree-switcher_close .lg-tree__switcher-icon{transform:rotate(-90deg)}.lg-tree-checkbox{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px;margin-right:6px;border:var(--_tree-checkbox-border-width) solid var(--_tree-checkbox-border-color);border-radius:var(--_tree-checkbox-radius);cursor:pointer;transition:border-color var(--_tree-transition),background-color var(--_tree-transition)}.lg-tree-checkbox:hover{border-color:var(--_tree-checkbox-border-color-hover)}.lg-tree-checkbox-checked,.lg-tree-checkbox-indeterminate{border-color:var(--_tree-checkbox-bg-checked);background-color:var(--_tree-checkbox-bg-checked)}.lg-tree-checkbox-checked:after{content:"";position:absolute;top:45%;left:50%;width:4px;height:8px;border:1.5px solid var(--_tree-checkbox-icon-color);border-top:0;border-left:0;transform:translate(-50%,-50%) rotate(45deg)}.lg-tree-checkbox-indeterminate:after{content:"";position:absolute;top:50%;left:50%;width:8px;height:1.5px;background:var(--_tree-checkbox-icon-color);transform:translate(-50%,-50%)}.lg-tree-checkbox-disabled{cursor:not-allowed;border-color:var(--_tree-checkbox-border-color-disabled);background-color:var(--_tree-checkbox-bg-disabled)}.lg-tree-checkbox-disabled:hover{border-color:var(--_tree-checkbox-border-color-disabled)}.lg-tree-node-content-wrapper{display:flex;flex:1;align-items:center;gap:6px;min-width:0;height:100%;padding:0 var(--_tree-item-padding-x);color:inherit;background:transparent;border-radius:var(--_tree-item-radius);cursor:pointer;transition:background var(--_tree-transition),color var(--_tree-transition)}.lg-tree-node-content-wrapper:hover{background:var(--_tree-item-bg-hover)}.lg-tree-node-content-wrapper.lg-tree-node-selected{color:var(--_tree-item-color-selected);background:var(--_tree-item-bg-selected)}.lg-tree-node-content-wrapper.lg-tree-node-selected .lg-tree-title{text-shadow:.3px 0 0 currentcolor,-.3px 0 0 currentcolor}.lg-tree-switcher+.lg-tree-node-content-wrapper{margin-left:calc((22px + var(--_tree-item-padding-x)) * -1);padding-left:calc(22px + var(--_tree-item-padding-x))}.lg-tree-switcher-noop+.lg-tree-node-content-wrapper{margin-left:calc(var(--_tree-item-padding-x) * -1);padding-left:var(--_tree-item-padding-x)}.lg-tree-checkbox+.lg-tree-node-content-wrapper{margin-left:calc((22px + 22px + var(--_tree-item-padding-x)) * -1);padding-left:calc(22px + 22px + var(--_tree-item-padding-x))}.lg-tree-switcher-noop+.lg-tree-checkbox+.lg-tree-node-content-wrapper{margin-left:calc((22px + var(--_tree-item-padding-x)) * -1);padding-left:calc(22px + var(--_tree-item-padding-x))}.lg-tree-iconEle{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:18px;height:18px;opacity:var(--_tree-icon-opacity)}.lg-tree-iconEle:empty:not(.lg-tree-icon_loading){display:none}.lg-tree-node-selected .lg-tree-iconEle{opacity:1}.lg-tree-title{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.lg-tree-icon_loading{display:inline-block;box-sizing:border-box;width:14px;height:14px;border:1.5px solid currentColor;border-top-color:transparent;border-radius:50%;color:var(--lg-g-fg-color-black-aint);opacity:1;animation:lg-tree-spin .8s linear infinite}.lg-tree-treenode-motion{display:flex;flex-direction:column;overflow:hidden;margin-top:calc(var(--_tree-item-gap) * -1)}.lg-tree-treenode-motion>*{flex-shrink:0;margin-top:var(--_tree-item-gap)}.lg-tree-motion-appear-active,.lg-tree-motion-enter-active,.lg-tree-motion-leave-active{transition:height var(--_tree-transition),opacity var(--_tree-transition)}.lg-tree-motion-leave-active{pointer-events:none}.lg-tree-treenode.dragging .lg-tree-node-content-wrapper{opacity:.5}.lg-tree-treenode.drag-over>.lg-tree-node-content-wrapper{background:var(--lg-g-bg-color-primary-translucent-soft)}.lg-tree-treenode.drag-over-gap-top>.lg-tree-node-content-wrapper{box-shadow:inset 0 2px 0 0 var(--lg-g-bg-color-primary-default)}.lg-tree-treenode.drag-over-gap-bottom>.lg-tree-node-content-wrapper{box-shadow:inset 0 -2px 0 0 var(--lg-g-bg-color-primary-default)}.lg-tree-drop-indicator{position:absolute;z-index:1;height:2px;background:var(--lg-g-bg-color-primary-default);border-radius:1px;pointer-events:none}.lg-tree--disabled .lg-tree-node-content-wrapper,.lg-tree--disabled .lg-tree-switcher,.lg-tree--disabled .lg-tree-checkbox{cursor:not-allowed}.lg-tree--disabled .lg-tree-node-content-wrapper{color:var(--_tree-item-color-disabled)}.lg-tree--disabled .lg-tree-node-content-wrapper:hover{background:transparent}@keyframes lg-tree-spin{to{transform:rotate(360deg)}}

package/dist/tree/index.d.mts

@@ -0,0 +1,229 @@
+import React__default, { Key, ReactNode, CSSProperties } from 'react';
+
+/**
+ * 树节点尺寸
+ * - sm: 行高 28px
+ * - md: 行高 32px（设计稿基准）
+ * - lg: 行高 36px
+ */
+type TreeSize = "sm" | "md" | "lg";
+/**
+ * 缩进引导线形态
+ * - none: 不显示引导线，仅靠缩进区分层级
+ * - line: 显示纵向引导线（设计稿默认形态）
+ */
+type TreeIndentGuide = "none" | "line";
+/** 触发展开的交互方式，false 表示仅能点击箭头展开 */
+type TreeExpandAction = false | "click" | "doubleClick";
+/**
+ * 树节点数据
+ *
+ * 字段名可通过 fieldNames 改写，以适配后端已有的数据结构，
+ * 避免消费方为了对齐组件而额外做一次全量数据转换。
+ */
+interface TreeNodeData {
+    /** 节点唯一标识 */
+    key: Key;
+    /** 节点标题 */
+    title?: ReactNode;
+    /** 子节点 */
+    children?: TreeNodeData[];
+    /**
+     * 节点前置图标，覆盖 Tree 上的全局 icon。
+     * 静态值，不随展开态变化；需要区分开合请用 Tree 的 icon 函数形式
+     */
+    icon?: ReactNode;
+    /** 是否禁用（不可选中、不可高亮） */
+    disabled?: boolean;
+    /** 是否禁用勾选框 */
+    disableCheckbox?: boolean;
+    /** 是否可勾选，checkable 开启时生效 */
+    checkable?: boolean;
+    /** 是否强制视作叶子节点（不显示展开箭头） */
+    isLeaf?: boolean;
+    /** 是否允许作为拖拽源 */
+    selectable?: boolean;
+    /** 允许透传业务字段 */
+    [key: string]: any;
+}
+/** 渲染回调中透出的节点状态，用于按状态切换图标 */
+interface TreeNodeState {
+    /** 是否已展开（叶子节点恒为 false） */
+    expanded: boolean;
+    /** 是否为叶子节点 */
+    isLeaf: boolean;
+}
+/** 字段名映射，用于适配非标准数据结构 */
+interface TreeFieldNames {
+    key?: string;
+    title?: string;
+    children?: string;
+}
+/** 勾选回调信息 */
+interface TreeCheckInfo {
+    /** 触发勾选的节点 */
+    node: TreeNodeData;
+    /** 变更后是否勾选 */
+    checked: boolean;
+    /** 全部勾选节点 */
+    checkedNodes: TreeNodeData[];
+    /** 半勾选节点 key（checkStrictly 关闭时有值） */
+    halfCheckedKeys?: Key[];
+}
+/** 选中回调信息 */
+interface TreeSelectInfo {
+    /** 触发选中的节点 */
+    node: TreeNodeData;
+    /** 变更后是否选中 */
+    selected: boolean;
+    /** 全部选中节点 */
+    selectedNodes: TreeNodeData[];
+}
+/** 展开回调信息 */
+interface TreeExpandInfo {
+    /** 触发展开的节点 */
+    node: TreeNodeData;
+    /** 变更后是否展开 */
+    expanded: boolean;
+}
+/** 拖拽放置回调信息 */
+interface TreeDropInfo {
+    /** 被拖拽节点 */
+    dragNode: TreeNodeData;
+    /** 放置目标节点 */
+    node: TreeNodeData;
+    /**
+     * 相对目标节点的插入位置：-1 上方、0 内部、1 下方
+     * dropToGap 为 false 时该值无意义（落在节点内部）
+     */
+    dropPosition: number;
+    /** 是否落在节点之间的空隙（而非节点内部） */
+    dropToGap: boolean;
+}
+/** 拖拽落点校验参数 */
+interface TreeAllowDropOptions {
+    dragNode: TreeNodeData;
+    dropNode: TreeNodeData;
+    dropPosition: -1 | 0 | 1;
+}
+/**
+ * Tree 组件 Props
+ */
+interface TreeProps {
+    /** 节点数据 */
+    treeData?: TreeNodeData[];
+    /** 字段名映射 */
+    fieldNames?: TreeFieldNames;
+    /** 行高尺寸 */
+    size?: TreeSize;
+    /** 展开的节点 key（受控） */
+    expandedKeys?: Key[];
+    /** 默认展开的节点 key */
+    defaultExpandedKeys?: Key[];
+    /** 默认展开全部节点 */
+    defaultExpandAll?: boolean;
+    /** 展开子节点时自动展开其父节点 */
+    autoExpandParent?: boolean;
+    /** 触发展开的交互方式 */
+    expandAction?: TreeExpandAction;
+    /** 展开状态变化回调 */
+    onExpand?: (expandedKeys: Key[], info: TreeExpandInfo) => void;
+    /** 是否可选中 */
+    selectable?: boolean;
+    /** 是否支持多选 */
+    multiple?: boolean;
+    /** 选中的节点 key（受控） */
+    selectedKeys?: Key[];
+    /** 默认选中的节点 key */
+    defaultSelectedKeys?: Key[];
+    /** 选中状态变化回调 */
+    onSelect?: (selectedKeys: Key[], info: TreeSelectInfo) => void;
+    /** 是否显示勾选框 */
+    checkable?: boolean;
+    /** 父子节点勾选状态不再联动 */
+    checkStrictly?: boolean;
+    /** 勾选的节点 key（受控） */
+    checkedKeys?: Key[] | {
+        checked: Key[];
+        halfChecked: Key[];
+    };
+    /** 默认勾选的节点 key */
+    defaultCheckedKeys?: Key[];
+    /** 勾选状态变化回调 */
+    onCheck?: (checkedKeys: Key[] | {
+        checked: Key[];
+        halfChecked: Key[];
+    }, info: TreeCheckInfo) => void;
+    /** 是否显示节点图标 */
+    showIcon?: boolean;
+    /**
+     * 全局节点图标。
+     *
+     * 传函数时可按展开态返回不同图标（如文件夹的开 / 合两态）；
+     * 节点数据上的 `icon` 字段是静态值，做不到随状态切换，
+     * 需要区分开合时应在此处以函数形式提供。
+     */
+    icon?: ReactNode | ((node: TreeNodeData, state: TreeNodeState) => ReactNode);
+    /** 自定义展开箭头，可为函数按节点状态返回 */
+    switcherIcon?: ReactNode | ((state: TreeNodeState) => ReactNode);
+    /** 缩进引导线形态 */
+    indentGuide?: TreeIndentGuide;
+    /**
+     * 自定义单行内容
+     *
+     * 行内 hover 才出现的操作区靠它实现：操作区需 stopPropagation，
+     * 否则点击操作按钮会连带触发节点选中。
+     */
+    titleRender?: (node: TreeNodeData) => ReactNode;
+    /** 异步加载子节点，resolve 后由消费方更新 treeData */
+    loadData?: (node: TreeNodeData) => Promise<unknown>;
+    /** 已加载完成的节点 key（受控） */
+    loadedKeys?: Key[];
+    /** 是否可拖拽排序 */
+    draggable?: boolean | ((node: TreeNodeData) => boolean);
+    /** 校验能否放置到目标位置 */
+    allowDrop?: (options: TreeAllowDropOptions) => boolean;
+    /** 拖拽放置回调 */
+    onDrop?: (info: TreeDropInfo) => void;
+    /** 可视区高度，设置后启用虚拟滚动 */
+    height?: number;
+    /** 虚拟滚动的单项高度，缺省时按 size 推导 */
+    itemHeight?: number;
+    /** 关闭虚拟滚动 */
+    virtual?: boolean;
+    /** 整体禁用 */
+    disabled?: boolean;
+    /** 加载状态，展示遮罩 */
+    loading?: boolean;
+    /** 无数据时的展示内容 */
+    empty?: ReactNode;
+    /** 节点右键回调 */
+    onRightClick?: (info: {
+        event: React.MouseEvent;
+        node: TreeNodeData;
+    }) => void;
+    /**
+     * 展开 / 折叠是否启用高度过渡动效，默认开启
+     *
+     * 虚拟滚动（设置 height）场景下底层不走动效，此项无效
+     */
+    animated?: boolean;
+    /** 额外 className */
+    className?: string;
+    /** 行内样式 */
+    style?: CSSProperties;
+}
+
+/**
+ * Tree 树形控件
+ *
+ * 基于 @rc-component/tree 封装，仅接管视觉与常用能力；
+ * 键盘导航、虚拟滚动、父子勾选联动等由底层提供。
+ *
+ * 类名说明：容器与自定义结构走 BEM（lg-tree__xxx），
+ * 节点内部结构由底层按 prefixCls 生成单横线类名（lg-tree-treenode 等），
+ * 无法改写，故样式表中两种风格并存。
+ */
+declare const Tree: React__default.ForwardRefExoticComponent<TreeProps & React__default.RefAttributes<HTMLDivElement>>;
+
+export { Tree, type TreeAllowDropOptions, type TreeCheckInfo, type TreeDropInfo, type TreeExpandAction, type TreeExpandInfo, type TreeFieldNames, type TreeIndentGuide, type TreeNodeData, type TreeNodeState, type TreeProps, type TreeSelectInfo, type TreeSize };

package/dist/tree/index.d.ts

@@ -0,0 +1,229 @@
+import React__default, { Key, ReactNode, CSSProperties } from 'react';
+
+/**
+ * 树节点尺寸
+ * - sm: 行高 28px
+ * - md: 行高 32px（设计稿基准）
+ * - lg: 行高 36px
+ */
+type TreeSize = "sm" | "md" | "lg";
+/**
+ * 缩进引导线形态
+ * - none: 不显示引导线，仅靠缩进区分层级
+ * - line: 显示纵向引导线（设计稿默认形态）
+ */
+type TreeIndentGuide = "none" | "line";
+/** 触发展开的交互方式，false 表示仅能点击箭头展开 */
+type TreeExpandAction = false | "click" | "doubleClick";
+/**
+ * 树节点数据
+ *
+ * 字段名可通过 fieldNames 改写，以适配后端已有的数据结构，
+ * 避免消费方为了对齐组件而额外做一次全量数据转换。
+ */
+interface TreeNodeData {
+    /** 节点唯一标识 */
+    key: Key;
+    /** 节点标题 */
+    title?: ReactNode;
+    /** 子节点 */
+    children?: TreeNodeData[];
+    /**
+     * 节点前置图标，覆盖 Tree 上的全局 icon。
+     * 静态值，不随展开态变化；需要区分开合请用 Tree 的 icon 函数形式
+     */
+    icon?: ReactNode;
+    /** 是否禁用（不可选中、不可高亮） */
+    disabled?: boolean;
+    /** 是否禁用勾选框 */
+    disableCheckbox?: boolean;
+    /** 是否可勾选，checkable 开启时生效 */
+    checkable?: boolean;
+    /** 是否强制视作叶子节点（不显示展开箭头） */
+    isLeaf?: boolean;
+    /** 是否允许作为拖拽源 */
+    selectable?: boolean;
+    /** 允许透传业务字段 */
+    [key: string]: any;
+}
+/** 渲染回调中透出的节点状态，用于按状态切换图标 */
+interface TreeNodeState {
+    /** 是否已展开（叶子节点恒为 false） */
+    expanded: boolean;
+    /** 是否为叶子节点 */
+    isLeaf: boolean;
+}
+/** 字段名映射，用于适配非标准数据结构 */
+interface TreeFieldNames {
+    key?: string;
+    title?: string;
+    children?: string;
+}
+/** 勾选回调信息 */
+interface TreeCheckInfo {
+    /** 触发勾选的节点 */
+    node: TreeNodeData;
+    /** 变更后是否勾选 */
+    checked: boolean;
+    /** 全部勾选节点 */
+    checkedNodes: TreeNodeData[];
+    /** 半勾选节点 key（checkStrictly 关闭时有值） */
+    halfCheckedKeys?: Key[];
+}
+/** 选中回调信息 */
+interface TreeSelectInfo {
+    /** 触发选中的节点 */
+    node: TreeNodeData;
+    /** 变更后是否选中 */
+    selected: boolean;
+    /** 全部选中节点 */
+    selectedNodes: TreeNodeData[];
+}
+/** 展开回调信息 */
+interface TreeExpandInfo {
+    /** 触发展开的节点 */
+    node: TreeNodeData;
+    /** 变更后是否展开 */
+    expanded: boolean;
+}
+/** 拖拽放置回调信息 */
+interface TreeDropInfo {
+    /** 被拖拽节点 */
+    dragNode: TreeNodeData;
+    /** 放置目标节点 */
+    node: TreeNodeData;
+    /**
+     * 相对目标节点的插入位置：-1 上方、0 内部、1 下方
+     * dropToGap 为 false 时该值无意义（落在节点内部）
+     */
+    dropPosition: number;
+    /** 是否落在节点之间的空隙（而非节点内部） */
+    dropToGap: boolean;
+}
+/** 拖拽落点校验参数 */
+interface TreeAllowDropOptions {
+    dragNode: TreeNodeData;
+    dropNode: TreeNodeData;
+    dropPosition: -1 | 0 | 1;
+}
+/**
+ * Tree 组件 Props
+ */
+interface TreeProps {
+    /** 节点数据 */
+    treeData?: TreeNodeData[];
+    /** 字段名映射 */
+    fieldNames?: TreeFieldNames;
+    /** 行高尺寸 */
+    size?: TreeSize;
+    /** 展开的节点 key（受控） */
+    expandedKeys?: Key[];
+    /** 默认展开的节点 key */
+    defaultExpandedKeys?: Key[];
+    /** 默认展开全部节点 */
+    defaultExpandAll?: boolean;
+    /** 展开子节点时自动展开其父节点 */
+    autoExpandParent?: boolean;
+    /** 触发展开的交互方式 */
+    expandAction?: TreeExpandAction;
+    /** 展开状态变化回调 */
+    onExpand?: (expandedKeys: Key[], info: TreeExpandInfo) => void;
+    /** 是否可选中 */
+    selectable?: boolean;
+    /** 是否支持多选 */
+    multiple?: boolean;
+    /** 选中的节点 key（受控） */
+    selectedKeys?: Key[];
+    /** 默认选中的节点 key */
+    defaultSelectedKeys?: Key[];
+    /** 选中状态变化回调 */
+    onSelect?: (selectedKeys: Key[], info: TreeSelectInfo) => void;
+    /** 是否显示勾选框 */
+    checkable?: boolean;
+    /** 父子节点勾选状态不再联动 */
+    checkStrictly?: boolean;
+    /** 勾选的节点 key（受控） */
+    checkedKeys?: Key[] | {
+        checked: Key[];
+        halfChecked: Key[];
+    };
+    /** 默认勾选的节点 key */
+    defaultCheckedKeys?: Key[];
+    /** 勾选状态变化回调 */
+    onCheck?: (checkedKeys: Key[] | {
+        checked: Key[];
+        halfChecked: Key[];
+    }, info: TreeCheckInfo) => void;
+    /** 是否显示节点图标 */
+    showIcon?: boolean;
+    /**
+     * 全局节点图标。
+     *
+     * 传函数时可按展开态返回不同图标（如文件夹的开 / 合两态）；
+     * 节点数据上的 `icon` 字段是静态值，做不到随状态切换，
+     * 需要区分开合时应在此处以函数形式提供。
+     */
+    icon?: ReactNode | ((node: TreeNodeData, state: TreeNodeState) => ReactNode);
+    /** 自定义展开箭头，可为函数按节点状态返回 */
+    switcherIcon?: ReactNode | ((state: TreeNodeState) => ReactNode);
+    /** 缩进引导线形态 */
+    indentGuide?: TreeIndentGuide;
+    /**
+     * 自定义单行内容
+     *
+     * 行内 hover 才出现的操作区靠它实现：操作区需 stopPropagation，
+     * 否则点击操作按钮会连带触发节点选中。
+     */
+    titleRender?: (node: TreeNodeData) => ReactNode;
+    /** 异步加载子节点，resolve 后由消费方更新 treeData */
+    loadData?: (node: TreeNodeData) => Promise<unknown>;
+    /** 已加载完成的节点 key（受控） */
+    loadedKeys?: Key[];
+    /** 是否可拖拽排序 */
+    draggable?: boolean | ((node: TreeNodeData) => boolean);
+    /** 校验能否放置到目标位置 */
+    allowDrop?: (options: TreeAllowDropOptions) => boolean;
+    /** 拖拽放置回调 */
+    onDrop?: (info: TreeDropInfo) => void;
+    /** 可视区高度，设置后启用虚拟滚动 */
+    height?: number;
+    /** 虚拟滚动的单项高度，缺省时按 size 推导 */
+    itemHeight?: number;
+    /** 关闭虚拟滚动 */
+    virtual?: boolean;
+    /** 整体禁用 */
+    disabled?: boolean;
+    /** 加载状态，展示遮罩 */
+    loading?: boolean;
+    /** 无数据时的展示内容 */
+    empty?: ReactNode;
+    /** 节点右键回调 */
+    onRightClick?: (info: {
+        event: React.MouseEvent;
+        node: TreeNodeData;
+    }) => void;
+    /**
+     * 展开 / 折叠是否启用高度过渡动效，默认开启
+     *
+     * 虚拟滚动（设置 height）场景下底层不走动效，此项无效
+     */
+    animated?: boolean;
+    /** 额外 className */
+    className?: string;
+    /** 行内样式 */
+    style?: CSSProperties;
+}
+
+/**
+ * Tree 树形控件
+ *
+ * 基于 @rc-component/tree 封装，仅接管视觉与常用能力；
+ * 键盘导航、虚拟滚动、父子勾选联动等由底层提供。
+ *
+ * 类名说明：容器与自定义结构走 BEM（lg-tree__xxx），
+ * 节点内部结构由底层按 prefixCls 生成单横线类名（lg-tree-treenode 等），
+ * 无法改写，故样式表中两种风格并存。
+ */
+declare const Tree: React__default.ForwardRefExoticComponent<TreeProps & React__default.RefAttributes<HTMLDivElement>>;
+
+export { Tree, type TreeAllowDropOptions, type TreeCheckInfo, type TreeDropInfo, type TreeExpandAction, type TreeExpandInfo, type TreeFieldNames, type TreeIndentGuide, type TreeNodeData, type TreeNodeState, type TreeProps, type TreeSelectInfo, type TreeSize };

package/dist/tree/index.js

@@ -0,0 +1 @@
+'use strict';var chunk3U36GSZF_js=require('../chunk-3U36GSZF.js');require('../chunk-7TZ6IXXG.js'),require('../chunk-DCDWEVW4.js');Object.defineProperty(exports,"Tree",{enumerable:true,get:function(){return chunk3U36GSZF_js.d}});

package/dist/tree/index.mjs

@@ -0,0 +1 @@
+export{d as Tree}from'../chunk-PKNSR23I.mjs';import'../chunk-QBEHOXXU.mjs';import'../chunk-DN2VKVCV.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lingee-ui",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "Kingdee Lingee UI 基础组件库 — React 18+ 轻量级企业 UI 组件",
   "license": "MIT",
   "keywords": [
@@ -28,7 +28,6 @@
     "dist",
     "skill",
     "README.md",
-    "CHANGELOG.md",
     "LICENSE"
   ],
   "exports": {
@@ -62,6 +61,11 @@
       "import": "./dist/popover/index.mjs",
       "require": "./dist/popover/index.js"
     },
+    "./tree": {
+      "types": "./dist/tree/index.d.ts",
+      "import": "./dist/tree/index.mjs",
+      "require": "./dist/tree/index.js"
+    },
     "./styles.css": "./dist/index.css",
     "./tokens.css": "./dist/tokens.css",
     "./skill": "./skill/SKILL.md",
@@ -102,6 +106,7 @@
     "@rc-component/color-picker": "^3.1.1",
     "@rc-component/image": "^1.9.0",
     "@rc-component/table": "^1.10.2",
+    "@rc-component/tree": "^1.2.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "date-fns": "^4.4.0",

package/skill/AGENTS-SNIPPET.md

@@ -2,9 +2,9 @@
 
 > **本文件由 `packages/lingee-ui/scripts/gen-skill.mjs` 自动生成，禁止手工编辑。**
 > 供根 `AGENTS.md` 引用，避免手写清单随组件库迭代脱节。
-> 组件库 `0.0.7` ｜ 图标库 `1.0.16`
+> 组件库 `0.0.8` ｜ 图标库 `1.0.16`
 
-## 可用组件（36）
+## 可用组件（37）
 
 | 组件 | 名称 | 说明 |
 |------|------|------|
@@ -18,7 +18,7 @@
 | `Divider` | 分割线 | 用于分隔内容区块，使页面结构更清晰。 |
 | `Drawer` | 抽屉 | 从屏幕边缘滑出的浮层面板，用于承载表单或详情内容。 |
 | `Dropdown` +13 个子组件 | 下拉菜单 | 向下弹出的操作菜单列表，支持图标、分组、危险操作、子菜单等。 |
-| `Empty` | 空状态 | 当目标区域无数据时展示的空状态占位图，引导用户进行下一步操作。 |
+| `Empty`、`EmptyCard` | 空状态 | 当目标区域无数据时展示的空状态占位图，引导用户进行下一步操作。 |
 | `Flex` | 弹性布局 | 弹性布局容器，用于快速搭建横向/纵向排列，避免为简单布局单独写样式文件。 |
 | `Form` | 表单 | 数据录入和校验组件，支持垂直、水平、行内布局。 |
 | `Image` | 图片预览 | 图片展示组件，支持点击放大预览、旋转、缩放等操作。 |
@@ -30,7 +30,7 @@
 | `RangePicker` | 日期范围选择器 | 用于选择日期范围的输入组件。 |
 | `ScrollArea`、`ScrollBar` | 自定义滚动区域 | 自定义样式的滚动容器组件，提供美观的滚动条体验。 |
 | `Select` | 选择器 | 下拉选择器，支持单选、多选、搜索和远程加载。 |
-| `Sidebar` +10 个子组件 | 侧边栏 | 侧边栏复合组件，提供根容器、页签、导航项、分组、列表项、占位项与底栏，通过 Sidebar.xxx 组合使用。 |
+| `Sidebar` +14 个子组件 | 侧边栏 | 侧边栏复合组件，提供根容器、页签、导航项、分组、列表项、占位项与底栏，通过 Sidebar.xxx 组合使用。 |
 | `Skeleton` | 骨架屏 | 在数据加载完成前通过占位图形展示页面结构，降低用户等待焦虑。 |
 | `Slider` | 数值滑块 | 滑动输入器，用于在数值区间内进行选择。 |
 | `Spin` | 加载中 | 用于页面和区域的加载中状态指示器。 |
@@ -43,6 +43,7 @@
 | `TimePicker` | 时间选择器 | 用于选择时间的输入组件。 |
 | `toast` | 全局提示 | 命令式全局提示组件，用于操作反馈。 |
 | `Tooltip` | 文字提示 | 鼠标悬停时显示的简短提示信息。 |
+| `Tree` | 树形控件 | 用于展示层级结构数据，支持勾选、拖拽排序、异步加载与虚拟滚动。 |
 | `Upload` | 上传 | 文件上传组件，支持点击和拖拽上传。 |
 
 **清单里没有的组件本库就是没有**，不要臆造组件名。各组件完整 Props 见 `packages/lingee-ui/packages/{目录名}/README.mdx`，或 `skill/references/components/{目录名}.md`。

package/skill/SKILL.md

@@ -2,17 +2,17 @@
 name: lingee-ui-usage
 description: 使用 lingee-ui 组件库与 lingee-icon 图标库开发 React 界面。当需要编写含按钮、表单、弹窗、表格、下拉、页签、图标等 UI 的 React/TypeScript 代码，或需要查询 lingee-ui 组件 API、Design Token 语义变量、可用图标名时触发。关键词：lingee-ui、lingee-icon、组件库、图标库、Design Token、语义变量、lg- 前缀、UI 组件。
 metadata:
-  lingeeUi: "0.0.7"
+  lingeeUi: "0.0.8"
   lingeeIcon: "1.0.16"
   generatedBy: "gen-skill.mjs"
 ---
 
 # lingee-ui 组件库使用技能
 
-Kingdee Lingee 设计体系的 React 组件库（36 个组件）与图标库（967 个图标）。
+Kingdee Lingee 设计体系的 React 组件库（37 个组件）与图标库（967 个图标）。
 本技能面向**消费方项目**，只覆盖「如何用」，不含组件库内部开发约定。
 
-- 组件库版本 `0.0.7` ｜ 图标库版本 `1.0.16`
+- 组件库版本 `0.0.8` ｜ 图标库版本 `1.0.16`
 - 组件在线预览：https://kingdee.github.io/lingee-ui/
 - 图标在线预览：https://kingdee.github.io/lingee-icon/
 
@@ -66,7 +66,7 @@ createRoot(el).render(
 | `Divider` | 分割线 | 用于分隔内容区块，使页面结构更清晰。 | `divider.md` | — |
 | `Drawer` | 抽屉 | 从屏幕边缘滑出的浮层面板，用于承载表单或详情内容。 | `drawer.md` | — |
 | `Dropdown` +13 个子组件 | 下拉菜单 | 向下弹出的操作菜单列表，支持图标、分组、危险操作、子菜单等。 | `dropdown.md` | — |
-| `Empty` | 空状态 | 当目标区域无数据时展示的空状态占位图，引导用户进行下一步操作。 | `empty.md` | — |
+| `Empty`、`EmptyCard` | 空状态 | 当目标区域无数据时展示的空状态占位图，引导用户进行下一步操作。 | `empty.md` | — |
 | `Flex` | 弹性布局 | 弹性布局容器，用于快速搭建横向/纵向排列，避免为简单布局单独写样式文件。 | `flex.md` | — |
 | `Form` | 表单 | 数据录入和校验组件，支持垂直、水平、行内布局。 | `form.md` | — |
 | `Image` | 图片预览 | 图片展示组件，支持点击放大预览、旋转、缩放等操作。 | `image.md` | — |
@@ -78,7 +78,7 @@ createRoot(el).render(
 | `RangePicker` | 日期范围选择器 | 用于选择日期范围的输入组件。 | `range-picker.md` | — |
 | `ScrollArea`、`ScrollBar` | 自定义滚动区域 | 自定义样式的滚动容器组件，提供美观的滚动条体验。 | `scroll-area.md` | — |
 | `Select` | 选择器 | 下拉选择器，支持单选、多选、搜索和远程加载。 | `select.md` | — |
-| `Sidebar` +10 个子组件 | 侧边栏 | 侧边栏复合组件，提供根容器、页签、导航项、分组、列表项、占位项与底栏，通过 Sidebar.xxx 组合使用。 | `sidebar.md` | — |
+| `Sidebar` +14 个子组件 | 侧边栏 | 侧边栏复合组件，提供根容器、页签、导航项、分组、列表项、占位项与底栏，通过 Sidebar.xxx 组合使用。 | `sidebar.md` | — |
 | `Skeleton` | 骨架屏 | 在数据加载完成前通过占位图形展示页面结构，降低用户等待焦虑。 | `skeleton.md` | — |
 | `Slider` | 数值滑块 | 滑动输入器，用于在数值区间内进行选择。 | `slider.md` | — |
 | `Spin` | 加载中 | 用于页面和区域的加载中状态指示器。 | `spin.md` | — |
@@ -91,6 +91,7 @@ createRoot(el).render(
 | `TimePicker` | 时间选择器 | 用于选择时间的输入组件。 | `time-picker.md` | — |
 | `toast` | 全局提示 | 命令式全局提示组件，用于操作反馈。 | `toast.md` | ✓ |
 | `Tooltip` | 文字提示 | 鼠标悬停时显示的简短提示信息。 | `tooltip.md` | ✓ |
+| `Tree` | 树形控件 | 用于展示层级结构数据，支持勾选、拖拽排序、异步加载与虚拟滚动。 | `tree.md` | ✓ |
 | `Upload` | 上传 | 文件上传组件，支持点击和拖拽上传。 | `upload.md` | — |
 
 - 「文档」列对应 `references/components/` 下的文件名，含完整 Props 与示例

package/skill/VERSION.json

@@ -1,7 +1,7 @@
 {
-  "lingeeUi": "0.0.7",
+  "lingeeUi": "0.0.8",
   "lingeeIcon": "1.0.16",
-  "componentCount": 36,
+  "componentCount": 37,
   "iconCount": 967,
-  "sourceHash": "aeccd0bbb2cfd3c6"
+  "sourceHash": "d9af1a1faa2b5317"
 }

package/skill/references/components/dropdown.md

@@ -49,6 +49,9 @@ export default function BasicDemo() {
 | `sideOffset` | 侧向偏移 | `number` | `4` |
 | `header` | 固定头部内容 | `ReactNode` | - |
 | `footer` | 固定底部内容 | `ReactNode` | - |
+| `autoFocusFirstItem` | 打开时是否聚焦第一项，不传则按输入模态自动判断 | `boolean` | - |
+
+打开面板时的焦点落点默认按最近一次输入方式自动判断：键盘（Enter / Space / Tab / 方向键）打开聚焦第一项，鼠标点击打开则把焦点留在菜单容器上。这样鼠标用户不会看到第一项自带 hover 态，键盘用户仍能看到焦点位置。仅在需要强制某一种行为时才传 `autoFocusFirstItem`。
 
 ### DropdownItem