From a430284aa21e3ae1f0d5654e55b2ad2852519cc2 Mon Sep 17 00:00:00 2001
From: wwf <yearningwang@iqtogether.com>
Date: 星期三, 04 六月 2025 15:17:49 +0800
Subject: [PATCH] 初始化
---
app/components/tools/edit-custom-collection-modal/config-credentials.tsx | 72 +++++++++++++++++------------------
1 files changed, 35 insertions(+), 37 deletions(-)
diff --git a/app/components/tools/edit-custom-collection-modal/config-credentials.tsx b/app/components/tools/edit-custom-collection-modal/config-credentials.tsx
index cbf1048..4b24bcb 100644
--- a/app/components/tools/edit-custom-collection-modal/config-credentials.tsx
+++ b/app/components/tools/edit-custom-collection-modal/config-credentials.tsx
@@ -5,7 +5,6 @@
import Tooltip from '@/app/components/base/tooltip'
import cn from '@/utils/classnames'
import type { Credential } from '@/app/components/tools/types'
-import Input from '@/app/components/base/input'
import Drawer from '@/app/components/base/drawer-plus'
import Button from '@/app/components/base/button'
import Radio from '@/app/components/base/radio/ui'
@@ -17,6 +16,7 @@
onChange: (credential: Credential) => void
onHide: () => void
}
+const keyClassNames = 'py-2 leading-5 text-sm font-medium text-gray-900'
type ItemProps = {
text: string
@@ -28,11 +28,11 @@
const SelectItem: FC<ItemProps> = ({ text, value, isChecked, onClick }) => {
return (
<div
- className={cn(isChecked ? 'border-[2px] border-util-colors-indigo-indigo-600 bg-components-panel-on-panel-item-bg shadow-sm' : 'border border-components-card-border', 'mb-2 flex h-9 w-[150px] cursor-pointer items-center space-x-2 rounded-xl bg-components-panel-on-panel-item-bg pl-3 hover:bg-components-panel-on-panel-item-bg-hover')}
+ className={cn(isChecked ? 'border-[2px] border-indigo-600 shadow-sm bg-white' : 'border border-gray-100', 'mb-2 flex items-center h-9 pl-3 w-[150px] rounded-xl bg-gray-25 hover:bg-gray-50 cursor-pointer space-x-2')}
onClick={() => onClick(value)}
>
<Radio isChecked={isChecked} />
- <div className='system-sm-regular text-text-primary'>{text}</div>
+ <div className='text-sm font-normal text-gray-900'>{text}</div>
</div>
)
}
@@ -52,17 +52,15 @@
positionCenter={positionCenter}
onHide={onHide}
title={t('tools.createTool.authMethod.title')!}
- dialogClassName='z-[60]'
- dialogBackdropClassName='z-[70]'
- panelClassName='mt-2 !w-[520px] h-fit z-[80]'
+ panelClassName='mt-2 !w-[520px] h-fit'
maxWidthClassName='!max-w-[520px]'
height={'fit-content'}
- headerClassName='!border-b-divider-regular'
+ headerClassName='!border-b-black/5'
body={
- <div className='px-6 pt-2'>
+ <div className='pt-2 px-6'>
<div className='space-y-4'>
<div>
- <div className='system-sm-medium py-2 text-text-primary'>{t('tools.createTool.authMethod.type')}</div>
+ <div className={keyClassNames}>{t('tools.createTool.authMethod.type')}</div>
<div className='flex space-x-3'>
<SelectItem
text={t('tools.createTool.authMethod.types.none')}
@@ -86,52 +84,52 @@
</div>
{tempCredential.auth_type === AuthType.apiKey && (
<>
- <div>
- <div className='system-sm-medium py-2 text-text-primary'>{t('tools.createTool.authHeaderPrefix.title')}</div>
- <div className='flex space-x-3'>
- <SelectItem
- text={t('tools.createTool.authHeaderPrefix.types.basic')}
- value={AuthHeaderPrefix.basic}
- isChecked={tempCredential.api_key_header_prefix === AuthHeaderPrefix.basic}
- onClick={value => setTempCredential({ ...tempCredential, api_key_header_prefix: value as AuthHeaderPrefix })}
- />
- <SelectItem
- text={t('tools.createTool.authHeaderPrefix.types.bearer')}
- value={AuthHeaderPrefix.bearer}
- isChecked={tempCredential.api_key_header_prefix === AuthHeaderPrefix.bearer}
- onClick={value => setTempCredential({ ...tempCredential, api_key_header_prefix: value as AuthHeaderPrefix })}
- />
- <SelectItem
- text={t('tools.createTool.authHeaderPrefix.types.custom')}
- value={AuthHeaderPrefix.custom}
- isChecked={tempCredential.api_key_header_prefix === AuthHeaderPrefix.custom}
- onClick={value => setTempCredential({ ...tempCredential, api_key_header_prefix: value as AuthHeaderPrefix })}
- />
- </div>
+ <div className={keyClassNames}>{t('tools.createTool.authHeaderPrefix.title')}</div>
+ <div className='flex space-x-3'>
+ <SelectItem
+ text={t('tools.createTool.authHeaderPrefix.types.basic')}
+ value={AuthHeaderPrefix.basic}
+ isChecked={tempCredential.api_key_header_prefix === AuthHeaderPrefix.basic}
+ onClick={value => setTempCredential({ ...tempCredential, api_key_header_prefix: value as AuthHeaderPrefix })}
+ />
+ <SelectItem
+ text={t('tools.createTool.authHeaderPrefix.types.bearer')}
+ value={AuthHeaderPrefix.bearer}
+ isChecked={tempCredential.api_key_header_prefix === AuthHeaderPrefix.bearer}
+ onClick={value => setTempCredential({ ...tempCredential, api_key_header_prefix: value as AuthHeaderPrefix })}
+ />
+ <SelectItem
+ text={t('tools.createTool.authHeaderPrefix.types.custom')}
+ value={AuthHeaderPrefix.custom}
+ isChecked={tempCredential.api_key_header_prefix === AuthHeaderPrefix.custom}
+ onClick={value => setTempCredential({ ...tempCredential, api_key_header_prefix: value as AuthHeaderPrefix })}
+ />
</div>
<div>
- <div className='system-sm-medium flex items-center py-2 text-text-primary'>
+ <div className='flex items-center h-8 text-[13px] font-medium text-gray-900'>
{t('tools.createTool.authMethod.key')}
<Tooltip
popupContent={
- <div className='w-[261px] text-text-tertiary'>
+ <div className='w-[261px] text-gray-500'>
{t('tools.createTool.authMethod.keyTooltip')}
</div>
}
triggerClassName='ml-0.5 w-4 h-4'
/>
</div>
- <Input
+ <input
value={tempCredential.api_key_header}
onChange={e => setTempCredential({ ...tempCredential, api_key_header: e.target.value })}
+ className='w-full h-10 px-3 text-sm font-normal border border-transparent bg-gray-100 rounded-lg grow outline-none focus:bg-components-input-bg-active focus:border-components-input-border-active focus:shadow-xs'
placeholder={t('tools.createTool.authMethod.types.apiKeyPlaceholder')!}
/>
</div>
<div>
- <div className='system-sm-medium py-2 text-text-primary'>{t('tools.createTool.authMethod.value')}</div>
- <Input
+ <div className={keyClassNames}>{t('tools.createTool.authMethod.value')}</div>
+ <input
value={tempCredential.api_key_value}
onChange={e => setTempCredential({ ...tempCredential, api_key_value: e.target.value })}
+ className='w-full h-10 px-3 text-sm font-normal border border-transparent bg-gray-100 rounded-lg grow outline-none focus:bg-components-input-bg-active focus:border-components-input-border-active focus:shadow-xs'
placeholder={t('tools.createTool.authMethod.types.apiValuePlaceholder')!}
/>
</div>
@@ -139,7 +137,7 @@
</div>
- <div className='mt-4 flex shrink-0 justify-end space-x-2 py-4'>
+ <div className='mt-4 shrink-0 flex justify-end space-x-2 py-4'>
<Button onClick={onHide}>{t('common.operation.cancel')}</Button>
<Button variant='primary' onClick={() => {
onChange(tempCredential)
--
Gitblit v1.8.0