记录上一次操作的面板的size大小持久化

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">

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;