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

refactor: improve Switch component state management and initial render handling

Browse Source
This commit is contained in:
hamster1963 2025-03-25 16:53:20 +08:00
parent 80c4500822
commit e2d1ee5139
3 changed files with 12 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
bun.lockb
View File

Binary file not shown.

18
components/Switch.tsx
View File

@ -20,10 +20,8 @@ export default function Switch({
const tagRefs = useRef(allTag.map(() => createRef<HTMLDivElement>())) const tagRefs = useRef(allTag.map(() => createRef<HTMLDivElement>()))
const t = useTranslations("ServerListClient") const t = useTranslations("ServerListClient")
const locale = useLocale() const locale = useLocale()
const [indicator, setIndicator] = useState<{ x: number; w: number }>({ const [indicator, setIndicator] = useState<{ x: number; w: number } | null>(null)
x: 0, const [isFirstRender, setIsFirstRender] = useState(true)
w: 0,
})
useEffect(() => { useEffect(() => {
const savedTag = sessionStorage.getItem("selectedTag") const savedTag = sessionStorage.getItem("selectedTag")
@ -59,7 +57,13 @@ export default function Switch({
w: currentTagElement.offsetWidth, w: currentTagElement.offsetWidth,
}) })
} }
}, [nowTag, locale])
if (isFirstRender) {
setTimeout(() => {
setIsFirstRender(false)
}, 50)
}
}, [nowTag, locale, allTag, isFirstRender])
useEffect(() => { useEffect(() => {
const currentTagElement = tagRefs.current[allTag.indexOf(nowTag)]?.current const currentTagElement = tagRefs.current[allTag.indexOf(nowTag)]?.current
@ -84,14 +88,14 @@ export default function Switch({
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="relative 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 && ( {indicator && (
<div <div
className="absolute top-[3px] left-0 z-10 h-[35px] bg-white shadow-black/5 shadow-lg dark:bg-stone-700 dark:shadow-white/5" className="absolute top-[3px] left-0 z-10 h-[35px] bg-white shadow-black/5 shadow-lg dark:bg-stone-700 dark:shadow-white/5"
style={{ style={{
borderRadius: 24, borderRadius: 24,
width: `${indicator.w}px`, width: `${indicator.w}px`,
transform: `translateX(${indicator.x}px)`, transform: `translateX(${indicator.x}px)`,
transition: "all 0.5s cubic-bezier(0.4, 0, 0.2, 1)", transition: isFirstRender ? 'none' : "all 0.5s cubic-bezier(0.4, 0, 0.2, 1)",
}} }}
/> />
)} )}

2
package.json
View File

@ -3,7 +3,7 @@
"version": "2.8.3", "version": "2.8.3",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "next dev --turbopack -p 3040", "dev": "next dev -p 3040",
"start": "node .next/standalone/server.js", "start": "node .next/standalone/server.js",
"lint": "biome lint", "lint": "biome lint",
"lint:fix": "biome lint --fix", "lint:fix": "biome lint --fix",