AI/dify
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git synced 2025-05-25 07:38:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: improve layout structure in StepOne component for better re… (#16209)

Browse Source
This commit is contained in:
GuanMu 2025-03-19 20:44:43 +08:00 committed by GitHub
parent a8879057c0
commit 106169ed7f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 178 additions and 176 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

354
web/app/components/datasets/create/step-one/index.tsx
View File

@ -132,189 +132,191 @@ const StepOne = ({
}, [files, isShowVectorSpaceFull]) }, [files, isShowVectorSpaceFull])
return ( return (
<div className='flex w-full h-full'> <div className='w-full h-full overflow-x-auto'>
<div className='w-1/2 h-full overflow-y-auto relative'> <div className='flex w-full h-full min-w-[1440px]'>
<div className='flex justify-end'> <div className='w-1/2 h-full overflow-y-auto relative'>
<div className={classNames(s.form)}> <div className='flex justify-end'>
{ <div className={classNames(s.form)}>
shouldShowDataSourceTypeList && ( {
<div className={classNames(s.stepHeader, 'text-text-secondary system-md-semibold')}> shouldShowDataSourceTypeList && (
{t('datasetCreation.steps.one')} <div className={classNames(s.stepHeader, 'text-text-secondary system-md-semibold')}>
</div> {t('datasetCreation.steps.one')}
) </div>
} )
{ }
shouldShowDataSourceTypeList && ( {
<div className='grid grid-cols-3 mb-8 gap-4'> shouldShowDataSourceTypeList && (
<div <div className='grid grid-cols-3 mb-8 gap-4'>
className={cn( <div
s.dataSourceItem, className={cn(
'system-sm-medium', s.dataSourceItem,
dataSourceType === DataSourceType.FILE && s.active, 'system-sm-medium',
dataSourceTypeDisable && dataSourceType !== DataSourceType.FILE && s.disabled, dataSourceType === DataSourceType.FILE && s.active,
)} dataSourceTypeDisable && dataSourceType !== DataSourceType.FILE && s.disabled,
onClick={() => { )}
if (dataSourceTypeDisable) onClick={() => {
return if (dataSourceTypeDisable)
changeType(DataSourceType.FILE) return
hideFilePreview() changeType(DataSourceType.FILE)
hideNotionPagePreview() hideFilePreview()
}} hideNotionPagePreview()
> }}
<span className={cn(s.datasetIcon)} />
<span
title={t('datasetCreation.stepOne.dataSourceType.file')}
className='truncate'
> >
{t('datasetCreation.stepOne.dataSourceType.file')} <span className={cn(s.datasetIcon)} />
</span> <span
</div> title={t('datasetCreation.stepOne.dataSourceType.file')}
<div className='truncate'
className={cn( >
s.dataSourceItem, {t('datasetCreation.stepOne.dataSourceType.file')}
'system-sm-medium', </span>
dataSourceType === DataSourceType.NOTION && s.active,
dataSourceTypeDisable && dataSourceType !== DataSourceType.NOTION && s.disabled,
)}
onClick={() => {
if (dataSourceTypeDisable)
return
changeType(DataSourceType.NOTION)
hideFilePreview()
hideNotionPagePreview()
}}
>
<span className={cn(s.datasetIcon, s.notion)} />
<span
title={t('datasetCreation.stepOne.dataSourceType.notion')}
className='truncate'
>
{t('datasetCreation.stepOne.dataSourceType.notion')}
</span>
</div>
<div
className={cn(
s.dataSourceItem,
'system-sm-medium',
dataSourceType === DataSourceType.WEB && s.active,
dataSourceTypeDisable && dataSourceType !== DataSourceType.WEB && s.disabled,
)}
onClick={() => changeType(DataSourceType.WEB)}
>
<span className={cn(s.datasetIcon, s.web)} />
<span
title={t('datasetCreation.stepOne.dataSourceType.web')}
className='truncate'
>
{t('datasetCreation.stepOne.dataSourceType.web')}
</span>
</div>
</div>
)
}
{dataSourceType === DataSourceType.FILE && (
<>
<FileUploader
fileList={files}
titleClassName={!shouldShowDataSourceTypeList ? 'mt-[30px] !mb-[44px] !text-lg' : undefined}
prepareFileList={updateFileList}
onFileListUpdate={updateFileList}
onFileUpdate={updateFile}
onPreview={updateCurrentFile}
notSupportBatchUpload={notSupportBatchUpload}
/>
{isShowVectorSpaceFull && (
<div className='max-w-[640px] mb-4'>
<VectorSpaceFull />
</div>
)}
<div className="flex justify-end gap-2 max-w-[640px]">
{/* <Button>{t('datasetCreation.stepOne.cancel')}</Button> */}
<Button disabled={nextDisabled} variant='primary' onClick={onStepChange}>
<span className="flex gap-0.5 px-[10px]">
<span className="px-0.5">{t('datasetCreation.stepOne.button')}</span>
<RiArrowRightLine className="size-4" />
</span>
</Button>
</div>
</>
)}
{dataSourceType === DataSourceType.NOTION && (
<>
{!hasConnection && <NotionConnector onSetting={onSetting} />}
{hasConnection && (
<>
<div className='mb-8 w-[640px]'>
<NotionPageSelector
value={notionPages.map(page => page.page_id)}
onSelect={updateNotionPages}
onPreview={updateCurrentPage}
/>
</div> </div>
{isShowVectorSpaceFull && ( <div
<div className='max-w-[640px] mb-4'> className={cn(
<VectorSpaceFull /> s.dataSourceItem,
</div> 'system-sm-medium',
)} dataSourceType === DataSourceType.NOTION && s.active,
<div className="flex justify-end gap-2 max-w-[640px]"> dataSourceTypeDisable && dataSourceType !== DataSourceType.NOTION && s.disabled,
{/* <Button>{t('datasetCreation.stepOne.cancel')}</Button> */} )}
<Button disabled={isShowVectorSpaceFull || !notionPages.length} variant='primary' onClick={onStepChange}> onClick={() => {
<span className="flex gap-0.5 px-[10px]"> if (dataSourceTypeDisable)
<span className="px-0.5">{t('datasetCreation.stepOne.button')}</span> return
<RiArrowRightLine className="size-4" /> changeType(DataSourceType.NOTION)
</span> hideFilePreview()
</Button> hideNotionPagePreview()
}}
>
<span className={cn(s.datasetIcon, s.notion)} />
<span
title={t('datasetCreation.stepOne.dataSourceType.notion')}
className='truncate'
>
{t('datasetCreation.stepOne.dataSourceType.notion')}
</span>
</div> </div>
</> <div
)} className={cn(
</> s.dataSourceItem,
)} 'system-sm-medium',
{dataSourceType === DataSourceType.WEB && ( dataSourceType === DataSourceType.WEB && s.active,
<> dataSourceTypeDisable && dataSourceType !== DataSourceType.WEB && s.disabled,
<div className={cn('mb-8 w-[640px]', !shouldShowDataSourceTypeList && 'mt-12')}> )}
<Website onClick={() => changeType(DataSourceType.WEB)}
onPreview={setCurrentWebsite} >
checkedCrawlResult={websitePages} <span className={cn(s.datasetIcon, s.web)} />
onCheckedCrawlResultChange={updateWebsitePages} <span
onCrawlProviderChange={onWebsiteCrawlProviderChange} title={t('datasetCreation.stepOne.dataSourceType.web')}
onJobIdChange={onWebsiteCrawlJobIdChange} className='truncate'
crawlOptions={crawlOptions} >
onCrawlOptionsChange={onCrawlOptionsChange} {t('datasetCreation.stepOne.dataSourceType.web')}
</span>
</div>
</div>
)
}
{dataSourceType === DataSourceType.FILE && (
<>
<FileUploader
fileList={files}
titleClassName={!shouldShowDataSourceTypeList ? 'mt-[30px] !mb-[44px] !text-lg' : undefined}
prepareFileList={updateFileList}
onFileListUpdate={updateFileList}
onFileUpdate={updateFile}
onPreview={updateCurrentFile}
notSupportBatchUpload={notSupportBatchUpload}
/> />
</div> {isShowVectorSpaceFull && (
{isShowVectorSpaceFull && ( <div className='max-w-[640px] mb-4'>
<div className='max-w-[640px] mb-4'> <VectorSpaceFull />
<VectorSpaceFull /> </div>
)}
<div className="flex justify-end gap-2 max-w-[640px]">
{/* <Button>{t('datasetCreation.stepOne.cancel')}</Button> */}
<Button disabled={nextDisabled} variant='primary' onClick={onStepChange}>
<span className="flex gap-0.5 px-[10px]">
<span className="px-0.5">{t('datasetCreation.stepOne.button')}</span>
<RiArrowRightLine className="size-4" />
</span>
</Button>
</div> </div>
)} </>
<div className="flex justify-end gap-2 max-w-[640px]"> )}
{/* <Button>{t('datasetCreation.stepOne.cancel')}</Button> */} {dataSourceType === DataSourceType.NOTION && (
<Button disabled={isShowVectorSpaceFull || !websitePages.length} variant='primary' onClick={onStepChange}> <>
<span className="flex gap-0.5 px-[10px]"> {!hasConnection && <NotionConnector onSetting={onSetting} />}
<span className="px-0.5">{t('datasetCreation.stepOne.button')}</span> {hasConnection && (
<RiArrowRightLine className="size-4" /> <>
</span> <div className='mb-8 w-[640px]'>
</Button> <NotionPageSelector
</div> value={notionPages.map(page => page.page_id)}
</> onSelect={updateNotionPages}
)} onPreview={updateCurrentPage}
{!datasetId && ( />
<> </div>
<div className={s.dividerLine} /> {isShowVectorSpaceFull && (
<span className="inline-flex items-center cursor-pointer text-[13px] leading-4 text-text-accent" onClick={modalShowHandle}> <div className='max-w-[640px] mb-4'>
<RiFolder6Line className="size-4 mr-1" /> <VectorSpaceFull />
{t('datasetCreation.stepOne.emptyDatasetCreation')} </div>
</span> )}
</> <div className="flex justify-end gap-2 max-w-[640px]">
)} {/* <Button>{t('datasetCreation.stepOne.cancel')}</Button> */}
<Button disabled={isShowVectorSpaceFull || !notionPages.length} variant='primary' onClick={onStepChange}>
<span className="flex gap-0.5 px-[10px]">
<span className="px-0.5">{t('datasetCreation.stepOne.button')}</span>
<RiArrowRightLine className="size-4" />
</span>
</Button>
</div>
</>
)}
</>
)}
{dataSourceType === DataSourceType.WEB && (
<>
<div className={cn('mb-8 w-[640px]', !shouldShowDataSourceTypeList && 'mt-12')}>
<Website
onPreview={setCurrentWebsite}
checkedCrawlResult={websitePages}
onCheckedCrawlResultChange={updateWebsitePages}
onCrawlProviderChange={onWebsiteCrawlProviderChange}
onJobIdChange={onWebsiteCrawlJobIdChange}
crawlOptions={crawlOptions}
onCrawlOptionsChange={onCrawlOptionsChange}
/>
</div>
{isShowVectorSpaceFull && (
<div className='max-w-[640px] mb-4'>
<VectorSpaceFull />
</div>
)}
<div className="flex justify-end gap-2 max-w-[640px]">
{/* <Button>{t('datasetCreation.stepOne.cancel')}</Button> */}
<Button disabled={isShowVectorSpaceFull || !websitePages.length} variant='primary' onClick={onStepChange}>
<span className="flex gap-0.5 px-[10px]">
<span className="px-0.5">{t('datasetCreation.stepOne.button')}</span>
<RiArrowRightLine className="size-4" />
</span>
</Button>
</div>
</>
)}
{!datasetId && (
<>
<div className={s.dividerLine} />
<span className="inline-flex items-center cursor-pointer text-[13px] leading-4 text-text-accent" onClick={modalShowHandle}>
<RiFolder6Line className="size-4 mr-1" />
{t('datasetCreation.stepOne.emptyDatasetCreation')}
</span>
</>
)}
</div>
<EmptyDatasetCreationModal show={showModal} onHide={modalCloseHandle} />
</div> </div>
<EmptyDatasetCreationModal show={showModal} onHide={modalCloseHandle} />
</div> </div>
</div> <div className='w-1/2 h-full overflow-y-auto'>
<div className='w-1/2 h-full overflow-y-auto'> {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} />} </div>
</div> </div>
</div> </div>
) )