feat(auth): 登录白名单(注册后管理员审批放行 + 全局开关)

用户仍可自助注册,普通账号默认 approved=False(待审批),admin 建号即 True; 存量用户迁移回填 True 避免锁死。系统设置 login_whitelist.enabled 总开关:关= 所有人可登录,开=仅已放行用户(或 admin)可登录。三登录端点建号后、发 token 前经 enforce_user_approved 拦截,未放行返回 403 PENDING_APPROVAL。管理员在「白名单管理」页(设置下拉入口)切总开关 + 逐用户放行。取消放行只拦下次登录。 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-25 16:09:38 +08:00
1 parent f8b40353ef
commit 1d1ab384ef
@@ -0,0 +1,188 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { Navigate } from "react-router-dom";
+import { Info, Search, ShieldCheck, UserCheck } from "lucide-react";
+import { toast } from "sonner";
+
+import { Switch } from "@/components/ui/switch";
+import { getStoredAuth } from "@/core/auth";
+import { useAllUsers, useSetUserApproval } from "@/core/auth/hooks";
+import {
+  useLoginWhitelistEnabled,
+  useSetLoginWhitelistEnabled,
+} from "@/strategy-components/api/login-whitelist";
+
+/**
+ * 登录白名单管理（管理员）。
+ *
+ * 顶部一个「总开关」：关 = 所有人可登录；开 = 仅已放行用户（或 admin）可登录。
+ * 下方列出全部注册用户，逐个放行 / 取消放行。用户仍可自助注册，注册后默认
+ * 「待审批」，开关打开时被拦在登录外，直到管理员在此放行。
+ */
+export default function LoginWhitelistPage() {
+  const isAdmin = getStoredAuth()?.system_role === "admin";
+
+  const { data: enabled, isLoading: loadingSwitch } = useLoginWhitelistEnabled();
+  const setEnabled = useSetLoginWhitelistEnabled();
+
+  const { data: users = [], isLoading: loadingUsers } = useAllUsers(isAdmin);
+  const setApproval = useSetUserApproval();
+
+  const [query, setQuery] = useState("");
+  const [pendingId, setPendingId] = useState<string | null>(null);
+
+  const q = query.trim().toLowerCase();
+  const visibleUsers = useMemo(
+    () => (!q ? users : users.filter((u) => u.email.toLowerCase().includes(q) || u.id.toLowerCase().includes(q))),
+    [users, q],
+  );
+
+  const approvedCount = users.filter((u) => u.approved || u.system_role === "admin").length;
+
+  const handleToggleSwitch = async (next: boolean) => {
+    try {
+      await setEnabled.mutateAsync(next);
+      toast.success(next ? "已启用登录白名单" : "已停用登录白名单（所有人可登录）");
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : "保存失败");
+    }
+  };
+
+  const handleToggleApproval = async (userId: string, next: boolean) => {
+    setPendingId(userId);
+    try {
+      await setApproval.mutateAsync({ userId, approved: next });
+      toast.success(next ? "已放行该用户" : "已取消放行（下次登录被拦）");
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : "保存失败");
+    } finally {
+      setPendingId(null);
+    }
+  };
+
+  if (!isAdmin) return <Navigate to="/page/workspace/chats/new" replace />;
+
+  return (
+    <div className="h-full overflow-auto bg-slate-50/60 px-4 py-6 sm:px-6 lg:px-8">
+      <div className="mx-auto max-w-4xl">
+        {/* 顶部信息卡 + 总开关 */}
+        <div className="relative mb-6 overflow-hidden rounded-3xl border border-slate-200/60 bg-white p-6 shadow-sm md:p-8">
+          <div className="pointer-events-none absolute right-0 top-0 select-none p-8 opacity-[0.03]">
+            <ShieldCheck className="size-44 text-slate-900" />
+          </div>
+          <div className="relative">
+            <div className="mb-4 flex flex-col justify-between gap-4 md:flex-row md:items-center">
+              <div>
+                <span className="mb-3 inline-flex select-none items-center gap-1.5 rounded-full border border-red-100 bg-red-50 px-3 py-1 text-xs font-semibold text-red-600">
+                  <ShieldCheck className="size-3" />
+                  登录访问控制
+                </span>
+                <h1 className="flex items-center gap-3 text-2xl font-bold tracking-tight text-slate-800 md:text-3xl">
+                  白名单管理
+                  <span className="rounded-lg border border-slate-200/60 bg-slate-100 px-2.5 py-0.5 font-mono text-xs font-medium text-slate-500">
+                    {users.length} 用户 / {approvedCount} 可登录
+                  </span>
+                </h1>
+              </div>
+
+              <div className="flex items-center gap-3 rounded-2xl border border-slate-200/60 bg-slate-50/70 px-4 py-3">
+                <div className="text-right">
+                  <div className="text-sm font-semibold text-slate-700">登录白名单</div>
+                  <div className="text-xs text-slate-500">{enabled ? "已启用：仅已放行用户可登录" : "已停用：所有人可登录"}</div>
+                </div>
+                <Switch
+                  checked={Boolean(enabled)}
+                  disabled={loadingSwitch || setEnabled.isPending}
+                  onCheckedChange={handleToggleSwitch}
+                />
+              </div>
+            </div>
+
+            <p className="flex max-w-2xl items-start gap-2.5 rounded-2xl border border-slate-200/50 bg-slate-50/70 p-3.5 text-sm leading-relaxed text-slate-600">
+              <Info className="mt-0.5 size-4 shrink-0 text-slate-400" />
+              <span>
+                用户仍可<strong>自助注册</strong>，注册后默认<strong> 待审批</strong>。开关<strong>关闭</strong>时所有人可正常登录使用；
+                <strong> 开启</strong>后仅<strong>已放行</strong>的用户可登录，其余被拦在登录外，请在下方逐个放行。
+                <strong> 管理员（admin）始终可登录</strong>，不受开关与放行状态影响。
+              </span>
+            </p>
+          </div>
+        </div>
+
+        {/* 搜索栏 */}
+        <div className="mb-6 rounded-2xl border border-slate-200/60 bg-white p-4 shadow-sm md:p-5">
+          <div className="relative w-full md:w-80">
+            <Search className="absolute left-3.5 top-1/2 size-4 -translate-y-1/2 text-slate-400" />
+            <input
+              type="text"
+              placeholder="搜索邮箱 / 用户ID…"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              className="w-full rounded-xl border border-slate-200 bg-slate-50/50 py-2 pl-10 pr-4 text-sm transition-all hover:border-slate-300 focus:border-red-500 focus:outline-none focus:ring-4 focus:ring-red-500/5"
+            />
+          </div>
+        </div>
+
+        {/* 用户列表 */}
+        <div className="overflow-hidden rounded-2xl border border-slate-200/60 bg-white shadow-sm">
+          <div className="grid grid-cols-[1fr_auto_auto] items-center gap-3 border-b border-slate-200/60 bg-slate-50/70 px-4 py-2.5 text-xs font-semibold text-slate-500">
+            <span>用户</span>
+            <span className="px-1 text-center">问答</span>
+            <span className="px-1 text-center">放行</span>
+          </div>
+
+          {loadingUsers ? (
+            <div className="px-4 py-12 text-center text-sm text-slate-400">加载中…</div>
+          ) : visibleUsers.length === 0 ? (
+            <div className="px-4 py-12 text-center text-sm text-slate-400">
+              {users.length === 0 ? "暂无注册用户" : "没有匹配的用户"}
+            </div>
+          ) : (
+            <ul className="divide-y divide-slate-100">
+              {visibleUsers.map((user) => {
+                const isUserAdmin = user.system_role === "admin";
+                const allowed = user.approved || isUserAdmin;
+                return (
+                  <li
+                    key={user.id}
+                    className="grid grid-cols-[1fr_auto_auto] items-center gap-3 px-4 py-3 transition-colors hover:bg-slate-50/60"
+                  >
+                    <div className="min-w-0">
+                      <div className="flex items-center gap-2">
+                        <span className="truncate text-sm font-medium text-slate-800">{user.email}</span>
+                        {isUserAdmin ? (
+                          <span className="inline-flex items-center gap-1 rounded-md border border-amber-200 bg-amber-50 px-1.5 py-0.5 text-[11px] font-semibold text-amber-600">
+                            <UserCheck className="size-3" />
+                            管理员
+                          </span>
+                        ) : allowed ? (
+                          <span className="rounded-md border border-emerald-200 bg-emerald-50 px-1.5 py-0.5 text-[11px] font-semibold text-emerald-600">
+                            已放行
+                          </span>
+                        ) : (
+                          <span className="rounded-md border border-slate-200 bg-slate-50 px-1.5 py-0.5 text-[11px] font-semibold text-slate-500">
+                            待审批
+                          </span>
+                        )}
+                      </div>
+                      <div className="truncate font-mono text-xs text-slate-400">{user.id}</div>
+                    </div>
+                    <div className="px-1 text-center text-sm tabular-nums text-slate-500">{user.qa_count}</div>
+                    <div className="px-1">
+                      <Switch
+                        checked={allowed}
+                        disabled={isUserAdmin || (setApproval.isPending && pendingId === user.id)}
+                        onCheckedChange={(v) => handleToggleApproval(user.id, v)}
+                      />
+                    </div>
+                  </li>
+                );
+              })}
+            </ul>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
@@ -39,6 +39,7 @@ import LightAppIframeView from "./LightAppIframeView";
 import LightAppListPage from "./LightAppListPage";
 import LightAppManagementPage from "./LightAppManagementPage";
 import MenuManagementPage from "./MenuManagementPage";
+import LoginWhitelistPage from "./LoginWhitelistPage";
 import SensitiveWordsPage from "./SensitiveWordsPage";
 import SkillAddressesPage from "./SkillAddressesPage";
 import TaskButtonsPage from "./TaskButtonsPage";
@@ -395,6 +396,16 @@ export default function StrategyRoutes() {
                )
              }
            />
+            <Route
+              path="admin/login-whitelist"
+              element={
+                getStoredAuth()?.system_role === "admin" ? (
+                  <LoginWhitelistPage />
+                ) : (
+                  <Navigate to="/page/workspace/chats/new" replace />
+                )
+              }
+            />
            <Route
              path="admin/roundtable-diagnostics"
              element={