初始化绑定页面组件，并写入scheme到pinia

src/components/DynamicComponent.vue

@@ -19,7 +19,7 @@ const props = defineProps({
 });
 
 onMounted(() => {
-  console.log(props.componentData)
+  // console.log(props.componentData)
 })
 
 const componentId = computed(() => props.componentData?.id || '');
@@ -31,6 +31,9 @@ const componentClass = computed(() => props.componentData?.class || []);
 const componentStyle = computed(() => props.componentData?.style || []);
 const componentSlots = computed(() => props.componentData?.slots || []);
 
+const updateScheme=()=>{
+  
+}
 const handleClick = () => {
   console.log(`Div with id ${componentId.value} was clicked.`);
   // 你可以在这里执行更多的逻辑，例如发出一个事件或调用一个方法

src/components/MainView.vue

@@ -35,7 +35,8 @@
       </div>
       <!-- 测试区域 -->
       <div class="test-area">
-        <TestComponent></TestComponent>
+        {{ store.scheme }}
+        <!-- <TestComponent></TestComponent> -->
       </div>
     </div>
   </div>
@@ -50,14 +51,44 @@ import { useDraggable } from 'vue-draggable-plus';
 import { uuid } from 'lsp-uuid';
 import { IPageComponent } from '../type/IPageComponent';
 import { componentScheme } from '../schemes/scheme';
+import { useSchemeStore } from '../stores/useSchemeStore'
 
+const baseScheme =
+{
+  "type": "AdaptivePage",
+  "name": "AdaptivePage",
+  "id": uuid(),
+  "version": "2.0",
+  "props": {},
+  "class": "",
+  "style": "",
+  "variables": {},
+  "dataSources": {},
+  "functions": {},
+  "orchestrations": {},
+  "events": {},
+  "slots": {},
+  "header": {},
+  "footer": {},
+  "children": {},
+  "meta": {}
+}
 const componentsList = ref<any[]>([]);
 const list = ref<IPageComponent[]>([]);
 const el2 = ref();
+const store = useSchemeStore()
+
+const initScheme = () => {
+
+  store.initScheme(baseScheme)
+}
 
 onMounted(() => {
   const loadedComponents = Object.values(componentScheme);
   componentsList.value = loadedComponents;
+  initScheme();
+  // @ts-ignore
+  list.value.push(baseScheme)
 });
 
 useDraggable(el2, componentsList, {
@@ -93,17 +124,20 @@ useDraggable(el2, componentsList, {
   display: flex;
   flex-wrap: nowrap;
   align-items: stretch;
-  width: 100%; /* Ensure the container takes full width */
+  width: 100%;
+  /* Ensure the container takes full width */
 }
 
 .component-area {
   flex-grow: 1;
-  max-width: 72px; /* Fixed width or can be adjusted */
+  max-width: 72px;
+  /* Fixed width or can be adjusted */
 }
 
 .component-list {
   flex-grow: 1;
-  max-width: 250px; /* Fixed width or can be adjusted */
+  max-width: 250px;
+  /* Fixed width or can be adjusted */
 }
 
 .component-list-inner {
@@ -141,8 +175,4 @@ useDraggable(el2, componentsList, {
   overflow-y: auto;
   border: 1px solid black;
 }
-
-.test-area {
-  /* 测试区域样式 */
-}
 </style>

src/components/TestComponent.vue

@@ -1,7 +1,7 @@
 <script setup>
-import { useCounterStore } from '@/stores/useSchemeStore'
+import { useSchemeStore } from '@/stores/useSchemeStore'
 // 可以在组件中的任意位置访问 `store` 变量 ✨
-const store = useCounterStore()
+const store = useSchemeStore()
 function add() {
     store.increment()
 }

src/stores/useSchemeStore.ts

@@ -2,7 +2,7 @@ import { defineStore } from 'pinia'
 import { IPageComponent } from '../type/IPageComponent';
 import { ref,computed } from 'vue';
 
-export const useCounterStore = defineStore('counter', () => {
+export const useSchemeStore = defineStore('counter', () => {
   const count = ref(0)
   const scheme=ref<IPageComponent>()
   const doubleCount = computed(() => count.value * 2)