From bd2789a8d708d950cf331112f59659d54d04d780 Mon Sep 17 00:00:00 2001
From: lhj <403133128@qq.com>
Date: Fri, 27 Sep 2024 00:42:23 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=BB=E9=A1=B5=E6=A0=B7=E5=BC=8F=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/MainView.vue       | 69 +++++++++++++------------------
 src/components/NestedFunction.vue |  2 +-
 2 files changed, 30 insertions(+), 41 deletions(-)

diff --git a/src/components/MainView.vue b/src/components/MainView.vue
index 5c3f239..92dc751 100644
--- a/src/components/MainView.vue
+++ b/src/components/MainView.vue
@@ -1,49 +1,38 @@
 <template>
-  <div>
+  <div style="display: flex;">
     <div>
-      <a-layout style="height: 400px;">
-        <a-layout-header>Header</a-layout-header>
-        <a-layout>
-          <a-layout-sider style="background-color: aliceblue;width: fit-content;">
-
-            <div ref="el2" style="display: flex;flex-direction: column;height: 500px;width: 100%;">
-              <div v-for="item in componentsList" :key="item.id"
-                style="height: 30px;width: 250px;border: 1px solid red;">
-                {{ item.name }}:{{ item.id }}
-              </div>
-
-            </div>
-          </a-layout-sider>
-          <a-layout-content>
-            <div style="margin-left: 64px;">
-              <div style="display: flex;flex-direction: row;width: 100%;">
-
-                <div class="flex justify-between">
-                  <NestedFunction v-model="list"></NestedFunction>
-                  {{ list }}
-                </div>
-
-              </div>
-
-              <div style="width: 800px;height:500px">
-                动态渲染
-                <!-- <component :is="componentMapping['Rate']" v-bind="{}"/> -->
-                <DynamicComponent v-for="component in list" :key="component.id" :componentData="component">
-                  {{ component.id }}
-                </DynamicComponent>
-              </div>
-              <div>
-              </div>
-            </div>
-
-          </a-layout-content>
-        </a-layout>
-        <a-layout-footer>Footer</a-layout-footer>
-      </a-layout>
+      compoent
     </div>
+    <div style="overflow-y: auto;overflow-x: none;">
+      <div ref="el2" style="display: flex;flex-direction: column;height: 500px;width: 100%;">
+        <div v-for="item in componentsList" :key="item.id" style="height: 30px;width: 250px;border: 1px solid red;">
+          {{ item.name }}:{{ item.id }}
+        </div>
 
+      </div>
+    </div>
+    <div>
+      <div>
+        <div style="display: flex;flex-direction: row;width: 100%;">
 
+          <div v-if="list.length>0" class="flex justify-between">
+            <NestedFunction  v-model="list"></NestedFunction>
+            {{ list }}
+          </div>
 
+        </div>
+
+        <div style="width: 800px;height:500px">
+          动态渲染
+          <!-- <component :is="componentMapping['Rate']" v-bind="{}"/> -->
+          <DynamicComponent v-for="component in list" :key="component.id" :componentData="component">
+            {{ component.id }}
+          </DynamicComponent>
+        </div>
+        <div>
+        </div>
+      </div>
+    </div>
   </div>
 
 
diff --git a/src/components/NestedFunction.vue b/src/components/NestedFunction.vue
index 13153a5..97c2303 100644
--- a/src/components/NestedFunction.vue
+++ b/src/components/NestedFunction.vue
@@ -1,5 +1,5 @@
 <template>
-  <ul class="drag-area" ref="el">
+  <ul class="drag-area" ref="el" style="margin: 0;">
     <li v-for="el in modelValue" :key="el.name">
       <div style="width: 200px;border: 1px solid red;">
         <p>{{ el.name }}:{{ el.id }}</p>