shangfangjian
2cfc9ccc0f
- 新建 components/ui/(Button/Input/Select/Modal/Tabs/Spinner/Skeleton 等),变体用联合类型约束,根治幻影变体 - admin/components.tsx 与 matches/ui.tsx 改为再导出壳,消除 Spinner 三份重复 - 日期工具收口到 lib/date.ts,滚动监听收口到 lib/useScroll.ts - index.css 引入 :root RGB 三元组令牌,tailwind.config 接 <alpha-value>(修复透明度修饰符静默失效) - 刘建毛草 5MB 全字库(jsDelivr 未锁版) → 1KB 自托管子集(仅「先知」二字,unicode-range 限定)
29 lines
1.3 KiB
TypeScript
29 lines
1.3 KiB
TypeScript
/**
|
|
* 回到顶部浮动按钮(前台两页共用,此前 Matches/Standings 各复制一份)。
|
|
* 方角纸片风:去掉早期版本的 rounded-full + shadow-lg,与全站方角
|
|
* 无阴影语言对齐;出现/隐藏仅动画 transform 与 opacity。
|
|
*
|
|
* 滚动监听已抽到 `lib/useScroll` 的 useWindowScrollY —— 全站三处
|
|
* 滚动监听此前各自实现一遍生命周期,现统一为单一来源。
|
|
*/
|
|
import { useWindowScrollY } from '../lib/useScroll'
|
|
|
|
export default function BackTop({ threshold = 300 }: { threshold?: number }) {
|
|
const scrollY = useWindowScrollY()
|
|
const show = scrollY > threshold
|
|
|
|
return (
|
|
<button
|
|
onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
|
|
className={`fixed bottom-6 right-6 z-40 flex h-10 w-10 items-center justify-center border border-ink-300 bg-paper-50 text-ink-600 transition-all duration-300 hover:border-ink-900 hover:bg-ink-900 hover:text-paper-50 ${
|
|
show ? 'translate-y-0 opacity-100' : 'pointer-events-none translate-y-4 opacity-0'
|
|
}`}
|
|
aria-label="回到顶部"
|
|
>
|
|
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M5 15l7-7 7 7" />
|
|
</svg>
|
|
</button>
|
|
)
|
|
}
|