样式修改

frontend-web/src/pages/PageRoutes.tsx

@@ -1,20 +1,40 @@
+import { useState } from "react";
 import { Navigate, Route, Routes } from "react-router-dom";
 
+import { PageSidebar } from "@/components/page-sidebar";
+
 import WorkspaceRoutes from "./WorkspaceRoutes";
 
-// 根路由容器，统一承接 /page/* 下的所有子系统路由
+function PageLayout() {
+  const [collapsed, setCollapsed] = useState(false);
+
+  return (
+    <div className="min-h-screen bg-muted/20">
+      <PageSidebar
+        collapsed={collapsed}
+        onToggleCollapsed={() => setCollapsed((prev) => !prev)}
+      />
+      <main
+        className={`min-h-screen transition-[padding] duration-300 ${
+          collapsed ? "pl-16" : "pl-16 md:pl-64"
+        }`}
+      >
+        <Routes>
+          <Route index element={<Navigate to="workspace" replace />} />
+          <Route
+            path="workspace/*"
+            element={<WorkspaceRoutes pageSidebarCollapsed={collapsed} />}
+          />
+        </Routes>
+      </main>
+    </div>
+  );
+}
+
 export default function PageRoutes() {
   return (
     <Routes>
-      <Route index element={<Navigate to="workspace" replace />} />
-
-      {/* 现有系统：DeerFlow Workspace */}
-      <Route path="workspace/*" element={<WorkspaceRoutes />} />
-
-      {/* TODO: 引入外部系统路由
-          import AnotherSystemRoutes from "外部系统路径";
-          <Route path="other/*" element={<AnotherSystemRoutes />} />
-      */}
+      <Route path="*" element={<PageLayout />} />
     </Routes>
   );
 }

frontend-web/src/pages/WorkspaceRoutes.tsx

@@ -1,3 +1,4 @@
+import type { CSSProperties, ReactNode } from "react";
 import { Navigate, Route, Routes } from "react-router-dom";
 
 import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
@@ -16,9 +17,26 @@ import NewAgentPage from "./NewAgentPage";
 import ScheduledTaskRunDetailPage from "./ScheduledTaskRunDetailPage";
 import ScheduledTasksPage from "./ScheduledTasksPage";
 
-function WorkspaceLayout({ children }: { children: React.ReactNode }) {
+function WorkspaceLayout({
+  children,
+  pageSidebarCollapsed,
+}: {
+  children: ReactNode;
+  pageSidebarCollapsed: boolean;
+}) {
   return (
-    <SidebarProvider className="h-screen" defaultOpen>
+    <SidebarProvider
+      className="h-screen w-full overflow-x-hidden [&_[data-slot=sidebar-container]]:left-[var(--page-sidebar-width)]"
+      style={
+        {
+          "--page-sidebar-width": pageSidebarCollapsed ? "4rem" : "16rem",
+        } as CSSProperties
+      }
+      // Keep the fixed workspace sidebar aligned to the outer page sidebar width.
+      // This lets it slide together when the outer sidebar collapses or expands.
+      data-page-sidebar-collapsed={pageSidebarCollapsed}
+      defaultOpen
+    >
       <WorkspaceSidebar />
       <SidebarInset className="min-w-0">{children}</SidebarInset>
       <CommandPalette />
@@ -27,7 +45,7 @@ function WorkspaceLayout({ children }: { children: React.ReactNode }) {
   );
 }
 
-function ChatRuntime({ children }: { children: React.ReactNode }) {
+function ChatRuntime({ children }: { children: ReactNode }) {
   return (
     <SubtasksProvider>
       <ArtifactsProvider>
@@ -37,18 +55,26 @@ function ChatRuntime({ children }: { children: React.ReactNode }) {
   );
 }
 
-export default function WorkspaceRoutes() {
+export default function WorkspaceRoutes({
+  pageSidebarCollapsed = false,
+}: {
+  pageSidebarCollapsed?: boolean;
+}) {
   return (
     <Routes>
       <Route index element={<Navigate to="chats/new" replace />} />
       <Route
         path="chats"
-        element={<WorkspaceLayout><ChatsPage /></WorkspaceLayout>}
+        element={
+          <WorkspaceLayout pageSidebarCollapsed={pageSidebarCollapsed}>
+            <ChatsPage />
+          </WorkspaceLayout>
+        }
       />
       <Route
         path="chats/:thread_id"
         element={
-          <WorkspaceLayout>
+          <WorkspaceLayout pageSidebarCollapsed={pageSidebarCollapsed}>
             <ChatRuntime>
               <ChatPage />
             </ChatRuntime>
@@ -57,11 +83,19 @@ export default function WorkspaceRoutes() {
       />
       <Route
         path="agents"
-        element={<WorkspaceLayout><AgentsPage /></WorkspaceLayout>}
+        element={
+          <WorkspaceLayout pageSidebarCollapsed={pageSidebarCollapsed}>
+            <AgentsPage />
+          </WorkspaceLayout>
+        }
       />
       <Route
         path="agents/new"
-        element={<WorkspaceLayout><NewAgentPage /></WorkspaceLayout>}
+        element={
+          <WorkspaceLayout pageSidebarCollapsed={pageSidebarCollapsed}>
+            <NewAgentPage />
+          </WorkspaceLayout>
+        }
       />
       <Route
         path="agents/:agent_id/chats"
@@ -70,7 +104,7 @@ export default function WorkspaceRoutes() {
       <Route
         path="agents/:agent_id/chats/:thread_id"
         element={
-          <WorkspaceLayout>
+          <WorkspaceLayout pageSidebarCollapsed={pageSidebarCollapsed}>
             <ChatRuntime>
               <AgentChatPage />
             </ChatRuntime>
@@ -83,11 +117,19 @@ export default function WorkspaceRoutes() {
       />
       <Route
         path="scheduled/tasks"
-        element={<WorkspaceLayout><ScheduledTasksPage /></WorkspaceLayout>}
+        element={
+          <WorkspaceLayout pageSidebarCollapsed={pageSidebarCollapsed}>
+            <ScheduledTasksPage />
+          </WorkspaceLayout>
+        }
       />
       <Route
         path="scheduled/runs/:run_id"
-        element={<WorkspaceLayout><ScheduledTaskRunDetailPage /></WorkspaceLayout>}
+        element={
+          <WorkspaceLayout pageSidebarCollapsed={pageSidebarCollapsed}>
+            <ScheduledTaskRunDetailPage />
+          </WorkspaceLayout>
+        }
       />
     </Routes>
   );