feat: 拖拽布局-欢迎页与首页

demoHtml/flex/css/index.css

@@ -157,6 +157,45 @@ html {
     align-items: center;
     justify-content: center;
 }
+
+#canvas-tabs {
+    position: absolute;
+    top: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 10;
+    background-color: rgba(255, 255, 255, 0.8);
+    border-radius: 8px;
+    padding: 5px;
+    display: flex;
+    gap: 5px;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+}
+
+.tab-button {
+    padding: 8px 15px;
+    border: none;
+    background-color: transparent;
+    cursor: pointer;
+    border-radius: 6px;
+    font-size: 14px;
+    color: #333;
+    transition: background-color 0.3s, color 0.3s;
+}
+
+.tab-button:hover {
+    background-color: #f0f0f0;
+}
+
+.tab-button.active {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: #fff;
+}
+
+#main-screen {
+    display: none;
+}
+
 .grid-stack {
     background-color: #e2e2e2;
     border-radius: 8px;

demoHtml/flex/index.html

@@ -65,6 +65,10 @@
                 </div>
                 <!-- 画布容器 -->
                 <div id="canvas-panel">
+                    <div id="canvas-tabs">
+                        <button class="tab-button active" data-tab="welcome-screen">欢迎页</button>
+                        <button class="tab-button" data-tab="main-screen">首页</button>
+                    </div>
                     <!-- <div class="global-save-button-container">
                         <button class="global-save-button">保存布局</button>
                     </div> -->

demoHtml/flex/js/index.js

@@ -386,6 +386,26 @@
         });
     };
 
+    // 处理Tab切换的逻辑
+    var handleTabSwitch = function () {
+        $('#canvas-tabs .tab-button').on('click', function () {
+            var $this = $(this);
+            // 如果已经是激活状态，则不执行任何操作
+            if ($this.hasClass('active')) {
+                return;
+            }
+
+            // 处理按钮的激活状态
+            $this.siblings().removeClass('active');
+            $this.addClass('active');
+
+            // 处理画布的显示/隐藏
+            var tabId = $this.data('tab');
+            $('#' + tabId).show();
+            $('.grid-stack').not('#' + tabId).hide();
+        });
+    };
+
     // 保存的时候计算x,y,w,h
     var conputedInitData = function (type, self) {
         if (type === 'save') {
@@ -433,5 +453,7 @@
         init('welcome', welcome);
         // 调用绑定
         bindComponentEvents();
+        // 处理Tab切换
+        handleTabSwitch();
     });
 })();