feat(editor): 优化浏览器变小时各列大小变化

packages/editor/src/components/SplitView.vue

@@ -45,7 +45,7 @@ const props = withDefaults(
     centerClass?: string;
   }>(),
   {
-    minLeft: 46,
+    minLeft: 1,
     minRight: 1,
     minCenter: 5,
   },
@@ -65,12 +65,21 @@ const getCenterWidth = (l = 0, r = 0) => {
   let center = clientWidth - left - right;
 
   if (center < props.minCenter) {
+    const diff = props.minCenter - center;
+
     center = props.minCenter;
-    if (right > center + props.minRight) {
-      right = clientWidth - left - center;
-    } else {
+
+    if (right - diff < props.minRight) {
       right = props.minRight;
-      left = clientWidth - right - center;
+    } else {
+      right -= diff;
+    }
+
+    left = clientWidth - right - center;
+
+    if (left < props.minLeft) {
+      left -= diff / 2;
+      right -= diff / 2;
     }
   }
   return {
@@ -86,8 +95,8 @@ const widthChange = (width: number) => {
   }
 
   clientWidth = width;
-  let left = props.left || 0;
-  let right = props.right || 0;
+  let left = props.left || props.minLeft || 0;
+  let right = props.right || props.minRight || 0;
 
   if (left > clientWidth) {
     left = clientWidth / 3;

packages/editor/src/layouts/Framework.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="m-editor" ref="content" style="min-width: 180px">
+  <div class="m-editor" ref="content" style="min-width: 900px">
     <slot name="header"></slot>
 
     <slot name="nav"></slot>
@@ -17,11 +17,11 @@
       left-class="m-editor-framework-left"
       center-class="m-editor-framework-center"
       right-class="m-editor-framework-right"
-      v-model:left="columnWidth.left"
-      v-model:right="columnWidth.right"
-      :min-left="65"
-      :min-right="420"
-      :min-center="100"
+      :left="columnWidth.left"
+      :right="columnWidth.right"
+      :min-left="200"
+      :min-right="300"
+      :min-center="400"
       :width="frameworkRect?.width || 0"
       @change="columnWidthChange"
     >
@@ -60,13 +60,18 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue';
+import { computed, inject, onBeforeUnmount, onMounted, useTemplateRef, watch } from 'vue';
 
 import type { MPage, MPageFragment } from '@tmagic/core';
 
 import SplitView from '@editor/components/SplitView.vue';
 import type { FrameworkSlots, GetColumnWidth, PageBarSortOptions, Services } from '@editor/type';
 import { getEditorConfig } from '@editor/utils/config';
+import {
+  DEFAULT_LEFT_COLUMN_WIDTH,
+  LEFT_COLUMN_WIDTH_STORAGE_KEY,
+  RIGHT_COLUMN_WIDTH_STORAGE_KEY,
+} from '@editor/utils/const';
 
 import PageBar from './page-bar/PageBar.vue';
 import AddPageBox from './AddPageBox.vue';
@@ -84,9 +89,6 @@ defineProps<{
   pageFilterFunction?: (page: MPage | MPageFragment, keyword: string) => boolean;
 }>();
 
-const DEFAULT_LEFT_COLUMN_WIDTH = 310;
-const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
-
 const codeOptions = inject('codeOptions', {});
 const { editorService, uiService } = inject<Services>('services') || {};
 
@@ -99,20 +101,14 @@ const page = computed(() => editorService?.get('page'));
 const pageLength = computed(() => editorService?.get('pageLength') || 0);
 const showSrc = computed(() => uiService?.get('showSrc'));
 
-const LEFT_COLUMN_WIDTH_STORAGE_KEY = '$MagicEditorLeftColumnWidthData';
-const RIGHT_COLUMN_WIDTH_STORAGE_KEY = '$MagicEditorRightColumnWidthData';
-
-const getLeftColumnWidthCacheData = () =>
-  Number(globalThis.localStorage.getItem(LEFT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_LEFT_COLUMN_WIDTH;
-
-const getRightColumnWidthCacheData = () =>
-  Number(globalThis.localStorage.getItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_RIGHT_COLUMN_WIDTH;
-
-const columnWidth = ref<Partial<GetColumnWidth>>({
-  left: getLeftColumnWidthCacheData(),
-  center: 0,
-  right: getRightColumnWidthCacheData(),
-});
+const columnWidth = computed(
+  () =>
+    uiService?.get('columnWidth') || {
+      left: 0,
+      center: 0,
+      right: 0,
+    },
+);
 
 watch(pageLength, () => {
   splitViewRef.value?.updateWidth();
@@ -121,13 +117,16 @@ watch(pageLength, () => {
 watch(
   () => uiService?.get('hideSlideBar'),
   (hideSlideBar) => {
-    columnWidth.value.left = hideSlideBar ? 0 : getLeftColumnWidthCacheData();
+    uiService?.set('columnWidth', {
+      ...columnWidth.value,
+      left: hideSlideBar
+        ? 0
+        : Number(globalThis.localStorage.getItem(LEFT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_LEFT_COLUMN_WIDTH,
+    });
   },
 );
 
 const columnWidthChange = (columnW: GetColumnWidth) => {
-  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);

packages/editor/src/layouts/props-panel/PropsPanel.vue

@@ -41,10 +41,9 @@
     </FormPanel>
 
     <TMagicButton
-      v-if="!showStylePanel"
+      v-if="showStylePanelToggleButton && !showStylePanel"
       class="m-editor-props-panel-style-icon"
       circle
-      :type="showStylePanel ? 'primary' : ''"
       @click="showStylePanelHandler"
     >
       <MIcon :icon="Sugar"></MIcon>
@@ -53,7 +52,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, onBeforeUnmount, ref, useTemplateRef, watchEffect } from 'vue';
+import { computed, inject, onBeforeUnmount, ref, useTemplateRef, watch, watchEffect } from 'vue';
 import { Close, Sugar } from '@element-plus/icons-vue';
 import type { OnDrag } from 'gesto';
 
@@ -66,6 +65,7 @@ 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';
+import { RIGHT_COLUMN_WIDTH_STORAGE_KEY } from '@editor/utils/const';
 
 import FormPanel from './FormPanel.vue';
 import { useStylePanel } from './use-style-panel';
@@ -163,17 +163,55 @@ const mountedHandler = () => {
 
 const propsPanelEl = useTemplateRef('propsPanel');
 const widthChange = ({ deltaX }: OnDrag) => {
-  if (!propsPanelEl.value) {
+  if (!propsPanelEl.value || !services) {
     return;
   }
 
   const width = globalThis.parseFloat(
     getComputedStyle(propsPanelEl.value).getPropertyValue('--props-style-panel-width'),
   );
-  propsPanelEl.value.style.setProperty('--props-style-panel-width', `${width - deltaX}px`);
+
+  let value = width - deltaX;
+  if (value > services.uiService.get('columnWidth').right) {
+    value = services.uiService.get('columnWidth').right - 40;
+  }
+  propsPanelEl.value.style.setProperty('--props-style-panel-width', `${value}px`);
 };
 
-const { showStylePanel, showStylePanelHandler, closeStylePanelHandler } = useStylePanel(services);
+const { showStylePanel, showStylePanelToggleButton, showStylePanelHandler, closeStylePanelHandler } =
+  useStylePanel(services);
+
+watch(showStylePanel, (showStylePanel) => {
+  if (!propsPanelEl.value || !services) {
+    return;
+  }
+
+  const columnWidth = {
+    ...services.uiService.get('columnWidth'),
+  };
+
+  const width = globalThis.parseFloat(
+    getComputedStyle(propsPanelEl.value).getPropertyValue('--props-style-panel-width'),
+  );
+
+  if (showStylePanel) {
+    columnWidth.right += width;
+    columnWidth.center -= width;
+  } else {
+    columnWidth.right -= width;
+    columnWidth.center += width;
+  }
+
+  if (columnWidth.center < 0) {
+    columnWidth.right = columnWidth.right + columnWidth.center - 400;
+    columnWidth.center = 400;
+
+    propsPanelEl.value.style.setProperty('--props-style-panel-width', `${columnWidth.right / 2}px`);
+  }
+
+  globalThis.localStorage.setItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY, `${columnWidth.right}`);
+  services.uiService.set('columnWidth', columnWidth);
+});
 
 const propertyFormPanelRef = useTemplateRef<InstanceType<typeof FormPanel>>('propertyFormPanel');
 defineExpose({

packages/editor/src/layouts/props-panel/use-style-panel.ts

@@ -8,14 +8,24 @@ export const useStylePanel = (services?: Services) => {
   const showStylePanelStorageValue = services?.storageService.getItem(showStylePanelStorageKey, {
     protocol: Protocol.BOOLEAN,
   });
+
   if (typeof showStylePanelStorageValue === 'boolean') {
     services?.uiService.set('showStylePanel', showStylePanelStorageValue);
   }
-  const showStylePanel = computed(() => services?.uiService.get('showStylePanel') ?? true);
+
+  const showStylePanel = computed(
+    () => showStylePanelToggleButton.value && (services?.uiService.get('showStylePanel') ?? true),
+  );
+
+  const showStylePanelToggleButton = computed(
+    () => !(services && services.uiService.get('frameworkRect').width < 1280),
+  );
+
   const showStylePanelHandler = () => {
     services?.uiService.set('showStylePanel', true);
     services?.storageService.setItem(showStylePanelStorageKey, true, { protocol: Protocol.BOOLEAN });
   };
+
   const closeStylePanelHandler = () => {
     services?.uiService.set('showStylePanel', false);
     services?.storageService.setItem(showStylePanelStorageKey, false, { protocol: Protocol.BOOLEAN });
@@ -23,6 +33,7 @@ export const useStylePanel = (services?: Services) => {
 
   return {
     showStylePanel,
+    showStylePanelToggleButton,
     showStylePanelHandler,
     closeStylePanelHandler,
   };

packages/editor/src/services/ui.ts

@@ -23,6 +23,12 @@ import { convertToNumber } from '@tmagic/utils';
 
 import editorService from '@editor/services/editor';
 import type { AsyncHookPlugin, StageRect, UiState } from '@editor/type';
+import {
+  DEFAULT_LEFT_COLUMN_WIDTH,
+  DEFAULT_RIGHT_COLUMN_WIDTH,
+  LEFT_COLUMN_WIDTH_STORAGE_KEY,
+  RIGHT_COLUMN_WIDTH_STORAGE_KEY,
+} from '@editor/utils/const';
 
 import BaseService from './BaseService';
 
@@ -40,9 +46,9 @@ const state = shallowReactive<UiState>({
     height: 817,
   },
   columnWidth: {
-    left: 0,
-    right: 0,
+    left: Number(globalThis.localStorage.getItem(LEFT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_LEFT_COLUMN_WIDTH,
     center: 0,
+    right: Number(globalThis.localStorage.getItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_RIGHT_COLUMN_WIDTH,
   },
   showGuides: true,
   showRule: true,

packages/editor/src/utils/const.ts

@@ -0,0 +1,5 @@
+export const LEFT_COLUMN_WIDTH_STORAGE_KEY = '$MagicEditorLeftColumnWidthData';
+export const RIGHT_COLUMN_WIDTH_STORAGE_KEY = '$MagicEditorRightColumnWidthData';
+
+export const DEFAULT_LEFT_COLUMN_WIDTH = 310;
+export const DEFAULT_RIGHT_COLUMN_WIDTH = 480;