feat: api tab

frontend/packages/core/src/pages/aiSetting/AIUnconfigure.tsx

@@ -3,12 +3,18 @@ import WithPermission from '@common/components/aoplatform/WithPermission'
 import { BasicResponse, RESPONSE_TIPS, STATUS_CODE } from '@common/const/const'
 import { useFetch } from '@common/hooks/http'
 import { $t } from '@common/locales'
-import { App, Button, Card, Divider, Empty, Spin, Tag } from 'antd'
+import { App, Button, Card, Empty, Spin, Tag } from 'antd'
 import { FC, memo, useEffect, useState } from 'react'
 import { AiSettingListItem } from './AiSettingList'
 
 const CardBox = memo(
-  ({ provider, openModal }: { provider: AiSettingListItem; openModal: (provider: AiSettingListItem) => void }) => {
+  ({
+    provider,
+    openModal
+  }: {
+    provider: AiSettingListItem
+    openModal: (provider: AiSettingListItem) => Promise<void>
+  }) => {
     return (
       <Card
         title={
@@ -56,7 +62,15 @@ const CardBox = memo(
     )
   }
 )
-const ModelCardArea = ({ modelList, className }: { modelList: AiSettingListItem[]; className?: string }) => {
+const ModelCardArea = ({
+  modelList,
+  className,
+  openModal
+}: {
+  modelList: AiSettingListItem[]
+  className?: string
+  openModal?: (provider: AiSettingListItem) => Promise<void>
+}) => {
   return (
     <>
       {modelList.length > 0 ? (
@@ -69,7 +83,7 @@ const ModelCardArea = ({ modelList, className }: { modelList: AiSettingListItem[
           }}
         >
           {modelList.map((provider: AiSettingListItem) => (
-            <CardBox key={provider.id} provider={provider} />
+            <CardBox key={provider.id} provider={provider} openModal={openModal} />
           ))}
         </div>
       ) : (
@@ -78,7 +92,11 @@ const ModelCardArea = ({ modelList, className }: { modelList: AiSettingListItem[
     </>
   )
 }
-const AIUnconfigure: FC = () => {
+interface AIUnconfigureProps {
+  openModal: (entity: AiSettingListItem) => Promise<void>
+}
+
+const AIUnconfigure: FC<AIUnconfigureProps> = ({ openModal }) => {
   const { message } = App.useApp()
   const { fetchData } = useFetch()
   const [aiSettingList, setAiSettingList] = useState<AiSettingListItem[]>([])
@@ -123,8 +141,6 @@ const AIUnconfigure: FC = () => {
         <div>
           {aiSettingList.filter((item) => !item.configured).length > 0 && (
             <>
-              <Divider style={{ margin: '20px 0 !important;' }} />
-              <p className="text-[14px] text-[#666] mb-[4px] mt-[20px] font-bold">{$t('未配置')}</p>
               <ModelCardArea modelList={aiSettingList.filter((item) => !item.configured) || []} />
             </>
           )}

frontend/packages/core/src/pages/aiSetting/AiSettingList.tsx

@@ -5,44 +5,13 @@ import { useFetch } from '@common/hooks/http'
 import { $t } from '@common/locales'
 import { checkAccess } from '@common/utils/permission'
 import { Icon } from '@iconify/react/dist/iconify.js'
-import { App } from 'antd'
+import { App, Tabs } from 'antd'
 import { useRef } from 'react'
 import AIFlowChart from './AIFlowChart'
 import AiSettingModalContent, { AiSettingModalContentHandle } from './AiSettingModal'
 import AIUnconfigure from './AIUnconfigure'
+import { AiProviderConfig, AiSettingListItem } from './types'
 
-export type AiSettingListItem = {
-  name: string
-  id: string
-  logo: string
-  defaultLlm: string
-  defaultLlmLogo: string
-  enable: boolean
-  configured: boolean
-}
-
-export type AiProviderLlmsItems = {
-  id: string
-  logo: string
-  scopes: ('chat' | 'completions')[]
-  config: string
-}
-
-export type AiProviderDefaultConfig = {
-  id: string
-  provider: string
-  name: string
-  logo: string
-  defaultLlm: string
-  scopes: string[]
-}
-
-export type AiProviderConfig = {
-  id: string
-  name: string
-  config: string
-  getApikeyUrl: string
-}
 const AiSettingList = () => {
   const { modal, message } = App.useApp()
   const { fetchData } = useFetch()
@@ -111,8 +80,23 @@ const AiSettingList = () => {
         showBorder={false}
         scrollPage={false}
       >
-        <AIFlowChart />
-        <AIUnconfigure openModal={openModal} />
+        <div className="flex flex-col h-full">
+          <Tabs
+            className="flex-shrink-0"
+            items={[
+              {
+                key: 'flow',
+                label: $t('已设置'),
+                children: <AIFlowChart />
+              },
+              {
+                key: 'config',
+                label: $t('未设置'),
+                children: <div className="overflow-auto flex-grow">{<AIUnconfigure openModal={openModal} />}</div>
+              }
+            ]}
+          />
+        </div>
       </InsidePage>
     </>
   )

frontend/packages/core/src/pages/aiSetting/styles.css

@@ -1,4 +1,20 @@
 /* Flow Chart Styles */
+.react-flow {
+  width: 100%;
+  height: 100%;
+  min-height: 500px;
+}
+
+.react-flow__container {
+  width: 100%;
+  height: 100%;
+}
+
+.react-flow__renderer {
+  width: 100%;
+  height: 100%;
+}
+
 .react-flow__node {
   padding: 0;
   border-radius: 8px;

frontend/packages/core/src/pages/aiSetting/types.ts

@@ -18,3 +18,36 @@ export interface ModelData {
   keys: KeyData[]
   priority?: number
 }
+
+export type AiSettingListItem = {
+  name: string
+  id: string
+  logo: string
+  defaultLlm: string
+  defaultLlmLogo: string
+  enable: boolean
+  configured: boolean
+}
+
+export type AiProviderLlmsItems = {
+  id: string
+  logo: string
+  scopes: ('chat' | 'completions')[]
+  config: string
+}
+
+export type AiProviderDefaultConfig = {
+  id: string
+  provider: string
+  name: string
+  logo: string
+  defaultLlm: string
+  scopes: string[]
+}
+
+export type AiProviderConfig = {
+  id: string
+  name: string
+  config: string
+  getApikeyUrl: string
+}