1.文章选项卡接口联调

sws 2024-08-22

src/components/model-article-list/model-article-list-styles.vue

@@ -51,9 +51,6 @@
                 <el-form-item label="文章间距">
                     <slider v-model="form.article_spacing"></slider>
                 </el-form-item>
-                <el-form-item label="文章间距">
-                    <slider v-model="form.article_spacing"></slider>
-                </el-form-item>
                 <el-form-item v-if="article_style == '3'" label="内容宽度">
                     <slider v-model="form.article_width" :max="1000"></slider>
                 </el-form-item>

src/components/model-article-tabs/index.vue

@@ -22,7 +22,7 @@ watch(
         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_type = new_data.content.tabs_list[0].article_type;
+        new_data.content.article_category = new_data.content.tabs_list[0].article_category;
         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;

src/components/model-article-tabs/model-article-tabs-setting.vue

@@ -4,7 +4,7 @@
             <model-article-tabs-content :value="value.content"></model-article-tabs-content>
         </template>
         <template v-else-if="type == '2'">
-            <model-article-tabs-styles :value="value.style"></model-article-tabs-styles>
+            <model-article-tabs-styles :value="value.style" :content="value.content"></model-article-tabs-styles>
         </template>
     </div>
 </template>

src/components/model-article-tabs/model-article-tabs-styles.vue

@@ -65,11 +65,26 @@
                     <color-picker v-model="form.page_view_color"></color-picker>
                 </el-form-item>
                 <el-form-item label="内容圆角">
-                    <radius :value="form"></radius>
+                    <radius :value="form.content_radius"></radius>
+                </el-form-item>
+                <el-form-item label="图片圆角">
+                    <radius :value="form.img_radius"></radius>
+                </el-form-item>
+                <el-form-item label="内间距">
+                    <padding :value="form.padding"></padding>
+                </el-form-item>
+                <el-form-item label="内容间距">
+                    <slider v-model="form.content_spacing"></slider>
+                </el-form-item>
+                <el-form-item label="文章间距">
+                    <slider v-model="form.article_spacing"></slider>
+                </el-form-item>
+                <el-form-item v-if="article_style == '3'" label="内容宽度">
+                    <slider v-model="form.article_width" :max="1000"></slider>
                 </el-form-item>
             </card-container>
         </el-form>
-        <common-styles :value="form" @update:value="common_styles_update" />
+        <common-styles :value="form.common_style" @update:value="common_styles_update" />
     </div>
 </template>
 <script setup lang="ts">
@@ -79,9 +94,19 @@ const props = defineProps({
         type: Object,
         default: () => ({}),
     },
+    content: {
+        type: Object,
+        default: () => ({}),
+    },
 });
 // 默认值
-let form = ref(props.value);
+const state = reactive({
+    form: props.value,
+    data: props.content,
+});
+// 如果需要解构，确保使用toRefs
+const { form, data } = toRefs(state);
+const article_style = computed(() => data.value.article_style);
 const font_weight = reactive([
     { name: '加粗', value: '500' },
     { name: '正常', value: '400' },

src/layout/components/main/default/article-tabs.ts

@@ -23,11 +23,10 @@ interface DefaultArticleTabs {
         tabs_top_up: boolean;
         article_style: string;
         tabs_list: articleTabsList[];
-
         is_show: string[];
     };
     style: {
-        tabs_checked: string[];
+        tabs_checked: color_list[];
         tabs_direction: string;
         tabs_weight_checked: string;
         tabs_size_checked: number;
@@ -44,11 +43,12 @@ interface DefaultArticleTabs {
         page_view_weight: string;
         page_view_size: number;
         page_view_color: string;
-        radius: number;
+        content_radius: radiusStyle;
-        radius_top_left: number;
+        img_radius: radiusStyle;
-        radius_top_right: number;
+        padding: paddingStyle;
-        radius_bottom_left: number;
+        article_spacing: number;
-        radius_bottom_right: number;
+        content_spacing: number;
+        article_width: number;
         common_style: object;
     };
 }
@@ -68,7 +68,10 @@ const defaultArticleTabs: DefaultArticleTabs = {
         is_show: ['0', '1'],
     },
     style: {
-        tabs_checked: ['rgba(212,212,212,1)', 'rgba(255,210,210,1)'],
+        tabs_checked: [
+            { color: 'rgba(212,212,212,2)', color_percentage: '' },
+            { color: 'rgba(255,210,210,1)', color_percentage: '' },
+        ],
         tabs_direction: '90deg',
         tabs_weight_checked: '500',
         tabs_size_checked: 14,
@@ -85,11 +88,33 @@ const defaultArticleTabs: DefaultArticleTabs = {
         page_view_weight: '400',
         page_view_size: 12,
         page_view_color: 'rgba(153, 153, 153, 1)',
+        // 内容圆角
+        content_radius: {
             radius: 8,
             radius_top_left: 8,
             radius_top_right: 8,
             radius_bottom_left: 8,
             radius_bottom_right: 8,
+        },
+        // 图片圆角
+        img_radius: {
+            radius: 0,
+            radius_top_left: 0,
+            radius_top_right: 0,
+            radius_bottom_left: 0,
+            radius_bottom_right: 0,
+        },
+        // 内间距
+        padding: {
+            padding: 10,
+            padding_top: 10,
+            padding_bottom: 10,
+            padding_left: 10,
+            padding_right: 10,
+        },
+        content_spacing: 10, // 内容间距
+        article_spacing: 10, // 文章间距
+        article_width: 160, // 文章宽度
         common_style: { ...defaultCommon, padding_left: 10, padding_right: 10, padding_bottom: 10 },
     },
 };