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)
2025-12-08 20:42:30 +08:00 · 2025-08-25 17:29:15 +08:00
parent a3aa3f0d36
commit d367c7e226
15 changed files with 99 additions and 39 deletions
--- a/web/src/components/layout-recognize-form-field.tsx
+++ b/web/src/components/layout-recognize-form-field.tsx
@ -68,7 +68,7 @@ export function LayoutRecognizeFormField() {
            <div className="flex items-center">
              <FormLabel
                tooltip={t('layoutRecognizeTip')}
-                className="text-sm text-muted-foreground whitespace-nowrap w-1/4"
+                className="text-sm text-muted-foreground whitespace-wrap w-1/4"
              >
                {t('layoutRecognize')}
              </FormLabel>
--- a/web/src/components/originui/select-with-search.tsx
+++ b/web/src/components/originui/select-with-search.tsx
@ -28,6 +28,7 @@ import {
  PopoverTrigger,
 } from '@/components/ui/popover';
 import { cn } from '@/lib/utils';
+import { t } from 'i18next';
 import { RAGFlowSelectOptionType } from '../ui/select';
 import { Separator } from '../ui/separator';

@ -114,7 +115,9 @@ export const SelectWithSearch = forwardRef<
                <span className="leading-none truncate">{selectLabel}</span>
              </span>
            ) : (
-              <span className="text-muted-foreground">Select value</span>
+              <span className="text-muted-foreground">
+                {t('common.selectPlaceholder')}
+              </span>
            )}
            <div className="flex items-center justify-between">
              {value && allowClear && (
--- a/web/src/components/parse-configuration/raptor-form-fields.tsx
+++ b/web/src/components/parse-configuration/raptor-form-fields.tsx
@ -3,7 +3,7 @@ import { DocumentParserType } from '@/constants/knowledge';
 import { useTranslate } from '@/hooks/common-hooks';
 import random from 'lodash/random';
 import { Plus } from 'lucide-react';
-import { useCallback, useEffect } from 'react';
+import { useCallback } from 'react';
 import { useFormContext, useWatch } from 'react-hook-form';
 import { SliderInputFormField } from '../slider-input-form-field';
 import { Button } from '../ui/button';
@ -57,15 +57,19 @@ const RaptorFormFields = () => {
  const form = useFormContext();
  const { t } = useTranslate('knowledgeConfiguration');
  const useRaptor = useWatch({ name: UseRaptorField });
-  useEffect(() => {
-    if (useRaptor) {
-      form.setValue(MaxTokenField, 256);
-      form.setValue(ThresholdField, 0.1);
-      form.setValue(MaxCluster, 64);
-      form.setValue(RandomSeedField, 0);
-      form.setValue(Prompt, t('promptText'));
-    }
-  }, [form, useRaptor, t]);
+
+  const changeRaptor = useCallback(
+    (isUseRaptor: boolean) => {
+      if (isUseRaptor) {
+        form.setValue(MaxTokenField, 256);
+        form.setValue(ThresholdField, 0.1);
+        form.setValue(MaxCluster, 64);
+        form.setValue(RandomSeedField, 0);
+        form.setValue(Prompt, t('promptText'));
+      }
+    },
+    [form],
+  );

  const handleGenerate = useCallback(() => {
    form.setValue(RandomSeedField, random(10000));
@ -97,7 +101,10 @@ const RaptorFormFields = () => {
                  <FormControl>
                    <Switch
                      checked={field.value}
-                      onCheckedChange={field.onChange}
+                      onCheckedChange={(e) => {
+                        changeRaptor(e);
+                        field.onChange(e);
+                      }}
                    ></Switch>
                  </FormControl>
                </div>
@ -127,7 +134,13 @@ const RaptorFormFields = () => {
                    </FormLabel>
                    <div className="w-3/4">
                      <FormControl>
-                        <Textarea {...field} rows={8} />
+                        <Textarea
+                          {...field}
+                          rows={8}
+                          onChange={(e) => {
+                            field.onChange(e?.target?.value);
+                          }}
+                        />
                      </FormControl>
                    </div>
                  </div>
--- a/web/src/components/ui/multi-select.tsx
+++ b/web/src/components/ui/multi-select.tsx
@ -209,10 +209,16 @@ export const MultiSelect = React.forwardRef<
    const [isAnimating, setIsAnimating] = React.useState(false);

    React.useEffect(() => {
-      if (selectedValues === undefined) {
+      if (!selectedValues && props.value) {
+        setSelectedValues(props.value as string[]);
+      }
+    }, [props.value, selectedValues]);
+
+    React.useEffect(() => {
+      if (!selectedValues && !props.value && defaultValue) {
        setSelectedValues(defaultValue);
      }
-    }, [defaultValue, selectedValues]);
+    }, [defaultValue, props.value, selectedValues]);

    const flatOptions = React.useMemo(() => {
      return options.flatMap((option) =>
@ -293,15 +299,18 @@ export const MultiSelect = React.forwardRef<
                        variant="secondary"
                        className={cn(
                          isAnimating ? 'animate-bounce' : '',
+                          'px-1',
                          multiSelectVariants({ variant }),
                        )}
                        style={{ animationDuration: `${animation}s` }}
                      >
-                        <div className="flex items-center gap-1">
+                        <div className="flex justify-between items-center gap-1">
                          {IconComponent && (
                            <IconComponent className="h-4 w-4" />
                          )}
-                          <div>{option?.label}</div>
+                          <div className="max-w-28 text-ellipsis overflow-hidden">
+                            {option?.label}
+                          </div>
                          <XCircle
                            className="h-4 w-4 cursor-pointer"
                            onClick={(event) => {
--- a/web/src/locales/en.ts
+++ b/web/src/locales/en.ts
@ -1,6 +1,7 @@
 export default {
  translation: {
    common: {
+      selectPlaceholder: 'select value',
      delete: 'Delete',
      deleteModalTitle: 'Are you sure to delete this item?',
      ok: 'Yes',
@ -94,6 +95,16 @@ export default {
      noMoreData: `That's all. Nothing more.`,
    },
    knowledgeDetails: {
+      created: 'Created',
+      learnMore: 'Learn More',
+      general: 'General',
+      chunkMethodTab: 'Chunk Method',
+      testResults: 'Test Results',
+      testSetting: 'Test Setting',
+      retrievalTesting: 'Retrieval Testing',
+      retrievalTestingDescription:
+        'Conduct a retrieval test to check if RAGFlow can recover the intended content for the LLM.',
+      Parse: 'Parse',
      dataset: 'Dataset',
      testing: 'Retrieval testing',
      files: 'files',
--- a/web/src/locales/zh.ts
+++ b/web/src/locales/zh.ts
@ -1,6 +1,7 @@
 export default {
  translation: {
    common: {
+      selectPlaceholder: '请选择',
      delete: '删除',
      deleteModalTitle: '确定删除吗?',
      ok: '是',
@ -86,6 +87,16 @@ export default {
      noMoreData: '没有更多数据了',
    },
    knowledgeDetails: {
+      created: '创建于',
+      learnMore: '了解更多',
+      general: '通用',
+      chunkMethodTab: '切片方法',
+      testResults: '测试结果',
+      testSetting: '测试设置',
+      retrievalTesting: '知识检索测试',
+      retrievalTestingDescription:
+        '进行检索测试，检查 RAGFlow 是否能够为大语言模型（LLM）恢复预期的内容。',
+      Parse: '解析',
      dataset: '数据集',
      testing: '检索测试',
      configuration: '配置',
--- a/web/src/pages/dataset/index.tsx
+++ b/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>
--- a/web/src/pages/dataset/setting/chunk-method-learn-more.tsx
+++ b/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
--- a/web/src/pages/dataset/setting/configuration/common-item.tsx
+++ b/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>
--- a/web/src/pages/dataset/setting/index.tsx
+++ b/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>
--- a/web/src/pages/dataset/sidebar/index.tsx
+++ b/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>

--- a/web/src/pages/dataset/testing/index.tsx
+++ b/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
--- a/web/src/pages/dataset/testing/testing-result.tsx
+++ b/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}
--- a/web/src/pages/datasets/dataset-card.tsx
+++ b/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>
--- a/web/src/pages/home/datasets.tsx
+++ b/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