feat: 拖拽布局-支持存储到本地，刷新后重新加载

demoHtml/flex/css/index.css

@@ -50,7 +50,8 @@ html {
     justify-content: center;
     overflow: hidden;
 }
-.component-item .grid-stack-item-content {
+.component-item .grid-stack-item-content,
+.grid-stack-item .grid-stack-item-content {
     width: 100%;
     height: 100%;
     display: flex;
@@ -68,13 +69,15 @@ html {
     border: 1px solid #e0e0e0;
 }
 
-.component-item i {
+.component-item i,
+.grid-stack-item i {
     font-size: 18px;
     margin-bottom: 5px;
     color: #007bff;
 }
 
-.component-item span {
+.component-item span,
+.grid-stack-item span {
     font-size: 14px;
 }
 .action-btn {

demoHtml/flex/js/index.js

@@ -1,4 +1,5 @@
 (function () {
+    let initData = null;
     let grid = null;
     let currentComponent = null;
 
@@ -11,6 +12,21 @@
 
     /** 初始化 */
     var init = function () {
+        const initDataStorage = localStorage.getItem('initData');
+        if (!initDataStorage) {
+            initData = {
+                id: `grid_${generateUniqueId()}`,
+                children: [],
+            };
+        } else {
+            initData = JSON.parse(initDataStorage);
+        }
+        console.log(initData, 'initData');
+
+        // 让gridstack知道如何渲染，组件children中的content直接渲染html
+        GridStack.renderCB = function (el, w) {
+            el.innerHTML = w.content;
+        };
         grid = GridStack.init({
             // 一行高度
             cellHeight: 80,
@@ -20,6 +36,7 @@
             acceptWidgets: true,
             float: true,
             removable: '#trash',
+            children: initData.children,
         });
         GridStack.setupDragIn('#components-panel .component-item', undefined, [
             {
@@ -38,28 +55,7 @@
         ]);
         console.log(grid, 'grid实例');
 
-        var initData = [
-            // {
-            //     x: 0,
-            //     y: 0,
-            //     w: 2,
-            //     h: 2,
-            //     content: 'item 1',
-            //     data: {
-            //         name: 'item 1',
-            //     },
-            // },
-            // {
-            //     x: 2,
-            //     y: 3,
-            //     w: 3,
-            //     content: 'item 2',
-            //     data: {
-            //         name: 'item 2',
-            //     },
-            // },
-        ];
-        // grid.load(initData);
+        // grid.load(initData.children);
 
         grid.engine.nodes.forEach((item) => {
             handleAddComponent(item);
@@ -82,7 +78,9 @@
 
     // 处理添加组件之后的操作
     var handleAddComponent = (component) => {
-        component.id = `${component.type}_${generateUniqueId()}`;
+        if (!component.id) {
+            component.id = `${component.type}_${generateUniqueId()}`;
+        }
         setComponentView(component);
         component.el.addEventListener('click', () => {
             console.log('点击组件', component);
@@ -192,6 +190,8 @@
         // grid.addWidget({ w: 2, content: 'item 1' });
         console.log(grid.save());
         console.log(grid);
+        initData.children = grid.save();
+        localStorage.setItem('initData', JSON.stringify(initData));
     });
 
     /** 执行方法 */