feat(roles): enhance role management panel with user list and inline editing

Redesign the Emperor's Role Management panel from a single-user search-and-assign form into a full user management dashboard with browsable user list and inline role editing.
2026-09-07 08:16:37 +08:00 · 2026-07-30 22:09:33 +08:00
parent 2c97914ac2
commit 6fc9686be9
7 changed files with 308 additions and 123 deletions
@@ -1,10 +1,78 @@
 import { createDb } from "@/lib/db"
 import { users } from "@/lib/schema"
-import { eq } from "drizzle-orm"
+import { eq, like, or, sql } from "drizzle-orm"
+import { checkPermission } from "@/lib/auth"
+import { PERMISSIONS } from "@/lib/permissions"

 export const runtime = "edge"

+export async function GET(request: Request) {
+  const canPromote = await checkPermission(PERMISSIONS.PROMOTE_USER)
+  if (!canPromote) {
+    return Response.json({ error: "权限不足" }, { status: 403 })
+  }
+
+  const { searchParams } = new URL(request.url)
+  const page = Math.max(1, Number(searchParams.get("page") || "1"))
+  const pageSize = Math.min(50, Math.max(1, Number(searchParams.get("pageSize") || "20")))
+  const search = searchParams.get("search")?.trim()
+
+  const db = createDb()
+
+  try {
+    const searchCondition = search
+      ? or(
+          like(users.username, `%${search}%`),
+          like(users.email, `%${search}%`),
+          like(users.name, `%${search}%`)
+        )
+      : undefined
+
+    const totalResult = await db
+      .select({ count: sql<number>`count(*)` })
+      .from(users)
+      .where(searchCondition)
+    const total = Number(totalResult[0].count)
+
+    const userList = await db.query.users.findMany({
+      where: searchCondition,
+      with: {
+        userRoles: {
+          with: {
+            role: true,
+          },
+        },
+      },
+      limit: pageSize,
+      offset: (page - 1) * pageSize,
+      orderBy: (users, { desc }) => [desc(users.id)],
+    })
+
+    return Response.json({
+      users: userList.map((u) => ({
+        id: u.id,
+        name: u.name,
+        username: u.username,
+        email: u.email,
+        image: u.image,
+        role: u.userRoles[0]?.role.name || null,
+      })),
+      total,
+      page,
+      pageSize,
+    })
+  } catch (error) {
+    console.error("Failed to list users:", error)
+    return Response.json({ error: "获取用户列表失败" }, { status: 500 })
+  }
+}
+
 export async function POST(request: Request) {
+  const canPromote = await checkPermission(PERMISSIONS.PROMOTE_USER)
+  if (!canPromote) {
+    return Response.json({ error: "权限不足" }, { status: 403 })
+  }
+
  try {
    const json = await request.json()
    const { searchText } = json as { searchText: string }
@@ -2,9 +2,9 @@

 import { useTranslations } from "next-intl"
 import { Button } from "@/components/ui/button"
-import { Gem, Sword, User2, Loader2 } from "lucide-react"
+import { Crown, Gem, Sword, User2, Loader2, Search, ChevronLeft, ChevronRight, Users } from "lucide-react"
 import { Input } from "@/components/ui/input"
-import { useState } from "react"
+import { useState, useEffect, useCallback } from "react"
 import { useToast } from "@/components/ui/use-toast"
 import { ROLES, Role } from "@/lib/permissions"
 import {
@@ -16,6 +16,7 @@ import {
 } from "@/components/ui/select"

 const roleIcons = {
+  [ROLES.EMPEROR]: Crown,
  [ROLES.DUKE]: Gem,
  [ROLES.KNIGHT]: Sword,
  [ROLES.CIVILIAN]: User2,
@@ -23,111 +24,187 @@ const roleIcons = {

 type RoleWithoutEmperor = Exclude<Role, typeof ROLES.EMPEROR>

+interface UserItem {
+  id: string
+  name: string | null
+  username: string | null
+  email: string | null
+  image: string | null
+  role: string | null
+}
+
+const PAGE_SIZE = 10
+
 export function PromotePanel() {
  const t = useTranslations("profile.promote")
  const tCard = useTranslations("profile.card")
-  const [searchText, setSearchText] = useState("")
-  const [loading, setLoading] = useState(false)
-  const [targetRole, setTargetRole] = useState<RoleWithoutEmperor>(ROLES.KNIGHT)
+  const [users, setUsers] = useState<UserItem[]>([])
+  const [total, setTotal] = useState(0)
+  const [page, setPage] = useState(1)
+  const [search, setSearch] = useState("")
+  const [loading, setLoading] = useState(true)
+  const [updatingUserId, setUpdatingUserId] = useState<string | null>(null)
  const { toast } = useToast()

  const roleNames = {
+    [ROLES.EMPEROR]: tCard("roles.EMPEROR"),
    [ROLES.DUKE]: tCard("roles.DUKE"),
    [ROLES.KNIGHT]: tCard("roles.KNIGHT"),
    [ROLES.CIVILIAN]: tCard("roles.CIVILIAN"),
  } as const

-  const handleAction = async () => {
-    if (!searchText) return
+  const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE))

+  const fetchUsers = useCallback(async () => {
    setLoading(true)
    try {
-      const res = await fetch("/api/roles/users", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ searchText })
+      const params = new URLSearchParams({
+        page: page.toString(),
+        pageSize: PAGE_SIZE.toString(),
      })
+      if (search.trim()) {
+        params.set("search", search.trim())
+      }
+      const res = await fetch(`/api/roles/users?${params}`)
+      if (!res.ok) throw new Error("Failed to fetch")
      const data = await res.json() as {
-        user?: {
-          id: string
-          name?: string
-          username?: string
-          email: string
-          role?: string
+        users: UserItem[]
+        total: number
+        page: number
+        pageSize: number
      }
-        error?: string
-      }
-
-      if (!res.ok) throw new Error(data.error || "未知错误")
-
-      if (!data.user) {
-        toast({
-          title: t("noUsers"),
-          description: t("searchPlaceholder"),
-          variant: "destructive"
-        })
-        return
-      }
-
-      if (data.user.role === targetRole) {
-        toast({
-          title: t("updateSuccess"),
-          description: t("updateSuccess"),
-        })
-        return
-      }
-
-      const promoteRes = await fetch("/api/roles/promote", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          userId: data.user.id,
-          roleName: targetRole
-        })
-      })
-
-      if (!promoteRes.ok) {
-        const error = await promoteRes.json() as { error: string }
-        throw new Error(error.error || t("updateFailed"))
-      }
-
-      toast({
-        title: t("updateSuccess"),
-        description: `${data.user.username || data.user.email} - ${roleNames[targetRole]}`,
-      })
-      setSearchText("")
-    } catch (error) {
+      setUsers(data.users)
+      setTotal(data.total)
+    } catch {
      toast({
        title: t("updateFailed"),
-        description: error instanceof Error ? error.message : t("updateFailed"),
-        variant: "destructive"
+        variant: "destructive",
      })
    } finally {
      setLoading(false)
    }
-  }
+  }, [page, search, t, toast])

-  const Icon = roleIcons[targetRole]
+  useEffect(() => {
+    fetchUsers()
+  }, [fetchUsers])
+
+  useEffect(() => {
+    setPage(1)
+  }, [search])
+
+  const handleRoleChange = async (userId: string, newRole: RoleWithoutEmperor) => {
+    setUpdatingUserId(userId)
+    try {
+      const res = await fetch("/api/roles/promote", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ userId, roleName: newRole }),
+      })
+      if (!res.ok) {
+        const error = await res.json() as { error: string }
+        throw new Error(error.error)
+      }
+      setUsers((prev) =>
+        prev.map((u) => (u.id === userId ? { ...u, role: newRole } : u))
+      )
+      toast({ title: t("updateSuccess") })
+    } catch (error) {
+      toast({
+        title: t("updateFailed"),
+        description: error instanceof Error ? error.message : undefined,
+        variant: "destructive",
+      })
+    } finally {
+      setUpdatingUserId(null)
+    }
+  }

  return (
    <div className="bg-background rounded-lg border-2 border-primary/20 p-6">
      <div className="flex items-center gap-2 mb-6">
-        <Icon className="w-5 h-5 text-primary" />
+        <Users className="w-5 h-5 text-primary" />
        <h2 className="text-lg font-semibold">{t("title")}</h2>
+        <span className="text-sm text-muted-foreground ml-auto">
+          {t("totalUsers", { count: total })}
+        </span>
      </div>

-      <div className="space-y-4">
-        <div className="flex gap-4">
-          <div className="flex-1">
+      <div className="relative mb-4">
+        <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
        <Input
-              value={searchText}
-              onChange={(e) => setSearchText(e.target.value)}
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
          placeholder={t("searchPlaceholder")}
+          className="pl-9"
        />
      </div>
-          <Select value={targetRole} onValueChange={(value) => setTargetRole(value as RoleWithoutEmperor)}>
-            <SelectTrigger className="w-32">
+
+      {loading ? (
+        <div className="flex items-center justify-center py-12">
+          <Loader2 className="w-6 h-6 animate-spin text-primary" />
+          <span className="ml-2 text-muted-foreground">{t("loading")}</span>
+        </div>
+      ) : users.length === 0 ? (
+        <div className="text-center py-12 text-muted-foreground">
+          {t("noUsers")}
+        </div>
+      ) : (
+        <>
+          <div className="space-y-2">
+            {users.map((user) => {
+              const isEmperor = user.role === ROLES.EMPEROR
+              const RoleIcon = roleIcons[user.role as Role] || User2
+              const isUpdating = updatingUserId === user.id
+
+              return (
+                <div
+                  key={user.id}
+                  className="flex items-center gap-3 p-3 rounded-lg border border-border hover:bg-accent/50 transition-colors"
+                >
+                  {user.image ? (
+                    <img
+                      src={user.image}
+                      alt=""
+                      className="w-8 h-8 rounded-full"
+                    />
+                  ) : (
+                    <div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center">
+                      <User2 className="w-4 h-4 text-primary" />
+                    </div>
+                  )}
+
+                  <div className="flex-1 min-w-0">
+                    <div className="font-medium text-sm truncate">
+                      {user.name || user.username || "—"}
+                    </div>
+                    <div className="text-xs text-muted-foreground truncate">
+                      {user.email || user.username || "—"}
+                    </div>
+                  </div>
+
+                  {isEmperor ? (
+                    <div className="flex items-center gap-1.5 text-sm text-amber-600 font-medium px-3">
+                      <Crown className="w-4 h-4" />
+                      {roleNames[ROLES.EMPEROR]}
+                    </div>
+                  ) : (
+                    <div className="relative">
+                      {isUpdating && (
+                        <div className="absolute inset-0 flex items-center justify-center bg-background/80 rounded z-10">
+                          <Loader2 className="w-4 h-4 animate-spin" />
+                        </div>
+                      )}
+                      <Select
+                        value={user.role || ROLES.CIVILIAN}
+                        onValueChange={(v) => handleRoleChange(user.id, v as RoleWithoutEmperor)}
+                        disabled={isUpdating}
+                      >
+                        <SelectTrigger className="w-32 h-8 text-sm">
+                          <div className="flex items-center gap-1.5">
+                            <RoleIcon className="w-3.5 h-3.5" />
                            <SelectValue />
+                          </div>
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value={ROLES.DUKE}>
@@ -151,19 +228,39 @@ export function PromotePanel() {
                        </SelectContent>
                      </Select>
                    </div>
-
-        <Button
-          onClick={handleAction}
-          disabled={loading || !searchText.trim()}
-          className="w-full"
-        >
-          {loading ? (
-            <Loader2 className="w-4 h-4 animate-spin" />
-          ) : (
-            `${t("promote")} ${roleNames[targetRole]}`
                  )}
+                </div>
+              )
+            })}
+          </div>
+
+          {totalPages > 1 && (
+            <div className="flex items-center justify-between mt-4 pt-4 border-t">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setPage((p) => Math.max(1, p - 1))}
+                disabled={page <= 1}
+              >
+                <ChevronLeft className="w-4 h-4 mr-1" />
+                {t("prevPage")}
+              </Button>
+              <span className="text-sm text-muted-foreground">
+                {t("pageInfo", { current: page, total: totalPages })}
+              </span>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
+                disabled={page >= totalPages}
+              >
+                {t("nextPage")}
+                <ChevronRight className="w-4 h-4 ml-1" />
              </Button>
            </div>
+          )}
+        </>
+      )}
    </div>
  )
 }
@@ -125,7 +125,7 @@
    "title": "Role Management",
    "description": "Manage user roles (Emperor only)",
    "search": "Search Users",
-    "searchPlaceholder": "Enter username or email",
+    "searchPlaceholder": "Search by username, email or name",
    "username": "Username",
    "email": "Email",
    "role": "Role",
@@ -134,6 +134,10 @@
    "noUsers": "No users found",
    "loading": "Loading...",
    "updateSuccess": "User role updated successfully",
-    "updateFailed": "Failed to update user role"
+    "updateFailed": "Failed to update user role",
+    "totalUsers": "{count} users total",
+    "prevPage": "Previous",
+    "nextPage": "Next",
+    "pageInfo": "Page {current} / {total}"
  }
 }
@@ -125,7 +125,7 @@
    "title": "ロール管理",
    "description": "ユーザーロールを管理（皇帝のみ利用可能）",
    "search": "ユーザーを検索",
-    "searchPlaceholder": "ユーザー名またはメールを入力",
+    "searchPlaceholder": "ユーザー名、メールまたは名前で検索",
    "username": "ユーザー名",
    "email": "メール",
    "role": "ロール",
@@ -134,6 +134,10 @@
    "noUsers": "ユーザーが見つかりません",
    "loading": "読み込み中...",
    "updateSuccess": "ユーザーロールを更新しました",
-    "updateFailed": "ユーザーロールの更新に失敗しました"
+    "updateFailed": "ユーザーロールの更新に失敗しました",
+    "totalUsers": "合計 {count} ユーザー",
+    "prevPage": "前へ",
+    "nextPage": "次へ",
+    "pageInfo": "{current} / {total} ページ"
  }
 }
@@ -125,7 +125,7 @@
    "title": "역할 관리",
    "description": "사용자 역할 관리 (황제 전용)",
    "search": "사용자 검색",
-    "searchPlaceholder": "사용자 이름 또는 이메일 입력",
+    "searchPlaceholder": "사용자 이름, 이메일 또는 이름으로 검색",
    "username": "사용자 이름",
    "email": "이메일",
    "role": "역할",
@@ -134,6 +134,10 @@
    "noUsers": "사용자를 찾을 수 없습니다",
    "loading": "로딩 중...",
    "updateSuccess": "사용자 역할이 성공적으로 업데이트되었습니다",
-    "updateFailed": "사용자 역할 업데이트에 실패했습니다"
+    "updateFailed": "사용자 역할 업데이트에 실패했습니다",
+    "totalUsers": "총 {count}명의 사용자",
+    "prevPage": "이전",
+    "nextPage": "다음",
+    "pageInfo": "{current} / {total} 페이지"
  }
 }
@@ -125,7 +125,7 @@
    "title": "角色管理",
    "description": "管理用户角色（仅皇帝可用）",
    "search": "搜索用户",
-    "searchPlaceholder": "输入用户名或邮箱",
+    "searchPlaceholder": "搜索用户名、邮箱或昵称",
    "username": "用户名",
    "email": "邮箱",
    "role": "角色",
@@ -134,6 +134,10 @@
    "noUsers": "未找到用户",
    "loading": "加载中...",
    "updateSuccess": "用户角色更新成功",
-    "updateFailed": "更新用户角色失败"
+    "updateFailed": "更新用户角色失败",
+    "totalUsers": "共 {count} 个用户",
+    "prevPage": "上一页",
+    "nextPage": "下一页",
+    "pageInfo": "第 {current} / {total} 页"
  }
 }
@@ -125,7 +125,7 @@
    "title": "角色管理",
    "description": "管理使用者角色（僅皇帝可用）",
    "search": "搜尋使用者",
-    "searchPlaceholder": "輸入使用者名稱或郵箱",
+    "searchPlaceholder": "搜尋使用者名稱、郵箱或暱稱",
    "username": "使用者名稱",
    "email": "郵箱",
    "role": "角色",
@@ -134,6 +134,10 @@
    "noUsers": "未找到使用者",
    "loading": "載入中...",
    "updateSuccess": "使用者角色更新成功",
-    "updateFailed": "更新使用者角色失敗"
+    "updateFailed": "更新使用者角色失敗",
+    "totalUsers": "共 {count} 個使用者",
+    "prevPage": "上一頁",
+    "nextPage": "下一頁",
+    "pageInfo": "第 {current} / {total} 頁"
  }
 }