建立檔案
This commit is contained in:
476
components/admin/admin-layout.tsx
Normal file
476
components/admin/admin-layout.tsx
Normal file
@@ -0,0 +1,476 @@
|
||||
"use client"
|
||||
|
||||
import type React from "react"
|
||||
|
||||
import { useState, useEffect } from "react"
|
||||
import { useAuth } from "@/contexts/auth-context"
|
||||
import {
|
||||
LayoutDashboard,
|
||||
Users,
|
||||
Bot,
|
||||
Trophy,
|
||||
BarChart3,
|
||||
Settings,
|
||||
Menu,
|
||||
X,
|
||||
Bell,
|
||||
Search,
|
||||
LogOut,
|
||||
User,
|
||||
UserPlus,
|
||||
FileText,
|
||||
AlertTriangle,
|
||||
Award,
|
||||
Info,
|
||||
} from "lucide-react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Card, CardContent } from "@/components/ui/card"
|
||||
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu"
|
||||
|
||||
interface AdminLayoutProps {
|
||||
children: React.ReactNode
|
||||
currentPage: string
|
||||
onPageChange: (page: string) => void
|
||||
}
|
||||
|
||||
interface Notification {
|
||||
id: string
|
||||
type: "user_registration" | "app_submission" | "competition_update" | "system_alert" | "review_completed"
|
||||
title: string
|
||||
message: string
|
||||
timestamp: string
|
||||
read: boolean
|
||||
}
|
||||
|
||||
interface SearchResult {
|
||||
id: string
|
||||
type: "user" | "app" | "competition"
|
||||
title: string
|
||||
subtitle: string
|
||||
avatar?: string
|
||||
}
|
||||
|
||||
const menuItems = [
|
||||
{ id: "dashboard", name: "儀表板", icon: LayoutDashboard },
|
||||
{ id: "users", name: "用戶管理", icon: Users },
|
||||
{ id: "apps", name: "應用管理", icon: Bot },
|
||||
{ id: "competitions", name: "競賽管理", icon: Trophy },
|
||||
{ id: "analytics", name: "數據分析", icon: BarChart3 },
|
||||
{ id: "settings", name: "系統設定", icon: Settings },
|
||||
]
|
||||
|
||||
// Notifications data - empty for production
|
||||
const mockNotifications: Notification[] = []
|
||||
|
||||
// Search data - empty for production
|
||||
const mockSearchData: SearchResult[] = []
|
||||
|
||||
export function AdminLayout({ children, currentPage, onPageChange }: AdminLayoutProps) {
|
||||
const { user, logout } = useAuth()
|
||||
const [sidebarOpen, setSidebarOpen] = useState(true)
|
||||
|
||||
// Search state
|
||||
const [searchQuery, setSearchQuery] = useState("")
|
||||
const [searchResults, setSearchResults] = useState<SearchResult[]>([])
|
||||
const [showSearchResults, setShowSearchResults] = useState(false)
|
||||
|
||||
// Notification state
|
||||
const [notifications, setNotifications] = useState<Notification[]>(mockNotifications)
|
||||
const [showNotifications, setShowNotifications] = useState(false)
|
||||
|
||||
// Logout confirmation state
|
||||
const [showLogoutDialog, setShowLogoutDialog] = useState(false)
|
||||
|
||||
// Handle search
|
||||
useEffect(() => {
|
||||
if (searchQuery.trim()) {
|
||||
const filtered = mockSearchData.filter(
|
||||
(item) =>
|
||||
item.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
item.subtitle.toLowerCase().includes(searchQuery.toLowerCase()),
|
||||
)
|
||||
setSearchResults(filtered.slice(0, 8)) // Limit to 8 results
|
||||
setShowSearchResults(true)
|
||||
} else {
|
||||
setSearchResults([])
|
||||
setShowSearchResults(false)
|
||||
}
|
||||
}, [searchQuery])
|
||||
|
||||
// Get unread notification count
|
||||
const unreadCount = notifications.filter((n) => !n.read).length
|
||||
|
||||
// Format timestamp
|
||||
const formatTimestamp = (timestamp: string) => {
|
||||
const now = new Date()
|
||||
const time = new Date(timestamp)
|
||||
const diffInMinutes = Math.floor((now.getTime() - time.getTime()) / (1000 * 60))
|
||||
|
||||
if (diffInMinutes < 1) return "剛剛"
|
||||
if (diffInMinutes < 60) return `${diffInMinutes} 分鐘前`
|
||||
if (diffInMinutes < 1440) return `${Math.floor(diffInMinutes / 60)} 小時前`
|
||||
return `${Math.floor(diffInMinutes / 1440)} 天前`
|
||||
}
|
||||
|
||||
// Get notification icon and color
|
||||
const getNotificationIcon = (type: string) => {
|
||||
switch (type) {
|
||||
case "user_registration":
|
||||
return <UserPlus className="w-4 h-4 text-blue-500" />
|
||||
case "app_submission":
|
||||
return <FileText className="w-4 h-4 text-green-500" />
|
||||
case "competition_update":
|
||||
return <Trophy className="w-4 h-4 text-purple-500" />
|
||||
case "system_alert":
|
||||
return <AlertTriangle className="w-4 h-4 text-orange-500" />
|
||||
case "review_completed":
|
||||
return <Award className="w-4 h-4 text-emerald-500" />
|
||||
default:
|
||||
return <Info className="w-4 h-4 text-gray-500" />
|
||||
}
|
||||
}
|
||||
|
||||
// Get search result icon
|
||||
const getSearchIcon = (type: string) => {
|
||||
switch (type) {
|
||||
case "user":
|
||||
return <User className="w-4 h-4 text-blue-500" />
|
||||
case "app":
|
||||
return <Bot className="w-4 h-4 text-green-500" />
|
||||
case "competition":
|
||||
return <Trophy className="w-4 h-4 text-purple-500" />
|
||||
default:
|
||||
return <Info className="w-4 h-4 text-gray-500" />
|
||||
}
|
||||
}
|
||||
|
||||
// Mark notification as read
|
||||
const markAsRead = (notificationId: string) => {
|
||||
setNotifications((prev) => prev.map((n) => (n.id === notificationId ? { ...n, read: true } : n)))
|
||||
}
|
||||
|
||||
// Mark all notifications as read
|
||||
const markAllAsRead = () => {
|
||||
setNotifications((prev) => prev.map((n) => ({ ...n, read: true })))
|
||||
}
|
||||
|
||||
// Handle logout with improved UX
|
||||
const handleLogout = () => {
|
||||
logout()
|
||||
setShowLogoutDialog(false)
|
||||
|
||||
// Check if this is a popup/new tab opened from main site
|
||||
if (window.opener && !window.opener.closed) {
|
||||
// If opened from another window, close this tab and focus parent
|
||||
window.opener.focus()
|
||||
window.close()
|
||||
} else {
|
||||
// If this is the main window or standalone, redirect to homepage
|
||||
window.location.href = "/"
|
||||
}
|
||||
}
|
||||
|
||||
// Handle search result click
|
||||
const handleSearchResultClick = (result: SearchResult) => {
|
||||
setSearchQuery("")
|
||||
setShowSearchResults(false)
|
||||
|
||||
// Navigate based on result type
|
||||
switch (result.type) {
|
||||
case "user":
|
||||
onPageChange("users")
|
||||
break
|
||||
case "app":
|
||||
onPageChange("apps")
|
||||
break
|
||||
case "competition":
|
||||
onPageChange("competitions")
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
if (!user || user.role !== "admin") {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-100">
|
||||
<div className="text-center space-y-4">
|
||||
<div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto">
|
||||
<AlertTriangle className="w-8 h-8 text-red-600" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-2">存取被拒</h2>
|
||||
<p className="text-gray-600 mb-4">您沒有管理員權限訪問此頁面</p>
|
||||
<div className="space-x-3">
|
||||
<Button onClick={() => (window.location.href = "/")} variant="outline">
|
||||
返回首頁
|
||||
</Button>
|
||||
{window.opener && !window.opener.closed && (
|
||||
<Button
|
||||
onClick={() => {
|
||||
window.opener.focus()
|
||||
window.close()
|
||||
}}
|
||||
variant="default"
|
||||
>
|
||||
關閉頁面
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 flex">
|
||||
{/* Sidebar */}
|
||||
<div className={`${sidebarOpen ? "w-64" : "w-16"} bg-white shadow-lg transition-all duration-300 flex flex-col`}>
|
||||
{/* Logo */}
|
||||
<div className="p-4 border-b">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-8 h-8 bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg flex items-center justify-center">
|
||||
<Settings className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
{sidebarOpen && (
|
||||
<div>
|
||||
<h1 className="font-bold text-gray-900">管理後台</h1>
|
||||
<p className="text-xs text-gray-500">AI 展示平台</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navigation */}
|
||||
<nav className="flex-1 p-4">
|
||||
<ul className="space-y-2">
|
||||
{menuItems.map((item) => {
|
||||
const IconComponent = item.icon
|
||||
const isActive = currentPage === item.id
|
||||
return (
|
||||
<li key={item.id}>
|
||||
<Button
|
||||
variant={isActive ? "default" : "ghost"}
|
||||
className={`w-full h-12 ${sidebarOpen ? "justify-start px-4" : "justify-center px-0"} ${
|
||||
isActive
|
||||
? "bg-gradient-to-r from-blue-600 to-purple-600 text-white"
|
||||
: "text-gray-700 hover:bg-gray-100"
|
||||
}`}
|
||||
onClick={() => onPageChange(item.id)}
|
||||
>
|
||||
<div className="flex items-center justify-center w-5 h-5">
|
||||
<IconComponent className="w-4 h-4" />
|
||||
</div>
|
||||
{sidebarOpen && <span className="ml-3 text-sm font-medium">{item.name}</span>}
|
||||
</Button>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
{/* User Info */}
|
||||
<div className="p-4 border-t">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Avatar className="w-8 h-8">
|
||||
<AvatarFallback className="bg-gradient-to-r from-blue-600 to-purple-600 text-white text-sm">
|
||||
{user.name.charAt(0)}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
{sidebarOpen && (
|
||||
<div className="flex-1">
|
||||
<p className="text-sm font-medium text-gray-900">{user.name}</p>
|
||||
<p className="text-xs text-gray-500">管理員</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="flex-1 flex flex-col">
|
||||
{/* Top Bar */}
|
||||
<header className="bg-white shadow-sm border-b px-6 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-4">
|
||||
<Button variant="ghost" size="sm" onClick={() => setSidebarOpen(!sidebarOpen)}>
|
||||
{sidebarOpen ? <X className="w-4 h-4" /> : <Menu className="w-4 h-4" />}
|
||||
</Button>
|
||||
<h2 className="text-xl font-semibold text-gray-900">
|
||||
{menuItems.find((item) => item.id === currentPage)?.name || "管理後台"}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-4">
|
||||
{/* Search */}
|
||||
<div className="relative">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
|
||||
<Input
|
||||
placeholder="搜尋..."
|
||||
className="pl-10 w-64"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
onFocus={() => searchQuery && setShowSearchResults(true)}
|
||||
onBlur={() => setTimeout(() => setShowSearchResults(false), 200)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Search Results Dropdown */}
|
||||
{showSearchResults && searchResults.length > 0 && (
|
||||
<Card className="absolute top-full mt-1 w-full z-50 shadow-lg">
|
||||
<CardContent className="p-0">
|
||||
<div className="max-h-80 overflow-y-auto">
|
||||
{searchResults.map((result) => (
|
||||
<div
|
||||
key={result.id}
|
||||
className="flex items-center space-x-3 p-3 hover:bg-gray-50 cursor-pointer border-b last:border-b-0"
|
||||
onClick={() => handleSearchResultClick(result)}
|
||||
>
|
||||
{result.avatar ? (
|
||||
<Avatar className="w-8 h-8">
|
||||
<img
|
||||
src={result.avatar || "/placeholder.svg"}
|
||||
alt={result.title}
|
||||
className="w-8 h-8 rounded-full"
|
||||
/>
|
||||
<AvatarFallback>{result.title[0]}</AvatarFallback>
|
||||
</Avatar>
|
||||
) : (
|
||||
<div className="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center">
|
||||
{getSearchIcon(result.type)}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex-1">
|
||||
<p className="text-sm font-medium text-gray-900">{result.title}</p>
|
||||
<p className="text-xs text-gray-500">{result.subtitle}</p>
|
||||
</div>
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{result.type === "user" ? "用戶" : result.type === "app" ? "應用" : "競賽"}
|
||||
</Badge>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* No results message */}
|
||||
{showSearchResults && searchResults.length === 0 && searchQuery.trim() && (
|
||||
<Card className="absolute top-full mt-1 w-full z-50 shadow-lg">
|
||||
<CardContent className="p-4 text-center text-gray-500 text-sm">沒有找到相關結果</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Notifications */}
|
||||
<DropdownMenu open={showNotifications} onOpenChange={setShowNotifications}>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="sm" className="relative">
|
||||
<Bell className="w-4 h-4" />
|
||||
{unreadCount > 0 && (
|
||||
<Badge className="absolute -top-1 -right-1 w-5 h-5 p-0 flex items-center justify-center text-xs bg-red-500">
|
||||
{unreadCount}
|
||||
</Badge>
|
||||
)}
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-80">
|
||||
<DropdownMenuLabel className="flex items-center justify-between">
|
||||
<span>通知</span>
|
||||
{unreadCount > 0 && (
|
||||
<Button variant="ghost" size="sm" onClick={markAllAsRead} className="text-xs">
|
||||
全部標為已讀
|
||||
</Button>
|
||||
)}
|
||||
</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
<div className="max-h-96 overflow-y-auto">
|
||||
{notifications.length === 0 ? (
|
||||
<div className="p-4 text-center text-gray-500">
|
||||
<Bell className="w-8 h-8 mx-auto mb-2 text-gray-300" />
|
||||
<p className="text-sm">暫無通知</p>
|
||||
</div>
|
||||
) : (
|
||||
notifications.map((notification) => (
|
||||
<DropdownMenuItem
|
||||
key={notification.id}
|
||||
className="p-0"
|
||||
onClick={() => markAsRead(notification.id)}
|
||||
>
|
||||
<div className={`w-full p-3 ${!notification.read ? "bg-blue-50" : ""}`}>
|
||||
<div className="flex items-start space-x-3">
|
||||
<div className="flex-shrink-0 mt-0.5">{getNotificationIcon(notification.type)}</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-sm font-medium text-gray-900 truncate">{notification.title}</p>
|
||||
{!notification.read && (
|
||||
<div className="w-2 h-2 bg-blue-500 rounded-full flex-shrink-0 ml-2" />
|
||||
)}
|
||||
</div>
|
||||
<p className="text-sm text-gray-600 mt-1">{notification.message}</p>
|
||||
<p className="text-xs text-gray-400 mt-1">{formatTimestamp(notification.timestamp)}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DropdownMenuItem>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
{notifications.length > 0 && <DropdownMenuSeparator />}
|
||||
<div className="p-2">
|
||||
<Button variant="ghost" size="sm" className="w-full text-xs">
|
||||
查看所有通知
|
||||
</Button>
|
||||
</div>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
|
||||
{/* Logout */}
|
||||
<Button variant="ghost" size="sm" onClick={() => setShowLogoutDialog(true)}>
|
||||
<LogOut className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Page Content */}
|
||||
<main className="flex-1 p-6 overflow-auto">{children}</main>
|
||||
</div>
|
||||
|
||||
{/* Logout Confirmation Dialog */}
|
||||
<Dialog open={showLogoutDialog} onOpenChange={setShowLogoutDialog}>
|
||||
<DialogContent className="max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center space-x-2">
|
||||
<LogOut className="w-5 h-5 text-red-500" />
|
||||
<span>確認登出</span>
|
||||
</DialogTitle>
|
||||
<DialogDescription>您確定要登出管理後台嗎？登出後將返回首頁或關閉此頁面。</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="flex justify-end space-x-3 mt-6">
|
||||
<Button variant="outline" onClick={() => setShowLogoutDialog(false)}>
|
||||
取消
|
||||
</Button>
|
||||
<Button variant="destructive" onClick={handleLogout}>
|
||||
確認登出
|
||||
</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Click outside to close search results */}
|
||||
{showSearchResults && <div className="fixed inset-0 z-40" onClick={() => setShowSearchResults(false)} />}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user