refactor:界面重构、渲染逻辑重构
This commit is contained in:
@ -1,199 +0,0 @@
|
||||
<template>
|
||||
<div class="flex-container">
|
||||
<div class="component-area">
|
||||
compoent
|
||||
</div>
|
||||
<!-- 组件区域 -->
|
||||
<div class="component-list">
|
||||
<div ref="el2" class="component-list-inner">
|
||||
<div v-for="item in componentsList" :key="item.id" class="component-item">
|
||||
{{ item.name }}:{{ item.id }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="design-area">
|
||||
<a-row>
|
||||
<a-col flex="80%">
|
||||
<div class="dragArea">
|
||||
<div>
|
||||
<NestedFunction v-model="list"></NestedFunction>
|
||||
{{ list }}
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col flex="20%">
|
||||
<div class="property-editor">
|
||||
<PropertyEditor :scheme="scheme"></PropertyEditor>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 渲染区 -->
|
||||
<div class="render-area">
|
||||
动态渲染
|
||||
<DynamicComponent v-for="component in list" :key="component.id" :componentData="component">
|
||||
{{ component.id }}
|
||||
</DynamicComponent>
|
||||
</div>
|
||||
<!-- 测试区域 -->
|
||||
<div class="test-area">
|
||||
{{ store.scheme }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
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 { IPageComponent } from '../type/IPageComponent';
|
||||
import { componentScheme } from '../schemes/scheme';
|
||||
import { useSchemeStore } from '../stores/useSchemeStore'
|
||||
import PropertyEditor from './PropertyEditor.vue';
|
||||
|
||||
const scheme = ref<any>()
|
||||
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<any[]>([]);
|
||||
const list = ref<IPageComponent[]>([]);
|
||||
const el2 = ref();
|
||||
const store = useSchemeStore()
|
||||
|
||||
store.$onAction(
|
||||
({
|
||||
name, // action 名称
|
||||
after, // 在 action 返回或解决后的钩子
|
||||
onError, // action 抛出或拒绝的钩子
|
||||
}) => {
|
||||
after((result) => {
|
||||
scheme.value = result
|
||||
})
|
||||
// 如果 action 抛出或返回一个拒绝的 promise，这将触发
|
||||
onError((error) => {
|
||||
console.warn(
|
||||
`Failed "${name}" after\nError: ${error}.`
|
||||
)
|
||||
})
|
||||
}
|
||||
)
|
||||
//初始化scheme
|
||||
const initScheme = () => {
|
||||
store.initScheme([baseScheme])
|
||||
}
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
const loadedComponents = Object.values(componentScheme);
|
||||
componentsList.value = loadedComponents;
|
||||
initScheme();
|
||||
// @ts-ignore
|
||||
list.value.push(baseScheme)
|
||||
});
|
||||
|
||||
useDraggable(el2, componentsList, {
|
||||
animation: 150,
|
||||
group: { name: 'designer', pull: 'clone', put: false },
|
||||
sort: false,
|
||||
onClone() {
|
||||
console.log('clone');
|
||||
},
|
||||
clone(element) {
|
||||
return {
|
||||
id: `${element.type}-${uuid()}`,
|
||||
name: element.name,
|
||||
type: element.type,
|
||||
props: element.props,
|
||||
class: element.class,
|
||||
designer: '',
|
||||
text: element.text,
|
||||
children: [],
|
||||
style: element.style,
|
||||
visible: "",
|
||||
slots: element.slots,
|
||||
disable: "",
|
||||
events: {},
|
||||
loop: {},
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.flex-container {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: stretch;
|
||||
width: 100%;
|
||||
/* Ensure the container takes full width */
|
||||
}
|
||||
|
||||
.component-area {
|
||||
flex-grow: 1;
|
||||
max-width: 72px;
|
||||
/* Fixed width or can be adjusted */
|
||||
}
|
||||
|
||||
.component-list {
|
||||
flex-grow: 1;
|
||||
max-width: 250px;
|
||||
/* Fixed width or can be adjusted */
|
||||
}
|
||||
|
||||
.component-list-inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
height: 960px;
|
||||
}
|
||||
|
||||
.component-item {
|
||||
height: 30px;
|
||||
width: 250px;
|
||||
border: 1px solid red;
|
||||
}
|
||||
|
||||
.design-area {
|
||||
flex-grow: 1;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.dragArea {
|
||||
overflow-x: auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 500px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.property-editor {
|
||||
border: 1px red solid;
|
||||
min-height: 500px;
|
||||
}
|
||||
|
||||
.render-area {
|
||||
height: 500px;
|
||||
overflow-y: auto;
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user