From bc31e312fba3c6bb4b7ff8e69e5c4a0fd2611d48 Mon Sep 17 00:00:00 2001
From: lhj <403133128@qq.com>
Date: Wed, 6 Nov 2024 00:44:08 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E6=9B=B4=E6=96=B0=E6=8B=96=E6=8B=BD?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E6=BA=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 preview/views/MainView.vue   | 23 ++++++------
 src/stores/useSchemeStore.ts | 73 ++++++++++++++++++++----------------
 2 files changed, 52 insertions(+), 44 deletions(-)

diff --git a/preview/views/MainView.vue b/preview/views/MainView.vue
index 50f1abd..1d2ab0c 100644
--- a/preview/views/MainView.vue
+++ b/preview/views/MainView.vue
@@ -19,14 +19,14 @@
             @start="onStart"
             @end="onEnd"
         >
-          <div v-for="item in store.component" :key="item.id" class="tem_btn">
+          <div v-for="item in store.components" :key="item.id" class="tem_btn">
             {{ item.name }}
           </div>
         </VueDraggable>
       </div>
       <div ref="targetContent" class="center">
         <VueDraggable
-            v-model="store.preview"
+            v-model="store.previewScheme"
             :group="{name: 'designer', pull: 'clone', put: false}"
             ghost-class="ghost"
             class="canvas"
@@ -49,13 +49,11 @@
 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[]>([]);
+let componentsList = [];
 const store = useSchemeStore();
 
 watch(store, (n, e) => {
@@ -90,7 +88,7 @@ store.$onAction(
        onError, // action 抛出或拒绝的钩子
      }) => {
       after((result) => {
-        scheme.value = result
+        console.log(result);
       })
       // 如果 action 抛出或返回一个拒绝的 promise，这将触发
       onError((error) => {
@@ -102,15 +100,15 @@ store.$onAction(
 )
 //初始化scheme
 const initScheme = () => {
-  store.initScheme([baseScheme])
+  store.initPreviewScheme([baseScheme])
+  componentsList = Object.values(componentScheme);
+  store.initComponents(componentsList);
 }
 
 
 onMounted(() => {
-  componentsList.value = Object.values(componentScheme);
   initScheme();
   // @ts-ignore
-  list.value.push(baseScheme)
 });
 
 const clone = function (element: IComponent) {
@@ -133,9 +131,9 @@ const clone = function (element: IComponent) {
 }
 
 const onEnd = (obj: any) => {
-  const {oldDraggableIndex} = obj;
-  store.previewData(store.component[oldDraggableIndex]);
-  store.nowComponentsData(store.component[oldDraggableIndex]);
+  // const {oldDraggableIndex} = obj;
+  // store.previewData(store.component[oldDraggableIndex]);
+  // store.nowComponentsData(store.component[oldDraggableIndex]);
 };
 
 const onStart = function () {
@@ -176,6 +174,7 @@ const view = () => {
       overflow: hidden;
       background-color: #fff;
       border-top: 1px solid #dddddd;
+      overflow-y: auto;
 
       .title {
         font-size: 16px;
diff --git a/src/stores/useSchemeStore.ts b/src/stores/useSchemeStore.ts
index 824bc60..d143796 100644
--- a/src/stores/useSchemeStore.ts
+++ b/src/stores/useSchemeStore.ts
@@ -1,40 +1,49 @@
-import { defineStore } from 'pinia'
-import { IPageComponent } from '../type/IPageComponent';
-import { ref } from 'vue';
+import {defineStore} from 'pinia'
+import {IPageComponent} from '../type/IPageComponent';
+import {ref} from 'vue';
 
 function findObjectById(obj, targetId) {
-  if (Array.isArray(obj)) {
-    for (let item of obj) {
-      let found = findObjectById(item, targetId);
-      if (found) return found;
+    if (Array.isArray(obj)) {
+        for (let item of obj) {
+            let found = findObjectById(item, targetId);
+            if (found) return found;
+        }
+    } else if (typeof obj === 'object' && obj !== null) {
+        if (obj.id === targetId) {
+            return obj;
+        }
+        for (let key in obj) {
+            if (obj.hasOwnProperty(key)) {
+                let found = findObjectById(obj[key], targetId);
+                if (found) return found;
+            }
+        }
     }
-  } else if (typeof obj === 'object' && obj !== null) {
-    if (obj.id === targetId) {
-      return obj;
-    }
-    for (let key in obj) {
-      if (obj.hasOwnProperty(key)) {
-        let found = findObjectById(obj[key], targetId);
-        if (found) return found;
-      }
-    }
-  }
-  return null; // 如果没有找到，则返回null
+    return null; // 如果没有找到，则返回null
 }
+
 export const useSchemeStore = defineStore('scheme', () => {
-  // const componnets = ref<IPageComponent[]>()
-  const previewData = ref<IPageComponent[]>()
-  const nowComponentsData = ref<IPageComponent>()
+    const components = ref<IPageComponent[]>()
+    const previewScheme = ref<IPageComponent[]>()
+    const nowComponentsData = ref<IPageComponent>()
 
-  function initScheme(value) {
-    previewData.value = value
-  }
-  function getSchemeObj(id) {
-    return findObjectById(previewData.value, id)
-  }
-  function updateScheme()
-  {
+    function initPreviewScheme(value) {
+        previewScheme.value = value
+        nowComponentsData.value=value[0]
+    }
 
-  }
-  return { previewData,nowComponentsData, initScheme, getSchemeObj,updateScheme }
+
+    function initComponents(value:IPageComponent[]) {
+        components.value = value
+    }
+
+    function getSchemeObj(id) {
+        return findObjectById(previewScheme.value, id)
+    }
+
+    function updateScheme() {
+
+    }
+
+    return {previewScheme, components, nowComponentsData, initComponents, initPreviewScheme, getSchemeObj, updateScheme}
 })
\ No newline at end of file