plain-design 1.0.0-beta.1 → 1.0.0-beta.10

package/src/packages/components/LayoutSection/useLayoutSectionResizer.tsx

@@ -0,0 +1,184 @@
+import Icon from "../Icon";
+import {eLayoutSectionPosition} from "../Layout/layout.utils";
+import {cacheComputed, computed, getComponentCls, iHTMLDivElement, iMouseEvent, useRefs} from "plain-design-composition";
+import {createEffects} from "plain-utils/utils/createEffects";
+import {ClientZoom} from "../../utils/ClientZoom";
+
+export function useLayoutSectionResizer(
+  {
+    model,
+    collapseModel,
+    props
+  }: {
+    model: { value?: number },
+    collapseModel: { value?: boolean },
+    props: { position: typeof eLayoutSectionPosition.TYPE }
+  }
+) {
+
+  const { refs, onRef } = useRefs({ sep: iHTMLDivElement });
+
+  const isVertical = computed(() => props.position === eLayoutSectionPosition.top || props.position === eLayoutSectionPosition.bottom);
+
+  const icon = cacheComputed(() => {
+    switch (props.position) {
+      case "center":
+        return null;
+      case "left":
+        return collapseModel.value ? 'pi-caret-right' : 'pi-caret-left';
+      case "right":
+        return collapseModel.value ? 'pi-caret-left' : 'pi-caret-right';
+      case "top":
+        return collapseModel.value ? 'pi-caret-down' : 'pi-caret-up';
+      case "bottom":
+        return collapseModel.value ? 'pi-caret-up' : 'pi-caret-down';
+    }
+    return null;
+  });
+
+  const draggier = computed(() => {
+    return isVertical.value ? (() => {
+      const { effects } = createEffects();
+
+      let staticState = null as null | {
+        startY: number,
+        moveY: number,
+        startValue: number,
+        shadowEl: HTMLDivElement,
+      };
+
+      const onMousedown = (e: iMouseEvent) => {
+
+        const { clientY } = ClientZoom.getClientPosition(e);
+
+        const shadowEl = (() => {
+          const rect = refs.sep!.getBoundingClientRect();
+          const el = document.createElement('div');
+          el.style.height = '1px';
+          el.style.position = 'fixed';
+          el.style.left = `${rect.left}px`;
+          el.style.top = `${clientY}px`;
+          el.style.width = `${rect.width}px`;
+          el.style.zIndex = "10";
+          el.style.backgroundColor = `var(--${getComponentCls('primary-6')})`;
+          document.body.appendChild(el);
+          effects.push(() => {
+            document.body.removeChild(el);
+          });
+          return el;
+        })();
+
+        staticState = {
+          startY: clientY,
+          moveY: clientY,
+          startValue: model.value!,
+          shadowEl,
+        };
+
+        window.addEventListener('mousemove', onMousemove);
+        window.addEventListener('mouseup', effects.clear);
+        effects.push(() => {
+          if (!staticState) {return;}
+          let durY = staticState!.moveY - staticState!.startY;
+          if (props.position === eLayoutSectionPosition.bottom) {
+            durY = -durY;
+          }
+          model.value = staticState.startValue + durY;
+          staticState = null;
+          window.removeEventListener('mousemove', onMousemove);
+          window.removeEventListener('mouseup', effects.clear);
+        });
+      };
+
+      const onMousemove = (e: MouseEvent) => {
+        if (!staticState) {return;}
+        const { clientY } = ClientZoom.getClientPosition(e);
+        staticState.moveY = clientY;
+        staticState.shadowEl.style.top = `${clientY}px`;
+      };
+
+      return {
+        onMousedown
+      };
+    })() : (() => {
+      const { effects } = createEffects();
+
+      let staticState = null as null | {
+        startX: number,
+        moveX: number,
+        startValue: number,
+        shadowEl: HTMLDivElement,
+      };
+
+      const onMousedown = (e: iMouseEvent) => {
+
+        const { clientX } = ClientZoom.getClientPosition(e);
+
+        const shadowEl = (() => {
+          const rect = refs.sep!.getBoundingClientRect();
+          const el = document.createElement('div');
+          el.style.width = '1px';
+          el.style.position = 'fixed';
+          el.style.top = `${rect.top}px`;
+          el.style.left = `${clientX}px`;
+          el.style.height = `${rect.height}px`;
+          el.style.zIndex = "10";
+          el.style.backgroundColor = `var(--${getComponentCls('primary-6')})`;
+          document.body.appendChild(el);
+          effects.push(() => {
+            document.body.removeChild(el);
+          });
+          return el;
+        })();
+
+        staticState = {
+          startX: clientX,
+          moveX: clientX,
+          startValue: model.value!,
+          shadowEl,
+        };
+
+        window.addEventListener('mousemove', onMousemove);
+        window.addEventListener('mouseup', effects.clear);
+        effects.push(() => {
+          if (!staticState) {return;}
+          let durX = staticState!.moveX - staticState!.startX;
+          if (props.position === eLayoutSectionPosition.right) {
+            durX = -durX;
+          }
+          model.value = staticState.startValue + durX;
+          staticState = null;
+          window.removeEventListener('mousemove', onMousemove);
+          window.removeEventListener('mouseup', effects.clear);
+        });
+      };
+
+      const onMousemove = (e: MouseEvent) => {
+        if (!staticState) {return;}
+        const { clientX } = ClientZoom.getClientPosition(e);
+        staticState.moveX = clientX;
+        staticState.shadowEl.style.left = `${clientX}px`;
+      };
+
+      return {
+        onMousedown
+      };
+    })();
+  });
+
+  const toggleCollapse = () => collapseModel.value = !collapseModel.value;
+
+  const render = () => {
+    return (
+      !icon.value ? null :
+        <>
+          {!collapseModel.value && <div className="layout-section-separator" onMouseDown={draggier.value.onMousedown} ref={onRef.sep}/>}
+          <div className="layout-section-collapse-btn" onClick={toggleCollapse}>
+            <Icon icon={icon.value}/>
+          </div>
+        </>
+    );
+  };
+
+  return { render };
+}

package/src/{pages/index/PageThemeUtils.tsx → packages/components/PageThemeUtils/index.tsx}

@@ -1,8 +1,8 @@
 import {computed, getComponentCls, reactive} from "plain-design-composition";
-import {iApplicationConfiguration} from "../../packages";
-import {DeepPartial} from "../../packages/utils/type";
-import {createCache} from "../../packages/utils/createCache";
-import {ThemeShape, ThemeSize} from "../../packages/uses/useStyle";
+import {createCache} from "../../utils/createCache";
+import {ThemeShape, ThemeSize} from "../../uses/useStyle";
+import {DeepPartial} from "../../utils/type";
+import {iApplicationConfiguration} from "../Application/utils/application.utils";
 
 export const PageThemeUtils = (() => {
 
@@ -123,3 +123,5 @@ export const ThemePrimaryColors: Record<string, { label: string, primary: string
   purple: { label: '酱紫', primary: '#722ed1', },
   magenta: { label: '洋红', primary: '#eb2f96', },
 };
+
+export default PageThemeUtils;

package/src/packages/components/Popup/index.tsx

@@ -1,4 +1,4 @@
-import {ComponentPropsType, computed, designComponent, getComponentCls, onBeforeUnmount, PropType, reactive, RenderNode, useClassCache, useModel, useStyleCache, watch, watchEffect} from "plain-design-composition";
+import {ComponentPropsType, Fragment, computed, designComponent, getComponentCls, onBeforeUnmount, PropType, reactive, RenderNode, useClassCache, useModel, useStyleCache, watch, watchEffect} from "plain-design-composition";
 import {iPopupAnimation, iPopupCustomOption, iPopupDefaultOption, iPopupPlacement, iPopupTrigger, iPopupUseOption, PopupItemProvide} from "../usePopup/utils/popup.utils";
 import {Reference} from "../Reference";
 import {usePopup} from "../usePopup";
@@ -139,7 +139,9 @@ export const Popup = designComponent({
     const reference = computed(() => {
       let reference: any = props.reference || state.getReference();
       if (!!reference) {
-        if (typeof reference === "function") {reference = reference();}
+        if (typeof reference === "function") {
+          reference = reference();
+        }
         if (!!reference && !!reference.$el) {
           reference = reference.$el;
         }
@@ -155,7 +157,9 @@ export const Popup = designComponent({
     const stickyReference = computed(() => {
       let reference: any = props.stickyReference;
       if (!!reference) {
-        if (typeof reference === "function") {reference = reference();}
+        if (typeof reference === "function") {
+          reference = reference();
+        }
         if (!!reference && !!reference.$el) {
           reference = reference.$el;
         }
@@ -266,12 +270,16 @@ export const Popup = designComponent({
         },
         /*开启之前检查，如果已经禁用则禁止显示*/
         beforeShow: () => {
-          if (props.disabled || props.readonly) {return false;}
+          if (props.disabled || props.readonly) {
+            return false;
+          }
           return props.beforeShow?.();
         },
         /*关闭之前检查，如果已经禁用则禁止关闭*/
         beforeHide: () => {
-          if (props.disabled || props.readonly) {return false;}
+          if (props.disabled || props.readonly) {
+            return false;
+          }
           return props.beforeHide?.();
         },
 
@@ -284,7 +292,7 @@ export const Popup = designComponent({
               {(slots.head.isExist() || !!props.title) && (
                 <div className="popper-head">{slots.head(typeof props.title === "function" ? props.title() : props.title)}</div>
               )}
-              {slots.popper(typeof props.message === "function" ? props.message() : props.message)}
+              <Fragment key="popper">{slots.popper(typeof props.message === "function" ? props.message() : props.message)}</Fragment>
             </div>
           );
 
@@ -346,14 +354,18 @@ export const Popup = designComponent({
      */
     if (!!model.value) {
       const unwatch = watch(() => reference.value, reference => {
-        if (!reference) {return;}
+        if (!reference) {
+          return;
+        }
         unwatch();
         $popup.show(state.getOption());
       });
     }
 
     onBeforeUnmount(
-      watch(() => props.watchData, () => {$popup.update(state.getOption());})
+      watch(() => props.watchData, () => {
+        $popup.update(state.getOption());
+      })
     );
 
     const refresh = () => {

package/src/packages/components/Rate/index.tsx

@@ -5,6 +5,7 @@ import {Icon} from "../Icon";
 import './rate.scss';
 import {EditProps, useEdit} from "../../uses/useEdit";
 import {StyleProps, ThemeStatus, useStyle} from "../../uses/useStyle";
+import {ClientZoom} from "../ClientZoom";
 
 export const Rate = designComponent({
   name: 'rate',
@@ -79,7 +80,8 @@ export const Rate = designComponent({
 
     const methods = {
       reset: (e: MouseEvent | iMouseEvent) => {
-        let dur = e.clientX - (elLeft.value || 0);
+        const { clientX } = ClientZoom.getClientPosition(e);
+        let dur = clientX - (elLeft.value || 0);
         let start = 0;
         let end = totalWidth.value;
         let step = end / props.count;

package/src/packages/components/Scroll/HorizontalScrollbar.tsx

@@ -5,6 +5,7 @@ import {enableUserSelect} from "plain-utils/dom/enableUserSelect";
 import {Scroll} from "./index";
 import {delay} from "plain-utils/utils/delay";
 import Tooltip from "../Tooltip";
+import {ClientZoom} from "../ClientZoom";
 
 export const HorizontalScrollbar = designComponent({
   props: {
@@ -41,15 +42,17 @@ export const HorizontalScrollbar = designComponent({
         state.scrollLeft = (e.target as HTMLElement).scrollLeft;
       },
       onMousedown: (e: iMouseEvent) => {
+        const { clientX } = ClientZoom.getClientPosition(e);
         scroll.freezeState.isDragging = true;
         dragState.left = left.value;
-        dragState.clientX = e.clientX;
+        dragState.clientX = clientX;
         document.addEventListener('mousemove', handler.onMousemove);
         document.addEventListener('mouseup', handler.onMouseup);
         disabledUserSelect();
       },
       onMousemove: (e: MouseEvent) => {
-        let deltaX = e.clientX - dragState.clientX;
+        const { clientX } = ClientZoom.getClientPosition(e);
+        let deltaX = clientX - dragState.clientX;
         const left = dragState.left + deltaX;
         let scrollLeft = left * (scroll.state.contentWidth - scroll.state.hostWidth) / (scroll.state.hostWidth - width.value);
         scrollLeft = Math.max(0, Math.min(scrollLeft, scroll.state.contentWidth - scroll.state.hostWidth));
@@ -66,7 +69,8 @@ export const HorizontalScrollbar = designComponent({
         enableUserSelect();
 
         if (scroll.props.scrollAfterDragEnd) {
-          let deltaX = e.clientX - dragState.clientX;
+          const { clientX } = ClientZoom.getClientPosition(e);
+          let deltaX = clientX - dragState.clientX;
           const left = dragState.left + deltaX;
           scroll.refs.wrapper!.scrollLeft = left * (scroll.state.contentWidth - scroll.state.hostWidth) / (scroll.state.hostWidth - width.value);
         }

package/src/packages/components/Scroll/VerticalScrollbar.tsx

@@ -5,6 +5,7 @@ import {enableUserSelect} from "plain-utils/dom/enableUserSelect";
 import {Scroll} from "./index";
 import {delay} from "plain-utils/utils/delay";
 import Tooltip from "../Tooltip";
+import {ClientZoom} from "../ClientZoom";
 
 export const VerticalScrollbar = designComponent({
   props: {
@@ -46,15 +47,17 @@ export const VerticalScrollbar = designComponent({
         state.scrollTop = (e.target as HTMLElement).scrollTop;
       },
       onMousedown: (e: iMouseEvent) => {
+        const { clientY } = ClientZoom.getClientPosition(e);
         scroll.freezeState.isDragging = true;
         dragState.top = top.value;
-        dragState.clientY = e.clientY;
+        dragState.clientY = clientY;
         document.addEventListener('mousemove', handler.onMousemove);
         document.addEventListener('mouseup', handler.onMouseup);
         disabledUserSelect();
       },
       onMousemove: (e: MouseEvent) => {
-        let deltaY = e.clientY - dragState.clientY;
+        const { clientY } = ClientZoom.getClientPosition(e);
+        let deltaY = clientY - dragState.clientY;
         let top = dragState.top + deltaY;
         let scrollTop = top * (scroll.state.contentHeight - scroll.state.hostHeight) / (scroll.state.hostHeight - height.value);
         scrollTop = Math.max(0, Math.min(scrollTop, scroll.state.contentHeight - scroll.state.hostHeight));
@@ -72,7 +75,8 @@ export const VerticalScrollbar = designComponent({
         enableUserSelect();
 
         if (scroll.props.scrollAfterDragEnd) {
-          let deltaY = e.clientY - dragState.clientY;
+          const { clientY } = ClientZoom.getClientPosition(e);
+          let deltaY = clientY - dragState.clientY;
           let top = dragState.top + deltaY;
           scroll.refs.wrapper!.scrollTop = top * (scroll.state.contentHeight - scroll.state.hostHeight) / (scroll.state.hostHeight - height.value);
         }

package/src/packages/components/Slider/useSliderDotDragier.tsx

@@ -3,6 +3,7 @@ import {disabledUserSelect} from "plain-utils/dom/disabledUserSelect";
 import {enableUserSelect} from "plain-utils/dom/enableUserSelect";
 import {iMouseEvent, reactive} from "plain-design-composition";
 import {iSliderHooks} from "./slider.utils";
+import {ClientZoom} from "../ClientZoom";
 
 export function useSliderDotDraggier<InitialState>(
   hooks: iSliderHooks,
@@ -24,10 +25,11 @@ export function useSliderDotDraggier<InitialState>(
 
   const handler = {
     onMousedown: (e: iMouseEvent) => {
+      const { clientX, clientY } = ClientZoom.getClientPosition(e);
       staticState = {
         start: {
-          x: e.clientX,
-          y: e.clientY,
+          x: clientX,
+          y: clientY,
         },
         state: getInitialState(),
       };
@@ -46,8 +48,9 @@ export function useSliderDotDraggier<InitialState>(
     },
     onMousemove: (e: MouseEvent) => {
       if (!staticState) {return;}
-      const durX = e.clientX - staticState.start.x;
-      const durY = e.clientY - staticState.start.y;
+      const { clientX, clientY } = ClientZoom.getClientPosition(e);
+      const durX = clientX - staticState.start.x;
+      const durY = clientY - staticState.start.y;
       handleDraggier({
         durX,
         durY,

package/src/packages/components/Table/table/head/useHeadCellResize.ts

@@ -4,6 +4,7 @@ import {Table} from "../../index";
 import {tPlcType} from "../../plc/utils/plc.utils";
 import {addClass} from "plain-utils/dom/addClass";
 import {getComponentCls, iMouseEvent} from "plain-design-composition";
+import {ClientZoom} from "../../../ClientZoom";
 
 /**
  * 处理表头拖拽调整宽度的功能
@@ -21,6 +22,8 @@ export function useHeadCellResize(table: typeof Table.use.class, getPlc: () => t
   const handler = {
     mousedown: (e: iMouseEvent) => {
 
+      const { clientX } = ClientZoom.getClientPosition(e);
+
       const tableEl = table.refs.el!;
 
       e.preventDefault();
@@ -29,7 +32,7 @@ export function useHeadCellResize(table: typeof Table.use.class, getPlc: () => t
       window.addEventListener('mousemove', handler.mousemove);
       window.addEventListener('mouseup', handler.mouseup);
       disabledUserSelect();
-      state.startX = e.clientX;
+      state.startX = clientX;
 
       state.indicatorEl = document.createElement('div');
 
@@ -55,14 +58,16 @@ export function useHeadCellResize(table: typeof Table.use.class, getPlc: () => t
       document.body.appendChild(state.indicatorEl);
     },
     mousemove: (e: MouseEvent) => {
-      state.indicatorEl!.style.transform = `translate3d(${e.clientX}px,0,0)`;
+      const { clientX } = ClientZoom.getClientPosition(e);
+      state.indicatorEl!.style.transform = `translate3d(${clientX}px,0,0)`;
     },
     mouseup: (e: MouseEvent) => {
+      const { clientX } = ClientZoom.getClientPosition(e);
       window.removeEventListener('mousemove', handler.mousemove);
       window.removeEventListener('mouseup', handler.mouseup);
       enableUserSelect();
       document.body.removeChild(state.indicatorEl!);
-      state.endX = e.clientX;
+      state.endX = clientX;
       let durWidth = state.endX - state.startX!;
       getPlc().setDurWidth(durWidth);
     }

package/src/packages/components/Table/table/use/useTableDraggier.col.tsx

@@ -12,6 +12,7 @@ import {getComponentCls, iMouseEvent, nextIndex, StyleProperties} from "plain-de
 import {iTableHooks} from "../utils/createTableHooks";
 import {iElementRect} from "../../../../utils/getRowEl";
 import {createEnum} from "plain-utils/utils/createEnum";
+import {ClientZoom} from "../../../ClientZoom";
 
 export function useTableDraggierCol(
   {
@@ -223,11 +224,12 @@ export function useTableDraggierCol(
     };
 
     const start = (e: iMouseEvent, plc: tPlcType) => {
+      const { clientX, clientY } = ClientZoom.getClientPosition(e);
       staticState = {
         plc,
         start: {
-          x: e.clientX,
-          y: e.clientY,
+          x: clientX,
+          y: clientY,
         },
         data: null
       };
@@ -237,11 +239,13 @@ export function useTableDraggierCol(
     const update = (e?: MouseEvent) => {
       if (!staticState) {return;}
 
+      const { clientX, clientY } = !e ? { clientX: 0, clientY: 0 } : ClientZoom.getClientPosition(e);
+
       let isDragging = !!staticState.data;
 
       if (!isDragging) {
         /*拖拽超过一定距离的时候才开始拖拽，避免与点击事件冲突*/
-        if (!!e && Math.abs(e.clientX - staticState.start.x) > 5) {
+        if (!!e && Math.abs(clientX - staticState.start.x) > 5) {
           isDragging = true;
           initDraggierState();
         }
@@ -253,7 +257,7 @@ export function useTableDraggierCol(
       }
 
       if (!!e) {
-        staticState.data.move = { x: e.clientX, y: e.clientY };
+        staticState.data.move = { x: clientX, y: clientY };
       }
       const { data: { cloneTable, move, table, left }, start } = staticState;
       cloneTable.style.top = table.getBoundingClientRect().top + 'px';
@@ -470,7 +474,8 @@ export function useTableDraggierCol(
     };
     const update = (e?: MouseEvent) => {
       if (!!e) {
-        staticState!.moveClientX = e.clientX;
+        const { clientX } = ClientZoom.getClientPosition(e);
+        staticState!.moveClientX = clientX;
       } else {
         staticState!.moveScrollLeft = staticState!.scrollParent!.scrollLeft;
       }

package/src/packages/components/Table/table/use/useTableDraggier.row.tsx

@@ -9,6 +9,7 @@ import {hasClass} from "plain-utils/dom/hasClass";
 import {addClass} from "plain-utils/dom/addClass";
 import {disabledUserSelect} from "plain-utils/dom/disabledUserSelect";
 import {enableUserSelect} from "plain-utils/dom/enableUserSelect";
+import {ClientZoom} from "../../../ClientZoom";
 
 export function useTableDraggierRow(
   {
@@ -85,9 +86,10 @@ export function useTableDraggierRow(
     };
     let prevClientY = 0;
     const update = (e?: MouseEvent) => {
+      const { clientY } = !e ? { clientY: prevClientY } : ClientZoom.getClientPosition(e);
       const moveIndex = (() => {
         const hostRect = staticState!.bodyHostEl.getBoundingClientRect();
-        let index = Math.floor((((e?.clientY || prevClientY) - hostRect.top + refs.virtual!.refs.scroll!.freezeState.wrapperScrollTop - (staticState!.headTableEl?.clientHeight || 0)) / numberState.bodyRowHeight));
+        let index = Math.floor(((clientY - hostRect.top + refs.virtual!.refs.scroll!.freezeState.wrapperScrollTop - (staticState!.headTableEl?.clientHeight || 0)) / numberState.bodyRowHeight));
         if (index < 0) {index = 0;}
         if (index > bodyNodes.value.length - 1) {
           index = bodyNodes.value.length - 1;
@@ -95,7 +97,7 @@ export function useTableDraggierRow(
         return index;
       })();
       if (moveIndex !== move.state.index) {move.state.index = moveIndex;}
-      if (!!e) {prevClientY = e.clientY;}
+      if (!!e) {prevClientY = clientY;}
     };
     return { state, update, start, get staticState() {return staticState;} };
   })();
@@ -188,9 +190,10 @@ export function useTableDraggierRow(
     };
 
     const start = (e: iMouseEvent, node: iTableNode) => {
+      const { clientY } = !e ? { clientY: prevClientY } : ClientZoom.getClientPosition(e);
       const rowEl = (Array.from(refs.el!.querySelectorAll(`.plt-row`)) as HTMLTableRowElement[]).find(i => i.dataset.vid == node.state.index.toString())!;
       const rowRect = rowEl.getBoundingClientRect();
-      staticState = { startY: e.clientY, startTop: rowRect.top, node, rowEl, data: null, };
+      staticState = { startY: clientY, startTop: rowRect.top, node, rowEl, data: null, };
       /*清理状态*/
       draggierEffects.push(() => {staticState = null;});
     };
@@ -199,11 +202,13 @@ export function useTableDraggierRow(
     const update = (e?: MouseEvent) => {
       if (!staticState) {return;}
 
+      const { clientY } = !e ? { clientY: prevClientY } : ClientZoom.getClientPosition(e);
+
       let isDragging = !!staticState.data;
 
       if (!isDragging) {
         /*拖拽超过一定距离的时候才开始拖拽，避免与点击事件冲突*/
-        if (!!e && Math.abs(e.clientY - staticState.startY) > 5) {
+        if (!!e && Math.abs(clientY - staticState.startY) > 5) {
           isDragging = true;
           initDraggierState();
         }
@@ -214,7 +219,7 @@ export function useTableDraggierRow(
         return;
       }
 
-      const durY = (e?.clientY || prevClientY) - staticState.startY;
+      const durY = clientY - staticState.startY;
       let top = staticState.startTop + durY;
       const minTop = move.staticState!.bodyHostEl.getBoundingClientRect().top + (move.staticState!.headTableEl?.clientHeight || 0);
       if (top < minTop) {
@@ -229,7 +234,7 @@ export function useTableDraggierRow(
 
       staticState.data!.cloneRowEl.style.top = `${top}px`;
       if (!!e) {
-        prevClientY = e.clientY;
+        prevClientY = clientY;
       }
 
       /*更细move index信息*/

package/src/packages/components/ThemePrimaryColors/index.ts

@@ -0,0 +1,5 @@
+import {ThemePrimaryColors} from "../PageThemeUtils";
+
+export default ThemePrimaryColors;
+
+export {ThemePrimaryColors};

package/src/packages/components/Tree/RenderTreeNode.tsx

@@ -35,6 +35,7 @@ export const RenderTreeNode = designComponent({
       {
         'tree-node-current': tree.state.current === props.treeNode.key,
         'tree-node-single-check': !props.multiple && props.treeNode.checkStatus() === CheckboxStatus.check,
+        'tree-node-multi-check': props.multiple && props.treeNode.checkStatus() === CheckboxStatus.check,
         'tree-node-disable-check': !props.treeNode.isCheckAble(),
       }
     ]);
@@ -124,7 +125,7 @@ export const RenderTreeNode = designComponent({
                 />
             }
           </div>
-          {tree.props.draggable && (
+          {tree.props.draggable && !tree.props.customDraggier && (
             <div
               className={classnames(['tree-node-draggier', { 'tree-node-draggier-disable': !tree.utils.isAllowDraggable(props.treeNode) }])}
               onMouseDown={handler.onMousedownDraggier.value}

package/src/packages/components/Tree/tree.scss

@@ -3,6 +3,7 @@
   align-items: center;
   line-height: 22px;
   padding-bottom: 1px;
+  position: relative;
 
   .tree-node-operator > div, .tree-node-content {
     transition: background-color linear 150ms, color linear 150ms;
@@ -88,19 +89,43 @@
   .tree-node-content {
     padding: 5px 8px;
     color: plv(text-2);
+  }
 
-    &:hover {
+  .tree-node-operator, .tree-node-content {
+    position: relative;
+    z-index: 2;
+  }
+
+  &:after {
+    position: absolute;
+    top: 1px;
+    bottom: 1px;
+    left: 0;
+    right: 0;
+    z-index: 1;
+    border-radius: plv(border-radius-normal);
+    content: '';
+    transition: background-color ease 0.3s;
+  }
+
+  &:hover:not(.tree-node-current):not(.tree-node-single-check) {
+    cursor: pointer;
+
+    &:after {
       background-color: plv(background-hover);
-      cursor: pointer;
+      content: '';
     }
   }
 
-  &.tree-node-current, &.tree-node-single-check {
-    .tree-node-content {
-      &, &:hover {
-        background-color: plv(primary-light-1);
-        color: plv(primary-6);
-      }
+  &.tree-node-current, &.tree-node-single-check, &.tree-node-multi-check {
+
+    .tree-node-operator, .tree-node-content {
+      color: plv(primary-6);
+    }
+
+    &:after {
+      background-color: plv(primary-light-1);
+      content: '';
     }
   }
 
@@ -216,6 +241,7 @@
 @include comp(tree-draggier-indicator) {
   position: fixed;
   pointer-events: none;
+  z-index: 10;
 
   &[data-available=true] {
     background-color: plv(primary-6);