From 68baf5f1e9583ac67ae12c58fdd5f931e6e445ea Mon Sep 17 00:00:00 2001
From: YoVinchen <gzh298255@gmail.com>
Date: Sun, 10 Aug 2025 07:54:30 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E9=A1=B5=E9=9D=A2=E6=AF=94?=
 =?UTF-8?q?=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ClaudeCodeSession.tsx         | 20 ++++++++++++--------
 src/components/FileExplorerPanelEnhanced.tsx | 17 +++++++++++++++--
 src/components/GitPanelEnhanced.tsx          | 17 +++++++++++++++--
 3 files changed, 42 insertions(+), 12 deletions(-)

diff --git a/src/components/ClaudeCodeSession.tsx b/src/components/ClaudeCodeSession.tsx
index 65a730a..e98afb4 100644
--- a/src/components/ClaudeCodeSession.tsx
+++ b/src/components/ClaudeCodeSession.tsx
@@ -1472,22 +1472,26 @@ export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
           
           {/* Main Content with Input */}
           <div className={cn(
-            "flex-1 transition-all duration-300 relative flex flex-col",
-            showFileExplorer && "pl-[280px]",
-            showGitPanel && "pr-[320px]"
-          )}>
+            "flex-1 transition-all duration-300 relative flex flex-col"
+          )}
+          style={{
+            marginLeft: showFileExplorer ? '15vw' : 'auto',
+            marginRight: showGitPanel ? '15vw' : 'auto',
+            width: (!showFileExplorer && !showGitPanel) ? '90%' : 'calc(100% - ' + ((showFileExplorer ? 15 : 0) + (showGitPanel ? 15 : 0)) + 'vw)',
+            maxWidth: (!showFileExplorer && !showGitPanel) ? '100%' : 'none'
+          }}>
           {showPreview ? (
             // Split pane layout when preview is active
             <div className="h-full">
               <SplitPane
                 left={
                   <div className="h-full flex flex-col">
-                    <div className="flex-1 flex flex-col max-w-5xl mx-auto w-full">
+                    <div className="flex-1 flex flex-col mx-auto w-full px-4">
                       {projectPathInput}
                       {messagesList}
                     </div>
                     {/* Floating Input for preview mode */}
-                    <div className="max-w-5xl mx-auto w-full relative">
+                    <div className="mx-auto w-full relative px-4">
                       <FloatingPromptInput
                         ref={floatingPromptRef}
                         onSend={handleSendPrompt}
@@ -1528,7 +1532,7 @@ export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
             // Original layout when no preview or editor
             <div className="h-full flex flex-col relative">
               {/* Main content area with messages */}
-              <div className="flex-1 flex flex-col max-w-5xl mx-auto w-full">
+              <div className="flex-1 flex flex-col mx-auto w-full px-4">
                 {projectPathInput}
                 {messagesList}
                 
@@ -1545,7 +1549,7 @@ export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
               </div>
               
               {/* Floating elements container - same width as main content */}
-              <div className="max-w-5xl mx-auto w-full relative">
+              <div className="mx-auto w-full relative px-4">
                 <ErrorBoundary>
                   {/* Queued Prompts Display */}
                   <AnimatePresence>
diff --git a/src/components/FileExplorerPanelEnhanced.tsx b/src/components/FileExplorerPanelEnhanced.tsx
index a38a18e..d65ff23 100644
--- a/src/components/FileExplorerPanelEnhanced.tsx
+++ b/src/components/FileExplorerPanelEnhanced.tsx
@@ -153,7 +153,7 @@ export const FileExplorerPanelEnhanced: React.FC<FileExplorerPanelEnhancedProps>
   const [flattenedNodes, setFlattenedNodes] = useState<FileNode[]>([]);
   const [lastClickTime, setLastClickTime] = useState(0);
   const [lastClickPath, setLastClickPath] = useState<string | null>(null);
-  const [width, setWidth] = useState(320);
+  const [width, setWidth] = useState(window.innerWidth * 0.15); // 15% of viewport width
   const [isResizing, setIsResizing] = useState(false);
   const [viewMode, setViewMode] = useState<"tree" | "folder">("tree");
   
@@ -161,13 +161,26 @@ export const FileExplorerPanelEnhanced: React.FC<FileExplorerPanelEnhancedProps>
   const resizeHandleRef = useRef<HTMLDivElement>(null);
   const unlistenRef = useRef<UnlistenFn | null>(null);
 
+  // 响应窗口大小变化
+  useEffect(() => {
+    const handleResize = () => {
+      // 保持15%的比例
+      setWidth(window.innerWidth * 0.15);
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
   // 处理拖拽调整宽度
   useEffect(() => {
     const handleMouseMove = (e: MouseEvent) => {
       if (!isResizing) return;
       
       const newWidth = e.clientX;
-      if (newWidth >= 200 && newWidth <= 600) {
+      const minWidth = window.innerWidth * 0.1; // Min 10%
+      const maxWidth = window.innerWidth * 0.25; // Max 25%
+      if (newWidth >= minWidth && newWidth <= maxWidth) {
         setWidth(newWidth);
       }
     };
diff --git a/src/components/GitPanelEnhanced.tsx b/src/components/GitPanelEnhanced.tsx
index c0e9303..2904466 100644
--- a/src/components/GitPanelEnhanced.tsx
+++ b/src/components/GitPanelEnhanced.tsx
@@ -139,7 +139,7 @@ export const GitPanelEnhanced: React.FC<GitPanelEnhancedProps> = ({
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [activeTab, setActiveTab] = useState("changes");
-  const [width, setWidth] = useState(320);
+  const [width, setWidth] = useState(window.innerWidth * 0.15); // 15% of viewport width
   const [isResizing, setIsResizing] = useState(false);
   const [expandedNodes, setExpandedNodes] = useState<Set<string>>(new Set());
   const [selectedPath, setSelectedPath] = useState<string | null>(null);
@@ -153,6 +153,17 @@ export const GitPanelEnhanced: React.FC<GitPanelEnhancedProps> = ({
 
   const refreshIntervalRef = useRef<NodeJS.Timeout | null>(null);
 
+  // 响应窗口大小变化
+  useEffect(() => {
+    const handleResize = () => {
+      // 保持15%的比例
+      setWidth(window.innerWidth * 0.15);
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
   // 处理拖拽调整宽度
   useEffect(() => {
     const handleMouseMove = (e: MouseEvent) => {
@@ -160,8 +171,10 @@ export const GitPanelEnhanced: React.FC<GitPanelEnhancedProps> = ({
 
       const windowWidth = window.innerWidth;
       const newWidth = windowWidth - e.clientX;
+      const minWidth = window.innerWidth * 0.1; // Min 10%
+      const maxWidth = window.innerWidth * 0.25; // Max 25%
 
-      if (newWidth >= 200 && newWidth <= 600) {
+      if (newWidth >= minWidth && newWidth <= maxWidth) {
         setWidth(newWidth);
       }
     };