From 6d82c0f730ff0ad7dc36b39b7c0d2534672b05c3 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Tue, 11 Feb 2025 17:25:58 +0800
Subject: [PATCH] =?UTF-8?q?fix(editor):=20=E7=BB=84=E4=BB=B6=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E5=88=97=E5=A4=A7=E5=B0=8F=E7=BC=93=E5=AD=98=E4=B8=8D?=
 =?UTF-8?q?=E7=94=9F=E6=95=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor/src/layouts/Framework.vue     | 22 ++++---
 .../src/layouts/props-panel/PropsPanel.vue    | 65 ++++++++-----------
 .../layouts/props-panel/use-style-panel.ts    | 42 ++++++++----
 packages/editor/src/services/ui.ts            |  8 ++-
 packages/editor/src/utils/const.ts            |  5 ++
 5 files changed, 82 insertions(+), 60 deletions(-)

diff --git a/packages/editor/src/layouts/Framework.vue b/packages/editor/src/layouts/Framework.vue
index e1eec797..49ee2a92 100644
--- a/packages/editor/src/layouts/Framework.vue
+++ b/packages/editor/src/layouts/Framework.vue
@@ -19,10 +19,10 @@
       right-class="m-editor-framework-right"
       :left="columnWidth.left"
       :right="columnWidth.right"
-      :min-left="200"
-      :min-right="300"
-      :min-center="400"
-      :width="frameworkRect?.width || 0"
+      :min-left="MIN_LEFT_COLUMN_WIDTH"
+      :min-right="MIN_RIGHT_COLUMN_WIDTH"
+      :min-center="MIN_CENTER_COLUMN_WIDTH"
+      :width="frameworkRect.width"
       @change="columnWidthChange"
     >
       <template #left>
@@ -66,11 +66,15 @@ import type { MPage, MPageFragment } from '@tmagic/core';
 
 import SplitView from '@editor/components/SplitView.vue';
 import { useServices } from '@editor/hooks/use-services';
+import { Protocol } from '@editor/services/storage';
 import type { FrameworkSlots, GetColumnWidth, PageBarSortOptions } from '@editor/type';
 import { getEditorConfig } from '@editor/utils/config';
 import {
   DEFAULT_LEFT_COLUMN_WIDTH,
   LEFT_COLUMN_WIDTH_STORAGE_KEY,
+  MIN_CENTER_COLUMN_WIDTH,
+  MIN_LEFT_COLUMN_WIDTH,
+  MIN_RIGHT_COLUMN_WIDTH,
   RIGHT_COLUMN_WIDTH_STORAGE_KEY,
 } from '@editor/utils/const';
 
@@ -91,7 +95,7 @@ defineProps<{
 }>();
 
 const codeOptions = inject('codeOptions', {});
-const { editorService, uiService } = useServices();
+const { editorService, uiService, storageService } = useServices();
 
 const contentEl = useTemplateRef<HTMLDivElement>('content');
 const splitViewRef = useTemplateRef<InstanceType<typeof SplitView>>('splitView');
@@ -115,14 +119,16 @@ watch(
       ...columnWidth.value,
       left: hideSlideBar
         ? 0
-        : Number(globalThis.localStorage.getItem(LEFT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_LEFT_COLUMN_WIDTH,
+        : storageService.getItem(LEFT_COLUMN_WIDTH_STORAGE_KEY, { protocol: Protocol.NUMBER }) ||
+          DEFAULT_LEFT_COLUMN_WIDTH,
     });
   },
 );
 
 const columnWidthChange = (columnW: GetColumnWidth) => {
-  globalThis.localStorage.setItem(LEFT_COLUMN_WIDTH_STORAGE_KEY, `${columnW.left}`);
-  globalThis.localStorage.setItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY, `${columnW.right}`);
+  storageService.setItem(LEFT_COLUMN_WIDTH_STORAGE_KEY, columnW.left, { protocol: Protocol.NUMBER });
+  storageService.setItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY, columnW.right, { protocol: Protocol.NUMBER });
+
   uiService.set('columnWidth', columnW);
 };
 
diff --git a/packages/editor/src/layouts/props-panel/PropsPanel.vue b/packages/editor/src/layouts/props-panel/PropsPanel.vue
index c7f3fcaf..ba3ca8c2 100644
--- a/packages/editor/src/layouts/props-panel/PropsPanel.vue
+++ b/packages/editor/src/layouts/props-panel/PropsPanel.vue
@@ -34,7 +34,9 @@
         <div class="m-editor-props-style-panel-title">
           <span>样式</span>
           <div>
-            <TMagicButton link size="small" @click="closeStylePanelHandler"><MIcon :icon="Close"></MIcon></TMagicButton>
+            <TMagicButton link size="small" @click="toggleStylePanel(false)"
+              ><MIcon :icon="Close"></MIcon
+            ></TMagicButton>
           </div>
         </div>
       </template>
@@ -44,7 +46,7 @@
       v-if="showStylePanelToggleButton && !showStylePanel"
       class="m-editor-props-panel-style-icon"
       circle
-      @click="showStylePanelHandler"
+      @click="toggleStylePanel(true)"
     >
       <MIcon :icon="Sugar"></MIcon>
     </TMagicButton>
@@ -52,7 +54,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onBeforeUnmount, ref, useTemplateRef, watch, watchEffect } from 'vue';
+import { computed, onBeforeUnmount, onMounted, ref, useTemplateRef, watch, watchEffect } from 'vue';
 import { Close, Sugar } from '@element-plus/icons-vue';
 import type { OnDrag } from 'gesto';
 
@@ -64,9 +66,10 @@ import { setValueByKeyPath } from '@tmagic/utils';
 import MIcon from '@editor/components/Icon.vue';
 import Resizer from '@editor/components/Resizer.vue';
 import { useServices } from '@editor/hooks/use-services';
+import { Protocol } from '@editor/services/storage';
 import type { PropsPanelSlots } from '@editor/type';
 import { styleTabConfig } from '@editor/utils';
-import { RIGHT_COLUMN_WIDTH_STORAGE_KEY } from '@editor/utils/const';
+import { PROPS_PANEL_WIDTH_STORAGE_KEY } from '@editor/utils/const';
 
 import FormPanel from './FormPanel.vue';
 import { useStylePanel } from './use-style-panel';
@@ -163,6 +166,14 @@ const mountedHandler = () => {
 };
 
 const propsPanelEl = useTemplateRef('propsPanel');
+const propsPanelWidth = ref(
+  storageService.getItem(PROPS_PANEL_WIDTH_STORAGE_KEY, { protocol: Protocol.NUMBER }) || 300,
+);
+
+onMounted(() => {
+  propsPanelEl.value?.style.setProperty('--props-style-panel-width', `${propsPanelWidth.value}px`);
+});
+
 const widthChange = ({ deltaX }: OnDrag) => {
   if (!propsPanelEl.value) {
     return;
@@ -176,45 +187,21 @@ const widthChange = ({ deltaX }: OnDrag) => {
   if (value > uiService.get('columnWidth').right) {
     value = uiService.get('columnWidth').right - 40;
   }
-  propsPanelEl.value.style.setProperty('--props-style-panel-width', `${value}px`);
+  propsPanelWidth.value = value;
 };
 
-const { showStylePanel, showStylePanelToggleButton, showStylePanelHandler, closeStylePanelHandler } = useStylePanel({
-  storageService,
-  uiService,
+watch(propsPanelWidth, (value) => {
+  propsPanelEl.value?.style.setProperty('--props-style-panel-width', `${value}px`);
+  storageService.setItem(PROPS_PANEL_WIDTH_STORAGE_KEY, value, { protocol: Protocol.NUMBER });
 });
 
-watch(showStylePanel, (showStylePanel) => {
-  if (!propsPanelEl.value) {
-    return;
-  }
-
-  const columnWidth = {
-    ...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}`);
-  uiService.set('columnWidth', columnWidth);
-});
+const { showStylePanel, showStylePanelToggleButton, toggleStylePanel } = useStylePanel(
+  {
+    storageService,
+    uiService,
+  },
+  propsPanelWidth,
+);
 
 const propertyFormPanelRef = useTemplateRef<InstanceType<typeof FormPanel>>('propertyFormPanel');
 defineExpose({
diff --git a/packages/editor/src/layouts/props-panel/use-style-panel.ts b/packages/editor/src/layouts/props-panel/use-style-panel.ts
index 42017ac3..a77e2003 100644
--- a/packages/editor/src/layouts/props-panel/use-style-panel.ts
+++ b/packages/editor/src/layouts/props-panel/use-style-panel.ts
@@ -1,9 +1,13 @@
-import { computed } from 'vue';
+import { computed, type Ref } from 'vue';
 
 import { Protocol } from '@editor/services/storage';
 import { Services } from '@editor/type';
+import { MIN_CENTER_COLUMN_WIDTH, RIGHT_COLUMN_WIDTH_STORAGE_KEY } from '@editor/utils/const';
 
-export const useStylePanel = ({ uiService, storageService }: Pick<Services, 'uiService' | 'storageService'>) => {
+export const useStylePanel = (
+  { uiService, storageService }: Pick<Services, 'uiService' | 'storageService'>,
+  propsPanelWidth: Ref<number>,
+) => {
   const showStylePanelStorageKey = 'props-panel-show-style-panel';
   const showStylePanelStorageValue = storageService.getItem(showStylePanelStorageKey, {
     protocol: Protocol.BOOLEAN,
@@ -17,20 +21,36 @@ export const useStylePanel = ({ uiService, storageService }: Pick<Services, 'uiS
 
   const showStylePanelToggleButton = computed(() => uiService.get('frameworkRect').width >= 1280);
 
-  const showStylePanelHandler = () => {
-    uiService.set('showStylePanel', true);
-    storageService.setItem(showStylePanelStorageKey, true, { protocol: Protocol.BOOLEAN });
-  };
+  const toggleStylePanel = (showStylePanel: boolean) => {
+    uiService.set('showStylePanel', showStylePanel);
+    storageService.setItem(showStylePanelStorageKey, showStylePanel, { protocol: Protocol.BOOLEAN });
 
-  const closeStylePanelHandler = () => {
-    uiService.set('showStylePanel', false);
-    storageService.setItem(showStylePanelStorageKey, false, { protocol: Protocol.BOOLEAN });
+    const columnWidth = {
+      ...uiService.get('columnWidth'),
+    };
+
+    if (showStylePanel) {
+      columnWidth.right += propsPanelWidth.value;
+      columnWidth.center -= propsPanelWidth.value;
+    } else {
+      columnWidth.right -= propsPanelWidth.value;
+      columnWidth.center += propsPanelWidth.value;
+    }
+
+    if (columnWidth.center < 0) {
+      columnWidth.right = columnWidth.right + columnWidth.center - MIN_CENTER_COLUMN_WIDTH;
+      columnWidth.center = MIN_CENTER_COLUMN_WIDTH;
+
+      propsPanelWidth.value = columnWidth.right / 2;
+    }
+
+    storageService.setItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY, columnWidth.right, { protocol: Protocol.NUMBER });
+    uiService.set('columnWidth', columnWidth);
   };
 
   return {
     showStylePanel,
     showStylePanelToggleButton,
-    showStylePanelHandler,
-    closeStylePanelHandler,
+    toggleStylePanel,
   };
 };
diff --git a/packages/editor/src/services/ui.ts b/packages/editor/src/services/ui.ts
index 71b0eab0..577b2f17 100644
--- a/packages/editor/src/services/ui.ts
+++ b/packages/editor/src/services/ui.ts
@@ -31,6 +31,7 @@ import {
 } from '@editor/utils/const';
 
 import BaseService from './BaseService';
+import storageService, { Protocol } from './storage';
 
 const state = shallowReactive<UiState>({
   uiSelectMode: false,
@@ -46,9 +47,12 @@ const state = shallowReactive<UiState>({
     height: 817,
   },
   columnWidth: {
-    left: Number(globalThis.localStorage.getItem(LEFT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_LEFT_COLUMN_WIDTH,
+    left:
+      storageService.getItem(LEFT_COLUMN_WIDTH_STORAGE_KEY, { protocol: Protocol.NUMBER }) || DEFAULT_LEFT_COLUMN_WIDTH,
     center: 0,
-    right: Number(globalThis.localStorage.getItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_RIGHT_COLUMN_WIDTH,
+    right:
+      storageService.getItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY, { protocol: Protocol.NUMBER }) ||
+      DEFAULT_RIGHT_COLUMN_WIDTH,
   },
   showGuides: true,
   showRule: true,
diff --git a/packages/editor/src/utils/const.ts b/packages/editor/src/utils/const.ts
index a00b3f30..744b97bd 100644
--- a/packages/editor/src/utils/const.ts
+++ b/packages/editor/src/utils/const.ts
@@ -3,9 +3,14 @@ export const UI_SELECT_MODE_EVENT_NAME = 'ui-select';
 
 export const LEFT_COLUMN_WIDTH_STORAGE_KEY = '$MagicEditorLeftColumnWidthData';
 export const RIGHT_COLUMN_WIDTH_STORAGE_KEY = '$MagicEditorRightColumnWidthData';
+export const PROPS_PANEL_WIDTH_STORAGE_KEY = '$MagicEditorPropsPanelWidthData';
 
 export const DEFAULT_LEFT_COLUMN_WIDTH = 310;
 export const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
 
+export const MIN_LEFT_COLUMN_WIDTH = 200;
+export const MIN_CENTER_COLUMN_WIDTH = 400;
+export const MIN_RIGHT_COLUMN_WIDTH = 300;
+
 export const H_GUIDE_LINE_STORAGE_KEY = '$MagicStageHorizontalGuidelinesData';
 export const V_GUIDE_LINE_STORAGE_KEY = '$MagicStageVerticalGuidelinesData';