e4959d584f
主要更新： - 更新代理商端文档，明确项目由品牌方分配流程 - 新增Brief配置详情页(已配置)设计稿 - 完善工作台紧急待办中品牌新任务功能 - 整理Pencil设计文件中代理商端页面顺序 - 新增后端FastAPI框架及核心API - 新增前端Next.js页面和组件库 - 添加.gitignore排除构建和缓存文件 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
90 lines
2.8 KiB
TypeScript
90 lines
2.8 KiB
TypeScript
'use client'
|
|
|
|
import Link from 'next/link'
|
|
import { usePathname } from 'next/navigation'
|
|
import { ClipboardList, Bell, User, Scan, ListTodo, LayoutDashboard, Settings } from 'lucide-react'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
interface NavItem {
|
|
icon: React.ElementType
|
|
label: string
|
|
href: string
|
|
}
|
|
|
|
// 达人端导航项
|
|
const creatorNavItems: NavItem[] = [
|
|
{ icon: ClipboardList, label: '任务', href: '/creator' },
|
|
{ icon: Bell, label: '消息', href: '/creator/messages' },
|
|
{ icon: User, label: '我的', href: '/creator/profile' },
|
|
]
|
|
|
|
// 代理商端导航项
|
|
const agencyNavItems: NavItem[] = [
|
|
{ icon: LayoutDashboard, label: '工作台', href: '/agency' },
|
|
{ icon: ListTodo, label: '任务', href: '/agency/tasks' },
|
|
{ icon: Scan, label: '审核', href: '/agency/review' },
|
|
{ icon: Bell, label: '消息', href: '/agency/messages' },
|
|
{ icon: User, label: '我的', href: '/agency/profile' },
|
|
]
|
|
|
|
// 品牌方端导航项
|
|
const brandNavItems: NavItem[] = [
|
|
{ icon: LayoutDashboard, label: '看板', href: '/brand' },
|
|
{ icon: Settings, label: '配置', href: '/brand/rules' },
|
|
{ icon: Bell, label: '消息', href: '/brand/messages' },
|
|
{ icon: User, label: '我的', href: '/brand/profile' },
|
|
]
|
|
|
|
interface BottomNavProps {
|
|
role?: 'creator' | 'agency' | 'brand'
|
|
}
|
|
|
|
export function BottomNav({ role = 'creator' }: BottomNavProps) {
|
|
const pathname = usePathname() || ''
|
|
|
|
const navItems = role === 'creator'
|
|
? creatorNavItems
|
|
: role === 'agency'
|
|
? agencyNavItems
|
|
: brandNavItems
|
|
|
|
const isActive = (href: string) => {
|
|
if (href === `/${role}`) {
|
|
return pathname === href || pathname === `/${role}/`
|
|
}
|
|
return pathname.startsWith(href)
|
|
}
|
|
|
|
return (
|
|
<div className="fixed bottom-0 left-0 right-0 z-bottom-nav bottom-nav-gradient h-[95px] flex flex-col justify-end px-[21px] pb-[21px] pt-3">
|
|
<div className="flex items-center justify-around bg-bg-elevated rounded-[31px] h-[62px] p-1 nav-shadow border border-border-subtle">
|
|
{navItems.map((item) => {
|
|
const Icon = item.icon
|
|
const active = isActive(item.href)
|
|
|
|
return (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className={cn(
|
|
'flex flex-col items-center justify-center gap-1 w-14 h-full',
|
|
active ? 'text-text-primary' : 'text-text-secondary'
|
|
)}
|
|
>
|
|
<Icon className={cn('w-6 h-6', active && 'text-text-primary')} strokeWidth={active ? 2 : 1.5} />
|
|
<span className={cn(
|
|
'text-[10px]',
|
|
active ? 'font-semibold' : 'font-medium'
|
|
)}>
|
|
{item.label}
|
|
</span>
|
|
</Link>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default BottomNav
|