fix: make workbar browser fullscreen

This commit is contained in:
mesalogo
2026-09-09 21:15:28 +08:00
parent abd3d5c6bb
commit f3b695214b
4 changed files with 32 additions and 21 deletions
@@ -276,17 +276,26 @@ describe('RightAssistantSidebar resizing', () => {
screen.getByRole('button', { name: '全屏显示浏览器' })
)
expect(sidebar).toHaveClass('assistant-sidebar--browser-fullscreen')
expect(
sidebar.style.getPropertyValue('--assistant-sidebar-width')
).toBe('420px')
expect(
screen.getByRole('button', { name: '退出浏览器全屏' })
).toHaveAttribute('aria-pressed', 'true')
expect(
screen.getByRole('separator', { name: '调整助手工作栏宽度' })
).toHaveAttribute('aria-disabled', 'false')
).toHaveAttribute('aria-disabled', 'true')
expect(
screen.getByRole('separator', { name: '调整助手工作栏宽度' })
).toHaveAttribute('tabindex', '-1')
fireEvent.keyDown(window, { key: 'Escape' })
expect(sidebar).not.toHaveClass(
'assistant-sidebar--browser-fullscreen'
)
expect(
sidebar.style.getPropertyValue('--assistant-sidebar-width')
).toBe('420px')
})
it('keeps the docked sidebar non-modal', () => {
+9 -20
View File
@@ -234,6 +234,10 @@ function measureSplitLayoutWidth(
if (!sidebar || !workspace) {
return fallbackWidth
}
const layoutWidth = sidebar.parentElement?.getBoundingClientRect().width ?? 0
if (layoutWidth > 0) {
return layoutWidth
}
const measuredWidth =
workspace.getBoundingClientRect().width +
sidebar.getBoundingClientRect().width
@@ -698,7 +702,6 @@ export function RightAssistantSidebar({
)
const [isResizing, setIsResizing] = useState(false)
const [browserFullscreen, setBrowserFullscreen] = useState(false)
const browserRestoreRatio = useRef(sidebarRatio)
const sidebarRef = useRef<HTMLElement>(null)
const wasOpen = useRef(false)
const sidebarWidth = clampSidebarWidth(
@@ -804,9 +807,12 @@ export function RightAssistantSidebar({
}),
[]
)
const browserFullscreenActive =
open && activeWorkbarApp === 'browser' && browserFullscreen
const sidebarWidthLimits = getSidebarWidthLimits(splitLayoutWidth)
const canResize =
open &&
!browserFullscreenActive &&
sidebarWidthLimits.maximum > sidebarWidthLimits.minimum
const topLevelTasks = useMemo(
() => tasks.filter((task) => !task.parentTaskId),
@@ -853,26 +859,9 @@ export function RightAssistantSidebar({
}
}, [tab, workbarInstances])
const browserFullscreenActive =
open && activeWorkbarApp === 'browser' && browserFullscreen
const toggleBrowserFullscreen = useCallback((): void => {
if (browserFullscreen) {
setSidebarRatio(browserRestoreRatio.current)
setBrowserFullscreen(false)
return
}
const layoutWidth = measureSplitLayoutWidth(
sidebarRef.current,
splitLayoutWidth
)
browserRestoreRatio.current = sidebarRatio
setSidebarRatio(
layoutWidth > 0
? getSidebarWidthLimits(layoutWidth).maximum / layoutWidth
: sidebarRatio
)
setBrowserFullscreen(true)
}, [browserFullscreen, sidebarRatio, splitLayoutWidth])
setBrowserFullscreen((current) => !current)
}, [])
useEffect(() => {
if (!browserFullscreenActive) {
@@ -244,6 +244,9 @@ describe('WorkspacePrimitives', () => {
expect(stylesheet).toMatch(
/\.assistant-sidebar--open\s*\{[^}]*width:\s*var\(--assistant-sidebar-width,\s*30%\);[^}]*flex-basis:\s*var\(--assistant-sidebar-width,\s*30%\);/u
)
expect(stylesheet).toMatch(
/\.assistant-sidebar--browser-fullscreen\s*\{[^}]*position:\s*absolute;[^}]*z-index:\s*4;[^}]*width:\s*100%;[^}]*inset:\s*0;/u
)
expect(stylesheet).not.toMatch(
/@media \(max-width: 719px\)\s*\{(?:[^{}]|\{[^{}]*\})*?\.assistant-sidebar/u
)
+10
View File
@@ -3823,6 +3823,12 @@ button > svg {
}
.assistant-sidebar--browser-fullscreen {
position: absolute;
z-index: 4;
width: 100%;
border-left-width: 0;
flex-basis: 100%;
inset: 0;
transition: none;
}
@@ -3847,6 +3853,10 @@ button > svg {
display: block;
}
.assistant-sidebar--browser-fullscreen > .assistant-sidebar__resize-handle {
display: none;
}
.assistant-sidebar__resize-handle::after {
position: absolute;
top: 0;