feat: 拖拽布局

demoHtml/flex/css/index.css

@@ -201,3 +201,18 @@ html {
         grid-template-columns: 1fr;
     }
 }
+
+.wait-box {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+}
+.show {
+    display: block;
+}
+.hidden {
+    display: none;
+}

demoHtml/flex/index.html

@@ -54,7 +54,8 @@
             </div>
             <!-- 当前选中组件属性 -->
             <div id="props-panel">
-                <form>
+                <div class="wait-box">请选择组件</div>
+                <form class="hidden">
                     <div class="form-item">
                         <label for="name">名称</label>
                         <input
@@ -63,15 +64,36 @@
                         />
                     </div>
                     <div class="form-item">
-                        <label for="image">图片</label>
+                        <label for="background">背景颜色</label>
                         <input
                             type="text"
-                            id="image"
+                            id="background"
                         />
                     </div>
                     <div class="form-item">
-                        <label for="description">描述</label>
-                        <textarea id="description"></textarea>
+                        <label for="fontSize">文字大小</label>
+                        <input
+                            type="text"
+                            id="fontSize"
+                        />
+                    </div>
+                    <div class="form-item">
+                        <label for="color">文字颜色</label>
+                        <input
+                            type="text"
+                            id="color"
+                        />
+                    </div>
+                    <div class="form-item">
+                        <label for="icon">图标名称</label>
+                        <input
+                            type="text"
+                            id="icon"
+                        />
+                    </div>
+                    <div class="form-item">
+                        <label for="detail">描述</label>
+                        <textarea id="detail"></textarea>
                     </div>
                     <div class="form-item">
                         <label for="link">跳转链接</label>

demoHtml/flex/js/index.js

@@ -1,5 +1,13 @@
 (function () {
-    var grid = null;
+    let grid = null;
+    let currentComponent = null;
+
+    // 生成唯一id
+    var generateUniqueId = function () {
+        const timestamp = Date.now().toString(36);
+        const randomNum = Math.random().toString(36).substring(2);
+        return timestamp + randomNum;
+    };
 
     /** 初始化 */
     var init = function () {
@@ -13,7 +21,18 @@
             float: true,
         });
         GridStack.setupDragIn('#components-panel > .component-item', undefined, [
-            { w: 12, h: 2 },
+            {
+                w: 12,
+                h: 2,
+                type: 'banner',
+                name: '我是轮播图',
+                fontSize: 14,
+                color: '#fff',
+                background: 'red',
+                detail: '',
+                icon: 'fa-link',
+                link: '',
+            },
             { w: 2, h: 1 },
         ]);
         console.log(grid, 'grid实例');
@@ -42,21 +61,73 @@
         // grid.load(initData);
 
         grid.engine.nodes.forEach((item) => {
-            item.el.addEventListener('click', () => {
-                console.log(item);
-            });
+            handleAddComponent(item);
         });
 
         grid.on('added', function (_event, itemArray) {
             console.log(itemArray, '这里触发了添加了added事件');
             itemArray.forEach((item) => {
-                item.el.addEventListener('click', () => {
-                    console.log(item);
-                });
+                handleAddComponent(item);
             });
         });
     };
 
+    // 处理添加组件之后的操作
+    var handleAddComponent = (component) => {
+        component.id = `${component.type}_${generateUniqueId()}`;
+        setComponentView(component);
+        component.el.addEventListener('click', () => {
+            console.log('点击组件', component);
+            if (currentComponent && currentComponent.id === component.id) {
+                return;
+            }
+            currentComponent = component;
+            // 右侧显示组件属性列表
+            if (!$('#props-panel').find('form').hasClass('show')) {
+                $('#props-panel').find('.wait-box').addClass('hidden');
+                $('#props-panel').find('form').attr('class', 'show');
+            }
+            // 将当前选中组件的属性显示在右侧列表中
+            setCurrentComponentProps(currentComponent);
+        });
+    };
+
+    //将当前选中组件的属性显示在右侧列表中
+    var setCurrentComponentProps = function (component) {
+        const form = $('#props-panel').find('form');
+        form.find('#name').val(component.name);
+        form.find('#background').val(component.background);
+        form.find('#fontSize').val(component.fontSize);
+        form.find('#color').val(component.color);
+        form.find('#icon').val(component.icon);
+        form.find('#detail').val(component.detail);
+        form.find('#link').val(component.link);
+    };
+
+    // 设置当前传递组件的视图展示
+    var setComponentView = function (component) {
+        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}`);
+        }
+    };
+
     $('.global-save-button').click(function () {
         grid.addWidget({ w: 2, content: 'item 1' });
         console.log(grid.save());