fix(style): cluster state do not display

src/pages/backends/components/backend-card.tsx

@@ -227,7 +227,7 @@ const BackendCard: React.FC<BackendCardProps> = ({ data, onSelect }) => {
               color="geekblue"
               className="font-400"
               bordered={false}
-              style={{ borderRadius: 'var(--ant-border-radius)' }}
+              style={{ borderRadius: 'var(--ant-border-radius)', margin: 0 }}
             >
               {intl.formatMessage({ id: 'backend.builtin' })}
             </Tag>

src/pages/backends/components/backend-list.tsx

@@ -24,6 +24,20 @@ const SpinWrapper = styled.div`
   }
 `;
 
+const SkeletonWrapper = styled.div`
+  .ant-skeleton-content {
+    .ant-skeleton-paragraph {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+      margin-bottom: 0;
+      li {
+        margin-top: 0 !important;
+      }
+    }
+  }
+`;
+
 interface BackendListProps {
   defaultSpan?: number;
   resizable?: boolean;
@@ -34,12 +48,6 @@ interface BackendListProps {
   onSelect?: (item: any) => void;
 }
 
-const InnerSkeleton: React.FC<{
-  span: number;
-}> = (props) => {
-  return <CardSkeleton {...props} />;
-};
-
 const ListSkeleton: React.FC<{
   span: number;
   loading: boolean;
@@ -56,7 +64,21 @@ const ListSkeleton: React.FC<{
             }}
             wrapperClassName="skelton-wrapper"
           >
-            {isFirst && <InnerSkeleton span={span}></InnerSkeleton>}
+            {isFirst && (
+              <SkeletonWrapper>
+                <CardSkeleton
+                  span={span}
+                  skeletonProps={{
+                    title: false
+                  }}
+                  skeletonStyle={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 26
+                  }}
+                ></CardSkeleton>
+              </SkeletonWrapper>
+            )}
           </Spin>
         </SpinWrapper>
       )}

src/pages/backends/forms/versions-config.tsx

@@ -1,11 +1,12 @@
 import CollapsibleContainer from '@/components/collapse-container';
+import BaseSelect from '@/components/seal-form/base/select';
 import SealInput from '@/components/seal-form/seal-input';
 import SealSelect from '@/components/seal-form/seal-select';
 import { PageActionType } from '@/config/types';
 import useAppUtils from '@/hooks/use-app-utils';
 import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Button, Empty, Form, Select, Tag } from 'antd';
+import { Button, Empty, Form, Tag } from 'antd';
 import React, { useEffect, useMemo } from 'react';
 import styled from 'styled-components';
 import { frameworks } from '../config';
@@ -163,7 +164,7 @@ const VersionsForm: React.FC<AddModalProps> = ({
           </Button>
         </span>
         {!currentData?.is_built_in && (
-          <Select
+          <BaseSelect
             prefix={
               <span style={{ color: 'var(--ant-color-text-tertiary)' }}>
                 {intl.formatMessage({ id: 'backend.isDefault' })}:

src/pages/backends/index.tsx

@@ -45,6 +45,7 @@ const BackendList = () => {
     deleteAPI: deleteBackend,
     API: INFERENCE_BACKEND_API,
     watch: false,
+    isInfiniteScroll: true,
     contentForDelete: 'backends.title',
     defaultQueryParams: {
       perPage: 100
@@ -154,7 +155,7 @@ const BackendList = () => {
     <PageContainer
       ghost
       header={{
-        title: intl.formatMessage({ id: 'menu.models.backendsList' }),
+        title: intl.formatMessage({ id: 'menu.resources.backendsList' }),
         style: {
           paddingInline: 'var(--layout-content-header-inlinepadding)'
         },