fix:卡片scheme修改与依赖修改

components.d.ts

@@ -7,19 +7,11 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
-    AButton: typeof import('@arco-design/web-vue')['Button']
-    AInput: typeof import('@arco-design/web-vue')['Input']
-    ARate: typeof import('@arco-design/web-vue')['Rate']
-    AScrollbar: typeof import('@arco-design/web-vue')['Scrollbar']
-    ASwitch: typeof import('@arco-design/web-vue')['Switch']
-    ATable: typeof import('@arco-design/web-vue')['Table']
     DynamicComponent: typeof import('./src/components/DynamicComponent.vue')['default']
     ElTable: typeof import('./src/components/ElTable.vue')['default']
-    FunctionalIcons: typeof import('./src/components/FunctionalIcons.vue')['default']
     NestedDirective: typeof import('./src/components/NestedDirective.vue')['default']
     NestedFunction: typeof import('./src/components/NestedFunction.vue')['default']
     TestComponent: typeof import('./src/components/TestComponent.vue')['default']
-    TestParentComponent: typeof import('./src/components/TestParentComponent.vue')['default']
     VueDemo: typeof import('./src/components/VueDemo.vue')['default']
   }
 }

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@arco-plugins/vite-vue": "^1.4.5",
         "@vueuse/core": "^10.11.0",
+        "js-yaml": "^4.1.0",
         "lodash": "^4.17.21",
         "lsp-uuid": "^3.2.0",
         "ts-node": "^10.9.2",
@@ -1600,6 +1601,12 @@
       "resolved": "https://registry.npmmirror.com/arg/-/arg-4.1.3.tgz",
       "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA=="
     },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://repo.bingosoft.net/repository/npm/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "license": "Python-2.0"
+    },
     "node_modules/b-tween": {
       "version": "0.3.3",
       "resolved": "https://registry.npmmirror.com/b-tween/-/b-tween-0.3.3.tgz",
@@ -2296,6 +2303,18 @@
       "integrity": "sha512-WriZw1luRMlmV3LGJaR6QOJjWwgLUTf89OwT2lUOyjX2dJGBwgmIkbcz+7WFZjrZM635JOIR517++e/67CP9dQ==",
       "dev": true
     },
+    "node_modules/js-yaml": {
+      "version": "4.1.0",
+      "resolved": "https://repo.bingosoft.net/repository/npm/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
     "node_modules/jsesc": {
       "version": "2.5.2",
       "resolved": "https://registry.npmmirror.com/jsesc/-/jsesc-2.5.2.tgz",

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@arco-plugins/vite-vue": "^1.4.5",
     "@vueuse/core": "^10.11.0",
+    "js-yaml": "^4.1.0",
     "lodash": "^4.17.21",
     "lsp-uuid": "^3.2.0",
     "ts-node": "^10.9.2",

src/components/DynamicComponent.vue

@@ -5,6 +5,11 @@
     <template v-for="child in componentChildren" :key="child.id">
       <DynamicComponent :component-data="child" />
     </template>
+
+    <template v-for="(slot,key, index) in componentSlots" :key="index" v-slot:[key]>
+      <DynamicComponent :component-data="slot" />
+    </template>
+
   </component>
 
 </template>
@@ -23,9 +28,11 @@ onMounted(() => {
 const componentType = computed(() => componentMapping[props.componentData?.type] || 'div');
 const componentProps = computed(() => props.componentData?.props || {});
 const componentChildren = computed(() => props.componentData?.children || []);
-const componentText = computed(() => props.componentData?.text ||'');
+const componentText = computed(() => props.componentData?.text || '');
 const componentClass = computed(() => props.componentData?.class || []);
 const componentStyle = computed(() => props.componentData?.style || []);
+const componentSlots = computed(() => props.componentData?.slots || []);
+
 
 
 </script>

src/components/TestComponent.vue

@@ -1,18 +1,29 @@
+<!-- DynamicSlotsComponent.vue -->
 <template>
-  <div class="my-component">
+  <div>
+    <!-- 动态插槽 -->
+
+    <div>
       <slot name="header"></slot>
-    <slot name="extra"></slot>
+    </div>
+
+    <div>
+      <slot name="main"></slot>
+    </div>
+    
+    <div>
+      <slot name="footer"></slot>
+    </div>
+
+
   </div>
 </template>
 
-<script>
+<script setup>
-export default {
+import { defineProps } from 'vue';
-  name: 'MyComponent',
-};
-</script>
 
-<style scoped>
+// 接收一个动态插槽名作为 prop
-.my-component {
+const props = defineProps({
-  /* 添加样式 */
+  dynamicSlotName: String
-}
+});
-</style>
+</script>

src/components/VueDemo.vue

@@ -1,5 +1,9 @@
 <template>
   <div>
+
+
+
+    
     <div style="display: flex;flex-direction: row;">
 
       <div ref="el2"
@@ -24,14 +28,20 @@
         {{ component.id }}
       </DynamicComponent>
     </div>
-    <TestComponent>
-      <template #header>
     <div>
-          header
+
-        </div>
+    <TestComponent >
+      <!-- 默认插槽内容 -->
+      <template #default>
+        Default slot content.
+      </template>
+      <!-- 动态插槽内容 -->
+      <template v-for="(slot, index) in dynamicSlotContents" :key="index" v-slot:[slot.slotName]>
+        {{ slot.content }}
       </template>
     </TestComponent>
   </div>
+  </div>
 
 
 </template>
@@ -41,16 +51,25 @@ import { onMounted, ref } from 'vue';
 import NestedFunction from './NestedFunction.vue';
 import DynamicComponent from './DynamicComponent.vue';
 
-import { useDraggable } from 'vue-draggable-plus'
+import { useDraggable } from 'vue-draggable-plus';
 import { uuid } from 'lsp-uuid';
 import { IComponent } from '../type/IComponent.ts';
 import { componentScheme } from '../schemes/scheme.ts';
 import TestComponent from './TestComponent.vue';
+
+const dynamicSlotContents = ref([
+  { slotName: 'header', content: 'Header content' },
+  { slotName: 'footer', content: 'Footer content' },
+  { slotName: 'main', content: 'Main content' }
+]);
+
+
 const componentsList = ref<any[]>([]);
 
-const list = ref<IComponent[]>([])
 
-const el2 = ref()
+const list = ref<IComponent[]>([]);
+
+const el2 = ref();
 
 
 onMounted(() => {
@@ -69,7 +88,7 @@ useDraggable(el2, componentsList, {
   onClone() {
     console.log('clone')
   },
-  clone(element: Record<'id' | 'name' | 'type' | 'children' | 'props' | 'text' | 'class' | 'style', any>) {
+  clone(element: Record<'id' | 'name' | 'type' | 'children' | 'props' | 'text' | 'class' | 'style'|'slots', any>) {
     return {
       id: `${element.id}-${uuid()}`,
       name: element.name,
@@ -81,7 +100,7 @@ useDraggable(el2, componentsList, {
       children: [],
       style: element.style,
       visible: "",
-      slots: {},
+      slots: element.slots,
       disable: "",
       events: {},
       loop: {},

src/schemes/components/Card.json

@@ -4,15 +4,32 @@
   "id": "card",
   "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.",
-  "props": {"title":"Card"},
+  "props": {
+    "title": "Card"
+  },
   "style": "width:360px",
   "class": "arco-card arco-card-size-medium arco-card-bordered",
   "visible": "",
+  "slots": {
+    "extra":{
+      "id": "avatar-9f8289a12910000",
+      "name": "avatar",
+      "type": "Avatar",
+      "props": {},
+      "class": "",
+      "designer": "",
+      "text": "",
+      "children": [],
+      "style": "",
+      "visible": "",
       "slots": {},
       "disable": "",
       "events": {},
+      "loop": {}
+    }
+  },
+  "disable": "",
+  "events": {},
   "loop": {},
   "children": []
 }
-
-

src/schemes/scheme.json

@@ -238,9 +238,26 @@
     "style": "width:360px",
     "class": "arco-card arco-card-size-medium arco-card-bordered",
     "visible": "",
+    "slots": {
+      "extra": {
+        "id": "avatar-9f8289a12910000",
+        "name": "avatar",
+        "type": "Avatar",
+        "props": {},
+        "class": "",
+        "designer": "",
+        "text": "",
+        "children": [],
+        "style": "",
+        "visible": "",
         "slots": {},
         "disable": "",
         "events": {},
+        "loop": {}
+      }
+    },
+    "disable": "",
+    "events": {},
     "loop": {},
     "children": []
   },

src/schemes/scheme.ts

@@ -238,9 +238,26 @@ export const componentScheme = {
     "style": "width:360px",
     "class": "arco-card arco-card-size-medium arco-card-bordered",
     "visible": "",
+    "slots": {
+      "extra": {
+        "id": "avatar-9f8289a12910000",
+        "name": "avatar",
+        "type": "Avatar",
+        "props": {},
+        "class": "",
+        "designer": "",
+        "text": "",
+        "children": [],
+        "style": "",
+        "visible": "",
         "slots": {},
         "disable": "",
         "events": {},
+        "loop": {}
+      }
+    },
+    "disable": "",
+    "events": {},
     "loop": {},
     "children": []
   },