From 775fcf5693eef051e5899aceae7873c1afa0e60c Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Tue, 4 Mar 2025 14:09:28 +0800
Subject: [PATCH] =?UTF-8?q?fix(editor):=20=E6=A0=B7=E5=BC=8F=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E5=AE=BD=E5=BA=A6=E4=B8=8D=E8=83=BD=E4=B8=BA=E8=B4=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../editor/src/layouts/props-panel/PropsPanel.vue     |  4 ++--
 .../editor/src/layouts/props-panel/use-style-panel.ts | 11 ++++++++++-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/packages/editor/src/layouts/props-panel/PropsPanel.vue b/packages/editor/src/layouts/props-panel/PropsPanel.vue
index ba3ca8c2..ba9c2c4b 100644
--- a/packages/editor/src/layouts/props-panel/PropsPanel.vue
+++ b/packages/editor/src/layouts/props-panel/PropsPanel.vue
@@ -171,7 +171,7 @@ const propsPanelWidth = ref(
 );
 
 onMounted(() => {
-  propsPanelEl.value?.style.setProperty('--props-style-panel-width', `${propsPanelWidth.value}px`);
+  propsPanelEl.value?.style.setProperty('--props-style-panel-width', `${Math.max(propsPanelWidth.value, 0)}px`);
 });
 
 const widthChange = ({ deltaX }: OnDrag) => {
@@ -187,7 +187,7 @@ const widthChange = ({ deltaX }: OnDrag) => {
   if (value > uiService.get('columnWidth').right) {
     value = uiService.get('columnWidth').right - 40;
   }
-  propsPanelWidth.value = value;
+  propsPanelWidth.value = Math.max(value, 0);
 };
 
 watch(propsPanelWidth, (value) => {
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 a77e2003..057477b5 100644
--- a/packages/editor/src/layouts/props-panel/use-style-panel.ts
+++ b/packages/editor/src/layouts/props-panel/use-style-panel.ts
@@ -1,4 +1,4 @@
-import { computed, type Ref } from 'vue';
+import { computed, type Ref, watch } from 'vue';
 
 import { Protocol } from '@editor/services/storage';
 import { Services } from '@editor/type';
@@ -21,6 +21,15 @@ export const useStylePanel = (
 
   const showStylePanelToggleButton = computed(() => uiService.get('frameworkRect').width >= 1280);
 
+  watch(
+    () => uiService.get('frameworkRect').width,
+    () => {
+      if (uiService.get('columnWidth').right < propsPanelWidth.value) {
+        toggleStylePanel(false);
+      }
+    },
+  );
+
   const toggleStylePanel = (showStylePanel: boolean) => {
     uiService.set('showStylePanel', showStylePanel);
     storageService.setItem(showStylePanelStorageKey, showStylePanel, { protocol: Protocol.BOOLEAN });