feat: 添加控件树拖拽功能

src/renderer/src/views/designer/sidebar/Hierarchy.vue

@@ -19,11 +19,14 @@
     <el-tab-pane label="页面" name="page" class="w-full h-full">
       <!-- 页面层 -->
       <div class="h-full overflow-hidden" ref="pageBoxRef">
-        <el-tree-v2
+        <el-tree
           ref="pageTreeRef"
           style="max-width: 600px"
           default-expand-all
           node-key="id"
+          draggable
+          :allow-drag="allowDrag"
+          :allow-drop="allowDrop"
           :height="height || 100"
           :highlight-current="false"
           :default-expanded-keys="projectStore.activePageId ? [projectStore.activePageId] : []"
@@ -34,25 +37,24 @@
           <template #default="{ node, data }">
             <PageTreeItem :node="node" :data="data" />
           </template>
-        </el-tree-v2>
+        </el-tree>
       </div>
     </el-tab-pane>
   </el-tabs>
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { ref } from 'vue'
 
 import ScreenTreeItem from './components/ScreenTreeItem.vue'
 import PageTreeItem from './components/PageTreeItem.vue'
 import { useProjectStore } from '@/store/modules/project'
 import { useElementSize } from '@vueuse/core'
 
-import type { TreeV2Instance } from 'element-plus'
+import type { AllowDragFunction, AllowDropFunction } from 'element-plus'
 
 const projectStore = useProjectStore()
 const activeMenu = ref<string>('screen')
-const pageTreeRef = ref<TreeV2Instance>()
 const pageBoxRef = ref<HTMLDivElement>()
 
 const { height } = useElementSize(pageBoxRef, {
@@ -60,24 +62,6 @@ const { height } = useElementSize(pageBoxRef, {
   width: 100
 })
 
-// 更新控件树
-watch(
-  () => projectStore.activePage?.children,
-  (arr) => {
-    if (arr) pageTreeRef.value?.setData([projectStore.activePage!])
-  },
-  {
-    deep: true
-  }
-)
-
-watch(
-  () => projectStore.activeWidgets,
-  (arr) => {
-    if (arr.length) pageTreeRef.value?.scrollToNode(arr[0].id)
-  }
-)
-
 const handlePageNodeClick = (node: any) => {
   if (node.type === 'page') {
     projectStore.activePageId = node.id
@@ -109,4 +93,15 @@ const handleWidgetNodeClick = (nodeData, node, e) => {
     }
   }
 }
+
+const allowDrag: AllowDragFunction = (node) => {
+  // 禁用拖拽的节点
+  const notallow = ['page']
+
+  return !notallow.includes(node.data?.type)
+}
+
+const allowDrop: AllowDropFunction = (_dragNode, dropNode) => {
+  return dropNode.data?.children
+}
 </script>