Chore: frontend infrastructure upgrade (#16420)

Co-authored-by: NFish <douxc512@gmail.com>
Co-authored-by: zxhlyh <jasonapring2015@outlook.com>
Co-authored-by: twwu <twwu@dify.ai>
Co-authored-by: jZonG <jzongcode@gmail.com>
This commit is contained in:
Joel
2025-03-21 17:41:03 +08:00
committed by GitHub
parent e61415223b
commit 7709d9df20
1435 changed files with 13372 additions and 11612 deletions

View File

@@ -248,10 +248,10 @@ const EmbeddingDetail: FC<IEmbeddingDetailProps> = ({
return (
<>
<div className='py-12 px-16 flex flex-col gap-y-2'>
<div className='flex items-center gap-x-1 h-6'>
{isEmbedding && <RiLoader2Line className='h-4 w-4 text-text-secondary animate-spin' />}
<span className='grow text-text-secondary system-md-semibold-uppercase'>
<div className='flex flex-col gap-y-2 px-16 py-12'>
<div className='flex h-6 items-center gap-x-1'>
{isEmbedding && <RiLoader2Line className='h-4 w-4 animate-spin text-text-secondary' />}
<span className='system-md-semibold-uppercase grow text-text-secondary'>
{isEmbedding && t('datasetDocuments.embedding.processing')}
{isEmbeddingCompleted && t('datasetDocuments.embedding.completed')}
{isEmbeddingPaused && t('datasetDocuments.embedding.paused')}
@@ -260,12 +260,12 @@ const EmbeddingDetail: FC<IEmbeddingDetailProps> = ({
{isEmbedding && (
<button
type='button'
className={`px-1.5 py-1 border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg
shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px] flex items-center gap-x-1 rounded-md`}
className={`flex items-center gap-x-1 rounded-md border-[0.5px]
border-components-button-secondary-border bg-components-button-secondary-bg px-1.5 py-1 shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px]`}
onClick={handleSwitch}
>
<RiPauseCircleLine className='w-3.5 h-3.5 text-components-button-secondary-text' />
<span className='pr-[3px] text-components-button-secondary-text system-xs-medium'>
<RiPauseCircleLine className='h-3.5 w-3.5 text-components-button-secondary-text' />
<span className='system-xs-medium pr-[3px] text-components-button-secondary-text'>
{t('datasetDocuments.embedding.pause')}
</span>
</button>
@@ -273,12 +273,12 @@ const EmbeddingDetail: FC<IEmbeddingDetailProps> = ({
{isEmbeddingPaused && (
<button
type='button'
className={`px-1.5 py-1 border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg
shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px] flex items-center gap-x-1 rounded-md`}
className={`flex items-center gap-x-1 rounded-md border-[0.5px]
border-components-button-secondary-border bg-components-button-secondary-bg px-1.5 py-1 shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px]`}
onClick={handleSwitch}
>
<RiPlayCircleLine className='w-3.5 h-3.5 text-components-button-secondary-text' />
<span className='pr-[3px] text-components-button-secondary-text system-xs-medium'>
<RiPlayCircleLine className='h-3.5 w-3.5 text-components-button-secondary-text' />
<span className='system-xs-medium pr-[3px] text-components-button-secondary-text'>
{t('datasetDocuments.embedding.resume')}
</span>
</button>
@@ -286,7 +286,7 @@ const EmbeddingDetail: FC<IEmbeddingDetailProps> = ({
</div>
{/* progress bar */}
<div className={cn(
'flex items-center w-full h-2 rounded-md border border-components-progress-bar-border overflow-hidden',
'flex h-2 w-full items-center overflow-hidden rounded-md border border-components-progress-bar-border',
isEmbedding ? 'bg-components-progress-bar-bg bg-opacity-50' : 'bg-components-progress-bar-bg',
)}>
<div
@@ -298,8 +298,8 @@ const EmbeddingDetail: FC<IEmbeddingDetailProps> = ({
style={{ width: `${percent}%` }}
/>
</div>
<div className={'w-full flex items-center'}>
<span className='text-text-secondary system-xs-medium'>
<div className={'flex w-full items-center'}>
<span className='system-xs-medium text-text-secondary'>
{`${t('datasetDocuments.embedding.segments')} ${indexingStatusDetail?.completed_segments || '--'}/${indexingStatusDetail?.total_segments || '--'} · ${percent}%`}
</span>
</div>

View File

@@ -9,8 +9,8 @@ import Divider from '@/app/components/base/divider'
const CardSkelton = React.memo(() => {
return (
<SkeletonContainer className='p-1 pb-2 gap-y-0'>
<SkeletonContainer className='px-2 pt-1.5 gap-y-0.5'>
<SkeletonContainer className='gap-y-0 p-1 pb-2'>
<SkeletonContainer className='gap-y-0.5 px-2 pt-1.5'>
<SkeletonRow className='py-0.5'>
<SkeletonRectangle className='w-[72px] bg-text-quaternary' />
<SkeletonPoint className='opacity-20' />
@@ -19,7 +19,7 @@ const CardSkelton = React.memo(() => {
<SkeletonRectangle className='w-24 bg-text-quaternary' />
<SkeletonRow className='grow justify-end gap-1'>
<SkeletonRectangle className='w-12 bg-text-quaternary' />
<SkeletonRectangle className='w-2 bg-text-quaternary mx-1' />
<SkeletonRectangle className='mx-1 w-2 bg-text-quaternary' />
</SkeletonRow>
</SkeletonRow>
<SkeletonRow className='py-0.5'>
@@ -47,14 +47,14 @@ CardSkelton.displayName = 'CardSkelton'
const EmbeddingSkeleton = () => {
return (
<div className='relative flex flex-col grow overflow-y-hidden z-10'>
<div className='absolute top-0 left-0 w-full h-full bg-dataset-chunk-list-mask-bg z-20' />
<div className='relative z-10 flex grow flex-col overflow-y-hidden'>
<div className='absolute left-0 top-0 z-20 h-full w-full bg-dataset-chunk-list-mask-bg' />
{[...Array.from({ length: 5 })].map((_, index) => {
return (
<div key={index} className='w-full px-11'>
<CardSkelton />
{index !== 9 && <div className='w-full px-3'>
<Divider type='horizontal' className='bg-divider-subtle my-1' />
<Divider type='horizontal' className='my-1 bg-divider-subtle' />
</div>}
</div>
)