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

demoHtml/flex/GEMINI.md

@@ -19,7 +19,8 @@
 </div>
 ```
 
-## 要求
+## 请阅读以下要求，必须严格遵守
 * 执行任何任务的时候，请先输出你的思路，等待我确认之后再修改代码
 * 有任何不确认的地方，请先向我确认再执行任务
-* 请任何时候使用中文与我沟通或者确认，包括项目中使用注释也使用中文
+* 请任何时候使用中文与我沟通或者确认，包括项目中使用注释也使用中文
+* 不要更改之前的代码逻辑，包括删除注释等，只允许添加代码，或者当老代码不能满足需求的时候才允许修改

demoHtml/flex/js/index.js

@@ -78,6 +78,7 @@
                 version: '1.0.0',
                 width: 1920,
                 height: 1080,
+                background: '#e2e2e2',
             };
         } else {
             self['initData'] = JSON.parse(initDataStorage);
@@ -402,7 +403,9 @@
             // 处理画布的显示/隐藏
             var tabId = $this.data('tab');
             $('#' + tabId).show();
-            $('.grid-stack').not('#' + tabId).hide();
+            $('.grid-stack')
+                .not('#' + tabId)
+                .hide();
         });
     };
 
@@ -438,15 +441,6 @@
         }
     };
 
-    $('.save-container').click(function () {
-        main.initData.children = main.grid.save();
-        welcome.initData.children = welcome.grid.save();
-        console.log(main.initData);
-        console.log(welcome.initData);
-        localStorage.setItem('mainData', JSON.stringify(conputedInitData('save', main)));
-        localStorage.setItem('welcomeData', JSON.stringify(conputedInitData('save', welcome)));
-    });
-
     /** 执行方法 */
     $(function () {
         init('main', main);
@@ -455,5 +449,32 @@
         bindComponentEvents();
         // 处理Tab切换
         handleTabSwitch();
+
+        $('.save-container').click(function () {
+            main.initData.children = main.grid.save();
+            welcome.initData.children = welcome.grid.save();
+            console.log(main.initData);
+            console.log(welcome.initData);
+            localStorage.setItem('mainData', JSON.stringify(conputedInitData('save', main)));
+            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();
+                }
+            }
+        });
     });
 })();