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,6 +441,15 @@
         }
     };
 
+    /** 执行方法 */
+    $(function () {
+        init('main', main);
+        init('welcome', welcome);
+        // 调用绑定
+        bindComponentEvents();
+        // 处理Tab切换
+        handleTabSwitch();
+
         $('.save-container').click(function () {
             main.initData.children = main.grid.save();
             welcome.initData.children = welcome.grid.save();
@@ -447,13 +459,22 @@
             localStorage.setItem('welcomeData', JSON.stringify(conputedInitData('save', welcome)));
         });
 
-    /** 执行方法 */
-    $(function () {
-        init('main', main);
-        init('welcome', welcome);
-        // 调用绑定
-        bindComponentEvents();
-        // 处理Tab切换
-        handleTabSwitch();
+        // 给画布添加点击事件，用于取消组件的选中状态
+        $('#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();
+                }
+            }
+        });
     });
 })();