♻️ refactor: refactor provider code (#5516)

src/app/(main)/settings/provider/(detail)/[id]/index.tsx

@@ -6,10 +6,16 @@ import { Flexbox } from 'react-layout-kit';
 import ModelList from '../../features/ModelList';
 import ProviderConfig, { ProviderConfigProps } from '../../features/ProviderConfig';
 
-const ProviderDetail = memo<ProviderConfigProps>((card) => {
+interface ProviderDetailProps extends ProviderConfigProps {
+  showConfig?: boolean;
+}
+const ProviderDetail = memo<ProviderDetailProps>(({ showConfig = true, ...card }) => {
   return (
     <Flexbox gap={24} paddingBlock={8}>
-      <ProviderConfig {...card} />
+      {/* ↓ cloud slot ↓ */}
+
+      {/* ↑ cloud slot ↑ */}
+      {showConfig && <ProviderConfig {...card} />}
       <ModelList id={card.id} />
     </Flexbox>
   );

src/app/(main)/settings/provider/(list)/ProviderGrid/Card.tsx

@@ -1,7 +1,6 @@
 import { ProviderCombine, ProviderIcon } from '@lobehub/icons';
 import { Avatar } from '@lobehub/ui';
 import { Divider, Skeleton, Typography } from 'antd';
-import { createStyles } from 'antd-style';
 import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -11,57 +10,10 @@ import InstantSwitch from '@/components/InstantSwitch';
 import { useAiInfraStore } from '@/store/aiInfra';
 import { AiProviderListItem } from '@/types/aiProvider';
 
+import { useStyles } from './style';
+
 const { Paragraph } = Typography;
 
-const useStyles = createStyles(({ css, token, isDarkMode }) => ({
-  banner: css`
-    opacity: ${isDarkMode ? 0.9 : 0.4};
-  `,
-  container: css`
-    position: relative;
-
-    overflow: hidden;
-
-    height: 100%;
-    border-radius: 12px;
-
-    background: ${token.colorBgContainer};
-    box-shadow: 0 0 1px 1px ${isDarkMode ? token.colorFillQuaternary : token.colorFillSecondary}
-      inset;
-
-    transition: box-shadow 0.2s ${token.motionEaseInOut};
-
-    &:hover {
-      box-shadow: 0 0 1px 1px ${isDarkMode ? token.colorFillSecondary : token.colorFill} inset;
-    }
-  `,
-  desc: css`
-    min-height: 44px;
-    margin-block-end: 0 !important;
-    color: ${token.colorTextDescription};
-  `,
-  tagBlue: css`
-    color: ${token.geekblue};
-    background: ${token.geekblue1};
-  `,
-  tagGreen: css`
-    color: ${token.green};
-    background: ${token.green1};
-  `,
-  time: css`
-    color: ${token.colorTextDescription};
-  `,
-  title: css`
-    zoom: 1.2;
-    margin-block-end: 0 !important;
-    font-size: 18px !important;
-    font-weight: bold;
-  `,
-  token: css`
-    font-family: ${token.fontFamilyCode};
-  `,
-}));
-
 interface ProviderCardProps extends AiProviderListItem {
   loading?: boolean;
 }
@@ -78,6 +30,10 @@ const ProviderCard = memo<ProviderCardProps>(
         </Flexbox>
       );
 
+    /* ↓ cloud slot ↓ */
+
+    /* ↑ cloud slot ↑ */
+
     return (
       <Flexbox className={cx(styles.container)} gap={24}>
         <Flexbox gap={12} padding={16} width={'100%'}>

src/app/(main)/settings/provider/(list)/ProviderGrid/style.ts

@@ -0,0 +1,50 @@
+import { createStyles } from 'antd-style';
+
+export const useStyles = createStyles(({ css, token, isDarkMode }) => ({
+  banner: css`
+    opacity: ${isDarkMode ? 0.9 : 0.4};
+  `,
+  container: css`
+    position: relative;
+
+    overflow: hidden;
+
+    height: 100%;
+    border-radius: 12px;
+
+    background: ${token.colorBgContainer};
+    box-shadow: 0 0 1px 1px ${isDarkMode ? token.colorFillQuaternary : token.colorFillSecondary}
+      inset;
+
+    transition: box-shadow 0.2s ${token.motionEaseInOut};
+
+    &:hover {
+      box-shadow: 0 0 1px 1px ${isDarkMode ? token.colorFillSecondary : token.colorFill} inset;
+    }
+  `,
+  desc: css`
+    min-height: 44px;
+    margin-block-end: 0 !important;
+    color: ${token.colorTextDescription};
+  `,
+  tagBlue: css`
+    color: ${token.geekblue};
+    background: ${token.geekblue1};
+  `,
+  tagGreen: css`
+    color: ${token.green};
+    background: ${token.green1};
+  `,
+  time: css`
+    color: ${token.colorTextDescription};
+  `,
+  title: css`
+    zoom: 1.2;
+    margin-block-end: 0 !important;
+    font-size: 18px !important;
+    font-weight: bold;
+  `,
+  token: css`
+    font-family: ${token.fontFamilyCode};
+  `,
+}));

src/types/llm.ts

@@ -119,13 +119,15 @@ export interface ModelProviderCard {
    * @deprecated
    */
   showApiKey?: boolean;
-
   /**
    * whether show checker in the provider config
    * @deprecated
    */
   showChecker?: boolean;
-
+  /**
+   * whether to show the provider config
+   */
+  showConfig?: boolean;
   /**
    * whether to smoothing the output
    * @deprecated