From e361e314c6332adfe98274f6849fdd8a90360549 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Thu, 17 Oct 2024 15:10:25 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=86=85=E5=AE=B9=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/div-content/index.vue   | 27 ++++---
 src/components/common/upload-icon/index.vue   |  4 +-
 .../model-custom/components/index.scss        |  9 +++
 src/components/model-title/index.vue          |  2 +-
 src/components/page-settings/index.vue        | 76 +++++++++++++------
 src/components/page-settings/page-content.vue | 36 ++++++++-
 src/components/page-settings/page-styles.vue  | 13 ++--
 src/config/const/header-nav.ts                | 18 ++++-
 8 files changed, 140 insertions(+), 45 deletions(-)

diff --git a/src/components/common/div-content/index.vue b/src/components/common/div-content/index.vue
index b984a4ad..47d36888 100644
--- a/src/components/common/div-content/index.vue
+++ b/src/components/common/div-content/index.vue
@@ -1,11 +1,21 @@
 <template>
     <div v-for="(item, index) in diy_data" :key="item.id" :class="model_class(item)" :style="model_style(item)" @click="on_choose(index, item.show_tabs)">
         <div v-if="item.show_tabs == '1'" class="plug-in-right" chosenClass="close">
-            <el-icon :class="`iconfont ${item.is_enable == '1' ? 'icon-eye' : 'icon-eye-close'}`" @click.stop="set_enable(index)" />
-            <el-icon class="iconfont icon-del" @click.stop="del(index)" />
-            <el-icon :class="['iconfont icon-copy', { disabled: props.isTabs }]" @click.stop="copy(index)" />
-            <el-icon :class="['iconfont', 'icon-arrow-top', icon_arrow_disable(item.key, index, 'moveUp')]" @click.stop="moveUp(index, arrow_disable_method(item.key, index, 'moveUp'))" />
-            <el-icon :class="['iconfont', 'icon-arrow-bottom', icon_arrow_disable(item.key, index, 'moveDown')]" @click.stop="moveDown(index, arrow_disable_method(item.key, index, 'moveDown'))" />
+            <div class="plug-in-icon" @click.stop="set_enable(index)">
+                <icon :name="`${item.is_enable == '1' ? 'eye' : 'eye-close'}`" size="14" color="f" />
+            </div>
+            <div class="plug-in-icon" @click.stop="del(index)">
+                <icon name="del" size="14" color="f" />
+            </div>
+            <div :class="['plug-in-icon', { 'disabled': props.isTabs }]" @click.stop="copy(index)">
+                <icon name="copy" size="14" color="f" />
+            </div>
+            <div :class="['plug-in-icon plug-in-icon-arrow flex', icon_arrow_disable(item.key, index, 'moveUp')]" @click.stop="moveUp(index, arrow_disable_method(item.key, index, 'moveUp'))">
+                <icon name="arrow-top" size="14" color="f" />
+            </div>
+            <div :class="['plug-in-icon plug-in-icon-arrow flex', icon_arrow_disable(item.key, index, 'moveDown')]" @click.stop="moveDown(index, arrow_disable_method(item.key, index, 'moveDown'))">
+                <icon name="arrow-bottom" size="14" color="f" />
+            </div>
         </div>
         <div class="plug-in-name">{{ item.name }}</div>
         <div class="main-content" :class="{ 'plug-in-close': item.is_enable != '1' }" :style="mainContentStyle">
@@ -368,15 +378,14 @@ const float_bottom_change = (val: { bottom: string; location: string }, id: stri
     padding: 2rem 1.2rem;
     color: #fff;
     border-radius: 0.4rem;
-    & > i {
+    & > .plug-in-icon {
         cursor: pointer;
     }
-    & > i.disabled {
+    & > .plug-in-icon.disabled {
         color: #5db2ff;
         cursor: not-allowed;
     }
-    & .icon-arrow-top,
-    & .icon-arrow-bottom {
+    & .plug-in-icon-arrow {
         height: 0.9rem;
     }
 }
diff --git a/src/components/common/upload-icon/index.vue b/src/components/common/upload-icon/index.vue
index f236daf1..389e1317 100644
--- a/src/components/common/upload-icon/index.vue
+++ b/src/components/common/upload-icon/index.vue
@@ -17,7 +17,9 @@
     </el-dialog>
     <div class="search-icon re" :style="'height:' + upload_size + ';width:' + upload_size + ';'" @click="icon_click">
         <icon :name="!isEmpty(icon_class) ? icon_class : 'add'" :size="Number(size) / 2 + ''" color="c"></icon>
-        <el-icon v-if="!isEmpty(icon_class)" class="iconfont icon-close-fillup size-16 abs cr-c top-de-5 right-de-5" @click.stop="remove_icon" />
+        <div v-if="!isEmpty(icon_class)" class="abs top-de-5 right-de-5" @click.stop="remove_icon">
+            <icon name="close-fillup" size="16" color="c"></icon>
+        </div>
     </div>
 </template>
 <script setup lang="ts">
diff --git a/src/components/model-custom/components/index.scss b/src/components/model-custom/components/index.scss
index f389730e..d6233946 100644
--- a/src/components/model-custom/components/index.scss
+++ b/src/components/model-custom/components/index.scss
@@ -3,6 +3,15 @@
     overflow: hidden;
     :deep(.el-collapse) {
         border: 0;
+        .el-collapse-item__header {
+            height: 20px;
+            font-size: 14px;
+            color: #606266;
+            font-weight: 400;
+        }
+        .el-collapse-item__wrap {
+            margin-top: 12px;
+        }
         .el-collapse-item__wrap,
         .el-collapse-item__header {
             border: 0;
diff --git a/src/components/model-title/index.vue b/src/components/model-title/index.vue
index 55eb4a01..10f2875e 100644
--- a/src/components/model-title/index.vue
+++ b/src/components/model-title/index.vue
@@ -10,7 +10,7 @@
                         <template v-else-if="!isEmpty(form.icon_class)">
                             <icon :name="form.icon_class" :size="new_style.icon_size + ''" :color="new_style.icon_color"></icon>
                         </template>
-                        <div class="pr-15 nowrap" :style="title_style">{{ form.title }}</div>
+                        <div v-if="!isEmpty(form.title)" class="pr-15 nowrap" :style="title_style">{{ form.title }}</div>
                     </div>
                     <div class="flex-row gap-10 align-c right-0 abs">
                         <template v-if="form.keyword_show == '1'">
diff --git a/src/components/page-settings/index.vue b/src/components/page-settings/index.vue
index a44e036b..7148bca4 100644
--- a/src/components/page-settings/index.vue
+++ b/src/components/page-settings/index.vue
@@ -9,38 +9,59 @@
                     <img class="img" :style="`Filter: brightness(${new_style.function_buttons_type == '0' ? 0 : 100})`" src="@/assets/images/layout/main/main-top.png" />
                 </div>
                 <div class="model-head tc re mlr-12 mt-6">
-                    <div class="model-head-content flex-row align-c jc-sb gap-16 re">
-                        <div v-if="['1', '2', '3'].includes(form.theme)" class="flex-1">
-                            <div class="flex-row align-c jc-c h gap-16" :class="position_class" :style="[{ 'justify-content': form?.indicator_location || 'center' }, text_style]">
-                                <template v-if="['2', '3'].includes(form.theme) && form.logo.length > 0">
-                                    <div class="logo-outer-style">
-                                        <img class="logo-style" :src="form.logo[0].url" />
-                                    </div>
-                                </template>
-                                <div v-if="['1', '2'].includes(form.theme)">{{ form.title }}</div>
-                                <template v-if="['3', '5'].includes(form.theme)">
+                    <div class="flex-col" :style="`gap: ${ new_style.data_alone_row_space }px`">
+                        <div class="model-head-content flex-row align-c jc-sb gap-16 re">
+                            <div v-if="['1', '2', '3'].includes(form.theme)" class="flex-1">
+                                <div class="flex-1 flex-row align-c jc-c h gap-16" :class="position_class" :style="[{ 'justify-content': form?.indicator_location || 'center' }, text_style]">
+                                    <template v-if="['2', '3'].includes(form.theme) && form.logo.length > 0">
+                                        <div class="logo-outer-style">
+                                            <img class="logo-style" :src="form.logo[0].url" />
+                                        </div>
+                                    </template>
+                                    <div v-if="['1', '2'].includes(form.theme)">{{ form.title }}</div>
+                                    <template v-if="['3', '5'].includes(form.theme) && !is_search_alone_row">
+                                        <div class="flex-1">
+                                            <model-search :value="pageData.com_data" :is-page-settings="true"></model-search>
+                                        </div>
+                                    </template>
+                                </div>
+                            </div>
+                            <div v-else-if="['4', '5'].includes(form.theme)" class="flex-1 flex-row align-c h gap-10">
+                                <div class="flex-1 flex-row gap-2" :style="'color:' + new_style.position_color">
+                                    <template v-if="form.is_location_left_icon_show == '1'">
+                                        <image-empty v-if="form.location_left_img.length > 0" v-model="form.location_left_img[0]" fit="contain" :error-img-style="'width: 12px; height:12px'"></image-empty>
+                                        <icon v-else :name="form.location_left_icon" size="12"></icon>
+                                    </template>
+                                    <span class="location-name size-14 text-line-1">{{ form.positioning_name }}</span>
+                                    <template v-if="form.is_location_right_icon_show == '1'">
+                                        <image-empty v-if="form.location_right_img.length > 0" v-model="form.location_right_img[0]" fit="contain" :error-img-style="'width: 12px; height:12px'"></image-empty>
+                                        <icon v-else :name="form.location_right_icon" size="12"></icon>
+                                    </template>
+                                </div>
+                                <template v-if="['5'].includes(form.theme) && !is_search_alone_row">
                                     <div class="flex-1">
                                         <model-search :value="pageData.com_data" :is-page-settings="true"></model-search>
                                     </div>
                                 </template>
                             </div>
-                        </div>
-                        <div v-else-if="['4', '5'].includes(form.theme)" class="flex-1 flex-row align-c h gap-10">
-                            <div class="flex-row gap-2" :style="'color:' + new_style.position_color">
-                                <icon name="location" size="12"></icon>
-                                <span class="location-name size-14 text-line-1">{{ form.positioning_name }}</span>
-                                <icon v-if="form.is_arrows_show == '1'" name="arrow-bottom" size="12"></icon>
+                            <div v-if="!isEmpty(form.icon_setting) && !is_icon_alone_row" class="flex-row align-c" :class="'gap-' + new_style.img_space">
+                                <div v-for="(item, index) in form.icon_setting" :key="index" :style="{ width: new_style.img_size + 'px', height: new_style.img_size + 'px' }">
+                                    <image-empty v-if="item.img.length > 0" v-model="item.img[0]" :error-img-style="'width: ' + Number(new_style.img_size) / 2 + 'px;height:' + Number(new_style.img_size) / 2 + 'px;'"></image-empty>
+                                    <icon v-else :name="item.icon" :size="new_style.img_size + ''" :color="new_style.img_color"></icon>
+                                </div>
                             </div>
-                            <template v-if="['5'].includes(form.theme)">
+                        </div>
+                        <div v-if="is_search_alone_row || is_icon_alone_row" class="model-head-content flex-row align-c gap-16">
+                            <template v-if="['3', '5'].includes(form.theme) && is_search_alone_row">
                                 <div class="flex-1">
                                     <model-search :value="pageData.com_data" :is-page-settings="true"></model-search>
                                 </div>
                             </template>
-                        </div>
-                        <div v-if="!isEmpty(form.icon_setting)" class="flex-row align-c" :class="'gap-' + new_style.img_space">
-                            <div v-for="(item, index) in form.icon_setting" :key="index" :style="{ width: new_style.img_size + 'px', height: new_style.img_size + 'px' }">
-                                <image-empty v-if="item.img.length > 0" v-model="item.img[0]" :error-img-style="'width: ' + Number(new_style.img_size) / 2 + 'px;height:' + Number(new_style.img_size) / 2 + 'px;'"></image-empty>
-                                <icon v-else :name="item.icon" :size="new_style.img_size + ''" :color="new_style.img_color"></icon>
+                            <div v-if="!isEmpty(form.icon_setting) && is_icon_alone_row" class="flex-row align-c" :class="'gap-' + new_style.img_space">
+                                <div v-for="(item, index) in form.icon_setting" :key="index" :style="{ width: new_style.img_size + 'px', height: new_style.img_size + 'px' }">
+                                    <image-empty v-if="item.img.length > 0" v-model="item.img[0]" :error-img-style="'width: ' + Number(new_style.img_size) / 2 + 'px;height:' + Number(new_style.img_size) / 2 + 'px;'"></image-empty>
+                                    <icon v-else :name="item.icon" :size="new_style.img_size + ''" :color="new_style.img_color"></icon>
+                                </div>
                             </div>
                         </div>
                     </div>
@@ -69,6 +90,10 @@ const page_settings = () => {
 };
 const form = computed(() => props.pageData.com_data.content);
 const new_style = computed(() => props.pageData.com_data.style);
+
+const is_search_alone_row = computed(() => form.value.data_alone_row_value.includes('search'));
+const is_icon_alone_row = computed(() => form.value.data_alone_row_value.includes('icon'));
+
 const position = computed(() => (new_style.value.up_slide_display == '1' ? 'absolute' : 'relative'));
 const roll_style = computed(() => {
     let style = ``;
@@ -138,13 +163,18 @@ const position_class = computed(() => (form.value?.indicator_location == 'center
     }
 }
 .model-head {
-    height: 3.2rem;
+    // height: 3.2rem;
     overflow: hidden;
     .model-head-content {
         height: 3.2rem;
         .location-name {
+            line-height: 3.2rem;
             max-width: 15rem;
         }
+        :deep(.el-image) {
+            width: 100%;
+            max-height: 3.2rem;
+        }
     }
 }
 .model-head-icon {
diff --git a/src/components/page-settings/page-content.vue b/src/components/page-settings/page-content.vue
index 42ff1a65..4ddb3fbc 100644
--- a/src/components/page-settings/page-content.vue
+++ b/src/components/page-settings/page-content.vue
@@ -44,11 +44,35 @@
                     <el-form-item label="定位名称">
                         <el-input v-model="form.positioning_name" placeholder="请输入默认定位名称" clearable></el-input>
                     </el-form-item>
-                    <el-form-item label="箭头按钮">
-                        <el-switch v-model="form.is_arrows_show" active-value="1" inactive-value="0"></el-switch>
-                    </el-form-item>
                 </template>
+                <el-form-item label="数据换行">
+                    <el-checkbox-group v-model="form.data_alone_row_value">
+                        <el-checkbox v-for="item in base_list.list_show_list.filter(item => item.type.includes(form.theme))" :key="item.value" :value="item.value">{{ item.name }}</el-checkbox>
+                    </el-checkbox-group>
+                </el-form-item>
             </card-container>
+            <template v-if="['4', '5'].includes(form.theme)">
+                <div class="bg-f5 divider-line" />
+                <card-container>
+                    <div class="mb-12">定位设置</div>
+                    <el-form-item label="左侧图标">
+                        <el-row class="w">
+                            <el-col :span="24"><el-switch v-model="form.is_location_left_icon_show" active-value="1" inactive-value="0"></el-switch></el-col>
+                        </el-row>
+                        <el-row v-if="form.is_location_left_icon_show == '1'" class="mt-10 w">
+                            <el-col :span="24"><upload v-model="form.location_left_img" v-model:icon-value="form.location_left_icon" is-icon :limit="1" size="50"></upload></el-col>
+                        </el-row>
+                    </el-form-item>
+                    <el-form-item label="右侧图标">
+                        <el-row class="w">
+                            <el-col :span="24"><el-switch v-model="form.is_location_right_icon_show" active-value="1" inactive-value="0"></el-switch></el-col>
+                        </el-row>
+                        <el-row v-if="form.is_location_right_icon_show == '1'" class="mt-10 w">
+                            <el-col :span="24"><upload v-model="form.location_right_img" v-model:icon-value="form.location_right_icon" is-icon :limit="1" size="50"></upload></el-col>
+                        </el-row>
+                    </el-form-item>
+                </card-container>
+            </template>
             <div class="bg-f5 divider-line" />
             <template v-if="['3', '5'].includes(form.theme)">
                 <model-search-content :value="form"></model-search-content>
@@ -97,7 +121,11 @@ const base_list = reactive({
         { id: '3', name: '风格3', url: new URL(`../../assets/images/components/page-settings/theme-3.png`, import.meta.url).href },
         { id: '4', name: '风格4', url: new URL(`../../assets/images/components/page-settings/theme-4.png`, import.meta.url).href },
         { id: '5', name: '风格5', url: new URL(`../../assets/images/components/page-settings/theme-5.png`, import.meta.url).href },
-    ]
+    ],
+    list_show_list: [
+        { name: '搜索', value: 'search', type: ['3', '5'] },
+        { name: '右侧图标', value: 'icon', type: ['1', '2', '3', '4', '5' ] },
+    ],
 });
 
 const icon_setting_remove = (index: number) => {
diff --git a/src/components/page-settings/page-styles.vue b/src/components/page-settings/page-styles.vue
index 2eb05a75..b9bc6076 100644
--- a/src/components/page-settings/page-styles.vue
+++ b/src/components/page-settings/page-styles.vue
@@ -25,10 +25,10 @@
                         <el-radio value="1">白色</el-radio>
                     </el-radio-group>
                 </el-form-item>
-                <el-form-item v-if="['1', '2'].includes(search_content.theme)" label="标题名称">
+                <el-form-item v-if="['1', '2'].includes(page_content.theme)" label="标题名称">
                     <color-text-size-group v-model:color="form.header_background_title_color" v-model:typeface="form.header_background_title_typeface" v-model:size="form.header_background_title_size" default-color="#000000"></color-text-size-group>
                 </el-form-item>
-                <el-form-item v-if="['4', '5'].includes(search_content.theme)" label="定位颜色">
+                <el-form-item v-if="['4', '5'].includes(page_content.theme)" label="定位颜色">
                     <color-picker v-model="form.position_color" default-color="#333"></color-picker>
                 </el-form-item>
                 <el-form-item v-if="form.header_background_type == 'transparent'" label="沉浸样式">
@@ -58,6 +58,9 @@
                         <icon name="miaosha-hdgz" size="12" color="#999"></icon>
                     </el-tooltip>
                 </el-form-item>
+                <el-form-item v-if="page_content.data_alone_row_value.length > 0" label="换行间距">
+                    <slider v-model="form.data_alone_row_space" :max="100"></slider>
+                </el-form-item>
             </card-container>
             <div class="bg-f5 divider-line" />
             <card-container>
@@ -111,14 +114,14 @@ const is_have_tabs = computed(() => {
 const emit = defineEmits(['update:value']);
 const state = reactive({
     form: props.value,
-    search_content: props.content,
+    page_content: props.content,
 });
 // 如果需要解构，确保使用toRefs
-const { form, search_content } = toRefs(state);
+const { form, page_content } = toRefs(state);
 // 监听属性变化
 watchEffect(() => {
     form.value = props.value;
-    search_content.value = props.content;
+    page_content.value = props.content;
 });
 
 const header_background_type_change_event = (val: any) => {
diff --git a/src/config/const/header-nav.ts b/src/config/const/header-nav.ts
index c509329a..64c6c528 100644
--- a/src/config/const/header-nav.ts
+++ b/src/config/const/header-nav.ts
@@ -11,11 +11,17 @@ interface DefaultFooterNav {
         logo: uploadList[];
         title: string;
         link: object;
+        data_alone_row_value: string[];
         indicator_location: string;
         bottom_navigation_show: string;
         positioning_name: string;
         icon_setting: { id: string; img: uploadList[]; link: object; icon: string }[];
-        is_arrows_show: string;
+        is_location_left_icon_show: string,
+        location_left_img: uploadList[],
+        location_left_icon: string,
+        is_location_right_icon_show: string,
+        location_right_img: uploadList[],
+        location_right_icon: string,
         is_center: string;
         is_icon_show: string;
         icon_link: object;
@@ -40,6 +46,7 @@ interface DefaultFooterNav {
         header_background_title_typeface: string;
         header_background_title_size: number;
         function_buttons_type: string;
+        data_alone_row_space: number;
         immersive_style: string;
         up_slide_display: string;
         up_slide_background_color_list: color_list[];
@@ -72,10 +79,16 @@ const defaultFooterNav: DefaultFooterNav = {
         logo: [],
         title: '新建页面',
         link: {},
+        data_alone_row_value: [],
         indicator_location: 'center',
         positioning_name: '未选择位置',
         icon_setting: [{ id: get_math(), img: [], icon: 'applet-me-message-acquiesce', link: { name: '我的消息', page: '/pages/message/message' } }],
-        is_arrows_show: '1',
+        is_location_left_icon_show: '1',
+        location_left_img: [],
+        location_left_icon: 'location',
+        is_location_right_icon_show: '1',
+        location_right_img: [],
+        location_right_icon: 'arrow-bottom',
         is_center: '0',
         is_icon_show: '1',
         icon_link: {},
@@ -100,6 +113,7 @@ const defaultFooterNav: DefaultFooterNav = {
         header_background_title_color: '#333',
         header_background_title_typeface: '500',
         header_background_title_size: 14,
+        data_alone_row_space: 5,
         function_buttons_type: '0',
         immersive_style: '0',
         up_slide_display: '1',