From f411974bd3ed2281db001ba3df30db227cb27629 Mon Sep 17 00:00:00 2001
From: lhj <403133128@qq.com>
Date: Sun, 17 Nov 2024 22:49:05 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E6=9A=82=E5=AD=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AdaptivePage.vue     |   2 +-
 src/components/DynamicComponent.vue | 110 ++++++++++++++++++++--------
 src/modules/previewScheme.json      |  65 ++++++++++------
 src/views/Designer.vue              |   3 +-
 4 files changed, 125 insertions(+), 55 deletions(-)

diff --git a/src/components/AdaptivePage.vue b/src/components/AdaptivePage.vue
index 70c9e28..c31c3a7 100644
--- a/src/components/AdaptivePage.vue
+++ b/src/components/AdaptivePage.vue
@@ -3,7 +3,7 @@
     <div style="width: 100%;">
       <slot name="header"></slot>
     </div>
-    <div style="width: 100%;height: 100%;background-color: #f7f8fa;">
+    <div style="width: 100%;height: 100%;background-color: #f7f8fa;overflow-y: auto">
       MAIN
       <slot>
       </slot>
diff --git a/src/components/DynamicComponent.vue b/src/components/DynamicComponent.vue
index bda5f62..0ef1c72 100644
--- a/src/components/DynamicComponent.vue
+++ b/src/components/DynamicComponent.vue
@@ -3,9 +3,7 @@
       style="width: fit-content; display: flex; flex-direction: column; position: relative;"
       v-if="store.nowComponentsData !== null && (componentVisible || store.designerMode)"
       :id="componentId"
-      :class="[
-      'dynamic-component',
-      { 'hover-state': isHovered && store.designerMode },
+      :class="['dynamic-component',{ 'hover-state': isHovered && store.designerMode },
       { 'click-state': componentSelected && store.designerMode &&isComponent }
     ]"
       @click.stop="handleClick"
@@ -17,61 +15,100 @@
     </div>
     <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
+          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
-          :is="componentType"
-          v-bind="componentPropsWithDisabled"
-          :class="componentClass"
-          :style="componentStyle"
+      <VueDraggable
+          v-model="componentChildren"
+          :animation="150"
+          group="designer"
+          ghost-class="ghost"
+          chosen-class="chosen"
+          class="canvas"
+          @start="onComponentStart"
+          @update="onComponentUpdate"
+          @stop="onComponentEnd"
+          @add="onComponentAdd"
       >
-        {{ componentText }}
-        <template v-for="child in componentChildren" :key="child.id">
-          <DynamicComponent :componentData="child" />
-        </template>
-        <template v-for="(slot, key, index) in componentSlots" :key="index" v-slot:[key]>
-          <DynamicComponent :component-data="slot" />
-        </template>
-      </component>
+        <component
+            :is="componentType"
+            v-bind="componentPropsWithDisabled"
+            :class="componentClass"
+            :style="componentStyle"
+        >
+          {{ componentText }}
+          <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 { componentMapping } from './componentMapping';
-import { useSchemeStore } from '../stores/useSchemeStore';
+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 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(() => {
-  debugger
-  isComponent.value=props.componentData?.type!='AdaptivePage';
+  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,
@@ -151,7 +188,6 @@ const adjustHeaderPosition = () => {
 };
 
 
-
 watch(() => componentSelected.value, () => {
   if (componentSelected.value) {
     nextTick(() => {
@@ -162,7 +198,7 @@ watch(() => componentSelected.value, () => {
 </script>
 
 
-<style scoped>
+<style>
 .dynamic-component {
   position: relative;
   width: fit-content;
@@ -213,4 +249,18 @@ watch(() => componentSelected.value, () => {
 .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>
\ No newline at end of file
diff --git a/src/modules/previewScheme.json b/src/modules/previewScheme.json
index 8d2aecf..d2196e4 100644
--- a/src/modules/previewScheme.json
+++ b/src/modules/previewScheme.json
@@ -1,22 +1,43 @@
-{
-  "type": "AdaptivePage",
-  "name": "AdaptivePage",
-  "id": "AdaptivePage",
-  "version": "2.0",
-  "props": {},
-  "class": "",
-  "style": "",
-  "variables": {},
-  "dataSources": {},
-  "functions": {},
-  "orchestrations": {},
-  "events": {},
-  "slots": {},
-  "header": [],
-  "footer": [],
-  "body": [],
-  "meta": {},
-  "visible": true,
-  "disable": false,
-  "designer": {}
-}
\ No newline at end of file
+[
+  {
+    "id": "AdaptivePage-b32bb7a33910000",
+    "name": "AdaptivePage",
+    "type": "AdaptivePage",
+    "props": {},
+    "class": "",
+    "children": [],
+    "style": "",
+    "visible": true,
+    "slots": {},
+    "disable": false,
+    "events": {},
+    "loop": {},
+    "body": [],
+    "designer": {},
+    "dataSources": {},
+    "functions": {},
+    "variables": {},
+    "orchestrations": {},
+    "footer": [],
+    "meta": {}
+  },
+  {
+    "type": "AdaptivePage",
+    "name": "AdaptivePage",
+    "id": "718b3e933910000",
+    "version": "2.0",
+    "props": {},
+    "class": "",
+    "style": "",
+    "variables": {},
+    "dataSources": {},
+    "functions": {},
+    "orchestrations": {},
+    "events": {},
+    "slots": {},
+    "header": {},
+    "footer": {},
+    "children": [],
+    "meta": {}
+  }
+]
\ No newline at end of file
diff --git a/src/views/Designer.vue b/src/views/Designer.vue
index c02050b..204a9df 100644
--- a/src/views/Designer.vue
+++ b/src/views/Designer.vue
@@ -78,7 +78,7 @@ let componentsList = [];
 const store = useSchemeStore();
 
 watch(store, (n) => {
-  console.log("store发生了变化", n);
+  // console.log("store发生了变化", n);
 });
 
 const baseScheme = {
@@ -286,7 +286,6 @@ const view = () => {
       .ghost {
         background-color: #f2f3f5 !important;
       }
-      overflow-y: auto;
     }
 
     .right {