From eee8a52759d802b8fcf6593e7a2f8c1d8c095202 Mon Sep 17 00:00:00 2001
From: sws <1141121512@qq.com>
Date: Thu, 10 Oct 2024 11:46:13 +0800
Subject: [PATCH] =?UTF-8?q?1.=E4=BB=A3=E7=A0=81=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/bg-btn-style/index.vue    | 18 +++++++++
 src/components/common/common-styles/index.vue | 18 +--------
 .../components/tabs-styles.vue                | 24 ++---------
 .../model-notice/model-notice-styles.vue      | 18 ++-------
 .../model-search/model-search-styles.vue      | 34 +++-------------
 .../model-seckill/model-seckill-styles.vue    | 22 ++--------
 src/components/page-settings/page-styles.vue  | 40 ++-----------------
 7 files changed, 40 insertions(+), 134 deletions(-)
 create mode 100644 src/components/base/bg-btn-style/index.vue

diff --git a/src/components/base/bg-btn-style/index.vue b/src/components/base/bg-btn-style/index.vue
new file mode 100644
index 00000000..fa638771
--- /dev/null
+++ b/src/components/base/bg-btn-style/index.vue
@@ -0,0 +1,18 @@
+<template>
+    <el-radio-group v-model="modelValue" is-button>
+        <el-tooltip v-for="item in radio_list" :key="item.value" :content="item.name" placement="top" effect="light">
+            <el-radio-button :value="item.value"><icon name="spread-over"></icon></el-radio-button>
+        </el-tooltip>
+    </el-radio-group>
+</template>
+
+<script setup lang="ts">
+const modelValue = defineModel({ type: String, default: '' });
+const radio_list = [
+    { name: '居上', value: '0' },
+    { name: '居下', value: '1' },
+    { name: '居中', value: '2' },
+    { name: '平铺', value: '3' },
+    { name: '铺满', value: '4' },
+];
+</script>
diff --git a/src/components/common/common-styles/index.vue b/src/components/common/common-styles/index.vue
index df78bbce..7214d300 100644
--- a/src/components/common/common-styles/index.vue
+++ b/src/components/common/common-styles/index.vue
@@ -10,23 +10,7 @@
                         <mult-color-picker :value="form.color_list" :type="form.direction" @update:value="mult_color_picker_event"></mult-color-picker>
                         <div class="flex-row jc-sb align-c">
                             <div class="size-12">背景图</div>
-                            <el-radio-group v-model="form.background_img_style" is-button @change="background_img_style_change">
-                                <el-tooltip content="居上" placement="top" effect="light">
-                                    <el-radio-button value="0"><icon name="spread-over"></icon></el-radio-button>
-                                </el-tooltip>
-                                <el-tooltip content="居下" placement="top" effect="light">
-                                    <el-radio-button value="1"><icon name="spread-over"></icon></el-radio-button>
-                                </el-tooltip>
-                                <el-tooltip content="居中" placement="top" effect="light">
-                                    <el-radio-button value="2"><icon name="single-sheet"></icon></el-radio-button>
-                                </el-tooltip>
-                                <el-tooltip content="平铺" placement="top" effect="light">
-                                    <el-radio-button value="3"><icon name="tile"></icon></el-radio-button>
-                                </el-tooltip>
-                                <el-tooltip content="铺满" placement="top" effect="light">
-                                    <el-radio-button value="4"><icon name="spread-over"></icon></el-radio-button>
-                                </el-tooltip>
-                            </el-radio-group>
+                            <bg-btn-style v-model="form.background_img_style"></bg-btn-style>
                         </div>
                         <upload v-model="form.background_img" :limit="1" @update:model-value="background_img_change"></upload>
                     </div>
diff --git a/src/components/model-data-magic/components/tabs-styles.vue b/src/components/model-data-magic/components/tabs-styles.vue
index 8c6a6105..cdad8d91 100644
--- a/src/components/model-data-magic/components/tabs-styles.vue
+++ b/src/components/model-data-magic/components/tabs-styles.vue
@@ -6,17 +6,7 @@
                 <mult-color-picker :key="form.carouselKey" :value="form.color_list" :type="form.direction" @update:value="mult_color_picker_event"></mult-color-picker>
                 <div class="flex-row jc-sb align-c">
                     <div class="size-12">背景图</div>
-                    <el-radio-group v-model="form.background_img_style" is-button>
-                        <el-tooltip content="单张" placement="top" effect="light">
-                            <el-radio-button :value="0"><icon name="single-sheet"></icon></el-radio-button>
-                        </el-tooltip>
-                        <el-tooltip content="平铺" placement="top" effect="light">
-                            <el-radio-button :value="1"><icon name="tile"></icon></el-radio-button>
-                        </el-tooltip>
-                        <el-tooltip content="铺满" placement="top" effect="light">
-                            <el-radio-button :value="2"><icon name="spread-over"></icon></el-radio-button>
-                        </el-tooltip>
-                    </el-radio-group>
+                    <bg-btn-style v-model="form.background_img_style"></bg-btn-style>
                 </div>
                 <upload v-model="form.background_img" :limit="1"></upload>
             </div>
@@ -68,7 +58,7 @@ const props = defineProps({
     isShowTitle: {
         type: Boolean,
         default: true,
-    }
+    },
 });
 
 const form = ref(props.value);
@@ -79,19 +69,13 @@ const mult_color_picker_event = (arry: string[], type: number) => {
     form.value.direction = type.toString();
 };
 const chunk_padding_change = (padding: any) => {
-    form.value.chunk_padding = Object.assign(form.value.chunk_padding, pick(padding, [
-        'padding', 
-        'padding_top', 
-        'padding_bottom', 
-        'padding_left', 
-        'padding_right'
-    ]));
+    form.value.chunk_padding = Object.assign(form.value.chunk_padding, pick(padding, ['padding', 'padding_top', 'padding_bottom', 'padding_left', 'padding_right']));
 };
 
 watchEffect(() => {
     form.value = props.value;
     tabs_content.value = props.content;
-})
+});
 </script>
 <style lang="scss" scoped>
 .card.mb-8 {
diff --git a/src/components/model-notice/model-notice-styles.vue b/src/components/model-notice/model-notice-styles.vue
index ca0f2ae7..4f371948 100644
--- a/src/components/model-notice/model-notice-styles.vue
+++ b/src/components/model-notice/model-notice-styles.vue
@@ -58,17 +58,7 @@
                         <mult-color-picker :value="form.container_color_list" :type="form.container_direction" @update:value="mult_color_picker_event"></mult-color-picker>
                         <div class="flex-row jc-sb align-c">
                             <div class="size-12">背景图</div>
-                            <el-radio-group v-model="form.container_background_img_style" is-button>
-                                <el-tooltip content="单张" placement="top" effect="light">
-                                    <el-radio-button :value="0"><icon name="single-sheet"></icon></el-radio-button>
-                                </el-tooltip>
-                                <el-tooltip content="平铺" placement="top" effect="light">
-                                    <el-radio-button :value="1"><icon name="tile"></icon></el-radio-button>
-                                </el-tooltip>
-                                <el-tooltip content="铺满" placement="top" effect="light">
-                                    <el-radio-button :value="2"><icon name="spread-over"></icon></el-radio-button>
-                                </el-tooltip>
-                            </el-radio-group>
+                            <bg-btn-style v-model="form.container_background_img_style"></bg-btn-style>
                         </div>
                         <upload v-model="form.container_background_img" :limit="1"></upload>
                     </div>
@@ -83,7 +73,7 @@
     </div>
 </template>
 <script setup lang="ts">
-import { isEmpty } from "lodash";
+import { isEmpty } from 'lodash';
 const props = defineProps({
     value: {
         type: Object,
@@ -92,12 +82,12 @@ const props = defineProps({
     content: {
         type: Object,
         default: () => {},
-    }
+    },
 });
 
 const state = reactive({
     form: props.value,
-    substance: props.content
+    substance: props.content,
 });
 // 如果需要解构，确保使用toRefs
 const { form, substance } = toRefs(state);
diff --git a/src/components/model-search/model-search-styles.vue b/src/components/model-search/model-search-styles.vue
index 8aa3442c..2e6179c9 100644
--- a/src/components/model-search/model-search-styles.vue
+++ b/src/components/model-search/model-search-styles.vue
@@ -22,17 +22,7 @@
                             <mult-color-picker :value="form.search_botton_color_list" :type="form.search_botton_direction" @update:value="mult_color_picker_event"></mult-color-picker>
                             <div class="flex-row jc-sb align-c">
                                 <div class="size-12">背景图</div>
-                                <el-radio-group v-model="form.search_botton_background_img_style" is-button>
-                                    <el-tooltip content="单张" placement="top" effect="light">
-                                        <el-radio-button :value="0"><icon name="single-sheet"></icon></el-radio-button>
-                                    </el-tooltip>
-                                    <el-tooltip content="平铺" placement="top" effect="light">
-                                        <el-radio-button :value="1"><icon name="tile"></icon></el-radio-button>
-                                    </el-tooltip>
-                                    <el-tooltip content="铺满" placement="top" effect="light">
-                                        <el-radio-button :value="2"><icon name="spread-over"></icon></el-radio-button>
-                                    </el-tooltip>
-                                </el-radio-group>
+                                <bg-btn-style v-model="form.search_botton_background_img_style"></bg-btn-style>
                             </div>
                             <upload v-model="form.search_botton_background_img" :limit="1"></upload>
                         </div>
@@ -79,7 +69,7 @@ const props = defineProps({
     isShowCommon: {
         type: Boolean,
         default: true,
-    }
+    },
 });
 
 const state = reactive({
@@ -98,24 +88,12 @@ const common_styles_update = (val: Object) => {
 
 // 按钮圆角
 const button_radius_change = (radius: any) => {
-    form.value.search_button_radius = Object.assign(form.value.search_button_radius, pick(radius, [
-        'radius',
-        'radius_top_left',
-        'radius_top_right',
-        'radius_bottom_left',
-        'radius_bottom_right',
-    ]));
-}
+    form.value.search_button_radius = Object.assign(form.value.search_button_radius, pick(radius, ['radius', 'radius_top_left', 'radius_top_right', 'radius_bottom_left', 'radius_bottom_right']));
+};
 // 搜索框圆角
 const border_radius_change = (radius: any) => {
-    form.value.search_border_radius = Object.assign(form.value.search_border_radius, pick(radius, [
-        'radius',
-        'radius_top_left',
-        'radius_top_right',
-        'radius_bottom_left',
-        'radius_bottom_right',
-    ]));
-}
+    form.value.search_border_radius = Object.assign(form.value.search_border_radius, pick(radius, ['radius', 'radius_top_left', 'radius_top_right', 'radius_bottom_left', 'radius_bottom_right']));
+};
 
 const mult_color_picker_event = (arry: color_list[], type: number) => {
     form.value.search_botton_color_list = arry;
diff --git a/src/components/model-seckill/model-seckill-styles.vue b/src/components/model-seckill/model-seckill-styles.vue
index 23d56ecf..be18c06a 100644
--- a/src/components/model-seckill/model-seckill-styles.vue
+++ b/src/components/model-seckill/model-seckill-styles.vue
@@ -25,23 +25,7 @@
                             <mult-color-picker :value="form.header_background_color_list" :type="form.header_background_direction" @update:value="mult_color_picker_event"></mult-color-picker>
                             <div class="flex-row jc-sb align-c">
                                 <div class="size-12">背景图</div>
-                                <el-radio-group v-model="form.header_background_img_style" is-button>
-                                    <el-tooltip content="单张" placement="top" effect="light">
-                                        <el-radio-button :value="0">
-                                            <icon name="single-sheet"></icon>
-                                        </el-radio-button>
-                                    </el-tooltip>
-                                    <el-tooltip content="平铺" placement="top" effect="light">
-                                        <el-radio-button :value="1">
-                                            <icon name="tile"></icon>
-                                        </el-radio-button>
-                                    </el-tooltip>
-                                    <el-tooltip content="铺满" placement="top" effect="light">
-                                        <el-radio-button :value="2">
-                                            <icon name="spread-over"></icon>
-                                        </el-radio-button>
-                                    </el-tooltip>
-                                </el-radio-group>
+                                <bg-btn-style v-model="form.header_background_img_style"></bg-btn-style>
                             </div>
                             <upload v-model="form.header_background_img" :limit="1"></upload>
                         </div>
@@ -169,7 +153,7 @@ const props = defineProps({
     content: {
         type: Object,
         default: () => ({}),
-    }
+    },
 });
 
 // 默认值
@@ -192,7 +176,7 @@ const base_list = {
     rolling_fashion_list: [
         { name: '平移', value: 'translation' },
         { name: '切屏', value: 'cut-screen' },
-    ]
+    ],
 };
 
 const common_style_update = (value: any) => {
diff --git a/src/components/page-settings/page-styles.vue b/src/components/page-settings/page-styles.vue
index 4dc7f51b..a33943e7 100644
--- a/src/components/page-settings/page-styles.vue
+++ b/src/components/page-settings/page-styles.vue
@@ -13,23 +13,7 @@
                             <mult-color-picker :value="form.header_background_color_list" :type="form.header_background_direction" @update:value="mult_color_picker_event"></mult-color-picker>
                             <div class="flex-row jc-sb align-c">
                                 <div class="size-12">背景图</div>
-                                <el-radio-group v-model="form.header_background_img_style" is-button>
-                                    <el-tooltip content="单张" placement="top" effect="light">
-                                        <el-radio-button :value="0">
-                                            <icon name="single-sheet"></icon>
-                                        </el-radio-button>
-                                    </el-tooltip>
-                                    <el-tooltip content="平铺" placement="top" effect="light">
-                                        <el-radio-button :value="1">
-                                            <icon name="tile"></icon>
-                                        </el-radio-button>
-                                    </el-tooltip>
-                                    <el-tooltip content="铺满" placement="top" effect="light">
-                                        <el-radio-button :value="2">
-                                            <icon name="spread-over"></icon>
-                                        </el-radio-button>
-                                    </el-tooltip>
-                                </el-radio-group>
+                                <bg-btn-style v-model="form.header_background_img_style"></bg-btn-style>
                             </div>
                             <upload v-model="form.header_background_img" :limit="1"></upload>
                         </template>
@@ -60,23 +44,7 @@
                         <mult-color-picker :value="form.up_slide_background_color_list" :type="form.up_slide_background_direction" @update:value="up_slide_mult_color_picker_event"></mult-color-picker>
                         <div class="flex-row jc-sb align-c">
                             <div class="size-12">背景图</div>
-                            <el-radio-group v-model="form.up_slide_background_img_style" is-button>
-                                <el-tooltip content="单张" placement="top" effect="light">
-                                    <el-radio-button :value="0">
-                                        <icon name="single-sheet"></icon>
-                                    </el-radio-button>
-                                </el-tooltip>
-                                <el-tooltip content="平铺" placement="top" effect="light">
-                                    <el-radio-button :value="1">
-                                        <icon name="tile"></icon>
-                                    </el-radio-button>
-                                </el-tooltip>
-                                <el-tooltip content="铺满" placement="top" effect="light">
-                                    <el-radio-button :value="2">
-                                        <icon name="spread-over"></icon>
-                                    </el-radio-button>
-                                </el-tooltip>
-                            </el-radio-group>
+                            <bg-btn-style v-model="form.up_slide_background_img_style"></bg-btn-style>
                         </div>
                         <upload v-model="form.up_slide_background_img" :limit="1"></upload>
                     </div>
@@ -159,14 +127,14 @@ const mult_color_picker_event = (arry: color_list[], type: number) => {
 const up_slide_mult_color_picker_event = (arry: color_list[], type: number) => {
     form.value.up_slide_background_color_list = arry;
     form.value.up_slide_background_direction = type.toString();
-}
+};
 const change_immersive_style = (val: string | number | boolean) => {
     if (val === '0') {
         common_store.set_is_immersion_model(false);
         return;
     }
     common_store.set_is_immersion_model(true);
-}
+};
 </script>
 <style lang="scss" scoped>
 .styles {