oauth

frontend/components/common/settings/auth-source-modal.tsx

@@ -0,0 +1,166 @@
+"use client"
+
+import {useEffect, useState} from "react"
+import {toast} from "sonner"
+import {Button} from "@/components/ui/button"
+import {Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle} from "@/components/ui/dialog"
+import {Input} from "@/components/ui/input"
+import {Label} from "@/components/ui/label"
+import {Switch} from "@/components/ui/switch"
+import {AdminService} from "@/lib/services"
+import type {AuthSource, AuthSourceRequest} from "@/lib/services/admin"
+
+const emptyForm: AuthSourceRequest = {
+  name: "",
+  type: "oidc",
+  display_name: "",
+  is_active: false,
+  client_id: "",
+  client_secret: "",
+  openid_discovery_url: "",
+  scopes: "openid profile email",
+  icon_url: "",
+}
+
+export function AuthSourceModal({
+  isOpen,
+  source,
+  onClose,
+  onChanged,
+}: {
+  isOpen: boolean
+  source: AuthSource | null
+  onClose: () => void
+  onChanged: () => Promise<void>
+}) {
+  const [form, setForm] = useState<AuthSourceRequest>(emptyForm)
+  const [saving, setSaving] = useState(false)
+
+  useEffect(() => {
+    if (isOpen) {
+      if (source) {
+        setForm({
+          name: source.name,
+          type: source.type,
+          display_name: source.display_name,
+          is_active: source.is_active,
+          client_id: source.client_id,
+          client_secret: "",
+          openid_discovery_url: source.openid_discovery_url,
+          scopes: source.scopes || "openid profile email",
+          icon_url: source.icon_url,
+        })
+      } else {
+        setForm(emptyForm)
+      }
+    } else {
+      setForm(emptyForm)
+      setSaving(false)
+    }
+  }, [isOpen, source])
+
+  const saveSource = async () => {
+    setSaving(true)
+    try {
+      if (source) {
+        await AdminService.updateAuthSource(source.id, form)
+      } else {
+        await AdminService.createAuthSource(form)
+      }
+      await onChanged()
+      toast.success("认证源已保存")
+      onClose()
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "保存认证源失败")
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className="max-w-xl">
+        <DialogHeader>
+          <DialogTitle>{source ? "编辑认证源" : "新增认证源"}</DialogTitle>
+          <DialogDescription>
+            {source ? "修改系统自定义的 OIDC 认证源参数。" : "配置新的自定义 OIDC 认证源。"}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="grid gap-4 md:grid-cols-2 pt-2">
+          <div className="space-y-2">
+            <Label>标识符 (英文名称)</Label>
+            <Input 
+              value={form.name} 
+              disabled={!!source}
+              onChange={(e) => setForm((prev) => ({ ...prev, name: e.target.value }))} 
+              placeholder="例如: github"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label>展示名称</Label>
+            <Input 
+              value={form.display_name} 
+              onChange={(e) => setForm((prev) => ({ ...prev, display_name: e.target.value }))} 
+              placeholder="例如: GitHub 登录"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label>Client ID</Label>
+            <Input 
+              value={form.client_id} 
+              onChange={(e) => setForm((prev) => ({ ...prev, client_id: e.target.value }))} 
+            />
+          </div>
+          <div className="space-y-2">
+            <Label>Client Secret</Label>
+            <Input 
+              value={form.client_secret} 
+              onChange={(e) => setForm((prev) => ({ ...prev, client_secret: e.target.value }))} 
+              placeholder={source ? "留空则保留原值" : ""} 
+            />
+          </div>
+          <div className="space-y-2 md:col-span-2">
+            <Label>Discovery URL (OIDC 发行方 URL)</Label>
+            <Input 
+              value={form.openid_discovery_url} 
+              onChange={(e) => setForm((prev) => ({ ...prev, openid_discovery_url: e.target.value }))} 
+              placeholder="https://..."
+            />
+          </div>
+          <div className="space-y-2">
+            <Label>Scopes</Label>
+            <Input 
+              value={form.scopes} 
+              onChange={(e) => setForm((prev) => ({ ...prev, scopes: e.target.value }))} 
+            />
+          </div>
+          <div className="space-y-2">
+            <Label>图标 URL (可选)</Label>
+            <Input 
+              value={form.icon_url} 
+              onChange={(e) => setForm((prev) => ({ ...prev, icon_url: e.target.value }))} 
+              placeholder="https://... 或留空"
+            />
+          </div>
+          <div className="flex items-center justify-between rounded-xl border border-dashed p-3 md:col-span-2 bg-muted/10">
+            <div>
+              <div className="font-medium text-sm">启用认证源</div>
+              <div className="text-xs text-muted-foreground">启用后会立即显示在登录页和账号绑定中。</div>
+            </div>
+            <Switch checked={form.is_active} onCheckedChange={(checked) => setForm((prev) => ({ ...prev, is_active: checked }))} />
+          </div>
+          <div className="md:col-span-2 flex justify-end gap-2 pt-2 border-t mt-2">
+            <Button variant="outline" type="button" onClick={onClose}>
+              取消
+            </Button>
+            <Button type="button" onClick={saveSource} disabled={saving} className="bg-indigo-600 hover:bg-indigo-700 text-white shadow-md shadow-indigo-600/10">
+              {saving ? "保存中..." : "保存"}
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
+

frontend/components/common/settings/profile.tsx

@@ -2,26 +2,60 @@
 
 import * as React from "react"
 import Link from "next/link"
-import { motion, useAnimation } from "motion/react"
-import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar"
-import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@/components/ui/breadcrumb"
-import { useUser } from "@/contexts/user-context"
-import { Shield } from "lucide-react"
+import {motion, useAnimation} from "motion/react"
+import {useMutation, useQuery, useQueryClient} from "@tanstack/react-query"
+import {Avatar, AvatarFallback, AvatarImage} from "@/components/ui/avatar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator
+} from "@/components/ui/breadcrumb"
+import {useUser} from "@/contexts/user-context"
+import {ArrowRight, Link2, Loader2, Shield, Unlink} from "lucide-react"
+import {Button} from "@/components/ui/button"
+import {Separator} from "@/components/ui/separator"
+import {AuthService} from "@/lib/services"
+import {toast} from "sonner"
 
 export function ProfileMain() {
   const { user, loading, getTrustLevelLabel } = useUser()
   const controls = useAnimation()
   const isAnimatingRef = React.useRef(false)
+  const queryClient = useQueryClient()
+
+  const externalAccountBindingsQuery = useQuery({
+    queryKey: ["auth", "external-accounts"],
+    queryFn: () => AuthService.getExternalAccountBindings(),
+  })
+
+  const publicAuthSourcesQuery = useQuery({
+    queryKey: ["auth", "public-sources"],
+    queryFn: () => AuthService.getAuthSources(),
+  })
+
+  const bindSourceMutation = useMutation({
+    mutationFn: async (sourceName: string) => {
+      const { authorize_url } = await AuthService.getAuthorizeUrl(sourceName, "bind")
+      sessionStorage.setItem("redirect_after_login", `${window.location.pathname}${window.location.search}`)
+      window.location.href = authorize_url
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "绑定认证源失败")
+    },
+  })
 
   const handleAvatarClick = () => {
     if (isAnimatingRef.current) return
-    
+
     isAnimatingRef.current = true
     controls.start({
       rotate: [0, -20, 20, -20, 20, 0],
       transition: { duration: 0.5, ease: "easeInOut" }
     })
-    
+
     setTimeout(() => {
       isAnimatingRef.current = false
     }, 650)
@@ -123,6 +157,100 @@ export function ProfileMain() {
           </div>
         </div>
       </div>
+
+      {/* 账号绑定面板 */}
+      <div className="space-y-6 bg-card border border-dashed rounded-lg p-6">
+        <div className="border-b pb-4 flex items-center gap-2">
+          <div className="p-1.5 rounded-lg bg-indigo-500/10 text-indigo-500">
+            <Link2 className="size-4" />
+          </div>
+          <div>
+            <h2 className="text-lg font-semibold tracking-tight">第三方账号绑定</h2>
+            <p className="text-xs text-muted-foreground">管理并关联您的第三方授权账户，便于快捷登录与验证</p>
+          </div>
+        </div>
+
+        {/* 已绑定账号列表 */}
+        <div className="space-y-3 pt-2">
+          <h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">已绑定账号</h3>
+          {externalAccountBindingsQuery.isPending ? (
+            <div className="flex items-center justify-center py-6">
+              <Loader2 className="size-5 animate-spin text-indigo-500" />
+            </div>
+          ) : (externalAccountBindingsQuery.data ?? []).length > 0 ? (
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+              {(externalAccountBindingsQuery.data ?? []).map((binding) => (
+                <div
+                  key={binding.id}
+                  className="flex items-center justify-between gap-4 rounded-xl border border-dashed p-4 bg-card hover:bg-muted/10 transition-all duration-300"
+                >
+                  <div className="space-y-1">
+                    <span className="font-semibold text-xs text-foreground block">{binding.auth_source_label}</span>
+                    <span className="text-xs text-muted-foreground font-mono block truncate max-w-[180px]">
+                      {binding.external_username || binding.email || "未提供账号标识"}
+                    </span>
+                  </div>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    className="text-xs text-muted-foreground hover:text-rose-500 hover:bg-rose-500/10 rounded-lg h-8 px-2.5 transition-colors"
+                    onClick={async () => {
+                      await AuthService.deleteExternalAccountBinding(binding.id)
+                      await queryClient.invalidateQueries({ queryKey: ["auth", "external-accounts"] })
+                      toast.success("绑定已移除")
+                    }}
+                  >
+                    <Unlink className="size-3.5 mr-1" />
+                    解除绑定
+                  </Button>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div className="rounded-xl border border-dashed border-border/50 px-4 py-8 text-center text-xs text-muted-foreground bg-muted/5 flex flex-col items-center justify-center">
+              <Link2 className="size-6 text-muted-foreground/30 mb-2" />
+              暂无绑定的第三方账号
+            </div>
+          )}
+        </div>
+
+        <Separator className="border-dashed" />
+
+        {/* 绑定新账号列表 */}
+        <div className="space-y-3">
+          <h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">绑定新账号</h3>
+          {publicAuthSourcesQuery.isPending ? (
+            <div className="flex items-center justify-center py-6">
+              <Loader2 className="size-5 animate-spin text-indigo-500" />
+            </div>
+          ) : (publicAuthSourcesQuery.data ?? []).length > 0 ? (
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+              {(publicAuthSourcesQuery.data ?? []).map((source) => (
+                <Button
+                  key={source.id}
+                  type="button"
+                  variant="outline"
+                  className="flex items-center justify-between w-full border border-dashed rounded-xl px-4 py-3.5 text-left font-normal text-xs hover:bg-indigo-500/5 hover:text-indigo-500 hover:border-indigo-500/30 transition-all duration-300 group h-auto"
+                  onClick={() => {
+                    void bindSourceMutation.mutateAsync(source.name)
+                  }}
+                >
+                  <div className="flex items-center gap-2">
+                    <Link2 className="size-3.5 text-muted-foreground group-hover:text-indigo-500" />
+                    <span>绑定 {source.display_name || source.name}</span>
+                  </div>
+                  <ArrowRight className="size-3.5 opacity-0 -translate-x-1 group-hover:opacity-100 group-hover:translate-x-0 transition-all text-indigo-500" />
+                </Button>
+              ))}
+            </div>
+          ) : (
+            <div className="text-xs text-muted-foreground text-center py-4">
+              暂无可用第三方认证源
+            </div>
+          )}
+        </div>
+      </div>
     </div>
   )
 }

frontend/components/common/settings/security.tsx

@@ -1,14 +1,168 @@
 "use client"
 
-import * as React from "react"
+import {useEffect, useMemo, useState} from "react"
+import {useMutation, useQuery, useQueryClient} from "@tanstack/react-query"
+import {Fingerprint, Globe, Loader2, Lock, Pencil, Plus, Settings, ShieldCheck, Trash2, UserPlus} from "lucide-react"
 import Link from "next/link"
-import { ShieldCheck } from "lucide-react"
+import {useRouter} from "next/navigation"
+import {motion} from "motion/react"
 
-import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@/components/ui/breadcrumb"
+import {Button} from "@/components/ui/button"
+import {Card, CardContent, CardDescription, CardHeader, CardTitle} from "@/components/ui/card"
+import {Switch} from "@/components/ui/switch"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator
+} from "@/components/ui/breadcrumb"
+import {useAuth} from "@/components/providers/auth-provider"
+import {AuthSourceModal} from "@/components/common/settings/auth-source-modal"
+import {AdminService} from "@/lib/services"
+import type {AuthSource, SystemConfig} from "@/lib/services/admin"
+import {toast} from "sonner"
+
+const SECURITY_KEYS = [
+  {
+    key: "password_login_enabled",
+    title: "允许密码登录",
+    description: "关闭后仅保留第三方 OIDC 认证源进行系统登录。",
+    icon: Lock,
+  },
+  {
+    key: "registration_enabled",
+    title: "允许注册",
+    description: "关闭后系统将禁止新用户进行自主账号注册。",
+    icon: UserPlus,
+  },
+  {
+    key: "password_register_enabled",
+    title: "允许密码注册",
+    description: "关闭后只能通过管理员创建或第三方认证关联建号。",
+    icon: Fingerprint,
+  },
+  {
+    key: "oidc_login_enabled",
+    title: "允许 OIDC 登录",
+    description: "关闭后所有的第三方 OIDC 认证登录入口都会被隐藏。",
+    icon: Globe,
+  },
+] as const
+
+type SecurityKey = (typeof SECURITY_KEYS)[number]["key"]
+
+function systemConfigMap(configs: SystemConfig[]) {
+  return configs.reduce<Record<string, SystemConfig>>((accumulator, config) => {
+    accumulator[config.key] = config
+    return accumulator
+  }, {})
+}
 
 export function SecurityMain() {
+  const queryClient = useQueryClient()
+  const { user, loading } = useAuth()
+  const router = useRouter()
+  const [authSourceModalOpen, setAuthSourceModalOpen] = useState(false)
+  const [selectedSource, setSelectedSource] = useState<AuthSource | null>(null)
+
+  const systemConfigsQuery = useQuery({
+    queryKey: ["admin", "system-configs"],
+    queryFn: () => AdminService.listSystemConfigs("system"),
+    enabled: !!user?.is_admin,
+  })
+
+  const authSourcesQuery = useQuery({
+    queryKey: ["auth", "sources"],
+    queryFn: () => AdminService.listAuthSources(),
+    enabled: !!user?.is_admin,
+  })
+
+  const configs = useMemo(
+    () => systemConfigMap(systemConfigsQuery.data ?? []),
+    [systemConfigsQuery.data],
+  )
+
+  useEffect(() => {
+    if (!loading && (!user || !user.is_admin)) {
+      router.replace("/settings/profile")
+    }
+  }, [user, loading, router])
+
+  useEffect(() => {
+    if (user?.is_admin) {
+      void systemConfigsQuery.refetch()
+    }
+  }, [systemConfigsQuery, user])
+
+  const updateConfigMutation = useMutation({
+    mutationFn: async ({ key, value }: { key: SecurityKey; value: boolean }) => {
+      const config = configs[key]
+      if (!config) {
+        throw new Error(`缺少配置项: ${key}`)
+      }
+      await AdminService.updateSystemConfig(key, {
+        value: value ? "true" : "false",
+        description: config.description,
+      })
+    },
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: ["admin", "system-configs"] })
+      toast.success("系统安全配置已更新")
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "更新配置失败")
+    },
+  })
+
+  const toggleSourceMutation = useMutation({
+    mutationFn: async (source: AuthSource) => {
+      await AdminService.toggleAuthSource(source.id, { is_active: !source.is_active })
+    },
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: ["auth", "sources"] })
+      await queryClient.invalidateQueries({ queryKey: ["auth", "public-sources"] })
+      toast.success("认证源状态已更新")
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "切换状态失败")
+    },
+  })
+
+  const deleteSourceMutation = useMutation({
+    mutationFn: async (sourceId: string) => {
+      await AdminService.deleteAuthSource(sourceId)
+    },
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: ["auth", "sources"] })
+      await queryClient.invalidateQueries({ queryKey: ["auth", "public-sources"] })
+      toast.success("认证源已删除")
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "删除认证源失败")
+    },
+  })
+
+  const handleToggle = (key: SecurityKey, checked: boolean) => {
+    updateConfigMutation.mutate({ key, value: checked })
+  }
+
+  if (loading || !user || !user.is_admin) {
+    return (
+      <div className="flex items-center justify-center min-h-[400px]">
+        <Loader2 className="size-6 animate-spin text-indigo-500" />
+      </div>
+    )
+  }
+
   return (
-    <div className="py-6 space-y-6">
+    <motion.div
+      initial={{ opacity: 0, y: 15 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.35, ease: "easeOut" }}
+      className="py-6 space-y-6 max-w-4xl mx-auto px-4"
+    >
       <div className="font-semibold">
         <Breadcrumb>
           <BreadcrumbList>
@@ -25,16 +179,192 @@ export function SecurityMain() {
         </Breadcrumb>
       </div>
 
-      <div className="space-y-6">
-        <div className="font-medium text-sm text-muted-foreground flex items-center gap-2">
-          <ShieldCheck className="w-4 h-4" />
-          安全设置
-        </div>
-
-        <div className="text-sm text-muted-foreground">
-          当前暂无安全配置选项
+      <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4 border-b pb-5">
+        <div className="flex items-center gap-4">
+          <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-gradient-to-br from-indigo-500 to-purple-600 text-white shadow-lg shadow-indigo-500/20">
+            <ShieldCheck className="size-6 animate-pulse" />
+          </div>
+          <div>
+            <h1 className="text-xl font-bold tracking-tight bg-gradient-to-r from-foreground via-foreground/90 to-muted-foreground bg-clip-text text-transparent">系统安全设置</h1>
+            <p className="text-sm text-muted-foreground">管理系统安全控制及身份验证源</p>
+          </div>
         </div>
       </div>
-    </div>
+
+      <div className="space-y-6">
+        {/* 系统登录与注册控制 */}
+        <Card className="border border-dashed shadow-sm">
+          <CardHeader className="border-b border-dashed pb-4">
+            <div className="flex items-center gap-2">
+              <div className="p-1.5 rounded-lg bg-indigo-500/10 text-indigo-500">
+                <Settings className="size-4" />
+              </div>
+              <div>
+                <CardTitle className="text-base font-semibold">系统安全与注册控制</CardTitle>
+                <CardDescription className="text-xs">配置系统的登录限制与用户自主注册权限</CardDescription>
+              </div>
+            </div>
+          </CardHeader>
+          <CardContent className="pt-6">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              {SECURITY_KEYS.map((item) => {
+                const config = configs[item.key]
+                const checked = config ? config.value === "true" : false
+                const Icon = item.icon
+                return (
+                  <div
+                    key={item.key}
+                    className="flex items-center justify-between gap-4 rounded-xl border border-dashed p-4 bg-card hover:bg-muted/10 hover:border-indigo-500/30 transition-all duration-300 shadow-sm"
+                  >
+                    <div className="space-y-1">
+                      <div className="flex items-center gap-2">
+                        {Icon && <Icon className="size-4 text-indigo-500" />}
+                        <span className="font-medium text-sm text-foreground">{item.title}</span>
+                      </div>
+                      <p className="text-xs text-muted-foreground leading-relaxed pr-2">{item.description}</p>
+                    </div>
+                    <Switch
+                      checked={checked}
+                      disabled={updateConfigMutation.isPending}
+                      onCheckedChange={(value) => handleToggle(item.key, value)}
+                    />
+                  </div>
+                )
+              })}
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* 认证源配置管理 */}
+        <Card className="border border-dashed shadow-sm">
+          <CardHeader className="border-b border-dashed pb-4 flex flex-row items-center justify-between gap-4">
+            <div className="flex items-center gap-2">
+              <div className="p-1.5 rounded-lg bg-indigo-500/10 text-indigo-500">
+                <Globe className="size-4" />
+              </div>
+              <div>
+                <CardTitle className="text-base font-semibold">认证源管理</CardTitle>
+                <CardDescription className="text-xs">添加、修改并启用系统自定义的 OIDC 认证源</CardDescription>
+              </div>
+            </div>
+            <Button
+              type="button"
+              size="sm"
+              onClick={() => {
+                setSelectedSource(null)
+                setAuthSourceModalOpen(true)
+              }}
+              className="bg-indigo-600 hover:bg-indigo-700 text-white shadow-md shadow-indigo-600/10 transition-colors"
+            >
+              <Plus className="mr-1.5 size-3.5" />
+              新增认证源
+            </Button>
+          </CardHeader>
+          <CardContent className="pt-6 space-y-3">
+            {authSourcesQuery.isPending ? (
+              <div className="flex items-center justify-center p-8">
+                <Loader2 className="size-6 animate-spin text-muted-foreground/50" />
+              </div>
+            ) : (authSourcesQuery.data ?? []).length > 0 ? (
+              (authSourcesQuery.data ?? []).map((source) => (
+                <div
+                  key={source.id}
+                  className="flex items-center justify-between rounded-xl border border-dashed p-4 bg-card hover:bg-muted/10 transition-all duration-300 shadow-sm"
+                >
+                  <div className="space-y-1.5">
+                    <div className="flex items-center gap-2">
+                      <span className="font-semibold text-sm text-foreground">{source.display_name || source.name}</span>
+                      <span className={`text-[10px] px-2 py-0.5 rounded-full border font-medium ${
+                        source.is_active
+                          ? "bg-emerald-500/10 text-emerald-500 border-emerald-500/20"
+                          : "bg-amber-500/10 text-amber-500 border-amber-500/20"
+                      }`}>
+                        {source.is_active ? "已启用" : "已禁用"}
+                      </span>
+                    </div>
+                    <div className="text-xs text-muted-foreground font-mono">
+                      标识符: {source.name} · 类型: {source.type.toUpperCase()}
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-4">
+                    <span className={`text-xs px-2.5 py-1 rounded-lg border font-medium hidden sm:inline-block ${
+                      source.client_secret_configured
+                        ? "bg-indigo-500/5 text-indigo-500 border-indigo-500/10"
+                        : "bg-rose-500/5 text-rose-500 border-rose-500/10"
+                    }`}>
+                      {source.client_secret_configured ? "Secret 已配置" : "Secret 未配置"}
+                    </span>
+
+                    <div className="flex items-center gap-2">
+                      <Switch
+                        checked={source.is_active}
+                        disabled={toggleSourceMutation.isPending}
+                        className="scale-90 mr-2"
+                        onCheckedChange={() => toggleSourceMutation.mutate(source)}
+                      />
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="icon"
+                        className="size-8 text-muted-foreground hover:text-indigo-500 hover:bg-indigo-500/10 rounded-lg transition-colors"
+                        onClick={() => {
+                          setSelectedSource(source)
+                          setAuthSourceModalOpen(true)
+                        }}
+                      >
+                        <Pencil className="size-4" />
+                      </Button>
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="icon"
+                        className="size-8 text-muted-foreground hover:text-rose-500 hover:bg-rose-500/10 rounded-lg transition-colors"
+                        disabled={deleteSourceMutation.isPending}
+                        onClick={() => {
+                          if (window.confirm(`确定删除认证源「${source.display_name || source.name}」吗？`)) {
+                            deleteSourceMutation.mutate(source.id)
+                          }
+                        }}
+                      >
+                        <Trash2 className="size-4" />
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+              ))
+            ) : (
+              <div className="rounded-xl border border-dashed border-border/50 px-4 py-8 text-center text-xs text-muted-foreground bg-muted/5 flex flex-col items-center justify-center gap-3">
+                <span>暂无配置的认证源，点击上方按钮新增</span>
+                <Button
+                  type="button"
+                  size="sm"
+                  variant="outline"
+                  onClick={() => {
+                    setSelectedSource(null)
+                    setAuthSourceModalOpen(true)
+                  }}
+                  className="border-dashed"
+                >
+                  <Plus className="mr-1.5 size-3.5" />
+                  新增认证源
+                </Button>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+
+      <AuthSourceModal
+        isOpen={authSourceModalOpen}
+        source={selectedSource}
+        onClose={() => setAuthSourceModalOpen(false)}
+        onChanged={async () => {
+          await queryClient.invalidateQueries({ queryKey: ["auth", "sources"] })
+          await queryClient.invalidateQueries({ queryKey: ["auth", "public-sources"] })
+          await authSourcesQuery.refetch()
+        }}
+      />
+    </motion.div>
   )
 }
+