fix: tiny css problem

This commit is contained in:
Joel 2024-12-11 17:48:13 +08:00
parent 41039f09bf
commit f22c608c89
6 changed files with 21 additions and 21 deletions

View File

@ -82,8 +82,8 @@ const FileTypeIcon = ({
size = 'sm', size = 'sm',
className, className,
}: FileTypeIconProps) => { }: FileTypeIconProps) => {
const Icon = FILE_TYPE_ICON_MAP[type]?.component || FileAppearanceTypeEnum.custom const Icon = FILE_TYPE_ICON_MAP[type]?.component || FileAppearanceTypeEnum.document
const color = FILE_TYPE_ICON_MAP[type]?.color || FILE_TYPE_ICON_MAP.custom.color const color = FILE_TYPE_ICON_MAP[type]?.color || FILE_TYPE_ICON_MAP[FileAppearanceTypeEnum.document].color
return <Icon className={cn('shrink-0', SizeMap[size], color, className)} /> return <Icon className={cn('shrink-0', SizeMap[size], color, className)} />
} }

View File

@ -54,7 +54,7 @@ export const generalResultData: HitTesting[] = [
content: 'It is quite natural for ', content: 'It is quite natural for ',
}, },
], ],
score: 0.8771945, score: 0.99,
tsne_position: null, tsne_position: null,
}, },
{ {
@ -99,7 +99,7 @@ export const generalResultData: HitTesting[] = [
}, },
}, },
child_chunks: null, child_chunks: null,
score: 0.8642928, score: 1,
tsne_position: null, tsne_position: null,
}, },
{ {
@ -144,7 +144,7 @@ export const generalResultData: HitTesting[] = [
}, },
}, },
child_chunks: null, child_chunks: null,
score: 0.80618876, score: 0.2,
tsne_position: null, tsne_position: null,
}, },
] ]

View File

@ -19,11 +19,11 @@ const ChildChunks: FC<Props> = ({
<div <div
className={!isShowAll ? 'line-clamp-2' : ''} className={!isShowAll ? 'line-clamp-2' : ''}
> >
<div className='inline-flex'> <div className='inline-flex items-center relative top-[-3px]'>
<div className='bg-state-accent-solid system-2xs-semibold-uppercase px-1'>C-{id}</div> <div className='flex items-center h-[24px] bg-state-accent-solid system-2xs-semibold-uppercase text-text-primary-on-surface px-1'>C-{id}</div>
<Score value={score} /> <Score value={score} besideChunkName />
</div> </div>
<SliceContent className='bg-state-accent-hover group-hover:bg-state-accent-hover'>{content}</SliceContent> <SliceContent className='bg-state-accent-hover group-hover:bg-state-accent-hover text-text-secondary font-normal'>{content}</SliceContent>
</div> </div>
) )
} }

View File

@ -28,8 +28,8 @@ const ChunkDetailModal: FC<Props> = ({
const { segment, score, child_chunks } = payload const { segment, score, child_chunks } = payload
const { position, content, keywords, document } = segment const { position, content, keywords, document } = segment
const isParentChildRetrieval = !!(child_chunks && child_chunks.length > 0) const isParentChildRetrieval = !!(child_chunks && child_chunks.length > 0)
const extension = document.name.split('.').slice(0, -1)[0] as FileAppearanceTypeEnum const extension = document.name.split('.').slice(-1)[0] as FileAppearanceTypeEnum
const maxHeighClassName = 'max-h-[752px] overflow-y-auto' const maxHeighClassName = 'max-h-[min(752px,_80vh)] overflow-y-auto'
return ( return (
<Modal <Modal
title={t(`${i18nPrefix}.chunkDetail`)} title={t(`${i18nPrefix}.chunkDetail`)}
@ -38,7 +38,7 @@ const ChunkDetailModal: FC<Props> = ({
onClose={onHide} onClose={onHide}
className={cn(isParentChildRetrieval ? '!min-w-[1200px]' : '!min-w-[720px]')} className={cn(isParentChildRetrieval ? '!min-w-[1200px]' : '!min-w-[720px]')}
> >
<div className='flex pb-6'> <div className='mt-4 flex pb-6'>
<div> <div>
{/* Meta info */} {/* Meta info */}
<div className='flex justify-between items-center'> <div className='flex justify-between items-center'>
@ -49,7 +49,7 @@ const ChunkDetailModal: FC<Props> = ({
className={cn('w-fit group-hover:opacity-100')} className={cn('w-fit group-hover:opacity-100')}
/> />
<Dot /> <Dot />
<div className='flex items-center space-x-1'> <div className='grow flex items-center space-x-1'>
<FileIcon type={extension} size='sm' /> <FileIcon type={extension} size='sm' />
<span className='grow w-0 truncate text-text-secondary text-[13px] font-normal'>{document.name}</span> <span className='grow w-0 truncate text-text-secondary text-[13px] font-normal'>{document.name}</span>
</div> </div>
@ -62,7 +62,7 @@ const ChunkDetailModal: FC<Props> = ({
{!isParentChildRetrieval && keywords && keywords.length > 0 && ( {!isParentChildRetrieval && keywords && keywords.length > 0 && (
<div className='mt-6'> <div className='mt-6'>
<div className='font-medium text-xs text-text-tertiary uppercase'>{t(`${i18nPrefix}.keyword`)}</div> <div className='font-medium text-xs text-text-tertiary uppercase'>{t(`${i18nPrefix}.keyword`)}</div>
<div className='flex flex-wrap'> <div className='mt-1 flex flex-wrap'>
{keywords.map(keyword => ( {keywords.map(keyword => (
<Tag key={keyword} text={keyword} className='mr-2' /> <Tag key={keyword} text={keyword} className='mr-2' />
))} ))}

View File

@ -27,7 +27,7 @@ const ResultItem: FC<Props> = ({
const { segment, score, child_chunks } = payload const { segment, score, child_chunks } = payload
const { position, word_count, content, keywords, document } = segment const { position, word_count, content, keywords, document } = segment
const isParentChildRetrieval = !!(child_chunks && child_chunks.length > 0) const isParentChildRetrieval = !!(child_chunks && child_chunks.length > 0)
const extension = document.name.split('.').slice(0, -1)[0] as FileAppearanceTypeEnum const extension = document.name.split('.').slice(-1)[0] as FileAppearanceTypeEnum
const [isFold, { const [isFold, {
toggle: toggleFold, toggle: toggleFold,
}] = useBoolean(false) }] = useBoolean(false)
@ -61,7 +61,7 @@ const ResultItem: FC<Props> = ({
<div className='mt-1'> <div className='mt-1'>
<div className='flex items-center space-x-0.5 text-text-secondary' onClick={toggleFold}> <div className='flex items-center space-x-0.5 text-text-secondary' onClick={toggleFold}>
<Icon className={cn('w-4 h-4', isFold && 'opacity-50')} /> <Icon className={cn('w-4 h-4', isFold && 'opacity-50')} />
<div>{t(`${i18nPrefix}.dataset.hitChunks`, { num: child_chunks.length })}</div> <div>{t(`${i18nPrefix}.hitChunks`, { num: child_chunks.length })}</div>
</div> </div>
<div className='space-y-2'> <div className='space-y-2'>
{child_chunks.map(item => ( {child_chunks.map(item => (
@ -73,7 +73,7 @@ const ResultItem: FC<Props> = ({
</div> </div>
)} )}
{!isParentChildRetrieval && keywords && keywords.length > 0 && ( {!isParentChildRetrieval && keywords && keywords.length > 0 && (
<div className='flex flex-wrap'> <div className='mt-2 flex flex-wrap'>
{keywords.map(keyword => ( {keywords.map(keyword => (
<Tag key={keyword} text={keyword} className='mr-2' /> <Tag key={keyword} text={keyword} className='mr-2' />
))} ))}
@ -82,7 +82,7 @@ const ResultItem: FC<Props> = ({
</div> </div>
{/* Foot */} {/* Foot */}
<div className='mt-3 flex justify-between items-center h-10 pl-3 pr-2 border-t border-divider-subtle'> <div className='mt-3 flex justify-between items-center h-10 pl-3 pr-2 border-t border-divider-subtle'>
<div className='flex items-center space-x-1'> <div className='grow flex items-center space-x-1'>
<FileIcon type={extension} size='sm' /> <FileIcon type={extension} size='sm' />
<span className='grow w-0 truncate text-text-secondary text-[13px] font-normal'>{document.name}</span> <span className='grow w-0 truncate text-text-secondary text-[13px] font-normal'>{document.name}</span>
</div> </div>

View File

@ -13,9 +13,9 @@ const Score: FC<Props> = ({
besideChunkName, besideChunkName,
}) => { }) => {
return ( return (
<div className={cn('relative items-center px-[5px] border border-components-progress-bar-border overflow-hidden', besideChunkName ? 'border-l-0' : 'rounded-md')}> <div className={cn('relative items-center px-[5px] border border-components-progress-bar-border overflow-hidden', besideChunkName ? 'border-l-0 h-[25px]' : 'h-[20px] rounded-md')}>
<div className='absolute top-0 left-0 h-full bg-util-colors-blue-brand-blue-brand-100 border-r-[1.5px] border-components-progress-brand-progress ' style={{ width: `${value * 100}%` }} /> <div className={cn('absolute top-0 left-0 h-full bg-util-colors-blue-brand-blue-brand-100 border-r-[1.5px] border-components-progress-brand-progress', value === 1 && 'border-r-0')} style={{ width: `${value * 100}%` }} />
<div className={cn('relative flex items-center h-5 space-x-0.5 text-util-colors-blue-brand-blue-brand-700')}> <div className={cn('relative flex items-center h-full space-x-0.5 text-util-colors-blue-brand-blue-brand-700')}>
<div className='system-2xs-medium-uppercase'>score</div> <div className='system-2xs-medium-uppercase'>score</div>
<div className='system-xs-semibold'>{value.toFixed(2)}</div> <div className='system-xs-semibold'>{value.toFixed(2)}</div>
</div> </div>