yujunjun/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2025-09-08 08:37:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: improve layout and styling in TestRunPanel and FilePreview components

Browse Source
This commit is contained in:
twwu 2025-05-26 14:06:04 +08:00
parent 13e3f17493
commit 324c0d7b4c
3 changed files with 22 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/app/components/datasets/documents/create-from-pipeline/index.tsx
View File

@ -187,9 +187,9 @@ const TestRunPanel = () => {
return ( return (
<div <div
className='relative flex h-[calc(100vh-56px)] min-w-[1512px] rounded-t-2xl border-t border-effects-highlight bg-background-default-subtle' className='relative flex h-[calc(100vh-56px)] overflow-x-auto rounded-t-2xl border-t border-effects-highlight bg-background-default-subtle'
> >
<div className='flex flex-1 flex-col px-14'> <div className='flex h-full min-w-[760px] flex-1 flex-col px-14'>
<LeftHeader <LeftHeader
title={t('datasetPipeline.addDocuments.title')} title={t('datasetPipeline.addDocuments.title')}
currentStep={currentStep} currentStep={currentStep}
@ -287,7 +287,7 @@ const TestRunPanel = () => {
{/* Preview */} {/* Preview */}
{ {
currentStep === 1 && ( currentStep === 1 && (
<div className='flex h-full flex-1 shrink-0 flex-col pl-2 pt-2'> <div className='flex h-full w-[752px] shrink-0 flex-col pl-2 pt-2'>
{currentFile && <FilePreview file={currentFile} hidePreview={hideFilePreview} />} {currentFile && <FilePreview file={currentFile} hidePreview={hideFilePreview} />}
{currentNotionPage && <NotionPagePreview currentPage={currentNotionPage} hidePreview={hideNotionPagePreview} />} {currentNotionPage && <NotionPagePreview currentPage={currentNotionPage} hidePreview={hideNotionPagePreview} />}
{currentWebsite && <WebsitePreview payload={currentWebsite} hidePreview={hideWebsitePreview} />} {currentWebsite && <WebsitePreview payload={currentWebsite} hidePreview={hideWebsitePreview} />}

33
web/app/components/datasets/documents/create-from-pipeline/preview/file-preview.tsx
View File

@ -27,22 +27,27 @@ const FilePreview = ({
return arr.slice(0, -1).join() return arr.slice(0, -1).join()
} }
const getFileSize = (size: number) => { const getFileSize = (fileSize: number) => {
if (size / 1024 < 10) if (!fileSize)
return `${(size / 1024).toFixed(1)} KB` return fileSize
const units = ['', 'K', 'M', 'G', 'T', 'P']
return `${(size / 1024 / 1024).toFixed(1)} MB` let index = 0
while (fileSize >= 1024 && index < units.length) {
fileSize = fileSize / 1024
index++
}
return `${fileSize.toFixed(2)} ${units[index]}B`
} }
return ( return (
<div className='h-full rounded-t-xl border-l border-t border-components-panel-border bg-background-default-lighter shadow-md shadow-shadow-shadow-5'> <div className='h-full rounded-t-xl border-l border-t border-components-panel-border bg-background-default-lighter shadow-md shadow-shadow-shadow-5'>
<div className='flex gap-x-2 pb-3 pl-6 pr-4 pt-4'> <div className='flex gap-x-2 border-b border-divider-subtle pb-3 pl-6 pr-4 pt-4'>
<div className='flex grow flex-col gap-y-1'> <div className='flex grow flex-col gap-y-1'>
<div className='system-2xs-semibold-uppercase'>{t('datasetPipeline.addDocuments.stepOne.preview')}</div> <div className='system-2xs-semibold-uppercase text-text-accent'>{t('datasetPipeline.addDocuments.stepOne.preview')}</div>
<div className='title-md-semi-bold text-tex-primary'>{`${getFileName(file)}.${file.extension}`}</div> <div className='title-md-semi-bold text-tex-primary'>{`${getFileName(file)}.${file.extension}`}</div>
<div className='system-xs-medium flex gap-x-1 text-text-tertiary'> <div className='system-xs-medium flex items-center gap-x-1 text-text-tertiary'>
<DocumentFileIcon <DocumentFileIcon
className='size-6 shrink-0' className='size-3.5 shrink-0'
name={file.name} name={file.name}
extension={file.extension} extension={file.extension}
/> />
@ -65,12 +70,10 @@ const FilePreview = ({
<RiCloseLine className='size-[18px]' /> <RiCloseLine className='size-[18px]' />
</button> </button>
</div> </div>
<div className='px-6 py-5'> {isFetching && <Loading />}
{isFetching && <Loading />} {!isFetching && fileData && (
{!isFetching && fileData && ( <div className='body-md-regular overflow-hidden px-6 py-5 text-text-secondary'>{fileData.content}</div>
<div className='body-md-regular overflow-hidden text-text-secondary'>{fileData.content}</div> )}
)}
</div>
</div> </div>
) )
} }

2
web/app/components/datasets/documents/create-from-pipeline/preview/loading.tsx
View File

@ -3,7 +3,7 @@ import { SkeletonContainer, SkeletonRectangle } from '@/app/components/base/skel
const Loading = () => { const Loading = () => {
return ( return (
<div className='flex h-full flex-col gap-y-12 bg-gradient-to-b from-components-panel-bg-transparent to-components-panel-bg px-6 py-5'> <div className='flex h-full flex-col gap-y-3 overflow-hidden bg-gradient-to-b from-components-panel-bg-transparent to-components-panel-bg px-6 py-5'>
<SkeletonContainer className='w-full gap-0'> <SkeletonContainer className='w-full gap-0'>
<SkeletonRectangle className='my-1.5 w-full' /> <SkeletonRectangle className='my-1.5 w-full' />
<SkeletonRectangle className='my-1.5 w-full' /> <SkeletonRectangle className='my-1.5 w-full' />