任务列表完成优化

skyouc

2025-05-20 a5816e4f1abd1e513d304357e542b75ff76a8f94

 rsf-admin/src/page/system/user/UserPanel.jsx

@@ -1,128 +1,156 @@
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}>&nbsp;</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}>&nbsp;</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;