Fix/explore darkmode (#14751)

This commit is contained in:
NFish
2025-03-03 16:06:28 +08:00
committed by GitHub
parent bb4e7da720
commit 931d704612
8 changed files with 42 additions and 92 deletions

View File

@@ -5,8 +5,7 @@ import Button from '../../base/button'
import cn from '@/utils/classnames'
import type { App } from '@/models/explore'
import AppIcon from '@/app/components/base/app-icon'
import { AiText, ChatBot, CuteRobot } from '@/app/components/base/icons/src/vender/solid/communication'
import { Route } from '@/app/components/base/icons/src/vender/solid/mapsAndTravel'
import { AppTypeIcon } from '../../app/type-selector'
export type AppCardProps = {
app: App
canCreate: boolean
@@ -23,7 +22,7 @@ const AppCard = ({
const { t } = useTranslation()
const { app: appBasicInfo } = app
return (
<div className={cn('relative overflow-hidden pb-2 group col-span-1 bg-white border-2 border-solid border-transparent rounded-lg shadow-sm flex flex-col transition-all duration-200 ease-in-out cursor-pointer hover:shadow-lg')}>
<div className={cn('relative overflow-hidden pb-2 group col-span-1 bg-components-panel-on-panel-item-bg border-[0.5px] border-components-panel-border rounded-lg shadow-sm flex flex-col transition-all duration-200 ease-in-out cursor-pointer hover:shadow-lg')}>
<div className='flex pt-[14px] px-[14px] pb-3 h-[66px] items-center gap-3 grow-0 shrink-0'>
<div className='relative shrink-0'>
<AppIcon
@@ -33,23 +32,8 @@ const AppCard = ({
background={appBasicInfo.icon_background}
imageUrl={appBasicInfo.icon_url}
/>
<span className='absolute bottom-[-3px] right-[-3px] w-4 h-4 p-0.5 bg-white rounded border-[0.5px] border-[rgba(0,0,0,0.02)] shadow-sm'>
{appBasicInfo.mode === 'advanced-chat' && (
<ChatBot className='w-3 h-3 text-[#1570EF]' />
)}
{appBasicInfo.mode === 'agent-chat' && (
<CuteRobot className='w-3 h-3 text-indigo-600' />
)}
{appBasicInfo.mode === 'chat' && (
<ChatBot className='w-3 h-3 text-[#1570EF]' />
)}
{appBasicInfo.mode === 'completion' && (
<AiText className='w-3 h-3 text-[#0E9384]' />
)}
{appBasicInfo.mode === 'workflow' && (
<Route className='w-3 h-3 text-[#f79009]' />
)}
</span>
<AppTypeIcon wrapperClassName='absolute -bottom-0.5 -right-0.5 w-4 h-4 rounded-[4px] border border-divider-regular outline outline-components-panel-on-panel-item-bg'
className='w-3 h-3' type={appBasicInfo.mode} />
</div>
<div className='grow w-0 py-[1px]'>
<div className='flex items-center text-sm leading-5 font-semibold text-text-secondary'>
@@ -64,14 +48,14 @@ const AppCard = ({
</div>
</div>
</div>
<div className="description-wrapper h-[90px] px-[14px] text-xs leading-normal text-text-tertiary ">
<div className="description-wrapper h-[90px] px-[14px] system-xs-regular text-text-tertiary">
<div className='line-clamp-4 group-hover:line-clamp-2'>
{app.description}
</div>
</div>
{isExplore && canCreate && (
<div className={cn('hidden items-center flex-wrap min-h-[42px] px-[14px] pt-2 pb-[10px] bg-white group-hover:flex absolute bottom-0 left-0 right-0')}>
<div className={cn('flex items-center w-full space-x-2')}>
<div className={cn('hidden absolute bottom-0 left-0 right-0 p-4 pt-8 group-hover:flex bg-gradient-to-t from-[60.27%] from-components-panel-gradient-2 to-transparent')}>
<div className={cn('flex items-center w-full space-x-2 h-8')}>
<Button variant='primary' className='grow h-7' onClick={() => onCreate()}>
<PlusIcon className='w-4 h-4 mr-1' />
<span className='text-xs'>{t('explore.appCard.addToWorkspace')}</span>
@@ -79,16 +63,6 @@ const AppCard = ({
</div>
</div>
)}
{!isExplore && (
<div className={cn('hidden items-center flex-wrap min-h-[42px] px-[14px] pt-2 pb-[10px] bg-white group-hover:flex absolute bottom-0 left-0 right-0')}>
<div className={cn('flex items-center w-full space-x-2')}>
<Button variant='primary' className='grow h-7' onClick={() => onCreate()}>
<PlusIcon className='w-4 h-4 mr-1' />
<span className='text-xs'>{t('app.newApp.useTemplate')}</span>
</Button>
</div>
</div>
)}
</div>
)
}