添加属性编辑器，调整自适应宽度布局

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>
+<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>

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" />