diff --git a/app/[locale]/(main)/ClientComponents/ServerDetailChartClient.tsx b/app/[locale]/(main)/ClientComponents/ServerDetailChartClient.tsx index fc4f434..efeb2a2 100644 --- a/app/[locale]/(main)/ClientComponents/ServerDetailChartClient.tsx +++ b/app/[locale]/(main)/ClientComponents/ServerDetailChartClient.tsx @@ -1,7 +1,7 @@ "use client"; import { ServerDetailChartLoading } from "@/app/[locale]/(main)/ClientComponents/ServerDetailLoading"; -import { NezhaAPISafe } from "@/app/[locale]/types/nezha-api"; +import { NezhaAPISafe, ServerApi } from "@/app/[locale]/types/nezha-api"; import AnimatedCircularProgressBar from "@/components/ui/animated-circular-progress-bar"; import { Card, CardContent } from "@/components/ui/card"; import { ChartConfig, ChartContainer } from "@/components/ui/chart"; @@ -19,6 +19,7 @@ import { YAxis, } from "recharts"; import useSWR from "swr"; +import useSWRImmutable from "swr/immutable"; type cpuChartData = { timeStamp: string; @@ -62,12 +63,23 @@ export default function ServerDetailChartClient({ }) { const t = useTranslations("ServerDetailChartClient"); + const { data: allFallbackData } = useSWRImmutable( + "/api/server", + nezhaFetcher, + ); + const fallbackData = allFallbackData?.result?.find( + (item) => item.id === server_id, + ); + const { data, error } = useSWR( `/api/detail?server_id=${server_id}`, nezhaFetcher, { refreshInterval: Number(getEnv("NEXT_PUBLIC_NezhaFetchInterval")) || 5000, isVisible: () => show, + fallbackData, + revalidateOnMount: false, + revalidateIfStale: false, }, ); diff --git a/app/[locale]/(main)/ClientComponents/ServerDetailClient.tsx b/app/[locale]/(main)/ClientComponents/ServerDetailClient.tsx index 55a3e52..a3236d7 100644 --- a/app/[locale]/(main)/ClientComponents/ServerDetailClient.tsx +++ b/app/[locale]/(main)/ClientComponents/ServerDetailClient.tsx @@ -1,7 +1,7 @@ "use client"; import { ServerDetailLoading } from "@/app/[locale]/(main)/ClientComponents/ServerDetailLoading"; -import { NezhaAPISafe } from "@/app/[locale]/types/nezha-api"; +import { NezhaAPISafe, ServerApi } from "@/app/[locale]/types/nezha-api"; import { BackIcon } from "@/components/Icon"; import ServerFlag from "@/components/ServerFlag"; import { Badge } from "@/components/ui/badge"; @@ -12,6 +12,7 @@ import { useLocale, useTranslations } from "next-intl"; import { useRouter } from "next/navigation"; import { useEffect, useState } from "react"; import useSWR from "swr"; +import useSWRImmutable from "swr/immutable"; export default function ServerDetailClient({ server_id, @@ -46,11 +47,22 @@ export default function ServerDetailClient({ } }; + const { data: allFallbackData } = useSWRImmutable( + "/api/server", + nezhaFetcher, + ); + const fallbackData = allFallbackData?.result?.find( + (item) => item.id === server_id, + ); + const { data, error } = useSWR( `/api/detail?server_id=${server_id}`, nezhaFetcher, { refreshInterval: Number(getEnv("NEXT_PUBLIC_NezhaFetchInterval")) || 5000, + fallbackData, + revalidateOnMount: false, + revalidateIfStale: false, }, ); diff --git a/app/[locale]/(main)/header.tsx b/app/[locale]/(main)/header.tsx index 82177d0..f3a6e9e 100644 --- a/app/[locale]/(main)/header.tsx +++ b/app/[locale]/(main)/header.tsx @@ -26,6 +26,7 @@ function Header() {
{ + sessionStorage.removeItem("selectedTag"); router.push(`/${locale}/`); }} className="flex cursor-pointer items-center text-base font-medium" diff --git a/components/Switch.tsx b/components/Switch.tsx index 8db919a..1a83a6c 100644 --- a/components/Switch.tsx +++ b/components/Switch.tsx @@ -2,7 +2,7 @@ import { cn } from "@/lib/utils"; import { motion } from "framer-motion"; -import React, { useEffect, useRef, useState } from "react"; +import React, { createRef, useEffect, useRef, useState } from "react"; export default function Switch({ allTag, @@ -14,6 +14,7 @@ export default function Switch({ onTagChange: (tag: string) => void; }) { const scrollRef = useRef(null); + const tagRefs = useRef(allTag.map(() => createRef())); useEffect(() => { const savedTag = sessionStorage.getItem("selectedTag"); @@ -41,15 +42,27 @@ export default function Switch({ }; }, []); + useEffect(() => { + const currentTagRef = tagRefs.current[allTag.indexOf(nowTag)]; + if (currentTagRef && currentTagRef.current) { + currentTagRef.current.scrollIntoView({ + behavior: "smooth", + block: "nearest", + inline: "center", + }); + } + }, [nowTag]); + return (
- {allTag.map((tag) => ( + {allTag.map((tag, index) => (
onTagChange(tag)} className={cn( "relative cursor-pointer rounded-3xl px-2.5 py-[8px] text-[13px] font-[600] transition-all duration-500",