From a250a4496184cff56b5c4eb235e7525028b33a30 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Wed, 12 Mar 2025 18:22:17 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E9=94=80=E5=94=AE=E8=AE=B0?=
 =?UTF-8?q?=E5=BD=95=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/model-salerecords/index.vue    | 285 ++++++++++++++++++
 .../model-salerecords-content.vue             |  74 +++++
 .../model-salerecords-setting.vue             |  27 ++
 .../model-salerecords-styles.vue              | 111 +++++++
 src/config/const/salerecords.ts               | 142 +++++++++
 5 files changed, 639 insertions(+)
 create mode 100644 src/components/model-salerecords/index.vue
 create mode 100644 src/components/model-salerecords/model-salerecords-content.vue
 create mode 100644 src/components/model-salerecords/model-salerecords-setting.vue
 create mode 100644 src/components/model-salerecords/model-salerecords-styles.vue
 create mode 100644 src/config/const/salerecords.ts

diff --git a/src/components/model-salerecords/index.vue b/src/components/model-salerecords/index.vue
new file mode 100644
index 00000000..53fc0263
--- /dev/null
+++ b/src/components/model-salerecords/index.vue
@@ -0,0 +1,285 @@
+<template>
+    <div class="oh" :style="style_container">
+        <div class="swiper-free-mode" :style="style_img_container + `height: ${ swiper_outer_height }px;`">
+            <template v-if="form.rotation_direction == 'vertical'">
+                <swiper :key="carouselKey" class="w flex" :style="`height: ${ swiper_height }px;`" direction="vertical" :loop="true" :speed="swiper_speed" :autoplay="autoplay" :slides-per-view="slides_per_view" :space-between="space_between" :modules="modules">
+                    <swiper-slide v-for="(item, index) in list" :key="index">
+                        <div class="flex-row align-c gap-5">
+                            <template v-if="!isEmpty(item) && is_show('head')">
+                                <div class="oh re">
+                                    <template v-if="!isEmpty(item.new_cover)">
+                                        <image-empty v-model="item.new_cover[0]" :style="heading_img_radius"></image-empty>
+                                    </template>
+                                    <template v-else>
+                                        <image-empty v-model="item.head_img" :style="heading_img_radius"></image-empty>
+                                    </template>
+                                </div>
+                            </template>
+                            <span v-if="is_show('nick_name')" class="flex-1 text-line-1" :style="trends_config('nick_name')">{{ item.nick_name }}</span>
+                            <template v-if="is_show('goods_image')">
+                                <image-empty v-model="item.goods_images" :style="goods_image_radius"></image-empty>
+                            </template>
+                            <span v-if="is_show('goods_title')" class="flex-1 text-line-1" :style="trends_config('goods_title')">{{ item.goods_title }}</span>
+                            <span v-if="is_show('time')" class="nowarp" :style="trends_config('time')">{{ item.time }}</span>
+                        </div>
+                    </swiper-slide>
+                </swiper>
+            </template>
+            <template v-else>
+                <div class="swiper-horizontal-free-mode" :style="`height: ${ swiper_height }px;`">
+                    <div v-for="(item, index) in new_list" :key="index" :style="`margin-bottom: ${ index < new_list.length - 1 ? space_between : 0 }px;`">
+                        <swiper :key="carouselKey + index" class="w flex" :style="`height: ${ new_swiper_height }px;`" direction="horizontal" :loop="true" :slides-offset-before="slides_offset_before" :speed="swiper_speed + (1000 * index)" :autoplay="autoplay" slides-per-view="auto" :space-between="space_between" :modules="modules">
+                            <swiper-slide v-for="(item1, index1) in item.split_list" :key="index1">
+                                <div :style="swiper_horizontal_container + 'width: auto;'">
+                                    <div class="flex-row align-c gap-5" :style="swiper_horizontal_img_container">
+                                        <template v-if="is_show('goods_image')">
+                                            <image-empty v-model="item1.goods_images" :style="goods_image_radius"></image-empty>
+                                        </template>
+                                        <span v-if="is_show('goods_title')" class="flex-1 text-line-1" :style="trends_config('goods_title') + `max-width: ${ max_title_width }px;`">{{ item1.goods_title }}</span>
+                                        <span v-if="is_show('time')" class="nowarp" :style="trends_config('time')">{{ item1.time }}</span>
+                                    </div>
+                                </div>
+                            </swiper-slide>
+                        </swiper>
+                    </div>
+                </div>
+            </template>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import { common_styles_computer, common_img_computer, get_math, gradient_handle, radius_computer, background_computer, padding_computer } from '@/utils';
+import { isEmpty, cloneDeep } from 'lodash';
+import { Swiper, SwiperSlide } from 'swiper/vue';
+import { Autoplay } from 'swiper/modules';
+const modules = [Autoplay];
+/**
+ * @description: 文章列表（渲染）
+ * @param value{Object} 样式数据
+ * @param isCommonStyle{Object} 是否为通用样式
+ */
+const props = defineProps({
+    value: {
+        type: Object,
+        default: () => ({}),
+    },
+    isCommonStyle: {
+        type: Boolean,
+        default: true,
+    },
+});
+const form = computed(() => props.value?.content || {});
+const new_style = computed(() => props.value?.style || {});
+// 头像样式
+const heading_img_radius = computed(() => {
+    const { heading_img_radius, heading_img_width, heading_img_height, heading_img_border_color, heading_img_border_size } = new_style.value
+    return `width: ${ heading_img_width }px;height: ${ heading_img_height }px;border: ${ heading_img_border_size }px solid ${ heading_img_border_color };` + radius_computer(heading_img_radius);
+});
+
+const goods_image_radius =  computed(() => {
+    const { goods_img_radius, goods_img_width, goods_img_height, goods_img_border_color, goods_img_border_size } = new_style.value
+    return `width: ${ goods_img_width }px;height: ${ goods_img_height }px;border: ${ goods_img_border_size }px solid ${ goods_img_border_color };` + radius_computer(goods_img_radius);
+});
+// 根据传递的参数，从对象中取值
+const trends_config = (key: string) => {
+    return style_config(new_style.value[`${key}_typeface`], new_style.value[`${key}_size`], new_style.value[`${key}_color`]);
+};
+// 根据传递的值，显示不同的内容
+const style_config = (typeface: string, size: number, color: string | object) => {
+    return `font-weight:${typeface}; font-size: ${size}px;line-height: ${ size }px;color: ${color};`;
+};
+// 判断是否显示对应的内容
+const is_show = (index: string) => {
+    return form.value.is_show.includes(index);
+};
+// 横向时的显示内容
+const swiper_horizontal_container = computed(() => {
+    const { content_color_list, content_direction, content_radius } = new_style.value
+    return gradient_handle(content_color_list, content_direction) + radius_computer(content_radius);
+});
+// 横向时的图片显示内容
+const swiper_horizontal_img_container = computed(() => {
+    const { content_background_img_style, content_background_img, content_padding } = new_style.value;
+    const data = {
+        background_img_style: content_background_img_style,
+        background_img: content_background_img,
+    }
+    return background_computer(data) + padding_computer(content_padding);
+})
+// 公共样式
+const style_container = computed(() => common_styles_computer(new_style.value.common_style));
+const style_img_container = computed(() => common_img_computer(new_style.value.common_style));
+//#region 列表数据
+type data_list = {
+    head_img: string,
+    new_cover: string[],
+    nick_name: string,
+    goods_title: string,
+    goods_images: string,
+    time: string
+}
+const default_list = {
+    head_img: '',
+    new_cover: [],
+    nick_name: '测试昵称测试昵称测试昵称测试昵称',
+    goods_title: '测试商品标题测试',
+    goods_images: '',
+    time: '02-04 23:01:01'
+};
+type split_list = {
+    split_list: data_list[]
+}
+const new_list = ref<split_list[]>([]);
+const list = ref<data_list[]>([]);
+// 初始化的时候执行
+onMounted(() => {
+    // 指定商品并且指定商品数组不为空
+    if (!isEmpty(form.value.data_list) && form.value.data_type == '0') {
+        list.value = form.value.data_list.map((item: any) => ({
+            ...item.data,
+            title: !isEmpty(item.new_title) ? item.new_title : item.data.title,
+            new_cover: item.new_cover,
+        }));
+    } else if (!isEmpty(form.value.data_auto_list) && form.value.data_type == '1') {
+        // 筛选商品并且筛选商品数组不为空
+        list.value = form.value.data_auto_list;
+    } else {
+        list.value = Array(50).fill(default_list);
+    }
+});
+
+const get_products = () => {
+    const { category_ids, brand_ids, number, order_by_type, order_by_rule, keywords } = form.value;
+    const params = {
+        goods_keywords: keywords,
+        goods_category_ids: category_ids,
+        goods_brand_ids: brand_ids,
+        goods_order_by_type: order_by_type,
+        goods_order_by_rule: order_by_rule,
+        goods_number: number,
+    };
+    list.value = Array(50).fill(default_list);
+    // 获取商品列表
+    // ShopAPI.getShopLists(params).then((res: any) => {
+    //     if (!isEmpty(res.data)) {
+    //         list.value = res.data;
+    //     } else {
+    //         list.value = Array(4).fill(default_list);
+    //     }
+    // });
+};
+// 取出监听的数据
+const watch_data = computed(() => {
+    const { category_ids, brand_ids, number, order_by_type, order_by_rule, data_type, data_list, keywords } = form.value;
+    return { category_ids: category_ids, brand_ids: brand_ids, number: number, order_by_type: order_by_type, order_by_rule: order_by_rule, data_type: data_type, data_list: data_list, keyword: keywords };
+})
+// 初始化的时候不执行, 监听数据变化
+watch(() => watch_data.value, (val, oldVal) => {
+    // 使用JSON.stringify()进行判断 新值和旧值是否一样 不一样就重新获取数据
+    if ((JSON.stringify(val) !== JSON.stringify(oldVal)) || props.isCommonStyle) {
+        if (val.data_type == '0') {
+            if (!isEmpty(val.data_list)) {
+                list.value = cloneDeep(val.data_list).map((item: any) => ({
+                    ...item.data,
+                    title: !isEmpty(item.new_title) ? item.new_title : item.data.title,
+                    new_cover: item.new_cover,
+                }));
+            } else {
+                list.value = Array(4).fill(default_list);
+            }
+        } else {
+            get_products();
+        }
+    }
+}, { deep: true });
+//#endregion
+//#region 轮播设置
+// 轮播图key值
+const carouselKey = ref('0');
+// 是否开启轮播
+const autoplay = ref<boolean | object>(false);
+// 轮播内容显示数量
+const slides_per_view = ref(1);
+// 轮播内容间隔
+const space_between = ref(0);
+// 纵向轮播时的轮播图高度
+const swiper_height = ref(0);
+// 整个容器的高度
+const swiper_outer_height = ref(0);
+// 移动时间
+const swiper_speed = ref(0);
+// 商品标题最大可见数量
+const max_title_width = ref(0);
+// 横向滑动时轮播图高度
+const new_swiper_height = ref(0);
+// 设置初始偏移量
+const slides_offset_before = ref(0);
+const size_handle = (val: number, type: string) => {
+    return form.value.is_show.includes(type) ? val : 0;
+};
+// 内容参数的集合
+watchEffect(() => {
+    const { rotation_direction, interval_time, show_number = 1, is_roll, is_show } = form.value;
+    // 是否滚动
+    if (is_roll == '1' && list.value.length > 0) {
+        autoplay.value = {
+            delay: 0,
+            waitForTransition: true,
+            pauseOnMouseEnter: true,
+        };
+    } else {
+        autoplay.value = false;
+    }
+    // 数据间距
+    space_between.value = new_style.value.data_spacing;
+    // 显示数量
+    const show_num = show_number || 1;
+    slides_per_view.value = show_num;
+    // 轮播图速度
+    swiper_speed.value = interval_time * 1000;
+    // 轮播图高度
+    const { heading_img_height, nick_name_size, goods_img_height, goods_title_size, time_size, data_spacing, common_style, content_padding } = new_style.value;
+    if (rotation_direction == 'vertical') {
+        swiper_height.value = Math.max(size_handle(heading_img_height, 'head'), size_handle(nick_name_size, 'nick_name'), size_handle(goods_img_height, 'goods_image'), size_handle(goods_title_size, 'goods_title'), size_handle(time_size, 'time')) * show_num + (data_spacing * (show_num - 1));
+    } else {
+        // 设置初始偏移量
+        slides_offset_before.value = 390 - common_style.margin_left + common_style.margin_right - common_style.padding_left - common_style.padding_right;
+        max_title_width.value = goods_title_size * 9;
+        new_list.value = [];
+        // 拆分的数量
+        const split_num = Math.ceil(list.value.length / show_num);
+        let new_num = show_num;
+        for (let i = 0; i < show_num; i++) {
+            if (!isEmpty(list.value[i * split_num])) {
+                new_list.value.push({ split_list: list.value.slice(i * split_num, (i + 1) * split_num) });
+            } else {
+                new_num = i - 1;
+                break;
+            }
+        }
+        // 每个swiper的高度
+        new_swiper_height.value = Math.max(size_handle(goods_img_height, 'goods_image'), size_handle(goods_title_size, 'goods_title'), size_handle(time_size, 'time')) + content_padding.padding_top + content_padding.padding_bottom;
+        // 总的高度
+        swiper_height.value = new_swiper_height.value * new_num + (data_spacing * (new_num - 1));
+    }
+    swiper_outer_height.value = swiper_height.value + common_style.padding_top + common_style.padding_bottom;
+    // 更新轮播图的key，确保更换时能重新更新轮播图
+    carouselKey.value = get_math();
+});
+//#endregion
+</script>
+<style lang="scss" scoped>
+:deep(.el-image) {
+    background-color: #fff;
+    .image-slot img {
+        width: 2rem;
+        height: 2rem;
+    }
+}
+.swiper-free-mode :deep(.swiper-wrapper) {
+  transition-timing-function: linear !important;
+}
+.swiper-horizontal-free-mode :deep(.swiper-slide) {
+    width: auto !important;
+}
+</style>
diff --git a/src/components/model-salerecords/model-salerecords-content.vue b/src/components/model-salerecords/model-salerecords-content.vue
new file mode 100644
index 00000000..64ec406a
--- /dev/null
+++ b/src/components/model-salerecords/model-salerecords-content.vue
@@ -0,0 +1,74 @@
+<template>
+    <div class="content">
+        <el-form :model="form" label-width="75" class="m-h">
+            <common-content-top :value="form.content_top"></common-content-top>
+            <div class="divider-line"></div>
+            <card-container>
+                <div class="mb-12">展示设置</div>
+                <el-form-item label="自动轮播">
+                    <el-switch v-model="form.is_roll" active-value="1" inactive-value="0" />
+                </el-form-item>
+                <el-form-item label="轮播方向">
+                    <el-radio-group v-model="form.rotation_direction">
+                        <el-radio value="vertical">纵向</el-radio>
+                        <el-radio value="horizontal">横向</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+                <el-form-item label="间隔时间">
+                    <slider v-model="form.interval_time" :min="1" :max="50"></slider>
+                </el-form-item>
+            </card-container>
+            <div class="divider-line"></div>
+            <card-container class="card-container-br">
+                <div class="mb-12">自动读取</div>
+                <el-form-item label="读取数量">
+                    <el-input-number v-model="form.show_number" :min="1" :max="50" type="number" placeholder="请输入读取数量" value-on-clear="min" class="w number-show" controls-position="right"></el-input-number>
+                </el-form-item>
+            </card-container>
+            <div class="divider-line"></div>
+            <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.filter(item => item.type.includes(form.rotation_direction))" :key="item.value" :value="item.value">{{ item.name }}</el-checkbox>
+                    </el-checkbox-group>
+                </el-form-item>
+            </card-container>
+        </el-form>
+    </div>
+</template>
+<script setup lang="ts">
+import { commonStore } from '@/store';
+/**
+ * @description 博客列表（内容）
+ * @param value{Object} 传过来的数据，用于数据渲染
+ * @param styles{Object} 样式
+ */
+const props = defineProps({
+    value: {
+        type: Object,
+        default: () => ({}),
+    },
+    styles: {
+        type: Object,
+        default: () => ({}),
+    }
+});
+// 默认值
+const state = reactive({
+    form: props.value,
+    data: props.styles,
+});
+// 如果需要解构，确保使用toRefs
+const { form, data } = toRefs(state);
+
+const base_list = reactive([
+    { name: '头像', value: 'head', type: ['vertical'] },
+    { name: '昵称', value: 'nick_name', type: ['vertical'] },
+    { name: '商品图', value: 'goods_image', type: ['vertical', 'horizontal'] },
+    { name: '商品标题', value: 'goods_title', type: ['vertical', 'horizontal'] },
+    { name: '日期时间', value: 'time', type: ['vertical', 'horizontal']},
+]);
+</script>
+<style lang="scss" scoped>
+</style>
diff --git a/src/components/model-salerecords/model-salerecords-setting.vue b/src/components/model-salerecords/model-salerecords-setting.vue
new file mode 100644
index 00000000..b2f19dec
--- /dev/null
+++ b/src/components/model-salerecords/model-salerecords-setting.vue
@@ -0,0 +1,27 @@
+<template>
+    <div class="setting-content">
+        <template v-if="type == '1'">
+            <model-salerecords-content :value="props.value.content" :styles="props.value.style"></model-salerecords-content>
+        </template>
+        <template v-else-if="type == '2'">
+            <model-salerecords-styles :value="props.value.style" :content="props.value.content"></model-salerecords-styles>
+        </template>
+    </div>
+</template>
+<script setup lang="ts">
+/**
+ * @description: 文章选项卡列表（设置）
+ * @param type{String} 类型是进入内容组件还是样式组件
+ * @param value{Object} 样式数据
+ */
+const props = defineProps({
+    type: {
+        type: String,
+        default: '1',
+    },
+    value: {
+        type: Object,
+        default: () => ({}),
+    },
+});
+</script>
diff --git a/src/components/model-salerecords/model-salerecords-styles.vue b/src/components/model-salerecords/model-salerecords-styles.vue
new file mode 100644
index 00000000..8c954f75
--- /dev/null
+++ b/src/components/model-salerecords/model-salerecords-styles.vue
@@ -0,0 +1,111 @@
+<template>
+    <div class="h">
+        <el-form :model="form" label-width="75">
+            <card-container>
+                <div class="mb-12">内容样式</div>
+                <template v-if="data.rotation_direction == 'vertical'">
+                    <el-form-item v-if="data.is_show.includes('head')" label="头像">
+                        <div class="flex-col gap-10 w h">
+                            <el-form-item label="宽度" label-width="60" class="form-item-child-label">
+                                <slider v-model="form.heading_img_width" :max="500"></slider>
+                            </el-form-item>
+                            <el-form-item label="高度" label-width="60" class="form-item-child-label">
+                                <slider v-model="form.heading_img_height" :max="500"></slider>
+                            </el-form-item>
+                            <el-form-item label="边线颜色" label-width="60" class="form-item-child-label">
+                                <color-picker v-model="form.heading_img_border_color" :default-color="clone_form.end_text_color"></color-picker>
+                            </el-form-item>
+                            <el-form-item label="边线大小" label-width="60" class="form-item-child-label">
+                                <slider v-model="form.heading_img_border_size" :max="50"></slider>
+                            </el-form-item>
+                            <el-form-item label="圆角" label-width="60" class="form-item-child-label">
+                                <radius :value="form.heading_img_radius"></radius>
+                            </el-form-item>
+                        </div>
+                    </el-form-item>
+                    <el-form-item v-if="data.is_show.includes('nick_name')" label="昵称">
+                        <color-text-size-group v-model:color="form.nick_name_color" v-model:typeface="form.nick_name_typeface" v-model:size="form.nick_name_size" default-color="#000000"></color-text-size-group>
+                    </el-form-item>
+                </template>
+                <el-form-item v-if="data.is_show.includes('goods_image')" label="商品图片">
+                    <div class="flex-col gap-10 w h">
+                        <el-form-item label="宽度" label-width="60" class="form-item-child-label">
+                            <slider v-model="form.goods_img_width" :max="500"></slider>
+                        </el-form-item>
+                        <el-form-item label="高度" label-width="60" class="form-item-child-label">
+                            <slider v-model="form.goods_img_height" :max="500"></slider>
+                        </el-form-item>
+                        <el-form-item label="边线颜色" label-width="60" class="form-item-child-label">
+                            <color-picker v-model="form.goods_img_border_color" :default-color="clone_form.end_text_color"></color-picker>
+                        </el-form-item>
+                        <el-form-item label="边线大小" label-width="60" class="form-item-child-label">
+                            <slider v-model="form.goods_img_border_size" :max="50"></slider>
+                        </el-form-item>
+                        <el-form-item label="圆角" label-width="60" class="form-item-child-label">
+                            <radius :value="form.goods_img_radius"></radius>
+                        </el-form-item>
+                    </div>
+                </el-form-item>
+                <el-form-item v-if="data.is_show.includes('goods_title')" label="商品标题">
+                    <color-text-size-group v-model:color="form.goods_title_color" v-model:typeface="form.goods_title_typeface" v-model:size="form.goods_title_size" default-color="#000000"></color-text-size-group>
+                </el-form-item>
+                <el-form-item v-if="data.is_show.includes('time')" label="日期时间">
+                    <color-text-size-group v-model:color="form.time_color" v-model:typeface="form.time_typeface" v-model:size="form.time_size" default-color="#000000"></color-text-size-group>
+                </el-form-item>
+                <el-form-item label="数据间距">
+                    <slider v-model="form.data_spacing" :max="100"></slider>
+                </el-form-item>
+                <template v-if="data.rotation_direction !== 'vertical'">
+                    <el-form-item label="内容背景">
+                        <background-common v-model:color_list="form.content_color_list" v-model:direction="form.content_direction" v-model:img_style="form.content_background_img_style" v-model:img="form.content_background_img" @mult_color_picker_event="mult_color_picker_event" />
+                    </el-form-item>
+                    <el-form-item label="内间距">
+                        <padding :value="form.content_padding"></padding>
+                    </el-form-item>
+                    <el-form-item label="圆角">
+                        <radius :value="form.content_radius"></radius>
+                    </el-form-item>
+                </template>
+            </card-container>
+            <div class="divider-line"></div>
+            <common-styles :value="form.common_style" @update:value="common_style_update" />
+        </el-form>
+    </div>
+</template>
+<script setup lang="ts">
+import { isEmpty, cloneDeep } from "lodash";
+/**
+ * @description: 组合搭配列表（样式）
+ * @param value{Object} 样式数据
+ * @param content{Object} 内容数据
+ * @param defaultConfig{Object} 默认配置
+ */
+const props = defineProps({
+    value: {
+        type: Object,
+        default: () => ({}),
+    },
+    content: {
+        type: Object,
+        default: () => ({}),
+    },
+});
+// 默认值
+const state = reactive({
+    form: props.value,
+    data: props.content,
+});
+// 如果需要解构，确保使用toRefs
+const { form, data } = toRefs(state);
+let clone_form = cloneDeep(props.value);
+// 内容背景处理
+const mult_color_picker_event = (arry: color_list[], type: number) => {
+    form.value.content_color_list = arry;
+    form.value.content_direction = type;
+};
+const common_style_update = (value: any) => {
+    form.value.common_style = value;
+};
+</script>
+<style lang="scss" scoped>
+</style>
diff --git a/src/config/const/salerecords.ts b/src/config/const/salerecords.ts
new file mode 100644
index 00000000..60b355e8
--- /dev/null
+++ b/src/config/const/salerecords.ts
@@ -0,0 +1,142 @@
+import defaultCommon from "./index";
+import commonTop from './common-top';
+import { cloneDeep } from "lodash";
+
+interface defaultSalerecords {
+    content: {
+        content_top: object;
+        is_roll: string;
+        rotation_direction: string;
+        interval_time: number;
+        show_number: number;
+        is_show: string[];
+    };
+    style: {
+        heading_img_width: number;
+        heading_img_height: number;
+        heading_img_border_color: string;
+        heading_img_border_size: number;
+        heading_img_radius: {
+            radius: number;
+            radius_top_left: number;
+            radius_top_right: number;
+            radius_bottom_left: number;
+            radius_bottom_right: number;
+        };
+        nick_name_color: string;
+        nick_name_typeface: string;
+        nick_name_size: number;
+        goods_img_width: number;
+        goods_img_height: number;
+        goods_img_border_color: string;
+        goods_img_border_size: number;
+        goods_img_radius: {
+            radius: number;
+            radius_top_left: number;
+            radius_top_right: number;
+            radius_bottom_left: number;
+            radius_bottom_right: number;
+        };
+        goods_title_color: string;
+        goods_title_typeface: string;
+        goods_title_size: number;
+        time_color: string;
+        time_typeface: string;
+        time_size: number;
+        content_color_list: color_list[];
+        content_direction: number;
+        content_background_img_style: number;
+        content_background_img: string[];
+        data_spacing: number;
+        content_padding: paddingStyle;
+        content_radius: {
+            radius: number;
+            radius_top_left: number;
+            radius_top_right: number;
+            radius_bottom_left: number;
+            radius_bottom_right: number;
+        };
+        common_style: object;  
+    };
+}
+const defaultSalerecords: defaultSalerecords = {
+    content: {
+        content_top: {
+            ...commonTop,
+        },
+        is_roll: '1',
+        rotation_direction: 'vertical',
+        interval_time: 3,
+        show_number: 2,
+        is_show: ['head', 'nick_name', 'goods_image', 'goods_title', 'time'],
+    },
+    style: {
+        heading_img_width: 28,
+        heading_img_height: 28,
+        heading_img_border_color: '',
+        heading_img_border_size: 0,
+        heading_img_radius: {
+            radius: 20,
+            radius_top_left: 20,
+            radius_top_right: 20,
+            radius_bottom_left: 20,
+            radius_bottom_right: 20,
+        },
+        nick_name_color: '#666',
+        nick_name_typeface: '400',
+        nick_name_size: 14,
+        goods_img_width: 28,
+        goods_img_height: 28,
+        goods_img_border_color: '',
+        goods_img_border_size: 0,
+        goods_img_radius: {
+            radius: 20,
+            radius_top_left: 20,
+            radius_top_right: 20,
+            radius_bottom_left: 20,
+            radius_bottom_right: 20,
+        },
+        goods_title_color: '#666',
+        goods_title_typeface: '400',
+        goods_title_size: 14,
+        time_color: '#999',
+        time_typeface: '400',
+        time_size: 14,
+        content_color_list: [{ color: '#F4F4F4', color_percentage: undefined }],
+        content_direction: 0,
+        content_background_img_style: 0,
+        content_background_img: [],
+        data_spacing: 10,
+        content_padding: {
+            padding: 0,
+            padding_top: 6,
+            padding_bottom: 6,
+            padding_left: 10,
+            padding_right: 10,
+        },
+        content_radius: {
+            radius: 20,
+            radius_top_left: 20,
+            radius_top_right: 20,
+            radius_bottom_left: 20,
+            radius_bottom_right: 20,
+        },
+        // 公共样式
+        common_style: {
+            ...defaultCommon,
+            color_list: [{ color: '#fff', color_percentage: undefined }],
+            margin: 10,
+            margin_top: 10,
+            margin_bottom: 10,
+            margin_left: 10,
+            margin_right: 10,
+            padding: 10,
+            padding_top: 10,
+            padding_bottom: 10,
+            padding_left: 10,
+            padding_right: 10,
+        }
+    },
+};
+
+export default defaultSalerecords;