From 2479d374128451484980ec103d353a7e240c536f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Fri, 18 Oct 2024 11:46:03 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=86=85=E5=AE=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/color-text-size-group/index.vue    |  2 +
 .../common/custom-module/model-text/index.vue |  6 +-
 .../common/product-show-config/index.vue      |  1 +
 src/components/common/upload-icon/index.vue   | 97 -------------------
 src/components/common/upload/index.vue        |  4 +-
 .../model-custom/components/index.scss        |  5 -
 .../model-custom/components/index.vue         |  4 +-
 src/components/model-data-magic/index.vue     | 13 +--
 src/components/model-goods-list/index.vue     |  8 +-
 .../model-goods-list-styles.vue               |  7 ++
 src/components/model-notice/index.vue         |  7 +-
 src/components/model-title/index.vue          |  7 +-
 src/config/const/goods-list.ts                |  8 ++
 src/config/const/goods-tabs.ts                |  8 ++
 src/config/const/tabs-carousel.ts             |  4 +-
 src/styles/common.scss                        |  8 +-
 src/styles/lib.scss                           |  3 +-
 17 files changed, 55 insertions(+), 137 deletions(-)
 delete mode 100644 src/components/common/upload-icon/index.vue

diff --git a/src/components/common/color-text-size-group/index.vue b/src/components/common/color-text-size-group/index.vue
index b8b6fbf5..efc7da75 100644
--- a/src/components/common/color-text-size-group/index.vue
+++ b/src/components/common/color-text-size-group/index.vue
@@ -7,6 +7,8 @@
         <el-form-item v-if="typeList.includes('size')" :label="sliderName" label-width="40" class="mb-0 w form-item-child-label">
             <slider v-model="size" :max="100"></slider>
         </el-form-item>
+        <!-- 额外的使用内容 -->
+        <slot></slot>
     </div>
 </template>
 
diff --git a/src/components/common/custom-module/model-text/index.vue b/src/components/common/custom-module/model-text/index.vue
index 5c5f48e2..cc7d5fcc 100644
--- a/src/components/common/custom-module/model-text/index.vue
+++ b/src/components/common/custom-module/model-text/index.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="img-outer re oh" :style="com_style">
-        <div :style="text_style" class="break">
+        <div :style="text_style" class="txet-word-break">
             <template v-if="form.is_rich_text == '1'">
                 <div class="rich-text-content" :innerHTML="text_title"></div>
             </template>
@@ -80,10 +80,6 @@ const set_count = () => {
 };
 </script>
 <style lang="scss" scoped>
-.break{
-    word-wrap: break-word;
-    word-break:break-all;
-}
 .rich-text-content {
     white-space: normal;
     word-break:break-all;
diff --git a/src/components/common/product-show-config/index.vue b/src/components/common/product-show-config/index.vue
index 90206c52..78f0ced3 100644
--- a/src/components/common/product-show-config/index.vue
+++ b/src/components/common/product-show-config/index.vue
@@ -53,6 +53,7 @@ const { form } = toRefs(state);
 const base_list = {
     list_show_list: [
         { name: '商品名称', value: 'title', type:['0', '1', '2', '3', '4', '5', '6']},
+        { name: '商品简述', value: 'simple_desc', type:['0', '1', '2', '3', '5'] },
         { name: '商品标签', value: 'plugins_view_icon', type:['0', '1', '2'] },
         { name: '商品售价', value: 'price', type:['0', '1', '2', '3', '4', '5', '6'] },
         { name: '商品销量', value: 'sales_count', type:['0', '1', '2'] },
diff --git a/src/components/common/upload-icon/index.vue b/src/components/common/upload-icon/index.vue
deleted file mode 100644
index 389e1317..00000000
--- a/src/components/common/upload-icon/index.vue
+++ /dev/null
@@ -1,97 +0,0 @@
-<template>
-    <el-dialog v-model="dialogVisible" title="icon选择" :close-on-press-escape="false" width="70%" :close-on-click-modal="false" :append-to-body="false" :before-close="handleClose">
-        <div class="mt-20 icon-dialog">
-            <div class="flex jc-e"><el-input v-model="searchText" placeholder="请输入图标名称" class="search-text" clearable></el-input></div>
-            <el-row v-if="icon_list.length > 0" class="icon-row mt-20" :gutter="20">
-                <el-col v-for="item in icon_list" :key="item.unicode" :span="3">
-                    <div class="icon-item" @click="search_icon_click(item.font_class)">
-                        <i :class="`iconfont icon-${ item.font_class }`"></i>
-                        <div class="text-line-1 size-14">{{ item.name }}</div>
-                    </div>
-                </el-col>
-            </el-row>
-            <div v-else>
-                <no-data height="500px"></no-data>
-            </div>
-        </div>
-    </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>
-        <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">
-import searchIcons from '@/assets/icons/iconfont.json';
-import { isEmpty } from 'lodash';
-interface Props {
-    size: number;
-}
-const props = withDefaults(defineProps<Props>(), {
-    size: 50,
-});
-const upload_size = computed(() => {
-    const size = props.size.toString();
-    return size.includes('%') ? size : size + 'px';
-});
-// 搜索
-const searchText = ref('');
-const icon_list = computed(() => searchIcons.glyphs.filter(item => item.name.includes(searchText.value)));
-// 弹出框操作
-const dialogVisible = ref(false);
-const handleClose = () => {
-    dialogVisible.value = false;
-};
-const icon_click = () => {
-    dialogVisible.value = true;
-};
-const icon_class = defineModel('icon_class', { type: String, default: '' });
-const search_icon_click = (item: any) => {
-    icon_class.value = item;
-    handleClose();
-};
-const remove_icon = () => {
-    icon_class.value = '';
-}
-</script>
-
-<style lang="scss" scoped>
-.icon-dialog {
-    height: 57rem;
-    .search-text {
-        width: 15rem;
-    }
-    .icon-row {
-        max-height: 50rem;
-        overflow: auto;
-        .icon-item {
-            border: 1px solid #ccc;
-            text-align: center;
-            border-radius: 4px;
-            padding: 1rem;
-            margin-bottom: 2rem; 
-            cursor: pointer;
-            .iconfont {
-                font-size: 3.6rem;
-                height: 3.6rem;
-            }
-        }
-        .icon-item:hover {
-            border: 1px solid $cr-main;
-        }
-        .text-line-1 {
-            line-height: 2rem;
-        }
-    }
-}
-.search-icon{
-    position: relative;
-    background: #fafcff;
-    border-radius: 0.2rem;
-    border: 0.1rem dashed #d7eeff;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-</style>
diff --git a/src/components/common/upload/index.vue b/src/components/common/upload/index.vue
index 7a2b055a..8d520aed 100644
--- a/src/components/common/upload/index.vue
+++ b/src/components/common/upload/index.vue
@@ -228,7 +228,7 @@ import { ext_img_name_list, ext_video_name_list, ext_file_name_list, ext_file_na
 import UploadAPI, { Tree } from '@/api/upload';
 import { uploadStore, commonStore } from '@/store';
 import { isEmpty } from 'lodash';
-import searchIcons from '@/assets/icons/iconfont.json';
+import search_icons from '@/assets/icons/iconfont.json';
 const upload_store = uploadStore();
 const common_store = commonStore();
 const app = getCurrentInstance();
@@ -621,7 +621,7 @@ const transform_category_event = () => {
 const icon_value = defineModel('iconValue', { type: String, default: '' });
 const temp_icon_value = ref('');
 const search_icon = ref('');
-const icon_list = computed(() => searchIcons.glyphs.filter((item) => item.name.includes(search_icon.value)));
+const icon_list = computed(() => search_icons.glyphs.filter((item) => item.name.includes(search_icon.value) || item.font_class.includes(search_icon.value)));
 const icon_index = ref(-1);
 const handle_select_icon = (item: any, index: number) => {
     icon_index.value = index;
diff --git a/src/components/model-custom/components/index.scss b/src/components/model-custom/components/index.scss
index d6233946..e2aadcf3 100644
--- a/src/components/model-custom/components/index.scss
+++ b/src/components/model-custom/components/index.scss
@@ -312,11 +312,6 @@
     }
 }
 
-.break{
-    word-wrap: break-word;
-    word-break:break-all;
-}
-
 .plug-in-show-component-line::after {
     content: '';
     position: absolute;
diff --git a/src/components/model-custom/components/index.vue b/src/components/model-custom/components/index.vue
index 61370a31..862f036e 100644
--- a/src/components/model-custom/components/index.vue
+++ b/src/components/model-custom/components/index.vue
@@ -21,7 +21,7 @@
         </card-container>
         <card-container class="h selected">
             <div class="flex-col gap-10 drawer-container">
-                <div class="flex-row align-c jc-sb">已选组件
+                <div class="flex-row align-c jc-sb">已选组件({{ diy_data.length }})
                     <div class="flex-row align-c gap-20">
                         <span class="clear-selection" @click="show_computer_line">{{ !is_show_component_line ? '显示' : '关闭' }}参考线</span>
                         <span class="clear-selection" @click="cancel">清除选中</span>
@@ -38,7 +38,7 @@
                                             <el-input v-model="item.new_name" placeholder="请输入组件别名" size="small" clearable type="textarea" class="flex-1 do-not-trigger" :rows="1" resize="none" />
                                         </template>
                                         <template v-else>
-                                            <span class="size-12 cr-6 break">{{ !isEmpty(item.new_name) ? item.new_name : item.name  }}</span>
+                                            <span class="size-12 cr-6 txet-word-break">{{ !isEmpty(item.new_name) ? item.new_name : item.name  }}</span>
                                         </template>
                                     </div>
                                     <div class="abs draggable-icon" :style="item.show_tabs == '1' ? 'opacity: 1;' : 'opacity: 0.5;'">
diff --git a/src/components/model-data-magic/index.vue b/src/components/model-data-magic/index.vue
index fed9ee01..e2670f1e 100644
--- a/src/components/model-data-magic/index.vue
+++ b/src/components/model-data-magic/index.vue
@@ -10,8 +10,8 @@
                                 <template v-if="item.data_content.data_type == 'goods'">
                                     <div :class="`w h flex-col ${ 'gap-' + item.title_text_gap }`" :style="`${ [0, 1].includes(index) ? padding_computer(item.data_style.chunk_padding) : '' }`">
                                         <div v-if="(!isEmpty(item.data_content.heading_title) || !isEmpty(item.data_content.subtitle)) && [0, 1].includes(index)" class="flex-col gap-5 tl">
-                                            <p class="ma-0 w text-line-1" :style="trends_config(item.data_style, 'heading')">{{ item.data_content.heading_title || '' }}</p>
-                                            <p class="ma-0 w text-line-1" :style="trends_config(item.data_style, 'subtitle')">{{ item.data_content.subtitle || '' }}</p>
+                                            <p class="ma-0 w txet-word-break text-line-1" :style="trends_config(item.data_style, 'heading')">{{ item.data_content.heading_title || '' }}</p>
+                                            <p class="ma-0 w txet-word-break text-line-1" :style="trends_config(item.data_style, 'subtitle')">{{ item.data_content.subtitle || '' }}</p>
                                         </div>
                                         <div class="w h">
                                             <magic-carousel :value="item" :good-style="item.data_style" :content-img-radius="content_img_radius" :actived="form.style_actived" type="product" @carousel_change="carousel_change($event, index)"></magic-carousel>
@@ -41,8 +41,8 @@
                             <template v-if="item.data_content.data_type == 'goods'">
                                 <div :class="`w h flex-col ${ 'gap-' + item.title_text_gap }`" :style="`${ padding_computer(item.data_style.chunk_padding) }`">
                                     <div v-if="!isEmpty(item.data_content.heading_title) || !isEmpty(item.data_content.subtitle)" class="flex-col gap-5 tl">
-                                        <p class="ma-0 w text-line-1" :style="trends_config(item.data_style, 'heading')">{{ item.data_content.heading_title || '' }}</p>
-                                        <p class="ma-0 w text-line-1" :style="trends_config(item.data_style, 'subtitle')">{{ item.data_content.subtitle || '' }}</p>
+                                        <p class="ma-0 w txet-word-break text-line-1" :style="trends_config(item.data_style, 'heading')">{{ item.data_content.heading_title || '' }}</p>
+                                        <p class="ma-0 w txet-word-break text-line-1" :style="trends_config(item.data_style, 'subtitle')">{{ item.data_content.subtitle || '' }}</p>
                                     </div>
                                     <div class="w h">
                                         <magic-carousel :value="item" :good-style="item.data_style" :content-img-radius="content_img_radius" type="product" :actived="form.style_actived" @carousel_change="carousel_change($event, index)"></magic-carousel>
@@ -339,11 +339,6 @@ const style_img_container = computed(() => common_img_computer(new_style.value.c
 .img-spacing-border {
     margin: v-bind(spacing);
 }
-.text-line-1 {
-    word-break: break-word;
-    overflow-wrap: break-word;
-    word-wrap: break-word;
-}
 .style-size {
     height: 100%;
     width: 100%;
diff --git a/src/components/model-goods-list/index.vue b/src/components/model-goods-list/index.vue
index 85bc4d43..0f1aaae8 100644
--- a/src/components/model-goods-list/index.vue
+++ b/src/components/model-goods-list/index.vue
@@ -25,7 +25,10 @@
                             </template>
                             <div class="flex-col flex-1 jc-sb content gap-10" :style="content_style">
                                 <div class="flex-col gap-10 top-title">
+                                    <div v-if="is_show('shop')" class="flex-col" :style="`gap: ${ item.title_simple_desc_spacing }px;`">
+                                    </div>
                                     <div v-if="is_show('title')" :class="text_line" :style="trends_config('title')">{{ item.title }}</div>
+                                    <div v-if="['0', '1', '2', '3', '5'].includes(theme) && is_show('simple_desc')" class="text-line-1" :style="trends_config('simple_desc')">{{ item.simple_desc }}</div>
                                     <div v-if="show_content && is_show('plugins_view_icon') && !isEmpty(item.plugins_view_icon_data)" class="flex-row gap-5 align-c">
                                         <div v-for="(icon_data, icon_index) in item.plugins_view_icon_data" :key="icon_index" class="radius-sm size-9 pl-3 pr-3" :style="icon_style(icon_data)">{{ icon_data.name }}</div>
                                     </div>
@@ -110,6 +113,7 @@
                                 <div class="flex-col flex-1 jc-sb content gap-10" :style="content_style">
                                     <div class="flex-col gap-10 top-title">
                                         <div v-if="is_show('title')" :class="text_line" :style="trends_config('title')">{{ item.title }}</div>
+                                        <div v-if="['0', '1', '2', '3', '5'].includes(theme) && is_show('simple_desc')" class="text-line-1" :style="trends_config('simple_desc')">{{ item.simple_desc }}</div>
                                         <div v-if="show_content && is_show('plugins_view_icon') && !isEmpty(item.plugins_view_icon_data)" class="flex-row gap-5 align-c">
                                             <div v-for="(icon_data, icon_index) in item.plugins_view_icon_data" :key="icon_index" class="radius-sm size-9 pl-3 pr-3" :style="icon_style(icon_data)">{{ icon_data.name }}</div>
                                         </div>
@@ -184,7 +188,9 @@ interface data_list {
     min_original_price: string;
     show_original_price_symbol: string;
     show_original_price_unit: string;
+    simple_desc: string;
     min_price: string;
+    title_simple_desc_spacing: string;
     show_price_symbol: string;
     show_price_unit: string;
     sales_count: string;
@@ -369,7 +375,7 @@ const text_line = computed(() => {
     if (['1', '6'].includes(theme.value)) {
         line = 'text-line-1';
     } else if (['0', '2', '3', '4', '5'].includes(theme.value)) {
-        line = 'text-line-2';
+        line = 'text-line-2 multi-text';
     }
     return line;
 });
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 478ceee3..1e1de6bd 100644
--- a/src/components/model-goods-list/model-goods-list-styles.vue
+++ b/src/components/model-goods-list/model-goods-list-styles.vue
@@ -6,6 +6,13 @@
                 <el-form-item label="商品名称">
                     <color-text-size-group v-model:color="form.shop_title_color" v-model:typeface="form.shop_title_typeface" v-model:size="form.shop_title_size" default-color="#000000"></color-text-size-group>
                 </el-form-item>
+                <el-form-item label="商品简述">
+                    <color-text-size-group v-model:color="form.shop_simple_desc_color" v-model:size="form.shop_simple_desc_size" default-color="#999" :type-list="['color', 'size']">
+                        <el-form-item label="间距" label-width="40" class="mb-0 w form-item-child-label">
+                            <slider v-model="form.title_simple_desc_spacing" :max="100"></slider>
+                        </el-form-item>
+                    </color-text-size-group>
+                </el-form-item>
                 <el-form-item label="商品价格">
                     <color-text-size-group v-model:color="form.shop_price_color" v-model:typeface="form.shop_price_typeface" v-model:size="form.shop_price_size" default-color="#000000"></color-text-size-group>
                 </el-form-item>
diff --git a/src/components/model-notice/index.vue b/src/components/model-notice/index.vue
index 45838989..57171889 100644
--- a/src/components/model-notice/index.vue
+++ b/src/components/model-notice/index.vue
@@ -41,7 +41,7 @@
                         </div>
                         <div v-for="(item, index) in notice_list" :key="index" class="flex align-c" :style="news_style">
                             <span :class="`num one${index + 1}`">{{ index + 1 }}</span>
-                            <div class="break" :style="`color: ${new_style.news_color}`">{{ item.notice_title }}</div>
+                            <div class="txet-word-break" :style="`color: ${new_style.news_color}`">{{ item.notice_title }}</div>
                         </div>
                     </div>
                 </div>
@@ -175,11 +175,6 @@ watchEffect(() => {
     width: 2.4rem;
     height: 2.4rem;
 }
-.break {
-    word-break: break-word;
-    overflow-wrap: break-word;
-    word-wrap: break-word;
-}
 :deep(.el-carousel) {
     .el-carousel__container {
         height: v-bind(container_height);
diff --git a/src/components/model-title/index.vue b/src/components/model-title/index.vue
index 10f2875e..a9a5a22b 100644
--- a/src/components/model-title/index.vue
+++ b/src/components/model-title/index.vue
@@ -21,7 +21,7 @@
                         <div v-if="form.right_show == '1'" class="nowrap" :style="right_style">{{ form.right_title }}<el-icon class="iconfont icon-arrow-right" :color="new_style.right_color || '#999'"></el-icon></div>
                     </div>
                 </div>
-                <div v-if="!isEmpty(form.subtitle)" class="break" :style="subtitle_style">{{ form.subtitle }}</div>
+                <div v-if="!isEmpty(form.subtitle)" class="txet-word-break" :style="subtitle_style">{{ form.subtitle }}</div>
             </div>
         </div>
     </div>
@@ -94,11 +94,6 @@ const style_img_container = computed(() => common_img_computer(new_style.value.c
     top: 50%;
     transform: translateY(-50%);
 }
-.break {
-    word-break: break-word;
-    overflow-wrap: break-word;
-    word-wrap: break-word;
-}
 .title-img {
     // max-width: 6rem;
     // max-height: 3rem;
diff --git a/src/config/const/goods-list.ts b/src/config/const/goods-list.ts
index 956b29c7..a4f80f80 100644
--- a/src/config/const/goods-list.ts
+++ b/src/config/const/goods-list.ts
@@ -38,6 +38,10 @@ interface DefaultProductList {
         shop_title_typeface: string;
         shop_title_size: number;
         shop_title_color: string;
+        shop_simple_desc_typeface: string;
+        shop_simple_desc_size: number;
+        shop_simple_desc_color: string;
+        title_simple_desc_spacing: 4,
         shop_price_typeface: string;
         shop_price_size: number;
         shop_price_color: string;
@@ -110,6 +114,10 @@ const defaultProductList: DefaultProductList = {
         shop_title_typeface: '500',
         shop_title_size: 14,    
         shop_title_color: "#333333",
+        shop_simple_desc_typeface: '400',
+        shop_simple_desc_size: 12,    
+        shop_simple_desc_color: "#999",
+        title_simple_desc_spacing: 4,
         shop_price_typeface: '500',
         shop_price_size: 18,
         shop_price_color: "#EA3323;",
diff --git a/src/config/const/goods-tabs.ts b/src/config/const/goods-tabs.ts
index 1677bc35..60bd90f2 100644
--- a/src/config/const/goods-tabs.ts
+++ b/src/config/const/goods-tabs.ts
@@ -57,6 +57,10 @@ interface DefaultProductList {
         shop_title_typeface: string;
         shop_title_size: number;
         shop_title_color: string;
+        shop_simple_desc_typeface: string;
+        shop_simple_desc_size: number;
+        shop_simple_desc_color: string;
+        title_simple_desc_spacing: 4,
         shop_price_typeface: string;
         shop_price_size: number;
         shop_price_color: string;
@@ -141,6 +145,10 @@ const defaultProductList: DefaultProductList = {
         shop_title_typeface: '500',
         shop_title_size: 14,
         shop_title_color: '#333333',
+        shop_simple_desc_typeface: '400',
+        shop_simple_desc_size: 12,    
+        shop_simple_desc_color: "#999",
+        title_simple_desc_spacing: 4,
         shop_price_typeface: '500',
         shop_price_size: 18,
         shop_price_color: '#EA3323;',
diff --git a/src/config/const/tabs-carousel.ts b/src/config/const/tabs-carousel.ts
index 679e7c2e..40ad811a 100644
--- a/src/config/const/tabs-carousel.ts
+++ b/src/config/const/tabs-carousel.ts
@@ -27,6 +27,7 @@ interface defaultTabs {
         img_fit: string;
         is_roll: string;
         interval_time: number;
+        height: number;
     };
     style: {
         tabs_one_theme: string;
@@ -49,7 +50,6 @@ interface defaultTabs {
         radius_bottom_left: number;
         radius_bottom_right: number;
         is_show: string;
-        height: number;
         image_spacing: number;
         indicator_style: string;
         indicator_location: string;
@@ -108,6 +108,7 @@ const defaultTabs: defaultTabs = {
                 video_title: '视频名称',
             },
         ],
+        height: 300,
     },
     style: {
         tabs_one_theme: '0',
@@ -133,7 +134,6 @@ const defaultTabs: defaultTabs = {
         radius_bottom_left: 0,
         radius_bottom_right: 0,
         is_show: '1',
-        height: 300,
         image_spacing: 10,
         indicator_style: 'dot',
         indicator_location: 'center',
diff --git a/src/styles/common.scss b/src/styles/common.scss
index b717bad5..63d95667 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -284,4 +284,10 @@
     line-height: 1.6rem;
     font-size: 1.4rem;
     white-space: initial;
-}
\ No newline at end of file
+}
+// 数字和文字超出范围不整体换行
+.txet-word-break {
+    word-break: break-all;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+}
diff --git a/src/styles/lib.scss b/src/styles/lib.scss
index a70c5b8e..d9b4147c 100644
--- a/src/styles/lib.scss
+++ b/src/styles/lib.scss
@@ -311,7 +311,8 @@ $line: 5;
         -webkit-line-clamp: #{$i};
         line-clamp: #{$i}; // 添加标准属性以增加兼容性
         -webkit-box-orient: vertical;
-        word-break: break-word;
+        // word-break: break-word;
+        word-break: break-all;
         overflow-wrap: break-word;
         word-wrap: break-word;
     }