fix:Optimized the style of the dataset configuration page and added the l… (#8655)

### What problem does this PR solve? Optimized the style of the dataset configuration page and added the logic of cancelling submission [#3221](https://github.com/infiniflow/ragflow/issues/3221) ### Type of change - [x] Bug Fix (non-breaking change which fixes an issue)
2025-12-08 12:32:30 +08:00 · 2025-07-04 15:11:30 +08:00
parent b382b63f9a
commit 1cf24be04b
8 changed files with 71 additions and 82 deletions
--- a/web/src/locales/en.ts
+++ b/web/src/locales/en.ts
@ -207,6 +207,7 @@ export default {
        'Update your knowledge base configuration here, particularly the chunking method.',
      name: 'Knowledge base name',
      photo: 'Knowledge base photo',
+      photoTip: 'You can upload a file with 4 MB',
      description: 'Description',
      language: 'Document language',
      languageMessage: 'Please input your language!',
--- a/web/src/locales/zh-traditional.ts
+++ b/web/src/locales/zh-traditional.ts
@ -205,6 +205,7 @@ export default {
      titleDescription: '在這裡更新您的知識庫詳細信息，尤其是切片方法。',
      name: '知識庫名稱',
      photo: '知識庫圖片',
+      photoTip: '你可以上傳4MB的文件',
      description: '描述',
      language: '文件語言',
      languageMessage: '請輸入語言',
--- a/web/src/locales/zh.ts
+++ b/web/src/locales/zh.ts
@ -205,6 +205,7 @@ export default {
      titleDescription: '在这里更新您的知识库详细信息，尤其是切片方法。',
      name: '知识库名称',
      photo: '知识库图片',
+      photoTip: '你可以上传4MB的文件',
      description: '描述',
      language: '文档语言',
      languageMessage: '请输入语言',
--- a/web/src/pages/dataset/dataset/index.tsx
+++ b/web/src/pages/dataset/dataset/index.tsx
@ -12,7 +12,9 @@ import {
 } from '@/components/ui/dropdown-menu';
 import { useRowSelection } from '@/hooks/logic-hooks/use-row-selection';
 import { useFetchDocumentList } from '@/hooks/use-document-request';
+import { IDocumentInfo } from '@/interfaces/database/document';
 import { Upload } from 'lucide-react';
+import { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { DatasetTable } from './dataset-table';
 import { useBulkOperateDataset } from './use-bulk-operate-dataset';
@ -40,7 +42,16 @@ export default function Dataset() {
    handleFilterSubmit,
    loading,
  } = useFetchDocumentList();
-  const { filters } = useSelectDatasetFilters();
+  const { filters, documents: filteredDocuments } = useSelectDatasetFilters();
+  const [datasetInfo, setDatasetInfo] = useState<IDocumentInfo[]>(documents);
+
+  useMemo(() => {
+    setDatasetInfo(documents);
+  }, [documents]);
+
+  useMemo(() => {
+    setDatasetInfo(filteredDocuments);
+  }, [filteredDocuments]);

  const {
    createLoading,
@ -100,7 +111,7 @@ export default function Dataset() {
        <BulkOperateBar list={list} count={selectedCount}></BulkOperateBar>
      )}
      <DatasetTable
-        documents={documents}
+        documents={datasetInfo}
        pagination={pagination}
        setPagination={setPagination}
        rowSelection={rowSelection}
--- a/web/src/pages/dataset/dataset/use-select-filters.ts
+++ b/web/src/pages/dataset/dataset/use-select-filters.ts
@ -19,7 +19,6 @@ export function useSelectDatasetFilters() {
      label: t(`knowledgeDetails.runningStatus${x.label}`),
    }));
  }, [documents, t]);
-
  const filters = useMemo(() => {
    return [
      { field: 'type', label: 'File Type', list: fileTypes },
@ -27,5 +26,5 @@ export function useSelectDatasetFilters() {
    ];
  }, [fileStatus, fileTypes]);

-  return { fileTypes, fileStatus, filters };
+  return { fileTypes, fileStatus, filters, documents };
 }
--- a/web/src/pages/dataset/setting/chunk-method-form.tsx
+++ b/web/src/pages/dataset/setting/chunk-method-form.tsx
@ -70,15 +70,22 @@ export function ChunkMethodForm() {
      <section className="overflow-auto max-h-[76vh]">
        <ConfigurationComponent></ConfigurationComponent>
      </section>
-      <div className="text-right pt-4">
+      <div className="text-right pt-4 flex justify-end gap-3">
+        <Button
+          type="reset"
+          className="bg-transparent text-color-white hover:bg-transparent border-gray-500 border-[1px]"
+          onClick={() => {
+            form.reset();
+          }}
+        >
+          {t('knowledgeConfiguration.cancel')}
+        </Button>
        <Button
          disabled={submitLoading}
          onClick={() => {
            (async () => {
              try {
                let beValid = await form.formControl.trigger();
-                console.log('user chunk form: ', form);
-
                if (beValid) {
                  // setSubmitLoading(true);
                  let postData = form.formState.values;
@ -98,7 +105,7 @@ export function ChunkMethodForm() {
          }}
        >
          {submitLoading && <Loader2Icon className="animate-spin" />}
-          {t('common.submit')}
+          {t('knowledgeConfiguration.save')}
        </Button>
      </div>
    </>
--- a/web/src/pages/dataset/setting/general-form.tsx
+++ b/web/src/pages/dataset/setting/general-form.tsx
@ -9,7 +9,6 @@ import {
  FormMessage,
 } from '@/components/ui/form';
 import { Input } from '@/components/ui/input';
-import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
 import { useUpdateKnowledge } from '@/hooks/knowledge-hooks';
 import { transformFile2Base64 } from '@/utils/file-util';
 import { Loader2Icon, Pencil, Upload } from 'lucide-react';
@ -79,43 +78,17 @@ export function GeneralForm() {
            </FormItem>
          )}
        />
-        <FormField
-          control={form.control}
-          name="description"
-          render={({ field }) => {
-            // null initialize empty string
-            if (typeof field.value === 'object' && !field.value) {
-              form.setValue('description', '  ');
-            }
-            return (
-              <FormItem className="items-center space-y-0">
-                <div className="flex">
-                  <FormLabel className="text-sm text-muted-foreground whitespace-nowrap w-1/4">
-                    {t('flow.description')}
-                  </FormLabel>
-                  <FormControl className="w-3/4">
-                    <Input {...field}></Input>
-                  </FormControl>
-                </div>
-                <div className="flex pt-1">
-                  <div className="w-1/4"></div>
-                  <FormMessage />
-                </div>
-              </FormItem>
-            );
-          }}
-        />
        <FormField
          control={form.control}
          name="avatar"
-          render={({ field }) => (
+          render={() => (
            <FormItem className="items-center space-y-0">
              <div className="flex">
                <FormLabel className="text-sm text-muted-foreground whitespace-nowrap w-1/4">
                  {t('setting.avatar')}
                </FormLabel>
                <FormControl className="w-3/4">
-                  <>
+                  <div className="flex justify-start items-end space-x-2">
                    <div className="relative group">
                      {!avatarBase64Str ? (
                        <div className="w-[64px] h-[64px] grid place-content-center border border-dashed	rounded-md">
@ -126,7 +99,7 @@ export function GeneralForm() {
                        </div>
                      ) : (
                        <div className="w-[64px] h-[64px] relative grid place-content-center">
-                          <Avatar className="w-[64px] h-[64px]">
+                          <Avatar className="w-[64px] h-[64px] rounded-md">
                            <AvatarImage
                              className=" block"
                              src={avatarBase64Str}
@ -160,7 +133,10 @@ export function GeneralForm() {
                        }}
                      />
                    </div>
-                  </>
+                    <div className="margin-1 text-muted-foreground">
+                      {t('knowledgeConfiguration.photoTip')}
+                    </div>
+                  </div>
                </FormControl>
              </div>
              <div className="flex pt-1">
@ -172,54 +148,48 @@ export function GeneralForm() {
        />
        <FormField
          control={form.control}
-          name="permission"
-          render={({ field }) => (
-            <FormItem className="flex items-center space-y-0">
-              <FormLabel
-                className="text-sm text-muted-foreground whitespace-nowrap w-1/4"
-                tooltip={t('knowledgeConfiguration.permissionsTip')}
-              >
-                {t('knowledgeConfiguration.permissions')}
-              </FormLabel>
-              <FormControl className="w-3/4">
-                <RadioGroup
-                  onValueChange={field.onChange}
-                  value={field.value}
-                  className="flex space-y-1 gap-5"
-                >
-                  <FormItem className="flex items-center space-x-1 space-y-0">
-                    <FormControl>
-                      <RadioGroupItem value="me" />
-                    </FormControl>
-                    <FormLabel className="font-normal">
-                      {t('knowledgeConfiguration.me')}
-                    </FormLabel>
-                  </FormItem>
-                  <FormItem className="flex items-center space-x-1 space-y-0">
-                    <FormControl>
-                      <RadioGroupItem value="team" />
-                    </FormControl>
-                    <FormLabel className="font-normal">
-                      {t('knowledgeConfiguration.team')}
-                    </FormLabel>
-                  </FormItem>
-                </RadioGroup>
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
+          name="description"
+          render={({ field }) => {
+            // null initialize empty string
+            if (typeof field.value === 'object' && !field.value) {
+              form.setValue('description', '  ');
+            }
+            return (
+              <FormItem className="items-center space-y-0">
+                <div className="flex">
+                  <FormLabel className="text-sm text-muted-foreground whitespace-nowrap w-1/4">
+                    {t('flow.description')}
+                  </FormLabel>
+                  <FormControl className="w-3/4">
+                    <Input {...field}></Input>
+                  </FormControl>
+                </div>
+                <div className="flex pt-1">
+                  <div className="w-1/4"></div>
+                  <FormMessage />
+                </div>
+              </FormItem>
+            );
+          }}
        />
      </FormContainer>
-      <div className="text-right pt-4">
+      <div className="text-right pt-4 flex justify-end gap-3">
+        <Button
+          type="reset"
+          className="bg-transparent text-color-white hover:bg-transparent border-gray-500 border-[1px]"
+          onClick={() => {
+            form.reset();
+          }}
+        >
+          {t('knowledgeConfiguration.cancel')}
+        </Button>
        <Button
          type="button"
          disabled={submitLoading}
          onClick={() => {
-            // console.log('form.formControl: ', form.formState.values);
            (async () => {
              let isValidate = await form.formControl.trigger('name');
-              // console.log(isValidate);
-              const { name, description, permission } = form.formState.values;
+              const { name, description } = form.formState.values;
              const avatar = avatarBase64Str;

              if (isValidate) {
@ -228,7 +198,6 @@ export function GeneralForm() {
                  parser_id,
                  name,
                  description,
-                  permission,
                  avatar,
                });
              }
@ -236,7 +205,7 @@ export function GeneralForm() {
          }}
        >
          {submitLoading && <Loader2Icon className="animate-spin" />}
-          {t('common.submit')}
+          {t('knowledgeConfiguration.save')}
        </Button>
      </div>
    </>
--- a/web/src/pages/dataset/setting/index.tsx
+++ b/web/src/pages/dataset/setting/index.tsx
@ -102,7 +102,7 @@ export default function DatasetSettings() {
                setCurrentTab(val);
              }}
            >
-              <TabsList className="grid w-full bg-background grid-cols-2 rounded-none bg-[#161618]">
+              <TabsList className="grid bg-background grid-cols-2 rounded-none bg-[#161618]">
                <TabsTrigger
                  value="generalForm"
                  className="group bg-transparent p-0 !border-transparent"