@tmagic/editor 1.5.2 → 1.5.4

package/src/layouts/page-bar/PageBar.vue

@@ -144,40 +144,40 @@ const remove = (node: MPage | MPageFragment) => {
   editorService?.remove(node);
 };
 
-const pageBarScrollContainer = useTemplateRef<InstanceType<typeof PageBarScrollContainer>>('pageBarScrollContainer');
-const pageBarItems = useTemplateRef<HTMLDivElement[]>('pageBarItems');
+const pageBarScrollContainerRef = useTemplateRef<InstanceType<typeof PageBarScrollContainer>>('pageBarScrollContainer');
+const pageBarItemEls = useTemplateRef<HTMLDivElement[]>('pageBarItems');
 watch(page, (page) => {
   if (
     !page ||
-    !pageBarScrollContainer.value?.itemsContainerWidth ||
-    !pageBarItems.value ||
-    pageBarItems.value.length < 2
+    !pageBarScrollContainerRef.value?.itemsContainerWidth ||
+    !pageBarItemEls.value ||
+    pageBarItemEls.value.length < 2
   ) {
     return;
   }
 
-  const firstItem = pageBarItems.value[0];
-  const lastItem = pageBarItems.value[pageBarItems.value.length - 1];
+  const firstItem = pageBarItemEls.value[0];
+  const lastItem = pageBarItemEls.value[pageBarItemEls.value.length - 1];
 
   if (page.id === firstItem.dataset.pageId) {
-    pageBarScrollContainer.value.scroll('start');
+    pageBarScrollContainerRef.value.scroll('start');
   } else if (page.id === lastItem.dataset.pageId) {
-    pageBarScrollContainer.value.scroll('end');
+    pageBarScrollContainerRef.value.scroll('end');
   } else {
-    const pageItem = pageBarItems.value.find((item) => item.dataset.pageId === page.id);
+    const pageItem = pageBarItemEls.value.find((item) => item.dataset.pageId === page.id);
     if (!pageItem) {
       return;
     }
 
     const pageItemRect = pageItem.getBoundingClientRect();
     const offsetLeft = pageItemRect.left - firstItem.getBoundingClientRect().left;
-    const { itemsContainerWidth } = pageBarScrollContainer.value;
+    const { itemsContainerWidth } = pageBarScrollContainerRef.value;
 
     const left = itemsContainerWidth - offsetLeft - pageItemRect.width;
 
-    const translateLeft = pageBarScrollContainer.value.getTranslateLeft();
+    const translateLeft = pageBarScrollContainerRef.value.getTranslateLeft();
     if (offsetLeft + translateLeft < 0 || offsetLeft + pageItemRect.width > itemsContainerWidth - translateLeft) {
-      pageBarScrollContainer.value.scrollTo(left);
+      pageBarScrollContainerRef.value.scrollTo(left);
     }
   }
 });

package/src/layouts/page-bar/PageBarScrollContainer.vue

@@ -46,7 +46,7 @@ const services = inject<Services>('services');
 const editorService = services?.editorService;
 const uiService = services?.uiService;
 
-const itemsContainer = useTemplateRef<HTMLElement>('itemsContainer');
+const itemsContainerEl = useTemplateRef<HTMLElement>('itemsContainer');
 const canScroll = ref(false);
 
 const showAddPageButton = computed(() => uiService?.get('showAddPageButton'));
@@ -54,19 +54,21 @@ const showPageListButton = computed(() => uiService?.get('showPageListButton'));
 
 const itemsContainerWidth = ref(0);
 
+const pageBarEl = useTemplateRef<HTMLDivElement>('pageBar');
+
 const setCanScroll = () => {
   // 减去新增、搜索、页面列表、左移、右移5个按钮的宽度
   // 37 = icon width 16 + padding 10 * 2 + border-right 1
   itemsContainerWidth.value =
-    (pageBar.value?.clientWidth || 0) -
+    (pageBarEl.value?.clientWidth || 0) -
     37 * 2 -
     37 -
     (showAddPageButton.value ? 37 : 21) -
     (showPageListButton.value ? 37 : 0);
 
   nextTick(() => {
-    if (itemsContainer.value) {
-      canScroll.value = itemsContainer.value.scrollWidth - itemsContainerWidth.value > 1;
+    if (itemsContainerEl.value) {
+      canScroll.value = itemsContainerEl.value.scrollWidth - itemsContainerWidth.value > 1;
     }
   });
 };
@@ -75,9 +77,8 @@ const resizeObserver = new ResizeObserver(() => {
   setCanScroll();
 });
 
-const pageBar = useTemplateRef<HTMLDivElement>('pageBar');
 onMounted(() => {
-  pageBar.value && resizeObserver.observe(pageBar.value);
+  pageBarEl.value && resizeObserver.observe(pageBarEl.value);
 });
 
 onBeforeUnmount(() => {
@@ -87,9 +88,9 @@ onBeforeUnmount(() => {
 let translateLeft = 0;
 
 const scroll = (type: 'left' | 'right' | 'start' | 'end') => {
-  if (!itemsContainer.value || !canScroll.value) return;
+  if (!itemsContainerEl.value || !canScroll.value) return;
 
-  const maxScrollLeft = itemsContainer.value.scrollWidth - itemsContainerWidth.value;
+  const maxScrollLeft = itemsContainerEl.value.scrollWidth - itemsContainerWidth.value;
 
   if (type === 'left') {
     scrollTo(translateLeft + 200);
@@ -103,8 +104,8 @@ const scroll = (type: 'left' | 'right' | 'start' | 'end') => {
 };
 
 const scrollTo = (value: number) => {
-  if (!itemsContainer.value || !canScroll.value) return;
-  const maxScrollLeft = itemsContainer.value.scrollWidth - itemsContainerWidth.value;
+  if (!itemsContainerEl.value || !canScroll.value) return;
+  const maxScrollLeft = itemsContainerEl.value.scrollWidth - itemsContainerWidth.value;
 
   if (value >= 0) {
     value = 0;
@@ -116,7 +117,7 @@ const scrollTo = (value: number) => {
 
   translateLeft = value;
 
-  itemsContainer.value.style.transform = `translate(${translateLeft}px, 0px)`;
+  itemsContainerEl.value.style.transform = `translate(${translateLeft}px, 0px)`;
 };
 
 watch(

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

@@ -88,23 +88,23 @@ const propsPanelSize = computed(() => services?.uiService.get('propsPanelSize')
 const { height: editorContentHeight } = useEditorContentHeight();
 const stage = computed(() => services?.editorService.get('stage'));
 
-const configForm = useTemplateRef<InstanceType<typeof MForm>>('configForm');
+const configFormRef = useTemplateRef<InstanceType<typeof MForm>>('configForm');
 
 watchEffect(() => {
-  if (configForm.value) {
-    configForm.value.formState.stage = stage.value;
-    configForm.value.formState.services = services;
+  if (configFormRef.value) {
+    configFormRef.value.formState.stage = stage.value;
+    configFormRef.value.formState.services = services;
   }
 });
 
 const internalInstance = getCurrentInstance();
 onMounted(() => {
-  emit('mounted', internalInstance);
+  emit('mounted', internalInstance?.proxy);
 });
 
 const submit = async (v: FormValue, eventData: ContainerChangeEventData) => {
   try {
-    const values = await configForm.value?.submitForm();
+    const values = await configFormRef.value?.submitForm();
     emit('submit', values, eventData);
   } catch (e: any) {
     emit('submit-error', e);
@@ -119,5 +119,5 @@ const saveCode = (values: any) => {
   emit('submit', props.codeValueKey ? { [props.codeValueKey]: values } : values);
 };
 
-defineExpose({ configForm, submit });
+defineExpose({ configForm: configFormRef, submit });
 </script>

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);
   }
@@ -130,8 +148,22 @@ const errorHandler = (e: any) => {
   emit('form-error', e);
 };
 
-const mountedHandler = (e: InstanceType<typeof FormPanel>) => {
-  emit('mounted', e);
+const mountedHandler = () => {
+  if (propertyFormPanelRef.value) {
+    emit('mounted', propertyFormPanelRef.value);
+  }
+};
+
+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);

package/src/layouts/sidebar/code-block/CodeBlockListPanel.vue

@@ -89,10 +89,10 @@ const editable = computed(() => codeBlockService?.getEditStatus());
 const { codeBlockEditor, codeConfig, editCode, deleteCode, createCodeBlock, submitCodeBlockHandler } =
   useCodeBlockEdit(codeBlockService);
 
-const codeBlockList = useTemplateRef<InstanceType<typeof CodeBlockList>>('codeBlockList');
+const codeBlockListRef = useTemplateRef<InstanceType<typeof CodeBlockList>>('codeBlockList');
 
 const filterTextChangeHandler = (val: string) => {
-  codeBlockList.value?.filter(val);
+  codeBlockListRef.value?.filter(val);
 };
 
 eventBus?.on('edit-code', (id: string) => {
@@ -104,7 +104,7 @@ const {
   menuData: contentMenuData,
   contentMenuHideHandler,
 } = useContentMenu((id: string) => {
-  codeBlockList.value?.deleteCode(id);
+  codeBlockListRef.value?.deleteCode(id);
 });
 const menuData = computed<(MenuButton | MenuComponent)[]>(() => props.customContentMenu(contentMenuData, 'code-block'));
 </script>

package/src/layouts/sidebar/layer/LayerMenu.vue

@@ -27,7 +27,7 @@ const emit = defineEmits<{
 }>();
 
 const services = inject<Services>('services');
-const menu = useTemplateRef<InstanceType<typeof ContentMenu>>('menu');
+const menuRef = useTemplateRef<InstanceType<typeof ContentMenu>>('menu');
 const node = computed(() => services?.editorService.get('node'));
 const nodes = computed(() => services?.editorService.get('nodes'));
 const componentList = computed(() => services?.componentListService.getList() || []);
@@ -113,7 +113,7 @@ const menuData = computed<(MenuButton | MenuComponent)[]>(() =>
 );
 
 const show = (e: MouseEvent) => {
-  menu.value?.show(e);
+  menuRef.value?.show(e);
 };
 
 defineExpose({

package/src/layouts/sidebar/layer/LayerPanel.vue

@@ -87,13 +87,13 @@ defineProps<{
 const services = inject<Services>('services');
 const editorService = services?.editorService;
 
-const tree = useTemplateRef<InstanceType<typeof Tree>>('tree');
+const treeRef = useTemplateRef<InstanceType<typeof Tree>>('tree');
 
 const page = computed(() => editorService?.get('page'));
 const nodeData = computed<TreeNodeData[]>(() => (!page.value ? [] : [page.value]));
 
 const { nodeStatusMap } = useNodeStatus(services);
-const { isCtrlKeyDown } = useKeybinding(services, tree);
+const { isCtrlKeyDown } = useKeybinding(services, treeRef);
 
 const filterNodeMethod = (v: string, data: MNode): boolean => {
   let name = '';
@@ -121,10 +121,11 @@ const collapseAllHandler = () => {
 
 const { handleDragStart, handleDragEnd, handleDragLeave, handleDragOver } = useDrag(services);
 
+// 右键菜单
+const menuRef = useTemplateRef<InstanceType<typeof LayerMenu>>('menu');
 const {
-  menu,
   nodeClickHandler,
   nodeContentMenuHandler,
   highlightHandler: mouseenterHandler,
-} = useClick(services, isCtrlKeyDown, nodeStatusMap);
+} = useClick(services, isCtrlKeyDown, nodeStatusMap, menuRef);
 </script>

package/src/layouts/sidebar/layer/use-click.ts

@@ -1,4 +1,4 @@
-import { computed, type ComputedRef, nextTick, type Ref, useTemplateRef } from 'vue';
+import { computed, type ComputedRef, nextTick, type Ref, type ShallowRef } from 'vue';
 import { throttle } from 'lodash-es';
 
 import { Id, MNode } from '@tmagic/core';
@@ -13,6 +13,7 @@ export const useClick = (
   services: Services | undefined,
   isCtrlKeyDown: Ref<boolean>,
   nodeStatusMap: ComputedRef<Map<Id, LayerNodeStatus> | undefined>,
+  menuRef: ShallowRef<InstanceType<typeof LayerMenu> | null>,
 ) => {
   const isMultiSelect = computed(() => isCtrlKeyDown.value && !services?.editorService.get('disabledMultiSelect'));
 
@@ -98,11 +99,8 @@ export const useClick = (
     });
   };
 
-  // 右键菜单
-  const menu = useTemplateRef<InstanceType<typeof LayerMenu>>('menu');
-
   return {
-    menu,
+    menuRef,
 
     nodeClickHandler,
 
@@ -114,7 +112,7 @@ export const useClick = (
         nodeClickHandler(event, data);
       }
 
-      menu.value?.show(event);
+      menuRef.value?.show(event);
     },
 
     highlightHandler,

package/src/layouts/workspace/viewer/NodeListMenu.vue

@@ -39,8 +39,8 @@ const editorService = services?.editorService;
 
 const visible = ref(false);
 const buttonVisible = ref(false);
-const button = useTemplateRef<HTMLDivElement>('button');
-const box = useTemplateRef<InstanceType<typeof FloatingBox>>('box');
+const buttonEl = useTemplateRef<HTMLDivElement>('button');
+const boxRef = useTemplateRef<InstanceType<typeof FloatingBox>>('box');
 
 const stage = computed(() => editorService?.get('stage'));
 const page = computed(() => editorService?.get('page'));
@@ -99,14 +99,14 @@ const menuPosition = ref({
 });
 
 watch(visible, async (visible) => {
-  if (!button.value || !visible) {
+  if (!buttonEl.value || !visible) {
     return;
   }
 
   await nextTick();
 
-  const rect = button.value.getBoundingClientRect();
-  const height = box.value?.target?.clientHeight || 0;
+  const rect = buttonEl.value.getBoundingClientRect();
+  const height = boxRef.value?.target?.clientHeight || 0;
 
   menuPosition.value = {
     left: rect.left + rect.width + 5,

package/src/layouts/workspace/viewer/Stage.vue

@@ -14,7 +14,7 @@
       width: 60,
       height: 50,
     }"
-    @click="stageWrap?.container?.focus()"
+    @click="stageWrapRef?.container?.focus()"
   >
     <div
       class="m-editor-stage-container"
@@ -95,9 +95,9 @@ const services = inject<Services>('services');
 
 const stageLoading = computed(() => services?.editorService.get('stageLoading') || false);
 
-const stageWrap = useTemplateRef<InstanceType<typeof ScrollViewer>>('stageWrap');
-const stageContainer = useTemplateRef<HTMLDivElement>('stageContainer');
-const menu = useTemplateRef<InstanceType<typeof ViewerMenu>>('menu');
+const stageWrapRef = useTemplateRef<InstanceType<typeof ScrollViewer>>('stageWrap');
+const stageContainerEl = useTemplateRef<HTMLDivElement>('stageContainer');
+const menuRef = useTemplateRef<InstanceType<typeof ViewerMenu>>('menu');
 
 const nodes = computed(() => services?.editorService.get('nodes') || []);
 const isMultiSelect = computed(() => nodes.value.length > 1);
@@ -111,18 +111,18 @@ const node = computed(() => services?.editorService.get('node'));
 watchEffect(() => {
   if (stage || !page.value) return;
 
-  if (!stageContainer.value) return;
+  if (!stageContainerEl.value) return;
   if (!(props.stageOptions?.runtimeUrl || props.stageOptions?.render) || !root.value) return;
 
   stage = useStage(props.stageOptions);
 
   stage.on('select', () => {
-    stageWrap.value?.container?.focus();
+    stageWrapRef.value?.container?.focus();
   });
 
   services?.editorService.set('stage', markRaw(stage));
 
-  stage.mount(stageContainer.value);
+  stage.mount(stageContainerEl.value);
 
   if (!node.value?.id) {
     return;
@@ -188,9 +188,9 @@ const resizeObserver = new ResizeObserver((entries) => {
 });
 
 onMounted(() => {
-  if (stageWrap.value?.container) {
-    resizeObserver.observe(stageWrap.value.container);
-    services?.keybindingService.registerEl(KeyBindingContainerKey.STAGE, stageWrap.value.container);
+  if (stageWrapRef.value?.container) {
+    resizeObserver.observe(stageWrapRef.value.container);
+    services?.keybindingService.registerEl(KeyBindingContainerKey.STAGE, stageWrapRef.value.container);
   }
 });
 
@@ -206,7 +206,7 @@ const parseDSL = getEditorConfig('parseDSL');
 
 const contextmenuHandler = (e: MouseEvent) => {
   e.preventDefault();
-  menu.value?.show(e);
+  menuRef.value?.show(e);
 };
 
 const dragoverHandler = (e: DragEvent) => {
@@ -239,10 +239,10 @@ const dropHandler = async (e: DragEvent) => {
     parent = services?.editorService.getNodeById(parentId, false) as MContainer;
   }
 
-  if (parent && stageContainer.value && stage) {
+  if (parent && stageContainerEl.value && stage) {
     const layout = await services?.editorService.getLayout(parent);
 
-    const containerRect = stageContainer.value.getBoundingClientRect();
+    const containerRect = stageContainerEl.value.getBoundingClientRect();
     const { scrollTop, scrollLeft } = stage.mask!;
     const { style = {} } = config.data;
 

package/src/layouts/workspace/viewer/StageOverlay.vue

@@ -19,7 +19,7 @@ const services = inject<Services>('services');
 
 const stageOptions = inject<StageOptions>('stageOptions');
 
-const stageOverlay = useTemplateRef<HTMLDivElement>('stageOverlay');
+const stageOverlayEl = useTemplateRef<HTMLDivElement>('stageOverlay');
 
 const stageOverlayVisible = computed(() => services?.stageOverlayService.get('stageOverlayVisible'));
 const wrapWidth = computed(() => services?.stageOverlayService.get('wrapWidth') || 0);
@@ -42,7 +42,7 @@ watch(stage, (stage) => {
   }
 });
 
-watch(stageOverlay, (stageOverlay) => {
+watch(stageOverlayEl, (stageOverlay) => {
   if (!services) return;
 
   const subStage = services.stageOverlayService.createStage(stageOptions);

package/src/layouts/workspace/viewer/ViewerMenu.vue

@@ -31,7 +31,7 @@ const props = withDefaults(
 
 const services = inject<Services>('services');
 const editorService = services?.editorService;
-const menu = useTemplateRef<InstanceType<typeof ContentMenu>>('menu');
+const menuRef = useTemplateRef<InstanceType<typeof ContentMenu>>('menu');
 const canCenter = ref(false);
 
 const node = computed(() => editorService?.get('node'));
@@ -52,7 +52,7 @@ const menuData = computed<(MenuButton | MenuComponent)[]>(() =>
         },
       },
       useCopyMenu(),
-      usePasteMenu(menu),
+      usePasteMenu(menuRef),
       {
         type: 'divider',
         direction: 'horizontal',
@@ -136,7 +136,7 @@ watch(
 );
 
 const show = (e: MouseEvent) => {
-  menu.value?.show(e);
+  menuRef.value?.show(e);
 };
 
 defineExpose({ show });

package/src/services/componentList.ts

@@ -16,14 +16,14 @@
  * limitations under the License.
  */
 
-import { reactive } from 'vue';
+import { shallowReactive } from 'vue';
 
 import type { ComponentGroup, ComponentGroupState } from '@editor/type';
 
 import BaseService from './BaseService';
 
 class ComponentList extends BaseService {
-  private state = reactive<ComponentGroupState>({
+  private state = shallowReactive<ComponentGroupState>({
     list: [],
   });
 

package/src/services/dep.ts

@@ -15,7 +15,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { reactive } from 'vue';
+import { reactive, shallowReactive } from 'vue';
 
 import type { DepExtendedData, Id, MNode, Target, TargetNode } from '@tmagic/core';
 import { DepTargetType, Watcher } from '@tmagic/core';
@@ -29,6 +29,7 @@ export interface DepEvents {
   'add-target': [target: Target];
   'remove-target': [id: string | number];
   collected: [nodes: MNode[], deep: boolean];
+  'ds-collected': [nodes: MNode[], deep: boolean];
 }
 
 interface State {
@@ -40,7 +41,7 @@ type StateKey = keyof State;
 const idleTask = new IdleTask<{ node: TargetNode; deep: boolean; target: Target }>();
 
 class Dep extends BaseService {
-  private state = reactive<State>({
+  private state = shallowReactive<State>({
     collecting: false,
   });
 
@@ -96,6 +97,7 @@ class Dep extends BaseService {
     this.set('collecting', false);
 
     this.emit('collected', nodes, deep);
+    this.emit('ds-collected', nodes, deep);
   }
 
   public collectIdle(nodes: MNode[], depExtendedData: DepExtendedData = {}, deep = false, type?: DepTargetType) {
@@ -119,6 +121,9 @@ class Dep extends BaseService {
         this.set('collecting', false);
         resolve();
       });
+      idleTask.once('hight-level-finish', () => {
+        this.emit('ds-collected', nodes, deep);
+      });
     });
   }
 
@@ -185,6 +190,7 @@ class Dep extends BaseService {
         deep: false,
         target,
       },
+      target.type === DepTargetType.DATA_SOURCE,
     );
 
     if (deep && Array.isArray(node.items) && node.items.length) {

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/services/stageOverlay.ts

@@ -1,4 +1,4 @@
-import { reactive } from 'vue';
+import { shallowReactive } from 'vue';
 import type { Writable } from 'type-fest';
 
 import StageCore from '@tmagic/stage';
@@ -17,7 +17,7 @@ const canUsePluginMethods = {
 type SyncMethodName = Writable<(typeof canUsePluginMethods)['sync']>;
 
 class StageOverlay extends BaseService {
-  private state: StageOverlayState = reactive({
+  private state: StageOverlayState = shallowReactive({
     wrapDiv: document.createElement('div'),
     sourceEl: null,
     contentEl: null,

package/src/services/ui.ts

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { reactive } from 'vue';
+import { shallowReactive } from 'vue';
 import type { Writable } from 'type-fest';
 
 import { convertToNumber } from '@tmagic/utils';
@@ -26,7 +26,7 @@ import type { AsyncHookPlugin, StageRect, UiState } from '@editor/type';
 
 import BaseService from './BaseService';
 
-const state = reactive<UiState>({
+const state = shallowReactive<UiState>({
   uiSelectMode: false,
   showSrc: false,
   showStylePanel: true,

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