fix(editor): 画布区域不允许宽度为0

packages/editor/src/components/SplitView.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="el" class="m-editor-layout">
+  <div ref="el" class="m-editor-layout" :style="`min-width: ${props.minCenter + props.minLeft + props.minRight}px`">
     <template v-if="hasLeft && $slots.left">
       <div class="m-editor-layout-left" :class="leftClass" :style="`width: ${left}px`">
         <slot name="left"></slot>
@@ -55,14 +55,18 @@ const el = ref<HTMLElement>();
 const hasLeft = computed(() => typeof props.left !== 'undefined');
 const hasRight = computed(() => typeof props.right !== 'undefined');
 
-const getCenterWidth = (clientWidth: number, left: number, right: number) => {
+const getCenterWidth = (clientWidth: number, l = 0, r = 0) => {
+  let right = r > 0 ? r : 0;
+  let left = l > 0 ? l : 0;
   let center = clientWidth - left - right;
+
   if (center < props.minCenter) {
     center = props.minCenter;
-    if (left < right) {
+    if (right > center + props.minRight) {
-      right = clientWidth - left - props.minCenter;
+      right = clientWidth - left - center;
     } else {
-      left = clientWidth - right - props.minCenter;
+      right = props.minRight;
+      left = clientWidth - right - center;
     }
   }
   return {
@@ -141,7 +145,7 @@ const changeRight = ({ deltaX }: OnDrag) => {
     right = props.right;
   }
 
-  const columnWidth = getCenterWidth(clientWidth, props.left || 0, right);
+  const columnWidth = getCenterWidth(clientWidth, props.left, right);
 
   center.value = columnWidth.center;
 
@@ -151,4 +155,16 @@ const changeRight = ({ deltaX }: OnDrag) => {
     right: columnWidth.right,
   });
 };
+
+defineExpose({
+  updateWidth() {
+    const columnWidth = getCenterWidth(el.value?.clientWidth || clientWidth, props.left, props.right);
+
+    emit('change', {
+      left: columnWidth.left,
+      center: center.value,
+      right: columnWidth.right,
+    });
+  },
+});
 </script>

packages/editor/src/layouts/Framework.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="m-editor" ref="content">
+  <div class="m-editor" ref="content" style="min-width: 180px">
     <slot name="header"></slot>
 
     <slot name="nav"></slot>
@@ -12,6 +12,7 @@
 
     <SplitView
       v-else
+      ref="splitView"
       class="m-editor-content"
       left-class="m-editor-framework-left"
       center-class="m-editor-framework-center"
@@ -20,6 +21,7 @@
       v-model:right="columnWidth.right"
       :min-left="65"
       :min-right="20"
+      :min-center="100"
       @change="columnWidthChange"
     >
       <template #left>
@@ -70,6 +72,7 @@ const codeOptions = inject('codeOptions', {});
 const { editorService, uiService } = inject<Services>('services') || {};
 
 const content = ref<HTMLDivElement>();
+const splitView = ref<InstanceType<typeof SplitView>>();
 
 const root = computed(() => editorService?.get('root'));
 
@@ -79,8 +82,10 @@ const showSrc = computed(() => uiService?.get('showSrc'));
 const LEFT_COLUMN_WIDTH_STORAGE_KEY = '$MagicEditorLeftColumnWidthData';
 const RIGHT_COLUMN_WIDTH_STORAGE_KEY = '$MagicEditorRightColumnWidthData';
 
-const leftColumnWidthCacheData = Number(globalThis.localStorage.getItem(LEFT_COLUMN_WIDTH_STORAGE_KEY));
+const leftColumnWidthCacheData =
-const RightColumnWidthCacheData = Number(globalThis.localStorage.getItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY));
+  Number(globalThis.localStorage.getItem(LEFT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_LEFT_COLUMN_WIDTH;
+const RightColumnWidthCacheData =
+  Number(globalThis.localStorage.getItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_RIGHT_COLUMN_WIDTH;
 
 const columnWidth = ref<Partial<GetColumnWidth>>({
   left: leftColumnWidthCacheData,
@@ -89,24 +94,9 @@ const columnWidth = ref<Partial<GetColumnWidth>>({
 });
 
 watch(
-  pageLength,
+  [pageLength, splitView],
-  (length) => {
+  () => {
-    const left = columnWidth.value.left || DEFAULT_LEFT_COLUMN_WIDTH;
+    splitView.value?.updateWidth();
-
-    columnWidth.value.left = left;
-
-    const container = content.value || document.body;
-
-    if (length <= 0) {
-      columnWidth.value.right = undefined;
-      columnWidth.value.center = container.clientWidth - left;
-    } else {
-      const right = columnWidth.value.right || RightColumnWidthCacheData || DEFAULT_RIGHT_COLUMN_WIDTH;
-      columnWidth.value.right = right;
-      columnWidth.value.center = container.clientWidth - left - right;
-    }
-
-    uiService?.set('columnWidth', columnWidth.value as GetColumnWidth);
   },
   {
     immediate: true,