fix: hydration error

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

src/components/modules/post/PostMetaBar.tsx

@@ -12,6 +12,7 @@ import { FloatPopover } from '~/components/ui/float-popover'
 import { useModalStack } from '~/components/ui/modal'
 import { NumberSmoothTransition } from '~/components/ui/number-transition/NumberSmoothTransition'
 import { RelativeTime } from '~/components/ui/relative-time'
+import { useIsClient } from '~/hooks/common/use-is-client'
 import { clsxm } from '~/lib/helper'
 import { routeBuilder, Routes } from '~/lib/route-builder'
 
@@ -24,6 +25,7 @@ export const PostMetaBar: Component<{
 }> = ({ className, meta, children }) => {
   const { present } = useModalStack()
   const router = useRouter()
+  const isClient = useIsClient()
   return (
     <div
       className={clsxm(
@@ -40,7 +42,7 @@ export const PostMetaBar: Component<{
             </span>
           </>
         )}
-        {!!meta.modified && (
+        {!!meta.modified && isClient ? (
           <FloatPopover
             mobileAsSheet
             wrapperClassName="text-xs"
@@ -50,6 +52,8 @@ export const PostMetaBar: Component<{
           >
             编辑于 <RelativeTime date={meta.modified} />
           </FloatPopover>
+        ) : (
+          <span className="text-xs">(已编辑)</span>
         )}
       </div>
 

src/components/ui/relative-time/RelativeTime.tsx

@@ -1,39 +1,39 @@
 'use client'
 
-import { useEffect, useState } from 'react'
+import { Fragment, useEffect, useState } from 'react'
 import dayjs from 'dayjs'
 import type { FC } from 'react'
 
 import { parseDate, relativeTimeFromNow } from '~/lib/datetime'
 
+const formatTime = (date: string | Date, relativeBeforeDay?: number) => {
+  if (
+    relativeBeforeDay &&
+    Math.abs(dayjs(date).diff(new Date(), 'd')) > relativeBeforeDay
+  ) {
+    return parseDate(date, 'YYYY 年 M 月 D 日 dddd')
+  }
+  return relativeTimeFromNow(date)
+}
 export const RelativeTime: FC<{
   date: string | Date
   displayAbsoluteTimeAfterDay?: number
 }> = (props) => {
+  const { displayAbsoluteTimeAfterDay = 29 } = props
   const [relative, setRelative] = useState<string>(
-    relativeTimeFromNow(props.date),
+    formatTime(props.date, displayAbsoluteTimeAfterDay),
   )
 
-  const { displayAbsoluteTimeAfterDay = 29 } = props
-
   useEffect(() => {
-    setRelative(relativeTimeFromNow(props.date))
+    setRelative(formatTime(props.date, displayAbsoluteTimeAfterDay))
     let timer: any = setInterval(() => {
-      setRelative(relativeTimeFromNow(props.date))
+      setRelative(formatTime(props.date, displayAbsoluteTimeAfterDay))
     }, 1000)
 
-    if (
-      Math.abs(dayjs(props.date).diff(new Date(), 'd')) >
-      displayAbsoluteTimeAfterDay
-    ) {
-      timer = clearInterval(timer)
-      // @ts-expect-error
-      setRelative(parseDate(props.date, 'YY 年 M 月 D 日'))
-    }
     return () => {
       timer = clearInterval(timer)
     }
   }, [props.date, displayAbsoluteTimeAfterDay])
 
-  return <>{relative}</>
+  return <Fragment>{relative}</Fragment>
 }