feat: 拖拽布局-画布点击事件

demoHtml/flex/css/index.css

@@ -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 {

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;
+            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;
+            if (currentComponent && currentComponent.id === component.id) {
                 el.find('.grid-stack-item-content').css('border-color', value);
+            }
         },
         focusedStyle_scale: function (el, value) {
             if (!value) return;
+            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) {
+            if (e.target !== this) {
-                console.log('点击了画布背景，取消组件选中');
+                return;
-                // 如果有当前选中的组件
+            }
+
+            console.log('点击了画布背景，编辑画布属性');
+
+            // 1. 如果有，则取消当前选中的组件
             if (currentComponent) {
-                    // 清除旧组件的焦点样式
                 clearOldFocusStyle();
-                    // 重置当前组件变量
                 currentComponent = null;
-                    // 将右侧属性面板重置为初始状态
-                    $('#props-panel .wait-box').show();
-                    $('#props-panel form').hide();
             }
+
+            // 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('');
                 }
             });
         });
+    });
 })();