From f601417913d82af89fdba6f5026f2836fff0bd17 Mon Sep 17 00:00:00 2001
From: lhj <403133128@qq.com>
Date: Sun, 17 Nov 2024 14:47:36 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E5=AE=8C=E5=96=84=E9=A2=84=E8=A7=88?=
 =?UTF-8?q?=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env                                          |  1 +
 components.d.ts                               |  2 +
 package.json                                  |  1 +
 preview/store/index.ts                        |  5 --
 preview/views/Preview.vue                     | 27 --------
 src/App.vue                                   |  7 +-
 src/components/DynamicComponent.vue           | 67 +++++++++----------
 src/main.ts                                   |  2 +-
 src/modules/previewScheme.json                | 54 ++++++++++-----
 src/router.ts                                 | 15 -----
 src/router/index.ts                           | 31 +++++----
 .../MainView.vue => src/views/Designer.vue    | 15 +++--
 src/views/Preview.vue                         | 27 ++++++++
 13 files changed, 130 insertions(+), 124 deletions(-)
 create mode 100644 .env
 delete mode 100644 preview/store/index.ts
 delete mode 100644 preview/views/Preview.vue
 delete mode 100644 src/router.ts
 rename preview/views/MainView.vue => src/views/Designer.vue (94%)
 create mode 100644 src/views/Preview.vue

diff --git a/.env b/.env
new file mode 100644
index 0000000..b44d27e
--- /dev/null
+++ b/.env
@@ -0,0 +1 @@
+VITE_BASE_URL=/
\ No newline at end of file
diff --git a/components.d.ts b/components.d.ts
index d1be826..f985ab4 100644
--- a/components.d.ts
+++ b/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']
diff --git a/package.json b/package.json
index 28ebbce..99951c6 100644
--- a/package.json
+++ b/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",
diff --git a/preview/store/index.ts b/preview/store/index.ts
deleted file mode 100644
index 02ae96a..0000000
--- a/preview/store/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { createPinia } from 'pinia';
-
-const store = createPinia();
-
-export default store;
diff --git a/preview/views/Preview.vue b/preview/views/Preview.vue
deleted file mode 100644
index d19342e..0000000
--- a/preview/views/Preview.vue
+++ /dev/null
@@ -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>
diff --git a/src/App.vue b/src/App.vue
index d2a759d..3055c4a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,12 +1,7 @@
 <script setup lang="ts">
-import MainView from "../preview/views/MainView.vue";
 </script>
-
 <template>
-  <div>
-    <MainView></MainView>
-  </div>
-
+    <router-view></router-view>
 </template>
 
 <style scoped>
diff --git a/src/components/DynamicComponent.vue b/src/components/DynamicComponent.vue
index 852a792..5afb16a 100644
--- a/src/components/DynamicComponent.vue
+++ b/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 },
-      { 'click-state': componentSelected }
+      { 'hover-state': isHovered && store.designerMode },
+      { 'click-state': componentSelected && store.designerMode }
     ]"
       @click.stop="handleClick"
       @mouseover="isHovered = true"
       @mouseleave="isHovered = false"
   >
-    <div v-if="isHovered" class="component-header">
-      <span>{{componentName}}</span>
+    <div v-if="isHovered && store.designerMode" class="component-header">
+      <span>{{ componentName }}</span>
     </div>
-    <div v-if="componentSelected" class="component-header" :style="headerStyle">
-      <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 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: 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"/>
+        <icon-edit class="clickable" @click="handleEditFunc" 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 {componentMapping} from './componentMapping';
-import {useSchemeStore} from '../stores/useSchemeStore';
+import { defineProps, ref, computed, onMounted, watch, markRaw, nextTick } from 'vue';
+import { componentMapping } from './componentMapping';
+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)
-  {
-    left=-2;
-    justification='flex-start';
-  }else
-  {
-    left=componentRect.width-headerRect.width-2;
-    justification='flex-end';
+
+  if (headerRect.width > componentRect.width) {
+    left = -2;
+    justification = 'flex-start';
+  } else {
+    left = componentRect.width - headerRect.width - 2;
+    justification = 'flex-end';
   }
+
   headerStyle.value = {
     top: `${top}px`,
     left: `${left}px`,
@@ -145,8 +144,7 @@ const adjustHeaderPosition = () => {
 };
 
 onMounted(() => {
-  adjustHeaderPosition()
-  // console.log("组件挂载后",props.componentData);
+  adjustHeaderPosition();
 });
 
 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;
 }
 
diff --git a/src/main.ts b/src/main.ts
index 11772a5..5393ff5 100644
--- a/src/main.ts
+++ b/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';
diff --git a/src/modules/previewScheme.json b/src/modules/previewScheme.json
index d4fe79e..a7d1e67 100644
--- a/src/modules/previewScheme.json
+++ b/src/modules/previewScheme.json
@@ -1,19 +1,37 @@
-{
-    "type": "AdaptivePage",
-    "name": "AdaptivePage",
-    "id": "a31c7fb13910000",
-    "version": "2.0",
-    "props": {},
-    "class": "",
-    "style": "",
-    "variables": {},
-    "dataSources": {},
-    "functions": {},
-    "orchestrations": {},
-    "events": {},
-    "slots": {},
-    "header": {},
-    "footer": {},
+[
+  {
+    "id": "Card-b22544833910000",
+    "name": "card",
+    "type": "Card",
+    "props": {
+      "title": "Card"
+    },
+    "class": "arco-card arco-card-size-medium arco-card-bordered",
+    "designer": "",
+    "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.",
     "children": [],
-    "meta": {}
-  }
\ No newline at end of file
+    "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": {}
+  }
+]
\ No newline at end of file
diff --git a/src/router.ts b/src/router.ts
deleted file mode 100644
index 1844724..0000000
--- a/src/router.ts
+++ /dev/null
@@ -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;
diff --git a/src/router/index.ts b/src/router/index.ts
index 7cd2893..e95b003 100644
--- a/src/router/index.ts
+++ b/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",
-    //     name: "活动生成",
-    //     meta: {
-    //       title: "活动生成",
-    //       icon: "Calendar",
-    //     },
-    //     component: () => import("@/pages/lowCode/index.vue"),
-    //   },
+    {
+        path: '/',
+        name: 'Designer',
+        component: Designer
+    },
+    {
+        path: '/preview',
+        name: 'Preview',
+        component: Preview
+    }
 ];
 
 const router = createRouter({
-    history: createWebHashHistory(),
-    routes,
+    history: createWebHistory(import.meta.env.VITE_BASE_URL),
+    routes
 });
-export { router, routes };
+
+export default router;
\ No newline at end of file
diff --git a/preview/views/MainView.vue b/src/views/Designer.vue
similarity index 94%
rename from preview/views/MainView.vue
rename to src/views/Designer.vue
index 10a0fcc..7dba11e 100644
--- a/preview/views/MainView.vue
+++ b/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 { useSchemeStore } from '@/stores/useSchemeStore';
-import { IComponent } from '@/type/IComponent';
+import { componentScheme } from '@/schemes/scheme.ts';
+import { useSchemeStore } from '@/stores/useSchemeStore.ts';
+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>
 
diff --git a/src/views/Preview.vue b/src/views/Preview.vue
new file mode 100644
index 0000000..eedeef7
--- /dev/null
+++ b/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>