fix: css style

Signed-off-by: Innei <[email protected]>

src/app/notes/[id]/layout.tsx

@@ -1,6 +1,7 @@
 import { headers } from 'next/dist/client/components/headers'
 import type { Metadata } from 'next'
 
+import { QueryHydration } from '~/components/common/QueryHydration'
 import { BottomToUpTransitionView } from '~/components/ui/transition/BottomToUpTransitionView'
 import { REQUEST_QUERY } from '~/constants/system'
 import { attachUA } from '~/lib/attach-ua'
@@ -59,16 +60,16 @@ export default async (
 ) => {
   attachUA()
   const searchParams = new URLSearchParams(headers().get(REQUEST_QUERY) || '')
-
-  await getQueryClient().fetchQuery(
-    queries.note.byNid(
-      props.params.id,
-      searchParams.get('password') || undefined,
-    ),
+  const query = queries.note.byNid(
+    props.params.id,
+    searchParams.get('password') || undefined,
   )
+  const { data } = await getQueryClient().fetchQuery(query)
   return (
-    <BottomToUpTransitionView>
-      <Paper>{props.children}</Paper>
-    </BottomToUpTransitionView>
+    <QueryHydration queryKey={query.queryKey} data={data}>
+      <BottomToUpTransitionView className="min-w-0">
+        <Paper>{props.children}</Paper>
+      </BottomToUpTransitionView>
+    </QueryHydration>
   )
 }

src/app/posts/(post-detail)/[category]/[slug]/layout.tsx

@@ -1,5 +1,7 @@
+import React from 'react'
 import type { Metadata } from 'next'
 
+import { QueryHydration } from '~/components/common/QueryHydration'
 import { BottomToUpTransitionView } from '~/components/ui/transition/BottomToUpTransitionView'
 import { attachUA } from '~/lib/attach-ua'
 import { getSummaryFromMd } from '~/lib/markdown'
@@ -58,12 +60,18 @@ export default async (props: NextPageParams<PageParams>) => {
   const {
     params: { category, slug },
   } = props
-  await getQueryClient().fetchQuery(queries.post.bySlug(category, slug))
+  const query = queries.post.bySlug(category, slug)
+  const queryKey = query.queryKey
+  const data = await getQueryClient().fetchQuery(query)
   return (
-    <div className="relative flex min-h-[120px] grid-cols-[auto,200px] lg:grid">
-      <BottomToUpTransitionView>{props.children}</BottomToUpTransitionView>
+    <QueryHydration queryKey={queryKey} data={data}>
+      <div className="relative flex min-h-[120px] grid-cols-[auto,200px] lg:grid">
+        <BottomToUpTransitionView className="min-w-0">
+          {props.children}
+        </BottomToUpTransitionView>
 
-      <LayoutRightSideProvider className="relative hidden lg:block" />
-    </div>
+        <LayoutRightSideProvider className="relative hidden lg:block" />
+      </div>
+    </QueryHydration>
   )
 }

src/app/posts/(post-detail)/[category]/[slug]/page.tsx

@@ -6,7 +6,6 @@ import type { Image, PostModel } from '@mx-space/api-client'
 
 import { ReadIndicator } from '~/components/common/ReadIndicator'
 import { useSetHeaderMetaInfo } from '~/components/layout/header/hooks'
-import { Loading } from '~/components/ui/loading'
 import { Markdown } from '~/components/ui/markdown'
 import { PostActionAside } from '~/components/widgets/post/PostActionAside'
 import { PostMetaBar } from '~/components/widgets/post/PostMetaBar'
@@ -19,6 +18,8 @@ import { MarkdownImageRecordProvider } from '~/providers/article/MarkdownImageRe
 import { LayoutRightSidePortal } from '~/providers/shared/LayoutRightSideProvider'
 import { WrappedElementProvider } from '~/providers/shared/WrappedElementProvider'
 
+import Loading from './loading'
+
 const useHeaderMeta = (data?: PostModel | null) => {
   const setHeader = useSetHeaderMetaInfo()
   useEffect(() => {
@@ -38,12 +39,12 @@ const useHeaderMeta = (data?: PostModel | null) => {
     data?.slug,
   ])
 }
-export default () => {
+const PostPage = () => {
   const data = useCurrentPostData()
 
   useHeaderMeta(data)
   if (!data) {
-    return <Loading useDefaultLoadingText />
+    return <Loading />
   }
 
   return (
@@ -62,7 +63,11 @@ export default () => {
           <MarkdownImageRecordProvider
             images={data.images || (noopArr as Image[])}
           >
-            <Markdown value={data.text} as="main" />
+            <Markdown
+              value={data.text}
+              as="main"
+              className="min-w-0 overflow-hidden"
+            />
           </MarkdownImageRecordProvider>
 
           <LayoutRightSidePortal>
@@ -83,3 +88,4 @@ export default () => {
     </div>
   )
 }
+export default PostPage

src/components/common/QueryHydration.tsx

@@ -0,0 +1,19 @@
+'use client'
+
+import { useQueryClient } from '@tanstack/react-query'
+import { memo } from 'react'
+import type { QueryKey } from '@tanstack/react-query'
+import type { PropsWithChildren } from 'react'
+
+import { useBeforeMounted } from '~/hooks/common/use-before-mounted'
+
+export const QueryHydration = memo(
+  (props: PropsWithChildren & { data: any; queryKey: QueryKey }) => {
+    const client = useQueryClient()
+    useBeforeMounted(() => {
+      client.setQueriesData(props.queryKey, props.data)
+    })
+
+    return props.children
+  },
+)

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

@@ -1,5 +1,7 @@
+import { useEffect } from 'react'
 import { atom, useAtomValue, useSetAtom } from 'jotai'
 
+import { useViewport } from '~/atoms'
 import { jotaiStore } from '~/lib/store'
 import { usePageScrollLocationSelector } from '~/providers/root/page-scroll-info-provider'
 
@@ -23,8 +25,8 @@ export const useMenuVisibility = () => useMenuOpacity() > 0
 
 export const useHeaderBgOpacity = () => {
   const threshold = 50
-
-  const headerShouldShowBg = useHeaderShouldShowBg()
+  const isMobile = useViewport((v) => v.sm || !v.sm)
+  const headerShouldShowBg = useHeaderShouldShowBg() || isMobile
 
   return usePageScrollLocationSelector(
     (y) =>
@@ -49,6 +51,13 @@ export const useHeaderMetaShouldShow = () => {
   return useAtomValue(headerMetaShouldShowAtom) && !v
 }
 export const useSetHeaderMetaInfo = () => {
+  useEffect(() => {
+    return () => {
+      jotaiStore.set(headerMetaTitleAtom, '')
+      jotaiStore.set(headerMetaDescriptionAtom, '')
+      jotaiStore.set(headerMetaSlugAtom, '')
+    }
+  }, [])
   return ({
     title,
     description,

src/components/ui/code-highlighter/CodeHighlighter.module.css

@@ -1,5 +1,5 @@
 .code-wrap {
-  position: relative;
+  @apply relative flex w-full flex-col overflow-auto;
 
   pre > code {
     @apply block bg-base-100 font-mono text-[14px] font-medium;

src/components/ui/dlalog/index.ts

@@ -0,0 +1 @@
+export * from './DialogOverlay'

src/components/ui/input/index.ts

@@ -0,0 +1 @@
+export * from './Input'

src/components/ui/markdown/markdown.module.css

@@ -1,4 +1,6 @@
 .md {
+  @apply relative;
+
   :global {
     & .spoiler {
       position: relative;
@@ -87,6 +89,10 @@
   }
 
   code {
-    @apply font-mono;
+    @apply bg-zinc-200 font-mono dark:bg-neutral-800;
+  }
+
+  pre {
+    @apply min-w-0 max-w-full flex-shrink flex-grow overflow-x-auto;
   }
 }

src/components/ui/markdown/renderers/collapse.tsx

@@ -22,7 +22,7 @@ export const MDetails: FC<{ children: ReactNode[] }> = (props) => {
       >
         <i
           className={clsx(
-            'mr-2 transform transition-transform duration-500',
+            'icon-[mingcute--align-arrow-down-line] mr-2 transform transition-transform duration-500',
             open && 'rotate-90',
           )}
         >

src/components/widgets/note/NoteFooterNavigation.tsx

@@ -4,10 +4,6 @@ import Link from 'next/link'
 import { useRouter } from 'next/navigation'
 import type { FC } from 'react'
 
-import {
-  IcRoundKeyboardDoubleArrowLeft,
-  IcRoundKeyboardDoubleArrowRight,
-} from '~/components/icons/arrow'
 import { MdiClockTimeThreeOutline } from '~/components/icons/clock'
 import { Divider } from '~/components/ui/divider'
 import { OnlyMobile } from '~/components/ui/viewport/OnlyMobile'
@@ -45,7 +41,7 @@ export const NoteFooterNavigation: FC<{ noteId: string }> = ({
                   scroll={false}
                   prefetch={false}
                 >
-                  <IcRoundKeyboardDoubleArrowLeft />
+                  <i className="icon-[mingcute--arrow-left-line]" />
                   <span>前一篇</span>
                 </Link>
               )}
@@ -60,7 +56,7 @@ export const NoteFooterNavigation: FC<{ noteId: string }> = ({
                   className="hover:text-primary"
                 >
                   <span>后一篇</span>
-                  <IcRoundKeyboardDoubleArrowRight />
+                  <i className="icon-[mingcute--arrow-right-line]" />
                 </Link>
               )}
             </div>

src/components/widgets/post/PostItem.tsx

@@ -5,7 +5,6 @@ import Link from 'next/link'
 import RemoveMarkdown from 'remove-markdown'
 import type { PostModel } from '@mx-space/api-client'
 
-import { IcRoundKeyboardDoubleArrowRight } from '~/components/icons/arrow'
 import { PostPinIcon } from '~/components/widgets/post/PostPinIcon'
 
 import { PostItemHoverOverlay } from './PostItemHoverOverlay'
@@ -23,39 +22,41 @@ export const PostItem = memo<{ data: PostModel }>(({ data }) => {
   return (
     <Link
       href={postLink}
-      className="relative flex flex-col space-y-2 py-6 focus-visible:!shadow-none"
+      className="relative flex flex-col py-6 focus-visible:!shadow-none"
     >
       <PostItemHoverOverlay />
-      <h2 className="relative text-2xl font-medium">
+      <h2 className="relative text-center text-2xl font-medium lg:text-left">
         <Balancer>{data.title}</Balancer>
 
         <PostPinIcon pin={!!data.pin} id={data.id} />
       </h2>
-      {!!data.summary && (
-        <p className="break-all leading-relaxed text-gray-900 dark:text-slate-50">
-          摘要： {data.summary}
-        </p>
-      )}
-      <div className="relative overflow-hidden">
-        {hasImage && (
-          <div
-            className={clsx(
-              'float-right h-24 w-24 overflow-hidden rounded-md',
-              'bg-contain bg-center bg-no-repeat',
-            )}
-            style={{ backgroundImage: `url(${hasImage})` }}
-          />
+      <main className="relative mt-8 space-y-2">
+        {!!data.summary && (
+          <p className="break-all leading-relaxed text-gray-900 dark:text-slate-50">
+            摘要： {data.summary}
+          </p>
         )}
-        <p className="break-all leading-loose text-gray-800/90 dark:text-gray-200/90">
-          {displayText}
-        </p>
-      </div>
+        <div className="relative overflow-hidden">
+          {hasImage && (
+            <div
+              className={clsx(
+                'float-right h-24 w-24 overflow-hidden rounded-md',
+                'bg-contain bg-center bg-no-repeat',
+              )}
+              style={{ backgroundImage: `url(${hasImage})` }}
+            />
+          )}
+          <p className="break-all leading-loose text-gray-800/90 dark:text-gray-200/90">
+            {displayText}
+          </p>
+        </div>
+      </main>
 
-      <div className="post-meta-bar flex select-none items-center gap-4 text-base-content/60">
+      <div className="post-meta-bar mt-2 flex select-none flex-wrap items-center justify-end gap-4 text-base-content/60">
         <PostMetaBar data={data} />
-        <span className="flex flex-shrink-0 select-none items-center space-x-1 text-accent hover:text-accent [&>svg]:hover:ml-2">
+        <span className="flex flex-shrink-0 select-none items-center space-x-1 text-right text-accent hover:text-accent [&>svg]:hover:ml-2">
           <span>阅读全文</span>
-          <IcRoundKeyboardDoubleArrowRight className="text-lg transition-[margin]" />
+          <i className="icon-[mingcute--arrow-right-line] text-lg transition-[margin]" />
         </span>
       </div>
     </Link>

src/components/widgets/post/PostPinIcon.tsx

@@ -27,7 +27,7 @@ export const PostPinIcon = memo(({ pin, id }: { pin: boolean; id: string }) => {
   return (
     <MotionButtonBase
       className={clsxm(
-        'absolute bottom-0 right-0 top-0 z-[10] -m-4 box-content hidden h-5 w-5 items-center p-4',
+        'absolute bottom-0 right-0 top-[4px] z-[10] -m-5 box-content hidden h-5 w-5 items-center p-5',
         isLogged && 'inline-flex cursor-pointer',
         !isLogged && pinState && 'pointer-events-none',
         pinState && '!inline-flex text-uk-red-light',

src/components/widgets/xlog/XLogInfo.tsx

@@ -96,14 +96,14 @@ const XLogInfoBase: FC<{
         tabIndex={0}
         className={clsx(
           '-mx-2 flex w-[100%+0.5rem] items-center justify-between rounded-lg p-2 text-left transition-colors duration-300 md:rounded-xl',
-          'hover:bg-zinc-100 dark:hover:bg-neutral-800',
+          'hover:bg-zinc-200 dark:hover:bg-neutral-800',
         )}
         onClick={() => {
           setCollapse((c) => !c)
         }}
       >
         <div className="flex w-full items-center justify-between">
-          <span className="flex flex-grow space-x-2">
+          <span className="flex flex-grow items-center space-x-2">
             <SafeIcon />
             <span>
               此数据所有权由区块链加密技术和智能合约保障仅归创作者所有。

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

@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback, useEffect, useRef } from 'react'
+import { startTransition, useCallback, useEffect, useRef } from 'react'
 import { atom, useAtomValue, useSetAtom } from 'jotai'
 import { selectAtom } from 'jotai/utils'
 import type { FC, PropsWithChildren } from 'react'
@@ -21,17 +21,26 @@ const ScrollDetector = () => {
   const setPageScrollLocation = useSetAtom(pageScrollLocationAtom)
   const setPageScrollDirection = useSetAtom(pageScrollDirectionAtom)
   const prevScrollY = useRef(0)
+
   useEffect(() => {
-    window.addEventListener('scroll', () => {
+    const scrollHandler = () => {
       const currentTop = document.documentElement.scrollTop
 
       setPageScrollDirection(
         prevScrollY.current - currentTop > 0 ? 'up' : 'down',
       )
       prevScrollY.current = currentTop
+      startTransition(() => {
+        setPageScrollLocation(prevScrollY.current)
+      })
+    }
+    window.addEventListener('scroll', scrollHandler)
+
+    scrollHandler()
 
-      setPageScrollLocation(prevScrollY.current)
-    })
+    return () => {
+      window.removeEventListener('scroll', scrollHandler)
+    }
   }, [])
 
   return null