From 069b3c2c07d2d38f3c602d7792da2c449def17b7 Mon Sep 17 00:00:00 2001
From: ZF sun <34314687@qq.com>
Date: Fri, 6 Feb 2026 17:55:44 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=B8=BADIY=E6=A0=87=E7=AD=BE=E9=A1=B5?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=B7=BB=E5=8A=A0=E6=BB=9A=E5=8A=A8=E5=AE=B9?=
 =?UTF-8?q?=E5=99=A8=E5=92=8C=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components-diy/diy-tab.vue | 146 +++++++++++++++++++++----------------
 1 file changed, 84 insertions(+), 62 deletions(-)

diff --git a/components-diy/diy-tab.vue b/components-diy/diy-tab.vue
index f0703e9..5340fbf 100644
--- a/components-diy/diy-tab.vue
+++ b/components-diy/diy-tab.vue
@@ -1,14 +1,14 @@
 <template>
     <!-- DIY 标签页组件 - 支持多种样式和位置的标签页切换 -->
-    <view data-component-name="diy-tab" class="tab-diy-component-preview-container" :class="[containerClass, styleClass]" :style="containerStyle">
+    <view data-component-name="diy-tab" class="tab-diy-component-preview-container"
+        :class="[containerClass, styleClass]" :style="containerStyle">
         <!-- 顶部标签位置：标签导航 + 指示器 + 内容区域 -->
         <template v-if="mergedValue.tabPosition === 'top'">
             <!-- 标签导航 -->
             <view class="tab-nav" :style="tabNavStyle">
                 <view v-for="(tab, idx) in mergedValue.tabs" :key="tab.id || idx" class="tab-item"
                     :class="{ active: activeTab === idx }"
-                    :style="[tabItemStyle, activeTab === idx ? tabItemActiveStyle : {}]"
-                    @tap="switchTab(idx)">
+                    :style="[tabItemStyle, activeTab === idx ? tabItemActiveStyle : {}]" @tap="switchTab(idx)">
                     <text class="tab-text" :style="[tabTextStyle, activeTab === idx ? tabTextActiveStyle : {}]">
                         {{ getTabTitle(tab.title) }}
                     </text>
@@ -16,25 +16,26 @@
             </view>
 
             <!-- 指示器 -->
-            <view v-if="mergedValue.showIndicator" class="tab-indicator"
-                :style="{
-                    ...indicatorStyle,
-                    top: indicatorVars.top,
-                    left: indicatorVars.left,
-                    right: indicatorVars.right,
-                    bottom: indicatorVars.bottom,
-                    width: indicatorVars.width,
-                    height: indicatorVars.height
-                }"></view>
+            <view v-if="mergedValue.showIndicator" class="tab-indicator" :style="{
+                ...indicatorStyle,
+                top: indicatorVars.top,
+                left: indicatorVars.left,
+                right: indicatorVars.right,
+                bottom: indicatorVars.bottom,
+                width: indicatorVars.width,
+                height: indicatorVars.height
+            }"></view>
 
             <!-- 内容区域 -->
             <view class="tab-content" :style="contentStyle">
                 <view v-for="(tab, idx) in mergedValue.tabs" :key="'panel' + idx" class="tab-panel"
                     :class="{ active: activeTab === idx }"
                     :style="[panelStyle, activeTab === idx ? panelActiveStyle : {}]">
-                    <!-- 渲染每个标签下的组件 -->
-                    <diy-group v-if="tab.components" :diyData="{ value: tab.components, global: diyGlobal }"
-                        :scrollTop="tab.scrollTop || 0" />
+                    <view v-if="tab.components && tab.components.length > 0" class="tab-components">
+                        <!-- 渲染每个标签下的组件 -->
+                        <diy-group v-if="tab.components" :diyData="{ value: tab.components, global: diyGlobal }"
+                            :scrollTop="tab.scrollTop || 0" />
+                    </view>
                 </view>
             </view>
         </template>
@@ -46,30 +47,29 @@
                 <view v-for="(tab, idx) in mergedValue.tabs" :key="'panel' + idx" class="tab-panel"
                     :class="{ active: activeTab === idx }"
                     :style="[panelStyle, activeTab === idx ? panelActiveStyle : {}]">
-                    <!-- 渲染每个标签下的组件 -->
-                    <diy-group v-if="tab.components" :diyData="{ value: tab.components, global: diyGlobal }"
-                        :scrollTop="tab.scrollTop || 0" />
+                    <view v-if="tab.components && tab.components.length > 0" class="tab-components">
+                        <!-- 渲染每个标签下的组件 -->
+                        <diy-group v-if="tab.components" :diyData="{ value: tab.components, global: diyGlobal }"
+                            :scrollTop="tab.scrollTop || 0" />
+                    </view>
                 </view>
             </view>
-
             <!-- 指示器 -->
-            <view v-if="mergedValue.showIndicator" class="tab-indicator"
-                :style="{
-                    ...indicatorStyle,
-                    top: indicatorVars.top,
-                    left: indicatorVars.left,
-                    right: indicatorVars.right,
-                    bottom: indicatorVars.bottom,
-                    width: indicatorVars.width,
-                    height: indicatorVars.height
-                }"></view>
+            <view v-if="mergedValue.showIndicator" class="tab-indicator" :style="{
+                ...indicatorStyle,
+                top: indicatorVars.top,
+                left: indicatorVars.left,
+                right: indicatorVars.right,
+                bottom: indicatorVars.bottom,
+                width: indicatorVars.width,
+                height: indicatorVars.height
+            }"></view>
 
             <!-- 标签导航 -->
             <view class="tab-nav" :style="tabNavStyle">
                 <view v-for="(tab, idx) in mergedValue.tabs" :key="tab.id || idx" class="tab-item"
                     :class="{ active: activeTab === idx }"
-                    :style="[tabItemStyle, activeTab === idx ? tabItemActiveStyle : {}]"
-                    @tap="switchTab(idx)">
+                    :style="[tabItemStyle, activeTab === idx ? tabItemActiveStyle : {}]" @tap="switchTab(idx)">
                     <text class="tab-text" :style="[tabTextStyle, activeTab === idx ? tabTextActiveStyle : {}]">
                         {{ getTabTitle(tab.title) }}
                     </text>
@@ -84,8 +84,7 @@
                 <view class="tab-nav tab-nav-vertical" :style="tabNavStyle">
                     <view v-for="(tab, idx) in mergedValue.tabs" :key="tab.id || idx" class="tab-item tab-item-vertical"
                         :class="{ active: activeTab === idx }"
-                        :style="[tabItemStyle, activeTab === idx ? tabItemActiveStyle : {}]"
-                        @tap="switchTab(idx)">
+                        :style="[tabItemStyle, activeTab === idx ? tabItemActiveStyle : {}]" @tap="switchTab(idx)">
                         <text class="tab-text" :style="[tabTextStyle, activeTab === idx ? tabTextActiveStyle : {}]">
                             {{ getTabTitle(tab.title) }}
                         </text>
@@ -93,25 +92,26 @@
                 </view>
 
                 <!-- 左侧指示器 -->
-                <view v-if="mergedValue.showIndicator" class="tab-indicator tab-indicator-vertical"
-                    :style="{
-                        ...indicatorStyle,
-                        top: indicatorVars.top,
-                        left: indicatorVars.left,
-                        right: indicatorVars.right,
-                        bottom: indicatorVars.bottom,
-                        width: indicatorVars.width,
-                        height: indicatorVars.height
-                    }"></view>
+                <view v-if="mergedValue.showIndicator" class="tab-indicator tab-indicator-vertical" :style="{
+                    ...indicatorStyle,
+                    top: indicatorVars.top,
+                    left: indicatorVars.left,
+                    right: indicatorVars.right,
+                    bottom: indicatorVars.bottom,
+                    width: indicatorVars.width,
+                    height: indicatorVars.height
+                }"></view>
 
                 <!-- 右侧内容区域 -->
                 <view class="tab-content" :style="contentStyle">
                     <view v-for="(tab, idx) in mergedValue.tabs" :key="'panel' + idx" class="tab-panel"
                         :class="{ active: activeTab === idx }"
                         :style="[panelStyle, activeTab === idx ? panelActiveStyle : {}]">
-                        <!-- 渲染每个标签下的组件 -->
-                        <diy-group v-if="tab.components" :diyData="{ value: tab.components, global: diyGlobal }"
-                            :scrollTop="tab.scrollTop || 0" />
+                        <view v-if="tab.components && tab.components.length > 0" class="tab-components">
+                            <!-- 渲染每个标签下的组件 -->
+                            <diy-group v-if="tab.components" :diyData="{ value: tab.components, global: diyGlobal }"
+                                :scrollTop="tab.scrollTop || 0" />
+                        </view>
                     </view>
                 </view>
             </view>
@@ -125,30 +125,30 @@
                     <view v-for="(tab, idx) in mergedValue.tabs" :key="'panel' + idx" class="tab-panel"
                         :class="{ active: activeTab === idx }"
                         :style="[panelStyle, activeTab === idx ? panelActiveStyle : {}]">
-                        <!-- 渲染每个标签下的组件 -->
-                        <diy-group v-if="tab.components" :diyData="{ value: tab.components, global: diyGlobal }"
-                            :scrollTop="tab.scrollTop || 0" />
+                        <view v-if="tab.components && tab.components.length > 0" class="tab-components">
+                            <!-- 渲染每个标签下的组件 -->
+                            <diy-group v-if="tab.components" :diyData="{ value: tab.components, global: diyGlobal }"
+                                :scrollTop="tab.scrollTop || 0" />
+                        </view>
                     </view>
                 </view>
 
                 <!-- 右侧指示器 -->
-                <view v-if="mergedValue.showIndicator" class="tab-indicator tab-indicator-vertical"
-                    :style="{
-                        ...indicatorStyle,
-                        top: indicatorVars.top,
-                        left: indicatorVars.left,
-                        right: indicatorVars.right,
-                        bottom: indicatorVars.bottom,
-                        width: indicatorVars.width,
-                        height: indicatorVars.height
-                    }"></view>
+                <view v-if="mergedValue.showIndicator" class="tab-indicator tab-indicator-vertical" :style="{
+                    ...indicatorStyle,
+                    top: indicatorVars.top,
+                    left: indicatorVars.left,
+                    right: indicatorVars.right,
+                    bottom: indicatorVars.bottom,
+                    width: indicatorVars.width,
+                    height: indicatorVars.height
+                }"></view>
 
                 <!-- 右侧标签导航 -->
                 <view class="tab-nav tab-nav-vertical" :style="tabNavStyle">
                     <view v-for="(tab, idx) in mergedValue.tabs" :key="tab.id || idx" class="tab-item tab-item-vertical"
                         :class="{ active: activeTab === idx }"
-                        :style="[tabItemStyle, activeTab === idx ? tabItemActiveStyle : {}]"
-                        @tap="switchTab(idx)">
+                        :style="[tabItemStyle, activeTab === idx ? tabItemActiveStyle : {}]" @tap="switchTab(idx)">
                         <text class="tab-text" :style="[tabTextStyle, activeTab === idx ? tabTextActiveStyle : {}]">
                             {{ getTabTitle(tab.title) }}
                         </text>
@@ -1073,6 +1073,28 @@ export default {
     @media (prefers-reduced-motion: reduce) {
         transition: none;
     }
+
+    .tab-components {
+        width: 100%;
+        height: 100%;
+        overflow-y: auto;
+        box-sizing: border-box;
+        padding-right: 8px;
+
+        ::-webkit-scrollbar {
+            width: 6px;
+        }
+
+        ::-webkit-scrollbar-track {
+            background: rgba(0, 0, 0, 0.05);
+            border-radius: 3px;
+        }
+
+        ::-webkit-scrollbar-thumb:hover {
+            background: rgba(0, 0, 0, 0.3);
+        }
+    }
+
 }
 
 // ===== 默认样式 =====