mirror of
http://112.124.100.131/huang.ze/ebiz-dify-ai.git
synced 2025-12-10 11:26:52 +08:00
Initial commit
This commit is contained in:
John Wang
109
web/app/components/datasets/create/step-one/index.module.css
Normal file
109
web/app/components/datasets/create/step-one/index.module.css
Normal file
@@ -0,0 +1,109 @@
|
||||
.stepHeader {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 42px 64px 12px;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
line-height: 28px;
|
||||
color: #101828;
|
||||
}
|
||||
|
||||
.form {
|
||||
padding: 12px 64px;
|
||||
}
|
||||
|
||||
.dataSourceTypeList {
|
||||
@apply flex items-center mb-8;
|
||||
}
|
||||
.dataSourceItem {
|
||||
@apply box-border relative shrink-0 flex items-center mr-3 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;
|
||||
font-size: 14px;
|
||||
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;
|
||||
right: 8px;
|
||||
top: -10px;
|
||||
padding: 1px 6px;
|
||||
height: 20px;
|
||||
border: 1px solid #E0EAFF;
|
||||
border-radius: 6px;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
color: #444CE7;
|
||||
}
|
||||
.datasetIcon {
|
||||
@apply flex mr-2 w-8 h-8 rounded-lg bg-center bg-no-repeat;
|
||||
background-color: #F5FAFF;
|
||||
background-image: url(../assets/file.svg);
|
||||
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);
|
||||
}
|
||||
|
||||
.submitButton {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.dividerLine {
|
||||
margin: 32px 0;
|
||||
max-width: 640px;
|
||||
height: 1px;
|
||||
background-color: #eaecf0;
|
||||
}
|
||||
|
||||
.OtherCreationOption {
|
||||
@apply flex items-center cursor-pointer;
|
||||
font-weight: 500;
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
color: #155EEF;
|
||||
}
|
||||
.OtherCreationOption::before {
|
||||
content: '';
|
||||
display: block;
|
||||
margin-right: 4px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: center no-repeat url(../assets/folder-plus.svg);
|
||||
background-size: contain;
|
||||
}
|
||||
80
web/app/components/datasets/create/step-one/index.tsx
Normal file
80
web/app/components/datasets/create/step-one/index.tsx
Normal file
@@ -0,0 +1,80 @@
|
||||
'use client'
|
||||
import React, { useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import type { File } from '@/models/datasets'
|
||||
import FilePreview from '../file-preview'
|
||||
import FileUploader from '../file-uploader'
|
||||
import EmptyDatasetCreationModal from '../empty-dataset-creation-modal'
|
||||
import Button from '@/app/components/base/button'
|
||||
|
||||
import cn from 'classnames'
|
||||
import s from './index.module.css'
|
||||
|
||||
type IStepOneProps = {
|
||||
datasetId?: string,
|
||||
file?: File,
|
||||
updateFile: (file?: File) => void,
|
||||
onStepChange: () => void,
|
||||
}
|
||||
|
||||
const StepOne = ({
|
||||
datasetId,
|
||||
onStepChange,
|
||||
file,
|
||||
updateFile,
|
||||
}: IStepOneProps) => {
|
||||
const [dataSourceType, setDataSourceType] = useState('FILE')
|
||||
const [showModal, setShowModal] = useState(false)
|
||||
const { t } = useTranslation()
|
||||
|
||||
const modalShowHandle = () => setShowModal(true)
|
||||
|
||||
const modalCloseHandle = () => setShowModal(false)
|
||||
|
||||
return (
|
||||
<div className='flex w-full h-full'>
|
||||
<div className='grow overflow-y-auto relative'>
|
||||
<div className={s.stepHeader}>{t('datasetCreation.steps.one')}</div>
|
||||
<div className={s.form}>
|
||||
<div className={s.dataSourceTypeList}>
|
||||
<div
|
||||
className={cn(s.dataSourceItem, dataSourceType === 'FILE' && s.active)}
|
||||
onClick={() => setDataSourceType('FILE')}
|
||||
>
|
||||
<span className={cn(s.datasetIcon)}/>
|
||||
{t('datasetCreation.stepOne.dataSourceType.file')}
|
||||
</div>
|
||||
<div
|
||||
className={cn(s.dataSourceItem, s.disabled, dataSourceType === 'notion' && s.active)}
|
||||
// onClick={() => setDataSourceType('notion')}
|
||||
>
|
||||
<span className={s.comingTag}>Coming soon</span>
|
||||
<span className={cn(s.datasetIcon, s.notion)}/>
|
||||
{t('datasetCreation.stepOne.dataSourceType.notion')}
|
||||
</div>
|
||||
<div
|
||||
className={cn(s.dataSourceItem, s.disabled, dataSourceType === 'web' && s.active)}
|
||||
// onClick={() => setDataSourceType('web')}
|
||||
>
|
||||
<span className={s.comingTag}>Coming soon</span>
|
||||
<span className={cn(s.datasetIcon, s.web)}/>
|
||||
{t('datasetCreation.stepOne.dataSourceType.web')}
|
||||
</div>
|
||||
</div>
|
||||
<FileUploader onFileUpdate={updateFile} file={file} />
|
||||
<Button disabled={!file} className={s.submitButton} type='primary' onClick={onStepChange}>{t('datasetCreation.stepOne.button')}</Button>
|
||||
{!datasetId && (
|
||||
<>
|
||||
<div className={s.dividerLine}/>
|
||||
<div onClick={modalShowHandle} className={s.OtherCreationOption}>{t('datasetCreation.stepOne.emptyDatasetCreation')}</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<EmptyDatasetCreationModal show={showModal} onHide={modalCloseHandle}/>
|
||||
</div>
|
||||
{file && <FilePreview file={file} />}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default StepOne
|
||||
Reference in New Issue
Block a user