From f9501d6f602966384f471a087c6b0e706306ad2b Mon Sep 17 00:00:00 2001
From: scarqin <scarqin@gmail.com>
Date: Wed, 25 Dec 2024 15:05:19 +0800
Subject: [PATCH] style: apikey layout

---
 .../src/components/aoplatform/InsidePage.tsx  |  15 ++-
 .../core/src/pages/keySettings/index.tsx      | 114 ++++++++++--------
 2 files changed, 68 insertions(+), 61 deletions(-)

diff --git a/frontend/packages/common/src/components/aoplatform/InsidePage.tsx b/frontend/packages/common/src/components/aoplatform/InsidePage.tsx
index 4875a8db..3260e886 100644
--- a/frontend/packages/common/src/components/aoplatform/InsidePage.tsx
+++ b/frontend/packages/common/src/components/aoplatform/InsidePage.tsx
@@ -1,9 +1,9 @@
-import { Button, Tag } from 'antd'
-import { useNavigate } from 'react-router-dom'
-import WithPermission from '@common/components/aoplatform/WithPermission'
-import { FC, ReactNode } from 'react'
 import { ArrowLeftOutlined } from '@ant-design/icons'
+import WithPermission from '@common/components/aoplatform/WithPermission'
 import { $t } from '@common/locales'
+import { Button, Tag } from 'antd'
+import { FC, ReactNode } from 'react'
+import { useNavigate } from 'react-router-dom'
 
 class InsidePageProps {
   showBanner?: boolean = true
@@ -49,11 +49,10 @@ const InsidePage: FC<InsidePageProps> = ({
     navigate(backUrl || '/')
   }
   return (
-    // <div className="h-full flex flex-col flex-1 overflow-hidden bg-[#f7f8fa]">
-    <div className={`h-full flex flex-col flex-1 overflow-hidden  ${className}`}>
+    <div className={`flex overflow-hidden flex-col flex-1 h-full ${className}`}>
       {showBanner && (
         <div
-          className={`border-[0px] mr-PAGE_INSIDE_X ${showBorder ? 'border-b-[1px] border-solid border-BORDER' : ''} ${headerClassName}`}
+          className={`border-[0px] mr-PAGE_INSIDE_X ${showBorder ? 'border-solid border-b-[1px] border-BORDER' : ''} ${headerClassName}`}
         >
           {!pageTitle && !description && !backUrl && !customBtn ? (
             <></>
@@ -68,7 +67,7 @@ const InsidePage: FC<InsidePageProps> = ({
                 </div>
               )}
               <div className="flex justify-between mb-[20px] items-center ">
-                <div className="flex items-center  gap-TAG_LEFT ">
+                <div className="flex items-center gap-TAG_LEFT">
                   <div className="text-theme text-[26px] ">{pageTitle}</div>
                   {tagList &&
                     tagList?.length > 0 &&
diff --git a/frontend/packages/core/src/pages/keySettings/index.tsx b/frontend/packages/core/src/pages/keySettings/index.tsx
index fc99c916..2ac1f396 100644
--- a/frontend/packages/core/src/pages/keySettings/index.tsx
+++ b/frontend/packages/core/src/pages/keySettings/index.tsx
@@ -184,72 +184,80 @@ const KeySettings: React.FC = () => {
 
   return (
     <InsidePage
-      className="overflow-y-auto pb-PAGE_INSIDE_B pr-PAGE_INSIDE_X"
+      className="overflow-y-auto gap-4 pb-PAGE_INSIDE_B pr-PAGE_INSIDE_X"
       pageTitle={$t('APIKey 资源池')}
-      description={$t('支持单个 API 模型供应商下创建多个 APIKey APIKey 进行智能负载均衡')}
+      description={
+        <>
+          {$t('支持单个 API 模型供应商下创建多个 APIKey APIKey 进行智能负载均衡')}
+          <div className="mt-4">
+            <AIProviderSelect value={selectedProvider} onChange={setSelectedProvider} />
+          </div>
+        </>
+      }
       showBorder={false}
       scrollPage={false}
     >
-      <AIProviderSelect value={selectedProvider} onChange={setSelectedProvider} />
-      <PageList
-        actionRef={actionRef}
-        rowKey="id"
-        request={async (params) => {
-          try {
-            const response = await fetchData<BasicResponse<{ data: APIKey[] }>>('ai/resource/keys', {
-              method: 'GET',
-              eoParams: {
-                provider: selectedProvider,
-                ...params
-              },
-              eoApiPrefix: 'http://uat.apikit.com:11204/mockApi/aoplatform/api/v1/'
-            })
+      <div className="h-[calc(100%-1rem)]">
+        <PageList
+          actionRef={actionRef}
+          rowKey="id"
+          request={async (params) => {
+            try {
+              const response = await fetchData<BasicResponse<{ data: APIKey[] }>>('ai/resource/keys', {
+                method: 'GET',
+                eoParams: {
+                  provider: selectedProvider,
+                  ...params
+                },
+                eoApiPrefix: 'http://uat.apikit.com:11204/mockApi/aoplatform/api/v1/'
+              })
 
-            if (response.code === STATUS_CODE.SUCCESS) {
-              return {
-                data: response.data.keys,
-                success: true,
-                total: response.data.keys.length
+              if (response.code === STATUS_CODE.SUCCESS) {
+                return {
+                  data: response.data.keys,
+                  success: true,
+                  total: response.data.keys.length
+                }
+              } else {
+                message.error(response.msg || $t(RESPONSE_TIPS.error))
+                return {
+                  data: [],
+                  success: false,
+                  total: 0
+                }
               }
-            } else {
-              message.error(response.msg || $t(RESPONSE_TIPS.error))
+            } catch (error) {
               return {
                 data: [],
                 success: false,
                 total: 0
               }
             }
-          } catch (error) {
-            return {
-              data: [],
-              success: false,
-              total: 0
-            }
+          }}
+          columns={columns}
+          dragSortKey="sort"
+          // onDragSortEnd={handleDragSortEnd}
+          addNewBtnTitle={$t('添加 APIKey')}
+          onAddNewBtnClick={handleAdd}
+        />
+        <ApiKeyModal
+          visible={modalVisible}
+          mode={modalMode}
+          onCancel={handleModalCancel}
+          onSave={handleSave}
+          vendorName={selectedProvider}
+          initialValues={
+            editingKey
+              ? {
+                  id: editingKey.id,
+                  name: editingKey.name,
+                  expire_time: editingKey.expire_time
+                }
+              : undefined
           }
-        }}
-        columns={columns}
-        dragSortKey="sort"
-        // onDragSortEnd={handleDragSortEnd}
-        addNewBtnTitle={$t('添加 APIKey')}
-        onAddNewBtnClick={handleAdd}
-      />
-      <ApiKeyModal
-        visible={modalVisible}
-        mode={modalMode}
-        onCancel={handleModalCancel}
-        onSave={handleSave}
-        vendorName={selectedProvider}
-        initialValues={
-          editingKey
-            ? {
-                id: editingKey.id,
-                name: editingKey.name,
-                expire_time: editingKey.expire_time
-              }
-            : undefined
-        }
-        defaultKeyNumber={apiKeys.length + 1}
-      />
+          defaultKeyNumber={apiKeys.length + 1}
+        />
+      </div>
     </InsidePage>
   )
 }