From 8e1aef6120a6d8e4646b19a9b7bf1ecc3cc2605b Mon Sep 17 00:00:00 2001
From: AkaraChen <akarachen@outlook.com>
Date: Wed, 20 Nov 2024 16:24:06 +0800
Subject: [PATCH] feat: new dataset footer ui

---
 .../common/economical-retrieval-method-config/index.tsx  | 4 +++-
 .../datasets/common/retrieval-method-config/index.tsx    | 2 +-
 web/app/components/datasets/create/step-two/index.tsx    | 9 ++++++---
 .../components/datasets/create/step-two/option-card.tsx  | 2 +-
 4 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/web/app/components/datasets/common/economical-retrieval-method-config/index.tsx b/web/app/components/datasets/common/economical-retrieval-method-config/index.tsx
index 14ae8a4f6e..7108d359d9 100644
--- a/web/app/components/datasets/common/economical-retrieval-method-config/index.tsx
+++ b/web/app/components/datasets/common/economical-retrieval-method-config/index.tsx
@@ -24,7 +24,9 @@ const EconomicalRetrievalMethodConfig: FC<Props> = ({
     <div className='space-y-2'>
       <OptionCard icon={<Image className='w-4 h-4' src={Selection} alt='' />}
         title={t('dataset.retrieval.invertedIndex.title')}
-        description={t('dataset.retrieval.invertedIndex.description')} isActive>
+        description={t('dataset.retrieval.invertedIndex.description')} isActive
+        activeHeaderClassName='bg-gradient-to-r from-[#F0EEFA] to-[#F9FAFB]'
+      >
         <RetrievalParamConfig
           type={RETRIEVE_METHOD.invertedIndex}
           value={value}
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 9920db7317..62ead1467f 100644
--- a/web/app/components/datasets/common/retrieval-method-config/index.tsx
+++ b/web/app/components/datasets/common/retrieval-method-config/index.tsx
@@ -105,7 +105,7 @@ const RetrievalMethodConfig: FC<Props> = ({
           title={
             <div className='flex items-center space-x-1'>
               <div>{t('dataset.retrieval.hybrid_search.title')}</div>
-              <div className='flex h-full items-center px-1.5 rounded-md border border-[#E0EAFF] text-xs font-medium text-[#444CE7]'>{t('dataset.retrieval.hybrid_search.recommend')}</div>
+              <div className='flex h-full items-center px-1.5 rounded-md border border-[#296cff] text-xs font-medium text-[#296cff] text-[10px]'>{t('dataset.retrieval.hybrid_search.recommend')}</div>
             </div>
           }
           description={t('dataset.retrieval.hybrid_search.description')} isActive={
diff --git a/web/app/components/datasets/create/step-two/index.tsx b/web/app/components/datasets/create/step-two/index.tsx
index c122f940e7..0ea6cd2baa 100644
--- a/web/app/components/datasets/create/step-two/index.tsx
+++ b/web/app/components/datasets/create/step-two/index.tsx
@@ -7,6 +7,7 @@ import { useBoolean } from 'ahooks'
 import { XMarkIcon } from '@heroicons/react/20/solid'
 import { RocketLaunchIcon } from '@heroicons/react/24/outline'
 import {
+  RiArrowLeftLine,
   RiCloseLine,
   RiSearchEyeLine,
 } from '@remixicon/react'
@@ -951,9 +952,11 @@ const StepTwo = ({
             {!isSetting
               ? (
                 <div className='flex items-center mt-8 py-2'>
-                  <Button onClick={() => onStepChange && onStepChange(-1)}>{t('datasetCreation.stepTwo.previousStep')}</Button>
-                  <div className={s.divider} />
-                  <Button loading={isCreating} variant='primary' onClick={createHandle}>{t('datasetCreation.stepTwo.nextStep')}</Button>
+                  <Button onClick={() => onStepChange && onStepChange(-1)}>
+                    <RiArrowLeftLine className='w-4 h-4 mr-1' />
+                    {t('datasetCreation.stepTwo.previousStep')}
+                  </Button>
+                  <Button className='ml-auto' loading={isCreating} variant='primary' onClick={createHandle}>{t('datasetCreation.stepTwo.nextStep')}</Button>
                 </div>
               )
               : (
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 cd0129e9f0..96263d51a0 100644
--- a/web/app/components/datasets/create/step-two/option-card.tsx
+++ b/web/app/components/datasets/create/step-two/option-card.tsx
@@ -34,7 +34,7 @@ export const OptionCardHeader: FC<OptionCardHeaderProps> = (props) => {
     <TriangleArrow
       className='absolute left-4 -bottom-1.5'
     />
-    <div className='flex-1 space-y-1 py-3'>
+    <div className='flex-1 space-y-1 py-3 pr-4'>
       <div className='text-[#354052] text-sm font-semibold leading-tight'>{title}</div>
       <div className='text-[#676f83] text-xs font-normal leading-none'>{description}</div>
     </div>