fix(web): 本地优先保存与 design 页体验修复

- 保存先写本地缓存，登录后可选云端同步；退出登录不再因文件操作跳转登录

- 修复 Layui 遮罩残留、design2 保存后线条、toast 被 finally 提前关闭

- 保存过程恢复 loading spinner；成功提示 2.5 秒

- 云端 payload 瘦身与体积超限提示；后端 schema 迁移与 FileService 容错

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

frontend-web/js/common/soon-toast.js

@@ -1,14 +1,81 @@
 (function () {
   'use strict';
 
+  function soonCleanupLayerMask() {
+    if (typeof layer !== 'undefined' && layer.closeAll) {
+      layer.closeAll('loading');
+    }
+    if (window._soonOpenLoadIdx != null && typeof layer !== 'undefined' && layer.close) {
+      try { layer.close(window._soonOpenLoadIdx); } catch (e) { /* ignore */ }
+      window._soonOpenLoadIdx = null;
+    }
+    if (typeof document === 'undefined') return;
+    var layers = document.querySelectorAll('.layui-layer');
+    for (var j = 0; j < layers.length; j++) {
+      if (layers[j].getAttribute('type') !== 'loading') continue;
+      var loadTimes = layers[j].getAttribute('times');
+      if (loadTimes && typeof layer !== 'undefined' && layer.close) {
+        try { layer.close(loadTimes); } catch (e2) { /* ignore */ }
+      }
+    }
+    var shades = document.querySelectorAll('.layui-layer-shade');
+    for (var i = shades.length - 1; i >= 0; i--) {
+      var shade = shades[i];
+      var times = shade.getAttribute('times');
+      var layerEl = times ? document.getElementById('layui-layer' + times) : null;
+      if (!layerEl || layerEl.getAttribute('type') === 'loading') {
+        if (shade.parentNode) shade.parentNode.removeChild(shade);
+      }
+    }
+  }
+
+  function soonLayerDismiss(type) {
+    if (typeof layer !== 'undefined' && layer.closeAll) {
+      layer.closeAll(type);
+    }
+    soonCleanupLayerMask();
+  }
+
+  function soonClearFabricOverlay(canvas) {
+    if (!canvas || !canvas.contextTop) return;
+    if (typeof canvas.clearContext === 'function') {
+      canvas.clearContext(canvas.contextTop);
+    }
+  }
+
+  function soonRefreshDesignCanvases() {
+    var names = ['canvas1', 'canvas2', 'canvas'];
+    for (var n = 0; n < names.length; n++) {
+      var c = window[names[n]];
+      if (!c || typeof c.renderAll !== 'function') continue;
+      if (c.discardActiveObject) c.discardActiveObject();
+      soonClearFabricOverlay(c);
+      if (c.requestRenderAll) c.requestRenderAll();
+      else c.renderAll();
+    }
+  }
+
+  function soonFinishSaveUi() {
+    if (typeof window.soonHideOpenFileLoading === 'function') window.soonHideOpenFileLoading();
+    else soonCleanupLayerMask();
+    soonRefreshDesignCanvases();
+    if (typeof requestAnimationFrame === 'function') {
+      requestAnimationFrame(function () {
+        soonCleanupLayerMask();
+        soonRefreshDesignCanvases();
+      });
+    }
+  }
+
   function soonToast(message, type) {
     if (typeof layer === 'undefined' || !layer.msg) return;
     var skin = 'soon-toast';
     if (type === 'success') skin += ' soon-toast--success';
     else if (type === 'error') skin += ' soon-toast--error';
     else if (type === 'warn') skin += ' soon-toast--warn';
+    var time = type === 'success' ? 2500 : (type === 'error' ? 4200 : 3600);
     layer.msg(message, {
-      time: 2400,
+      time: time,
       shade: 0,
       offset: '72px',
       icon: -1,
@@ -16,5 +83,10 @@
     });
   }
 
+  window.soonCleanupLayerMask = soonCleanupLayerMask;
+  window.soonLayerDismiss = soonLayerDismiss;
+  window.soonClearFabricOverlay = soonClearFabricOverlay;
+  window.soonRefreshDesignCanvases = soonRefreshDesignCanvases;
+  window.soonFinishSaveUi = soonFinishSaveUi;
   window.soonToast = soonToast;
 })();