From 0dd6a3338fb4e92c36d80c560487c3b0987b7d9c Mon Sep 17 00:00:00 2001 From: wood chen Date: Thu, 20 Feb 2025 02:02:04 +0800 Subject: [PATCH] refactor: Improve UI and UX for client management and authorization - Updated client status toggle with Switch component - Refined admin pages for clients and users with layout improvements - Enhanced authorization action with more detailed error logging - Modified dashboard links to point to client list instead of new client page - Updated client edit form with clearer user input guidance --- src/actions/authorizing.ts | 20 +++++++- src/app/(admin)/admin/clients/page.tsx | 10 +--- src/app/(admin)/admin/users/page.tsx | 2 + src/app/(dashboard)/dashboard/page.tsx | 4 +- src/components/admin/client-status-toggle.tsx | 47 ++++++++++++------- src/components/clients/edit-client.tsx | 7 ++- src/components/ui/switch.tsx | 4 +- 7 files changed, 60 insertions(+), 34 deletions(-) diff --git a/src/actions/authorizing.ts b/src/actions/authorizing.ts index 50ce151..2d280db 100644 --- a/src/actions/authorizing.ts +++ b/src/actions/authorizing.ts @@ -1,5 +1,7 @@ "use server"; +import { revalidatePath } from "next/cache"; + import { createAuthorization } from "@/lib/dto/authorization"; import { getAuthorizeUrl } from "@/lib/oauth/authorize-url"; import { prisma } from "@/lib/prisma"; @@ -13,7 +15,7 @@ export async function handleAuthorizeAction( // 检查客户端是否限制了允许的用户 const client = await prisma.client.findUnique({ where: { id: clientId }, - select: { allowedUsers: true }, + select: { allowedUsers: true, name: true }, }); if (!client) { @@ -27,7 +29,15 @@ export async function handleAuthorizeAction( select: { username: true }, }); - if (!user || !client.allowedUsers.includes(user.username)) { + if (!user) { + console.error(`用户不存在: ${userId}`); + throw new Error("用户不存在"); + } + + if (!client.allowedUsers.includes(user.username)) { + console.error( + `用户 ${user.username} 不在应用 ${client.name} 的允许列表中。允许列表: ${client.allowedUsers.join(", ")}`, + ); throw new Error("您没有权限使用此应用"); } } @@ -44,5 +54,11 @@ export async function handleAuthorizeAction( lastUsedAt: new Date(), // 首次授权时间作为最后使用时间 }); + // 刷新相关页面 + revalidatePath("/dashboard"); + revalidatePath(`/dashboard/clients/${clientId}`); + revalidatePath("/admin/clients"); + revalidatePath(`/admin/clients/${clientId}`); + return redirectUrl; } diff --git a/src/app/(admin)/admin/clients/page.tsx b/src/app/(admin)/admin/clients/page.tsx index 70912a1..46cb28f 100644 --- a/src/app/(admin)/admin/clients/page.tsx +++ b/src/app/(admin)/admin/clients/page.tsx @@ -99,7 +99,6 @@ export default async function ClientsPage({ Client ID 回调地址 创建时间 - 状态 操作 @@ -130,16 +129,11 @@ export default async function ClientsPage({ {new Date(client.createdAt).toLocaleString()} - - {client.enabled ? "启用" : "禁用"} - - - -
+
diff --git a/src/app/(admin)/admin/users/page.tsx b/src/app/(admin)/admin/users/page.tsx index 875ed19..edd0672 100644 --- a/src/app/(admin)/admin/users/page.tsx +++ b/src/app/(admin)/admin/users/page.tsx @@ -66,6 +66,7 @@ export default async function UsersPage({ ID 用户名 + 显示名称 邮箱 角色 创建时间 @@ -76,6 +77,7 @@ export default async function UsersPage({ {users.map((user) => ( {user.id} + {user.username} {user.name} {user.email} diff --git a/src/app/(dashboard)/dashboard/page.tsx b/src/app/(dashboard)/dashboard/page.tsx index 14e0fd5..48f34c5 100644 --- a/src/app/(dashboard)/dashboard/page.tsx +++ b/src/app/(dashboard)/dashboard/page.tsx @@ -72,7 +72,7 @@ export default async function DashboardPage() {

我的应用

- +
@@ -123,7 +123,7 @@ export default async function DashboardPage() { - + diff --git a/src/components/admin/client-status-toggle.tsx b/src/components/admin/client-status-toggle.tsx index 96f70b7..50b456c 100644 --- a/src/components/admin/client-status-toggle.tsx +++ b/src/components/admin/client-status-toggle.tsx @@ -15,8 +15,8 @@ import { AlertDialogHeader, AlertDialogTitle, } from "@/components/ui/alert-dialog"; -import { Badge } from "@/components/ui/badge"; -import { Button } from "@/components/ui/button"; +import { Label } from "@/components/ui/label"; +import { Switch } from "@/components/ui/switch"; interface ClientStatusToggleProps { client: Client | ExtendedClient; @@ -26,6 +26,7 @@ export function ClientStatusToggle({ client }: ClientStatusToggleProps) { const router = useRouter(); const [isLoading, setIsLoading] = useState(false); const [showDialog, setShowDialog] = useState(false); + const [pendingState, setPendingState] = useState(null); const handleToggle = async () => { try { @@ -36,7 +37,7 @@ export function ClientStatusToggle({ client }: ClientStatusToggleProps) { "Content-Type": "application/json", }, body: JSON.stringify({ - enabled: !client.enabled, + enabled: pendingState, }), }); @@ -50,43 +51,53 @@ export function ClientStatusToggle({ client }: ClientStatusToggleProps) { } finally { setIsLoading(false); setShowDialog(false); + setPendingState(null); } }; return ( - <> - setShowDialog(true)} - > - {client.enabled ? "启用" : "禁用"} - +
+ { + setPendingState(checked); + setShowDialog(true); + }} + /> + - 确定要{client.enabled ? "禁用" : "启用"}该应用吗？ + 确定要{pendingState ? "启用" : "禁用"}该应用吗？ - {client.enabled - ? "禁用后，该应用将无法使用 OAuth 服务，所有已授权的用户将无法访问。" - : "启用后，该应用将恢复使用 OAuth 服务的权限。"} + {pendingState + ? "启用后，该应用将恢复使用 OAuth 服务的权限。" + : "禁用后，该应用将无法使用 OAuth 服务，所有已授权的用户将无法访问。"} - 取消 + setPendingState(null)} + > + 取消 + 确定 - +
); } diff --git a/src/components/clients/edit-client.tsx b/src/components/clients/edit-client.tsx index 2200f53..332337f 100644 --- a/src/components/clients/edit-client.tsx +++ b/src/components/clients/edit-client.tsx @@ -160,11 +160,14 @@ export function EditClientForm({ client }: EditClientFormProps) { 允许登录的用户 - + 留空表示允许所有 Q58 - 论坛用户登录。如需限制，请输入用户名列表，用逗号分隔。 + 论坛用户登录。如需限制，请输入用户名列表（注意：必须是用户名，不是显示名称），用逗号分隔。 diff --git a/src/components/ui/switch.tsx b/src/components/ui/switch.tsx index b73edee..8fbbe90 100644 --- a/src/components/ui/switch.tsx +++ b/src/components/ui/switch.tsx @@ -11,7 +11,7 @@ const Switch = React.forwardRef< >(({ className, ...props }, ref) => (