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} }