雨霖铃
102 lines
3.4 KiB
TypeScript
102 lines
3.4 KiB
TypeScript
import React, { useMemo } from 'react';
|
|
import { Box, Fade, Stack, Typography } from '@mui/material';
|
|
import dayjs from '@/utils/dayjs';
|
|
import CopyButton from '@/components/CopyButton';
|
|
import type { UnitType } from '@/config/pageTheme';
|
|
import { DATE_FORMAT, timestampPageStyles } from '@/config/pageTheme';
|
|
import { useLazyTranslation } from '@/utils/useLazyTranslation';
|
|
|
|
interface ResultViewProps {
|
|
result: string;
|
|
mode: 'ts2dt' | 'dt2ts';
|
|
unit: UnitType;
|
|
zone: string;
|
|
/** 无结果时是否渲染占位（桌面端右栏使用），默认 false（移动端单栏隐藏） */
|
|
showEmptyPlaceholder?: boolean;
|
|
}
|
|
|
|
const ResultView = React.memo(
|
|
({ result, mode, unit, zone, showEmptyPlaceholder = false }: ResultViewProps) => {
|
|
const { t } = useLazyTranslation('timestamp');
|
|
|
|
const extraInfo = useMemo(() => {
|
|
if (!result) return null;
|
|
const d =
|
|
mode === 'ts2dt'
|
|
? dayjs(result, DATE_FORMAT).tz(zone)
|
|
: unit === 'ms'
|
|
? dayjs(Number(result))
|
|
: dayjs.unix(Number(result));
|
|
|
|
return {
|
|
relative: d.fromNow(),
|
|
iso: d.toISOString(),
|
|
utc: d.utc().format(DATE_FORMAT) + ' UTC',
|
|
};
|
|
}, [result, mode, zone, unit]);
|
|
|
|
if (!result) {
|
|
if (!showEmptyPlaceholder) return null;
|
|
return (
|
|
<Box sx={timestampPageStyles.RESULT_EMPTY_PLACEHOLDER}>{t('timestamp:resultEmpty')}</Box>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Fade in={!!result}>
|
|
<Box>
|
|
<Typography variant="caption" sx={timestampPageStyles.RESULT_LABEL}>
|
|
{t('timestamp:resultLabel')}
|
|
</Typography>
|
|
|
|
<Box sx={timestampPageStyles.RESULT_MAIN_BOX}>
|
|
<Typography variant="body1" sx={timestampPageStyles.RESULT_MAIN_TEXT}>
|
|
{result}
|
|
</Typography>
|
|
<CopyButton
|
|
text={result}
|
|
tooltip={t('timestamp:copyResultTooltip')}
|
|
size="small"
|
|
color={timestampPageStyles.primaryColor}
|
|
/>
|
|
</Box>
|
|
|
|
<Stack spacing={1.2} sx={timestampPageStyles.RESULT_EXTRA_STACK}>
|
|
{[
|
|
{ label: t('timestamp:relativeTime'), value: extraInfo?.relative },
|
|
{ label: t('timestamp:iso8601'), value: extraInfo?.iso },
|
|
{ label: t('timestamp:utcTime'), value: extraInfo?.utc },
|
|
].map((item) => (
|
|
<Box
|
|
key={item.label}
|
|
sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}
|
|
>
|
|
<Typography variant="caption" sx={timestampPageStyles.RESULT_EXTRA_LABEL}>
|
|
{item.label}
|
|
</Typography>
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, minWidth: 0 }}>
|
|
<Typography variant="caption" sx={timestampPageStyles.RESULT_EXTRA_VALUE}>
|
|
{item.value}
|
|
</Typography>
|
|
{item.value && (
|
|
<CopyButton
|
|
text={item.value}
|
|
tooltip={t('timestamp:copyTooltip')}
|
|
size="small"
|
|
color={timestampPageStyles.primaryColor}
|
|
/>
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
))}
|
|
</Stack>
|
|
</Box>
|
|
</Fade>
|
|
);
|
|
},
|
|
);
|
|
|
|
ResultView.displayName = 'ResultView';
|
|
|
|
export default ResultView;
|