【山东大学软件学院21级项目实训】前端：历史信息面板React与Material-UI

在本文中，我们将探讨如何使用工具来创建信息面板：HistoryInfoPanel。

HistoryInfoPanel：历史信息展示面板

组件结构

HistoryInfoPanel用于显示用户的历史记录。它包含一个带有标题和“查看更多”按钮的头部，以及一个列出历史记录的列表。

import React from 'react';
import {
  Divider,
  List,
  Container,
  ListItem,
  ListItemButton,
  ListItemIcon,
  ListItemText,
  Typography,
  Button,
  Paper,
} from '@mui/material';
import AssignmentIcon from '@mui/icons-material/Assignment';

function HistoryItem(idx: number) {
  return (
    <ListItem>
      <ListItemButton>
        <ListItemIcon>
          <AssignmentIcon />
        </ListItemIcon>
        <ListItemText primary={`任务${idx}`} secondary="2021-09-01" />
      </ListItemButton>
    </ListItem>
  );
}

export default function HistoryInfoPanel() {
  return (
    <div>
      <Paper sx={{ padding: 2, borderRadius: 2 }}>
        <Container
          sx={{
            display: 'flex',
            justifyContent: 'space-between',
            marginBottom: 1,
          }}
        >
          <Typography variant="h6">历史记录</Typography>
          <div style={{ flexGrow: 1 }} />
          <Button variant="text">查看更多</Button>
        </Container>
        <Divider />
        <div style={{ height: 8 }} />
        <List>
          {Array.from({ length: 3 }, (_, idx) => HistoryItem(idx + 1))}
        </List>
      </Paper>
    </div>
  );
}

关键功能和样式

1. 头部布局：使用Container组件和flexbox布局，我们可以轻松地创建一个包含标题和按钮的头部。flexGrow属性用于在标题和按钮之间创建空间。

2. 列表项：每个历史记录项使用ListItem和ListItemButton组件，并包含一个图标和文本。通过传递索引，我们可以生成多个历史记录项。

3. 样式和间距：使用Paper组件包裹整个面板，使其有一个白色背景和圆角效果。通过Divider组件，我们可以在头部和列表之间添加一个分隔线，以增强视觉层次感。

总结

通过结合使用React和Material-UI，我们可以高效地创建具有动态交互效果和良好布局的信息面板。HistoryInfoPanel展示了如何布局和展示历史记录。希望通过本文的介绍，您能更好地理解如何使用这些工具来构建类似的UI组件。

个人中心的整体效果：