sileya-ai
/
vr-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

新增博客组件

v1.3.0
于肖磊 2025-02-28 09:34:25 +08:00
parent e4235d341f
commit 9ec2d6dd04
10 changed files with 2333 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

448
src/components/model-blog-list/index.vue Normal file
View File

@ -0,0 +1,448 @@
<template>
<div class="oh" :style="style_container">
<div :style="style_img_container">
<div class="re oh" :style="style">
<div v-if="!['4'].includes(blog_theme)" class="flex-warp" :class="blog_theme_class" :style="blog_theme != '3' ? blog_spacing : ''">
<div v-for="(item, index) in data_list" :key="index" class="item oh" :style="blog_style">
<div :class="blog_theme == '0' ? 'flex-row oh' : 'flex-col oh h'" :style="blog_img_style">
<template v-if="blog_theme != '3'">
<div class="oh re">
<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.data.cover" class="img" :style="img_radius" :error-img-style="error_img"></image-empty>
</template>
<!-- 角标设置 -->
<subscript-index :value="props.value"></subscript-index>
</div>
</template>
<div v-if="field_show.includes('0') || field_show.includes('1') || field_show.includes('2') || field_show.includes('3')" class="jc-sb flex-1" :class="blog_theme == '3' ? 'flex-row align-c' : 'flex-col'" :style="blog_theme != '0' ? content_padding : 'width: 0;'">
<div class="flex-col" :class="blog_theme == '3' ? 'flex-1 flex-width' : ''" :style="'gap:' + new_style.name_desc_space + 'px;'">
<div v-if="field_show.includes('3')" class="title" :class="blog_theme == '3' ? 'text-line-1' : 'text-line-2'" :style="blog_name">{{ !isEmpty(item.new_title) ? item.new_title : item.data.title }}</div>
<div v-if="field_show.includes('2')" :class="'desc ' + field_desc_row == '2' ? 'text-line-2' : 'text-line-1'" :style="blog_desc">{{ item.data.describe || '' }}</div>
</div>
<div class="flex-row jc-sb gap-8" :class="blog_theme == '3' ? 'ml-10' : 'align-e mt-10'">
<div :style="blog_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="blog_page_view">
<icon name="eye"></icon>
<div>
{{ item.data.access_count ? item.data.access_count : '16' }}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div v-else class="oh" :class="blog_theme_class">
<swiper :key="carousel_key" class="w flex" direction="horizontal" :loop="true" :autoplay="autoplay" :slides-per-view="Number(carousel_col) + 1" :slides-per-group="slides_per_group" :allow-touch-move="false" :space-between="new_style.blog_spacing" :pause-on-mouse-enter="true" :modules="modules">
<swiper-slide v-for="(item, index) in data_list" :key="index">
<div class="item oh" :style="blog_style">
<div class="h oh flex-col" :style="blog_img_style">
<div class="oh re h">
<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.data.cover" class="img" :style="img_radius" :error-img-style="error_img"></image-empty>
</template>
<template v-if="field_show.includes('3') && new_content.name_float == '1'">
<div class="text-line-1" :style="blog_name + float_name_style">{{ !isEmpty(item.new_title) ? item.new_title : item.data.title }}</div>
</template>
<!-- 角标设置 -->
<subscript-index :value="props.value"></subscript-index>
</div>
<div v-if="field_show.includes('0') || field_show.includes('1') || field_show.includes('2') || (field_show.includes('3') && new_content.name_float == '0')" class="jc-sb flex-1 flex-col" :style="blog_theme != '0' ? content_padding : ''">
<div class="flex-col" :style="'gap:' + new_style.name_desc_space + 'px;'">
<div v-if="field_show.includes('3') && new_content.name_float == '0'" class="title text-line-2" :style="blog_name">{{ !isEmpty(item.new_title) ? item.new_title : item.data.title }}</div>
<div v-if="field_show.includes('2')" :class="'desc ' + field_desc_row == '2' ? 'text-line-2' : 'text-line-1'" :style="blog_desc">{{ item.data.describe || '' }}</div>
</div>
<div :class="[ 'flex-row jc-sb gap-8 align-e', { 'mt-10': (field_show.includes('3') && new_content.name_float == '0') || field_show.includes('2') }] ">
<div :style="blog_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="blog_page_view">
<icon name="eye"></icon>
<div>
{{ item.data.access_count ? item.data.access_count : '16' }}
</div>
</div>
</div>
</div>
</div>
</div>
</swiper-slide>
</swiper>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { common_styles_computer, padding_computer, radius_computer, get_math, is_obj_empty, common_img_computer, background_computer, gradient_handle, gradient_computer, margin_computer, box_shadow_computer, border_computer, old_radius, old_padding, old_margin } from '@/utils';
import { isEmpty, cloneDeep } from 'lodash';
// import blogAPI from '@/api/blog';
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 error_img = ref('width:50px;padding:10px;');
const style = ref('');
const style_container = ref('');
const style_img_container = ref('');
interface dataObj {
cover?: string;
add_time?: string;
access_count?: string;
title?: string;
describe?: string;
}
interface blogList {
id: number | string;
data: dataObj;
new_title: string;
new_cover: uploadList[];
}
// 数据
const data_list = ref<blogList[]>([]);
// 风格
const blog_theme = ref('0');
// 是否显示
const field_show = ref(['0', '1']);
// 文章
const blog_name = ref('');
// 文章描述
const blog_desc = ref('');
// 日期
const blog_date = ref('');
// 浏览量
const blog_page_view = ref('');
// 内容圆角
const content_radius = ref('');
// 图片圆角
const img_radius = ref('');
// 内间距
const content_padding = ref('');
// 内容间距
const content_spacing = ref('');
// 文章间距
const blog_spacing = ref('');
const blog_item_height = ref('155');
const blog_style = ref({});
const blog_img_style = ref('');
const default_data_list: blogList = {
id: 0,
data: {},
new_title: '测试文章标题',
new_cover: [],
};
// 内容
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, keywords } = new_content.value;
const new_data = {
blog_keywords: keywords,
blog_category_ids: category_ids.join(','),
blog_order_by_type: order_by_type,
blog_order_by_rule: order_by_rule,
blog_number: number,
blog_is_cover: is_cover,
};
// const res = await blogAPI.getAutoList(new_data);
// new_content.value.data_auto_list = [];
// if (!isEmpty(res.data)) {
// data_list.value = [];
// res.data.forEach((child: any) => {
// data_list.value.push({
// id: get_math(),
// new_title: '',
// new_cover: [],
// data: child,
// });
// new_content.value.data_auto_list.push({
// id: get_math(),
// new_title: '',
// new_cover: [],
// data: child,
// });
// });
// } else {
// data_list.value = Array(4).fill(default_data_list);
// }
};
onMounted(() => {
// 判断数据类型是选择文章且数据不为空
if (new_content.value.data_type == '0' && !isEmpty(new_content.value.data_list)) {
data_list.value = new_content.value.data_list;
} else if (new_content.value.data_type == '1' && !isEmpty(new_content.value.data_auto_list)) {
// 判断数据是筛选文章且数据不为空
data_list.value = new_content.value.data_auto_list.map((item: any) => ({
id: get_math(),
new_title: '',
new_cover: [],
data: item,
}));
} else {
// 否则走默认数据
data_list.value = Array(4).fill(default_data_list);
}
});
// 监听new_content指定的数据变化
const data_list_computer = computed(() => {
const { data_type, category_ids, number, order_by_type, order_by_rule, is_cover, data_list, keywords } = new_content.value;
return { data_type, category_ids, number, order_by_type, order_by_rule, is_cover, data_list, keywords };
});
// 监听new_content指定的数据的变化，来获取最新数据
watch(
() => data_list_computer.value,
(new_value, old_value) => {
// 使用JSON.stringify()进行判断 新值和旧值是否一样 不一样就重新获取数据
if (JSON.stringify(new_value) !== JSON.stringify(old_value) || props.isCommonStyle) {
if (new_value.data_type == '1') {
get_auto_data_list();
} else {
if (!isEmpty(new_content.value.data_list)) {
data_list.value = cloneDeep(new_content.value.data_list);
} else {
data_list.value = Array(4).fill(default_data_list);
}
}
}
},
{ deep: true }
);
// // 轮播宽度
// const multicolumn_columns_width = computed(() => {
// const { carousel_col } = toRefs(new_content.value);
// const new_num = Number(carousel_col.value);
// // 计算间隔的空间。(gap * gap数量) / 模块数量
// let gap = (new_style.value.blog_spacing * (new_num - 1)) + (blog_left_right_width_margin.value * new_num) / new_num;
// return `calc(${100 / new_num}% - ${gap}px)`;
// });
// 文章内容高度
const blog_name_height_computer = computed(() => {
return new_style.value.name_size * 2.4 + 'px';
});
// 文章行高计算
const blog_name_line_height_computer = computed(() => {
return new_style.value.name_size * 1.2 + 'px';
});
// 轮播高度
const carousel_height_computer = computed(() => {
return new_style.value.blog_height + 'px';
});
const theme_list = [
{ name: '单列展示', value: '0', width:110, height: 83 },
{ name: '两列展示（纵向）', value: '1', width:180, height: 180 },
{ name: '大图展示', value: '2', width:0, height: 180 },
{ name: '无图模式', value: '3', width:0, height: 0 },
{ name: '左右滑动展示', value: '4', width:0, height: 0 },
]
// 宽度和高度为空的时候，修改默认值
const blog_img_width = computed(() => {
if (typeof new_style.value.content_img_width == 'number') {
return new_style.value.content_img_width + 'px';
} else {
const list = theme_list.filter(item => item.value == new_content.value.theme);
if (list.length > 0) {
return list[0].width + 'px';
} else {
return 'auto';
}
}
});
// 宽度和高度为空的时候，修改默认值
const blog_img_height = computed(() => {
if (typeof new_style.value.content_img_height == 'number') {
return new_style.value.content_img_height + 'px';
} else {
const list = theme_list.filter(item => item.value == new_content.value.theme);
if (list.length > 0) {
return list[0].height + 'px';
} else {
return 'auto';
}
}
});
// 轮播图列数
const carousel_col = ref('2');
// 轮播图key值
const carousel_key = ref('0');
const autoplay = ref<boolean | object>(false);
const slides_per_group = ref(1);
// 文章名称浮动样式
const float_name_style = computed(() => {
const { name_bg_color_list = [], name_bg_direction = '180deg', name_bg_radius = old_radius, name_bg_padding = old_padding, name_bg_margin = old_margin } = new_style.value;
const data = {
color_list: name_bg_color_list,
direction: name_bg_direction,
}
let location = 'position:absolute;bottom:0;left:0;right:0;'
return gradient_computer(data) + radius_computer(name_bg_radius) + padding_computer(name_bg_padding) + margin_computer(name_bg_margin) + location;
});
const field_desc_row = ref('1');
const blog_left_right_width_margin = computed(() => {
const { margin = old_margin } = new_style.value;
return margin.margin_left + margin.margin_right;
});
// 监听value数据变化
watch(
() => props.value,
(newVal, oldValue) => {
const new_content = newVal?.content;
const new_style = newVal?.style;
blog_theme.value = new_content.theme;
field_show.value = new_content.field_show;
// 样式
blog_name.value = 'font-size:' + new_style.name_size + 'px;' + 'font-weight:' + new_style.name_weight + ';' + 'color:' + new_style.name_color + ';';
// 文章描述
const desc_size = new_style.desc_size;
field_desc_row.value = new_content.field_desc_row;
if (new_content.field_desc_row == '2') {
blog_desc.value = 'font-size:' + desc_size + 'px;line-height:' + (desc_size > 0 ? desc_size + 3 : 0 ) + 'px;height:'+ (desc_size > 0 ? (desc_size + 3) * 2 : 0) + 'px;color:' + new_style.desc_color + ';';
} else {
blog_desc.value = 'font-size:' + desc_size + 'px;line-height:' + desc_size + 'px;height:'+ desc_size + 'px;color:' + new_style.desc_color + ';';
}
blog_date.value = 'font-size:' + new_style.time_size + 'px;' + 'font-weight:' + new_style.time_weight + ';' + 'color:' + new_style.time_color + ';';
blog_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);
img_radius.value = radius_computer(new_style.img_radius);
// 内间距
content_padding.value = padding_computer(new_style.padding);
// 内容间距
content_spacing.value = `gap: ${new_style.content_spacing}px;`;
// 文章间距
blog_spacing.value = `gap: ${new_style.blog_spacing}px;`;
// 文章样式
blog_style.value = '';
blog_img_style.value = '';
// 背景图的处理
const blog_data = {
background_img_style: new_style.blog_background_img_style,
background_img: new_style.blog_background_img,
}
style.value = '';
// 样式处理
const all_style = gradient_handle(new_style.blog_color_list, new_style.blog_direction) + margin_computer(new_style.margin) + box_shadow_computer(new_style) + border_computer(new_style);
if (blog_theme.value == '0') {
blog_style.value += content_radius.value + all_style;
blog_img_style.value = content_spacing.value + content_padding.value + background_computer(blog_data);
} else if (blog_theme.value == '1') {
blog_style.value += `width: calc(50% - ${(new_style.blog_spacing + blog_left_right_width_margin.value * 2) / 2}px);` + content_radius.value + all_style;
blog_img_style.value = background_computer(blog_data);
} else if (blog_theme.value == '2') {
blog_style.value += content_radius.value + all_style;
blog_img_style.value = background_computer(blog_data);
} else if (blog_theme.value == '3') {
style.value = `padding: 0 ${new_style.content_spacing}px;background:#fff;` + content_radius.value;
} else if (blog_theme.value == '4') {
// 更新轮播图的key，确保更换时能重新更新轮播图
carousel_col.value = new_content.carousel_col || '1';
carousel_key.value = new_style.interval_time + new_style.is_roll + new_style.rolling_fashion;
// // 滚动时间
// interval_time.value = (new_style.interval_time || 2) * 1000;
// // 是否滚动修改
// is_roll.value = new_style.is_roll;
// 是否滚动
if (new_style.is_roll == '1' && data_list.value.length > 0) {
autoplay.value = {
delay: (new_style.interval_time || 2) * 1000,
pauseOnMouseEnter: true,
};
} else {
autoplay.value = false;
}
// 判断是平移还是整屏滚动
slides_per_group.value = new_style.rolling_fashion == 'translation' ? 1 : Number(new_content.carousel_col) + 1;
blog_item_height.value = `${new_style.blog_height}px`;
blog_style.value += content_radius.value + all_style;
blog_img_style.value = background_computer(blog_data);
}
if (new_style.common_style && props.isCommonStyle) {
style_container.value = common_styles_computer(new_style.common_style);
style_img_container.value = common_img_computer(new_style.common_style);
}
},
{ deep: true, immediate: true }
);
// 文章主题class计算
const blog_theme_class = computed(() => {
switch (blog_theme.value) {
case '0':
return 'style1 flex-col';
case '1':
return 'style2 flex-row flex-wrap';
case '2':
return 'style3 flex-col';
case '3':
return 'style4 flex-col';
default:
return 'style5';
}
});
</script>
<style lang="scss" scoped>
.style1 {
.item {
.img {
height: v-bind(blog_img_height);
width: v-bind(blog_img_width);
}
}
}
.style2 {
.item {
.img {
height: v-bind(blog_img_height);
}
}
}
.style3 {
.item {
.img {
width: 100%;
height: v-bind(blog_img_height);
}
}
}
.style4 {
.item {
&:not(:last-child) {
border-bottom: 0.1rem solid #eee;
}
}
}
.style5 {
.item {
height: v-bind(carousel_height_computer);
.img {
width: 100%;
height: 100%;
}
.title {
height: v-bind(blog_name_height_computer);
line-height: v-bind(blog_name_line_height_computer);
}
}
}
</style>

229
src/components/model-blog-list/model-blog-list-content.vue Normal file
View File

@ -0,0 +1,229 @@
<template>
<div class="content">
<el-form :model="form" label-width="70" 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-radio-group v-model="form.theme" @change="theme_change">
<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>
<el-form-item v-if="form.theme == '4'" label="轮播列数">
<el-radio-group v-model="form.carousel_col">
<el-radio v-for="item in base_list.carousel_col_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
</el-radio-group>
</el-form-item>
</card-container>
<div class="divider-line"></div>
<card-container class="card-container-br">
<div class="mb-12">文章设置</div>
<!-- 数据筛选组件, 根据数据源类型显示不同的筛选组件 -->
<data-filter type="article" :value="form" :list="form.data_list" :base-list="base_list" @add="add" @data_list_replace="data_list_replace" @data_list_remove="data_list_remove" @data_list_sort="data_list_sort"></data-filter>
</card-container>
<div class="divider-line"></div>
<card-container>
<div class="mb-12">列表设置</div>
<el-form-item label="是否显示">
<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>
<el-form-item v-if="form.field_show.includes('2')" label="描述行数">
<el-radio-group v-model="form.field_desc_row">
<el-radio v-for="item in base_list.field_desc_row" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
</el-radio-group>
</el-form-item>
<template v-if="form.theme == '4'">
<el-form-item label="标题浮起">
<el-switch v-model="form.name_float" active-value="1" inactive-value="0" @change="switch_chage"></el-switch>
</el-form-item>
</template>
</card-container>
<div class="divider-line"></div>
<card-container>
<div class="mb-12">角标设置</div>
<!-- 角标设置 -->
<subscript-content :value="form"></subscript-content>
</card-container>
</el-form>
<url-value-dialog v-model:dialog-visible="url_value_dialog_visible" :type="['article']" :multiple="url_value_multiple_bool" @update:model-value="url_value_dialog_call_back"></url-value-dialog>
</div>
</template>
<script setup lang="ts">
import { get_math } from '@/utils';
import { commonStore } from '@/store';
const common_store = commonStore();
/**
* @description 文章列表（内容）
* @param value{Object} 传过来的数据，用于数据渲染
* @param styles{Object} 样式
* @param defaultConfig{Object} 默认配置
*/
const props = defineProps({
value: {
type: Object,
default: () => ({}),
},
styles: {
type: Object,
default: () => ({}),
},
defaultConfig: {
type: Object,
default: () => ({
// 图片不同风格下的圆角
img_radius_0: 4,
img_radius_1: 0,
}),
},
});
// 默认值
const state = reactive({
form: props.value,
data: props.styles,
});
// 如果需要解构，确保使用toRefs
const { form, data } = toRefs(state);
const base_list = reactive({
theme_list: [
{ name: '单列展示', value: '0', width:110, height: 83 },
{ name: '两列展示（纵向）', value: '1', width:180, height: 180 },
{ name: '大图展示', value: '2', width:0, height: 180 },
{ name: '无图模式', value: '3', width:0, height: 0 },
{ name: '左右滑动展示', value: '4', width:0, height: 0 },
],
carousel_col_list: [
{ name: '单列展示', value: '0' },
{ name: '两列展示', value: '1' },
{ name: '三列展示', value: '2' },
{ name: '四列展示', value: '3' },
],
data_type_list: [
{ name: '选择文章', value: '0' },
{ name: '筛选文章', value: '1' },
],
field_show_list: [
{ name: '文章标题', value: '3' },
{ name: '日期时间', value: '0' },
{ name: '浏览量', value: '1' },
{ name: '描述', value: '2' },
],
field_desc_row: [
{ name: '一行', value: '1' },
{ name: '两行', value: '2' }
]
});
const emits = defineEmits(['theme_change']);
onMounted(() => {
// 如果历史数据没有操作，则修改默认值
const { content_img_width = '', content_img_height = '' } = data.value;
// 宽度和高度为空的时候，并且不是无图模式和左右滑动模式的时候，修改默认值
if ((typeof content_img_width != 'number' || typeof content_img_height != 'number') && !['3', '4'].includes(form.value.theme)) {
const list = base_list.theme_list.filter(item => item.value == form.value.theme);
if (list.length > 0) {
emits('theme_change', list[0].width, list[0].height);
}
}
});
// 主题改变
const theme_change = (val: any) => {
if (val == '3' || val == '4') {
form.value.field_show = ['1', '3'];
} else {
form.value.field_show = ['0', '1', '3'];
}
if (val == '0') {
if (data.value.img_radius.radius == props.defaultConfig.img_radius_0 || (data.value.img_radius.radius_bottom_left == props.defaultConfig.img_radius_1 && data.value.img_radius.radius_bottom_right == props.defaultConfig.img_radius_1 && data.value.img_radius.radius_top_left == props.defaultConfig.img_radius_1 && data.value.img_radius.radius_top_right == props.defaultConfig.img_radius_1)) {
data.value.img_radius.radius = props.defaultConfig.img_radius_0;
data.value.img_radius.radius_bottom_left = props.defaultConfig.img_radius_0;
data.value.img_radius.radius_bottom_right = props.defaultConfig.img_radius_0;
data.value.img_radius.radius_top_left = props.defaultConfig.img_radius_0;
data.value.img_radius.radius_top_right = props.defaultConfig.img_radius_0;
}
} else {
if (data.value.img_radius.radius == props.defaultConfig.img_radius_0 || (data.value.img_radius.radius_bottom_left == props.defaultConfig.img_radius_1 && data.value.img_radius.radius_bottom_right == props.defaultConfig.img_radius_1 && data.value.img_radius.radius_top_left == props.defaultConfig.img_radius_1 && data.value.img_radius.radius_top_right == props.defaultConfig.img_radius_1)) {
data.value.img_radius.radius = props.defaultConfig.img_radius_1;
data.value.img_radius.radius_bottom_left = props.defaultConfig.img_radius_1;
data.value.img_radius.radius_bottom_right = props.defaultConfig.img_radius_1;
data.value.img_radius.radius_top_left = props.defaultConfig.img_radius_1;
data.value.img_radius.radius_top_right = props.defaultConfig.img_radius_1;
}
}
// 切换风格时，将对应图片的默认值宽度和高度赋值
const list = base_list.theme_list.filter(item => item.value == form.value.theme);
if (list.length > 0) {
// emits('theme_change', list[0].width, list[0].height);
data.value.content_img_width = list[0].width;
data.value.content_img_height = list[0].height;
}
};
// 移除
const data_list_remove = (index: number) => {
form.value.data_list.splice(index, 1);
};
const url_value_multiple_bool = ref(true);
const data_list_replace_index = ref(0);
// 替换
const data_list_replace = (index: number) => {
data_list_replace_index.value = index;
url_value_multiple_bool.value = false;
url_value_dialog_visible.value = true;
};
// 拖动排序
const data_list_sort = (item: any) => {
form.value.data_list = item;
};
// 新增
const add = () => {
url_value_multiple_bool.value = true;
url_value_dialog_visible.value = true;
};
// 开启关闭链接
const url_value_dialog_visible = ref(false);
const url_value_dialog_call_back = (item: any[]) => {
if (url_value_multiple_bool.value) {
item.forEach((child: any) => {
form.value.data_list.push({
id: get_math(),
new_title: '',
new_cover: [],
data: child,
});
});
} else {
form.value.data_list[data_list_replace_index.value] = {
id: get_math(),
new_title: '',
new_cover: form.value.data_list[data_list_replace_index.value]?.new_cover || [],
data: item[0],
};
}
};
// 标题浮起之后文章标题的颜色和字体更新
const switch_chage = (val: string | number | boolean) => {
if (val == '1') {
data.value.name_color = '#fff';
data.value.name_weight = '400';
} else {
data.value.name_color = '#333';
data.value.name_weight = 'bold';
}
};
</script>
<style lang="scss" scoped>
.content {
width: 100%;
}
.img {
width: 4rem;
height: 4rem;
}
.number-show {
:deep(.el-input__wrapper .el-input__inner) {
text-align: left;
}
}
</style>

33
src/components/model-blog-list/model-blog-list-setting.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<div class="setting-content">
<template v-if="type == '1'">
<model-blog-list-content :value="form.content" :styles="form.style" :default-config="data_config"></model-blog-list-content>
</template>
<template v-else-if="type == '2'">
<model-blog-list-styles :value="form.style" :content="form.content" :default-config="data_config"></model-blog-list-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: () => ({}),
},
});
const data_config = reactive({
// 图片不同风格下的圆角
img_radius_0: 4,
img_radius_1: 0,
});
const form = ref(props.value);
</script>

187
src/components/model-blog-list/model-blog-list-styles.vue Normal file
View File

@ -0,0 +1,187 @@
<template>
<div class="styles">
<el-form :model="form" label-width="70">
<card-container class="card-container">
<div class="mb-12">列表样式</div>
<el-form-item v-if="theme != '3'" label="文章背景">
<background-common v-model:color_list="form.blog_color_list" v-model:direction="form.blog_direction" v-model:img_style="form.blog_background_img_style" v-model:img="form.blog_background_img" @mult_color_picker_event="mult_color_picker_event" />
</el-form-item>
<el-form-item label="文章名称">
<color-text-size-group v-model:color="form.name_color" v-model:typeface="form.name_weight" v-model:size="form.name_size" :label-width="data.theme == '4' && data.name_float == '1' ? 60 : 40">
<template v-if="data.theme == '4' && data.name_float == '1'">
<el-form-item label="背景" label-width="60" class="mb-0 w form-item-child-label">
<mult-color-picker :value="form.name_bg_color_list" :type="form.name_bg_direction" :is-show-alpha="true" @update:value="name_bg_mult_color_picker_event"></mult-color-picker>
</el-form-item>
<el-form-item label="外边距" label-width="60" class="mb-0 w form-item-child-label">
<margin :value="form.name_bg_margin"></margin>
</el-form-item>
<el-form-item label="内间距" label-width="60" class="mb-0 w form-item-child-label">
<padding :value="form.name_bg_padding"></padding>
</el-form-item>
<el-form-item label="圆角" label-width="60" class="mb-0 w form-item-child-label">
<radius :value="form.name_bg_radius"></radius>
</el-form-item>
</template>
</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']">
<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>
</el-form-item>
<el-form-item label="浏览量">
<color-text-size-group v-model:color="form.page_view_color" v-model:typeface="form.page_view_weight" v-model:size="form.page_view_size"></color-text-size-group>
</el-form-item>
<el-form-item v-if="theme != '3'" label="外间距">
<margin :value="form.margin"></margin>
</el-form-item>
<el-form-item label="内间距">
<padding :value="form.padding"></padding>
</el-form-item>
<template v-if="theme == '0'">
<el-form-item label="内容间距">
<slider v-model="form.content_spacing"></slider>
</el-form-item>
</template>
<template v-if="theme != '3'">
<el-form-item label="文章间距">
<slider v-model="form.blog_spacing"></slider>
</el-form-item>
</template>
<el-form-item label="内容圆角">
<radius :value="form.content_radius"></radius>
</el-form-item>
<template v-if="theme == '4'">
<el-form-item label="内容高度">
<slider v-model="form.blog_height" :max="1000"></slider>
</el-form-item>
</template>
<template v-if="theme != '3'">
<el-form-item label="图片圆角">
<radius :value="form.img_radius"></radius>
</el-form-item>
<!-- 边框处理 -->
<border-config v-model:show="form.border_is_show" v-model:color="form.border_color" v-model:style="form.border_style" v-model:size="form.border_size"></border-config>
<!-- 阴影配置 -->
<shadow-config v-model="form"></shadow-config>
</template>
<template v-if="!['3', '4'].includes(theme)">
<el-form-item v-if="['0'].includes(theme)" label="图片宽度">
<slider v-model="form.content_img_width" :max="1000"></slider>
</el-form-item>
<el-form-item label="图片高度">
<slider v-model="form.content_img_height" :max="1000"></slider>
</el-form-item>
</template>
</card-container>
<template v-if="theme == '4'">
<div class="divider-line data-tabs-line"></div>
<card-container class="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>
<template v-if="form.is_roll === 1">
<el-form-item label="间隔时间">
<slider v-model="form.interval_time" :min="1" :max="100"></slider>
</el-form-item>
<el-form-item label="滚动方式">
<el-radio-group v-model="form.rolling_fashion">
<el-radio value="translation">平移</el-radio>
<el-radio value="cut-screen">切屏</el-radio>
</el-radio-group>
</el-form-item>
</template>
</card-container>
</template>
<!-- 角标 -->
<template v-if="data.seckill_subscript_show == '1'">
<div class="divider-line data-tabs-line"></div>
<subscript-styles :value="form.subscript_style" :data="data"></subscript-styles>
</template>
</el-form>
<template v-if="isCommonStyle">
<div class="divider-line data-tabs-line"></div>
<common-styles :value="form.common_style" @update:value="common_style_update" />
</template>
</div>
</template>
<script setup lang="ts">
/**
* @description: 博客列表（样式）
* @param value{Object} 样式数据
* @param content{Object} 内容数据
* @param defaultConfig{Object} 默认配置
*/
const props = defineProps({
value: {
type: Object,
default: () => ({}),
},
content: {
type: Object,
default: () => ({}),
},
isCommonStyle: {
type: Boolean,
default: true,
},
defaultConfig: {
type: Object,
default: () => ({
// 图片不同风格下的圆角
img_radius_0: 4,
img_radius_1: 0,
}),
},
});
// 默认值
const state = reactive({
form: props.value,
data: props.content,
});
// 如果需要解构，确保使用toRefs
const { form, data } = toRefs(state);
const theme = computed(() => data.value.theme);
if (theme.value == '0') {
if (form.value.img_radius.radius == props.defaultConfig.img_radius_0 || (form.value.img_radius.radius_bottom_left == props.defaultConfig.img_radius_1 && form.value.img_radius.radius_bottom_right == props.defaultConfig.img_radius_1 && form.value.img_radius.radius_top_left == props.defaultConfig.img_radius_1 && form.value.img_radius.radius_top_right == props.defaultConfig.img_radius_1)) {
form.value.img_radius.radius = props.defaultConfig.img_radius_0;
form.value.img_radius.radius_bottom_left = props.defaultConfig.img_radius_0;
form.value.img_radius.radius_bottom_right = props.defaultConfig.img_radius_0;
form.value.img_radius.radius_top_left = props.defaultConfig.img_radius_0;
form.value.img_radius.radius_top_right = props.defaultConfig.img_radius_0;
}
} else {
if (form.value.img_radius.radius == props.defaultConfig.img_radius_0 || (form.value.img_radius.radius_bottom_left == props.defaultConfig.img_radius_1 && form.value.img_radius.radius_bottom_right == props.defaultConfig.img_radius_1 && form.value.img_radius.radius_top_left == props.defaultConfig.img_radius_1 && form.value.img_radius.radius_top_right == props.defaultConfig.img_radius_1)) {
form.value.img_radius.radius = props.defaultConfig.img_radius_1;
form.value.img_radius.radius_bottom_left = props.defaultConfig.img_radius_1;
form.value.img_radius.radius_bottom_right = props.defaultConfig.img_radius_1;
form.value.img_radius.radius_top_left = props.defaultConfig.img_radius_1;
form.value.img_radius.radius_top_right = props.defaultConfig.img_radius_1;
}
}
// 文章背景渐变设置
const mult_color_picker_event = (arry: color_list[], type: number) => {
form.value.blog_color_list = arry;
form.value.blog_direction = type.toString();
};
// 文章标题浮起显示设置
const name_bg_mult_color_picker_event = (arry: color_list[], type: number) => {
form.value.name_bg_color_list = arry;
form.value.name_bg_direction = type.toString();
};
const emit = defineEmits(['update:value']);
const common_style_update = (value: any) => {
form.value.common_style = value;
};
</script>
<style lang="scss" scoped>
.styles {
width: 100%;
}
</style>

90
src/components/model-blog-tabs/index.vue Normal file
View File

@ -0,0 +1,90 @@
<template>
<div :style="style_container">
<div class="flex-col" :style="style_img_container">
<div class="oh" :style="tabs_container">
<div class="oh" :style="tabs_img_container">
<tabs-view ref="tabs" :value="article_tabs" :active-index="tabs_active_index" :tabs-sliding-fixed-bg="tabs_sliding_fixed_bg"></tabs-view>
</div>
</div>
<div class="oh" :style="article_container">
<div class="oh" :style="article_img_container">
<model-article-list :value="article_tabs" :is-common-style="false"></model-article-list>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { background_computer, border_computer, box_shadow_computer, common_img_computer, common_styles_computer, gradient_computer, margin_computer, padding_computer, radius_computer } from '@/utils';
import { cloneDeep } from 'lodash';
/**
* @description: 文章选项卡列表 （渲染）
* @param value{Object} 传过来的数据，用于数据渲染
*/
const props = defineProps({
value: {
type: Object,
default: () => ({}),
},
});
const style_container = ref('');
const style_img_container = ref('');
const article_tabs = ref({});
const tabs_active_index = ref(0);
// 选项卡独立样式
const tabs_container = ref('');
const tabs_img_container = ref('');
// 区域内边距
const article_container = ref('');
const article_img_container = ref('');
// 打开滑动固定开关之后，显示的样式
const tabs_sliding_fixed_bg = ref('');
watch(
() => props.value,
(val) => {
const newVal = cloneDeep(val);
const new_style = newVal?.style;
let new_data = newVal;
tabs_active_index.value = new_data.content.tabs_active_index;
// 选项卡背景设置
const tabs_data = {
color_list: new_style.tabs_bg_color_list,
direction: new_style.tabs_bg_direction,
background_img_style: new_style.tabs_bg_background_img_style,
background_img: new_style.tabs_bg_background_img,
}
tabs_sliding_fixed_bg.value = gradient_computer(tabs_data);
tabs_container.value = gradient_computer(tabs_data) + radius_computer(new_style.tabs_radius) + margin_computer(new_style.tabs_margin) + border_computer(new_style.tabs_content) + box_shadow_computer(new_style.tabs_content);
tabs_img_container.value = background_computer(tabs_data) + padding_computer(new_style.tabs_padding);
// 文章区域背景设置
const article_content_data = {
color_list: new_style.article_content_color_list,
direction: new_style.article_content_direction,
background_img_style: new_style.article_content_background_img_style,
background_img: new_style.article_content_background_img,
}
article_container.value = gradient_computer(article_content_data) + margin_computer(new_style.article_content_margin) + radius_computer(new_style.article_content_radius) + border_computer(new_style.article_content) + box_shadow_computer(new_style.article_content);
article_img_container.value = background_computer(article_content_data) + padding_computer(new_style.article_content_padding);
//文章内容设置
new_data.content.theme = new_data.content.article_theme;
new_data.content.data_type = new_data.content.tabs_list[tabs_active_index.value].data_type;
new_data.content.keywords = new_data.content.tabs_list[tabs_active_index.value].keywords;
new_data.content.category_ids = new_data.content.tabs_list[tabs_active_index.value].category_ids;
new_data.content.carousel_col = new_data.content.article_carousel_col;
new_data.content.data_list = new_data.content.tabs_list[tabs_active_index.value].data_list;
new_data.content.data_auto_list = new_data.content.tabs_list[tabs_active_index.value].data_auto_list;
new_data.content.data_ids = new_data.content.tabs_list[tabs_active_index.value].data_ids;
new_data.content.number = new_data.content.tabs_list[tabs_active_index.value].number;
new_data.content.order_by_type = new_data.content.tabs_list[tabs_active_index.value].order_by_type;
new_data.content.order_by_rule = new_data.content.tabs_list[tabs_active_index.value].order_by_rule;
new_data.content.field_show = new_data.content.field_show;
new_data.content.is_cover = new_data.content.tabs_list[tabs_active_index.value].is_cover;
article_tabs.value = new_data;
style_container.value = common_styles_computer(new_style.common_style);
style_img_container.value = common_img_computer(new_style.common_style) + `gap: ${new_style.article_content_spacing}px;`;
},
{ immediate: true, deep: true }
);
</script>
<style lang="scss" scoped></style>

387
src/components/model-blog-tabs/model-blog-tabs-content.vue Normal file
View File

@ -0,0 +1,387 @@
<template>
<div class="content">
<el-form :model="form" label-width="74" 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-radio-group v-model="form.justification" @change="tabs_theme_change">
<el-radio value="left">居左</el-radio>
<el-radio value="center">居中</el-radio>
<el-radio value="right">居右</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="选项卡置顶">
<div class="flex-row align-c gap-10">
<el-switch v-model="form.tabs_top_up" active-value="1" inactive-value="0" />
<el-tooltip effect="dark" :show-after="200" :hide-after="200" content="<span>滑动置顶仅手机端有效</span>" raw-content placement="top">
<icon name="miaosha-hdgz" size="12" color="#999"></icon>
</el-tooltip>
</div>
</el-form-item>
<template v-if="form.tabs_top_up == '1' && is_not_general_safe_distance">
<el-form-item label="安全距离">
<div class="flex-row align-c gap-10">
<el-switch v-model="form.is_general_safe_distance" active-value="1" inactive-value="0" />
<el-tooltip effect="dark" :show-after="200" :hide-after="200" content="<span>选项卡置顶是否需要安全距离</span>" raw-content placement="top">
<icon name="miaosha-hdgz" size="12" color="#999"></icon>
</el-tooltip>
</div>
</el-form-item>
</template>
<el-form-item label="选项卡风格">
<el-radio-group v-model="form.tabs_theme" @change="tabs_theme_change">
<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 v-if="form.tabs_theme == '3'" label="选中图标">
<upload v-model="form.tabs_adorn_img" v-model:icon-value="form.tabs_adorn_icon" is-icon :limit="1" size="50"></upload>
</el-form-item>
<el-form-item label="文章风格">
<el-radio-group v-model="form.blog_theme" @change="blog_theme_change">
<el-radio v-for="item in base_list.blog_theme_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item v-if="form.blog_theme == '4'" label="轮播列数">
<el-radio-group v-model="form.blog_carousel_col">
<el-radio v-for="item in base_list.carousel_col_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
</el-radio-group>
</el-form-item>
</card-container>
<div class="divider-line"></div>
<card-container>
<div class="mb-12">选项卡设置</div>
<div class="nav-list">
<drag :data="form.tabs_list" type="card" icon-position="top" :space-col="20" @click="tabs_list_click" @remove="tabs_list_remove" @on-sort="tabs_list_sort">
<template #default="{ row, index }">
<div class="flex-col w">
<el-form-item label="显示类型" class="w mb-10">
<div class="flex-col gap-10 w h">
<el-radio-group v-model="row.tabs_type">
<el-radio value="0">文本</el-radio>
<el-radio value="1">图片/图标</el-radio>
</el-radio-group>
<template v-if="row.tabs_type == '1'">
<upload v-model="row.tabs_img" v-model:icon-value="row.tabs_icon" is-icon :limit="1" size="50"></upload>
</template>
<template v-else>
<el-input v-model="row.title" placeholder="请输入标题文字" clearable />
</template>
</div>
</el-form-item>
<sliding-fixed v-model="row.is_sliding_fixed" @sliding_fixed_change="sliding_fixed_change($event, index)"></sliding-fixed>
<template v-if="form.tabs_active_index == index">
<el-form-item v-if="form.tabs_theme == '1'" label="简介配置">
<el-input v-model="row.desc" placeholder="请输入简介" clearable />
</el-form-item>
<!-- 数据筛选组件, 根据数据源类型显示不同的筛选组件 -->
<data-filter type="blog" :value="row" :list="row.data_list" :base-list="base_list" @add="blog_add(index)" @data_list_replace="data_list_replace($event, index)" @data_list_remove="data_list_remove($event, index)" @data_list_sort="data_list_sort($event, index)"></data-filter>
</template>
</div>
</template>
</drag>
<el-button class="mtb-20 w" @click="tabs_add">+添加</el-button>
</div>
</card-container>
<div class="divider-line"></div>
<card-container>
<div class="mb-12">列表设置</div>
<el-form-item label="是否显示">
<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>
<el-form-item v-if="form.field_show.includes('2')" label="描述行数">
<el-radio-group v-model="form.field_desc_row">
<el-radio v-for="item in base_list.field_desc_row" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
</el-radio-group>
</el-form-item>
<template v-if="form.blog_theme == '4'">
<el-form-item label="标题浮起">
<el-switch v-model="form.name_float" active-value="1" inactive-value="0" @change="switch_chage"></el-switch>
</el-form-item>
</template>
</card-container>
<div class="divider-line"></div>
<card-container>
<div class="mb-12">角标设置</div>
<!-- 角标设置 -->
<subscript-content :value="form"></subscript-content>
</card-container>
</el-form>
<url-value-dialog v-model:dialog-visible="url_value_dialog_visible" :type="['blog']" :multiple="url_value_multiple_bool" @update:model-value="url_value_dialog_call_back"></url-value-dialog>
</div>
</template>
<script setup lang="ts">
import { isEmpty } from 'lodash';
import { get_math, tabs_style } from '@/utils';
import { commonStore } from '@/store';
const common_store = commonStore();
/**
* @description: 文章选项卡列表 （内容）
* @param value{Object} 内容数据
* @param tabsStyle{Object} tabs样式数据
* @param defaultConfig{Object} 默认配置
*/
const props = defineProps({
value: {
type: Object,
default: () => ({}),
},
tabStyle: {
type: Object,
default: () => ({}),
},
defaultConfig: {
type: Object,
default: () => ({
// 图片不同风格下的圆角
img_radius_0: 4,
img_radius_1: 0,
}),
},
});
const form = reactive(props.value);
const base_list = reactive({
tabs_theme_list: [
{ name: '样式一', value: '0' },
{ name: '样式二', value: '1' },
{ name: '样式三', value: '2' },
{ name: '样式四', value: '3' },
],
blog_theme_list: [
{ name: '单列展示', value: '0', width:110, height: 83 },
{ name: '两列展示（纵向）', value: '1', width:180, height: 180 },
{ name: '大图展示', value: '2', width:0, height: 180 },
{ name: '无图模式', value: '3', width:0, height: 0 },
{ name: '左右滑动展示', value: '4', width:0, height: 0 },
],
carousel_col_list: [
{ name: '单列展示', value: '0' },
{ name: '两列展示', value: '1' },
{ name: '三列展示', value: '2' },
{ name: '四列展示', value: '3' },
],
data_type_list: [
{ name: '选择文章', value: '0' },
{ name: '筛选文章', value: '1' },
],
field_show_list: [
{ name: '文章标题', value: '3' },
{ name: '日期时间', value: '0' },
{ name: '浏览量', value: '1' },
{ name: '描述', value: '2' },
],
field_desc_row: [
{ name: '一行', value: '1' },
{ name: '两行', value: '2' }
]
});
const emits = defineEmits(['theme_change']);
onMounted(() => {
// 如果历史数据没有操作，则修改默认值
const { content_img_width = '', content_img_height = '' } = styles;
// 宽度和高度为空的时候，并且不是无图模式和左右滑动模式的时候，修改默认值
if ((typeof content_img_width != 'number' || typeof content_img_height != 'number') && !['3', '4'].includes(form.theme)) {
const list = base_list.blog_theme_list.filter(item => item.value == form.theme);
if (list.length > 0) {
emits('theme_change', list[0].width, list[0].height);
}
}
if (form.tabs_list.length > 1) {
form.tabs_list.forEach((item: any) => {
item.is_sliding_fixed = !isEmpty(item.is_sliding_fixed) ? item.is_sliding_fixed : '0';
item.tabs_img = !isEmpty(item.tabs_img) ? item.tabs_img : [];
item.tabs_icon = !isEmpty(item.tabs_icon) ? item.tabs_icon : '';
item.tabs_type = !isEmpty(item.tabs_type) ? item.tabs_type : '0';
});
}
});
// 监听tabs_theme_list的变化
const blog_theme_change = (val: any) => {
if (val == '3' || val == '4') {
form.field_show = ['1', '3'];
} else {
form.field_show = ['0', '1', '3'];
}
if (val == '0') {
if (styles.img_radius.radius == props.defaultConfig.img_radius_0 || (styles.img_radius.radius_bottom_left == props.defaultConfig.img_radius_1 && styles.img_radius.radius_bottom_right == props.defaultConfig.img_radius_1 && styles.img_radius.radius_top_left == props.defaultConfig.img_radius_1 && styles.img_radius.radius_top_right == props.defaultConfig.img_radius_1)) {
styles.img_radius.radius = props.defaultConfig.img_radius_0;
styles.img_radius.radius_bottom_left = props.defaultConfig.img_radius_0;
styles.img_radius.radius_bottom_right = props.defaultConfig.img_radius_0;
styles.img_radius.radius_top_left = props.defaultConfig.img_radius_0;
styles.img_radius.radius_top_right = props.defaultConfig.img_radius_0;
}
} else {
if (styles.img_radius.radius == props.defaultConfig.img_radius_0 || (styles.img_radius.radius_bottom_left == props.defaultConfig.img_radius_1 && styles.img_radius.radius_bottom_right == props.defaultConfig.img_radius_1 && styles.img_radius.radius_top_left == props.defaultConfig.img_radius_1 && styles.img_radius.radius_top_right == props.defaultConfig.img_radius_1)) {
styles.img_radius.radius = props.defaultConfig.img_radius_1;
styles.img_radius.radius_bottom_left = props.defaultConfig.img_radius_1;
styles.img_radius.radius_bottom_right = props.defaultConfig.img_radius_1;
styles.img_radius.radius_top_left = props.defaultConfig.img_radius_1;
styles.img_radius.radius_top_right = props.defaultConfig.img_radius_1;
}
}
// 切换风格时，将对应图片的默认值宽度和高度赋值
const list = base_list.blog_theme_list.filter(item => item.value == val);
if (list.length > 0) {
// emits('theme_change', list[0].width, list[0].height);
styles.value.content_img_width = list[0].width;
styles.value.content_img_height = list[0].height;
}
};
// 开启关闭链接
const url_value_dialog_visible = ref(false);
// 选项卡点击
const tabs_list_click = (item: any, index: number) => {
form.tabs_active_index = index;
};
// 选项卡设置
const tabs_list_remove = (index: number) => {
if (form.tabs_list.length > 1) {
form.tabs_list.splice(index, 1);
if (form.tabs_list.length > index) {
form.tabs_active_index = index;
} else {
form.tabs_active_index = index - 1;
}
} else {
form.tabs_active_index = 0;
ElMessage.warning('至少保留一个选项卡');
}
};
// 拖拽排序
const tabs_list_sort = (item: any) => {
// 拖拽完成后更新数组
form.tabs_list = item;
};
// 添加选项卡
const tabs_add = () => {
form.tabs_list.push({
id: get_math(),
tabs_type: '0',
tabs_img: [],
tabs_icon: '',
is_sliding_fixed: '0',
title: '',
desc: '',
data_type: '0',
category: [],
number: 4,
order_by_type: '0',
order_by_rule: '0',
is_cover: '1',
data_list: [],
});
form.tabs_active_index = form.tabs_list.length - 1;
// emit('update:value', form);
};
// 指定文章
const data_list_remove = (index: number, blog_index: number) => {
form.tabs_list[blog_index].data_list.splice(index, 1);
};
// 拖拽排序
const data_list_sort = (item: any, index: number) => {
form.tabs_list[index].data_list = item;
};
const url_value_multiple_bool = ref(true);
const data_list_replace_index = ref(0);
// 替换
const data_list_replace = (index: number, row_index: number) => {
blog_index.value = row_index;
data_list_replace_index.value = index;
url_value_multiple_bool.value = false;
url_value_dialog_visible.value = true;
};
const blog_index = ref(0);
// 添加文章
const blog_add = (index: number) => {
url_value_multiple_bool.value = true;
url_value_dialog_visible.value = true;
blog_index.value = index;
};
// 添加回调
const url_value_dialog_call_back = (item: any[]) => {
if (url_value_multiple_bool.value) {
item.forEach((child: any) => {
form.tabs_list[blog_index.value].data_list.push({
id: get_math(),
new_title: '',
new_cover: [],
data: child,
});
});
} else {
form.tabs_list[blog_index.value].data_list[data_list_replace_index.value] = {
id: get_math(),
new_title: '',
new_cover: form.tabs_list[blog_index.value].data_list[data_list_replace_index.value]?.new_cover || [],
data: item[0],
};
}
};
/**
* 处理滑动固定状态变化的函数
* 当某个标签页的滑动固定状态发生变化时，确保同时只有一个标签页被设置为滑动固定
*
* @param val 新的滑动固定状态值，可以是字符串、数字或布尔值
* @param index 当前标签页的索引
*/
const sliding_fixed_change = (val: string | number | boolean, index: number) => {
// 查找除当前标签页外，其他标签页中是否已有滑动固定的
const tabs_list_is_sliding_fixed = form.value.tabs_list.findIndex((item: any, index1: number) => item.is_sliding_fixed == '1' && index != index1);
// 如果当前标签页的滑动固定状态为'1'，且已存在其他滑动固定的标签页
if (val == '1' && tabs_list_is_sliding_fixed != -1) {
// 遍历所有标签页，将其他标签页的滑动固定状态设置为'0'
form.value.tabs_list.forEach((item: any, index1: number) => {
if (index != index1) {
item.is_sliding_fixed = '0';
}
});
}
}
const styles = reactive(props.tabStyle);
// 颜色主题切换
const tabs_theme_change = (val: string | number | boolean | undefined): void => {
styles.tabs_color_checked = tabs_style(styles.tabs_color_checked, val);
};
// 沉浸模式下是否设置安全距离
const is_not_general_safe_distance = computed(() => common_store.is_immersion_model && !common_store.is_general_safe_distance);
watchEffect(() => {
if (!is_not_general_safe_distance.value) {
form.value.is_general_safe_distance = '0';
}
});
// 标题浮起之后文章标题的颜色和字体更新
const switch_chage = (val: string | number | boolean) => {
if (val == '1') {
styles.name_color = '#fff';
styles.name_weight = '400';
} else {
styles.name_color = '#333';
styles.name_weight = 'bold';
}
};
</script>
<style lang="scss" scoped>
.content {
width: 100%;
}
.img {
width: 4rem;
height: 4rem;
}
.number-show {
:deep(.el-input__wrapper .el-input__inner) {
text-align: left;
}
}
</style>

33
src/components/model-blog-tabs/model-blog-tabs-setting.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<div class="setting-content">
<template v-if="type == '1'">
<model-blog-tabs-content :value="form.content" :tab-style="form.style" :default-config="data_config"></model-blog-tabs-content>
</template>
<template v-else-if="type == '2'">
<model-blog-tabs-styles :value="form.style" :content="form.content" :tabs-style="form.content.tabs_theme" :default-config="data_config"></model-blog-tabs-styles>
</template>
</div>
</template>
<script setup lang="ts">
/**
* @description: 文章选项卡列表 （设置）
* @param type{String} 类型（1：内容，2：样式）
* @param value{Object} 传过来的数据，用于数据渲染
*/
const props = defineProps({
type: {
type: String,
default: '1',
},
value: {
type: Object,
default: () => ({}),
},
});
const data_config = reactive({
// 图片不同风格下的圆角
img_radius_0: 4,
img_radius_1: 0,
});
const form = ref(props.value);
</script>

309
src/components/model-blog-tabs/model-blog-tabs-styles.vue Normal file
View File

@ -0,0 +1,309 @@
<template>
<div class="styles">
<el-form :model="form" label-width="74">
<card-container>
<div class="mb-12">选项卡样式</div>
<el-form-item label="选中装饰">
<el-radio-group v-if="tabsStyle == '0'" v-model="form.tabs_one_theme">
<el-radio value="0">样式一</el-radio>
<el-radio value="1">样式二</el-radio>
</el-radio-group>
<mult-color-picker :value="form.tabs_checked" :type="form.tabs_direction" @update:value="tabs_checked_event"></mult-color-picker>
</el-form-item>
<!-- 装饰图标设置 -->
<template v-if="data.tabs_theme == '3'">
<el-form-item v-if="!isEmpty(data.tabs_adorn_icon)" label="装饰图标">
<slider v-model="form.tabs_adorn_icon_size"></slider>
</el-form-item>
<el-form-item v-else label="装饰图片">
<div class="flex-col gap-10 w">
<el-form-item label="背景" label-width="40">
<el-switch v-model="form.is_tabs_adorn_img_background" active-value="1" inactive-value="0" />
</el-form-item>
<el-form-item label="圆角" label-width="40">
<radius :value="form.tabs_adorn_img_radius"></radius>
</el-form-item>
<el-form-item label="高度" label-width="40">
<slider v-model="form.tabs_adorn_img_height" :max="200"></slider>
</el-form-item>
</div>
</el-form-item>
</template>
<el-form-item label="选中文字">
<color-text-size-group v-model:color="form.tabs_color_checked" v-model:typeface="form.tabs_weight_checked" v-model:size="form.tabs_size_checked" default-color="rgba(51,51,51,1)"></color-text-size-group>
</el-form-item>
<el-form-item label="未选文字">
<color-text-size-group v-model:color="form.tabs_color" v-model:typeface="form.tabs_weight" v-model:size="form.tabs_size" default-color="rgba(51,51,51,1)"></color-text-size-group>
</el-form-item>
<el-form-item label="选中图标">
<color-text-size-group v-model:color="form.tabs_icon_color_checked" v-model:size="form.tabs_icon_size_checked" default-color="rgba(51,51,51,1)" slider-name="大小" :type-list="['color', 'size']" />
</el-form-item>
<el-form-item label="未选图标">
<color-text-size-group v-model:color="form.tabs_icon_color" v-model:size="form.tabs_icon_size" default-color="rgba(51,51,51,1)" slider-name="大小" :type-list="['color', 'size']" />
</el-form-item>
<el-form-item label="图片设置">
<div class="flex-col gap-10 w">
<template v-if="['2', '4'].includes(data.tabs_theme)">
<el-form-item label="背景" label-width="40">
<el-switch v-model="form.is_tabs_img_background" active-value="1" inactive-value="0" />
</el-form-item>
</template>
<el-form-item label="圆角" label-width="40">
<radius :value="form.tabs_img_radius"></radius>
</el-form-item>
<el-form-item label="高度" label-width="40">
<slider v-model="form.tabs_img_height" :max="200"></slider>
</el-form-item>
</div>
</el-form-item>
<el-form-item label="上下间距">
<slider v-model="form.tabs_sign_spacing" :min="-50" :max="50"></slider>
</el-form-item>
<el-form-item label="左右间距">
<slider v-model="form.tabs_spacing" :max="100"></slider>
</el-form-item>
<el-form-item label="选项卡背景">
<background-common v-model:color_list="form.tabs_bg_color_list" v-model:direction="form.tabs_bg_direction" v-model:img_style="form.tabs_bg_background_img_style" v-model:img="form.tabs_bg_background_img" @mult_color_picker_event="tabs_bg_mult_color_picker_event" />
</el-form-item>
<el-form-item label="圆角">
<radius :value="form.tabs_radius"></radius>
</el-form-item>
<el-form-item label="外边距">
<margin :value="form.tabs_margin"></margin>
</el-form-item>
<el-form-item label="内边距">
<padding :value="form.tabs_padding"></padding>
</el-form-item>
<!-- 边框处理 -->
<border-config v-model:show="form.tabs_content.border_is_show" v-model:color="form.tabs_content.border_color" v-model:style="form.tabs_content.border_style" v-model:size="form.tabs_content.border_size"></border-config>
<!-- 阴影配置 -->
<shadow-config v-model="form.tabs_content"></shadow-config>
</card-container>
<div class="divider-line"></div>
<card-container>
<div class="mb-12">内容样式</div>
<el-form-item label="内容背景">
<background-common v-model:color_list="form.blog_content_color_list" v-model:direction="form.blog_content_direction" v-model:img_style="form.blog_content_background_img_style" v-model:img="form.blog_content_background_img" @mult_color_picker_event="blog_content_mult_color_picker_event" />
</el-form-item>
<el-form-item label="圆角">
<radius :value="form.blog_content_radius"></radius>
</el-form-item>
<el-form-item label="外间距">
<margin :value="form.blog_content_margin"></margin>
</el-form-item>
<el-form-item label="内间距">
<padding :value="form.blog_content_padding"></padding>
</el-form-item>
<el-form-item label="数据间距">
<slider v-model="form.blog_content_spacing" :max="100"></slider>
</el-form-item>
<!-- 边框处理 -->
<border-config v-model:show="form.blog_content.border_is_show" v-model:color="form.blog_content.border_color" v-model:style="form.blog_content.border_style" v-model:size="form.blog_content.border_size"></border-config>
<!-- 阴影配置 -->
<shadow-config v-model="form.blog_content"></shadow-config>
</card-container>
<div class="divider-line"></div>
<card-container>
<div class="mb-12">文章样式</div>
<el-form-item v-if="theme != '3'" label="文章背景">
<background-common v-model:color_list="form.blog_color_list" v-model:direction="form.blog_direction" v-model:img_style="form.blog_background_img_style" v-model:img="form.blog_background_img" @mult_color_picker_event="mult_color_picker_event" />
</el-form-item>
<el-form-item label="文章名称">
<color-text-size-group v-model:color="form.name_color" v-model:typeface="form.name_weight" v-model:size="form.name_size" :label-width="data.blog_theme == '4' && data.name_float == '1' ? 60 : 40">
<template v-if="data.blog_theme == '4' && data.name_float == '1'">
<el-form-item label="背景" label-width="60" class="mb-0 w form-item-child-label">
<mult-color-picker :value="form.name_bg_color_list" :type="form.name_bg_direction" :is-show-alpha="true" @update:value="name_bg_mult_color_picker_event"></mult-color-picker>
</el-form-item>
<el-form-item label="外边距" label-width="60" class="mb-0 w form-item-child-label">
<margin :value="form.name_bg_margin"></margin>
</el-form-item>
<el-form-item label="内间距" label-width="60" class="mb-0 w form-item-child-label">
<padding :value="form.name_bg_padding"></padding>
</el-form-item>
<el-form-item label="圆角" label-width="60" class="mb-0 w form-item-child-label">
<radius :value="form.name_bg_radius"></radius>
</el-form-item>
</template>
</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']">
<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>
</el-form-item>
<el-form-item label="浏览量">
<color-text-size-group v-model:color="form.page_view_color" v-model:typeface="form.page_view_weight" v-model:size="form.page_view_size"></color-text-size-group>
</el-form-item>
<template v-if="theme != '3'">
<el-form-item label="外间距">
<margin :value="form.margin"></margin>
</el-form-item>
</template>
<el-form-item label="内间距">
<padding :value="form.padding"></padding>
</el-form-item>
<template v-if="theme == '0'">
<el-form-item label="内容间距">
<slider v-model="form.content_spacing"></slider>
</el-form-item>
</template>
<template v-if="theme != '3'">
<el-form-item label="文章间距">
<slider v-model="form.blog_spacing"></slider>
</el-form-item>
</template>
<el-form-item label="内容圆角">
<radius :value="form.content_radius"></radius>
</el-form-item>
<template v-if="theme == '4'">
<el-form-item label="内容高度">
<slider v-model="form.blog_height" :max="1000"></slider>
</el-form-item>
</template>
<template v-if="theme != '3'">
<el-form-item label="图片圆角">
<radius :value="form.img_radius"></radius>
</el-form-item>
<!-- 边框处理 -->
<border-config v-model:show="form.border_is_show" v-model:color="form.border_color" v-model:style="form.border_style" v-model:size="form.border_size"></border-config>
<!-- 阴影配置 -->
<shadow-config v-model="form"></shadow-config>
</template>
<template v-if="!['3', '4'].includes(theme)">
<el-form-item v-if="['0'].includes(theme)" label="图片宽度">
<slider v-model="form.content_img_width" :max="1000"></slider>
</el-form-item>
<el-form-item label="图片高度">
<slider v-model="form.content_img_height" :max="1000"></slider>
</el-form-item>
</template>
</card-container>
<template v-if="theme == '4'">
<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>
<template v-if="form.is_roll == 1">
<el-form-item label="间隔时间">
<slider v-model="form.interval_time" :min="1" :max="100"></slider>
</el-form-item>
<el-form-item label="滚动方式">
<el-radio-group v-model="form.rolling_fashion">
<el-radio value="translation">平移</el-radio>
<el-radio value="cut-screen">切屏</el-radio>
</el-radio-group>
</el-form-item>
</template>
</card-container>
</template>
<!-- 秒杀角标 -->
<template v-if="data.seckill_subscript_show == '1'">
<div class="divider-line"></div>
<subscript-styles :value="form.subscript_style" :data="data"></subscript-styles>
</template>
</el-form>
<div class="divider-line"></div>
<common-styles :value="form.common_style" @update:value="common_styles_update" />
</div>
</template>
<script setup lang="ts">
import { isEmpty } from 'lodash'
/**
* @description: 文章选项卡列表 （样式）
* @param value{Object} 样式数据
* @param content{Object} 内容数据
* @param defaultConfig{Object} 默认配置
* @param tabsStyle{String} 选项卡风格
*/
const props = defineProps({
value: {
type: Object,
default: () => ({}),
},
content: {
type: Object,
default: () => ({}),
},
defaultConfig: {
type: Object,
default: () => ({
// 图片不同风格下的圆角
img_radius_0: 4,
img_radius_1: 0,
}),
},
tabsStyle: {
type: String,
default: '',
},
});
// 默认值
const state = reactive({
form: props.value,
data: props.content,
});
// 如果需要解构，确保使用toRefs
const { form, data } = toRefs(state);
// 主题
const theme = computed(() => data.value.blog_theme);
// 兼容旧数据
if (theme.value == '0') {
if (form.value.img_radius.radius == props.defaultConfig.img_radius_0 || (form.value.img_radius.radius_bottom_left == props.defaultConfig.img_radius_1 && form.value.img_radius.radius_bottom_right == props.defaultConfig.img_radius_1 && form.value.img_radius.radius_top_left == props.defaultConfig.img_radius_1 && form.value.img_radius.radius_top_right == props.defaultConfig.img_radius_1)) {
form.value.img_radius.radius = props.defaultConfig.img_radius_0;
form.value.img_radius.radius_bottom_left = props.defaultConfig.img_radius_0;
form.value.img_radius.radius_bottom_right = props.defaultConfig.img_radius_0;
form.value.img_radius.radius_top_left = props.defaultConfig.img_radius_0;
form.value.img_radius.radius_top_right = props.defaultConfig.img_radius_0;
}
} else {
if (form.value.img_radius.radius == props.defaultConfig.img_radius_0 || (form.value.img_radius.radius_bottom_left == props.defaultConfig.img_radius_1 && form.value.img_radius.radius_bottom_right == props.defaultConfig.img_radius_1 && form.value.img_radius.radius_top_left == props.defaultConfig.img_radius_1 && form.value.img_radius.radius_top_right == props.defaultConfig.img_radius_1)) {
form.value.img_radius.radius = props.defaultConfig.img_radius_1;
form.value.img_radius.radius_bottom_left = props.defaultConfig.img_radius_1;
form.value.img_radius.radius_bottom_right = props.defaultConfig.img_radius_1;
form.value.img_radius.radius_top_left = props.defaultConfig.img_radius_1;
form.value.img_radius.radius_top_right = props.defaultConfig.img_radius_1;
}
}
// 选项卡选中事件
const tabs_checked_event = (arry: string[], type: number) => {
form.value.tabs_checked = arry;
form.value.tabs_direction = type.toString();
};
// 选项卡背景渐变设置
const tabs_bg_mult_color_picker_event = (arry: color_list[], type: number) => {
form.value.tabs_bg_color_list = arry;
form.value.tabs_bg_direction = type.toString();
};
// 内容区域背景渐变设置
const blog_content_mult_color_picker_event = (arry: color_list[], type: number) => {
form.value.blog_content_color_list = arry;
form.value.blog_content_direction = type.toString();
};
// 文章背景渐变设置
const mult_color_picker_event = (arry: color_list[], type: number) => {
form.value.blog_color_list = arry;
form.value.blog_direction = type.toString();
};
// 通用样式回调
const common_styles_update = (val: Object) => {
form.value.common_style = val;
};
// 文章标题浮起显示设置
const name_bg_mult_color_picker_event = (arry: color_list[], type: number) => {
form.value.name_bg_color_list = arry;
form.value.name_bg_direction = type.toString();
};
</script>
<style lang="scss" scoped>
.styles {
width: 100%;
}
</style>

213
src/config/const/blog-list.ts Normal file
View File

@ -0,0 +1,213 @@
import defaultCommon from './index';
import commonTop from './common-top';
import defaultSetting from '../setting/index';
import subscriptStyle from './subscript-style';
interface BlogList {
id: number | string;
data: object;
new_title: string;
new_cover: uploadList[];
}
interface DefaultBlogList {
content: {
content_top: object;
// 风格
theme: string;
carousel_col: string;
data_type: string;
keywords: string;
category_ids: string[];
data_list: BlogList[];
data_ids: string;
data_auto_list: BlogList[];
number: number;
order_by_type: number;
order_by_rule: number;
field_show: string[];
field_desc_row: string,
is_cover: string;
seckill_subscript_show: string;
subscript_type: string;
subscript_img_src: uploadList[];
subscript_icon_class: string;
subscript_text: string;
name_float: string;
};
style: {
blog_direction: string,
blog_color_list: color_list[],
blog_background_img_style: string,
blog_background_img: uploadList[],
name_weight: string;
name_size: number;
name_color: string;
name_bg_color_list: color_list[];
name_bg_direction: string,
name_bg_margin: marginStyle,
name_bg_padding: paddingStyle,
name_bg_radius: radiusStyle,
desc_color: string;
desc_size: number;
name_desc_space: number;
time_weight: string;
time_size: number;
time_color: string;
page_view_weight: string;
page_view_size: number;
page_view_color: string;
content_radius: radiusStyle;
img_radius: radiusStyle;
margin: marginStyle;
padding: paddingStyle;
border_is_show: string;
border_color: string;
border_style: string;
border_size: paddingStyle;
// 阴影
box_shadow_color: string;
box_shadow_x: number;
box_shadow_y: number;
box_shadow_blur: number;
box_shadow_spread: number;
blog_spacing: number;
content_spacing: number;
blog_height: number;
content_img_width: number | undefined;
content_img_height: number | undefined;
interval_time: number; //滚动时间
is_roll: number;
rolling_fashion: string;
subscript_style: object;
common_style: object;
};
}
const defaultBlogList: DefaultBlogList = {
content: {
content_top: {
...commonTop
},
theme: '0',
carousel_col: '2',
data_type: '0',
keywords: '',
category_ids: defaultSetting.category_ids,
data_list: [],
data_ids: '',
data_auto_list: [],
number: defaultSetting.page_size,
order_by_type: defaultSetting.order_by_type,
order_by_rule: defaultSetting.order_by_rule,
field_show: ['0', '1', '3'],
field_desc_row: '1',
is_cover: defaultSetting.is_cover,
// 角标配置
seckill_subscript_show: '0',
subscript_type: 'text',
subscript_img_src: [],
subscript_icon_class: '',
subscript_text: '',
name_float: '0'
},
style: {
blog_direction: '90deg',
blog_color_list: [{ color: '#fff', color_percentage: undefined }],
blog_background_img_style: '0',
blog_background_img: [],
name_weight: 'bold',
name_size: 14,
name_color: '#333',
name_bg_color_list: [{ color: 'rgba(0, 0, 0, 0.7)', color_percentage: undefined }],
name_bg_direction: '180deg',
name_bg_margin: {
margin: 0,
margin_top: 0,
margin_bottom: 0,
margin_left: 0,
margin_right: 0,
},
name_bg_padding: {
padding: 0,
padding_top: 0,
padding_bottom: 0,
padding_left: 10,
padding_right: 10,
},
name_bg_radius: {
radius: 0,
radius_top_left: 0,
radius_top_right: 0,
radius_bottom_left: 4,
radius_bottom_right: 4,
},
desc_color: '#999',
desc_size: 12,
name_desc_space: 4,
time_weight: '400',
time_size: 12,
time_color: 'rgba(153, 153, 153, 1)',
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,
},
// 图片圆角 ---- 除了风格一圆角是4，其他都是0
img_radius: {
radius: 4,
radius_top_left: 4,
radius_top_right: 4,
radius_bottom_left: 4,
radius_bottom_right: 4,
},
margin: {
margin: 0,
margin_top: 0,
margin_bottom: 0,
margin_left: 0,
margin_right: 0,
},
// 内间距
padding: {
padding: 10,
padding_top: 10,
padding_bottom: 10,
padding_left: 10,
padding_right: 10,
},
// 边框样式
border_is_show: '0',
border_color: '#FF3F3F',
border_style: 'solid',
border_size: {
padding: 1,
padding_top: 1,
padding_right: 1,
padding_bottom: 1,
padding_left: 1,
},
// 阴影
box_shadow_color: '',
box_shadow_x: 0,
box_shadow_y: 0,
box_shadow_blur: 0,
box_shadow_spread: 0,
content_spacing: 10, // 内容间距
blog_spacing: 10, // 博客间距
blog_height: 155, // 博客高度
content_img_width: 110,
content_img_height: 83,
interval_time: 3, //滚动时间
is_roll: 1, // 是否轮播
rolling_fashion: 'translation', // 滚动方式 translation 平移 cut-screen 切屏
subscript_style: subscriptStyle,
common_style: { ...defaultCommon, padding: 10, padding_top: 10, padding_bottom: 10, padding_left: 10, padding_right: 10 },
},
};
export default defaultBlogList;

404
src/config/const/blog-tabs.ts Normal file
View File

@ -0,0 +1,404 @@
import defaultCommon from './index';
import commonTop from './common-top';
import defaultSetting from '../setting/index';
import subscriptStyle from './subscript-style';
interface BlogList {
id: number | string;
data: object;
new_title: string;
new_cover: uploadList[];
}
interface blogTabsList {
id: string;
tabs_type: string;
tabs_img: uploadList[];
tabs_icon: string;
is_sliding_fixed: string,
title: string;
desc: string;
data_type: string;
keywords: string;
category_ids: string[];
number: number;
order_by_type: number;
order_by_rule: number;
is_cover: string;
data_ids: string;
data_list: BlogList[];
data_auto_list: BlogList[];
}
interface DefaultBlogTabs {
content: {
content_top: object;
tabs_theme: string;
tabs_adorn_icon: string;
tabs_adorn_img: uploadList[];
is_general_safe_distance: string;
tabs_top_up: string;
blog_theme: string;
blog_carousel_col: string;
tabs_list: blogTabsList[];
tabs_active_index: number;
field_show: string[];
field_desc_row: string;
seckill_subscript_show: string;
subscript_type: string;
subscript_img_src: uploadList[];
subscript_icon_class: string;
subscript_text: string;
name_float: string;
justification: string;
};
style: {
tabs_one_theme: string;
tabs_checked: color_list[];
is_tabs_adorn_img_background: string;
tabs_adorn_icon_size: number,
tabs_adorn_img_radius: radiusStyle,
tabs_adorn_img_height: number,
tabs_direction: string;
tabs_weight_checked: string;
tabs_size_checked: number;
tabs_color_checked: string;
tabs_weight: string;
tabs_size: number;
tabs_color: string;
tabs_icon_color_checked: string;
tabs_icon_size_checked: number,
tabs_icon_color: string,
tabs_icon_size: number,
is_tabs_img_background: string,
tabs_img_radius: radiusStyle,
tabs_img_height: number,
tabs_spacing: number;
tabs_bg_direction: string,
tabs_bg_color_list: color_list[],
tabs_bg_background_img_style: string,
tabs_bg_background_img: string[],
tabs_sign_spacing: number;
tabs_radius: radiusStyle;
tabs_margin: marginStyle;
tabs_padding: paddingStyle;
tabs_content: object;
blog_content_direction: string;
blog_content_color_list: color_list[];
blog_content_background_img_style: string;
blog_content_background_img: string[];
blog_content_radius: radiusStyle;
blog_content_margin: marginStyle;
blog_content_padding: paddingStyle;
blog_content_spacing: number;
blog_content: object;
blog_direction: string,
blog_color_list: color_list[],
blog_background_img_style: string,
blog_background_img: uploadList[],
name_weight: string;
name_size: number;
name_color: string;
name_bg_color_list: color_list[];
name_bg_direction: string,
name_bg_margin: marginStyle,
name_bg_padding: paddingStyle,
name_bg_radius: radiusStyle,
desc_color: string;
desc_size: number;
name_desc_space: number;
time_weight: string;
time_size: number;
time_color: string;
page_view_weight: string;
page_view_size: number;
page_view_color: string;
content_radius: radiusStyle;
img_radius: radiusStyle;
margin: marginStyle;
padding: paddingStyle;
border_is_show: string;
border_color: string;
border_style: string;
border_size: paddingStyle;
// 阴影
box_shadow_color: string;
box_shadow_x: number;
box_shadow_y: number;
box_shadow_blur: number;
box_shadow_spread: number;
blog_spacing: number;
content_spacing: number;
blog_height: number;
content_img_width: number | undefined;
content_img_height: number | undefined;
interval_time: number; //滚动时间
is_roll: number;
rolling_fashion: string;
subscript_style: object;
common_style: object;
};
}
const defaultBlogTabs: DefaultBlogTabs = {
content: {
content_top: {
...commonTop,
},
// 对齐方式
justification: 'left',
tabs_theme: '0',
is_general_safe_distance: '0',
// 选中装饰图标
tabs_adorn_icon: 'checked-smooth',
tabs_adorn_img: [],
tabs_top_up: '0',
blog_theme: '0',
blog_carousel_col: '2',
tabs_list: [
{ id: '1', tabs_type: '0', tabs_img: [], tabs_icon: '', is_sliding_fixed: '0', title: '热门推荐', desc: '简介', data_type: '0', keywords: '', category_ids: defaultSetting.category_ids, data_ids: '', number: defaultSetting.page_size, order_by_type: defaultSetting.order_by_type, order_by_rule: defaultSetting.order_by_rule, is_cover: defaultSetting.is_cover, data_list: [], data_auto_list: [] },
{ id: '2', tabs_type: '0', tabs_img: [], tabs_icon: '', is_sliding_fixed: '0', title: '测试一', desc: '简介', data_type: '0', keywords: '', category_ids: defaultSetting.category_ids, data_ids: '', number: defaultSetting.page_size, order_by_type: defaultSetting.order_by_type, order_by_rule: defaultSetting.order_by_rule, is_cover: defaultSetting.is_cover, data_list: [], data_auto_list: [] },
{ id: '3', tabs_type: '0', tabs_img: [], tabs_icon: '', is_sliding_fixed: '0', title: '测试二', desc: '简介', data_type: '0', keywords: '', category_ids: defaultSetting.category_ids, data_ids: '', number: defaultSetting.page_size, order_by_type: defaultSetting.order_by_type, order_by_rule: defaultSetting.order_by_rule, is_cover: defaultSetting.is_cover, data_list: [], data_auto_list: [] },
{ id: '4', tabs_type: '0', tabs_img: [], tabs_icon: '', is_sliding_fixed: '0', title: '测试三', desc: '简介', data_type: '0', keywords: '', category_ids: defaultSetting.category_ids, data_ids: '', number: defaultSetting.page_size, order_by_type: defaultSetting.order_by_type, order_by_rule: defaultSetting.order_by_rule, is_cover: defaultSetting.is_cover, data_list: [], data_auto_list: [] },
{ id: '5', tabs_type: '0', tabs_img: [], tabs_icon: '', is_sliding_fixed: '0', title: '测试四', desc: '简介', data_type: '0', keywords: '', category_ids: defaultSetting.category_ids, data_ids: '', number: defaultSetting.page_size, order_by_type: defaultSetting.order_by_type, order_by_rule: defaultSetting.order_by_rule, is_cover: defaultSetting.is_cover, data_list: [], data_auto_list: [] },
{ id: '6', tabs_type: '0', tabs_img: [], tabs_icon: '', is_sliding_fixed: '0', title: '测试五', desc: '简介', data_type: '0', keywords: '', category_ids: defaultSetting.category_ids, data_ids: '', number: defaultSetting.page_size, order_by_type: defaultSetting.order_by_type, order_by_rule: defaultSetting.order_by_rule, is_cover: defaultSetting.is_cover, data_list: [], data_auto_list: [] },
],
tabs_active_index: 0,
field_show: ['0', '1', '3'],
field_desc_row: '1',
// 角标配置
seckill_subscript_show: '0',
subscript_type: 'text',
subscript_img_src: [],
subscript_icon_class: '',
subscript_text: '',
name_float: '0'
},
style: {
tabs_one_theme: '0',
tabs_checked: [
{ color: '#FF2222', color_percentage: undefined },
{ color: '#FF9898', color_percentage: undefined },
],
is_tabs_adorn_img_background: '0',
tabs_adorn_icon_size: 15,
tabs_adorn_img_radius: {
radius: 0,
radius_top_left: 0,
radius_top_right: 0,
radius_bottom_left: 0,
radius_bottom_right: 0,
},
tabs_adorn_img_height: 10,
tabs_direction: '90deg',
tabs_weight_checked: 'bold',
tabs_size_checked: 14,
tabs_color_checked: 'rgba(51,51,51,1)',
tabs_weight: 'bold',
tabs_size: 14,
tabs_color: 'rgba(51,51,51,1)',
// 选项卡图标和图片设置
tabs_icon_color_checked: 'rgba(51,51,51,1)',
tabs_icon_size_checked: 14,
tabs_icon_color: 'rgba(51,51,51,1)',
tabs_icon_size: 14,
is_tabs_img_background: '0',
tabs_img_radius: {
radius: 0,
radius_top_left: 0,
radius_top_right: 0,
radius_bottom_left: 0,
radius_bottom_right: 0,
},
tabs_img_height: 20,
tabs_spacing: 20,
tabs_sign_spacing: 4,
// 选项卡背景设置
tabs_bg_direction: '90deg',
tabs_bg_color_list: [{ color: '', color_percentage: undefined }],
tabs_bg_background_img_style: '2',
tabs_bg_background_img: [],
tabs_radius: {
radius: 0,
radius_top_left: 0,
radius_top_right: 0,
radius_bottom_left: 0,
radius_bottom_right: 0,
},
tabs_margin: {
margin: 0,
margin_top: 0,
margin_bottom: 0,
margin_left: 0,
margin_right: 0,
},
tabs_padding: {
padding: 10,
padding_top: 10,
padding_bottom: 10,
padding_left: 10,
padding_right: 10,
},
tabs_content: {
// 边框样式
border_is_show: '0',
border_color: '#FF3F3F',
border_style: 'solid',
border_size: {
padding: 1,
padding_top: 1,
padding_right: 1,
padding_bottom: 1,
padding_left: 1,
},
// 阴影
box_shadow_color: '',
box_shadow_x: 0,
box_shadow_y: 0,
box_shadow_blur: 0,
box_shadow_spread: 0,
},
// 博客内容设置
blog_content_direction: '90deg',
blog_content_color_list: [{ color: '', color_percentage: undefined }],
blog_content_background_img_style: '2',
blog_content_background_img: [],
blog_content_radius: {
radius: 0,
radius_top_left: 0,
radius_top_right: 0,
radius_bottom_left: 0,
radius_bottom_right: 0,
},
blog_content_margin: {
margin: 0,
margin_top: 0,
margin_bottom: 0,
margin_left: 0,
margin_right: 0,
},
blog_content_padding: {
padding: 0,
padding_top: 0,
padding_bottom: 10,
padding_left: 10,
padding_right: 10,
},
blog_content: {
// 边框样式
border_is_show: '0',
border_color: '#FF3F3F',
border_style: 'solid',
border_size: {
padding: 1,
padding_top: 1,
padding_right: 1,
padding_bottom: 1,
padding_left: 1,
},
// 阴影
box_shadow_color: '',
box_shadow_x: 0,
box_shadow_y: 0,
box_shadow_blur: 0,
box_shadow_spread: 0,
},
blog_content_spacing: 0,
// 博客背景设置
blog_direction: '90deg',
blog_color_list: [{ color: '#fff', color_percentage: undefined }],
blog_background_img_style: '0',
blog_background_img: [],
name_weight: 'bold',
name_size: 14,
name_color: '#333',
name_bg_color_list: [{ color: 'rgba(0, 0, 0, 0.7)', color_percentage: undefined }],
name_bg_direction: '180deg',
name_bg_margin: {
margin: 0,
margin_top: 0,
margin_bottom: 0,
margin_left: 0,
margin_right: 0,
},
name_bg_padding: {
padding: 0,
padding_top: 0,
padding_bottom: 0,
padding_left: 10,
padding_right: 10,
},
name_bg_radius: {
radius: 0,
radius_top_left: 0,
radius_top_right: 0,
radius_bottom_left: 4,
radius_bottom_right: 4,
},
desc_color: '#999',
desc_size: 12,
name_desc_space: 4,
time_weight: '400',
time_size: 12,
time_color: 'rgba(153, 153, 153, 1)',
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,
},
// 图片圆角 ---- 除了风格一圆角是4，其他都是0
img_radius: {
radius: 4,
radius_top_left: 4,
radius_top_right: 4,
radius_bottom_left: 4,
radius_bottom_right: 4,
},
margin: {
margin: 0,
margin_top: 0,
margin_bottom: 0,
margin_left: 0,
margin_right: 0,
},
// 内间距
padding: {
padding: 10,
padding_top: 10,
padding_bottom: 10,
padding_left: 10,
padding_right: 10,
},
// 边框样式
border_is_show: '0',
border_color: '#FF3F3F',
border_style: 'solid',
border_size: {
padding: 1,
padding_top: 1,
padding_right: 1,
padding_bottom: 1,
padding_left: 1,
},
// 阴影
box_shadow_color: '',
box_shadow_x: 0,
box_shadow_y: 0,
box_shadow_blur: 0,
box_shadow_spread: 0,
content_spacing: 10, // 内容间距
blog_spacing: 10, // 博客间距
blog_height: 155, // 博客高度
content_img_width: 110,
content_img_height: 83,
interval_time: 3, //滚动时间
is_roll: 1, // 是否轮播
rolling_fashion: 'translation', // 滚动方式 translation 平移 cut-screen 切屏
subscript_style: subscriptStyle,
common_style: defaultCommon,
},
};
export default defaultBlogTabs;