• 简体中文
  • Hooks 与 Contexts

    4 个 Contexts

    AppContext (contexts/AppContext.tsx)

    站级交互态与效果状态。提供:

    • loading 序列状态
    • power / battery / inversion 状态
    • 实时统计(FPS 等)
    • 首页打字机效果控制
    • column hover 状态

    所有子组件通过 useAppContext() 消费。

    TransitionContext (contexts/TransitionContext.tsx)

    控制路由过渡动画。提供:

    • navigateTo(url)所有内部跳转必须用这个,不能用 router.push()(GOTCHAS #6)
    • setBackOverride() — 让 detail view 和 lightbox 拦截 BACK 行为

    通过 useTransition() 消费。

    LayoutAnchorsContext (contexts/LayoutAnchorsContext.tsx)

    注册 active scroll container。因为 layout 用锁定高度的内容容器,深链 scroll 必须打到那个容器而不是 document viewport。

    SiteAssetsContext (contexts/SiteAssetsContext.tsx)

    提供 site-shell 资源(faviconog:imageavatar)的 catalog 解析结果。消费自 /api/assets/home 的响应。

    22 个 Hooks

    性能与设备

    Hook文件职责
    useAdaptivePerformancehooks/useAdaptivePerformance.ts四档自适应性能控制(full / balanced / reduced / minimal),含运行时 FPS 采样
    useMediaQueryhooks/useMediaQuery.tsCSS media query 响应式监听
    useMobileTesseractChargehooks/useMobileTesseractCharge.ts移动端 tesseract 充电逻辑

    博文系统

    Hook文件职责
    useBlogPostStatehooks/useBlogPostState.ts博文状态机(idle → checking → granted/required → loading → ready/error)

    路由与导航

    Hook文件职责
    useLayoutRouteModehooks/useLayoutRouteMode.ts布局路由模式判定
    useRouteLoadingKindhooks/useRouteLoadingKind.ts按「离开路径」决定 loading 覆盖层变体(source-driven,不是 target-driven)
    useDrawerNavigationhooks/useDrawerNavigation.ts抽屉导航控制

    详情页

    Hook文件职责
    useDetailHeroParallaxhooks/useDetailHeroParallax.ts详情页 hero 视差
    useDetailScrollRevealhooks/useDetailScrollReveal.ts详情页滚动揭示动画
    useDetailSectionNavhooks/useDetailSectionNav.ts详情页段导航
    useDetailTitleRevealhooks/useDetailTitleReveal.ts详情页标题揭示动画

    打字机效果

    Hook文件职责
    useTypingEffecthooks/useTypingEffect.ts基础打字机效果(Unicode script 分 Latin / CJK 路径,GOTCHAS #26)
    useTypingSubtitlehooks/useTypingSubtitle.ts首页副标题打字机

    交互与 UI

    Hook文件职责
    useCursorTargetRegistryhooks/useCursorTargetRegistry.ts自定义光标目标注册
    useGalleryLightboxhooks/useGalleryLightbox.ts画廊灯箱控制
    usePowerSystemhooks/usePowerSystem.ts电源系统
    useRealtimeStatshooks/useRealtimeStats.ts实时统计(FPS、内存等)
    useLoadingSystemhooks/useLoadingSystem.tsloading 系统
    useStandalonePanelStatehooks/useStandalonePanelState.tsstandalone panel 状态
    useAnimationSequencehooks/useAnimationSequence.ts动画序列编排
    useColumnHoverhooks/useColumnHover.ts首页列 hover 状态
    useVisitorLanguageCodehooks/useVisitorLanguageCode.ts访客语言代码检测

    工具类

    Hook文件职责
    useSafeTimeoutshooks/use-safe-timeouts.ts安全的 setTimeout 封装,组件卸载时自动清理

    Contexts 与 Hooks 的关系

    AppContext
      └─ usePowerSystem
      └─ useRealtimeStats
      └─ useTypingEffect / useTypingSubtitle
      └─ useColumnHover
      └─ useLoadingSystem
      └─ useMediaQuery
    
    TransitionContext
      └─ useRouteLoadingKind
      └─ useLayoutRouteMode
      └─ useDrawerNavigation
    
    LayoutAnchorsContext
      └─ (scroll containers)
    
    独立(不依赖 context)
      ├─ useAdaptivePerformance
      ├─ useBlogPostState
      ├─ useDetailHeroParallax / useDetailScrollReveal / useDetailSectionNav / useDetailTitleReveal
      ├─ useCursorTargetRegistry
      ├─ useGalleryLightbox
      ├─ useMobileTesseractCharge
      ├─ useAnimationSequence
      ├─ useStandalonePanelState
      ├─ useSafeTimeouts
      └─ useVisitorLanguageCode