diff --git a/src/assets/images/layout/siderbar/data-magic.png b/src/assets/images/layout/siderbar/data-magic.png
new file mode 100644
index 00000000..f874169a
Binary files /dev/null and b/src/assets/images/layout/siderbar/data-magic.png differ
diff --git a/src/components/common/carousel-indicator/index.vue b/src/components/common/carousel-indicator/index.vue
index 409402c9..dae6cb41 100644
--- a/src/components/common/carousel-indicator/index.vue
+++ b/src/components/common/carousel-indicator/index.vue
@@ -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;
diff --git a/src/components/common/picture-cube/index.vue b/src/components/common/magic-cube/index.vue
similarity index 94%
rename from src/components/common/picture-cube/index.vue
rename to src/components/common/magic-cube/index.vue
index 8372a0f6..456715af 100644
--- a/src/components/common/picture-cube/index.vue
+++ b/src/components/common/magic-cube/index.vue
@@ -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 {
diff --git a/src/components/model-carousel/model-carousel-styles.vue b/src/components/model-carousel/model-carousel-styles.vue
index a5888769..35fab800 100644
--- a/src/components/model-carousel/model-carousel-styles.vue
+++ b/src/components/model-carousel/model-carousel-styles.vue
@@ -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>
diff --git a/src/components/model-custom/components/index.vue b/src/components/model-custom/components/index.vue
index 53398db1..0b2b26bc 100644
--- a/src/components/model-custom/components/index.vue
+++ b/src/components/model-custom/components/index.vue
@@ -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,
diff --git a/src/components/model-custom/index.vue b/src/components/model-custom/index.vue
index 3ca490aa..0f91856a 100644
--- a/src/components/model-custom/index.vue
+++ b/src/components/model-custom/index.vue
@@ -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>
diff --git a/src/components/model-custom/model-custom-content.vue b/src/components/model-custom/model-custom-content.vue
index 6125fad4..ebaa78ce 100644
--- a/src/components/model-custom/model-custom-content.vue
+++ b/src/components/model-custom/model-custom-content.vue
@@ -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>
diff --git a/src/components/model-data-magic/components/tabs-content.vue b/src/components/model-data-magic/components/tabs-content.vue
new file mode 100644
index 00000000..4eb9f05a
--- /dev/null
+++ b/src/components/model-data-magic/components/tabs-content.vue
@@ -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>
diff --git a/src/components/model-data-magic/components/tabs-styles.vue b/src/components/model-data-magic/components/tabs-styles.vue
new file mode 100644
index 00000000..db7a2ca6
--- /dev/null
+++ b/src/components/model-data-magic/components/tabs-styles.vue
@@ -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>
diff --git a/src/components/model-data-magic/index.vue b/src/components/model-data-magic/index.vue
new file mode 100644
index 00000000..6559ece7
--- /dev/null
+++ b/src/components/model-data-magic/index.vue
@@ -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>
diff --git a/src/components/model-data-magic/model-data-magic-content.vue b/src/components/model-data-magic/model-data-magic-content.vue
new file mode 100644
index 00000000..369a8300
--- /dev/null
+++ b/src/components/model-data-magic/model-data-magic-content.vue
@@ -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>
diff --git a/src/components/model-data-magic/model-data-magic-setting.vue b/src/components/model-data-magic/model-data-magic-setting.vue
new file mode 100644
index 00000000..6b793a4e
--- /dev/null
+++ b/src/components/model-data-magic/model-data-magic-setting.vue
@@ -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>
diff --git a/src/components/model-data-magic/model-data-magic-styles.vue b/src/components/model-data-magic/model-data-magic-styles.vue
new file mode 100644
index 00000000..cfc04e93
--- /dev/null
+++ b/src/components/model-data-magic/model-data-magic-styles.vue
@@ -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>
diff --git a/src/components/model-img-magic/model-img-magic-content.vue b/src/components/model-img-magic/model-img-magic-content.vue
index 58208204..380943dd 100644
--- a/src/components/model-img-magic/model-img-magic-content.vue
+++ b/src/components/model-img-magic/model-img-magic-content.vue
@@ -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>
diff --git a/src/components/model-nav-group/model-nav-group-styles.vue b/src/components/model-nav-group/model-nav-group-styles.vue
index c3deee81..b09e3c79 100644
--- a/src/components/model-nav-group/model-nav-group-styles.vue
+++ b/src/components/model-nav-group/model-nav-group-styles.vue
@@ -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>
diff --git a/src/components/model-search/index.vue b/src/components/model-search/index.vue
index bc4c6627..deccae6a 100644
--- a/src/components/model-search/index.vue
+++ b/src/components/model-search/index.vue
@@ -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;
 }
diff --git a/src/components/model-search/model-search-content.vue b/src/components/model-search/model-search-content.vue
index 05ed2859..b38312fb 100644
--- a/src/components/model-search/model-search-content.vue
+++ b/src/components/model-search/model-search-content.vue
@@ -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>
diff --git a/src/components/model-shop-list/model-shop-list-content.vue b/src/components/model-shop-list/model-shop-list-content.vue
index 967ce0f4..05a1483b 100644
--- a/src/components/model-shop-list/model-shop-list-content.vue
+++ b/src/components/model-shop-list/model-shop-list-content.vue
@@ -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>
diff --git a/src/components/model-shop-tabs/model-shop-tabs-content.vue b/src/components/model-shop-tabs/model-shop-tabs-content.vue
index 6c9dadc0..c3f4b836 100644
--- a/src/components/model-shop-tabs/model-shop-tabs-content.vue
+++ b/src/components/model-shop-tabs/model-shop-tabs-content.vue
@@ -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>
diff --git a/src/layout/components/main/default/custom.ts b/src/layout/components/main/default/custom.ts
index 5cfda894..29e8de7b 100644
--- a/src/layout/components/main/default/custom.ts
+++ b/src/layout/components/main/default/custom.ts
@@ -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)'],
+        }
     },
 };
 
diff --git a/src/layout/components/main/default/data-magic.ts b/src/layout/components/main/default/data-magic.ts
new file mode 100644
index 00000000..62f42eeb
--- /dev/null
+++ b/src/layout/components/main/default/data-magic.ts
@@ -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;
diff --git a/src/layout/components/main/default/search.ts b/src/layout/components/main/default/search.ts
index 0385ddfc..04c3c998 100644
--- a/src/layout/components/main/default/search.ts
+++ b/src/layout/components/main/default/search.ts
@@ -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,
diff --git a/src/layout/components/main/index.ts b/src/layout/components/main/index.ts
index 4fecbfc6..d1c1e1ac 100644
--- a/src/layout/components/main/index.ts
+++ b/src/layout/components/main/index.ts
@@ -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,
 };
diff --git a/src/layout/components/main/index.vue b/src/layout/components/main/index.vue
index 65df2e42..08a47fa5 100644
--- a/src/layout/components/main/index.vue
+++ b/src/layout/components/main/index.vue
@@ -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: '数据魔方' },
         ],
     },
     {
diff --git a/src/layout/components/settings/index.vue b/src/layout/components/settings/index.vue
index 622d86e2..331f6519 100644
--- a/src/layout/components/settings/index.vue
+++ b/src/layout/components/settings/index.vue
@@ -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>
diff --git a/src/types/auto-imports.d.ts b/src/types/auto-imports.d.ts
index 1c54e8b2..1fb544e3 100644
--- a/src/types/auto-imports.d.ts
+++ b/src/types/auto-imports.d.ts
@@ -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']>
+  }
+}
diff --git a/src/types/components.d.ts b/src/types/components.d.ts
index 0fa3dfc2..5e1b96db 100644
--- a/src/types/components.d.ts
+++ b/src/types/components.d.ts
@@ -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']
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 3cf8f035..7fda39f1 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -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%`;