feat: Enhance dashboard UI with new layout and client management

src/app/(dashboard)/dashboard/clients/page.tsx

@@ -26,44 +26,42 @@ export default async function ClientsPage() {
   const clients = await fetchClients(user.id as string);
 
   return (
-    <div className="container mx-auto py-10">
+    <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
-      <div className="mb-5 flex items-center justify-between">
+      <div className="mb-6 flex items-center justify-between">
-        <h1 className="text-3xl font-bold">Clients</h1>
+        <div>
-        <div className="mb-4">
+          <h2 className="text-base text-muted-foreground">
-          {/* <Input
+            管理您的 OAuth 应用程序
-          type="text"
+          </h2>
-          placeholder="Search clients..."
-          value={searchTerm}
-          onChange={(e) => setSearchTerm(e.target.value)}
-          className="max-w-sm"
-        /> */}
         </div>
-
         <AddClientButton />
       </div>
+
+      <div className="rounded-md border">
         <Table>
           <TableHeader>
             <TableRow>
-            <TableHead>Name</TableHead>
+              <TableHead>应用名称</TableHead>
               <TableHead>Client ID</TableHead>
-            <TableHead>Client Secret Key</TableHead>
+              <TableHead>Client Secret</TableHead>
-            <TableHead>Redirect URI</TableHead>
+              <TableHead>回调地址</TableHead>
-            <TableHead>Actions</TableHead>
+              <TableHead className="text-right">操作</TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>
             {clients.map((client) => (
               <TableRow key={client.id}>
                 <TableCell>{client.name}</TableCell>
-              <TableCell>{client.clientId}</TableCell>
+                <TableCell className="font-mono">{client.clientId}</TableCell>
-              <TableCell>{client.clientSecret}</TableCell>
+                <TableCell className="font-mono">
+                  {client.clientSecret}
+                </TableCell>
                 <TableCell>{client.redirectUri}</TableCell>
-              <TableCell>
+                <TableCell className="text-right">
                   <Button variant="outline" size="sm" className="mr-2">
-                  Edit
+                    编辑
                   </Button>
                   <Button variant="destructive" size="sm">
-                  Delete
+                    删除
                   </Button>
                 </TableCell>
               </TableRow>
@@ -71,5 +69,6 @@ export default async function ClientsPage() {
           </TableBody>
         </Table>
       </div>
+    </div>
   );
 }

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 (
-    <div className="flex h-screen">
+    <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
-      {/* Sidebar Navigation */}
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
-      <nav className="w-64 bg-gray-800 p-4 text-white">
+        <Card>
-        <h2 className="mb-4 text-2xl font-bold">Dashboard</h2>
+          <CardHeader>
-        <ul>
+            <CardTitle className="flex items-center gap-2">
-          <li className="mb-2">
+              <AppWindow className="h-6 w-6" />
-            <a
+              应用管理
-              href="/dashboard"
+            </CardTitle>
-              className="block rounded px-4 py-2 hover:bg-gray-700"
+            <CardDescription>
-            >
+              管理您的 OAuth 应用，查看应用详情和统计信息
-              Home
+            </CardDescription>
-            </a>
+          </CardHeader>
-          </li>
+          <CardContent>
-          <li className="mb-2">
+            <Link href="/dashboard/clients">
-            <a
+              <Button className="w-full">查看应用</Button>
-              href="/dashboard/clients"
+            </Link>
-              className="block rounded px-4 py-2 hover:bg-gray-700"
+          </CardContent>
-            >
+        </Card>
-              Client
-            </a>
-          </li>
-        </ul>
-      </nav>
 
-      {/* Main Content Area */}
+        <Card>
-      <main className="flex-1 p-8">
+          <CardHeader>
-        <h1 className="mb-4 text-3xl font-bold">Welcome to Your Dashboard</h1>
+            <CardTitle className="flex items-center gap-2">
-        <p>Select an option from the menu to get started.</p>
+              <Settings className="h-6 w-6" />
-      </main>
+              账号设置
+            </CardTitle>
+            <CardDescription>
+              管理您的账号信息，包括个人资料和安全设置
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Button className="w-full" variant="outline">
+              设置
+            </Button>
+          </CardContent>
+        </Card>
+      </div>
     </div>
   );
 }

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 <div className="min-h-screen">{children}</div>;
+  return (
+    <div className="min-h-screen">
+      <DashboardHeader />
+      {children}
+    </div>
+  );
 }

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<HTMLFormElement>) {
+    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 (
-    <Dialog open={isAddClientOpen} onOpenChange={setIsAddClientOpen}>
+    <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
-        <Button>Add Client</Button>
+        <Button>
+          <Plus className="mr-2 h-4 w-4" />
+          新建应用
+        </Button>
       </DialogTrigger>
       <DialogContent>
+        <form onSubmit={onSubmit}>
           <DialogHeader>
-          <DialogTitle>Add New Client</DialogTitle>
+            <DialogTitle>创建新应用</DialogTitle>
+            <DialogDescription>
+              添加一个新的 OAuth 应用以使用 Q58 Connect 服务
+            </DialogDescription>
           </DialogHeader>
-        <form action={AddClientAction}>
           <div className="grid gap-4 py-4">
-            <div className="grid grid-cols-4 items-center gap-4">
+            <div className="grid gap-2">
-              <Label htmlFor="name" className="text-right">
+              <Label htmlFor="name">应用名称</Label>
-                Name
-              </Label>
-              <Input id="name" name="name" className="col-span-3" />
-            </div>
-
-            <div className="grid grid-cols-4 items-center gap-4">
-              <Label htmlFor="home" className="text-right">
-                Home Page
-              </Label>
-              <Input id="home" name="home" className="col-span-3" />
-            </div>
-
-            <div className="grid grid-cols-4 items-center gap-4">
-              <Label htmlFor="logo" className="text-right">
-                Logo
-              </Label>
-              <Input id="logo" name="logo" className="col-span-3" />
-            </div>
-
-            <div className="grid grid-cols-4 items-center gap-4">
-              <Label htmlFor="description" className="text-right">
-                Description
-              </Label>
               <Input
-                id="description"
+                id="name"
-                name="description"
+                name="name"
-                className="col-span-3"
+                placeholder="例如：我的博客"
+                disabled={isLoading}
               />
             </div>
-
+            <div className="grid gap-2">
-            <div className="grid grid-cols-4 items-center gap-4">
+              <Label htmlFor="home">应用主页</Label>
-              <Label htmlFor="redirectUri" className="text-right">
+              <Input
-                Redirect URI
+                id="home"
-              </Label>
+                name="home"
+                placeholder="https://example.com"
+                disabled={isLoading}
+              />
+            </div>
+            <div className="grid gap-2">
+              <Label htmlFor="logo">应用图标</Label>
+              <Input
+                id="logo"
+                name="logo"
+                placeholder="https://example.com/logo.png"
+                disabled={isLoading}
+              />
+            </div>
+            <div className="grid gap-2">
+              <Label htmlFor="redirectUri">回调地址</Label>
               <Input
                 id="redirectUri"
                 name="redirectUri"
-                className="col-span-3"
+                placeholder="https://example.com/oauth/callback"
+                disabled={isLoading}
+              />
+            </div>
+            <div className="grid gap-2">
+              <Label htmlFor="description">应用描述</Label>
+              <Input
+                id="description"
+                name="description"
+                placeholder="简单描述一下您的应用"
+                disabled={isLoading}
               />
             </div>
           </div>
-          <div className="flex justify-end">
+          <DialogFooter>
-            <Button type="submit">Add Client</Button>
+            <Button
-          </div>
+              variant="outline"
+              onClick={() => setOpen(false)}
+              disabled={isLoading}
+            >
+              取消
+            </Button>
+            <Button type="submit" disabled={isLoading}>
+              创建
+            </Button>
+          </DialogFooter>
         </form>
       </DialogContent>
     </Dialog>

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 (
+    <div className="flex flex-col">
+      <NavBar />
+      <div className="border-b">
+        <div className="mx-auto flex h-16 max-w-7xl items-center px-4 sm:px-6 lg:px-8">
+          <h1 className="text-2xl font-bold">{getTitle()}</h1>
+        </div>
+      </div>
+    </div>
+  );
+}