From 04ecb079b7b966faec4cd1a9915926a13f10d780 Mon Sep 17 00:00:00 2001 From: LCJ-MinYa <1049468118@qq.com> Date: Fri, 5 Dec 2025 11:42:40 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=8B=96=E6=8B=BD=E5=B8=83=E5=B1=80-?= =?UTF-8?q?=E5=88=A0=E9=99=A4=E7=BB=84=E4=BB=B6=E6=93=8D=E4=BD=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- demoHtml/flex/css/index.css | 49 ++++++++++++++++++++++++++++++++--- demoHtml/flex/index.html | 51 ++++++++++++++++++++++++------------- demoHtml/flex/js/index.js | 32 ++++++++++++++++++----- 3 files changed, 104 insertions(+), 28 deletions(-) diff --git a/demoHtml/flex/css/index.css b/demoHtml/flex/css/index.css index 080141a..e75d887 100644 --- a/demoHtml/flex/css/index.css +++ b/demoHtml/flex/css/index.css @@ -5,7 +5,7 @@ html { padding: 0; height: 100%; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - background-color: #f0f2f5; + background-color: #e5e7eb; color: #333; } * { @@ -21,16 +21,23 @@ html { /* Components panel */ #components-panel { + position: relative; flex: 1; - padding: 10px; background-color: #fff; + border-right: 1px solid #e0e0e0; + display: flex; + flex-direction: column; +} + +.components-list { + flex: 1; + padding: 10px; overflow-y: auto; display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; gap: 10px; - border-right: 1px solid #e0e0e0; } .component-item { @@ -70,12 +77,42 @@ html { .component-item span { font-size: 14px; } +.action-btn { + position: relative; + width: 100%; + height: 50px; + display: flex; + align-items: center; + justify-content: center; + padding: 0 10px; +} +.action-btn .trash-container, +.action-btn .save-container { + width: 46%; + height: 40px; + margin: 0 2%; + border-radius: 8px; + display: flex; + align-items: center; + justify-content: center; + background: rgb(0, 123, 255, 0.6); + color: #fff; + font-size: 14px; + cursor: pointer; +} +.save-container { + background: rgb(0, 123, 255, 1) !important; +} +.action-btn .trash-container > span, +.action-btn .save-container > span { + margin-left: 5px; +} /* Canvas panel */ #canvas-panel { flex: 4; height: 100%; - background-color: #f9f9f9; + background-color: #f9fafb; position: relative; overflow-y: auto; padding: 10px; @@ -84,6 +121,10 @@ html { cursor: pointer; background: #fff; } +#canvas-panel .grid-stack-item-content { + border-radius: 8px; + border: 1px solid #e0e0e0; +} .global-save-button-container { position: absolute; diff --git a/demoHtml/flex/index.html b/demoHtml/flex/index.html index 4e20114..5e2bbe8 100644 --- a/demoHtml/flex/index.html +++ b/demoHtml/flex/index.html @@ -26,30 +26,45 @@
-
-
轮播图
-
-
-
搜索
-
-
-
热门频道
-
-
-
直播
-
-
-
推荐内容
+
+
+
轮播图
+
+
+
搜索
+
+
+
热门频道
+
+
+
直播
+
+
+
推荐内容
+
+
+
快捷入口
+
-
-
快捷入口
+
+
+ + 拖动删除 +
+
+ + 保存布局 +
-
+
diff --git a/demoHtml/flex/js/index.js b/demoHtml/flex/js/index.js index a4f5d7d..634b384 100644 --- a/demoHtml/flex/js/index.js +++ b/demoHtml/flex/js/index.js @@ -19,8 +19,9 @@ minRow: 8, acceptWidgets: true, float: true, + removable: '#trash', }); - GridStack.setupDragIn('#components-panel > .component-item', undefined, [ + GridStack.setupDragIn('#components-panel .component-item', undefined, [ { w: 12, h: 2, @@ -70,6 +71,13 @@ handleAddComponent(item); }); }); + + grid.on('removed', function (_event, itemArray) { + console.log(itemArray, '这里触发了移除removed事件'); + itemArray.forEach((item) => { + handleRemoveComponent(item); + }); + }); }; // 处理添加组件之后的操作 @@ -83,15 +91,27 @@ } currentComponent = component; // 右侧显示组件属性列表 - if (!$('#props-panel').find('form').hasClass('show')) { - $('#props-panel').find('.wait-box').addClass('hidden'); - $('#props-panel').find('form').attr('class', 'show'); + if (!$('#props-panel').find('form').is(':visible')) { + $('#props-panel').find('.wait-box').hide(); + $('#props-panel').find('form').show(); } // 将当前选中组件的属性显示在右侧列表中 setCurrentComponentProps(currentComponent); }); }; + var handleRemoveComponent = (component) => { + if (currentComponent && currentComponent.id === component.id) { + currentComponent = null; + // 右侧显示请选择组件 + if (!$('#props-panel').find('wait-box').is(':visible')) { + console.log('111'); + $('#props-panel').find('.wait-box').show(); + $('#props-panel').find('form').hide(); + } + } + }; + //将当前选中组件的属性显示在右侧列表中 var setCurrentComponentProps = function (component) { const form = $('#props-panel').find('form'); @@ -168,8 +188,8 @@ }); }; - $('.global-save-button').click(function () { - grid.addWidget({ w: 2, content: 'item 1' }); + $('.save-container').click(function () { + // grid.addWidget({ w: 2, content: 'item 1' }); console.log(grid.save()); console.log(grid); });