You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
tailchat/server/admin/app/ra/dashboard/index.tsx

79 lines
2.1 KiB
TypeScript

import React from 'react';
import CardWithIcon from './CardWithIcon';
import { Welcome } from './Welcome';
import PersonIcon from '@mui/icons-material/Person';
import MessageIcon from '@mui/icons-material/Message';
import GroupIcon from '@mui/icons-material/Group';
import AttachFileIcon from '@mui/icons-material/AttachFile';
import { useGetList } from 'react-admin';
import { Grid } from '@mui/material';
export const Dashboard: React.FC = React.memo(() => {
const { total: usersNum } = useGetList('users', {
pagination: { page: 1, perPage: 1 },
});
const { total: tempUsersNum } = useGetList('users', {
filter: { temporary: true },
pagination: { page: 1, perPage: 1 },
});
const { total: messageNum } = useGetList('messages', {
pagination: { page: 1, perPage: 1 },
});
const { total: groupNum } = useGetList('groups', {
pagination: { page: 1, perPage: 1 },
});
const { total: fileNum } = useGetList('file', {
pagination: { page: 1, perPage: 1 },
});
return (
<div>
<Welcome />
<Grid container spacing={2}>
<Grid item xs={4}>
<CardWithIcon
to="/admin/users"
icon={PersonIcon}
title={'用户数'}
subtitle={usersNum}
/>
</Grid>
<Grid item xs={4}>
<CardWithIcon
to="/admin/users"
icon={PersonIcon}
title={'临时用户数'}
subtitle={tempUsersNum}
/>
</Grid>
<Grid item xs={4}>
<CardWithIcon
to="/admin/messages"
icon={MessageIcon}
title={'总消息数'}
subtitle={messageNum}
/>
</Grid>
<Grid item xs={4}>
<CardWithIcon
to="/admin/groups"
icon={GroupIcon}
title={'总群组数'}
subtitle={groupNum}
/>
</Grid>
<Grid item xs={4}>
<CardWithIcon
to="/admin/file"
icon={AttachFileIcon}
title={'总文件数'}
subtitle={fileNum}
/>
</Grid>
</Grid>
</div>
);
});
Dashboard.displayName = 'Dashboard';