fix(canvas): align fixed design sidebars
This commit is contained in:
@@ -131,9 +131,9 @@ describe('AI Design Canvas page', () => {
|
||||
render(<ImageCanvas />);
|
||||
|
||||
const historyRail = screen.getByTestId('image-workspace-history-rail');
|
||||
expect(historyRail).toHaveClass('h-full', 'border-l');
|
||||
expect(screen.getByTestId('image-workspace-header')).toHaveClass('h-12');
|
||||
expect(screen.getByTestId('image-workspace-history-header')).toHaveClass('h-12');
|
||||
expect(historyRail).toHaveClass('h-full', 'w-64', 'border-l');
|
||||
expect(screen.getByTestId('image-workspace-header')).toHaveClass('h-10');
|
||||
expect(screen.getByTestId('image-workspace-history-header')).toHaveClass('h-10');
|
||||
expect(within(historyRail).getByRole('heading', { name: '历史作品' })).toBeInTheDocument();
|
||||
expect(within(historyRail).queryByText('当前设计项目的制作记录')).not.toBeInTheDocument();
|
||||
expect(within(historyRail).getByText('还没有历史作品')).toBeInTheDocument();
|
||||
|
||||
@@ -7,18 +7,38 @@ import { useSettingsStore } from '@/stores/settings';
|
||||
const routeRenderMock = vi.hoisted(() => vi.fn());
|
||||
|
||||
vi.mock('@/components/layout/Sidebar', () => ({
|
||||
Sidebar: ({ hideOnCompact = false }: { hideOnCompact?: boolean }) => (
|
||||
<aside data-testid="sidebar-stub" data-hide-on-compact={String(hideOnCompact)} />
|
||||
Sidebar: ({ hideOnCompact = false, forceExpanded = false, sidebarPeekOpen = false, onSidebarPeekChange }: {
|
||||
hideOnCompact?: boolean;
|
||||
forceExpanded?: boolean;
|
||||
sidebarPeekOpen?: boolean;
|
||||
onSidebarPeekChange?: (open: boolean, source: 'toggle' | 'focus' | 'sidebar' | 'titlebar') => void;
|
||||
}) => (
|
||||
<aside
|
||||
data-testid="sidebar-stub"
|
||||
data-hide-on-compact={String(hideOnCompact)}
|
||||
data-force-expanded={String(forceExpanded)}
|
||||
data-peek-open={String(sidebarPeekOpen)}
|
||||
data-has-peek-handler={String(Boolean(onSidebarPeekChange))}
|
||||
/>
|
||||
),
|
||||
}));
|
||||
vi.mock('@/components/layout/TitleBar', () => ({
|
||||
TitleBar: ({ integrated = false, overlay = false, showSidebarControls = true, pageTitle }: { integrated?: boolean; overlay?: boolean; showSidebarControls?: boolean; pageTitle?: string }) => (
|
||||
TitleBar: ({ integrated = false, overlay = false, showSidebarControls = true, pageTitle, sidebarPeekOpen = false, onSidebarPeekChange }: {
|
||||
integrated?: boolean;
|
||||
overlay?: boolean;
|
||||
showSidebarControls?: boolean;
|
||||
pageTitle?: string;
|
||||
sidebarPeekOpen?: boolean;
|
||||
onSidebarPeekChange?: (open: boolean, source: 'toggle' | 'focus' | 'sidebar' | 'titlebar') => void;
|
||||
}) => (
|
||||
<header
|
||||
data-testid="titlebar-stub"
|
||||
data-integrated={integrated ? 'true' : 'false'}
|
||||
data-overlay={overlay ? 'true' : 'false'}
|
||||
data-sidebar-controls={showSidebarControls ? 'true' : 'false'}
|
||||
data-page-title={pageTitle ?? ''}
|
||||
data-peek-open={String(sidebarPeekOpen)}
|
||||
data-has-peek-handler={String(Boolean(onSidebarPeekChange))}
|
||||
/>
|
||||
),
|
||||
}));
|
||||
@@ -54,13 +74,19 @@ describe('MainLayout module isolation', () => {
|
||||
});
|
||||
|
||||
it('uses the full-height workspace shell with the shared left project sidebar for AI painting', () => {
|
||||
useSettingsStore.setState({ sidebarCollapsed: true });
|
||||
renderLayout('/image-canvas');
|
||||
|
||||
expect(screen.getByTestId('main-content')).toHaveClass('basis-0', 'h-full', 'overflow-hidden', 'p-0');
|
||||
expect(screen.getByTestId('main-content')).not.toHaveClass('p-5', 'sm:p-6');
|
||||
expect(screen.getByTestId('titlebar-stub')).toHaveAttribute('data-overlay', 'true');
|
||||
expect(screen.getByTestId('titlebar-stub')).toHaveAttribute('data-sidebar-controls', 'true');
|
||||
expect(screen.getByTestId('titlebar-stub')).toHaveAttribute('data-sidebar-controls', 'false');
|
||||
expect(screen.getByTestId('titlebar-stub')).toHaveAttribute('data-peek-open', 'false');
|
||||
expect(screen.getByTestId('titlebar-stub')).toHaveAttribute('data-has-peek-handler', 'false');
|
||||
expect(screen.getByTestId('sidebar-stub')).toHaveAttribute('data-hide-on-compact', 'true');
|
||||
expect(screen.getByTestId('sidebar-stub')).toHaveAttribute('data-force-expanded', 'true');
|
||||
expect(screen.getByTestId('sidebar-stub')).toHaveAttribute('data-peek-open', 'false');
|
||||
expect(screen.getByTestId('sidebar-stub')).toHaveAttribute('data-has-peek-handler', 'false');
|
||||
});
|
||||
|
||||
it('does not overlay the local project initialization gate on AI hardware', () => {
|
||||
|
||||
@@ -132,6 +132,18 @@ describe('TitleBar platform behavior', () => {
|
||||
expect(screen.getByTestId('titlebar-logo')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('leaves the narrow Windows Canvas rail to the native window controls', () => {
|
||||
window.electron.platform = 'win32';
|
||||
|
||||
render(<TitleBar integrated overlay showSidebarControls={false} />);
|
||||
|
||||
expect(screen.queryByTestId('titlebar-sidebar-toggle')).not.toBeInTheDocument();
|
||||
expect(screen.queryByTestId('titlebar-logo')).not.toBeInTheDocument();
|
||||
expect(screen.getByTitle('Minimize')).toBeInTheDocument();
|
||||
expect(screen.getByTitle('Maximize')).toBeInTheDocument();
|
||||
expect(screen.getByTitle('Close')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('keeps an optional page title after the macOS traffic-light safe area', () => {
|
||||
window.electron.platform = 'darwin';
|
||||
useSettingsStore.setState({ sidebarCollapsed: true });
|
||||
|
||||
Reference in New Issue
Block a user