From 50912b1bb3712a24ff476257921ac3aa220a0261 Mon Sep 17 00:00:00 2001
From: LCJ-MinYa <1049468118@qq.com>
Date: Fri, 5 Dec 2025 14:35:29 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=8B=96=E6=8B=BD=E5=B8=83=E5=B1=80-?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E5=AD=98=E5=82=A8=E5=88=B0=E6=9C=AC=E5=9C=B0?=
 =?UTF-8?q?=EF=BC=8C=E5=88=B7=E6=96=B0=E5=90=8E=E9=87=8D=E6=96=B0=E5=8A=A0?=
 =?UTF-8?q?=E8=BD=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 demoHtml/flex/css/index.css |  9 +++++---
 demoHtml/flex/js/index.js   | 46 ++++++++++++++++++-------------------
 2 files changed, 29 insertions(+), 26 deletions(-)

diff --git a/demoHtml/flex/css/index.css b/demoHtml/flex/css/index.css
index e75d887..3cf9d01 100644
--- a/demoHtml/flex/css/index.css
+++ b/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 {
diff --git a/demoHtml/flex/js/index.js b/demoHtml/flex/js/index.js
index 634b384..6427294 100644
--- a/demoHtml/flex/js/index.js
+++ b/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));
     });
 
     /** 执行方法 */