diff --git a/src/components/DynamicComponent.vue b/src/components/DynamicComponent.vue index b3762a7..d504d89 100644 --- a/src/components/DynamicComponent.vue +++ b/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.`); // 你可以在这里执行更多的逻辑,例如发出一个事件或调用一个方法 diff --git a/src/components/MainView.vue b/src/components/MainView.vue index 726e7c5..358bf9c 100644 --- a/src/components/MainView.vue +++ b/src/components/MainView.vue @@ -35,7 +35,8 @@
- + {{ store.scheme }} +
@@ -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([]); const list = ref([]); 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 { - /* 测试区域样式 */ -} \ No newline at end of file diff --git a/src/components/TestComponent.vue b/src/components/TestComponent.vue index fdac0a9..f8e0d65 100644 --- a/src/components/TestComponent.vue +++ b/src/components/TestComponent.vue @@ -1,7 +1,7 @@