75 lines
2.2 KiB
TypeScript
75 lines
2.2 KiB
TypeScript
"use client";
|
||
|
||
import { motion } from "framer-motion";
|
||
import { useSession } from "next-auth/react";
|
||
import { useEffect, useState } from "react";
|
||
|
||
export const Greeting = () => {
|
||
const { data: session } = useSession();
|
||
const [imageCount, setImageCount] = useState<number | null>(null);
|
||
|
||
// 获取用户名或邮箱前缀
|
||
const getUserDisplayName = () => {
|
||
if (session?.user?.name) {
|
||
return session.user.name;
|
||
}
|
||
if (session?.user?.email) {
|
||
// 如果没有名字，使用邮箱的前缀部分
|
||
return session.user.email.split('@')[0];
|
||
}
|
||
return "";
|
||
};
|
||
|
||
const displayName = getUserDisplayName();
|
||
|
||
// 获取用户生图统计数据
|
||
useEffect(() => {
|
||
const fetchImageStats = async () => {
|
||
try {
|
||
const response = await fetch("/api/user/image-stats");
|
||
if (response.ok) {
|
||
const data = await response.json();
|
||
setImageCount(data.totalImages);
|
||
}
|
||
} catch (error) {
|
||
console.error("Failed to fetch image stats:", error);
|
||
}
|
||
};
|
||
|
||
if (session?.user?.id) {
|
||
fetchImageStats();
|
||
}
|
||
}, [session?.user?.id]);
|
||
|
||
return (
|
||
<div
|
||
className="mx-auto mt-4 flex size-full max-w-3xl flex-col justify-center px-4 md:mt-16 md:px-8"
|
||
key="overview"
|
||
>
|
||
<motion.div
|
||
animate={{ opacity: 1, y: 0 }}
|
||
className="font-semibold text-xl md:text-2xl"
|
||
exit={{ opacity: 0, y: 10 }}
|
||
initial={{ opacity: 0, y: 10 }}
|
||
transition={{ delay: 0.5 }}
|
||
>
|
||
你好{displayName && `，${displayName}`}，很高兴见到你
|
||
{imageCount !== null && imageCount > 0 && (
|
||
<span className="ml-2 text-base font-normal text-zinc-500">
|
||
（截止今日已为您处理 <span className="font-semibold text-green-600">{imageCount.toLocaleString()}</span> 张图）
|
||
</span>
|
||
)}
|
||
</motion.div>
|
||
<motion.div
|
||
animate={{ opacity: 1, y: 0 }}
|
||
className="text-xl text-zinc-500 md:text-2xl"
|
||
exit={{ opacity: 0, y: 10 }}
|
||
initial={{ opacity: 0, y: 10 }}
|
||
transition={{ delay: 0.6 }}
|
||
>
|
||
今天我能为你做些什么？
|
||
</motion.div>
|
||
</div>
|
||
);
|
||
};
|