fix:调整组件和页面scheme的类型

src/components/AdaptivePage.vue

@@ -1,11 +1,11 @@
 <template>
-    <div style="overflow-y: scroll">
+  <div :style="headerStyle">
     <div style="width: 100%;">
       <slot name="header"></slot>
     </div>
     <div style="width: 100%;height: 100%;background-color: #f7f8fa;">
-            <slot>
       MAIN
+      <slot>
       </slot>
     </div>
 
@@ -17,11 +17,24 @@
 </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>

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",
-    "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",
-    "visible": true,
-    "slots": {
-      "extra": {
-        "id": "9f8289a12910000",
-        "name": "avatar",
-        "type": "Avatar",
+    "id": "AdaptivePage-4e510f833910000",
+    "name": "AdaptivePage",
+    "type": "AdaptivePage",
     "props": {},
     "class": "",
     "designer": "",
-        "text": "",
     "children": [],
     "style": "",
-        "visible": "",
+    "visible": true,
     "slots": {},
-        "disable": "",
-        "events": {},
-        "loop": {}
-      }
-    },
     "disable": true,
     "events": {},
     "loop": {}

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": {}
 }

src/schemes/scheme.json

@@ -13,9 +13,9 @@
     "orchestrations": {},
     "events": {},
     "slots": {},
-    "header": {},
-    "footer": {},
-    "children": [],
+    "header": [],
+    "footer": [],
+    "body": [],
     "meta": {},
     "visible": true,
     "disable": false

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

src/type/IComponent.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

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;

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[];
 }

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);

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`;

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 {