组件背景锁定比例不能拖动的问题

src/views/book/courseware/create/components/SetComponentBackground.vue

@@ -413,7 +413,7 @@ export default {
       // 锁定比例时跳过常规 resize 计算，直接用 applyLockedScaleResize 处理
       if (this.shouldLockScale(type)) {
         const prevImgData = { ...this.imgData };
-        this.applyLockedScaleResize(type, prevImgData);
+        this.applyLockedScaleResize(type, prevImgData, clientX - startX, clientY - startY);
         this.drag.startX = clientX;
         this.drag.startY = clientY;
         this.syncImageDisplayRect();
@@ -486,12 +486,23 @@ export default {
      * 在锁定比例的情况下调整尺寸，确保宽高比保持不变，并且不会超出边界
      * @param {string} type 拖动类型
      * @param {object} prevImgData 拖动前的图片数据，用于计算边界限制
+     * @param {number} widthDiff 本次鼠标水平位移量
+     * @param {number} heightDiff 本次鼠标垂直位移量
      */
-    applyLockedScaleResize(type, prevImgData) {
+    applyLockedScaleResize(type, prevImgData, widthDiff, heightDiff) {
       const ratio = this.drag.aspectRatio || 1;
       if (!ratio) return;
 
-      let width = type === 'top' || type === 'bottom' ? this.imgData.height * ratio : this.imgData.width;
+      // 根据鼠标移动量计算目标宽度（锁定比例时以宽度为基准推导高度）
+      let width = prevImgData.width;
+      if (type === 'top' || type === 'bottom') {
+        // 上下边拖拽：以高度变化为基准换算宽度
+        width = (prevImgData.height + (type === 'bottom' ? heightDiff : -heightDiff)) * ratio;
+      } else if (type.includes('right')) {
+        width += widthDiff;
+      } else if (type.includes('left')) {
+        width -= widthDiff;
+      }
       let height = width / ratio;
 
       // 根据拖动方向计算允许的最大宽高，确保在锁定比例时不会超出边界
@@ -681,7 +692,8 @@ export default {
           throw new Error('upload failed');
         }
 
-        this.file_url = file_info_list[0].file_url;
+        // 与上传逻辑保持一致，使用可展示的 file_url_open（file_url 为内部路径，直接赋给 img src 可能无法加载）
+        this.file_url = file_info_list[0].file_url_open;
         this.normalComputed(safeWidth, safeHeight);
         this.syncImageDisplayRect();
         this.cancelRectCrop();