yangchunjin/SoonDesign
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

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

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
24kycj
2026-06-09 01:20:34 +08:00
parent ebe191b06d
commit 877fd278c2
27 changed files with 1232 additions and 326 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend-web/js/design2/core.js
+73 -34
View File
@@ -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) { }