freedakgmail
602 lines
24 KiB
TypeScript
602 lines
24 KiB
TypeScript
"use client"
|
|
|
|
import Link from "next/link"
|
|
import { BookOpen, Search, Settings, LogOut, User, ChevronDown, Plus, Trash2, Network, LayoutGrid, Calculator, HelpCircle, Calendar, Menu, X, Home, Users as UsersIcon, Clock, TreePine } from "lucide-react"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu"
|
|
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet"
|
|
import { useFamily } from "@/context/family-context"
|
|
import { useState, useRef, useEffect, useCallback } from "react"
|
|
import { useRouter, usePathname, useSearchParams } from "next/navigation"
|
|
import { useSession, signOut } from "next-auth/react"
|
|
import { useDialog } from "@/components/ui/alert-dialog-custom"
|
|
import { permissions } from "@/lib/permissions"
|
|
import { solar2lunar } from "@/lib/lunar-calendar"
|
|
import { CalendarDialog } from "@/components/calendar-dialog"
|
|
import { MemberNameWithStatus } from "./member-name-with-status"
|
|
|
|
interface FamilyTree {
|
|
id: string
|
|
name: string
|
|
description: string | null
|
|
ownerId: string
|
|
currentUserRole?: "OWNER" | "EDITOR" | "VIEWER"
|
|
}
|
|
|
|
export function SiteHeader() {
|
|
const { searchMembers, searchResults, currentTree: familyCurrentTree } = useFamily()
|
|
const { data: session, status } = useSession()
|
|
const { showAlert, showConfirm, showPrompt } = useDialog()
|
|
const pathname = usePathname()
|
|
const searchParams = useSearchParams()
|
|
const [searchQuery, setSearchQuery] = useState("")
|
|
const [showResults, setShowResults] = useState(false)
|
|
const [familyTrees, setFamilyTrees] = useState<FamilyTree[]>([])
|
|
const [deletingTreeId, setDeletingTreeId] = useState<string | null>(null)
|
|
const [treeDropdownOpen, setTreeDropdownOpen] = useState(false)
|
|
const [currentDate, setCurrentDate] = useState(new Date())
|
|
const [calendarDialogOpen, setCalendarDialogOpen] = useState(false)
|
|
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
|
|
const searchRef = useRef<HTMLDivElement>(null)
|
|
const router = useRouter()
|
|
|
|
// 使用 family context 的 currentTree
|
|
const currentTree = familyCurrentTree
|
|
|
|
// 获取当前视图模式
|
|
const currentViewMode = searchParams.get('view') || 'traditional'
|
|
const isTreePage = pathname === '/tree'
|
|
|
|
// 更新日期
|
|
useEffect(() => {
|
|
const timer = setInterval(() => {
|
|
setCurrentDate(new Date())
|
|
}, 60000) // 每分钟更新一次
|
|
return () => clearInterval(timer)
|
|
}, [])
|
|
|
|
// 获取农历信息
|
|
const lunarInfo = solar2lunar(currentDate)
|
|
const solarDateStr = `${currentDate.getFullYear()}年${currentDate.getMonth() + 1}月${currentDate.getDate()}日`
|
|
const lunarDateStr = lunarInfo ? lunarInfo.toString() : '农历信息不可用'
|
|
|
|
// 生成带有 treeId 的 URL
|
|
const getUrlWithTreeId = (path: string) => {
|
|
if (currentTree?.id) {
|
|
return `${path}?treeId=${currentTree.id}`
|
|
}
|
|
return path
|
|
}
|
|
|
|
// 切换视图模式
|
|
const handleViewModeChange = (mode: string) => {
|
|
const params = new URLSearchParams(searchParams.toString())
|
|
params.set('view', mode)
|
|
if (currentTree?.id) {
|
|
params.set('treeId', currentTree.id)
|
|
}
|
|
router.push(`${pathname}?${params.toString()}`)
|
|
}
|
|
|
|
const getRoleBadge = (role?: string) => {
|
|
switch (role) {
|
|
case "OWNER":
|
|
return <span className="text-[10px] px-1.5 py-0.5 rounded bg-purple-100 text-purple-700 border border-purple-200 ml-2">所有者</span>
|
|
case "EDITOR":
|
|
return <span className="text-[10px] px-1.5 py-0.5 rounded bg-blue-100 text-blue-700 border border-blue-200 ml-2">编辑</span>
|
|
case "VIEWER":
|
|
return <span className="text-[10px] px-1.5 py-0.5 rounded bg-gray-100 text-gray-700 border border-gray-200 ml-2">查看</span>
|
|
default:
|
|
return null
|
|
}
|
|
}
|
|
|
|
const handleSignOut = async () => {
|
|
await signOut({ callbackUrl: "/auth/signin" })
|
|
}
|
|
|
|
// 获取用户名首字母作为头像
|
|
const getUserInitial = () => {
|
|
if (session?.user?.name) {
|
|
return session.user.name.charAt(0).toUpperCase()
|
|
}
|
|
if (session?.user?.email) {
|
|
return session.user.email.charAt(0).toUpperCase()
|
|
}
|
|
return "U"
|
|
}
|
|
|
|
// 删除家族树
|
|
const handleDeleteTree = async (tree: FamilyTree, e: React.MouseEvent) => {
|
|
e.stopPropagation() // 阻止触发选择事件
|
|
|
|
// 检查权限
|
|
if (tree.ownerId !== session?.user?.id) {
|
|
await showAlert('只有家族树的创建者才能删除', '权限不足')
|
|
return
|
|
}
|
|
|
|
const confirmText = `确定要删除家族树"${tree.name}"吗？\n\n此操作将永久删除所有成员、活动日志和协作者数据，且不可撤销！`
|
|
const confirmed = await showConfirm(confirmText, '删除家族树', 'destructive')
|
|
if (!confirmed) {
|
|
return
|
|
}
|
|
|
|
// 二次确认
|
|
const finalConfirm = await showPrompt(
|
|
`请输入家族树名称"${tree.name}"以确认删除：`,
|
|
'',
|
|
'确认删除'
|
|
)
|
|
if (finalConfirm !== tree.name) {
|
|
await showAlert('名称不匹配，删除已取消', '操作已取消')
|
|
return
|
|
}
|
|
|
|
setDeletingTreeId(tree.id)
|
|
try {
|
|
const response = await fetch(`/api/trees/${tree.id}`, {
|
|
method: 'DELETE',
|
|
})
|
|
|
|
if (!response.ok) {
|
|
const error = await response.json()
|
|
throw new Error(error.error || '删除失败')
|
|
}
|
|
|
|
// 刷新家族树列表
|
|
await loadFamilyTrees()
|
|
|
|
// 如果删除的是当前树，跳转到首页
|
|
if (currentTree?.id === tree.id) {
|
|
window.location.href = '/'
|
|
}
|
|
} catch (error) {
|
|
console.error('删除家族树失败:', error)
|
|
await showAlert('删除失败：' + (error as Error).message, '错误')
|
|
} finally {
|
|
setDeletingTreeId(null)
|
|
}
|
|
}
|
|
|
|
// 获取家族树列表
|
|
const loadFamilyTrees = useCallback(() => {
|
|
if (!session?.user?.id || status !== 'authenticated') return
|
|
|
|
const controller = new AbortController()
|
|
|
|
fetch('/api/trees', { signal: controller.signal })
|
|
.then(res => {
|
|
if (!res.ok) throw new Error(`HTTP error! status: ${res.status}`)
|
|
return res.json()
|
|
})
|
|
.then(data => {
|
|
if (data.trees) {
|
|
setFamilyTrees(data.trees)
|
|
}
|
|
})
|
|
.catch(err => {
|
|
// 忽略 abort 错误和 fetch 错误（可能是页面切换导致的）
|
|
if (err.name !== 'AbortError' && err.message !== 'Failed to fetch') {
|
|
console.error('获取家族树列表失败:', err)
|
|
}
|
|
})
|
|
|
|
return () => controller.abort()
|
|
}, [session?.user?.id, status])
|
|
|
|
useEffect(() => {
|
|
loadFamilyTrees()
|
|
}, [loadFamilyTrees])
|
|
|
|
// 监听路由变化，刷新家族树列表
|
|
useEffect(() => {
|
|
const handleRouteChange = () => {
|
|
loadFamilyTrees()
|
|
}
|
|
|
|
window.addEventListener('focus', handleRouteChange)
|
|
return () => window.removeEventListener('focus', handleRouteChange)
|
|
}, [loadFamilyTrees])
|
|
|
|
// 点击外部关闭搜索结果
|
|
useEffect(() => {
|
|
function handleClickOutside(event: MouseEvent) {
|
|
if (searchRef.current && !searchRef.current.contains(event.target as Node)) {
|
|
setShowResults(false)
|
|
}
|
|
}
|
|
document.addEventListener("mousedown", handleClickOutside)
|
|
return () => document.removeEventListener("mousedown", handleClickOutside)
|
|
}, [])
|
|
|
|
const handleSearch = (query: string) => {
|
|
setSearchQuery(query)
|
|
searchMembers(query)
|
|
setShowResults(query.length > 0)
|
|
}
|
|
|
|
const handleSelectMember = (memberId: string) => {
|
|
const params = new URLSearchParams(window.location.search)
|
|
router.push(`/members/${memberId}?${params.toString()}`)
|
|
setSearchQuery("")
|
|
setShowResults(false)
|
|
}
|
|
|
|
// 导航菜单项配置
|
|
const navItems = [
|
|
{ href: "/", label: "总览", icon: Home },
|
|
{ href: "/tree", label: "族谱", icon: Network },
|
|
{ href: "/members", label: "成员", icon: UsersIcon },
|
|
{ href: "/timeline", label: "大事记", icon: Clock },
|
|
]
|
|
|
|
// 判断当前路由是否激活
|
|
const isActive = (href: string) => {
|
|
if (href === "/") return pathname === "/"
|
|
return pathname.startsWith(href)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<header className="sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
|
|
<div className="container mx-auto flex h-16 items-center px-4 gap-4">
|
|
{/* Logo */}
|
|
<div className="flex items-center gap-2">
|
|
<Link href={getUrlWithTreeId("/")} className="flex items-center gap-2 hover:opacity-80 transition-opacity">
|
|
<div className="flex h-9 w-9 items-center justify-center rounded-lg bg-gradient-to-br from-primary to-primary/80 text-primary-foreground shadow-sm">
|
|
<BookOpen className="h-5 w-5" />
|
|
</div>
|
|
<span className="text-xl font-serif font-bold tracking-tight bg-gradient-to-r from-foreground to-foreground/70 bg-clip-text">
|
|
华夏家谱
|
|
</span>
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Desktop Navigation */}
|
|
<nav className="hidden md:flex items-center gap-1 ml-6" onClick={() => setTreeDropdownOpen(false)}>
|
|
{navItems.map((item) => {
|
|
const Icon = item.icon
|
|
const active = isActive(item.href)
|
|
return (
|
|
<Link
|
|
key={item.href}
|
|
href={getUrlWithTreeId(item.href)}
|
|
className={`
|
|
relative px-4 py-2 rounded-lg font-serif text-sm font-medium
|
|
transition-all duration-200 flex items-center gap-2
|
|
${active
|
|
? 'text-primary bg-primary/10'
|
|
: 'text-muted-foreground hover:text-foreground hover:bg-muted'
|
|
}
|
|
`}
|
|
>
|
|
<Icon className="h-4 w-4" />
|
|
<span>{item.label}</span>
|
|
{active && (
|
|
<div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-12 h-0.5 bg-primary rounded-full" />
|
|
)}
|
|
</Link>
|
|
)
|
|
})}
|
|
</nav>
|
|
|
|
{/* Mobile Menu Button */}
|
|
<Sheet open={mobileMenuOpen} onOpenChange={setMobileMenuOpen}>
|
|
<SheetTrigger asChild className="md:hidden">
|
|
<Button variant="ghost" size="icon" className="ml-auto md:ml-0">
|
|
<Menu className="h-5 w-5" />
|
|
<span className="sr-only">打开菜单</span>
|
|
</Button>
|
|
</SheetTrigger>
|
|
<SheetContent side="left" className="w-[280px] sm:w-[320px]">
|
|
<SheetHeader>
|
|
<SheetTitle className="flex items-center gap-2 font-serif">
|
|
<BookOpen className="h-5 w-5 text-primary" />
|
|
华夏家谱
|
|
</SheetTitle>
|
|
</SheetHeader>
|
|
<div className="flex flex-col gap-4 mt-8">
|
|
{/* Mobile Navigation Links */}
|
|
<div className="flex flex-col gap-1">
|
|
{navItems.map((item) => {
|
|
const Icon = item.icon
|
|
const active = isActive(item.href)
|
|
return (
|
|
<Link
|
|
key={item.href}
|
|
href={getUrlWithTreeId(item.href)}
|
|
onClick={() => setMobileMenuOpen(false)}
|
|
className={`
|
|
flex items-center gap-3 px-4 py-3 rounded-lg font-serif
|
|
transition-all duration-200
|
|
${active
|
|
? 'text-primary bg-primary/10 font-medium'
|
|
: 'text-muted-foreground hover:text-foreground hover:bg-muted'
|
|
}
|
|
`}
|
|
>
|
|
<Icon className="h-5 w-5" />
|
|
<span>{item.label}</span>
|
|
</Link>
|
|
)
|
|
})}
|
|
</div>
|
|
|
|
{/* Mobile Utility Links */}
|
|
<div className="border-t pt-4 flex flex-col gap-1">
|
|
<Link
|
|
href={getUrlWithTreeId("/relationship")}
|
|
onClick={() => setMobileMenuOpen(false)}
|
|
className="flex items-center gap-3 px-4 py-3 rounded-lg font-serif text-muted-foreground hover:text-foreground hover:bg-muted transition-all"
|
|
>
|
|
<Calculator className="h-5 w-5" />
|
|
<span>关系计算</span>
|
|
</Link>
|
|
<Link
|
|
href="/settings"
|
|
onClick={() => setMobileMenuOpen(false)}
|
|
className="flex items-center gap-3 px-4 py-3 rounded-lg font-serif text-muted-foreground hover:text-foreground hover:bg-muted transition-all"
|
|
>
|
|
<Settings className="h-5 w-5" />
|
|
<span>系统设置</span>
|
|
</Link>
|
|
<Link
|
|
href="/help"
|
|
onClick={() => setMobileMenuOpen(false)}
|
|
className="flex items-center gap-3 px-4 py-3 rounded-lg font-serif text-muted-foreground hover:text-foreground hover:bg-muted transition-all"
|
|
>
|
|
<HelpCircle className="h-5 w-5" />
|
|
<span>帮助中心</span>
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Mobile User Section */}
|
|
{session && (
|
|
<div className="border-t pt-4">
|
|
<div className="px-4 py-2 text-sm text-muted-foreground">
|
|
<div className="font-medium text-foreground">{session.user?.name || "用户"}</div>
|
|
<div className="text-xs">{session.user?.email}</div>
|
|
</div>
|
|
<Button
|
|
variant="ghost"
|
|
onClick={() => {
|
|
setMobileMenuOpen(false)
|
|
handleSignOut()
|
|
}}
|
|
className="w-full justify-start gap-3 px-4 py-3 text-red-600 hover:text-red-700 hover:bg-red-50"
|
|
>
|
|
<LogOut className="h-5 w-5" />
|
|
<span>退出登录</span>
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</SheetContent>
|
|
</Sheet>
|
|
|
|
{/* 家族树选择器 */}
|
|
{session && familyTrees.length > 0 && (
|
|
<div className="ml-4 flex-shrink-0">
|
|
<DropdownMenu open={treeDropdownOpen} onOpenChange={setTreeDropdownOpen} modal={false}>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="outline" className="gap-2 w-[180px] font-serif">
|
|
<span className="flex-1 truncate text-left">{currentTree?.name || '选择家族树'}</span>
|
|
<ChevronDown className="h-4 w-4 flex-shrink-0" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent
|
|
align="end"
|
|
className="w-[300px] font-serif"
|
|
sideOffset={5}
|
|
avoidCollisions={false}
|
|
sticky="always"
|
|
>
|
|
<DropdownMenuLabel className="font-light">我的家族树</DropdownMenuLabel>
|
|
<DropdownMenuSeparator />
|
|
{familyTrees.map((tree) => (
|
|
<DropdownMenuItem
|
|
key={tree.id}
|
|
onClick={(e) => {
|
|
e.preventDefault()
|
|
setTreeDropdownOpen(false)
|
|
// 切换家族后跳转到总览页面，family-context 会自动加载新的树
|
|
router.push(`/?treeId=${tree.id}`)
|
|
}}
|
|
className="cursor-pointer flex items-center justify-between group py-3"
|
|
>
|
|
<div className="flex items-center gap-2 flex-1 min-w-0">
|
|
<span className="truncate flex-1">{tree.name}</span>
|
|
{getRoleBadge(tree.currentUserRole)}
|
|
{currentTree?.id === tree.id && (
|
|
<span className="text-primary flex-shrink-0">✓</span>
|
|
)}
|
|
</div>
|
|
{permissions.canDeleteTree(tree.currentUserRole) && (
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-6 w-6 ml-2 flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity"
|
|
onClick={(e) => handleDeleteTree(tree, e)}
|
|
disabled={deletingTreeId === tree.id}
|
|
>
|
|
<Trash2 className="h-3 w-3" />
|
|
</Button>
|
|
)}
|
|
</DropdownMenuItem>
|
|
))}
|
|
<DropdownMenuSeparator />
|
|
{session && (
|
|
<DropdownMenuItem
|
|
onClick={() => router.push('/trees/new')}
|
|
className="gap-2"
|
|
>
|
|
<Plus className="h-4 w-4" />
|
|
创建新家族树
|
|
</DropdownMenuItem>
|
|
)}
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
)}
|
|
|
|
<div className="ml-auto flex items-center gap-2">
|
|
{/* Search Bar */}
|
|
<div className="relative hidden lg:block" ref={searchRef}>
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
|
<Input
|
|
type="search"
|
|
placeholder="搜索成员..."
|
|
value={searchQuery}
|
|
onChange={(e) => handleSearch(e.target.value)}
|
|
className="h-9 w-56 xl:w-64 rounded-lg bg-muted/50 pl-9 text-sm border-0 focus-visible:ring-1 focus-visible:ring-primary/50"
|
|
/>
|
|
|
|
{/* 搜索结果下拉框 */}
|
|
{showResults && searchResults.length > 0 && (
|
|
<div className="absolute top-full mt-2 w-full bg-background border border-border rounded-lg shadow-lg max-h-96 overflow-y-auto z-50">
|
|
{searchResults.map((member) => (
|
|
<button
|
|
key={member.id}
|
|
onClick={() => handleSelectMember(member.id)}
|
|
className="w-full px-4 py-3 text-left hover:bg-muted transition-colors border-b border-border last:border-0"
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<div className="flex-1">
|
|
<div className="flex items-center gap-2">
|
|
<MemberNameWithStatus
|
|
name={member.fullName}
|
|
isDead={!!member.deathDate}
|
|
className="font-medium"
|
|
/>
|
|
<span className={`text-xs px-1.5 py-0.5 rounded ${member.gender === "MALE" ? "bg-blue-100 text-blue-700" : "bg-pink-100 text-pink-700"}`}>
|
|
{member.gender === "MALE" ? "男" : "女"}
|
|
</span>
|
|
<span className="text-xs text-muted-foreground">第{member.generation}世</span>
|
|
</div>
|
|
<p className="text-xs text-muted-foreground mt-1">
|
|
{member.birthDate && `生于 ${member.birthDate}`}
|
|
{member.birthPlace && ` · ${member.birthPlace}`}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* 无结果提示 */}
|
|
{showResults && searchQuery && searchResults.length === 0 && (
|
|
<div className="absolute top-full mt-2 w-full bg-background border border-border rounded-lg shadow-lg p-4 text-center text-sm text-muted-foreground z-50">
|
|
未找到匹配的成员
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* 日期显示 */}
|
|
<button
|
|
onClick={() => setCalendarDialogOpen(true)}
|
|
className="hidden xl:flex items-center gap-2 px-3 py-1.5 rounded-lg bg-gradient-to-br from-red-50/80 to-amber-50/80 dark:from-red-950/20 dark:to-amber-950/20 border border-red-200/50 dark:border-red-800/30 hover:shadow-sm transition-all cursor-pointer"
|
|
title="点击查询公历农历"
|
|
>
|
|
<Calendar className="h-4 w-4 text-red-600 dark:text-red-400" />
|
|
<div className="flex flex-col text-xs leading-tight">
|
|
<span className="font-medium text-gray-900 dark:text-gray-100">{solarDateStr}</span>
|
|
<span className="text-red-700 dark:text-red-400 font-serif">{lunarDateStr}</span>
|
|
</div>
|
|
</button>
|
|
|
|
{/* Utility Buttons - Desktop Only */}
|
|
<div className="hidden md:flex items-center gap-1">
|
|
<Link href={getUrlWithTreeId("/relationship")}>
|
|
<Button variant="ghost" size="icon" className="text-muted-foreground hover:text-foreground hover:bg-muted" title="关系计算">
|
|
<Calculator className="h-5 w-5" />
|
|
<span className="sr-only">关系计算</span>
|
|
</Button>
|
|
</Link>
|
|
|
|
<Link href="/settings">
|
|
<Button variant="ghost" size="icon" className="text-muted-foreground hover:text-foreground hover:bg-muted" title="系统设置">
|
|
<Settings className="h-5 w-5" />
|
|
<span className="sr-only">系统设置</span>
|
|
</Button>
|
|
</Link>
|
|
|
|
<Link href="/help">
|
|
<Button variant="ghost" size="icon" className="text-muted-foreground hover:text-foreground hover:bg-muted" title="帮助中心">
|
|
<HelpCircle className="h-5 w-5" />
|
|
<span className="sr-only">帮助中心</span>
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
|
|
{/* User Menu */}
|
|
{status === "loading" ? (
|
|
<div className="h-9 w-9 rounded-full bg-muted animate-pulse" />
|
|
) : session ? (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" className="relative h-9 w-9 rounded-full hover:bg-muted">
|
|
<Avatar className="h-9 w-9 border-2 border-border">
|
|
<AvatarImage src={undefined} alt={session.user?.name || "User"} />
|
|
<AvatarFallback className="bg-primary/10 text-primary font-serif">
|
|
{getUserInitial()}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent className="w-56 font-serif" align="end" forceMount>
|
|
<DropdownMenuLabel className="font-normal">
|
|
<div className="flex flex-col space-y-1">
|
|
<p className="text-sm font-medium leading-none">{session.user?.name || "用户"}</p>
|
|
<p className="text-xs leading-none text-muted-foreground">
|
|
{session.user?.email}
|
|
</p>
|
|
</div>
|
|
</DropdownMenuLabel>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem asChild>
|
|
<Link href={getUrlWithTreeId("/settings")} className="cursor-pointer">
|
|
<Settings className="mr-2 h-4 w-4" />
|
|
<span>系统设置</span>
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem asChild>
|
|
<Link href="/help" className="cursor-pointer">
|
|
<HelpCircle className="mr-2 h-4 w-4" />
|
|
<span>帮助中心</span>
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem onClick={handleSignOut} className="cursor-pointer text-red-600 focus:text-red-600 focus:bg-red-50">
|
|
<LogOut className="mr-2 h-4 w-4" />
|
|
<span>退出登录</span>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
) : (
|
|
<Link href="/auth/signin">
|
|
<Button variant="default" size="sm" className="font-serif">
|
|
登录
|
|
</Button>
|
|
</Link>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
{/* 日历查询对话框 - 放在 header 外部避免定位冲突 */}
|
|
<CalendarDialog open={calendarDialogOpen} onOpenChange={setCalendarDialogOpen} />
|
|
</>
|
|
)
|
|
}
|