From 3a821f863729a778296f7c1e19da9106b9ac4d9b Mon Sep 17 00:00:00 2001
From: LCJ-MinYa <1049468118@qq.com>
Date: Fri, 5 Dec 2025 09:53:10 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=8B=96=E6=8B=BD=E5=B8=83=E5=B1=80-?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=AE=9E=E7=8E=B0=E5=8A=A8=E6=80=81=E5=8F=8D?=
 =?UTF-8?q?=E6=98=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 demoHtml/flex/css/index.css |  1 +
 demoHtml/flex/index.html    |  6 +--
 demoHtml/flex/js/index.js   | 88 +++++++++++++++++++++++++++----------
 3 files changed, 69 insertions(+), 26 deletions(-)

diff --git a/demoHtml/flex/css/index.css b/demoHtml/flex/css/index.css
index 83a42dc..080141a 100644
--- a/demoHtml/flex/css/index.css
+++ b/demoHtml/flex/css/index.css
@@ -41,6 +41,7 @@ html {
     display: flex;
     align-items: center;
     justify-content: center;
+    overflow: hidden;
 }
 .component-item .grid-stack-item-content {
     width: 100%;
diff --git a/demoHtml/flex/index.html b/demoHtml/flex/index.html
index 7fd6275..4e20114 100644
--- a/demoHtml/flex/index.html
+++ b/demoHtml/flex/index.html
@@ -6,7 +6,7 @@
             name="viewport"
             content="width=device-width, initial-scale=1.0"
         />
-        <title>Page Builder</title>
+        <title>网页布局生成</title>
         <link
             rel="stylesheet"
             href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
@@ -102,7 +102,7 @@
                             id="link"
                         />
                     </div>
-                    <div class="form-actions">
+                    <!-- <div class="form-actions">
                         <button
                             type="button"
                             class="save-button"
@@ -115,7 +115,7 @@
                         >
                             删除组件
                         </button>
-                    </div>
+                    </div> -->
                 </form>
             </div>
         </div>
diff --git a/demoHtml/flex/js/index.js b/demoHtml/flex/js/index.js
index b864c33..a4f5d7d 100644
--- a/demoHtml/flex/js/index.js
+++ b/demoHtml/flex/js/index.js
@@ -27,10 +27,10 @@
                 type: 'banner',
                 name: '我是轮播图',
                 fontSize: 14,
-                color: '#fff',
-                background: 'red',
+                color: '#333',
+                background: '#fff',
                 detail: '',
-                icon: 'fa-link',
+                icon: 'fa-image',
                 link: '',
             },
             { w: 2, h: 1 },
@@ -104,28 +104,68 @@
         form.find('#link').val(component.link);
     };
 
+    // 定义组件设置配置策略
+    const componentStrategies = {
+        name: function (el, value) {
+            el.find('span').text(value);
+        },
+        background: function (el, value) {
+            el.find('.grid-stack-item-content').css('background', value);
+        },
+        fontSize: function (el, value) {
+            el.find('span').css('font-size', value + 'px');
+        },
+        color: function (el, value) {
+            el.find('span').css('color', value);
+        },
+        icon: function (el, value) {
+            el.find('i').attr('class', `fas ${value}`);
+        },
+        // detail, link不需要反显页面所有不需要修改dom
+    };
+
     // 设置当前传递组件的视图展示
-    var setComponentView = function (component) {
+    var setComponentView = function (component, fields = null) {
         const el = $(component.el);
-        // 设置名称
-        if (component.name) {
-            el.find('span').text(component.name);
-        }
-        // 设置背景颜色
-        if (component.background) {
-            el.find('.grid-stack-item-content').css('background', component.background);
-        }
-        // 设置文字大小和颜色
-        if (component.fontSize) {
-            el.find('span').css('font-size', component.fontSize + 'px');
-        }
-        if (component.color) {
-            el.find('span').css('color', component.color);
-        }
-        // 设置图标
-        if (component.icon) {
-            el.find('i').attr('class', `fas ${component.icon}`);
-        }
+
+        // 确定要处理的属性
+        const propsToHandle = fields || Object.keys(componentStrategies);
+
+        // 遍历并执行对应的策略
+        propsToHandle.forEach((prop) => {
+            if (componentStrategies[prop] && component[prop] !== undefined) {
+                componentStrategies[prop](el, component[prop]);
+            }
+        });
+    };
+
+    // 定义映射关系：元素ID -> 事件类型 -> 组件属性
+    const elementMappings = {
+        name: { event: 'blur', property: 'name' },
+        background: { event: 'blur', property: 'background' },
+        fontSize: { event: 'blur', property: 'fontSize' },
+        color: { event: 'blur', property: 'color' },
+        icon: { event: 'blur', property: 'icon' },
+        detail: { event: 'blur', property: 'detail' },
+        link: { event: 'blur', property: 'link' },
+        // icon: { event: 'change', property: 'icon' }, // select使用change
+    };
+
+    // 统一绑定函数
+    var bindComponentEvents = function () {
+        Object.keys(elementMappings).forEach((elementId) => {
+            const mapping = elementMappings[elementId];
+            const $element = $('#' + elementId);
+
+            if ($element.length) {
+                // 组件名称添加失去焦点事件或者change事件
+                $element.off(mapping.event).on(mapping.event, function () {
+                    const value = $(this).val();
+                    currentComponent[mapping.property] = value;
+                    setComponentView(currentComponent, [mapping.property]);
+                });
+            }
+        });
     };
 
     $('.global-save-button').click(function () {
@@ -137,5 +177,7 @@
     /** 执行方法 */
     $(function () {
         init();
+        // 调用绑定
+        bindComponentEvents();
     });
 })();