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/model-data-magic/components/tabs-content.vue b/src/components/model-data-magic/components/tabs-content.vue
new file mode 100644
index 00000000..5fc1c2a5
--- /dev/null
+++ b/src/components/model-data-magic/components/tabs-content.vue
@@ -0,0 +1,99 @@
+<template>
+    <card-container class="mb-8">
+        <el-form-item label="数据类型">
+            <el-radio-group v-model="form.display_location" class="ml-4">
+                <el-radio value="img">图片</el-radio>
+                <el-radio value="commodity">商品</el-radio>
+            </el-radio-group>
+        </el-form-item>
+        <el-form-item label="主标题">
+            <el-input placeholder="请输入主标题"></el-input>
+        </el-form-item>
+        <el-form-item label="副标题">
+            <el-input placeholder="请输入副标题"></el-input>
+        </el-form-item>
+    </card-container>
+    <card-container v-if="form.display_location == '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..415b002a
--- /dev/null
+++ b/src/components/model-data-magic/components/tabs-styles.vue
@@ -0,0 +1,43 @@
+<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.user_id_color_list" :type="form.user_id_direction" @update:value="mult_color_picker_event"></mult-color-picker>
+            </div>
+        </el-form-item>
+        <el-form-item label="主标题">
+            <el-input placeholder="请输入主标题"></el-input>
+        </el-form-item>
+        <el-form-item label="副标题">
+            <el-input placeholder="请输入副标题"></el-input>
+        </el-form-item>
+    </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>