chore: update ui tips

src/pages/llmodels/components/advance-config.tsx

@@ -6,7 +6,7 @@ import SealInput from '@/components/seal-form/seal-input';
 import SealSelect from '@/components/seal-form/seal-select';
 import TooltipList from '@/components/tooltip-list';
 import { PageActionType } from '@/config/types';
-import { InfoCircleOutlined, RightOutlined } from '@ant-design/icons';
+import { QuestionCircleOutlined, RightOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import {
   Checkbox,
@@ -362,7 +362,7 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
                       id: 'resources.form.enablePartialOffload'
                     })}
                   </span>
-                  <InfoCircleOutlined
+                  <QuestionCircleOutlined
                     className="m-l-4"
                     style={{ color: 'var(--ant-color-text-tertiary)' }}
                   />
@@ -390,7 +390,7 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
                       id: 'resources.form.enableDistributedInferenceAcrossWorkers'
                     })}
                   </span>
-                  <InfoCircleOutlined
+                  <QuestionCircleOutlined
                     className="m-l-4"
                     style={{ color: 'var(--ant-color-text-tertiary)' }}
                   />

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

@@ -15,24 +15,55 @@ interface CatalogListProps {
   onDeploy: (data: any) => void;
 }
 
+const ListSkeleton: React.FC<{
+  span: number;
+  loading: boolean;
+  isFirst: boolean;
+}> = ({ span, loading, isFirst }) => {
+  return (
+    <div>
+      {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>
+  );
+};
+
 const CatalogList: React.FC<CatalogListProps> = (props) => {
   const { dataList, loading, activeId, isFirst, onDeploy } = props;
   const [span, setSpan] = React.useState(8);
 
+  const getSpanByWidth = (width: number) => {
+    if (width < breakpoints.md) return 24;
+    if (width < breakpoints.lg) return 12;
+    return 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);
-      }
+      setSpan(getSpanByWidth(size.width));
     }, 100),
     []
   );
@@ -54,31 +85,7 @@ const CatalogList: React.FC<CatalogListProps> = (props) => {
               );
             })}
           </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>
-          )}
+          <ListSkeleton span={span} loading={loading} isFirst={isFirst} />
         </div>
       </ResizeObserver>
       <FloatButton.BackTop visibilityHeight={1000} />

src/pages/llmodels/components/data-form.tsx

@@ -695,6 +695,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
             id: 'models.form.replicas'
           })}
           required
+          description={intl.formatMessage({ id: 'models.form.replicas.tips' })}
           min={0}
         ></SealInput.Number>
       </Form.Item>

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

@@ -25,12 +25,22 @@ import {
   EditOutlined,
   ExperimentOutlined,
   PictureOutlined,
+  QuestionCircleOutlined,
   SyncOutlined,
   WechatWorkOutlined
 } from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-components';
 import { Access, useAccess, useIntl, useNavigate } from '@umijs/max';
-import { Button, Dropdown, Input, Select, Space, Tag, message } from 'antd';
+import {
+  Button,
+  Dropdown,
+  Input,
+  Select,
+  Space,
+  Tag,
+  Tooltip,
+  message
+} from 'antd';
 import dayjs from 'dayjs';
 import { useAtom } from 'jotai';
 import _ from 'lodash';
@@ -944,7 +954,14 @@ const Models: React.FC<ModelsProps> = ({
             }}
           />
           <SealColumn
-            title={intl.formatMessage({ id: 'models.form.replicas' })}
+            title={
+              <Tooltip
+                title={intl.formatMessage({ id: 'models.form.replicas.tips' })}
+              >
+                {intl.formatMessage({ id: 'models.form.replicas' })}
+                <QuestionCircleOutlined className="m-l-5" />
+              </Tooltip>
+            }
             dataIndex="replicas"
             key="replicas"
             align="center"

src/pages/llmodels/components/update-modal.tsx

@@ -591,6 +591,9 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
                 id: 'models.form.replicas'
               })}
               required
+              description={intl.formatMessage({
+                id: 'models.form.replicas.tips'
+              })}
               min={0}
             ></SealInput.Number>
           </Form.Item>

src/pages/llmodels/index.tsx

@@ -8,7 +8,7 @@ import {
 } from '@/pages/resources/config/types';
 import _ from 'lodash';
 import qs from 'query-string';
-import { memo, useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import {
   MODELS_API,
   MODEL_INSTANCE_API,
@@ -316,4 +316,4 @@ const Models: React.FC = () => {
   );
 };
 
-export default memo(Models);
+export default Models;