自己改点适合项目

packages/components/tree/node.vue

@@ -12,7 +12,10 @@
                     {{ data.title }} - {{ level * 10 + 'px' }}
                 </div>
             </slot>
-            <div v-if="!opts.sort" :style="{ marginLeft: level * 10 + 'px' }" :class="[
+            <div v-if="!opts.sort" :style="{ marginLeft: level * 10 + 'px', backgroundColor: (dataSourceKey != data.key &&
+                        dataSourceKey != undefined &&
+                        !isChildOf(data.key, dataSourceKey, list) &&
+                        status!=undefined)?bg:'' }" :class="[
                 {
                     'ps-tree-drag-up':
                         dataSourceKey != data.key &&
@@ -32,11 +35,11 @@
                 },
             ]"></div>
         </div>
-        <div v-if="opts.sort && dda.parentKey.value == data.key" :style="{ marginLeft: level * 10 + 'px' }"
+        <div v-if="opts.sort && dda.parentKey.value == data.key" :style="{ marginLeft: level * 10 + 'px',backgroundColor: bg+' !important' }"
             class="ps-tree-drag-in"></div>
         <div class="ps-tree-sub-node" v-if="(opts.justOpen || data.isExpand) && data.children && data.children.length">
             <template v-for="(item, index) in sortedList" :key="item.key">
-                <node @onDragstart="(e: INiuTreeKey) => emit('onDragstart', e)"
+                <node :bg="bg" @onDragstart="(e: INiuTreeKey) => emit('onDragstart', e)"
                     @onDragend="(e: INiuTreeKey) => emit('onDragend', e)"
                     @onDrop="(e: INiuTreeKey, s?: ENiuTreeStatus) => emit('onDrop', e, s)"
                     @onDragover="(e: INiuTreeKey) => emit('onDragover', e)"
@@ -80,6 +83,7 @@ const sortedList = computed(() => {
 const props = withDefaults(
     defineProps<{
         data: INiuTreeData
+        bg: string
         list: INiuTreeData[]
         dataSourceKey?: INiuTreeKey
         level?: number

packages/components/tree/tree.vue

@@ -1,10 +1,10 @@
 <template>
-    <div class="ps-tree component" draggable="true" :class="{ aaa: isDrag }" @dragover.prevent="onDragover2"
+    <div class="ps-tree component" draggable="true" :style="{backgroundColor: isDrag?bg:''}" @dragover.prevent="onDragover2"
         @dragleave.stop="onDragleave2" @drop.stop="onDrop2">
         <template v-for="(item, index) in sortedList" :key="item.key">
             <node @onDragstart="onDragstart" @expand="onExpand" @onDragEnd="onDragEnd" @onDrop="onDrop"
                 :data-source-key="dataSourceKey" :data="item" :list="sortedList" :level="level"
-                @click="(item) => clickNode(item)">
+                @click="(item) => clickNode(item)" :bg="bg">
                 <template
                     #default="{ data, deep, dataSourceKey, status }: { data: INiuTreeData, deep: number, dataSourceKey: INiuTreeKey, status: ENiuTreeStatus }">
                     <slot :data="data" :deep="deep" :dataSourceKey="dataSourceKey" :status="status"></slot>
@@ -69,6 +69,7 @@ const props = withDefaults(
     defineProps<{
         list: INiuTreeData[]
         justOpen?: boolean
+        bg?: string
         autoExpand?: boolean
         justOpenOne?: boolean
         sort?: boolean
@@ -81,6 +82,7 @@ const props = withDefaults(
         autoExpand: false,
         sort: false,
         level: 0,
+        bg: '#cdcdcd6b',
     }
 )
 const slot = useSlots()

packages/playground/src/dev/tree.vue

@@ -107,7 +107,7 @@ const dropFn = (status: ENiuTreeStatus, data: INiuTreeData<any>, list: INiuTreeD
     <button @click="add"> add file </button>
     <button @click="addF"> add folder </button>
     <Panel name="Tree" desc="延迟2000ms执行操作">
-        <ps-tree sort @expand="onExpand" :list="list2" auto-expand>
+        <ps-tree bg="#cdcdcd6b" sort @expand="onExpand" :list="list2" auto-expand>
             <template #default="{ data, deep }">
                 <div :style="{
                     marginLeft: deep * 10 + 'px',

packages/theme-chalk/src/tree.scss

@@ -2,14 +2,13 @@
 .ps-tree.component{
     height: 100%;
     position: relative;
-    &.aaa{
-        background-color: $primary-color !important;
-    }
 }
 .ps-tree-node.component {
     position: relative;
     &.draging {
-        opacity: 0.6;
+        position: relative;
+        opacity: .6;
+        z-index: 10;
     }
 
     .ps-tree-node-wrapper {