Initial commit

src/pages/auth/index.tsx

@@ -0,0 +1,47 @@
+import { useEffect } from "react"
+import { useLayoutStore } from "./store"
+import { useShallow } from "zustand/shallow"
+import { LogIn, LockKeyhole } from "lucide-react"
+
+type Props = {
+  children?: React.ReactNode,
+  mustLogin?: boolean,
+}
+export const AuthProvider = ({ children, mustLogin }: Props) => {
+  const store = useLayoutStore(useShallow(state => ({
+    init: state.init,
+    me: state.me,
+  })));
+  useEffect(() => {
+    store.init()
+  }, [])
+  const loginUrl = '/root/login/?redirect=' + encodeURIComponent(window.location.href);
+  if (mustLogin && !store.me) {
+    return (
+      <div className="w-full h-full min-h-screen flex items-center justify-center bg-background">
+        <div className="flex flex-col items-center gap-6 p-10 rounded-2xl border border-border bg-card shadow-lg max-w-sm w-full mx-4">
+          <div className="flex items-center justify-center w-16 h-16 rounded-full bg-muted">
+            <LockKeyhole className="w-8 h-8 text-muted-foreground" />
+          </div>
+          <div className="flex flex-col items-center gap-2 text-center">
+            <h2 className="text-xl font-semibold text-foreground">需要登录</h2>
+            <p className="text-sm text-muted-foreground">请先登录以继续访问此页面</p>
+          </div>
+          <div
+            className="inline-flex items-center justify-center gap-2 w-full px-6 py-2.5 rounded-lg bg-foreground text-background text-sm font-medium transition-opacity hover:opacity-80 active:opacity-70"
+            onClick={() => {
+              window.open(loginUrl, '_self')
+            }}
+          >
+            <LogIn className="w-4 h-4" />
+            立即登录
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  return <>
+    {children}
+  </>
+}