mirror of https://github.com/langgenius/dify.git
fix(web): fix checkbox unselectable bug & optimize document-list/app-annotation styles (#28244)
This commit is contained in:
parent
1d2cdf3489
commit
879869d3e3
|
|
@ -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 && (
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
/>
|
||||
)}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue