97 lines
3.7 KiB
TypeScript
97 lines
3.7 KiB
TypeScript
'use client'
|
|
|
|
import Link from 'next/link'
|
|
import { usePathname } from 'next/navigation'
|
|
import { Upload, List, Search, Settings, AudioLines } from 'lucide-react'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
const navItems = [
|
|
{ href: '/', label: '会议', icon: List },
|
|
{ href: '/upload', label: '上传', icon: Upload },
|
|
{ href: '/search', label: '搜索', icon: Search, disabled: true },
|
|
{ href: '/settings', label: '设置', icon: Settings, disabled: true },
|
|
]
|
|
|
|
export function AppShell({ children }: { children: React.ReactNode }) {
|
|
const pathname = usePathname()
|
|
|
|
return (
|
|
<div className="flex min-h-screen bg-background">
|
|
{/* Sidebar - Desktop */}
|
|
<aside className="hidden md:flex w-60 flex-col border-r border-border bg-surface px-3 py-5">
|
|
<div className="flex items-center gap-2 px-3 pb-6">
|
|
<div className="flex h-9 w-9 items-center justify-center rounded-xl bg-primary text-primary-foreground">
|
|
<AudioLines className="h-5 w-5" />
|
|
</div>
|
|
<div className="flex flex-col">
|
|
<span className="text-[15px] font-semibold leading-tight">MeetNote</span>
|
|
<span className="text-[11px] text-muted-foreground leading-tight">会议转写总结</span>
|
|
</div>
|
|
</div>
|
|
|
|
<nav className="flex flex-col gap-1">
|
|
{navItems.map((item) => {
|
|
const Icon = item.icon
|
|
const active =
|
|
item.href === '/' ? pathname === '/' : pathname.startsWith(item.href)
|
|
return (
|
|
<Link
|
|
key={item.href}
|
|
href={item.disabled ? '#' : item.href}
|
|
aria-disabled={item.disabled}
|
|
className={cn(
|
|
'flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm transition-colors',
|
|
active
|
|
? 'bg-primary text-primary-foreground font-medium'
|
|
: 'text-foreground hover:bg-surface-muted',
|
|
item.disabled && 'opacity-40 pointer-events-none',
|
|
)}
|
|
>
|
|
<Icon className="h-4 w-4" />
|
|
<span>{item.label}</span>
|
|
{item.disabled && (
|
|
<span className="ml-auto text-[10px] text-muted-foreground">v2</span>
|
|
)}
|
|
</Link>
|
|
)
|
|
})}
|
|
</nav>
|
|
|
|
<div className="mt-auto px-3 pt-4 border-t border-border">
|
|
<div className="text-[11px] text-muted-foreground">MVP · 2026-04-13</div>
|
|
<div className="text-[11px] text-muted-foreground">端口 4490</div>
|
|
</div>
|
|
</aside>
|
|
|
|
{/* Main */}
|
|
<main className="flex-1 min-w-0 pb-20 md:pb-0">{children}</main>
|
|
|
|
{/* Bottom Tab - Mobile */}
|
|
<nav className="md:hidden fixed bottom-0 inset-x-0 z-20 border-t border-border bg-surface-elevated/95 backdrop-blur px-2 py-2">
|
|
<div className="flex items-center justify-around">
|
|
{navItems.map((item) => {
|
|
const Icon = item.icon
|
|
const active =
|
|
item.href === '/' ? pathname === '/' : pathname.startsWith(item.href)
|
|
return (
|
|
<Link
|
|
key={item.href}
|
|
href={item.disabled ? '#' : item.href}
|
|
aria-disabled={item.disabled}
|
|
className={cn(
|
|
'flex flex-col items-center gap-0.5 px-4 py-1.5 rounded-lg text-[11px] transition-colors',
|
|
active ? 'text-primary' : 'text-muted-foreground',
|
|
item.disabled && 'opacity-40 pointer-events-none',
|
|
)}
|
|
>
|
|
<Icon className="h-5 w-5" />
|
|
<span>{item.label}</span>
|
|
</Link>
|
|
)
|
|
})}
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
)
|
|
}
|