From 19565eccd0ce92aa4860bfa1df6621b502d351a1 Mon Sep 17 00:00:00 2001
From: sws <1141121512@qq.com>
Date: Fri, 23 Aug 2024 18:52:09 +0800
Subject: [PATCH] =?UTF-8?q?1.=E6=9B=B4=E6=96=B0=E6=96=87=E7=AB=A0=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E5=AD=97=E6=AE=B5=20sws=202024-08-23?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/drag-group/index.vue    | 17 ++--
 src/components/common/tabs-view/index.vue     | 32 +++----
 src/components/model-article-list/index.vue   | 89 ++++++++++---------
 .../model-article-list-content.vue            | 42 ++++-----
 src/components/model-article-tabs/index.vue   | 11 ++-
 .../model-article-tabs-content.vue            | 51 ++++++-----
 .../components/main/default/article-list.ts   | 31 ++++---
 .../components/main/default/article-tabs.ts   | 40 ++++-----
 8 files changed, 159 insertions(+), 154 deletions(-)

diff --git a/src/components/common/drag-group/index.vue b/src/components/common/drag-group/index.vue
index d8bf0a1c..9c152e1f 100644
--- a/src/components/common/drag-group/index.vue
+++ b/src/components/common/drag-group/index.vue
@@ -1,7 +1,7 @@
 <template>
     <drag :data="drag_list" :space-col="20" :is-show-edit="true" @remove="remove" @on-sort="on_sort" @edit="edit">
         <template #default="{ row, index }">
-            <upload v-model="row.new_url" :limit="1" size="40" styles="2"></upload>
+            <upload v-model="row.new_cover" :limit="1" size="40" styles="2"></upload>
             <el-image :src="row.data[imgParams]" fit="contain" class="img">
                 <template #error>
                     <div class="bg-f5 flex-row jc-c align-c radius h w">
@@ -60,10 +60,10 @@ const remove = (index: number) => {
         edit_index.value = -1;
     }
     emits('remove', index);
-}
+};
 const on_sort = (item: any) => {
     emits('onsort', item);
-}
+};
 const edit = (index: number) => {
     if (edit_index.value === index) {
         edit_close_processing(index);
@@ -72,31 +72,30 @@ const edit = (index: number) => {
         edit_index.value = index;
         edit_processing(index);
     }
-}
+};
 
 const double_click = (index: number) => {
     edit_index.value = index;
     edit_processing(index);
-}
-// new_tile === title  new_tile清空，使用title字段，如果不一致，先办判断new_title !=='', 取new_title否则取title
+};
 // 编辑时的数据处理
 const edit_processing = (index: number) => {
     const list = drag_list.value[index];
     if (!isEmpty(list) && isEmpty(list.new_title)) {
         list.new_title = list.data.title;
     }
-}
+};
 //编辑关闭前的处理
 const edit_close_processing = (index: number) => {
     const list = drag_list.value[index];
     if (!isEmpty(list) && !isEmpty(list.new_title) && list.new_title === list.data.title) {
         list.new_title = '';
     }
-}
+};
 </script>
 <style lang="scss" scoped>
 .img {
     width: 4rem;
     height: 4rem;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/common/tabs-view/index.vue b/src/components/common/tabs-view/index.vue
index c50952ce..497079d4 100644
--- a/src/components/common/tabs-view/index.vue
+++ b/src/components/common/tabs-view/index.vue
@@ -1,17 +1,17 @@
 <template>
     <div class="tabs flex-row oh">
         <template v-for="(item, index) in tabs.content.tabs_list" :key="index">
-            <div class="item nowrap flex-col jc-c gap-4" :class="tabs_style + (index == 0 ? ' active' : '')">
+            <div class="item nowrap flex-col jc-c gap-4" :class="tabs_theme + (index == 0 ? ' active' : '')">
                 <template v-if="!isEmpty(item.img)">
                     <image-empty v-model="item.img[0]" class="img" error-img-style="width:2rem;height:2rem;"></image-empty>
                 </template>
                 <template v-else>
                     <image-empty class="img" error-img-style="width:2rem;height:2rem;"></image-empty>
                 </template>
-                <div class="title" :style="index == 0 ? tabs_style_style.tabs_title_checked : tabs_style_style.tabs_title">{{ item.title }}</div>
+                <div class="title" :style="index == 0 ? tabs_theme_style.tabs_title_checked : tabs_theme_style.tabs_title">{{ item.title }}</div>
                 <div class="desc">{{ item.desc }}</div>
                 <icon name="checked-1" class="icon"></icon>
-                <div class="bottom_line" :style="tabs_style_style.tabs_check"></div>
+                <div class="bottom_line" :style="tabs_theme_style.tabs_check"></div>
             </div>
         </template>
     </div>
@@ -27,22 +27,22 @@ const props = defineProps({
     },
 });
 const tabs = ref(props.value);
-const tabs_style = computed(() => {
-    let tabs_style = '';
-    if (tabs.value.content.tabs_style == '1') {
-        tabs_style = 'tabs-style-2';
-    } else if (tabs.value.content.tabs_style == '2') {
-        tabs_style = 'tabs-style-3';
-    } else if (tabs.value.content.tabs_style == '3') {
-        tabs_style = 'tabs-style-4';
-    } else if (tabs.value.content.tabs_style == '4') {
-        tabs_style = 'tabs-style-5';
+const tabs_theme = computed(() => {
+    let tabs_theme = '';
+    if (tabs.value.content.tabs_theme == '1') {
+        tabs_theme = 'tabs-style-2';
+    } else if (tabs.value.content.tabs_theme == '2') {
+        tabs_theme = 'tabs-style-3';
+    } else if (tabs.value.content.tabs_theme == '3') {
+        tabs_theme = 'tabs-style-4';
+    } else if (tabs.value.content.tabs_theme == '4') {
+        tabs_theme = 'tabs-style-5';
     } else {
-        tabs_style = 'tabs-style-1';
+        tabs_theme = 'tabs-style-1';
     }
-    return tabs_style;
+    return tabs_theme;
 });
-const tabs_style_style = computed(() => {
+const tabs_theme_style = computed(() => {
     const new_gradient_params = {
         color_list: tabs.value.style.tabs_checked,
         direction: tabs.value.style.tabs_direction,
diff --git a/src/components/model-article-list/index.vue b/src/components/model-article-list/index.vue
index 2b82abef..ad7d5c32 100644
--- a/src/components/model-article-list/index.vue
+++ b/src/components/model-article-list/index.vue
@@ -1,20 +1,20 @@
 <template>
     <div class="oh" :style="style_container">
         <div class="re" :style="style">
-            <div class="flex-warp" :class="article_type_class" :style="article_spacing">
-                <template v-for="(item, index) in article_list" :key="index">
-                    <div class="item gap-10 bg-f oh" :class="article_type == '0' ? 'flex-row' : 'flex-col'" :style="article_style">
-                        <template v-if="item.new_url.length > 0">
-                            <image-empty v-model="item.new_url[0].url" class="img" :style="img_radius" :error-img-style="error_img"></image-empty>
+            <div class="flex-warp" :class="article_theme_class" :style="article_spacing">
+                <template v-for="(item, index) in data_list" :key="index">
+                    <div class="item gap-10 bg-f oh" :class="article_theme == '0' ? 'flex-row' : 'flex-col'" :style="article_style">
+                        <template v-if="item.new_cover.length > 0">
+                            <image-empty v-model="item.new_cover[0].url" class="img" :style="img_radius" :error-img-style="error_img"></image-empty>
                         </template>
                         <template v-else>
-                            <image-empty v-model="item.link.cover" class="img" :style="img_radius" :error-img-style="error_img"></image-empty>
+                            <image-empty v-model="item.data.cover" class="img" :style="img_radius" :error-img-style="error_img"></image-empty>
                         </template>
-                        <div class="flex-col jc-sb flex-1" :style="article_type !== '0' ? content_padding : ''">
-                            <div class="title text-line-2" :style="article_name">{{ item.new_title }}</div>
+                        <div class="flex-col jc-sb flex-1" :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-row jc-sb gap-8 align-e mt-10">
-                                <div :style="article_date">{{ is_show.includes('0') ? '2020-06-05 15:20' : '' }}</div>
-                                <icon v-show="is_show.includes('1')" name="eye" :style="article_page_view">16</icon>
+                                <div :style="article_date">{{ field_show.includes('0') ? '2020-06-05 15:20' : '' }}</div>
+                                <icon v-show="field_show.includes('1')" name="eye" :style="article_page_view">16</icon>
                             </div>
                         </div>
                     </div>
@@ -40,24 +40,25 @@ const props = defineProps({
 const error_img = ref('width:50px;padding:10px;');
 const style = ref('');
 const style_container = ref('');
-interface linkObj {
+interface dataObj {
     cover?: string;
+    title?: string;
 }
 interface ArticleList {
     id: number | string;
-    link: linkObj;
+    data: dataObj;
     new_title: string;
-    new_url: uploadList[];
+    new_cover: uploadList[];
 }
 const containerRef = ref<HTMLElement | null>(null);
 // 数据
-const article_list = ref<ArticleList[]>([]);
+const data_list = ref<ArticleList[]>([]);
 // 风格
-const article_type = ref('0');
+const article_theme = ref('0');
 // 是否显示
-const is_show = ref(['0', '1']);
+const field_show = ref(['0', '1']);
 // 是否显示封面图片
-const is_img_show = ref(true);
+const is_cover = ref(true);
 // 文章
 const article_name = ref('');
 // 日期
@@ -79,11 +80,11 @@ const article_item_width = ref('104');
 const article_item_height = ref('104');
 
 const article_style = ref({});
-const default_article_list: ArticleList = {
+const default_data_list: ArticleList = {
     id: 0,
-    link: {},
+    data: {},
     new_title: '标题',
-    new_url: [],
+    new_cover: [],
 };
 watch(
     props.value,
@@ -91,20 +92,20 @@ watch(
         const new_content = newVal?.content;
         const new_style = newVal?.style;
         // 内容
-        if (new_content.article_check === '0') {
-            if (!isEmpty(new_content.article_list)) {
-                article_list.value = new_content.article_list;
-                article_list.value = cloneDeep(new_content.article_list);
+        if (new_content.data_type === '0') {
+            if (!isEmpty(new_content.data_list)) {
+                data_list.value = new_content.data_list;
+                data_list.value = cloneDeep(new_content.data_list);
             } else {
-                article_list.value = Array(4).fill(default_article_list);
+                data_list.value = Array(4).fill(default_data_list);
             }
         } else {
-            get_auto_article_list(new_content);
+            get_auto_data_list(new_content);
         }
 
-        article_type.value = new_content.article_style;
-        is_show.value = new_content.is_show;
-        is_img_show.value = new_content.is_img_show;
+        article_theme.value = new_content.theme;
+        field_show.value = new_content.field_show;
+        is_cover.value = new_content.is_cover;
         // 样式
         article_name.value = 'font-size:' + new_style.name_size + 'px;' + 'font-weight:' + new_style.name_weight + ';' + 'color:' + new_style.name_color + ';';
         article_date.value = 'font-size:' + new_style.time_size + 'px;' + 'font-weight:' + new_style.time_weight + ';' + 'color:' + new_style.time_color + ';';
@@ -119,14 +120,14 @@ watch(
         article_spacing.value = `gap: ${new_style.article_spacing}px;`;
         // 文章样式
         article_style.value = content_radius.value + content_spacing.value;
-        if (article_type.value == '0') {
+        if (article_theme.value == '0') {
             article_style.value += content_padding.value;
         }
-        if (article_type.value == '1') {
+        if (article_theme.value == '1') {
             article_spacing_children.value = `width: calc(50% - ${new_style.article_spacing / 2}px);`;
             article_style.value += article_spacing_children.value;
         }
-        if (article_type.value == '3') {
+        if (article_theme.value == '3') {
             article_item_width.value = `${new_style.article_width}px`;
             article_item_height.value = `${new_style.article_height}px`;
         }
@@ -136,8 +137,8 @@ watch(
     },
     { immediate: true, deep: true }
 );
-const article_type_class = computed(() => {
-    switch (article_type.value) {
+const article_theme_class = computed(() => {
+    switch (article_theme.value) {
         case '0':
             return 'style1 flex-col';
         case '1':
@@ -147,30 +148,30 @@ const article_type_class = computed(() => {
         case '3':
             return 'style4 flex-row';
     }
-    return `style${article_type.value}`;
+    return `style${article_theme.value}`;
 });
-const get_auto_article_list = async (new_content: any) => {
-    const { article_category, number, sort, sort_rules } = new_content;
+const get_auto_data_list = async (new_content: any) => {
+    const { category, number, sort, sort_rules } = new_content;
     const new_data = {
         article_keywords: '',
-        article_category_ids: article_category.join(','),
+        article_category_ids: category.join(','),
         article_order_by_type: sort,
         article_order_by_rule: sort_rules,
         article_number: number,
     };
     const res = await ArticleAPI.getAutoList(new_data);
     if (!isEmpty(res.data)) {
-        article_list.value = [];
+        data_list.value = [];
         res.data.forEach((child: any) => {
-            article_list.value.push({
+            data_list.value.push({
                 id: get_math(),
-                new_title: child.title,
-                new_url: [],
-                link: child,
+                new_title: '',
+                new_cover: [],
+                data: child,
             });
         });
     } else {
-        article_list.value = Array(4).fill(default_article_list);
+        data_list.value = Array(4).fill(default_data_list);
     }
 };
 </script>
diff --git a/src/components/model-article-list/model-article-list-content.vue b/src/components/model-article-list/model-article-list-content.vue
index 8ca59970..77d01ea6 100644
--- a/src/components/model-article-list/model-article-list-content.vue
+++ b/src/components/model-article-list/model-article-list-content.vue
@@ -4,8 +4,8 @@
             <card-container class="mb-8">
                 <div class="mb-12">展示设置</div>
                 <el-form-item label="选择风格">
-                    <el-radio-group v-model="form.article_style">
-                        <el-radio v-for="item in base_list.article_style_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
+                    <el-radio-group v-model="form.theme">
+                        <el-radio v-for="item in base_list.theme_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
                     </el-radio-group>
                 </el-form-item>
             </card-container>
@@ -13,19 +13,19 @@
                 <card-container class="card-container-br">
                     <div class="mb-12">文章设置</div>
                     <el-form-item label="读取方式">
-                        <el-radio-group v-model="form.article_check">
-                            <el-radio v-for="item in base_list.get_data_method_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
+                        <el-radio-group v-model="form.data_type">
+                            <el-radio v-for="item in base_list.data_type_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
                         </el-radio-group>
                     </el-form-item>
-                    <template v-if="form.article_check === '0'">
+                    <template v-if="form.data_type === '0'">
                         <div class="nav-list">
-                            <drag-group :list="form.article_list" img-params="cover" @onsort="article_list_sort" @remove="article_list_remove"></drag-group>
+                            <drag-group :list="form.data_list" img-params="cover" @onsort="data_list_sort" @remove="data_list_remove"></drag-group>
                             <el-button class="mtb-20 w" @click="add">+添加</el-button>
                         </div>
                     </template>
                     <template v-else>
                         <el-form-item label="文章分类">
-                            <el-select v-model="form.article_category" multiple collapse-tags placeholder="请选择文章分类">
+                            <el-select v-model="form.category" multiple collapse-tags placeholder="请选择文章分类">
                                 <el-option v-for="item in base_list.article_category_list" :key="item.id" :label="item.name" :value="item.id" />
                             </el-select>
                         </el-form-item>
@@ -43,15 +43,15 @@
                             </el-radio-group>
                         </el-form-item>
                         <el-form-item label="封面图片">
-                            <el-switch v-model="form.is_img_show" />
+                            <el-switch v-model="form.is_cover" />
                         </el-form-item>
                     </template>
                 </card-container>
                 <card-container>
                     <div class="mb-12">列表设置</div>
                     <el-form-item label="是否显示">
-                        <el-checkbox-group v-model="form.is_show">
-                            <el-checkbox v-for="item in base_list.list_show_list" :key="item.value" :value="item.value">{{ item.name }}</el-checkbox>
+                        <el-checkbox-group v-model="form.field_show">
+                            <el-checkbox v-for="item in base_list.field_show_list" :key="item.value" :value="item.value">{{ item.name }}</el-checkbox>
                         </el-checkbox-group>
                     </el-form-item>
                 </card-container>
@@ -73,13 +73,13 @@ const props = defineProps({
 });
 const form = reactive(props.value);
 const base_list = reactive({
-    article_style_list: [
+    theme_list: [
         { name: '单列展示', value: '0' },
         { name: '两列展示（纵向）', value: '1' },
         { name: '大图展示', value: '2' },
         { name: '左右滑动展示', value: '3' },
     ],
-    get_data_method_list: [
+    data_type_list: [
         { name: '选择文章', value: '0' },
         { name: '筛选文章', value: '1' },
     ],
@@ -93,7 +93,7 @@ const base_list = reactive({
         { name: '降序（desc）', value: '0' },
         { name: '升序（asc）', value: '1' },
     ],
-    list_show_list: [
+    field_show_list: [
         { name: '日期时间', value: '0' },
         { name: '浏览量', value: '1' },
     ],
@@ -119,11 +119,11 @@ const init = () => {
     }
 };
 
-const article_list_remove = (index: number) => {
-    form.article_list.splice(index, 1);
+const data_list_remove = (index: number) => {
+    form.data_list.splice(index, 1);
 };
-const article_list_sort = (item: any) => {
-    form.article_list = item;
+const data_list_sort = (item: any) => {
+    form.data_list = item;
 };
 const add = () => {
     url_value_dialog_visible.value = true;
@@ -132,11 +132,11 @@ const add = () => {
 const url_value_dialog_visible = ref(false);
 const url_value_dialog_call_back = (item: any[]) => {
     item.forEach((child: any) => {
-        form.article_list.push({
+        form.data_list.push({
             id: get_math(),
-            new_title: child.title,
-            new_url: [],
-            link: child,
+            new_title: '',
+            new_cover: [],
+            data: child,
         });
     });
 };
diff --git a/src/components/model-article-tabs/index.vue b/src/components/model-article-tabs/index.vue
index daad17cd..25e30508 100644
--- a/src/components/model-article-tabs/index.vue
+++ b/src/components/model-article-tabs/index.vue
@@ -21,13 +21,16 @@ watch(
     (newVal, oldValue) => {
         const new_style = newVal?.style;
         let new_data = newVal;
-        new_data.content.article_check = new_data.content.tabs_list[0].article_check;
-        new_data.content.article_category = new_data.content.tabs_list[0].article_category;
+        new_data.content.theme = new_data.content.article_theme;
+        new_data.content.data_type = new_data.content.tabs_list[0].data_type;
+        new_data.content.category = new_data.content.tabs_list[0].category;
+        new_data.content.data_list = new_data.content.tabs_list[0].data_list;
+        new_data.content.data_ids = new_data.content.tabs_list[0].data_ids;
         new_data.content.number = new_data.content.tabs_list[0].number;
         new_data.content.sort = new_data.content.tabs_list[0].sort;
         new_data.content.sort_rules = new_data.content.tabs_list[0].sort_rules;
-        new_data.content.is_img_show = new_data.content.tabs_list[0].is_img_show;
-        new_data.content.article_list = new_data.content.tabs_list[0].article_list;
+        new_data.content.field_show = new_data.content.field_show;
+        new_data.content.is_cover = new_data.content.tabs_list[0].is_cover;
         article_tabs.value = new_data;
         style_container.value += common_styles_computer(new_style.common_style);
     },
diff --git a/src/components/model-article-tabs/model-article-tabs-content.vue b/src/components/model-article-tabs/model-article-tabs-content.vue
index 8f3d5ae0..b561fa93 100644
--- a/src/components/model-article-tabs/model-article-tabs-content.vue
+++ b/src/components/model-article-tabs/model-article-tabs-content.vue
@@ -4,16 +4,16 @@
             <card-container class="mb-8">
                 <div class="mb-12">展示设置</div>
                 <el-form-item label="选项卡风格">
-                    <el-radio-group v-model="form.tabs_style">
-                        <el-radio v-for="item in base_list.tabs_style_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
+                    <el-radio-group v-model="form.tabs_theme">
+                        <el-radio v-for="item in base_list.tabs_theme_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
                     </el-radio-group>
                 </el-form-item>
                 <el-form-item label="选项卡置顶">
                     <el-switch v-model="form.tabs_top_up" />
                 </el-form-item>
                 <el-form-item label="文章风格">
-                    <el-radio-group v-model="form.article_style">
-                        <el-radio v-for="item in base_list.article_style_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
+                    <el-radio-group v-model="form.article_theme">
+                        <el-radio v-for="item in base_list.article_theme_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
                     </el-radio-group>
                 </el-form-item>
             </card-container>
@@ -31,19 +31,19 @@
                                         <el-input v-model="row.desc" placeholder="请输入简介" clearable />
                                     </el-form-item>
                                     <el-form-item label="读取方式">
-                                        <el-radio-group v-model="row.article_check">
-                                            <el-radio v-for="item in base_list.get_data_method_list" :key="item.value + get_math()" :value="item.value">{{ item.name }}</el-radio>
+                                        <el-radio-group v-model="row.data_type">
+                                            <el-radio v-for="item in base_list.data_type_list" :key="item.value + get_math()" :value="item.value">{{ item.name }}</el-radio>
                                         </el-radio-group>
                                     </el-form-item>
-                                    <template v-if="row.article_check === '0'">
+                                    <template v-if="row.data_type === '0'">
                                         <div class="nav-list">
-                                            <drag-group :list="row.article_list" img-params="cover" @onsort="article_list_sort($event, index)" @remove="article_list_remove($event, index)"></drag-group>
+                                            <drag-group :list="row.data_list" img-params="cover" @onsort="data_list_sort($event, index)" @remove="data_list_remove($event, index)"></drag-group>
                                             <el-button class="mtb-20 w" @click="article_add(index)">+添加</el-button>
                                         </div>
                                     </template>
                                     <template v-else>
                                         <el-form-item label="文章分类">
-                                            <el-select v-model="row.article_category" multiple collapse-tags placeholder="请选择文章分类">
+                                            <el-select v-model="row.category" multiple collapse-tags placeholder="请选择文章分类">
                                                 <el-option v-for="item in base_list.article_category_list" :key="item.id" :label="item.name" :value="item.id" />
                                             </el-select>
                                         </el-form-item>
@@ -61,7 +61,7 @@
                                             </el-radio-group>
                                         </el-form-item>
                                         <el-form-item label="封面图片">
-                                            <el-switch v-model="row.is_img_show" />
+                                            <el-switch v-model="row.is_cover" />
                                         </el-form-item>
                                     </template>
                                 </template>
@@ -96,19 +96,19 @@ const props = defineProps({
 });
 const form = reactive(props.value);
 const base_list = reactive({
-    tabs_style_list: [
+    tabs_theme_list: [
         { name: '样式一', value: '0' },
         { name: '样式二', value: '1' },
         { name: '样式三', value: '2' },
         { name: '样式四', value: '3' },
     ],
-    article_style_list: [
+    article_theme_list: [
         { name: '单列展示', value: '0' },
         { name: '两列展示（纵向）', value: '1' },
         { name: '大图展示', value: '2' },
         { name: '左右滑动展示', value: '3' },
     ],
-    get_data_method_list: [
+    data_type_list: [
         { name: '选择文章', value: '0' },
         { name: '筛选文章', value: '1' },
     ],
@@ -167,23 +167,23 @@ const tabs_add = () => {
         id: get_math(),
         title: '',
         desc: '',
-        article_check: '0',
-        article_type: [],
+        data_type: '0',
+        category: [],
         number: 4,
         sort: '0',
         sort_rules: '0',
-        is_img_show: true,
-        article_list: [],
+        is_cover: true,
+        data_list: [],
     });
     // emit('update:value', form);
 };
 
 // 指定文章
-const article_list_remove = (index: number, article_index: number) => {
-    form.tabs_list[article_index].article_list.splice(index, 1);
+const data_list_remove = (index: number, article_index: number) => {
+    form.tabs_list[article_index].data_list.splice(index, 1);
 };
-const article_list_sort = (item: any, index: number) => {
-    form.tabs_list[index].article_list = item;
+const data_list_sort = (item: any, index: number) => {
+    form.tabs_list[index].data_list = item;
 };
 
 const article_index = ref(0);
@@ -194,12 +194,11 @@ const article_add = (index: number) => {
 const url_value_dialog_call_back = (item: any[]) => {
     // console.log(item);
     item.forEach((child: any) => {
-        form.tabs_list[article_index.value].article_list.push({
+        form.tabs_list[article_index.value].data_list.push({
             id: get_math(),
-            src: 'carousel',
-            new_url: [],
-            new_title: child.title,
-            link: child,
+            new_title: '',
+            new_cover: [],
+            data: child,
         });
     });
 };
diff --git a/src/layout/components/main/default/article-list.ts b/src/layout/components/main/default/article-list.ts
index 72318fb8..1214f3dd 100644
--- a/src/layout/components/main/default/article-list.ts
+++ b/src/layout/components/main/default/article-list.ts
@@ -2,21 +2,23 @@ import defaultCommon from './index';
 
 interface ArticleList {
     id: number | string;
-    link: object;
+    data: object;
     new_title: string;
-    new_url: uploadList[];
+    new_cover: uploadList[];
 }
 interface DefaultArticleList {
     content: {
-        article_style: string;
-        article_check: string;
-        article_category: string[];
-        article_list: ArticleList[];
+        // 风格
+        theme: string;
+        data_type: string;
+        category: string[];
+        data_list: ArticleList[];
+        data_ids: string;
         number: number;
         sort: string;
         sort_rules: string;
-        is_show: string[];
-        is_img_show: boolean;
+        field_show: string[];
+        is_cover: boolean;
     };
     style: {
         name_weight: string;
@@ -40,15 +42,16 @@ interface DefaultArticleList {
 }
 const defaultArticleList: DefaultArticleList = {
     content: {
-        article_style: '1',
-        article_check: '0',
-        article_list: [],
-        article_category: [],
+        theme: '1',
+        data_type: '0',
+        category: [],
+        data_list: [],
+        data_ids: '',
         number: 4,
         sort: '0',
         sort_rules: '0',
-        is_show: ['0', '1'],
-        is_img_show: true,
+        field_show: ['0', '1'],
+        is_cover: true,
     },
     style: {
         name_weight: '500',
diff --git a/src/layout/components/main/default/article-tabs.ts b/src/layout/components/main/default/article-tabs.ts
index 1dde4aa3..762ded78 100644
--- a/src/layout/components/main/default/article-tabs.ts
+++ b/src/layout/components/main/default/article-tabs.ts
@@ -1,29 +1,29 @@
 import defaultCommon from './index';
 interface ArticleList {
-    id: number;
-    link: object;
-    url: string;
-    new_url: uploadList[];
+    id: number | string;
+    data: object;
+    new_title: string;
+    new_cover: uploadList[];
 }
 interface articleTabsList {
     id: string;
     title: string;
     desc: string;
-    article_check: string;
-    article_category: string[];
+    data_type: string;
+    category: string[];
     number: number;
     sort: string;
     sort_rules: string;
-    is_img_show: boolean;
-    article_list: ArticleList[];
+    is_cover: boolean;
+    data_list: ArticleList[];
 }
 interface DefaultArticleTabs {
     content: {
-        tabs_style: string;
+        tabs_theme: string;
         tabs_top_up: boolean;
-        article_style: string;
+        article_theme: string;
         tabs_list: articleTabsList[];
-        is_show: string[];
+        field_show: string[];
     };
     style: {
         tabs_checked: color_list[];
@@ -55,18 +55,18 @@ interface DefaultArticleTabs {
 }
 const defaultArticleTabs: DefaultArticleTabs = {
     content: {
-        tabs_style: '0',
+        tabs_theme: '0',
         tabs_top_up: true,
-        article_style: '0',
+        article_theme: '0',
         tabs_list: [
-            { id: '1', title: '热门推荐', desc: '简介', article_check: '0', article_category: [], number: 4, sort: '0', sort_rules: '0', is_img_show: true, article_list: [] },
-            { id: '2', title: '测试一', desc: '简介', article_check: '0', article_category: [], number: 4, sort: '0', sort_rules: '0', is_img_show: true, article_list: [] },
-            { id: '3', title: '测试二', desc: '简介', article_check: '0', article_category: [], number: 4, sort: '0', sort_rules: '0', is_img_show: true, article_list: [] },
-            { id: '4', title: '测试三', desc: '简介', article_check: '0', article_category: [], number: 4, sort: '0', sort_rules: '0', is_img_show: true, article_list: [] },
-            { id: '5', title: '测试四', desc: '简介', article_check: '0', article_category: [], number: 4, sort: '0', sort_rules: '0', is_img_show: true, article_list: [] },
-            { id: '6', title: '测试五', desc: '简介', article_check: '0', article_category: [], number: 4, sort: '0', sort_rules: '0', is_img_show: true, article_list: [] },
+            { id: '1', title: '热门推荐', desc: '简介', data_type: '0', category: [], number: 4, sort: '0', sort_rules: '0', is_cover: true, data_list: [] },
+            { id: '2', title: '测试一', desc: '简介', data_type: '0', category: [], number: 4, sort: '0', sort_rules: '0', is_cover: true, data_list: [] },
+            { id: '3', title: '测试二', desc: '简介', data_type: '0', category: [], number: 4, sort: '0', sort_rules: '0', is_cover: true, data_list: [] },
+            { id: '4', title: '测试三', desc: '简介', data_type: '0', category: [], number: 4, sort: '0', sort_rules: '0', is_cover: true, data_list: [] },
+            { id: '5', title: '测试四', desc: '简介', data_type: '0', category: [], number: 4, sort: '0', sort_rules: '0', is_cover: true, data_list: [] },
+            { id: '6', title: '测试五', desc: '简介', data_type: '0', category: [], number: 4, sort: '0', sort_rules: '0', is_cover: true, data_list: [] },
         ],
-        is_show: ['0', '1'],
+        field_show: ['0', '1'],
     },
     style: {
         tabs_checked: [