From 4e6db1f4fbb2a6faa29a04be887effdc150bdfd3 Mon Sep 17 00:00:00 2001
From: NFish <douxc512@gmail.com>
Date: Wed, 18 Dec 2024 11:46:41 +0800
Subject: [PATCH] fix: update parent child style

---
 web/app/components/base/param-item/index.tsx  | 13 ++--
 web/app/components/base/radio-card/index.tsx  | 21 ++---
 .../common/retrieval-method-config/index.tsx  |  2 +-
 .../common/retrieval-param-config/index.tsx   |  6 +-
 .../datasets/create/step-two/index.tsx        | 76 ++++++++++---------
 .../datasets/create/step-two/option-card.tsx  |  8 +-
 6 files changed, 69 insertions(+), 57 deletions(-)

diff --git a/web/app/components/base/param-item/index.tsx b/web/app/components/base/param-item/index.tsx
index 5c63a39d5a..2252e99233 100644
--- a/web/app/components/base/param-item/index.tsx
+++ b/web/app/components/base/param-item/index.tsx
@@ -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 }) => {
   return (
     <div className={className}>
-      <div className="flex items-center h-8 justify-between">
+      <div className="flex items-center justify-between">
         <div className="flex items-center">
           {hasSwitch && (
             <Switch
               size='md'
+              className='mr-2'
               defaultValue={enable}
               onChange={async (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 && (
             <Tooltip
               triggerClassName='w-4 h-4 shrink-0'
               popupContent={<div className="w-[200px]">{tip}</div>}
             />
           )}
-
         </div>
-        <div className="flex items-center"></div>
       </div>
-      <div className="mt-2 flex items-center">
-        <div className="mr-4 flex shrink-0 items-center">
+      <div className="mt-1 flex items-center">
+        <div className="mr-3 flex shrink-0 items-center">
           <InputNumber
             disabled={!enable}
             type="number"
@@ -62,7 +61,7 @@ const ParamItem: FC<Props> = ({ className, id, name, noTooltip, tip, step = 0.1,
             className='w-[72px]'
           />
         </div>
-        <div className="flex items-center h-7 grow">
+        <div className="flex items-center grow">
           <Slider
             className='w-full'
             disabled={!enable}
diff --git a/web/app/components/base/radio-card/index.tsx b/web/app/components/base/radio-card/index.tsx
index 8ca7e8ee02..b21ddce849 100644
--- a/web/app/components/base/radio-card/index.tsx
+++ b/web/app/components/base/radio-card/index.tsx
@@ -31,21 +31,21 @@ const RadioCard: FC<Props> = ({
   return (
     <div
       className={cn(
-        'border border-components-option-card-option-border bg-components-option-card-option-bg rounded-xl hover:shadow-xs cursor-pointer',
-        isChosen && 'bg-components-option-card-option-selected-bg border-components-panel-border shadow-xs',
+        'relative p-3 border-[0.5px] border-components-option-card-option-border bg-components-option-card-option-bg rounded-xl cursor-pointer',
+        isChosen && 'border-[1.5px] bg-components-option-card-option-selected-bg',
         className,
       )}
     >
-      <div className='flex py-3 pl-3 pr-4' onClick={onChosen}>
-        <div className={cn(iconBgClassName, 'mr-3 shrink-0 flex w-8 justify-center h-8 items-center rounded-lg')}>
+      <div className='flex gap-x-2' onClick={onChosen}>
+        <div className={cn(iconBgClassName, 'shrink-0 flex size-8 justify-center items-center rounded-lg shadow-md')}>
           {icon}
         </div>
         <div className='grow'>
-          <div className='leading-5 text-sm font-medium text-text-secondary'>{title}</div>
-          <div className='leading-[18px] text-xs font-normal text-text-tertiary'>{description}</div>
+          <div className='system-sm-semibold text-text-secondary mb-1'>{title}</div>
+          <div className='system-sm-regular text-text-tertiary'>{description}</div>
         </div>
         {!noRadio && (
-          <div className='shrink-0 flex items-center h-8'>
+          <div className='absolute top-3 right-3'>
             <div className={cn(
               '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',
@@ -54,8 +54,11 @@ const RadioCard: FC<Props> = ({
         )}
       </div>
       {((isChosen && chosenConfig) || noRadio) && (
-        <div className={cn(chosenConfigWrapClassName, 'p-3')}>
-          {chosenConfig}
+        <div className='flex gap-x-2 mt-2'>
+          <div className='size-8 shrink-0'></div>
+          <div className={cn(chosenConfigWrapClassName, 'grow')}>
+            {chosenConfig}
+          </div>
         </div>
       )}
     </div>
diff --git a/web/app/components/datasets/common/retrieval-method-config/index.tsx b/web/app/components/datasets/common/retrieval-method-config/index.tsx
index aeeb7235e4..3a60bd8818 100644
--- a/web/app/components/datasets/common/retrieval-method-config/index.tsx
+++ b/web/app/components/datasets/common/retrieval-method-config/index.tsx
@@ -104,7 +104,7 @@ const RetrievalMethodConfig: FC<Props> = ({
           title={
             <div className='flex items-center space-x-1'>
               <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>
           }
           description={t('dataset.retrieval.hybrid_search.description')} isActive={
diff --git a/web/app/components/datasets/common/retrieval-param-config/index.tsx b/web/app/components/datasets/common/retrieval-param-config/index.tsx
index dc29a3b524..5136ac1659 100644
--- a/web/app/components/datasets/common/retrieval-param-config/index.tsx
+++ b/web/app/components/datasets/common/retrieval-param-config/index.tsx
@@ -120,7 +120,7 @@ const RetrievalParamConfig: FC<Props> = ({
     <div>
       {!isEconomical && !isHybridSearch && (
         <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 && (
               <div
                 className='flex items-center'
@@ -140,7 +140,7 @@ const RetrievalParamConfig: FC<Props> = ({
               </div>
             )}
             <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
                 popupContent={
                   <div className="w-[200px]">{t('common.modelProvider.rerankModel.tip')}</div>
@@ -167,7 +167,7 @@ const RetrievalParamConfig: FC<Props> = ({
       )}
       {
         !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
               className='grow'
               value={value.top_k}
diff --git a/web/app/components/datasets/create/step-two/index.tsx b/web/app/components/datasets/create/step-two/index.tsx
index db7b7f3ae5..253a3d6763 100644
--- a/web/app/components/datasets/create/step-two/index.tsx
+++ b/web/app/components/datasets/create/step-two/index.tsx
@@ -585,7 +585,7 @@ const StepTwo = ({
           && <OptionCard
             className='bg-background-section mb-2'
             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'
             description={t('datasetCreation.stepTwo.generalTip')}
             isActive={
@@ -599,7 +599,7 @@ const StepTwo = ({
             actions={
               <>
                 <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')}
                 </Button>
                 <Button variant={'ghost'} onClick={resetRules}>
@@ -690,7 +690,7 @@ const StepTwo = ({
           (!datasetId || currentDataset!.doc_form === ChuckingMode.parentChild)
           && <OptionCard
             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}
             activeHeaderClassName='bg-dataset-option-card-orange-gradient'
             description={t('datasetCreation.stepTwo.parentChildTip')}
@@ -701,7 +701,7 @@ const StepTwo = ({
             actions={
               <>
                 <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')}
                 </Button>
                 <Button variant={'ghost'} onClick={resetRules}>
@@ -711,12 +711,15 @@ const StepTwo = ({
             }
             noHighlight={Boolean(datasetId)}
           >
-            <div className='space-y-4'>
-              <div className='space-y-2'>
-                <TextLabel>
-                  {t('datasetCreation.stepTwo.parentChunkForContext')}
-                </TextLabel>
-                <RadioCard
+            <div className='flex flex-col gap-4'>
+              <div>
+                <div className='flex items-center gap-x-2'>
+                  <div className='inline-flex shrink-0'>
+                    <TextLabel>{t('datasetCreation.stepTwo.parentChunkForContext')}</TextLabel>
+                  </div>
+                  <Divider className='grow' bgStyle='gradient'/>
+                </div>
+                <RadioCard className='mt-1'
                   icon={<Image src={Note} alt='' />}
                   title={t('datasetCreation.stepTwo.paragraph')}
                   description={t('datasetCreation.stepTwo.paragraphTip')}
@@ -728,7 +731,7 @@ const StepTwo = ({
                     },
                   )}
                   chosenConfig={
-                    <div className='flex gap-2'>
+                    <div className='flex gap-3'>
                       <DelimiterInput
                         value={parentChildConfig.parent.delimiter}
                         onChange={e => setParentChildConfig({
@@ -752,7 +755,7 @@ const StepTwo = ({
                     </div>
                   }
                 />
-                <RadioCard
+                <RadioCard className='mt-2'
                   icon={<Image src={FileList} alt='' />}
                   title={t('datasetCreation.stepTwo.fullDoc')}
                   description={t('datasetCreation.stepTwo.fullDocTip')}
@@ -766,11 +769,14 @@ const StepTwo = ({
                 />
               </div>
 
-              <div className='space-y-4'>
-                <TextLabel>
-                  {t('datasetCreation.stepTwo.childChunkForRetrieval')}
-                </TextLabel>
-                <div className='flex gap-3 mt-2'>
+              <div>
+                <div className='flex items-center gap-x-2'>
+                  <div className='inline-flex shrink-0'>
+                    <TextLabel>{t('datasetCreation.stepTwo.childChunkForRetrieval')}</TextLabel>
+                  </div>
+                  <Divider className='grow' bgStyle='gradient'/>
+                </div>
+                <div className='flex gap-3 mt-1'>
                   <DelimiterInput
                     value={parentChildConfig.child.delimiter}
                     onChange={e => setParentChildConfig({
@@ -792,23 +798,25 @@ const StepTwo = ({
                     })}
                   />
                 </div>
-
-                <div className='space-y-2'>
-                  <TextLabel>
-                    {t('datasetCreation.stepTwo.rules')}
-                  </TextLabel>
-                  <div className='space-y-2 mt-2'>
-                    {rules.map(rule => (
-                      <div key={rule.id} className={s.ruleItem} onClick={() => {
-                        ruleChangeHandle(rule.id)
-                      }}>
-                        <Checkbox
-                          checked={rule.enabled}
-                        />
-                        <label className="ml-2 text-sm font-normal cursor-pointer text-text-secondary">{getRuleName(rule.id)}</label>
-                      </div>
-                    ))}
+              </div>
+              <div>
+                <div className='flex items-center gap-x-2'>
+                  <div className='inline-flex shrink-0'>
+                    <TextLabel>{t('datasetCreation.stepTwo.rules')}</TextLabel>
                   </div>
+                  <Divider className='grow' bgStyle='gradient'/>
+                </div>
+                <div className='mt-1'>
+                  {rules.map(rule => (
+                    <div key={rule.id} className={s.ruleItem} onClick={() => {
+                      ruleChangeHandle(rule.id)
+                    }}>
+                      <Checkbox
+                        checked={rule.enabled}
+                      />
+                      <label className="ml-2 system-sm-regular cursor-pointer text-text-secondary">{getRuleName(rule.id)}</label>
+                    </div>
+                  ))}
                 </div>
               </div>
             </div>
@@ -821,7 +829,7 @@ const StepTwo = ({
               title={<p className='flex items-center'>
                 {t('datasetCreation.stepTwo.qualified')}
                 {!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'>
                   {!hasSetIndexType && <span className={cn(s.radio)} />}
                 </span>
diff --git a/web/app/components/datasets/create/step-two/option-card.tsx b/web/app/components/datasets/create/step-two/option-card.tsx
index 9d745fa946..7d3b06f375 100644
--- a/web/app/components/datasets/create/step-two/option-card.tsx
+++ b/web/app/components/datasets/create/step-two/option-card.tsx
@@ -25,14 +25,16 @@ export const OptionCardHeader: FC<OptionCardHeaderProps> = (props) => {
   )}>
     <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} />}
-      <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}
+      <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'>
+          {icon}
+        </div>
       </div>
     </div>
     <TriangleArrow
       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-tertiary system-xs-regular'>{description}</div>
     </div>