diff --git a/src/components/MainView.vue b/src/components/MainView.vue
index 19071c4..41e203b 100644
--- a/src/components/MainView.vue
+++ b/src/components/MainView.vue
@@ -1,42 +1,48 @@
 <template>
   <div>
-    <div style="display: flex;flex-direction: row;">
-
-      <div ref="el2"
-        style="margin: 5%;display: flex;flex-direction: column;overflow-x:scroll;height: 350px;width: 300px;">
-        <div v-for="item in componentsList" :key="item.id" style="height: 30px;width: 300px;border: 1px solid red;">
-          {{ item.name }}:{{ item.id }}
-        </div>
-
-      </div>
-
-      <div class="flex justify-between">
-        <NestedFunction v-model="list" class="w-full"></NestedFunction>
-        {{ list }}
-      </div>
-
-    </div>
-
-    <div style="width: 800px;height:500px">
-      动态渲染
-      <!-- <component :is="componentMapping['Rate']" v-bind="{}"/> -->
-      <DynamicComponent v-for="component in list" :key="component.id" :componentData="component">
-        {{ component.id }}
-      </DynamicComponent>
-    </div>
     <div>
+      <a-layout style="height: 400px;">
+        <a-layout-header>Header</a-layout-header>
+        <a-layout>
+          <a-layout-sider style="background-color: aliceblue;">Sider</a-layout-sider>
+          <a-layout-content>
+            <div style="display: flex;flex-direction: row;">
+
+              <div ref="el2"
+                style="margin: 5%;display: flex;flex-direction: column;overflow-x:scroll;height: 350px;width: 300px;">
+                <div v-for="item in componentsList" :key="item.id"
+                  style="height: 30px;width: 300px;border: 1px solid red;">
+                  {{ item.name }}:{{ item.id }}
+                </div>
+
+              </div>
+
+              <div class="flex justify-between">
+                <NestedFunction v-model="list" class="w-full"></NestedFunction>
+                {{ list }}
+              </div>
+
+            </div>
+
+            <div style="width: 800px;height:500px">
+              动态渲染
+              <!-- <component :is="componentMapping['Rate']" v-bind="{}"/> -->
+              <DynamicComponent v-for="component in list" :key="component.id" :componentData="component">
+                {{ component.id }}
+              </DynamicComponent>
+            </div>
+            <div>
+
+
+            </div>
+          </a-layout-content>
+        </a-layout>
+        <a-layout-footer>Footer</a-layout-footer>
+      </a-layout>
+    </div>
+
+
 
-    <TestComponent >
-      <!-- 默认插槽内容 -->
-      <template #default>
-        Default slot content.
-      </template>
-      <!-- 动态插槽内容 -->
-      <template v-for="(slot, index) in dynamicSlotContents" :key="index" v-slot:[slot.slotName]>
-        {{ slot.content }}
-      </template>
-    </TestComponent>
-  </div>
   </div>
 
 
@@ -51,14 +57,6 @@ import { useDraggable } from 'vue-draggable-plus';
 import { uuid } from 'lsp-uuid';
 import { IComponent } from '../type/IComponent.ts';
 import { componentScheme } from '../schemes/scheme.ts';
-import TestComponent from './TestComponent.vue';
-
-const dynamicSlotContents = ref([
-  { slotName: 'header', content: 'Header content' },
-  { slotName: 'footer', content: 'Footer content' },
-  { slotName: 'main', content: 'Main content' }
-]);
-
 
 const componentsList = ref<any[]>([]);
 
@@ -84,7 +82,7 @@ useDraggable(el2, componentsList, {
   onClone() {
     console.log('clone')
   },
-  clone(element: Record<'id' | 'name' | 'type' | 'children' | 'props' | 'text' | 'class' | 'style'|'slots', any>) {
+  clone(element: Record<'id' | 'name' | 'type' | 'children' | 'props' | 'text' | 'class' | 'style' | 'slots', any>) {
     return {
       id: `${element.id}-${uuid()}`,
       name: element.name,
@@ -103,4 +101,6 @@ useDraggable(el2, componentsList, {
     }
   }
 })
-</script>
\ No newline at end of file
+</script>
+
+<style scoped></style>
\ No newline at end of file