feat: Add theme toggle component and integrate into home and dashboard pages

normal-coder · normal-coder · commit 4d25fed0a911 · 2025-04-18T01:39:55.000+08:00
- Introduced a new ThemeToggle component for switching between light and dark themes.
- Integrated ThemeToggle into the Home and Dashboard pages for improved user experience.
- Adjusted layout styles for better responsiveness and visual consistency.
diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
@@ -3,6 +3,7 @@ import { redirect } from "next/navigation"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
+import { ThemeToggle } from "@/components/theme-toggle"
 import Link from "next/link"
 
 export default async function Dashboard() {
@@ -18,16 +19,19 @@ export default async function Dashboard() {
   try {
     session = JSON.parse(sessionCookie.value)
   } catch (error) {
-    console.error("解析会话 Cookie 失败:", error)
+    console.error("解析会话 Cookie 失败：", error)
     redirect("/")
   }
 
   const user = session.user
 
   return (
-    <div className="container py-10">
-      <div className="flex flex-col items-center justify-center space-y-6">
-        <Card className="w-full max-w-md">
+    <div className="flex min-h-[calc(100vh-4rem)] items-center justify-center py-10">
+      <div className="absolute right-4 top-4 md:right-8 md:top-8">
+        <ThemeToggle />
+      </div>
+      <div className="container max-w-screen-xl mx-auto flex flex-col items-center justify-center">
+        <Card className="w-full max-w-lg">
           <CardHeader className="text-center">
             <CardTitle className="text-2xl">欢迎回来，{user.name || user.login}</CardTitle>
             <CardDescription>您已成功使用 Gitee 账号登录</CardDescription>
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,11 +1,15 @@
 import { UserAuthForm } from "@/components/user-auth-form"
+import { ThemeToggle } from "@/components/theme-toggle"
 import Link from "next/link"
 
 export default function Home() {
   return (
     <div className="container relative flex h-screen flex-col items-center justify-center md:grid lg:max-w-none lg:grid-cols-2 lg:px-0">
-      <div className="relative hidden h-full flex-col bg-muted p-10 text-white lg:flex dark:border-r">
-        <div className="absolute inset-0 bg-zinc-900" />
+      <div className="absolute right-4 top-4 md:right-8 md:top-8">
+        <ThemeToggle />
+      </div>
+      <div className="relative hidden h-full flex-col bg-muted p-10 text-white dark:border-r lg:flex">
+        <div className="absolute inset-0 bg-zinc-900 dark:bg-zinc-800" />
         <div className="relative z-20 flex items-center text-lg font-medium">
           Next.js Gitee OAuth 示例
         </div>
@@ -19,7 +23,7 @@ export default function Home() {
         </div>
       </div>
       <div className="lg:p-8">
-        <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
+        <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[450px]">
           <div className="flex flex-col space-y-2 text-center">
             <h1 className="text-2xl font-semibold tracking-tight">账号登录</h1>
             <p className="text-sm text-muted-foreground">使用 Gitee 账号登录应用</p>
diff --git a/components/theme-toggle.tsx b/components/theme-toggle.tsx
@@ -0,0 +1,40 @@
+"use client"
+
+import * as React from "react"
+import { Moon, Sun } from "lucide-react"
+import { useTheme } from "next-themes"
+
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+export function ThemeToggle() {
+  const { setTheme } = useTheme()
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="icon">
+          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">切换主题</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme("light")}>
+          浅色
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")}>
+          深色
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("system")}>
+          跟随系统
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+} 
