样式修改

frontend-web/src/components/page-sidebar.tsx

@@ -0,0 +1,116 @@
+import { NavLink, useLocation } from "react-router-dom";
+import {
+  ChevronLeft,
+  ChevronRight,
+  FileText,
+  LayoutDashboard,
+} from "lucide-react";
+
+const navItems = [
+  {
+    label: "Workspace",
+    to: "/page/workspace",
+    match: "/page/workspace",
+    icon: LayoutDashboard,
+  },
+];
+
+type PageSidebarProps = {
+  collapsed: boolean;
+  onToggleCollapsed: () => void;
+};
+
+export function PageSidebar({
+  collapsed,
+  onToggleCollapsed,
+}: PageSidebarProps) {
+  const location = useLocation();
+
+  const iconButtonClass =
+    "rounded-lg p-2 text-gray-500 transition-all duration-200 hover:bg-red-50 hover:text-red-600";
+
+  return (
+    <aside
+      className={`fixed left-0 top-0 z-40 h-screen overflow-y-auto border-r border-red-100 bg-white shadow-sm transition-all duration-300 ${
+        collapsed ? "w-16" : "w-64"
+      }`}
+    >
+      <div
+        className={`flex h-16 items-center border-b border-red-100 ${
+          collapsed ? "justify-center px-2" : "justify-between px-6"
+        }`}
+      >
+        <div className="flex min-w-0 items-center gap-3">
+          <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-red-500 to-red-400">
+            <FileText className="h-4 w-4 text-white" />
+          </div>
+          {!collapsed && (
+            <div>
+              <h1 className="text-sm font-semibold text-gray-900">
+                DeerFlow
+              </h1>
+              <p className="text-xs text-red-400/80">Page Navigation</p>
+            </div>
+          )}
+        </div>
+        {!collapsed && (
+          <button
+            type="button"
+            onClick={onToggleCollapsed}
+            className={iconButtonClass}
+            title="收起侧边栏"
+          >
+            <ChevronLeft className="h-4 w-4" />
+          </button>
+        )}
+      </div>
+
+      <nav className={`${collapsed ? "p-2" : "p-4"} space-y-2`}>
+        {collapsed && (
+          <button
+            type="button"
+            onClick={onToggleCollapsed}
+            className={`flex w-full items-center justify-center ${iconButtonClass}`}
+            title="展开侧边栏"
+          >
+            <ChevronRight className="h-5 w-5" />
+          </button>
+        )}
+
+        {navItems.map((item) => {
+          const Icon = item.icon;
+          const active = location.pathname.startsWith(item.match);
+
+          return (
+            <NavLink
+              key={item.to}
+              to={item.to}
+              title={collapsed ? item.label : undefined}
+              className={`flex items-center rounded-lg py-2 transition-all duration-200 ${
+                collapsed ? "justify-center px-2" : "gap-2 px-3"
+              } ${
+                active
+                  ? "border border-red-200 bg-red-50 text-red-600"
+                  : "text-gray-600 hover:bg-red-50 hover:text-red-600"
+              }`}
+            >
+              <Icon
+                className={`h-5 w-5 flex-shrink-0 ${
+                  active ? "text-red-500" : ""
+                }`}
+              />
+              {!collapsed && (
+                <span className="flex-1 text-left text-sm font-medium">
+                  {item.label}
+                </span>
+              )}
+            </NavLink>
+          );
+        })}
+      </nav>
+
+      <div className="pointer-events-none absolute right-0 top-0 h-32 w-32 rounded-full bg-red-500/5 blur-3xl" />
+      <div className="pointer-events-none absolute bottom-20 right-0 h-24 w-24 rounded-full bg-red-400/5 blur-3xl" />
+    </aside>
+  );
+}

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>
   );