fix:完善预览模式

.env

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

components.d.ts

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

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/DynamicComponent.vue

@@ -1,26 +1,26 @@
 <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="[
       'dynamic-component',
-      { 'hover-state': isHovered },
+      { 'hover-state': isHovered && store.designerMode },
-      { 'click-state': componentSelected }
+      { 'click-state': componentSelected && store.designerMode }
     ]"
       @click.stop="handleClick"
       @mouseover="isHovered = true"
       @mouseleave="isHovered = false"
   >
-    <div v-if="isHovered" class="component-header">
+    <div v-if="isHovered && store.designerMode" class="component-header">
-      <span>{{componentName}}</span>
+      <span>{{ componentName }}</span>
     </div>
-    <div v-if="componentSelected" class="component-header" :style="headerStyle">
+    <div v-if="componentSelected && store.designerMode" 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: 5px ;margin-right: 2px">{{ componentName }}</div>
-      <div v-if="componentSelected" style="background-color:#3457cc;color:#ffffff;padding: 6px 5px 5px 5px;display: flex;width: fit-content;flex-wrap: nowrap">
+      <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-edit class="clickable" @click="handleEditFunc" size="20" />
-        <icon-delete class="clickable" @click="handleDeleteFunc" size="20"/>
+        <icon-delete class="clickable" @click="handleDeleteFunc" size="20" />
       </div>
     </div>
     <div class="component-content">
@@ -32,10 +32,10 @@
       >
         {{ componentText }}
         <template v-for="child in componentChildren" :key="child.id">
-          <DynamicComponent :componentData="child"/>
+          <DynamicComponent :componentData="child" />
         </template>
         <template v-for="(slot, key, index) in componentSlots" :key="index" v-slot:[key]>
-          <DynamicComponent :component-data="slot"/>
+          <DynamicComponent :component-data="slot" />
         </template>
       </component>
     </div>
@@ -43,9 +43,9 @@
 </template>
 
 <script setup lang="ts">
-import {defineProps, ref, computed, onMounted, watch, markRaw, nextTick} from 'vue';
+import { defineProps, ref, computed, onMounted, watch, markRaw, nextTick } from 'vue';
-import {componentMapping} from './componentMapping';
+import { componentMapping } from './componentMapping';
-import {useSchemeStore} from '../stores/useSchemeStore';
+import { useSchemeStore } from '../stores/useSchemeStore';
 
 const store = useSchemeStore();
 const props = defineProps({
@@ -82,16 +82,16 @@ const isHovered = ref(false);
 const handleClick = () => {
   const currentComponent = getCurrentSchemeObj();
   if (currentComponent) {
-
     store.updateNowScheme(currentComponent);
     console.log(`Component with id ${currentComponent?.id} was clicked.`);
     // 你可以在这里执行更多的逻辑，例如发出一个事件或调用一个方法
   }
-
 };
+
 const handleEditFunc = () => {
-
+  // 编辑功能
 };
+
 const handleDeleteFunc = () => {
   store.deleteScheme(componentId.value);
 };
@@ -109,7 +109,7 @@ const adjustHeaderPosition = () => {
 
   let top = 0;
   let left = 0;
-  let justification='';
+  let justification = '';
 
   // 获取最外层组件渲染区域的边界
   const containerEl = document.getElementById('renderArea');
@@ -117,26 +117,25 @@ const adjustHeaderPosition = () => {
 
   const containerRect = containerEl.getBoundingClientRect();
 
-  debugger
   // 计算上下左右的可用空间
   const topSpace = componentRect.top - containerRect.top;
   const bottomSpace = containerRect.bottom - componentRect.bottom;
+
   // 检查上方是否有足够的空间
   if (topSpace >= headerRect.height) {
-    top = -headerRect.height+2;
+    top = -headerRect.height + 2;
-
   } else if (bottomSpace >= headerRect.height) {
-    top = componentRect.height-2;
+    top = componentRect.height - 2;
   }
-  if (headerRect.width>componentRect.width)
+
-  {
+  if (headerRect.width > componentRect.width) {
-    left=-2;
+    left = -2;
-    justification='flex-start';
+    justification = 'flex-start';
-  }else
+  } else {
-  {
+    left = componentRect.width - headerRect.width - 2;
-    left=componentRect.width-headerRect.width-2;
+    justification = 'flex-end';
-    justification='flex-end';
   }
+
   headerStyle.value = {
     top: `${top}px`,
     left: `${left}px`,
@@ -145,8 +144,7 @@ const adjustHeaderPosition = () => {
 };
 
 onMounted(() => {
-  adjustHeaderPosition()
+  adjustHeaderPosition();
-  // console.log("组件挂载后",props.componentData);
 });
 
 watch(() => componentSelected.value, () => {
@@ -158,11 +156,10 @@ watch(() => componentSelected.value, () => {
 });
 </script>
 
+
 <style scoped>
 .dynamic-component {
   position: relative;
-  border: 1px solid transparent; /* 默认透明边框 */
-  transition: box-shadow 0.1s;
   width: fit-content;
 }
 

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,37 @@
-{
+[
-    "type": "AdaptivePage",
+  {
-    "name": "AdaptivePage",
+    "id": "Card-b22544833910000",
-    "id": "a31c7fb13910000",
+    "name": "card",
-    "version": "2.0",
+    "type": "Card",
-    "props": {},
+    "props": {
-    "class": "",
+      "title": "Card"
-    "style": "",
+    },
-    "variables": {},
+    "class": "arco-card arco-card-size-medium arco-card-bordered",
-    "dataSources": {},
+    "designer": "",
-    "functions": {},
+    "text": "ByteDance's core product, Toutiao (\"Headlines\"), is a content platform in China and around the world. Toutiao started out as a news recommendation engine and gradually evolved into a platform delivering content in various formats.",
-    "orchestrations": {},
-    "events": {},
-    "slots": {},
-    "header": {},
-    "footer": {},
     "children": [],
-    "meta": {}
+    "style": "width:360px",
+    "visible": true,
+    "slots": {
+      "extra": {
+        "id": "9f8289a12910000",
+        "name": "avatar",
+        "type": "Avatar",
+        "props": {},
+        "class": "",
+        "designer": "",
+        "text": "",
+        "children": [],
+        "style": "",
+        "visible": "",
+        "slots": {},
+        "disable": "",
+        "events": {},
+        "loop": {}
+      }
+    },
+    "disable": true,
+    "events": {},
+    "loop": {}
   }
+]

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/views/Designer.vue

@@ -45,6 +45,7 @@
             group="designer"
             ghost-class="ghost"
             class="canvas"
+            @start="onPreviewStart"
             @update="onPreviewUpdate"
             @stop="onPreviewStop"
             @add="onPreViewAdd"
@@ -65,9 +66,9 @@
 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';
@@ -193,7 +194,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>
 

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>