feat(web): add responsive workbench navigation

apps/web_v1/src/pages/workspace-home.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react'
 import { Layout } from '@arco-design/web-react'
 import { WorkspacePage, type WorkspaceTaskUpdate } from './workspace-body'
 import { WorkspaceExplorePage } from './workspace-explore'
@@ -57,6 +58,7 @@ export function ProjectPage({
   onCreateProjectTag: (name: string) => void
 }) {
   const isProject = activeView === 'project'
+  const [navOpen, setNavOpen] = useState<'projects' | 'channels' | null>(null)
   const projects = workspaces.map((workspace) => workspace.project)
   const updateActiveProjectTask = (update: ProjectTaskUpdate) => {
     onUpdateWorkspaceTask({
@@ -72,13 +74,21 @@ export function ProjectPage({
 
   return (
     <Layout className="workbench-shell">
-      <ProjectTopbar theme={theme} onToggleTheme={onToggleTheme} />
+      <ProjectTopbar
+        theme={theme}
+        onToggleTheme={onToggleTheme}
+        showChannels={isProject}
+        onOpenProjects={() => setNavOpen('projects')}
+        onOpenChannels={() => setNavOpen('channels')}
+      />
 
       <Layout className="workbench-main" hasSider>
         <ProjectRail
           activeProject={activeWorkspace.project}
           projects={projects}
           activeView={activeView}
+          open={navOpen === 'projects'}
+          onClose={() => setNavOpen(null)}
           onSelectWorkspace={onSelectWorkspace}
           onSelectWorkspaceExplore={onSelectWorkspaceExplore}
           onSelectProject={onSelectProject}
@@ -90,12 +100,18 @@ export function ProjectPage({
             activeView={activeView}
             activeWorkspace={activeWorkspace}
             activeChannel={activeChannel}
+            open={navOpen === 'channels'}
+            onClose={() => setNavOpen(null)}
             onSelectChannel={onSelectChannel}
             onSelectItem={onSelectItem}
             onUpdateProject={onUpdateProject}
           />
         )}
 
+        {navOpen && (
+          <button className="nav-backdrop" type="button" aria-label="关闭导航" onClick={() => setNavOpen(null)} />
+        )}
+
         <Content className="stage">
           {activeView === 'workspace' ? (
             <WorkspacePage workspaces={workspaces} onOpenTask={onOpenTask} onUpdateTask={onUpdateWorkspaceTask} />