diff --git a/server/admin/app/ra/App.tsx b/server/admin/app/ra/App.tsx index 558895c2..ca26be60 100644 --- a/server/admin/app/ra/App.tsx +++ b/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} /> { + component?: React.ComponentType; + confirmTitle?: string; + confirmContent?: string; + onConfirm?: () => void; +} +export const ButtonWithConfirm: React.FC = React.memo((props) => { + const { + component: ButtonComponent = Button, + confirmTitle = '确认要进行该操作么?', + confirmContent = '该操作不可撤回', + } = props; + const [open, setOpen] = useState(false); + const [loading, setLoading] = useState(false); + + return ( + <> + { + setOpen(true); + }} + label={props.label} + /> + { + setLoading(true); + props.onConfirm?.(); + setLoading(false); + setOpen(false); + }} + onClose={() => { + setOpen(false); + }} + /> + + ); +}); +ButtonWithConfirm.displayName = 'ButtonWithConfirm'; diff --git a/server/admin/app/ra/components/DangerButton.tsx b/server/admin/app/ra/components/DangerButton.tsx new file mode 100644 index 00000000..0b563a52 --- /dev/null +++ b/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'; diff --git a/server/admin/app/ra/resources/user.tsx b/server/admin/app/ra/resources/user.tsx index 070aa911..710e8d23 100644 --- a/server/admin/app/ra/resources/user.tsx +++ b/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 }) => ( {children} @@ -49,3 +55,50 @@ export const UserList: React.FC = () => ( ); UserList.displayName = 'UserList'; + +const UserShowActions: React.FC = () => { + const [update] = useUpdate(); + const { record, refetch, resource } = useShowContext(); + + return ( + + {/* */} + + { + await update(resource, { + id: record.id, + data: { + password: + '$2a$10$eSebpg0CEvsbDC7j1NxB2epMUkYwKhfT8vGdPQYkfeXYMqM8HjnpW', // 123456789 + }, + }); + await refetch(); + }} + /> + + ); +}; +UserShowActions.displayName = 'UserShowActions'; + +export const UserShow: React.FC = () => ( + }> + + + + + + + + + + + + + + +); +UserShow.displayName = 'UserShow';