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

fix: update parent child style

Browse Source
pull/12097/head
NFish 1 year ago
parent 330cfaf6d6
commit 4e6db1f4fb
6 changed files with 69 additions and 57 deletions
Show Stats Download Patch File Download Diff File

13
web/app/components/base/param-item/index.tsx
Unescape Escape View File

@ -24,30 +24,29 @@ type Props = {
const ParamItem: FC<Props> = ({ className, id, name, noTooltip, tip, step = 0.1, min = 0, max, value, enable, onChange, hasSwitch, onSwitchChange }) => { const ParamItem: FC<Props> = ({ className, id, name, noTooltip, tip, step = 0.1, min = 0, max, value, enable, onChange, hasSwitch, onSwitchChange }) => {
return ( return (
<div className={className}> <div className={className}>
<div className="flex items-center h-8 justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center"> <div className="flex items-center">
{hasSwitch && ( {hasSwitch && (
<Switch <Switch
size='md' size='md'
className='mr-2'
defaultValue={enable} defaultValue={enable}
onChange={async (val) => { onChange={async (val) => {
onSwitchChange?.(id, val) onSwitchChange?.(id, val)
}} }}
/> />
)} )}
<span className="mx-1 text-text-secondary text-[13px] leading-[18px] font-medium">{name}</span> <span className="mr-1 text-text-secondary system-sm-semibold">{name}</span>
{!noTooltip && ( {!noTooltip && (
<Tooltip <Tooltip
triggerClassName='w-4 h-4 shrink-0' triggerClassName='w-4 h-4 shrink-0'
popupContent={<div className="w-[200px]">{tip}</div>} popupContent={<div className="w-[200px]">{tip}</div>}
/> />
)} )}
</div> </div>
<div className="flex items-center"></div>
</div> </div>
<div className="mt-2 flex items-center"> <div className="mt-1 flex items-center">
<div className="mr-4 flex shrink-0 items-center"> <div className="mr-3 flex shrink-0 items-center">
<InputNumber <InputNumber
disabled={!enable} disabled={!enable}
type="number" type="number"
@ -62,7 +61,7 @@ const ParamItem: FC<Props> = ({ className, id, name, noTooltip, tip, step = 0.1,
className='w-[72px]' className='w-[72px]'
/> />
</div> </div>
<div className="flex items-center h-7 grow"> <div className="flex items-center grow">
<Slider <Slider
className='w-full' className='w-full'
disabled={!enable} disabled={!enable}

19
web/app/components/base/radio-card/index.tsx
Unescape Escape View File

@ -31,21 +31,21 @@ const RadioCard: FC<Props> = ({
return ( return (
<div <div
className={cn( className={cn(
'border border-components-option-card-option-border bg-components-option-card-option-bg rounded-xl hover:shadow-xs cursor-pointer', 'relative p-3 border-[0.5px] border-components-option-card-option-border bg-components-option-card-option-bg rounded-xl cursor-pointer',
isChosen && 'bg-components-option-card-option-selected-bg border-components-panel-border shadow-xs', isChosen && 'border-[1.5px] bg-components-option-card-option-selected-bg',
className, className,
)} )}
> >
<div className='flex py-3 pl-3 pr-4' onClick={onChosen}> <div className='flex gap-x-2' onClick={onChosen}>
<div className={cn(iconBgClassName, 'mr-3 shrink-0 flex w-8 justify-center h-8 items-center rounded-lg')}> <div className={cn(iconBgClassName, 'shrink-0 flex size-8 justify-center items-center rounded-lg shadow-md')}>
{icon} {icon}
</div> </div>
<div className='grow'> <div className='grow'>
<div className='leading-5 text-sm font-medium text-text-secondary'>{title}</div> <div className='system-sm-semibold text-text-secondary mb-1'>{title}</div>
<div className='leading-[18px] text-xs font-normal text-text-tertiary'>{description}</div> <div className='system-sm-regular text-text-tertiary'>{description}</div>
</div> </div>
{!noRadio && ( {!noRadio && (
<div className='shrink-0 flex items-center h-8'> <div className='absolute top-3 right-3'>
<div className={cn( <div className={cn(
'w-4 h-4 border border-components-radio-border bg-components-radio-bg shadow-xs rounded-full', 'w-4 h-4 border border-components-radio-border bg-components-radio-bg shadow-xs rounded-full',
isChosen && 'border-[5px] border-components-radio-border-checked', isChosen && 'border-[5px] border-components-radio-border-checked',
@ -54,9 +54,12 @@ const RadioCard: FC<Props> = ({
)} )}
</div> </div>
{((isChosen && chosenConfig) || noRadio) && ( {((isChosen && chosenConfig) || noRadio) && (
<div className={cn(chosenConfigWrapClassName, 'p-3')}> <div className='flex gap-x-2 mt-2'>
<div className='size-8 shrink-0'></div>
<div className={cn(chosenConfigWrapClassName, 'grow')}>
{chosenConfig} {chosenConfig}
</div> </div>
</div>
)} )}
</div> </div>
) )

2
web/app/components/datasets/common/retrieval-method-config/index.tsx
Unescape Escape View File

@ -104,7 +104,7 @@ const RetrievalMethodConfig: FC<Props> = ({
title={ title={
<div className='flex items-center space-x-1'> <div className='flex items-center space-x-1'>
<div>{t('dataset.retrieval.hybrid_search.title')}</div> <div>{t('dataset.retrieval.hybrid_search.title')}</div>
<Badge text={t('dataset.retrieval.hybrid_search.recommend')!} className='border-text-accent-secondary text-text-accent-secondary ml-2' uppercase /> <Badge text={t('dataset.retrieval.hybrid_search.recommend')!} className='border-text-accent-secondary text-text-accent-secondary ml-1 h-[18px]' uppercase />
</div> </div>
} }
description={t('dataset.retrieval.hybrid_search.description')} isActive={ description={t('dataset.retrieval.hybrid_search.description')} isActive={

6
web/app/components/datasets/common/retrieval-param-config/index.tsx
Unescape Escape View File

@ -120,7 +120,7 @@ const RetrievalParamConfig: FC<Props> = ({
<div> <div>
{!isEconomical && !isHybridSearch && ( {!isEconomical && !isHybridSearch && (
<div> <div>
<div className='flex h-8 items-center text-[13px] font-medium text-gray-900 space-x-2'> <div className='flex items-center space-x-2 mb-2'>
{canToggleRerankModalEnable && ( {canToggleRerankModalEnable && (
<div <div
className='flex items-center' className='flex items-center'
@ -140,7 +140,7 @@ const RetrievalParamConfig: FC<Props> = ({
</div> </div>
)} )}
<div className='flex items-center'> <div className='flex items-center'>
<span className='mr-0.5 text-text-secondary'>{t('common.modelProvider.rerankModel.key')}</span> <span className='mr-0.5 system-sm-semibold text-text-secondary'>{t('common.modelProvider.rerankModel.key')}</span>
<Tooltip <Tooltip
popupContent={ popupContent={
<div className="w-[200px]">{t('common.modelProvider.rerankModel.tip')}</div> <div className="w-[200px]">{t('common.modelProvider.rerankModel.tip')}</div>
@ -167,7 +167,7 @@ const RetrievalParamConfig: FC<Props> = ({
)} )}
{ {
!isHybridSearch && ( !isHybridSearch && (
<div className={cn(!isEconomical && 'mt-4', 'flex space-between space-x-6')}> <div className={cn(!isEconomical && 'mt-4', 'flex space-between space-x-4')}>
<TopKItem <TopKItem
className='grow' className='grow'
value={value.top_k} value={value.top_k}

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

@ -585,7 +585,7 @@ const StepTwo = ({
&& <OptionCard && <OptionCard
className='bg-background-section mb-2' 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 width={20} height={20} src={SettingCog} alt={t('datasetCreation.stepTwo.general')} />}
activeHeaderClassName='bg-dataset-option-card-blue-gradient' activeHeaderClassName='bg-dataset-option-card-blue-gradient'
description={t('datasetCreation.stepTwo.generalTip')} description={t('datasetCreation.stepTwo.generalTip')}
isActive={ isActive={
@ -599,7 +599,7 @@ const StepTwo = ({
actions={ actions={
<> <>
<Button variant={'secondary-accent'} onClick={() => updatePreview()}> <Button variant={'secondary-accent'} onClick={() => updatePreview()}>
<RiSearchEyeLine className='h-4 w-4 mr-1.5' /> <RiSearchEyeLine className='h-4 w-4 mr-0.5' />
{t('datasetCreation.stepTwo.previewChunk')} {t('datasetCreation.stepTwo.previewChunk')}
</Button> </Button>
<Button variant={'ghost'} onClick={resetRules}> <Button variant={'ghost'} onClick={resetRules}>
@ -690,7 +690,7 @@ const StepTwo = ({
(!datasetId || currentDataset!.doc_form === ChuckingMode.parentChild) (!datasetId || currentDataset!.doc_form === ChuckingMode.parentChild)
&& <OptionCard && <OptionCard
title={t('datasetCreation.stepTwo.parentChild')} title={t('datasetCreation.stepTwo.parentChild')}
icon={<Image src={FamilyMod} alt={t('datasetCreation.stepTwo.parentChild')} />} icon={<Image width={20} height={20} src={FamilyMod} alt={t('datasetCreation.stepTwo.parentChild')} />}
effectImg={OrangeEffect.src} effectImg={OrangeEffect.src}
activeHeaderClassName='bg-dataset-option-card-orange-gradient' activeHeaderClassName='bg-dataset-option-card-orange-gradient'
description={t('datasetCreation.stepTwo.parentChildTip')} description={t('datasetCreation.stepTwo.parentChildTip')}
@ -701,7 +701,7 @@ const StepTwo = ({
actions={ actions={
<> <>
<Button variant={'secondary-accent'} onClick={() => updatePreview()}> <Button variant={'secondary-accent'} onClick={() => updatePreview()}>
<RiSearchEyeLine className='h-4 w-4 mr-1.5' /> <RiSearchEyeLine className='h-4 w-4 mr-0.5' />
{t('datasetCreation.stepTwo.previewChunk')} {t('datasetCreation.stepTwo.previewChunk')}
</Button> </Button>
<Button variant={'ghost'} onClick={resetRules}> <Button variant={'ghost'} onClick={resetRules}>
@ -711,12 +711,15 @@ const StepTwo = ({
} }
noHighlight={Boolean(datasetId)} noHighlight={Boolean(datasetId)}
> >
<div className='space-y-4'> <div className='flex flex-col gap-4'>
<div className='space-y-2'> <div>
<TextLabel> <div className='flex items-center gap-x-2'>
{t('datasetCreation.stepTwo.parentChunkForContext')} <div className='inline-flex shrink-0'>
</TextLabel> <TextLabel>{t('datasetCreation.stepTwo.parentChunkForContext')}</TextLabel>
<RadioCard </div>
<Divider className='grow' bgStyle='gradient'/>
</div>
<RadioCard className='mt-1'
icon={<Image src={Note} alt='' />} icon={<Image src={Note} alt='' />}
title={t('datasetCreation.stepTwo.paragraph')} title={t('datasetCreation.stepTwo.paragraph')}
description={t('datasetCreation.stepTwo.paragraphTip')} description={t('datasetCreation.stepTwo.paragraphTip')}
@ -728,7 +731,7 @@ const StepTwo = ({
}, },
)} )}
chosenConfig={ chosenConfig={
<div className='flex gap-2'> <div className='flex gap-3'>
<DelimiterInput <DelimiterInput
value={parentChildConfig.parent.delimiter} value={parentChildConfig.parent.delimiter}
onChange={e => setParentChildConfig({ onChange={e => setParentChildConfig({
@ -752,7 +755,7 @@ const StepTwo = ({
</div> </div>
} }
/> />
<RadioCard <RadioCard className='mt-2'
icon={<Image src={FileList} alt='' />} icon={<Image src={FileList} alt='' />}
title={t('datasetCreation.stepTwo.fullDoc')} title={t('datasetCreation.stepTwo.fullDoc')}
description={t('datasetCreation.stepTwo.fullDocTip')} description={t('datasetCreation.stepTwo.fullDocTip')}
@ -766,11 +769,14 @@ const StepTwo = ({
/> />
</div> </div>
<div className='space-y-4'> <div>
<TextLabel> <div className='flex items-center gap-x-2'>
{t('datasetCreation.stepTwo.childChunkForRetrieval')} <div className='inline-flex shrink-0'>
</TextLabel> <TextLabel>{t('datasetCreation.stepTwo.childChunkForRetrieval')}</TextLabel>
<div className='flex gap-3 mt-2'> </div>
<Divider className='grow' bgStyle='gradient'/>
</div>
<div className='flex gap-3 mt-1'>
<DelimiterInput <DelimiterInput
value={parentChildConfig.child.delimiter} value={parentChildConfig.child.delimiter}
onChange={e => setParentChildConfig({ onChange={e => setParentChildConfig({
@ -792,12 +798,15 @@ const StepTwo = ({
})} })}
/> />
</div> </div>
</div>
<div className='space-y-2'> <div>
<TextLabel> <div className='flex items-center gap-x-2'>
{t('datasetCreation.stepTwo.rules')} <div className='inline-flex shrink-0'>
</TextLabel> <TextLabel>{t('datasetCreation.stepTwo.rules')}</TextLabel>
<div className='space-y-2 mt-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)
@ -805,13 +814,12 @@ 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> </div>
</div> </div>
</div>
</OptionCard>} </OptionCard>}
<Divider className='my-5' /> <Divider className='my-5' />
<div className={'system-md-semibold mb-1'}>{t('datasetCreation.stepTwo.indexMode')}</div> <div className={'system-md-semibold mb-1'}>{t('datasetCreation.stepTwo.indexMode')}</div>
@ -821,7 +829,7 @@ const StepTwo = ({
title={<p className='flex items-center'> title={<p className='flex items-center'>
{t('datasetCreation.stepTwo.qualified')} {t('datasetCreation.stepTwo.qualified')}
{!hasSetIndexType {!hasSetIndexType
&& <Badge className={cn('ml-1', (!hasSetIndexType && indexType === IndexingType.QUALIFIED) ? 'border-text-accent-secondary text-text-accent-secondary' : '')} uppercase>{t('datasetCreation.stepTwo.recommend')}</Badge>} && <Badge className={cn('ml-1 h-[18px]', (!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>

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

@ -25,14 +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='p-1'>
<div className='size-8 rounded-lg border p-1.5 shadow-md 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>
</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-0.5 p-3'> <div className='flex-1 space-y-0.5 py-3'>
<div className='text-text-secondary system-md-semibold'>{title}</div> <div className='text-text-secondary system-md-semibold'>{title}</div>
<div className='text-text-tertiary system-xs-regular'>{description}</div> <div className='text-text-tertiary system-xs-regular'>{description}</div>
</div> </div>

Write Preview
Loading…
Cancel
Save