From 00538187c6bb15abf7703df79a33b6fdd0e431b5 Mon Sep 17 00:00:00 2001 From: wood chen Date: Sat, 8 Feb 2025 19:54:27 +0800 Subject: [PATCH] feat: Enhance dashboard UI with new layout and client management --- .../(dashboard)/dashboard/clients/page.tsx | 79 +++++----- src/app/(dashboard)/dashboard/page.tsx | 75 ++++++---- src/app/(dashboard)/layout.tsx | 8 +- src/components/clients/add-client.tsx | 139 ++++++++++++------ src/components/layout/dashboard-header.tsx | 27 ++++ 5 files changed, 215 insertions(+), 113 deletions(-) create mode 100644 src/components/layout/dashboard-header.tsx diff --git a/src/app/(dashboard)/dashboard/clients/page.tsx b/src/app/(dashboard)/dashboard/clients/page.tsx index 55161ea..9c51d2a 100644 --- a/src/app/(dashboard)/dashboard/clients/page.tsx +++ b/src/app/(dashboard)/dashboard/clients/page.tsx @@ -26,50 +26,49 @@ export default async function ClientsPage() { const clients = await fetchClients(user.id as string); return ( -
-
-

Clients

-
- {/* setSearchTerm(e.target.value)} - className="max-w-sm" - /> */} +
+
+
+

+ 管理您的 OAuth 应用程序 +

-
- - - - Name - Client ID - Client Secret Key - Redirect URI - Actions - - - - {clients.map((client) => ( - - {client.name} - {client.clientId} - {client.clientSecret} - {client.redirectUri} - - - - + +
+
+ + + 应用名称 + Client ID + Client Secret + 回调地址 + 操作 - ))} - -
+ + + {clients.map((client) => ( + + {client.name} + {client.clientId} + + {client.clientSecret} + + {client.redirectUri} + + + + + + ))} + + +
); } diff --git a/src/app/(dashboard)/dashboard/page.tsx b/src/app/(dashboard)/dashboard/page.tsx index 9fb3b11..2ce2dc0 100644 --- a/src/app/(dashboard)/dashboard/page.tsx +++ b/src/app/(dashboard)/dashboard/page.tsx @@ -1,34 +1,53 @@ +import Link from "next/link"; +import { AppWindow, Settings } from "lucide-react"; + +import { Button } from "@/components/ui/button"; +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/components/ui/card"; + export default function DashboardPage() { return ( -
- {/* Sidebar Navigation */} - +
+
+ + + + + 应用管理 + + + 管理您的 OAuth 应用，查看应用详情和统计信息 + + + + + + + + - {/* Main Content Area */} -
-

Welcome to Your Dashboard

-

Select an option from the menu to get started.

-
+ + + + + 账号设置 + + + 管理您的账号信息，包括个人资料和安全设置 + + + + + + +
); } diff --git a/src/app/(dashboard)/layout.tsx b/src/app/(dashboard)/layout.tsx index ae409bb..a73f8d6 100644 --- a/src/app/(dashboard)/layout.tsx +++ b/src/app/(dashboard)/layout.tsx @@ -1,6 +1,7 @@ import { redirect } from "next/navigation"; import { getCurrentUser } from "@/lib/session"; +import { DashboardHeader } from "@/components/layout/dashboard-header"; export default async function DashboardLayout({ children, @@ -10,5 +11,10 @@ export default async function DashboardLayout({ const user = await getCurrentUser(); if (!user) redirect("/sign-in"); - return
{children}
; + return ( +
+ + {children} +
+ ); } diff --git a/src/components/clients/add-client.tsx b/src/components/clients/add-client.tsx index c375224..733c23c 100644 --- a/src/components/clients/add-client.tsx +++ b/src/components/clients/add-client.tsx @@ -1,12 +1,17 @@ "use client"; import { useState } from "react"; +import { useRouter } from "next/navigation"; import { AddClientAction } from "@/actions/add-client"; +import { Plus } from "lucide-react"; +import { useToast } from "@/hooks/use-toast"; import { Button } from "@/components/ui/button"; import { Dialog, DialogContent, + DialogDescription, + DialogFooter, DialogHeader, DialogTitle, DialogTrigger, @@ -15,65 +20,111 @@ import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; export function AddClientButton() { - const [isAddClientOpen, setIsAddClientOpen] = useState(false); + const [open, setOpen] = useState(false); + const [isLoading, setIsLoading] = useState(false); + const { toast } = useToast(); + const router = useRouter(); + + async function onSubmit(event: React.FormEvent) { + event.preventDefault(); + setIsLoading(true); + + const formData = new FormData(event.currentTarget); + const response = await AddClientAction(formData); + + setIsLoading(false); + + if (response.success) { + setOpen(false); + router.refresh(); + toast({ + title: "应用创建成功", + description: "您可以开始使用新创建的应用了", + }); + } else { + toast({ + variant: "destructive", + title: "创建失败", + description: response.error, + }); + } + } return ( - + - + - - Add New Client - -
+ + + 创建新应用 + + 添加一个新的 OAuth 应用以使用 Q58 Connect 服务 + +
-
- - -
- -
- - -
- -
- - -
- -
- +
+
- -
- +
+ + +
+
+ + +
+
+ +
+
+ +
-
- -
+ + + +
diff --git a/src/components/layout/dashboard-header.tsx b/src/components/layout/dashboard-header.tsx new file mode 100644 index 0000000..221ab41 --- /dev/null +++ b/src/components/layout/dashboard-header.tsx @@ -0,0 +1,27 @@ +"use client"; + +import { usePathname } from "next/navigation"; + +import { NavBar } from "./nav-bar"; + +export function DashboardHeader() { + const pathname = usePathname(); + + const getTitle = () => { + if (pathname === "/dashboard") return "控制台"; + if (pathname === "/dashboard/clients") return "应用管理"; + if (pathname.includes("/dashboard/clients/")) return "应用编辑"; + return ""; + }; + + return ( +
+ +
+
+

{getTitle()}

+
+
+
+ ); +}