From c575802b642e74b541bdff33909d2ffc7e59657f Mon Sep 17 00:00:00 2001
From: arvinxx <arvinx@foxmail.com>
Date: Mon, 23 Dec 2024 23:46:52 +0800
Subject: [PATCH] add provider detail page

---
 .../settings/provider/ProviderList/Card.tsx   |  1 -
 .../settings/provider/ProviderMenu/All.tsx    |  6 +--
 .../settings/provider/ProviderMenu/index.tsx  |  2 +-
 .../(main)/settings/provider/[id]/page.tsx    | 12 +++++-
 .../components/ProviderConfig/index.tsx       | 43 ++++++++-----------
 5 files changed, 34 insertions(+), 30 deletions(-)

diff --git a/src/app/(main)/settings/provider/ProviderList/Card.tsx b/src/app/(main)/settings/provider/ProviderList/Card.tsx
index d513cd9c214e..bb1ec08924b5 100644
--- a/src/app/(main)/settings/provider/ProviderList/Card.tsx
+++ b/src/app/(main)/settings/provider/ProviderList/Card.tsx
@@ -82,7 +82,6 @@ const ProviderCard = memo<ProviderCardProps>(({ id, description, name }) => {
             style={{ color: theme.colorText }}
             title={name}
           />
-          {/*<SyncSwitch value={enabled} />*/}
           <Switch checked={enabled} size={'small'} />
         </Flexbox>
         {description && (
diff --git a/src/app/(main)/settings/provider/ProviderMenu/All.tsx b/src/app/(main)/settings/provider/ProviderMenu/All.tsx
index b0d3a9627684..58e53c04a8d6 100644
--- a/src/app/(main)/settings/provider/ProviderMenu/All.tsx
+++ b/src/app/(main)/settings/provider/ProviderMenu/All.tsx
@@ -1,14 +1,14 @@
+import Link from 'next/link';
 import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
 
 import { useStyles } from './Item';
 
 const All = memo(() => {
   const { styles } = useStyles();
   return (
-    <Flexbox className={styles.container} gap={8} horizontal>
+    <Link className={styles.container} href={'/settings/provider'}>
       全部
-    </Flexbox>
+    </Link>
   );
 });
 export default All;
diff --git a/src/app/(main)/settings/provider/ProviderMenu/index.tsx b/src/app/(main)/settings/provider/ProviderMenu/index.tsx
index a8d087928cb1..ee9eb591983a 100644
--- a/src/app/(main)/settings/provider/ProviderMenu/index.tsx
+++ b/src/app/(main)/settings/provider/ProviderMenu/index.tsx
@@ -9,7 +9,7 @@ import ProviderItem from './Item';
 
 const ProviderMenu = () => {
   return (
-    <Flexbox padding={8} style={{ overflow: 'scroll' }} width={320}>
+    <Flexbox padding={8} style={{ overflow: 'scroll' }} width={260}>
       <All />
       {DEFAULT_MODEL_PROVIDER_LIST.map((item) => (
         <ProviderItem {...item} key={item.id} />
diff --git a/src/app/(main)/settings/provider/[id]/page.tsx b/src/app/(main)/settings/provider/[id]/page.tsx
index b408ae8a26ea..66c895b36ef1 100644
--- a/src/app/(main)/settings/provider/[id]/page.tsx
+++ b/src/app/(main)/settings/provider/[id]/page.tsx
@@ -1,9 +1,19 @@
+import { DEFAULT_MODEL_PROVIDER_LIST } from '@/config/modelProviders';
 import { PagePropsWithId } from '@/types/next';
 
+import ProviderConfig from '../components/ProviderConfig';
+
 const Page = async (props: PagePropsWithId) => {
   const params = await props.params;
 
-  return <div> {params.id}</div>;
+  const card = DEFAULT_MODEL_PROVIDER_LIST.find((v) => v.id === params.id);
+  if (!card) return <div>not found</div>;
+
+  return (
+    <div>
+      <ProviderConfig {...card} />
+    </div>
+  );
 };
 
 export default Page;
diff --git a/src/app/(main)/settings/provider/components/ProviderConfig/index.tsx b/src/app/(main)/settings/provider/components/ProviderConfig/index.tsx
index a2ebcd7d82cb..2179e1a673e4 100644
--- a/src/app/(main)/settings/provider/components/ProviderConfig/index.tsx
+++ b/src/app/(main)/settings/provider/components/ProviderConfig/index.tsx
@@ -18,7 +18,6 @@ import {
   LLMProviderApiTokenKey,
   LLMProviderBaseUrlKey,
   LLMProviderConfigKey,
-  LLMProviderModelListKey,
 } from '@/app/(main)/settings/llm/const';
 import { FORM_STYLE } from '@/const/layoutTokens';
 import { AES_GCM_URL, BASE_PROVIDER_DOC_URL } from '@/const/url';
@@ -26,10 +25,8 @@ import { isServerMode } from '@/const/version';
 import { useUserStore } from '@/store/user';
 import { keyVaultsConfigSelectors, modelConfigSelectors } from '@/store/user/selectors';
 import { ModelProviderCard } from '@/types/llm';
-import { GlobalLLMProviderKey } from '@/types/user/settings';
 
 import Checker from '../Checker';
-import ProviderModelListSelect from '../ProviderModelList';
 
 const useStyles = createStyles(({ css, prefixCls, responsive, token }) => ({
   aceGcm: css`
@@ -89,7 +86,7 @@ export interface ProviderConfigProps extends Omit<ModelProviderCard, 'id' | 'cha
   className?: string;
   extra?: ReactNode;
   hideSwitch?: boolean;
-  id: GlobalLLMProviderKey;
+  id: string;
   modelList?: {
     azureDeployName?: boolean;
     notFoundContent?: ReactNode;
@@ -206,20 +203,20 @@ const ProviderConfig = memo<ProviderConfigProps>(
           label: t('llm.fetchOnClient.title'),
           minWidth: undefined,
         },
-      {
-        children: (
-          <ProviderModelListSelect
-            notFoundContent={modelList?.notFoundContent}
-            placeholder={modelList?.placeholder ?? t('llm.modelList.placeholder')}
-            provider={id}
-            showAzureDeployName={modelList?.azureDeployName}
-            showModelFetcher={modelList?.showModelFetcher}
-          />
-        ),
-        desc: t('llm.modelList.desc'),
-        label: t('llm.modelList.title'),
-        name: [LLMProviderConfigKey, id, LLMProviderModelListKey],
-      },
+      // {
+      //   children: (
+      //     <ProviderModelListSelect
+      //       notFoundContent={modelList?.notFoundContent}
+      //       placeholder={modelList?.placeholder ?? t('llm.modelList.placeholder')}
+      //       provider={id}
+      //       showAzureDeployName={modelList?.azureDeployName}
+      //       showModelFetcher={modelList?.showModelFetcher}
+      //     />
+      //   ),
+      //   desc: t('llm.modelList.desc'),
+      //   label: t('llm.modelList.title'),
+      //   name: [LLMProviderConfigKey, id, LLMProviderModelListKey],
+      // },
       showChecker
         ? (checkerItem ?? {
             children: <Checker model={checkModel!} provider={id} />,
@@ -231,14 +228,10 @@ const ProviderConfig = memo<ProviderConfigProps>(
       showAceGcm && isServerMode && aceGcmItem,
     ].filter(Boolean) as FormItemProps[];
 
-    /* ↓ cloud slot ↓ */
-
-    /* ↑ cloud slot ↑ */
-
     const model: ItemGroup = {
       children: formItems,
 
-      defaultActive: canDeactivate ? enabled : undefined,
+      defaultActive: true,
 
       extra: (
         <Flexbox align={'center'} gap={8} horizontal>
@@ -283,8 +276,10 @@ const ProviderConfig = memo<ProviderConfigProps>(
       <Form
         className={cx(styles.form, className)}
         form={form}
-        items={[model]}
         onValuesChange={debounce(setSettings, 100)}
+        variant={'pure'}
+        // items={formItems}
+        items={[model]}
         {...FORM_STYLE}
       />
     );