Web 端本地缓存、首页与会员弹窗体验优化

新增 IndexedDB 与最近文件 L1 缓存、云保存/打开链路；首页支持下载与清空本地缓存；修复清空 storage 后语言初始化报错；优化 design2 背景加载与侧栏标签样式；完善会员激活/支付弹层样式；后端补充文件缩略图字段与 thumb 接口。 Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-11 11:05:44 +08:00
parent 877fd278c2
commit 4ce4486b26
33 changed files with 3190 additions and 1143 deletions
@@ -9,12 +9,27 @@ function soonDesign2MainHeight() {
    return Math.max(480, window.innerHeight - (tb ? tb.offsetHeight : 0));
 }

+function soonDesign2SidebarWidth() {
+    var colRight = document.querySelector('body.soon-design-page .col-right');
+    if (colRight && colRight.offsetWidth > 0) return colRight.offsetWidth;
+    return 320;
+}
+
+function soonDesign2ToolboxWidth() {
+    var toolbox = document.querySelector('body.soon-design-page .container .left');
+    if (toolbox && toolbox.offsetWidth > 0) return toolbox.offsetWidth;
+    return 50;
+}
+
 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);
+    var canvasDiv = document.getElementById('canvas-div');
+    if (canvasDiv && canvasDiv.clientWidth > 0) return canvasDiv.clientWidth;
+    var colLeft = document.querySelector('body.soon-design-page .col-left');
+    if (colLeft && colLeft.clientWidth > 0) {
+        return Math.max(320, colLeft.clientWidth - soonDesign2ToolboxWidth());
+    }
+    var docW = document.documentElement.clientWidth || window.innerWidth;
+    return Math.max(320, docW - soonDesign2SidebarWidth() - soonDesign2ToolboxWidth());
 }

 function layoutDesign2Shell() {
@@ -80,6 +95,7 @@ zoom = (function () {
    var z = divW / 1200 > 1 ? 1 : divW / 1200;
    return z > 0 ? z : 0.5;
 })()
+window.zoom = zoom;

 // 初始化标尺
 function initRulers() {
@@ -518,29 +534,110 @@ 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();
-        });
-    });
+function relayoutDesign2Canvas() {
+    var layout = layoutDesign2Shell();
+    var divW = layout.canvasW;
+    zoom = divW / 1200 > 1 ? 1 : divW / 1200;
+    if (zoom <= 0) zoom = 0.5;
+    window.zoom = zoom;
+    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);
+    canvas1.renderAll();
+    canvas2.renderAll();
+    initRulers();
+    if (typeof window.soonDesign2ScaleBgSources === 'function') {
+        window.soonDesign2ScaleBgSources();
+    }
+    if (window.is_bgi_add) {
+        canvas1.requestRenderAll();
+        canvas2.requestRenderAll();
+    }
 }
-$('#source_front').width(zoom * $('#source_front').width())
-$('#source_back').width(zoom * $('#source_back').width())
+
+function soonDesign2ScaleBgSources() {
+    var z = zoom || window.zoom || 0.5;
+    var sf = document.getElementById('source_front');
+    var sb = document.getElementById('source_back');
+    if (sf && sf.naturalWidth > 0) {
+        sf.style.width = (sf.naturalWidth * z) + 'px';
+        sf.style.height = (sf.naturalHeight * z) + 'px';
+    }
+    if (sb && sb.naturalWidth > 0) {
+        sb.style.width = (sb.naturalWidth * z) + 'px';
+        sb.style.height = (sb.naturalHeight * z) + 'px';
+    }
+}
+
+function soonDesign2BgOverlayMetrics(imgEl) {
+    if (!imgEl || !imgEl.complete || imgEl.naturalWidth <= 0) return null;
+    var z = zoom || window.zoom || 0.5;
+    var w = parseFloat(imgEl.style.width);
+    if (!w || w <= 0) w = imgEl.naturalWidth * z;
+    var h = parseFloat(imgEl.style.height);
+    if (!h || h <= 0) h = imgEl.naturalHeight * z;
+    return { w: w, h: h };
+}
+
+function soonDesign2PrepareBgSources(done) {
+    var sf = document.getElementById('source_front');
+    var sb = document.getElementById('source_back');
+    if (!sf || !sb) {
+        is_bgi_add = true;
+        window.is_bgi_add = true;
+        if (typeof done === 'function') done();
+        return;
+    }
+    var ver = typeof bg_version !== 'undefined' ? bg_version : 1;
+    var frontName = 'front_bg' + ver + '_2.png';
+    if (!(sf.complete && sf.naturalWidth > 0 && (sf.src || '').indexOf(frontName) !== -1)) {
+        sf.src = soonAsset(frontName);
+    }
+    var pending = 2;
+    function finishOne() {
+        pending--;
+        if (pending > 0) return;
+        soonDesign2ScaleBgSources();
+        is_bgi_add = true;
+        window.is_bgi_add = true;
+        canvas1.requestRenderAll();
+        canvas2.requestRenderAll();
+        if (typeof done === 'function') done();
+    }
+    function watch(img) {
+        if (img.complete && img.naturalWidth > 0) {
+            finishOne();
+            return;
+        }
+        img.onload = finishOne;
+        img.onerror = finishOne;
+    }
+    watch(sf);
+    watch(sb);
+}
+
+function soonDesign2StartBackground() {
+    soonDesign2PrepareBgSources(addBackground);
+}
+
+function soonDesign2Kickoff() {
+    if (window._soonDesign2KickoffDone) return;
+    window._soonDesign2KickoffDone = true;
+    if (window.SOON_DEPLOY_CONFIG && ($('#canvas-div').width() || 0) < 100) {
+        relayoutDesign2Canvas();
+    }
+    soonDesign2StartBackground();
+}
+
+window.soonDesign2ScaleBgSources = soonDesign2ScaleBgSources;
+window.soonDesign2PrepareBgSources = soonDesign2PrepareBgSources;
+window.soonDesign2BgOverlayMetrics = soonDesign2BgOverlayMetrics;
+window.soonDesign2Kickoff = soonDesign2Kickoff;
+
+initRulers();
 $('.canvas-container:eq(1)').hide()
 canvas = canvas1
 window.canvas = canvas
@@ -1643,58 +1740,71 @@ function getCoordsMaxY(acoords) {
    return y;
 }

+function soonPlaceBgOnCanvas(image, canvasSelector) {
+    var cw = $(canvasSelector).width() || (document.querySelector(canvasSelector) && document.querySelector(canvasSelector).clientWidth) || 800
+    var ch = $(canvasSelector).height() || (document.querySelector(canvasSelector) && document.querySelector(canvasSelector).clientHeight) || 600
+    image.left = (cw - image.width * image.get('scaleX')) / 2
+    image.top = (ch - image.height * image.get('scaleY')) / 2
+    image.selectable = false
+    image.hoverable = false
+    image.hoverCursor = 'default'
+}
+
+function soonOpenPendingDesignFile() {
+    var file = typeof window.soonResolveOpenFileKey === 'function'
+        ? window.soonResolveOpenFileKey(GetFile)
+        : (GetFile().get('file') || '');
+    if (file && file != 'empty') {
+        if (typeof window.soonConsumeOpenMeta === 'function') {
+            window.soonConsumeOpenMeta(file);
+        }
+        window.openFile(file);
+    }
+}
+
 function addBackground() {
-    // 类型改变
-    fabric.Image.fromURL(soonAsset('bg_front_2.png'), function (image) {
-        image.left = ($('#canvas1').width() - image.width * image.get('scaleX')) / 2
-        image.top = ($('#canvas1').height() - image.height * image.get('scaleY')) / 2
+    if (background_image1 && background_image2) return;
+    var loadBg = typeof window.soonFabricImageFromAsset === 'function'
+        ? window.soonFabricImageFromAsset
+        : null;
+    var whenReady = typeof window.soonRunWhenCanvasReady === 'function'
+        ? window.soonRunWhenCanvasReady
+        : function (_sel, fn) { fn(); };
+    var props = window.TO_JSON_PROPERTIES || ['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline', 'evented', 'linethrough', 'textBackgroundColor', 'diameter', 'flipped'];

-        image.selectable = false
-        image.hoverable = false
-        image.hoverCursor = 'default'
-        image.setSrc(image.toDataURL(), function (image) {
-            background_image1 = image
-            background_image = background_image1
-            window.background_image1 = background_image1;
-            window.background_image = background_image;
-            canvas1.add(image)
-            canvas1.renderAll()
+    function finishBack(backImg) {
+        if (backImg) {
+            soonPlaceBgOnCanvas(backImg, '#canvas2');
+            background_image2 = backImg;
+            window.background_image2 = backImg;
+            canvas2.add(backImg);
+            canvas2.renderAll();
+            recordObjs2.push(JSON.stringify(objs2));
+            recordJson2.push(canvas2.toJSON(TO_JSON_PROPERTIES));
+        }
+        soonOpenPendingDesignFile();
+    }

-            recordObjs1.push(JSON.stringify(objs1))
-            const props = window.TO_JSON_PROPERTIES || ['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline', 'evented', 'linethrough', 'textBackgroundColor', 'diameter', 'flipped'];
-            recordJson1.push(canvas1.toJSON(props))
-        })
-        // 类型改变
-        fabric.Image.fromURL(soonAsset('bg_back_2.png'), function (image) {
-            image.left = ($('#canvas2').width() - image.width) / 2
-            image.top = ($('#canvas2').height() - image.height) / 2
+    function startLoad() {
+        if (!loadBg) return;
+        loadBg('bg_front_2.png', function (frontImg) {
+            if (!frontImg) return;
+            soonPlaceBgOnCanvas(frontImg, '#canvas1');
+            background_image1 = frontImg;
+            background_image = frontImg;
+            window.background_image1 = frontImg;
+            window.background_image = frontImg;
+            canvas1.add(frontImg);
+            canvas1.renderAll();
+            recordObjs1.push(JSON.stringify(objs1));
+            recordJson1.push(canvas1.toJSON(props));
+            loadBg('bg_back_2.png', finishBack, function () { loadBg('bg_back_2.png', finishBack, null, true); }, true);
+        }, function () {
+            setTimeout(startLoad, 200);
+        }, null, true);
+    }

-            image.selectable = false
-            image.hoverable = false
-            image.hoverCursor = 'default'
-
-            image.setSrc(image.toDataURL(), function (image) {
-                background_image2 = image
-                window.background_image2 = background_image2;
-                canvas2.add(image)
-                canvas2.renderAll()
-
-                recordObjs2.push(JSON.stringify(objs2))
-                recordJson2.push(canvas2.toJSON(TO_JSON_PROPERTIES))
-
-                var file = typeof window.soonResolveOpenFileKey === 'function'
-                    ? window.soonResolveOpenFileKey(GetFile)
-                    : (GetFile().get('file') || '');
-                if (file && file != 'empty') {
-                    if (typeof window.soonConsumeOpenMeta === 'function') {
-                        window.soonConsumeOpenMeta(file);
-                    }
-                    window.openFile(file);
-                }
-            })
-        })
-        is_bgi_add = true
-    })
+    whenReady('#canvas1', startLoad);
 }

 function addPic(pointer) {
@@ -1975,6 +2085,7 @@ function applySysLan(data) {
            localStorage.setItem('lang', 'zh')
            break
        case 'zh-TW':
+        case 'ozh':
            s_lan = 'ozh'
            // 同步到全局作用域（用于 .jsc 文件加载）
            if (typeof window !== 'undefined') {
@@ -2112,8 +2223,6 @@ if (typeof ipcRenderer !== 'undefined' && ipcRenderer) {
    window.platformBridge.onClose(onCloseConfirm)
 }

-addBackground() //添加背景 白色卡片
-
 initAligningGuidelines(canvas1)
 initAligningGuidelines(canvas2)