From 0299f6a55b54a0fe632d9e8702854658aecf50bf Mon Sep 17 00:00:00 2001
From: lhj <403133128@qq.com>
Date: Wed, 2 Oct 2024 17:05:46 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E9=A1=B5=E9=9D=A2=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E3=80=81=E6=B7=BB=E5=8A=A0=E9=A1=B5=E9=9D=A2=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E6=8E=A5=E5=8F=A3=E3=80=81=E6=B7=BB=E5=8A=A0pinia?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts                          |    1 +
 package-lock.json                        |   56 +
 package.json                             |    1 +
 src/components/AdaptivePage.vue          |   27 +
 src/components/MainView.vue              |   15 +-
 src/components/NestedFunction.vue        |    6 +-
 src/components/TestComponent.vue         |   43 +-
 src/components/componentMapping.ts       |    7 +-
 src/components/dfd.json                  | 1415 ----------------------
 src/main.ts                              |    4 +
 src/schemes/components/AdaptivePage.json |    4 +
 src/schemes/scheme.json                  |   19 +
 src/schemes/scheme.ts                    |   19 +
 src/stores/useSchemeStore.ts             |   17 +
 src/type/IComponent.js                   |    2 -
 src/type/IComponent.ts                   |    5 +-
 src/type/IPageComponent.ts               |   12 +
 17 files changed, 199 insertions(+), 1454 deletions(-)
 create mode 100644 src/components/AdaptivePage.vue
 delete mode 100644 src/components/dfd.json
 create mode 100644 src/stores/useSchemeStore.ts
 delete mode 100644 src/type/IComponent.js
 create mode 100644 src/type/IPageComponent.ts

diff --git a/components.d.ts b/components.d.ts
index 0f243d6..e99c0e2 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -7,6 +7,7 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    AdaptivePage: typeof import('./src/components/AdaptivePage.vue')['default']
     DynamicComponent: typeof import('./src/components/DynamicComponent.vue')['default']
     ElTable: typeof import('./src/components/ElTable.vue')['default']
     MainView: typeof import('./src/components/MainView.vue')['default']
diff --git a/package-lock.json b/package-lock.json
index e02daf1..7731698 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "js-yaml": "^4.1.0",
         "lodash": "^4.17.21",
         "lsp-uuid": "^3.2.0",
+        "pinia": "^2.2.4",
         "ts-node": "^10.9.2",
         "vue": "^3.2.25",
         "vue-draggable-plus": "^0.5.3"
@@ -1164,6 +1165,11 @@
         "he": "^1.2.0"
       }
     },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.6.4",
+      "resolved": "https://repo.bingosoft.net/repository/npm/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
+      "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g=="
+    },
     "node_modules/@vue/language-core": {
       "version": "2.0.29",
       "resolved": "https://registry.npmmirror.com/@vue/language-core/-/language-core-2.0.29.tgz",
@@ -2646,6 +2652,56 @@
         "node": ">=6"
       }
     },
+    "node_modules/pinia": {
+      "version": "2.2.4",
+      "resolved": "https://repo.bingosoft.net/repository/npm/pinia/-/pinia-2.2.4.tgz",
+      "integrity": "sha512-K7ZhpMY9iJ9ShTC0cR2+PnxdQRuwVIsXDO/WIEV/RnMC/vmSoKDTKW/exNQYPI+4ij10UjXqdNiEHwn47McANQ==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.6.3",
+        "vue-demi": "^0.14.10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.4.0",
+        "typescript": ">=4.4.4",
+        "vue": "^2.6.14 || ^3.3.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pinia/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://repo.bingosoft.net/repository/npm/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/pkg-types": {
       "version": "1.1.3",
       "resolved": "https://registry.npmmirror.com/pkg-types/-/pkg-types-1.1.3.tgz",
diff --git a/package.json b/package.json
index 15b9a58..6823a60 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "js-yaml": "^4.1.0",
     "lodash": "^4.17.21",
     "lsp-uuid": "^3.2.0",
+    "pinia": "^2.2.4",
     "ts-node": "^10.9.2",
     "vue": "^3.2.25",
     "vue-draggable-plus": "^0.5.3"
diff --git a/src/components/AdaptivePage.vue b/src/components/AdaptivePage.vue
new file mode 100644
index 0000000..8434478
--- /dev/null
+++ b/src/components/AdaptivePage.vue
@@ -0,0 +1,27 @@
+<template>
+    <div>
+        <div style="width: 100%;">
+            <slot name="header"></slot>
+        </div>
+        <div style="width: 100%;min-height: 480px;background-color: #f7f8fa;">
+            <slot>
+                MAIN
+            </slot>
+        </div>
+
+        <div style="width: 100%;">
+            <slot name="footer"></slot>
+        </div>
+
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const dataSources = ref({})
+
+onMounted(()=>
+{
+
+})
+</script>
\ No newline at end of file
diff --git a/src/components/MainView.vue b/src/components/MainView.vue
index 190b0b0..3e585ce 100644
--- a/src/components/MainView.vue
+++ b/src/components/MainView.vue
@@ -3,6 +3,8 @@
     <div>
       compoent
     </div>
+
+    <!-- 组件区域 -->
     <div style="overflow-y: auto; overflow-x: hidden; flex-grow: 0; flex-shrink: 0; flex-basis: 250px;">
       <div ref="el2" style="display: flex; flex-direction: column; height: 500px; width: 100%;">
         <div v-for="item in componentsList" :key="item.id" style="height: 30px; width: 250px; border: 1px solid red;">
@@ -11,8 +13,8 @@
       </div>
     </div>
     <div style="flex-grow: 1; flex-shrink: 0; overflow-y: auto;">
-
       <div>
+        <!-- 设计器 -->
         <div
           style="display: flex; flex-direction: row; width: 100%; height: 500px; overflow-y: auto; border: 1px solid black;">
           <div class="flex justify-between">
@@ -20,6 +22,7 @@
             {{ list }}
           </div>
         </div>
+        <!-- 渲染区 -->
         <div style="width: 100%; height: 500px; overflow-y: auto; border: 1px solid black;">
           动态渲染
           <!-- <component :is="componentMapping['Rate']" v-bind="{}"/> -->
@@ -27,6 +30,10 @@
             {{ component.id }}
           </DynamicComponent>
         </div>
+        <!-- 测试区域 -->
+        <div>
+          <TestComponent></TestComponent>
+        </div>
         <div>
         </div>
       </div>
@@ -37,19 +44,21 @@
 </template>
 
 <script setup lang="ts">
+import TestComponent from './TestComponent.vue';
+
 import { onMounted, ref } from 'vue';
 import NestedFunction from './NestedFunction.vue';
 import DynamicComponent from './DynamicComponent.vue';
 
 import { useDraggable } from 'vue-draggable-plus';
 import { uuid } from 'lsp-uuid';
-import { IComponent } from '../type/IComponent.ts';
+import { IPageComponent } from '../type/IPageComponent.ts';
 import { componentScheme } from '../schemes/scheme.ts';
 
 const componentsList = ref<any[]>([]);
 
 
-const list = ref<IComponent[]>([]);
+const list = ref<IPageComponent[]>([]);
 const el2 = ref();
 
 
diff --git a/src/components/NestedFunction.vue b/src/components/NestedFunction.vue
index 97c2303..f35782a 100644
--- a/src/components/NestedFunction.vue
+++ b/src/components/NestedFunction.vue
@@ -11,15 +11,15 @@
 <script setup lang="ts">
 import { useDraggable} from 'vue-draggable-plus'
 import { computed, ref } from 'vue'
-import { IComponent } from '../type/IComponent'
+import { IPageComponent } from '../type/IComponent'
 
 interface Props {
-  modelValue: IComponent[]
+  modelValue: IPageComponent[]
 }
 
 const props = defineProps<Props>()
 interface Emits {
-  (e: 'update:modelValue', value: IComponent[]): void
+  (e: 'update:modelValue', value: IPageComponent[]): void
 }
 const emits = defineEmits<Emits>()
 const list = computed({
diff --git a/src/components/TestComponent.vue b/src/components/TestComponent.vue
index 8453cbb..ad40d48 100644
--- a/src/components/TestComponent.vue
+++ b/src/components/TestComponent.vue
@@ -1,29 +1,18 @@
-<!-- DynamicSlotsComponent.vue -->
-<template>
-  <div>
-    <!-- 动态插槽 -->
-
-    <div>
-      <slot name="header"></slot>
-    </div>
-
-    <div>
-      <slot name="main"></slot>
-    </div>
-    
-    <div>
-      <slot name="footer"></slot>
-    </div>
-
-
-  </div>
-</template>
-
 <script setup>
-import { defineProps } from 'vue';
+import { useCounterStore } from '@/stores/useSchemeStore'
+// 可以在组件中的任意位置访问 `store` 变量 ✨
+const store = useCounterStore()
+function add() {
+    store.increment()
+}
+function sub() {
+    store.decrement()
+}
+</script>
 
-// 接收一个动态插槽名作为 prop
-const props = defineProps({
-  dynamicSlotName: String
-});
-</script>
\ No newline at end of file
+<template>
+    <div>{{ store.count }}</div>
+    <a-button @click=add>add</a-button>
+    <a-button @click=sub>sub</a-button>
+
+</template>
\ No newline at end of file
diff --git a/src/components/componentMapping.ts b/src/components/componentMapping.ts
index 8f3ade9..831688e 100644
--- a/src/components/componentMapping.ts
+++ b/src/components/componentMapping.ts
@@ -1,5 +1,6 @@
 // componentMapping.ts
 import TestComponent from './TestComponent.vue';
+import AdaptivePage from './AdaptivePage.vue';
 import Icon from './Icon.tsx';
 
 import {
@@ -25,12 +26,12 @@ import {
   Countdown, Steps, Step, Switch,
   Tabs, TabPane, Tag, Textarea,
   TimePicker, Timeline, TimelineItem, Tooltip,
-  Transfer, Tree, TreeSelect, Trigger,Typography,TypographyParagraph, TypographyText, TypographyTitle,
+  Transfer, Tree, TreeSelect, Trigger, Typography, TypographyParagraph, TypographyText, TypographyTitle,
   Upload, OverflowList, VerificationCode, Watermark
 } from '@arco-design/web-vue';
 
 export const componentMapping: { [key: string]: any } = {
-  TestComponent,
+  TestComponent, AdaptivePage,
   Affix, Alert, Anchor, AnchorLink,
   AutoComplete, Avatar, AvatarGroup, BackTop,
   Badge, Breadcrumb, BreadcrumbItem, Button,
@@ -53,7 +54,7 @@ export const componentMapping: { [key: string]: any } = {
   Countdown, Steps, Step, Switch,
   Tabs, TabPane, Tag, Textarea,
   TimePicker, Timeline, TimelineItem, Tooltip,
-  Transfer, Tree, TreeSelect, Trigger,Typography,TypographyParagraph, TypographyText, TypographyTitle,
+  Transfer, Tree, TreeSelect, Trigger, Typography, TypographyParagraph, TypographyText, TypographyTitle,
   Upload, OverflowList, VerificationCode, Watermark
 };
 
diff --git a/src/components/dfd.json b/src/components/dfd.json
deleted file mode 100644
index 35455f6..0000000
--- a/src/components/dfd.json
+++ /dev/null
@@ -1,1415 +0,0 @@
-{
-    "cells": [
-      {
-        "position": {
-          "x": 846.5,
-          "y": -330
-        },
-        "size": {
-          "width": 65,
-          "height": 25
-        },
-        "view": "vue-shape-view",
-        "shape": "Action.Start",
-        "nodeType": "Action.Start",
-        "label": "开始",
-        "data": {},
-        "component": "action-start",
-        "ports": {
-          "groups": {
-            "top": {
-              "position": "top",
-              "attrs": {
-                "circle": {
-                  "r": 5,
-                  "magnet": true,
-                  "stroke": "#5F95FF",
-                  "strokeWidth": 1,
-                  "fill": "#fff",
-                  "style": {
-                    "visibility": "hidden"
-                  }
-                }
-              }
-            },
-            "right": {
-              "position": "right",
-              "attrs": {
-                "circle": {
-                  "r": 5,
-                  "magnet": true,
-                  "stroke": "#5F95FF",
-                  "strokeWidth": 1,
-                  "fill": "#fff",
-                  "style": {
-                    "visibility": "hidden"
-                  }
-                }
-              }
-            },
-            "bottom": {
-              "position": "bottom",
-              "label": {
-                "position": "bottom"
-              },
-              "attrs": {
-                "circle": {
-                  "r": 5,
-                  "magnet": true,
-                  "stroke": "#5F95FF",
-                  "strokeWidth": 1,
-                  "fill": "#fff",
-                  "style": {
-                    "visibility": "hidden"
-                  }
-                }
-              }
-            },
-            "left": {
-              "position": "left",
-              "attrs": {
-                "circle": {
-                  "r": 5,
-                  "magnet": true,
-                  "stroke": "#5F95FF",
-                  "strokeWidth": 1,
-                  "fill": "#fff",
-                  "style": {
-                    "visibility": "hidden"
-                  }
-                }
-              }
-            }
-          },
-          "items": [
-            {
-              "group": "top",
-              "id": "top"
-            },
-            {
-              "group": "right",
-              "id": "right"
-            },
-            {
-              "group": "bottom",
-              "id": "bottom"
-            },
-            {
-              "group": "left",
-              "id": "left"
-            }
-          ]
-        },
-        "id": "start",
-        "_order": 0,
-        "zIndex": 1,
-        "_validateError": false
-      },
-      {
-        "position": {
-          "x": 790,
-          "y": 690
-        },
-        "size": {
-          "width": 65,
-          "height": 25
-        },
-        "view": "vue-shape-view",
-        "shape": "Action.End",
-        "nodeType": "Action.End",
-        "label": "结束",
-        "data": {},
-        "component": "action-end",
-        "ports": {
-          "groups": {
-            "top": {
-              "position": "top",
-              "attrs": {
-                "circle": {
-                  "r": 5,
-                  "magnet": true,
-                  "stroke": "#5F95FF",
-                  "strokeWidth": 1,
-                  "fill": "#fff",
-                  "style": {
-                    "visibility": "hidden"
-                  }
-                }
-              }
-            },
-            "right": {
-              "position": "right",
-              "attrs": {
-                "circle": {
-                  "r": 5,
-                  "magnet": true,
-                  "stroke": "#5F95FF",
-                  "strokeWidth": 1,
-                  "fill": "#fff",
-                  "style": {
-                    "visibility": "hidden"
-                  }
-                }
-              }
-            },
-            "bottom": {
-              "position": "bottom",
-              "label": {
-                "position": "bottom"
-              },
-              "attrs": {
-                "circle": {
-                  "r": 5,
-                  "magnet": true,
-                  "stroke": "#5F95FF",
-                  "strokeWidth": 1,
-                  "fill": "#fff",
-                  "style": {
-                    "visibility": "hidden"
-                  }
-                }
-              }
-            },
-            "left": {
-              "position": "left",
-              "attrs": {
-                "circle": {
-                  "r": 5,
-                  "magnet": true,
-                  "stroke": "#5F95FF",
-                  "strokeWidth": 1,
-                  "fill": "#fff",
-                  "style": {
-                    "visibility": "hidden"
-                  }
-                }
-              }
-            }
-          },
-          "items": [
-            {
-              "group": "top",
-              "id": "top"
-            },
-            {
-              "group": "right",
-              "id": "right"
-            },
-            {
-              "group": "bottom",
-              "id": "bottom"
-            },
-            {
-              "group": "left",
-              "id": "left"
-            }
-          ]
-        },
-        "id": "end",
-        "_order": 0,
-        "zIndex": 1,
-        "_validateError": false
-      },
-      {
-        "position": {
-          "x": 690,
-          "y": 240
-        },
-        "size": {
-          "width": 496.5,
-          "height": 244
-        },
-        "view": "vue-shape-view",
-        "shape": "Action.Foreach",
-        "nodeType": "Action.Foreach",
-        "label": "循环",
-        "data": {
-          "inputCollection": "${formobj.host.ip}",
-          "iterationParam": "item"
-        },
-        "component": "action-foreach",
-        "ports": {
-          "groups": {
-            "top": {
-              "position": "top",
-              "attrs": {
-                "circle": {
-                  "r": 5,
-                  "magnet": true,
-                  "stroke": "#5F95FF",
-                  "strokeWidth": 1,
-                  "fill": "#fff",
-                  "style": {
-                    "visibility": "hidden"
-                  }
-                }
-              }
-            },
-            "right": {
-              "position": "right",
-              "attrs": {
-                "circle": {
-                  "r": 5,
-                  "magnet": true,
-                  "stroke": "#5F95FF",
-                  "strokeWidth": 1,
-                  "fill": "#fff",
-                  "style": {
-                    "visibility": "hidden"
-                  }
-                }
-              }
-            },
-            "bottom": {
-              "position": "bottom",
-              "label": {
-                "position": "bottom"
-              },
-              "attrs": {
-                "circle": {
-                  "r": 5,
-                  "magnet": true,
-                  "stroke": "#5F95FF",
-                  "strokeWidth": 1,
-                  "fill": "#fff",
-                  "style": {
-                    "visibility": "hidden"
-                  }
-                }
-              }
-            },
-            "left": {
-              "position": "left",
-              "attrs": {
-                "circle": {
-                  "r": 5,
-                  "magnet": true,
-                  "stroke": "#5F95FF",
-                  "strokeWidth": 1,
-                  "fill": "#fff",
-                  "style": {
-                    "visibility": "hidden"
-                  }
-                }
-              }
-            }
-          },
-          "items": [
-            {
-              "group": "top",
-              "id": "top"
-            },
-            {
-              "group": "right",
-              "id": "right"
-            },
-            {
-              "group": "bottom",
-              "id": "bottom"
-            },
-            {
-              "group": "left",
-              "id": "left"
-            }
-          ]
-        },
-        "id": "c9656849-4caf-47d5-85d7-df540fbe9873",
-        "zIndex": 2,
-        "_validateError": false,
-        "children": [
-          "4f71eec5-1487-4053-924c-3fd42f087263",
-          "63400f2b-4950-4057-8aa4-329750913cc9"
-        ],
-        "meta": {
-          "hasStart": true
-        },
-        "originPosition": {
-          "x": 690,
-          "y": 240
-        },
-        "originSize": {
-          "width": 280,
-          "height": 200
-        },
-        "_selected": false
-      },
-      {
-        "position": {
-          "x": 748.75,
-          "y": 287.5
-        },
-        "size": {
-          "width": 65,
-          "height": 25
-        },
-        "view": "vue-shape-view",
-        "shape": "Action.Start",
-        "nodeType": "Action.Start",
-        "label": "开始",
-        "data": {},
-        "component": "action-start",
-        "ports": {
-          "groups": {
-            "top": {
-              "position": "top",
-              "attrs": {
-                "circle": {
-                  "r": 5,
-                  "magnet": true,
-                  "stroke": "#5F95FF",
-                  "strokeWidth": 1,
-                  "fill": "#fff",
-                  "style": {
-                    "visibility": "hidden"
-                  }
-                }
-              }
-            },
-            "right": {
-              "position": "right",
-              "attrs": {
-                "circle": {
-                  "r": 5,
-                  "magnet": true,
-                  "stroke": "#5F95FF",
-                  "strokeWidth": 1,
-                  "fill": "#fff",
-                  "style": {
-                    "visibility": "hidden"
-                  }
-                }
-              }
-            },
-            "bottom": {
-              "position": "bottom",
-              "label": {
-                "position": "bottom"
-              },
-              "attrs": {
-                "circle": {
-                  "r": 5,
-                  "magnet": true,
-                  "stroke": "#5F95FF",
-                  "strokeWidth": 1,
-                  "fill": "#fff",
-                  "style": {
-                    "visibility": "hidden"
-                  }
-                }
-              }
-            },
-            "left": {
-              "position": "left",
-              "attrs": {
-                "circle": {
-                  "r": 5,
-                  "magnet": true,
-                  "stroke": "#5F95FF",
-                  "strokeWidth": 1,
-                  "fill": "#fff",
-                  "style": {
-                    "visibility": "hidden"
-                  }
-                }
-              }
-            }
-          },
-          "items": [
-            {
-              "group": "top",
-              "id": "top"
-            },
-            {
-              "group": "right",
-              "id": "right"
-            },
-            {
-              "group": "bottom",
-              "id": "bottom"
-            },
-            {
-              "group": "left",
-              "id": "left"
-            }
-          ]
-        },
-        "id": "4f71eec5-1487-4053-924c-3fd42f087263",
-        "parent": "c9656849-4caf-47d5-85d7-df540fbe9873",
-        "zIndex": 3,
-        "_validateError": false,
-        "_selected": false
-      },
-      {
-        "position": {
-          "x": 881.5,
-          "y": 390
-        },
-        "size": {
-          "width": 65,
-          "height": 25
-        },
-        "view": "vue-shape-view",
-        "shape": "Action.End",
-        "nodeType": "Action.End",
-        "label": "结束",
-        "data": {},
-        "component": "action-end",
-        "ports": {
-          "groups": {
-            "top": {
-              "position": "top",
-              "attrs": {
-                "circle": {
-                  "r": 5,
-                  "magnet": true,
-                  "stroke": "#5F95FF",
-                  "strokeWidth": 1,
-                  "fill": "#fff",
-                  "style": {
-                    "visibility": "hidden"
-                  }
-                }
-              }
-            },
-            "right": {
-              "position": "right",
-              "attrs": {
-                "circle": {
-                  "r": 5,
-                  "magnet": true,
-                  "stroke": "#5F95FF",
-                  "strokeWidth": 1,
-                  "fill": "#fff",
-                  "style": {
-                    "visibility": "hidden"
-                  }
-                }
-              }
-            },
-            "bottom": {
-              "position": "bottom",
-              "label": {
-                "position": "bottom"
-              },
-              "attrs": {
-                "circle": {
-                  "r": 5,
-                  "magnet": true,
-                  "stroke": "#5F95FF",
-                  "strokeWidth": 1,
-                  "fill": "#fff",
-                  "style": {
-                    "visibility": "hidden"
-                  }
-                }
-              }
-            },
-            "left": {
-              "position": "left",
-              "attrs": {
-                "circle": {
-                  "r": 5,
-                  "magnet": true,
-                  "stroke": "#5F95FF",
-                  "strokeWidth": 1,
-                  "fill": "#fff",
-                  "style": {
-                    "visibility": "hidden"
-                  }
-                }
-              }
-            }
-          },
-          "items": [
-            {
-              "group": "top",
-              "id": "top"
-            },
-            {
-              "group": "right",
-              "id": "right"
-            },
-            {
-              "group": "bottom",
-              "id": "bottom"
-            },
-            {
-              "group": "left",
-              "id": "left"
-            }
-          ]
-        },
-        "id": "63400f2b-4950-4057-8aa4-329750913cc9",
-        "zIndex": 5,
-        "_validateError": false,
-        "parent": "c9656849-4caf-47d5-85d7-df540fbe9873"
-      },
-      {
-        "position": {
-          "x": 811.5,
-          "y": -125
-        },
-        "size": {
-          "width": 135,
-          "height": 60
-        },
-        "view": "vue-shape-view",
-        "shape": "Action.Script",
-        "nodeType": "Action.Script",
-        "label": "执行函数",
-        "data": {
-          "funcType": "page",
-          "script": "appointHosts",
-          "params": [
-            {
-              "name": "playbook",
-              "value": "${curBookreference.playbook_path}"
-            }
-          ]
-        },
-        "component": "action-script",
-        "ports": {
-          "groups": {
-            "top": {
-              "position": "top",
-              "attrs": {
-                "circle": {
-                  "r": 5,
-                  "magnet": true,
-                  "stroke": "#5F95FF",
-                  "strokeWidth": 1,
-                  "fill": "#fff",
-                  "style": {
-                    "visibility": "hidden"
-                  }
-                }
-              }
-            },
-            "right": {
-              "position": "right",
-              "attrs": {
-                "circle": {
-                  "r": 5,
-                  "magnet": true,
-                  "stroke": "#5F95FF",
-                  "strokeWidth": 1,
-                  "fill": "#fff",
-                  "style": {
-                    "visibility": "hidden"
-                  }
-                }
-              }
-            },
-            "bottom": {
-              "position": "bottom",
-              "label": {
-                "position": "bottom"
-              },
-              "attrs": {
-                "circle": {
-                  "r": 5,
-                  "magnet": true,
-                  "stroke": "#5F95FF",
-                  "strokeWidth": 1,
-                  "fill": "#fff",
-                  "style": {
-                    "visibility": "hidden"
-                  }
-                }
-              }
-            },
-            "left": {
-              "position": "left",
-              "attrs": {
-                "circle": {
-                  "r": 5,
-                  "magnet": true,
-                  "stroke": "#5F95FF",
-                  "strokeWidth": 1,
-                  "fill": "#fff",
-                  "style": {
-                    "visibility": "hidden"
-                  }
-                }
-              }
-            }
-          },
-          "items": [
-            {
-              "group": "top",
-              "id": "top"
-            },
-            {
-              "group": "right",
-              "id": "right"
-            },
-            {
-              "group": "bottom",
-              "id": "bottom"
-            },
-            {
-              "group": "left",
-              "id": "left"
-            }
-          ]
-        },
-        "id": "dfe05a8c-0f47-4ae1-bc97-b1fabf31ea15",
-        "zIndex": 10,
-        "_validateError": false,
-        "_selected": false
-      },
-      {
-        "shape": "edge",
-        "attrs": {
-          "line": {
-            "stroke": "#dadada",
-            "targetMarker": {
-              "name": "block",
-              "width": 12,
-              "height": 8
-            }
-          }
-        },
-        "id": "14e3c0ef-a205-4d3a-a930-0d4a8c5eca14",
-        "zIndex": 11,
-        "source": {
-          "cell": "dfe05a8c-0f47-4ae1-bc97-b1fabf31ea15",
-          "port": "bottom"
-        },
-        "target": {
-          "cell": "b4cfb4a7-a1cb-47ac-84f3-d8a805f1abbb",
-          "port": "top"
-        }
-      },
-      {
-        "position": {
-          "x": 811.5,
-          "y": -245
-        },
-        "size": {
-          "width": 135,
-          "height": 60
-        },
-        "view": "vue-shape-view",
-        "shape": "Action.ValidateForm",
-        "nodeType": "Action.ValidateForm",
-        "label": "校验表单",
-        "data": {
-          "formId": "reform"
-        },
-        "component": "action-validate-form",
-        "ports": {
-          "groups": {
-            "top": {
-              "position": "top",
-              "attrs": {
-                "circle": {
-                  "r": 5,
-                  "magnet": true,
-                  "stroke": "#5F95FF",
-                  "strokeWidth": 1,
-                  "fill": "#fff",
-                  "style": {
-                    "visibility": "hidden"
-                  }
-                }
-              }
-            },
-            "right": {
-              "position": "right",
-              "attrs": {
-                "circle": {
-                  "r": 5,
-                  "magnet": true,
-                  "stroke": "#5F95FF",
-                  "strokeWidth": 1,
-                  "fill": "#fff",
-                  "style": {
-                    "visibility": "hidden"
-                  }
-                }
-              }
-            },
-            "bottom": {
-              "position": "bottom",
-              "label": {
-                "position": "bottom"
-              },
-              "attrs": {
-                "circle": {
-                  "r": 5,
-                  "magnet": true,
-                  "stroke": "#5F95FF",
-                  "strokeWidth": 1,
-                  "fill": "#fff",
-                  "style": {
-                    "visibility": "hidden"
-                  }
-                }
-              }
-            },
-            "left": {
-              "position": "left",
-              "attrs": {
-                "circle": {
-                  "r": 5,
-                  "magnet": true,
-                  "stroke": "#5F95FF",
-                  "strokeWidth": 1,
-                  "fill": "#fff",
-                  "style": {
-                    "visibility": "hidden"
-                  }
-                }
-              }
-            }
-          },
-          "items": [
-            {
-              "group": "top",
-              "id": "top"
-            },
-            {
-              "group": "right",
-              "id": "right"
-            },
-            {
-              "group": "bottom",
-              "id": "bottom"
-            },
-            {
-              "group": "left",
-              "id": "left"
-            }
-          ]
-        },
-        "id": "a10a5c79-a14d-403d-83fc-70a5e86a96d8",
-        "zIndex": 14,
-        "_validateError": false,
-        "_selected": false
-      },
-      {
-        "position": {
-          "x": 480,
-          "y": 2.5
-        },
-        "size": {
-          "width": 152,
-          "height": 64
-        },
-        "view": "vue-shape-view",
-        "shape": "Action.Message",
-        "nodeType": "Action.Message",
-        "label": "顶部消息提示",
-        "data": {
-          "notifyType": "error",
-          "content": "Playbook中hosts为空或不存在，请检查",
-          "duration": 1.5,
-          "closable": false,
-          "background": false
-        },
-        "component": "action-message",
-        "ports": {
-          "groups": {
-            "top": {
-              "position": "top",
-              "attrs": {
-                "circle": {
-                  "r": 5,
-                  "magnet": true,
-                  "stroke": "#5F95FF",
-                  "strokeWidth": 1,
-                  "fill": "#fff",
-                  "style": {
-                    "visibility": "hidden"
-                  }
-                }
-              }
-            },
-            "right": {
-              "position": "right",
-              "attrs": {
-                "circle": {
-                  "r": 5,
-                  "magnet": true,
-                  "stroke": "#5F95FF",
-                  "strokeWidth": 1,
-                  "fill": "#fff",
-                  "style": {
-                    "visibility": "hidden"
-                  }
-                }
-              }
-            },
-            "bottom": {
-              "position": "bottom",
-              "label": {
-                "position": "bottom"
-              },
-              "attrs": {
-                "circle": {
-                  "r": 5,
-                  "magnet": true,
-                  "stroke": "#5F95FF",
-                  "strokeWidth": 1,
-                  "fill": "#fff",
-                  "style": {
-                    "visibility": "hidden"
-                  }
-                }
-              }
-            },
-            "left": {
-              "position": "left",
-              "attrs": {
-                "circle": {
-                  "r": 5,
-                  "magnet": true,
-                  "stroke": "#5F95FF",
-                  "strokeWidth": 1,
-                  "fill": "#fff",
-                  "style": {
-                    "visibility": "hidden"
-                  }
-                }
-              }
-            }
-          },
-          "items": [
-            {
-              "group": "top",
-              "id": "top"
-            },
-            {
-              "group": "right",
-              "id": "right"
-            },
-            {
-              "group": "bottom",
-              "id": "bottom"
-            },
-            {
-              "group": "left",
-              "id": "left"
-            }
-          ]
-        },
-        "id": "6e5ffab4-c9be-406c-92d7-61d2646a09a8",
-        "zIndex": 16,
-        "_validateError": false,
-        "_selected": false
-      },
-      {
-        "shape": "edge",
-        "attrs": {
-          "line": {
-            "stroke": "#dadada",
-            "targetMarker": {
-              "name": "block",
-              "width": 12,
-              "height": 8
-            }
-          }
-        },
-        "id": "681bb452-53a0-49a3-9806-fb1648931c53",
-        "zIndex": 18,
-        "source": {
-          "cell": "a10a5c79-a14d-403d-83fc-70a5e86a96d8",
-          "port": "bottom"
-        },
-        "target": {
-          "cell": "dfe05a8c-0f47-4ae1-bc97-b1fabf31ea15",
-          "port": "top"
-        }
-      },
-      {
-        "position": {
-          "x": 855,
-          "y": 9
-        },
-        "size": {
-          "width": 51,
-          "height": 51
-        },
-        "view": "vue-shape-view",
-        "shape": "Action.Switch",
-        "nodeType": "Action.Switch",
-        "label": "分支",
-        "data": {},
-        "component": "action-switch",
-        "ports": {
-          "groups": {
-            "top": {
-              "position": "top",
-              "attrs": {
-                "circle": {
-                  "r": 5,
-                  "magnet": true,
-                  "stroke": "#5F95FF",
-                  "strokeWidth": 1,
-                  "fill": "#fff",
-                  "style": {
-                    "visibility": "hidden"
-                  }
-                }
-              }
-            },
-            "right": {
-              "position": "right",
-              "attrs": {
-                "circle": {
-                  "r": 5,
-                  "magnet": true,
-                  "stroke": "#5F95FF",
-                  "strokeWidth": 1,
-                  "fill": "#fff",
-                  "style": {
-                    "visibility": "hidden"
-                  }
-                }
-              }
-            },
-            "bottom": {
-              "position": "bottom",
-              "label": {
-                "position": "bottom"
-              },
-              "attrs": {
-                "circle": {
-                  "r": 5,
-                  "magnet": true,
-                  "stroke": "#5F95FF",
-                  "strokeWidth": 1,
-                  "fill": "#fff",
-                  "style": {
-                    "visibility": "hidden"
-                  }
-                }
-              }
-            },
-            "left": {
-              "position": "left",
-              "attrs": {
-                "circle": {
-                  "r": 5,
-                  "magnet": true,
-                  "stroke": "#5F95FF",
-                  "strokeWidth": 1,
-                  "fill": "#fff",
-                  "style": {
-                    "visibility": "hidden"
-                  }
-                }
-              }
-            }
-          },
-          "items": [
-            {
-              "group": "top",
-              "id": "top"
-            },
-            {
-              "group": "right",
-              "id": "right"
-            },
-            {
-              "group": "bottom",
-              "id": "bottom"
-            },
-            {
-              "group": "left",
-              "id": "left"
-            }
-          ]
-        },
-        "id": "b4cfb4a7-a1cb-47ac-84f3-d8a805f1abbb",
-        "zIndex": 19,
-        "_validateError": false
-      },
-      {
-        "shape": "edge",
-        "attrs": {
-          "line": {
-            "stroke": "#dadada",
-            "targetMarker": {
-              "name": "block",
-              "width": 12,
-              "height": 8
-            }
-          }
-        },
-        "id": "ba99a5e4-5cde-4eea-8cb0-a85eef8c9f5f",
-        "zIndex": 20,
-        "data": {
-          "condition": "${!hosts}"
-        },
-        "source": {
-          "cell": "b4cfb4a7-a1cb-47ac-84f3-d8a805f1abbb",
-          "port": "left"
-        },
-        "target": {
-          "cell": "6e5ffab4-c9be-406c-92d7-61d2646a09a8",
-          "port": "right"
-        }
-      },
-      {
-        "shape": "edge",
-        "attrs": {
-          "line": {
-            "stroke": "#dadada",
-            "targetMarker": {
-              "name": "block",
-              "width": 12,
-              "height": 8
-            }
-          }
-        },
-        "id": "59b574db-330d-4a31-bebd-fa814e54eec3",
-        "zIndex": 21,
-        "data": {
-          "condition": "${hosts!==null}"
-        },
-        "source": {
-          "cell": "b4cfb4a7-a1cb-47ac-84f3-d8a805f1abbb",
-          "port": "bottom"
-        },
-        "target": {
-          "cell": "c9656849-4caf-47d5-85d7-df540fbe9873",
-          "port": "top"
-        }
-      },
-      {
-        "position": {
-          "x": 790,
-          "y": 580
-        },
-        "size": {
-          "width": 152,
-          "height": 64
-        },
-        "view": "vue-shape-view",
-        "shape": "Action.Back",
-        "nodeType": "Action.Back",
-        "label": "返回页面",
-        "data": {},
-        "component": "action-back",
-        "ports": {
-          "groups": {
-            "top": {
-              "position": "top",
-              "attrs": {
-                "circle": {
-                  "r": 5,
-                  "magnet": true,
-                  "stroke": "#5F95FF",
-                  "strokeWidth": 1,
-                  "fill": "#fff",
-                  "style": {
-                    "visibility": "hidden"
-                  }
-                }
-              }
-            },
-            "right": {
-              "position": "right",
-              "attrs": {
-                "circle": {
-                  "r": 5,
-                  "magnet": true,
-                  "stroke": "#5F95FF",
-                  "strokeWidth": 1,
-                  "fill": "#fff",
-                  "style": {
-                    "visibility": "hidden"
-                  }
-                }
-              }
-            },
-            "bottom": {
-              "position": "bottom",
-              "label": {
-                "position": "bottom"
-              },
-              "attrs": {
-                "circle": {
-                  "r": 5,
-                  "magnet": true,
-                  "stroke": "#5F95FF",
-                  "strokeWidth": 1,
-                  "fill": "#fff",
-                  "style": {
-                    "visibility": "hidden"
-                  }
-                }
-              }
-            },
-            "left": {
-              "position": "left",
-              "attrs": {
-                "circle": {
-                  "r": 5,
-                  "magnet": true,
-                  "stroke": "#5F95FF",
-                  "strokeWidth": 1,
-                  "fill": "#fff",
-                  "style": {
-                    "visibility": "hidden"
-                  }
-                }
-              }
-            }
-          },
-          "items": [
-            {
-              "group": "top",
-              "id": "top"
-            },
-            {
-              "group": "right",
-              "id": "right"
-            },
-            {
-              "group": "bottom",
-              "id": "bottom"
-            },
-            {
-              "group": "left",
-              "id": "left"
-            }
-          ]
-        },
-        "id": "c85cad0a-0c62-4083-85d9-05e7367d17b9",
-        "zIndex": 22,
-        "_validateError": false,
-        "_selected": false
-      },
-      {
-        "shape": "edge",
-        "attrs": {
-          "line": {
-            "stroke": "#dadada",
-            "targetMarker": {
-              "name": "block",
-              "width": 12,
-              "height": 8
-            }
-          }
-        },
-        "id": "4aab79bf-8483-41dc-9329-6d393d4d6ec8",
-        "zIndex": 23,
-        "source": {
-          "cell": "6e5ffab4-c9be-406c-92d7-61d2646a09a8",
-          "port": "bottom"
-        },
-        "target": {
-          "cell": "c85cad0a-0c62-4083-85d9-05e7367d17b9",
-          "port": "left"
-        }
-      },
-      {
-        "shape": "edge",
-        "attrs": {
-          "line": {
-            "stroke": "#dadada",
-            "targetMarker": {
-              "name": "block",
-              "width": 12,
-              "height": 8
-            }
-          }
-        },
-        "id": "e6d6df9a-2f37-4e08-bd13-0db01a396588",
-        "zIndex": 25,
-        "source": {
-          "cell": "c85cad0a-0c62-4083-85d9-05e7367d17b9",
-          "port": "bottom"
-        },
-        "target": {
-          "cell": "end",
-          "port": "top"
-        }
-      },
-      {
-        "shape": "edge",
-        "attrs": {
-          "line": {
-            "stroke": "#dadada",
-            "targetMarker": {
-              "name": "block",
-              "width": 12,
-              "height": 8
-            }
-          }
-        },
-        "id": "04c6eae3-d5d8-40de-8c5b-0f91e1b08d0b",
-        "zIndex": 35,
-        "source": {
-          "cell": "start",
-          "port": "bottom"
-        },
-        "target": {
-          "cell": "a10a5c79-a14d-403d-83fc-70a5e86a96d8",
-          "port": "top"
-        }
-      },
-      {
-        "shape": "edge",
-        "attrs": {
-          "line": {
-            "stroke": "#dadada",
-            "targetMarker": {
-              "name": "block",
-              "width": 12,
-              "height": 8
-            }
-          }
-        },
-        "id": "2773fa96-6552-4bd1-a3f7-ace737dd83b7",
-        "zIndex": 36,
-        "source": {
-          "cell": "c9656849-4caf-47d5-85d7-df540fbe9873",
-          "port": "bottom"
-        },
-        "target": {
-          "cell": "c85cad0a-0c62-4083-85d9-05e7367d17b9",
-          "port": "top"
-        }
-      },
-      {
-        "position": {
-          "x": 1323.5,
-          "y": 180
-        },
-        "size": {
-          "width": 135,
-          "height": 60
-        },
-        "view": "vue-shape-view",
-        "shape": "Action.Http",
-        "nodeType": "Action.Http",
-        "label": "发送HTTP请求",
-        "data": {
-          "schema": {},
-          "url": "${'/onecloud/api/v2/ansibleplaybookreferences/'+formobj.referenceName+'/run'}",
-          "method": "POST",
-          "params": {},
-          "data": {
-            "host": "${{\r\n  \"name\": hosts,\r\n  \"ip\": item\r\n}\r\n}",
-            "args": "${utils.JSON.parse(args)}",
-            "sync": "${true}"
-          },
-          "headers": {
-            "X-Project-Id": "${projectId}"
-          },
-          "description": null,
-          "serviceType": "onecloud"
-        },
-        "component": "action-http",
-        "ports": {
-          "groups": {
-            "top": {
-              "position": "top",
-              "attrs": {
-                "circle": {
-                  "r": 5,
-                  "magnet": true,
-                  "stroke": "#5F95FF",
-                  "strokeWidth": 1,
-                  "fill": "#fff",
-                  "style": {
-                    "visibility": "hidden"
-                  }
-                }
-              }
-            },
-            "right": {
-              "position": "right",
-              "attrs": {
-                "circle": {
-                  "r": 5,
-                  "magnet": true,
-                  "stroke": "#5F95FF",
-                  "strokeWidth": 1,
-                  "fill": "#fff",
-                  "style": {
-                    "visibility": "hidden"
-                  }
-                }
-              }
-            },
-            "bottom": {
-              "position": "bottom",
-              "label": {
-                "position": "bottom"
-              },
-              "attrs": {
-                "circle": {
-                  "r": 5,
-                  "magnet": true,
-                  "stroke": "#5F95FF",
-                  "strokeWidth": 1,
-                  "fill": "#fff",
-                  "style": {
-                    "visibility": "hidden"
-                  }
-                }
-              }
-            },
-            "left": {
-              "position": "left",
-              "attrs": {
-                "circle": {
-                  "r": 5,
-                  "magnet": true,
-                  "stroke": "#5F95FF",
-                  "strokeWidth": 1,
-                  "fill": "#fff",
-                  "style": {
-                    "visibility": "hidden"
-                  }
-                }
-              }
-            }
-          },
-          "items": [
-            {
-              "group": "top",
-              "id": "top"
-            },
-            {
-              "group": "right",
-              "id": "right"
-            },
-            {
-              "group": "bottom",
-              "id": "bottom"
-            },
-            {
-              "group": "left",
-              "id": "left"
-            },
-            {
-              "group": "bottom",
-              "id": "port-error",
-              "attrs": {
-                "circle": {
-                  "r": 5,
-                  "magnet": true,
-                  "stroke": "red",
-                  "strokeWidth": 1,
-                  "fill": "#fff",
-                  "title": "处理异常",
-                  "data-title": "处理异常"
-                }
-              }
-            }
-          ]
-        },
-        "id": "74c11e68-621e-40d5-aa00-d4e9fb9818c2",
-        "_order": 0,
-        "_validateError": false,
-        "_selected": true,
-        "zIndex": 37
-      }
-    ]
-  }
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index 5827ee0..976444f 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -5,8 +5,12 @@ import ArcoVue from '@arco-design/web-vue';
 // 额外引入图标库
 import ArcoVueIcon from '@arco-design/web-vue/es/icon';
 import '@arco-design/web-vue/dist/arco.css';
+import {createPinia} from "pinia"
+
+const pinia = createPinia()
 
 const app = createApp(App);
+app.use(pinia)
 app.use(ArcoVue);
 app.use(ArcoVueIcon);
 app.mount('#app');
\ No newline at end of file
diff --git a/src/schemes/components/AdaptivePage.json b/src/schemes/components/AdaptivePage.json
index afe0f46..25b2ba3 100644
--- a/src/schemes/components/AdaptivePage.json
+++ b/src/schemes/components/AdaptivePage.json
@@ -1,7 +1,11 @@
 {
     "type": "AdaptivePage",
+    "name":"AdaptivePage",
+    "id":"AdaptivePage",
     "version": "2.0",
     "props": {},
+    "class":"",
+    "style":"",
     "variables": {},
     "dataSources":{},
     "functions" : {},
diff --git a/src/schemes/scheme.json b/src/schemes/scheme.json
index d5eadf1..d1d400e 100644
--- a/src/schemes/scheme.json
+++ b/src/schemes/scheme.json
@@ -1,4 +1,23 @@
 {
+  "AdaptivePage": {
+    "type": "AdaptivePage",
+    "name": "AdaptivePage",
+    "id": "AdaptivePage",
+    "version": "2.0",
+    "props": {},
+    "class": "",
+    "style": "",
+    "variables": {},
+    "dataSources": {},
+    "functions": {},
+    "orchestrations": {},
+    "events": {},
+    "slots": {},
+    "header": {},
+    "footer": {},
+    "children": {},
+    "meta": {}
+  },
   "Affix": {
     "type": "Affix",
     "name": "affix",
diff --git a/src/schemes/scheme.ts b/src/schemes/scheme.ts
index 2e81de5..d85f6c8 100644
--- a/src/schemes/scheme.ts
+++ b/src/schemes/scheme.ts
@@ -1,4 +1,23 @@
 export const componentScheme = {
+  "AdaptivePage": {
+    "type": "AdaptivePage",
+    "name": "AdaptivePage",
+    "id": "AdaptivePage",
+    "version": "2.0",
+    "props": {},
+    "class": "",
+    "style": "",
+    "variables": {},
+    "dataSources": {},
+    "functions": {},
+    "orchestrations": {},
+    "events": {},
+    "slots": {},
+    "header": {},
+    "footer": {},
+    "children": {},
+    "meta": {}
+  },
   "Affix": {
     "type": "Affix",
     "name": "affix",
diff --git a/src/stores/useSchemeStore.ts b/src/stores/useSchemeStore.ts
new file mode 100644
index 0000000..a96f16a
--- /dev/null
+++ b/src/stores/useSchemeStore.ts
@@ -0,0 +1,17 @@
+import { defineStore } from 'pinia'
+import { IPageComponent } from '../type/IPageComponent';
+import { ref,computed } from 'vue';
+
+export const useCounterStore = defineStore('counter', () => {
+  const count = ref(0)
+  const schema=ref<IPageComponent>()
+  const doubleCount = computed(() => count.value * 2)
+  function increment() {
+    count.value++
+  }
+  function decrement() {
+    count.value--
+  }
+
+  return { count,schema, doubleCount, increment,decrement }
+})
\ No newline at end of file
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 b194514..b1fd449 100644
--- a/src/type/IComponent.ts
+++ b/src/type/IComponent.ts
@@ -7,5 +7,8 @@ export interface IComponent {
   props: JSON;       
   style: string;
   class: string;
-  children: IComponent[];
+  events:JSON;
+  orchestrations:JSON;
+  version:string;
+  loop:JSON
 }
\ No newline at end of file
diff --git a/src/type/IPageComponent.ts b/src/type/IPageComponent.ts
new file mode 100644
index 0000000..abe2f5f
--- /dev/null
+++ b/src/type/IPageComponent.ts
@@ -0,0 +1,12 @@
+import { IComponent } from "./IComponent";
+
+export interface IPageComponent extends IComponent
+{
+  variables:JSON;
+  dataSources:JSON;
+  functions:JSON;
+  header:JSON;
+  footer:JSON;
+  meta:JSON;
+  children: IPageComponent[];
+}
\ No newline at end of file