diff --git a/src/app/admin/(shell)/wallet/transactions/page.tsx b/src/app/admin/(shell)/wallet/transactions/page.tsx index e6fb5f3..fe67200 100644 --- a/src/app/admin/(shell)/wallet/transactions/page.tsx +++ b/src/app/admin/(shell)/wallet/transactions/page.tsx @@ -4,7 +4,7 @@ import { WalletTxnsPanel } from "@/modules/wallet/wallet-console"; import type { Metadata } from "next"; export const metadata: Metadata = { - title: `${walletModuleMeta.title} · 流水`, + title: `${walletModuleMeta.title} · 钱包流水`, }; export default function AdminWalletTransactionsPage() { diff --git a/src/components/admin/admin-breadcrumb.tsx b/src/components/admin/admin-breadcrumb.tsx new file mode 100644 index 0000000..356d5a9 --- /dev/null +++ b/src/components/admin/admin-breadcrumb.tsx @@ -0,0 +1,96 @@ +"use client"; + +import Link from "next/link"; +import { usePathname } from "next/navigation"; +import { + Breadcrumb, + BreadcrumbItem, + BreadcrumbLink, + BreadcrumbList, + BreadcrumbPage, + BreadcrumbSeparator, +} from "@/components/ui/breadcrumb"; +import { adminShellNavItems, ADMIN_BASE } from "@/modules/_config/admin-nav"; +import React from "react"; + +const DRAW_ROUTE_LABELS: Record = { + finance: "期号收支", + review: "审核", + results: "开奖结果", +}; + +function titleCase(value: string): string { + return value + .split("-") + .map((part) => part.charAt(0).toUpperCase() + part.slice(1)) + .join(" "); +} + +export function AdminBreadcrumb() { + const pathname = usePathname(); + + // 把路径拆分成段 + const segments = pathname.split("/").filter(Boolean); + + // 基础面包屑:首页/仪表盘 + const breadcrumbs = [ + { + label: "首页", + href: ADMIN_BASE, + isCurrent: pathname === ADMIN_BASE, + }, + ]; + + if (pathname !== ADMIN_BASE) { + const businessSegment = segments[1]; + if (businessSegment) { + const navItem = adminShellNavItems.find((item) => { + return item.segment === businessSegment || item.href.includes(businessSegment); + }); + + if (navItem && navItem.href !== ADMIN_BASE) { + breadcrumbs.push({ + label: navItem.segment === "draws" ? "期号列表" : navItem.label, + href: navItem.href, + isCurrent: pathname === navItem.href || segments.length === 2, + }); + } + + if (segments.length > 2) { + const subSegment = segments[2]; + const subLabel = subSegment ? DRAW_ROUTE_LABELS[subSegment] ?? titleCase(subSegment) : ""; + if (subLabel) { + breadcrumbs.push({ + label: subLabel, + href: pathname, + isCurrent: true, + }); + } + } + } + } + + return ( + + + {breadcrumbs.map((crumb, index) => { + const isLast = index === breadcrumbs.length - 1; + const itemKey = `${crumb.href}-${index}`; + + return ( + + + {crumb.isCurrent ? ( + {crumb.label} + ) : ( + }>{crumb.label} + )} + + {!isLast && } + + ); + })} + + + ); +} diff --git a/src/components/admin/admin-shell.tsx b/src/components/admin/admin-shell.tsx index d54b210..0a032b4 100644 --- a/src/components/admin/admin-shell.tsx +++ b/src/components/admin/admin-shell.tsx @@ -4,11 +4,13 @@ import type { ReactNode } from "react"; import { AdminAppSidebar } from "@/components/admin/admin-sidebar"; import { ShellToolbar } from "@/components/admin/toolbar"; +import { AdminBreadcrumb } from "@/components/admin/admin-breadcrumb"; import { SidebarInset, SidebarProvider, SidebarTrigger, } from "@/components/ui/sidebar"; +import { Separator } from "@/components/ui/separator"; export function AdminShell({ children }: { children: ReactNode }) { return ( @@ -17,9 +19,8 @@ export function AdminShell({ children }: { children: ReactNode }) {
- - 彩票后台 - + +
diff --git a/src/components/ui/breadcrumb.tsx b/src/components/ui/breadcrumb.tsx new file mode 100644 index 0000000..3d85c18 --- /dev/null +++ b/src/components/ui/breadcrumb.tsx @@ -0,0 +1,125 @@ +import * as React from "react" +import { mergeProps } from "@base-ui/react/merge-props" +import { useRender } from "@base-ui/react/use-render" + +import { cn } from "@/lib/utils" +import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react" + +function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) { + return ( +