feat: enhance workspace switcher and rail with tooltips and layout adjustments

web/components/workbench-header.tsx

@@ -21,7 +21,6 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
-import { WorkspaceSwitcher } from "@/components/workspace-switcher"
 import { useAuth } from "@/components/auth-provider"
 import { useNotifications } from "@/components/notification-provider"
 import { useI18n } from "@/i18n/provider"
@@ -32,13 +31,7 @@ export function WorkbenchHeader() {
 
   return (
     <header className="flex h-(--header-height) shrink-0 items-center border-b border-border/70 bg-background/88 backdrop-blur supports-[backdrop-filter]:bg-background/76">
-      <div className="flex w-full min-w-0 items-center justify-between gap-3 px-3 lg:px-4">
+      <div className="flex w-full min-w-0 items-center justify-end gap-3 px-3 lg:px-4">
-        <div className="min-w-0">
-          <WorkspaceSwitcher
-            currentWorkspace="workbench"
-            className="h-10 border-0 bg-transparent px-1.5 shadow-none hover:bg-muted"
-          />
-        </div>
         <div className="flex min-w-0 items-center justify-end gap-2">
           <div className="hidden sm:block">
             <RealtimeConnectionStatus status={realtimeStatus} compact />

web/components/workbench-rail.tsx

@@ -6,6 +6,12 @@ import { usePathname } from "next/navigation"
 
 import { useI18n } from "@/i18n/provider"
 import { cn } from "@/lib/utils"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { WorkspaceSwitcher } from "@/components/workspace-switcher"
 
 const workbenchRailItems = [
   {
@@ -22,34 +28,56 @@ const workbenchRailItems = [
   },
 ]
 
+function normalizePath(path: string | null | undefined) {
+  if (!path) {
+    return ""
+  }
+  return path.length > 1 ? path.replace(/\/+$/, "") : path
+}
+
 export function WorkbenchRail() {
   const t = useI18n()
   const pathname = usePathname()
+  const currentPath = normalizePath(pathname)
 
   return (
     <aside className="flex h-svh w-16 shrink-0 flex-col items-center border-r border-border/70 bg-sidebar px-2 py-3 text-sidebar-foreground">
+      <div className="mb-4 flex w-full justify-center">
+        <WorkspaceSwitcher currentWorkspace="workbench" variant="rail" />
+      </div>
       <nav className="flex w-full flex-col items-center gap-2">
         {workbenchRailItems.map((item) => {
           const Icon = item.icon
+          const itemPath = normalizePath(item.href)
           const isActive =
             item.key === "conversations"
-              ? pathname === "/workbench" || pathname?.startsWith("/workbench/")
+              ? currentPath === "/workbench"
-              : pathname === item.href || pathname?.startsWith(`${item.href}/`)
+              : currentPath === itemPath || currentPath.startsWith(`${itemPath}/`)
+          const title = t(item.titleKey)
 
           return (
+            <Tooltip key={item.key}>
+              <TooltipTrigger
+                render={
                   <Link
-              key={item.key}
                     href={item.href}
-              aria-label={t(item.titleKey)}
+                    aria-label={title}
+                    aria-current={isActive ? "page" : undefined}
                     className={cn(
-                "flex h-13 w-12 flex-col items-center justify-center gap-1 rounded-lg text-[11px] leading-none text-sidebar-foreground/75 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+                      "flex size-11 items-center justify-center rounded-lg bg-transparent text-sidebar-foreground/65 transition-colors hover:text-sidebar-foreground",
                       isActive &&
                         "bg-sidebar-primary text-sidebar-primary-foreground hover:bg-sidebar-primary hover:text-sidebar-primary-foreground"
                     )}
+                  />
+                }
               >
                 <Icon className="size-4" />
-              <span className="max-w-full truncate">{t(item.titleKey)}</span>
+                <span className="sr-only">{title}</span>
-            </Link>
+              </TooltipTrigger>
+              <TooltipContent side="right" align="center">
+                {title}
+              </TooltipContent>
+            </Tooltip>
           )
         })}
       </nav>

web/components/workspace-switcher.tsx

@@ -39,7 +39,7 @@ export const workspaceOptions: WorkspaceOption[] = [
 
 type WorkspaceSwitcherProps = {
   currentWorkspace: WorkspaceKey
-  variant?: "sidebar" | "header"
+  variant?: "sidebar" | "header" | "rail"
   className?: string
   trigger?: ReactElement
 }
@@ -58,9 +58,26 @@ export function WorkspaceSwitcher({
     variant === "header" &&
       "h-9 rounded-md border border-border/70 bg-background px-2.5 shadow-xs hover:bg-muted",
     variant === "sidebar" && "data-[slot=sidebar-menu-button]:p-1.5!",
+    variant === "rail" &&
+      "relative size-11 rounded-lg border-0 bg-transparent p-0 shadow-none hover:bg-sidebar-accent",
     className
   )
-  const triggerContent = (
+  const triggerContent =
+    variant === "rail" ? (
+      <>
+        <img
+          src="/images/logo.svg"
+          alt={t("app.brand")}
+          width="32"
+          height="32"
+          className="size-7 shrink-0 object-contain"
+        />
+        <span className="sr-only">
+          {t("workspace.switchWorkspace")} - {t(currentOption.labelKey)}
+        </span>
+        <ChevronsUpDownIcon className="absolute bottom-0.5 right-0.5 size-3 rounded-full bg-sidebar text-sidebar-foreground/70" />
+      </>
+    ) : (
       <>
         <img
           src="/images/logo.svg"
@@ -90,7 +107,7 @@ export function WorkspaceSwitcher({
       </DropdownMenuTrigger>
       <DropdownMenuContent
         align="start"
-        side={variant === "sidebar" ? "right" : "bottom"}
+        side={variant === "sidebar" || variant === "rail" ? "right" : "bottom"}
         sideOffset={8}
         className="w-60 min-w-60"
       >

web/e2e/workbench-function.spec.ts

@@ -67,36 +67,53 @@ test.describe("support workbench", () => {
     await screenshot(page, "03-workbench-initial");
 
     await expect(page.getByText(/客服工作台|Support Workbench/).first()).toBeVisible();
-    await expect(page.getByRole("link", { name: /会话|Conversations/ }).first()).toHaveAttribute(
+    const conversationsEntry = page.getByRole("link", { name: /会话|Conversations/ }).first();
+    const ticketsEntry = page.getByRole("link", { name: /工单|Tickets/ }).first();
+    await expect(conversationsEntry).toHaveAttribute(
       "href",
       "/workbench/",
     );
-    await expect(page.getByRole("link", { name: /工单|Tickets/ }).first()).toHaveAttribute(
+    await expect(ticketsEntry).toHaveAttribute(
       "href",
       "/workbench/tickets/",
     );
+    await expect(conversationsEntry).toHaveClass(/bg-sidebar-primary/);
+    await expect(ticketsEntry).not.toHaveClass(/bg-sidebar-primary/);
+    await conversationsEntry.hover();
+    await expect(page.getByText(/会话|Conversations/).last()).toBeVisible();
+    await screenshot(page, "04-workbench-rail-tooltip");
     await page.getByRole("button", { name: /贝壳AGENT|Agent Desk/i }).first().click();
     await expect(page.getByText(/切换工作区|Switch workspace/)).toBeVisible();
     await expect(page.getByRole("menuitem", { name: /管理后台|Admin Dashboard/ })).toBeVisible();
     await page.waitForTimeout(300);
-    await screenshot(page, "04-workbench-switcher-open");
+    await screenshot(page, "05-workbench-switcher-open");
 
     await page.getByRole("menuitem", { name: /管理后台|Admin Dashboard/ }).click();
     await page.waitForURL(/\/dashboard\/?$/, { timeout: 15000 });
     await page.waitForLoadState("networkidle");
-    await screenshot(page, "05-dashboard-after-switch");
+    await screenshot(page, "06-dashboard-after-switch");
     await expect(page.getByText(/管理后台|Admin Dashboard/).first()).toBeVisible();
 
     await page.getByRole("button", { name: /贝壳AGENT|Agent Desk/i }).first().click();
     await expect(page.getByRole("menuitem", { name: /客服工作台|Support Workbench/ })).toBeVisible();
     await page.waitForTimeout(300);
-    await screenshot(page, "06-dashboard-switcher-open");
+    await screenshot(page, "07-dashboard-switcher-open");
     await page.getByRole("menuitem", { name: /客服工作台|Support Workbench/ }).click();
     await page.waitForURL(/\/workbench\/?$/, { timeout: 15000 });
     await page.waitForLoadState("networkidle");
-    await screenshot(page, "07-workbench-after-return");
+    await screenshot(page, "08-workbench-after-return");
     await expect(page.getByText(/客服工作台|Support Workbench/).first()).toBeVisible();
 
+    const returnedConversationsEntry = page.getByRole("link", { name: /会话|Conversations/ }).first();
+    const returnedTicketsEntry = page.getByRole("link", { name: /工单|Tickets/ }).first();
+    await returnedTicketsEntry.click();
+    await page.waitForURL(/\/workbench\/tickets\/?$/, { timeout: 15000 });
+    await page.waitForLoadState("networkidle");
+    await expect(returnedTicketsEntry).toHaveClass(/bg-sidebar-primary/);
+    await expect(returnedConversationsEntry).not.toHaveClass(/bg-sidebar-primary/);
+    await page.mouse.move(640, 360);
+    await screenshot(page, "09-workbench-tickets-active");
+
     expect(runtimeErrors).toEqual([]);
   });
 });