fix:工具栏绘制位置计算，组件宽度，高度自动占满

.env

@@ -0,0 +1 @@
+VITE_BASE_URL=/

components.d.ts

@@ -8,6 +8,7 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     AdaptivePage: typeof import('./src/components/AdaptivePage.vue')['default']
+    ComponentHeader: typeof import('./src/components/DynamicComponent/ComponentHeader.vue')['default']
     DynamicComponent: typeof import('./src/components/DynamicComponent.vue')['default']
     NestedFunction: typeof import('./src/components/NestedFunction.vue')['default']
     PropertyEditor: typeof import('./src/components/PropertyEditor.vue')['default']

package.json

@@ -26,6 +26,7 @@
   },
   "devDependencies": {
     "@arco-design/web-vue": "^2.56.0",
+    "@types/lodash": "^4.17.13",
     "@types/node": "^22.9.0",
     "@vitejs/plugin-vue": "^5.0.5",
     "concurrently": "^9.1.0",

preview/store/index.ts

@@ -1,5 +0,0 @@
-import { createPinia } from 'pinia';
-
-const store = createPinia();
-
-export default store;

preview/views/Preview.vue

@@ -1,27 +0,0 @@
-<template>
-  <div v-if="!isEmpty(data)" class="box">
-    <template v-for="item in data" :key="item.id">
-      <!--      <component :is="componentsList[item.code]" :data="item"></component>-->
-    </template>
-  </div>
-</template>
-<script setup lang="ts">
-import {onBeforeMount, shallowRef, ref} from "vue";
-import {isEmpty} from "lodash";
-import _ from "lodash";
-
-const data = shallowRef<any>({});
-onBeforeMount(() => {
-  // 接收客户端posemessage传递过来的消息
-  const obj = JSON.parse(localStorage.getItem("lowcode") || "");
-  console.log("数据哈哈哈", obj);
-  data.value = obj;
-});
-</script>
-<style lang="scss" scoped>
-.box {
-  width: 1000px;
-  height: 600px;
-  overflow: hidden;
-}
-</style>

src/App.vue

@@ -1,12 +1,7 @@
 <script setup lang="ts">
-import MainView from "../preview/views/MainView.vue";
 </script>
-
 <template>
-  <div>
+    <router-view></router-view>
-    <MainView></MainView>
-  </div>
-
 </template>
 
 <style scoped>

src/components/AdaptivePage.vue

@@ -1,27 +1,25 @@
 <template>
-    <div style="overflow-y: scroll">
+  <div style="height:100%;width:100%;">
-        <div style="width: 100%;">
+    <div style="width: 100%;">
-            <slot name="header"></slot>
+      <slot name="header"></slot>
-        </div>
-        <div style="width: 100%;height: 100%;background-color: #f7f8fa;">
-            <slot>
-                MAIN
-            </slot>
-        </div>
-
-        <div style="width: 100%;">
-            <slot name="footer"></slot>
-        </div>
-
     </div>
+    <div style="width: 100%;height: 100%;background-color: #f7f8fa;overflow-y: auto">
+      MAIN
+      <slot>
+      </slot>
+    </div>
+
+    <div style="width: 100%;">
+      <slot name="footer"></slot>
+    </div>
+
+  </div>
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import {ref} from 'vue';
 const dataSources = ref({})
 
-onMounted(()=>
+onMounted(() => {
-{
-
 })
 </script>

src/components/DynamicComponent.vue

@@ -1,64 +1,114 @@
 <template>
   <div
       style="width: fit-content; display: flex; flex-direction: column; position: relative;"
-      v-if="store.nowComponentsData!==null&&(componentVisible || store.designerMode)"
+      v-if="store.nowComponentsData !== null && (componentVisible || store.designerMode)"
       :id="componentId"
-      :class="[
+      :class="['dynamic-component',{ 'hover-state': isHovered && store.designerMode },
-      'dynamic-component',
+      { 'click-state': componentSelected && store.designerMode &&isComponent }
-      { 'hover-state': isHovered },
-      { 'click-state': componentSelected }
     ]"
       @click.stop="handleClick"
       @mouseover="isHovered = true"
       @mouseleave="isHovered = false"
   >
-    <div v-if="componentSelected" class="component-header" :style="headerStyle">
+    <div v-if="isHovered && store.designerMode" id="header" class="component-header">
       <span>{{ componentName }}</span>
-      <button style="color: #1057CC" @click="handleEditFunc">编辑</button>
+    </div>
-      <button style="color: #1057CC" @click="handleDeleteFunc">删除</button>
+    <div v-if="componentSelected && store.designerMode&&isComponent" class="component-header" :style="headerStyle">
+      <div style="background-color:#3457cc;color: #ffffff;padding: 5px ;margin-right: 2px">{{ componentName }}</div>
+      <div
+          style="background-color:#3457cc;color:#ffffff;padding: 6px 5px 5px 5px;display: flex;width: fit-content;flex-wrap: nowrap">
+        <icon-copy class="clickable" size="20"/>
+        <icon-edit class="clickable" @click="handleEditFunc" size="20"/>
+        <icon-delete class="clickable" @click="handleDeleteFunc" size="20"/>
+      </div>
     </div>
     <div class="component-content">
-      <component
+      <VueDraggable
-          :is="componentType"
+          v-model="componentChildren"
-          v-bind="componentPropsWithDisabled"
+          :animation="150"
-          :class="componentClass"
+          group="designer"
-          :style="componentStyle"
+          ghost-class="ghost"
+          chosen-class="chosen"
+          class="canvas"
+          @start="onComponentStart"
+          @update="onComponentUpdate"
+          @stop="onComponentEnd"
+          @add="onComponentAdd"
       >
-        {{ componentText }}
+        <component
-        <template v-for="child in componentChildren" :key="child.id">
+            :is="componentType"
-          <DynamicComponent :componentData="child"/>
+            v-bind="componentPropsWithDisabled"
-        </template>
+            :class="componentClass"
-        <template v-for="(slot, key, index) in componentSlots" :key="index" v-slot:[key]>
+            :style="componentStyle"
-          <DynamicComponent :component-data="slot"/>
+        >
-        </template>
+          {{ componentText }}
-      </component>
+          <template v-for="child in componentChildren" :key="child.id">
+            <DynamicComponent :componentData="child"/>
+          </template>
+          <template v-for="(slot, key, index) in componentSlots" :key="key" v-slot:[key]>
+            <DynamicComponent :component-data="slot"/>
+          </template>
+        </component>
+      </VueDraggable>
+
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import {defineProps, ref, computed, onMounted, watch, markRaw, nextTick} from 'vue';
+import {ref, computed, onMounted, watch, markRaw, nextTick} from 'vue';
 import {componentMapping} from './componentMapping';
 import {useSchemeStore} from '../stores/useSchemeStore';
+import {DraggableEvent, VueDraggable} from "vue-draggable-plus";
 
 const store = useSchemeStore();
 const props = defineProps({
   componentData: Object
 });
-
+const isComponent = ref(true)
 const componentId = computed(() => props.componentData?.id || '');
 const componentName = computed(() => props.componentData?.name || 'Unnamed Component');
 const componentType = computed(() => markRaw(componentMapping[props.componentData?.type]) || 'div');
 const componentProps = computed(() => props.componentData?.props || {});
-const componentDisable = computed(() => props.componentData?.disable || false);
+const componentDisable = computed(() => props.componentData?.disable);
 const componentVisible = computed(() => props.componentData?.visible);
-const componentChildren = computed(() => props.componentData?.children || []);
+const componentChildren = ref(props.componentData?.children);
 const componentText = computed(() => props.componentData?.text || '');
 const componentClass = computed(() => props.componentData?.class || []);
 const componentStyle = computed(() => props.componentData?.style || []);
 const componentSlots = computed(() => props.componentData?.slots || {});
 const componentSelected = computed(() => store.nowComponentsData?.id && props.componentData?.id === store.nowComponentsData?.id);
 
+// 设计器控制参数
+const componentMove = computed(() => props.componentData?.designer?.move | false);
+const componentMoveSibling = computed(() => props.componentData?.designer?.moveSibling | false);
+const componentSelect = computed(() => props.componentData?.designer?.select | false);
+const componentDel = computed(() => props.componentData?.designer?.del | false);
+const componentDynamic = computed(() => props.componentData?.designer?.dynamic | false);
+
+onMounted(() => {
+  isComponent.value = props.componentData?.type != 'AdaptivePage';
+  adjustHeaderPosition();
+});
+
+const onComponentStart = (event: DraggableEvent) => {
+  console.log("onComponentStart", event);
+}
+
+const onComponentEnd = (event: DraggableEvent) => {
+  console.log("onComponentEnd", event);
+
+}
+const onComponentAdd = (event: DraggableEvent) => {
+  console.log("onComponentAdd", event);
+  let obj = getCurrentSchemeObj()
+  obj.children = componentChildren.value
+  store.updateScheme(obj.id, obj)
+}
+const onComponentUpdate = (event: DraggableEvent) => {
+  console.log("onComponentUpdate", event);
+
+}
 // 确保 componentProps 包含 disabled 属性
 const componentPropsWithDisabled = computed(() => ({
   ...componentProps.value,
@@ -75,17 +125,18 @@ const isHovered = ref(false);
 
 const handleClick = () => {
   const currentComponent = getCurrentSchemeObj();
+  adjustHeaderPosition()
   if (currentComponent) {
-
     store.updateNowScheme(currentComponent);
     console.log(`Component with id ${currentComponent?.id} was clicked.`);
     // 你可以在这里执行更多的逻辑，例如发出一个事件或调用一个方法
   }
-
 };
+
 const handleEditFunc = () => {
-
+  // 编辑功能
 };
+
 const handleDeleteFunc = () => {
   store.deleteScheme(componentId.value);
 };
@@ -95,17 +146,20 @@ const adjustHeaderPosition = () => {
   const componentEl = document.getElementById(componentId.value);
   if (!componentEl) return;
 
-  const headerEl = componentEl.querySelector('.component-header');
+  const headerEl = document.getElementById('header')
   if (!headerEl) return;
 
   const componentRect = componentEl.getBoundingClientRect();
   const headerRect = headerEl.getBoundingClientRect();
+  headerRect.height=headerRect.height+12
+  headerRect.width=headerRect.width+9
 
   let top = 0;
   let left = 0;
+  let justification = '';
 
   // 获取最外层组件渲染区域的边界
-  const containerEl = document.getElementById('renderArea');
+  const containerEl = document.getElementById('root');
   if (!containerEl) return;
 
   const containerRect = containerEl.getBoundingClientRect();
@@ -113,33 +167,29 @@ const adjustHeaderPosition = () => {
   // 计算上下左右的可用空间
   const topSpace = componentRect.top - containerRect.top;
   const bottomSpace = containerRect.bottom - componentRect.bottom;
-  const leftSpace = componentRect.left - containerRect.left;
-  const rightSpace = containerRect.right - componentRect.right;
 
   // 检查上方是否有足够的空间
   if (topSpace >= headerRect.height) {
-    top = -headerRect.height - 10;
+    top = -headerRect.height + 2;
-    left = rightSpace >= headerRect.width ? componentRect.width - headerRect.width : 0;
   } else if (bottomSpace >= headerRect.height) {
-    top = componentRect.height + 10;
+    top = componentRect.height - 2;
-    left = rightSpace >= headerRect.width ? componentRect.width - headerRect.width : 0;
+  }
-  } else if (leftSpace >= headerRect.width) {
+  debugger
-    left = -headerRect.width - 10;
+  if (headerRect.width > (componentRect.width+11)) {
-    top = 0;
+    left = -2;
-  } else if (rightSpace >= headerRect.width) {
+    justification = 'flex-start';
-    left = componentRect.width + 10;
+  } else {
-    top = 0;
+    left = componentRect.width - headerRect.width - 2;
+    justification = 'flex-end';
   }
 
   headerStyle.value = {
     top: `${top}px`,
-    left: `${left}px`
+    left: `${left}px`,
+    justifyContent: justification
   };
 };
 
-onMounted(() => {
-  // console.log("组件挂载后",props.componentData);
-});
 
 watch(() => componentSelected.value, () => {
   if (componentSelected.value) {
@@ -150,30 +200,28 @@ watch(() => componentSelected.value, () => {
 });
 </script>
 
-<style scoped>
+
+<style>
 .dynamic-component {
   position: relative;
-  border: 1px solid transparent; /* 默认透明边框 */
-  transition: box-shadow 0.1s;
   width: fit-content;
 }
 
 .dynamic-component.hover-state {
-  border: 1px dashed #1057CC; /* 悬停时浅蓝色虚线框 */
+  border: 1px dashed #3457cc; /* 悬停时浅蓝色虚线框 */
 }
 
 .dynamic-component.click-state {
-  border: 2px solid #1057CC; /* 点击时深蓝色实线框 */
+  border: 2px solid #3457cc; /* 点击时深蓝色实线框 */
 }
 
 .component-header {
   position: absolute;
-  color: #1057CC;
+  color: #3457cc;
-  padding: 5px;
   display: flex;
+  flex-wrap: nowrap; /* 禁止换行 */
+  align-content: center;
   align-items: center;
-  justify-content: space-between;
-  width: 100%;
   z-index: 1000;
   background-color: transparent; /* 确保没有背景颜色 */
   box-sizing: border-box; /* 确保内边距不会影响宽度 */
@@ -186,7 +234,7 @@ watch(() => componentSelected.value, () => {
 .component-header button {
   background-color: transparent;
   border: none;
-  color: #1057CC;
+  color: #3457cc;
   cursor: pointer;
   margin-left: 10px;
 }
@@ -200,4 +248,24 @@ watch(() => componentSelected.value, () => {
   position: relative;
   z-index: 1;
 }
+
+.clickable {
+  cursor: pointer; /* 当鼠标悬停在此元素上时，鼠标指针变为手形 */
+}
+
+.canvas {
+  background-color: #fff;
+  width: 100%;
+  height: 100%;
+}
+
+.ghost {
+  background-color: #f2f3f5 !important;
+}
+
+.chosen {
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  background-color: #f0f0f0;
+  z-index: 1001;
+}
 </style>

src/main.ts

@@ -2,7 +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 router from "@/router/index.ts";
 // 额外引入图标库
 import ArcoVueIcon from '@arco-design/web-vue/es/icon';
 import '@arco-design/web-vue/dist/arco.css';

src/modules/previewScheme.json

@@ -1,19 +1,24 @@
-{
+[
-    "type": "AdaptivePage",
+  {
+    "id": "AdaptivePage-b32bb7a33910000",
     "name": "AdaptivePage",
-    "id": "a31c7fb13910000",
+    "type": "AdaptivePage",
-    "version": "2.0",
     "props": {},
     "class": "",
+    "children": [],
     "style": "",
-    "variables": {},
+    "visible": true,
+    "slots": {},
+    "disable": false,
+    "events": {},
+    "loop": {},
+    "body": [],
+    "designer": {},
     "dataSources": {},
     "functions": {},
+    "variables": {},
     "orchestrations": {},
-    "events": {},
+    "footer": [],
-    "slots": {},
-    "header": {},
-    "footer": {},
-    "children": [],
     "meta": {}
-  }
+  }
+]

src/router.ts

@@ -1,15 +0,0 @@
-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;

src/router/index.ts

@@ -1,18 +1,23 @@
-import { createRouter, createWebHashHistory } from "vue-router";
+import { createRouter, createWebHistory } from 'vue-router';
+import Designer from '../views/Designer.vue';
+import Preview from '../views/Preview.vue';
+
 const routes = [
-    //   {
+    {
-    //     path: "/lowcode",
+        path: '/',
-    //     name: "活动生成",
+        name: 'Designer',
-    //     meta: {
+        component: Designer
-    //       title: "活动生成",
+    },
-    //       icon: "Calendar",
+    {
-    //     },
+        path: '/preview',
-    //     component: () => import("@/pages/lowCode/index.vue"),
+        name: 'Preview',
-    //   },
+        component: Preview
+    }
 ];
 
 const router = createRouter({
-    history: createWebHashHistory(),
+    history: createWebHistory(import.meta.env.VITE_BASE_URL),
-    routes,
+    routes
 });
-export { router, routes };
+
+export default router;

src/schemes/components/AdaptivePage.json

@@ -12,10 +12,11 @@
   "orchestrations": {},
   "events": {},
   "slots": {},
-  "header": {},
+  "header": [],
-  "footer": {},
+  "footer": [],
-  "children": [],
+  "body": [],
   "meta": {},
   "visible": true,
-  "disable": false
+  "disable": false,
+  "designer": {}
 }

src/schemes/scheme.json

@@ -13,9 +13,9 @@
     "orchestrations": {},
     "events": {},
     "slots": {},
-    "header": {},
+    "header": [],
-    "footer": {},
+    "footer": [],
-    "children": [],
+    "body": [],
     "meta": {},
     "visible": true,
     "disable": false

src/schemes/scheme.ts

@@ -13,9 +13,9 @@ export const componentScheme = {
     "orchestrations": {},
     "events": {},
     "slots": {},
-    "header": {},
+    "header": [],
-    "footer": {},
+    "footer": [],
-    "children": [],
+    "body": [],
     "meta": {},
     "visible": true,
     "disable": false

src/stores/useSchemeStore.ts

@@ -80,7 +80,7 @@ export const useSchemeStore = defineStore('scheme', {
         },
 
         updateNowScheme(updates: Partial<IPageComponent>) {
-            debugger;
+            // debugger;
             this.nowComponentsData = updates;
             pushToStack(this.selectedComponentStack, this.nowComponentsData.id);
 
@@ -89,7 +89,7 @@ export const useSchemeStore = defineStore('scheme', {
             return this.nowComponentsData;
         },
         deleteScheme(id: string) {
-            debugger;
+            // debugger;
             console.log("删除前,组件id", id);
             const currentStateHash = this.currentHash;
             const objToDelete = findObjectById(this.previewScheme, id);

src/type/IComponent.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

src/type/IComponent.ts

@@ -3,7 +3,7 @@ export interface IComponent {
   name: string;
   id: string;
   text:string;
-  designer: string;  
+  designer: JSON;
   props: JSON;       
   style: string;
   class: string;

src/type/IPageComponent.ts

@@ -3,10 +3,10 @@ import { IComponent } from "./IComponent";
 export interface IPageComponent extends IComponent
 {
   variables:JSON;
-  dataSources:JSON;
+  dataSources:[];
   functions:JSON;
-  header:JSON;
+  header:IComponent[];
-  footer:JSON;
+  footer:IComponent[];
   meta:JSON;
-  children: IPageComponent[];
+  body:IComponent[];
 }

src/utils/buildScheme.cjs

@@ -20,8 +20,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
@@ -118,8 +118,7 @@ function writeModifiedComponents(components) {
                 case 3:
                     if (!(_i < components_1.length)) return [3 /*break*/, 6];
                     component = components_1[_i];
-                    updatedComponent = __assign(__assign({}, component), { visible: true, disable: false // 统一设置 disable 为 false
+                    updatedComponent = __assign(__assign({}, component), { visible: true, disable: false, designer: {} });
-                     });
                     fileName = "".concat(component.type, ".json");
                     filePath = path.join(exportModifiedComponentsDir, fileName);
                     content = JSON.stringify(updatedComponent, null, 2);

src/utils/buildScheme.ts

@@ -50,7 +50,8 @@ async function writeModifiedComponents(components: IComponent[]): Promise<void>
       const updatedComponent = {
         ...component,
         visible: true,  // 统一设置 visible 为 true
-        disable: false  // 统一设置 disable 为 false
+        disable: false,  // 统一设置 disable 为 false
+        designer:{},
       };
 
       const fileName = `${component.type}.json`;

src/views/Designer.vue

@@ -37,7 +37,7 @@
           </div>
         </VueDraggable>
       </div>
-      <div ref="targetContent" id="renderArea" class="center">
+      <div ref="targetContent" class="center"  id="renderArea">
         <VueDraggable
             v-model="store.previewScheme"
             :sort="true"
@@ -45,11 +45,12 @@
             group="designer"
             ghost-class="ghost"
             class="canvas"
+            @start="onPreviewStart"
             @update="onPreviewUpdate"
             @stop="onPreviewStop"
             @add="onPreViewAdd"
         >
-          <DynamicComponent v-for="component in store.previewScheme" :key="component.id" :componentData="component">
+          <DynamicComponent   id="root" style="height: 100%;width: 100%" v-for="component in store.previewScheme" :key="component.id" :componentData="component">
             {{ component.id }}
           </DynamicComponent>
         </VueDraggable>
@@ -62,12 +63,11 @@
 </template>
 
 <script setup lang="ts">
-import { RadioGroup, Radio } from '@arco-design/web-vue';
 import { onMounted, ref, watch } from 'vue';
 import { uuid } from 'lsp-uuid';
-import { componentScheme } from '@/schemes/scheme';
+import { componentScheme } from '@/schemes/scheme.ts';
-import { useSchemeStore } from '@/stores/useSchemeStore';
+import { useSchemeStore } from '@/stores/useSchemeStore.ts';
-import { IComponent } from '@/type/IComponent';
+import { IComponent } from '@/type/IComponent.ts';
 import DynamicComponent from '@/components/DynamicComponent.vue';
 import PropertyEditor from '@/components/PropertyEditor.vue';
 import { DraggableEvent, VueDraggable } from 'vue-draggable-plus';
@@ -117,17 +117,17 @@ store.$onAction(
 
 // 初始化scheme
 const initScheme = async () => {
-  // try {
+  try {
-  //   const response = await axios.get('http://localhost:3000/load');
+    const response = await axios.get('http://localhost:3000/load');
-  //   if (response.data && Array.isArray(response.data)) {
+    if (response.data && Array.isArray(response.data)) {
-  //     store.initPreviewScheme(response.data);
+      store.initPreviewScheme(response.data);
-  //   } else {
+    } else {
-  //     store.initPreviewScheme([baseScheme]);
+      store.initPreviewScheme([baseScheme]);
-  //   }
+    }
-  // } catch (error) {
+  } catch (error) {
-  //   console.error('Error loading data:', error);
+    console.error('Error loading data:', error);
-  //   store.initPreviewScheme([baseScheme]);
+    store.initPreviewScheme([baseScheme]);
-  // }
+  }
   componentsList = Object.values(componentScheme);
   store.initComponents(componentsList);
 };
@@ -136,7 +136,10 @@ onMounted(() => {
   initScheme();
 });
 
-function clone(element: Record<'name' | 'id' | 'type' | 'props' | 'class' | 'text' | 'style' | 'slots' | 'visible' | 'disable' | 'children', IComponent>) {
+function clone(element: Record<'name' | 'id' | 'type' | 'props' | 'class' | 'text' | 'style' | 'slots' | 'visible'
+    | 'disable'|'header'|'footer'|'dataSources'|'functions'|'variables'
+    |'orchestrations'|'events'
+    |'meta' | 'children'|'body'|'designer', IComponent>) {
   // console.log("clone", element);
   return {
     id: `${element.type}-${uuid()}`,
@@ -144,16 +147,24 @@ function clone(element: Record<'name' | 'id' | 'type' | 'props' | 'class' | 'tex
     type: element.type,
     props: element.props,
     class: element.class,
-    designer: '',
     text: element.text,
     children: element.children || [],
     style: element.style,
     visible: element.visible,
     slots: element.slots,
-    disable: element.visible,
+    disable: element.disable,
     events: {},
     loop: {},
+    body: element.body,
+    designer:element.designer||{},
+    dataSources:element.dataSources,
+    functions:element.functions,
+    variables:element.variables,
+    orchestrations:element.orchestrations,
+    footer:element.footer,
+    meta:element.meta,
   };
+
 }
 
 const onPreViewAdd = (event: DraggableEvent) => {
@@ -193,7 +204,13 @@ const save = async () => {
 
 const view = () => {
   localStorage.setItem("lowcode", JSON.stringify(store.previewScheme));
-  window.open(location.href.replace("/#/", "/preview/#/"));
+  // 打开新窗口并导航到预览页面
+  const newWindow = window.open('/preview', '_blank');
+  if (newWindow) {
+    newWindow.focus();
+  } else {
+    alert('弹窗被阻止，请允许弹窗');
+  }
 };
 </script>
 
@@ -263,7 +280,6 @@ const view = () => {
         background-color: #fff;
         width: 100%;
         height: 100%;
-        overflow-y: auto; /* 确保当内容超出时，出现垂直滚动条 */
       }
 
       .ghost {

src/views/Preview.vue

@@ -0,0 +1,27 @@
+<template>
+  <DynamicComponent v-for="component in preView" :key="component.id" :componentData="component">
+    {{ component.id }}
+  </DynamicComponent>
+</template>
+<script setup lang="ts">
+import {onBeforeMount, shallowRef, ref} from "vue";
+import DynamicComponent from "@/components/DynamicComponent.vue";
+import { useSchemeStore } from '../stores/useSchemeStore';
+
+const store = useSchemeStore();
+let preView=ref([])
+
+
+onBeforeMount(() => {
+  store.designerMode=false
+   preView = JSON.parse(localStorage.getItem("lowcode") || "");
+  console.log(preView)
+});
+</script>
+<style lang="scss" scoped>
+.box {
+  width: 1000px;
+  height: 600px;
+  overflow: hidden;
+}
+</style>