From 5dba8071e42f42bac028d0256598fc0122858d24 Mon Sep 17 00:00:00 2001
From: ZF sun <34314687@qq.com>
Date: Sat, 7 Feb 2026 16:16:43 +0800
Subject: [PATCH] =?UTF-8?q?refactor(diy-tab):=20=E7=BB=9F=E4=B8=80?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E7=BB=91=E5=AE=9A=E8=AF=AD=E6=B3=95=E4=B8=BA?=
 =?UTF-8?q?=E6=95=B0=E7=BB=84=E5=BD=A2=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

将模板中的样式绑定从对象展开语法改为数组形式，保持代码风格一致
---
 components-diy/diy-tab.vue | 98 +++++++++++++++++++++-----------------
 1 file changed, 53 insertions(+), 45 deletions(-)

diff --git a/components-diy/diy-tab.vue b/components-diy/diy-tab.vue
index 245c3dd..0a82ac4 100644
--- a/components-diy/diy-tab.vue
+++ b/components-diy/diy-tab.vue
@@ -1,11 +1,11 @@
 <template>
     <!-- DIY 标签页组件 - 支持多种样式和位置的标签页切换 -->
     <view data-component-name="diy-tab" class="tab-diy-component-preview-container"
-        :class="[containerClass, styleClass]" :style="containerStyle">
+        :class="[containerClass, styleClass]" :style="[containerStyle]">
         <!-- 顶部标签位置：标签导航 + 指示器 + 内容区域 -->
         <template v-if="mergedValue.tabPosition === 'top'">
             <!-- 标签导航 -->
-            <view class="tab-nav" :style="tabNavStyle">
+            <view class="tab-nav" :style="[tabNavStyle]">
                 <view v-for="(tab, idx) in mergedValue.tabs" :key="getTabKey(tab, idx)" class="tab-item"
                     :class="{ active: activeTab === idx }"
                     :style="[tabItemStyle, activeTab === idx ? tabItemActiveStyle : {}]" @tap="switchTab(idx)">
@@ -16,18 +16,20 @@
             </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 class="tab-content" :style="[contentStyle]">
                 <view v-for="(tab, idx) in mergedValue.tabs" :key="getPanelKey(tab, idx)" class="tab-panel"
                     :class="{ active: activeTab === idx }"
                     :style="[panelStyle, activeTab === idx ? panelActiveStyle : {}]">
@@ -43,7 +45,7 @@
         <!-- 底部标签位置：内容区域 + 指示器 + 标签导航 -->
         <template v-else-if="mergedValue.tabPosition === 'bottom'">
             <!-- 内容区域 -->
-            <view class="tab-content" :style="contentStyle">
+            <view class="tab-content" :style="[contentStyle]">
                 <view v-for="(tab, idx) in mergedValue.tabs" :key="getPanelKey(tab, idx)" class="tab-panel"
                     :class="{ active: activeTab === idx }"
                     :style="[panelStyle, activeTab === idx ? panelActiveStyle : {}]">
@@ -55,18 +57,20 @@
                 </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 class="tab-nav" :style="[tabNavStyle]">
                 <view v-for="(tab, idx) in mergedValue.tabs" :key="getTabKey(tab, idx)" class="tab-item"
                     :class="[{ active: activeTab === idx }, { 'hover-animation': mergedValue.animation }]"
                     :style="[tabItemStyle, activeTab === idx ? tabItemActiveStyle : {}, tabItemHoverStyle]" @tap="switchTab(idx)">
@@ -81,7 +85,7 @@
         <template v-else-if="mergedValue.tabPosition === 'left'">
             <view class="tab-layout-horizontal">
                 <!-- 左侧标签导航 -->
-                <view class="tab-nav tab-nav-vertical" :style="tabNavStyle">
+                <view class="tab-nav tab-nav-vertical" :style="[tabNavStyle]">
                     <view v-for="(tab, idx) in mergedValue.tabs" :key="getTabKey(tab, idx)" class="tab-item tab-item-vertical"
                         :class="[{ active: activeTab === idx }, { 'hover-animation': mergedValue.animation }]"
                         :style="[tabItemStyle, activeTab === idx ? tabItemActiveStyle : {}, tabItemHoverStyle]" @tap="switchTab(idx)">
@@ -92,18 +96,20 @@
                 </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 class="tab-content" :style="[contentStyle]">
                     <view v-for="(tab, idx) in mergedValue.tabs" :key="getPanelKey(tab, idx)" class="tab-panel"
                         :class="{ active: activeTab === idx }"
                         :style="[panelStyle, activeTab === idx ? panelActiveStyle : {}]">
@@ -121,7 +127,7 @@
         <template v-else-if="mergedValue.tabPosition === 'right'">
             <view class="tab-layout-horizontal">
                 <!-- 左侧内容区域 -->
-                <view class="tab-content" :style="contentStyle">
+                <view class="tab-content" :style="[contentStyle]">
                     <view v-for="(tab, idx) in mergedValue.tabs" :key="getPanelKey(tab, idx)" class="tab-panel"
                         :class="{ active: activeTab === idx }"
                         :style="[panelStyle, activeTab === idx ? panelActiveStyle : {}]">
@@ -134,18 +140,20 @@
                 </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 class="tab-nav tab-nav-vertical" :style="[tabNavStyle]">
                     <view v-for="(tab, idx) in mergedValue.tabs" :key="getTabKey(tab, idx)" class="tab-item tab-item-vertical"
                         :class="[{ active: activeTab === idx }, { 'hover-animation': mergedValue.animation }]"
                         :style="[tabItemStyle, activeTab === idx ? tabItemActiveStyle : {}, tabItemHoverStyle]" @tap="switchTab(idx)">