1459

write-server/src/components/Sidebar.tsx

@@ -3,26 +3,36 @@
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useEffect, useState } from "react";
-import { FileText, PenSquare, MessageSquare, Trash2, Rss, Link2, MessageCircle, Image, Menu, X, Bot } from "lucide-react";
+import { FileText, PenSquare, MessageSquare, Trash2, Rss, Link2, MessageCircle, Image, Menu, X, Bot, LogOut, Users } from "lucide-react";
 import ThemeToggle from "./ThemeToggle";
 
 const navItems = [
-  { href: "/", label: "文章", icon: FileText },
-  { href: "/edit", label: "撰写", icon: PenSquare },
-  { href: "/comments", label: "评论", icon: MessageSquare },
-  { href: "/feeds", label: "订阅源", icon: Rss },
-  { href: "/links", label: "友链", icon: Link2 },
-  { href: "/images", label: "图片", icon: Image },
-  { href: "/wechat", label: "公众号", icon: MessageCircle },
-  { href: "/recycle", label: "回收站", icon: Trash2 },
-  { href: "/bot", label: "Bot", icon: Bot },
+  { href: "/", label: "文章", icon: FileText, roles: ["admin", "user"] },
+  { href: "/edit", label: "撰写", icon: PenSquare, roles: ["admin", "user"] },
+  { href: "/comments", label: "评论", icon: MessageSquare, roles: ["admin", "user"] },
+  { href: "/feeds", label: "订阅源", icon: Rss, roles: ["admin"] },
+  { href: "/links", label: "友链", icon: Link2, roles: ["admin"] },
+  { href: "/images", label: "图片", icon: Image, roles: ["admin", "user"] },
+  { href: "/wechat", label: "公众号", icon: MessageCircle, roles: ["admin"] },
+  { href: "/recycle", label: "回收站", icon: Trash2, roles: ["admin", "user"] },
+  { href: "/bot", label: "Bot", icon: Bot, roles: ["admin"] },
 ];
 
 export default function Sidebar() {
   const pathname = usePathname();
   const [open, setOpen] = useState(false);
+  const [isAdmin, setIsAdmin] = useState(false);
+
+  const [userRole, setUserRole] = useState("user");
 
   useEffect(() => { setOpen(false); }, [pathname]);
+  useEffect(() => {
+    try {
+      const u = JSON.parse(localStorage.getItem("wauth_user") || "{}");
+      setIsAdmin(u.role === "admin");
+      setUserRole(u.role || "user");
+    } catch {}
+  }, []);
 
   useEffect(() => {
     if (!open) return;
@@ -63,7 +73,7 @@ export default function Sidebar() {
 
       {/* Nav */}
       <nav className="flex-1 px-2.5 py-3 space-y-0.5">
-        {navItems.map((item) => {
+        {navItems.filter(item => item.roles.includes(userRole)).map((item) => {
           const active = isActive(item.href);
           return (
             <Link
@@ -80,12 +90,44 @@ export default function Sidebar() {
             </Link>
           );
         })}
+        {isAdmin && (
+          <Link
+            href="/users"
+            className={`flex items-center gap-2.5 px-3 py-2 rounded-md text-[13px] transition-colors ${
+              isActive("/users")
+                ? "bg-accent text-white font-medium"
+                : "text-text/80 hover:bg-bg hover:text-accent"
+            }`}
+          >
+            <Users size={15} strokeWidth={isActive("/users") ? 2.5 : 1.8} />
+            用户管理
+          </Link>
+        )}
       </nav>
 
       {/* Footer */}
       <div className="px-4 py-3 border-t border-line">
         <ThemeToggle />
-        <p className="text-[10px] text-muted/50">localhost:8016</p>
+        <div className="flex items-center justify-between mt-2">
+          <p className="text-[11px] text-muted/70">
+            {(() => { try { return JSON.parse(localStorage.getItem("wauth_user") || "{}").name || "未登录"; } catch { return "未登录"; } })()}
+          </p>
+          <button
+            type="button"
+            onClick={() => {
+              localStorage.removeItem("wauth_token");
+              localStorage.removeItem("wauth_user");
+              if (navigator.serviceWorker?.controller) {
+                navigator.serviceWorker.controller.postMessage({ type: "CLEAR_TOKEN" });
+              }
+              location.href = "/login";
+            }}
+            className="p-1 rounded hover:bg-bg text-muted hover:text-text transition-colors"
+            title="退出登录"
+          >
+            <LogOut size={13} />
+          </button>
+        </div>
       </div>
     </aside>
     </>