fix: display image menu

src/pages/llmodels/catalog.tsx

@@ -1,19 +1,17 @@
 import { modelsExpandKeysAtom } from '@/atoms/models';
 import IconFont from '@/components/icon-font';
-import PageTools from '@/components/page-tools';
-import BaseSelect from '@/components/seal-form/base/select';
+import { FilterBar } from '@/components/page-tools';
 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 { SearchOutlined } from '@ant-design/icons';
 import { useIntl, useNavigate } from '@umijs/max';
 import { useMemoizedFn } from 'ahooks';
-import { Button, Input, Space, message } from 'antd';
+import { message } from 'antd';
 import { useAtom } from 'jotai';
 import _ from 'lodash';
 import React, { useCallback, useEffect, useState } from 'react';
-import styled from 'styled-components';
 import NoResult from '../_components/no-result';
 import PageBox from '../_components/page-box';
 import { createModel, queryCatalogList } from './apis';
@@ -22,11 +20,6 @@ import DelopyBuiltInModal from './components/deploy-builtin-modal';
 import { modelCategories, modelSourceMap } from './config';
 import { CatalogItem as CatalogItemType, FormData } from './config/types';
 
-const PageWrapper = styled.div`
-  display: none;
-  margin-block: 32px 16px;
-`;
-
 const Catalog: React.FC = () => {
   const intl = useIntl();
   const { saveScrollHeight, restoreScrollHeight } = useBodyScroll();
@@ -59,7 +52,9 @@ const Catalog: React.FC = () => {
   const [modelsExpandKeys, setModelsExpandKeys] = useAtom(modelsExpandKeysAtom);
   const cacheData = React.useRef<CatalogItemType[]>([]);
 
-  const categoryOptions = [...modelCategories.filter((item) => item.value)];
+  const categoryOptions = [
+    ...modelCategories.filter((item) => item.value)
+  ] as Global.BaseOption<string>[];
 
   const fetchData = useCallback(
     async (query?: any) => {
@@ -159,7 +154,7 @@ const Catalog: React.FC = () => {
     [openDeployModal]
   );
 
-  const handleSearch = (e: any) => {
+  const handleSearch = () => {
     fetchData({
       ...queryParams,
       page: 1
@@ -189,6 +184,10 @@ const Catalog: React.FC = () => {
     });
   });
 
+  const handleDeployFromOtherHubs = () => {
+    navigate('/models/deployments');
+  };
+
   useEffect(() => {
     fetchData();
   }, []);
@@ -220,49 +219,20 @@ const Catalog: React.FC = () => {
 
   return (
     <PageBox>
-      <PageTools
+      <FilterBar
+        showSelect={true}
+        selectHolder={intl.formatMessage({ id: 'models.filter.category' })}
         marginBottom={22}
         marginTop={0}
-        left={
-          <Space>
-            <Input
-              prefix={
-                <SearchOutlined
-                  style={{ color: 'var(--ant-color-text-placeholder)' }}
-                ></SearchOutlined>
-              }
-              placeholder={intl.formatMessage({ id: 'common.filter.name' })}
-              style={{ width: 230 }}
-              size="large"
-              allowClear
-              onClear={() =>
-                handleNameChange({
-                  target: {
-                    value: ''
-                  }
-                })
-              }
-              onChange={handleNameChange}
-            ></Input>
-            <BaseSelect
-              allowClear
-              showSearch={false}
-              placeholder={intl.formatMessage({ id: 'models.filter.category' })}
-              style={{ width: 200 }}
-              size="large"
-              maxTagCount={1}
-              onChange={handleCategoryChange}
-              options={categoryOptions}
-            ></BaseSelect>
-            <Button
-              type="text"
-              style={{ color: 'var(--ant-color-text-tertiary)' }}
-              icon={<SyncOutlined></SyncOutlined>}
-              onClick={handleSearch}
-            ></Button>
-          </Space>
-        }
-      ></PageTools>
+        buttonText={intl.formatMessage({ id: 'models.catalog.button.explore' })}
+        handleSearch={handleSearch}
+        handleSelectChange={handleCategoryChange}
+        handleClickPrimary={handleDeployFromOtherHubs}
+        handleInputChange={handleNameChange}
+        selectOptions={categoryOptions}
+        buttonIcon={<SearchOutlined />}
+        width={{ input: 230, select: 200 }}
+      ></FilterBar>
       <ScrollerContext.Provider
         value={{
           total: dataSource.totalPage,

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

@@ -652,7 +652,6 @@ const Models: React.FC<ModelsProps> = ({
                   items: sourceOptions,
                   onClick: handleClickDropdown
                 }}
-                trigger={['hover']}
                 placement="bottomRight"
               >
                 <Button

src/pages/llmodels/config/index.ts

@@ -335,6 +335,7 @@ export const DO_NOT_TRIGGER_CHECK_COMPATIBILITY = [
   'description',
   'env',
   'source',
+  'cluster_id',
   'quantization',
   'size',
   'restart_on_error',

src/pages/llmodels/forms/catalog.tsx

@@ -38,13 +38,13 @@ const CatalogForm: React.FC = () => {
         key="quantization"
         rules={[
           {
-            required: true,
-            message: getRuleMessage('select', 'models.form.quantization', false)
+            required: false,
+            message: getRuleMessage('select', 'models.catalog.precision', false)
           }
         ]}
       >
         <SealInput.Input
-          label={intl.formatMessage({ id: 'models.form.quantization' })}
+          label={intl.formatMessage({ id: 'models.catalog.precision' })}
           disabled
         ></SealInput.Input>
       </Form.Item>

src/pages/llmodels/forms/index.tsx

@@ -238,12 +238,16 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
     onOk(allValues);
   };
 
-  const handleClusterChange = (value: number) => {
+  const handleClusterChange = async (value: number) => {
     getGPUOptionList({ clusterId: value });
     getBackendOptions({ cluster_id: value });
     if (scheduleType === ScheduleValueMap.Manual) {
       form.setFieldValue(['gpu_selector', 'gpu_ids'], []);
     }
+    await new Promise((resolve) => {
+      setTimeout(resolve, 150);
+    });
+    onValuesChange?.({}, form.getFieldsValue());
   };
 
   const getFieldPaths = (obj: Record<string, any>, prefix = ''): string => {
@@ -259,6 +263,12 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
     return result[0] || '';
   };
 
+  /**
+   * auto check compatibility or notify recreate when certain fields change
+   * @param changedValues
+   * @param allValues
+   * @returns
+   */
   const handleOnValuesChange = async (changedValues: any, allValues: any) => {
     const fieldName = getFieldPaths(changedValues);