wangxuming/makelore
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move work preview navigation beside workspace tabs

Browse Source
This commit is contained in:
鲨鱼辣椒
2026-09-30 12:22:20 +08:00
parent c55e9c7182
commit d787267055
9 changed files with 272 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
tests/e2e/fixtures/teacher-preview-layout.tsx
View File

@@ -1,5 +1,6 @@
import { useState, type ComponentProps } from 'react';
import { createRoot } from 'react-dom/client';
import { MessageSquare, Play } from 'lucide-react';
import { TeacherCompanion } from '../../../src/pages/Chat/TeacherCompanion';
import { AgentBrowserPanel } from '../../../src/pages/Chat/AgentBrowserPanel';
import '../../../src/styles/globals.css';
@@ -10,6 +11,8 @@ import '../../../src/pages/Chat/classroom-workspace.css';
export function Layout() {
const [bubble, setBubble] = useState<HTMLDivElement | null>(null);
const [introduction, setIntroduction] = useState<HTMLDivElement | null>(null);
const [toolbarContainer, setToolbarContainer] = useState<HTMLDivElement | null>(null);
const [workOpen, setWorkOpen] = useState(true);
const [visible, setVisible] = useState(!new URLSearchParams(location.search).has('quiet'));
const [open, setOpen] = useState(false);
const [width, setWidth] = useState(508);
@@ -56,10 +59,17 @@ export function Layout() {
</header>
<div className="relative flex min-h-0 flex-1" data-testid="coding-chat-panel" data-consultation-open={open}>
<main className="flex min-w-0 flex-1 flex-col">
<div className="classroom-tabs" role="tablist"><button role="tab">操作对话</button><button role="tab" aria-selected="true">作品</button></div>
<div className="classroom-work-view flex min-h-0 flex-1 flex-col p-5" data-testid="work-view">
<AgentBrowserPanel projectId="layout-fixture" embedded open teacherBubble={bubble} teacherIntroduction={introduction} onOpenChange={() => {}} />
<div className="classroom-workspace-toolbar" data-testid="classroom-workspace-toolbar">
<div className="classroom-tabs" role="tablist" aria-label="当前工作">
<button role="tab" aria-selected={!workOpen} onClick={() => setWorkOpen(false)}><MessageSquare className="h-3.5 w-3.5" />操作对话</button>
<button role="tab" aria-selected={workOpen} onClick={() => setWorkOpen(true)}><Play className="h-3.5 w-3.5" />作品</button>
</div>
<div className="classroom-browser-toolbar" ref={setToolbarContainer} hidden={!workOpen} />
</div>
<div hidden={!workOpen} className="classroom-work-view flex min-h-0 flex-1 flex-col p-5" data-testid="work-view">
<AgentBrowserPanel projectId="layout-fixture" embedded open={workOpen} toolbarContainer={toolbarContainer} teacherBubble={bubble} teacherIntroduction={introduction} onOpenChange={setWorkOpen} />
</div>
{!workOpen && <div className="min-h-0 flex-1 p-5">操作对话（布局测试）</div>}
</main>
{open && <aside id="coding-consultation-dock" className="classroom-consultation-dock consultation-pane shrink-0 border-l p-5" style={{ width }}>
<p className="mb-8 text-sm">老师对话（布局测试）</p>

34
tests/e2e/pi-coding-first-chat.spec.ts
View File

@@ -2566,6 +2566,29 @@ test('work tab prepares the page automatically and keeps the student draft throu
await expect(page.getByRole('button', { name: '收起作品', exact: true })).toHaveCount(0);
await expect(page.getByTestId('agent-browser-viewport')).toBeVisible();
await expect(page.getByText('正在打开你的作品…', { exact: true })).toHaveCount(0);
const workspaceToolbar = page.getByTestId('classroom-workspace-toolbar');
const tabs = workspaceToolbar.getByRole('tablist', { name: '当前工作' });
const browserToolbar = page.getByTestId('agent-browser-toolbar');
const address = browserToolbar.getByRole('textbox', { name: '网页地址' });
const workTab = tabs.getByRole('tab', { name: '作品', exact: true });
const chatTab = tabs.getByRole('tab', { name: '操作对话', exact: true });
await expect(workspaceToolbar.getByTestId('agent-browser-toolbar')).toHaveCount(1);
await expect(browserToolbar).toHaveAccessibleName('网页导航');
await expect(tabs.getByTestId('agent-browser-toolbar')).toHaveCount(0);
await expect(page.getByTestId('agent-browser-panel').getByTestId('agent-browser-toolbar')).toHaveCount(0);
const [tabsBounds, toolbarBounds] = await Promise.all([tabs.boundingBox(), browserToolbar.boundingBox()]);
expect(tabsBounds).not.toBeNull();
expect(toolbarBounds).not.toBeNull();
expect(toolbarBounds!.x).toBeGreaterThanOrEqual(tabsBounds!.x + tabsBounds!.width);
expect(Math.abs(toolbarBounds!.y + toolbarBounds!.height / 2 - tabsBounds!.y - tabsBounds!.height / 2)).toBeLessThanOrEqual(1);
await address.press('ArrowLeft');
await expect(address).toBeFocused();
await expect(workTab).toHaveAttribute('aria-selected', 'true');
await browserToolbar.getByRole('button', { name: '刷新网页', exact: true }).click();
await expect.poll(async () => (await readState(electronApp)).captured.filter((item) => item.path === '/api/agent-browser/navigate' && item.body?.action === 'reload').length).toBe(1);
await expect(browserToolbar.getByRole('button', { name: '刷新网页', exact: true })).toBeEnabled();
await expect(address).toHaveValue('http://127.0.0.1:4173/');
await page.screenshot({ path: test.info().outputPath('work-toolbar-with-tabs.png') });
// A manual address open must not permanently disable recovery checks.
await page.getByRole('textbox', { name: '网页地址' }).fill('http://127.0.0.1:4173/');
await page.getByRole('textbox', { name: '网页地址' }).press('Enter');
@@ -2586,8 +2609,17 @@ test('work tab prepares the page automatically and keeps the student draft throu
await expect(page.getByRole('button', { name: '刷新网页', exact: true })).toBeEnabled();
await expect(page.getByText('正在打开你的作品…', { exact: true })).toHaveCount(0);
await expect(page.getByText('开发浏览器已关闭。', { exact: true })).toHaveCount(0);
await page.getByRole('tab', { name: '操作对话', exact: true }).click();
await workTab.focus();
await workTab.press('ArrowLeft');
await expect(chatTab).toHaveAttribute('aria-selected', 'true');
await expect(chatTab).toBeFocused();
await expect(browserToolbar).toHaveCount(0);
await expect(composer).toHaveValue('还没有发出的想法');
await chatTab.press('ArrowRight');
await expect(workTab).toHaveAttribute('aria-selected', 'true');
await expect(workTab).toBeFocused();
await expect(workspaceToolbar.getByTestId('agent-browser-toolbar')).toBeVisible();
await expect(address).toHaveValue('http://127.0.0.1:4173/');
const requests = (await readState(electronApp)).captured;
const opens = requests.filter((request) => request.path === '/api/agent-browser/ensure-work');
expect(opens.length).toBeGreaterThanOrEqual(2);

71
tests/e2e/teacher-preview-layout.spec.ts
View File

@@ -34,7 +34,7 @@ test.beforeAll(async () => {
vite.middlewares.use((req, res, next) => {
if (req.url !== '/' && !req.url?.startsWith('/?')) return next();
res.setHeader('Content-Type', 'text/html');
res.end('<html><head><meta charset="utf-8"></head><body><div id="root"></div><script type="module" src="/tests/e2e/fixtures/teacher-preview-layout.tsx"></script></body></html>');
res.end('<!doctype html><html><head><meta charset="utf-8"></head><body><div id="root"></div><script type="module" src="/tests/e2e/fixtures/teacher-preview-layout.tsx"></script></body></html>');
});
},
}],
@@ -44,6 +44,64 @@ test.beforeAll(async () => {
});
test.afterAll(async () => { await server?.close(); });
for (const width of [375, 768, 1180]) {
test(`browser navigation stays with the workspace tabs without overflow at ${width}px`, async ({ page }) => {
await page.setViewportSize({ width, height: 800 });
await page.goto(`${baseUrl}?quiet=1`);
const row = page.getByTestId('classroom-workspace-toolbar');
const tabs = row.getByRole('tablist', { name: '当前工作' });
const toolbar = row.getByRole('form', { name: '网页导航' });
const address = toolbar.getByRole('textbox', { name: '网页地址' });
await expect(address).toHaveValue('http://127.0.0.1:4173/');
await expect(page.getByTestId('agent-browser-toolbar')).toHaveCount(1);
await expect(tabs.getByRole('tab')).toHaveCount(2);
await expect(tabs.getByRole('textbox')).toHaveCount(0);
await expect(page.getByTestId('agent-browser-panel').getByTestId('agent-browser-toolbar')).toHaveCount(0);
expect(await toolbar.evaluate(el => el.closest('[role="tablist"]'))).toBeNull();
const checkLayout = async () => {
for (const control of [tabs.getByRole('tab', { name: '操作对话' }), tabs.getByRole('tab', { name: '作品', exact: true }),
toolbar.getByRole('button', { name: '后退', exact: true }), toolbar.getByRole('button', { name: '前进', exact: true }),
toolbar.getByRole('button', { name: '刷新网页', exact: true }), address]) {
await expect(control).toBeInViewport({ ratio: 1 });
}
const [tabBounds, toolbarBounds, rowBounds, previewBounds, viewportBounds] = await Promise.all([
tabs.boundingBox(), toolbar.boundingBox(), row.boundingBox(), page.getByTestId('agent-browser-panel').boundingBox(),
page.getByTestId('agent-browser-viewport').boundingBox(),
]);
if (width === 375) {
expect(toolbarBounds!.y).toBeGreaterThanOrEqual(tabBounds!.y + tabBounds!.height);
} else {
expect(Math.abs(tabBounds!.y + tabBounds!.height / 2 - toolbarBounds!.y - toolbarBounds!.height / 2)).toBeLessThanOrEqual(1);
}
expect(toolbarBounds!.y + toolbarBounds!.height).toBeLessThanOrEqual(rowBounds!.y + rowBounds!.height);
expect(viewportBounds!.y).toBeGreaterThan(rowBounds!.y + rowBounds!.height);
expect(viewportBounds!.y - previewBounds!.y).toBeLessThanOrEqual(2);
expect(await row.evaluate(el => el.scrollWidth <= el.clientWidth)).toBe(true);
expect(await toolbar.evaluate(el => el.scrollWidth <= el.clientWidth)).toBe(true);
expect(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth)).toBe(true);
};
await address.fill(`http://127.0.0.1:4173/${'long-preview-path/'.repeat(12)}`);
await checkLayout();
await page.screenshot({ path: test.info().outputPath(`workspace-browser-toolbar-${width}.png`) });
if (width === 1180) {
await page.getByRole('button', { name: '智能体', exact: true }).click();
await expect(page.locator('#coding-consultation-dock')).toBeVisible();
await checkLayout();
await page.screenshot({ path: test.info().outputPath('workspace-browser-toolbar-with-teacher.png') });
}
await tabs.getByRole('tab', { name: '操作对话' }).click();
await expect(page.getByTestId('agent-browser-toolbar')).toHaveCount(0);
await expect(tabs.getByRole('tab', { name: '操作对话' })).toHaveAttribute('aria-selected', 'true');
await tabs.getByRole('tab', { name: '作品', exact: true }).click();
await expect(toolbar).toBeVisible();
await expect(address).toHaveValue('http://127.0.0.1:4173/');
await expect(page.getByTestId('agent-browser-toolbar')).toHaveCount(1);
await checkLayout();
});
}
test('empty work shows a local hint without opening the teacher or polling', async ({ page }) => {
await page.setViewportSize({ width: 1180, height: 720 });
await page.clock.install();
@@ -256,7 +314,9 @@ for (const size of [{ width: 1440, height: 900 }, { width: 1180, height: 720 },
await page.goto(baseUrl);
await expect(page.getByTestId('teacher-invitation')).toBeVisible();
await expect.poll(async () => (await geometry(page)).nativeGap).toBeGreaterThanOrEqual(8);
expect((await geometry(page)).gap).toBeLessThan(65);
// Toolbar placement does not affect the native pixels' clearance: leave
// only the required 8px below the speech bubble, allowing pixel rounding.
expect((await geometry(page)).nativeGap).toBeLessThanOrEqual(10);
await page.getByRole('button', { name: '智能体', exact: true }).click();
await expect.poll(async () => (await geometry(page)).sideBySide).toBe(true);
await expect.poll(async () => (await geometry(page)).gap).toBe(20);
@@ -269,11 +329,16 @@ for (const size of [{ width: 1440, height: 900 }, { width: 1180, height: 720 },
await page.screenshot({ path: test.info().outputPath('work-with-teacher-no-gap.png') });
await page.getByRole('button', { name: '关闭智能体栏' }).click();
await expect.poll(async () => (await geometry(page)).nativeGap).toBeGreaterThanOrEqual(8);
const longMessageClearance = (await geometry(page)).clearance;
await page.getByRole('button', { name: '切换消息长度' }).click();
await expect.poll(async () => (await geometry(page)).gap).toBe(20);
await expect.poll(async () => (await geometry(page)).clearance).toBeLessThan(longMessageClearance);
await expect.poll(async () => (await geometry(page)).nativeGap).toBeGreaterThanOrEqual(8);
expect((await geometry(page)).nativeGap).toBeLessThanOrEqual(10);
await page.getByRole('button', { name: '等会儿聊' }).click();
await expect(page.getByTestId('teacher-invitation')).toHaveCount(0);
await expect(page.getByTestId('agent-browser-panel')).toHaveCSS('margin-top', '0px');
expect(await page.evaluate(() => document.querySelector('[data-testid="agent-browser-panel"]')!.getBoundingClientRect().top
- document.querySelector('[data-testid="work-view"]')!.getBoundingClientRect().top)).toBe(20);
expect(errors).toEqual([]);
});
}