From 0defd00fd0b73101aae02d7eec1d4d41a126ea3d Mon Sep 17 00:00:00 2001 From: lichaojun Date: Fri, 2 Jan 2026 08:44:16 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=8B=96=E6=8B=BD=E5=B8=83=E5=B1=80-?= =?UTF-8?q?=E7=94=BB=E5=B8=83=E7=82=B9=E5=87=BB=E4=BA=8B=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- demoHtml/flex/css/index.css | 11 ++-- demoHtml/flex/js/index.js | 112 ++++++++++++++++++++++++++++++------ 2 files changed, 101 insertions(+), 22 deletions(-) diff --git a/demoHtml/flex/css/index.css b/demoHtml/flex/css/index.css index 76ee2bd..c026dc6 100644 --- a/demoHtml/flex/css/index.css +++ b/demoHtml/flex/css/index.css @@ -169,7 +169,7 @@ html { padding: 5px; display: flex; gap: 5px; - box-shadow: 0 2px 5px rgba(0,0,0,0.1); + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } .tab-button { @@ -180,7 +180,9 @@ html { border-radius: 6px; font-size: 14px; color: #333; - transition: background-color 0.3s, color 0.3s; + transition: + background-color 0.3s, + color 0.3s; } .tab-button:hover { @@ -200,14 +202,15 @@ html { background-color: #e2e2e2; border-radius: 8px; width: 960px; + cursor: pointer !important; /* 强制光标为指针，覆盖 gridstack 的默认设置 */ } .grid-stack-item-content { - cursor: pointer; + cursor: grab; /* 将光标明确设置为抓手 */ background: #fff; } #canvas-panel .grid-stack-item-content { border-radius: 8px; - border: 1px solid #e0e0e0; + border: 0px solid #e0e0e0; } .global-save-button-container { diff --git a/demoHtml/flex/js/index.js b/demoHtml/flex/js/index.js index e71ae24..d26ae4d 100644 --- a/demoHtml/flex/js/index.js +++ b/demoHtml/flex/js/index.js @@ -31,7 +31,7 @@ upId: '', downId: '', focusedStyle_background: '', - focusedStyle_border_width: '', + focusedStyle_border_width: 0, focusedStyle_border_color: '', focusedStyle_scale: 1, }, @@ -54,7 +54,7 @@ upId: '', downId: '', focusedStyle_background: '', - focusedStyle_border_width: '', + focusedStyle_border_width: 0, focusedStyle_border_color: '', focusedStyle_scale: 1, }, @@ -79,6 +79,7 @@ width: 1920, height: 1080, background: '#e2e2e2', + image: '', // 为画布添加image属性 }; } else { self['initData'] = JSON.parse(initDataStorage); @@ -86,6 +87,16 @@ } console.log(self['initData'], `${type}Data`); + // 初始化时应用画布背景 + const canvasId = `${type}-screen`; + if (self.initData.image) { + $('#' + canvasId) + .css('background-image', `url(${self.initData.image})`) + .css('background-size', 'cover'); + } else if (self.initData.background) { + $('#' + canvasId).css('background-color', self.initData.background); + } + self['grid'] = GridStack.init( { // 一行高度 @@ -137,6 +148,15 @@ if (currentComponent && currentComponent.id === component.id) { return; } + + // 1. 解绑可能存在的画布属性事件处理器 + $('#props-panel form').find('#image, #background').off(); + // 2. 重新绑定通用的组件事件处理器 + bindComponentEvents(); + // 3. 重置属性面板标题并显示所有表单项，为显示组件属性做准备 + $('#props-panel .panel-title span').text('组件属性'); + $('#props-panel form .form-item').show(); + // 清除之前选中组件的获取焦点后的样式 clearOldFocusStyle(); currentComponent = component; @@ -320,15 +340,21 @@ }, focusedStyle_border_width: function (el, value) { if (!value) return; - el.find('.grid-stack-item-content').css('border-width', value + 'px'); + if (currentComponent && currentComponent.id === component.id) { + el.find('.grid-stack-item-content').css('border-width', value + 'px'); + } }, focusedStyle_border_color: function (el, value) { if (!value) return; - el.find('.grid-stack-item-content').css('border-color', value); + if (currentComponent && currentComponent.id === component.id) { + el.find('.grid-stack-item-content').css('border-color', value); + } }, focusedStyle_scale: function (el, value) { if (!value) return; - el.find('.grid-stack-item-content').css('transform', `scale(${value})`); + if (currentComponent && currentComponent.id === component.id) { + el.find('.grid-stack-item-content').css('transform', `scale(${value})`); + } }, }; @@ -459,22 +485,72 @@ localStorage.setItem('welcomeData', JSON.stringify(conputedInitData('save', welcome))); }); - // 给画布添加点击事件，用于取消组件的选中状态 + // 给画布添加点击事件，用于编辑画布属性 $('#main-screen, #welcome-screen').on('click', function (e) { // 确保点击的是画布背景，而不是某个组件 - if (e.target === this) { - console.log('点击了画布背景，取消组件选中'); - // 如果有当前选中的组件 - if (currentComponent) { - // 清除旧组件的焦点样式 - clearOldFocusStyle(); - // 重置当前组件变量 - currentComponent = null; - // 将右侧属性面板重置为初始状态 - $('#props-panel .wait-box').show(); - $('#props-panel form').hide(); - } + if (e.target !== this) { + return; } + + console.log('点击了画布背景，编辑画布属性'); + + // 1. 如果有，则取消当前选中的组件 + if (currentComponent) { + clearOldFocusStyle(); + currentComponent = null; + } + + // 2. 更新右侧面板以显示画布属性 + $('#props-panel .panel-title span').text('画布属性'); + $('#props-panel .wait-box').hide(); + const $form = $('#props-panel form'); + $form.show(); + + // 3. 只显示画布相关的表单项 + $form.find('.form-item').hide(); // 首先隐藏所有 + $form.find('#image').parent().show(); // 显示背景图片 + $form.find('#background').parent().show(); // 显示背景颜色 + + // 4. 获取当前点击的画布及其数据对象 + const canvasId = this.id; // "main-screen" 或 "welcome-screen" + const type = canvasId.split('-')[0]; // "main" 或 "welcome" + const canvasData = type === 'main' ? main : welcome; + + // 5. 将当前画布的属性值填充到表单中 + $form.find('#image').val(canvasData.initData.image || ''); + $form.find('#background').val(canvasData.initData.background || ''); + + // 6. 为画布属性输入框绑定新的事件 + $form.find('#image, #background').off(); // 先解绑旧事件，防止重复绑定 + + $form.find('#image').on('change', function () { + const imageUrl = $(this).val(); + canvasData.initData.image = imageUrl; + if (imageUrl) { + $('#' + canvasId) + .css('background-image', `url(${imageUrl})`) + .css('background-size', 'cover'); + // 当设置图片时，清空背景色 + $('#' + canvasId).css('background-color', ''); + canvasData.initData.background = ''; + $form.find('#background').val(''); + } else { + // 如果选择的是“请选择”，则只移除背景图片 + $('#' + canvasId).css('background-image', 'none'); + } + }); + + $form.find('#background').on('blur', function () { + const color = $(this).val(); + canvasData.initData.background = color; + if (color) { + // 当设置颜色时，清空背景图片 + $('#' + canvasId).css('background-color', color); + $('#' + canvasId).css('background-image', 'none'); + canvasData.initData.image = ''; + $form.find('#image').val(''); + } + }); }); }); })();