jandres/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-01-06 06:26:00 +00:00
Code Issues Actions 8 Packages Projects Releases Wiki Activity

fix: update datasource Step1 style

Browse Source
This commit is contained in:
NFish
2024-12-16 17:54:48 +08:00
parent 8f56c6a7fa
commit a01a28997e
8 changed files with 185 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/app/components/datasets/create/file-preview/index.module.css
View File

@@ -1,6 +1,6 @@
.filePreview {
@apply flex flex-col border-l border-gray-200 shrink-0;
width: 528px;
width: 50%;
background-color: #fcfcfd;
}

17
web/app/components/datasets/create/step-one/index.module.css
View File

@@ -2,7 +2,7 @@
position: sticky;
top: 0;
left: 0;
padding: 42px 64px 12px;
padding: 42px 64px 12px 0;
font-weight: 600;
font-size: 18px;
line-height: 28px;
@@ -14,7 +14,7 @@
}
.dataSourceItem {
@apply box-border relative shrink-0 flex items-center mr-3 p-3 h-14 bg-white rounded-xl cursor-pointer;
@apply box-border relative grow shrink-0 flex items-center p-3 h-14 bg-white rounded-xl cursor-pointer;
border: 0.5px solid #EAECF0;
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
font-weight: 500;
@@ -22,27 +22,32 @@
line-height: 20px;
color: #101828;
}
.dataSourceItem:hover {
background-color: #f5f8ff;
border: 0.5px solid #B2CCFF;
box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
}
.dataSourceItem.active {
background-color: #f5f8ff;
border: 1.5px solid #528BFF;
box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06);
}
.dataSourceItem.disabled {
background-color: #f9fafb;
border: 0.5px solid #EAECF0;
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
cursor: default;
}
.dataSourceItem.disabled:hover {
background-color: #f9fafb;
border: 0.5px solid #EAECF0;
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
}
.comingTag {
@apply flex justify-center items-center bg-white;
position: absolute;
@@ -57,6 +62,7 @@
line-height: 18px;
color: #444CE7;
}
.datasetIcon {
@apply flex mr-2 w-8 h-8 rounded-lg bg-center bg-no-repeat;
background-color: #F5FAFF;
@@ -64,15 +70,18 @@
background-size: 16px;
border: 0.5px solid #D1E9FF;
}
.dataSourceItem:active .datasetIcon,
.dataSourceItem:hover .datasetIcon {
background-color: #F5F8FF;
border: 0.5px solid #E0EAFF;
}
.datasetIcon.notion {
background-image: url(../assets/notion.svg);
background-size: 20px;
}
.datasetIcon.web {
background-image: url(../assets/web.svg);
}
@@ -119,6 +128,7 @@
line-height: 24px;
color: #374151;
}
.notionConnectionTip .title::after {
content: '';
position: absolute;
@@ -129,6 +139,7 @@
background: center no-repeat url(../assets/Icon-3-dots.svg);
background-size: contain;
}
.notionConnectionTip .tip {
margin-bottom: 20px;
font-style: normal;
@@ -136,4 +147,4 @@
font-size: 13px;
line-height: 18px;
color: #6B7280;
}
}

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

@@ -127,161 +127,163 @@ const StepOne = ({
return (
<div className='flex w-full h-full'>
<div className='grow overflow-y-auto relative'>
{
shouldShowDataSourceTypeList && (
<div className={classNames(s.stepHeader, 'text-text-secondary')}>{t('datasetCreation.steps.one')}</div>
)
}
<div className={classNames(s.form)}>
{
shouldShowDataSourceTypeList && (
<div className='flex items-center mb-8 flex-wrap gap-y-4'>
<div
className={cn(
s.dataSourceItem,
dataSourceType === DataSourceType.FILE && s.active,
dataSourceTypeDisable && dataSourceType !== DataSourceType.FILE && s.disabled,
)}
onClick={() => {
if (dataSourceTypeDisable)
return
changeType(DataSourceType.FILE)
hideFilePreview()
hideNotionPagePreview()
}}
>
<span className={cn(s.datasetIcon)} />
{t('datasetCreation.stepOne.dataSourceType.file')}
</div>
<div
className={cn(
s.dataSourceItem,
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)} />
{t('datasetCreation.stepOne.dataSourceType.notion')}
</div>
<div
className={cn(
s.dataSourceItem,
dataSourceType === DataSourceType.WEB && s.active,
dataSourceTypeDisable && dataSourceType !== DataSourceType.WEB && s.disabled,
)}
onClick={() => changeType(DataSourceType.WEB)}
>
<span className={cn(s.datasetIcon, s.web)} />
{t('datasetCreation.stepOne.dataSourceType.web')}
</div>
</div>
)
}
{dataSourceType === DataSourceType.FILE && (
<>
<FileUploader
fileList={files}
titleClassName={!shouldShowDataSourceTypeList ? 'mt-[30px] !mb-[44px] !text-lg !font-semibold !text-gray-900' : 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 className='w-1/2 overflow-y-auto relative'>
<div className='flex justify-end'>
<div className={classNames(s.form)}>
{
shouldShowDataSourceTypeList && (
<div className={classNames(s.stepHeader, 'text-text-secondary')}>{t('datasetCreation.steps.one')}</div>
)
}
{
shouldShowDataSourceTypeList && (
<div className='flex items-center mb-8 flex-wrap gap-4'>
<div
className={cn(
s.dataSourceItem,
dataSourceType === DataSourceType.FILE && s.active,
dataSourceTypeDisable && dataSourceType !== DataSourceType.FILE && s.disabled,
)}
onClick={() => {
if (dataSourceTypeDisable)
return
changeType(DataSourceType.FILE)
hideFilePreview()
hideNotionPagePreview()
}}
>
<span className={cn(s.datasetIcon)} />
{t('datasetCreation.stepOne.dataSourceType.file')}
</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 || !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
className={cn(
s.dataSourceItem,
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)} />
{t('datasetCreation.stepOne.dataSourceType.notion')}
</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
className={cn(
s.dataSourceItem,
dataSourceType === DataSourceType.WEB && s.active,
dataSourceTypeDisable && dataSourceType !== DataSourceType.WEB && s.disabled,
)}
onClick={() => changeType(DataSourceType.WEB)}
>
<span className={cn(s.datasetIcon, s.web)} />
{t('datasetCreation.stepOne.dataSourceType.web')}
</div>
</div>
)
}
{dataSourceType === DataSourceType.FILE && (
<>
<FileUploader
fileList={files}
titleClassName={!shouldShowDataSourceTypeList ? 'mt-[30px] !mb-[44px] !text-lg !font-semibold !text-gray-900' : undefined}
prepareFileList={updateFileList}
onFileListUpdate={updateFileList}
onFileUpdate={updateFile}
onPreview={updateCurrentFile}
notSupportBatchUpload={notSupportBatchUpload}
/>
</div>
{isShowVectorSpaceFull && (
<div className='max-w-[640px] mb-4'>
<VectorSpaceFull />
{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>
)}
<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>
</>
)}
</>
)}
{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>
{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 || !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>
<EmptyDatasetCreationModal show={showModal} onHide={modalCloseHandle} />
</div>
{currentFile && <FilePreview file={currentFile} hidePreview={hideFilePreview} />}
{currentNotionPage && <NotionPagePreview currentPage={currentNotionPage} hidePreview={hideNotionPagePreview} />}

2
web/app/components/datasets/create/stepper/index.tsx
View File

@@ -19,7 +19,7 @@ export const Stepper: FC<StepperProps> = (props) => {
activeIndex={activeIndex}
index={index}
/>
{!isLast && <div className="w-4 h-px bg-text-quaternary" />}
{!isLast && <div className='w-4 h-px bg-divider-deep' />}
</Fragment>
)
})}

13
web/app/components/datasets/create/stepper/step.tsx
View File

@@ -21,27 +21,26 @@ export const StepperStep: FC<StepperStepProps> = (props) => {
isActive
? 'bg-state-accent-solid'
: !isDisabled
? 'border border-text-tertiary'
? 'border border-text-quaternary'
: 'border border-divider-deep',
)}>
<div className={classNames(
'text-center text-[10px] font-semibold uppercase leading-3',
'text-center system-2xs-semibold-uppercase',
isActive
? 'text-text-primary-on-surface'
: !isDisabled
? 'text-text-tertiary'
: 'text-text-tertiary opacity-30',
: 'text-text-quaternary',
)}>
{label}
</div>
</div>
<div className={classNames(
' text-xs font-medium uppercase leading-none',
<div className={classNames('system-xs-medium-uppercase',
isActive
? 'text-text-accent'
? 'text-text-accent system-xs-semibold-uppercase'
: !isDisabled
? 'text-text-tertiary'
: 'text-text-tertiary opacity-30',
: 'text-text-quaternary',
)}>{name}</div>
</div>
}

4
web/app/components/datasets/create/top-bar/index.tsx
View File

@@ -18,10 +18,10 @@ const STEP_T_MAP: Record<number, string> = {
export const Topbar: FC<TopbarProps> = (props) => {
const { className, ...rest } = props
const { t } = useTranslation()
return <div className={classNames('flex items-center justify-between relative border-b border-b-divider-subtle', className)}>
return <div className={classNames('flex h-[52px] items-center justify-between relative border-b border-b-divider-subtle', className)}>
<Link href={'/datasets'} className="h-12 pl-2 pr-6 py-2 justify-start items-center gap-1 inline-flex">
<RiArrowLeftLine className='size-4 mr-2 text-text-primary' />
<p className="text-text-primary text-[13px] font-semibold uppercase leading-none">
<p className="text-text-primary system-sm-semibold-uppercase">
{t('datasetCreation.steps.header.creation')}
</p>
</Link>

2
web/i18n/en-US/app.ts
View File

@@ -98,7 +98,7 @@ const translation = {
removeOriginal: 'Delete the original app',
switchStart: 'Start switch',
typeSelector: {
all: 'ALL Types',
all: 'All Types',
chatbot: 'Chatbot',
agent: 'Agent',
workflow: 'Workflow',

11
web/i18n/en-US/dataset-creation.ts
View File

@@ -4,9 +4,9 @@ const translation = {
creation: 'Create Knowledge',
update: 'Add data',
},
one: 'Choose data source',
two: 'Text Preprocessing and Cleaning',
three: 'Execute and finish',
one: 'Data Source',
two: 'Document Processing',
three: 'Execute & Finish',
},
error: {
unavailable: 'This Knowledge is not available',
@@ -190,6 +190,11 @@ const translation = {
modelButtonConfirm: 'Confirm',
modelButtonCancel: 'Cancel',
},
otherDataSource: {
title: 'Connect to other data sources?',
description: 'Currently, Dify\'s knowledge base only has limited data sources. Contributing a data source to the Dify knowledge base is a fantastic way to help enhance the platform\'s flexibility and power for all users. Our contribution guide makes it easy to get started. Please click on the link below to learn more.',
learnMore: 'Learn more',
},
}
export default translation