diff --git a/web/src/components/RbSlider/index.tsx b/web/src/components/RbSlider/index.tsx index 70b9fa84..5e90e419 100644 --- a/web/src/components/RbSlider/index.tsx +++ b/web/src/components/RbSlider/index.tsx @@ -17,6 +17,7 @@ import { type FC, type ReactNode, useEffect, useState } from 'react'; import { Slider, type SliderSingleProps, Flex, InputNumber, type InputNumberProps } from 'antd'; +import { useTranslation } from 'react-i18next'; /** Props interface for RbSlider component */ interface RbSliderProps extends SliderSingleProps { @@ -41,12 +42,13 @@ const RbSlider: FC = ({ step = 0.01, size = 'default' , isInput = false, - className = '', + className = 'rb:pl-1!', prefix, inputClassName, disabled, ...rest }) => { + const { t } = useTranslation() const [curValue, setCurValue] = useState(0) useEffect(() => { setCurValue(value) @@ -102,6 +104,7 @@ const RbSlider: FC = ({ onChange={handleInputChange} prefix={prefix} className={`${inputClassName || '' } rb:w-20!`} + placeholder={t('common.pleaseEnter')} /> :
{curValue || min}
} diff --git a/web/src/views/ApiKeyManagement/components/ApiKeyDetailModal.tsx b/web/src/views/ApiKeyManagement/components/ApiKeyDetailModal.tsx index f9e1df51..f7dd9cbb 100644 --- a/web/src/views/ApiKeyManagement/components/ApiKeyDetailModal.tsx +++ b/web/src/views/ApiKeyManagement/components/ApiKeyDetailModal.tsx @@ -106,16 +106,28 @@ const ApiKeyDetailModal = forwardRef - {data.expires_at && <> -
{t('apiKey.advancedSettings')}
+
{t('apiKey.advancedSettings')}
+ {data.expires_at &&
{t(`apiKey.expires_at`)} {data.expires_at ? formatDateTime(data.expires_at as number, 'YYYY-MM-DD HH:mm:ss') : '-'} -
- } + + } +
+ {t(`application.qpsLimit`)} + + {data.rate_limit} {t('application.qpsLimitUnit')} + +
+
+ {t(`application.dailyUsageLimit`)} + + {data.daily_request_limit} {t('application.dailyUsageLimitUnit')} + +
); }); diff --git a/web/src/views/ApiKeyManagement/components/ApiKeyModal.tsx b/web/src/views/ApiKeyManagement/components/ApiKeyModal.tsx index 05e73992..68f95d0b 100644 --- a/web/src/views/ApiKeyManagement/components/ApiKeyModal.tsx +++ b/web/src/views/ApiKeyManagement/components/ApiKeyModal.tsx @@ -13,6 +13,7 @@ import type { ApiKey, ApiKeyModalRef } from '../types'; import RbModal from '@/components/RbModal' import { createApiKey, updateApiKey } from '@/api/apiKey'; import { stringRegExp } from '@/utils/validator'; +import RbSlider from '@/components/RbSlider' const FormItem = Form.Item; @@ -57,11 +58,10 @@ const ApiKeyModal = forwardRef(({ */ const handleOpen = (apiKey?: ApiKey) => { if (apiKey?.id) { - const { scopes = [], expires_at } = apiKey + const { scopes = [], expires_at, ...rest } = apiKey // Edit mode - populate form with existing data form.setFieldsValue({ - name: apiKey.name, - description: apiKey.description, + ...rest, memory: scopes.includes('memory'), rag: scopes.includes('rag'), expires_at: expires_at ? dayjs(expires_at) : undefined @@ -126,6 +126,10 @@ const ApiKeyModal = forwardRef(({
{t('apiKey.baseInfo')}
(({ disabledDate={(current) => current && current < dayjs().subtract(1, 'day').endOf('day')} /> + {t(`application.qpsLimit`)}({t('application.qpsLimitTip')}, {t('application.qpsLimitUnit')})} + extra={t('application.qpsLimitDesc')} + rules={[ + { required: true, message: t('common.pleaseEnter') }, + ]} + > + + + {t(`application.dailyUsageLimit`)} ({t('application.dailyUsageLimitUnit')})} + extra={t('application.dailyUsageLimitDesc')} + rules={[ + { required: true, message: t('common.pleaseEnter') }, + ]} + > + +
); diff --git a/web/src/views/ApplicationConfig/Api.tsx b/web/src/views/ApplicationConfig/Api.tsx index 4fa19c3e..b871d3bd 100644 --- a/web/src/views/ApplicationConfig/Api.tsx +++ b/web/src/views/ApplicationConfig/Api.tsx @@ -195,53 +195,55 @@ const Api: FC<{ application: Application | null }> = ({ application }) => { {/* API Key List */} - {apiKeyList.sort((a, b) => b.created_at - a.created_at).map(item => ( -
- - -
{item.name}
-
ID: {item.id}
- - -
handleEdit(item)} - >
-
handleDelete(item)} - >
- - - - - - - -
{item.total_requests}
-
{t('application.apiKeyRequestTotal')}
- - -
{item.rate_limit}
-
{t('application.qpsLimit')}
- - - - - - {maskApiKeys(item.api_key)} - - + + {apiKeyList.sort((a, b) => b.created_at - a.created_at).map(item => ( +
+ + +
{item.name}
+
ID: {item.id}
 - - -
- ))} + +
handleEdit(item)} + >
+
handleDelete(item)} + >
+ + + + + + + +
{item.total_requests}
+
{t('application.apiKeyRequestTotal')}
+ + +
{item.rate_limit}
+
{t('application.qpsLimit')}
+ + + + + + {maskApiKeys(item.api_key)} + + + + + +
+ ))} + diff --git a/web/src/views/ApplicationConfig/components/ApiKeyModal.tsx b/web/src/views/ApplicationConfig/components/ApiKeyModal.tsx index b43f0e4a..6de18781 100644 --- a/web/src/views/ApplicationConfig/components/ApiKeyModal.tsx +++ b/web/src/views/ApplicationConfig/components/ApiKeyModal.tsx @@ -17,6 +17,7 @@ import type { Application } from '@/views/ApplicationManagement/types' import type { ApiKeyModalRef } from '../types' import { createApiKey } from '@/api/apiKey'; import RbModal from '@/components/RbModal' +import RbSlider from '@/components/RbSlider' const FormItem = Form.Item; @@ -97,6 +98,10 @@ const ApiKeyModal = forwardRef(({ form={form} layout="vertical" scrollToFirstError={{ behavior: 'instant', block: 'end', focus: true }} + initialValues={{ + rate_limit: 50, + daily_request_limit: 100000 + }} > {/* Key name */} (({ > + {t(`application.qpsLimit`)}({t('application.qpsLimitTip')}, {t('application.qpsLimitUnit')})} + extra={t('application.qpsLimitDesc')} + rules={[ + { required: true, message: t('common.pleaseEnter') }, + ]} + > + + + {t(`application.dailyUsageLimit`)} ({t('application.dailyUsageLimitUnit')})} + extra={t('application.dailyUsageLimitDesc')} + rules={[ + { required: true, message: t('common.pleaseEnter') }, + ]} + > + + );