Fix: Optimize dataset page layout and internationalization and default values for multi selection #3221 (#9695)

### What problem does this PR solve?

Fix: Optimize dataset page layout and internationalization and Fix
setting default values for multi selection drop-down boxes #3221

-Adjust the style and layout of each component on the dataset page
-Add and update multilingual translation content

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/pages/dataset/index.tsx

@@ -30,7 +30,9 @@ export default function DatasetWrapper() {
             </BreadcrumbItem>
             <BreadcrumbSeparator />
             <BreadcrumbItem>
-              <BreadcrumbPage>{data.name}</BreadcrumbPage>
+              <BreadcrumbPage className="w-28 whitespace-nowrap text-ellipsis overflow-hidden">
+                {data.name}
+              </BreadcrumbPage>
             </BreadcrumbItem>
           </BreadcrumbList>
         </Breadcrumb>

web/src/pages/dataset/setting/chunk-method-learn-more.tsx

@@ -1,5 +1,6 @@
 import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
+import { t } from 'i18next';
 import { X } from 'lucide-react';
 import { useState } from 'react';
 import CategoryPanel from './category-panel';
@@ -26,7 +27,7 @@ export default ({
             setVisible(!visible);
           }}
         >
-          Learn More
+          {t('knowledgeDetails.learnMore')}
         </Button>
       </div>
       <div

web/src/pages/dataset/setting/configuration/common-item.tsx

@@ -29,7 +29,7 @@ export function ChunkMethodItem() {
           <div className="flex items-center">
             <FormLabel
               tooltip={t('chunkMethodTip')}
-              className="text-sm text-muted-foreground whitespace-nowrap w-1/4"
+              className="text-sm text-muted-foreground whitespace-wrap w-1/4"
             >
               {t('chunkMethod')}
             </FormLabel>
@@ -69,7 +69,7 @@ export function EmbeddingModelItem() {
           <div className="flex items-center">
             <FormLabel
               tooltip={t('embeddingModelTip')}
-              className="text-sm text-muted-foreground whitespace-nowrap w-1/4"
+              className="text-sm text-muted-foreground whitespace-wrap w-1/4"
             >
               {t('embeddingModel')}
             </FormLabel>

web/src/pages/dataset/setting/index.tsx

@@ -107,7 +107,7 @@ export default function DatasetSettings() {
                 >
                   <div className="flex w-full h-full justify-center	items-center">
                     <span className="h-full group-data-[state=active]:border-b-2 border-foreground	">
-                      General
+                      {t('knowledgeDetails.general')}
                     </span>
                   </div>
                 </TabsTrigger>
@@ -117,7 +117,7 @@ export default function DatasetSettings() {
                 >
                   <div className="flex w-full h-full justify-center	items-center">
                     <span className="h-full group-data-[state=active]:border-b-2 border-foreground	">
-                      Chunk Method
+                      {t('knowledgeDetails.chunkMethodTab')}
                     </span>
                   </div>
                 </TabsTrigger>

web/src/pages/dataset/sidebar/index.tsx

@@ -67,10 +67,14 @@ export function SideBar({ refreshCount }: PropType) {
             {data.name}
           </h3>
           <div className="flex justify-between">
-            <span>{data.doc_num} files</span>
+            <span>
+              {data.doc_num} {t('knowledgeDetails.files')}
+            </span>
             <span>{formatBytes(data.size)}</span>
           </div>
-          <div>Created {formatPureDate(data.create_time)}</div>
+          <div>
+            {t('knowledgeDetails.created')} {formatPureDate(data.create_time)}
+          </div>
         </div>
       </div>
 

web/src/pages/dataset/testing/index.tsx

@@ -1,4 +1,5 @@
 import { useTestRetrieval } from '@/hooks/use-knowledge-request';
+import { t } from 'i18next';
 import { useState } from 'react';
 import { TopTitle } from '../dataset-title';
 import TestingForm from './testing-form';
@@ -23,8 +24,8 @@ export default function RetrievalTesting() {
     <div className="p-5">
       <section className="flex justify-between items-center">
         <TopTitle
-          title={'Retrieval testing'}
-          description={`Conduct a retrieval test to check if RAGFlow can recover the intended content for the LLM.`}
+          title={t('knowledgeDetails.retrievalTesting')}
+          description={t('knowledgeDetails.retrievalTestingDescription')}
         ></TopTitle>
         {/* <Button>Save as Preset</Button> */}
       </section>
@@ -33,7 +34,7 @@ export default function RetrievalTesting() {
           <div className="p-4 flex-1">
             <div className="flex justify-between pb-2.5">
               <span className="text-text-primary font-semibold text-2xl">
-                Test setting
+                {t('knowledgeDetails.testSetting')}
               </span>
               {/* <Button variant={'outline'} onClick={addCount}>
                 <Plus /> Add New Test

web/src/pages/dataset/testing/testing-result.tsx

@@ -6,6 +6,7 @@ import { RAGFlowPagination } from '@/components/ui/ragflow-pagination';
 import { useTranslate } from '@/hooks/common-hooks';
 import { useTestRetrieval } from '@/hooks/use-knowledge-request';
 import { ITestingChunk } from '@/interfaces/database/knowledge';
+import { t } from 'i18next';
 import camelCase from 'lodash/camelCase';
 import { useMemo } from 'react';
 
@@ -66,7 +67,7 @@ export function TestingResult({
     <div className="p-4 flex-1">
       <div className="flex justify-between pb-2.5">
         <span className="text-text-primary font-semibold text-2xl">
-          Test results
+          {t('knowledgeDetails.testResults')}
         </span>
         <FilterPopover
           filters={filters}

web/src/pages/datasets/dataset-card.tsx

@@ -39,7 +39,7 @@ export function SeeAllCard() {
   const { navigateToDatasetList } = useNavigatePage();
 
   return (
-    <Card className="w-40 flex-none" onClick={navigateToDatasetList}>
+    <Card className="w-40 flex-none h-full" onClick={navigateToDatasetList}>
       <CardContent className="p-2.5 pt-1 w-full h-full flex items-center justify-center gap-1.5 text-text-secondary">
         See All <ChevronRight className="size-4" />
       </CardContent>

web/src/pages/home/datasets.tsx

@@ -31,16 +31,20 @@ export function Datasets() {
           </div>
         ) : (
           <div className="grid gap-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8 max-h-[78vh] overflow-auto">
-            {kbs.slice(0, 6).map((dataset) => (
-              <DatasetCard
-                key={dataset.id}
-                dataset={dataset}
-                showDatasetRenameModal={showDatasetRenameModal}
-              ></DatasetCard>
-            ))}
+            {kbs
+              ?.slice(0, 6)
+              .map((dataset) => (
+                <DatasetCard
+                  key={dataset.id}
+                  dataset={dataset}
+                  showDatasetRenameModal={showDatasetRenameModal}
+                ></DatasetCard>
+              ))}
+            <div className="min-h-24">
+              <SeeAllCard></SeeAllCard>
+            </div>
           </div>
         )}
-        <SeeAllCard></SeeAllCard>
       </div>
       {datasetRenameVisible && (
         <RenameDialog