1

2026-05-09 14:37:56 +08:00
parent d1285b7800
commit 521eea47d2
29 changed files with 1492 additions and 279 deletions
--- a/src/app/dashboard/_components/header.tsx
+++ b/src/app/dashboard/_components/header.tsx
@@ -0,0 +1,102 @@
+"use client"
+
+import Link from "next/link";
+import React from 'react';
+import {CheckCircle2, CreditCard, LayoutGrid, LogOut, SettingsIcon} from "lucide-react";
+import {usePathname} from "next/navigation";
+
+function Header() {
+    return (
+        <header className="sticky top-0 z-30 border-b border-border/60 bg-background/85 backdrop-blur-md">
+            <div className="container mx-auto flex h-14 max-w-6xl items-center justify-between gap-4 px-4 md:px-6">
+                <div className="flex min-w-0 items-center gap-2 sm:gap-5">
+                    <Link
+                        href="/dashboard"
+                        className="flex shrink-0 items-center gap-2 text-sm font-semibold tracking-tight">
+                        <div
+                            className="inline-flex h-7 w-7 items-center justify-center rounded bg-foreground text-[11px] font-bold text-background">
+                            S
+                        </div>
+                        <span className="hidden sm:inline">StoreAI</span>
+                    </Link>
+                    <span className="hidden h-5 w-px bg-border/60 md:inline-block" aria-hidden="true"/>
+                    <NavTabs/>
+                </div>
+
+                <div className="flex shrink-0 items-center gap-3">
+                    <Link href="/dashboard/billing"
+                          className={`inline-flex h-7 items-center gap-1.5 rounded-full border px-2.5 text-[11px] font-medium transition-colors border-emerald-200 bg-emerald-50 text-emerald-800 hover:bg-emerald-100`}>
+                        <CheckCircle2 className="h-3 w-3"/>
+                        测试
+                    </Link>
+                    <span className="hidden h-5 w-px bg-border/60 md:inline-block" aria-hidden="true"/>
+                    <UserMenu/>
+                </div>
+            </div>
+        </header>
+    );
+}
+
+
+/**
+ * 导航栏
+ */
+const NavTabs = () => {
+    const pathname = usePathname();
+    const tabs = [
+        {href: "/dashboard", label: "Dashboard", icon: LayoutGrid},
+        {href: "/dashboard/settings", label: "Settings", icon: SettingsIcon},
+        {href: "/dashboard/billing", label: "Billing", icon: CreditCard},
+    ];
+    return (
+        <nav className="flex items-center gap-0.5" aria-label="Dashboard navigation">
+            {tabs.map(item => {
+                const Icon = item.icon;
+                const isActive = pathname.startsWith(item.href);
+
+                return (
+                    <Link
+                        key={item.href}
+                        href={item.href}
+                        className={`relative inline-flex h-8 items-center gap-1.5 rounded-md px-2.5 text-xs font-medium transition-colors sm:px-3 sm:text-sm ${
+                            isActive
+                                ? "text-foreground"
+                                : "text-muted-foreground hover:bg-muted/60 hover:text-foreground"
+                        }`}>
+                        <Icon className="h-3.5 w-3.5"/>
+                        <span className="hidden sm:inline">{item.label}</span>
+                        {isActive && (
+                            <span
+                                aria-hidden="true"
+                                className="absolute -bottom-3.25 left-2 right-2 h-0.5 rounded-t-full bg-foreground"
+                            />
+                        )}
+                    </Link>
+                );
+            })}
+        </nav>
+    );
+};
+
+
+/**
+ * 用户信息
+ */
+const UserMenu = () => {
+    return (
+        <div className="flex items-center gap-2">
+            <div className="hidden max-w-50 truncate text-xs text-muted-foreground md:inline">
+                112@qq.com
+            </div>
+            <div
+                className="cursor-pointer inline-flex h-7 items-center gap-1 rounded-md px-2 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+                title="Sign out">
+                <LogOut className="h-3 w-3"/>
+                <span className="hidden sm:inline">Sign out</span>
+            </div>
+        </div>
+    );
+};
+
+
+export default Header