update

src/assets/styles/prosemirror.scss

@@ -20,9 +20,12 @@
     font-size: 0;
     padding: 0;
   }
-  p:first-child {
+  p:first-child:has(br) {
+    font-size: 0;
+  }
+  p:first-child br {
     margin-top: 0;
-    // font-size: 0;
+    font-size: 0;
   }
 
   ul, ol, li {

src/hooks/useImport.ts

@@ -384,30 +384,42 @@ export default () => {
   }
 
   const calculateRotatedPosition = (
-    x: number,
-    y: number,
-    w: number,
-    h: number,
-    ox: number,
-    oy: number,
-    k: number,
+    x: number,        // 原外层容器左上角 X
+    y: number,        // 原外层容器左上角 Y
+    w: number,        // 原外层容器宽度
+    h: number,        // 原外层容器高度
+    ox: number,       // 子元素在原容器内左上角 X
+    oy: number,       // 子元素在原容器内左上角 Y
+    childW: number,   // 子元素宽度
+    childH: number,   // 子元素高度
+    k: number         // 顺时针旋转角度（度）
   ) => {
-    const radians = k * (Math.PI / 180)
+    const radians = k * (Math.PI / 180);
+    const cos = Math.cos(radians);
+    const sin = Math.sin(radians);
 
-    const containerCenterX = x + w / 2
-    const containerCenterY = y + h / 2
+    // 原容器中心点（全局坐标）
+    const containerCenterX = x + w / 2;
+    const containerCenterY = y + h / 2;
 
-    const relativeX = ox - w / 2
-    const relativeY = oy - h / 2
+    // 子元素中心相对于容器中心的偏移
+    const childCenterInContainerX = (ox + childW / 2) - w / 2;
+    const childCenterInContainerY = (oy + childH / 2) - h / 2;
 
-    const rotatedX = relativeX * Math.cos(radians) + relativeY * Math.sin(radians)
-    const rotatedY = -relativeX * Math.sin(radians) + relativeY * Math.cos(radians)
+    // 屏幕坐标系下的顺时针旋转
+    const rotatedOffsetX = childCenterInContainerX * cos - childCenterInContainerY * sin;
+    const rotatedOffsetY = childCenterInContainerX * sin + childCenterInContainerY * cos;
 
-    const graphicX = containerCenterX + rotatedX
-    const graphicY = containerCenterY + rotatedY
+    // 子元素中心的新全局坐标
+    const newCenterX = containerCenterX + rotatedOffsetX;
+    const newCenterY = containerCenterY + rotatedOffsetY;
 
-    return { x: graphicX, y: graphicY }
-  }
+    // 反推新左上角
+    return {
+      x: newCenterX - childW / 2,
+      y: newCenterY - childH / 2
+    };
+  };
 
   /**
    * 将 base64 字符串或 Blob 转换为 File 对象
@@ -1694,7 +1706,7 @@ export default () => {
 
       // 收集当前幻灯片内所有上传任务
       const uploadTasks: Promise<void>[] = []
-      
+
       // 遍历每一张幻灯片
       for (const item of json.slides) {
         let type = "", value = "";
@@ -2265,13 +2277,13 @@ export default () => {
             else if (el.type === 'group') {
               // 先将子元素坐标转换到画布绝对坐标
               let elements: BaseElement[] = el.elements.map((_el: any) => {
-                let left = _el.left + originLeft
-                let top = _el.top + originTop
+                let left = _el.left + originLeft;
+                let top = _el.top + originTop;
 
                 if (el.rotate) {
                   const { x, y } = calculateRotatedPosition(
                     originLeft, originTop, originWidth, originHeight,
-                    _el.left, _el.top, el.rotate
+                    _el.left, _el.top, _el.width, _el.height, el.rotate
                   )
                   left = x
                   top = y
@@ -2284,6 +2296,7 @@ export default () => {
                 }
                 if (el.isFlipH && 'isFlipH' in element) element.isFlipH = true
                 if (el.isFlipV && 'isFlipV' in element) element.isFlipV = true
+                if (el.rotate) element.rotate = (_el.rotate || 0) + el.rotate;
 
                 return element
               })