From 3ddcc665b897cd9b801d1c4918be375e9314fe57 Mon Sep 17 00:00:00 2001
From: ZF sun <34314687@qq.com>
Date: Sat, 7 Feb 2026 14:11:51 +0800
Subject: [PATCH] =?UTF-8?q?refactor(diy-tab):=20=E7=BB=9F=E4=B8=80?=
 =?UTF-8?q?=E4=BD=BF=E7=94=A8=E7=94=9F=E6=88=90=E5=87=BD=E6=95=B0=E8=8E=B7?=
 =?UTF-8?q?=E5=8F=96tab=E5=92=8Cpanel=E7=9A=84key?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

使用getTabKey和getPanelKey方法统一生成key，提高代码可维护性
---
 components-diy/diy-tab.vue | 24 ++++++++++++++++--------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/components-diy/diy-tab.vue b/components-diy/diy-tab.vue
index 94ba6af..41552b1 100644
--- a/components-diy/diy-tab.vue
+++ b/components-diy/diy-tab.vue
@@ -6,7 +6,7 @@
         <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"
+                <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)">
                     <text class="tab-text" :style="[tabTextStyle, activeTab === idx ? tabTextActiveStyle : {}]">
@@ -28,7 +28,7 @@
 
             <!-- 内容区域 -->
             <view class="tab-content" :style="contentStyle">
-                <view v-for="(tab, idx) in mergedValue.tabs" :key="'panel' + idx" class="tab-panel"
+                <view v-for="(tab, idx) in mergedValue.tabs" :key="getPanelKey(tab, idx)" class="tab-panel"
                     :class="{ active: activeTab === idx }"
                     :style="[panelStyle, activeTab === idx ? panelActiveStyle : {}]">
                     <view v-if="tab.components && tab.components.length > 0" class="tab-components">
@@ -44,7 +44,7 @@
         <template v-else-if="mergedValue.tabPosition === 'bottom'">
             <!-- 内容区域 -->
             <view class="tab-content" :style="contentStyle">
-                <view v-for="(tab, idx) in mergedValue.tabs" :key="'panel' + idx" class="tab-panel"
+                <view v-for="(tab, idx) in mergedValue.tabs" :key="getPanelKey(tab, idx)" class="tab-panel",
                     :class="{ active: activeTab === idx }"
                     :style="[panelStyle, activeTab === idx ? panelActiveStyle : {}]">
                     <view v-if="tab.components && tab.components.length > 0" class="tab-components">
@@ -67,7 +67,7 @@
 
             <!-- 标签导航 -->
             <view class="tab-nav" :style="tabNavStyle">
-                <view v-for="(tab, idx) in mergedValue.tabs" :key="tab.id || idx" class="tab-item"
+                <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)">
                     <text class="tab-text" :style="[tabTextStyle, activeTab === idx ? tabTextActiveStyle : {}, mergedValue.animation ? tabTextHoverStyle : {}]">
@@ -82,7 +82,7 @@
             <view class="tab-layout-horizontal">
                 <!-- 左侧标签导航 -->
                 <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"
+                    <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)">
                         <text class="tab-text" :style="[tabTextStyle, activeTab === idx ? tabTextActiveStyle : {}, mergedValue.animation ? tabTextHoverStyle : {}]">
@@ -104,7 +104,7 @@
 
                 <!-- 右侧内容区域 -->
                 <view class="tab-content" :style="contentStyle">
-                    <view v-for="(tab, idx) in mergedValue.tabs" :key="'panel' + idx" class="tab-panel"
+                    <view v-for="(tab, idx) in mergedValue.tabs" :key="getPanelKey(tab, idx)" class="tab-panel",
                         :class="{ active: activeTab === idx }"
                         :style="[panelStyle, activeTab === idx ? panelActiveStyle : {}]">
                         <view v-if="tab.components && tab.components.length > 0" class="tab-components">
@@ -122,7 +122,7 @@
             <view class="tab-layout-horizontal">
                 <!-- 左侧内容区域 -->
                 <view class="tab-content" :style="contentStyle">
-                    <view v-for="(tab, idx) in mergedValue.tabs" :key="'panel' + idx" class="tab-panel"
+                    <view v-for="(tab, idx) in mergedValue.tabs" :key="getPanelKey(tab, idx)" class="tab-panel",
                         :class="{ active: activeTab === idx }"
                         :style="[panelStyle, activeTab === idx ? panelActiveStyle : {}]">
                         <view v-if="tab.components && tab.components.length > 0" class="tab-components">
@@ -146,7 +146,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"
+                    <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)">
                         <text class="tab-text" :style="[tabTextStyle, activeTab === idx ? tabTextActiveStyle : {}, mergedValue.animation ? tabTextHoverStyle : {}]">
@@ -703,6 +703,14 @@ export default {
 
     // 组件方法
     methods: {
+        // 获取面板key
+        getPanelKey(tab, idx) {
+            return 'panel-' + (tab.id || idx);
+        },
+        // 获取标签项key
+        getTabKey(tab, idx) {
+            return 'tab-' + tab.id || idx;
+        },
         // 更新指示器位置（与后端版本一致）
         updateIndicatorPosition() {
             this.$nextTick(() => {