From 62381f4160c9c8ab8b9434aadbaf26f751aecd48 Mon Sep 17 00:00:00 2001
From: YHH <359807859@qq.com>
Date: Wed, 15 Oct 2025 20:26:40 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AE=B0=E5=BD=95=E4=B8=8A=E4=B8=80=E6=AC=A1?=
 =?UTF-8?q?=E6=93=8D=E4=BD=9C=E7=9A=84=E9=9D=A2=E6=9D=BF=E7=9A=84size?=
 =?UTF-8?q?=E5=A4=A7=E5=B0=8F=E6=8C=81=E4=B9=85=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/DockContainer.tsx          |  6 +++++
 .../src/components/ResizablePanel.tsx         | 25 +++++++++++++++++--
 2 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/packages/editor-app/src/components/DockContainer.tsx b/packages/editor-app/src/components/DockContainer.tsx
index d1ec97cf..4221f1a8 100644
--- a/packages/editor-app/src/components/DockContainer.tsx
+++ b/packages/editor-app/src/components/DockContainer.tsx
@@ -70,6 +70,7 @@ export function DockContainer({ panels, onPanelClose }: DockContainerProps) {
         defaultSize={200}
         minSize={32}
         maxSize={600}
+        storageKey="editor-panel-bottom-size"
         leftOrTop={content}
         rightOrBottom={
           <div className="dock-bottom">
@@ -87,6 +88,7 @@ export function DockContainer({ panels, onPanelClose }: DockContainerProps) {
         defaultSize={200}
         minSize={32}
         maxSize={600}
+        storageKey="editor-panel-top-size"
         leftOrTop={
           <div className="dock-top">
             {renderPanelGroup('top')}
@@ -105,6 +107,7 @@ export function DockContainer({ panels, onPanelClose }: DockContainerProps) {
           defaultSize={250}
           minSize={150}
           maxSize={400}
+          storageKey="editor-panel-left-size"
           leftOrTop={
             <div className="dock-left">
               {renderPanelGroup('left')}
@@ -117,6 +120,7 @@ export function DockContainer({ panels, onPanelClose }: DockContainerProps) {
               defaultSize={280}
               minSize={200}
               maxSize={500}
+              storageKey="editor-panel-right-size"
               leftOrTop={content}
               rightOrBottom={
                 <div className="dock-right">
@@ -134,6 +138,7 @@ export function DockContainer({ panels, onPanelClose }: DockContainerProps) {
           defaultSize={250}
           minSize={150}
           maxSize={400}
+          storageKey="editor-panel-left-size"
           leftOrTop={
             <div className="dock-left">
               {renderPanelGroup('left')}
@@ -150,6 +155,7 @@ export function DockContainer({ panels, onPanelClose }: DockContainerProps) {
           defaultSize={280}
           minSize={200}
           maxSize={500}
+          storageKey="editor-panel-right-size"
           leftOrTop={content}
           rightOrBottom={
             <div className="dock-right">
diff --git a/packages/editor-app/src/components/ResizablePanel.tsx b/packages/editor-app/src/components/ResizablePanel.tsx
index 57f36388..519060e2 100644
--- a/packages/editor-app/src/components/ResizablePanel.tsx
+++ b/packages/editor-app/src/components/ResizablePanel.tsx
@@ -9,6 +9,7 @@ interface ResizablePanelProps {
   minSize?: number;
   maxSize?: number;
   side?: 'left' | 'right' | 'top' | 'bottom';
+  storageKey?: string;
 }
 
 export function ResizablePanel({
@@ -18,12 +19,32 @@ export function ResizablePanel({
   defaultSize = 250,
   minSize = 150,
   maxSize = 600,
-  side = 'left'
+  side = 'left',
+  storageKey
 }: ResizablePanelProps) {
-  const [size, setSize] = useState(defaultSize);
+  const getInitialSize = () => {
+    if (storageKey) {
+      const saved = localStorage.getItem(storageKey);
+      if (saved) {
+        const parsedSize = parseInt(saved, 10);
+        if (!isNaN(parsedSize)) {
+          return Math.max(minSize, Math.min(maxSize, parsedSize));
+        }
+      }
+    }
+    return defaultSize;
+  };
+
+  const [size, setSize] = useState(getInitialSize);
   const [isDragging, setIsDragging] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
 
+  useEffect(() => {
+    if (storageKey && !isDragging) {
+      localStorage.setItem(storageKey, size.toString());
+    }
+  }, [size, isDragging, storageKey]);
+
   useEffect(() => {
     if (!isDragging) return;