@tmagic/editor 1.5.1 → 1.5.3

package/src/fields/StyleSetter/icons/flex-direction/RowReverse.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+    <path
+      d="M704 128v768h320V128H704zM384 128v768h256V128h-256zM192 256l-192 256 192 256 0.032-192H320v-128H192V256z"
+    ></path>
+  </svg>
+</template>

package/src/fields/StyleSetter/icons/flex-direction/index.ts

@@ -0,0 +1,4 @@
+export { default as FlexDirectionColumn } from './Column.vue';
+export { default as FlexDirectionColumnReverse } from './ColumnReverse.vue';
+export { default as FlexDirectionRow } from './Row.vue';
+export { default as FlexDirectionRowReverse } from './RowReverse.vue';

package/src/fields/StyleSetter/icons/justify-content/Center.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+    <path d="M480 1024V0h64v1024h-64z m128-64V64h320v896H608zM96 960V64h320v896H96z"></path>
+  </svg>
+</template>

package/src/fields/StyleSetter/icons/justify-content/FlexEnd.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+    <path d="M416 160H96v704h320V160z m384 0H480v704h320V160z m128-160h-64v1024h64V0z"></path>
+  </svg>
+</template>

package/src/fields/StyleSetter/icons/justify-content/FlexStart.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+    <path d="M608 160h320v704H608V160zM224 160h320v704H224V160zM96 0h64v1024H96V0z"></path>
+  </svg>
+</template>

package/src/fields/StyleSetter/icons/justify-content/SpaceAround.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+    <path
+      d="M320 864H192v160H128v-160H0V160h128V0h64v160h128v704z m704 0h-128v160h-64v-160h-128V160h128V0h64v160h128v704z"
+    ></path>
+  </svg>
+</template>

package/src/fields/StyleSetter/icons/justify-content/SpaceBetween.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+    <path d="M64 1024H0V0h64v1024z m384-160H128V160h320v704z m448 0H576V160h320v704z m128 160h-64V0h64v1024z"></path>
+  </svg>
+</template>

package/src/fields/StyleSetter/icons/justify-content/index.ts

@@ -0,0 +1,5 @@
+export { default as JustifyContentCenter } from './Center.vue';
+export { default as JustifyContentFlexEnd } from './FlexEnd.vue';
+export { default as JustifyContentFlexStart } from './FlexStart.vue';
+export { default as JustifyContentSpaceAround } from './SpaceAround.vue';
+export { default as JustifyContentSpaceBetween } from './SpaceBetween.vue';

package/src/fields/StyleSetter/icons/text-align/Center.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+    <path
+      d="M128 810.666667h768v85.333333H128z m128-170.666667h512v85.333333H256z m-128-170.666667h768v85.333334H128z m0-341.333333h768v85.333333H128z m128 170.666667h512v85.333333H256z"
+    ></path>
+  </svg>
+</template>

package/src/fields/StyleSetter/icons/text-align/Left.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+    <path
+      d="M128 810.666667h768v85.333333H128z m0-170.666667h512v85.333333H128z m0-170.666667h768v85.333334H128z m0-341.333333h768v85.333333H128z m0 170.666667h512v85.333333H128z"
+    ></path>
+  </svg>
+</template>

package/src/fields/StyleSetter/icons/text-align/Right.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+    <path
+      d="M128 128h768v85.333333H128z m0 682.666667h768v85.333333H128z m213.333333-170.666667h554.666667v85.333333H341.333333z m-213.333333-170.666667h768v85.333334H128z m213.333333-170.666666h554.666667v85.333333H341.333333z"
+    ></path>
+  </svg>
+</template>

package/src/fields/StyleSetter/icons/text-align/index.ts

@@ -0,0 +1,3 @@
+export { default as AlignLeft } from './Left.vue';
+export { default as AlignCenter } from './Center.vue';
+export { default as AlignRight } from './Right.vue';

package/src/fields/StyleSetter/pro/Background.vue

@@ -0,0 +1,78 @@
+<template>
+  <MContainer :config="config" :model="values" @change="change"></MContainer>
+</template>
+
+<script lang="ts" setup>
+import { markRaw } from 'vue';
+
+import { ContainerChangeEventData, MContainer } from '@tmagic/form';
+import type { StyleSchema } from '@tmagic/schema';
+
+import BackgroundPosition from '../components/BackgroundPosition.vue';
+import { BackgroundNoRepeat, BackgroundRepeat, BackgroundRepeatX, BackgroundRepeatY } from '../icons/background-repeat';
+
+defineProps<{ values: Partial<StyleSchema> }>();
+
+const emit = defineEmits<{
+  change: [v: StyleSchema, eventData: ContainerChangeEventData];
+}>();
+
+const config = {
+  items: [
+    {
+      name: 'backgroundColor',
+      text: '背景色',
+      labelWidth: '68px',
+      type: 'data-source-field-select',
+      fieldConfig: {
+        type: 'colorPicker',
+      },
+    },
+    {
+      name: 'backgroundImage',
+      text: '背景图',
+      labelWidth: '68px',
+      type: 'data-source-field-select',
+      fieldConfig: {
+        type: 'img-upload',
+      },
+    },
+    {
+      name: 'backgroundSize',
+      text: '背景尺寸',
+      type: 'radioGroup',
+      childType: 'button',
+      labelWidth: '68px',
+      options: [
+        { value: 'auto', text: '默认', tooltip: '默认 auto' },
+        { value: 'contain', text: '等比填充', tooltip: '等比填充 contain' },
+        { value: 'cover', text: '等比覆盖', tooltip: '等比覆盖 cover' },
+      ],
+    },
+    {
+      name: 'backgroundRepeat',
+      text: '重复显示',
+      type: 'radioGroup',
+      childType: 'button',
+      labelWidth: '68px',
+      options: [
+        { value: 'repeat', icon: markRaw(BackgroundRepeat), tooltip: '垂直和水平方向重复 repeat' },
+        { value: 'repeat-x', icon: markRaw(BackgroundRepeatX), tooltip: '水平方向重复 repeat-x' },
+        { value: 'repeat-y', icon: markRaw(BackgroundRepeatY), tooltip: '垂直方向重复 repeat-y' },
+        { value: 'no-repeat', icon: markRaw(BackgroundNoRepeat), tooltip: '不重复 no-repeat' },
+      ],
+    },
+    {
+      name: 'backgroundPosition',
+      text: '背景定位',
+      type: 'component',
+      component: BackgroundPosition,
+      labelWidth: '68px',
+    },
+  ],
+};
+
+const change = (value: StyleSchema, eventData: ContainerChangeEventData) => {
+  emit('change', value, eventData);
+};
+</script>

package/src/fields/StyleSetter/pro/Border.vue

@@ -0,0 +1,35 @@
+<template>
+  <MContainer :config="config" :model="values" @change="change"></MContainer>
+  <Border :model="values" @change="change"></Border>
+</template>
+
+<script lang="ts" setup>
+import { type ContainerChangeEventData, MContainer } from '@tmagic/form';
+import type { StyleSchema } from '@tmagic/schema';
+
+import Border from '../components/Border.vue';
+
+defineProps<{ values: Partial<StyleSchema> }>();
+
+const emit = defineEmits<{
+  change: [v: StyleSchema, eventData: ContainerChangeEventData];
+}>();
+
+const config = {
+  items: [
+    {
+      labelWidth: '68px',
+      name: 'borderRadius',
+      text: '圆角',
+      type: 'data-source-field-select',
+      fieldConfig: {
+        type: 'text',
+      },
+    },
+  ],
+};
+
+const change = (value: StyleSchema, eventData: ContainerChangeEventData) => {
+  emit('change', value, eventData);
+};
+</script>

package/src/fields/StyleSetter/pro/Font.vue

@@ -0,0 +1,90 @@
+<template>
+  <MContainer :config="config" :model="values" @change="change"></MContainer>
+</template>
+
+<script lang="ts" setup>
+import { markRaw } from 'vue';
+
+import { ContainerChangeEventData, MContainer } from '@tmagic/form';
+import type { StyleSchema } from '@tmagic/schema';
+
+import { AlignCenter, AlignLeft, AlignRight } from '../icons/text-align';
+
+defineProps<{ values: Partial<StyleSchema> }>();
+
+const emit = defineEmits<{
+  change: [v: StyleSchema, eventData: ContainerChangeEventData];
+}>();
+
+const config = {
+  items: [
+    {
+      type: 'row',
+      items: [
+        {
+          labelWidth: '68px',
+          name: 'fontSize',
+          text: '字号',
+          type: 'data-source-field-select',
+          fieldConfig: {
+            type: 'text',
+          },
+        },
+        {
+          labelWidth: '68px',
+          name: 'lineHeight',
+          text: '行高',
+          type: 'data-source-field-select',
+          fieldConfig: {
+            type: 'text',
+          },
+        },
+      ],
+    },
+    {
+      name: 'fontWeight',
+      text: '字重',
+      labelWidth: '68px',
+      type: 'data-source-field-select',
+      fieldConfig: {
+        type: 'select',
+        options: ['normal', 'bold']
+          .concat(
+            Array(7)
+              .fill(1)
+              .map((x, i) => `${i + 1}00`),
+          )
+          .map((item) => ({
+            value: item,
+            text: item,
+          })),
+      },
+    },
+    {
+      labelWidth: '68px',
+      name: 'color',
+      text: '颜色',
+      type: 'data-source-field-select',
+      fieldConfig: {
+        type: 'colorPicker',
+      },
+    },
+    {
+      name: 'textAlign',
+      text: '对齐',
+      type: 'radioGroup',
+      childType: 'button',
+      labelWidth: '68px',
+      options: [
+        { value: 'left', icon: markRaw(AlignLeft), tooltip: '左对齐 row' },
+        { value: 'center', icon: markRaw(AlignCenter), tooltip: '居中对齐 center' },
+        { value: 'right', icon: markRaw(AlignRight), tooltip: '右对齐 right' },
+      ],
+    },
+  ],
+};
+
+const change = (value: StyleSchema, eventData: ContainerChangeEventData) => {
+  emit('change', value, eventData);
+};
+</script>

package/src/fields/StyleSetter/pro/Layout.vue

@@ -0,0 +1,164 @@
+<template>
+  <MContainer :config="config" :model="values" @change="change"></MContainer>
+  <Box :model="values" @change="change"></Box>
+</template>
+
+<script lang="ts" setup>
+import { markRaw } from 'vue';
+
+import type { ContainerChangeEventData, FormState } from '@tmagic/form';
+import { MContainer } from '@tmagic/form';
+import type { StyleSchema } from '@tmagic/schema';
+
+import Box from '../components/Box.vue';
+import { DisplayBlock, DisplayFlex, DisplayInline, DisplayInlineBlock, DisplayNone } from '../icons/display';
+import {
+  FlexDirectionColumn,
+  FlexDirectionColumnReverse,
+  FlexDirectionRow,
+  FlexDirectionRowReverse,
+} from '../icons/flex-direction';
+import {
+  JustifyContentCenter,
+  JustifyContentFlexEnd,
+  JustifyContentFlexStart,
+  JustifyContentSpaceAround,
+  JustifyContentSpaceBetween,
+} from '../icons/justify-content';
+
+defineProps<{
+  values: Partial<StyleSchema>;
+}>();
+
+const emit = defineEmits<{
+  change: [v: string | StyleSchema, eventData: ContainerChangeEventData];
+}>();
+
+const config = {
+  items: [
+    {
+      name: 'display',
+      text: '模式',
+      type: 'radioGroup',
+      childType: 'button',
+      labelWidth: '68px',
+      options: [
+        { value: 'inline', icon: markRaw(DisplayInline), tooltip: '内联布局 inline' },
+        { value: 'flex', icon: markRaw(DisplayFlex), tooltip: '弹性布局 flex' },
+        { value: 'block', icon: markRaw(DisplayBlock), tooltip: '块级布局 block' },
+        { value: 'inline-block', icon: markRaw(DisplayInlineBlock), tooltip: '内联块布局 inline-block' },
+        { value: 'none', icon: markRaw(DisplayNone), tooltip: '隐藏 none' },
+      ],
+    },
+    {
+      name: 'flexDirection',
+      text: '主轴方向',
+      type: 'radioGroup',
+      childType: 'button',
+      labelWidth: '68px',
+      options: [
+        { value: 'row', icon: markRaw(FlexDirectionRow), tooltip: '水平方向 起点在左侧 row' },
+        { value: 'row-reverse', icon: markRaw(FlexDirectionRowReverse), tooltip: '水平方向 起点在右侧 row-reverse' },
+        { value: 'column', icon: markRaw(FlexDirectionColumn), tooltip: '垂直方向 起点在上沿 column' },
+        {
+          value: 'column-reverse',
+          icon: markRaw(FlexDirectionColumnReverse),
+          tooltip: '垂直方向 起点在下沿 column-reverse',
+        },
+      ],
+      display: (mForm: FormState, { model }: { model: Record<any, any> }) => model.display === 'flex',
+    },
+    {
+      name: 'justifyContent',
+      text: '主轴对齐',
+      type: 'radioGroup',
+      childType: 'button',
+      labelWidth: '68px',
+      options: [
+        { value: 'flex-start', icon: markRaw(JustifyContentFlexStart), tooltip: '左对齐 flex-start' },
+        { value: 'flex-end', icon: markRaw(JustifyContentFlexEnd), tooltip: '右对齐 flex-end' },
+        { value: 'center', icon: markRaw(JustifyContentCenter), tooltip: '居中 center' },
+        { value: 'space-between', icon: markRaw(JustifyContentSpaceBetween), tooltip: '两端对齐 space-between' },
+        { value: 'space-around', icon: markRaw(JustifyContentSpaceAround), tooltip: '横向平分 space-around' },
+      ],
+      display: (mForm: FormState, { model }: { model: Record<any, any> }) => model.display === 'flex',
+    },
+    {
+      name: 'alignItems',
+      text: '辅轴对齐',
+      type: 'radioGroup',
+      childType: 'button',
+      labelWidth: '68px',
+      options: [
+        { value: 'flex-start', icon: markRaw(JustifyContentFlexStart), tooltip: '左对齐 flex-start' },
+        { value: 'flex-end', icon: markRaw(JustifyContentFlexEnd), tooltip: '右对齐 flex-end' },
+        { value: 'center', icon: markRaw(JustifyContentCenter), tooltip: '居中 center' },
+        { value: 'space-between', icon: markRaw(JustifyContentSpaceBetween), tooltip: '两端对齐 space-between' },
+        { value: 'space-around', icon: markRaw(JustifyContentSpaceAround), tooltip: '横向平分 space-around' },
+      ],
+      display: (mForm: FormState, { model }: { model: Record<any, any> }) => model.display === 'flex',
+    },
+    {
+      name: 'flexWrap',
+      text: '换行',
+      type: 'radioGroup',
+      childType: 'button',
+      labelWidth: '68px',
+      options: [
+        { value: 'nowrap', text: '不换行', tooltip: '不换行 nowrap' },
+        { value: 'wrap', text: '正换行', tooltip: '第一行在上方 wrap' },
+        { value: 'wrap-reverse', text: '逆换行', tooltip: '第一行在下方 wrap-reverse' },
+      ],
+      display: (mForm: FormState, { model }: { model: Record<any, any> }) => model.display === 'flex',
+    },
+    {
+      type: 'row',
+      items: [
+        {
+          name: 'width',
+          text: '宽度',
+          labelWidth: '68px',
+          type: 'data-source-field-select',
+          fieldConfig: {
+            type: 'text',
+          },
+        },
+        {
+          name: 'height',
+          text: '宽度',
+          labelWidth: '68px',
+          type: 'data-source-field-select',
+          fieldConfig: {
+            type: 'text',
+          },
+        },
+      ],
+    },
+    {
+      type: 'data-source-field-select',
+      text: 'overflow',
+      name: 'overflow',
+      checkStrictly: false,
+      dataSourceFieldType: ['string'],
+      fieldConfig: {
+        type: 'select',
+        clearable: true,
+        allowCreate: true,
+        options: [
+          { text: 'visible', value: 'visible' },
+          { text: 'hidden', value: 'hidden' },
+          { text: 'clip', value: 'clip' },
+          { text: 'scroll', value: 'scroll' },
+          { text: 'auto', value: 'auto' },
+          { text: 'overlay', value: 'overlay' },
+          { text: 'initial', value: 'initial' },
+        ],
+      },
+    },
+  ],
+};
+
+const change = (value: string | StyleSchema, eventData: ContainerChangeEventData) => {
+  emit('change', value, eventData);
+};
+</script>

package/src/fields/StyleSetter/pro/Position.vue

@@ -0,0 +1,48 @@
+<template>
+  <MContainer :config="config" :model="values" @change="change"></MContainer>
+  <Position v-show="values['position'] !== 'static'" :model="values" @change="change"></Position>
+</template>
+
+<script lang="ts" setup>
+import { ContainerChangeEventData, MContainer } from '@tmagic/form';
+import type { StyleSchema } from '@tmagic/schema';
+
+import Position from '../components/Position.vue';
+
+defineProps<{ values: Partial<StyleSchema> }>();
+
+const emit = defineEmits<{
+  change: [v: string | StyleSchema, eventData: ContainerChangeEventData];
+}>();
+
+const config = {
+  items: [
+    {
+      name: 'position',
+      text: '定位',
+      labelWidth: '68px',
+      type: 'data-source-field-select',
+      fieldConfig: {
+        type: 'select',
+        options: ['static', 'relative', 'absolute', 'fixed', 'sticky'].map((item) => ({
+          value: item,
+          text: item,
+        })),
+      },
+    },
+    {
+      labelWidth: '68px',
+      name: 'zIndex',
+      text: 'zIndex',
+      type: 'data-source-field-select',
+      fieldConfig: {
+        type: 'text',
+      },
+    },
+  ],
+};
+
+const change = (value: string | StyleSchema, eventData: ContainerChangeEventData) => {
+  emit('change', value, eventData);
+};
+</script>

package/src/fields/StyleSetter/pro/index.ts

@@ -0,0 +1,5 @@
+export { default as Background } from './Background.vue';
+export { default as Font } from './Font.vue';
+export { default as Layout } from './Layout.vue';
+export { default as Position } from './Position.vue';
+export { default as Border } from './Border.vue';

package/src/index.ts

@@ -39,6 +39,7 @@ import DisplayConds from './fields/DisplayConds.vue';
 import EventSelect from './fields/EventSelect.vue';
 import KeyValue from './fields/KeyValue.vue';
 import PageFragmentSelect from './fields/PageFragmentSelect.vue';
+import StyleSetter from './fields/StyleSetter/Index.vue';
 import uiSelect from './fields/UISelect.vue';
 import CodeEditor from './layouts/CodeEditor.vue';
 import { setEditorConfig } from './utils/config';
@@ -106,6 +107,7 @@ export { default as TreeNode } from './components/TreeNode.vue';
 export { default as PageFragmentSelect } from './fields/PageFragmentSelect.vue';
 export { default as DisplayConds } from './fields/DisplayConds.vue';
 export { default as CondOpSelect } from './fields/CondOpSelect.vue';
+export { default as StyleSetter } from './fields/StyleSetter/Index.vue';
 
 const defaultInstallOpt: EditorInstallOptions = {
   // eslint-disable-next-line no-eval
@@ -143,5 +145,6 @@ export default {
     app.component('m-fields-page-fragment-select', PageFragmentSelect);
     app.component('m-fields-display-conds', DisplayConds);
     app.component('m-fields-cond-op-select', CondOpSelect);
+    app.component('m-form-style-setter', StyleSetter);
   },
 };

package/src/layouts/props-panel/FormPanel.vue

@@ -99,7 +99,7 @@ watchEffect(() => {
 
 const internalInstance = getCurrentInstance();
 onMounted(() => {
-  emit('mounted', internalInstance);
+  emit('mounted', internalInstance?.proxy);
 });
 
 const submit = async (v: FormValue, eventData: ContainerChangeEventData) => {

package/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';
 
@@ -120,7 +124,21 @@ const submit = async (v: MNode, eventData?: ContainerChangeEventData) => {
     if (!v.id) {
       v.id = values.value.id;
     }
-    services?.editorService.update(v, { changeRecords: eventData?.changeRecords });
+
+    const newValue: MNode = {
+      ...v,
+      style: {},
+    };
+
+    if (v.style) {
+      Object.entries(v.style).forEach(([key, value]) => {
+        if (value !== '' && newValue.style) {
+          newValue.style[key] = value;
+        }
+      });
+    }
+
+    services?.editorService.update(newValue, { changeRecords: eventData?.changeRecords });
   } catch (e: any) {
     emit('submit-error', e);
   }
@@ -134,6 +152,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');

package/src/services/editor.ts

@@ -527,8 +527,8 @@ class Editor extends BaseService {
 
     let newConfig = await this.toggleFixedPosition(toRaw(config), node, root);
 
-    newConfig = mergeWith(cloneDeep(node), newConfig, (objValue, srcValue, key) => {
-      if (typeof srcValue === 'undefined' && Object.hasOwn(newConfig, key)) {
+    newConfig = mergeWith(cloneDeep(node), newConfig, (objValue, srcValue, key, object: any, source: any) => {
+      if (typeof srcValue === 'undefined' && Object.hasOwn(source, key)) {
         return '';
       }
 

package/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;

package/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%;