From b10e6ead412fb9547c4f2150c45ed915302330d9 Mon Sep 17 00:00:00 2001
From: lichaojun <lichaojun@cdqcp.com>
Date: Fri, 2 Jan 2026 07:47:50 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=8B=96=E6=8B=BD=E5=B8=83=E5=B1=80-?=
 =?UTF-8?q?=E6=AC=A2=E8=BF=8E=E9=A1=B5=E4=B8=8E=E9=A6=96=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 demoHtml/flex/css/index.css | 39 +++++++++++++++++++++++++++++++++++++
 demoHtml/flex/index.html    |  4 ++++
 demoHtml/flex/js/index.js   | 22 +++++++++++++++++++++
 3 files changed, 65 insertions(+)

diff --git a/demoHtml/flex/css/index.css b/demoHtml/flex/css/index.css
index fa2fb71..76ee2bd 100644
--- a/demoHtml/flex/css/index.css
+++ b/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;
diff --git a/demoHtml/flex/index.html b/demoHtml/flex/index.html
index e77e9b2..1522943 100644
--- a/demoHtml/flex/index.html
+++ b/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> -->
diff --git a/demoHtml/flex/js/index.js b/demoHtml/flex/js/index.js
index bfe6fff..7d94ab5 100644
--- a/demoHtml/flex/js/index.js
+++ b/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();
     });
 })();