From 7fc4728c3cea9166a5986becf55f6f79418d0ca2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9F=B3=E6=B8=85=E7=88=BD?= <eison.icu@gmail.com>
Date: Thu, 10 Apr 2025 16:52:05 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B6=85=E7=BA=A7=E6=80=BB=E7=AE=A1=20-=20?=
 =?UTF-8?q?=E5=9C=A8=E4=BB=AA=E8=A1=A8=E7=9B=98=E6=98=BE=E7=A4=BA=E9=97=AE?=
 =?UTF-8?q?=E5=80=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 SuperAdmin/app/dashboard/page.tsx    | 47 +++++++++++++++-------------
 SuperAdmin/components/ClientOnly.tsx | 18 +++++++++++
 SuperAdmin/lib/utils.ts              | 25 +++++++++++++++
 3 files changed, 69 insertions(+), 21 deletions(-)
 create mode 100644 SuperAdmin/components/ClientOnly.tsx

diff --git a/SuperAdmin/app/dashboard/page.tsx b/SuperAdmin/app/dashboard/page.tsx
index a183c5b7..c3fb6c2d 100644
--- a/SuperAdmin/app/dashboard/page.tsx
+++ b/SuperAdmin/app/dashboard/page.tsx
@@ -4,6 +4,8 @@ import { useEffect, useState } from "react"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { Users, FolderKanban, UserCog } from "lucide-react"
 import useAuthCheck from "@/hooks/useAuthCheck"
+import { getAdminInfo, getGreeting } from "@/lib/utils"
+import ClientOnly from "@/components/ClientOnly"
 
 export default function DashboardPage() {
   const [greeting, setGreeting] = useState("")
@@ -14,36 +16,39 @@ export default function DashboardPage() {
 
   useEffect(() => {
     // 获取用户信息
-    const adminInfo = localStorage.getItem("admin_info")
+    const adminInfo = getAdminInfo()
     if (adminInfo) {
-      try {
-        const userData = JSON.parse(adminInfo)
-        setUserName(userData.name || "管理员")
-      } catch (err) {
-        console.error("解析用户信息失败:", err)
-        setUserName("管理员")
-      }
-    }
-
-    // 获取当前时间
-    const hour = new Date().getHours()
-    
-    if (hour >= 5 && hour < 12) {
-      setGreeting("上午好")
-    } else if (hour >= 12 && hour < 14) {
-      setGreeting("中午好")
-    } else if (hour >= 14 && hour < 18) {
-      setGreeting("下午好")
+      setUserName(adminInfo.name || "管理员")
     } else {
-      setGreeting("晚上好")
+      setUserName("管理员")
     }
   }, [])
 
+  // 单独处理问候语，避免依赖问题
+  useEffect(() => {
+    // 设置问候语
+    const updateGreeting = () => {
+      if (userName) {
+        setGreeting(getGreeting(userName))
+      }
+    }
+    
+    updateGreeting()
+    
+    // 每分钟更新一次问候语，以防用户长时间停留在页面
+    const interval = setInterval(updateGreeting, 60000)
+    
+    return () => clearInterval(interval)
+  }, [userName])
+
   return (
     <div className="space-y-6">
       <h1 className="text-3xl font-bold">欢迎使用超级管理员后台</h1>
       <p className="text-muted-foreground">
-        {greeting}，{userName}！通过此平台，您可以管理项目、客户和管理员权限。
+        <ClientOnly fallback={`你好，${userName}！`}>
+          {greeting || getGreeting(userName)}
+        </ClientOnly>
+        ！通过此平台，您可以管理项目、客户和管理员权限。
       </p>
 
       <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
diff --git a/SuperAdmin/components/ClientOnly.tsx b/SuperAdmin/components/ClientOnly.tsx
new file mode 100644
index 00000000..e61b5e31
--- /dev/null
+++ b/SuperAdmin/components/ClientOnly.tsx
@@ -0,0 +1,18 @@
+"use client"
+
+import { useState, useEffect, type ReactNode } from 'react'
+
+/**
+ * ClientOnly组件
+ * 该组件专门用于包装那些只能在客户端渲染的内容，避免水合不匹配错误
+ * 例如：使用了Date.now()或window对象的组件
+ */
+export default function ClientOnly({ children, fallback = null }: { children: ReactNode, fallback?: ReactNode }) {
+  const [isClient, setIsClient] = useState(false)
+
+  useEffect(() => {
+    setIsClient(true)
+  }, [])
+
+  return isClient ? <>{children}</> : <>{fallback}</>
+} 
\ No newline at end of file
diff --git a/SuperAdmin/lib/utils.ts b/SuperAdmin/lib/utils.ts
index 3f401632..eed8e96b 100644
--- a/SuperAdmin/lib/utils.ts
+++ b/SuperAdmin/lib/utils.ts
@@ -73,3 +73,28 @@ export function clearAdminInfo(): void {
     localStorage.removeItem('admin_token');
   }
 }
+
+/**
+ * 根据当前时间获取问候语
+ * @param username 用户名
+ * @returns 包含时间段的问候语
+ */
+export function getGreeting(username: string): string {
+  if (typeof window === 'undefined') {
+    return `你好，${username}`;
+  }
+  
+  const hours = new Date().getHours();
+  
+  if (hours >= 0 && hours < 6) {
+    return `凌晨好，${username}`;
+  } else if (hours >= 6 && hours < 12) {
+    return `上午好，${username}`;
+  } else if (hours >= 12 && hours < 14) {
+    return `中午好，${username}`;
+  } else if (hours >= 14 && hours < 18) {
+    return `下午好，${username}`;
+  } else {
+    return `晚上好，${username}`;
+  }
+}