update

2025-12-22 17:31:13 +08:00
parent a8624bd599
commit 479d757d49
7 changed files with 60 additions and 38 deletions
--- a/app/components/Navbar.tsx
+++ b/app/components/Navbar.tsx
@@ -30,18 +30,15 @@ export default function Navbar({ darkMode, onToggleDarkMode }: NavbarProps) {
    return (
        <>
            {/* 桌面端导航栏 */}
-            <nav className="hidden lg:block border-b bg-white/80 dark:bg-gray-900/80 backdrop-blur-md dark:border-gray-700">
+            <nav className="hidden lg:block">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <div className="flex items-center justify-between h-16">
                        {/* Logo */}
                        <div className="flex items-center">
                            <Link href="/" className="flex items-center space-x-2">
-                                <div className="w-8 h-8 rounded-lg bg-blue-600 flex items-center justify-center">
-                                    <Home className="w-5 h-5 text-white" />
-                                </div>
-                                <span className="text-xl font-bold text-gray-900 dark:text-white">
+                                <h1 className="text-2xl font-bold text-black dark:text-white">
                                    漳州太鼓
-                                </span>
+                                </h1>
                            </Link>
                        </div>

@@ -83,7 +80,7 @@ export default function Navbar({ darkMode, onToggleDarkMode }: NavbarProps) {
            </nav>

            {/* 移动端顶部栏 */}
-            <header className="lg:hidden sticky top-0 z-50 border-b bg-white/80 dark:bg-gray-900/80 backdrop-blur-md dark:border-gray-700">
+            <header className="lg:hidden sticky top-0 z-50 border-b bg-white/10 dark:bg-gray-900/10 backdrop-blur-md dark:border-gray-700/50">
                <div className="px-4 py-3">
                    <div className="flex items-center justify-between">
                        <div className="flex items-center gap-3">
--- a/app/components/PhotoDetailModal.tsx
+++ b/app/components/PhotoDetailModal.tsx
@@ -157,7 +157,6 @@ export default function PhotoDetailModal({ photo, isOpen, onClose }: PhotoDetail
                            </div>
                        </div>
                    </div>
-
                </div>
            </div>
        </>
--- a/app/font/华康勘亭流w9.ttf
+++ b/app/font/华康勘亭流w9.ttf
--- a/app/globals.css
+++ b/app/globals.css
@@ -3,24 +3,37 @@
 :root {
  --background: #ffffff;
  --foreground: #171717;
+
+  /* Body 背景变量 - 亮色主题 */
+  --body-bg-color: #FFF7ED;
+  --body-gradient-color-1: #FFF7ED;
+  --body-gradient-color-2: white;
+  --body-gradient-color-3: transparent;
 }

-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
+
+/* 暗色主题变量覆盖 */
+.dark {
+  --background: #0a0a0a;
+  --foreground: #ededed;
+
+  /* Body 背景变量 - 暗色主题 */
+  --body-bg-color: #1a1a1a;
+  --body-gradient-color-1: #2a2a2a;
+  --body-gradient-color-2: #3a3a3a;
+  --body-gradient-color-3: transparent;
 }

-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}

+
+/* Body 样式 - 使用 CSS 变量支持主题切换 */
 body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
-}
+  background-color: var(--body-bg-color);
+  background-image:
+    radial-gradient(circle at 100% 150%, var(--body-gradient-color-1) 24%, var(--body-gradient-color-2) 24%, var(--body-gradient-color-2) 28%, var(--body-gradient-color-1) 28%, var(--body-gradient-color-1) 36%, var(--body-gradient-color-2) 36%, var(--body-gradient-color-2) 40%, var(--body-gradient-color-3) 40%, var(--body-gradient-color-3)),
+    radial-gradient(circle at 0 150%, var(--body-gradient-color-1) 24%, var(--body-gradient-color-2) 24%, var(--body-gradient-color-2) 28%, var(--body-gradient-color-1) 28%, var(--body-gradient-color-1) 36%, var(--body-gradient-color-2) 36%, var(--body-gradient-color-2) 40%, var(--body-gradient-color-3) 40%, var(--body-gradient-color-3)),
+    radial-gradient(circle at 50% 100%, var(--body-gradient-color-2) 10%, var(--body-gradient-color-1) 10%, var(--body-gradient-color-1) 23%, var(--body-gradient-color-2) 23%, var(--body-gradient-color-2) 30%, var(--body-gradient-color-1) 30%, var(--body-gradient-color-1) 43%, var(--body-gradient-color-2) 43%, var(--body-gradient-color-2) 50%, var(--body-gradient-color-1) 50%, var(--body-gradient-color-1) 63%, var(--body-gradient-color-2) 63%, var(--body-gradient-color-2) 71%, var(--body-gradient-color-3) 71%, var(--body-gradient-color-3)),
+    radial-gradient(circle at 100% 50%, var(--body-gradient-color-2) 5%, var(--body-gradient-color-1) 5%, var(--body-gradient-color-1) 15%, var(--body-gradient-color-2) 15%, var(--body-gradient-color-2) 20%, var(--body-gradient-color-1) 20%, var(--body-gradient-color-1) 29%, var(--body-gradient-color-2) 29%, var(--body-gradient-color-2) 34%, var(--body-gradient-color-1) 34%, var(--body-gradient-color-1) 44%, var(--body-gradient-color-2) 44%, var(--body-gradient-color-2) 49%, var(--body-gradient-color-3) 49%, var(--body-gradient-color-3)),
+    radial-gradient(circle at 0 50%, var(--body-gradient-color-2) 5%, var(--body-gradient-color-1) 5%, var(--body-gradient-color-1) 15%, var(--body-gradient-color-2) 15%, var(--body-gradient-color-2) 20%, var(--body-gradient-color-1) 20%, var(--body-gradient-color-1) 29%, var(--body-gradient-color-2) 29%, var(--body-gradient-color-2) 34%, var(--body-gradient-color-1) 34%, var(--body-gradient-color-1) 44%, var(--body-gradient-color-2) 44%, var(--body-gradient-color-2) 49%, var(--body-gradient-color-3) 49%, var(--body-gradient-color-3));
+  background-size: 100px 50px;
+}
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -2,6 +2,13 @@ import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";

+import localFont from 'next/font/local'
+
+const hkktl = localFont({
+  src: './font/华康勘亭流w9.ttf',
+})
+
+
 const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
@@ -25,7 +32,7 @@ export default function RootLayout({
  return (
    <html lang="zh-CN">
      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        className={`${hkktl.className} antialiased`}
      >
        {children}
      </body>
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -9,17 +9,20 @@ export default function HomePage() {

  // 切换暗色模式
  const toggleDarkMode = () => {
-    setDarkMode(!darkMode);
-    if (!darkMode) {
-      document.documentElement.classList.add('dark');
-    } else {
-      document.documentElement.classList.remove('dark');
-    }
+    setDarkMode(prevDarkMode => {
+      const newDarkMode = !prevDarkMode;
+      if (newDarkMode) {
+        document.documentElement.classList.add('dark');
+      } else {
+        document.documentElement.classList.remove('dark');
+      }
+      return newDarkMode;
+    });
  };


  return (
-    <div className={`min-h-screen transition-colors duration-200 ${darkMode ? 'dark bg-gray-900' : 'bg-gray-50'}`}>
+    <div className={`min-h-screen transition-colors duration-200 ${darkMode ? 'dark' : ''}`}>
      {/* 导航栏 */}
      <Navbar darkMode={darkMode} onToggleDarkMode={toggleDarkMode} />

--- a/app/photos/page.tsx
+++ b/app/photos/page.tsx
@@ -105,12 +105,15 @@ export default function PhotosPage() {

    // 切换暗色模式
    const toggleDarkMode = () => {
-        setDarkMode(!darkMode);
-        if (!darkMode) {
-            document.documentElement.classList.add('dark');
-        } else {
-            document.documentElement.classList.remove('dark');
-        }
+        setDarkMode(prevDarkMode => {
+            const newDarkMode = !prevDarkMode;
+            if (newDarkMode) {
+                document.documentElement.classList.add('dark');
+            } else {
+                document.documentElement.classList.remove('dark');
+            }
+            return newDarkMode;
+        });
    };

    // 切换侧边栏收缩状态
@@ -160,7 +163,7 @@ export default function PhotosPage() {
    };

    return (
-        <div className={`min-h-screen transition-colors duration-200 ${darkMode ? 'dark bg-gray-900' : 'bg-gray-50'}`}>
+        <div className={`min-h-screen transition-colors duration-200 ${darkMode ? 'dark' : ''}`}>
            {/* 导航栏 */}
            <Navbar darkMode={darkMode} onToggleDarkMode={toggleDarkMode} />