fix(editor): 修复第一次打开编辑器左右边栏宽度可能为0问题

packages/editor/src/components/SplitView.vue

@@ -21,7 +21,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
+import { computed, onBeforeUnmount, onMounted, ref, watchEffect } from 'vue';
 import { OnDrag } from 'gesto';
 
 import Resizer from './Resizer.vue';
@@ -34,6 +34,7 @@ const emit = defineEmits(['update:left', 'change', 'update:right']);
 
 const props = withDefaults(
   defineProps<{
+    width?: number;
     left?: number;
     right?: number;
     minLeft?: number;
@@ -54,8 +55,11 @@ const el = ref<HTMLElement>();
 
 const hasLeft = computed(() => typeof props.left !== 'undefined');
 const hasRight = computed(() => typeof props.right !== 'undefined');
+const center = ref(0);
 
-const getCenterWidth = (clientWidth: number, l = 0, r = 0) => {
+let clientWidth = 0;
+
+const getCenterWidth = (l = 0, r = 0) => {
   let right = r > 0 ? r : 0;
   let left = l > 0 ? l : 0;
   let center = clientWidth - left - right;
@@ -76,45 +80,51 @@ const getCenterWidth = (clientWidth: number, l = 0, r = 0) => {
   };
 };
 
-let clientWidth = 0;
-const resizerObserver = new ResizeObserver((entries) => {
-  for (const { contentRect } of entries) {
-    clientWidth = contentRect.width;
-
-    let left = props.left || 0;
-    let right = props.right || 0;
-
-    if (left > clientWidth) {
-      left = clientWidth / 3;
-    }
-
-    if (right > clientWidth) {
-      right = clientWidth / 3;
-    }
-
-    const columnWidth = getCenterWidth(clientWidth, left, right);
-
-    center.value = columnWidth.center;
-
-    emit('change', {
-      left: columnWidth.left,
-      center: center.value,
-      right: columnWidth.right,
-    });
+const widthChange = (width: number) => {
+  if (width <= 0) {
+    return;
   }
-});
 
-onMounted(() => {
-  if (el.value) {
-    resizerObserver.observe(el.value);
+  clientWidth = width;
+  let left = props.left || 0;
+  let right = props.right || 0;
+
+  if (left > clientWidth) {
+    left = clientWidth / 3;
   }
-});
 
-onBeforeUnmount(() => {
-  resizerObserver.disconnect();
-});
+  if (right > clientWidth) {
+    right = clientWidth / 3;
+  }
 
-const center = ref(0);
+  const columnWidth = getCenterWidth(left, right);
+
+  center.value = columnWidth.center;
+
+  emit('change', columnWidth);
+};
+
+if (typeof props.width !== 'number') {
+  const resizerObserver = new ResizeObserver((entries) => {
+    for (const { contentRect } of entries) {
+      widthChange(contentRect.width);
+    }
+  });
+
+  onMounted(() => {
+    if (el.value) {
+      resizerObserver.observe(el.value);
+    }
+  });
+
+  onBeforeUnmount(() => {
+    resizerObserver.disconnect();
+  });
+} else {
+  watchEffect(() => {
+    if (typeof props.width === 'number') widthChange(props.width);
+  });
+}
 
 const changeLeft = ({ deltaX }: OnDrag) => {
   if (typeof props.left === 'undefined') return;
@@ -125,7 +135,7 @@ const changeLeft = ({ deltaX }: OnDrag) => {
     left = props.left;
   }
 
-  const columnWidth = getCenterWidth(clientWidth, left, props.right || 0);
+  const columnWidth = getCenterWidth(left, props.right || 0);
 
   center.value = columnWidth.center;
 
@@ -145,7 +155,7 @@ const changeRight = ({ deltaX }: OnDrag) => {
     right = props.right;
   }
 
-  const columnWidth = getCenterWidth(clientWidth, props.left, right);
+  const columnWidth = getCenterWidth(props.left, right);
 
   center.value = columnWidth.center;
 
@@ -158,7 +168,8 @@ const changeRight = ({ deltaX }: OnDrag) => {
 
 defineExpose({
   updateWidth() {
-    const columnWidth = getCenterWidth(el.value?.clientWidth || clientWidth, props.left, props.right);
+    clientWidth = props.width ?? el.value?.clientWidth ?? clientWidth;
+    const columnWidth = getCenterWidth(props.left, props.right);
 
     emit('change', {
       left: columnWidth.left,

packages/editor/src/layouts/Framework.vue

@@ -24,6 +24,7 @@
       :min-left="65"
       :min-right="20"
       :min-center="100"
+      :width="frameworkRect?.width || 0"
       @change="columnWidthChange"
     >
       <template #left>
@@ -57,7 +58,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, ref, watch } from 'vue';
+import { computed, inject, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 
 import { TMagicScrollbar } from '@tmagic/design';
 
@@ -101,40 +102,15 @@ const RIGHT_COLUMN_WIDTH_STORAGE_KEY = '$MagicEditorRightColumnWidthData';
 const getLeftColumnWidthCacheData = () =>
   Number(globalThis.localStorage.getItem(LEFT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_LEFT_COLUMN_WIDTH;
 
-const leftColumnWidthCacheData = getLeftColumnWidthCacheData();
-const RightColumnWidthCacheData =
-  Number(globalThis.localStorage.getItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_RIGHT_COLUMN_WIDTH;
-
 const columnWidth = ref<Partial<GetColumnWidth>>({
-  left: leftColumnWidthCacheData,
+  left: getLeftColumnWidthCacheData(),
   center: 0,
-  right: RightColumnWidthCacheData,
+  right: Number(globalThis.localStorage.getItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_RIGHT_COLUMN_WIDTH,
 });
 
-watch(
-  [pageLength, splitView],
-  () => {
-    splitView.value?.updateWidth();
-  },
-  {
-    immediate: true,
-  },
-);
-
-watch(
-  () => columnWidth.value.right,
-  (right) => {
-    if (typeof right === 'undefined') return;
-    globalThis.localStorage.setItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY, `${right}`);
-  },
-);
-
-watch(
-  () => columnWidth.value.left,
-  (left) => {
-    globalThis.localStorage.setItem(LEFT_COLUMN_WIDTH_STORAGE_KEY, `${left}`);
-  },
-);
+watch(pageLength, () => {
+  splitView.value?.updateWidth();
+});
 
 watch(
   () => uiService?.get('hideSlideBar'),
@@ -144,12 +120,35 @@ watch(
 );
 
 const columnWidthChange = (columnW: GetColumnWidth) => {
-  columnWidth.value.left = columnW.left;
-  columnWidth.value.center = columnW.center;
-  columnWidth.value.right = columnW.right;
+  columnWidth.value = columnW;
+
+  globalThis.localStorage.setItem(LEFT_COLUMN_WIDTH_STORAGE_KEY, `${columnW.left}`);
+  globalThis.localStorage.setItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY, `${columnW.right}`);
   uiService?.set('columnWidth', columnW);
 };
 
+const frameworkRect = computed(() => uiService?.get('frameworkRect'));
+
+const resizerObserver = new ResizeObserver((entries) => {
+  const { contentRect } = entries[0];
+  uiService?.set('frameworkRect', {
+    width: contentRect.width,
+    height: contentRect.height,
+    left: contentRect.left,
+    top: contentRect.top,
+  });
+});
+
+onMounted(() => {
+  if (content.value) {
+    resizerObserver.observe(content.value);
+  }
+});
+
+onBeforeUnmount(() => {
+  resizerObserver.disconnect();
+});
+
 const saveCode = (value: string) => {
   try {
     const parseDSL = getConfig('parseDSL');

packages/editor/src/services/ui.ts

@@ -54,6 +54,12 @@ const state = reactive<UiState>({
     width: 0,
     height: 0,
   },
+  frameworkRect: {
+    width: 0,
+    height: 0,
+    left: 0,
+    top: 0,
+  },
 });
 
 const canUsePluginMethods = {