import React, { useState, useRef, useEffect, useMemo } from "react";
|
import {
|
Box,
|
Card,
|
CardContent,
|
Grid,
|
Typography,
|
Tooltip,
|
} from "@mui/material";
|
import { useTranslate, useRecordContext } from "react-admin";
|
import PanelTypography from "@/page/components/PanelTypography";
|
import * as Common from "@/utils/common";
|
|
const UserPanel = () => {
|
const record = useRecordContext();
|
if (!record) return null;
|
const translate = useTranslate();
|
return (
|
<>
|
<Card
|
sx={{ width: { xs: 300, sm: 500, md: 600, lg: 800 }, margin: "auto" }}
|
>
|
<CardContent>
|
<Grid container spacing={2}>
|
<Grid
|
item
|
xs={12}
|
sx={{ display: "flex", justifyContent: "space-between" }}
|
>
|
<Typography
|
variant="h6"
|
gutterBottom
|
align="left"
|
sx={{
|
maxWidth: {
|
xs: "100px",
|
sm: "180px",
|
md: "260px",
|
lg: "360px",
|
},
|
whiteSpace: "nowrap",
|
overflow: "hidden",
|
textOverflow: "ellipsis",
|
}}
|
>
|
{Common.camelToPascalWithSpaces(
|
translate("table.field.user.nickname"),
|
)}
|
: {record.nickname}
|
</Typography>
|
{/* inherit, primary, secondary, textPrimary, textSecondary, error */}
|
<Typography variant="h6" gutterBottom align="right">
|
ID: {record.id}
|
</Typography>
|
</Grid>
|
</Grid>
|
<Grid container spacing={2}>
|
<Grid item xs={12} container alignContent="flex-end">
|
<Typography
|
variant="caption"
|
color="textSecondary"
|
sx={{ wordWrap: "break-word", wordBreak: "break-all" }}
|
>
|
{Common.camelToPascalWithSpaces(translate("common.field.memo"))}
|
:{record.memo}
|
</Typography>
|
</Grid>
|
</Grid>
|
<Box height={20}> </Box>
|
<Grid container spacing={2}>
|
<Grid item xs={6}>
|
<PanelTypography
|
title="table.field.user.username"
|
property={record.username}
|
/>
|
</Grid>
|
<Grid item xs={6}>
|
<PanelTypography
|
title="table.field.user.nickname"
|
property={record.nickname}
|
/>
|
</Grid>
|
<Grid item xs={6}>
|
<PanelTypography
|
title="table.field.user.avatar"
|
property={record.avatar}
|
/>
|
</Grid>
|
<Grid item xs={6}>
|
<PanelTypography
|
title="table.field.user.code"
|
property={record.code}
|
/>
|
</Grid>
|
<Grid item xs={6}>
|
<PanelTypography
|
title="table.field.user.sex"
|
property={record.sex$}
|
/>
|
</Grid>
|
<Grid item xs={6}>
|
<PanelTypography
|
title="table.field.user.phone"
|
property={record.phone}
|
/>
|
</Grid>
|
<Grid item xs={6}>
|
<PanelTypography
|
title="table.field.user.email"
|
property={record.email}
|
/>
|
</Grid>
|
<Grid item xs={6}>
|
<PanelTypography
|
title="table.field.user.emailVerified"
|
property={record.emailVerified$}
|
/>
|
</Grid>
|
<Grid item xs={6}>
|
<PanelTypography
|
title="table.field.user.deptId"
|
property={record.deptId$}
|
/>
|
</Grid>
|
<Grid item xs={6}>
|
<PanelTypography
|
title="table.field.user.realName"
|
property={record.realName}
|
/>
|
</Grid>
|
<Grid item xs={6}>
|
<PanelTypography
|
title="table.field.user.idCard"
|
property={record.idCard}
|
/>
|
</Grid>
|
<Grid item xs={6}>
|
<PanelTypography
|
title="table.field.user.birthday"
|
property={record.birthday}
|
/>
|
</Grid>
|
{/* <Grid item xs={6}>
|
<PanelTypography
|
title="table.field.user.introduction"
|
property={record.introduction}
|
/>
|
</Grid> */}
|
</Grid>
|
</CardContent>
|
</Card>
|
</>
|
);
|
};
|
|
export default UserPanel;
|
