From e8bbdf613b2a36313b5cd6bd9df5d68d1f1a45d3 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Mon, 30 Dec 2024 20:44:27 +0800
Subject: [PATCH] =?UTF-8?q?feat(editor):=20=E6=A0=B7=E5=BC=8F=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E9=9D=A2=E6=9D=BF=E6=94=AF=E6=8C=81=E6=8B=96=E5=8A=A8?=
 =?UTF-8?q?=E5=A4=A7=E5=B0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor/src/components/SplitView.vue   |  2 +-
 .../src/layouts/props-panel/PropsPanel.vue     | 18 +++++++++++++++++-
 packages/editor/src/theme/props-panel.scss     | 13 +++++++++++++
 packages/editor/src/theme/resizer.scss         |  4 ++--
 4 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/packages/editor/src/components/SplitView.vue b/packages/editor/src/components/SplitView.vue
index 1d733454..fe8086e3 100644
--- a/packages/editor/src/components/SplitView.vue
+++ b/packages/editor/src/components/SplitView.vue
@@ -22,7 +22,7 @@
 
 <script lang="ts" setup>
 import { computed, onBeforeUnmount, onMounted, ref, useTemplateRef, watchEffect } from 'vue';
-import { OnDrag } from 'gesto';
+import type { OnDrag } from 'gesto';
 
 import Resizer from './Resizer.vue';
 
diff --git a/packages/editor/src/layouts/props-panel/PropsPanel.vue b/packages/editor/src/layouts/props-panel/PropsPanel.vue
index 281928fb..0bddd14f 100644
--- a/packages/editor/src/layouts/props-panel/PropsPanel.vue
+++ b/packages/editor/src/layouts/props-panel/PropsPanel.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="m-editor-props-panel" v-show="nodes.length === 1">
+  <div ref="propsPanel" class="m-editor-props-panel" v-show="nodes.length === 1">
     <slot name="props-panel-header"></slot>
     <FormPanel
       ref="propertyFormPanel"
@@ -15,6 +15,8 @@
       @mounted="mountedHandler"
     ></FormPanel>
 
+    <Resizer v-if="showStylePanel" @change="widthChange"></Resizer>
+
     <FormPanel
       v-if="showStylePanel"
       class="m-editor-props-style-panel"
@@ -53,12 +55,14 @@
 <script lang="ts" setup>
 import { computed, inject, onBeforeUnmount, ref, useTemplateRef, watchEffect } from 'vue';
 import { Close, Sugar } from '@element-plus/icons-vue';
+import type { OnDrag } from 'gesto';
 
 import type { MNode } from '@tmagic/core';
 import { TMagicButton } from '@tmagic/design';
 import type { ContainerChangeEventData, FormState, FormValue } from '@tmagic/form';
 
 import MIcon from '@editor/components/Icon.vue';
+import Resizer from '@editor/components/Resizer.vue';
 import type { PropsPanelSlots, Services } from '@editor/type';
 import { styleTabConfig } from '@editor/utils';
 
@@ -134,6 +138,18 @@ const mountedHandler = (e: InstanceType<typeof FormPanel>) => {
   emit('mounted', e);
 };
 
+const propsPanelEl = useTemplateRef('propsPanel');
+const widthChange = ({ deltaX }: OnDrag) => {
+  if (!propsPanelEl.value) {
+    return;
+  }
+
+  const width = globalThis.parseFloat(
+    getComputedStyle(propsPanelEl.value).getPropertyValue('--props-style-panel-width'),
+  );
+  propsPanelEl.value.style.setProperty('--props-style-panel-width', `${width - deltaX}px`);
+};
+
 const { showStylePanel, showStylePanelHandler, closeStylePanelHandler } = useStylePanel(services);
 
 const propertyFormPanelRef = useTemplateRef<InstanceType<typeof FormPanel>>('propertyFormPanel');
diff --git a/packages/editor/src/theme/props-panel.scss b/packages/editor/src/theme/props-panel.scss
index 9241c73d..6be35377 100644
--- a/packages/editor/src/theme/props-panel.scss
+++ b/packages/editor/src/theme/props-panel.scss
@@ -72,6 +72,11 @@
       align-items: center;
       border-bottom: 2px solid $border-color;
     }
+
+    .tmagic-design-form {
+      padding-right: 10px;
+      padding-left: 10px;
+    }
   }
 
   .m-editor-props-panel-src-icon {
@@ -95,6 +100,14 @@
     z-index: 10;
   }
 
+  .m-editor-resizer {
+    position: absolute;
+    display: block;
+    top: 0;
+    right: var(--props-style-panel-width);
+    z-index: 13;
+  }
+
   &.small {
     .el-form-item__label {
       font-size: 12px;
diff --git a/packages/editor/src/theme/resizer.scss b/packages/editor/src/theme/resizer.scss
index 795736e4..d7a1a39b 100644
--- a/packages/editor/src/theme/resizer.scss
+++ b/packages/editor/src/theme/resizer.scss
@@ -1,6 +1,6 @@
 .m-editor-resizer {
-  border-left: 1px solid transparent;
-  border-right: 1px solid transparent;
+  border-left: 2px solid transparent;
+  border-right: 2px solid transparent;
   width: 8px;
   margin: 0 -5px;
   height: 100%;