refactor(web): tablePageLayout replace

web/src/views/MemberManagement/index.tsx

@@ -10,7 +10,7 @@
  */
 
 import React, { useRef } from 'react';
-import { App, Button, Space, Flex } from 'antd';
+import { Button, Space } from 'antd';
 import { useTranslation } from 'react-i18next';
 import type { ColumnsType } from 'antd/es/table';
 
@@ -20,13 +20,15 @@ import type { Member, MemberModalRef } from './types'
 import Tag from '@/components/Tag';
 import Table, { type TableRef } from '@/components/Table'
 import { formatDateTime } from '@/utils/format';
+import TablePageLayout from '@/components/TablePageLayout';
+import useDeleteConfirm from '@/hooks/useDeleteConfirm';
 
 /**
  * Member management main component
  */
 const MemberManagement: React.FC = () => {
   const { t } = useTranslation();
-  const { message, modal } = App.useApp();
+  const deleteConfirm = useDeleteConfirm();
   const memberFormRef = useRef<MemberModalRef>(null);
   const tableRef = useRef<TableRef>(null);
 
@@ -43,20 +45,11 @@ const MemberManagement: React.FC = () => {
   }
 
   /** Delete member with confirmation */
-  const handleDelete = async (member: Member) => {
+  const handleDelete = (member: Member) => {
-    modal.confirm({
+    deleteConfirm({
-      title: t('common.confirmDeleteDesc', { name: member.username }),
+      name: member.username,
-      okText: t('common.delete'),
+      onOk: () => deleteMember(member.id).then(refreshTable),
-      cancelText: t('common.cancel'),
+    });
-      okType: 'danger',
-      onOk: () => {
-        deleteMember(member.id)
-          .then(() => {
-            message.success(t('common.deleteSuccess'));
-            refreshTable();
-          })
-      }
-    })
   };
 
   /** Table column configuration */
@@ -105,13 +98,10 @@ const MemberManagement: React.FC = () => {
   ];
 
   return (
-    <div className="rb:h-full rb:overflow-hidden rb:bg-white rb:rounded-lg rb:pt-3 rb:px-3">
+    <TablePageLayout
-      <Flex justify="space-between" align="center" className="rb:px-1! rb:mb-3!">
+      title={t('member.memberList')}
-        <div className="rb:font-[MiSans-Bold] rb:font-bold rb:text-[#212332] rb:leading-5">{t('member.memberList')}</div>
+      extra={<Button type="primary" onClick={() => handleEdit()}>+ {t('member.createMember')}</Button>}
-        <Button type="primary" onClick={() => handleEdit()}>
+    >
-          + {t('member.createMember')}
-        </Button>
-      </Flex>
       <Table<Member>
         ref={tableRef}
         apiUrl={memberListUrl}
@@ -125,7 +115,7 @@ const MemberManagement: React.FC = () => {
         ref={memberFormRef}
         refreshTable={refreshTable}
       />
-    </div>
+    </TablePageLayout>
   );
 };
 

web/src/views/UserManagement/index.tsx

@@ -21,6 +21,7 @@ import StatusTag from '@/components/StatusTag'
 import { deleteUser, enableUser, getUserListUrl } from '@/api/user'
 import ResetPasswordModal from './components/ResetPasswordModal'
 import { formatDateTime } from '@/utils/format';
+import TablePageLayout from '@/components/TablePageLayout';
 
 const UserManagement: React.FC = () => {
   const { t } = useTranslation();
@@ -142,14 +143,10 @@ const UserManagement: React.FC = () => {
   ];
 
   return (
-    <div className="rb:h-full rb:overflow-hidden rb:bg-white rb:rounded-lg rb:pt-3 rb:px-3">
+    <TablePageLayout
-      <Flex justify="space-between" align="center" className="rb:px-1! rb:mb-3!">
+      title={t('user.userList')}
-        <div className="rb:font-[MiSans-Bold] rb:font-bold rb:text-[#212332] rb:leading-5">{t('user.userList')}</div>
+      extra={<Button type="primary" onClick={handleCreate}>+ {t('user.createUser')}</Button>}
-        <Button type="primary" onClick={handleCreate}>
+    >
-          + {t('user.createUser')}
-        </Button>
-      </Flex>
-
       <Table<User>
         ref={tableRef}
         apiUrl={getUserListUrl}
@@ -169,7 +166,7 @@ const UserManagement: React.FC = () => {
       <ResetPasswordModal
         ref={resetPasswordModalRef}
       />
-    </div>
+    </TablePageLayout>
   );
 };