@rainbow-oh/yee-c 0.1.0 → 0.2.0

package/src/Table/index.zh-CN.md

@@ -31,47 +31,47 @@ toc: 'content'
 
 ### TableProps
 
-| 属性名            | 类型                                                                   | 描述                                 | 默认值 |
-| ----------------- | ---------------------------------------------------------------------- | ------------------------------------ | ------ |
-| prefixCls         | `string`                                                               | 自定义类名前缀                       | -      |
-| className         | `string`                                                               | 自定义根类名                         | -      |
-| style             | `React.CSSProperties`                                                  | 自定义根样式                         | -      |
-| classNames        | `Partial<Record<SemanticType, string>>`                                | 语义化类名                           | -      |
-| styles            | `Partial<Record<SemanticType, React.CSSProperties>>`                   | 语义化样式                           | -      |
-| components        | `Partial<Record<SemanticType, React.ReactNode>>`                       | 自定义表格元素                       | -      |
-| bordered          | `boolean`                                                              | 是否展示外边框和列边框               | -      |
-| columns           | `ColumnProps[]`                                                        | 表格列的配置信息                     | -      |
+| 属性名            | 类型                                                                        | 描述                                 | 默认值 |
+| ----------------- | --------------------------------------------------------------------------- | ------------------------------------ | ------ |
+| prefixCls         | `string`                                                                    | 自定义类名前缀                       | -      |
+| className         | `string`                                                                    | 自定义根类名                         | -      |
+| style             | `React.CSSProperties`                                                       | 自定义根样式                         | -      |
+| classNames        | `Partial<Record<SemanticType, string>>`                                     | 语义化类名                           | -      |
+| styles            | `Partial<Record<SemanticType, React.CSSProperties>>`                        | 语义化样式                           | -      |
+| components        | `Partial<Record<SemanticType, React.ReactNode>>`                            | 自定义表格元素                       | -      |
+| bordered          | `boolean`                                                                   | 是否展示外边框和列边框               | -      |
+| columns           | `ColumnProps[]`                                                             | 表格列的配置信息                     | -      |
 | children          | `Array<React.ReactElement<ColumnProps>> \| React.ReactElement<ColumnProps>` | 子元素                               | -      |
-| locale            | `Record<string, string>`                                               | 提示信息                             | -      |
-| dataSource        | `Array<Record<string, any>>`                                           | 数据                                 | -      |
-| footer            | `React.ReactNode \| (() => React.ReactNode)`                           | 表格底部                             | -      |
-| loading           | `boolean`                                                              | 加载状态                             | -      |
-| stripe            | `boolean`                                                              | 斑马条纹                             | -      |
-| getPopupContainer | `() => HTMLElement`                                                    | 设置表格内的弹出组件的渲染节点       | -      |
-| rowClassName      | `(record: object) => string`                                           | 每行类名                             | -      |
-| pagination | `Partial<PaginationType> \| boolean` | 分页器配置 | - |
-| rowSelection      | `RowSelectionType`                                                     | 表格行是否可选中                     | -      |
-| expandable        | `ExpandableType`                                                       | 是否可展开                           | -      |
-| scroll            | `{ y?: number; x?: number }`                                           | 表格是否可滚动                       | -      |
-| showHeader        | `boolean`                                                              | 是否显示表头                         | `true` |
-| showSorterTooltip | `boolean`                                                              | 配置排序时的提示                     | -      |
-| size              | `'small' \| 'default' \| 'large'`                                      | 表格尺寸                             | -      |
-| rowKey | `string \| ((record: Record<string, any>) => string)` | 设置行的唯一键 | `id` |
-| summary           | `(pageData: Array<Record<string, any>>) => React.ReactNode`            | 总结栏                               | -      |
-| tableLayout       | `'auto' \| 'fixed'`                                                    | 设置Table布局                        | -      |
-| virtual           | `boolean`                                                              | 是否开启虚拟列表                     | -      |
-| onChange          | `({ pagination, filters, sorter, currentDataSource, action }) => void` | 分页，排序，筛选发生变化时的回调函数 | -      |
-| onRow             | `(record: Record<string, any>, index: number) => Record<string, any>`  | 自定义行属性                         | -      |
-| onHeaderRow       | `() => Record<string, any>`                                            | 自定义表头行属性                     | -      |
+| locale            | `Record<string, string>`                                                    | 提示信息                             | -      |
+| dataSource        | `Array<Record<string, any>>`                                                | 数据                                 | -      |
+| footer            | `React.ReactNode \| (() => React.ReactNode)`                                | 表格底部                             | -      |
+| loading           | `boolean`                                                                   | 加载状态                             | -      |
+| stripe            | `boolean`                                                                   | 斑马条纹                             | -      |
+| getPopupContainer | `() => HTMLElement`                                                         | 设置表格内的弹出组件的渲染节点       | -      |
+| rowClassName      | `(record: object) => string`                                                | 每行类名                             | -      |
+| pagination        | `Partial<PaginationType> \| boolean`                                        | 分页器配置                           | -      |
+| rowSelection      | `RowSelectionType`                                                          | 表格行是否可选中                     | -      |
+| expandable        | `ExpandableType`                                                            | 是否可展开                           | -      |
+| scroll            | `{ y?: number; x?: number }`                                                | 表格是否可滚动                       | -      |
+| showHeader        | `boolean`                                                                   | 是否显示表头                         | `true` |
+| showSorterTooltip | `boolean`                                                                   | 配置排序时的提示                     | -      |
+| size              | `'small' \| 'default' \| 'large'`                                           | 表格尺寸                             | -      |
+| rowKey            | `string \| ((record: Record<string, any>) => string)`                       | 设置行的唯一键                       | `id`   |
+| summary           | `(pageData: Array<Record<string, any>>) => React.ReactNode`                 | 总结栏                               | -      |
+| tableLayout       | `'auto' \| 'fixed'`                                                         | 设置Table布局                        | -      |
+| virtual           | `boolean`                                                                   | 是否开启虚拟列表                     | -      |
+| onChange          | `({ pagination, filters, sorter, currentDataSource, action }) => void`      | 分页，排序，筛选发生变化时的回调函数 | -      |
+| onRow             | `(record: Record<string, any>, index: number) => Record<string, any>`       | 自定义行属性                         | -      |
+| onHeaderRow       | `() => Record<string, any>`                                                 | 自定义表头行属性                     | -      |
 
 ### ColumnProps
 
 | 属性名       | 类型                                                                 | 描述                           | 默认值 |
 | ------------ | -------------------------------------------------------------------- | ------------------------------ | ------ |
-| className | `string` | 自定义类名 | - |
-| style | `React.CSSProperties` | 自定义样式 | - |
-| classNames | `Partial<Record<ColumnSemanticType, string>>` | 列结构化类名 | - |
-| styles | `Partial<Record<ColumnSemanticType, React.CSSProperties>>` | 列结构化样式 | - |
+| className    | `string`                                                             | 自定义类名                     | -      |
+| style        | `React.CSSProperties`                                                | 自定义样式                     | -      |
+| classNames   | `Partial<Record<ColumnSemanticType, string>>`                        | 列结构化类名                   | -      |
+| styles       | `Partial<Record<ColumnSemanticType, React.CSSProperties>>`           | 列结构化样式                   | -      |
 | align        | `'left' \| 'right' \| 'center'`                                      | 对齐方式                       | -      |
 | fixed        | `'left' \| 'right' \| true`                                          | 固定列                         | -      |
 | filter       | `object`                                                             | 过滤配置                       | -      |
@@ -84,24 +84,24 @@ toc: 'content'
 | children     | `(record: Record<string, any>, rowIndex: number) => React.ReactNode` | 回调函数，用于自定义单元格内容 | -      |
 | onCell       | `(record: object, rowIndex: number) => object`                       | 设置单元格属性                 | -      |
 | onHeaderCell | `(column: ColumnProps) => object`                                    | 设置表头单元格属性             | -      |
-| render       | `(record: object, rowIndex: number) => React.ReactNode`              | 自定义渲染函数                 | -      |
+| render       | `(record: Record<string, any>, rowIndex: number) => React.ReactNode` | 自定义渲染函数                 | -      |
 
 ### RowSelectionType
 
-| 属性名                 | 类型                                                                     | 描述                        | 默认值 |
-| ---------------------- | ------------------------------------------------------------------------ | --------------------------- | ------ |
-| type                   | `'checkbox' \| 'radio'`                                                  | 单选/多选                   | -      |
-| width                  | `number \| string`                                                       | 列宽                        | -      |
-| selectAll              | `React.ReactNode \| boolean`                                             | 设置全选节点                | `true` |
-| selectedRowKeys        | `Array<SelectionKeyType> \| SelectionKeyType`                            | （受控）选中的行的keys      | -      |
-| defaultSelectedRowKeys | `string[] \| number[]`                                              | 默认选中的行的keys          | -      |
-| index                  | `number`                                                                 | 设置Checkbox或Radio在第几列 | `1`    |
-| disabled               | `boolean \| Array<boolean> \| ((record: Record<string, unknown>, index: number) => boolean)` | 是否禁用 | -      |
-| onCell                 | `(record: Record<string, unknown>, rowIndex: number) => Record<string, unknown>` | 设置Checkbox或Radio属性     | -      |
-| renderCell             | `(record: Record<string, any>, rowIndex: number) => React.ReactNode`     | 渲染checkbox                | -      |
-| onChange               | `(selectedRowKeys, selectedRows) => void`                                | 选中项发生变化时的回调      | -      |
-| onSelectAll            | `(selected, selectedRowKeys, selectedRows) => void`                      | 全选选中或取消时的回调      | -      |
-| selections             | `Array<any>`                                                             | 选择配置                    | -      |
+| 属性名                 | 类型                                                                                         | 描述                        | 默认值 |
+| ---------------------- | -------------------------------------------------------------------------------------------- | --------------------------- | ------ |
+| type                   | `'checkbox' \| 'radio'`                                                                      | 单选/多选                   | -      |
+| width                  | `number \| string`                                                                           | 列宽                        | -      |
+| selectAll              | `React.ReactNode \| boolean`                                                                 | 设置全选节点                | `true` |
+| selectedRowKeys        | `Array<SelectionKeyType> \| SelectionKeyType`                                                | （受控）选中的行的keys      | -      |
+| defaultSelectedRowKeys | `string[] \| number[]`                                                                       | 默认选中的行的keys          | -      |
+| index                  | `number`                                                                                     | 设置Checkbox或Radio在第几列 | `1`    |
+| disabled               | `boolean \| Array<boolean> \| ((record: Record<string, unknown>, index: number) => boolean)` | 是否禁用                    | -      |
+| onCell                 | `(record: Record<string, unknown>, rowIndex: number) => Record<string, unknown>`             | 设置Checkbox或Radio属性     | -      |
+| renderCell             | `(record: Record<string, any>, rowIndex: number) => React.ReactNode`                         | 渲染checkbox                | -      |
+| onChange               | `(selectedRowKeys, selectedRows) => void`                                                    | 选中项发生变化时的回调      | -      |
+| onSelectAll            | `(selected, selectedRowKeys, selectedRows) => void`                                          | 全选选中或取消时的回调      | -      |
+| selections             | `Array<any>`                                                                                 | 选择配置                    | -      |
 
 ### ExpandableType
 

package/src/Tabs/interface.ts

@@ -1,6 +1,6 @@
 import type { DataAttributeProps } from '../utils/types';
 
-type SemanticDOM = 'header' | 'content';
+type SemanticDOM = 'header' | 'content' | 'track' | 'list' | 'activeBar';
 
 export type TabItemType = {
   /**

package/src/Tabs/style/index.less

@@ -522,6 +522,10 @@
   // background-color: var(--yee-color-bg-container);
 }
 
+@{pls}-tab-content {
+  height: 100%;
+}
+
 @{pls}-active {
   z-index: 2;
 

package/src/Tabs/tab-header/index.tsx

@@ -49,7 +49,15 @@ export interface TabHeaderProps {
 
 const TabHeader: React.FC<TabHeaderProps> = (props) => {
   const { items, activeKey } = useContext(TabsCtx);
-  const { prefixCls, type, position = 'top', headerExtra, onEdit } = props;
+  const {
+    prefixCls,
+    type,
+    position = 'top',
+    headerExtra,
+    classNames,
+    styles,
+    onEdit,
+  } = props;
 
   const direction =
     position === 'top' || position === 'bottom' ? 'horizontal' : 'vertical';
@@ -135,6 +143,7 @@ const TabHeader: React.FC<TabHeaderProps> = (props) => {
   const cls = clsx(
     `${prefixCls}-nav-wrapper`,
     `${prefixCls}-nav-wrapper-${position}`,
+    classNames?.header,
   );
 
   const contextValue = {
@@ -147,12 +156,20 @@ const TabHeader: React.FC<TabHeaderProps> = (props) => {
   } as TabHeaderCtxType;
 
   return (
-    <div className={cls}>
+    <div className={cls} style={styles?.header}>
       {renderPrefixExtra()}
 
       <TabHeaderCtx.Provider value={contextValue}>
-        <div className={`${prefixCls}-nav-wrap`} ref={navContainer}>
-          <div className={`${prefixCls}-nav-list`} ref={navList}>
+        <div
+          className={clsx(`${prefixCls}-nav-wrap`, classNames?.track)}
+          style={styles?.track}
+          ref={navContainer}
+        >
+          <div
+            className={clsx(`${prefixCls}-nav-list`, classNames?.list)}
+            style={styles?.list}
+            ref={navList}
+          >
             {items?.map((item: TabItemType, index: number) => (
               <TabHeaderTitle
                 {...item}
@@ -164,7 +181,11 @@ const TabHeader: React.FC<TabHeaderProps> = (props) => {
 
             {!type && (
               <div
-                className={`${prefixCls}-active-bar`}
+                className={clsx(
+                  `${prefixCls}-active-bar`,
+                  classNames?.activeBar,
+                )}
+                style={styles?.activeBar}
                 ref={activebar}
                 aria-hidden="true"
               />

package/src/Tooltip/index.en-US.md

@@ -28,6 +28,7 @@ A simple text popup tip.
 | --- | --- | --- | --- |
 | title | `React.ReactNode \| (() => React.ReactNode)` | Tooltip content | - |
 | mouseEnterDelay | `number` | Mouse enter delay time (seconds) | `0.1` |
+| color | `string` | Custom tooltip background color (applies to both the bubble and the arrow) | - |
 
 Other properties are inherited from [Trigger](/components/trigger), including:
 

package/src/Tooltip/index.zh-CN.md

@@ -28,6 +28,7 @@ toc: 'content'
 | --- | --- | --- | --- |
 | title | `React.ReactNode \| (() => React.ReactNode)` | 提示文字 | - |
 | mouseEnterDelay | `number` | 鼠标移入后延时多少秒才显示 Tooltip | `0.1` |
+| color | `string` | 自定义提示背景色（同时作用于气泡和箭头） | - |
 
 其他属性继承自 [Trigger](/components/trigger)，包括：
 

package/src/Tooltip/interface.ts

@@ -10,4 +10,8 @@ export interface TooltipProps extends Omit<TriggerProps, 'popup'> {
    * @default 0.1
    */
   mouseEnterDelay?: number;
+  /***
+   * Tooltip custom background color
+   * */
+  color?: string;
 }

package/src/Tooltip/style/index.less

@@ -8,19 +8,19 @@
 
   &-arrow {
     &::after {
-      position: absolute;
-      bottom: 0;
-      z-index: 0;
-      width: var(--yee-tooltip-arrow-width);
-      height: var(--yee-tooltip-arrow-height);
-      margin: auto;
+      // position: absolute;
+      // bottom: 0;
+      // z-index: 0;
+      // width: var(--yee-tooltip-arrow-width);
+      // height: var(--yee-tooltip-arrow-height);
+      // margin: auto;
       background-color: var(--yee-tooltip-bg-color);
       border-radius: var(--yee-tooltip-arrow-border-radius);
       box-shadow: var(--yee-box-shadow-popover-arrow);
       transform: translateY(var(--yee-tooltip-arrow-translate-y))
         rotate(var(--yee-tooltip-arrow-rotate));
-      content: '';
-      inset-inline: 0;
+      // content: '';
+      // inset-inline: 0;
     }
   }
 }

package/src/Tooltip/tooltip.tsx

@@ -17,9 +17,17 @@ const Tooltip = (baseprops: TooltipProps) => {
     placement = 'top',
     trigger = ['hover', 'focus'],
     mouseEnterDelay = 0.1,
+    color,
+    popupStyle,
+    hideOnClick = false,
     ...rest
   } = props;
 
+  const mergedPopupStyle = {
+    ...(color ? { ['--yee-tooltip-bg-color']: color } : null),
+    ...popupStyle,
+  } as React.CSSProperties;
+
   const popup = (
     <span className={`${prefixCls}-content`} role="tooltip">
       {typeof title === 'function' ? title() : title}
@@ -34,7 +42,8 @@ const Tooltip = (baseprops: TooltipProps) => {
       popup={popup}
       arrow={arrow}
       placement={placement}
-      hideOnClick={false}
+      hideOnClick={hideOnClick}
+      popupStyle={mergedPopupStyle}
       mouseEnterDelay={mouseEnterDelay}
     >
       {children}

package/src/Tree/demo/draggable.tsx

@@ -0,0 +1,58 @@
+import { Tree, moveTreeNode } from '@rainbow-oh/yee-c';
+import React, { useState } from 'react';
+
+const FIELD_NAMES = {
+  key: 'key',
+  label: 'label',
+  children: 'children',
+} as const;
+
+export default () => {
+  const [data, setData] = useState([
+    {
+      label: 'parent 1',
+      key: '0-0',
+      children: [
+        {
+          label: 'parent 1-0',
+          key: '0-0-0',
+          children: [
+            { label: 'leaf-1', key: '0-0-0-0' },
+            { label: 'leaf-2', key: '0-0-0-1' },
+          ],
+        },
+        {
+          label: 'parent 1-1',
+          key: '0-0-1',
+          children: [{ label: 'leaf-3', key: '0-0-1-0' }],
+        },
+      ],
+    },
+    {
+      label: 'parent 2',
+      key: '0-1',
+      children: [{ label: 'leaf-4', key: '0-1-0' }],
+    },
+  ]);
+
+  return (
+    <Tree
+      draggable
+      defaultExpandAll
+      dataSource={data}
+      onDrop={(info) =>
+        setData((prev) =>
+          moveTreeNode(
+            prev,
+            {
+              dragKey: info.dragKey,
+              dropKey: info.dropKey,
+              position: info.position,
+            },
+            FIELD_NAMES,
+          ),
+        )
+      }
+    />
+  );
+};

package/src/Tree/demo/expanded.tsx

@@ -6,29 +6,29 @@ export default () => {
 
   const treeData = [
     {
-      title: 'parent 1',
+      label: 'parent 1',
       key: '0-0',
       children: [
         {
-          title: 'parent 1-0',
+          label: 'parent 1-0',
           key: '0-0-0',
           children: [
             {
-              title: 'leaf',
+              label: 'leaf',
               key: '0-0-0-0',
             },
             {
-              title: 'leaf',
+              label: 'leaf',
               key: '0-0-0-1',
             },
           ],
         },
         {
-          title: 'parent 1-1',
+          label: 'parent 1-1',
           key: '0-0-1',
           children: [
             {
-              title: 'leaf',
+              label: 'leaf',
               key: '0-0-1-0',
             },
           ],
@@ -39,7 +39,7 @@ export default () => {
 
   const handleExpandAll = () => {
     type TreeNodeData = {
-      title: string;
+      label: string;
       key: string;
       children?: TreeNodeData[];
     };

package/src/Tree/index.en-US.md

@@ -20,6 +20,7 @@ Tree is a hierarchical data display component.
 <code src="./demo/icon.tsx" title="Icon" description="Tree with custom icons"></code>
 <code src="./demo/line.tsx" title="Line" description="Tree with connecting lines"></code>
 <code src="./demo/expanded.tsx" title="Expanded" description="Controlled expanded tree"></code>
+<code src="./demo/draggable.tsx" title="Draggable" description="Drag and drop to reorder"></code>
 
 ## API
 
@@ -36,6 +37,8 @@ Tree is a hierarchical data display component.
 | expandedKeys | `string[]` | Controlled expanded tree nodes | - |
 | disabled | `boolean` | Disabled | - |
 | draggable | `boolean` | Whether allow drag | - |
+| allowDrop | `(info: { dragNode: T; dropNode: T; position: 'before' \| 'after' \| 'inside' }) => boolean` | Whether to allow dropping at the given position; return false to forbid (shows no-drop cursor) | - |
+| onDrop | `(info: { dragNode: T; dropNode: T; dragKey: string \| number; dropKey: string \| number; position: 'before' \| 'after' \| 'inside'; dropToGap: boolean }) => void` | Callback after a node is dropped. Controlled: reorder `dataSource` yourself, e.g. with the exported `moveTreeNode` helper. When dropping `inside` while `expandedKeys` is controlled, add the `dropKey` to the expanded set yourself | - |
 | showLine | `boolean` | Show connecting lines | - |
 | showIcon | `boolean` | Show node icons | `true` |
 | icon | `React.ReactNode \| ((props: TreeProps<T>) => React.ReactNode)` | Icon before title (requires showIcon) | - |

package/src/Tree/index.ts

@@ -1,4 +1,5 @@
 import Tree from './tree';
 
 export type { TreeProps } from './interface';
+export { moveTreeNode } from './utils/tree-tools';
 export default Tree;

package/src/Tree/index.zh-CN.md

@@ -20,6 +20,7 @@ toc: 'content'
 <code src="./demo/icon.tsx" title="自定义图标" description="带自定义图标的树"></code>
 <code src="./demo/line.tsx" title="连接线" description="带连接线的树"></code>
 <code src="./demo/expanded.tsx" title="受控展开" description="受控展开的树"></code>
+<code src="./demo/draggable.tsx" title="拖拽排序" description="拖拽节点进行排序"></code>
 
 ## API
 
@@ -36,6 +37,8 @@ toc: 'content'
 | expandedKeys | `string[]` | 受控展开的树节点 | - |
 | disabled | `boolean` | 禁用 | - |
 | draggable | `boolean` | 是否允许拖拽 | - |
+| allowDrop | `(info: { dragNode: T; dropNode: T; position: 'before' \| 'after' \| 'inside' }) => boolean` | 是否允许在指定位置放置，返回 false 则禁止（显示禁止符） | - |
+| onDrop | `(info: { dragNode: T; dropNode: T; dragKey: string \| number; dropKey: string \| number; position: 'before' \| 'after' \| 'inside'; dropToGap: boolean }) => void` | 拖拽完成回调。受控模式需自行重排 `dataSource`，可配合导出的 `moveTreeNode` 工具。当 `expandedKeys` 受控且以 `inside` 方式放置时，需自行把 `dropKey` 加入展开集合 | - |
 | showLine | `boolean` | 是否显示连接线 | - |
 | showIcon | `boolean` | 是否显示节点图标 | `true` |
 | icon | `React.ReactNode \| ((props: TreeProps<T>) => React.ReactNode)` | 标题前的图标，需设置showIcon为true | - |

package/src/Tree/interface.ts

@@ -1,5 +1,9 @@
 export type SemanticType = '';
 
+export type DragPosition = 'before' | 'after' | 'inside';
+
+export type { MoveInfo } from './utils/tree-tools';
+
 export type TreeNode<T> = {
   /**
    * uid
@@ -104,6 +108,30 @@ export interface TreeProps<T> {
    * Whether to allow dragging
    */
   draggable?: boolean;
+  /**
+   * Whether to allow dropping a dragged node at the given position.
+   * Return false to forbid the drop (cursor shows "no-drop").
+   */
+  allowDrop?: (info: {
+    dragNode: T;
+    dropNode: T;
+    position: DragPosition;
+  }) => boolean;
+  /**
+   * Callback after a node is dropped. Pure controlled: the Tree does not
+   * mutate dataSource — reorder it yourself (e.g. with `moveTreeNode`).
+   */
+  onDrop?: (info: {
+    /** Original data of the dragged node */
+    dragNode: T;
+    /** Original data of the target node */
+    dropNode: T;
+    dragKey: string | number;
+    dropKey: string | number;
+    position: DragPosition;
+    /** Convenience flag: true when position is 'before' or 'after' */
+    dropToGap: boolean;
+  }) => void;
   /**
    * Whether to show connecting lines
    */

package/src/Tree/style/index.less

@@ -2,11 +2,36 @@
 
 @{pls} {
   &-node {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: flex-start;
     height: var(--yee-tree-node-height);
 
+    &[draggable='true'] {
+      cursor: grab;
+    }
+
+    &-dragging {
+      opacity: 0.4;
+    }
+
+    &-drag-over-before {
+      box-shadow: inset 0 2px 0 0 var(--yee-primary-color);
+    }
+
+    &-drag-over-after {
+      box-shadow: inset 0 -2px 0 0 var(--yee-primary-color);
+    }
+
+    &-drag-over-inside {
+      background: color-mix(
+        in srgb,
+        var(--yee-primary-color) 12%,
+        transparent
+      );
+    }
+
     &-switcher {
       display: inline-flex;
       align-items: center;

package/src/Tree/tree-node.tsx

@@ -35,9 +35,16 @@ const Node = <T extends Record<string, unknown> = any>(
     checkedKeys,
     expandedKeys,
     switcherIcon,
+    draggable,
+    draggingKey,
+    dropState,
     onCheck,
     onSelect,
     onExpand,
+    onNodeDragStart,
+    onNodeDragOver,
+    onNodeDragLeave,
+    onNodeDrop,
   } = useContext(TreeContext);
 
   const expanded = expandedKeys.includes(key);
@@ -138,16 +145,35 @@ const Node = <T extends Record<string, unknown> = any>(
     ));
   };
 
+  const isDropTarget = dropState?.key === key;
+  const dropPosition = isDropTarget ? dropState.position : null;
+
+  const dragProps =
+    draggable && !disabled
+      ? {
+          draggable: true as const,
+          onDragStart: (e: React.DragEvent) => onNodeDragStart(key, e),
+          onDragOver: (e: React.DragEvent) => onNodeDragOver(key, e),
+          onDragLeave: (e: React.DragEvent) => onNodeDragLeave(key, e),
+          onDrop: (e: React.DragEvent) => onNodeDrop(key, e),
+        }
+      : {};
+
   return (
     <div
       className={clsx(`${prefixCls}-node`, {
         [`${prefixCls}-node-with-line`]: showLine,
         [`${prefixCls}-leaf-node`]: isLeaf,
         [`${prefixCls}-last-node`]: isLast,
+        [`${prefixCls}-node-dragging`]: draggingKey === key,
+        [`${prefixCls}-node-drag-over-before`]: dropPosition === 'before',
+        [`${prefixCls}-node-drag-over-after`]: dropPosition === 'after',
+        [`${prefixCls}-node-drag-over-inside`]: dropPosition === 'inside',
       })}
       // style={{
       //   paddingLeft: depth * 28 + (isLeaf && checkable ? 24 : 0),
       // }}
+      {...dragProps}
     >
       {renderEmptyNodes(depth)}
       {renderExpandedIcon()}