youngkingdom/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-05-06 02:18:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

Feat: feature and log dark mode (#13208)

Browse Source
This commit is contained in:
KVOJJJin
2025-02-05 13:58:19 +08:00
committed by GitHub
parent 1de84fdda0
commit 2710242982
25 changed files with 208 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
web/app/components/header/account-setting/api-based-extension-page/modal.tsx
View File

@ -77,7 +77,7 @@ const ApiBasedExtensionModal: FC<ApiBasedExtensionModalProps> = ({
onClose={() => { }}
className='!p-8 !pb-6 !max-w-none !w-[640px]'
>
<div className='mb-2 text-xl font-semibold text-gray-900'>
<div className='mb-2 text-xl font-semibold text-text-primary'>
{
data.name
? t('common.apiBasedExtension.modal.editTitle')
@ -85,44 +85,44 @@ const ApiBasedExtensionModal: FC<ApiBasedExtensionModalProps> = ({
}
</div>
<div className='py-2'>
<div className='leading-9 text-sm font-medium text-gray-900'>
<div className='leading-9 text-sm font-medium text-text-primary'>
{t('common.apiBasedExtension.modal.name.title')}
</div>
<input
value={localeData.name || ''}
onChange={e => handleDataChange('name', e.target.value)}
className='block px-3 w-full h-9 bg-gray-100 rounded-lg text-sm text-gray-900 outline-none appearance-none'
className='block px-3 w-full h-9 bg-components-input-bg-normal rounded-lg text-sm text-text-primary outline-none appearance-none'
placeholder={t('common.apiBasedExtension.modal.name.placeholder') || ''}
/>
</div>
<div className='py-2'>
<div className='flex justify-between items-center h-9 text-sm font-medium text-gray-900'>
<div className='flex justify-between items-center h-9 text-sm font-medium text-text-primary'>
{t('common.apiBasedExtension.modal.apiEndpoint.title')}
<a
href={t('common.apiBasedExtension.linkUrl') || '/'}
target='_blank' rel='noopener noreferrer'
className='group flex items-center text-xs text-gray-500 font-normal hover:text-primary-600'
className='group flex items-center text-xs text-text-tertiary font-normal hover:text-text-accent'
>
<BookOpen01 className='mr-1 w-3 h-3 text-gray-500 group-hover:text-primary-600' />
<BookOpen01 className='mr-1 w-3 h-3 text-text-tertiary group-hover:text-text-accent' />
{t('common.apiBasedExtension.link')}
</a>
</div>
<input
value={localeData.api_endpoint || ''}
onChange={e => handleDataChange('api_endpoint', e.target.value)}
className='block px-3 w-full h-9 bg-gray-100 rounded-lg text-sm text-gray-900 outline-none appearance-none'
className='block px-3 w-full h-9 bg-components-input-bg-normal rounded-lg text-sm text-text-primary outline-none appearance-none'
placeholder={t('common.apiBasedExtension.modal.apiEndpoint.placeholder') || ''}
/>
</div>
<div className='py-2'>
<div className='leading-9 text-sm font-medium text-gray-900'>
<div className='leading-9 text-sm font-medium text-text-primary'>
{t('common.apiBasedExtension.modal.apiKey.title')}
</div>
<div className='flex items-center'>
<input
value={localeData.api_key || ''}
onChange={e => handleDataChange('api_key', e.target.value)}
className='block grow mr-2 px-3 h-9 bg-gray-100 rounded-lg text-sm text-gray-900 outline-none appearance-none'
className='block grow mr-2 px-3 h-9 bg-components-input-bg-normal rounded-lg text-sm text-text-primary outline-none appearance-none'
placeholder={t('common.apiBasedExtension.modal.apiKey.placeholder') || ''}
/>
</div>

28
web/app/components/header/account-setting/api-based-extension-page/selector.tsx
View File

@ -54,33 +54,33 @@ const ApiBasedExtensionSelector: FC<ApiBasedExtensionSelectorProps> = ({
{
currentItem
? (
<div className='flex items-center justify-between pl-3 pr-2.5 h-9 bg-gray-100 rounded-lg cursor-pointer'>
<div className='text-sm text-gray-900'>{currentItem.name}</div>
<div className='flex items-center justify-between pl-3 pr-2.5 h-9 bg-components-input-bg-normal rounded-lg cursor-pointer'>
<div className='text-sm text-text-primary'>{currentItem.name}</div>
<div className='flex items-center'>
<div className='mr-1.5 w-[270px] text-xs text-gray-400 truncate text-right'>
<div className='mr-1.5 w-[270px] text-xs text-text-quaternary truncate text-right'>
{currentItem.api_endpoint}
</div>
<RiArrowDownSLine className={`w-4 h-4 text-gray-700 ${!open && 'opacity-60'}`} />
<RiArrowDownSLine className={`w-4 h-4 text-text-secondary ${!open && 'opacity-60'}`} />
</div>
</div>
)
: (
<div className='flex items-center justify-between pl-3 pr-2.5 h-9 bg-gray-100 rounded-lg text-sm text-gray-400 cursor-pointer'>
<div className='flex items-center justify-between pl-3 pr-2.5 h-9 bg-components-input-bg-normal rounded-lg text-sm text-text-quaternary cursor-pointer'>
{t('common.apiBasedExtension.selector.placeholder')}
<RiArrowDownSLine className={`w-4 h-4 text-gray-700 ${!open && 'opacity-60'}`} />
<RiArrowDownSLine className={`w-4 h-4 text-text-secondary ${!open && 'opacity-60'}`} />
</div>
)
}
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className='w-[calc(100%-32px)] max-w-[576px] z-[102]'>
<div className='w-full rounded-lg border-[0.5px] border-gray-200 bg-white shadow-lg z-10'>
<div className='w-full rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg z-10'>
<div className='p-1'>
<div className='flex items-center justify-between px-3 pt-2 pb-1'>
<div className='text-xs font-medium text-gray-500'>
<div className='text-xs font-medium text-text-tertiary'>
{t('common.apiBasedExtension.selector.title')}
</div>
<div
className='flex items-center text-xs text-primary-600 cursor-pointer'
className='flex items-center text-xs text-text-accent cursor-pointer'
onClick={() => {
setOpen(false)
setShowAccountSettingModal({ payload: 'api-based-extension' })
@ -95,20 +95,20 @@ const ApiBasedExtensionSelector: FC<ApiBasedExtensionSelectorProps> = ({
data?.map(item => (
<div
key={item.id}
className='px-3 py-1.5 w-full cursor-pointer hover:bg-gray-50 rounded-md text-left'
className='px-3 py-1.5 w-full cursor-pointer hover:stroke-state-base-hover rounded-md text-left'
onClick={() => handleSelect(item.id!)}
>
<div className='text-sm text-gray-900'>{item.name}</div>
<div className='text-xs text-gray-500'>{item.api_endpoint}</div>
<div className='text-sm text-text-primary'>{item.name}</div>
<div className='text-xs text-text-tertiary'>{item.api_endpoint}</div>
</div>
))
}
</div>
</div>
<div className='h-[1px] bg-gray-100' />
<div className='h-[1px] bg-divider-regular' />
<div className='p-1'>
<div
className='flex items-center px-3 h-8 text-sm text-primary-600 cursor-pointer'
className='flex items-center px-3 h-8 text-sm text-text-accent cursor-pointer'
onClick={() => {
setOpen(false)
setShowApiBasedExtensionModal({ payload: {}, onSaveCallback: () => mutate() })