From afd2c7bf5ed086c615fdf508711639cf5a2542e3 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, 30 Dec 2024 09:31:58 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=97=AE=E9=A2=98=E8=A5=BF?=
 =?UTF-8?q?=E5=AE=89=E5=B8=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/common-styles/index.vue | 47 +++++++++--------
 src/components/model-goods-list/index.vue     |  4 +-
 .../model-goods-list-styles.vue               |  7 +++
 src/components/model-img-magic/index.vue      | 44 ++++++++++++----
 .../model-img-magic-styles.vue                | 30 +++++++----
 src/config/const/goods-list.ts                | 37 ++++++++++++-
 src/config/const/img-magic.ts                 | 52 +++++++++++++++++++
 src/config/const/index.ts                     | 10 ++++
 src/types/global.d.ts                         |  4 ++
 src/utils/index.ts                            | 10 +++-
 src/views/layout/index.vue                    |  5 ++
 11 files changed, 201 insertions(+), 49 deletions(-)

diff --git a/src/components/common/common-styles/index.vue b/src/components/common/common-styles/index.vue
index ba04703c..0a82d7bb 100644
--- a/src/components/common/common-styles/index.vue
+++ b/src/components/common/common-styles/index.vue
@@ -17,33 +17,18 @@
                     <slider v-model="form.module_z_index" :min="0" :max="10"></slider>
                 </el-form-item>
                 <el-form-item label="内边距">
-                    <padding :value="form" :is-up-down="isUpDown" @update:value="padding_change"></padding>
+                    <padding :value="form" :is-up-down="isUpDown"></padding>
                 </el-form-item>
                 <el-form-item v-if="isMargin" label="外边距">
-                    <margin :value="form" @update:value="margin_change"></margin>
+                    <margin :value="form"></margin>
                 </el-form-item>
                 <el-form-item v-if="isRadius" label="圆角">
-                    <radius :value="form" @update:value="radius_change"></radius>
-                </el-form-item>
-                <el-form-item v-if="isShadow" label="阴影设置">
-                    <div class="flex-col gap-10 w">
-                        <el-form-item label="颜色" label-width="45">
-                            <color-picker v-model="form.box_shadow_color"></color-picker>
-                        </el-form-item>
-                        <el-form-item label="X轴" label-width="45">
-                            <slider v-model="form.box_shadow_x" :min="-20" :max="20"></slider>
-                        </el-form-item>
-                        <el-form-item label="Y轴" label-width="45">
-                            <slider v-model="form.box_shadow_y" :min="-20" :max="20"></slider>
-                        </el-form-item>
-                        <el-form-item label="模糊" label-width="45">
-                            <slider v-model="form.box_shadow_blur"></slider>
-                        </el-form-item>
-                        <el-form-item label="扩展" label-width="45">
-                            <slider v-model="form.box_shadow_spread"></slider>
-                        </el-form-item>
-                    </div>
+                    <radius :value="form"></radius>
                 </el-form-item>
+                <!-- 边框处理 -->
+                <border-config v-if="isShowBorder" v-model:show="form.border_is_show" v-model:color="form.border_color" v-model:style="form.border_style" v-model:size="form.border_size"></border-config>
+                <!-- 阴影配置 -->
+                <shadow-config v-if="isShadow" v-model="form"></shadow-config>
             </el-form>
         </div>
     </card-container>
@@ -60,6 +45,18 @@ const props = defineProps({
             background_img_style: '0',
             floating_up: 0,
             is_bottom_up: '0',
+            border: {
+                is_show: '0',
+                color: '#FF3F3F',
+                style: 'solid',
+                size: {
+                    padding: 1,
+                    padding_top: 1,
+                    padding_right: 1,
+                    padding_bottom: 1,
+                    padding_left: 1,
+                },
+            },
             padding: 0,
             padding_top: 0,
             padding_bottom: 0,
@@ -105,7 +102,11 @@ const props = defineProps({
     isUpDown: {
         type: Boolean,
         default: true,
-    }
+    },
+    isShowBorder: {
+        type: Boolean,
+        default: true,
+    },
 });
 // value 和初始化数据合并数据
 let form = ref(props.value);
diff --git a/src/components/model-goods-list/index.vue b/src/components/model-goods-list/index.vue
index aa4ed9e4..f1d56ce7 100644
--- a/src/components/model-goods-list/index.vue
+++ b/src/components/model-goods-list/index.vue
@@ -163,7 +163,7 @@
     </div>
 </template>
 <script setup lang="ts">
-import { common_img_computer, common_styles_computer, get_math, gradient_handle, padding_computer, radius_computer, background_computer } from '@/utils';
+import { common_img_computer, common_styles_computer, get_math, gradient_handle, padding_computer, radius_computer, background_computer, border_computer, box_shadow_computer, margin_computer } from '@/utils';
 import { isEmpty, cloneDeep, throttle } from 'lodash';
 import ShopAPI from '@/api/shop';
 import { Swiper, SwiperSlide } from 'swiper/vue';
@@ -363,7 +363,7 @@ const layout_type = computed(() => {
 // 容器样式
 const layout_style = computed(() => {
     const radius = theme.value == '6' ? '' : content_radius.value;
-    const gradient = theme.value != '6' ? gradient_handle(new_style.value.shop_color_list, new_style.value.shop_direction) : '';
+    const gradient = theme.value != '6' ? gradient_handle(new_style.value.shop_color_list, new_style.value.shop_direction) + margin_computer(new_style.value.shop_margin) + border_computer(new_style.value) + box_shadow_computer(new_style.value) : '';
     return `${radius} ${ gradient }`;
 });
 
diff --git a/src/components/model-goods-list/model-goods-list-styles.vue b/src/components/model-goods-list/model-goods-list-styles.vue
index 3aa892ee..f84a4723 100644
--- a/src/components/model-goods-list/model-goods-list-styles.vue
+++ b/src/components/model-goods-list/model-goods-list-styles.vue
@@ -50,6 +50,9 @@
                     <color-picker v-model="form.shop_score_color" default-color="#000000"></color-picker>
                 </el-form-item> -->
                 <template v-if="theme != '6'">
+                    <el-form-item label="外间距">
+                        <margin :value="form.shop_margin"></margin>
+                    </el-form-item>
                     <el-form-item label="内间距">
                         <padding :value="form.shop_padding"></padding>
                     </el-form-item>
@@ -64,6 +67,10 @@
                     <radius :value="form.shop_radius"></radius>
                 </el-form-item>
                 <template v-if="theme != '6'">
+                    <!-- 边框处理 -->
+                    <border-config v-model:show="form.border_is_show" v-model:color="form.border_color" v-model:style="form.border_style" v-model:size="form.border_size"></border-config>
+                    <!-- 阴影配置 -->
+                    <shadow-config v-model="form"></shadow-config>
                     <template v-if="theme == '5'">
                         <el-form-item label="内容高度">
                             <slider v-model="form.content_outer_height" :max="1000"></slider>
diff --git a/src/components/model-img-magic/index.vue b/src/components/model-img-magic/index.vue
index 4f41cef2..4b44d97d 100644
--- a/src/components/model-img-magic/index.vue
+++ b/src/components/model-img-magic/index.vue
@@ -5,34 +5,54 @@
                 <!-- 风格3 -->
                 <template v-if="form.style_actived == 2">
                     <div class="flex-row align-c jc-c style-size">
-                        <div v-for="(item, index) in form.img_magic_list" :key="index" class="three img-spacing-border">
-                            <image-empty v-model="item.img[0]" :style="content_img_radius" :fit="form.img_fit"></image-empty>
+                        <div v-for="(item, index) in form.img_magic_list" :key="index" class="three img-spacing-border flex-row">
+                            <div class="w flex-row" :style="content_img_container">
+                                <div class="flex-1" :style="content_img_style_container">
+                                    <image-empty v-model="item.img[0]" :style="content_img_radius" :fit="form.img_fit"></image-empty>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </template>
                 <!-- 风格9 -->
                 <template v-else-if="form.style_actived == 8">
                     <div class="flex-row align-c jc-c style-size flex-wrap">
-                        <div v-for="(item, index) in form.img_magic_list" :key="index" :class="['img-spacing-border', { 'style9-top': [0, 1].includes(index), 'style9-bottom': ![0, 1].includes(index) }]">
-                            <image-empty v-model="item.img[0]" :style="content_img_radius" :fit="form.img_fit"></image-empty>
+                        <div v-for="(item, index) in form.img_magic_list" :key="index" :class="['img-spacing-border flex-row', { 'style9-top': [0, 1].includes(index), 'style9-bottom': ![0, 1].includes(index) }]">
+                            <div class="w flex-row" :style="content_img_container">
+                                <div class="flex-1" :style="content_img_style_container">
+                                    <image-empty v-model="item.img[0]" :style="content_img_radius" :fit="form.img_fit"></image-empty>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </template>
                 <template v-else-if="form.style_actived == 10">
                     <template v-if="form.limit_size == '0'">
-                        <div v-for="(item, index) in form.img_magic_list" :key="index" :class="['img-spacing-border', { 'h': item.img.length > 0, 'style_actived_10': item.img.length == 0 }]" :style="selected_style(item)">
-                            <image-empty v-model="item.img[0]" :style="content_img_radius" fit="contain"></image-empty>
+                        <div v-for="(item, index) in form.img_magic_list" :key="index" :class="['img-spacing-border flex-row', { 'h': item.img.length > 0, 'style_actived_10': item.img.length == 0 }]" :style="selected_style(item)">
+                            <div class="w flex-row" :style="content_img_container">
+                                <div class="flex-1" :style="content_img_style_container">
+                                    <image-empty v-model="item.img[0]" :style="content_img_radius" fit="contain"></image-empty>
+                                </div>
+                            </div>
                         </div>
                     </template>
                     <template v-else>
-                        <div v-for="(item, index) in form.img_magic_list" :key="index" class="img-spacing-border" :style="`${ selected_style(item) };height: ${ form.image_height }px;`">
-                            <image-empty v-model="item.img[0]" :style="content_img_radius" :fit="form.img_fit"></image-empty>
+                        <div v-for="(item, index) in form.img_magic_list" :key="index" class="img-spacing-border flex-row" :style="`${ selected_style(item) };height: ${ form.image_height }px;`">
+                            <div class="w flex-row" :style="content_img_container">
+                                <div class="flex-1" :style="content_img_style_container">
+                                    <image-empty v-model="item.img[0]" :style="content_img_radius" :fit="form.img_fit"></image-empty>
+                                </div>
+                            </div>
                         </div>
                     </template>
                 </template>
                 <template v-else>
-                    <div v-for="(item, index) in form.img_magic_list" :key="index" class="cube-selected img-spacing-border" :style="selected_style(item)">
-                        <image-empty v-model="item.img[0]" :style="content_img_radius" :fit="form.img_fit"></image-empty>
+                    <div v-for="(item, index) in form.img_magic_list" :key="index" class="cube-selected img-spacing-border flex-row" :style="selected_style(item)">
+                        <div class="w flex-row" :style="content_img_container">
+                            <div class="flex-1" :style="content_img_style_container">
+                                <image-empty v-model="item.img[0]" :style="content_img_radius" :fit="form.img_fit"></image-empty>
+                            </div>
+                        </div>
                     </div>
                 </template>
             </div>
@@ -40,7 +60,7 @@
     </div>
 </template>
 <script setup lang="ts">
-import { common_img_computer, common_styles_computer, radius_computer, is_number } from '@/utils';
+import { common_img_computer, common_styles_computer, radius_computer, is_number, margin_computer, padding_computer, box_shadow_computer, border_computer } from '@/utils';
 
 const props = defineProps({
     value: {
@@ -116,6 +136,8 @@ const percentage = (num: number) => {
     return marks.toFixed(4) + '%';
 };
 //#endregion
+const content_img_container = computed(() => common_styles_computer(new_style.value) + margin_computer(new_style.value.margin));
+const content_img_style_container = computed(() => common_img_computer(new_style.value) + padding_computer(new_style.value.padding));
 // 公共样式
 const style_container = computed(() => common_styles_computer(new_style.value.common_style));
 const style_img_container = computed(() => common_img_computer(new_style.value.common_style));
diff --git a/src/components/model-img-magic/model-img-magic-styles.vue b/src/components/model-img-magic/model-img-magic-styles.vue
index f303aa8b..66c53674 100644
--- a/src/components/model-img-magic/model-img-magic-styles.vue
+++ b/src/components/model-img-magic/model-img-magic-styles.vue
@@ -6,9 +6,22 @@
                 <el-form-item v-if="new_content.style_actived !== 10" label="图片间距">
                     <slider v-model="form.image_spacing" :max="100"></slider>
                 </el-form-item>
-                <el-form-item label="图片圆角">
-                    <radius :value="form" @update:value="radius_change"></radius>
+                <el-form-item label="背景设置">
+                    <background-common v-model:color_list="form.color_list" v-model:direction="form.direction" v-model:img_style="form.background_img_style" v-model:img="form.background_img" @mult_color_picker_event="mult_color_picker_event" />
                 </el-form-item>
+                <el-form-item label="外边距">
+                    <margin :value="form.margin"></margin>
+                </el-form-item>
+                <el-form-item label="内边距">
+                    <padding :value="form.padding"></padding>
+                </el-form-item>
+                <el-form-item label="圆角">
+                    <radius :value="form"></radius>
+                </el-form-item>
+                <!-- 边框处理 -->
+                <border-config v-model:show="form.border_is_show" v-model:color="form.border_color" v-model:style="form.border_style" v-model:size="form.border_size"></border-config>
+                <!-- 阴影配置 -->
+                <shadow-config v-model="form"></shadow-config>
             </card-container>
         </el-form>
         <div class="bg-f5 divider-line" />
@@ -40,15 +53,10 @@ const common_style_update = (value: any) => {
     form.value.common_style = value;
 };
 // 内容圆角
-const radius_change = (radius: any) => {
-    form.value = Object.assign(form.value, 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.color_list = arry;
+    form.value.direction = type.toString();
+};
 </script>
 <style lang="scss" scoped>
 .topic {
diff --git a/src/config/const/goods-list.ts b/src/config/const/goods-list.ts
index efb90973..d3a53207 100644
--- a/src/config/const/goods-list.ts
+++ b/src/config/const/goods-list.ts
@@ -39,6 +39,17 @@ interface DefaultProductList {
         shop_background_img_style: string,
         shop_background_img: uploadList[],
         shop_padding: paddingStyle;
+        shop_margin: marginStyle,
+        border_is_show: string,
+        border_color: string,
+        border_style: string,
+        border_size: paddingStyle,
+        // 阴影
+        box_shadow_color: string,
+        box_shadow_x: number,
+        box_shadow_y: number,
+        box_shadow_blur: number,
+        box_shadow_spread: number,
         shop_img_radius: radiusStyle;
         shop_radius: radiusStyle;
         content_outer_spacing: number;
@@ -131,6 +142,23 @@ const defaultProductList: DefaultProductList = {
         shop_color_list: [{ color: '#fff', color_percentage: undefined }],
         shop_background_img_style: '0',
         shop_background_img: [],
+        // 边框样式
+        border_is_show: '0',
+        border_color: '#FF3F3F',
+        border_style: 'solid',
+        border_size: {
+            padding: 1,
+            padding_top: 1,
+            padding_right: 1,
+            padding_bottom: 1,
+            padding_left: 1,
+        },
+        // 阴影
+        box_shadow_color: '',
+        box_shadow_x: 0,
+        box_shadow_y: 0,
+        box_shadow_blur: 0,
+        box_shadow_spread: 0,
         // 商品内边距
         shop_padding: {
             padding: 10, 
@@ -139,6 +167,13 @@ const defaultProductList: DefaultProductList = {
             padding_left: 10, 
             padding_right: 10,
         },
+        shop_margin: {
+            margin: 0,
+            margin_top: 0,
+            margin_bottom: 0,
+            margin_left: 0,
+            margin_right: 0,
+        },
         // 图标圆角
         shop_img_radius: {
             radius: 4,
@@ -171,7 +206,7 @@ const defaultProductList: DefaultProductList = {
         shop_title_size: 14,    
         shop_title_color: "#333333",
         shop_simple_desc_typeface: '400',
-        shop_simple_desc_size: 12,    
+        shop_simple_desc_size: 12,
         shop_simple_desc_color: "#999",
         title_simple_desc_spacing: 4,
         shop_price_typeface: '500',
diff --git a/src/config/const/img-magic.ts b/src/config/const/img-magic.ts
index 2e475931..34a1a8d4 100644
--- a/src/config/const/img-magic.ts
+++ b/src/config/const/img-magic.ts
@@ -23,6 +23,23 @@ interface defaultSearch {
         radius_bottom_left: number;
         radius_bottom_right: number;
         image_spacing: number;
+        direction: string,
+        color_list: color_list[],
+        background_img_style: string,
+        background_img: uploadList[],
+        margin: marginStyle,
+        padding: paddingStyle,
+        // 边框样式
+        border_is_show: string,
+        border_color: string,
+        border_style: string,
+        border_size: paddingStyle,
+        // 阴影
+        box_shadow_color: string,
+        box_shadow_x: number,
+        box_shadow_y: number,
+        box_shadow_blur: number,
+        box_shadow_spread: number,
         common_style: object;
     };
 }
@@ -64,8 +81,43 @@ const defaultSearch: defaultSearch = {
         radius_top_right: 0,
         radius_bottom_left: 0,
         radius_bottom_right: 0,
+        direction: '90deg',
+        color_list: [{ color: '', color_percentage: undefined }],
+        background_img_style: '0',
+        background_img: [],
+        margin: {
+            margin_top: 0,
+            margin_right: 0,
+            margin_bottom: 0,
+            margin_left: 0,
+            margin: 0
+        },
+        padding: {
+            padding: 0,
+            padding_top: 0,
+            padding_right: 0,
+            padding_bottom: 0,
+            padding_left: 0,
+        },
         // 图片间距
         image_spacing: 2,
+        // 边框样式
+        border_is_show: '0',
+        border_color: '#FF3F3F',
+        border_style: 'solid',
+        border_size: {
+            padding: 1,
+            padding_top: 1,
+            padding_right: 1,
+            padding_bottom: 1,
+            padding_left: 1,
+        },
+        // 阴影
+        box_shadow_color: '',
+        box_shadow_x: 0,
+        box_shadow_y: 0,
+        box_shadow_blur: 0,
+        box_shadow_spread: 0,
         common_style: defaultCommon,
     },
 };
diff --git a/src/config/const/index.ts b/src/config/const/index.ts
index d51c030a..81fe061b 100644
--- a/src/config/const/index.ts
+++ b/src/config/const/index.ts
@@ -5,6 +5,16 @@ const defaultCommon: componentsCommonCommonStyle = {
     floating_up: 0,
     module_z_index: 0,
     padding_top_safe_value: 0, // 安全距离值，在顶部时，需要加上安全距离，防止遮挡
+    border_is_show: '0',
+    border_color: '#FF3F3F',
+    border_style: 'solid',
+    border_size: {
+        padding: 1,
+        padding_top: 1,
+        padding_right: 1,
+        padding_bottom: 1,
+        padding_left: 1,
+    },
     padding: 0,
     padding_top: 0,
     padding_bottom: 0,
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
index c35a499a..abb3b2ed 100644
--- a/src/types/global.d.ts
+++ b/src/types/global.d.ts
@@ -90,6 +90,10 @@ declare global {
         floating_up: number;
         module_z_index: number;
         padding_top_safe_value: number;
+        border_is_show: string,
+        border_color: string,
+        border_style: string,
+        border_size: paddingStyle,
         padding: number;
         padding_top: number;
         padding_bottom: number;
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 6e06b496..143a2030 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -293,6 +293,14 @@ export function background_computer(new_style: backgroundImgUrlStyle) {
         return '';
     }
 }
+
+export const border_computer = (new_style: componentsCommonCommonStyle) => {
+    const { border_is_show = '0', border_color = '', border_style = 'solid', border_size = { padding: 0, padding_bottom: 0, padding_left: 0, padding_right: 0, padding_top: 0 } } = new_style;
+    if (border_is_show == '1') {
+       return `border-width: ${border_size.padding_top}px ${border_size.padding_right}px ${border_size.padding_bottom}px ${border_size.padding_left}px;border-style: ${ border_style };border-color: ${border_color};`
+    }
+    return '';
+};
 /**
  * 计算并组合组件的常用样式。
  *
@@ -303,7 +311,7 @@ export function background_computer(new_style: backgroundImgUrlStyle) {
  * @returns 返回一个字符串，包含了计算后的样式定义，可以被直接应用于组件的样式属性。
  */
 export function common_styles_computer(new_style: componentsCommonCommonStyle) {
-    return gradient_computer(new_style) + margin_computer(new_style) + radius_computer(new_style) + box_shadow_computer(new_style) + `overflow:hidden;`;
+    return gradient_computer(new_style) + margin_computer(new_style) + radius_computer(new_style) + box_shadow_computer(new_style) + border_computer(new_style) + `overflow:hidden;`;
 }
 
 export function common_img_computer(new_style: componentsCommonCommonStyle) {
diff --git a/src/views/layout/index.vue b/src/views/layout/index.vue
index 2909f947..7ae59082 100644
--- a/src/views/layout/index.vue
+++ b/src/views/layout/index.vue
@@ -22,6 +22,7 @@ import { is_obj, set_cookie, get_cookie } from '@/utils';
 import { Settings, AppMain } from './components/index';
 import defaultSettings from './components/main/index';
 import defaultConfigSetting from '@/config/setting';
+import defaultConfigConst from '@/config/const/index';
 import { cloneDeep, isEmpty, omit } from 'lodash';
 import DiyAPI, { diyData, headerAndFooter, diyConfig } from '@/api/diy';
 import CommonAPI from '@/api/common';
@@ -178,6 +179,10 @@ const default_merge = (data: any, key: string) => {
     } else {
         data.style = cloneDeep((defaultSettings as any)[key.replace(/-/g, '_')]).style;
     }
+    // 兼融老数据
+    if (!isEmpty(data.style.common_style)) {
+        data.style.common_style = Object.assign({}, cloneDeep(defaultConfigConst), data.style.common_style);
+    }
     if (data.content) {
         data.content = Object.assign({}, cloneDeep((defaultSettings as any)[key.replace(/-/g, '_')]).content, data.content);
     } else {