添加页面组件、添加页面组件接口、添加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
 };