diff --git a/src/components/AdaptivePage.vue b/src/components/AdaptivePage.vue
index cd33c03..70c9e28 100644
--- a/src/components/AdaptivePage.vue
+++ b/src/components/AdaptivePage.vue
@@ -1,27 +1,40 @@
 <template>
-    <div style="overflow-y: scroll">
-        <div style="width: 100%;">
-            <slot name="header"></slot>
-        </div>
-        <div style="width: 100%;height: 100%;background-color: #f7f8fa;">
-            <slot>
-                MAIN
-            </slot>
-        </div>
-
-        <div style="width: 100%;">
-            <slot name="footer"></slot>
-        </div>
-
+  <div :style="headerStyle">
+    <div style="width: 100%;">
+      <slot name="header"></slot>
     </div>
+    <div style="width: 100%;height: 100%;background-color: #f7f8fa;">
+      MAIN
+      <slot>
+      </slot>
+    </div>
+
+    <div style="width: 100%;">
+      <slot name="footer"></slot>
+    </div>
+
+  </div>
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import {ref} from 'vue';
+
 const dataSources = ref({})
 
-onMounted(()=>
-{
+const headerStyle = ref({});
 
+
+const fitRect = function () {
+  const containerEl = document.getElementById('renderArea');
+  if (!containerEl) return;
+  const containerRect = containerEl.getBoundingClientRect();
+  headerStyle.value = {
+    overflowY: scroll,
+    width: `${containerRect.width}px`,
+    height: `${containerRect.height}px`,
+  };
+}
+onMounted(() => {
+  fitRect();
 })
 </script>
\ No newline at end of file
diff --git a/src/modules/previewScheme.json b/src/modules/previewScheme.json
index a7d1e67..583f44d 100644
--- a/src/modules/previewScheme.json
+++ b/src/modules/previewScheme.json
@@ -1,35 +1,15 @@
 [
   {
-    "id": "Card-b22544833910000",
-    "name": "card",
-    "type": "Card",
-    "props": {
-      "title": "Card"
-    },
-    "class": "arco-card arco-card-size-medium arco-card-bordered",
+    "id": "AdaptivePage-4e510f833910000",
+    "name": "AdaptivePage",
+    "type": "AdaptivePage",
+    "props": {},
+    "class": "",
     "designer": "",
-    "text": "ByteDance's core product, Toutiao (\"Headlines\"), is a content platform in China and around the world. Toutiao started out as a news recommendation engine and gradually evolved into a platform delivering content in various formats.",
     "children": [],
-    "style": "width:360px",
+    "style": "",
     "visible": true,
-    "slots": {
-      "extra": {
-        "id": "9f8289a12910000",
-        "name": "avatar",
-        "type": "Avatar",
-        "props": {},
-        "class": "",
-        "designer": "",
-        "text": "",
-        "children": [],
-        "style": "",
-        "visible": "",
-        "slots": {},
-        "disable": "",
-        "events": {},
-        "loop": {}
-      }
-    },
+    "slots": {},
     "disable": true,
     "events": {},
     "loop": {}
diff --git a/src/schemes/components/AdaptivePage.json b/src/schemes/components/AdaptivePage.json
index 7d3d94f..8d2aecf 100644
--- a/src/schemes/components/AdaptivePage.json
+++ b/src/schemes/components/AdaptivePage.json
@@ -12,10 +12,11 @@
   "orchestrations": {},
   "events": {},
   "slots": {},
-  "header": {},
-  "footer": {},
-  "children": [],
+  "header": [],
+  "footer": [],
+  "body": [],
   "meta": {},
   "visible": true,
-  "disable": false
+  "disable": false,
+  "designer": {}
 }
\ No newline at end of file
diff --git a/src/schemes/scheme.json b/src/schemes/scheme.json
index bc32bb0..701d119 100644
--- a/src/schemes/scheme.json
+++ b/src/schemes/scheme.json
@@ -13,9 +13,9 @@
     "orchestrations": {},
     "events": {},
     "slots": {},
-    "header": {},
-    "footer": {},
-    "children": [],
+    "header": [],
+    "footer": [],
+    "body": [],
     "meta": {},
     "visible": true,
     "disable": false
diff --git a/src/schemes/scheme.ts b/src/schemes/scheme.ts
index ff361ea..4500cb4 100644
--- a/src/schemes/scheme.ts
+++ b/src/schemes/scheme.ts
@@ -13,9 +13,9 @@ export const componentScheme = {
     "orchestrations": {},
     "events": {},
     "slots": {},
-    "header": {},
-    "footer": {},
-    "children": [],
+    "header": [],
+    "footer": [],
+    "body": [],
     "meta": {},
     "visible": true,
     "disable": false
diff --git a/src/type/IComponent.js b/src/type/IComponent.js
deleted file mode 100644
index c8ad2e5..0000000
--- a/src/type/IComponent.js
+++ /dev/null
@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
diff --git a/src/type/IComponent.ts b/src/type/IComponent.ts
index 22b4c43..5b2c922 100644
--- a/src/type/IComponent.ts
+++ b/src/type/IComponent.ts
@@ -3,7 +3,7 @@ export interface IComponent {
   name: string;
   id: string;
   text:string;
-  designer: string;  
+  designer: JSON;
   props: JSON;       
   style: string;
   class: string;
diff --git a/src/type/IPageComponent.ts b/src/type/IPageComponent.ts
index abe2f5f..df9ab4e 100644
--- a/src/type/IPageComponent.ts
+++ b/src/type/IPageComponent.ts
@@ -3,10 +3,10 @@ import { IComponent } from "./IComponent";
 export interface IPageComponent extends IComponent
 {
   variables:JSON;
-  dataSources:JSON;
+  dataSources:[];
   functions:JSON;
-  header:JSON;
-  footer:JSON;
+  header:IComponent[];
+  footer:IComponent[];
   meta:JSON;
-  children: IPageComponent[];
+  body:IComponent[];
 }
\ No newline at end of file
diff --git a/src/utils/buildScheme.cjs b/src/utils/buildScheme.cjs
index ad1f12a..65155e4 100644
--- a/src/utils/buildScheme.cjs
+++ b/src/utils/buildScheme.cjs
@@ -20,8 +20,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
@@ -118,8 +118,7 @@ function writeModifiedComponents(components) {
                 case 3:
                     if (!(_i < components_1.length)) return [3 /*break*/, 6];
                     component = components_1[_i];
-                    updatedComponent = __assign(__assign({}, component), { visible: true, disable: false // 统一设置 disable 为 false
-                     });
+                    updatedComponent = __assign(__assign({}, component), { visible: true, disable: false, designer: {} });
                     fileName = "".concat(component.type, ".json");
                     filePath = path.join(exportModifiedComponentsDir, fileName);
                     content = JSON.stringify(updatedComponent, null, 2);
diff --git a/src/utils/buildScheme.ts b/src/utils/buildScheme.ts
index 77b3bdf..20ebd9c 100644
--- a/src/utils/buildScheme.ts
+++ b/src/utils/buildScheme.ts
@@ -50,7 +50,8 @@ async function writeModifiedComponents(components: IComponent[]): Promise<void>
       const updatedComponent = {
         ...component,
         visible: true,  // 统一设置 visible 为 true
-        disable: false  // 统一设置 disable 为 false
+        disable: false,  // 统一设置 disable 为 false
+        designer:{},
       };
 
       const fileName = `${component.type}.json`;
diff --git a/src/views/Designer.vue b/src/views/Designer.vue
index 7dba11e..dcaed82 100644
--- a/src/views/Designer.vue
+++ b/src/views/Designer.vue
@@ -118,17 +118,17 @@ store.$onAction(
 
 // 初始化scheme
 const initScheme = async () => {
-  // try {
-  //   const response = await axios.get('http://localhost:3000/load');
-  //   if (response.data && Array.isArray(response.data)) {
-  //     store.initPreviewScheme(response.data);
-  //   } else {
-  //     store.initPreviewScheme([baseScheme]);
-  //   }
-  // } catch (error) {
-  //   console.error('Error loading data:', error);
-  //   store.initPreviewScheme([baseScheme]);
-  // }
+  try {
+    const response = await axios.get('http://localhost:3000/load');
+    if (response.data && Array.isArray(response.data)) {
+      store.initPreviewScheme(response.data);
+    } else {
+      store.initPreviewScheme([baseScheme]);
+    }
+  } catch (error) {
+    console.error('Error loading data:', error);
+    store.initPreviewScheme([baseScheme]);
+  }
   componentsList = Object.values(componentScheme);
   store.initComponents(componentsList);
 };
@@ -270,7 +270,6 @@ const view = () => {
         background-color: #fff;
         width: 100%;
         height: 100%;
-        overflow-y: auto; /* 确保当内容超出时，出现垂直滚动条 */
       }
 
       .ghost {