diff --git a/src/components/modules/post/PostMetaBar.tsx b/src/components/modules/post/PostMetaBar.tsx
index 1544e48067..4f927af353 100644
--- a/src/components/modules/post/PostMetaBar.tsx
+++ b/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 (
>
)}
- {!!meta.modified && (
+ {!!meta.modified && isClient ? (
编辑于
+ ) : (
+ (已编辑)
)}
diff --git a/src/components/ui/relative-time/RelativeTime.tsx b/src/components/ui/relative-time/RelativeTime.tsx
index d3c0887a79..dc4c644a77 100644
--- a/src/components/ui/relative-time/RelativeTime.tsx
+++ b/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(
- 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 {relative}
}