Refine Agent sidebar icons and manual expansion

tests/e2e/cloud-agents.spec.ts

@@ -126,11 +126,28 @@ test('personal cloud Agent identity, configuration and separate published chat i
     expect(collapseBounds).not.toBeNull();
     expect(Math.abs(returnBounds!.y - collapseBounds!.y)).toBeLessThanOrEqual(1);
     expect(returnBounds!.x + returnBounds!.width).toBeLessThan(collapseBounds!.x);
+    await page.screenshot({ path: testInfo.outputPath('cloud-agent-sidebar-icons.png') });
     await navigation.getByRole('button', { name: '折叠侧栏', exact: true }).click();
-    await page.mouse.move(700, 400);
+    const sidebar = page.getByTestId('sidebar');
+    const sidebarToggle = page.getByTestId('titlebar-sidebar-toggle');
+    await sidebarToggle.hover();
+    await expect(sidebar).toHaveAttribute('aria-hidden', 'true');
+    await expect(sidebarToggle).toHaveAttribute('aria-expanded', 'false');
+    await page.getByTestId('titlebar-sidebar-toggle-layer').hover();
+    await expect(sidebar).toHaveAttribute('aria-hidden', 'true');
+    await page.mouse.move(3, 120);
+    await expect(sidebar).toHaveAttribute('aria-hidden', 'true');
+    await sidebarToggle.focus();
+    await expect(sidebar).toHaveAttribute('aria-hidden', 'true');
     await expect(navigation.getByRole('button', { name: '返回首页', exact: true })).toBeVisible();
-    await navigation.getByRole('button', { name: /展开侧栏|固定侧栏/ }).click();
+    await expect(navigation.getByRole('button', { name: '展开侧栏', exact: true })).toBeVisible();
+    await sidebarToggle.press('Enter');
     await expect(page.getByTestId('sidebar-cloud-agents-navigation')).toBeVisible();
+    await expect(sidebarToggle).toHaveAttribute('aria-expanded', 'true');
+    await sidebarToggle.click();
+    await expect(sidebar).toHaveAttribute('aria-hidden', 'true');
+    await sidebarToggle.click();
+    await expect(sidebar).toHaveAttribute('aria-hidden', 'false');
     const fixtureState = () => app.evaluate(() => Reflect.get(globalThis, '__cloudAgentUiFixture').snapshot());
     const messageOperations = async () => (await fixtureState()).operations.filter((operation: string) => operation === 'preview' || operation === 'submit');
     await page.getByRole('button', { name: '创建我的第一个智能体', exact: true }).click();
@@ -192,6 +209,7 @@ test('personal cloud Agent identity, configuration and separate published chat i
     await expect(page.getByText('选它做事时能用的工具。', { exact: true })).toHaveCount(0);
     await expect(page.getByText('给它一本手册，照着方法做。', { exact: true })).toHaveCount(0);
     await expect(page.getByText('管理我的云端能力', { exact: true })).toHaveCount(0);
+    await expect(page.getByText('未选择的资源不会开放给此智能体。通过微信或 API 使用时也遵循本配置。', { exact: true })).toHaveCount(0);
     await expect(page.getByRole('group', { name: /^知识库/ })).toBeVisible();
     await expect(page.getByRole('heading', { name: '费用上限', exact: true })).toHaveCount(0);
     await expect(page.getByRole('heading', { name: '运行限制', exact: true })).toHaveCount(0);

tests/unit/main-layout-sidebar-peek.test.tsx

@@ -1,5 +1,5 @@
 import { act, fireEvent, render, screen } from '@testing-library/react';
-import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { MemoryRouter, Route, Routes, useLocation, useNavigate } from 'react-router-dom';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { MainLayout } from '@/components/layout/MainLayout';
 import { codingWorkspaceStore } from '@/stores/coding-workspace';
@@ -8,6 +8,7 @@ import { useSettingsStore } from '@/stores/settings';
 type PeekProps = {
   sidebarPeekOpen?: boolean;
   onSidebarPeekChange?: (open: boolean, source: 'toggle' | 'focus' | 'sidebar' | 'titlebar') => void;
+  forceExpanded?: boolean;
 };
 
 vi.mock('@/components/layout/TitleBar', () => ({
@@ -17,8 +18,12 @@ vi.mock('@/components/layout/TitleBar', () => ({
         type="button"
         data-testid="peek-trigger"
         data-peek-open={sidebarPeekOpen ? 'true' : 'false'}
+        aria-label={useSettingsStore.getState().sidebarCollapsed ? '展开侧栏' : '折叠侧栏'}
+        onClick={() => useSettingsStore.getState().setSidebarCollapsed(!useSettingsStore.getState().sidebarCollapsed)}
         onPointerEnter={() => onSidebarPeekChange?.(true, 'toggle')}
         onPointerLeave={() => onSidebarPeekChange?.(false, 'toggle')}
+        onFocus={() => onSidebarPeekChange?.(true, 'focus')}
+        onBlur={() => onSidebarPeekChange?.(false, 'focus')}
       />
       <div
         data-testid="peek-titlebar"
@@ -30,22 +35,33 @@ vi.mock('@/components/layout/TitleBar', () => ({
 }));
 
 vi.mock('@/components/layout/Sidebar', () => ({
-  Sidebar: ({ sidebarPeekOpen, onSidebarPeekChange }: PeekProps) => (
+  Sidebar: ({ sidebarPeekOpen, onSidebarPeekChange, forceExpanded }: PeekProps) => (
     <aside
       data-testid="peek-sidebar"
       data-peek-open={sidebarPeekOpen ? 'true' : 'false'}
+      data-force-expanded={forceExpanded ? 'true' : 'false'}
       onPointerEnter={() => onSidebarPeekChange?.(true, 'sidebar')}
       onPointerLeave={() => onSidebarPeekChange?.(false, 'sidebar')}
     />
   ),
 }));
 
-function renderLayout() {
+function NavigationProbe() {
+  const navigate = useNavigate();
+  const location = useLocation();
+  return <>
+    <output data-testid="layout-location">{location.pathname}</output>
+    <button onClick={() => navigate('/cloud-agents')}>进入智能体</button>
+    <button onClick={() => navigate('/chat')}>进入编程</button>
+  </>;
+}
+
+function renderLayout(path = '/chat') {
   render(
-    <MemoryRouter initialEntries={['/chat']}>
+    <MemoryRouter initialEntries={[path]}>
       <Routes>
         <Route element={<MainLayout />}>
-          <Route path="*" element={null} />
+          <Route path="*" element={<NavigationProbe />} />
         </Route>
       </Routes>
     </MemoryRouter>,
@@ -140,4 +156,85 @@ describe('MainLayout sidebar hover preview', () => {
     });
     expect(trigger).toHaveAttribute('data-peek-open', 'false');
   });
+
+  it.each(['/cloud-agents', '/cloud-agents/channels'])('ignores every pointer and focus preview source on %s', (path) => {
+    renderLayout(path);
+    const trigger = screen.getByTestId('peek-trigger');
+    const sidebar = screen.getByTestId('peek-sidebar');
+    const titlebar = screen.getByTestId('peek-titlebar');
+    for (const target of [trigger, titlebar, sidebar]) {
+      fireEvent.pointerEnter(target);
+      expect(trigger).toHaveAttribute('data-peek-open', 'false');
+      expect(sidebar).toHaveAttribute('data-peek-open', 'false');
+      fireEvent.pointerLeave(target);
+    }
+    fireEvent.focus(trigger);
+    expect(trigger).toHaveAttribute('data-peek-open', 'false');
+    expect(sidebar).toHaveAttribute('data-peek-open', 'false');
+    fireEvent.blur(trigger);
+    act(() => vi.advanceTimersByTime(180));
+    expect(sidebar).toHaveAttribute('data-peek-open', 'false');
+    expect(useSettingsStore.getState().sidebarCollapsed).toBe(true);
+    expect(vi.getTimerCount()).toBe(0);
+  });
+
+  it.each(['/cloud-agents', '/cloud-agents/channels'])('allows explicit sidebar expansion and collapse on %s', (path) => {
+    renderLayout(path);
+    fireEvent.click(screen.getByRole('button', { name: '展开侧栏' }));
+    expect(useSettingsStore.getState().sidebarCollapsed).toBe(false);
+    expect(screen.getByRole('button', { name: '折叠侧栏' })).toHaveAttribute('data-peek-open', 'false');
+    fireEvent.click(screen.getByRole('button', { name: '折叠侧栏' }));
+    expect(useSettingsStore.getState().sidebarCollapsed).toBe(true);
+    fireEvent.pointerEnter(screen.getByTestId('peek-trigger'));
+    fireEvent.focus(screen.getByTestId('peek-trigger'));
+    expect(screen.getByTestId('peek-sidebar')).toHaveAttribute('data-peek-open', 'false');
+  });
+
+  it('clears active Code preview sources when entering Agents and does not restore them on return', () => {
+    renderLayout();
+    fireEvent.pointerEnter(screen.getByTestId('peek-trigger'));
+    fireEvent.pointerEnter(screen.getByTestId('peek-titlebar'));
+    fireEvent.pointerEnter(screen.getByTestId('peek-sidebar'));
+    fireEvent.focus(screen.getByTestId('peek-trigger'));
+    expect(screen.getByTestId('peek-sidebar')).toHaveAttribute('data-peek-open', 'true');
+
+    fireEvent.click(screen.getByRole('button', { name: '进入智能体' }));
+    expect(screen.getByTestId('layout-location')).toHaveTextContent('/cloud-agents');
+    expect(screen.getByTestId('peek-sidebar')).toHaveAttribute('data-peek-open', 'false');
+    fireEvent.click(screen.getByRole('button', { name: '进入编程' }));
+    expect(screen.getByTestId('peek-sidebar')).toHaveAttribute('data-peek-open', 'false');
+    fireEvent.pointerEnter(screen.getByTestId('peek-trigger'));
+    expect(screen.getByTestId('peek-sidebar')).toHaveAttribute('data-peek-open', 'true');
+    fireEvent.pointerLeave(screen.getByTestId('peek-trigger'));
+    act(() => vi.advanceTimersByTime(180));
+    expect(screen.getByTestId('peek-sidebar')).toHaveAttribute('data-peek-open', 'false');
+  });
+
+  it('cancels a stale Code close timer at the Agents boundary before Code starts a fresh preview', () => {
+    renderLayout();
+    fireEvent.pointerEnter(screen.getByTestId('peek-trigger'));
+    fireEvent.pointerLeave(screen.getByTestId('peek-trigger'));
+    expect(vi.getTimerCount()).toBe(1);
+    fireEvent.click(screen.getByRole('button', { name: '进入智能体' }));
+    expect(vi.getTimerCount()).toBe(0);
+    act(() => vi.advanceTimersByTime(180));
+    expect(screen.getByTestId('peek-sidebar')).toHaveAttribute('data-peek-open', 'false');
+
+    fireEvent.click(screen.getByRole('button', { name: '进入编程' }));
+    fireEvent.pointerEnter(screen.getByTestId('peek-titlebar'));
+    act(() => vi.advanceTimersByTime(180));
+    expect(screen.getByTestId('peek-sidebar')).toHaveAttribute('data-peek-open', 'true');
+    fireEvent.pointerLeave(screen.getByTestId('peek-titlebar'));
+    act(() => vi.advanceTimersByTime(180));
+    expect(screen.getByTestId('peek-sidebar')).toHaveAttribute('data-peek-open', 'false');
+  });
+
+  it('retains the fixed expanded Canvas workspace sidebar', () => {
+    renderLayout('/image-canvas');
+    expect(screen.getByTestId('peek-sidebar')).toHaveAttribute('data-force-expanded', 'true');
+    fireEvent.pointerEnter(screen.getByTestId('peek-trigger'));
+    fireEvent.focus(screen.getByTestId('peek-trigger'));
+    expect(screen.getByTestId('peek-sidebar')).toHaveAttribute('data-peek-open', 'false');
+    expect(screen.getByTestId('peek-sidebar')).toHaveAttribute('data-force-expanded', 'true');
+  });
 });