fix: body scrolls to top after opening a modal

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;

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;

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 {
+import { Button, Input, Pagination, Select, Space, message } from 'antd';
-  Button,
-  Col,
-  Input,
-  Pagination,
-  Row,
-  Select,
-  Space,
-  Spin,
-  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 CatalogList from './components/catalog-list';
-import CatalogSkelton from './components/catalog-skelton';
 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%' }}>
+      <CatalogList
-        <ResizeObserver onResize={handleResize}>
+        dataList={dataSource.dataList}
-          <Row gutter={[16, 16]}>
+        loading={dataSource.loading}
-            {dataSource.dataList.map((item: CatalogItemType, index) => {
+        onDeploy={handleOnDeploy}
-              return (
+        activeId={-1}
-                <Col span={span} key={item.id}>
+        isFirst={isFirst}
-                  <CatalogItem
+      ></CatalogList>
-                    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>
       <div style={{ marginBlock: '32px 16px' }}>
         <Pagination
           hideOnSinglePage={queryParams.perPage === 100}

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);

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
 };
 

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 = {

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: '768x1024(3:4)', value: '768x1024', width: 768, height: 1024 },
-  { label: '1024x768', value: '1024x768', width: 1024, height: 768 },
+  { 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' },