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)

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!',

web/src/locales/zh-traditional.ts

@@ -205,6 +205,7 @@ export default {
       titleDescription: '在這裡更新您的知識庫詳細信息，尤其是切片方法。',
       name: '知識庫名稱',
       photo: '知識庫圖片',
+      photoTip: '你可以上傳4MB的文件',
       description: '描述',
       language: '文件語言',
       languageMessage: '請輸入語言',

web/src/locales/zh.ts

@@ -205,6 +205,7 @@ export default {
       titleDescription: '在这里更新您的知识库详细信息，尤其是切片方法。',
       name: '知识库名称',
       photo: '知识库图片',
+      photoTip: '你可以上传4MB的文件',
       description: '描述',
       language: '文档语言',
       languageMessage: '请输入语言',

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}

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 };
 }

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>
     </>

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>
     </>

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"