|  |  | 
 |  |  | import React, { useState, useRef, useEffect, useMemo } from "react"; | 
 |  |  | import { Box, Card, CardContent, Grid, Typography, Tooltip } from '@mui/material'; | 
 |  |  | import { | 
 |  |  |     useTranslate, | 
 |  |  |     useRecordContext, | 
 |  |  | } from 'react-admin'; | 
 |  |  |   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' | 
 |  |  | 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}> | 
 |  |  |   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 > | 
 |  |  |         </> | 
 |  |  |     ); | 
 |  |  |           </Grid> | 
 |  |  |         </CardContent> | 
 |  |  |       </Card> | 
 |  |  |     </> | 
 |  |  |   ); | 
 |  |  | }; | 
 |  |  |  | 
 |  |  | export default UserPanel; |