refactor:界面重构、渲染逻辑重构

preview/views/MainView.vue

@@ -0,0 +1,232 @@
+<template>
+  <div class="low_box">
+    <div class="header">
+      <div class="title">可视化系统</div>
+      <div class="web">pc</div>
+      <div class="btn">
+        <a-button type="primary" @click="view">确定</a-button>
+      </div>
+    </div>
+    <div class="content">
+      <div class="left">
+        <div class="title">组件</div>
+        <VueDraggable
+            v-model="store.component"
+            :animation="150"
+            :group="{ name: 'people', pull: 'clone', put: false }"
+            :sort="false"
+            :clone="clone"
+            @start="onStart"
+            @end="onEnd"
+        >
+          <div v-for="item in store.component" :key="item.id" class="tem_btn">
+            {{ item.name }}
+          </div>
+        </VueDraggable>
+      </div>
+      <div ref="targetContent" class="center">
+        <VueDraggable
+            v-model="store.preview"
+            :group="{name: 'designer', pull: 'clone', put: false}"
+            ghost-class="ghost"
+            class="canvas"
+        >
+          <template v-for="item in store.preview" :key="item.id">
+            <component
+                :is="componentsList[item?.code]"
+                :data="item"
+            ></component>
+          </template>
+        </VueDraggable>
+      </div>
+      <!--      <div class="right">-->
+      <!--        <component :is="componentsList[store?.nowComponent?.set]"></component>-->
+      <!--      </div>-->
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import {VueDraggable} from "vue-draggable-plus";
+import {onMounted, ref, watch} from 'vue';
+import {uuid} from 'lsp-uuid';
+import {IPageComponent} from '@/type/IPageComponent.ts';
+import {componentScheme} from '@/schemes/scheme';
+import {useSchemeStore} from '@/stores/useSchemeStore';
+import {IComponent} from "@/type/IComponent";
+
+const componentsList = ref<any[]>([]);
+const list = ref<IPageComponent[]>([]);
+const store = useSchemeStore();
+
+watch(store, (n, e) => {
+  console.log("数据", n);
+});
+
+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": {}
+    }
+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(() => {
+  componentsList.value = Object.values(componentScheme);
+  initScheme();
+  // @ts-ignore
+  list.value.push(baseScheme)
+});
+
+const clone = function (element: IComponent) {
+  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: {},
+  };
+}
+
+const onEnd = (obj: any) => {
+  const {oldDraggableIndex} = obj;
+  store.previewData(store.component[oldDraggableIndex]);
+  store.nowComponentsData(store.component[oldDraggableIndex]);
+};
+
+const onStart = function () {
+  console.log("start")
+}
+
+const view = () => {
+  localStorage.setItem("lowcode", JSON.stringify(store.preview));
+  window.open(location.href.replace("/#/", "/preview/#/"));
+};
+</script>
+
+<style lang="scss" scoped>
+.low_box {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background-color: #f2f2f2;
+
+  .header {
+    height: 65px;
+    background-color: #fff;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 20px;
+  }
+
+  .content {
+    display: flex;
+    flex-direction: row;
+    height: calc(100vh - 66px);
+
+    .left {
+      width: 300px;
+      height: 100%;
+      overflow: hidden;
+      background-color: #fff;
+      border-top: 1px solid #dddddd;
+
+      .title {
+        font-size: 16px;
+        color: #333;
+        line-height: 50px;
+        width: calc(100% - 40px);
+        margin-left: 20px;
+        border-bottom: 1px solid #f2f2f2;
+        clear: both;
+      }
+
+      .tem_btn {
+        padding: 0px 10px;
+        height: 30px;
+        line-height: 30px;
+        text-align: center;
+        font-size: 14px;
+        color: #666;
+        background-color: #f2f2f2;
+        border-radius: 4px;
+        cursor: move;
+        user-select: none;
+        margin-top: 20px;
+        float: left;
+        margin-left: 20px;
+      }
+    }
+
+    .center {
+      flex: 1;
+      padding: 20px;
+      background-color: #f2f2f2;
+
+      .canvas {
+        background-color: #fff;
+        width: 100%;
+        height: 100%;
+      }
+
+      .ghost {
+        background-color: #f00 !important;
+      }
+    }
+
+    .right {
+      width: 300px;
+      height: 100%;
+      overflow: hidden;
+      background-color: #fff;
+      border-top: 1px solid #dddddd;
+    }
+  }
+}
+</style>