feat: 拖拽布局-复制组件

demoHtml/flex/index.html

@@ -75,12 +75,14 @@
                             <button
                                 class="tab-button active"
                                 data-tab="welcome-screen"
+                                data-type="welcome"
                             >
                                 {{= i18n.$t('user.welcome_page') }}
                             </button>
                             <button
                                 class="tab-button"
                                 data-tab="main-screen"
+                                data-type="main"
                             >
                                 {{= i18n.$t('user.main_page') }}
                             </button>
@@ -114,6 +116,7 @@
                         </div>
                         <div class="wait-box">{{= i18n.$t('user.empty_component') }}</div>
                         <form class="hidden">
+                            <div id="copy-component">复制组件</div>
                             <div class="form-item">
                                 <label for="childrenType">{{= i18n.$t('user.component_child_type') }}</label>
                                 <input

demoHtml/flex/js/index.js

@@ -8,6 +8,7 @@
         initData: null,
     };
     let currentComponent = null;
+    let currentScreen = 'welcome';
     let cellHeight = 30;
     let locale = 'en';
 
@@ -553,6 +554,9 @@
                 .not('#' + tabId)
                 .hide();
 
+            // 处理当前选中screen
+            var type = $this.data('type');
+            currentScreen = type;
             // 处理右侧面板的显示/隐藏
             currentComponent = null;
             hidePropsPanel();
@@ -599,6 +603,50 @@
         });
     };
 
+    // 点击复制组件按钮处理
+    var handleCopyComponentClick = function () {
+        $('#copy-component').click(function () {
+            if (!currentComponent) {
+                return;
+            }
+            console.log(currentComponent);
+            let widget = {
+                w: currentComponent.w,
+                h: currentComponent.h,
+                name: userLangConfig[locale].user[`${currentComponent.type}_default_name`],
+                type: currentComponent.type,
+                background: currentComponent.background,
+                eventsType: currentComponent.eventsType,
+                eventsAction: currentComponent.eventsAction,
+                defaultFocus: false,
+                leftId: currentComponent.leftId,
+                rightId: currentComponent.rightId,
+                upId: currentComponent.upId,
+                downId: currentComponent.downId,
+                focusedStyle_background: currentComponent.focusedStyle_background,
+                focusedStyle_border_width: currentComponent.focusedStyle_border_width,
+                focusedStyle_border_color: currentComponent.focusedStyle_border_color,
+                focusedStyle_scale: currentComponent.focusedStyle_scale,
+                content: currentComponent.content,
+            };
+            if (currentComponent.type === 'image') {
+                widget.image = currentComponent.image;
+            } else if (currentComponent.type === 'text') {
+                widget.childrenType = currentComponent.childrenType;
+                widget.fontSize = currentComponent.fontSize;
+                widget.color = currentComponent.color;
+                widget.text = currentComponent.text;
+                widget.fontWeight = currentComponent.fontWeight;
+            }
+            if (currentScreen === 'main') {
+                main.grid.addWidget(widget);
+            } else if (currentScreen === 'welcome') {
+                welcome.grid.addWidget(widget);
+            }
+            console.log(welcome.grid.save());
+        });
+    };
+
     // 点击画布处理
     var handleCanvasClick = function () {
         handleAddComponent(welcome.initData, welcome);
@@ -743,6 +791,8 @@
             handleTabSwitch();
             // 处理保存按钮
             handleSaveClick();
+            // 处理复制组件按钮
+            handleCopyComponentClick();
             // 处理画布点击事件
             handleCanvasClick();
         })();