From 324c0d7b4c66a3add4e37d59c691622bcb84d76c Mon Sep 17 00:00:00 2001
From: twwu <twwu@dify.ai>
Date: Mon, 26 May 2025 14:06:04 +0800
Subject: [PATCH] refactor: improve layout and styling in TestRunPanel and
 FilePreview components

---
 .../documents/create-from-pipeline/index.tsx  |  6 ++--
 .../preview/file-preview.tsx                  | 33 ++++++++++---------
 .../create-from-pipeline/preview/loading.tsx  |  2 +-
 3 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/web/app/components/datasets/documents/create-from-pipeline/index.tsx b/web/app/components/datasets/documents/create-from-pipeline/index.tsx
index 553ad50e9f..e0a584a354 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/index.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/index.tsx
@@ -187,9 +187,9 @@ const TestRunPanel = () => {
 
   return (
     <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
           title={t('datasetPipeline.addDocuments.title')}
           currentStep={currentStep}
@@ -287,7 +287,7 @@ const TestRunPanel = () => {
       {/* Preview */}
       {
         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} />}
             {currentNotionPage && <NotionPagePreview currentPage={currentNotionPage} hidePreview={hideNotionPagePreview} />}
             {currentWebsite && <WebsitePreview payload={currentWebsite} hidePreview={hideWebsitePreview} />}
diff --git a/web/app/components/datasets/documents/create-from-pipeline/preview/file-preview.tsx b/web/app/components/datasets/documents/create-from-pipeline/preview/file-preview.tsx
index ab6b0d8e12..30d3e4f9c1 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/preview/file-preview.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/preview/file-preview.tsx
@@ -27,22 +27,27 @@ const FilePreview = ({
     return arr.slice(0, -1).join()
   }
 
-  const getFileSize = (size: number) => {
-    if (size / 1024 < 10)
-      return `${(size / 1024).toFixed(1)} KB`
-
-    return `${(size / 1024 / 1024).toFixed(1)} MB`
+  const getFileSize = (fileSize: number) => {
+    if (!fileSize)
+      return fileSize
+    const units = ['', 'K', 'M', 'G', 'T', 'P']
+    let index = 0
+    while (fileSize >= 1024 && index < units.length) {
+      fileSize = fileSize / 1024
+      index++
+    }
+    return `${fileSize.toFixed(2)} ${units[index]}B`
   }
 
   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='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='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='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
-              className='size-6 shrink-0'
+              className='size-3.5 shrink-0'
               name={file.name}
               extension={file.extension}
             />
@@ -65,12 +70,10 @@ const FilePreview = ({
           <RiCloseLine className='size-[18px]' />
         </button>
       </div>
-      <div className='px-6 py-5'>
-        {isFetching && <Loading />}
-        {!isFetching && fileData && (
-          <div className='body-md-regular overflow-hidden text-text-secondary'>{fileData.content}</div>
-        )}
-      </div>
+      {isFetching && <Loading />}
+      {!isFetching && fileData && (
+        <div className='body-md-regular overflow-hidden px-6 py-5 text-text-secondary'>{fileData.content}</div>
+      )}
     </div>
   )
 }
diff --git a/web/app/components/datasets/documents/create-from-pipeline/preview/loading.tsx b/web/app/components/datasets/documents/create-from-pipeline/preview/loading.tsx
index 3fd7723ae3..c15fec6c40 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/preview/loading.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/preview/loading.tsx
@@ -3,7 +3,7 @@ import { SkeletonContainer, SkeletonRectangle } from '@/app/components/base/skel
 
 const Loading = () => {
   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'>
         <SkeletonRectangle className='my-1.5 w-full' />
         <SkeletonRectangle className='my-1.5 w-full' />