fix: centered 为 true 时设置 draggable 无法拖拽 (#6948)

Co-authored-by: sqchen <chenshiqi@sshlx.com>

Author: Elm1992

packages/@core/ui-kit/popup-ui/src/modal/modal.vue

@@ -104,6 +104,10 @@ const shouldDraggable = computed(
   () => draggable.value && !shouldFullscreen.value && header.value,
 );
 
+const shouldCentered = computed(
+  () => centered.value && !shouldFullscreen.value,
+);
+
 const getAppendTo = computed(() => {
   return appendToMain.value
     ? `#${ELEMENT_ID_MAIN_CONTENT}>div:not(.absolute)>div`
@@ -115,6 +119,7 @@ const { dragging, transform } = useModalDraggable(
   headerRef,
   shouldDraggable,
   getAppendTo,
+  shouldCentered,
 );
 
 const firstOpened = ref(false);
@@ -132,7 +137,9 @@ watch(
       dialogRef.value = innerContentRef.$el;
       // reopen modal reassign value
       const { offsetX, offsetY } = transform;
-      dialogRef.value.style.transform = `translate(${offsetX}px, ${offsetY}px)`;
+      dialogRef.value.style.transform = shouldCentered.value
+        ? `translate(${offsetX}px, calc(-50% + ${offsetY}px))`
+        : `translate(${offsetX}px, ${offsetY}px)`;
     }
   },
   { immediate: true },
@@ -239,7 +246,7 @@ function handleClosed() {
             'shadow-3xl': !bordered,
             'left-0 top-0 size-full max-h-full !translate-x-0 !translate-y-0':
               shouldFullscreen,
-            'top-1/2 !-translate-y-1/2': centered && !shouldFullscreen,
+            'top-1/2': centered && !shouldFullscreen,
             'duration-300': !dragging,
             hidden: isClosed,
           },

packages/@core/ui-kit/popup-ui/src/modal/use-modal-draggable.ts

@@ -14,6 +14,7 @@ export function useModalDraggable(
   dragRef: Ref<HTMLElement | undefined>,
   draggable: ComputedRef<boolean>,
   containerSelector?: ComputedRef<string | undefined>,
+  centered?: ComputedRef<boolean>,
 ) {
   const transform = reactive({
     offsetX: 0,
@@ -73,7 +74,10 @@ export function useModalDraggable(
       transform.offsetY = moveY;
 
       if (targetRef.value) {
-        targetRef.value.style.transform = `translate(${moveX}px, ${moveY}px)`;
+        const isCentered = centered?.value;
+        targetRef.value.style.transform = isCentered
+          ? `translate(${moveX}px, calc(-50% + ${moveY}px))`
+          : `translate(${moveX}px, ${moveY}px)`;
         dragging.value = true;
       }
     };
@@ -108,7 +112,7 @@ export function useModalDraggable(
 
     const target = unrefElement(targetRef);
     if (target) {
-      target.style.transform = 'none';
+      target.style.transform = '';
     }
   };