lanhu/admin
2
0
Fork 0
Code Issues Actions Packages Releases 11 Activity

完善路由导航与鉴权功能

Browse Source 
Signed-off-by: luorijun <luorijun@outlook.com>
This commit is contained in:
luorijun
2025-12-29 14:37:03 +08:00
parent bb8aec8ce5
commit f950906f00
8 changed files with 601 additions and 264 deletions
Download Patch File Download Diff File Expand all files Collapse all files

272
src/app/(root)/appbar.tsx
View File

@@ -1,24 +1,40 @@
'use client'
import {useState, useRef, useEffect} from 'react'
import Image from 'next/image'
import Link from 'next/link'
import {usePathname} from 'next/navigation'
"use client"
import Image from "next/image"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { useEffect, useRef, useState } from "react"
export type AppbarProps = {}
export default function Appbar(props: AppbarProps) {
export default function Appbar() {
const [currentUser] = useState({
name: '张三',
avatar: '/avatar.png',
role: '管理员',
name: "张三",
avatar: "/avatar.png",
role: "管理员",
})
const [showDropdown, setShowDropdown] = useState(false)
const [showNotifications, setShowNotifications] = useState(false)
const [notifications] = useState([
{id: 1, title: '系统通知', content: '您有新的待审核内容', time: '10分钟前', read: false},
{id: 2, title: '安全提醒', content: '您的账号于昨天登录了新设备', time: '1小时前', read: true},
{id: 3, title: '系统更新', content: '系统将在今晚进行例行维护', time: '2小时前', read: true},
{
id: 1,
title: "系统通知",
content: "您有新的待审核内容",
time: "10分钟前",
read: false,
},
{
id: 2,
title: "安全提醒",
content: "您的账号于昨天登录了新设备",
time: "1小时前",
read: true,
},
{
id: 3,
title: "系统更新",
content: "系统将在今晚进行例行维护",
time: "2小时前",
read: true,
},
])
const pathname = usePathname()
@@ -28,28 +44,34 @@ export default function Appbar(props: AppbarProps) {
// 处理点击外部关闭下拉菜单
useEffect(() => {
function handleClickOutside(event: MouseEvent) {
if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
if (
dropdownRef.current &&
!dropdownRef.current.contains(event.target as Node)
) {
setShowDropdown(false)
}
if (notificationRef.current && !notificationRef.current.contains(event.target as Node)) {
if (
notificationRef.current &&
!notificationRef.current.contains(event.target as Node)
) {
setShowNotifications(false)
}
}
document.addEventListener('mousedown', handleClickOutside)
return () => document.removeEventListener('mousedown', handleClickOutside)
document.addEventListener("mousedown", handleClickOutside)
return () => document.removeEventListener("mousedown", handleClickOutside)
}, [])
// 根据路径生成面包屑
const generateBreadcrumbs = () => {
const paths = pathname.split('/').filter(Boolean)
const paths = pathname.split("/").filter(Boolean)
const breadcrumbs = [
{path: '/', label: '首页'},
{ path: "/", label: "首页" },
...paths.map((path, index) => {
const url = `/${paths.slice(0, index + 1).join('/')}`
const url = `/${paths.slice(0, index + 1).join("/")}`
const label = getBreadcrumbLabel(path)
return {path: url, label}
return { path: url, label }
}),
]
@@ -58,14 +80,14 @@ export default function Appbar(props: AppbarProps) {
const getBreadcrumbLabel = (path: string) => {
const labels: Record<string, string> = {
'dashboard': '控制台',
'content': '内容管理',
'articles': '文章管理',
'media': '媒体库',
'users': '用户管理',
'roles': '角色权限',
'settings': '系统设置',
'logs': '系统日志',
dashboard: "控制台",
content: "内容管理",
articles: "文章管理",
media: "媒体库",
users: "用户管理",
roles: "角色权限",
settings: "系统设置",
logs: "系统日志",
}
return labels[path] || path
@@ -81,15 +103,26 @@ export default function Appbar(props: AppbarProps) {
{breadcrumbs.map((crumb, index) => (
<div key={crumb.path} className="flex items-center">
{index > 0 && (
<svg className="mx-2 h-4 w-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7"/>
<svg
className="mx-2 h-4 w-4 text-gray-400"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M9 5l7 7-7 7"
/>
</svg>
)}
<Link
href={crumb.path}
className={index === breadcrumbs.length - 1
? 'text-gray-800 font-medium'
: 'text-gray-500 hover:text-gray-700'
className={
index === breadcrumbs.length - 1
? "text-gray-800 font-medium"
: "text-gray-500 hover:text-gray-700"
}
>
{crumb.label}
@@ -108,11 +141,17 @@ export default function Appbar(props: AppbarProps) {
className="pl-10 pr-4 py-2 bg-gray-100 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent w-56"
/>
<svg
className="h-4 w-4 text-gray-400 absolute left-3 top-2.5" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
className="h-4 w-4 text-gray-400 absolute left-3 top-2.5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
/>
</svg>
</div>
@@ -123,15 +162,23 @@ export default function Appbar(props: AppbarProps) {
className="relative p-2 rounded-full text-gray-600 hover:bg-gray-100 hover:text-gray-800 transition-colors"
aria-label="通知"
>
<svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<svg
className="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
/>
</svg>
{unreadCount > 0 && (
<span
className="absolute top-1 right-1 h-4 w-4 text-xs flex items-center justify-center rounded-full bg-red-500 text-white">{unreadCount}</span>
<span className="absolute top-1 right-1 h-4 w-4 text-xs flex items-center justify-center rounded-full bg-red-500 text-white">
{unreadCount}
</span>
)}
</button>
@@ -147,25 +194,39 @@ export default function Appbar(props: AppbarProps) {
<div className="max-h-72 overflow-y-auto">
{notifications.length > 0 ? (
notifications.map((notification) => (
notifications.map(notification => (
<div
key={notification.id}
className={`px-4 py-3 border-b border-gray-100 hover:bg-gray-50 ${
notification.read ? 'bg-white' : 'bg-blue-50'
notification.read ? "bg-white" : "bg-blue-50"
}`}
>
<div className="flex justify-between items-start">
<h4 className="text-sm font-medium text-gray-800">{notification.title}</h4>
<span className="text-xs text-gray-500">{notification.time}</span>
<h4 className="text-sm font-medium text-gray-800">
{notification.title}
</h4>
<span className="text-xs text-gray-500">
{notification.time}
</span>
</div>
<p className="text-xs text-gray-600 mt-1">{notification.content}</p>
<p className="text-xs text-gray-600 mt-1">
{notification.content}
</p>
</div>
))
) : (
<div className="py-8 px-4 text-center">
<svg className="w-12 h-12 text-gray-300 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1}
d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"
<svg
className="w-12 h-12 text-gray-300 mx-auto"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1}
d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"
/>
</svg>
<p className="mt-2 text-sm text-gray-500">暂无通知</p>
@@ -174,7 +235,10 @@ export default function Appbar(props: AppbarProps) {
</div>
<div className="border-t border-gray-100 p-2 text-center">
<Link href="/notifications" className="text-xs text-blue-600 hover:text-blue-800">
<Link
href="/notifications"
className="text-xs text-blue-600 hover:text-blue-800"
>
查看全部通知
</Link>
</div>
@@ -192,27 +256,37 @@ export default function Appbar(props: AppbarProps) {
className="flex items-center space-x-2 rounded-lg hover:bg-gray-100 p-2 transition-colors"
aria-label="用户菜单"
>
<div
className="h-8 w-8 rounded-full bg-blue-100 text-blue-800 flex items-center justify-center overflow-hidden border-2 border-white shadow-sm">
<div className="h-8 w-8 rounded-full bg-blue-100 text-blue-800 flex items-center justify-center overflow-hidden border-2 border-white shadow-sm">
<Image
src={currentUser.avatar}
alt="用户头像"
width={32}
height={32}
onError={(e) => {
onError={e => {
const target = e.target as HTMLImageElement
target.style.display = 'none'
target.style.display = "none"
target.parentElement!.innerHTML = currentUser.name.charAt(0)
}}
/>
</div>
<div className="hidden md:block text-left">
<p className="text-sm font-medium text-gray-800">{currentUser.name}</p>
<p className="text-sm font-medium text-gray-800">
{currentUser.name}
</p>
<p className="text-xs text-gray-500">{currentUser.role}</p>
</div>
<svg
className="h-4 w-4 text-gray-400 hidden md:block" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7"/>
className="h-4 w-4 text-gray-400 hidden md:block"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M19 9l-7 7-7-7"
/>
</svg>
</button>
@@ -225,44 +299,88 @@ export default function Appbar(props: AppbarProps) {
</div>
<div className="py-1">
<Link href="/profile" className="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
<svg className="mr-3 h-5 w-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<Link
href="/profile"
className="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
>
<svg
className="mr-3 h-5 w-5 text-gray-500"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
/>
</svg>
个人资料
</Link>
<Link
href="/settings/account"
className="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
<svg className="mr-3 h-5 w-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
className="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
>
<svg
className="mr-3 h-5 w-5 text-gray-500"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
/>
<path
strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
/>
</svg>
账号设置
</Link>
<Link
href="/system/help" className="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
<svg className="mr-3 h-5 w-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
href="/system/help"
className="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
>
<svg
className="mr-3 h-5 w-5 text-gray-500"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
帮助中心
</Link>
</div>
<div className="border-t border-gray-100 mt-1">
<Link href="/login" className="flex items-center px-4 py-2 text-sm text-red-600 hover:bg-gray-100">
<svg className="mr-3 h-5 w-5 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<Link
href="/login"
className="flex items-center px-4 py-2 text-sm text-red-600 hover:bg-gray-100"
>
<svg
className="mr-3 h-5 w-5 text-red-500"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/>
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
/>
</svg>
退出登录
</Link>