From e5c4fb0efda5ce7bcb0c74f7d94390f07bcba15e Mon Sep 17 00:00:00 2001
From: eya46 <admin@eya46.com>
Date: Sat, 21 Feb 2026 20:04:38 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=E5=8F=B3=E4=BE=A7?=
 =?UTF-8?q?=E9=9D=A2=E6=9D=BF=20UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx                        |  2 +-
 src/components/ConnectionPanel.tsx |  7 +++++--
 src/components/LogsPanel.tsx       | 15 ++++++++-------
 src/components/ScreenshotPanel.tsx |  9 ++++++---
 4 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 933459f..e39b3de 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1137,7 +1137,7 @@ function App() {
           {/* 右侧信息面板 */}
           {!rightPanelCollapsed && (
             <div
-              className={`flex flex-col p-3 bg-bg-primary overflow-y-auto overflow-x-hidden border-l border-transparent ${sidePanelExpanded ? 'gap-3' : ''}`}
+              className={`flex flex-col p-3 bg-bg-primary overflow-x-hidden border-l border-transparent ${sidePanelExpanded ? 'gap-3 overflow-y-auto' : 'overflow-hidden'}`}
               style={{
                 width: rightPanelWidth,
                 minWidth: 240,
diff --git a/src/components/ConnectionPanel.tsx b/src/components/ConnectionPanel.tsx
index 1b9c3be..a75f099 100644
--- a/src/components/ConnectionPanel.tsx
+++ b/src/components/ConnectionPanel.tsx
@@ -1005,14 +1005,17 @@ export function ConnectionPanel() {
   }
 
   return (
-    <div id="connection-panel" className="bg-bg-secondary rounded-lg border border-border">
+    <div id="connection-panel" className="bg-bg-secondary rounded-lg ring-1 ring-inset ring-border overflow-hidden">
       {/* 标题栏（可点击折叠） */}
       <button
         onClick={() => setConnectionPanelExpanded(!connectionPanelExpanded)}
         className={clsx(
-          'w-full flex items-center justify-between px-3 py-2 hover:bg-bg-hover transition-colors',
+          'w-full flex items-center justify-between px-3 py-2 hover:bg-bg-hover focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-accent/50 outline-none',
           connectionPanelExpanded ? 'rounded-t-lg' : 'rounded-lg',
         )}
+        style={{
+          transition: `background-color 150ms, border-radius 0s${connectionPanelExpanded ? '' : ' 150ms'}`,
+        }}
       >
         <div className="flex items-center gap-2">
           <Settings2 className="w-4 h-4 text-text-secondary" />
diff --git a/src/components/LogsPanel.tsx b/src/components/LogsPanel.tsx
index 2d5bb4b..b086a80 100644
--- a/src/components/LogsPanel.tsx
+++ b/src/components/LogsPanel.tsx
@@ -10,7 +10,7 @@ import { ExportLogsModal } from './settings/ExportLogsModal';
 
 export function LogsPanel() {
   const { t } = useTranslation();
-  const logsEndRef = useRef<HTMLDivElement>(null);
+  const logsContainerRef = useRef<HTMLDivElement>(null);
   const { sidePanelExpanded, toggleSidePanelExpanded, activeInstanceId, instanceLogs, clearLogs } =
     useAppStore();
   const { state: menuState, show: showMenu, hide: hideMenu } = useContextMenu();
@@ -20,8 +20,9 @@ export function LogsPanel() {
   const logs = activeInstanceId ? instanceLogs[activeInstanceId] || [] : [];
 
   useEffect(() => {
-    if (logsEndRef.current) {
-      logsEndRef.current.scrollIntoView({ behavior: 'smooth' });
+    const el = logsContainerRef.current;
+    if (el) {
+      el.scrollTo({ top: el.scrollHeight, behavior: 'smooth' });
     }
   }, [logs]);
 
@@ -121,7 +122,7 @@ export function LogsPanel() {
   };
 
   return (
-    <div className="flex-1 flex flex-col bg-bg-secondary rounded-lg border border-border overflow-hidden">
+    <div className="flex-1 flex flex-col bg-bg-secondary rounded-lg ring-1 ring-inset ring-border overflow-hidden min-h-50">
       {/* 标题栏（可点击展开/折叠上方面板） */}
       <div
         role="button"
@@ -133,7 +134,7 @@ export function LogsPanel() {
             toggleSidePanelExpanded();
           }
         }}
-        className="flex items-center justify-between px-3 py-2 border-b border-border hover:bg-bg-hover transition-colors cursor-pointer"
+        className="flex items-center justify-between px-3 py-2 border-b border-border hover:bg-bg-hover transition-colors cursor-pointer shrink-0 rounded-t-lg focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-accent/50 outline-none"
       >
         <span className="text-sm font-medium text-text-primary">{t('logs.title')}</span>
         <div className="flex items-center gap-2">
@@ -190,7 +191,8 @@ export function LogsPanel() {
 
       {/* 日志内容 */}
       <div
-        className="flex-1 overflow-y-auto p-2 font-mono text-xs bg-bg-tertiary"
+        ref={logsContainerRef}
+        className="flex-1 min-h-0 overflow-y-auto p-2 font-mono text-xs bg-bg-tertiary"
         onContextMenu={handleContextMenu}
       >
         {logs.length === 0 ? (
@@ -223,7 +225,6 @@ export function LogsPanel() {
                 </div>
               ),
             )}
-            <div ref={logsEndRef} />
           </>
         )}
       </div>
diff --git a/src/components/ScreenshotPanel.tsx b/src/components/ScreenshotPanel.tsx
index 6a0eb69..e23c16c 100644
--- a/src/components/ScreenshotPanel.tsx
+++ b/src/components/ScreenshotPanel.tsx
@@ -504,7 +504,7 @@ export function ScreenshotPanel() {
   ]);
 
   return (
-    <div className="bg-bg-secondary rounded-lg border border-border">
+    <div className="bg-bg-secondary rounded-lg ring-1 ring-inset ring-border overflow-hidden">
       {/* 标题栏（可点击折叠） */}
       <div
         role="button"
@@ -513,13 +513,16 @@ export function ScreenshotPanel() {
         onKeyDown={(e) => {
           if (e.key === 'Enter' || e.key === ' ') {
             e.preventDefault();
-            setScreenshotPanelExpanded(!screenshotPanelExpanded);
+            (e.currentTarget as HTMLElement).click();
           }
         }}
         className={clsx(
-          'w-full flex items-center justify-between px-3 py-2 hover:bg-bg-hover transition-colors cursor-pointer',
+          'w-full flex items-center justify-between px-3 py-2 hover:bg-bg-hover cursor-pointer focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-accent/50 outline-none',
           screenshotPanelExpanded ? 'rounded-t-lg' : 'rounded-lg',
         )}
+        style={{
+          transition: `background-color 150ms, border-radius 0s${screenshotPanelExpanded ? '' : ' 150ms'}`,
+        }}
       >
         <div className="flex items-center gap-2">
           <Monitor className="w-4 h-4 text-text-secondary" />