feat(admin): 增加用户详情页，并增加重置密码功能

server/admin/app/ra/App.tsx

@@ -1,7 +1,7 @@
 import { Admin, Resource, ShowGuesser, CustomRoutes } from 'react-admin';
 import jsonServerProvider from 'ra-data-json-server';
 import { authProvider } from './authProvider';
-import { UserList } from './resources/user';
+import { UserList, UserShow } from './resources/user';
 import React from 'react';
 import { GroupList, GroupShow } from './resources/group';
 import { MessageList } from './resources/chat';
@@ -41,7 +41,7 @@ export const App = () => (
       name="users"
       options={{ label: '用户管理' }}
       list={UserList}
-      show={ShowGuesser}
+      show={UserShow}
     />
     <Resource
       icon={MessageIcon}

server/admin/app/ra/components/ButtonWithConfirm.tsx

@@ -0,0 +1,45 @@
+import React, { useState } from 'react';
+import { Button, ButtonProps, Confirm } from 'react-admin';
+
+interface Props extends Pick<ButtonProps, 'label'> {
+  component?: React.ComponentType<ButtonProps>;
+  confirmTitle?: string;
+  confirmContent?: string;
+  onConfirm?: () => void;
+}
+export const ButtonWithConfirm: React.FC<Props> = React.memo((props) => {
+  const {
+    component: ButtonComponent = Button,
+    confirmTitle = '确认要进行该操作么？',
+    confirmContent = '该操作不可撤回',
+  } = props;
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  return (
+    <>
+      <ButtonComponent
+        onClick={(e) => {
+          setOpen(true);
+        }}
+        label={props.label}
+      />
+      <Confirm
+        isOpen={open}
+        loading={loading}
+        title={confirmTitle}
+        content={confirmContent}
+        onConfirm={() => {
+          setLoading(true);
+          props.onConfirm?.();
+          setLoading(false);
+          setOpen(false);
+        }}
+        onClose={() => {
+          setOpen(false);
+        }}
+      />
+    </>
+  );
+});
+ButtonWithConfirm.displayName = 'ButtonWithConfirm';

server/admin/app/ra/components/DangerButton.tsx

@@ -0,0 +1,17 @@
+import { styled, alpha } from '@mui/material';
+import { Button } from 'react-admin';
+
+export const DangerButton = styled(Button, {
+  name: 'DangerBtn',
+  overridesResolver: (props, styles) => styles.root,
+})(({ theme }) => ({
+  color: theme.palette.error.main,
+  '&:hover': {
+    backgroundColor: alpha(theme.palette.error.main, 0.12),
+    // Reset on mouse devices
+    '@media (hover: none)': {
+      backgroundColor: 'transparent',
+    },
+  },
+}));
+DangerButton.displayName = 'DangerButton';

server/admin/app/ra/resources/user.tsx

@@ -6,12 +6,18 @@ import {
   List,
   TextField,
   ShowButton,
-  EditButton,
   SearchInput,
   ImageField,
+  Show,
+  SimpleShowLayout,
+  TopToolbar,
+  useUpdate,
+  useShowContext,
 } from 'react-admin';
 import React from 'react';
 import { Box } from '@mui/material';
+import { DangerButton } from '../components/DangerButton';
+import { ButtonWithConfirm } from '../components/ButtonWithConfirm';
 
 const PostListActionToolbar = ({ children, ...props }) => (
   <Box sx={{ alignItems: 'center', display: 'flex' }}>{children}</Box>
@@ -49,3 +55,50 @@ export const UserList: React.FC = () => (
   </List>
 );
 UserList.displayName = 'UserList';
+
+const UserShowActions: React.FC = () => {
+  const [update] = useUpdate();
+  const { record, refetch, resource } = useShowContext();
+
+  return (
+    <TopToolbar>
+      {/* <EditButton /> */}
+
+      <ButtonWithConfirm
+        component={DangerButton}
+        label="重置密码"
+        confirmContent="重置密码后密码变为: 123456789, 请及时修改密码"
+        onConfirm={async () => {
+          await update(resource, {
+            id: record.id,
+            data: {
+              password:
+                '$2a$10$eSebpg0CEvsbDC7j1NxB2epMUkYwKhfT8vGdPQYkfeXYMqM8HjnpW', // 123456789
+            },
+          });
+          await refetch();
+        }}
+      />
+    </TopToolbar>
+  );
+};
+UserShowActions.displayName = 'UserShowActions';
+
+export const UserShow: React.FC = () => (
+  <Show actions={<UserShowActions />}>
+    <SimpleShowLayout>
+      <TextField source="id" />
+      <DateField source="createdAt" />
+      <EmailField source="email" />
+      <TextField source="password" />
+      <TextField source="nickname" />
+      <TextField source="discriminator" />
+      <BooleanField source="temporary" />
+      <TextField source="avatar" />
+      <TextField source="type" />
+      <DateField source="updatedAt" />
+      <BooleanField source="settings.messageListVirtualization" />
+    </SimpleShowLayout>
+  </Show>
+);
+UserShow.displayName = 'UserShow';