refactor:界面重构、渲染逻辑重构
This commit is contained in:
@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import MainView from './components/MainView.vue';
|
||||
import MainView from "../preview/views/MainView.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
@ -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>
|
||||
@ -2,6 +2,7 @@ import { createApp } from 'vue'
|
||||
import './style.css'
|
||||
import App from './App.vue'
|
||||
import ArcoVue from '@arco-design/web-vue';
|
||||
import router from "./router";
|
||||
// 额外引入图标库
|
||||
import ArcoVueIcon from '@arco-design/web-vue/es/icon';
|
||||
import '@arco-design/web-vue/dist/arco.css';
|
||||
@ -12,5 +13,6 @@ const pinia = createPinia()
|
||||
const app = createApp(App);
|
||||
app.use(pinia)
|
||||
app.use(ArcoVue);
|
||||
app.use(router)
|
||||
app.use(ArcoVueIcon);
|
||||
app.mount('#app');
|
||||
15
src/router.ts
Normal file
15
src/router.ts
Normal file
@ -0,0 +1,15 @@
|
||||
import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
|
||||
|
||||
const routes: Array<RouteRecordRaw> = [
|
||||
{
|
||||
path: "/:pathMatch(.*)*",
|
||||
component: () => import("../preview/views/MainView.vue"),
|
||||
},
|
||||
];
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHashHistory(),
|
||||
routes,
|
||||
});
|
||||
|
||||
export default router;
|
||||
18
src/router/index.ts
Normal file
18
src/router/index.ts
Normal file
@ -0,0 +1,18 @@
|
||||
import { createRouter, createWebHashHistory } from "vue-router";
|
||||
const routes = [
|
||||
// {
|
||||
// path: "/lowcode",
|
||||
// name: "活动生成",
|
||||
// meta: {
|
||||
// title: "活动生成",
|
||||
// icon: "Calendar",
|
||||
// },
|
||||
// component: () => import("@/pages/lowCode/index.vue"),
|
||||
// },
|
||||
];
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHashHistory(),
|
||||
routes,
|
||||
});
|
||||
export { router, routes };
|
||||
@ -22,16 +22,19 @@ function findObjectById(obj, targetId) {
|
||||
return null; // 如果没有找到，则返回null
|
||||
}
|
||||
export const useSchemeStore = defineStore('scheme', () => {
|
||||
const scheme = ref<IPageComponent[]>()
|
||||
// const componnets = ref<IPageComponent[]>()
|
||||
const previewData = ref<IPageComponent[]>()
|
||||
const nowComponentsData = ref<IPageComponent>()
|
||||
|
||||
function initScheme(value) {
|
||||
scheme.value = value
|
||||
previewData.value = value
|
||||
}
|
||||
function getSchemeObj(id) {
|
||||
return findObjectById(scheme.value, id)
|
||||
return findObjectById(previewData.value, id)
|
||||
}
|
||||
function updateScheme(id,obj)
|
||||
function updateScheme()
|
||||
{
|
||||
|
||||
}
|
||||
return { scheme, initScheme, getSchemeObj,updateScheme }
|
||||
return { previewData,nowComponentsData, initScheme, getSchemeObj,updateScheme }
|
||||
})
|
||||
Reference in New Issue
Block a user