fix(web): fix checkbox unselectable bug & optimize document-list/app-annotation styles (#28244)

This commit is contained in:
yangzheli 2025-11-20 11:28:20 +08:00 committed by GitHub
parent 1d2cdf3489
commit 879869d3e3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 90 additions and 88 deletions

View File

@ -139,7 +139,7 @@ const Annotation: FC<Props> = (props) => {
return (
<div className='flex h-full flex-col'>
<p className='system-sm-regular text-text-tertiary'>{t('appLog.description')}</p>
<div className='flex h-full flex-1 flex-col py-4'>
<div className='relative flex h-full flex-1 flex-col py-4'>
<Filter appId={appDetail.id} queryParams={queryParams} setQueryParams={setQueryParams}>
<div className='flex items-center space-x-2'>
{isChatApp && (

View File

@ -54,95 +54,97 @@ const List: FC<Props> = ({
}, [isAllSelected, list, selectedIds, onSelectedIdsChange])
return (
<div className='relative grow overflow-x-auto'>
<table className={cn('mt-2 w-full min-w-[440px] border-collapse border-0')}>
<thead className='system-xs-medium-uppercase text-text-tertiary'>
<tr>
<td className='w-12 whitespace-nowrap rounded-l-lg bg-background-section-burn px-2'>
<Checkbox
className='mr-2'
checked={isAllSelected}
indeterminate={!isAllSelected && isSomeSelected}
onCheck={handleSelectAll}
/>
</td>
<td className='w-5 whitespace-nowrap bg-background-section-burn pl-2 pr-1'>{t('appAnnotation.table.header.question')}</td>
<td className='whitespace-nowrap bg-background-section-burn py-1.5 pl-3'>{t('appAnnotation.table.header.answer')}</td>
<td className='whitespace-nowrap bg-background-section-burn py-1.5 pl-3'>{t('appAnnotation.table.header.createdAt')}</td>
<td className='whitespace-nowrap bg-background-section-burn py-1.5 pl-3'>{t('appAnnotation.table.header.hits')}</td>
<td className='w-[96px] whitespace-nowrap rounded-r-lg bg-background-section-burn py-1.5 pl-3'>{t('appAnnotation.table.header.actions')}</td>
</tr>
</thead>
<tbody className="system-sm-regular text-text-secondary">
{list.map(item => (
<tr
key={item.id}
className='cursor-pointer border-b border-divider-subtle hover:bg-background-default-hover'
onClick={
() => {
onView(item)
}
}
>
<td className='w-12 px-2' onClick={e => e.stopPropagation()}>
<>
<div className='relative mt-2 grow overflow-x-auto'>
<table className={cn('w-full min-w-[440px] border-collapse border-0')}>
<thead className='system-xs-medium-uppercase text-text-tertiary'>
<tr>
<td className='w-12 whitespace-nowrap rounded-l-lg bg-background-section-burn px-2'>
<Checkbox
className='mr-2'
checked={selectedIds.includes(item.id)}
onCheck={() => {
if (selectedIds.includes(item.id))
onSelectedIdsChange(selectedIds.filter(id => id !== item.id))
else
onSelectedIdsChange([...selectedIds, item.id])
}}
checked={isAllSelected}
indeterminate={!isAllSelected && isSomeSelected}
onCheck={handleSelectAll}
/>
</td>
<td
className='max-w-[250px] overflow-hidden text-ellipsis whitespace-nowrap p-3 pr-2'
title={item.question}
>{item.question}</td>
<td
className='max-w-[250px] overflow-hidden text-ellipsis whitespace-nowrap p-3 pr-2'
title={item.answer}
>{item.answer}</td>
<td className='p-3 pr-2'>{formatTime(item.created_at, t('appLog.dateTimeFormat') as string)}</td>
<td className='p-3 pr-2'>{item.hit_count}</td>
<td className='w-[96px] p-3 pr-2' onClick={e => e.stopPropagation()}>
{/* Actions */}
<div className='flex space-x-1 text-text-tertiary'>
<ActionButton onClick={() => onView(item)}>
<RiEditLine className='h-4 w-4' />
</ActionButton>
<ActionButton
onClick={() => {
setCurrId(item.id)
setShowConfirmDelete(true)
}}
>
<RiDeleteBinLine className='h-4 w-4' />
</ActionButton>
</div>
</td>
<td className='w-5 whitespace-nowrap bg-background-section-burn pl-2 pr-1'>{t('appAnnotation.table.header.question')}</td>
<td className='whitespace-nowrap bg-background-section-burn py-1.5 pl-3'>{t('appAnnotation.table.header.answer')}</td>
<td className='whitespace-nowrap bg-background-section-burn py-1.5 pl-3'>{t('appAnnotation.table.header.createdAt')}</td>
<td className='whitespace-nowrap bg-background-section-burn py-1.5 pl-3'>{t('appAnnotation.table.header.hits')}</td>
<td className='w-[96px] whitespace-nowrap rounded-r-lg bg-background-section-burn py-1.5 pl-3'>{t('appAnnotation.table.header.actions')}</td>
</tr>
))}
</tbody>
</table>
<RemoveAnnotationConfirmModal
isShow={showConfirmDelete}
onHide={() => setShowConfirmDelete(false)}
onRemove={() => {
onRemove(currId as string)
setShowConfirmDelete(false)
}}
/>
</thead>
<tbody className="system-sm-regular text-text-secondary">
{list.map(item => (
<tr
key={item.id}
className='cursor-pointer border-b border-divider-subtle hover:bg-background-default-hover'
onClick={
() => {
onView(item)
}
}
>
<td className='w-12 px-2' onClick={e => e.stopPropagation()}>
<Checkbox
className='mr-2'
checked={selectedIds.includes(item.id)}
onCheck={() => {
if (selectedIds.includes(item.id))
onSelectedIdsChange(selectedIds.filter(id => id !== item.id))
else
onSelectedIdsChange([...selectedIds, item.id])
}}
/>
</td>
<td
className='max-w-[250px] overflow-hidden text-ellipsis whitespace-nowrap p-3 pr-2'
title={item.question}
>{item.question}</td>
<td
className='max-w-[250px] overflow-hidden text-ellipsis whitespace-nowrap p-3 pr-2'
title={item.answer}
>{item.answer}</td>
<td className='p-3 pr-2'>{formatTime(item.created_at, t('appLog.dateTimeFormat') as string)}</td>
<td className='p-3 pr-2'>{item.hit_count}</td>
<td className='w-[96px] p-3 pr-2' onClick={e => e.stopPropagation()}>
{/* Actions */}
<div className='flex space-x-1 text-text-tertiary'>
<ActionButton onClick={() => onView(item)}>
<RiEditLine className='h-4 w-4' />
</ActionButton>
<ActionButton
onClick={() => {
setCurrId(item.id)
setShowConfirmDelete(true)
}}
>
<RiDeleteBinLine className='h-4 w-4' />
</ActionButton>
</div>
</td>
</tr>
))}
</tbody>
</table>
<RemoveAnnotationConfirmModal
isShow={showConfirmDelete}
onHide={() => setShowConfirmDelete(false)}
onRemove={() => {
onRemove(currId as string)
setShowConfirmDelete(false)
}}
/>
</div>
{selectedIds.length > 0 && (
<BatchAction
className='absolute bottom-6 left-1/2 z-20 -translate-x-1/2'
className='absolute bottom-20 left-0 z-20'
selectedIds={selectedIds}
onBatchDelete={onBatchDelete}
onCancel={onCancel}
/>
)}
</div>
</>
)
}
export default React.memo(List)

View File

@ -1030,8 +1030,8 @@ const ConversationList: FC<IConversationList> = ({ logs, appDetail, onRefresh })
return <Loading />
return (
<div className='relative grow overflow-x-auto'>
<table className={cn('mt-2 w-full min-w-[440px] border-collapse border-0')}>
<div className='relative mt-2 grow overflow-x-auto'>
<table className={cn('w-full min-w-[440px] border-collapse border-0')}>
<thead className='system-xs-medium-uppercase text-text-tertiary'>
<tr>
<td className='w-5 whitespace-nowrap rounded-l-lg bg-background-section-burn pl-2 pr-1'></td>

View File

@ -44,8 +44,8 @@ const BatchAction: FC<IBatchActionProps> = ({
hideDeleteConfirm()
}
return (
<div className={cn('flex w-full justify-center gap-x-2', className)}>
<div className='flex items-center gap-x-1 rounded-[10px] border border-components-actionbar-border-accent bg-components-actionbar-bg-accent p-1 shadow-xl shadow-shadow-shadow-5'>
<div className={cn('pointer-events-none flex w-full justify-center gap-x-2', className)}>
<div className='pointer-events-auto flex items-center gap-x-1 rounded-[10px] border border-components-actionbar-border-accent bg-components-actionbar-bg-accent p-1 shadow-xl shadow-shadow-shadow-5'>
<div className='inline-flex items-center gap-x-2 py-1 pl-2 pr-3'>
<span className='system-xs-medium flex h-5 w-5 items-center justify-center rounded-md bg-text-accent text-text-primary-on-surface'>
{selectedIds.length}

View File

@ -283,7 +283,7 @@ const Documents: FC<IDocumentsProps> = ({ datasetId }) => {
})
return (
<div className='flex h-full flex-col overflow-y-auto'>
<div className='flex h-full flex-col'>
<div className='flex flex-col justify-center gap-1 px-6 pt-4'>
<h1 className='text-base font-semibold text-text-primary'>{t('datasetDocuments.list.title')}</h1>
<div className='flex items-center space-x-0.5 text-sm font-normal text-text-tertiary'>
@ -298,7 +298,7 @@ const Documents: FC<IDocumentsProps> = ({ datasetId }) => {
</a>
</div>
</div>
<div className='flex flex-1 flex-col px-6 py-4'>
<div className='flex h-0 grow flex-col px-6 pt-4'>
<div className='flex flex-wrap items-center justify-between'>
<div className='flex items-center gap-2'>
<Chip

View File

@ -285,9 +285,9 @@ const DocumentList: FC<IDocumentListProps> = ({
}, [])
return (
<div className='relative flex h-full w-full flex-col'>
<div className='relative grow overflow-x-auto'>
<table className={`mt-3 w-full min-w-[700px] max-w-full border-collapse border-0 text-sm ${s.documentTable}`}>
<div className='relative mt-3 flex h-full w-full flex-col'>
<div className='relative h-0 grow overflow-x-auto'>
<table className={`w-full min-w-[700px] max-w-full border-collapse border-0 text-sm ${s.documentTable}`}>
<thead className="h-8 border-b border-divider-subtle text-xs font-medium uppercase leading-8 text-text-tertiary">
<tr>
<td className='w-12'>
@ -455,7 +455,7 @@ const DocumentList: FC<IDocumentListProps> = ({
{pagination.total && (
<Pagination
{...pagination}
className='w-full shrink-0 px-0 pb-0'
className='w-full shrink-0'
/>
)}