完善组件

src/components/dialog/useDialog.tsx

@@ -1,7 +1,11 @@
 import Dialog, { DialogProps, DialogRef } from './index.tsx'
-import { useRef, useCallback, useMemo } from 'react'
+import React, { useRef, useCallback, useMemo } from 'react'
 
-export const useDialog = (props: DialogProps) => {
+export interface UseDialogProps extends DialogProps {
+  content?: React.ReactNode | JSX.Element
+}
+
+export const useDialog = ({ content, children, ...props }: UseDialogProps) => {
   const dialogRef = useRef<DialogRef | undefined>()
 
   const openDialog = useCallback((data?: any) => {
@@ -20,7 +24,7 @@ export const useDialog = (props: DialogProps) => {
     }
   }, [])
 
-  const dialog = useMemo(() => <Dialog {...props} ref={dialogRef as any}/>, [ props ])
+  const dialog = useMemo(() => <Dialog {...props} ref={dialogRef as any}>{content || children}</Dialog>, [ props ])
 
   return [ dialogRef, dialog, openDialog, closeDialog ] as const
 }

src/components/modal-pro/index.tsx

@@ -0,0 +1,37 @@
+import { Modal, ModalFuncProps } from 'antd'
+import React from 'react'
+import { HookAPI } from 'antd/es/modal/useModal'
+import { useDialog } from '@/components/dialog'
+
+export interface AlterProps extends ModalFuncProps {
+  onLoad?: () => void
+  alterType: keyof HookAPI | 'dialog'
+  children: JSX.Element | React.ReactNode
+
+}
+
+const ModalPro = ({ onLoad, alterType, children, ...props }: AlterProps) => {
+
+  const [ modal, modalHolder ] = Modal.useModal()
+  const [ dialogRef, dialog, ] = useDialog(props)
+
+
+  return (
+          <>
+            <span onClick={() => {
+              if (onLoad) {
+                onLoad()
+              }
+              if (alterType === 'dialog') {
+                dialogRef.current?.show()
+              } else {
+                modal[alterType]?.(props)
+              }
+            }}>{children}</span>
+            {alterType !== 'dialog' && modalHolder}
+            {alterType === 'dialog' && dialog}
+          </>
+  )
+}
+
+export default ModalPro

src/components/table/Table.tsx

@@ -1,6 +1,8 @@
 import { ProTable, ProTableProps, ProCard } from '@ant-design/pro-components'
 import React, { useEffect, useRef, useState } from 'react'
 import { useStyle } from './style'
+import { Pagination } from 'antd'
+import { t } from '@/i18n.ts'
 
 export interface TableProps<T = any, D = any> extends ProTableProps<T, D> {
 
@@ -65,6 +67,7 @@ export const Table = <T extends Record<string, any> = any, D = any>(props: Table
 
   }, [ alterRef.current ])
 
+
   const style = {
     '--toolbar-height': `${toolbarHeight}px`,
     '--alter-height': `${alterHeight}px`,
@@ -76,6 +79,13 @@ export const Table = <T extends Record<string, any> = any, D = any>(props: Table
           className={styles.container}
           style={style}
           tableRender={(props, _dom, domList) => {
+            const pagination = props.pagination as any
+
+            if (pagination !== false) {
+              pagination.align = pagination.align || 'end'
+              pagination.position = pagination.position || 'bottomRight'
+            }
+
             return <ProCard
                     ghost={props.ghost}
                     {...props.cardProps}
@@ -85,8 +95,17 @@ export const Table = <T extends Record<string, any> = any, D = any>(props: Table
                     }}
             >
               <div ref={toolbarRef as any}>{domList.toolbar}</div>
-              <div ref={alterRef as any}>{domList.alert}</div>
               <>{domList.table}</>
+              <div className={styles.footer}>
+                <>{domList.alert}</>
+                <div className={'footer-fill'}></div>
+                <Pagination size={'small'}
+                            {...pagination}
+                            className={styles.pagination}
+                            showTotal={(total: number, range: [ number, number ]) => `${t('pagination.total.range', '第')} ${range[0]}-${range[1]} ${t('pagination.total.total', '条/总共')} ${total} ${t('pagination.total.item', '条')}`}
+                            showQuickJumper={true}
+                            showSizeChanger={true}/>
+              </div>
             </ProCard>
           }}
           scroll={scroll}

src/components/table/style.ts

@@ -1,48 +1,106 @@
 import { createStyles } from '@/theme'
 import { useScrollStyle } from '@/hooks/useScrollStyle.ts'
+import { unit } from '@ant-design/cssinjs'
 
 export const useStyle = createStyles(({ token, css, cx, prefixCls }, props: any) => {
-    const prefix = `${prefixCls}-${token?.proPrefix}-my-table`
-  const {  scrollbar  } = useScrollStyle()
+  const prefix = `${prefixCls}-${token?.proPrefix}-my-table`
+  const { scrollbar } = useScrollStyle()
 
-    const container = css`
+  const container = css`
 
-      --toolbar-height: 65px;
-      --alter-height: 0px;
-      --padding: 33px;
-      --table-body-height: calc( var(--pageHeader, 0px) + var(--toolbar-height, 65px) + var(--alter-height, 0px) + var(--header-height, 56px) + var(--padding, 20px) * 4);
+    --toolbar-height: 65px;
+    --alter-height: 0px;
+    --padding: 33px;
+    --table-body-height: calc(var(--pageHeader, 0px) + var(--toolbar-height, 65px) + var(--alter-height, 0px) + var(--header-height, 56px) + var(--padding, 20px) * 4);
 
-      .ant-table-body {
-        overflow: auto scroll;
-        max-height: calc(100vh - var(--table-body-height)) !important;
-        height: calc(100vh - var(--table-body-height)) !important;
-        
-      }
+    .ant-table-body {
+      overflow: auto scroll;
+      max-height: calc(100vh - var(--table-body-height)) !important;
+      height: calc(100vh - var(--table-body-height)) !important;
+
+    }
 
+    .ant-table-wrapper .ant-table {
+      scrollbar-color: unset;
+    }
 
-      .ant-table-wrapper .ant-table{
-        scrollbar-color: unset;
+    .ant-table-wrapper {
+      .ant-pagination {
+        display: none;
       }
-      .ant-table-body{
+    }
 
-        ${scrollbar}
+    .ant-table-body {
 
+      ${scrollbar}
+
+    }
+
+    .ant-table-pagination.ant-pagination {
+      margin: ${unit(token.margin)} 0;
+    }
+
+
+    .ant-table-cell {
+      .ant-divider-vertical {
+        margin-inline: 0;
       }
-      .ant-table-pagination.ant-pagination {
-        border-top: 1px solid #ebeef5;
-        height: 51px;
-        margin: 0;
-        align-content: center;
-      }
+    }
+  `
+
+  const pagination = {
+
+    borderTop: '1px solid #ebeef5',
+    height: '51px',
+    margin: '0',
+    alignContent: 'center',
+    display: 'flex',
+    flexWrap: 'wrap',
+    rowGap: token.paddingXS,
+    justifyContent: 'flex-end',
+
+
+    '> *': {
+      flex: 'none',
+    },
+
+    '&-left': {
+      justifyContent: 'flex-start',
+    },
+
+    '&-center': {
+      justifyContent: 'center',
+    },
+
+    '&-right': {
+      justifyContent: 'flex-end',
+    },
+  }
+
+  const footer = css`
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    overflow: hidden;
+    
+    .ant-pro-table-alert{
+      max-width: 50%;
+      overflow: auto; 
+      margin-block-end: 0;
+      background-color: transparent;
       
-      .ant-table-cell{
-        .ant-divider-vertical{
-          margin-inline: 0;
-        }
+      .ant-pro-table-alert-container{
+        padding-inline: 0;
       }
-    `
-
-    return {
-        container: cx(prefix, props?.className, container),
     }
+    &-fill{
+      flex: 1;
+    }
+  `
+
+  return {
+    container: cx(prefix, props?.className, container),
+    pagination: pagination as any,
+    footer,
+  }
 })