♻️ refactor: improve ai provider code (#5514)

* add

* Delete src/app/(main)/settings/provider/ProviderMenu/Cloud/AddNew.tsx

* Delete src/app/(main)/settings/provider/ProviderMenu/Cloud/ItemLock.tsx

* Update index.tsx

* Rename Switch.tsx to EnableSwitch.tsx

src/app/(main)/settings/provider/ProviderMenu/Item.tsx

@@ -5,7 +5,7 @@ import { createStyles } from 'antd-style';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
+import { Center, Flexbox } from 'react-layout-kit';
 
 import { AiProviderListItem, AiProviderSourceEnum } from '@/types/aiProvider';
 
@@ -62,7 +62,16 @@ const ProviderItem = memo<AiProviderListItem>(({ id, name, source, enabled, logo
         )}
         {name}
       </Flexbox>
-      {enabled && <Badge status="success" />}
+      <Flexbox horizontal>
+        {enabled && (
+          <Center width={24}>
+            <Badge status="success" />
+          </Center>
+        )}
+        {/* cloud slot */}
+
+        {/* cloud slot */}
+      </Flexbox>
     </Link>
   );
 });

src/app/(main)/settings/provider/features/ProviderConfig/EnableSwitch.tsx

@@ -0,0 +1,46 @@
+import { Skeleton } from 'antd';
+import { createStyles } from 'antd-style';
+import { FC } from 'react';
+
+import InstantSwitch from '@/components/InstantSwitch';
+import { aiProviderSelectors, useAiInfraStore } from '@/store/aiInfra';
+
+const useStyles = createStyles(({ css }) => ({
+  switchLoading: css`
+    width: 44px !important;
+    min-width: 44px !important;
+    height: 22px !important;
+    border-radius: 12px !important;
+  `,
+}));
+
+interface SwitchProps {
+  Component?: FC<{ id: string }>;
+  id: string;
+}
+
+const Switch = ({ id, Component }: SwitchProps) => {
+  const { styles } = useStyles();
+
+  const [toggleProviderEnabled, enabled, isLoading] = useAiInfraStore((s) => [
+    s.toggleProviderEnabled,
+    aiProviderSelectors.isProviderEnabled(id)(s),
+    aiProviderSelectors.isAiProviderConfigLoading(id)(s),
+  ]);
+
+  if (isLoading) return <Skeleton.Button active className={styles.switchLoading} />;
+
+  // slot for cloud
+  if (Component) return <Component id={id} />;
+
+  return (
+    <InstantSwitch
+      enabled={enabled}
+      onChange={async (enabled) => {
+        await toggleProviderEnabled(id as any, enabled);
+      }}
+    />
+  );
+};
+
+export default Switch;

src/app/(main)/settings/provider/features/ProviderConfig/index.tsx

@@ -12,7 +12,6 @@ import { Trans, useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
 import urlJoin from 'url-join';
 
-import InstantSwitch from '@/components/InstantSwitch';
 import { FORM_STYLE } from '@/const/layoutTokens';
 import { AES_GCM_URL, BASE_PROVIDER_DOC_URL } from '@/const/url';
 import { isServerMode } from '@/const/version';
@@ -26,6 +25,7 @@ import {
 import { KeyVaultsConfigKey, LLMProviderApiTokenKey, LLMProviderBaseUrlKey } from '../../const';
 import Checker from './Checker';
 import { SkeletonInput } from './SkeletonInput';
+import EnableSwitch from './EnableSwitch';
 import UpdateProviderInfo from './UpdateProviderInfo';
 
 const useStyles = createStyles(({ css, prefixCls, responsive, token }) => ({
@@ -131,7 +131,6 @@ const ProviderConfig = memo<ProviderConfigProps>(
     const { cx, styles, theme } = useStyles();
 
     const [
-      toggleProviderEnabled,
       useFetchAiProviderItem,
       updateAiProviderConfig,
       enabled,
@@ -141,7 +140,6 @@ const ProviderConfig = memo<ProviderConfigProps>(
       isProviderEndpointNotEmpty,
       isProviderApiKeyNotEmpty,
     ] = useAiInfraStore((s) => [
-      s.toggleProviderEnabled,
       s.useFetchAiProviderItem,
       s.updateAiProviderConfig,
       aiProviderSelectors.isProviderEnabled(id)(s),
@@ -285,16 +283,7 @@ const ProviderConfig = memo<ProviderConfigProps>(
           {extra}
 
           {isCustom && <UpdateProviderInfo />}
-          {isLoading ? (
-            <Skeleton.Button active className={styles.switchLoading} />
-          ) : (
-            <InstantSwitch
-              enabled={enabled}
-              onChange={async (enabled) => {
-                await toggleProviderEnabled(id as any, enabled);
-              }}
-            />
-          )}
+          <EnableSwitch id={id} />
         </Flexbox>
       ),
       title: (