From bf9a900ee0f8ebdac93d4d5ec3beec9ad56f117a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Tue, 8 Oct 2024 09:45:43 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E8=87=AA=E5=AE=9A=E4=B9=89?=
 =?UTF-8?q?=E8=83=8C=E6=99=AF=E4=B8=BA=E6=B8=90=E5=8F=98=E7=B1=BB=E5=9E=8B?=
 =?UTF-8?q?=E7=9A=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/custom-module/model-icon/index.vue   | 4 ++--
 .../common/custom-module/model-icon/model-icon-style.vue   | 7 ++++++-
 src/components/common/custom-module/model-text/index.vue   | 4 ++--
 .../common/custom-module/model-text/model-text-style.vue   | 7 ++++++-
 src/components/model-custom/components/index-default.ts    | 6 ++++--
 5 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/components/common/custom-module/model-icon/index.vue b/src/components/common/custom-module/model-icon/index.vue
index f72ac030..e043404e 100644
--- a/src/components/common/custom-module/model-icon/index.vue
+++ b/src/components/common/custom-module/model-icon/index.vue
@@ -4,7 +4,7 @@
     </div>
 </template>
 <script setup lang="ts">
-import { radius_computer, padding_computer } from '@/utils';
+import { radius_computer, padding_computer, gradient_handle } from '@/utils';
 const props = defineProps({
     value: {
         type: Object,
@@ -28,7 +28,7 @@ const props = defineProps({
 const form = reactive(props.value);
 
 const com_style = computed(() => {
-    let style = `${ set_count() } background-color: ${ form.com_bg }; ${ radius_computer(form.bg_radius) };transform: rotate(${form.icon_rotate}deg);${ padding_computer(form.icon_padding) };`;
+    let style = `${ set_count() } ${ gradient_handle(form.color_list, form.direction) } ${ radius_computer(form.bg_radius) };transform: rotate(${form.icon_rotate}deg);${ padding_computer(form.icon_padding) };`;
     if (form.border_show == '1') {
         style += `border: ${form.border_size}px ${form.border_style} ${form.border_color};box-sizing: border-box;`;
     }
diff --git a/src/components/common/custom-module/model-icon/model-icon-style.vue b/src/components/common/custom-module/model-icon/model-icon-style.vue
index 299df170..96fa842f 100644
--- a/src/components/common/custom-module/model-icon/model-icon-style.vue
+++ b/src/components/common/custom-module/model-icon/model-icon-style.vue
@@ -53,7 +53,7 @@
                     <slider v-model="form.com_height" :max="1000"></slider>
                 </el-form-item>
                 <el-form-item label="背景颜色">
-                    <color-picker v-model="form.com_bg"></color-picker>
+                    <mult-color-picker :value="form.color_list" :type="form.direction" @update:value="mult_color_picker_event"></mult-color-picker>
                 </el-form-item>
                 <el-form-item label="圆角">
                     <radius :value="form.bg_radius" @update:value="bg_radius_change"></radius>
@@ -121,6 +121,11 @@ const icon_change = (key: string) => {
     }
 };
 
+const mult_color_picker_event = (arry: color_list[], type: number) => {
+    form.value.color_list = arry;
+    form.value.direction = type.toString();
+};
+
 watch(
     diy_data,
     (val) => {
diff --git a/src/components/common/custom-module/model-text/index.vue b/src/components/common/custom-module/model-text/index.vue
index aac5af13..654cd50d 100644
--- a/src/components/common/custom-module/model-text/index.vue
+++ b/src/components/common/custom-module/model-text/index.vue
@@ -11,7 +11,7 @@
     </div>
 </template>
 <script setup lang="ts">
-import { radius_computer, padding_computer } from '@/utils';
+import { radius_computer, padding_computer, gradient_handle } from '@/utils';
 import { isEmpty } from 'lodash';
 const props = defineProps({
     value: {
@@ -57,7 +57,7 @@ const text_style = computed(() => {
 });
 
 const com_style = computed(() => {
-    let style = `${ set_count() } background-color: ${ form.com_bg }; ${ radius_computer(form.bg_radius) }`;
+    let style = `${ set_count() } ${ gradient_handle(form.color_list, form.direction) } ${ radius_computer(form.bg_radius) }`;
     if (form.border_show == '1') {
         style += `border: ${form.border_size}px ${form.border_style} ${form.border_color};`;
     }
diff --git a/src/components/common/custom-module/model-text/model-text-style.vue b/src/components/common/custom-module/model-text/model-text-style.vue
index 37197120..5118642e 100644
--- a/src/components/common/custom-module/model-text/model-text-style.vue
+++ b/src/components/common/custom-module/model-text/model-text-style.vue
@@ -73,7 +73,7 @@
                     <slider v-model="form.com_height" :max="1000"></slider>
                 </el-form-item>
                 <el-form-item label="背景颜色">
-                    <color-picker v-model="form.com_bg"></color-picker>
+                    <mult-color-picker :value="form.color_list" :type="form.direction" @update:value="mult_color_picker_event"></mult-color-picker>
                 </el-form-item>
                 <el-form-item label="圆角">
                     <radius :value="form.bg_radius" @update:value="bg_radius_change"></radius>
@@ -141,6 +141,11 @@ const text_change = (key: string) => {
     }
 };
 
+const mult_color_picker_event = (arry: color_list[], type: number) => {
+    form.value.color_list = arry;
+    form.value.direction = type.toString();
+};
+
 watch(
     diy_data,
     (val) => {
diff --git a/src/components/model-custom/components/index-default.ts b/src/components/model-custom/components/index-default.ts
index 06fd70aa..d8098dea 100644
--- a/src/components/model-custom/components/index-default.ts
+++ b/src/components/model-custom/components/index-default.ts
@@ -34,7 +34,8 @@ export const text_com_data = {
         radius_bottom_right: 0,
     },
     border_size: 1,
-    com_bg: '',
+    direction: '90deg',
+    color_list: [{ color: '', color_percentage: undefined }],
     bottom_up: '1',
 }
 // 图片的默认值
@@ -117,7 +118,8 @@ export const icon_com_data = {
         radius_bottom_right: 0,
     },
     border_size: 1,
-    com_bg: '',
+    direction: '90deg',
+    color_list: [{ color: '', color_percentage: undefined }],
     bottom_up: '1',
 }
 // 判断两个矩形是否有交集或者被包裹