拖拽组件添加可变宽高配置（鼠标放置左边和上方移动改变弹框大小）

src/components/common/DraggableDialog.vue

@@ -48,18 +48,30 @@
       <q-scroll-area
         v-if="props.height"
         id="draggable-dialog-scroll"
-        :style="`width: ${props.width}px;height: ${props.height}px`"
+        :style="`width: ${dialogWidth}px;height: ${dialogHeight}px`"
         style="max-height: calc(90vh - 100px)"
       >
         <slot></slot>
       </q-scroll-area>
       <slot name="footer"></slot>
       <div
-        :style="`width: ${props.width}px`"
+        :style="`width: ${dialogWidth}px`"
         style="position: sticky; bottom: 0px"
       >
         <slot name="sticky-footer"></slot>
       </div>
+      <resizable-div-width
+        v-if="resizableWidth"
+        :height="dialogHeight - 10"
+        @drapWidth="drapWidth"
+        @drapMouseUp="drapMouseUp"
+      />
+      <resizable-div-height
+        v-if="resizableHeight"
+        :width="dialogWidth - 10"
+        @drapHeight="drapHeight"
+        @drapMouseUp="drapMouseUp"
+      />
     </q-card>
   </q-dialog>
 </template>
@@ -67,6 +79,8 @@
 <script setup lang="ts">
 import { QBar, useDialogPluginComponent } from 'quasar';
 import { ref, onMounted, onUnmounted, reactive } from 'vue';
+import ResizableDivWidth from './ResizableDivWidth.vue';
+import ResizableDivHeight from './ResizableDivHeight.vue';
 
 const emit = defineEmits({
   ...useDialogPluginComponent.emitsObject,
@@ -84,6 +98,8 @@ const props = withDefaults(
     height?: number;
     bgColor?: string;
     bgBorder?: string;
+    resizableWidth?: boolean;
+    resizableHeight?: boolean;
   }>(),
   {
     width: 500,
@@ -92,6 +108,8 @@ const props = withDefaults(
     titleHeight: 36,
     fontSize: 20,
     fontColor: 'white',
+    resizableWidth: false,
+    resizableHeight: false,
   }
 );
 
@@ -109,6 +127,10 @@ const start = { x: 0, y: 0 };
 const startOffset = { x: 0, y: 0 };
 
 onMounted(() => {
+  dialogWidth.value = props.width;
+  lastDialogWidth = props.width;
+  dialogHeight.value = props.height;
+  lastDialogHeight = props.height;
   window.addEventListener('mousedown', onMouseDown);
 });
 
@@ -142,4 +164,31 @@ function onHide() {
   emit('hide');
   onDialogHide();
 }
+
+let lastDialogWidth = 0;
+const dialogWidth = ref(0);
+function drapWidth(width: number) {
+  if (
+    (dialogWidth.value > 300 && width > 0) ||
+    (dialogWidth.value < 1800 && width < 0)
+  ) {
+    dialogWidth.value = lastDialogWidth - width * 2 + 15;
+  }
+}
+
+let lastDialogHeight = 0;
+const dialogHeight = ref(0);
+function drapHeight(height: number) {
+  if (
+    (dialogHeight.value > 150 && height > 0) ||
+    (dialogHeight.value < 750 && height < 0)
+  ) {
+    dialogHeight.value = lastDialogHeight - height * 2 + 15;
+  }
+}
+
+function drapMouseUp() {
+  lastDialogWidth = dialogWidth.value;
+  lastDialogHeight = dialogHeight.value;
+}
 </script>

src/components/common/ResizableDivHeight.vue

@@ -0,0 +1,61 @@
+<template>
+  <div
+    ref="drapBox"
+    class="drapWidth"
+    :style="{
+      width: props.width + 'px',
+      height: props.height + 'px',
+    }"
+    @mousedown.stop="onMouseDown"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+
+const props = withDefaults(
+  defineProps<{
+    width?: number;
+    height?: number;
+  }>(),
+  {
+    width: 300,
+    height: 15,
+  }
+);
+
+const drapBox = ref();
+onMounted(() => {
+  drapBox.value.onmousedown = () => {
+    return false;
+  };
+});
+const emit = defineEmits(['drapHeight', 'drapMouseUp']);
+function onMouseDown(e: MouseEvent) {
+  drapBox.value.onmousedown = () => {
+    return false;
+  };
+  if (!e.target) return;
+  const disY = e.clientY - drapBox.value.offsetTop;
+  document.onmousemove = (e) => {
+    let top = e.clientY - disY;
+    emit('drapHeight', top);
+  };
+  document.onmouseup = () => {
+    emit('drapMouseUp');
+    document.onmousemove = null;
+    document.onmouseup = null;
+  };
+}
+</script>
+
+<style scoped>
+.drapWidth {
+  position: absolute;
+  top: 0;
+  z-index: 9999;
+  background: red;
+  opacity: 0;
+  cursor: n-resize;
+}
+</style>

src/components/common/ResizableDivWidth.vue

@@ -0,0 +1,61 @@
+<template>
+  <div
+    ref="drapBox"
+    class="drapWidth"
+    :style="{
+      width: props.width + 'px',
+      height: props.height + 'px',
+    }"
+    @mousedown.stop="onMouseDown"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+
+const props = withDefaults(
+  defineProps<{
+    width?: number;
+    height?: number;
+  }>(),
+  {
+    width: 15,
+    height: 500,
+  }
+);
+
+const drapBox = ref();
+onMounted(() => {
+  drapBox.value.onmousedown = () => {
+    return false;
+  };
+});
+const emit = defineEmits(['drapWidth', 'drapMouseUp']);
+function onMouseDown(e: MouseEvent) {
+  drapBox.value.onmousedown = () => {
+    return false;
+  };
+  if (!e.target) return;
+  const disX = e.clientX - drapBox.value.offsetLeft;
+  document.onmousemove = (e) => {
+    let left = e.clientX - disX;
+    emit('drapWidth', left);
+  };
+  document.onmouseup = () => {
+    emit('drapMouseUp');
+    document.onmousemove = null;
+    document.onmouseup = null;
+  };
+}
+</script>
+
+<style scoped>
+.drapWidth {
+  position: absolute;
+  top: 0;
+  z-index: 9999;
+  background: red;
+  opacity: 0;
+  cursor: e-resize;
+}
+</style>

src/components/draw-app/dialogs/CiCjList.vue

@@ -1,5 +1,12 @@
 <template>
-  <draggable-dialog seamless title="采集列表" :width="865" :height="485">
+  <draggable-dialog
+    seamless
+    title="采集列表"
+    :width="865"
+    :height="485"
+    resizableWidth
+    resizableHeight
+  >
     <div class="row no-wrap" v-for="row in showSetCellMessage.rows" :key="row">
       <div
         class="ceil"

src/components/draw-app/dialogs/CiQdList.vue

@@ -1,5 +1,12 @@
 <template>
-  <draggable-dialog seamless title="驱动列表" :width="865" :height="485">
+  <draggable-dialog
+    seamless
+    title="驱动列表"
+    :width="865"
+    :height="485"
+    resizableWidth
+    resizableHeight
+  >
     <div class="row no-wrap" v-for="row in showSetCellMessage.rows" :key="row">
       <div
         class="ceil"