feat: normal container

Signed-off-by: Innei <i@innei.in>

src/app/posts/page.tsx

@@ -1,9 +1,8 @@
 import { EmptyIcon } from '~/components/icons/empty'
-import { HeaderHideBg } from '~/components/layout/header/hooks'
+import { NormalContainer } from '~/components/layout/container/Normal'
 import { BottomToUpTransitionView } from '~/components/ui/transition/BottomToUpTransitionView'
 import { PostItem } from '~/components/widgets/post/PostItem'
 import { PostPagination } from '~/components/widgets/post/PostPagination'
-import { clsxm } from '~/utils/helper'
 import { apiClient } from '~/utils/request'
 
 interface Props {
@@ -17,9 +16,6 @@ export const metadata = {
   title: '文章列表',
 }
 
-const containerClassName =
-  'mx-auto mt-12 max-w-4xl px-2 md:mt-[120px] md:px-0 lg:px-8'
-
 export default async (props: Props) => {
   const { page, size } = props?.searchParams || {}
   const nextPage = page ? parseInt(page) : 1
@@ -30,20 +26,15 @@ export default async (props: Props) => {
 
   if (!data?.length) {
     return (
-      <div
-        className={clsxm(
-          containerClassName,
-          'flex h-[500px] flex-col space-y-4 center',
-        )}
-      >
+      <NormalContainer className="flex h-[500px] flex-col space-y-4 center">
         <EmptyIcon />
         <p>这里空空如也</p>
         <p>稍后再来看看吧！</p>
-      </div>
+      </NormalContainer>
     )
   }
   return (
-    <div className={containerClassName}>
+    <NormalContainer>
       <ul>
         {data.map((item, index) => {
           return (
@@ -55,7 +46,6 @@ export default async (props: Props) => {
       </ul>
 
       <PostPagination pagination={pagination} />
-      <HeaderHideBg />
-    </div>
+    </NormalContainer>
   )
 }

src/app/timeline/layout.tsx

@@ -40,16 +40,14 @@ export default async (props: NextPageParams<{}, PropsWithChildren>) => {
   })
 
   return (
-    <div className="container relative">
-      <QueryHydrate
-        state={dehydrate(queryClient, {
-          shouldDehydrateQuery: (query) => {
-            return query.queryKey[0] === 'timeline'
-          },
-        })}
-      >
-        {props.children}
-      </QueryHydrate>
-    </div>
+    <QueryHydrate
+      state={dehydrate(queryClient, {
+        shouldDehydrateQuery: (query) => {
+          return query.queryKey[0] === 'timeline'
+        },
+      })}
+    >
+      {props.children}
+    </QueryHydrate>
   )
 }

src/components/layout/container/Normal.tsx

@@ -1,5 +1,20 @@
+import { clsxm } from '~/utils/helper'
+
+import { HeaderHideBg } from '../header/hooks'
+
 export const NormalContainer: Component = (props) => {
+  const { children, className } = props
+
   return (
-    <div className="mx-auto mt-12 max-w-5xl px-2 lg:px-0">{props.children}</div>
+    <div
+      className={clsxm(
+        'mx-auto mt-12 max-w-3xl px-2 lg:px-0 2xl:max-w-4xl',
+        className,
+      )}
+    >
+      {children}
+
+      <HeaderHideBg />
+    </div>
   )
 }

src/components/layout/header/hooks.ts

@@ -11,6 +11,7 @@ export const useHideHeaderBgInRoute = () => {
   const setter = useSetHeaderShouldShowBg()
   useEffect(() => {
     setter(false)
+    console.log('useHideHeaderBgInRoute')
     return () => {
       setter(true)
     }

src/components/layout/header/internal/HeaderContent.tsx

@@ -8,11 +8,11 @@ import { usePathname } from 'next/navigation'
 import type { IHeaderMenu } from '../config'
 
 import { RootPortal } from '~/components/ui/portal'
-import { usePageScrollDirection } from '~/providers/root/page-scroll-info-provider'
+import { usePageScrollDirectionSelector } from '~/providers/root/page-scroll-info-provider'
 import { clsxm } from '~/utils/helper'
 
 import { useHeaderConfig } from './HeaderDataConfigureProvider'
-import { useMenuOpacity } from './hooks'
+import { useHeaderBgOpacity, useMenuOpacity } from './hooks'
 import { MenuPopover } from './MenuPopover'
 
 export const HeaderContent = () => {
@@ -27,12 +27,18 @@ export const HeaderContent = () => {
 }
 
 const AccessibleMenu: Component = () => {
-  const opacity = useMenuOpacity()
-  const up = usePageScrollDirection() === 'up'
+  const headerOpacity = useHeaderBgOpacity()
+
+  const showShow = usePageScrollDirectionSelector(
+    (d) => {
+      return d === 'up' && headerOpacity > 0.8
+    },
+    [headerOpacity],
+  )
   return (
     <RootPortal>
       <AnimatePresence>
-        {opacity === 0 && up && (
+        {showShow && (
           <m.div
             initial={{ y: -64 }}
             animate={{ y: 0 }}

src/components/layout/header/internal/hooks.ts

@@ -1,7 +1,7 @@
 import { useEffect } from 'react'
 import { atom, useAtomValue, useSetAtom } from 'jotai'
 
-import { useViewport } from '~/atoms'
+import { useIsMobile } from '~/atoms'
 import { jotaiStore } from '~/lib/store'
 import { usePageScrollLocationSelector } from '~/providers/root/page-scroll-info-provider'
 
@@ -13,21 +13,25 @@ const headerShouldShowBgAtom = atom(true)
 export const useHeaderShouldShowBg = () => useAtomValue(headerShouldShowBgAtom)
 export const useSetHeaderShouldShowBg = () => useSetAtom(headerShouldShowBgAtom)
 export const useMenuOpacity = () => {
-  // const scrollDirection = usePageScrollDirection()
   const headerOpacity = useHeaderBgOpacity()
-  // if (scrollDirection === 'up') {
-  //   opacity = 1
-  // }
+
   return 1 - headerOpacity
 }
 
 export const useMenuVisibility = () => useMenuOpacity() > 0
 
 export const useHeaderBgOpacity = () => {
   const threshold = 50
-  const isMobile = useViewport((v) => v.sm || !v.sm)
+  const isMobile = useIsMobile()
   const headerShouldShowBg = useHeaderShouldShowBg() || isMobile
 
+  console.log(
+    headerShouldShowBg,
+    'headerShouldShowBg',
+    useHeaderShouldShowBg(),
+    isMobile,
+  )
+
   return usePageScrollLocationSelector(
     (y) =>
       headerShouldShowBg

src/lib/_.ts

@@ -33,25 +33,46 @@ export const debounce = <F extends (...args: any[]) => any>(
 export const throttle = <F extends (...args: any[]) => any>(
   func: F,
   wait: number,
+  options: {
+    leading?: boolean
+    trailing?: boolean
+  } = {},
 ): ((...args: Parameters<F>) => void) => {
   let timeoutId: ReturnType<typeof setTimeout> | undefined
   let lastArgs: Parameters<F> | undefined
+  let lastCallTime: number | undefined
 
   const doLater = () => {
     timeoutId = undefined
     if (lastArgs !== undefined) {
       func.apply(this, lastArgs)
       lastArgs = undefined
+      lastCallTime = Date.now()
       timeoutId = setTimeout(doLater, wait)
     }
   }
 
   return function (this: any, ...args: Parameters<F>) {
-    if (timeoutId === undefined) {
+    const currentTime = Date.now()
+
+    if (lastCallTime === undefined && options.leading === false) {
+      lastCallTime = currentTime
+    }
+
+    const remainingTime = wait - (currentTime - (lastCallTime ?? 0))
+
+    if (remainingTime <= 0 || remainingTime > wait) {
+      if (timeoutId !== undefined) {
+        clearTimeout(timeoutId)
+      }
       func.apply(this, args)
+      lastCallTime = currentTime
       timeoutId = setTimeout(doLater, wait)
-    } else {
+    } else if (options.trailing !== false) {
       lastArgs = args
+      if (timeoutId === undefined) {
+        timeoutId = setTimeout(doLater, remainingTime)
+      }
     }
   }
 }

src/providers/root/page-scroll-info-provider.tsx

@@ -8,9 +8,11 @@ import type { ExtractAtomValue } from 'jotai'
 import type { FC, PropsWithChildren } from 'react'
 
 import { setIsInteractive } from '~/atoms/is-interactive'
+import { throttle } from '~/lib/_'
 
 const pageScrollLocationAtom = atom(0)
 const pageScrollDirectionAtom = atom<'up' | 'down' | null>(null)
+// const pageScrollSpeedAtom = atom(0)
 
 export const PageScrollInfoProvider: FC<PropsWithChildren> = ({ children }) => {
   return (
@@ -27,22 +29,31 @@ const ScrollDetector = () => {
   const prevScrollY = useRef(0)
   const setIsInteractiveOnceRef = useRef(false)
 
+  // const lastTime = useRef(0)
+  // const setScrollSpeed = useSetAtom(pageScrollSpeedAtom)
+
   useIsomorphicLayoutEffect(() => {
-    const scrollHandler = () => {
-      if (!setIsInteractiveOnceRef.current) {
-        setIsInteractive(true)
-        setIsInteractiveOnceRef.current = true
-      }
-      const currentTop = document.documentElement.scrollTop
+    const scrollHandler = throttle(
+      () => {
+        if (!setIsInteractiveOnceRef.current) {
+          setIsInteractive(true)
+          setIsInteractiveOnceRef.current = true
+        }
+        const currentTop = document.documentElement.scrollTop
 
-      setPageScrollDirection(
-        prevScrollY.current - currentTop > 0 ? 'up' : 'down',
-      )
-      prevScrollY.current = currentTop
-      startTransition(() => {
-        setPageScrollLocation(prevScrollY.current)
-      })
-    }
+        setPageScrollDirection(
+          prevScrollY.current - currentTop > 0 ? 'up' : 'down',
+        )
+        prevScrollY.current = currentTop
+        startTransition(() => {
+          setPageScrollLocation(prevScrollY.current)
+        })
+      },
+      16,
+      {
+        leading: false,
+      },
+    )
     window.addEventListener('scroll', scrollHandler)
 
     scrollHandler()
@@ -57,6 +68,17 @@ const ScrollDetector = () => {
 
 const usePageScrollLocation = () => useAtomValue(pageScrollLocationAtom)
 const usePageScrollDirection = () => useAtomValue(pageScrollDirectionAtom)
+// const usePageScrollSpeedSelector = <T,>(
+//   selector: (value: ExtractAtomValue<typeof pageScrollSpeedAtom>) => T,
+//   deps: any[] = [],
+// ) =>
+//   useAtomValue(
+//     // @ts-ignore
+//     selectAtom(
+//       pageScrollSpeedAtom,
+//       useCallback(($) => selector($), deps),
+//     ),
+//   )
 const usePageScrollLocationSelector = <T,>(
   selector: (scrollY: number) => T,
   deps: any[] = [],