adai/MemoryBear
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): api key & space config ui upgrade

Browse Source
This commit is contained in:
zhaoying
2026-03-30 11:41:18 +08:00
parent 167c915631
commit f9f302dd2a
15 changed files with 256 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
web/src/views/ApiKeyManagement/index.tsx
View File

@@ -6,20 +6,22 @@
*/
import React, { useRef } from 'react';
import { useTranslation } from 'react-i18next';
import { Button, App, Space } from 'antd';
import { Button, App, Dropdown, Flex } from 'antd';
import clsx from 'clsx';
import { DeleteOutlined, EditOutlined, EyeOutlined } from '@ant-design/icons';
import copy from 'copy-to-clipboard'
import type { MenuInfo } from 'rc-menu/lib/interface';
import type { ApiKey, ApiKeyModalRef } from './types';
import ApiKeyModal from './components/ApiKeyModal';
import ApiKeyDetailModal from './components/ApiKeyDetailModal';
import RbCard from '@/components/RbCard/Card'
import RbCard from '@/components/RbCard'
import { getApiKeyListUrl, deleteApiKey } from '@/api/apiKey';
import PageScrollList, { type PageScrollListRef } from '@/components/PageScrollList'
import { formatDateTime } from '@/utils/format';
import Tag from '@/components/Tag'
import { maskApiKeys } from '@/utils/apiKeyReplacer';
import RbDescriptions from '@/components/RbDescriptions';
/**
* API Key Management page component
@@ -87,59 +89,85 @@ const ApiKeyManagement: React.FC = () => {
}
return (
<>
<div className="rb:flex rb:justify-end rb:mb-3 rb:p-4">
<Flex justify="flex-end" className="rb:mb-3!">
<Button type="primary" onClick={() => handleEdit()}>
{t('apiKey.createApiKey')}
</Button>
</div>
</Flex>
<PageScrollList<ApiKey, { is_active: boolean; type: string }>
ref={scrollListRef}
url={getApiKeyListUrl}
query={{ is_active: true, type: 'service' }}
column={2}
column={3}
renderItem={(apiKeyItem) => {
return (
<RbCard
title={apiKeyItem.name}
>
{['id', 'is_expired', 'created_at'].map((key, index) => (
<div key={key} className={clsx("rb:flex rb:justify-between rb:gap-5 rb:font-regular rb:text-[14px]", {
'rb:mt-3': index !== 0
})}>
<span className="rb:text-[#5B6167] rb:w-20">{t(`apiKey.${key}`)}</span>
<span className="rb:flex-1 rb:text-left rb:py-px rb:rounded rb:font-medium">
{ key === 'created_at'
? formatDateTime(apiKeyItem[key], 'YYYY-MM-DD HH:mm:ss')
: key === 'is_expired'
? <Tag color={apiKeyItem[key] ? 'error' : 'processing'}>{apiKeyItem[key] ? t('apiKey.inactive') : t('apiKey.active')}</Tag>
: String(apiKeyItem[key as keyof ApiKey])
}
</span>
</div>
))}
<RbCard
title={
<Flex justify="space-between">
<Flex gap={4} vertical>
{apiKeyItem.name}
<Flex gap={6}>
{apiKeyItem.scopes?.includes('memory') && <Tag>{t('apiKey.memoryEngine')}</Tag>}
{apiKeyItem.scopes?.includes('rag') && <Tag color="success">{t('apiKey.knowledgeBase')}</Tag>}
{!apiKeyItem.scopes?.includes('memory') && !apiKeyItem.scopes?.includes('rag') && <div>{t('apiKey.noScopes')}</div>}
</Flex>
</Flex>
<Dropdown
menu={{
items: [
{
key: 'edit',
icon: <div className="rb:size-4 rb:bg-cover rb:cursor-pointer rb:bg-[url('@/assets/images/common/edit_bold.svg')]" />,
label: t('common.edit'),
onClick: () => handleEdit(apiKeyItem),
},
{
key: 'view',
icon: <div className="rb:size-4 rb:bg-cover rb:cursor-pointer rb:bg-[url('@/assets/images/common/eye.svg')]" />,
label: t('common.view'),
onClick: () => handleView(apiKeyItem),
},
{
key: 'delete',
danger: true,
icon: <div className="rb:size-4 rb:bg-cover rb:cursor-pointer rb:bg-[url('@/assets/images/common/delete_red_big.svg')]" />,
label: t('common.delete'),
onClick: () => handleDelete(apiKeyItem),
},
]
}}
placement="bottomRight"
>
<div className="rb:cursor-pointer rb:size-5.5 rb:bg-[url('@/assets/images/common/more.svg')] rb:hover:bg-[url('@/assets/images/common/more_hover.svg')]"></div>
</Dropdown>
</Flex>
}
isNeedTooltip={false}
headerClassName="rb:min-h-[78px]!"
>
<RbDescriptions
items={['id', 'is_expired', 'created_at'].map(key => ({
key,
label: t(`apiKey.${key}`),
children: <span className={clsx({
'rb:font-medium': key === 'id',
})}>
{key === 'created_at'
? formatDateTime(apiKeyItem[key], 'YYYY-MM-DD HH:mm:ss')
: key === 'is_expired'
? <Tag color={apiKeyItem[key] ? 'error' : 'processing'}>{apiKeyItem[key] ? t('apiKey.inactive') : t('apiKey.active')}</Tag>
: String(apiKeyItem[key as keyof ApiKey])
}
</span>
}))}
/>
<div className="rb:flex rb:items-center rb:justify-between rb:text-[#5B6167] rb:mt-5 rb:p-[8px_16px] rb:bg-[#FFFFFF] rb:border rb:border-[#DFE4ED] rb:rounded-lg rb:leading-5">
{maskApiKeys(apiKeyItem.api_key)}
<Button className="rb:px-2! rb:h-7! rb:group" onClick={() => handleCopy(apiKeyItem.api_key)}>
<div
className="rb:w-4 rb:h-4 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/copy.svg')] rb:group-hover:bg-[url('@/assets/images/copy_active.svg')]"
></div>
{t('common.copy')}
</Button>
</div>
<Space className="rb:pt-2 rb:min-h-6.25">
{apiKeyItem.scopes?.includes('memory') && <Tag>{t('apiKey.memoryEngine')}</Tag>}
{apiKeyItem.scopes?.includes('rag') && <Tag color="success">{t('apiKey.knowledgeBase')}</Tag>}
</Space>
<div className="rb:mt-5 rb:flex rb:justify-end rb:gap-2.5">
<Button icon={<EyeOutlined />} onClick={() => handleView(apiKeyItem)}></Button>
<Button icon={<EditOutlined />} onClick={() => handleEdit(apiKeyItem)}></Button>
<Button icon={<DeleteOutlined />} onClick={() => handleDelete(apiKeyItem)}></Button>
</div>
<Flex align="center" justify="space-between" className="rb:h-8! rb:mt-4! rb:py-1! rb:pl-2.5! rb:pr-1! rb:bg-[#F6F6F6] rb:rounded-md rb:leading-5">
{maskApiKeys(apiKeyItem.api_key)}
<div onClick={() => handleCopy(apiKeyItem.api_key)} className="rb:cursor-pointer rb:rounded-md rb:size-6 rb:bg-[url('@/assets/images/common/copy_dark.svg')] rb:bg-size-[16px_16px] rb:bg-center rb:bg-no-repeat" style={{ backgroundColor: 'rgba(0,0,0,0.08)' }}></div>
</Flex>
</RbCard>
);
}}