初始化管理后台仓库

src/app/(root)/appbar.tsx

@@ -0,0 +1,276 @@
+'use client'
+import {useState, useRef, useEffect} from 'react'
+import Image from 'next/image'
+import Link from 'next/link'
+import {usePathname} from 'next/navigation'
+
+export type AppbarProps = {}
+
+export default function Appbar(props: AppbarProps) {
+  const [currentUser] = useState({
+    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},
+  ])
+
+  const pathname = usePathname()
+  const dropdownRef = useRef<HTMLDivElement>(null)
+  const notificationRef = useRef<HTMLDivElement>(null)
+
+  // 处理点击外部关闭下拉菜单
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setShowDropdown(false)
+      }
+      if (notificationRef.current && !notificationRef.current.contains(event.target as Node)) {
+        setShowNotifications(false)
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => document.removeEventListener('mousedown', handleClickOutside)
+  }, [])
+
+  // 根据路径生成面包屑
+  const generateBreadcrumbs = () => {
+    const paths = pathname.split('/').filter(Boolean)
+
+    const breadcrumbs = [
+      {path: '/', label: '首页'},
+      ...paths.map((path, index) => {
+        const url = `/${paths.slice(0, index + 1).join('/')}`
+        const label = getBreadcrumbLabel(path)
+        return {path: url, label}
+      }),
+    ]
+
+    return breadcrumbs
+  }
+
+  const getBreadcrumbLabel = (path: string) => {
+    const labels: Record<string, string> = {
+      'dashboard': '控制台',
+      'content': '内容管理',
+      'articles': '文章管理',
+      'media': '媒体库',
+      'users': '用户管理',
+      'roles': '角色权限',
+      'settings': '系统设置',
+      'logs': '系统日志',
+    }
+
+    return labels[path] || path
+  }
+
+  const breadcrumbs = generateBreadcrumbs()
+  const unreadCount = notifications.filter(n => !n.read).length
+
+  return (
+    <header className="bg-white h-16 border-b border-gray-200 flex items-center justify-between px-6">
+      {/* 面包屑导航 */}
+      <div className="flex items-center text-sm">
+        {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>
+            )}
+            <Link
+              href={crumb.path}
+              className={index === breadcrumbs.length - 1
+                ? 'text-gray-800 font-medium'
+                : 'text-gray-500 hover:text-gray-700'
+              }
+            >
+              {crumb.label}
+            </Link>
+          </div>
+        ))}
+      </div>
+
+      {/* 右侧用户信息和工具栏 */}
+      <div className="flex items-center space-x-4">
+        {/* 搜索框 */}
+        <div className="hidden md:block relative">
+          <input
+            type="text"
+            placeholder="搜索..."
+            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">
+            <path
+              strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+              d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
+          </svg>
+        </div>
+
+        {/* 通知图标 */}
+        <div className="relative" ref={notificationRef}>
+          <button
+            onClick={() => setShowNotifications(!showNotifications)}
+            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">
+              <path
+                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>
+            )}
+          </button>
+
+          {/* 通知下拉面板 */}
+          {showNotifications && (
+            <div className="absolute right-0 mt-2 w-80 bg-white rounded-md shadow-lg py-1 z-20 border border-gray-200">
+              <div className="px-4 py-2 border-b border-gray-100 flex justify-between items-center">
+                <h3 className="font-medium text-gray-800">通知</h3>
+                <button className="text-xs text-blue-600 hover:text-blue-800">
+                  全部标为已读
+                </button>
+              </div>
+
+              <div className="max-h-72 overflow-y-auto">
+                {notifications.length > 0 ? (
+                  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'
+                      }`}
+                    >
+                      <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>
+                      </div>
+                      <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>
+                    <p className="mt-2 text-sm text-gray-500">暂无通知</p>
+                  </div>
+                )}
+              </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>
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* 分隔线 */}
+        <div className="hidden md:block h-8 w-px bg-gray-200"></div>
+
+        {/* 用户下拉菜单 */}
+        <div className="relative" ref={dropdownRef}>
+          <button
+            onClick={() => setShowDropdown(!showDropdown)}
+            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">
+              <Image
+                src={currentUser.avatar}
+                alt="用户头像"
+                width={32}
+                height={32}
+                onError={(e) => {
+                  const target = e.target as HTMLImageElement
+                  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-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"/>
+            </svg>
+          </button>
+
+          {/* 用户下拉内容 */}
+          {showDropdown && (
+            <div className="absolute right-0 mt-2 w-56 bg-white rounded-lg shadow-lg py-2 z-20 border border-gray-200">
+              <div className="px-4 py-2 border-b border-gray-100 md:hidden">
+                <p className="font-medium text-gray-800">{currentUser.name}</p>
+                <p className="text-xs text-gray-500">{currentUser.role}</p>
+              </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">
+                    <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"/>
+                  </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">
+                    <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"/>
+                    <path
+                      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">
+                    <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"/>
+                  </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">
+                    <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"/>
+                  </svg>
+                  退出登录
+                </Link>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </header>
+  )
+}