chore: infinite scroller

src/pages/llmodels/catalog.tsx

@@ -1,13 +1,14 @@
 import { modelsExpandKeysAtom } from '@/atoms/models';
-import MoreButton from '@/components/buttons/more';
 import PageTools from '@/components/page-tools';
 import BaseSelect from '@/components/seal-form/base/select';
 import { PageAction } from '@/config';
 import useBodyScroll from '@/hooks/use-body-scroll';
+import { ScrollerContext } from '@/pages/_components/infinite-scroller/use-scroller-context';
 import { IS_FIRST_LOGIN, writeState } from '@/utils/localstore/index';
 import { SearchOutlined, SyncOutlined } from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-components';
 import { useIntl, useNavigate } from '@umijs/max';
+import { useMemoizedFn } from 'ahooks';
 import { Button, Input, Pagination, Space, message } from 'antd';
 import { useAtom } from 'jotai';
 import _ from 'lodash';
@@ -213,12 +214,12 @@ const Catalog: React.FC = () => {
     });
   };
 
-  const loadMore = () => {
+  const loadMore = useMemoizedFn((nextPage: number) => {
     fetchData({
       ...queryParams,
-      page: queryParams.page + 1
+      page: nextPage
     });
-  };
+  });
 
   useEffect(() => {
     fetchData();
@@ -303,18 +304,23 @@ const Catalog: React.FC = () => {
           </Space>
         }
       ></PageTools>
-      <CatalogList
-        dataList={dataSource.dataList}
-        loading={dataSource.loading}
-        onDeploy={handleOnDeploy}
-        activeId={-1}
-        isFirst={isFirst}
-      ></CatalogList>
-      <MoreButton
-        show={queryParams.page < dataSource.totalPage}
-        loading={dataSource.loading}
-        loadMore={loadMore}
-      ></MoreButton>
+      <ScrollerContext.Provider
+        value={{
+          total: dataSource.totalPage,
+          current: queryParams.page,
+          loading: dataSource.loading,
+          refresh: loadMore,
+          throttleDelay: 300
+        }}
+      >
+        <CatalogList
+          dataList={dataSource.dataList}
+          loading={dataSource.loading}
+          onDeploy={handleOnDeploy}
+          activeId={-1}
+          isFirst={isFirst}
+        ></CatalogList>
+      </ScrollerContext.Provider>
       <PageWrapper>
         <Pagination
           hideOnSinglePage={queryParams.perPage === 100}

src/pages/llmodels/components/catalog-list.tsx

@@ -1,5 +1,7 @@
 import CatalogSkelton from '@/components/templates/card-skelton';
 import breakpoints from '@/config/breakpoints';
+import InfiniteScroller from '@/pages/_components/infinite-scroller';
+import { useScrollerContext } from '@/pages/_components/infinite-scroller/use-scroller-context';
 import { Col, FloatButton, Row, Spin } from 'antd';
 import _ from 'lodash';
 import ResizeObserver from 'rc-resize-observer';
@@ -54,6 +56,13 @@ const ListSkeleton: React.FC<{
 
 const CatalogList: React.FC<CatalogListProps> = (props) => {
   const { dataList, loading, activeId, isFirst, onDeploy } = props;
+  const {
+    total,
+    current,
+    loading: contextLoading,
+    refresh,
+    throttleDelay
+  } = useScrollerContext();
   const [span, setSpan] = React.useState(8);
 
   const getSpanByWidth = (width: number) => {
@@ -72,7 +81,13 @@ const CatalogList: React.FC<CatalogListProps> = (props) => {
   return (
     <div className="relative" style={{ width: '100%' }}>
       <ResizeObserver onResize={handleResize}>
-        <div>
+        <InfiniteScroller
+          total={total}
+          current={current}
+          loading={contextLoading}
+          refresh={refresh}
+          throttleDelay={throttleDelay}
+        >
           <Row gutter={[16, 16]}>
             {dataList.map((item: CatalogItemType, index) => {
               return (
@@ -87,11 +102,11 @@ const CatalogList: React.FC<CatalogListProps> = (props) => {
             })}
           </Row>
           <ListSkeleton span={span} loading={loading} isFirst={isFirst} />
-        </div>
+        </InfiniteScroller>
       </ResizeObserver>
       <FloatButton.BackTop visibilityHeight={1000} />
     </div>
   );
 };
 
-export default React.memo(CatalogList);
+export default CatalogList;

src/pages/llmodels/config/backend-parameters/index.ts

@@ -7,7 +7,7 @@ export const backendOptionsMap = {
   vllm: 'vLLM',
   voxBox: 'vox-box',
   ascendMindie: 'MindIE',
-  custom: 'custom'
+  custom: 'Custom'
 };
 
 export interface BackendParameter {

src/pages/llmodels/forms/backend.tsx

@@ -114,7 +114,7 @@ const BackendFields: React.FC = () => {
               required
               allowClear
               scaleSize={true}
-              label="Image Name"
+              label={intl.formatMessage({ id: 'backend.imageName' })}
             ></SealInput.Input>
           </Form.Item>
           <Form.Item<FormData> name="run_command" rules={[{ required: true }]}>
@@ -122,7 +122,7 @@ const BackendFields: React.FC = () => {
               required
               scaleSize={true}
               allowClear
-              label="Execution Command"
+              label={intl.formatMessage({ id: 'backend.runCommand' })}
             ></SealInput.TextArea>
           </Form.Item>
         </>

src/pages/llmodels/forms/index.tsx

@@ -264,7 +264,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
           items={[
             {
               key: 'performance',
-              label: 'Performance',
+              label: intl.formatMessage({ id: 'models.form.performance' }),
               forceRender: true,
               children: <Performance></Performance>
             },

src/pages/llmodels/user-models.tsx

@@ -1,4 +1,3 @@
-import MoreButton from '@/components/buttons/more';
 import PageTools from '@/components/page-tools';
 import BaseSelect from '@/components/seal-form/base/select';
 import CardList from '@/components/templates/card-list';
@@ -7,8 +6,10 @@ import useTableFetch from '@/hooks/use-table-fetch';
 import { SyncOutlined } from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-components';
 import { useIntl, useNavigate } from '@umijs/max';
+import useMemoizedFn from 'ahooks/lib/useMemoizedFn';
 import { Button, Input, Space } from 'antd';
 import React from 'react';
+import { ScrollerContext } from '../_components/infinite-scroller/use-scroller-context';
 import { MY_MODELS_API, queryMyModels } from './apis';
 import ModelItem from './components/model-item';
 import { categoryOptions, modelCategoriesMap } from './config';
@@ -30,13 +31,6 @@ const UserModels: React.FC = () => {
   });
   const intl = useIntl();
 
-  const loadMore = () => {
-    fetchData({
-      ...queryParams,
-      page: queryParams.page + 1
-    });
-  };
-
   const handleCategoryChange = (value: string) => {
     handleQueryChange({
       categories: value
@@ -67,6 +61,13 @@ const UserModels: React.FC = () => {
     return <ModelItem model={data} onClick={handleOnClick} />;
   };
 
+  const loadMore = useMemoizedFn((nextPage: number) => {
+    fetchData({
+      ...queryParams,
+      page: nextPage
+    });
+  });
+
   return (
     <PageContainer
       ghost
@@ -116,19 +117,23 @@ const UserModels: React.FC = () => {
           </Space>
         }
       ></PageTools>
-      <CardList
-        dataList={dataSource.dataList}
-        loading={dataSource.loading}
-        activeId={false}
-        isFirst={!dataSource.loadend}
-        Skeleton={CardSkeleton}
-        renderItem={renderCard}
-      ></CardList>
-      <MoreButton
-        show={queryParams.page < dataSource.totalPage}
-        loading={dataSource.loading}
-        loadMore={loadMore}
-      ></MoreButton>
+      <ScrollerContext.Provider
+        value={{
+          total: dataSource.totalPage,
+          current: queryParams.page,
+          loading: dataSource.loading,
+          refresh: loadMore
+        }}
+      >
+        <CardList
+          dataList={dataSource.dataList}
+          loading={dataSource.loading}
+          activeId={false}
+          isFirst={!dataSource.loadend}
+          Skeleton={CardSkeleton}
+          renderItem={renderCard}
+        ></CardList>
+      </ScrollerContext.Provider>
     </PageContainer>
   );
 };