feat: 拖拽布局-当前选中焦点设置

demoHtml/flex/css/index.css

@@ -78,7 +78,6 @@ html {
     display: flex;
     align-items: center;
     justify-content: center;
-    overflow: hidden;
 }
 .component-item .grid-stack-item-content,
 .grid-stack-item .grid-stack-item-content {
@@ -154,7 +153,7 @@ html {
     justify-content: center;
 }
 .grid-stack {
-    background-color: #f9fafb;
+    background-color: #e2e2e2;
     border-radius: 8px;
     width: 960px;
 }

demoHtml/flex/index.html

@@ -67,10 +67,10 @@
                         id="main-screen"
                         class="grid-stack"
                     ></div>
-                    <div
+                    <!-- <div
                         id="welcome-screen"
                         class="grid-stack"
-                    ></div>
+                    ></div> -->
                 </div>
                 <!-- 当前选中组件属性 -->
                 <div id="props-panel">
@@ -183,6 +183,34 @@
                                 <option value="">请选择</option>
                             </select>
                         </div>
+                        <div class="form-item">
+                            <label for="focusedStyle_background">获得焦点时背景颜色</label>
+                            <input
+                                type="text"
+                                id="focusedStyle_background"
+                            />
+                        </div>
+                        <div class="form-item">
+                            <label for="focusedStyle_border_width">获得焦点时边框宽度</label>
+                            <input
+                                type="text"
+                                id="focusedStyle_border_width"
+                            />
+                        </div>
+                        <div class="form-item">
+                            <label for="focusedStyle_border_color">获得焦点时边框颜色</label>
+                            <input
+                                type="text"
+                                id="focusedStyle_border_color"
+                            />
+                        </div>
+                        <div class="form-item">
+                            <label for="focusedStyle_scale">获得焦点时边框缩放大小</label>
+                            <input
+                                type="text"
+                                id="focusedStyle_scale"
+                            />
+                        </div>
 
                         <!-- <div class="form-actions">
                             <button

demoHtml/flex/js/index.js

@@ -29,6 +29,10 @@
             rightId: '',
             upId: '',
             downId: '',
+            focusedStyle_background: '',
+            focusedStyle_border_width: '',
+            focusedStyle_border_color: '',
+            focusedStyle_scale: 1,
         },
         {
             w: 2,
@@ -48,6 +52,10 @@
             rightId: '',
             upId: '',
             downId: '',
+            focusedStyle_background: '',
+            focusedStyle_border_width: '',
+            focusedStyle_border_color: '',
+            focusedStyle_scale: 1,
         },
     ]);
 
@@ -127,7 +135,11 @@
             if (currentComponent && currentComponent.id === component.id) {
                 return;
             }
+            // 清除之前选中组件的获取焦点后的样式
+            clearOldFocusStyle();
             currentComponent = component;
+            // 设置当前选中组件的获取焦点后的样式
+            setCurrentFocusStyle();
             // 右侧显示组件属性列表
             if (!$('#props-panel').find('form').is(':visible')) {
                 $('#props-panel').find('.wait-box').hide();
@@ -140,6 +152,32 @@
         });
     };
 
+    var clearOldFocusStyle = function () {
+        if (currentComponent) {
+            let el = $(currentComponent.el).find('.grid-stack-item-content');
+            el.css('background', '');
+            if (currentComponent.image) {
+                el.css('background', `url(${currentComponent.image}) no-repeat center center`).css('background-size', 'cover');
+            }
+            if (currentComponent.background) {
+                el.css('background', currentComponent.background);
+            }
+            el.css('border-color', '');
+            el.css('border-width', '');
+            el.css('transform', '');
+        }
+    };
+
+    var setCurrentFocusStyle = function () {
+        if (currentComponent) {
+            let el = $(currentComponent.el).find('.grid-stack-item-content');
+            el.css('background', currentComponent.focusedStyle_background);
+            el.css('border-color', currentComponent.focusedStyle_border_color);
+            el.css('border-width', currentComponent.focusedStyle_border_width + 'px');
+            el.css('transform', `scale(${currentComponent.focusedStyle_scale})`);
+        }
+    };
+
     // 设置上下左右移动组件ID
     var setMoveComponentId = function (component, self) {
         const allComponents = self['grid'].save();
@@ -233,28 +271,58 @@
         form.find('#rightId').val(component.rightId);
         form.find('#upId').val(component.upId);
         form.find('#downId').val(component.downId);
+
+        form.find('#focusedStyle_background').val(component.focusedStyle_background);
+        form.find('#focusedStyle_border_width').val(component.focusedStyle_border_width);
+        form.find('#focusedStyle_border_color').val(component.focusedStyle_border_color);
+        form.find('#focusedStyle_scale').val(component.focusedStyle_scale);
     };
 
     // 定义组件设置配置策略
     const componentStrategies = {
         background: function (el, value) {
+            if (!value) {
+                el.find('.grid-stack-item-content').css('background', 'none');
+            } else {
                 el.find('.grid-stack-item-content').css('background', value);
+            }
         },
         image: function (el, value) {
+            if (!value) return;
             el.find('.grid-stack-item-content').css('background', `url(${value}) no-repeat center center`).css('background-size', 'cover');
         },
         fontSize: function (el, value) {
+            if (!value) return;
             el.find('span').css('font-size', value + 'px');
         },
         color: function (el, value) {
+            if (!value) return;
             el.find('span').css('color', value);
         },
         text: function (el, value) {
+            if (!value) return;
             el.find('span').text(value);
         },
         fontWeight: function (el, value) {
+            if (!value) return;
             el.find('span').css('font-weight', value);
         },
+        focusedStyle_background: function (el, value) {
+            if (!value) return;
+            el.find('.grid-stack-item-content').css('background', value);
+        },
+        focusedStyle_border_width: function (el, value) {
+            if (!value) return;
+            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);
+        },
+        focusedStyle_scale: function (el, value) {
+            if (!value) return;
+            el.find('.grid-stack-item-content').css('transform', `scale(${value})`);
+        },
     };
 
     // 设置当前传递组件的视图展示
@@ -289,6 +357,10 @@
         rightId: { event: 'change', property: 'rightId' },
         upId: { event: 'change', property: 'upId' },
         downId: { event: 'change', property: 'downId' },
+        focusedStyle_background: { event: 'blur', property: 'focusedStyle_background' },
+        focusedStyle_border_width: { event: 'blur', property: 'focusedStyle_border_width' },
+        focusedStyle_border_color: { event: 'blur', property: 'focusedStyle_border_color' },
+        focusedStyle_scale: { event: 'blur', property: 'focusedStyle_scale' },
     };
 
     // 统一绑定函数
@@ -341,21 +413,18 @@
     };
 
     $('.save-container').click(function () {
-        // grid.addWidget({ w: 2, content: 'item 1' });
-        // console.log(grid.save());
-        // console.log(grid);
         main.initData.children = main.grid.save();
-        welcome.initData.children = welcome.grid.save();
+        // welcome.initData.children = welcome.grid.save();
         console.log(main.initData);
-        console.log(welcome.initData);
+        // console.log(welcome.initData);
         localStorage.setItem('mainData', JSON.stringify(conputedInitData('save', main)));
-        localStorage.setItem('welcomeData', JSON.stringify(conputedInitData('save', welcome)));
+        // localStorage.setItem('welcomeData', JSON.stringify(conputedInitData('save', welcome)));
     });
 
     /** 执行方法 */
     $(function () {
         init('main', main);
-        init('welcome', welcome);
+        // init('welcome', welcome);
         // 调用绑定
         bindComponentEvents();
     });