From dc7043e4c57fe4665862fd2e15537a032424bc60 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, 26 Aug 2024 15:13:47 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=A1=B5=E9=9D=A2=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../model-image/model-image-style.vue             |  2 +-
 .../common/custom-module/model-text/index.vue     | 15 +++++++++++----
 .../custom-module/model-text/model-text-style.vue | 15 +++++++++------
 src/components/common/upload-icon/index.vue       |  3 +++
 .../model-custom/components/index-default.ts      |  4 +++-
 src/components/model-custom/components/index.scss |  3 ++-
 src/components/model-custom/components/index.vue  |  9 ++++++++-
 .../model-custom/model-custom-content.vue         |  2 +-
 src/components/model-search/index.vue             |  2 +-
 9 files changed, 39 insertions(+), 16 deletions(-)

diff --git a/src/components/common/custom-module/model-image/model-image-style.vue b/src/components/common/custom-module/model-image/model-image-style.vue
index 73798557..a2efca0c 100644
--- a/src/components/common/custom-module/model-image/model-image-style.vue
+++ b/src/components/common/custom-module/model-image/model-image-style.vue
@@ -7,7 +7,7 @@
                     <upload v-model="form.img_src" :limit="1" size="50" @update:model-value="img_src_change('1')"></upload>
                 </el-form-item>
                 <el-form-item label="数据字段">
-                    <el-select v-model="form.data_source_id" value-key="id" clearable placeholder="请选择图片数据字段" size="default" class="flex-1" @change="img_src_change('2')">
+                    <el-select v-model="form.data_source_id" value-key="id" clearable filterable placeholder="请选择图片数据字段" size="default" class="flex-1" @change="img_src_change('2')">
                         <el-option v-for="item in options.filter(item => item.type == 'images')" :key="item.field" :label="item.name" :value="item.field" />
                     </el-select>
                 </el-form-item>
diff --git a/src/components/common/custom-module/model-text/index.vue b/src/components/common/custom-module/model-text/index.vue
index bae1d789..02449726 100644
--- a/src/components/common/custom-module/model-text/index.vue
+++ b/src/components/common/custom-module/model-text/index.vue
@@ -1,8 +1,8 @@
 <template>
-    <div class="img-outer re" :style="com_style">
+    <div class="img-outer re oh" :style="com_style">
         <div :style="text_style" class="break">
             <template v-if="form.is_rich_text">
-                <div :innerHTML="text_title"></div>
+                <div class="rich-text-content" :innerHTML="text_title"></div>
             </template>
             <template v-else>
                 {{ text_title }}
@@ -57,9 +57,13 @@ const text_style = computed(() => {
 });
 
 const com_style = computed(() => {
-    let style = `${ set_count() } background-color: ${ form.com_bg };`;
+    let style = `${ set_count() } background-color: ${ form.com_bg }; ${ radius_computer(form.bg_radius) }`;
     if (form.border_show) {
-        style += `border: ${form.border_size}px ${form.border_style} ${form.border_color}; ${ radius_computer(form.border_radius) };`;
+        style += `border: ${form.border_size}px ${form.border_style} ${form.border_color};`;
+    }
+    // 是富文本并且开启了上下滚动的开关
+    if (form.is_rich_text && form.is_up_down) {
+        style += `overflow-y: auto;`
     }
     return style;
 });
@@ -79,5 +83,8 @@ const set_count = () => {
 .rich-text-content {
     white-space: normal;
     word-break:break-all;
+    * {
+        max-width: 100%;
+    }
 }
 </style>
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 9fc99c0d..ceb9c7e8 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
@@ -7,7 +7,7 @@
                     <el-input v-model="form.text_title" placeholder="请输入文本内容" type="textarea" :rows="3" @input="text_change('1')"></el-input>
                 </el-form-item>
                 <el-form-item label="数据字段">
-                    <el-select v-model="form.data_source_id" value-key="id" clearable placeholder="请选择图片数据字段" size="default" class="flex-1" @change="text_change('2')">
+                    <el-select v-model="form.data_source_id" value-key="id" clearable filterable placeholder="请选择图片数据字段" size="default" class="flex-1" @change="text_change('2')">
                         <el-option v-for="item in options.filter(item => item.type == 'text')" :key="item.field" :label="item.name" :value="item.field" />
                     </el-select>
                 </el-form-item>
@@ -17,6 +17,9 @@
                 <el-form-item label="富文本">
                     <el-switch v-model="form.is_rich_text" />
                 </el-form-item>
+                <el-form-item v-if="form.is_rich_text" label="上下滚动">
+                    <el-switch v-model="form.is_up_down" />
+                </el-form-item>
                 <el-form-item label="文字颜色">
                     <color-picker v-model="form.text_color" default-color="#FF3F3F"></color-picker>
                 </el-form-item>
@@ -72,6 +75,9 @@
                 <el-form-item label="背景颜色">
                     <color-picker v-model="form.com_bg" default-color="#FF3F3F"></color-picker>
                 </el-form-item>
+                <el-form-item label="圆角">
+                    <radius :value="form.bg_radius" @update:value="bg_radius_change"></radius>
+                </el-form-item>
             </card-container>
             <div class="bg-f5 partition-line" />
             <card-container>
@@ -93,9 +99,6 @@
                             <el-radio value="dotted"><div class="border-style-item" style="border: 1px dotted #979797"></div></el-radio>
                         </el-radio-group>
                     </el-form-item>
-                    <el-form-item label="边框圆角">
-                        <radius :value="form.border_radius" @update:value="border_radius_change"></radius>
-                    </el-form-item>
                     <el-form-item label="边框粗细">
                         <slider v-model="form.border_size" :max="1000"></slider>
                     </el-form-item>
@@ -129,8 +132,8 @@ const center_height = defineModel('height', { type: Number, default: 0 });
 const padding_change = (padding: any) => {
     form.value.text_padding = Object.assign(form.value.text_padding, pick(padding, ['padding', 'padding_top', 'padding_bottom', 'padding_left', 'padding_right']));
 };
-const border_radius_change = (radius: any) => {
-    form.value.border_radius = Object.assign(form.value.border_radius, pick(radius, ['radius', 'radius_top_left', 'radius_top_right', 'radius_bottom_left', 'radius_bottom_right']));
+const bg_radius_change = (radius: any) => {
+    form.value.bg_radius = Object.assign(form.value.bg_radius, pick(radius, ['radius', 'radius_top_left', 'radius_top_right', 'radius_bottom_left', 'radius_bottom_right']));
 };
 
 const text_change = (key: string) => {
diff --git a/src/components/common/upload-icon/index.vue b/src/components/common/upload-icon/index.vue
index e4fbef40..26bce533 100644
--- a/src/components/common/upload-icon/index.vue
+++ b/src/components/common/upload-icon/index.vue
@@ -75,6 +75,9 @@ const remove_icon = () => {
                 height: 3.6rem;
             }
         }
+        .icon-item:hover {
+            border: 1px solid $cr-main;
+        }
         .text-line-1 {
             line-height: 2rem;
         }
diff --git a/src/components/model-custom/components/index-default.ts b/src/components/model-custom/components/index-default.ts
index 1898d8c4..a69915d5 100644
--- a/src/components/model-custom/components/index-default.ts
+++ b/src/components/model-custom/components/index-default.ts
@@ -1,3 +1,4 @@
+
 // 文本的默认值
 export const text_com_data = {
     com_width: 150,
@@ -8,6 +9,7 @@ export const text_com_data = {
     data_source_list: {},
     text_link: {},
     is_rich_text: false,
+    is_up_down: true,
     text_color: '#000',
     text_weight: 'normal',
     text_size: 12,
@@ -24,7 +26,7 @@ export const text_com_data = {
     border_show: false,
     border_color: '#FF5D5D',
     border_style: 'solid',
-    border_radius: {
+    bg_radius: {
         radius: 0,
         radius_top_left: 0,
         radius_top_right: 0,
diff --git a/src/components/model-custom/components/index.scss b/src/components/model-custom/components/index.scss
index fbdd965b..d752bdea 100644
--- a/src/components/model-custom/components/index.scss
+++ b/src/components/model-custom/components/index.scss
@@ -44,7 +44,6 @@
         overflow: hidden;
         height: 100%;
         :deep(.vdr-container) {
-            cursor: pointer;
             border: 0;
             .vdr-handle.vdr-handle-tl,
             .vdr-handle.vdr-handle-tr,
@@ -70,11 +69,13 @@
             }
         }
         .plug-in-border {
+            cursor: pointer;
             position: relative;
             box-shadow: 0px 0 0px 0.2rem $cr-main;
             border: 0;
         }
         .plug-in-right {
+            cursor: default;
             background: $cr-main;
             position: absolute;
             right: -5rem;
diff --git a/src/components/model-custom/components/index.vue b/src/components/model-custom/components/index.vue
index 056ff604..5f1843a1 100644
--- a/src/components/model-custom/components/index.vue
+++ b/src/components/model-custom/components/index.vue
@@ -20,7 +20,7 @@
             <slider v-model="center_height" :max="3000">组件高度</slider>
         </card-container>
         <card-container class="h selected">
-            <div class="mb-12">已选组件</div>
+            <div class="mb-12 flex-row align-c jc-sb">已选组件<el-button @click="cancel">清除选中</el-button></div>
             <div class="assembly">
                 <div v-if="!isEmpty(diy_data)" class="flex-row flex-wrap gap-10">
                     <div v-for="(item, index) in diy_data" :key="index" class="item flex jc-sb align-c size-14 cr-3" :class="{ 'item-active': item.show_tabs }" @click="on_choose(index, item.show_tabs)">{{ item.name }}<icon name="close" color="3" size="10" class="c-pointer" @click="del(index)"></icon></div>
@@ -190,6 +190,13 @@ const on_choose = (index: number, show_tabs: Boolean) => {
         set_show_tabs(index);
     }
 };
+// 清除选中
+const cancel = () => {
+    diy_data.value.forEach((item) => {
+        item.show_tabs = false;
+    });
+    emits('rightUpdate', {});
+};
 //#endregion
 //#region 容器高度发生变化时的处理
 const center_height = defineModel('height', { type: Number, default: 0 });
diff --git a/src/components/model-custom/model-custom-content.vue b/src/components/model-custom/model-custom-content.vue
index 8f8aa2c2..73c39977 100644
--- a/src/components/model-custom/model-custom-content.vue
+++ b/src/components/model-custom/model-custom-content.vue
@@ -4,7 +4,7 @@
             <card-container class="common-content-height">
                 <div class="mb-20">数据源</div>
                 <el-form-item label="动态数据">
-                    <el-select v-model="form.data_source" value-key="id" placeholder="请选择数据源" clearable @change="changeDataSource">
+                    <el-select v-model="form.data_source" value-key="id" placeholder="请选择数据源" filterable clearable @change="changeDataSource">
                         <el-option v-for="item in options" :key="item.type" :label="item.name" :value="item.type" />
                     </el-select>
                     <div v-if="!isEmpty(form.source_list)" class="flex-row mt-20 gap-20">
diff --git a/src/components/model-search/index.vue b/src/components/model-search/index.vue
index 7ca8edb3..9ed499ea 100644
--- a/src/components/model-search/index.vue
+++ b/src/components/model-search/index.vue
@@ -24,7 +24,7 @@
                     </template>
                     <template v-if="form.search_type === 'icon'">
                         <div class="pl-16 pr-16 ptb-3 size-12">
-                            <el-icon :class="`iconfont ${ 'icon-' + form.icon_class } size-14`" />
+                            <el-icon :class="`iconfont ${ 'icon-' + form.search_botton_icon } size-14`" />
                         </div>
                     </template>
                 </div>