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

12
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,12 +16,8 @@ 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)" }}
animate={{ opacity: 1, filter: "blur(0px)" }}
exit={{ opacity: 0, filter: "blur(10px)" }}
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"
key={tooltipData.country} key={tooltipData.country}
style={{ style={{
left: tooltipData.centroid[0], left: tooltipData.centroid[0],
@ -59,8 +54,7 @@ const MapTooltip = memo(function MapTooltip() {
</div> </div>
))} ))}
</div> </div>
</m.div> </div>
</AnimatePresence>
) )
}) })

0
app/globals.css Normal file
View File

3
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,7 +63,6 @@ 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"
@ -80,7 +78,6 @@ export default async function LocaleLayout({ children }: { children: React.React
</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}{" "}

60
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 <div
key={tab} 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"
onClick={() => setCurrentTab(tab)}
className={cn(
"relative cursor-pointer rounded-3xl px-2.5 py-[8px] text-[13px] font-[600] transition-all duration-500",
currentTab === tab
? "text-black dark:text-white"
: "text-stone-400 dark:text-stone-500",
)}
>
{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={{ style={{
originY: "0px", borderRadius: 24,
borderRadius: 46, 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
key={tab}
ref={(el) => {
tabRefs.current[index] = el
}}
onClick={() => setCurrentTab(tab)}
className={cn(
"relative cursor-pointer rounded-3xl px-2.5 py-[8px] text-[13px] font-[600]",
"transition-all duration-500 ease-in-out text-stone-400 dark:text-stone-500",
{
"text-stone-950 dark:text-stone-50": currentTab === tab,
},
)}
>
<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);
}
}