fix: page got stuck when logs size too large

2024-11-05 19:46:47 +08:00
parent 9d654bcd66
commit 5f2115fff6
19 changed files with 797 additions and 49 deletions
@@ -0,0 +1,69 @@
+import { DownOutlined, UpOutlined } from '@ant-design/icons';
+import { useIntl } from '@umijs/max';
+import { Button, Tooltip } from 'antd';
+import React from 'react';
+import './styles/pagination.less';
+
+interface LogsPaginationProps {
+  page: number;
+  total: number;
+  pageSize?: number;
+  onPrev?: () => void;
+  onNext?: () => void;
+}
+
+const LogsPagination: React.FC<LogsPaginationProps> = (props) => {
+  const { page, total, pageSize, onNext, onPrev } = props;
+  const intl = useIntl();
+
+  const handleOnPrev = () => {
+    onPrev?.();
+  };
+
+  const handleOnNext = () => {
+    onNext?.();
+  };
+
+  return (
+    <div className="pagination">
+      <Tooltip
+        title={intl.formatMessage(
+          { id: 'models.logs.pagination.prev' },
+          { lines: pageSize }
+        )}
+      >
+        <Button
+          onClick={handleOnPrev}
+          type="text"
+          shape="circle"
+          style={{ color: 'rgba(255,255,255,.7)' }}
+        >
+          <UpOutlined />
+        </Button>
+      </Tooltip>
+      <span className="pages">
+        <span className="curr">{page}</span> /{' '}
+        <span className="total">{total}</span>
+      </span>
+      {page < total && (
+        <Tooltip
+          title={intl.formatMessage(
+            { id: 'models.logs.pagination.next' },
+            { lines: pageSize }
+          )}
+        >
+          <Button
+            onClick={handleOnNext}
+            type="text"
+            shape="circle"
+            style={{ color: 'rgba(255,255,255,.7)' }}
+          >
+            <DownOutlined />
+          </Button>
+        </Tooltip>
+      )}
+    </div>
+  );
+};
+
+export default React.memo(LogsPagination);