超级管理员后台

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

@@ -0,0 +1,137 @@
+"use client"
+
+import type React from "react"
+
+import { useState } 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 Link from "next/link"
+import { Checkbox } from "@/components/ui/checkbox"
+
+// Sample admin data for editing
+const adminData = {
+  id: "2",
+  username: "admin_li",
+  name: "李管理",
+  permissions: ["project_management", "customer_pool"],
+}
+
+export default function EditAdminPage({ params }: { params: { id: string } }) {
+  const router = useRouter()
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [username, setUsername] = useState(adminData.username)
+  const [name, setName] = useState(adminData.name)
+
+  const permissions = [
+    { id: "project_management", label: "项目管理" },
+    { id: "customer_pool", label: "客户池" },
+    { id: "admin_management", label: "管理员权限" },
+  ]
+
+  const [selectedPermissions, setSelectedPermissions] = useState<string[]>(adminData.permissions)
+
+  const togglePermission = (permissionId: string) => {
+    setSelectedPermissions((prev) =>
+      prev.includes(permissionId) ? prev.filter((id) => id !== permissionId) : [...prev, permissionId],
+    )
+  }
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    setIsSubmitting(true)
+
+    // Simulate API call
+    setTimeout(() => {
+      setIsSubmitting(false)
+      router.push("/dashboard/admins")
+    }, 1500)
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center gap-2">
+        <Button variant="outline" size="icon" asChild>
+          <Link href="/dashboard/admins">
+            <ArrowLeft className="h-4 w-4" />
+          </Link>
+        </Button>
+        <h1 className="text-2xl font-bold">编辑管理员</h1>
+      </div>
+
+      <form onSubmit={handleSubmit}>
+        <Card>
+          <CardHeader>
+            <CardTitle>管理员信息</CardTitle>
+            <CardDescription>编辑管理员账号信息和权限</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-6">
+            <div className="grid gap-6 md:grid-cols-2">
+              <div className="space-y-2">
+                <Label htmlFor="username">账号</Label>
+                <Input
+                  id="username"
+                  value={username}
+                  onChange={(e) => setUsername(e.target.value)}
+                  placeholder="请输入账号"
+                  required
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="name">姓名</Label>
+                <Input
+                  id="name"
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  placeholder="请输入姓名"
+                  required
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="password">重置密码</Label>
+                <Input id="password" type="password" placeholder="留空则不修改密码" />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="confirmPassword">确认密码</Label>
+                <Input id="confirmPassword" type="password" placeholder="留空则不修改密码" />
+              </div>
+            </div>
+
+            <div className="space-y-3">
+              <Label>权限设置</Label>
+              <div className="grid gap-2">
+                {permissions.map((permission) => (
+                  <div key={permission.id} className="flex items-center space-x-2">
+                    <Checkbox
+                      id={permission.id}
+                      checked={selectedPermissions.includes(permission.id)}
+                      onCheckedChange={() => togglePermission(permission.id)}
+                    />
+                    <Label htmlFor={permission.id} className="cursor-pointer">
+                      {permission.label}
+                    </Label>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </CardContent>
+          <CardFooter className="flex justify-end gap-2">
+            <Button variant="outline" asChild>
+              <Link href="/dashboard/admins">取消</Link>
+            </Button>
+            <Button type="submit" disabled={isSubmitting}>
+              {isSubmitting ? "保存中..." : "保存修改"}
+            </Button>
+          </CardFooter>
+        </Card>
+      </form>
+    </div>
+  )
+}
+

SuperAdmin/app/dashboard/admins/loading.tsx

@@ -0,0 +1,4 @@
+export default function Loading() {
+  return null
+}
+

SuperAdmin/app/dashboard/admins/new/page.tsx

@@ -0,0 +1,115 @@
+"use client"
+
+import type React from "react"
+
+import { useState } 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 Link from "next/link"
+import { Checkbox } from "@/components/ui/checkbox"
+
+export default function NewAdminPage() {
+  const router = useRouter()
+  const [isSubmitting, setIsSubmitting] = useState(false)
+
+  const permissions = [
+    { id: "project_management", label: "项目管理" },
+    { id: "customer_pool", label: "客户池" },
+    { id: "admin_management", label: "管理员权限" },
+  ]
+
+  const [selectedPermissions, setSelectedPermissions] = useState<string[]>([])
+
+  const togglePermission = (permissionId: string) => {
+    setSelectedPermissions((prev) =>
+      prev.includes(permissionId) ? prev.filter((id) => id !== permissionId) : [...prev, permissionId],
+    )
+  }
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    setIsSubmitting(true)
+
+    // Simulate API call
+    setTimeout(() => {
+      setIsSubmitting(false)
+      router.push("/dashboard/admins")
+    }, 1500)
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center gap-2">
+        <Button variant="outline" size="icon" asChild>
+          <Link href="/dashboard/admins">
+            <ArrowLeft className="h-4 w-4" />
+          </Link>
+        </Button>
+        <h1 className="text-2xl font-bold">新增管理员</h1>
+      </div>
+
+      <form onSubmit={handleSubmit}>
+        <Card>
+          <CardHeader>
+            <CardTitle>管理员信息</CardTitle>
+            <CardDescription>创建新管理员账号并设置权限</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-6">
+            <div className="grid gap-6 md:grid-cols-2">
+              <div className="space-y-2">
+                <Label htmlFor="username">账号</Label>
+                <Input id="username" placeholder="请输入账号" required />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="name">姓名</Label>
+                <Input id="name" placeholder="请输入姓名" required />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="password">密码</Label>
+                <Input id="password" type="password" placeholder="请设置密码" required />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="confirmPassword">确认密码</Label>
+                <Input id="confirmPassword" type="password" placeholder="请再次输入密码" required />
+              </div>
+            </div>
+
+            <div className="space-y-3">
+              <Label>权限设置</Label>
+              <div className="grid gap-2">
+                {permissions.map((permission) => (
+                  <div key={permission.id} className="flex items-center space-x-2">
+                    <Checkbox
+                      id={permission.id}
+                      checked={selectedPermissions.includes(permission.id)}
+                      onCheckedChange={() => togglePermission(permission.id)}
+                    />
+                    <Label htmlFor={permission.id} className="cursor-pointer">
+                      {permission.label}
+                    </Label>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </CardContent>
+          <CardFooter className="flex justify-end gap-2">
+            <Button variant="outline" asChild>
+              <Link href="/dashboard/admins">取消</Link>
+            </Button>
+            <Button type="submit" disabled={isSubmitting}>
+              {isSubmitting ? "创建中..." : "创建管理员"}
+            </Button>
+          </CardFooter>
+        </Card>
+      </form>
+    </div>
+  )
+}
+

SuperAdmin/app/dashboard/admins/page.tsx

@@ -0,0 +1,154 @@
+"use client"
+
+import { useState } from "react"
+import Link from "next/link"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
+import { Search, MoreHorizontal, Edit, Trash, UserPlus } from "lucide-react"
+import { Badge } from "@/components/ui/badge"
+
+// Sample admin data
+const adminsData = [
+  {
+    id: "1",
+    username: "admin_zhang",
+    name: "张管理",
+    role: "超级管理员",
+    permissions: ["项目管理", "客户池", "管理员权限"],
+    createdAt: "2023-05-01",
+    lastLogin: "2023-06-28 09:15",
+  },
+  {
+    id: "2",
+    username: "admin_li",
+    name: "李管理",
+    role: "项目管理员",
+    permissions: ["项目管理", "客户池"],
+    createdAt: "2023-05-10",
+    lastLogin: "2023-06-27 14:30",
+  },
+  {
+    id: "3",
+    username: "admin_wang",
+    name: "王管理",
+    role: "客户管理员",
+    permissions: ["客户池"],
+    createdAt: "2023-05-15",
+    lastLogin: "2023-06-28 11:45",
+  },
+  {
+    id: "4",
+    username: "admin_zhao",
+    name: "赵管理",
+    role: "项目管理员",
+    permissions: ["项目管理"],
+    createdAt: "2023-05-20",
+    lastLogin: "2023-06-26 16:20",
+  },
+]
+
+export default function AdminsPage() {
+  const [searchTerm, setSearchTerm] = useState("")
+
+  const filteredAdmins = adminsData.filter(
+    (admin) =>
+      admin.username.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      admin.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      admin.role.toLowerCase().includes(searchTerm.toLowerCase()),
+  )
+
+  return (
+    <div className="space-y-6">
+      <div className="flex justify-between">
+        <h1 className="text-2xl font-bold">管理员列表</h1>
+        <Button asChild>
+          <Link href="/dashboard/admins/new">
+            <UserPlus className="mr-2 h-4 w-4" /> 新增管理员
+          </Link>
+        </Button>
+      </div>
+
+      <div className="flex items-center gap-2">
+        <div className="relative flex-1">
+          <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+          <Input
+            type="search"
+            placeholder="搜索管理员账号、姓名或角色..."
+            className="pl-8"
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+          />
+        </div>
+      </div>
+
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>账号</TableHead>
+              <TableHead>姓名</TableHead>
+              <TableHead>角色</TableHead>
+              <TableHead>权限</TableHead>
+              <TableHead>创建时间</TableHead>
+              <TableHead>最后登录</TableHead>
+              <TableHead className="text-right">操作</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {filteredAdmins.length > 0 ? (
+              filteredAdmins.map((admin) => (
+                <TableRow key={admin.id}>
+                  <TableCell className="font-medium">{admin.username}</TableCell>
+                  <TableCell>{admin.name}</TableCell>
+                  <TableCell>
+                    <Badge variant={admin.role === "超级管理员" ? "default" : "outline"}>{admin.role}</Badge>
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex flex-wrap gap-1">
+                      {admin.permissions.map((permission) => (
+                        <Badge key={permission} variant="secondary">
+                          {permission}
+                        </Badge>
+                      ))}
+                    </div>
+                  </TableCell>
+                  <TableCell>{admin.createdAt}</TableCell>
+                  <TableCell>{admin.lastLogin}</TableCell>
+                  <TableCell className="text-right">
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Button variant="ghost" size="icon">
+                          <MoreHorizontal className="h-4 w-4" />
+                          <span className="sr-only">打开菜单</span>
+                        </Button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="end">
+                        <DropdownMenuItem asChild>
+                          <Link href={`/dashboard/admins/${admin.id}/edit`}>
+                            <Edit className="mr-2 h-4 w-4" /> 编辑管理员
+                          </Link>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem className="text-destructive">
+                          <Trash className="mr-2 h-4 w-4" /> 删除管理员
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </TableCell>
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell colSpan={7} className="h-24 text-center">
+                  未找到管理员
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  )
+}
+