Skip to content

fix: 优化右侧面板 UI #80

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
eya46 wants to merge 1 commit into
base: main
Choose a base branch
from
+20 −13
Open

fix: 优化右侧面板 UI #80

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
7 changes: 5 additions & 2 deletions src/components/ConnectionPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand Down
15 changes: 8 additions & 7 deletions src/components/LogsPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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]);

Expand Down Expand Up @@ -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">
Copy link

Copilot AI Feb 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The class min-h-50 translates to min-height: 12.5rem (200px) in Tailwind CSS. This is likely too large for a minimum height constraint on a logs panel that should be flexible. Consider using a smaller value like min-h-32 (128px) or min-h-24 (96px) to better match typical UI requirements while still preventing excessive compression in small windows.

Suggested change
<div className="flex-1 flex flex-col bg-bg-secondary rounded-lg ring-1 ring-inset ring-border overflow-hidden min-h-50">
<div className="flex-1 flex flex-col bg-bg-secondary rounded-lg ring-1 ring-inset ring-border overflow-hidden min-h-32">

Copilot uses AI. Check for mistakes.
{/* 标题栏（可点击展开/折叠上方面板） */}
<div
role="button"
Comment on lines 127 to 128
Copy link
Contributor

@sourcery-ai sourcery-ai bot Feb 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

issue (bug_risk): 可点击的标题 div 虽然使用了 role="button" 和按键处理函数，但仍然无法通过键盘聚焦。

由于缺少 tabIndex={0}，这个 div 无法通过键盘获得焦点，因此按键处理逻辑和焦点样式实际上对键盘用户不可用。请添加 tabIndex={0}，或者（更推荐）将其改为语义化的 <button> 元素，以确保一致且可访问的键盘交互体验。

Original comment in English

issue (bug_risk): The clickable header div isn't keyboard-focusable despite role="button" and key handlers.

Because it lacks tabIndex={0}, this div can’t be reached via keyboard focus, so the key handlers and focus styles won’t actually be usable for keyboard users. Please add tabIndex={0} or, preferably, convert it to a semantic <button> to ensure consistent, accessible keyboard interaction.

Expand All @@ -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">
Expand Down Expand Up @@ -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 ? (
Expand Down Expand Up @@ -223,7 +225,6 @@ export function LogsPanel() {
</div>
),
)}
<div ref={logsEndRef} />
</>
)}
</div>
Expand Down
9 changes: 6 additions & 3 deletions src/components/ScreenshotPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Comment on lines 509 to 510
Copy link
Contributor

@sourcery-ai sourcery-ai bot Feb 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

issue (bug_risk): 截图面板的标题 div 使用了 role="button"，但无法通过键盘聚焦。

这个标题同时使用了 role="button"、onKeyDown 处理函数以及 focus-visible 样式，但在没有 tabIndex={0} 的情况下，用户无法通过键盘聚焦到它。请添加 tabIndex={0}，或者改用 <button>，以便语义和行为保持一致，并让键盘用户能够看到并使用焦点状态。

Original comment in English

issue (bug_risk): The screenshot panel header div with role="button" is not keyboard-focusable.

This header uses role="button", an onKeyDown handler, and focus-visible styles, but without tabIndex={0} it can’t be reached via keyboard. Add tabIndex={0} or use a <button> so the semantics and behavior match and keyboard users can see and use the focus state.

Expand All @@ -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" />
Expand Down
Loading