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

Merge branch 'dev-yxl' into dev-sws

v1.0.0
sws 2024-08-13 18:33:31 +08:00
parent c9eae2e046 14089eebc4
commit 9d8137a676
28 changed files with 1088 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/layout/siderbar/data-magic.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

12
src/components/common/carousel-indicator/index.vue
View File

@ -3,12 +3,6 @@
<el-form-item label="是否显示">
<el-switch v-model="form.is_show" size="large" />
</el-form-item>
<el-form-item label="是否滚动">
<el-switch v-model="form.is_roll" size="large" />
</el-form-item>
<el-form-item label="间隔时间">
<slider v-model="form.interval_time" :max="100"></slider>
</el-form-item>
<template v-if="form.is_show">
<el-form-item label="指示器样式">
<el-radio-group v-model="form.indicator_style" is-button>
@ -41,8 +35,8 @@
</el-form-item>
<el-form-item label="指示器色值">
<div class="flex-col gap-20">
<color-picker v-model="form.actived_color" default-color="#2A94FF" @update:value="color_picker_change($event, 'actived_color')"></color-picker>
<color-picker v-model="form.color" default-color="#DDDDDD" @update:value="color_picker_change($event, 'color')"></color-picker>
<div class="flex-row gap-20"><span class="size-12 cr-9">选中样式</span><color-picker v-model="form.actived_color" default-color="#2A94FF" @update:value="color_picker_change($event, 'actived_color')"></color-picker></div>
<div class="flex-row gap-20"><span class="size-12 cr-9">常规样式</span><color-picker v-model="form.color" default-color="#DDDDDD" @update:value="color_picker_change($event, 'color')"></color-picker></div>
</div>
</el-form-item>
<el-form-item v-if="form.indicator_style != 'num'" label="指示器圆角">
@ -54,8 +48,6 @@
import { pick } from 'lodash';
// interface indicator {
// is_show: boolean;
// is_roll: boolean;
// interval_time: number;
// indicator_style: string;
// indicator_location: string;
// indicator_size: number;

15
src/components/common/picture-cube/index.vue → src/components/common/magic-cube/index.vue
View File

@ -12,7 +12,7 @@
<div v-if="selected_active == index && props.flag" class="cube-del" @click.stop="on_selected_del(index)">
<icon name="close" color="f" size="8"></icon>
</div>
<template v-if="!isEmpty(item.img[0])">
<template v-if="!isEmpty(item.img[0]) && props.type == 'img'">
<image-empty v-model="item.img[0]"></image-empty>
</template>
<template v-else>
@ -21,6 +21,9 @@
x
{{ Math.round((750 / densityNum) * (item.end.x - item.start.x + 1)) }}
像素
<template v-if="props.type == 'data'">
<div class="mt-12">共有3个商品</div>
</template>
</div>
</template>
</div>
@ -39,18 +42,22 @@ interface CubeItem {
x: number;
y: number;
};
img: uploadList[];
img: uploadList[],
img_list?: any,
data_list?: any
}
interface Props {
flag: boolean;
list: CubeItem[];
type: string;
cubeWidth: number;
cubeHeight: number;
}
const props = withDefaults(defineProps<Props>(), {
list: () => [],
flag: false,
type: 'img',
cubeWidth: 390,
cubeHeight: 390,
});
@ -203,6 +210,10 @@ const selected_click = (index: number) => {
selected_active.value = index;
emits('selected_click', index);
};
const tips = () => {
console.log(selectedList.value[selected_active.value].img_list);
console.log(selectedList.value[selected_active.value].data_list);
};
</script>
<style lang="scss" scoped>
.decorate-cube {

15
src/components/model-carousel/model-carousel-styles.vue
View File

@ -7,6 +7,15 @@
<radius :value="form" @update:value="radius_change"></radius>
</el-form-item>
</card-container>
<card-container class="mb-8">
<div class="mb-12">轮播设置</div>
<el-form-item label="自动轮播">
<el-switch v-model="form.is_roll" size="large" />
</el-form-item>
<el-form-item label="间隔时间">
<slider v-model="form.interval_time" :max="100"></slider>
</el-form-item>
</card-container>
<card-container class="mb-8">
<carousel-indicator :value="form"></carousel-indicator>
</card-container>
@ -49,7 +58,9 @@ const common_styles_update = (val: Object) => {
};
</script>
<style lang="scss" scoped>
.auxiliary-line {
width: 100%;
.card.mb-8 {
.el-form-item:last-child {
margin-bottom: 0;
}
}
</style>

29
src/components/model-custom/components/index.vue
View File

@ -17,7 +17,7 @@
</card-container>
<card-container class="mb-8">
<div class="mb-12">内容设置</div>
<slider v-model="center_height" :max="10000">组件高度</slider>
<slider v-model="center_height" :max="3000">组件高度</slider>
</card-container>
<card-container class="h selected">
<div class="mb-12">已选组件</div>
@ -25,7 +25,7 @@
<div v-if="!isEmpty(diy_data)" class="flex-row flex-wrap gap-10">
<div v-for="(item, index) in diy_data" :key="index" class="item flex jc-sb align-c size-14 cr-3" :class="{ 'item-active': item.show_tabs }" @click="on_choose(index, item.show_tabs)">{{ item.name }}<icon name="close" color="3" size="10" class="c-pointer" @click="del(index)"></icon></div>
</div>
<NoData v-else :imgWidth="10"></NoData>
<NoData v-else :img-width="10"></NoData>
</div>
</card-container>
</div>
@ -85,6 +85,9 @@ const components = reactive([
key: 'text',
name: '文本',
com_data: {
com_width: 150,
com_height: 17,
staging_height: 17,
text_title: '文本',
data_source_id: '',
data_source_list: {},
@ -113,8 +116,6 @@ const components = reactive([
radius_bottom_right: 0,
},
border_size: 1,
com_width: 150,
com_height: 17,
com_bg: '',
bottom_up: true,
},
@ -123,8 +124,9 @@ const components = reactive([
key: 'img',
name: '图片',
com_data: {
com_width: 52,
com_height: 52,
com_width: 50,
com_height: 50,
staging_height: 50,
img_src: [],
data_source_id: '',
data_source_list: {},
@ -139,7 +141,7 @@ const components = reactive([
img_width: 50,
img_height: 50,
img_rotate: 0,
border_show: true,
border_show: false,
border_color: '#FF3F3F',
border_style: 'dashed',
border_radius: {
@ -159,6 +161,7 @@ const components = reactive([
com_data: {
com_width: 306,
com_height: 11,
staging_height: 11,
line_settings: 'horizontal',
line_style: 'solid',
line_width: 306,
@ -260,6 +263,10 @@ watch(() => center_height.value, () => {
y: item.location.staging_y,
staging_y: item.location.staging_y,
},
com_data: {
...item.com_data,
com_height: item.com_data.staging_height,
}
}));
});
},{ immediate: true, deep: true });
@ -377,10 +384,7 @@ defineExpose({
overflow: hidden;
:deep(.el-collapse) {
border: 0;
.el-collapse-item__wrap {
border: 0;
}
.el-collapse-item__header {
.el-collapse-item__wrap, .el-collapse-item__header {
border: 0;
}
.el-collapse-item__content {
@ -435,9 +439,6 @@ defineExpose({
}
}
}
:deep(.vdr-container.active) {
border: 0;
}
:deep(.plug-in-show-tabs.vdr-container) {
.vdr-handle.vdr-handle-tl,
.vdr-handle.vdr-handle-tr,

2
src/components/model-custom/index.vue
View File

@ -1,7 +1,7 @@
<template>
<div ref="container" class="custom-other" :style="style_container">
<div class="w h re">
<div v-for="item in form.custom_list" :key="item.id" class="main-content" :style="{'left': percentage_count(item.location.x, div_width) , 'top': percentage_count(item.location.y, form.height), 'width': percentage_count(item.com_data.com_width, form.height), 'height': percentage_count(item.com_data.com_height, form.height)}">
<div v-for="item in form.custom_list" :key="item.id" class="main-content" :style="{'left': percentage_count(item.location.x, div_width) , 'top': percentage_count(item.location.y, form.height), 'width': percentage_count(item.com_data.com_width, div_width), 'height': percentage_count(item.com_data.com_height, form.height)}">
<template v-if="item.key == 'text'">
<model-text :key="item.com_data" :value="item.com_data" :is-percentage="true"></model-text>
</template>

2
src/components/model-custom/model-custom-content.vue
View File

@ -26,7 +26,7 @@
<model-lines-style :key="key" v-model:height="center_height" :value="diy_data"></model-lines-style>
</template>
<template v-else>
<NoData :imgWidth="10"></NoData>
<NoData :img-width="10"></NoData>
</template>
</div>
</div>

101
src/components/model-data-magic/components/tabs-content.vue Normal file
View File

@ -0,0 +1,101 @@
<template>
<card-container class="mb-8">
<el-form-item label="数据类型">
<el-radio-group v-model="form.data_type" class="ml-4">
<el-radio value="commodity">商品</el-radio>
<el-radio value="img">图片</el-radio>
</el-radio-group>
</el-form-item>
<template v-if="form.data_type === 'commodity'">
<el-form-item label="主标题">
<el-input placeholder="请输入主标题"></el-input>
</el-form-item>
<el-form-item label="副标题">
<el-input placeholder="请输入副标题"></el-input>
</el-form-item>
</template>
</card-container>
<card-container v-if="form.data_type == 'img'" class="mb-8">
<div class="mb-12">图片设置</div>
<div class="flex-col gap-20">
<div v-for="(item, index) in form.carousel_list" :key="index" class="card-background box-shadow-sm re">
<div class="flex-col align-c jc-c gap-20 w">
<div class="upload_style">
<upload v-model="item.carousel_img" :limit="1" size="100%"></upload>
</div>
<el-form-item label="图片链接" class="w mb-16">
<url-value v-model="item.carousel_link"></url-value>
</el-form-item>
</div>
<el-icon class="iconfont icon-close-o size-16 abs cr-c top-de-5 right-de-5" @click="img_remove(index)" />
</div>
</div>
<el-button class="mt-20 mb-20 w" @click="img_add">+添加</el-button>
</card-container>
<card-container v-else class="mb-8">
<div class="mb-12">商品设置</div>
<drag :data="form.product_list" :space-col="20" @remove="product_list_remove" @on-sort="product_list_sort">
<template #default="{ row }">
<upload v-model="row.new_src" :limit="1" size="40" styles="2"></upload>
<el-image :src="row.url" fit="contain" class="img">
<template #error>
<div class="bg-f5 flex-row jc-c align-c radius h w">
<icon name="error-img" size="16" color="9"></icon>
</div>
</template>
</el-image>
<div class="flex-1 flex-width">
<url-value v-model="row.href"></url-value>
</div>
</template>
</drag>
<el-button class="mtb-20 w" @click="product_list_add">+添加</el-button>
</card-container>
</template>
<script setup lang="ts">
import { get_math } from '@/utils';
const props = defineProps({
value: {
type: Object,
default: () => {},
},
});
const state = reactive({
form: props.value
});
const { form } = toRefs(state);
const img_add = () => {
form.value.carousel_list.push({
carousel_img: [],
carousel_link: {},
});
}
const img_remove = (index: number) => {
form.value.carousel_list.splice(index, 1);
}
const product_list_remove = (index: number) => {
form.value.product_list.splice(index, 1);
};
const product_list_add = () => {
form.value.product_list.push({
id: get_math(),
src: 'carousel',
new_src: [],
href: {},
});
};
// 拖拽更新之后，更新数据
const product_list_sort = (new_list: any) => {
form.value.product_list = new_list;
}
</script>
<style lang="scss" scoped>
.card.mb-8 {
.el-form-item:last-child {
margin-bottom: 0;
}
}
</style>

79
src/components/model-data-magic/components/tabs-styles.vue Normal file
View File

@ -0,0 +1,79 @@
<template>
<card-container class="mb-8">
<el-form-item label="底部背景">
<div class="flex-col gap-10 w">
<div class="size-12">背景色</div>
<mult-color-picker :value="form.color_list" :type="form.direction" @update:value="mult_color_picker_event"></mult-color-picker>
<div class="flex-row jc-sb align-c">
<div class="size-12">背景图</div>
<el-radio-group v-model="form.background_img_style" is-button>
<el-tooltip content="单张" placement="top" effect="light">
<el-radio-button value="0"><icon name="single-sheet"></icon></el-radio-button>
</el-tooltip>
<el-tooltip content="平铺" placement="top" effect="light">
<el-radio-button value="1"><icon name="tile"></icon></el-radio-button>
</el-tooltip>
<el-tooltip content="铺满" placement="top" effect="light">
<el-radio-button value="2"><icon name="spread-over"></icon></el-radio-button>
</el-tooltip>
</el-radio-group>
</div>
<upload v-model="form.background_img_url" :limit="1"></upload>
</div>
</el-form-item>
<el-form-item label="自动轮播">
<el-switch v-model="form.is_roll" size="large" />
</el-form-item>
<el-form-item label="轮播方向">
<el-radio-group v-model="form.rotation_direction" class="ml-4">
<el-radio value="horizontal">横向</el-radio>
<el-radio value="vertical">纵向</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="间隔时间">
<slider v-model="form.interval_time" :max="100"></slider>
</el-form-item>
<el-form-item label="主标题">
<div class="flex-col gap-10 w">
<color-picker v-model="form.heading_color" default-color="#000000"></color-picker>
<text-size-type v-model:typeface="form.heading_typeface" v-model:size="form.heading_size"></text-size-type>
</div>
</el-form-item>
<el-form-item label="副标题">
<div class="flex-col gap-10 w">
<color-picker v-model="form.subtitle_color" default-color="#000000"></color-picker>
<text-size-type v-model:typeface="form.subtitle_typeface" v-model:size="form.subtitle_size"></text-size-type>
</div>
</el-form-item>
</card-container>
<card-container class="mb-8">
<carousel-indicator :value="form"></carousel-indicator>
</card-container>
</template>
<script setup lang="ts">
const props = defineProps({
value: {
type: Object,
default: () => ({}),
}
});
// 默认值
const state = reactive({
form: props.value
});
// 如果需要解构，确保使用toRefs
const { form } = toRefs(state);
const mult_color_picker_event = (arry: string[], type: number) => {
form.value.user_id_color_list = arry;
form.value.user_id_direction = type.toString();
};
</script>
<style lang="scss" scoped>
.card.mb-8 {
.el-form-item:last-child {
margin-bottom: 0;
}
}
</style>

150
src/components/model-data-magic/index.vue Normal file
View File

@ -0,0 +1,150 @@
<template>
<div ref="container" class="img-magic" :style="style_container">
<div class="w h re outer-style">
<!-- 风格9 -->
<template v-if="form.style_actived == 8">
<div class="flex-row align-c jc-c style-size flex-wrap">
<div v-for="(item, index) in form.data_magic_list" :key="index" :class="['img-spacing-border', { 'style9-top': [0, 1].includes(index), 'style9-bottom': ![0, 1].includes(index) }]">
<image-empty v-model="item.img[0]" :style="content_img_radius"></image-empty>
</div>
</div>
</template>
<template v-else>
<div v-for="(item, index) in form.data_magic_list" :key="index" class="cube-selected img-spacing-border" :style="selected_style(item)">
<image-empty v-model="item.img[0]" :style="content_img_radius"></image-empty>
</div>
</template>
</div>
</div>
</template>
<script setup lang="ts">
import { common_styles_computer, radius_computer } from '@/utils';
const props = defineProps({
value: {
type: Object,
default: () => {
return {};
},
},
});
// 用于页面判断显示
const state = reactive({
form: props.value.content,
new_style: props.value.style,
});
// 如果需要解构，确保使用toRefs
const { form, new_style } = toRefs(state);
const outer_spacing = computed(() => new_style.value.image_spacing + 'px');
const outer_sx = computed(() => -(new_style.value.image_spacing / 2) + 'px');
// 图片间距设置
const spacing = computed(() => new_style.value.image_spacing / 2 + 'px');
// 图片圆角设置
const content_img_radius = computed(() => radius_computer(new_style.value));
//#region 容器大小计算
const div_width = ref(0);
const container_size = computed(() => div_width.value + 'px');
const container = ref<HTMLElement | null>(null);
onMounted(() => {
if (container.value) {
div_width.value = container.value.clientWidth;
}
});
//#endregion
//#region 图片位置计算
//计算选中层的宽度。
interface CubeItem {
start: {
x: number;
y: number;
};
end: {
x: number;
y: number;
};
img: string;
}
const density = ref('4');
//单元魔方宽度。
const cubeCellWidth = computed(() => div_width.value / parseInt(density.value));
//单元魔方高度。
const cubeCellHeight = computed(() => div_width.value / parseInt(density.value));
const getSelectedWidth = (item: CubeItem) => {
return (item.end.x - item.start.x + 1) * cubeCellWidth.value;
};
//计算选中层的高度。
const getSelectedHeight = (item: CubeItem) => {
return (item.end.y - item.start.y + 1) * cubeCellHeight.value;
};
//计算选中层的右边距离。
const getSelectedTop = (item: CubeItem) => {
return (item.start.y - 1) * cubeCellHeight.value;
};
//计算选中层的左边距离。
const getSelectedLeft = (item: CubeItem) => {
return (item.start.x - 1) * cubeCellWidth.value;
};
// 根据当前页面大小计算成百分比
const selected_style = (item: CubeItem) => {
return `width: ${percentage(getSelectedWidth(item))}; height: ${percentage(getSelectedHeight(item))}; top: ${percentage(getSelectedTop(item))}; left: ${percentage(getSelectedLeft(item))};`;
};
// 计算成百分比
const percentage = (num: number) => {
const marks = (num / div_width.value) * 100;
return marks.toFixed(4) + '%';
};
//#endregion
// 公共样式
const style_container = computed(() => common_styles_computer(new_style.value.common_style));
</script>
<style lang="scss" scoped>
// 图片魔方是一个正方形，根据宽度计算高度
.img-magic {
height: v-bind(container_size);
width: 100%;
overflow: hidden;
}
.cube-selected {
position: absolute;
text-align: center;
color: $cr-main;
box-sizing: border-box;
}
.outer-style {
width: calc(100% + v-bind(outer_spacing));
height: calc(100% + v-bind(outer_spacing));
margin: v-bind(outer_sx);
}
.img-spacing-border {
padding: v-bind(spacing);
}
.style-size {
height: 100%;
width: 100%;
.three {
width: 33%;
height: 100%;
position: relative;
}
.style9-top {
width: calc(50% - 0.2rem);
height: 50%;
position: relative;
}
.style9-bottom {
width: calc(33% - 0.1rem);
height: 50%;
position: relative;
}
}
:deep(.el-image) {
height: 100%;
width: 100%;
.el-image__inner {
object-fit: cover;
}
.image-slot img {
width: 6rem;
}
}
</style>

211
src/components/model-data-magic/model-data-magic-content.vue Normal file
View File

@ -0,0 +1,211 @@
<template>
<div class="auxiliary-line common-content-height">
<el-form :model="form" label-width="60">
<card-container class="mb-8">
<div class="mb-12">展示风格</div>
<el-form-item label="选择风格">
<div class="flex align-c flex-wrap gap-10">
<div v-for="(item, index) in style_list" :key="index" :class="['flex-item', {'flex-item-actived': form.style_actived === index }]" @click="style_click(index)">
<icon :name="item" :color="`${ form.style_actived === index ? '#E1EEF9' : '#EDEDED'}`" size="48"></icon>
</div>
</div>
</el-form-item>
</card-container>
<card-container class="mb-8">
<div class="mb-12">展示设置</div>
<el-form-item label-width="0" class="show-config">
<!-- 风格9 -->
<template v-if="form.style_actived == 8">
<div class="flex-row align-c jc-c gap-2 style-size flex-wrap">
<div v-for="(item, index) in form.img_magic_list" :key="index" :class="['bg-f5', {'cube-selected-active': selected_active == index, 'style9-top': [0, 1].includes(index), 'style9-bottom': ![0, 1].includes(index)}]" @click="selected_click(index)">
<template v-if="!isEmpty(item.img[0])">
<image-empty v-model="item.img[0]"></image-empty>
</template>
<template v-else>
<div class="cube-selected-text">
<template v-if="[0, 1].includes(index)">375 x 375 像素</template>
<template v-else>250 x 375 像素</template>
</div>
</template>
</div>
</div>
</template>
<template v-else>
<magic-cube :key="form.style_actived" :list="form.img_magic_list" :flag="false" :cube-width="cubeWidth" type="data" :cube-height="cubeHeight" @selected_click="selected_click"></magic-cube>
</template>
</el-form-item>
</card-container>
<el-tabs v-model="tabs_name" class="content-tabs">
<el-tab-pane label="内容设置" name="content">
<tabs-content :value="form[selected_active]"></tabs-content>
</el-tab-pane>
<el-tab-pane label="样式设置" name="styles">
<tabs-styles :value="form[selected_active].style"></tabs-styles>
</el-tab-pane>
</el-tabs>
</el-form>
</div>
</template>
<script setup lang="ts">
import { isEmpty, cloneDeep } from 'lodash';
const props = defineProps({
value: {
type: Object,
default: () => {},
},
});
const style_list = ['heng2', 'shu2', 'shang2xia1', 'shang1xia2', 'zuo1you2', 'zuo2you1', 'tianzige', 'shang2xia3', 'zuo1youshang1youxia2'];
const data_style = {
color_list: ['#FFD9C3', '#FFECE2', '#FFFFFF'],
direction: '90deg',
background_img_style: 2,
background_img_url: [],
is_roll: true,
rotation_direction: 'horizontal',
interval_time: 2,
heading_color: '#000',
heading_typeface: 'normal',
heading_size: 12,
subtitle_color: '#000',
subtitle_typeface: 'normal',
subtitle_size: 12,
is_show: true,
indicator_style: 'dot',
indicator_location: 'center',
indicator_size: 5,
indicator_radius: {
radius: 0,
radius_top_left: 0,
radius_top_right: 0,
radius_bottom_left: 0,
radius_bottom_right: 0,
},
actived_color: '#2A94FF',
color: '#DDDDDD',
}
// 风格
const style_show_list = [
[{ start: {x: 1, y: 1}, end: {x: 4, y: 2}, commodity_list:[], img_list:[] }, { start: {x: 1, y: 3},end: {x: 4, y: 4}, commodity_list:[], img_list:[] }], // 风格1
[{ start: {x: 1, y: 1}, end: {x: 2, y: 4}, commodity_list:[], img_list:[] }, { start: {x: 3, y: 1},end: {x: 4, y: 4}, commodity_list:[], img_list:[] }], // 风格2
[{ start: {x: 1, y: 1}, end: {x: 2, y: 2}, commodity_list:[], img_list:[] }, { start: {x: 3, y: 1},end: {x: 4, y: 2}, commodity_list:[], img_list:[] }, { start: {x: 1, y: 3},end: {x: 4, y: 4}, commodity_list:[], img_list:[] }],// 风格3
[{ start: {x: 1, y: 1}, end: {x: 4, y: 2}, commodity_list:[], img_list:[] }, { start: {x: 1, y: 3},end: {x: 2, y: 4}, commodity_list:[], img_list:[] }, { start: {x: 3, y: 3},end: {x: 4, y: 4}, commodity_list:[], img_list:[] }],// 风格4
[{ start: {x: 1, y: 1}, end: {x: 2, y: 4}, commodity_list:[], img_list:[] }, { start: {x: 3, y: 1},end: {x: 4, y: 2}, commodity_list:[], img_list:[] }, { start: {x: 3, y: 3},end: {x: 4, y: 4}, commodity_list:[], img_list:[] }],// 风格5
[{ start: {x: 1, y: 1}, end: {x: 2, y: 2}, commodity_list:[], img_list:[] }, { start: {x: 1, y: 3},end: {x: 2, y: 4}, commodity_list:[], img_list:[] }, { start: {x: 3, y: 1},end: {x: 4, y: 4}, commodity_list:[], img_list:[] }],// 风格6
[{ start: {x: 1, y: 1}, end: {x: 2, y: 2}, commodity_list:[], img_list:[] }, { start: {x: 3, y: 1},end: {x: 4, y: 2}, commodity_list:[], img_list:[] }, { start: {x: 1, y: 3},end: {x: 2, y: 4}, commodity_list:[], img_list:[] }, { start: {x: 3, y: 3},end: {x: 4, y: 4}, commodity_list:[], img_list:[] }],// 风格7
[{ start: {x: 1, y: 1}, end: {x: 2, y: 4}, commodity_list:[], img_list:[] }, { start: {x: 3, y: 1},end: {x: 4, y: 2}, commodity_list:[], img_list:[] }, { start: {x: 3, y: 3},end: {x: 3, y: 4}, commodity_list:[], img_list:[] }, { start: {x: 4, y: 3},end: {x: 4, y: 4}, commodity_list:[], img_list:[] }, { start: {x: 4, y: 3},end: {x: 4, y: 4}, commodity_list:[], img_list:[] }],// 风格8
[{ start: {x: 1, y: 1}, end: {x: 2, y: 4}, commodity_list:[], img_list:[] }, { start: {x: 3, y: 1},end: {x: 4, y: 2}, commodity_list:[], img_list:[] }, { start: {x: 3, y: 3},end: {x: 3, y: 4}, commodity_list:[], img_list:[] }, { start: {x: 4, y: 3},end: {x: 4, y: 4}, commodity_list:[], img_list:[] }],// 风格9
]
const tabs_name = ref('content');
//#region 容器大小变更
const cubeWidth = ref(400);
const cubeHeight = ref(400);
const style_width = computed(() => cubeWidth.value + 'px');
const style_height = computed(() => cubeHeight.value + 'px');
function handleResize() {
if (window.innerWidth <= 1540) {
cubeWidth.value = 330;
cubeHeight.value = 330;
} else {
cubeWidth.value = 390;
cubeHeight.value = 390;
}
}
onMounted(() => {
handleResize();
window.addEventListener('resize', handleResize);
});
onUnmounted(() => {
window.removeEventListener('resize', handleResize);
});
//#endregion
const selected_active = ref(0);
const state = reactive({
form: props.value
});
const { form } = toRefs(state);
const style_click = (index: number) => {
form.value.img_magic_list = cloneDeep(style_show_list[index]);
form.value.style_actived = index;
selected_active.value = 0;
}
// 选中的点击事件
const selected_click = (index: number) => {
selected_active.value = index;
}
</script>
<style lang="scss" scoped>
.card.mb-8 {
.el-form-item:last-child {
margin-bottom: 0;
}
}
.flex-item {
width: 7.6rem;
height: 7.6rem;
background: #F7F7F7;
border-radius: 0.4rem;
border: 1px solid #E4E4E4;
padding: 1.4rem;
display: flex;
align-items: center;
justify-content: center;
}
.flex-item-actived {
background: #F5F9FF;
border-radius: 4px;
border: 1px solid #2A94FF;
}
.show-config {
:deep(.el-form-item__content) {
justify-content: center;
}
}
.style-size {
width: v-bind(style_width);
height: v-bind(style_height);
.style9-top {
width: calc(50% - 0.2rem);
height: 50%;
position: relative;
}
.style9-bottom {
width: calc(33% - 0.1rem);
height: 50%;
position: relative;
}
}
.cube-selected-active {
border: 1px solid $cr-primary;
}
.cube-selected-text {
font-size: 12px;
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
text-align: center;
color: $cr-primary;
}
:deep(.el-tabs.content-tabs) {
.el-tabs__header.is-top {
background: #fff;
margin: 0;
padding-top: 2rem;
}
.el-tabs__item.is-top {
padding: 0;
align-items: center;
width: 10rem;
font-size: 1.4rem;
}
.el-tabs__active-bar{
width: 100%;
}
}
</style>

23
src/components/model-data-magic/model-data-magic-setting.vue Normal file
View File

@ -0,0 +1,23 @@
<template>
<div class="w">
<template v-if="type == '1'">
<model-data-magic-content :value="value.content"></model-data-magic-content>
</template>
<template v-if="type == '2'">
<model-data-magic-styles :value="value.style"></model-data-magic-styles>
</template>
</div>
</template>
<script setup lang="ts">
const props = defineProps({
type: {
type: String,
default: '1',
},
value: {
type: Object,
default: () => ({}),
},
});
</script>
<style lang="scss" scoped></style>

72
src/components/model-data-magic/model-data-magic-styles.vue Normal file
View File

@ -0,0 +1,72 @@
<template>
<div class="w">
<el-form :model="form" label-width="70">
<card-container class="mb-8">
<div class="mb-12">图片魔方</div>
<el-form-item label="图片间距">
<slider v-model="form.image_spacing" :max="100"></slider>
</el-form-item>
<el-form-item label="数据圆角">
<radius :value="form.data_radius" @update:value="data_radius_change"></radius>
</el-form-item>
<el-form-item label="图片圆角">
<radius :value="form.img_radius" @update:value="img_radius_change"></radius>
</el-form-item>
</card-container>
</el-form>
<common-styles :value="form.common_style" @update:value="common_style_update" />
</div>
</template>
<script setup lang="ts">
import { pick } from 'lodash';
const props = defineProps({
value: {
type: Object,
default: () => ({}),
}
});
// 默认值
const state = reactive({
form: props.value
});
// 如果需要解构，确保使用toRefs
const { form } = toRefs(state);
const common_style_update = (value: any) => {
form.value.common_style = value;
};
// 内容圆角
const img_radius_change = (radius: any) => {
form.value.img_radius = Object.assign(form.value.img_radius, pick(radius, [
'radius',
'radius_top_left',
'radius_top_right',
'radius_bottom_left',
'radius_bottom_right',
]));
}
// 内容圆角
const data_radius_change = (radius: any) => {
form.value.data_radius = Object.assign(form.value.data_radius, pick(radius, [
'radius',
'radius_top_left',
'radius_top_right',
'radius_bottom_left',
'radius_bottom_right',
]));
}
</script>
<style lang="scss" scoped>
.topic {
:deep(.el-form-item__content) {
align-items: flex-start;
flex-direction: column;
}
}
.card.mb-8 {
.el-form-item:last-child {
margin-bottom: 0;
}
}
</style>

2
src/components/model-img-magic/model-img-magic-content.vue
View File

@ -44,7 +44,7 @@
</div>
</template>
<template v-else>
<picture-cube :key="form.style_actived" :list="form.img_magic_list" :flag="form.style_actived == 11" :cube-width="cubeWidth" :cube-height="cubeHeight" @selected_click="selected_click"></picture-cube>
<magic-cube :key="form.style_actived" :list="form.img_magic_list" :flag="form.style_actived == 11" :cube-width="cubeWidth" :cube-height="cubeHeight" @selected_click="selected_click"></magic-cube>
</template>
</el-form-item>
</card-container>

23
src/components/model-nav-group/model-nav-group-styles.vue
View File

@ -7,9 +7,20 @@
<radius :value="form" @update:value="radius_change"></radius>
</el-form-item>
</card-container>
<card-container v-if="display_style_show" class="mb-8">
<carousel-indicator :value="form"></carousel-indicator>
</card-container>
<template v-if="display_style_show">
<card-container class="mb-8">
<div class="mb-12">轮播设置</div>
<el-form-item label="自动轮播">
<el-switch v-model="form.is_roll" size="large" />
</el-form-item>
<el-form-item label="间隔时间">
<slider v-model="form.interval_time" :max="100"></slider>
</el-form-item>
</card-container>
<card-container class="mb-8">
<carousel-indicator :value="form"></carousel-indicator>
</card-container>
</template>
<card-container class="mb-8">
<div class="mb-12">标题样式</div>
<el-form-item label="标题颜色">
@ -90,7 +101,9 @@ const display_style_show = computed(() => {
});
</script>
<style lang="scss" scoped>
.auxiliary-line {
width: 100%;
.card.mb-8 {
.el-form-item:last-child {
margin-bottom: 0;
}
}
</style>

14
src/components/model-search/index.vue
View File

@ -14,6 +14,9 @@
</template>
</div>
</template>
<template v-else-if="form.style_radio == 'search' && form.style_type == 'logo' && form.logo.length > 0">
<image-empty v-model="form.logo[0]" class="search-image mr-10"></image-empty>
</template>
<el-input :placeholder="get_placeholder()" :style="{ borderColor: 'red' }" :readonly="true">
<template v-if="text_location == 'right'" #suffix>
<el-icon class="iconfont icon-search" />
@ -57,7 +60,7 @@ const style = computed(() => {
});
const style_container = computed(() => common_styles_computer(new_style.value.common_style));
// 输入框颜色
const border_color = computed(() => new_style.value.search_border);
const search_border = computed(() => new_style.value.search_border);
// 提示语颜色
const placeholder_color = computed(() => new_style.value.tips_color || '#CCCCCC');
// 定位位置
@ -78,7 +81,9 @@ const get_placeholder = () => {
:deep(.el-input) {
& .el-input__wrapper {
border-radius: 16px !important;
border: 1px solid v-bind(border_color);
border: 0;
box-shadow: none;
background: v-bind(search_border);
}
& .el-input__inner::placeholder,
& .el-input__prefix-inner {
@ -89,7 +94,10 @@ const get_placeholder = () => {
.set-text-size {
font-size: v-bind(text_size);
}
.search-image {
width: 5rem;
height: 3rem;
}
.nowrap {
text-wrap: nowrap;
}

2
src/components/model-search/model-search-content.vue
View File

@ -35,7 +35,7 @@
</template>
<template v-if="form.style_radio == 'search' && form.style_type == 'logo'">
<el-form-item label="logo图">
<upload></upload>
<upload v-model="form.logo" :limit="1" size="60"></upload>
</el-form-item>
</template>
</card-container>

4
src/components/model-shop-list/model-shop-list-content.vue
View File

@ -29,7 +29,9 @@
</div>
</template>
</el-image>
<url-value v-model="row.href"></url-value>
<div class="flex-1 flex-width">
<url-value v-model="row.href"></url-value>
</div>
</template>
</drag>
<el-button class="mtb-20 w" @click="add">+添加</el-button>

18
src/components/model-shop-tabs/model-shop-tabs-content.vue
View File

@ -28,7 +28,7 @@
</el-form-item>
<template v-if="active_index == index">
<el-form-item label="上传图片">
<upload></upload>
<upload v-model="row.img" :limit="1" size="40" styles="2"></upload>
</el-form-item>
<el-form-item label="简介配置">
<el-input v-model="row.desc" placeholder="请输入简介" clearable />
@ -43,14 +43,14 @@
<drag :data="row.product_list" :space-col="20" @remove="product_list_remove($event, index)" @on-sort="product_list_sort($event, index)">
<template #default="scoped">
<upload v-model="scoped.row.new_src" :limit="1" size="40" styles="2"></upload>
<el-image :src="scoped.row.url" fit="contain" class="img">
<template #error>
<div class="bg-f5 flex-row jc-c align-c radius h w">
<icon name="error-img" size="16" color="9"></icon>
</div>
</template>
</el-image>
<url-value v-model="scoped.row.href"></url-value>
<el-image :src="scoped.row.url" fit="contain" class="img">
<template #error>
<div class="bg-f5 flex-row jc-c align-c radius h w">
<icon name="error-img" size="16" color="9"></icon>
</div>
</template>
</el-image>
<url-value v-model="scoped.row.href"></url-value>
</template>
</drag>
<el-button class="mtb-20 w" @click="product_add(index)">+添加</el-button>

6
src/layout/components/main/default/custom.ts
View File

@ -1,3 +1,4 @@
import { de } from "element-plus/es/locale";
import defaultCommon from "./index";
interface defaultSearch {
@ -17,7 +18,10 @@ const defaultSearch: defaultSearch = {
custom_list: []
},
style: {
common_style: defaultCommon
common_style: {
...defaultCommon,
color_list: ['rgb(244, 252, 255)'],
}
},
};

50
src/layout/components/main/default/data-magic.ts Normal file
View File

@ -0,0 +1,50 @@
import { get_math } from "@/utils";
import defaultCommon from "./index";
import { tr } from "element-plus/es/locale";
interface data_magic {
start: object;
end: object;
data_type: string;
commodity_list: Array<string>,
img_list: Array<string>;
data_style: object;
}
interface defaultSearch {
content: {
style_actived: number;
data_magic_list: data_magic[];
};
style: {
img_radius: object
data_radius: object;
image_spacing: number;
common_style: object;
};
}
const defaultSearch: defaultSearch = {
content: {
style_actived: 0,
data_magic_list: [],
},
style: {
img_radius: {
radius: 0,
radius_top_left: 0,
radius_top_right: 0,
radius_bottom_left: 0,
radius_bottom_right: 0,
},
data_radius: {
radius: 0,
radius_top_left: 0,
radius_top_right: 0,
radius_bottom_left: 0,
radius_bottom_right: 0,
},
image_spacing: 2,
common_style: defaultCommon,
},
};
export default defaultSearch;

5
src/layout/components/main/default/search.ts
View File

@ -9,7 +9,7 @@ interface defaultSearch {
content: {
style_radio: string;
style_type: string;
logo: string;
logo: uploadList[];
search_title: string;
search_link: object;
location: string;
@ -31,7 +31,7 @@ const defaultSearch: defaultSearch = {
content: {
style_radio: 'search',
style_type: 'title',
logo: '',
logo: [],
search_title: '',
search_link: {},
location: 'store',
@ -54,6 +54,7 @@ const defaultSearch: defaultSearch = {
text_size: 15,
common_style: {
...defaultCommon,
color_list: ['#ffffff'],
padding_top: 9,
padding_bottom: 9,
padding_left: 15,

4
src/layout/components/main/index.ts
View File

@ -19,6 +19,8 @@ import defaultShopTabs from './default/shop-tabs';
import defaultImgMagic from './default/img-magic';
import defaultHotZone from './default/hot-zone';
import defaultCustom from './default/custom';
import defaultDataMagic from './default/data-magic';
import { de } from 'element-plus/es/locale';
// 系统设置
interface DefaultSettings {
header_nav: object;
@ -40,6 +42,7 @@ interface DefaultSettings {
shop_list: object;
shop_tabs: object;
img_magic: object;
data_magic: object;
hot_zone: object;
custom: object;
}
@ -64,6 +67,7 @@ const defaultSettings: DefaultSettings = {
shop_list: defaultProductList,
shop_tabs: defaultShopTabs,
img_magic: defaultImgMagic,
data_magic: defaultDataMagic,
hot_zone: defaultHotZone,
custom: defaultCustom,
};

6
src/layout/components/main/index.vue
View File

@ -92,6 +92,10 @@
<template v-else-if="item.key == 'img-magic'">
<model-img-magic :key="item.com_data" :value="item.com_data" :show-tabs="item.show_tabs"></model-img-magic>
</template>
<!-- 数据魔方 -->
<template v-else-if="item.key == 'data-magic'">
<model-data-magic :key="item.com_data" :value="item.com_data" :show-tabs="item.show_tabs"></model-data-magic>
</template>
<!-- 热区 -->
<template v-else-if="item.key == 'hot-zone'">
<model-hot-zone :key="item.com_data" :value="item.com_data"></model-hot-zone>
@ -100,7 +104,6 @@
<template v-else-if="item.key == 'custom'">
<model-custom :key="item.com_data" :value="item.com_data" :show-tabs="item.show_tabs"></model-custom>
</template>
<!-- 工具组件 -->
<!-- 辅助线 -->
<template v-else-if="item.key == 'row-line'">
@ -205,6 +208,7 @@ const components = reactive([
{ key: 'article-tabs', name: '文章选项卡' },
{ key: 'hot-zone', name: '热区' },
{ key: 'custom', name: '自定义' },
{ key: 'data-magic', name: '数据魔方' },
],
},
{

4
src/layout/components/settings/index.vue
View File

@ -63,6 +63,10 @@
<template v-else-if="value.key == 'img-magic'">
<model-img-magic-setting :type="radio" :value="value.com_data"></model-img-magic-setting>
</template>
<!-- 图片魔方 -->
<template v-else-if="value.key == 'data-magic'">
<model-data-magic-setting :type="radio" :value="value.com_data"></model-data-magic-setting>
</template>
<!-- 热区 -->
<template v-else-if="value.key == 'hot-zone'">
<model-hot-zone-setting :type="radio" :value="value.com_data"></model-hot-zone-setting>

279
src/types/auto-imports.d.ts vendored
View File

@ -568,3 +568,282 @@ declare module 'vue' {
readonly whenever: UnwrapRef<typeof import('@vueuse/core')['whenever']>
}
}
declare module '@vue/runtime-core' {
interface ComponentCustomProperties {
readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
readonly ElMessage: UnwrapRef<typeof import('element-plus/es')['ElMessage']>
readonly ElMessageBox: UnwrapRef<typeof import('element-plus/es')['ElMessageBox']>
readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']>
readonly computed: UnwrapRef<typeof import('vue')['computed']>
readonly computedAsync: UnwrapRef<typeof import('@vueuse/core')['computedAsync']>
readonly computedEager: UnwrapRef<typeof import('@vueuse/core')['computedEager']>
readonly computedInject: UnwrapRef<typeof import('@vueuse/core')['computedInject']>
readonly computedWithControl: UnwrapRef<typeof import('@vueuse/core')['computedWithControl']>
readonly controlledComputed: UnwrapRef<typeof import('@vueuse/core')['controlledComputed']>
readonly controlledRef: UnwrapRef<typeof import('@vueuse/core')['controlledRef']>
readonly createApp: UnwrapRef<typeof import('vue')['createApp']>
readonly createEventHook: UnwrapRef<typeof import('@vueuse/core')['createEventHook']>
readonly createGlobalState: UnwrapRef<typeof import('@vueuse/core')['createGlobalState']>
readonly createInjectionState: UnwrapRef<typeof import('@vueuse/core')['createInjectionState']>
readonly createReactiveFn: UnwrapRef<typeof import('@vueuse/core')['createReactiveFn']>
readonly createReusableTemplate: UnwrapRef<typeof import('@vueuse/core')['createReusableTemplate']>
readonly createSharedComposable: UnwrapRef<typeof import('@vueuse/core')['createSharedComposable']>
readonly createTemplatePromise: UnwrapRef<typeof import('@vueuse/core')['createTemplatePromise']>
readonly createUnrefFn: UnwrapRef<typeof import('@vueuse/core')['createUnrefFn']>
readonly customRef: UnwrapRef<typeof import('vue')['customRef']>
readonly debouncedRef: UnwrapRef<typeof import('@vueuse/core')['debouncedRef']>
readonly debouncedWatch: UnwrapRef<typeof import('@vueuse/core')['debouncedWatch']>
readonly defineAsyncComponent: UnwrapRef<typeof import('vue')['defineAsyncComponent']>
readonly defineComponent: UnwrapRef<typeof import('vue')['defineComponent']>
readonly eagerComputed: UnwrapRef<typeof import('@vueuse/core')['eagerComputed']>
readonly effectScope: UnwrapRef<typeof import('vue')['effectScope']>
readonly extendRef: UnwrapRef<typeof import('@vueuse/core')['extendRef']>
readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']>
readonly getCurrentScope: UnwrapRef<typeof import('vue')['getCurrentScope']>
readonly h: UnwrapRef<typeof import('vue')['h']>
readonly ignorableWatch: UnwrapRef<typeof import('@vueuse/core')['ignorableWatch']>
readonly inject: UnwrapRef<typeof import('vue')['inject']>
readonly injectLocal: UnwrapRef<typeof import('@vueuse/core')['injectLocal']>
readonly isDefined: UnwrapRef<typeof import('@vueuse/core')['isDefined']>
readonly isProxy: UnwrapRef<typeof import('vue')['isProxy']>
readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']>
readonly isReadonly: UnwrapRef<typeof import('vue')['isReadonly']>
readonly isRef: UnwrapRef<typeof import('vue')['isRef']>
readonly makeDestructurable: UnwrapRef<typeof import('@vueuse/core')['makeDestructurable']>
readonly markRaw: UnwrapRef<typeof import('vue')['markRaw']>
readonly nextTick: UnwrapRef<typeof import('vue')['nextTick']>
readonly onActivated: UnwrapRef<typeof import('vue')['onActivated']>
readonly onBeforeMount: UnwrapRef<typeof import('vue')['onBeforeMount']>
readonly onBeforeUnmount: UnwrapRef<typeof import('vue')['onBeforeUnmount']>
readonly onBeforeUpdate: UnwrapRef<typeof import('vue')['onBeforeUpdate']>
readonly onClickOutside: UnwrapRef<typeof import('@vueuse/core')['onClickOutside']>
readonly onDeactivated: UnwrapRef<typeof import('vue')['onDeactivated']>
readonly onErrorCaptured: UnwrapRef<typeof import('vue')['onErrorCaptured']>
readonly onKeyStroke: UnwrapRef<typeof import('@vueuse/core')['onKeyStroke']>
readonly onLongPress: UnwrapRef<typeof import('@vueuse/core')['onLongPress']>
readonly onMounted: UnwrapRef<typeof import('vue')['onMounted']>
readonly onRenderTracked: UnwrapRef<typeof import('vue')['onRenderTracked']>
readonly onRenderTriggered: UnwrapRef<typeof import('vue')['onRenderTriggered']>
readonly onScopeDispose: UnwrapRef<typeof import('vue')['onScopeDispose']>
readonly onServerPrefetch: UnwrapRef<typeof import('vue')['onServerPrefetch']>
readonly onStartTyping: UnwrapRef<typeof import('@vueuse/core')['onStartTyping']>
readonly onUnmounted: UnwrapRef<typeof import('vue')['onUnmounted']>
readonly onUpdated: UnwrapRef<typeof import('vue')['onUpdated']>
readonly pausableWatch: UnwrapRef<typeof import('@vueuse/core')['pausableWatch']>
readonly provide: UnwrapRef<typeof import('vue')['provide']>
readonly provideLocal: UnwrapRef<typeof import('@vueuse/core')['provideLocal']>
readonly reactify: UnwrapRef<typeof import('@vueuse/core')['reactify']>
readonly reactifyObject: UnwrapRef<typeof import('@vueuse/core')['reactifyObject']>
readonly reactive: UnwrapRef<typeof import('vue')['reactive']>
readonly reactiveComputed: UnwrapRef<typeof import('@vueuse/core')['reactiveComputed']>
readonly reactiveOmit: UnwrapRef<typeof import('@vueuse/core')['reactiveOmit']>
readonly reactivePick: UnwrapRef<typeof import('@vueuse/core')['reactivePick']>
readonly readonly: UnwrapRef<typeof import('vue')['readonly']>
readonly ref: UnwrapRef<typeof import('vue')['ref']>
readonly refAutoReset: UnwrapRef<typeof import('@vueuse/core')['refAutoReset']>
readonly refDebounced: UnwrapRef<typeof import('@vueuse/core')['refDebounced']>
readonly refDefault: UnwrapRef<typeof import('@vueuse/core')['refDefault']>
readonly refThrottled: UnwrapRef<typeof import('@vueuse/core')['refThrottled']>
readonly refWithControl: UnwrapRef<typeof import('@vueuse/core')['refWithControl']>
readonly resolveComponent: UnwrapRef<typeof import('vue')['resolveComponent']>
readonly resolveRef: UnwrapRef<typeof import('@vueuse/core')['resolveRef']>
readonly resolveUnref: UnwrapRef<typeof import('@vueuse/core')['resolveUnref']>
readonly shallowReactive: UnwrapRef<typeof import('vue')['shallowReactive']>
readonly shallowReadonly: UnwrapRef<typeof import('vue')['shallowReadonly']>
readonly shallowRef: UnwrapRef<typeof import('vue')['shallowRef']>
readonly syncRef: UnwrapRef<typeof import('@vueuse/core')['syncRef']>
readonly syncRefs: UnwrapRef<typeof import('@vueuse/core')['syncRefs']>
readonly templateRef: UnwrapRef<typeof import('@vueuse/core')['templateRef']>
readonly throttledRef: UnwrapRef<typeof import('@vueuse/core')['throttledRef']>
readonly throttledWatch: UnwrapRef<typeof import('@vueuse/core')['throttledWatch']>
readonly toRaw: UnwrapRef<typeof import('vue')['toRaw']>
readonly toReactive: UnwrapRef<typeof import('@vueuse/core')['toReactive']>
readonly toRef: UnwrapRef<typeof import('vue')['toRef']>
readonly toRefs: UnwrapRef<typeof import('vue')['toRefs']>
readonly toValue: UnwrapRef<typeof import('vue')['toValue']>
readonly triggerRef: UnwrapRef<typeof import('vue')['triggerRef']>
readonly tryOnBeforeMount: UnwrapRef<typeof import('@vueuse/core')['tryOnBeforeMount']>
readonly tryOnBeforeUnmount: UnwrapRef<typeof import('@vueuse/core')['tryOnBeforeUnmount']>
readonly tryOnMounted: UnwrapRef<typeof import('@vueuse/core')['tryOnMounted']>
readonly tryOnScopeDispose: UnwrapRef<typeof import('@vueuse/core')['tryOnScopeDispose']>
readonly tryOnUnmounted: UnwrapRef<typeof import('@vueuse/core')['tryOnUnmounted']>
readonly unref: UnwrapRef<typeof import('vue')['unref']>
readonly unrefElement: UnwrapRef<typeof import('@vueuse/core')['unrefElement']>
readonly until: UnwrapRef<typeof import('@vueuse/core')['until']>
readonly useActiveElement: UnwrapRef<typeof import('@vueuse/core')['useActiveElement']>
readonly useAnimate: UnwrapRef<typeof import('@vueuse/core')['useAnimate']>
readonly useArrayDifference: UnwrapRef<typeof import('@vueuse/core')['useArrayDifference']>
readonly useArrayEvery: UnwrapRef<typeof import('@vueuse/core')['useArrayEvery']>
readonly useArrayFilter: UnwrapRef<typeof import('@vueuse/core')['useArrayFilter']>
readonly useArrayFind: UnwrapRef<typeof import('@vueuse/core')['useArrayFind']>
readonly useArrayFindIndex: UnwrapRef<typeof import('@vueuse/core')['useArrayFindIndex']>
readonly useArrayFindLast: UnwrapRef<typeof import('@vueuse/core')['useArrayFindLast']>
readonly useArrayIncludes: UnwrapRef<typeof import('@vueuse/core')['useArrayIncludes']>
readonly useArrayJoin: UnwrapRef<typeof import('@vueuse/core')['useArrayJoin']>
readonly useArrayMap: UnwrapRef<typeof import('@vueuse/core')['useArrayMap']>
readonly useArrayReduce: UnwrapRef<typeof import('@vueuse/core')['useArrayReduce']>
readonly useArraySome: UnwrapRef<typeof import('@vueuse/core')['useArraySome']>
readonly useArrayUnique: UnwrapRef<typeof import('@vueuse/core')['useArrayUnique']>
readonly useAsyncQueue: UnwrapRef<typeof import('@vueuse/core')['useAsyncQueue']>
readonly useAsyncState: UnwrapRef<typeof import('@vueuse/core')['useAsyncState']>
readonly useAttrs: UnwrapRef<typeof import('vue')['useAttrs']>
readonly useBase64: UnwrapRef<typeof import('@vueuse/core')['useBase64']>
readonly useBattery: UnwrapRef<typeof import('@vueuse/core')['useBattery']>
readonly useBluetooth: UnwrapRef<typeof import('@vueuse/core')['useBluetooth']>
readonly useBreakpoints: UnwrapRef<typeof import('@vueuse/core')['useBreakpoints']>
readonly useBroadcastChannel: UnwrapRef<typeof import('@vueuse/core')['useBroadcastChannel']>
readonly useBrowserLocation: UnwrapRef<typeof import('@vueuse/core')['useBrowserLocation']>
readonly useCached: UnwrapRef<typeof import('@vueuse/core')['useCached']>
readonly useClipboard: UnwrapRef<typeof import('@vueuse/core')['useClipboard']>
readonly useClipboardItems: UnwrapRef<typeof import('@vueuse/core')['useClipboardItems']>
readonly useCloned: UnwrapRef<typeof import('@vueuse/core')['useCloned']>
readonly useColorMode: UnwrapRef<typeof import('@vueuse/core')['useColorMode']>
readonly useConfirmDialog: UnwrapRef<typeof import('@vueuse/core')['useConfirmDialog']>
readonly useCounter: UnwrapRef<typeof import('@vueuse/core')['useCounter']>
readonly useCssModule: UnwrapRef<typeof import('vue')['useCssModule']>
readonly useCssVar: UnwrapRef<typeof import('@vueuse/core')['useCssVar']>
readonly useCssVars: UnwrapRef<typeof import('vue')['useCssVars']>
readonly useCurrentElement: UnwrapRef<typeof import('@vueuse/core')['useCurrentElement']>
readonly useCycleList: UnwrapRef<typeof import('@vueuse/core')['useCycleList']>
readonly useDark: UnwrapRef<typeof import('@vueuse/core')['useDark']>
readonly useDateFormat: UnwrapRef<typeof import('@vueuse/core')['useDateFormat']>
readonly useDebounce: UnwrapRef<typeof import('@vueuse/core')['useDebounce']>
readonly useDebounceFn: UnwrapRef<typeof import('@vueuse/core')['useDebounceFn']>
readonly useDebouncedRefHistory: UnwrapRef<typeof import('@vueuse/core')['useDebouncedRefHistory']>
readonly useDeviceMotion: UnwrapRef<typeof import('@vueuse/core')['useDeviceMotion']>
readonly useDeviceOrientation: UnwrapRef<typeof import('@vueuse/core')['useDeviceOrientation']>
readonly useDevicePixelRatio: UnwrapRef<typeof import('@vueuse/core')['useDevicePixelRatio']>
readonly useDevicesList: UnwrapRef<typeof import('@vueuse/core')['useDevicesList']>
readonly useDisplayMedia: UnwrapRef<typeof import('@vueuse/core')['useDisplayMedia']>
readonly useDocumentVisibility: UnwrapRef<typeof import('@vueuse/core')['useDocumentVisibility']>
readonly useDraggable: UnwrapRef<typeof import('@vueuse/core')['useDraggable']>
readonly useDropZone: UnwrapRef<typeof import('@vueuse/core')['useDropZone']>
readonly useElementBounding: UnwrapRef<typeof import('@vueuse/core')['useElementBounding']>
readonly useElementByPoint: UnwrapRef<typeof import('@vueuse/core')['useElementByPoint']>
readonly useElementHover: UnwrapRef<typeof import('@vueuse/core')['useElementHover']>
readonly useElementSize: UnwrapRef<typeof import('@vueuse/core')['useElementSize']>
readonly useElementVisibility: UnwrapRef<typeof import('@vueuse/core')['useElementVisibility']>
readonly useEventBus: UnwrapRef<typeof import('@vueuse/core')['useEventBus']>
readonly useEventListener: UnwrapRef<typeof import('@vueuse/core')['useEventListener']>
readonly useEventSource: UnwrapRef<typeof import('@vueuse/core')['useEventSource']>
readonly useEyeDropper: UnwrapRef<typeof import('@vueuse/core')['useEyeDropper']>
readonly useFavicon: UnwrapRef<typeof import('@vueuse/core')['useFavicon']>
readonly useFetch: UnwrapRef<typeof import('@vueuse/core')['useFetch']>
readonly useFileDialog: UnwrapRef<typeof import('@vueuse/core')['useFileDialog']>
readonly useFileSystemAccess: UnwrapRef<typeof import('@vueuse/core')['useFileSystemAccess']>
readonly useFocus: UnwrapRef<typeof import('@vueuse/core')['useFocus']>
readonly useFocusWithin: UnwrapRef<typeof import('@vueuse/core')['useFocusWithin']>
readonly useFps: UnwrapRef<typeof import('@vueuse/core')['useFps']>
readonly useFullscreen: UnwrapRef<typeof import('@vueuse/core')['useFullscreen']>
readonly useGamepad: UnwrapRef<typeof import('@vueuse/core')['useGamepad']>
readonly useGeolocation: UnwrapRef<typeof import('@vueuse/core')['useGeolocation']>
readonly useIdle: UnwrapRef<typeof import('@vueuse/core')['useIdle']>
readonly useImage: UnwrapRef<typeof import('@vueuse/core')['useImage']>
readonly useInfiniteScroll: UnwrapRef<typeof import('@vueuse/core')['useInfiniteScroll']>
readonly useIntersectionObserver: UnwrapRef<typeof import('@vueuse/core')['useIntersectionObserver']>
readonly useInterval: UnwrapRef<typeof import('@vueuse/core')['useInterval']>
readonly useIntervalFn: UnwrapRef<typeof import('@vueuse/core')['useIntervalFn']>
readonly useKeyModifier: UnwrapRef<typeof import('@vueuse/core')['useKeyModifier']>
readonly useLastChanged: UnwrapRef<typeof import('@vueuse/core')['useLastChanged']>
readonly useLocalStorage: UnwrapRef<typeof import('@vueuse/core')['useLocalStorage']>
readonly useMagicKeys: UnwrapRef<typeof import('@vueuse/core')['useMagicKeys']>
readonly useManualRefHistory: UnwrapRef<typeof import('@vueuse/core')['useManualRefHistory']>
readonly useMediaControls: UnwrapRef<typeof import('@vueuse/core')['useMediaControls']>
readonly useMediaQuery: UnwrapRef<typeof import('@vueuse/core')['useMediaQuery']>
readonly useMemoize: UnwrapRef<typeof import('@vueuse/core')['useMemoize']>
readonly useMemory: UnwrapRef<typeof import('@vueuse/core')['useMemory']>
readonly useMounted: UnwrapRef<typeof import('@vueuse/core')['useMounted']>
readonly useMouse: UnwrapRef<typeof import('@vueuse/core')['useMouse']>
readonly useMouseInElement: UnwrapRef<typeof import('@vueuse/core')['useMouseInElement']>
readonly useMousePressed: UnwrapRef<typeof import('@vueuse/core')['useMousePressed']>
readonly useMutationObserver: UnwrapRef<typeof import('@vueuse/core')['useMutationObserver']>
readonly useNavigatorLanguage: UnwrapRef<typeof import('@vueuse/core')['useNavigatorLanguage']>
readonly useNetwork: UnwrapRef<typeof import('@vueuse/core')['useNetwork']>
readonly useNow: UnwrapRef<typeof import('@vueuse/core')['useNow']>
readonly useObjectUrl: UnwrapRef<typeof import('@vueuse/core')['useObjectUrl']>
readonly useOffsetPagination: UnwrapRef<typeof import('@vueuse/core')['useOffsetPagination']>
readonly useOnline: UnwrapRef<typeof import('@vueuse/core')['useOnline']>
readonly usePageLeave: UnwrapRef<typeof import('@vueuse/core')['usePageLeave']>
readonly useParallax: UnwrapRef<typeof import('@vueuse/core')['useParallax']>
readonly useParentElement: UnwrapRef<typeof import('@vueuse/core')['useParentElement']>
readonly usePerformanceObserver: UnwrapRef<typeof import('@vueuse/core')['usePerformanceObserver']>
readonly usePermission: UnwrapRef<typeof import('@vueuse/core')['usePermission']>
readonly usePointer: UnwrapRef<typeof import('@vueuse/core')['usePointer']>
readonly usePointerLock: UnwrapRef<typeof import('@vueuse/core')['usePointerLock']>
readonly usePointerSwipe: UnwrapRef<typeof import('@vueuse/core')['usePointerSwipe']>
readonly usePreferredColorScheme: UnwrapRef<typeof import('@vueuse/core')['usePreferredColorScheme']>
readonly usePreferredContrast: UnwrapRef<typeof import('@vueuse/core')['usePreferredContrast']>
readonly usePreferredDark: UnwrapRef<typeof import('@vueuse/core')['usePreferredDark']>
readonly usePreferredLanguages: UnwrapRef<typeof import('@vueuse/core')['usePreferredLanguages']>
readonly usePreferredReducedMotion: UnwrapRef<typeof import('@vueuse/core')['usePreferredReducedMotion']>
readonly usePrevious: UnwrapRef<typeof import('@vueuse/core')['usePrevious']>
readonly useRafFn: UnwrapRef<typeof import('@vueuse/core')['useRafFn']>
readonly useRefHistory: UnwrapRef<typeof import('@vueuse/core')['useRefHistory']>
readonly useResizeObserver: UnwrapRef<typeof import('@vueuse/core')['useResizeObserver']>
readonly useScreenOrientation: UnwrapRef<typeof import('@vueuse/core')['useScreenOrientation']>
readonly useScreenSafeArea: UnwrapRef<typeof import('@vueuse/core')['useScreenSafeArea']>
readonly useScriptTag: UnwrapRef<typeof import('@vueuse/core')['useScriptTag']>
readonly useScroll: UnwrapRef<typeof import('@vueuse/core')['useScroll']>
readonly useScrollLock: UnwrapRef<typeof import('@vueuse/core')['useScrollLock']>
readonly useSessionStorage: UnwrapRef<typeof import('@vueuse/core')['useSessionStorage']>
readonly useShare: UnwrapRef<typeof import('@vueuse/core')['useShare']>
readonly useSlots: UnwrapRef<typeof import('vue')['useSlots']>
readonly useSorted: UnwrapRef<typeof import('@vueuse/core')['useSorted']>
readonly useSpeechRecognition: UnwrapRef<typeof import('@vueuse/core')['useSpeechRecognition']>
readonly useSpeechSynthesis: UnwrapRef<typeof import('@vueuse/core')['useSpeechSynthesis']>
readonly useStepper: UnwrapRef<typeof import('@vueuse/core')['useStepper']>
readonly useStorage: UnwrapRef<typeof import('@vueuse/core')['useStorage']>
readonly useStorageAsync: UnwrapRef<typeof import('@vueuse/core')['useStorageAsync']>
readonly useStyleTag: UnwrapRef<typeof import('@vueuse/core')['useStyleTag']>
readonly useSupported: UnwrapRef<typeof import('@vueuse/core')['useSupported']>
readonly useSwipe: UnwrapRef<typeof import('@vueuse/core')['useSwipe']>
readonly useTemplateRefsList: UnwrapRef<typeof import('@vueuse/core')['useTemplateRefsList']>
readonly useTextDirection: UnwrapRef<typeof import('@vueuse/core')['useTextDirection']>
readonly useTextSelection: UnwrapRef<typeof import('@vueuse/core')['useTextSelection']>
readonly useTextareaAutosize: UnwrapRef<typeof import('@vueuse/core')['useTextareaAutosize']>
readonly useThrottle: UnwrapRef<typeof import('@vueuse/core')['useThrottle']>
readonly useThrottleFn: UnwrapRef<typeof import('@vueuse/core')['useThrottleFn']>
readonly useThrottledRefHistory: UnwrapRef<typeof import('@vueuse/core')['useThrottledRefHistory']>
readonly useTimeAgo: UnwrapRef<typeof import('@vueuse/core')['useTimeAgo']>
readonly useTimeout: UnwrapRef<typeof import('@vueuse/core')['useTimeout']>
readonly useTimeoutFn: UnwrapRef<typeof import('@vueuse/core')['useTimeoutFn']>
readonly useTimeoutPoll: UnwrapRef<typeof import('@vueuse/core')['useTimeoutPoll']>
readonly useTimestamp: UnwrapRef<typeof import('@vueuse/core')['useTimestamp']>
readonly useTitle: UnwrapRef<typeof import('@vueuse/core')['useTitle']>
readonly useToNumber: UnwrapRef<typeof import('@vueuse/core')['useToNumber']>
readonly useToString: UnwrapRef<typeof import('@vueuse/core')['useToString']>
readonly useToggle: UnwrapRef<typeof import('@vueuse/core')['useToggle']>
readonly useTransition: UnwrapRef<typeof import('@vueuse/core')['useTransition']>
readonly useUrlSearchParams: UnwrapRef<typeof import('@vueuse/core')['useUrlSearchParams']>
readonly useUserMedia: UnwrapRef<typeof import('@vueuse/core')['useUserMedia']>
readonly useVModel: UnwrapRef<typeof import('@vueuse/core')['useVModel']>
readonly useVModels: UnwrapRef<typeof import('@vueuse/core')['useVModels']>
readonly useVibrate: UnwrapRef<typeof import('@vueuse/core')['useVibrate']>
readonly useVirtualList: UnwrapRef<typeof import('@vueuse/core')['useVirtualList']>
readonly useWakeLock: UnwrapRef<typeof import('@vueuse/core')['useWakeLock']>
readonly useWebNotification: UnwrapRef<typeof import('@vueuse/core')['useWebNotification']>
readonly useWebSocket: UnwrapRef<typeof import('@vueuse/core')['useWebSocket']>
readonly useWebWorker: UnwrapRef<typeof import('@vueuse/core')['useWebWorker']>
readonly useWebWorkerFn: UnwrapRef<typeof import('@vueuse/core')['useWebWorkerFn']>
readonly useWindowFocus: UnwrapRef<typeof import('@vueuse/core')['useWindowFocus']>
readonly useWindowScroll: UnwrapRef<typeof import('@vueuse/core')['useWindowScroll']>
readonly useWindowSize: UnwrapRef<typeof import('@vueuse/core')['useWindowSize']>
readonly watch: UnwrapRef<typeof import('vue')['watch']>
readonly watchArray: UnwrapRef<typeof import('@vueuse/core')['watchArray']>
readonly watchAtMost: UnwrapRef<typeof import('@vueuse/core')['watchAtMost']>
readonly watchDebounced: UnwrapRef<typeof import('@vueuse/core')['watchDebounced']>
readonly watchDeep: UnwrapRef<typeof import('@vueuse/core')['watchDeep']>
readonly watchEffect: UnwrapRef<typeof import('vue')['watchEffect']>
readonly watchIgnorable: UnwrapRef<typeof import('@vueuse/core')['watchIgnorable']>
readonly watchImmediate: UnwrapRef<typeof import('@vueuse/core')['watchImmediate']>
readonly watchOnce: UnwrapRef<typeof import('@vueuse/core')['watchOnce']>
readonly watchPausable: UnwrapRef<typeof import('@vueuse/core')['watchPausable']>
readonly watchPostEffect: UnwrapRef<typeof import('vue')['watchPostEffect']>
readonly watchSyncEffect: UnwrapRef<typeof import('vue')['watchSyncEffect']>
readonly watchThrottled: UnwrapRef<typeof import('@vueuse/core')['watchThrottled']>
readonly watchTriggerable: UnwrapRef<typeof import('@vueuse/core')['watchTriggerable']>
readonly watchWithFilter: UnwrapRef<typeof import('@vueuse/core')['watchWithFilter']>
readonly whenever: UnwrapRef<typeof import('@vueuse/core')['whenever']>
}
}

14
src/types/components.d.ts vendored
View File

@ -13,7 +13,9 @@ declare module 'vue' {
ColorPicker: typeof import('./../components/base/color-picker/index.vue')['default']
CommonStyles: typeof import('./../components/common/common-styles/index.vue')['default']
Components: typeof import('./../components/model-custom/components/index.vue')['default']
copy: typeof import('./../components/common/hot/index copy.vue')['default']
Content: typeof import('./../components/model-data-magic/components/content.vue')['default']
copy: typeof import('./../components/model-img-magic copy/index.vue')['default']
Cube: typeof import('./../components/common/cube/index.vue')['default']
Dialog: typeof import('./../components/model-custom/components/dialog.vue')['default']
Drag: typeof import('./../components/base/drag/index.vue')['default']
ElBadge: typeof import('element-plus/es')['ElBadge']
@ -73,8 +75,10 @@ declare module 'vue' {
LinkGoodsSearch: typeof import('./../components/common/url-value/link-goods-search.vue')['default']
LinkList: typeof import('./../components/common/url-value/link-list.vue')['default']
LinkTable: typeof import('./../components/common/url-value/link-table.vue')['default']
MagicCube: typeof import('./../components/common/magic-cube/index.vue')['default']
Main: typeof import('./../layout/components/main/index.vue')['default']
Maps: typeof import('./../components/base/maps/index.vue')['default']
'Model-': typeof import('./../components/model-/index.vue')['default']
ModelArticleList: typeof import('./../components/model-article-list/index.vue')['default']
ModelArticleListContent: typeof import('./../components/model-article-list/model-article-list-content.vue')['default']
ModelArticleListSetting: typeof import('./../components/model-article-list/model-article-list-setting.vue')['default']
@ -99,6 +103,11 @@ declare module 'vue' {
ModelCustomContent: typeof import('./../components/model-custom/model-custom-content.vue')['default']
ModelCustomSetting: typeof import('./../components/model-custom/model-custom-setting.vue')['default']
ModelCustomStyles: typeof import('./../components/model-custom/model-custom-styles.vue')['default']
ModelDataCube: typeof import('./../components/model-data-cube/index.vue')['default']
ModelDataMagic: typeof import('./../components/model-data-magic/index.vue')['default']
ModelDataMagicContent: typeof import('./../components/model-data-magic/model-data-magic-content.vue')['default']
ModelDataMagicSetting: typeof import('./../components/model-data-magic/model-data-magic-setting.vue')['default']
ModelDataMagicStyles: typeof import('./../components/model-data-magic/model-data-magic-styles.vue')['default']
ModelFloatWindow: typeof import('./../components/model-float-window/index.vue')['default']
ModelFloatWindowContent: typeof import('./../components/model-float-window/model-float-window-content.vue')['default']
ModelFloatWindowSetting: typeof import('./../components/model-float-window/model-float-window-setting.vue')['default']
@ -171,6 +180,9 @@ declare module 'vue' {
RouterView: typeof import('vue-router')['RouterView']
Settings: typeof import('./../layout/components/settings/index.vue')['default']
Slider: typeof import('./../components/base/slider/index.vue')['default']
Styles: typeof import('./../components/model-data-magic/components/styles.vue')['default']
TabsContent: typeof import('./../components/model-data-magic/components/tabs-content.vue')['default']
TabsStyles: typeof import('./../components/model-data-magic/components/tabs-styles.vue')['default']
TabsView: typeof import('./../components/common/tabs-view/index.vue')['default']
TextSizeType: typeof import('./../components/common/text-size-type/index.vue')['default']
TMap: typeof import('./../components/base/maps/t-map.vue')['default']

2
src/utils/index.ts
View File

@ -41,7 +41,7 @@ export function gradient_handle(color_list: string[], direction: string) {
reverse_color.forEach((item: any, index: number) => {
container_common_styles += `${item ? item : 'rgb(255 255 255 / 0%)'}`;
if (color_list.length == 1) {
container_common_styles += `0%, ${item} 100%`;
container_common_styles += ` 0%, ${item} 100%`;
} else {
if (index == color_list.length - 1) {
container_common_styles += ` 100%`;