root/nezha_dash
1
0
Fork 0
mirror of https://github.com/hamster1963/nezha-dash.git synced 2025-04-24 21:10:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

perf: refactor animate

Browse Source
This commit is contained in:
hamster1963 2024-12-31 17:51:32 +08:00
parent a07a70e965
commit 70b328b8d7
10 changed files with 137 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
app/(main)/ClientComponents/main/MapTooltip.tsx
View File

@ -1,6 +1,5 @@
"use client" "use client"
import { AnimatePresence, m } from "framer-motion"
import { useTranslations } from "next-intl" import { useTranslations } from "next-intl"
import { memo } from "react" import { memo } from "react"
@ -17,50 +16,45 @@ const MapTooltip = memo(function MapTooltip() {
}) })
return ( return (
<AnimatePresence mode="wait"> <div
<m.div className="absolute hidden lg:block bg-white dark:bg-neutral-800 px-2 py-1 rounded shadow-lg text-sm dark:border dark:border-neutral-700 z-50 tooltip-animate"
initial={{ opacity: 0, filter: "blur(10px)" }} key={tooltipData.country}
animate={{ opacity: 1, filter: "blur(0px)" }} style={{
exit={{ opacity: 0, filter: "blur(10px)" }} left: tooltipData.centroid[0],
className="absolute hidden lg:block bg-white dark:bg-neutral-800 px-2 py-1 rounded shadow-lg text-sm dark:border dark:border-neutral-700 z-50" top: tooltipData.centroid[1],
key={tooltipData.country} transform: "translate(10%, -50%)",
}}
onMouseEnter={(e) => {
e.stopPropagation()
}}
>
<div>
<p className="font-medium">
{tooltipData.country === "China" ? "Mainland China" : tooltipData.country}
</p>
<p className="text-neutral-600 dark:text-neutral-400 mb-1">
{tooltipData.count} {t("Servers")}
</p>
</div>
<div
className="border-t dark:border-neutral-700 pt-1"
style={{ style={{
left: tooltipData.centroid[0], maxHeight: "200px",
top: tooltipData.centroid[1], overflowY: "auto",
transform: "translate(10%, -50%)",
}}
onMouseEnter={(e) => {
e.stopPropagation()
}} }}
> >
<div> {sortedServers.map((server, index) => (
<p className="font-medium"> <div key={index} className="flex items-center gap-1.5 py-0.5">
{tooltipData.country === "China" ? "Mainland China" : tooltipData.country} <span
</p> className={`w-1.5 h-1.5 shrink-0 rounded-full ${
<p className="text-neutral-600 dark:text-neutral-400 mb-1"> server.status ? "bg-green-500" : "bg-red-500"
{tooltipData.count} {t("Servers")} }`}
</p> ></span>
</div> <span className="text-xs">{server.name}</span>
<div </div>
className="border-t dark:border-neutral-700 pt-1" ))}
style={{ </div>
maxHeight: "200px", </div>
overflowY: "auto",
}}
>
{sortedServers.map((server, index) => (
<div key={index} className="flex items-center gap-1.5 py-0.5">
<span
className={`w-1.5 h-1.5 shrink-0 rounded-full ${
server.status ? "bg-green-500" : "bg-red-500"
}`}
></span>
<span className="text-xs">{server.name}</span>
</div>
))}
</div>
</m.div>
</AnimatePresence>
) )
}) })

0
app/globals.css Normal file
View File

33
app/layout.tsx
View File

@ -1,6 +1,5 @@
// @auto-i18n-check. Please do not delete the line. // @auto-i18n-check. Please do not delete the line.
import { ThemeColorManager } from "@/components/ThemeColorManager" import { ThemeColorManager } from "@/components/ThemeColorManager"
import { MotionProvider } from "@/components/motion/motion-provider"
import getEnv from "@/lib/env-entry" import getEnv from "@/lib/env-entry"
import { FilterProvider } from "@/lib/network-filter-context" import { FilterProvider } from "@/lib/network-filter-context"
import { StatusProvider } from "@/lib/status-context" import { StatusProvider } from "@/lib/status-context"
@ -64,23 +63,21 @@ export default async function LocaleLayout({ children }: { children: React.React
/> />
</head> </head>
<body className={cn("min-h-screen bg-background font-sans antialiased", fontSans.variable)}> <body className={cn("min-h-screen bg-background font-sans antialiased", fontSans.variable)}>
<MotionProvider> <ThemeProvider
<ThemeProvider attribute="class"
attribute="class" defaultTheme="system"
defaultTheme="system" enableSystem
enableSystem disableTransitionOnChange
disableTransitionOnChange >
> <NextIntlClientProvider messages={messages}>
<NextIntlClientProvider messages={messages}> <FilterProvider>
<FilterProvider> <StatusProvider>
<StatusProvider> <ThemeColorManager />
<ThemeColorManager /> {children}
{children} </StatusProvider>
</StatusProvider> </FilterProvider>
</FilterProvider> </NextIntlClientProvider>
</NextIntlClientProvider> </ThemeProvider>
</ThemeProvider>
</MotionProvider>
</body> </body>
</html> </html>
) )

BIN
bun.lockb
View File

Binary file not shown.

51
components/Switch.tsx
View File

@ -2,9 +2,8 @@
import getEnv from "@/lib/env-entry" import getEnv from "@/lib/env-entry"
import { cn } from "@/lib/utils" import { cn } from "@/lib/utils"
import { m } from "framer-motion"
import { useTranslations } from "next-intl" import { useTranslations } from "next-intl"
import React, { createRef, useEffect, useRef } from "react" import React, { createRef, useEffect, useRef, useState } from "react"
export default function Switch({ export default function Switch({
allTag, allTag,
@ -20,6 +19,7 @@ export default function Switch({
const scrollRef = useRef<HTMLDivElement>(null) const scrollRef = useRef<HTMLDivElement>(null)
const tagRefs = useRef(allTag.map(() => createRef<HTMLDivElement>())) const tagRefs = useRef(allTag.map(() => createRef<HTMLDivElement>()))
const t = useTranslations("ServerListClient") const t = useTranslations("ServerListClient")
const [indicator, setIndicator] = useState<{ x: number; w: number }>({ x: 0, w: 0 })
useEffect(() => { useEffect(() => {
const savedTag = sessionStorage.getItem("selectedTag") const savedTag = sessionStorage.getItem("selectedTag")
@ -48,42 +48,49 @@ export default function Switch({
}, []) }, [])
useEffect(() => { useEffect(() => {
const currentTagRef = tagRefs.current[allTag.indexOf(nowTag)] const currentTagElement = tagRefs.current[allTag.indexOf(nowTag)]?.current
if (currentTagRef && currentTagRef.current) { if (currentTagElement) {
currentTagRef.current.scrollIntoView({ const parentPadding = 1
behavior: "smooth", setIndicator({
block: "nearest", x:
inline: "center", allTag.indexOf(nowTag) !== 0
? currentTagElement.offsetLeft - parentPadding
: currentTagElement.offsetLeft,
w: currentTagElement.offsetWidth,
}) })
} }
}, [nowTag]) }, [nowTag, allTag])
return ( return (
<div <div
ref={scrollRef} ref={scrollRef}
className="scrollbar-hidden z-50 flex flex-col items-start overflow-x-scroll rounded-[50px]" className="scrollbar-hidden z-50 flex flex-col items-start overflow-x-scroll rounded-[50px]"
> >
<div className="flex items-center gap-1 rounded-[50px] bg-stone-100 p-[3px] dark:bg-stone-800"> <div className="relative flex items-center gap-1 rounded-[50px] bg-stone-100 p-[3px] dark:bg-stone-800">
{indicator.w > 0 && (
<div
className="absolute top-[3px] left-0 z-10 h-[35px] bg-white shadow-lg shadow-black/5 dark:bg-stone-700 dark:shadow-white/5"
style={{
borderRadius: 24,
width: `${indicator.w}px`,
transform: `translateX(${indicator.x}px)`,
transition: "all 0.5s cubic-bezier(0.4, 0, 0.2, 1)",
}}
/>
)}
{allTag.map((tag, index) => ( {allTag.map((tag, index) => (
<div <div
key={tag} key={tag}
ref={tagRefs.current[index]} ref={tagRefs.current[index]}
onClick={() => onTagChange(tag)} onClick={() => onTagChange(tag)}
className={cn( className={cn(
"relative cursor-pointer rounded-3xl px-2.5 py-[8px] text-[13px] font-[600] transition-all duration-500", "relative cursor-pointer rounded-3xl px-2.5 py-[8px] text-[13px] font-[600]",
nowTag === tag ? "text-black dark:text-white" : "text-stone-400 dark:text-stone-500", "transition-all duration-500 ease-in-out text-stone-400 dark:text-stone-500",
{
"text-stone-950 dark:text-stone-50": nowTag === tag,
},
)} )}
> >
{nowTag === tag && (
<m.div
layoutId="nav-item"
className="absolute inset-0 z-10 h-full w-full content-center bg-white shadow-lg shadow-black/5 dark:bg-stone-700 dark:shadow-white/5"
style={{
originY: "0px",
borderRadius: 46,
}}
/>
)}
<div className="relative z-20 flex items-center gap-1"> <div className="relative z-20 flex items-center gap-1">
<div className="whitespace-nowrap flex items-center gap-2"> <div className="whitespace-nowrap flex items-center gap-2">
{tag === "defaultTag" ? t("defaultTag") : tag}{" "} {tag === "defaultTag" ? t("defaultTag") : tag}{" "}

58
components/TabSwitch.tsx
View File

@ -1,9 +1,8 @@
"use client" "use client"
import { cn } from "@/lib/utils" import { cn } from "@/lib/utils"
import { m } from "framer-motion"
import { useTranslations } from "next-intl" import { useTranslations } from "next-intl"
import React from "react" import React, { useEffect, useRef, useState } from "react"
export default function TabSwitch({ export default function TabSwitch({
tabs, tabs,
@ -15,30 +14,53 @@ export default function TabSwitch({
setCurrentTab: (tab: string) => void setCurrentTab: (tab: string) => void
}) { }) {
const t = useTranslations("TabSwitch") const t = useTranslations("TabSwitch")
const [indicator, setIndicator] = useState<{ x: number; w: number }>({ x: 0, w: 0 })
const tabRefs = useRef<(HTMLDivElement | null)[]>([])
useEffect(() => {
const currentTabElement = tabRefs.current[tabs.indexOf(currentTab)]
if (currentTabElement) {
// 考虑父元素的padding和gap
const parentPadding = 1 // p-[3px]
setIndicator({
x:
tabs.indexOf(currentTab) !== 0
? currentTabElement.offsetLeft - parentPadding
: currentTabElement.offsetLeft,
w: currentTabElement.offsetWidth,
})
}
}, [currentTab, tabs])
return ( return (
<div className="z-50 flex flex-col items-start rounded-[50px]"> <div className="z-50 flex flex-col items-start rounded-[50px]">
<div className="flex items-center gap-1 rounded-[50px] bg-stone-100 p-[3px] dark:bg-stone-800"> <div className="relative flex items-center gap-1 rounded-[50px] bg-stone-100 p-[3px] dark:bg-stone-800">
{tabs.map((tab: string) => ( {indicator.w > 0 && (
<div
className="absolute top-[3px] left-0 z-10 h-[35px] bg-white shadow-lg shadow-black/5 dark:bg-stone-700 dark:shadow-white/5"
style={{
borderRadius: 24,
width: `${indicator.w}px`,
transform: `translateX(${indicator.x}px)`,
transition: "all 0.5s cubic-bezier(0.4, 0, 0.2, 1)",
}}
/>
)}
{tabs.map((tab: string, index) => (
<div <div
key={tab} key={tab}
ref={(el) => {
tabRefs.current[index] = el
}}
onClick={() => setCurrentTab(tab)} onClick={() => setCurrentTab(tab)}
className={cn( className={cn(
"relative cursor-pointer rounded-3xl px-2.5 py-[8px] text-[13px] font-[600] transition-all duration-500", "relative cursor-pointer rounded-3xl px-2.5 py-[8px] text-[13px] font-[600]",
currentTab === tab "transition-all duration-500 ease-in-out text-stone-400 dark:text-stone-500",
? "text-black dark:text-white" {
: "text-stone-400 dark:text-stone-500", "text-stone-950 dark:text-stone-50": currentTab === tab,
},
)} )}
> >
{currentTab === tab && (
<m.div
layoutId="tab-switch"
className="absolute inset-0 z-10 h-full w-full content-center bg-white shadow-lg shadow-black/5 dark:bg-stone-700 dark:shadow-white/5"
style={{
originY: "0px",
borderRadius: 46,
}}
/>
)}
<div className="relative z-20 flex items-center gap-1"> <div className="relative z-20 flex items-center gap-1">
<p className="whitespace-nowrap">{t(tab)}</p> <p className="whitespace-nowrap">{t(tab)}</p>
</div> </div>

1
components/motion/framer-lazy-feature.ts
View File

@ -1 +0,0 @@
export { domMax as default } from "framer-motion"

13
components/motion/motion-provider.tsx
View File

@ -1,13 +0,0 @@
"use client"
import { LazyMotion } from "framer-motion"
const loadFeatures = () => import("./framer-lazy-feature").then((res) => res.default)
export const MotionProvider = ({ children }: { children: React.ReactNode }) => {
return (
<LazyMotion features={loadFeatures} strict key="framer">
{children}
</LazyMotion>
)
}

1
package.json
View File

@ -40,7 +40,6 @@
"d3-selection": "^3.0.0", "d3-selection": "^3.0.0",
"eslint-plugin-simple-import-sort": "^12.1.1", "eslint-plugin-simple-import-sort": "^12.1.1",
"flag-icons": "^7.2.3", "flag-icons": "^7.2.3",
"framer-motion": "^12.0.0-alpha.2",
"lucide-react": "^0.454.0", "lucide-react": "^0.454.0",
"luxon": "^3.5.0", "luxon": "^3.5.0",
"maxmind": "^4.3.23", "maxmind": "^4.3.23",

17
styles/globals.css
View File

@ -317,3 +317,20 @@
.scrollbar-hidden::-webkit-scrollbar { .scrollbar-hidden::-webkit-scrollbar {
display: none; /* Chrome, Safari 和 Opera */ display: none; /* Chrome, Safari 和 Opera */
} }
.tooltip-animate {
opacity: 0;
filter: blur(10px);
animation: tooltip-fade-in 0.2s ease-in-out forwards;
}
@keyframes tooltip-fade-in {
from {
opacity: 0;
filter: blur(10px);
}
to {
opacity: 1;
filter: blur(0px);
}
}