From f9c189ee3bf540e3c4e3130dd7e522cd7abb59a2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Mon, 20 Jan 2025 19:16:37 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E6=90=9C=E7=B4=A2=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/model-search/index.vue         | 60 ++++++++++++-------
 .../model-search/model-search-styles.vue      |  7 ++-
 src/components/page-settings/page-setting.vue | 17 ++++++
 src/config/const/header-nav.ts                | 22 +++++++
 src/config/const/search.ts                    | 22 +++++++
 5 files changed, 105 insertions(+), 23 deletions(-)

diff --git a/src/components/model-search/index.vue b/src/components/model-search/index.vue
index 9890205c..55bcbab3 100644
--- a/src/components/model-search/index.vue
+++ b/src/components/model-search/index.vue
@@ -48,18 +48,20 @@
                             <el-icon :class="`iconfont ${ 'icon-' + form.right_icon_class } size-14 mr-10`" :style="`color:${new_style.right_icon_color};`" />
                         </template>
                     </template>
-                    <div v-if="form.is_search_show == '1'" class="h flex align-c jc-c" :style="search_button">
-                        <template v-if="form.search_type === 'text'">
-                            <div class="size-12" :style="search_button_style">{{ form.search_tips }}</div>
-                        </template>
-                        <template v-else-if="!isEmpty(form.search_botton_img) && form.search_botton_img.length > 0">
-                            <image-empty v-model="form.search_botton_img[0]" class="img" :style="search_button_radius" error-img-style="width: 4rem;height: 2.8rem;" />
-                        </template>
-                        <template v-else>
-                            <div class="size-12" :style="search_button_style">
-                                <el-icon :class="`iconfont ${ !isEmpty(form.search_botton_icon) ? 'icon-' + form.search_botton_icon : '' } size-14`" />
-                            </div>
-                        </template>
+                    <div v-if="form.is_search_show == '1'" class="h flex align-c jc-c" :style="search_button_style">
+                        <div class="oh" :style="search_button_img_style">
+                            <template v-if="form.search_type === 'text'">
+                                <div class="size-12">{{ form.search_tips }}</div>
+                            </template>
+                            <template v-else-if="!isEmpty(form.search_botton_img) && form.search_botton_img.length > 0">
+                                <image-empty v-model="form.search_botton_img[0]" class="img" :style="search_button_height" error-img-style="width: 4rem;height: 2.8rem;" />
+                            </template>
+                            <template v-else>
+                                <div class="size-12">
+                                    <el-icon :class="`iconfont ${ !isEmpty(form.search_botton_icon) ? 'icon-' + form.search_botton_icon : '' } size-14`" />
+                                </div>
+                            </template>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -67,7 +69,7 @@
     </div>
 </template>
 <script setup lang="ts">
-import { background_computer, common_styles_computer, gradient_computer, radius_computer, common_img_computer, get_math, padding_computer, old_padding } from '@/utils';
+import { background_computer, common_styles_computer, gradient_computer, radius_computer, common_img_computer, get_math, padding_computer, old_padding, margin_computer, old_margin } from '@/utils';
 import { isEmpty } from 'lodash';
 
 const props = defineProps({
@@ -125,14 +127,9 @@ const box_style = computed(() => {
     }
     return style;
 });
-// 搜索按钮圆角
-const search_button_radius = computed(() => radius_computer(new_style.value.search_button_radius));
 const search_button_style = computed(() => {
-    return padding_computer(new_style.value?.search_botton_padding || old_padding);
-});
-const search_button = computed(() => {
-    let style = search_button_radius.value;
-    const { search_botton_color_list, search_botton_direction, search_botton_background_img_style, search_botton_background_img  } = new_style.value;
+    let style = radius_computer(new_style.value.search_button_radius);
+    const { search_botton_color_list, search_botton_direction, search_botton_background_img_style, search_botton_background_img, search_botton_margin = old_margin, search_botton_border_show = '0', search_botton_border_size = old_padding, search_botton_border_style = 'solid', search_botton_border_color = '' } = new_style.value;
     if (form.value.search_type != 'img') {
         const data = {
             color_list: search_botton_color_list,
@@ -140,10 +137,29 @@ const search_button = computed(() => {
             background_img: search_botton_background_img,
             background_img_style: search_botton_background_img_style,
         }
-        style += gradient_computer(data) + background_computer(data) + `color: ${ new_style.value.button_inner_color };`;
+        style += gradient_computer(data) + margin_computer(search_botton_margin) + `color: ${ new_style.value.button_inner_color };`;
     }
-    return style;
+    let border = ``;
+    if (new_style.value.search_botton_border_show == '1') {
+        border += `border-width: ${search_botton_border_size.padding_top}px ${search_botton_border_size.padding_right}px ${search_botton_border_size.padding_bottom}px ${search_botton_border_size.padding_left}px;border-style: ${ search_botton_border_style };border-color: ${search_botton_border_color};`
+    }
+    const height = 28 - search_botton_margin.margin_top - search_botton_margin.margin_bottom;
+    return style + border + `height: ${height}px;line-height: ${height}px;`;
 })
+const search_button_height = computed(() => {
+    const { search_botton_border_size = old_padding, search_botton_padding } = new_style.value;
+    const height = 28 - search_botton_border_size.padding_top - search_botton_border_size.padding_bottom - search_botton_padding.padding_top - search_botton_padding.padding_bottom;
+    return `height: ${height}px !important;line-height: ${height}px;`;
+});
+// 搜索按钮圆角
+const search_button_img_style = computed(() => {
+    const { search_botton_background_img_style, search_botton_background_img} = new_style.value;
+    const data = {
+        background_img: search_botton_background_img,
+        background_img_style: search_botton_background_img_style,
+    }
+    return background_computer(data) + padding_computer(new_style.value?.search_botton_padding || old_padding);
+});
 // 轮播图key值
 const carouselKey = ref('0');
 // 记录当前显示的轮播图的数据
diff --git a/src/components/model-search/model-search-styles.vue b/src/components/model-search/model-search-styles.vue
index 36251ccd..368ac106 100644
--- a/src/components/model-search/model-search-styles.vue
+++ b/src/components/model-search/model-search-styles.vue
@@ -25,9 +25,14 @@
                     <el-form-item label="按钮圆角">
                         <radius :value="form.search_button_radius"></radius>
                     </el-form-item>
-                    <el-form-item v-if="content.search_type != 'img'" label="内间距">
+                    <el-form-item label="内间距">
                         <padding :value="form.search_botton_padding"></padding>
                     </el-form-item>
+                    <el-form-item label="外边距">
+                        <margin :value="form.search_botton_margin"></margin>
+                    </el-form-item>
+                    <!-- 边框处理 -->
+                    <border-config v-model:show="form.search_botton_border_show" v-model:color="form.search_botton_border_color" v-model:style="form.search_botton_border_style" v-model:size="form.search_botton_border_size" :type-list="['color', 'style', 'size']" default-color="#FF3F3F"></border-config>
                 </card-container>
                 <div class="bg-f5 divider-line" />
             </template>
diff --git a/src/components/page-settings/page-setting.vue b/src/components/page-settings/page-setting.vue
index 6caa2c4a..4a878c8b 100644
--- a/src/components/page-settings/page-setting.vue
+++ b/src/components/page-settings/page-setting.vue
@@ -132,6 +132,23 @@ const default_data = {
             padding_right: 12,
             padding_bottom: 3,
         },
+        search_botton_margin: {
+            margin: 0,
+            margin_top: 0,
+            margin_right: 0,
+            margin_bottom: 0,
+            margin_left: 0,
+        },
+        search_botton_border_size: {
+            padding: 0,
+            padding_top: 0,
+            padding_right: 0,
+            padding_bottom: 0,
+            padding_left: 0,
+        },
+        search_botton_border_show: '0',
+        search_botton_border_color: '#FF3F3F',
+        search_botton_border_style: 'solid',
         search_padding_left: 15,
     }
 }
diff --git a/src/config/const/header-nav.ts b/src/config/const/header-nav.ts
index f5da6107..ad273995 100644
--- a/src/config/const/header-nav.ts
+++ b/src/config/const/header-nav.ts
@@ -81,6 +81,11 @@ interface DefaultFooterNav {
         search_botton_background_img: uploadList[];
         search_button_radius: object;
         search_botton_padding: paddingStyle;
+        search_botton_margin: marginStyle,
+        search_botton_border_show: string,
+        search_botton_border_color: string,
+        search_botton_border_style: string,
+        search_botton_border_size: paddingStyle;
         location_direction: string;
         location_color_list: color_list[],
         location_background_img_style: string,
@@ -256,6 +261,23 @@ const defaultFooterNav: DefaultFooterNav = {
             padding_right: 12,
             padding_bottom: 3,
         },
+        search_botton_margin: {
+            margin: 0,
+            margin_top: 0,
+            margin_right: 0,
+            margin_bottom: 0,
+            margin_left: 0,
+        },
+        search_botton_border_size: {
+            padding: 0,
+            padding_top: 0,
+            padding_right: 0,
+            padding_bottom: 0,
+            padding_left: 0,
+        },
+        search_botton_border_show: '0',
+        search_botton_border_color: '#FF3F3F',
+        search_botton_border_style: 'solid',
         // 搜索按钮显示样式
         button_inner_color: '#fff',
         search_botton_color_list: [
diff --git a/src/config/const/search.ts b/src/config/const/search.ts
index 401063a8..daa6b032 100644
--- a/src/config/const/search.ts
+++ b/src/config/const/search.ts
@@ -38,6 +38,11 @@ interface defaultSearch {
         search_botton_background_img: uploadList[];
         search_button_radius: object;
         search_botton_padding: paddingStyle;
+        search_botton_margin: marginStyle,
+        search_botton_border_show: string,
+        search_botton_border_color: string,
+        search_botton_border_style: string,
+        search_botton_border_size: paddingStyle;
         search_padding_left: number;
         tips_color: string;
         hot_words_color: string;
@@ -104,6 +109,23 @@ const defaultSearch: defaultSearch = {
             padding_right: 16,
             padding_bottom: 3,
         },
+        search_botton_margin: {
+            margin: 0,
+            margin_top: 0,
+            margin_right: 0,
+            margin_bottom: 0,
+            margin_left: 0,
+        },
+        search_botton_border_size: {
+            padding: 0,
+            padding_top: 0,
+            padding_right: 0,
+            padding_bottom: 0,
+            padding_left: 0,
+        },
+        search_botton_border_show: '0',
+        search_botton_border_color: '#FF3F3F',
+        search_botton_border_style: 'solid',
         // 搜索提示颜色
         tips_color: '#ccc',
         // 搜索热词颜色