feat: add WorkbenchRail component and update WorkbenchLayout to include it;
This commit is contained in:
@@ -8,6 +8,7 @@ import { useEffect } from "react"
|
|||||||
import { useAuth } from "@/components/auth-provider"
|
import { useAuth } from "@/components/auth-provider"
|
||||||
import { NotificationProvider } from "@/components/notification-provider"
|
import { NotificationProvider } from "@/components/notification-provider"
|
||||||
import { WorkbenchHeader } from "@/components/workbench-header"
|
import { WorkbenchHeader } from "@/components/workbench-header"
|
||||||
|
import { WorkbenchRail } from "@/components/workbench-rail"
|
||||||
import { useI18n } from "@/i18n/provider"
|
import { useI18n } from "@/i18n/provider"
|
||||||
|
|
||||||
export default function WorkbenchLayout({
|
export default function WorkbenchLayout({
|
||||||
@@ -47,7 +48,7 @@ export default function WorkbenchLayout({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className="flex h-svh min-h-0 flex-col overflow-hidden bg-background"
|
className="flex h-svh min-h-0 overflow-hidden bg-background"
|
||||||
style={
|
style={
|
||||||
{
|
{
|
||||||
"--header-height": "calc(var(--spacing) * 12)",
|
"--header-height": "calc(var(--spacing) * 12)",
|
||||||
@@ -55,8 +56,11 @@ export default function WorkbenchLayout({
|
|||||||
}
|
}
|
||||||
>
|
>
|
||||||
<NotificationProvider>
|
<NotificationProvider>
|
||||||
<WorkbenchHeader />
|
<WorkbenchRail />
|
||||||
<main className="flex min-h-0 flex-1 overflow-hidden">{children}</main>
|
<div className="flex min-w-0 flex-1 flex-col overflow-hidden">
|
||||||
|
<WorkbenchHeader />
|
||||||
|
<main className="flex min-h-0 flex-1 overflow-hidden">{children}</main>
|
||||||
|
</div>
|
||||||
</NotificationProvider>
|
</NotificationProvider>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -0,0 +1,58 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import { FileTextIcon, MessageSquareTextIcon } from "lucide-react"
|
||||||
|
import Link from "next/link"
|
||||||
|
import { usePathname } from "next/navigation"
|
||||||
|
|
||||||
|
import { useI18n } from "@/i18n/provider"
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
const workbenchRailItems = [
|
||||||
|
{
|
||||||
|
key: "conversations",
|
||||||
|
titleKey: "nav.conversations",
|
||||||
|
href: "/workbench",
|
||||||
|
icon: MessageSquareTextIcon,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "tickets",
|
||||||
|
titleKey: "nav.tickets",
|
||||||
|
href: "/dashboard/tickets",
|
||||||
|
icon: FileTextIcon,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
export function WorkbenchRail() {
|
||||||
|
const t = useI18n()
|
||||||
|
const pathname = usePathname()
|
||||||
|
|
||||||
|
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">
|
||||||
|
<nav className="flex w-full flex-col items-center gap-2">
|
||||||
|
{workbenchRailItems.map((item) => {
|
||||||
|
const Icon = item.icon
|
||||||
|
const isActive =
|
||||||
|
item.key === "conversations"
|
||||||
|
? pathname === "/workbench" || pathname?.startsWith("/workbench/")
|
||||||
|
: pathname === item.href || pathname?.startsWith(`${item.href}/`)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Link
|
||||||
|
key={item.key}
|
||||||
|
href={item.href}
|
||||||
|
aria-label={t(item.titleKey)}
|
||||||
|
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",
|
||||||
|
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>
|
||||||
|
</Link>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</nav>
|
||||||
|
</aside>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -67,7 +67,7 @@ test.describe("support workbench", () => {
|
|||||||
await screenshot(page, "03-workbench-initial");
|
await screenshot(page, "03-workbench-initial");
|
||||||
|
|
||||||
await expect(page.getByText(/客服工作台|Support Workbench/).first()).toBeVisible();
|
await expect(page.getByText(/客服工作台|Support Workbench/).first()).toBeVisible();
|
||||||
await page.getByRole("button", { name: /贝壳AGENT|Shell Agent/i }).first().click();
|
await page.getByRole("button", { name: /贝壳AGENT|Agent Desk/i }).first().click();
|
||||||
await expect(page.getByText(/切换工作区|Switch workspace/)).toBeVisible();
|
await expect(page.getByText(/切换工作区|Switch workspace/)).toBeVisible();
|
||||||
await expect(page.getByRole("menuitem", { name: /管理后台|Admin Dashboard/ })).toBeVisible();
|
await expect(page.getByRole("menuitem", { name: /管理后台|Admin Dashboard/ })).toBeVisible();
|
||||||
await page.waitForTimeout(300);
|
await page.waitForTimeout(300);
|
||||||
@@ -79,7 +79,7 @@ test.describe("support workbench", () => {
|
|||||||
await screenshot(page, "05-dashboard-after-switch");
|
await screenshot(page, "05-dashboard-after-switch");
|
||||||
await expect(page.getByText(/管理后台|Admin Dashboard/).first()).toBeVisible();
|
await expect(page.getByText(/管理后台|Admin Dashboard/).first()).toBeVisible();
|
||||||
|
|
||||||
await page.getByRole("button", { name: /贝壳AGENT|Shell Agent/i }).first().click();
|
await page.getByRole("button", { name: /贝壳AGENT|Agent Desk/i }).first().click();
|
||||||
await expect(page.getByRole("menuitem", { name: /客服工作台|Support Workbench/ })).toBeVisible();
|
await expect(page.getByRole("menuitem", { name: /客服工作台|Support Workbench/ })).toBeVisible();
|
||||||
await page.waitForTimeout(300);
|
await page.waitForTimeout(300);
|
||||||
await screenshot(page, "06-dashboard-switcher-open");
|
await screenshot(page, "06-dashboard-switcher-open");
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"app": {
|
"app": {
|
||||||
"brand": "Shell Agent",
|
"brand": "Agent Desk",
|
||||||
"metadataTitle": "AI Customer Support Admin",
|
"metadataTitle": "AI Customer Support Admin",
|
||||||
"metadataDescription": "AI Customer Support Admin"
|
"metadataDescription": "AI Customer Support Admin"
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user