ngskcloud
/
gcgj-dify-1.7.0
17
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: update datasource Step1 style

Browse Source
pull/12097/head
NFish 1 year ago
parent 8f56c6a7fa
commit a01a28997e
8 changed files with 184 additions and 167 deletions
Show Stats Download Patch File Download Diff File

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

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

15
web/app/components/datasets/create/step-one/index.module.css
Unescape Escape View File

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

300
web/app/components/datasets/create/step-one/index.tsx
Unescape Escape View File

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

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

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

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

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

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

@ -18,10 +18,10 @@ const STEP_T_MAP: Record<number, string> = {
export const Topbar: FC<TopbarProps> = (props) => { export const Topbar: FC<TopbarProps> = (props) => {
const { className, ...rest } = props const { className, ...rest } = props
const { t } = useTranslation() 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"> <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' /> <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')} {t('datasetCreation.steps.header.creation')}
</p> </p>
</Link> </Link>

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

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

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

@ -4,9 +4,9 @@ const translation = {
creation: 'Create Knowledge', creation: 'Create Knowledge',
update: 'Add data', update: 'Add data',
}, },
one: 'Choose data source', one: 'Data Source',
two: 'Text Preprocessing and Cleaning', two: 'Document Processing',
three: 'Execute and finish', three: 'Execute & Finish',
}, },
error: { error: {
unavailable: 'This Knowledge is not available', unavailable: 'This Knowledge is not available',
@ -190,6 +190,11 @@ const translation = {
modelButtonConfirm: 'Confirm', modelButtonConfirm: 'Confirm',
modelButtonCancel: 'Cancel', 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 export default translation

Write Preview
Loading…
Cancel
Save