KimiSwitch Dev
3fbd70932c
- 多页路由：首页 / 功能 / 更新日志 / 下载（HashRouter，适配 GitHub Pages） - 中英文切换（zh/en 双语文案 + localStorage 记忆） - Kimi 品牌配色（中性灰 + 蓝）+ 科技风（网格底纹 / 辉光按钮 / 渐变强调词） - 更新日志页：运行时同步 GitHub Releases，localStorage 缓存 1h，网络失败回退内置列表 - 功能页 8 张截图卡片；下载页含自动更新说明 - 修复资源路径 404（asset() + %BASE_URL%）；自托管 Inter/Fira Code 字体
45 lines
1.4 KiB
TypeScript
45 lines
1.4 KiB
TypeScript
import { useEffect, useRef, useState } from "react";
|
|
|
|
/** Fires once when the element scrolls into view. */
|
|
export function useInView<T extends Element = Element>(
|
|
options: IntersectionObserverInit = { threshold: 0.15 },
|
|
) {
|
|
const ref = useRef<T | null>(null);
|
|
const [inView, setInView] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const node = ref.current;
|
|
if (!node || inView) return;
|
|
const io = new IntersectionObserver(([entry]) => {
|
|
if (entry.isIntersecting) {
|
|
setInView(true);
|
|
io.disconnect();
|
|
}
|
|
}, options);
|
|
io.observe(node);
|
|
return () => io.disconnect();
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [inView]);
|
|
|
|
return [ref, inView] as const;
|
|
}
|
|
|
|
/** Animates a numeric value once `trigger` flips to true. */
|
|
export function useCountUp(target: number, trigger: boolean, durationMs = 900) {
|
|
const [value, setValue] = useState(0);
|
|
useEffect(() => {
|
|
if (!trigger) return;
|
|
const start = performance.now();
|
|
const easeOut = (t: number) => 1 - Math.pow(1 - t, 3);
|
|
let raf = 0;
|
|
const tick = (now: number) => {
|
|
const p = Math.min(1, (now - start) / durationMs);
|
|
setValue(target * easeOut(p));
|
|
if (p < 1) raf = requestAnimationFrame(tick);
|
|
};
|
|
raf = requestAnimationFrame(tick);
|
|
return () => cancelAnimationFrame(raf);
|
|
}, [target, trigger, durationMs]);
|
|
return value;
|
|
}
|