From b91a675cd15daaad5045bbe7cfea4f291decbaca Mon Sep 17 00:00:00 2001
From: zoujing <kidevelop@163.com>
Date: Tue, 28 Apr 2026 16:29:41 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20tab=E7=9A=84=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AiTabSwitch/index.vue         | 16 ++++++++++------
 src/components/AiTabSwitch/styles/index.scss | 17 ++++++++++++++++-
 2 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/src/components/AiTabSwitch/index.vue b/src/components/AiTabSwitch/index.vue
index 58b7d19..8514c45 100644
--- a/src/components/AiTabSwitch/index.vue
+++ b/src/components/AiTabSwitch/index.vue
@@ -13,7 +13,9 @@
             class="tab-image"
             mode="scaleToFill"
           />
-          <text class="tab-text">探索发现</text>
+          <view class="tab-label">
+            <text class="tab-text">探索发现</text>
+          </view>
         </view>
       </view>
 
@@ -29,11 +31,13 @@
             class="tab-image"
             mode="scaleToFill"
           />
-          <text class="tab-text">AI伴游</text>
-          <view
-            v-if="showDot"
-            :class="['status-dot', modelValue === 1 ? 'status-dot--active' : 'status-dot--inactive']"
-          ></view>
+          <view class="tab-label">
+            <text class="tab-text">AI伴游</text>
+            <view
+              v-if="showDot"
+              :class="['status-dot', modelValue === 1 ? 'status-dot--active' : 'status-dot--inactive']"
+            ></view>
+          </view>
         </view>
       </view>
     </view>
diff --git a/src/components/AiTabSwitch/styles/index.scss b/src/components/AiTabSwitch/styles/index.scss
index 6455e0c..6b1b96d 100644
--- a/src/components/AiTabSwitch/styles/index.scss
+++ b/src/components/AiTabSwitch/styles/index.scss
@@ -39,7 +39,6 @@
   font-size: 18px;
   font-weight: 500;
   color: rgba(255, 255, 255, 0.65);
-  z-index: 20;
 }
 
 .tab-image {
@@ -55,6 +54,14 @@
   z-index: 5;
 }
 
+.tab-label {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  z-index: 20;
+}
+
 .tab-item.active .tab-text {
   color: #2e312f;
   font-weight: bold;
@@ -64,10 +71,18 @@
   margin-right: -24px;
 }
 
+.is-left .tab-label {
+  transform: translateX(-20px);
+}
+
 .is-right {
   margin-left: -24px;
 }
 
+.is-right .tab-label {
+  transform: translateX(20px);
+}
+
 .status-dot {
   display: inline-block;
   margin-left: 6px;