From a374d4d40fa8deb9ea5690b8a9df74374101cbe7 Mon Sep 17 00:00:00 2001
From: jialin <jialinkuang@126.com>
Date: Thu, 9 Jan 2025 10:47:36 +0800
Subject: [PATCH] fix: body scrolls to top after opening a modal

---
 src/components/tags-wrapper/index.tsx         |  2 +-
 src/global.less                               |  1 +
 src/pages/llmodels/catalog.tsx                | 63 ++------------
 .../llmodels/components/catalog-list.tsx      | 87 +++++++++++++++++++
 .../playground/components/ground-images.tsx   |  2 +-
 .../playground/components/image-edit.tsx      |  2 +-
 src/pages/playground/config/params-config.ts  |  5 +-
 7 files changed, 102 insertions(+), 60 deletions(-)
 create mode 100644 src/pages/llmodels/components/catalog-list.tsx

diff --git a/src/components/tags-wrapper/index.tsx b/src/components/tags-wrapper/index.tsx
index 6c31eb7b..7fdd93de 100644
--- a/src/components/tags-wrapper/index.tsx
+++ b/src/components/tags-wrapper/index.tsx
@@ -53,7 +53,7 @@ const TagsWrapper: React.FC<TagsWrapperProps> = (props) => {
       const nodeWidth = sizeList[i];
 
       if (totalWidth + moreButtonWidth.current >= wrapperWidth) {
-        end = i - 1;
+        end = i - 1 < 0 ? 0 : i - 1;
         break;
       }
       totalWidth += nodeWidth;
diff --git a/src/global.less b/src/global.less
index 4d20d6a8..7710942c 100644
--- a/src/global.less
+++ b/src/global.less
@@ -184,6 +184,7 @@ body {
   font-family: 'noto sans', sans-serif;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
+  overflow-y: initial !important;
 
   &::-webkit-scrollbar {
     width: 0;
diff --git a/src/pages/llmodels/catalog.tsx b/src/pages/llmodels/catalog.tsx
index 3cbaf4e1..8ea2462c 100644
--- a/src/pages/llmodels/catalog.tsx
+++ b/src/pages/llmodels/catalog.tsx
@@ -4,23 +4,11 @@ import breakpoints from '@/config/breakpoints';
 import { SyncOutlined } from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-components';
 import { useIntl, useNavigate } from '@umijs/max';
-import {
-  Button,
-  Col,
-  Input,
-  Pagination,
-  Row,
-  Select,
-  Space,
-  Spin,
-  message
-} from 'antd';
+import { Button, Input, Pagination, Select, Space, message } from 'antd';
 import _ from 'lodash';
-import ResizeObserver from 'rc-resize-observer';
 import React, { useCallback, useEffect, useState } from 'react';
 import { createModel, queryCatalogList } from './apis';
-import CatalogItem from './components/catalog-item';
-import CatalogSkelton from './components/catalog-skelton';
+import CatalogList from './components/catalog-list';
 import DelopyBuiltInModal from './components/deploy-builtin-modal';
 import { modelCategories, modelSourceMap } from './config';
 import { CatalogItem as CatalogItemType, FormData } from './config/types';
@@ -266,46 +254,13 @@ const Catalog: React.FC = () => {
           </Space>
         }
       ></PageTools>
-      <div className="relative" style={{ width: '100%' }}>
-        <ResizeObserver onResize={handleResize}>
-          <Row gutter={[16, 16]}>
-            {dataSource.dataList.map((item: CatalogItemType, index) => {
-              return (
-                <Col span={span} key={item.id}>
-                  <CatalogItem
-                    onClick={handleOnDeploy}
-                    activeId={activeId}
-                    data={item}
-                  ></CatalogItem>
-                </Col>
-              );
-            })}
-          </Row>
-          {dataSource.loading && (
-            <div
-              style={{
-                width: '100%',
-                position: 'absolute',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                top: 0,
-                left: 0,
-                height: 400,
-                right: 0
-              }}
-            >
-              <Spin
-                spinning={dataSource.loading}
-                style={{ width: '100%' }}
-                wrapperClassName="skelton-wrapper"
-              >
-                {isFirst && <CatalogSkelton span={span}></CatalogSkelton>}
-              </Spin>
-            </div>
-          )}
-        </ResizeObserver>
-      </div>
+      <CatalogList
+        dataList={dataSource.dataList}
+        loading={dataSource.loading}
+        onDeploy={handleOnDeploy}
+        activeId={-1}
+        isFirst={isFirst}
+      ></CatalogList>
       <div style={{ marginBlock: '32px 16px' }}>
         <Pagination
           hideOnSinglePage={queryParams.perPage === 100}
diff --git a/src/pages/llmodels/components/catalog-list.tsx b/src/pages/llmodels/components/catalog-list.tsx
new file mode 100644
index 00000000..283b386f
--- /dev/null
+++ b/src/pages/llmodels/components/catalog-list.tsx
@@ -0,0 +1,87 @@
+import breakpoints from '@/config/breakpoints';
+import { Col, Row, Spin } from 'antd';
+import ResizeObserver from 'rc-resize-observer';
+import React, { useCallback } from 'react';
+import { CatalogItem as CatalogItemType } from '../config/types';
+import CatalogItem from './catalog-item';
+import CatalogSkelton from './catalog-skelton';
+
+interface CatalogListProps {
+  dataList: any[];
+  loading: boolean;
+  activeId: number;
+  isFirst: boolean;
+  onDeploy: (data: any) => void;
+}
+
+const CatalogList: React.FC<CatalogListProps> = (props) => {
+  const { dataList, loading, activeId, isFirst, onDeploy } = props;
+  const [span, setSpan] = React.useState(8);
+
+  const handleResize = useCallback(
+    _.throttle((size: { width: number; height: number }) => {
+      const { width } = size;
+      if (width < breakpoints.xs) {
+        setSpan(24);
+      } else if (width < breakpoints.sm) {
+        setSpan(24);
+      } else if (width < breakpoints.md) {
+        setSpan(12);
+      } else if (width < breakpoints.lg) {
+        setSpan(12);
+      } else {
+        setSpan(8);
+      }
+    }, 100),
+    []
+  );
+
+  return (
+    <div className="relative" style={{ width: '100%' }}>
+      <ResizeObserver onResize={handleResize}>
+        <div>
+          <Row gutter={[16, 16]}>
+            {dataList.map((item: CatalogItemType, index) => {
+              return (
+                <Col span={span} key={item.id}>
+                  <CatalogItem
+                    onClick={onDeploy}
+                    activeId={activeId}
+                    data={item}
+                  ></CatalogItem>
+                </Col>
+              );
+            })}
+          </Row>
+          {loading && (
+            <div
+              style={{
+                width: '100%',
+                position: 'absolute',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                top: 0,
+                left: 0,
+                height: 400,
+                right: 0
+              }}
+            >
+              <Spin
+                spinning={loading}
+                style={{
+                  width: '100%'
+                }}
+                wrapperClassName="skelton-wrapper"
+              >
+                {isFirst && <CatalogSkelton span={span}></CatalogSkelton>}
+              </Spin>
+            </div>
+          )}
+        </div>
+      </ResizeObserver>
+    </div>
+  );
+};
+
+export default React.memo(CatalogList);
diff --git a/src/pages/playground/components/ground-images.tsx b/src/pages/playground/components/ground-images.tsx
index 03fef606..c73fab78 100644
--- a/src/pages/playground/components/ground-images.tsx
+++ b/src/pages/playground/components/ground-images.tsx
@@ -67,7 +67,7 @@ const advancedFieldsDefaultValus = {
   guidance: 3.5,
   sampling_steps: 10,
   negative_prompt: null,
-  schedule_method: 'default',
+  schedule_method: 'discrete',
   preview: null
 };
 
diff --git a/src/pages/playground/components/image-edit.tsx b/src/pages/playground/components/image-edit.tsx
index 6ae911cc..3c3e2bbc 100644
--- a/src/pages/playground/components/image-edit.tsx
+++ b/src/pages/playground/components/image-edit.tsx
@@ -71,7 +71,7 @@ const advancedFieldsDefaultValus = {
   sampling_steps: 10,
   negative_prompt: null,
   preview: null,
-  schedule_method: 'default'
+  schedule_method: 'discrete'
 };
 
 const openaiCompatibleFieldsDefaultValus = {
diff --git a/src/pages/playground/config/params-config.ts b/src/pages/playground/config/params-config.ts
index 1505157a..0df7b77c 100644
--- a/src/pages/playground/config/params-config.ts
+++ b/src/pages/playground/config/params-config.ts
@@ -15,8 +15,8 @@ export const imageSizeOptions: {
     height: 0
   },
   { label: '512x512', value: '512x512', width: 512, height: 512 },
-  { label: '768x1024', value: '768x1024', width: 768, height: 1024 },
-  { label: '1024x768', value: '1024x768', width: 1024, height: 768 },
+  { label: '768x1024(3:4)', value: '768x1024', width: 768, height: 1024 },
+  { label: '1024x768(4:3)', value: '1024x768', width: 1024, height: 768 },
   { label: '1024x1024', value: '1024x1024', width: 1024, height: 1024 }
 ];
 
@@ -278,7 +278,6 @@ export const ImageAdvancedParamsConfig: ParamsSchema[] = [
     type: 'Select',
     name: 'schedule_method',
     options: [
-      { label: 'default', value: 'default' },
       { label: 'discrete', value: 'discrete' },
       { label: 'karras', value: 'karras' },
       { label: 'exponential', value: 'exponential' },