fix

preview/views/MainView.vue

@@ -15,7 +15,7 @@
             :animation="150"
             :group="{ name: 'designer', pull: 'clone', put: false }"
             :sort="false"
-            @clone="clone"
+            :clone="clone"
             @start="onStart"
             @end="onEnd"
         >
@@ -36,8 +36,6 @@
             @update="onPreviewUpdate"
             @stop="onPreviewStop"
         >
-          {{ store.previewScheme }}
-
           <DynamicComponent v-for="component in store.previewScheme" :key="component.id" :componentData="component">
             {{ component.id }}
           </DynamicComponent>
@@ -52,7 +50,7 @@
 </template>
 
 <script setup lang="ts">
-
+import {Link} from "@arco-design/web-vue";
 import {DraggableEvent, VueDraggable} from "vue-draggable-plus";
 import {onMounted, ref, watch} from 'vue';
 import {uuid} from 'lsp-uuid';
@@ -134,7 +132,7 @@ onMounted(() => {
   // @ts-ignore
 });
 
-function clone(element: Record<'name' | 'id' | 'type' | 'props' | 'class' | 'text' | 'style' | 'slots', IComponent>) {
+function clone(element: Record<'name' | 'id' | 'type' | 'props' | 'class' | 'text' | 'style' | 'slots'|'visible'|'disable', IComponent>) {
   console.log("clone", element)
   return {
     id: `${element.type}-${uuid()}`,
@@ -146,9 +144,9 @@ function clone(element: Record<'name' | 'id' | 'type' | 'props' | 'class' | 'tex
     text: element.text,
     children: [],
     style: element.style,
-    visible: "",
+    visible: element.visible,
     slots: element.slots,
-    disable: "",
+    disable: element.visible,
     events: {},
     loop: {},
   };

src/components/AdaptivePage.vue

@@ -1,9 +1,9 @@
 <template>
-    <div>
+    <div style="overflow-y: scroll">
         <div style="width: 100%;">
             <slot name="header"></slot>
         </div>
-        <div style="width: 100%;min-height: 480px;background-color: #f7f8fa;">
+        <div style="width: 100%;height: 100%;background-color: #f7f8fa;">
             <slot>
                 MAIN
             </slot>

src/components/DynamicComponent.vue

@@ -1,12 +1,12 @@
 <template>
-  <component @click.stop="handleClick" :id="componentId" :is="componentType" v-bind="componentProps"
+  <component v-if="componentVisible" @click.stop="handleClick" :id="componentId" :is="componentType" v-bind="componentProps"
     :class="componentClass" :style="componentStyle">
     {{ componentText }}
     <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" />
+      <DynamicComponent :componentData="slot" />
     </template>
   </component>
 </template>
@@ -21,18 +21,23 @@ const props = defineProps({
 });
 
 onMounted(() => {
-  // console.log(props.componentData)
+  console.log(props.componentData)
 })
 
 const componentId = computed(() => props.componentData?.id || '');
 const componentType = computed(() => componentMapping[props.componentData?.type] || 'div');
 const componentProps = computed(() => props.componentData?.props || {});
+const componentDisable = computed(() => props.componentData?.disable || false);
+const componentVisible = computed(() => props.componentData?.visible || true);
 const componentChildren = computed(() => props.componentData?.children || []);
 const componentText = computed(() => props.componentData?.text || '');
 const componentClass = computed(() => props.componentData?.class || []);
 const componentStyle = computed(() => props.componentData?.style || []);
 const componentSlots = computed(() => props.componentData?.slots || []);
 
+console.log("disabled", componentDisable.value);
+componentProps.value['disabled'] = componentDisable.value
+
 // @ts-ignore
 const updateScheme = () => {
 

src/components/componentMapping.ts

@@ -1,5 +1,4 @@
 // componentMapping.ts
-import TestComponent from './TestComponent.vue';
 import AdaptivePage from './AdaptivePage.vue';
 import Icon from './Icon.tsx';
 
@@ -31,8 +30,7 @@ import {
 } from '@arco-design/web-vue';
 
 export const componentMapping: { [key: string]: any } = {
-  TestComponent, AdaptivePage,
-  Affix, Alert, Anchor, AnchorLink,
+  AdaptivePage, Affix, Alert, Anchor, AnchorLink,
   AutoComplete, Avatar, AvatarGroup, BackTop,
   Badge, Breadcrumb, BreadcrumbItem, Button,
   ButtonGroup, Card, CardGrid, CardMeta,

src/schemes/components/Link.json

@@ -3,15 +3,19 @@
   "name": "link",
   "id": "link",
   "designer": {},
-  "text": "Link",
+  "text": "链接",
   "props": {
-    "status":""
+    "status":"normal",
+    "href": "https://www.baidu.com",
+    "loading": false,
+    "hoverable": "",
+    "icon": false
   },
   "style": "",
   "class": "",
-  "visible": "",
+  "visible": true,
   "slots": {},
-  "disable": "",
+  "disable": true,
   "events": {},
   "loop": {},
   "children": []

src/schemes/scheme.json

@@ -724,15 +724,19 @@
     "name": "link",
     "id": "link",
     "designer": {},
-    "text": "Link",
+    "text": "链接",
     "props": {
-      "status": ""
+      "status": "normal",
+      "href": "https://www.baidu.com",
+      "loading": false,
+      "hoverable": "",
+      "icon": false
     },
     "style": "",
     "class": "",
-    "visible": "",
+    "visible": "true",
     "slots": {},
-    "disable": "",
+    "disable": "true",
     "events": {},
     "loop": {},
     "children": []

src/schemes/scheme.ts

@@ -724,15 +724,19 @@ export const componentScheme = {
     "name": "link",
     "id": "link",
     "designer": {},
-    "text": "Link",
+    "text": "链接",
     "props": {
-      "status": ""
+      "status": "normal",
+      "href": "https://www.baidu.com",
+      "loading": false,
+      "hoverable": "",
+      "icon": false
     },
     "style": "",
     "class": "",
-    "visible": "",
+    "visible": "true",
     "slots": {},
-    "disable": "",
+    "disable": "true",
     "events": {},
     "loop": {},
     "children": []

tsconfig.json

@@ -36,6 +36,9 @@
   "include": [
     "src/**/*.ts",
     "src/**/*.tsx",
-    "src/**/*.vue"
+    "src/**/*.vue",
+    "preview/**/*.view",
+    "preview/**/*.ts",
+    "preview/**/*.tsx"
   ]
 }