--添加测试模块

src/components/ModalPanel/src/ModalPanel.vue

@@ -1,15 +1,34 @@
 <template>
   <a-modal
+    ref="modalRef"
     :visible="visible"
-    :title="title"
     :maskClosable="false"
     :width="hasLeftSlot ? 1200 : width || 600"
     :okText="t('确定')"
     :cancelText="t('取消')"
-    @ok="$emit('submit')"
-    @cancel="$emit('close')"
+    :confirmLoading="confirmLoading"
+    @ok="handleOk"
+    @cancel="handleCancel"
+    :getContainer="draggable ? undefined : 'body'"
+    :wrap-style="draggable ? { overflow: 'hidden' } : {}"
   >
     <slot name="header"></slot>
+    
+    <template #title>
+      <div 
+        ref="modalTitleRef" 
+        :style="{ width: '100%', cursor: draggable ? 'move' : 'default' }"
+      >
+        {{ title }}
+      </div>
+    </template>
+    
+    <template #modalRender="{ originVNode }">
+      <div :style="draggable ? transformStyle : {}">
+        <component :is="originVNode" />
+      </div>
+    </template>
+    
     <div class="content">
       <div :class="['left', isDeptSelect ? 'left-box' : '']" v-if="hasLeftSlot">
         <slot name="left"></slot>
@@ -21,19 +40,99 @@
   </a-modal>
 </template>
 <script setup lang="ts">
-  import { computed, useSlots } from 'vue';
+  import { computed, useSlots, ref, watch } from 'vue';
   import { useI18n } from '/@/hooks/web/useI18n';
+  import { useDraggable } from '@vueuse/core';
   const { t } = useI18n();
-  defineEmits(['submit', 'close']);
-  defineProps({
+  
+  const emit = defineEmits(['submit', 'close']);
+  const props = defineProps({
     title: String,
     width: Number,
     visible: { type: Boolean, default: false },
     isDeptSelect: { type: Boolean, default: false },
+    confirmLoading: { type: Boolean, default: false },
+    draggable: { type: Boolean, default: false }
   });
+  
+  const modalRef = ref(null);
+  const modalTitleRef = ref(null);
   const hasLeftSlot = computed(() => {
     return !!useSlots().left;
   });
+  
+  const startX = ref(0);
+  const startY = ref(0);
+  const startedDrag = ref(false);
+  const transformX = ref(0);
+  const transformY = ref(0);
+  const preTransformX = ref(0);
+  const preTransformY = ref(0);
+  const dragRect = ref({ left: 0, right: 0, top: 0, bottom: 0 });
+  
+  const { x, y, isDragging } = useDraggable(modalTitleRef, {
+    enabled: computed(() => props.draggable)
+  });
+  
+  const handleOk = () => {
+    emit('submit');
+  };
+  
+  const handleCancel = () => {
+    emit('close');
+  };
+  
+  watch([x, y], () => {
+    if (!props.draggable || !startedDrag.value) {
+      startX.value = x.value;
+      startY.value = y.value;
+      const bodyRect = document.body.getBoundingClientRect();
+      if (modalTitleRef.value) {
+        const titleRect = modalTitleRef.value.getBoundingClientRect();
+        dragRect.value.right = bodyRect.width - titleRect.width;
+        dragRect.value.bottom = bodyRect.height - titleRect.height;
+      }
+      preTransformX.value = transformX.value;
+      preTransformY.value = transformY.value;
+    }
+    startedDrag.value = true;
+  });
+  
+  // 监听拖拽状态变化
+  watch(isDragging, (newVal) => {
+    if (!newVal) {
+      startedDrag.value = false;
+    }
+  });
+  
+  watch(
+    () => props.visible,
+    (newVisible) => {
+      if (!newVisible) {
+        transformX.value = 0;
+        transformY.value = 0;
+      }
+    }
+  );
+  
+  const transformStyle = computed(() => {
+    if (!props.draggable) return {};
+    
+    if (startedDrag.value) {
+      transformX.value = 
+        preTransformX.value + 
+        Math.min(Math.max(dragRect.value.left, x.value), dragRect.value.right) - 
+        startX.value;
+      transformY.value = 
+        preTransformY.value + 
+        Math.min(Math.max(dragRect.value.top, y.value), dragRect.value.bottom) - 
+        startY.value;
+    }
+    
+    return {
+      transform: `translate(${transformX.value}px, ${transformY.value}px)`,
+    };
+  });
 </script>
 <style lang="less" scoped>
   .content {
@@ -49,6 +148,7 @@
 
     .right {
       flex: 1;
+      width: 100%;
     }
   }