feat(editor): 样式配置面板支持拖动大小

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';
 

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');

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;

packages/editor/src/theme/resizer.scss

@@ -1,6 +1,6 @@
 .m-editor-resizer {
-  border-left: 1px solid transparent;
+  border-left: 2px solid transparent;
-  border-right: 1px solid transparent;
+  border-right: 2px solid transparent;
   width: 8px;
   margin: 0 -5px;
   height: 100%;