添加页面组件、添加页面组件接口、添加pinia

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>

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

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({

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>
+<template>
+    <div>{{ store.count }}</div>
+    <a-button @click=add>add</a-button>
+    <a-button @click=sub>sub</a-button>
+
+</template>

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

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

src/schemes/components/AdaptivePage.json

@@ -1,7 +1,11 @@
 {
     "type": "AdaptivePage",
+    "name":"AdaptivePage",
+    "id":"AdaptivePage",
     "version": "2.0",
     "props": {},
+    "class":"",
+    "style":"",
     "variables": {},
     "dataSources":{},
     "functions" : {},

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",

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",

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 }
+})

src/type/IComponent.js

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

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
 }

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