testing-tool/components/TimestampToDatetime.tsx

import React, { useState, useCallback } from 'react';
import dayjs from '@/utils/dayjs';
import {
  Button,
  TextField,
  Select,
  MenuItem,
  FormControl,
  InputLabel,
  Paper,
  Stack,
  Box,
  SelectChangeEvent,
} from '@mui/material';
import { TIME_ZONE_LIST, TIMESTAMP_UNITS } from './constants';

export function TimestampToDatetime() {
  const [timestampValue, setTimestampValue] = useState(() => dayjs().valueOf().toString());
  const [timestampResult, setTimestampResult] = useState('');
  const [unit, setUnit] = useState('milliseconds');
  const [selectedZone, setSelectedZone] = useState('Asia/Shanghai');
  const [error, setError] = useState('');

  const performConversion = useCallback((val: string, zone: string, u: string) => {
    if (!val || val.trim() === '') {
      setError('请输入有效的时间戳');
      return '';
    }
    const numberValue = Number(val);
    if (isNaN(numberValue)) {
      setError('时间戳必须是数字');
      return '';
    }
    const d = u === 'milliseconds' ? dayjs(numberValue) : dayjs.unix(numberValue);
    if (!d.isValid()) {
      setError('无效的时间戳格式');
      return '';
    }
    setError('');
    return d.tz(zone).format('YYYY/MM/DD HH:mm:ss');
  }, []);

  const handleConvert = useCallback(() => {
    const newResult = performConversion(timestampValue, selectedZone, unit);
    setTimestampResult(newResult);
  }, [timestampValue, selectedZone, unit, performConversion]);

  const handleInputChange = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => {
      setTimestampValue(e.target.value);
      if (error) setError('');
    },
    [error],
  );

  const handleZoneChange = useCallback(
    (e: SelectChangeEvent) => {
      const newZone = e.target.value;
      setSelectedZone(newZone);
      if (timestampResult) {
        const newResult = performConversion(timestampValue, newZone, unit);
        setTimestampResult(newResult || '');
      }
    },
    [performConversion, timestampResult, timestampValue, unit],
  );

  const handleUnitChange = useCallback(
    (e: SelectChangeEvent) => {
      const newUnit = e.target.value;
      setUnit(newUnit);
      if (timestampResult) {
        const newResult = performConversion(timestampValue, selectedZone, newUnit);
        setTimestampResult(newResult || '');
      }
    },
    [performConversion, timestampResult, timestampValue, selectedZone],
  );

  return (
    <Paper elevation={3} sx={{ p: 2, my: 2, borderRadius: 2 }}>
      <Stack spacing={2} sx={{ mt: 2 }}>
        <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
          <TextField
            label="输入时间戳"
            placeholder="如: 1704067200000"
            value={timestampValue}
            onChange={handleInputChange}
            error={!!error}
            helperText={error}
            fullWidth
            variant="outlined"
          />
          <FormControl fullWidth>
            <InputLabel>单位</InputLabel>
            <Select
              value={unit}
              label="单位"
              onChange={handleUnitChange}
              MenuProps={{ disableScrollLock: true }}
            >
              {TIMESTAMP_UNITS.map(({ value, label }) => (
                <MenuItem key={value} value={value}>
                  {label}
                </MenuItem>
              ))}
            </Select>
          </FormControl>
        </Stack>

        <Box sx={{ display: 'flex', justifyContent: 'center' }}>
          <Button variant="contained" size="medium" color="primary" onClick={handleConvert}>
            转换
          </Button>
        </Box>

        <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
          <TextField
            label="转换结果"
            value={timestampResult}
            fullWidth
            variant="outlined"
            slotProps={{
              input: {
                readOnly: true,
              },
            }}
          />
          <FormControl fullWidth>
            <InputLabel>时区</InputLabel>
            <Select
              value={selectedZone}
              label="时区"
              onChange={handleZoneChange}
              MenuProps={{ disableScrollLock: true }}
            >
              {TIME_ZONE_LIST.map((zone) => (
                <MenuItem key={zone} value={zone}>
                  {zone}
                </MenuItem>
              ))}
            </Select>
          </FormControl>
        </Stack>
      </Stack>
    </Paper>
  );
}