refactor

src/components/DynamicComponent.vue

@@ -0,0 +1,31 @@
+<!-- DynamicComponent.vue -->
+<template>
+  <component :is="componentType" v-bind="componentProps" :class="componentClass" :style="componentStyle">
+    {{ componentText }}
+    <template v-for="child in componentChildren" :key="child.id">
+      <DynamicComponent :component-data="child" />
+    </template>
+  </component>
+
+</template>
+
+<script setup lang="ts">
+import { defineProps, computed, onMounted } from 'vue';
+import { componentMapping } from './componentMapping';
+
+const props = defineProps({
+  componentData: Object
+});
+
+onMounted(() => {
+  console.log(props.componentData)
+})
+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 componentClass = computed(() => props.componentData?.class || []);
+const componentStyle = computed(() => props.componentData?.style || []);
+
+
+</script>

src/components/Icon.tsx

@@ -0,0 +1,12 @@
+// 有点丑陋 但是功能在
+import { h, compile } from 'vue';
+
+type Props = {
+	name: string;
+};
+const Icon = (props: Props) => {
+	return(props.name ? h(compile(`<${props.name} />`)) : null)
+}
+
+export default Icon;
+

src/components/NestedFunction.vue

@@ -11,7 +11,7 @@
 <script setup lang="ts">
 import { useDraggable} from 'vue-draggable-plus'
 import { computed, ref } from 'vue'
-import { IList } from '../type/IList'
+import { IList } from '../type/IComponent'
 
 interface Props {
   modelValue: IList[]

src/components/TestComponent.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="my-component">
+    <slot name="header"></slot>
+    <slot name="extra"></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MyComponent',
+};
+</script>
+
+<style scoped>
+.my-component {
+  /* 添加样式 */
+}
+</style>

src/components/VueDemo.vue

@@ -1,75 +1,91 @@
 <template>
-  <div style="display: flex;flex-direction: row;">
-    <div  ref="el2" style="margin: 5%;display: flex;flex-direction: column;">
-      <div v-for="item in list1" :key="item.id" style="width: 200px;border: 1px solid red;">
-        {{ item.name }}:{{ item.id }}
+  <div>
+    <div style="display: flex;flex-direction: row;">
+
+      <div ref="el2"
+        style="margin: 5%;display: flex;flex-direction: column;overflow-x:scroll;height: 350px;width: 300px;">
+        <div v-for="item in componentsList" :key="item.id" style="height: 30px;width: 300px;border: 1px solid red;">
+          {{ item.name }}:{{ item.id }}
+        </div>
+
       </div>
+
+      <div class="flex justify-between">
+        <NestedFunction v-model="list" class="w-full"></NestedFunction>
+        {{ list }}
+      </div>
+
     </div>
 
-    <div class="flex justify-between">
-      <NestedFunction v-model="list" class="w-full"></NestedFunction>
-      {{ list }}
+    <div style="width: 800px;height:500px">
+      动态渲染
+      <!-- <component :is="componentMapping['Rate']" v-bind="{}"/> -->
+      <DynamicComponent v-for="component in list" :key="component.id" :componentData="component">
+        {{ component.id }}
+      </DynamicComponent>
     </div>
+    <TestComponent>
+      <template #header>
+        <div>
+          header
+        </div>
+      </template>
+    </TestComponent>
   </div>
 
+
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import NestedFunction from './NestedFunction.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 { componentScheme } from '../schemes/scheme.ts';
+import TestComponent from './TestComponent.vue';
+const componentsList = ref<any[]>([]);
 
-
-const list1 = ref([
-{
-    type: 'Switch',
-    name: '开关',
-    id: 'switch',
-    designer: '',
-    props: {},
-    style: '',
-    class: '',
-    children: []
-  },
-  {
-    type: 'Rate',
-    name: '开关',
-    id: 'rate',
-    designer: '',
-    props: {},
-    style: '',
-    class: '',
-    children: []
-  },
-  {
-    type: 'Button',
-    name: '按钮',
-    id: 'button',
-    designer: '',
-    props: {},
-    style: '',
-    class: '',
-    children: []
-  }
-  
-])
-const list=ref([])
+const list = ref<IComponent[]>([])
 
 const el2 = ref()
 
-useDraggable(el2, list1, {
+
+onMounted(() => {
+  const loadedComponents = Object.values(componentScheme)
+  componentsList.value = loadedComponents
+  // console.log(loadedComponents)
+
+});
+
+
+
+useDraggable(el2, componentsList, {
   animation: 150,
   group: { name: 'designer', pull: 'clone', put: false },
   sort: false,
   onClone() {
     console.log('clone')
   },
-  clone(element: Record<'id'|'children', any>) {
+  clone(element: Record<'id' | 'name' | 'type' | 'children' | 'props' | 'text' | 'class' | 'style', any>) {
     return {
       id: `${element.id}-${uuid()}`,
-      children:[]
+      name: element.name,
+      type: element.type,
+      props: element.props,
+      class: element.class,
+      designer: '',
+      text: element.text,
+      children: [],
+      style: element.style,
+      visible: "",
+      slots: {},
+      disable: "",
+      events: {},
+      loop: {},
     }
   }
 })
-</script>
+</script>

src/components/componentMapping.ts

@@ -0,0 +1,60 @@
+// componentMapping.ts
+import TestComponent from './TestComponent.vue';
+import Icon from './Icon.tsx';
+
+import {
+  Affix, Alert, Anchor, AnchorLink,
+  AutoComplete, Avatar, AvatarGroup, BackTop,
+  Badge, Breadcrumb, BreadcrumbItem, Button,
+  ButtonGroup, Card, CardGrid, CardMeta,
+  Calendar, Carousel, CarouselItem, Cascader,
+  CascaderPanel, Checkbox, CheckboxGroup, Collapse,
+  CollapseItem, Comment, ColorPicker, ConfigProvider,
+  Descriptions, DescriptionsItem, Divider, Drawer,
+  Empty, Form, FormItem, Grid,
+  Col, Row, GridItem,
+  InputNumber, InputTag, Link, List,
+  ListItem, ListItemMeta, Mention, Menu,
+  MenuItem, MenuItemGroup, SubMenu, Message,
+  Modal, Notification, PageHeader, Pagination,
+  Popconfirm, Popover, Progress, Radio,
+  RadioGroup, Rate, ResizeBox, Result,
+  Scrollbar, Select, Optgroup, Option,
+  Skeleton, SkeletonLine, SkeletonShape, Slider,
+  Space, Spin, Split, Statistic,
+  Countdown, Steps, Step, Switch,
+  Tabs, TabPane, Tag, Textarea,
+  TimePicker, Timeline, TimelineItem, Tooltip,
+  Transfer, Tree, TreeSelect, Trigger,Typography,TypographyParagraph, TypographyText, TypographyTitle,
+  Upload, OverflowList, VerificationCode, Watermark
+} from '@arco-design/web-vue';
+
+export const componentMapping: { [key: string]: any } = {
+  TestComponent,
+  Affix, Alert, Anchor, AnchorLink,
+  AutoComplete, Avatar, AvatarGroup, BackTop,
+  Badge, Breadcrumb, BreadcrumbItem, Button,
+  ButtonGroup, Card, CardGrid, CardMeta,
+  Calendar, Carousel, CarouselItem, Cascader,
+  CascaderPanel, Checkbox, CheckboxGroup, Collapse,
+  CollapseItem, Comment, ColorPicker, ConfigProvider,
+  Descriptions, DescriptionsItem, Divider, Drawer,
+  Empty, Form, FormItem, Grid,
+  Col, Row, GridItem, Icon,
+  InputNumber, InputTag, Link, List,
+  ListItem, ListItemMeta, Mention, Menu,
+  MenuItem, MenuItemGroup, SubMenu, Message,
+  Modal, Notification, PageHeader, Pagination,
+  Popconfirm, Popover, Progress, Radio,
+  RadioGroup, Rate, ResizeBox, Result,
+  Scrollbar, Select, Optgroup, Option,
+  Skeleton, SkeletonLine, SkeletonShape, Slider,
+  Space, Spin, Split, Statistic,
+  Countdown, Steps, Step, Switch,
+  Tabs, TabPane, Tag, Textarea,
+  TimePicker, Timeline, TimelineItem, Tooltip,
+  Transfer, Tree, TreeSelect, Trigger,Typography,TypographyParagraph, TypographyText, TypographyTitle,
+  Upload, OverflowList, VerificationCode, Watermark
+};
+
+