超管后台 - 编辑管理员查看详情

SuperAdmin/app/dashboard/admins/[id]/edit/page.tsx

@@ -2,29 +2,34 @@
 
 import type React from "react"
 
-import { useState } from "react"
+import { useState, useEffect } from "react"
 import { useRouter } from "next/navigation"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
-import { ArrowLeft } from "lucide-react"
+import { ArrowLeft, Loader2 } from "lucide-react"
 import Link from "next/link"
 import { Checkbox } from "@/components/ui/checkbox"
+import { getAdministratorDetail, AdministratorDetail } from "@/lib/admin-api"
+import { useToast } from "@/components/ui/use-toast"
 
-// Sample admin data for editing
-const adminData = {
-  id: "2",
-  username: "admin_li",
-  name: "李管理",
-  permissions: ["project_management", "customer_pool"],
-}
+// 权限 ID 到前端权限键的映射
+const permissionMapping: Record<number, string[]> = {
+  1: ["project_management", "customer_pool", "admin_management"], // 超级管理员
+  2: ["project_management", "customer_pool"], // 项目管理员
+  3: ["customer_pool"], // 客户管理员
+  4: [], // 普通管理员
+};
 
 export default function EditAdminPage({ params }: { params: { id: string } }) {
   const router = useRouter()
+  const { toast } = useToast()
+  const [isLoading, setIsLoading] = useState(true)
   const [isSubmitting, setIsSubmitting] = useState(false)
-  const [username, setUsername] = useState(adminData.username)
-  const [name, setName] = useState(adminData.name)
+  const [adminInfo, setAdminInfo] = useState<AdministratorDetail | null>(null)
+  const [username, setUsername] = useState("")
+  const [name, setName] = useState("")
 
   const permissions = [
     { id: "project_management", label: "项目管理" },
@@ -32,7 +37,42 @@ export default function EditAdminPage({ params }: { params: { id: string } }) {
     { id: "admin_management", label: "管理员权限" },
   ]
 
-  const [selectedPermissions, setSelectedPermissions] = useState<string[]>(adminData.permissions)
+  const [selectedPermissions, setSelectedPermissions] = useState<string[]>([])
+
+  // 加载管理员详情
+  useEffect(() => {
+    const fetchAdminDetail = async () => {
+      setIsLoading(true)
+      try {
+        const response = await getAdministratorDetail(params.id)
+        if (response.code === 200 && response.data) {
+          setAdminInfo(response.data)
+          // 设置表单数据
+          setUsername(response.data.username)
+          setName(response.data.name)
+          // 根据 authId 设置权限
+          setSelectedPermissions(permissionMapping[response.data.authId] || [])
+        } else {
+          toast({
+            title: "获取管理员详情失败",
+            description: response.msg || "请稍后重试",
+            variant: "destructive",
+          })
+        }
+      } catch (error) {
+        console.error("获取管理员详情出错:", error)
+        toast({
+          title: "获取管理员详情失败",
+          description: "请检查网络连接后重试",
+          variant: "destructive",
+        })
+      } finally {
+        setIsLoading(false)
+      }
+    }
+
+    fetchAdminDetail()
+  }, [params.id])
 
   const togglePermission = (permissionId: string) => {
     setSelectedPermissions((prev) =>
@@ -51,6 +91,17 @@ export default function EditAdminPage({ params }: { params: { id: string } }) {
     }, 1500)
   }
 
+  if (isLoading) {
+    return (
+      <div className="flex h-[calc(100vh-200px)] items-center justify-center">
+        <div className="flex flex-col items-center gap-2">
+          <Loader2 className="h-8 w-8 animate-spin text-primary" />
+          <p className="text-sm text-muted-foreground">加载管理员详情中...</p>
+        </div>
+      </div>
+    )
+  }
+
   return (
     <div className="space-y-6">
       <div className="flex items-center gap-2">

SuperAdmin/app/layout.tsx

@@ -3,6 +3,7 @@ import type { Metadata } from "next"
 import { Inter } from "next/font/google"
 import "./globals.css"
 import { ThemeProvider } from "@/components/theme-provider"
+import { ToastProvider } from "@/components/ui/use-toast"
 
 const inter = Inter({ subsets: ["latin"] })
 
@@ -21,7 +22,9 @@ export default function RootLayout({
     <html lang="zh-CN" suppressHydrationWarning>
       <body className={inter.className}>
         <ThemeProvider attribute="class" defaultTheme="light" enableSystem disableTransitionOnChange>
-          {children}
+          <ToastProvider>
+            {children}
+          </ToastProvider>
         </ThemeProvider>
       </body>
     </html>

SuperAdmin/components/ui/toast.tsx

@@ -1,129 +1,61 @@
 "use client"
 
 import * as React from "react"
-import * as ToastPrimitives from "@radix-ui/react-toast"
-import { cva, type VariantProps } from "class-variance-authority"
 import { X } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
-const ToastProvider = ToastPrimitives.Provider
-
-const ToastViewport = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Viewport>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Viewport
-    ref={ref}
-    className={cn(
-      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
-      className
-    )}
-    {...props}
-  />
-))
-ToastViewport.displayName = ToastPrimitives.Viewport.displayName
-
-const toastVariants = cva(
-  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
-  {
-    variants: {
-      variant: {
-        default: "border bg-background text-foreground",
-        destructive:
-          "destructive group border-destructive bg-destructive text-destructive-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-const Toast = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
-    VariantProps<typeof toastVariants>
->(({ className, variant, ...props }, ref) => {
-  return (
-    <ToastPrimitives.Root
-      ref={ref}
-      className={cn(toastVariants({ variant }), className)}
-      {...props}
-    />
-  )
-})
-Toast.displayName = ToastPrimitives.Root.displayName
-
-const ToastAction = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Action>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Action
-    ref={ref}
-    className={cn(
-      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
-      className
-    )}
-    {...props}
-  />
-))
-ToastAction.displayName = ToastPrimitives.Action.displayName
-
-const ToastClose = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Close>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Close
-    ref={ref}
-    className={cn(
-      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
-      className
-    )}
-    toast-close=""
-    {...props}
-  >
-    <X className="h-4 w-4" />
-  </ToastPrimitives.Close>
-))
-ToastClose.displayName = ToastPrimitives.Close.displayName
-
-const ToastTitle = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Title>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Title
-    ref={ref}
-    className={cn("text-sm font-semibold", className)}
-    {...props}
-  />
-))
-ToastTitle.displayName = ToastPrimitives.Title.displayName
-
-const ToastDescription = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Description>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Description
-    ref={ref}
-    className={cn("text-sm opacity-90", className)}
-    {...props}
-  />
-))
-ToastDescription.displayName = ToastPrimitives.Description.displayName
-
-type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
-
-type ToastActionElement = React.ReactElement<typeof ToastAction>
-
-export {
-  type ToastProps,
-  type ToastActionElement,
-  ToastProvider,
-  ToastViewport,
-  Toast,
-  ToastTitle,
-  ToastDescription,
-  ToastClose,
-  ToastAction,
+interface ToastProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: "default" | "destructive" | "success"
+  onDismiss?: () => void
+  title?: string
+  description?: string
+  action?: React.ReactNode
+}
+
+export const ToastProvider = React.Fragment
+
+export function Toast({
+  className,
+  variant = "default",
+  onDismiss,
+  title,
+  description,
+  action,
+  ...props
+}: ToastProps) {
+  const variantStyles = {
+    default: "bg-background text-foreground",
+    destructive: "bg-destructive text-destructive-foreground",
+    success: "bg-green-500 text-white"
+  }
+
+  return (
+    <div
+      className={cn(
+        "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-4 pr-8 shadow-lg transition-all",
+        variantStyles[variant],
+        className
+      )}
+      {...props}
+    >
+      <div className="flex flex-col gap-1">
+        {title && <p className="font-medium">{title}</p>}
+        {description && <p className="text-sm opacity-90">{description}</p>}
+      </div>
+      {action}
+      <button
+        onClick={onDismiss}
+        className="absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground group-hover:opacity-100"
+      >
+        <X className="h-4 w-4" />
+      </button>
+    </div>
+  )
+}
+
+export function ToastViewport() {
+  return (
+    <div className="fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse gap-2 p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]"></div>
+  )
 }

SuperAdmin/components/ui/use-toast.tsx

@@ -0,0 +1,65 @@
+"use client"
+
+import { createContext, useContext, useState, useEffect, ReactNode } from "react"
+import { Toast, ToastProvider, ToastViewport } from "@/components/ui/toast"
+
+type ToastProps = {
+  id: string
+  title?: string
+  description?: string
+  variant?: "default" | "destructive" | "success"
+  action?: ReactNode
+}
+
+interface ToastContextValue {
+  toast: (props: Omit<ToastProps, "id">) => void
+  dismiss: (id: string) => void
+  toasts: ToastProps[]
+}
+
+const ToastContext = createContext<ToastContextValue | null>(null)
+
+export function useToast() {
+  const context = useContext(ToastContext)
+  if (context === null) {
+    throw new Error("useToast must be used within a ToastProvider")
+  }
+  return context
+}
+
+interface ToastProviderProps {
+  children: ReactNode
+}
+
+export function ToastProvider({ children }: ToastProviderProps) {
+  const [toasts, setToasts] = useState<ToastProps[]>([])
+
+  const toast = (props: Omit<ToastProps, "id">) => {
+    const id = Math.random().toString(36).substring(2, 9)
+    setToasts((prev) => [...prev, { id, ...props }])
+  }
+
+  const dismiss = (id: string) => {
+    setToasts((prev) => prev.filter((toast) => toast.id !== id))
+  }
+
+  // 自动移除
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      if (toasts.length > 0) {
+        setToasts((prev) => prev.slice(1))
+      }
+    }, 5000)
+    return () => clearTimeout(timer)
+  }, [toasts])
+
+  return (
+    <ToastContext.Provider value={{ toast, dismiss, toasts }}>
+      {children}
+      <ToastViewport />
+      {toasts.map((props) => (
+        <Toast key={props.id} {...props} onDismiss={() => dismiss(props.id)} />
+      ))}
+    </ToastContext.Provider>
+  )
+} 

SuperAdmin/lib/admin-api.ts

@@ -12,6 +12,19 @@ export interface Administrator {
   permissions: string[];
 }
 
+// 管理员详情接口
+export interface AdministratorDetail {
+  id: number;
+  username: string;
+  name: string;
+  authId: number;
+  roleName: string;
+  status: number;
+  createdAt: string;
+  lastLogin: string;
+  permissions: string[];
+}
+
 // 分页响应数据类型
 export interface PaginatedResponse<T> {
   list: T[];
@@ -71,4 +84,36 @@ export async function getAdministrators(
       data: null
     };
   }
+}
+
+/**
+ * 获取管理员详情
+ * @param id 管理员ID
+ * @returns 管理员详情
+ */
+export async function getAdministratorDetail(id: number | string): Promise<ApiResponse<AdministratorDetail>> {
+  const { apiBaseUrl } = getConfig();
+  
+  try {
+    // 发送请求
+    const response = await fetch(`${apiBaseUrl}/administrator/detail/${id}`, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+    
+    if (!response.ok) {
+      throw new Error(`请求失败，状态码: ${response.status}`);
+    }
+    
+    return await response.json();
+  } catch (error) {
+    console.error('获取管理员详情失败:', error);
+    return {
+      code: 500,
+      msg: '获取管理员详情失败',
+      data: null
+    };
+  }
 }