feat(api): api路由重定向

Author: Labmem-00

.husky/pre-push

@@ -0,0 +1 @@
+pnpm run build

app/components/Home/ChanTitle.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useSpring, animated } from '@react-spring/web';
+import { usePathname } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
 import Image from 'next/image';
 import { Press_Start_2P } from 'next/font/google';
@@ -11,12 +12,15 @@ const ChanTitle: React.FC = () => {
   const [aniState, setAniState] = useState(false);
   const [hoverState, setHoverState] = useState(false); // 用来控制鼠标悬浮时显示图片3
 
+  const [isShow, setIsShow] = useState(false);
+  const pathName = usePathname();
+
   const handleMouseEnter = useDebounce(() => {
-      setHoverState(true) 
-  },200) 
+    setHoverState(true);
+  }, 200);
   const handleMouseLeave = useDebounce(() => {
-    setHoverState(false) 
-  },200)
+    setHoverState(false);
+  }, 200);
 
   const propsImg = useSpring({
     from: { opacity: 0, transform: 'translateY(30px)' },
@@ -33,34 +37,41 @@ const ChanTitle: React.FC = () => {
   });
 
   useEffect(() => {
+    if (pathName === '/') {
+      setIsShow(true);
+    } else {
+      setIsShow(false);
+    }
     const timerId = setTimeout(() => {
       setAniState(true);
     }, 300);
     return () => clearTimeout(timerId);
-  }, []);
+  }, [pathName]);
+
+  if (!isShow) return null;
   return (
-    <div className="absolute flex top-8 left-1/2 text-4xl font-extrabold transform -translate-x-1/2">
-      <span className="relative bottom-4">
-        {aniState && (
-          <animated.div style={propsImg}>
-            <Image
-              onMouseEnter={handleMouseEnter}
-              onMouseLeave={handleMouseLeave}
-              src={
-                hoverState
-                  ? '/title-png/title1.png' 
-                  : '/title-png/title2.png' 
-              } 
-              alt=""
-              width={80}
-              height={80}
-            ></Image>
-          </animated.div>
-        )}
-      </span>
-      <animated.span className={banger.className} style={propsText}>
-        @CHAN
-      </animated.span>
+    <div id="chan-title" className="relative w-full h-28 border-solid border-2">
+      <div className="absolute flex top-8 left-1/2 text-4xl font-extrabold transform -translate-x-1/2">
+        <span className="relative bottom-4 hidden xs:block">
+          {aniState && (
+            <animated.div style={propsImg}>
+              <Image
+                onMouseEnter={handleMouseEnter}
+                onMouseLeave={handleMouseLeave}
+                src={
+                  hoverState ? '/title-png/title1.png' : '/title-png/title2.png'
+                }
+                alt=""
+                width={80}
+                height={80}
+              ></Image>
+            </animated.div>
+          )}
+        </span>
+        <animated.span className={banger.className} style={propsText}>
+          @CHAN
+        </animated.span>
+      </div>
     </div>
   );
 };

app/components/Home/Nav/HeaderBar/headerBar.module.scss

@@ -1,7 +1,8 @@
-.nav-bar{
+.nav-bar {
     display: flex;
     border: 1px solid red;
-    & a{
+
+    & a {
         padding: 1rem;
     }
 }

app/components/Home/Nav/HeaderBar/index.tsx

@@ -1,7 +1,8 @@
-'use client';
+'use client'
+
 import ChanLink from '@/components/Partial/ChanLink';
 import styles from './headerBar.module.scss';
-import Image from 'next/image';
+import Info from './info';
 
 const links = [
   { name: '主页', href: '/' },
@@ -16,13 +17,13 @@ const HeaderBar: React.FC = () => {
       id="chan-header"
       className="flex justify-center items-center sticky top-0 border-2 border-balck border-solid"
     >
-      <Image
+      {/* <Image
         className="absolute -z-10 -left-4"
         src={'/title-png/site-logo.webp'}
         alt="SteinsGate"
         width={250}
         height={65}
-      ></Image>
+      ></Image> */}
       <nav className={styles['nav-bar']}>
         {links.map((link) => {
           return (
@@ -32,14 +33,7 @@ const HeaderBar: React.FC = () => {
           );
         })}
       </nav>
-      <div
-        id="header-func"
-        className="absolute right-0 flex justify-center border-2 gap-4 border-solid border-green "
-      >
-        <div className='avator'>avator</div>
-        <div className='config'>config</div>
-        <input type="search" placeholder="Search..."></input>
-      </div>
+      <Info></Info>
     </header>
   );
 };

app/components/Home/Nav/HeaderBar/info.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+const Info: React.FC = () => {
+  return (
+    <div
+      id="header-info"
+      className="absolute right-0 flex justify-center border-2 gap-4 border-solid border-green "
+    >
+      <div className="avator">avator</div>
+      <div className="config">config</div>
+      <input type="search" placeholder="Search..."></input>
+    </div>
+  );
+};
+
+export default Info;

app/layout.tsx

@@ -16,19 +16,20 @@ export default function RootLayout({
         <meta name="viewport" content="width=device-width, initial-scale=1" />
       </head>
       <body>
-        <ChanTitle></ChanTitle>
-        <div id="chan-root" className='mt-28'>
+        
+        <div id="chan-root" >
           <ThemeProvider attribute="class" defaultTheme="system">
+            <ChanTitle></ChanTitle>
             <HeaderBar></HeaderBar>   
             <div id='chan' className="flex justify-center gap-4 min-w-0">
               <SkipLink></SkipLink>
-              {/* <aside></aside> */}
+              <aside></aside>
               <div id="content">
                 <main id="main-content">
                   {children}      
                   <footer>footer</footer>
                 </main>
-                {/* <aside id="r-aside"></aside> */}
+                <aside id="r-aside"></aside>
               </div>
             </div>
           </ThemeProvider>

app/models/testModel.ts renamed to app/lib/models/testModel.ts

@@ -1,5 +1,5 @@
-import { mongoDB } from '../../lib/mongoose';
-import redis from '../../lib/redis';
+import { mongoDB } from '../../../lib/mongoose';
+import redis from '../../../lib/redis';
 export async function GET() {
   const key = 'my_key';
   try {

app/api/hello/route.ts renamed to app/server/api/hello/route.ts

@@ -19,6 +19,7 @@ main {
 
 #content {
     display: flex;
+
     // flex-grow: 1;
     gap: 1rem;
     width: 1080px;

app/styles/main.scss

@@ -1,6 +1,14 @@
 import type { NextConfig } from 'next';
 
 const nextConfig: NextConfig = {
+  async rewrites() {
+    return [
+      {
+        source: '/api/:path*', 
+        destination: '/server/api/:path*', // 将`/api`重定向到 `/server/api` 路径
+      },
+    ];
+  },
 };
 
 export default nextConfig;

next.config.ts

@@ -34,6 +34,7 @@
     "@types/react": "^18.3.14",
     "@types/react-dom": "^18.3.2",
     "@zinkawaii/stylelint-config": "^0.2.2",
+    "clsx": "^2.1.1",
     "eslint": "8.57.0",
     "eslint-config-next": "15.0.3",
     "husky": "^9.1.7",

package.json

@@ -8,7 +8,11 @@ export default {
     './app/**/*.{js,ts,jsx,tsx,mdx}',
   ],
   theme: {
-    extend: {},
+    extend: {
+      screens:{
+        'xs': '480px'
+      }
+    },
   },
   plugins: [],
 } satisfies Config;