frontend/src/components/HistoryDialog.js

import {
  Dialog,
  DialogTitle,
  DialogContent,
  List,
  ListItem,
  ListItemText,
  IconButton,
  Typography,
  Tooltip,
  Box
} from '@mui/material';
import { Restore as RestoreIcon } from '@mui/icons-material';

function HistoryDialog({ open, onClose, history, onRestore }) {
  const formatTimestamp = (timestamp) => {
    try {
      const date = new Date(timestamp * 1000);  // 转换 Unix 时间戳为 JavaScript Date
      return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
        hour12: false
      });
    } catch (error) {
      console.error('Error parsing timestamp:', timestamp, error);
      return '无效日期';
    }
  };

  return (
    <Dialog 
      open={open} 
      onClose={onClose} 
      maxWidth="md" 
      fullWidth
      PaperProps={{
        elevation: 0,
        sx: {
          borderRadius: 2,
          overflow: 'hidden'
        }
      }}
    >
      <DialogTitle 
        sx={{ 
          borderBottom: '1px solid',
          borderColor: 'divider',
          backgroundColor: 'background.paper',
          px: 3,
          py: 2
        }}
      >
        配置历史
      </DialogTitle>
      <DialogContent sx={{ p: 3 }}>
        {['cn', 'oversea'].map((type, index) => (
          <Box key={type} sx={{ mb: index === 0 ? 4 : 0 }}>
            <Typography 
              variant="h6" 
              gutterBottom 
              sx={{ 
                color: 'text.primary',
                fontWeight: 600,
                mb: 2
              }}
            >
              {type === 'cn' ? '国内配置历史' : '海外配置历史'}
            </Typography>
            <List sx={{ bgcolor: 'background.paper', borderRadius: 2 }}>
              {history[type].map((item) => (
                <ListItem
                  key={item.filename}
                  sx={{
                    borderBottom: '1px solid',
                    borderColor: 'divider',
                    '&:last-child': {
                      borderBottom: 'none'
                    }
                  }}
                  secondaryAction={
                    <Tooltip title="恢复此版本">
                      <IconButton 
                        edge="end" 
                        onClick={() => onRestore(type, item.version)}
                        color="primary"
                        sx={{
                          '&:hover': {
                            backgroundColor: 'primary.light',
                            color: 'white'
                          }
                        }}
                      >
                        <RestoreIcon />
                      </IconButton>
                    </Tooltip>
                  }
                >
                  <ListItemText
                    primary={
                      <Typography variant="subtitle1" sx={{ fontWeight: 500 }}>
                        版本 {item.version}
                      </Typography>
                    }
                    secondary={
                      <Typography variant="body2" color="text.secondary">
                        {formatTimestamp(item.timestamp)}
                      </Typography>
                    }
                  />
                </ListItem>
              ))}
            </List>
          </Box>
        ))}
      </DialogContent>
    </Dialog>
  );
}

export default HistoryDialog;