按住拖动滚动条

src/hooks/useDraggableScroll.ts

@@ -0,0 +1,44 @@
+import { ref, onMounted, onBeforeUnmount, type Ref } from 'vue'
+
+export function useDraggableScroll(containerRef: Ref<HTMLElement | null>) {
+  const isDragging = ref(false);
+  let startX: number, startY: number;
+  let scrollLeft: number, scrollTop: number;
+
+  const onMouseDown = (e: MouseEvent) => {
+    if (!containerRef.value) return;
+    isDragging.value = true;
+    startX = e.pageX;
+    startY = e.pageY;
+    scrollLeft = containerRef.value.scrollLeft;
+    scrollTop = containerRef.value.scrollTop;
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', onMouseUp);
+  };
+
+  const onMouseMove = (e: MouseEvent) => {
+    if (!isDragging.value || !containerRef.value) return;
+    const deltaX = e.pageX - startX;
+    const deltaY = e.pageY - startY;
+    containerRef.value.scrollLeft = scrollLeft - deltaX;
+    containerRef.value.scrollTop = scrollTop - deltaY;
+  };
+
+  const onMouseUp = () => {
+    isDragging.value = false;
+    document.removeEventListener('mousemove', onMouseMove);
+    document.removeEventListener('mouseup', onMouseUp);
+  };
+
+  onMounted(() => {
+    containerRef.value?.addEventListener('mousedown', onMouseDown);
+  });
+
+  onBeforeUnmount(() => {
+    containerRef.value?.removeEventListener('mousedown', onMouseDown);
+  });
+
+  return {
+    isDragging,
+  };
+}

src/views/flowDesign/index.vue

@@ -13,6 +13,7 @@ import type {
 } from './nodes/type'
 import type { FilterRules } from '@/components/AdvancedFilter/type'
 import type { Field } from '@/components/Render/type'
+import { useDraggableScroll } from '@/hooks/useDraggableScroll'
 
 const props = withDefaults(
   defineProps<{
@@ -54,6 +55,9 @@ const activeData = ref<FlowNode>({
 })
 const penalVisible = ref(false)
 const nodesError = ref<Recordable<ErrorInfo[]>>({})
+
+const designerContainerRef = ref<HTMLElement | null>(null)
+useDraggableScroll(designerContainerRef);
 provide('flowDesign', {
   readOnly: readOnly,
   fields: flatFields,
@@ -315,7 +319,7 @@ defineExpose({
 </script>
 
 <template>
-  <div class="designer-container">
+  <div class="designer-container cursor-default active:cursor-grabbing" ref="designerContainerRef">
     <div class="tool">
       <slot></slot>
     </div>
@@ -330,7 +334,7 @@ defineExpose({
       </el-tooltip>
     </div>
     <!--流程树-->
-    <div class="node-container">
+    <div class="node-container" >
       <TreeNode :node="process" @addNode="addNode" @delNode="delNode" @activeNode="openPenal" />
     </div>
     <!--属性面板-->
@@ -344,8 +348,8 @@ defineExpose({
   position: relative;
   display: flex;
   flex-direction: row;
-  min-height: 100%;
+  height: 100%;
-  min-width: 100%;
+  width: 100%;
   overflow: auto;
   background-color: var(--flow-bg-color);
 
@@ -376,7 +380,6 @@ defineExpose({
     display: flex;
     align-items: center;
     flex-direction: column;
-    padding-top: 50px;
   }
 }
 </style>

src/views/flowDesign/nodes/EndNode.vue

@@ -36,6 +36,7 @@ const activeNode = () => {
 <style scoped lang="scss">
 .node-box {
   position: relative;
+  padding-bottom: 50px;
 
   .end-node-circle {
     width: 10px;

src/views/flowDesign/nodes/StartNode.vue

@@ -35,6 +35,7 @@ watchEffect(() => {
 
 <style scoped lang="scss">
 .start-node {
+  padding-top: 50px;
   :deep(.node-box) {
     &:after {
       display: none;