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

fix: update dataset document processing style

Browse Source
pull/12097/head
NFish 1 year ago
parent 1613eadbce
commit 827cffc4d9
5 changed files with 387 additions and 401 deletions
Show Stats Download Patch File Download Diff File

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

@ -13,17 +13,6 @@
z-index: 10; z-index: 10;
} }
.form {
@apply px-16 py-8;
}
.form .label {
@apply pb-2 flex items-center text-text-secondary;
font-weight: 500;
font-size: 16px;
line-height: 24px;
}
.segmentationItem { .segmentationItem {
min-height: 68px; min-height: 68px;
} }
@ -249,7 +238,7 @@
} }
.ruleItem { .ruleItem {
@apply flex items-center; @apply flex items-center py-1.5;
} }
.formFooter { .formFooter {

66
web/app/components/datasets/create/step-two/index.tsx
Unescape Escape View File

@ -63,7 +63,7 @@ import CustomDialog from '@/app/components/base/dialog'
import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem' import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
const TextLabel: FC<PropsWithChildren> = (props) => { const TextLabel: FC<PropsWithChildren> = (props) => {
return <label className='text-text-secondary text-xs font-semibold leading-none'>{props.children}</label> return <label className='text-text-secondary system-sm-semibold'>{props.children}</label>
} }
type StepTwoProps = { type StepTwoProps = {
@ -578,14 +578,12 @@ const StepTwo = ({
const isHoveringEconomy = useHover(economyDomRef) const isHoveringEconomy = useHover(economyDomRef)
return ( return (
<div className='flex w-full max-h-full h-full overflow-y-auto'> <div className='flex w-full max-h-full h-full'>
<div className='relative h-full w-full overflow-y-scroll'> <div className={cn('relative h-full w-1/2 py-6 overflow-y-auto', isMobile ? 'px-4' : 'px-12')}>
<div className={cn(s.form, isMobile && '!px-4')}> <div className={'system-md-semibold mb-1'}>{t('datasetCreation.stepTwo.segmentation')}</div>
<div className={s.label}>{t('datasetCreation.stepTwo.segmentation')}</div>
<div className='max-w-[640px]'>
<div className='space-y-4'>
{(!datasetId || [ChuckingMode.text, ChuckingMode.qa].includes(currentDataset!.doc_form)) {(!datasetId || [ChuckingMode.text, ChuckingMode.qa].includes(currentDataset!.doc_form))
&& <OptionCard && <OptionCard
className='bg-background-section mb-2'
title={t('datasetCreation.stepTwo.general')} title={t('datasetCreation.stepTwo.general')}
icon={<Image src={SettingCog} alt={t('datasetCreation.stepTwo.general')} />} icon={<Image src={SettingCog} alt={t('datasetCreation.stepTwo.general')} />}
activeHeaderClassName='bg-dataset-option-card-blue-gradient' activeHeaderClassName='bg-dataset-option-card-blue-gradient'
@ -611,7 +609,7 @@ const StepTwo = ({
} }
noHighlight={Boolean(datasetId)} noHighlight={Boolean(datasetId)}
> >
<div className='space-y-4'> <div className='flex flex-col gap-y-4'>
<div className='flex gap-3'> <div className='flex gap-3'>
<DelimiterInput <DelimiterInput
value={segmentIdentifier} value={segmentIdentifier}
@ -627,10 +625,14 @@ const StepTwo = ({
onChange={setOverlap} onChange={setOverlap}
/> />
</div> </div>
<div className='space-y-2'>
<div className='w-full flex flex-col'> <div className='w-full flex flex-col'>
<div className='flex items-center gap-x-2'>
<div className='inline-flex shrink-0'>
<TextLabel>{t('datasetCreation.stepTwo.rules')}</TextLabel> <TextLabel>{t('datasetCreation.stepTwo.rules')}</TextLabel>
<div className='mt-4 space-y-2'> </div>
<Divider className='grow' bgStyle='gradient'/>
</div>
<div className='mt-1'>
{rules.map(rule => ( {rules.map(rule => (
<div key={rule.id} className={s.ruleItem} onClick={() => { <div key={rule.id} className={s.ruleItem} onClick={() => {
ruleChangeHandle(rule.id) ruleChangeHandle(rule.id)
@ -638,12 +640,9 @@ const StepTwo = ({
<Checkbox <Checkbox
checked={rule.enabled} checked={rule.enabled}
/> />
<label className="ml-2 text-sm font-normal cursor-pointer text-text-secondary">{getRuleName(rule.id)}</label> <label className="ml-2 system-sm-regular cursor-pointer text-text-secondary">{getRuleName(rule.id)}</label>
</div> </div>
))} ))}
</div>
</div>
</div>
{IS_CE_EDITION && <> {IS_CE_EDITION && <>
<div className='flex items-center'> <div className='flex items-center'>
<Checkbox <Checkbox
@ -654,12 +653,11 @@ const StepTwo = ({
else else
handleChangeDocform(ChuckingMode.qa) handleChangeDocform(ChuckingMode.qa)
}} }}
className='mr-2'
/> />
<div className='flex items-center gap-1'> <div className='flex items-center gap-1'>
<TextLabel> <label className="ml-2 system-sm-regular cursor-pointer text-text-secondary">
{t('datasetCreation.stepTwo.QALanguage')} {t('datasetCreation.stepTwo.QALanguage')}
</TextLabel> </label>
<div className='z-50 relative'> <div className='z-50 relative'>
<LanguageSelect <LanguageSelect
currentLanguage={docLanguage || locale} currentLanguage={docLanguage || locale}
@ -675,16 +673,18 @@ const StepTwo = ({
style={{ style={{
background: 'linear-gradient(92deg, rgba(247, 144, 9, 0.1) 0%, rgba(255, 255, 255, 0.00) 100%)', background: 'linear-gradient(92deg, rgba(247, 144, 9, 0.1) 0%, rgba(255, 255, 255, 0.00) 100%)',
}} }}
className='h-10 flex items-center gap-2 rounded-xl border-components-panel-border border shadow-shadow-shadow-3 px-3 text-xs' className='h-10 mt-2 flex items-center gap-2 rounded-xl backdrop-blur-[5px] border-components-panel-border border shadow-xs px-3 text-xs'
> >
<RiAlertFill className='size-4 text-text-warning-secondary' /> <RiAlertFill className='size-4 text-text-warning-secondary' />
<span className='text-sm font-medium text-text-primary'> <span className='system-xs-medium text-text-primary'>
{t('datasetCreation.stepTwo.QATip')} {t('datasetCreation.stepTwo.QATip')}
</span> </span>
</div> </div>
)} )}
</>} </>}
</div> </div>
</div>
</div>
</OptionCard>} </OptionCard>}
{ {
(!datasetId || currentDataset!.doc_form === ChuckingMode.parentChild) (!datasetId || currentDataset!.doc_form === ChuckingMode.parentChild)
@ -813,17 +813,15 @@ const StepTwo = ({
</div> </div>
</div> </div>
</OptionCard>} </OptionCard>}
</div>
</div>
<Divider className='my-5' /> <Divider className='my-5' />
<div className={s.label}>{t('datasetCreation.stepTwo.indexMode')}</div> <div className={'system-md-semibold mb-1'}>{t('datasetCreation.stepTwo.indexMode')}</div>
<div className='max-w-[640px]'> <div className='flex items-center gap-2 flex-wrap sm:flex-nowrap'>
<div className='flex items-center gap-3 flex-wrap sm:flex-nowrap'>
{(!hasSetIndexType || (hasSetIndexType && indexingType === IndexingType.QUALIFIED)) && ( {(!hasSetIndexType || (hasSetIndexType && indexingType === IndexingType.QUALIFIED)) && (
<OptionCard <OptionCard
title={<p className='flex items-center'> title={<p className='flex items-center'>
{t('datasetCreation.stepTwo.qualified')} {t('datasetCreation.stepTwo.qualified')}
{!hasSetIndexType && <Badge className='ml-1' uppercase>{t('datasetCreation.stepTwo.recommend')}</Badge>} {!hasSetIndexType
&& <Badge className={cn('ml-1', (!hasSetIndexType && indexType === IndexingType.QUALIFIED) ? 'border-text-accent-secondary text-text-accent-secondary' : '')} uppercase>{t('datasetCreation.stepTwo.recommend')}</Badge>}
<span className='ml-auto'> <span className='ml-auto'>
{!hasSetIndexType && <span className={cn(s.radio)} />} {!hasSetIndexType && <span className={cn(s.radio)} />}
</span> </span>
@ -905,8 +903,8 @@ const StepTwo = ({
)} )}
{/* Embedding model */} {/* Embedding model */}
{indexType === IndexingType.QUALIFIED && ( {indexType === IndexingType.QUALIFIED && (
<div className='mt-6 my-2'> <div className='mt-5'>
<div className={cn(s.label, datasetId && 'flex justify-between items-center')}>{t('datasetSettings.form.embeddingModel')}</div> <div className={cn('system-md-semibold mb-1', datasetId && 'flex justify-between items-center')}>{t('datasetSettings.form.embeddingModel')}</div>
<ModelSelector <ModelSelector
readonly={!!datasetId} readonly={!!datasetId}
defaultModel={embeddingModel} defaultModel={embeddingModel}
@ -928,21 +926,21 @@ const StepTwo = ({
<div> <div>
{!datasetId {!datasetId
? ( ? (
<div className={s.label}> <div className={'mb-1'}>
<div className='shrink-0 mr-4'>{t('datasetSettings.form.retrievalSetting.title')}</div> <div className='system-md-semibold mb-0.5'>{t('datasetSettings.form.retrievalSetting.title')}</div>
<div className='leading-[18px] text-xs font-normal text-gray-500'> <div className='body-xs-regular text-text-tertiary'>
<a target='_blank' rel='noopener noreferrer' href='https://docs.dify.ai/guides/knowledge-base/create-knowledge-and-upload-documents#id-4-retrieval-settings' className='text-text-accent'>{t('datasetSettings.form.retrievalSetting.learnMore')}</a> <a target='_blank' rel='noopener noreferrer' href='https://docs.dify.ai/guides/knowledge-base/create-knowledge-and-upload-documents#id-4-retrieval-settings' className='text-text-accent'>{t('datasetSettings.form.retrievalSetting.learnMore')}</a>
{t('datasetSettings.form.retrievalSetting.longDescription')} {t('datasetSettings.form.retrievalSetting.longDescription')}
</div> </div>
</div> </div>
) )
: ( : (
<div className={cn(s.label, 'flex justify-between items-center')}> <div className={cn('system-md-semibold mb-0.5', 'flex justify-between items-center')}>
<div>{t('datasetSettings.form.retrievalSetting.title')}</div> <div>{t('datasetSettings.form.retrievalSetting.title')}</div>
</div> </div>
)} )}
<div className='max-w-[640px]'> <div className=''>
{ {
getIndexing_technique() === IndexingType.QUALIFIED getIndexing_technique() === IndexingType.QUALIFIED
? ( ? (
@ -978,8 +976,6 @@ const StepTwo = ({
</div> </div>
)} )}
</div> </div>
</div>
</div>
<FloatRightContainer isMobile={isMobile} isOpen={true} onClose={() => { }} footer={null}> <FloatRightContainer isMobile={isMobile} isOpen={true} onClose={() => { }} footer={null}>
<PreviewContainer <PreviewContainer
header={<PreviewHeader header={<PreviewHeader
@ -1049,7 +1045,7 @@ const StepTwo = ({
}) as string} /> }) as string} />
</div> </div>
</PreviewHeader>} </PreviewHeader>}
className={cn(s.previewWrap, isMobile && s.isMobile, 'relative h-full overflow-y-scroll')} className={cn('flex shrink-0 w-1/2 relative h-full overflow-y-scroll', isMobile && 'w-full max-w-[524px]')}
mainClassName='space-y-6' mainClassName='space-y-6'
> >
{docForm === ChuckingMode.qa && estimate?.qa_preview && ( {docForm === ChuckingMode.qa && estimate?.qa_preview && (

10
web/app/components/datasets/create/step-two/inputs.tsx
Unescape Escape View File

@ -19,8 +19,8 @@ const FormField: FC<PropsWithChildren<{ label: ReactNode }>> = (props) => {
export const DelimiterInput: FC<InputProps> = (props) => { export const DelimiterInput: FC<InputProps> = (props) => {
const { t } = useTranslation() const { t } = useTranslation()
return <FormField label={<div className='flex'> return <FormField label={<div className='flex items-center mb-1'>
{t('datasetCreation.stepTwo.separator')} <span className='system-sm-semibold mr-0.5'>{t('datasetCreation.stepTwo.separator')}</span>
<Tooltip <Tooltip
popupContent={ popupContent={
<div className='max-w-[200px]'> <div className='max-w-[200px]'>
@ -40,7 +40,7 @@ export const DelimiterInput: FC<InputProps> = (props) => {
export const MaxLengthInput: FC<InputNumberProps> = (props) => { export const MaxLengthInput: FC<InputNumberProps> = (props) => {
const { t } = useTranslation() const { t } = useTranslation()
return <FormField label={<div className='h-[14px]'> return <FormField label={<div className='system-sm-semibold mb-1'>
{t('datasetCreation.stepTwo.maxLength')} {t('datasetCreation.stepTwo.maxLength')}
</div>}> </div>}>
<InputNumber <InputNumber
@ -56,8 +56,8 @@ export const MaxLengthInput: FC<InputNumberProps> = (props) => {
export const OverlapInput: FC<InputNumberProps> = (props) => { export const OverlapInput: FC<InputNumberProps> = (props) => {
const { t } = useTranslation() const { t } = useTranslation()
return <FormField label={<div className='flex'> return <FormField label={<div className='flex items-center mb-1'>
{t('datasetCreation.stepTwo.overlap')} <span className='system-sm-semibold'>{t('datasetCreation.stepTwo.overlap')}</span>
<Tooltip <Tooltip
popupContent={ popupContent={
<div className='max-w-[200px]'> <div className='max-w-[200px]'>

17
web/app/components/datasets/create/step-two/option-card.tsx
Unescape Escape View File

@ -25,16 +25,16 @@ export const OptionCardHeader: FC<OptionCardHeaderProps> = (props) => {
)}> )}>
<div className='size-14 flex items-center justify-center relative overflow-hidden'> <div className='size-14 flex items-center justify-center relative overflow-hidden'>
{isActive && effectImg && <Image src={effectImg} className='absolute top-0 left-0 w-full h-full' alt='' width={56} height={56} />} {isActive && effectImg && <Image src={effectImg} className='absolute top-0 left-0 w-full h-full' alt='' width={56} height={56} />}
<div className='size-8 rounded-lg border p-1.5 shadow border-components-panel-border-subtle justify-center flex bg-background-default-dodge'> <div className='size-8 rounded-lg border p-1.5 shadow-md border-components-panel-border-subtle justify-center flex bg-background-default-dodge'>
{icon} {icon}
</div> </div>
</div> </div>
<TriangleArrow <TriangleArrow
className='absolute left-4 -bottom-1.5 text-components-panel-bg' className='absolute left-4 -bottom-1.5 text-components-panel-bg'
/> />
<div className='flex-1 space-y-1 py-3 pr-4'> <div className='flex-1 space-y-0.5 p-3'>
<div className='text-text-secondary text-sm font-semibold leading-tight'>{title}</div> <div className='text-text-secondary system-md-semibold'>{title}</div>
<div className='text-text-tertiary text-xs font-normal leading-none'>{description}</div> <div className='text-text-tertiary system-xs-regular'>{description}</div>
</div> </div>
</div> </div>
} }
@ -57,16 +57,15 @@ export const OptionCard: FC<OptionCardProps> = forwardRef((props, ref) => {
const { icon, className, title, description, isActive, children, actions, activeHeaderClassName, style, effectImg, onSwitched, onClick, noHighlight, disabled, ...rest } = props const { icon, className, title, description, isActive, children, actions, activeHeaderClassName, style, effectImg, onSwitched, onClick, noHighlight, disabled, ...rest } = props
return <div return <div
className={classNames( className={classNames(
'rounded-xl border bg-components-option-card-option-bg', 'rounded-xl bg-components-option-card-option-bg shadow-xs',
(isActive && !noHighlight) (isActive && !noHighlight)
? 'border-components-option-card-option-selected-border' ? 'border-[1.5px] border-components-option-card-option-selected-border'
: 'border-components-option-card-option-border', : 'border border-components-option-card-option-border',
disabled && 'opacity-50', disabled && 'opacity-50',
className, className,
)} )}
style={{ style={{
...style, ...style,
borderWidth: 1.5,
}} }}
onClick={(e) => { onClick={(e) => {
if (!isActive) if (!isActive)
@ -85,7 +84,7 @@ export const OptionCard: FC<OptionCardProps> = forwardRef((props, ref) => {
effectImg={effectImg} effectImg={effectImg}
/> />
{/** Body */} {/** Body */}
{isActive && (children || actions) && <div className='p-3'> {isActive && (children || actions) && <div className='py-3 px-4'>
{children} {children}
{actions && <div className='flex gap-2 mt-4'> {actions && <div className='flex gap-2 mt-4'>
{actions} {actions}

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

@ -20,7 +20,9 @@ export const Topbar: FC<TopbarProps> = (props) => {
const { t } = useTranslation() const { t } = useTranslation()
return <div className={classNames('flex h-[52px] 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' /> <div className='p-2'>
<RiArrowLeftLine className='size-4 text-text-primary' />
</div>
<p className="text-text-primary system-sm-semibold-uppercase"> <p className="text-text-primary system-sm-semibold-uppercase">
{t('datasetCreation.steps.header.creation')} {t('datasetCreation.steps.header.creation')}
</p> </p>

Write Preview
Loading…
Cancel
Save