diff --git a/web/src/assets/svg/select-files-end.svg b/web/src/assets/svg/select-files-end.svg
new file mode 100644
index 0000000000000000000000000000000000000000..ab62136374d9d5913b7ac1c2cdca96890717e9cd
--- /dev/null
+++ b/web/src/assets/svg/select-files-end.svg
@@ -0,0 +1,23 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_304_1382)">
+        <path
+            d="M0 16C0 7.16344 7.16344 0 16 0C24.8366 0 32 7.16344 32 16C32 24.8366 24.8366 32 16 32C7.16344 32 0 24.8366 0 16Z"
+            fill="#F9F5FF" />
+        <path
+            d="M1 16C1 7.71573 7.71573 1 16 1C24.2843 1 31 7.71573 31 16C31 24.2843 24.2843 31 16 31C7.71573 31 1 24.2843 1 16Z"
+            fill="#7F56D9" />
+        <path
+            d="M1 16C1 7.71573 7.71573 1 16 1C24.2843 1 31 7.71573 31 16C31 24.2843 24.2843 31 16 31C7.71573 31 1 24.2843 1 16Z"
+            stroke="#7F56D9" stroke-width="2" />
+        <path fill-rule="evenodd" clip-rule="evenodd"
+            d="M22.7951 9.85338L13.2484 19.0667L10.7151 16.3601C10.2484 15.9201 9.51509 15.8934 8.98176 16.2667C8.46176 16.6534 8.31509 17.3334 8.63509 17.8801L11.6351 22.7601C11.9284 23.2134 12.4351 23.4934 13.0084 23.4934C13.5551 23.4934 14.0751 23.2134 14.3684 22.7601C14.8484 22.1334 24.0084 11.2134 24.0084 11.2134C25.2084 9.98672 23.7551 8.90672 22.7951 9.84005V9.85338Z"
+            fill="white" />
+    </g>
+    <defs>
+        <clipPath id="clip0_304_1382">
+            <path
+                d="M0 16C0 7.16344 7.16344 0 16 0C24.8366 0 32 7.16344 32 16C32 24.8366 24.8366 32 16 32C7.16344 32 0 24.8366 0 16Z"
+                fill="white" />
+        </clipPath>
+    </defs>
+</svg>
\ No newline at end of file
diff --git a/web/src/assets/svg/select-files-start.svg b/web/src/assets/svg/select-files-start.svg
new file mode 100644
index 0000000000000000000000000000000000000000..e47094b266e22be253a30f9ec4cb9f352a127524
--- /dev/null
+++ b/web/src/assets/svg/select-files-start.svg
@@ -0,0 +1,35 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g filter="url(#filter0_d_304_382)">
+        <g clip-path="url(#clip0_304_382)">
+            <path
+                d="M4 20C4 11.1634 11.1634 4 20 4C28.8366 4 36 11.1634 36 20C36 28.8366 28.8366 36 20 36C11.1634 36 4 28.8366 4 20Z"
+                fill="#F9F5FF" />
+            <path
+                d="M5 20C5 11.7157 11.7157 5 20 5C28.2843 5 35 11.7157 35 20C35 28.2843 28.2843 35 20 35C11.7157 35 5 28.2843 5 20Z"
+                fill="#7F56D9" />
+            <path
+                d="M5 20C5 11.7157 11.7157 5 20 5C28.2843 5 35 11.7157 35 20C35 28.2843 28.2843 35 20 35C11.7157 35 5 28.2843 5 20Z"
+                stroke="#7F56D9" stroke-width="2" />
+            <circle cx="20" cy="20" r="5" fill="white" />
+        </g>
+    </g>
+    <defs>
+        <filter id="filter0_d_304_382" x="0" y="0" width="40" height="40" filterUnits="userSpaceOnUse"
+            color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+                result="hardAlpha" />
+            <feMorphology radius="4" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_304_382" />
+            <feOffset />
+            <feComposite in2="hardAlpha" operator="out" />
+            <feColorMatrix type="matrix" values="0 0 0 0 0.619152 0 0 0 0 0.465529 0 0 0 0 0.930549 0 0 0 0.24 0" />
+            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_304_382" />
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_304_382" result="shape" />
+        </filter>
+        <clipPath id="clip0_304_382">
+            <path
+                d="M4 20C4 11.1634 11.1634 4 20 4C28.8366 4 36 11.1634 36 20C36 28.8366 28.8366 36 20 36C11.1634 36 4 28.8366 4 20Z"
+                fill="white" />
+        </clipPath>
+    </defs>
+</svg>
\ No newline at end of file
diff --git a/web/src/components/deleting-confirm/index.tsx b/web/src/components/deleting-confirm/index.tsx
index 38a205becd037921bcf402f78ff066c91e7a0637..bd6377ad6d6feb44a8be864bc020d8661d8e24b7 100644
--- a/web/src/components/deleting-confirm/index.tsx
+++ b/web/src/components/deleting-confirm/index.tsx
@@ -8,20 +8,31 @@ interface IProps {
   onCancel?: (...args: any[]) => any;
 }
 
-export const showDeleteConfirm = ({ onOk, onCancel }: IProps) => {
-  confirm({
-    title: 'Are you sure delete this item?',
-    icon: <ExclamationCircleFilled />,
-    content: 'Some descriptions',
-    okText: 'Yes',
-    okType: 'danger',
-    cancelText: 'No',
-    onOk() {
-      onOk?.();
-    },
-    onCancel() {
-      onCancel?.();
-    },
+export const showDeleteConfirm = ({
+  onOk,
+  onCancel,
+}: IProps): Promise<number> => {
+  return new Promise((resolve, reject) => {
+    confirm({
+      title: 'Are you sure delete this item?',
+      icon: <ExclamationCircleFilled />,
+      content: 'Some descriptions',
+      okText: 'Yes',
+      okType: 'danger',
+      cancelText: 'No',
+      async onOk() {
+        try {
+          const ret = await onOk?.();
+          resolve(ret);
+          console.info(ret);
+        } catch (error) {
+          reject(error);
+        }
+      },
+      onCancel() {
+        onCancel?.();
+      },
+    });
   });
 };
 
diff --git a/web/src/hooks/knowledgeHook.ts b/web/src/hooks/knowledgeHook.ts
index 5ce7bd217288aec4f203eac0cc8c5864b4aa166e..3c4df8cc70fdb87ea0281e1dd788966210b092b3 100644
--- a/web/src/hooks/knowledgeHook.ts
+++ b/web/src/hooks/knowledgeHook.ts
@@ -1,4 +1,6 @@
-import { useSearchParams } from 'umi';
+import showDeleteConfirm from '@/components/deleting-confirm';
+import { IKnowledge } from '@/interfaces/database/knowledge';
+import { useDispatch, useSearchParams, useSelector } from 'umi';
 
 export const useKnowledgeBaseId = (): string => {
   const [searchParams] = useSearchParams();
@@ -6,3 +8,41 @@ export const useKnowledgeBaseId = (): string => {
 
   return knowledgeBaseId || '';
 };
+
+export const useDeleteDocumentById = (): {
+  removeDocument: (documentId: string) => Promise<number>;
+} => {
+  const dispatch = useDispatch();
+  const knowledgeBaseId = useKnowledgeBaseId();
+
+  const removeDocument = (documentId: string) => () => {
+    return dispatch({
+      type: 'kFModel/document_rm',
+      payload: {
+        doc_id: documentId,
+        kb_id: knowledgeBaseId,
+      },
+    });
+  };
+
+  const onRmDocument = (documentId: string): Promise<number> => {
+    return showDeleteConfirm({ onOk: removeDocument(documentId) });
+  };
+
+  return {
+    removeDocument: onRmDocument,
+  };
+};
+
+export const useGetDocumentDefaultParser = (knowledgeBaseId: string) => {
+  const data: IKnowledge[] = useSelector(
+    (state: any) => state.knowledgeModel.data,
+  );
+
+  const item = data.find((x) => x.id === knowledgeBaseId);
+
+  return {
+    defaultParserId: item?.parser_id ?? '',
+    parserConfig: item?.parser_config ?? '',
+  };
+};
diff --git a/web/src/interfaces/common.ts b/web/src/interfaces/common.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f99511fa3f661dfbc45d34db40b00cc2cbb5668c
--- /dev/null
+++ b/web/src/interfaces/common.ts
@@ -0,0 +1,8 @@
+export interface Pagination {
+  current: number;
+  pageSize: number;
+}
+
+export interface BaseState {
+  pagination: Pagination;
+}
diff --git a/web/src/interfaces/database/knowledge.ts b/web/src/interfaces/database/knowledge.ts
index c8a952aa918e6332f4ebaff78f6dccc63bc2e919..24cebae515c393e3a902c8010b7aa04dcda11c34 100644
--- a/web/src/interfaces/database/knowledge.ts
+++ b/web/src/interfaces/database/knowledge.ts
@@ -1,5 +1,33 @@
 import { RunningStatus } from '@/constants/knowledge';
 
+// knowledge base
+export interface IKnowledge {
+  avatar?: any;
+  chunk_num: number;
+  create_date: string;
+  create_time: number;
+  created_by: string;
+  description: string;
+  doc_num: number;
+  id: string;
+  name: string;
+  parser_config: Parserconfig;
+  parser_id: string;
+  permission: string;
+  similarity_threshold: number;
+  status: string;
+  tenant_id: string;
+  token_num: number;
+  update_date: string;
+  update_time: number;
+  vector_similarity_weight: number;
+}
+
+export interface Parserconfig {
+  from_page: number;
+  to_page: number;
+}
+
 export interface IKnowledgeFile {
   chunk_num: number;
   create_date: string;
@@ -24,3 +52,16 @@ export interface IKnowledgeFile {
   update_date: string;
   update_time: number;
 }
+
+export interface ITenantInfo {
+  asr_id: string;
+  embd_id: string;
+  img2txt_id: string;
+  llm_id: string;
+  name: string;
+  parser_ids: string;
+  role: string;
+  tenant_id: string;
+  chat_id: string;
+  speech2text_id: string;
+}
diff --git a/web/src/less/variable.less b/web/src/less/variable.less
index 4820d07f6b4847d219cb78eb76ce38e7931c0f56..3ade35962c2806263d9f517631d88eff7ec0867b 100644
--- a/web/src/less/variable.less
+++ b/web/src/less/variable.less
@@ -5,6 +5,7 @@
 @gray3: rgba(52, 48, 62, 1);
 @gray8: rgba(165, 163, 169, 1);
 @gray11: rgba(232, 232, 234, 1);
+@purple: rgba(127, 86, 217, 1);
 
 @fontSize12: 12px;
 @fontSize14: 14px;
diff --git a/web/src/pages/add-knowledge/components/knowledge-dataset/knowledge-upload-file/index.less b/web/src/pages/add-knowledge/components/knowledge-dataset/knowledge-upload-file/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..351427280a79f05e182c030ffcd2ed2467f61ca1
--- /dev/null
+++ b/web/src/pages/add-knowledge/components/knowledge-dataset/knowledge-upload-file/index.less
@@ -0,0 +1,65 @@
+.uploadWrapper {
+  display: flex;
+  flex-direction: column;
+  padding: 32px;
+  height: 100%;
+  .backToList {
+    padding-bottom: 60px;
+  }
+  .footer {
+    text-align: right;
+    .nextButton {
+      background-color: @purple;
+    }
+  }
+  .uploadContent {
+    flex: 1;
+    padding-top: 60px;
+  }
+  .uploader {
+    display: block;
+    height: 200px;
+  }
+  .hiddenUploader {
+    :global(.ant-upload-drag) {
+      display: none;
+    }
+  }
+  .fileIcon {
+    font-size: 40px;
+    align-items: end;
+  }
+  .deleteIcon {
+    font-size: 20px;
+  }
+  .uploaderItem {
+    margin-top: 16px;
+    :global(.ant-card-body) {
+      padding: 16px;
+    }
+  }
+  .uploaderItemProgress {
+    padding-left: 50px;
+  }
+  .uploaderItemTextWrapper {
+    flex: 1;
+    text-align: left;
+    padding-left: 10px;
+  }
+}
+
+.progressWrapper {
+  text-align: center;
+}
+
+.progress {
+  width: 50%;
+  margin: 0;
+}
+
+.selectFilesText {
+  transform: translateX(10%);
+}
+.changeSpecificCategoryText {
+  transform: translateX(30%);
+}
diff --git a/web/src/pages/add-knowledge/components/knowledge-dataset/knowledge-upload-file/index.tsx b/web/src/pages/add-knowledge/components/knowledge-dataset/knowledge-upload-file/index.tsx
index e2b5109ae755157319308ecb3b7537423d9e50e8..acb6bb5d9819a7c29fd1d354fe44408e8a210883 100644
--- a/web/src/pages/add-knowledge/components/knowledge-dataset/knowledge-upload-file/index.tsx
+++ b/web/src/pages/add-knowledge/components/knowledge-dataset/knowledge-upload-file/index.tsx
@@ -1,5 +1,266 @@
+import { ReactComponent as SelectFilesEndIcon } from '@/assets/svg/select-files-end.svg';
+import { ReactComponent as SelectFilesStartIcon } from '@/assets/svg/select-files-start.svg';
+import {
+  useDeleteDocumentById,
+  useGetDocumentDefaultParser,
+  useKnowledgeBaseId,
+} from '@/hooks/knowledgeHook';
+import { ITenantInfo } from '@/interfaces/database/knowledge';
+import uploadService from '@/services/uploadService';
+import {
+  ArrowLeftOutlined,
+  DeleteOutlined,
+  EditOutlined,
+  FileDoneOutlined,
+  InboxOutlined,
+} from '@ant-design/icons';
+import {
+  Button,
+  Card,
+  Flex,
+  Popover,
+  Progress,
+  Radio,
+  RadioChangeEvent,
+  Space,
+  Upload,
+  UploadFile,
+  UploadProps,
+} from 'antd';
+import classNames from 'classnames';
+import { ReactElement, useEffect, useState } from 'react';
+import { Nullable } from 'typings';
+import { Link, useDispatch, useNavigate, useSelector } from 'umi';
+
+import { KnowledgeRouteKey } from '@/constants/knowledge';
+import styles from './index.less';
+
+const { Dragger } = Upload;
+
+type UploadRequestOption = Parameters<
+  NonNullable<UploadProps['customRequest']>
+>[0];
+
+const UploaderItem = ({
+  file,
+  actions,
+  isUpload,
+  parserArray,
+}: {
+  isUpload: boolean;
+  originNode: ReactElement;
+  file: UploadFile;
+  fileList: object[];
+  parserArray: string[];
+  actions: { download: Function; preview: Function; remove: any };
+}) => {
+  const { parserConfig, defaultParserId } = useGetDocumentDefaultParser(
+    file?.response?.kb_id,
+  );
+  const { removeDocument } = useDeleteDocumentById();
+  const [value, setValue] = useState(defaultParserId);
+  const dispatch = useDispatch();
+
+  const documentId = file?.response?.id;
+
+  const onChange = (e: RadioChangeEvent) => {
+    const val = e.target.value;
+    setValue(val);
+    saveParser(val);
+  };
+
+  const content = (
+    <Radio.Group onChange={onChange} value={value}>
+      <Space direction="vertical">
+        {parserArray.map((x) => (
+          <Radio value={x} key={x}>
+            {x}
+          </Radio>
+        ))}
+      </Space>
+    </Radio.Group>
+  );
+
+  const handleRemove = async () => {
+    const ret: any = await removeDocument(documentId);
+    if (ret === 0) {
+      actions?.remove();
+    }
+  };
+
+  const saveParser = (parserId: string) => {
+    dispatch({
+      type: 'kFModel/document_change_parser',
+      payload: {
+        parser_id: parserId,
+        doc_id: documentId,
+        parser_config: parserConfig,
+      },
+    });
+  };
+
+  useEffect(() => {
+    setValue(defaultParserId);
+  }, [defaultParserId]);
+
+  return (
+    <Card className={styles.uploaderItem}>
+      <Flex justify="space-between">
+        <FileDoneOutlined className={styles.fileIcon} />
+        <section className={styles.uploaderItemTextWrapper}>
+          <div>
+            <b>{file.name}</b>
+          </div>
+          <span>{file.size}</span>
+        </section>
+        {isUpload ? (
+          <DeleteOutlined
+            className={styles.deleteIcon}
+            onClick={handleRemove}
+          />
+        ) : (
+          <Popover content={content} placement="bottom">
+            <EditOutlined />
+          </Popover>
+        )}
+      </Flex>
+      <Flex>
+        <Progress
+          showInfo={false}
+          percent={100}
+          className={styles.uploaderItemProgress}
+          strokeColor="
+        rgba(127, 86, 217, 1)
+        "
+        />
+        <span>100%</span>
+      </Flex>
+    </Card>
+  );
+};
+
 const KnowledgeUploadFile = () => {
-  return <div>KnowledgeUploadFile</div>;
+  const knowledgeBaseId = useKnowledgeBaseId();
+  const [isUpload, setIsUpload] = useState(true);
+  const dispatch = useDispatch();
+  const tenantIfo: Nullable<ITenantInfo> = useSelector(
+    (state: any) => state.settingModel.tenantIfo,
+  );
+  const navigate = useNavigate();
+
+  const parserArray = tenantIfo?.parser_ids.split(',') ?? [];
+
+  const createRequest: (props: UploadRequestOption) => void = async function ({
+    file,
+    onSuccess,
+    onError,
+    onProgress,
+  }) {
+    const { data } = await uploadService.uploadFile(file, knowledgeBaseId);
+    if (data.retcode === 0) {
+      onSuccess && onSuccess(data.data);
+    } else {
+      onError && onError(data.data);
+    }
+  };
+
+  const props: UploadProps = {
+    name: 'file',
+    multiple: true,
+    itemRender(originNode, file, fileList, actions) {
+      return (
+        <UploaderItem
+          isUpload={isUpload}
+          file={file}
+          fileList={fileList}
+          originNode={originNode}
+          actions={actions}
+          parserArray={parserArray}
+        ></UploaderItem>
+      );
+    },
+    customRequest: createRequest,
+    onDrop(e) {
+      console.log('Dropped files', e.dataTransfer.files);
+    },
+  };
+
+  const handleNextClick = () => {
+    if (!isUpload) {
+      navigate(`/knowledge/${KnowledgeRouteKey.Dataset}?id=${knowledgeBaseId}`);
+    } else {
+      setIsUpload(false);
+    }
+  };
+
+  useEffect(() => {
+    dispatch({
+      type: 'settingModel/getTenantInfo',
+    });
+  }, []);
+
+  return (
+    <div className={styles.uploadWrapper}>
+      <section>
+        <Space className={styles.backToList}>
+          <ArrowLeftOutlined />
+          <Link to={`/knowledge/dataset?id=${knowledgeBaseId}`}>
+            Back to select files
+          </Link>
+        </Space>
+        <div className={styles.progressWrapper}>
+          <Flex align="center" justify="center">
+            <SelectFilesStartIcon></SelectFilesStartIcon>
+            <Progress
+              percent={100}
+              showInfo={false}
+              className={styles.progress}
+              strokeColor="
+               rgba(127, 86, 217, 1)
+              "
+            />
+            <SelectFilesEndIcon></SelectFilesEndIcon>
+          </Flex>
+          <Flex justify="space-around">
+            <p className={styles.selectFilesText}>
+              <b>Select files</b>
+            </p>
+            <p className={styles.changeSpecificCategoryText}>
+              <b>Change specific category</b>
+            </p>
+          </Flex>
+        </div>
+      </section>
+      <section className={styles.uploadContent}>
+        <Dragger
+          {...props}
+          className={classNames(styles.uploader, {
+            [styles.hiddenUploader]: !isUpload,
+          })}
+        >
+          <p className="ant-upload-drag-icon">
+            <InboxOutlined />
+          </p>
+          <p className="ant-upload-text">
+            Click or drag file to this area to upload
+          </p>
+          <p className="ant-upload-hint">
+            Support for a single or bulk upload. Strictly prohibited from
+            uploading company data or other banned files.
+          </p>
+        </Dragger>
+      </section>
+      <section className={styles.footer}>
+        <Button
+          type="primary"
+          className={styles.nextButton}
+          onClick={handleNextClick}
+        >
+          Next
+        </Button>
+      </section>
+    </div>
+  );
 };
 
 export default KnowledgeUploadFile;
diff --git a/web/src/pages/add-knowledge/components/knowledge-file/index.tsx b/web/src/pages/add-knowledge/components/knowledge-file/index.tsx
index aa8d18a0d3d34fc4eb322c1cad795d80c21e3734..416a5181ccb8845cb83ee6ab48b3e523280ff280 100644
--- a/web/src/pages/add-knowledge/components/knowledge-file/index.tsx
+++ b/web/src/pages/add-knowledge/components/knowledge-file/index.tsx
@@ -1,5 +1,9 @@
 import { KnowledgeRouteKey } from '@/constants/knowledge';
-import { useKnowledgeBaseId } from '@/hooks/knowledgeHook';
+import {
+  useDeleteDocumentById,
+  useKnowledgeBaseId,
+} from '@/hooks/knowledgeHook';
+import { Pagination } from '@/interfaces/common';
 import { IKnowledgeFile } from '@/interfaces/database/knowledge';
 import { getOneNamespaceEffectsLoading } from '@/utils/stroreUtil';
 import { PlusOutlined, SearchOutlined } from '@ant-design/icons';
@@ -15,8 +19,8 @@ import {
   Tag,
 } from 'antd';
 import type { ColumnsType } from 'antd/es/table';
-import { debounce } from 'lodash';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { PaginationProps } from 'antd/lib';
+import React, { useEffect, useMemo, useState } from 'react';
 import { useDispatch, useNavigate, useSelector } from 'umi';
 import CreateEPModal from './createEFileModal';
 import styles from './index.less';
@@ -30,50 +34,90 @@ const KnowledgeFile = () => {
   const dispatch = useDispatch();
   const kFModel = useSelector((state: any) => state.kFModel);
   const effects = useSelector((state: any) => state.loading.effects);
-  const { data } = kFModel;
+  const { data, total } = kFModel;
   const knowledgeBaseId = useKnowledgeBaseId();
+  const { removeDocument } = useDeleteDocumentById();
 
   const loading = getOneNamespaceEffectsLoading('kFModel', effects, [
     'getKfList',
     'updateDocumentStatus',
   ]);
-  const [inputValue, setInputValue] = useState('');
   const [doc_id, setDocId] = useState('0');
   const [parser_id, setParserId] = useState('0');
   let navigate = useNavigate();
 
-  const getKfList = (keywords?: string) => {
+  const getKfList = () => {
     const payload = {
       kb_id: knowledgeBaseId,
-      keywords,
     };
-    if (!keywords) {
-      delete payload.keywords;
-    }
+
     dispatch({
       type: 'kFModel/getKfList',
       payload,
     });
   };
 
+  const throttledGetDocumentList = () => {
+    dispatch({
+      type: 'kFModel/throttledGetDocumentList',
+      payload: knowledgeBaseId,
+    });
+  };
+
+  const setPagination = (pageNumber = 1, pageSize?: number) => {
+    const pagination: Pagination = {
+      current: pageNumber,
+    } as Pagination;
+    if (pageSize) {
+      pagination.pageSize = pageSize;
+    }
+    dispatch({
+      type: 'kFModel/setPagination',
+      payload: pagination,
+    });
+  };
+
+  const onPageChange: PaginationProps['onChange'] = (pageNumber, pageSize) => {
+    setPagination(pageNumber, pageSize);
+    getKfList();
+  };
+
+  const pagination: PaginationProps = useMemo(() => {
+    return {
+      showQuickJumper: true,
+      total,
+      showSizeChanger: true,
+      current: kFModel.pagination.currentPage,
+      pageSize: kFModel.pagination.pageSize,
+      pageSizeOptions: [1, 2, 10, 20, 50, 100],
+      onChange: onPageChange,
+    };
+  }, [total, kFModel.pagination]);
+
   useEffect(() => {
     if (knowledgeBaseId) {
       getKfList();
+      dispatch({
+        type: 'kFModel/pollGetDocumentList-start',
+        payload: knowledgeBaseId,
+      });
     }
+    return () => {
+      dispatch({
+        type: 'kFModel/pollGetDocumentList-stop',
+      });
+    };
   }, [knowledgeBaseId]);
 
-  const debounceChange = debounce(getKfList, 300);
-  const debounceCallback = useCallback(
-    (value: string) => debounceChange(value),
-    [],
-  );
   const handleInputChange = (
     e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
   ) => {
     const value = e.target.value;
-    setInputValue(value);
-    debounceCallback(e.target.value);
+    dispatch({ type: 'kFModel/setSearchString', payload: value });
+    setPagination();
+    throttledGetDocumentList();
   };
+
   const onChangeStatus = (e: boolean, doc_id: string) => {
     dispatch({
       type: 'kFModel/updateDocumentStatus',
@@ -85,13 +129,7 @@ const KnowledgeFile = () => {
     });
   };
   const onRmDocument = () => {
-    dispatch({
-      type: 'kFModel/document_rm',
-      payload: {
-        doc_id,
-        kb_id: knowledgeBaseId,
-      },
-    });
+    removeDocument(doc_id);
   };
   const showCEFModal = () => {
     dispatch({
@@ -226,7 +264,6 @@ const KnowledgeFile = () => {
       key: 'action',
       render: (_, record) => (
         <ParsingActionCell
-          documentId={doc_id}
           knowledgeBaseId={knowledgeBaseId}
           setDocumentAndParserId={setDocumentAndParserId(record)}
           record={record}
@@ -248,12 +285,12 @@ const KnowledgeFile = () => {
       <div className={styles.filter}>
         <Space>
           <h3>Total</h3>
-          <Tag color="purple">100 files</Tag>
+          <Tag color="purple">{total} files</Tag>
         </Space>
         <Space>
           <Input
             placeholder="Seach your files"
-            value={inputValue}
+            value={kFModel.searchString}
             style={{ width: 220 }}
             allowClear
             onChange={handleInputChange}
@@ -272,7 +309,7 @@ const KnowledgeFile = () => {
         columns={finalColumns}
         dataSource={data}
         loading={loading}
-        pagination={false}
+        pagination={pagination}
         scroll={{ scrollToFirstRowOnChange: true, x: true, y: 'fill' }}
       />
       <CreateEPModal getKfList={getKfList} kb_id={knowledgeBaseId} />
diff --git a/web/src/pages/add-knowledge/components/knowledge-file/model.ts b/web/src/pages/add-knowledge/components/knowledge-file/model.ts
index 9b5ff2b1368ab89f9320acbf86f87c50946d9e6f..bc24bda4bd0986a5d41333c25241e2e085849c05 100644
--- a/web/src/pages/add-knowledge/components/knowledge-file/model.ts
+++ b/web/src/pages/add-knowledge/components/knowledge-file/model.ts
@@ -1,3 +1,4 @@
+import { BaseState } from '@/interfaces/common';
 import { IKnowledgeFile } from '@/interfaces/database/knowledge';
 import kbService from '@/services/kbService';
 import { message } from 'antd';
@@ -6,14 +7,16 @@ import pick from 'lodash/pick';
 import { Nullable } from 'typings';
 import { DvaModel } from 'umi';
 
-export interface KFModelState {
+export interface KFModelState extends BaseState {
   isShowCEFwModal: boolean;
   isShowTntModal: boolean;
   isShowSegmentSetModal: boolean;
   isShowRenameModal: boolean;
   tenantIfo: any;
   data: IKnowledgeFile[];
+  total: number;
   currentRecord: Nullable<IKnowledgeFile>;
+  searchString: string;
 }
 
 const model: DvaModel<KFModelState> = {
@@ -25,7 +28,13 @@ const model: DvaModel<KFModelState> = {
     isShowRenameModal: false,
     tenantIfo: {},
     data: [],
+    total: 0,
     currentRecord: null,
+    searchString: '',
+    pagination: {
+      current: 1,
+      pageSize: 10,
+    },
   },
   reducers: {
     updateState(state, { payload }) {
@@ -40,6 +49,12 @@ const model: DvaModel<KFModelState> = {
     setCurrentRecord(state, { payload }) {
       return { ...state, currentRecord: payload };
     },
+    setSearchString(state, { payload }) {
+      return { ...state, searchString: payload };
+    },
+    setPagination(state, { payload }) {
+      return { ...state, pagination: { ...state.pagination, ...payload } };
+    },
   },
   subscriptions: {
     setup({ dispatch, history }) {
@@ -69,22 +84,41 @@ const model: DvaModel<KFModelState> = {
         callback && callback(res);
       }
     },
-    *getKfList({ payload = {} }, { call, put }) {
-      const { data, response } = yield call(
-        kbService.get_document_list,
-        payload,
-      );
-      const { retcode, data: res, retmsg } = data;
+    *getKfList({ payload = {} }, { call, put, select }) {
+      const state: KFModelState = yield select((state: any) => state.kFModel);
+      const requestBody = {
+        ...payload,
+        page: state.pagination.current,
+        page_size: state.pagination.pageSize,
+      };
+      if (state.searchString) {
+        requestBody['keywords'] = state.searchString;
+      }
+      const { data } = yield call(kbService.get_document_list, requestBody);
+      const { retcode, data: res } = data;
 
       if (retcode === 0) {
         yield put({
           type: 'updateState',
           payload: {
-            data: res,
+            data: res.docs,
+            total: res.total,
           },
         });
       }
     },
+    throttledGetDocumentList: [
+      function* ({ payload }, { call, put }) {
+        yield put({ type: 'getKfList', payload: { kb_id: payload } });
+      },
+      { type: 'throttle', ms: 1000 }, // TODO: Provide type support for this effect
+    ],
+    pollGetDocumentList: [
+      function* ({ payload }, { call, put }) {
+        yield put({ type: 'getKfList', payload: { kb_id: payload } });
+      },
+      { type: 'poll', delay: 5000 }, // TODO: Provide type support for this effect
+    ],
     *updateDocumentStatus({ payload = {} }, { call, put }) {
       const { data, response } = yield call(
         kbService.document_change_status,
@@ -106,11 +140,12 @@ const model: DvaModel<KFModelState> = {
       const { retcode, data: res, retmsg } = data;
       if (retcode === 0) {
         message.success('删除成功!');
-        put({
+        yield put({
           type: 'getKfList',
           payload: { kb_id: payload.kb_id },
         });
       }
+      return retcode;
     },
     *document_rename({ payload = {} }, { call, put }) {
       const { data } = yield call(
diff --git a/web/src/pages/add-knowledge/components/knowledge-file/parsing-action-cell/index.tsx b/web/src/pages/add-knowledge/components/knowledge-file/parsing-action-cell/index.tsx
index 08ccb5db0dfe8316212fdcb58a4a4edf9ca5a431..0de4657399418398c571e776a32366cb8c645d79 100644
--- a/web/src/pages/add-knowledge/components/knowledge-file/parsing-action-cell/index.tsx
+++ b/web/src/pages/add-knowledge/components/knowledge-file/parsing-action-cell/index.tsx
@@ -5,19 +5,18 @@ import { Button, Dropdown, MenuProps, Space, Tooltip } from 'antd';
 import { useDispatch } from 'umi';
 
 interface IProps {
-  documentId: string;
   knowledgeBaseId: string;
   record: IKnowledgeFile;
   setDocumentAndParserId: () => void;
 }
 
 const ParsingActionCell = ({
-  documentId,
   knowledgeBaseId,
   record,
   setDocumentAndParserId,
 }: IProps) => {
   const dispatch = useDispatch();
+  const documentId = record.id;
 
   const removeDocument = () => {
     dispatch({
diff --git a/web/src/pages/add-knowledge/components/knowledge-file/segmentSetModal.tsx b/web/src/pages/add-knowledge/components/knowledge-file/segmentSetModal.tsx
index 23b07e1fa65e76642088510a3555ea329b30d72b..07853c2c1cab8dcf3029492ff8fd7de824934122 100644
--- a/web/src/pages/add-knowledge/components/knowledge-file/segmentSetModal.tsx
+++ b/web/src/pages/add-knowledge/components/knowledge-file/segmentSetModal.tsx
@@ -18,8 +18,7 @@ const SegmentSetModal: React.FC<kFProps> = ({
   const kFModel = useSelector((state: any) => state.kFModel);
   const settingModel = useSelector((state: any) => state.settingModel);
   const [selectedTag, setSelectedTag] = useState('');
-  const { tenantIfo = {} } = settingModel;
-  const { parser_ids = '' } = tenantIfo;
+  const parser_ids = settingModel?.tenantIfo?.parser_ids ?? '';
   const { isShowSegmentSetModal } = kFModel;
   const { t } = useTranslation();
 
diff --git a/web/src/pages/add-knowledge/components/knowledge-file/upload.tsx b/web/src/pages/add-knowledge/components/knowledge-file/upload.tsx
index 656c8d7360443f1e9dfd8e0b204ae1f0c03d3c96..39a859403c630a162985e21ff238b28f7d3e5cbc 100644
--- a/web/src/pages/add-knowledge/components/knowledge-file/upload.tsx
+++ b/web/src/pages/add-knowledge/components/knowledge-file/upload.tsx
@@ -1,7 +1,8 @@
+import { useKnowledgeBaseId } from '@/hooks/knowledgeHook';
 import uploadService from '@/services/uploadService';
 import type { UploadProps } from 'antd';
-import { Button, Upload } from 'antd';
 import React from 'react';
+import { Link } from 'umi';
 interface PropsType {
   kb_id: string;
   getKfList: () => void;
@@ -12,6 +13,8 @@ type UploadRequestOption = Parameters<
 >[0];
 
 const FileUpload: React.FC<PropsType> = ({ kb_id, getKfList }) => {
+  const knowledgeBaseId = useKnowledgeBaseId();
+
   const createRequest: (props: UploadRequestOption) => void = async function ({
     file,
     onSuccess,
@@ -30,9 +33,9 @@ const FileUpload: React.FC<PropsType> = ({ kb_id, getKfList }) => {
     showUploadList: false,
   };
   return (
-    <Upload {...uploadProps}>
-      <Button type="link">导入文件</Button>
-    </Upload>
+    // <Upload {...uploadProps}>
+    <Link to={`/knowledge/dataset/upload?id=${knowledgeBaseId}`}>导入文件</Link>
+    // </Upload>
   );
 };
 
diff --git a/web/src/pages/add-knowledge/components/knowledge-sidebar/index.tsx b/web/src/pages/add-knowledge/components/knowledge-sidebar/index.tsx
index e02c24f2062c9ecea20353cadcdf833721f5d040..932737fcdc27a3cd4b1161baf288b3db9352918f 100644
--- a/web/src/pages/add-knowledge/components/knowledge-sidebar/index.tsx
+++ b/web/src/pages/add-knowledge/components/knowledge-sidebar/index.tsx
@@ -75,7 +75,6 @@ const KnowledgeSidebar = () => {
   useEffect(() => {
     const widthSize = () => {
       const width = getWidth();
-      console.log(width);
 
       setWindowWidth(width);
     };
@@ -106,7 +105,7 @@ const KnowledgeSidebar = () => {
             [styles.defaultWidth]: windowWidth.width > 957,
             [styles.minWidth]: windowWidth.width <= 957,
           })}
-          inlineCollapsed={collapsed}
+          // inlineCollapsed={collapsed}
           items={items}
           onSelect={handleSelect}
         />
diff --git a/web/src/pages/add-knowledge/index.less b/web/src/pages/add-knowledge/index.less
index 78534efd75e131b81493231e6a786264f52a3316..10a8f02da7fd17f34dc2e3d22301126f0ae00e0e 100644
--- a/web/src/pages/add-knowledge/index.less
+++ b/web/src/pages/add-knowledge/index.less
@@ -13,6 +13,6 @@
   .content {
     background-color: white;
     margin-top: 16px;
-    // flex: 1;
+    flex: 1;
   }
 }
diff --git a/web/src/pages/setting/model.ts b/web/src/pages/setting/model.ts
index bc3a5f1d9731c93130a970f9a318e0c6158ad8a9..4a843e9dff05809112f14a6799d2d7c1073222fb 100644
--- a/web/src/pages/setting/model.ts
+++ b/web/src/pages/setting/model.ts
@@ -1,6 +1,8 @@
+import { ITenantInfo } from '@/interfaces/database/knowledge';
 import userService from '@/services/userService';
 import authorizationUtil from '@/utils/authorizationUtil';
 import { message } from 'antd';
+import { Nullable } from 'typings';
 import { DvaModel } from 'umi';
 
 export interface SettingModelState {
@@ -9,7 +11,7 @@ export interface SettingModelState {
   isShowSAKModal: boolean;
   isShowSSModal: boolean;
   llm_factory: string;
-  tenantIfo: any;
+  tenantIfo: Nullable<ITenantInfo>;
   llmInfo: any;
   myLlm: any[];
   factoriesList: any[];
@@ -23,7 +25,7 @@ const model: DvaModel<SettingModelState> = {
     isShowSAKModal: false,
     isShowSSModal: false,
     llm_factory: '',
-    tenantIfo: {},
+    tenantIfo: null,
     llmInfo: {},
     myLlm: [],
     factoriesList: [],
@@ -73,23 +75,11 @@ const model: DvaModel<SettingModelState> = {
       }
     },
     *getTenantInfo({ payload = {} }, { call, put }) {
-      yield put({
-        type: 'updateState',
-        payload: {
-          loading: true,
-        },
-      });
       const { data } = yield call(userService.get_tenant_info, payload);
       const { retcode, data: res } = data;
       // llm_id 对应chat_id
       // asr_id 对应speech2txt
 
-      yield put({
-        type: 'updateState',
-        payload: {
-          loading: false,
-        },
-      });
       if (retcode === 0) {
         res.chat_id = res.llm_id;
         res.speech2text_id = res.asr_id;
diff --git a/web/src/services/uploadService.ts b/web/src/services/uploadService.ts
index 159e050c6274e8ce2f772a832b6119b618951406..6c4d43a6d33f58b824a088f3ce4dd5c5aa4d8ce6 100644
--- a/web/src/services/uploadService.ts
+++ b/web/src/services/uploadService.ts
@@ -1,21 +1,21 @@
-import request from '@/utils/request';
 import api from '@/utils/api';
+import request from '@/utils/request';
 
 const { upload } = api;
 
 const uploadService = {
-  uploadFile: function (file, kb_id) {
+  uploadFile: function (file: any, kb_id: string) {
     const formData = new FormData();
     formData.append('file', file);
     formData.append('kb_id', kb_id);
 
     const options = {
       method: 'post',
-      data: formData
+      data: formData,
     };
 
     return request(upload, options);
-  }
+  },
 };
 
 export default uploadService;