Move work preview navigation beside workspace tabs

tests/e2e/fixtures/teacher-preview-layout.tsx

@@ -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>