feat: 优化web

2026-04-23 18:58:13 +08:00
commit 544a2f3428
160 changed files with 27327 additions and 0 deletions
@@ -0,0 +1,128 @@
+'use client';
+
+import Link from 'next/link';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { Suspense, useEffect, useState } from 'react';
+import { safeReturnPath } from '@/lib/navigation/safe-return';
+import { useAuthStore } from '@/stores/auth-store';
+
+function LoginForm() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const accessToken = useAuthStore((s) => s.accessToken);
+  const login = useAuthStore((s) => s.login);
+  const [mounted, setMounted] = useState(false);
+  const [user, setUser] = useState('');
+  const [pass, setPass] = useState('');
+  const [tenant, setTenant] = useState('');
+  const [err, setErr] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  useEffect(() => {
+    if (!mounted || !accessToken) {
+      return;
+    }
+    const next = safeReturnPath(searchParams.get('from'), '/dashboard');
+    router.replace(next);
+  }, [mounted, accessToken, router, searchParams]);
+
+  if (!mounted) {
+    return (
+      <main className="flex min-h-screen items-center justify-center text-sm text-neutral-500">
+        加载中…
+      </main>
+    );
+  }
+
+  if (accessToken) {
+    return (
+      <main className="flex min-h-screen items-center justify-center text-sm text-neutral-500">
+        正在进入后台…
+      </main>
+    );
+  }
+
+  async function onSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setErr(null);
+    setLoading(true);
+    try {
+      await login(user, pass, tenant || undefined);
+      const next = safeReturnPath(searchParams.get('from'), '/dashboard');
+      router.replace(next);
+    } catch (ex) {
+      setErr(ex instanceof Error ? ex.message : String(ex));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-center gap-6 p-6">
+      <form
+        onSubmit={onSubmit}
+        className="w-full max-w-sm rounded-lg border border-neutral-200 bg-white p-6 shadow-sm"
+      >
+        <h1 className="text-lg font-medium">登录</h1>
+        <label className="mt-4 block text-sm">
+          <span className="text-neutral-600">用户名</span>
+          <input
+            className="mt-1 w-full rounded border border-neutral-300 px-2 py-1"
+            value={user}
+            onChange={(e) => setUser(e.target.value)}
+            autoComplete="username"
+            required
+          />
+        </label>
+        <label className="mt-3 block text-sm">
+          <span className="text-neutral-600">密码</span>
+          <input
+            type="password"
+            className="mt-1 w-full rounded border border-neutral-300 px-2 py-1"
+            value={pass}
+            onChange={(e) => setPass(e.target.value)}
+            autoComplete="current-password"
+            required
+          />
+        </label>
+        <label className="mt-3 block text-sm">
+          <span className="text-neutral-600">租户 ID（可空）</span>
+          <input
+            className="mt-1 w-full rounded border border-neutral-300 px-2 py-1"
+            value={tenant}
+            onChange={(e) => setTenant(e.target.value)}
+          />
+        </label>
+        {err ? <p className="mt-3 text-sm text-red-600">{err}</p> : null}
+        <button
+          type="submit"
+          disabled={loading}
+          className="mt-4 w-full rounded bg-neutral-900 py-2 text-white disabled:opacity-50"
+        >
+          {loading ? '提交中…' : '登录'}
+        </button>
+      </form>
+      <Link href="/" className="text-sm text-blue-600">
+        返回首页
+      </Link>
+    </main>
+  );
+}
+
+export default function LoginPage() {
+  return (
+    <Suspense
+      fallback={
+        <main className="flex min-h-screen items-center justify-center text-sm text-neutral-500">
+          加载中…
+        </main>
+      }
+    >
+      <LoginForm />
+    </Suspense>
+  );
+}