From 2ee47d7b932b264feed52875c6d553c067fc4ef8 Mon Sep 17 00:00:00 2001
From: sws <1141121512@qq.com>
Date: Fri, 18 Oct 2024 14:47:15 +0800
Subject: [PATCH] =?UTF-8?q?1.=E6=96=87=E7=AB=A0=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/model-article-list/index.vue   | 24 +++++++++++++------
 .../model-article-list-styles.vue             |  6 ++++-
 .../model-article-tabs-styles.vue             |  6 ++++-
 src/config/const/article-list.ts              |  2 ++
 src/config/const/article-tabs.ts              |  2 ++
 5 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/src/components/model-article-list/index.vue b/src/components/model-article-list/index.vue
index c23c8250..b3d39677 100644
--- a/src/components/model-article-list/index.vue
+++ b/src/components/model-article-list/index.vue
@@ -11,8 +11,10 @@
                             <template v-else> <image-empty v-model="item.data.cover" class="img" :style="img_radius" :error-img-style="error_img"></image-empty> </template>
                         </template>
                         <div class="jc-sb flex-1" :class="article_theme == '3' ? 'flex-row align-c' : 'flex-col'" :style="article_theme != '0' ? content_padding : ''">
-                            <div class="title" :class="article_theme == '3' ? 'text-line-1 flex-1 flex-width' : 'text-line-2'" :style="article_name">{{ !isEmpty(item.new_title) ? item.new_title : item.data.title }}</div>
-                            <div class="desc">123</div>
+                            <div class="flex-col" :class="article_theme == '3' ? 'flex-1 flex-width' : ''" :style="'gap:' + new_style.name_desc_space + 'px;'">
+                                <div class="title" :class="article_theme == '3' ? 'text-line-1' : 'text-line-2'" :style="article_name">{{ !isEmpty(item.new_title) ? item.new_title : item.data.title }}</div>
+                                <div v-if="field_show.includes('2')" class="desc text-line-1" :style="article_desc">{{ item.data.describe || '' }}</div>
+                            </div>
                             <div class="flex-row jc-sb gap-8" :class="article_theme == '3' ? 'ml-10' : 'align-e mt-10'">
                                 <div :style="article_date">{{ field_show.includes('0') ? (!is_obj_empty(item.data) ? item.data.add_time : '2020-06-05 15:20') : '' }}</div>
                                 <div v-show="field_show.includes('1')" class="flex-row align-c gap-3" :style="article_page_view">
@@ -34,7 +36,10 @@
                                 </template>
                                 <template v-else> <image-empty v-model="item.data.cover" class="img" :style="img_radius" :error-img-style="error_img"></image-empty> </template>
                                 <div class="jc-sb flex-1 flex-col" :style="article_theme != '0' ? content_padding : ''">
-                                    <div class="title text-line-2" :style="article_name">{{ !isEmpty(item.new_title) ? item.new_title : item.data.title }}</div>
+                                    <div class="flex-col" :style="'gap:' + new_style.name_desc_space + 'px;'">
+                                        <div class="title text-line-2" :style="article_name">{{ !isEmpty(item.new_title) ? item.new_title : item.data.title }}</div>
+                                        <div v-if="field_show.includes('2')" class="desc text-line-1" :style="article_desc">{{ item.data.describe || '' }}</div>
+                                    </div>
                                     <div class="flex-row jc-sb gap-8 align-e mt-10">
                                         <div :style="article_date">{{ field_show.includes('0') ? (!is_obj_empty(item.data) ? item.data.add_time : '2020-06-05 15:20') : '' }}</div>
                                         <div v-show="field_show.includes('1')" class="flex-row align-c gap-3" :style="article_page_view">
@@ -81,6 +86,7 @@ interface dataObj {
     add_time?: string;
     access_count?: string;
     title?: string;
+    describe?: string;
 }
 interface ArticleList {
     id: number | string;
@@ -96,6 +102,8 @@ const article_theme = ref('0');
 const field_show = ref(['0', '1']);
 // 文章
 const article_name = ref('');
+// 文章描述
+const article_desc = ref('');
 // 日期
 const article_date = ref('');
 // 浏览量
@@ -127,6 +135,11 @@ const carousel_key = ref('0');
 const interval_time = ref(2000);
 // 轮播图是否滚动
 const is_roll = ref(1);
+
+// 内容
+const new_content = computed(() => props.value?.content || {});
+// 样式
+const new_style = computed(() => props.value?.style || {});
 // 获取自动数据
 const get_auto_data_list = async () => {
     const { category_ids, number, order_by_type, order_by_rule, is_cover } = new_content.value;
@@ -160,10 +173,6 @@ const get_auto_data_list = async () => {
         data_list.value = Array(4).fill(default_data_list);
     }
 };
-// 内容
-const new_content = computed(() => props.value?.content || {});
-// 样式
-const new_style = computed(() => props.value?.style || {});
 onMounted(() => {
     // 判断数据类型是选择文章且数据不为空
     if (new_content.value.data_type == '0' && !isEmpty(new_content.value.data_list)) {
@@ -234,6 +243,7 @@ watch(
         field_show.value = new_content.field_show;
         // 样式
         article_name.value = 'font-size:' + new_style.name_size + 'px;' + 'font-weight:' + new_style.name_weight + ';' + 'color:' + new_style.name_color + ';';
+        article_desc.value = 'font-size:' + new_style.desc_size + 'px;' + 'color:' + new_style.desc_color + ';';
         article_date.value = 'font-size:' + new_style.time_size + 'px;' + 'font-weight:' + new_style.time_weight + ';' + 'color:' + new_style.time_color + ';';
         article_page_view.value = 'font-size:' + new_style.page_view_size + 'px;' + 'font-weight:' + new_style.page_view_weight + ';' + 'color:' + new_style.page_view_color + ';';
         content_radius.value = radius_computer(new_style.content_radius);
diff --git a/src/components/model-article-list/model-article-list-styles.vue b/src/components/model-article-list/model-article-list-styles.vue
index 758fe67d..928cb10c 100644
--- a/src/components/model-article-list/model-article-list-styles.vue
+++ b/src/components/model-article-list/model-article-list-styles.vue
@@ -7,7 +7,11 @@
                     <color-text-size-group v-model:color="form.name_color" v-model:typeface="form.name_weight" v-model:size="form.name_size"></color-text-size-group>
                 </el-form-item>
                 <el-form-item label="文章描述">
-                    <color-text-size-group v-model:color="form.desc_color" v-model:size="form.desc_size" :type-list="['color', 'size']"></color-text-size-group>
+                    <color-text-size-group v-model:color="form.desc_color" v-model:size="form.desc_size" :type-list="['color', 'size']">
+                        <el-form-item label="间距" label-width="40" class="mb-0 w form-item-child-label">
+                            <slider v-model="form.name_desc_space" :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.time_color" v-model:typeface="form.time_weight" v-model:size="form.time_size"></color-text-size-group>
diff --git a/src/components/model-article-tabs/model-article-tabs-styles.vue b/src/components/model-article-tabs/model-article-tabs-styles.vue
index 6fed5194..d1f73381 100644
--- a/src/components/model-article-tabs/model-article-tabs-styles.vue
+++ b/src/components/model-article-tabs/model-article-tabs-styles.vue
@@ -27,7 +27,11 @@
                     <color-text-size-group v-model:color="form.name_color" v-model:typeface="form.name_weight" v-model:size="form.name_size"></color-text-size-group>
                 </el-form-item>
                 <el-form-item label="文章描述">
-                    <color-text-size-group v-model:color="form.desc_color" v-model:size="form.desc_size" :type-list="['color', 'size']"></color-text-size-group>
+                    <color-text-size-group v-model:color="form.desc_color" v-model:size="form.desc_size" :type-list="['color', 'size']">
+                        <el-form-item label="间距" label-width="40" class="mb-0 w form-item-child-label">
+                            <slider v-model="form.name_desc_space"></slider>
+                        </el-form-item>
+                    </color-text-size-group>
                 </el-form-item>
                 <el-form-item label="日期时间">
                     <color-text-size-group v-model:color="form.time_color" v-model:typeface="form.time_weight" v-model:size="form.time_size"></color-text-size-group>
diff --git a/src/config/const/article-list.ts b/src/config/const/article-list.ts
index 5e101380..c6421ae8 100644
--- a/src/config/const/article-list.ts
+++ b/src/config/const/article-list.ts
@@ -29,6 +29,7 @@ interface DefaultArticleList {
         name_color: string;
         desc_color: string;
         desc_size: number;
+        name_desc_space: number;
         time_weight: string;
         time_size: number;
         time_color: string;
@@ -67,6 +68,7 @@ const defaultArticleList: DefaultArticleList = {
         name_color: 'rgba(51, 51, 51, 1)',
         desc_color: '#999',
         desc_size: 12,
+        name_desc_space: 4,
         time_weight: '400',
         time_size: 12,
         time_color: 'rgba(153, 153, 153, 1)',
diff --git a/src/config/const/article-tabs.ts b/src/config/const/article-tabs.ts
index ec83ff83..6311e4e9 100644
--- a/src/config/const/article-tabs.ts
+++ b/src/config/const/article-tabs.ts
@@ -46,6 +46,7 @@ interface DefaultArticleTabs {
         name_color: string;
         desc_color: string;
         desc_size: number;
+        name_desc_space: number;
         time_weight: string;
         time_size: number;
         time_color: string;
@@ -99,6 +100,7 @@ const defaultArticleTabs: DefaultArticleTabs = {
         name_color: 'rgba(51, 51, 51, 1)',
         desc_color: '#999',
         desc_size: 12,
+        name_desc_space: 4,
         time_weight: '400',
         time_size: 12,
         time_color: 'rgba(153, 153, 153, 1)',