1459

write-server/src/components/AppShell.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import Sidebar from "@/components/Sidebar";
+import AuthGuard from "@/components/AuthGuard";
+
+export default function AppShell({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname();
+  const isLoginPage = pathname === "/login";
+
+  if (isLoginPage) {
+    return <AuthGuard>{children}</AuthGuard>;
+  }
+
+  return (
+    <AuthGuard>
+      <Sidebar />
+      <main className="flex-1 overflow-auto pt-12 md:pt-0 h-full">
+        {children}
+      </main>
+    </AuthGuard>
+  );
+}

write-server/src/components/AuthGuard.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useRouter, usePathname } from "next/navigation";
+
+export default function AuthGuard({ children }: { children: React.ReactNode }) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const [checked, setChecked] = useState(false);
+
+  useEffect(() => {
+    // 登录页不需要检查
+    if (pathname === "/login") {
+      setChecked(true);
+      return;
+    }
+
+    const token = localStorage.getItem("wauth_token");
+    if (!token) {
+      router.replace("/login");
+      return;
+    }
+
+    // 验证 token 是否有效
+    fetch("/api/auth/login", {
+      headers: { "X-Auth-User": token },
+    })
+      .then(r => {
+        if (!r.ok) {
+          localStorage.removeItem("wauth_token");
+          localStorage.removeItem("wauth_user");
+          router.replace("/login");
+        } else {
+          setChecked(true);
+          // 注册 Service Worker
+          if ("serviceWorker" in navigator) {
+            navigator.serviceWorker.register("/sw.js").then(reg => {
+              const sw = reg.active || reg.waiting || reg.installing;
+              if (sw) sw.postMessage({ type: "SET_TOKEN", token });
+            });
+          }
+        }
+      })
+      .catch(() => {
+        setChecked(true); // 网络错误时也显示页面
+      });
+  }, [pathname, router]);
+
+  if (!checked) {
+    return (
+      <div className="h-full flex items-center justify-center">
+        <div className="text-muted text-sm">加载中...</div>
+      </div>
+    );
+  }
+
+  return <>{children}</>;
+}

write-server/src/components/LayoutWrapper.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+
+export default function LayoutWrapper({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname();
+  const isLoginPage = pathname === "/login";
+
+  if (isLoginPage) {
+    return <>{children}</>;
+  }
+
+  // 动态导入 Sidebar 避免在登录页加载
+  const Sidebar = require("@/components/Sidebar").default;
+
+  return (
+    <>
+      <Sidebar />
+      <main className="flex-1 overflow-auto pt-12 md:pt-0 h-full">
+        {children}
+      </main>
+    </>
+  );
+}

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>
     </>