Web 端数据交互与 design2 布局修复

统一门户 JSON 契约：新增 GET /templates/{id}，模板/云文件/保存/打开走虚拟 key；
layer 保存弹层替代 prompt，本地 .soon 已登录后台 POST 登记；修复保存静默失败与 design2 全宽布局。

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend-web/js/design2/core.js

@@ -2,15 +2,40 @@
 // 注意：此代码在layui.use回调函数内部执行
 // 全局变量已在主入口文件中定义，这里只需要初始化
 
-$('#canvas1').attr('height', document.body.clientHeight - 100)
-$('#canvas2').attr('height', document.body.clientHeight - 100)
-$('#object_attribute').css('height', '470px')
-$('#obj_list').css('height', document.body.clientHeight - 520)
-$('.obj_list').css('height', $('#obj_list').height() - 32)
+function soonDesign2MainHeight() {
+    var main = document.querySelector('.layui-fluid.main');
+    if (main && main.clientHeight > 40) return main.clientHeight;
+    var tb = document.getElementById('portal-topbar');
+    return Math.max(480, window.innerHeight - (tb ? tb.offsetHeight : 0));
+}
 
-$('.main').show()
-$('#canvas1').attr('width', $('#canvas-div').width())
-$('#canvas2').attr('width', $('#canvas-div').width())
+function soonDesign2CanvasWidth() {
+    var w = $('#canvas-div').width();
+    if (w > 0) return w;
+    w = $('.col-left').width();
+    if (w > 0) return Math.max(320, w - 70);
+    return Math.max(320, window.innerWidth - 390);
+}
+
+function layoutDesign2Shell() {
+    var isWeb = !!(window.SOON_DEPLOY_CONFIG);
+    var mainH = soonDesign2MainHeight();
+    var canvasW = soonDesign2CanvasWidth();
+    var canvasH = isWeb ? Math.max(400, mainH - 130) : (document.body.clientHeight - 100);
+    $('#canvas1').attr('width', canvasW).attr('height', canvasH);
+    $('#canvas2').attr('width', canvasW).attr('height', canvasH);
+    if (!isWeb) {
+        $('#object_attribute').css('height', '470px');
+        $('#obj_list').css('height', Math.max(120, mainH - 520));
+        $('.obj_list').css('height', Math.max(80, $('#obj_list').height() - 32));
+    }
+    return { canvasW: canvasW, canvasH: canvasH };
+}
+
+var mainEl = document.querySelector('.layui-fluid.main');
+if (mainEl) mainEl.style.display = 'flex';
+else $('.main').show();
+var _design2Layout = layoutDesign2Shell();
 
 // 初始化Canvas对象
 // 优化性能：在创建 Fabric Canvas 之前，先设置 canvas context 的 willReadFrequently
@@ -42,11 +67,19 @@ is_bgi_add = false
 window.ctx1 = ctx1;
 window.ctx2 = ctx2;
 window.is_bgi_add = is_bgi_add;
-canvas1.zoomToPoint(new fabric.Point(canvas1.width / 2, canvas1.height / 2), $('#canvas-div').width() / 1200 > 1 ? 1 : $('#canvas-div').width() / 1200)
-//console.log(canvas1.width / 2, canvas1.height / 2);
-//console.log($("#canvas-div").width() / 1200 > 1 ? 1 : $("#canvas-div").width() / 1200);
-canvas2.zoomToPoint(new fabric.Point(canvas2.width / 2, canvas2.height / 2), $('#canvas-div').width() / 1200 > 1 ? 1 : $('#canvas-div').width() / 1200)
-zoom = $('#canvas-div').width() / 1200 > 1 ? 1 : $('#canvas-div').width() / 1200
+canvas1.zoomToPoint(new fabric.Point(canvas1.width / 2, canvas1.height / 2), (function () {
+    var divW = $('#canvas-div').width() || _design2Layout.canvasW || 800;
+    return divW / 1200 > 1 ? 1 : divW / 1200;
+})())
+canvas2.zoomToPoint(new fabric.Point(canvas2.width / 2, canvas2.height / 2), (function () {
+    var divW = $('#canvas-div').width() || _design2Layout.canvasW || 800;
+    return divW / 1200 > 1 ? 1 : divW / 1200;
+})())
+zoom = (function () {
+    var divW = $('#canvas-div').width() || _design2Layout.canvasW || 800;
+    var z = divW / 1200 > 1 ? 1 : divW / 1200;
+    return z > 0 ? z : 0.5;
+})()
 
 // 初始化标尺
 function initRulers() {
@@ -486,6 +519,26 @@ function initRulers() {
 
 }
 initRulers();
+if (window.SOON_DEPLOY_CONFIG && ($('#canvas-div').width() || 0) < 100) {
+    requestAnimationFrame(function () {
+        requestAnimationFrame(function () {
+            var layout = layoutDesign2Shell();
+            var divW = layout.canvasW;
+            zoom = divW / 1200 > 1 ? 1 : divW / 1200;
+            if (zoom <= 0) zoom = 0.5;
+            canvas1.setWidth(layout.canvasW);
+            canvas1.setHeight(layout.canvasH);
+            canvas2.setWidth(layout.canvasW);
+            canvas2.setHeight(layout.canvasH);
+            canvas1.zoomToPoint(new fabric.Point(canvas1.width / 2, canvas1.height / 2), zoom);
+            canvas2.zoomToPoint(new fabric.Point(canvas2.width / 2, canvas2.height / 2), zoom);
+            window.zoom = zoom;
+            canvas1.renderAll();
+            canvas2.renderAll();
+            initRulers();
+        });
+    });
+}
 $('#source_front').width(zoom * $('#source_front').width())
 $('#source_back').width(zoom * $('#source_back').width())
 $('.canvas-container:eq(1)').hide()
@@ -1629,28 +1682,14 @@ function addBackground() {
                 recordObjs2.push(JSON.stringify(objs2))
                 recordJson2.push(canvas2.toJSON(TO_JSON_PROPERTIES))
 
-                let file = GetFile().get('file');
-                if (!file && typeof sessionStorage !== 'undefined') {
-                    try {
-                        file = sessionStorage.getItem('soondesign_open_file');
-                        if (file) {
-                            sessionStorage.removeItem('soondesign_open_file');
-                            sessionStorage.removeItem('soondesign_open_type');
-                        }
-                    } catch (e) {}
-                }
+                var file = typeof window.soonResolveOpenFileKey === 'function'
+                    ? window.soonResolveOpenFileKey(GetFile)
+                    : (GetFile().get('file') || '');
                 if (file && file != 'empty') {
-                    if (file.indexOf('soondesign_file:') === 0 && typeof sessionStorage !== 'undefined') {
-                        try {
-                            var metaRaw = sessionStorage.getItem('soondesign_open_meta');
-                            if (metaRaw) {
-                                window._soonFileMeta = JSON.parse(metaRaw);
-                                sessionStorage.removeItem('soondesign_open_meta');
-                            }
-                        } catch (e) {}
+                    if (typeof window.soonConsumeOpenMeta === 'function') {
+                        window.soonConsumeOpenMeta(file);
                     }
-                    var p = window.openFile(file);
-                    if (p && p.then) p.then(function() {}, function() {});
+                    window.openFile(file);
                 }
             })
         })
@@ -2048,7 +2087,7 @@ if (typeof ipcRenderer !== 'undefined' && ipcRenderer) {
 }
 function onCloseConfirm() {
     layer.confirm(
-        '<font style="color:black">' + language_str('whetherSave') + '</font>',
+        language_str('whetherSave'),
         {
             btn: [language_str('save'), language_str('noSave'), language_str('cancel')],
             btn3: function (index, layero) { }

frontend-web/js/design2/output.js

@@ -333,6 +333,7 @@ window.display_func = function display_func(img1, img2, img3) {
 
     layer.open({
         type: 1,
+        skin: 'soon-layer',
         area: [w, h],
         title: language_str('display'), //不显示标题栏"预览"
         shadeClose: true, //点击遮罩关闭
@@ -1087,6 +1088,9 @@ function cloudSaveSuccessLabel(res, fallback) {
 
 function onCloudWriteDone(res, fallback, callback) {
   applyCloudWriteResult(res, fallback);
+  if (res && res.fileKey && typeof window.soonClearPendingImport === 'function') {
+    window.soonClearPendingImport();
+  }
   layer.msg(language_str('saveSucc') + cloudSaveSuccessLabel(res, fallback));
   if (callback && typeof callback === 'function') callback();
 }
@@ -1095,6 +1099,15 @@ function guardWebSave() {
   return typeof window.soonGuardCloudSave === 'function' ? window.soonGuardCloudSave() : true;
 }
 
+function reportSaveError(err) {
+  if (err && err.status) return;
+  if (typeof window.soonShowApiError === 'function') {
+    window.soonShowApiError({ status: err && err.status, message: (err && err.message) || '保存失败' });
+  } else if (typeof window.soonToast === 'function') {
+    window.soonToast('保存失败', 'error');
+  }
+}
+
 function saveAs(op1, callback) {
     // 临时移除辅助线，保存后再恢复
     let guideLines1 = []
@@ -1143,7 +1156,7 @@ function saveAs(op1, callback) {
             if (window.platformBridge && window.platformBridge.writeFile) {
                 window.platformBridge.writeFile(fp, content).then(function (res) {
                     onCloudWriteDone(res, fp, callback);
-                }).catch(function () {});
+                }).catch(reportSaveError);
                 return;
             }
             var fs = typeof require !== 'undefined' ? require('fs') : null;
@@ -1155,7 +1168,7 @@ function saveAs(op1, callback) {
                 if (callback && typeof callback === 'function') callback();
             }
         })
-        .catch(function(err) {});
+        .catch(reportSaveError);
 }
 
 function save(op1, callback) {
@@ -1198,7 +1211,7 @@ function save(op1, callback) {
         if (window.platformBridge && window.platformBridge.writeFile) {
             window.platformBridge.writeFile(openAs.name, content).then(function (res) {
                 onCloudWriteDone(res, openAs.name, callback);
-            }).catch(function () {});
+            }).catch(reportSaveError);
             return;
         }
         var fs = typeof require !== 'undefined' ? require('fs') : null;
@@ -1222,7 +1235,7 @@ function save(op1, callback) {
             if (window.platformBridge && window.platformBridge.writeFile) {
                 window.platformBridge.writeFile(fp, content).then(function (res) {
                     onCloudWriteDone(res, fp, callback);
-                }).catch(function () {});
+                }).catch(reportSaveError);
                 return;
             }
             var fs = typeof require !== 'undefined' ? require('fs') : null;
@@ -1234,7 +1247,7 @@ function save(op1, callback) {
                 if (callback && typeof callback === 'function') callback();
             }
         })
-        .catch(function(err) {});
+        .catch(reportSaveError);
 }
 
 window.saveHistory = function saveHistory() {
@@ -1287,7 +1300,10 @@ window.openFile = function open(file, jAlready) {
     if (!file) return;
     if (typeof window.soonBindFileMeta === 'function') window.soonBindFileMeta(file);
     function doOpenWithJson(j) {
-        if (!j || !background_image) return;
+        if (!j || !background_image) {
+            if (typeof window.soonReportOpenLoadError === 'function') window.soonReportOpenLoadError('模板/文件加载失败');
+            return;
+        }
         openAs.name = file;
         var left = background_image.left
     let top = background_image.top
@@ -1438,6 +1454,7 @@ window.openFile = function open(file, jAlready) {
             recordJson = recordJson2
             step = step2
         }
+        if (typeof window.soonTryConsumeCloudImport === 'function') window.soonTryConsumeCloudImport(file);
     }
 
     canvas1.loadFromJSON(j.f, function () {
@@ -1482,7 +1499,11 @@ window.openFile = function open(file, jAlready) {
             if (j) {
                 doOpenWithJson(j);
                 openAs.name = file;
+            } else if (typeof window.soonReportOpenLoadError === 'function') {
+                window.soonReportOpenLoadError('模板/文件加载失败');
             }
+        }).catch(function () {
+            if (typeof window.soonReportOpenLoadError === 'function') window.soonReportOpenLoadError('模板/文件加载失败');
         });
     }
     try {

frontend-web/js/design2/ui.js

@@ -1299,7 +1299,7 @@ $('#open').click(function () {
         return;
     }
     layer.confirm(
-        '<font style="color:black">' + language_str('whetherSave') + '</font>',
+        language_str('whetherSave'),
         function (index) {
             if (typeof window.output === 'function') {
                 window.output(OpenDialog);
@@ -1326,18 +1326,14 @@ $('#open').click(function () {
                     if (typeof window.openFile === 'function') window.openFile(fileKey, j);
                 }
                 function importAndOpen(j, fileName) {
-                    var tok = typeof window.soonGetAccessToken === 'function'
-                        ? window.soonGetAccessToken()
-                        : (localStorage.getItem('soon_access') || '');
-                    if (!tok && typeof window.soonPutSoonSession === 'function') {
+                    if (typeof window.soonPutSoonSession === 'function') {
                         var localKey = window.soonPutSoonSession(j, fileName || 'design.soon');
-                        if (localKey) openWithKey(localKey, j);
-                        return;
+                        if (!localKey) return;
+                        if (typeof window.soonScheduleCloudImport === 'function') {
+                            window.soonScheduleCloudImport(localKey, fileName || 'design.soon');
+                        }
+                        openWithKey(localKey, j);
                     }
-                    if (!window.platformBridge || !window.platformBridge.importSoonFile) return;
-                    window.platformBridge.importSoonFile(fileName || 'design.soon', j).then(function(res) {
-                        if (res && res.fileKey) openWithKey(res.fileKey, j);
-                    }).catch(function () {});
                 }
                 if (file && file.text) {
                     file.text().then(function(t) {
@@ -1364,7 +1360,7 @@ $('#new').click(function () {
         return;
     }
     layer.confirm(
-        '<font style="color:black">' + language_str('whetherSave') + '</font>',
+        language_str('whetherSave'),
         function (index) {
             if (typeof window.output === 'function') {
                 window.output(goFirstPage);