1

app/components/header/Header.tsx

@@ -4,27 +4,28 @@ export function Header(){
     const [currentTime, setCurrentTime] = useState(new Date());
 
     useEffect(() => {
+        // setInterval是 JavaScript 中的一个全局函数，用于重复执行代码
         const timer = setInterval(() => {
             setCurrentTime(new Date());
         }, 1000); // 每秒更新一次
 
         // 清理定时器
-        return () => clearInterval(timer);
-    }, []);
+        return () => clearInterval(timer);// 只在组件卸载时清理定时器
+    }, []); // 只在组件首次挂载时设置定时器
 
     return (
         <div 
             className="relative w-[1280px] h-[704px] bg-cover bg-center left-1/2 transform -translate-x-1/2"
             style={{ backgroundImage: "url('/app/images/header.png')" }} 
         >
-            {/* 时间显示 */}
+            {/* 时间显示  只显示日期: "2025/3/15"*/}
             <div className="absolute top-4 right-4 mr-40">
                 <div>
-                    {currentTime.toLocaleString('zh-CN')}
+                    {currentTime.toLocaleDateString('zh-CN')} 
                 </div>
             </div>
-            <div className="absolute top-4 right-4 mr-20 cursor-pointer"> 
-                <h2 className="text-lg font-bold" onClick={() => console.log('登录')}>登录</h2>
+            <div className="absolute top-4 right-4 mr-20"> 
+                <h2 className="text-lg font-bold cursor-pointer" onClick={() => console.log('登录')}>登录</h2>
             </div>
             <div className="absolute top-4 right-4 mr-5"> 
                 <h2 className="text-lg font-bold cursor-pointer" onClick={() => console.log('注册')}>注册</h2>

app/routes/news.tsx

@@ -1,5 +1,7 @@
 import { CarouselDemo } from "@/components/untils/Carousel";
 import type { Route } from "./+types/news";
+import { Header } from "@/components/header/Header";
+import { TopNav } from "@/components/header/TopNav";
 
 
 export function meta( ) {
@@ -10,5 +12,11 @@ export function meta( ) {
 }
 
 export default function Home() {
-  return <CarouselDemo />;
+  return (
+    <div>
+      <Header />
+      <TopNav />
+      <CarouselDemo />
+    </div>
+  );
 }