components-diy/diy-tab.vue

@@ -80,7 +80,8 @@ export default {
     computed: {
         // 合并默认值和传入值
         mergedValue() {
-            const defaults = {
+            // 标签页数据配置
+            const tabsConfig = {
                 /**
                  * 标签页数据配置
                  * @type {Array<{title: string|Object, scrollTop: number, components: Array}>}
@@ -105,8 +106,11 @@ export default {
                         scrollTop: 0,
                         components: []
                     }
-                ],
+                ]
+            };
 
+            // 基础配置
+            const baseConfig = {
                 /**
                  * 是否显示指示器
                  * @type {boolean}
@@ -128,8 +132,11 @@ export default {
                  * @default 'top'
                  * @values 'top', 'bottom', 'left', 'right'
                  */
-                tabPosition: 'top',
+                tabPosition: 'top'
+            };
 
+            // 导航栏样式
+            const navConfig = {
                 /**
                  * 标签栏高度
                  * @type {number|string}
@@ -166,8 +173,11 @@ export default {
                  * • 百分比: '5% 10%' (相对父元素宽度)
                  * @note 卡片样式下会忽略此配置，自动使用基于 tabGap 的内边距
                  */
-                tabPadding: '0',
+                tabPadding: '0'
+            };
 
+            // 标签项样式
+            const tabItemConfig = {
                 /**
                  * 标签间距
                  * @type {number|string}
@@ -209,8 +219,11 @@ export default {
                  * @default '#666666'
                  * @format CSS颜色值
                  */
-                inactiveColor: '#666666',
+                inactiveColor: '#666666'
+            };
 
+            // 卡片样式
+            const cardConfig = {
                 /**
                  * 卡片默认背景色
                  * @type {string}
@@ -265,8 +278,11 @@ export default {
                  * @default '0 10px'
                  * @format CSS padding值
                  */
-                cardPadding: '0 10px',
+                cardPadding: '0 10px'
+            };
 
+            // 下划线样式
+            const underlineConfig = {
                 /**
                  * 下划线颜色
                  * @type {string}
@@ -297,8 +313,11 @@ export default {
                  * @default 10
                  * @unit 像素
                  */
-                underlineMargin: 10,
+                underlineMargin: 10
+            };
 
+            // 指示器样式
+            const indicatorConfig = {
                 /**
                  * 指示器颜色
                  * @type {string}
@@ -313,8 +332,11 @@ export default {
                  * @default 2
                  * @unit 像素
                  */
-                indicatorHeight: 2,
+                indicatorHeight: 2
+            };
 
+            // 内容区域样式
+            const contentConfig = {
                 /**
                  * 内容区内边距
                  * @type {number|string}
@@ -356,8 +378,11 @@ export default {
                  * • CSS变量: 'var(--content-min-height)'
                  * • 百分比: '50%' (相对父元素高度)
                  */
-                contentMinHeight: 200,
+                contentMinHeight: 200
+            };
 
+            // 自定义样式配置
+            const customStylesConfig = {
                 /**
                  * 自定义样式配置
                  * @type {Object}
@@ -397,6 +422,19 @@ export default {
                 }
             };
 
+            // 合并所有配置
+            const defaults = {
+                ...tabsConfig,
+                ...baseConfig,
+                ...navConfig,
+                ...tabItemConfig,
+                ...cardConfig,
+                ...underlineConfig,
+                ...indicatorConfig,
+                ...contentConfig,
+                ...customStylesConfig
+            };
+
             // 使用展开运算符合并默认值和传入值
             return { ...defaults, ...this.value };
         },