From 9e614657d773780c31701fed6b51804a2949204b Mon Sep 17 00:00:00 2001
From: lhj <403133128@qq.com>
Date: Thu, 3 Oct 2024 12:57:53 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=B1=9E=E6=80=A7=E7=BC=96?=
 =?UTF-8?q?=E8=BE=91=E5=99=A8=EF=BC=8C=E8=B0=83=E6=95=B4=E8=87=AA=E9=80=82?=
 =?UTF-8?q?=E5=BA=94=E5=AE=BD=E5=BA=A6=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/MainView.vue       | 143 ++++++++++++++++++++----------
 src/components/NestedFunction.vue |   2 +-
 2 files changed, 96 insertions(+), 49 deletions(-)

diff --git a/src/components/MainView.vue b/src/components/MainView.vue
index 7c4ecb3..ad097de 100644
--- a/src/components/MainView.vue
+++ b/src/components/MainView.vue
@@ -1,72 +1,63 @@
 <template>
-  <div style="display: flex;">
-    <div>
+  <div class="flex-container">
+    <div class="component-area">
       compoent
     </div>
-
     <!-- 组件区域 -->
-    <div style="overflow-y: auto; overflow-x: hidden; flex-grow: 0; flex-shrink: 0; flex-basis: 250px;">
-      <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;">
+    <div class="component-list">
+      <div ref="el2" class="component-list-inner">
+        <div v-for="item in componentsList" :key="item.id" class="component-item">
           {{ item.name }}:{{ item.id }}
         </div>
       </div>
     </div>
-    <div style="flex-grow: 1; flex-shrink: 0; overflow-y: auto;">
-      <div>
-        <!-- 设计器 -->
-        <div
-          style="display: flex; flex-direction: row; width: 100%; height: 500px; overflow-y: auto; border: 1px solid black;">
-          <div class="flex justify-between">
-            <NestedFunction v-model="list"></NestedFunction>
-            {{ list }}
+    <div class="design-area">
+      <a-row>
+        <a-col flex="80%">
+          <div class="dragArea">
+            <div>
+              <NestedFunction v-model="list"></NestedFunction>
+              {{ list }}
+            </div>
           </div>
-        </div>
-        <!-- 渲染区 -->
-        <div style="width: 100%; height: 500px; overflow-y: auto; border: 1px solid black;">
-          动态渲染
-          <!-- <component :is="componentMapping['Rate']" v-bind="{}"/> -->
-          <DynamicComponent v-for="component in list" :key="component.id" :componentData="component">
-            {{ component.id }}
-          </DynamicComponent>
-        </div>
-        <!-- 测试区域 -->
-        <div>
-          <TestComponent></TestComponent>
-        </div>
-        <div>
-        </div>
-      </div>
+        </a-col>
+        <a-col flex="20%">
+          <div class="property-editor">属性编辑器</div>
+        </a-col>
+      </a-row>
 
+      <!-- 渲染区 -->
+      <div class="render-area">
+        动态渲染
+        <DynamicComponent v-for="component in list" :key="component.id" :componentData="component">
+          {{ component.id }}
+        </DynamicComponent>
+      </div>
+      <!-- 测试区域 -->
+      <div class="test-area">
+        <TestComponent></TestComponent>
+      </div>
     </div>
   </div>
-
 </template>
 
 <script setup lang="ts">
 import TestComponent from './TestComponent.vue';
-
 import { onMounted, ref } from 'vue';
 import NestedFunction from './NestedFunction.vue';
 import DynamicComponent from './DynamicComponent.vue';
-
 import { useDraggable } from 'vue-draggable-plus';
 import { uuid } from 'lsp-uuid';
-import { IPageComponent } from '../type/IPageComponent.ts';
-import { componentScheme } from '../schemes/scheme.ts';
+import { IPageComponent } from '../type/IPageComponent';
+import { componentScheme } from '../schemes/scheme';
 
 const componentsList = ref<any[]>([]);
-
-
 const list = ref<IPageComponent[]>([]);
 const el2 = ref();
 
-
 onMounted(() => {
-  const loadedComponents = Object.values(componentScheme)
-  componentsList.value = loadedComponents
-  // console.log(loadedComponents)
-
+  const loadedComponents = Object.values(componentScheme);
+  componentsList.value = loadedComponents;
 });
 
 useDraggable(el2, componentsList, {
@@ -74,11 +65,10 @@ useDraggable(el2, componentsList, {
   group: { name: 'designer', pull: 'clone', put: false },
   sort: false,
   onClone() {
-    console.log('clone')
+    console.log('clone');
   },
-  clone(element: Record<'id' | 'name' | 'type' | 'children' | 'props' | 'text' | 'class' | 'style' | 'slots', any>) {
+  clone(element) {
     return {
-      // id: `${element.id}-${uuid()}`,
       id: uuid(),
       name: element.name,
       type: element.type,
@@ -93,9 +83,66 @@ useDraggable(el2, componentsList, {
       disable: "",
       events: {},
       loop: {},
-    }
+    };
   }
-})
+});
 </script>
 
-<style scoped></style>
\ No newline at end of file
+<style scoped>
+.flex-container {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: stretch;
+  width: 100%; /* Ensure the container takes full width */
+}
+
+.component-area {
+  flex-grow: 1;
+  max-width: 72px; /* Fixed width or can be adjusted */
+}
+
+.component-list {
+  flex-grow: 1;
+  max-width: 250px; /* Fixed width or can be adjusted */
+}
+
+.component-list-inner {
+  display: flex;
+  flex-direction: column;
+  height: 500px;
+}
+
+.component-item {
+  height: 30px;
+  width: 250px;
+  border: 1px solid red;
+}
+
+.design-area {
+  flex-grow: 1;
+  overflow-x: auto;
+}
+
+.dragArea {
+  overflow-x: auto;
+  display: flex;
+  flex-direction: row;
+  height: 500px;
+  border: 1px solid black;
+}
+
+.property-editor {
+  border: 1px red solid;
+  min-height: 500px;
+}
+
+.render-area {
+  height: 500px;
+  overflow-y: auto;
+  border: 1px solid black;
+}
+
+.test-area {
+  /* 测试区域样式 */
+}
+</style>
\ No newline at end of file
diff --git a/src/components/NestedFunction.vue b/src/components/NestedFunction.vue
index 2171925..a4ab248 100644
--- a/src/components/NestedFunction.vue
+++ b/src/components/NestedFunction.vue
@@ -1,7 +1,7 @@
 <template>
   <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;">
+      <div style="min-width: fit-content;border: 1px solid red;">
         <p>{{ el.name }}:{{ el.id }}</p>
       </div> 
       <nested-function v-model="el.children" />