feat(headerBar): fix style

Author: Labmem-00

app/components/Home/ChanTitle.tsx

@@ -17,6 +17,7 @@ const ChanTitle: React.FC = () => {
 
   const handleMouseEnter = useDebounce(() => {
     setHoverState(true);
+    console.log('ni')
   }, 200);
   const handleMouseLeave = useDebounce(() => {
     setHoverState(false);
@@ -44,13 +45,13 @@ const ChanTitle: React.FC = () => {
     }
     const timerId = setTimeout(() => {
       setAniState(true);
-    }, 300);
+    }, 500);
     return () => clearTimeout(timerId);
   }, [pathName]);
 
   if (!isShow) return null;
   return (
-    <div id="chan-title" className="relative w-full h-28 border-solid border-2">
+    <div id="chan-title" className="relative w-full h-28 ">
       <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 && (
@@ -64,6 +65,7 @@ const ChanTitle: React.FC = () => {
                 alt=""
                 width={80}
                 height={80}
+                layout="intrinsic"
               ></Image>
             </animated.div>
           )}

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

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const Search: React.FC = () => {
+  return <input type="search" className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2" placeholder="Search..."></input>;
+};
+
+export default Search;

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

@@ -1,8 +1,15 @@
 .nav-bar {
-    display: flex;
-    border: 1px solid red;
+  display: flex;
+  position: relative;
+  border: 1px solid red;
 
-    & a {
-        padding: 1rem;
-    }
-}
+  & a {
+    padding: 1rem;
+  }
+}
+
+.chan-header {
+  margin-left: 0.5%;
+  margin-right: 0.5%;
+  border-radius: 12px;
+}

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

@@ -1,8 +1,9 @@
-'use client'
+'use client';
 
 import ChanLink from '@/components/Partial/ChanLink';
 import styles from './headerBar.module.scss';
-import Info from './info';
+import Info from './Info';
+import Search from './Search';
 
 const links = [
   { name: '主页', href: '/' },
@@ -15,15 +16,8 @@ const HeaderBar: React.FC = () => {
   return (
     <header
       id="chan-header"
-      className="flex justify-center items-center sticky top-0 border-2 border-balck border-solid"
+      className={` ${styles['chan-header']} flex items-center sticky top-0 border-2 border-balck border-solid`}
     >
-      {/* <Image
-        className="absolute -z-10 -left-4"
-        src={'/title-png/site-logo.webp'}
-        alt="SteinsGate"
-        width={250}
-        height={65}
-      ></Image> */}
       <nav className={styles['nav-bar']}>
         {links.map((link) => {
           return (
@@ -33,6 +27,7 @@ const HeaderBar: React.FC = () => {
           );
         })}
       </nav>
+      <Search></Search>
       <Info></Info>
     </header>
   );

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

@@ -1,14 +1,18 @@
+import { Icon } from '@iconify/react/dist/iconify.js';
 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 "
+      className="absolute right-4 flex justify-center items-center"
     >
-      <div className="avator">avator</div>
-      <div className="config">config</div>
-      <input type="search" placeholder="Search..."></input>
+      <div className="avator w-10 h-10 m-4 flex justify-center items-center border-solid border-2 border-yellow-300 rounded-full">
+        <button>登录</button>
+      </div>
+      <div className="config">
+        <Icon icon='eos-icons:rotating-gear' width={30} height={30}></Icon>
+      </div>
     </div>
   );
 };

app/global.css

@@ -26,6 +26,10 @@
     text-size-adjust: 100%; /* 禁止 iOS 上文本大小自动调整 */
     text-size-adjust: 100%; /* 禁止 IE 和 Edge 自动调整文本大小 */
     -webkit-tap-highlight-color: rgb(0 0 0 / 0%); /* 移除ios设备上的点击高亮效果 */
+
+    font-synthesis: style;
+    font-size: 16px;
+    word-wrap: break-word;
 }
 
 

app/layout.tsx

@@ -16,7 +16,6 @@ export default function RootLayout({
         <meta name="viewport" content="width=device-width, initial-scale=1" />
       </head>
       <body>
-        
         <div id="chan-root" >
           <ThemeProvider attribute="class" defaultTheme="system">
             <ChanTitle></ChanTitle>

app/server/api/hello/route.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 {