From 58dea3d536942357bb8a2f9097f05455820993eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Thu, 7 Aug 2025 18:50:47 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E5=A4=9A=E6=8C=89=E9=92=AE=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=E6=A0=B7=E5=BC=8F=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../model-tabs-magic-styles.vue               | 23 +++++++++++++++++++
 .../model-tabs/model-tabs-styles.vue          | 23 +++++++++++++++++++
 src/config/const/tabs-carousel.ts             |  9 ++++++++
 src/config/const/tabs-magic.ts                |  9 ++++++++
 src/config/const/tabs.ts                      |  9 ++++++++
 5 files changed, 73 insertions(+)

diff --git a/src/components/model-tabs-magic/model-tabs-magic-styles.vue b/src/components/model-tabs-magic/model-tabs-magic-styles.vue
index d01b17b9..97eb3298 100644
--- a/src/components/model-tabs-magic/model-tabs-magic-styles.vue
+++ b/src/components/model-tabs-magic/model-tabs-magic-styles.vue
@@ -91,6 +91,24 @@
                 <el-form-item label="图标大小">
                     <slider v-model="form.more_icon_size" :max="100"></slider>
                 </el-form-item>
+                <el-form-item label="按钮文字">
+                    <div class="flex-col gap-10 w h">
+                        <div class="flex-row gap-20">
+                            <span class="size-12 cr-9">未选样式</span>
+                            <color-picker v-model="form.more_button_text_selected_color" default-color="#666"></color-picker>
+                        </div>
+                        <div class="flex-row gap-20">
+                            <span class="size-12 cr-9">选中样式</span>
+                            <color-picker v-model="form.more_button_text_color" default-color="#666"></color-picker>
+                        </div>
+                        <div class="flex-row gap-20">
+                            <span class="size-12 cr-9">选中背景</span>
+                            <div class="flex-1">
+                                <mult-color-picker :value="form.more_button_color_list" :type="form.more_button_direction" @update:value="more_button_color_picker_event"></mult-color-picker>
+                            </div>
+                        </div>
+                    </div>
+                </el-form-item>
             </card-container>
             <div class="divider-line"></div>
             <card-container>
@@ -144,5 +162,10 @@ const tabs_bg_mult_color_picker_event = (arry: color_list[], type: number) => {
     form.value.tabs_bg_color_list = arry;
     form.value.tabs_bg_direction = type.toString();
 };
+// 更多选中按钮样式
+const more_button_color_picker_event = (arry: color_list[], type: number) => {
+    form.value.more_button_color_list = arry;
+    form.value.more_button_direction = type.toString();
+};
 </script>
 <style lang="scss" scoped></style>
diff --git a/src/components/model-tabs/model-tabs-styles.vue b/src/components/model-tabs/model-tabs-styles.vue
index 7c42fb56..6bf880a0 100644
--- a/src/components/model-tabs/model-tabs-styles.vue
+++ b/src/components/model-tabs/model-tabs-styles.vue
@@ -93,6 +93,24 @@
                 <el-form-item label="图标大小">
                     <slider v-model="form.more_icon_size" :max="100"></slider>
                 </el-form-item>
+                <el-form-item label="按钮文字">
+                    <div class="flex-col gap-10 w h">
+                        <div class="flex-row gap-20">
+                            <span class="size-12 cr-9">未选样式</span>
+                            <color-picker v-model="form.more_button_text_selected_color" default-color="#666"></color-picker>
+                        </div>
+                        <div class="flex-row gap-20">
+                            <span class="size-12 cr-9">选中样式</span>
+                            <color-picker v-model="form.more_button_text_color" default-color="#666"></color-picker>
+                        </div>
+                        <div class="flex-row gap-20">
+                            <span class="size-12 cr-9">选中背景</span>
+                            <div class="flex-1">
+                                <mult-color-picker :value="form.more_button_color_list" :type="form.more_button_direction" @update:value="more_button_color_picker_event"></mult-color-picker>
+                            </div>
+                        </div>
+                    </div>
+                </el-form-item>
             </card-container>
         </el-form>
         <template v-if="isCommonStyle">
@@ -145,5 +163,10 @@ const tabs_bg_mult_color_picker_event = (arry: color_list[], type: number) => {
     form.value.tabs_bg_color_list = arry;
     form.value.tabs_bg_direction = type.toString();
 };
+// 更多选中按钮样式
+const more_button_color_picker_event = (arry: color_list[], type: number) => {
+    form.value.more_button_color_list = arry;
+    form.value.more_button_direction = type.toString();
+};
 </script>
 <style lang="scss" scoped></style>
diff --git a/src/config/const/tabs-carousel.ts b/src/config/const/tabs-carousel.ts
index f581d7a0..f270acb2 100644
--- a/src/config/const/tabs-carousel.ts
+++ b/src/config/const/tabs-carousel.ts
@@ -93,6 +93,10 @@ interface defaultTabs {
         more_icon_class: string;
         more_icon_color: string;
         more_icon_size: number;
+        more_button_text_color: string;
+        more_button_text_selected_color: string;
+        more_button_direction: string;
+        more_button_color_list: color_list[];
         data_spacing: number;
         radius: number;
         radius_top_left: number;
@@ -332,6 +336,11 @@ const defaultTabs: defaultTabs = {
         more_icon_class: 'category-more',
         more_icon_color: '#000',
         more_icon_size: 14,
+        // 更多弹出框的样式
+        more_button_text_color: '#666',
+        more_button_text_selected_color: '#666',
+        more_button_direction: '90deg',
+        more_button_color_list: [{ color: '#eee', color_percentage: undefined }],
         // 选项卡与轮播之间的间距
         data_spacing: 0,
         // 图片圆角
diff --git a/src/config/const/tabs-magic.ts b/src/config/const/tabs-magic.ts
index e3dda665..646e9400 100644
--- a/src/config/const/tabs-magic.ts
+++ b/src/config/const/tabs-magic.ts
@@ -93,6 +93,10 @@ interface defaultTabs {
         more_icon_class: string;
         more_icon_color: string;
         more_icon_size: number;
+        more_button_text_color: string;
+        more_button_text_selected_color: string;
+        more_button_direction: string;
+        more_button_color_list: color_list[];
         data_spacing: number;
         common_style: object;
     };
@@ -440,6 +444,11 @@ const defaultTabs: defaultTabs = {
         more_icon_class: 'category-more',
         more_icon_color: '#000',
         more_icon_size: 14,
+        // 更多弹出框的样式
+        more_button_text_color: '#666',
+        more_button_text_selected_color: '#666',
+        more_button_direction: '90deg',
+        more_button_color_list: [{ color: '#eee', color_percentage: undefined }],
         // 选项卡与轮播之间的间距
         data_spacing: 0,
         // 公共样式
diff --git a/src/config/const/tabs.ts b/src/config/const/tabs.ts
index 52a152ee..d08e8ce0 100644
--- a/src/config/const/tabs.ts
+++ b/src/config/const/tabs.ts
@@ -55,6 +55,10 @@ interface defaultTabs {
         more_icon_class: string;
         more_icon_color: string;
         more_icon_size: number;
+        more_button_text_color: string;
+        more_button_text_selected_color: string;
+        more_button_direction: string;
+        more_button_color_list: color_list[];
         common_style: object;
     };
 }
@@ -126,6 +130,11 @@ const defaultTabs: defaultTabs = {
         more_icon_class: 'category-more',
         more_icon_color: '#000',
         more_icon_size: 14,
+        // 更多弹出框的样式
+        more_button_text_color: '#666',
+        more_button_text_selected_color: '#666',
+        more_button_direction: '90deg',
+        more_button_color_list: [{ color: '#eee', color_percentage: undefined }],
         common_style: {
             ...defaultCommon,
             color_list: [{ color: '#fff', color_percentage: undefined }],