diff --git a/src/pages/_views/RootPageViews.tsx b/src/pages/_views/RootPageViews.tsx index edd1230..4817a12 100644 --- a/src/pages/_views/RootPageViews.tsx +++ b/src/pages/_views/RootPageViews.tsx @@ -1,5 +1,4 @@ -import {useCallback, useEffect, useRef, useState} from "react"; -import {useStore} from "@nanostores/react"; +import {useCallback, useEffect, useLayoutEffect, useRef, useState} from "react"; import {viewIndex, viewIndexSetNext, viewIndexSetPrev} from "../../components/store/rootLayoutStore.ts"; import arknightsConfig from "../../../arknights.config.tsx"; import RootPageViewTemplate from "./RootPageViewTemplate.tsx"; @@ -11,17 +10,40 @@ import Media from "./04-Media.tsx"; import More from "./05-More.tsx"; export default function RootPageViews() { - const $viewIndex = useStore(viewIndex) + const [isLoading, setIsLoading] = useState(true); - //// 首次挂载组件通过当前锚点设置 viewIndex - useEffect(() => { + const [localViewIndex, setLocalViewIndex] = useState(() => { + const HASH = location.hash.split("#")[1]; + const INDEX = arknightsConfig.navbar.items.findIndex(item => + HASH === item.href.split("#")[1]) + return INDEX === -1 ? 0 : INDEX; + }); + + useLayoutEffect(() => { + viewIndex.set(localViewIndex); + setIsLoading(false); + }, [localViewIndex]); + + // 处理 hash 变化 + useLayoutEffect(() => { + const handleHashChange = () => { + const HASH = location.hash.split("#")[1]; + const INDEX = arknightsConfig.navbar.items.findIndex(item => + HASH === item.href.split("#")[1]) + setLocalViewIndex(INDEX === -1 ? 0 : INDEX); + } + + window.addEventListener("hashchange", handleHashChange); + return () => window.removeEventListener("hashchange", handleHashChange); + }, []); + + useLayoutEffect(() => { const HASH = location.hash.split("#")[1]; const INDEX = arknightsConfig.navbar.items.findIndex(item => HASH === item.href.split("#")[1]) viewIndex.set(INDEX === -1 ? 0 : INDEX) }, []) - //// 响应移动端上下滑动手势 const startTouchY = useRef(0) const handleTouchStart = useCallback((event: TouchEvent) => { @@ -47,19 +69,16 @@ export default function RootPageViews() { } }, [handleTouchStart, handleTouchEnd]) - //// 响应鼠标滚轮 - // 上次鼠标滚轮使用时间戳 const lastScrollTime = useRef(0); - // 监听鼠标滚轮修改 viewIndex;限制修改间隔为一秒; useEffect(() => { const handleScroll = (event: WheelEvent) => { if (performance.now() - lastScrollTime.current > 1000) { let newIndex: number if (event.deltaY < 0) - newIndex = $viewIndex > 0 ? $viewIndex - 1 : $viewIndex + newIndex = localViewIndex > 0 ? localViewIndex - 1 : localViewIndex else - newIndex = $viewIndex < arknightsConfig.navbar.items.length - 1 ? $viewIndex + 1 : $viewIndex + newIndex = localViewIndex < arknightsConfig.navbar.items.length - 1 ? localViewIndex + 1 : localViewIndex location.hash = arknightsConfig.navbar.items[newIndex].href.split("#")[1] viewIndex.set(newIndex) @@ -70,19 +89,11 @@ export default function RootPageViews() { const rootElement = document.getElementById("root-page-views") rootElement!.addEventListener("wheel", handleScroll) return () => rootElement!.removeEventListener("wheel", handleScroll); - }, [$viewIndex]) - - //// 监听锚点链接改变修改 viewIndex - useEffect(() => { - const handleHashChange = (hce: HashChangeEvent) => { - const index: number = arknightsConfig.navbar.items.findIndex(item => - item.href.split("#")[1] === window.location.hash.split("#")[1]) - viewIndex.set(index === -1 ? 0 : index) - } + }, [localViewIndex]) - window.addEventListener("hashchange", handleHashChange) - return () => window.removeEventListener("hashchange", handleHashChange) - }, []) + if (isLoading) { + return null; // 或者返回一个加载指示器 + } return [Index, Information, Operator, World, Media, More].map((Element, index) =>