save

app/(main)/page.tsx

@@ -5,6 +5,7 @@ import { getLinkTypeList } from "../_lib/data/linkType";
 import { getLinkList } from "../_lib/data/link";
 import Footer from "../_ui/footer";
 import { Suspense } from "react";
+import CustomAffix from "../_ui/CustomAffix";
 
 export default async function Page() {
 
@@ -21,6 +22,7 @@ export default async function Page() {
             <Search></Search>
           </Suspense>
           <LinkListBox linkList={linkList} linkTypeList={linkTypeList} showHot showRecent></LinkListBox>
+          <CustomAffix></CustomAffix>
         </main>
         <Footer></Footer>
       </div>

app/_lib/atom.ts

@@ -1,4 +1,5 @@
 import { atom } from 'jotai';
+import { atomWithStorage } from "jotai/utils";
 
-// 定义一个简单的原子
+export const themeAtom = atomWithStorage('theme', 'light')
 export const linkTypeAtom = atom('');

app/_ui/CustomAffix.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { faArrowUp, faArrowUp91, faArrowUpAZ, faArrowUpShortWide, faChessKnight, faMoon, faSun, faUpLong } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useAtom } from "jotai";
+import { useEffect, useState } from "react";
+import { themeAtom } from "../_lib/atom";
+import { Tooltip } from "antd";
+
+
+export default function CustomAffix() {
+    const [show, setShow] = useState(false);
+    const [theme, setTheme] = useAtom(themeAtom)
+    const handleScroll = () => {
+        const distance = {
+            x: document.documentElement.scrollLeft || document.body.scrollLeft,
+            y: document.documentElement.scrollTop || document.body.scrollTop
+        };
+        console.log(distance);
+        if (distance.y > 600) {
+            setShow(true);
+        } else {
+            setShow(false)
+        }
+    };
+
+    useEffect(() => {
+        window.addEventListener('scroll', handleScroll);
+        return () => {
+            window.removeEventListener('scroll', handleScroll);
+        };
+    }, []);
+    return (
+        <div className="fixed  z-10 bottom-10 right-10 flex flex-col gap-y-2 p-2 rounded-xl ">
+            {
+                show &&
+                <div
+                    onClick={() => {
+                        window.scrollTo({ top: 0, behavior: "smooth" });
+                    }}
+                    className="w-[40px] h-[40px]  group  bg-[#000]/20 backdrop-blur-md  cursor-pointer hover:scale-105 duration-150  rounded-full flex justify-center items-center">
+                    <FontAwesomeIcon icon={faArrowUp} className="text-[#666] group-hover:text-[#333]"></FontAwesomeIcon>
+                </div>
+
+            }
+            <Tooltip title={theme === 'light' ? "深色模式" : "浅色模式"} placement="left">
+                <div
+                    onClick={() => {
+                        if (theme === "dark") {
+                            setTheme("light")
+                        } else {
+                            setTheme("dark")
+
+                        }
+                    }}
+                    className="w-[40px] h-[40px]  group  bg-[#000]/20 backdrop-blur-md  cursor-pointer hover:scale-105 duration-150  rounded-full flex justify-center items-center">
+                    <FontAwesomeIcon icon={theme === 'dark' ? faSun : faMoon} className="text-[#666] group-hover:text-[#333]"></FontAwesomeIcon>
+                </div>
+            </Tooltip>
+
+        </div>
+    )
+}

app/_ui/SiderNav.tsx

@@ -13,7 +13,7 @@ export default function SiderNav({ linkList }: { linkList: LinkType[] }) {
     const [, setSelectType] = useAtom(linkTypeAtom)
     
     return (
-        <div className="w-[220px] flex flex-col gap-y-2 fixed left-0 top-0 h-[100vh]  bg-[#F9F9F9]">
+        <div className="w-[220px] flex flex-col gap-y-2 fixed left-0 top-0 h-[100vh]  bg-[#F9F9F9] dark:bg-slate-600">
             <div className="bg-white ">
                 <Logo />
             </div>

app/layout.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import "./globals.css";
 import '@fortawesome/fontawesome-svg-core/styles.css'
 import '@ant-design/v5-patch-for-react-19';
+import Store from "./store";
 export const metadata: Metadata = {
   title: "Create Next App",
   description: "Generated by create next app",
@@ -19,6 +20,7 @@ export default function RootLayout({
       >
         {children}
       </body>
+      <Store></Store>
     </html>
   );
 }

app/store.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { useAtom } from "jotai";
+import { themeAtom } from "./_lib/atom";
+import { useEffect } from "react";
+
+export default function Store() {
+    const [theme] = useAtom(themeAtom)
+
+    useEffect(() => {
+        const root = document.documentElement
+        console.log('theme: ' + theme);
+
+        if (theme === 'dark') {
+            root.classList.add('dark')
+        } else {
+            root.classList.remove('dark')
+        }
+    }, [theme])
+    return ''
+}

tailwind.config.ts

@@ -15,4 +15,5 @@ export default {
     },
   },
   plugins: [],
+  darkMode: 'selector'
 } satisfies Config;