fix: cannot save the system model setting infiniflow#468 (infiniflow#508

)

### What problem does this PR solve?

fix: cannot save the system model setting infiniflow#468
feat: rename file in FileManager
feat: add FileManager
feat: override useSelector type

### Type of change

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

web/.umirc.ts

@@ -27,7 +27,7 @@ export default defineConfig({
   devtool: 'source-map',
   proxy: {
     '/v1': {
-      target: 'http://123.60.95.134:9380/',
+      target: 'http://192.168.200.233:9380/',
       changeOrigin: true,
       // pathRewrite: { '^/v1': '/v1' },
     },

web/externals.d.ts

@@ -0,0 +1,138 @@
+// This file is generated by Umi automatically
+// DO NOT CHANGE IT MANUALLY!
+type CSSModuleClasses = { readonly [key: string]: string };
+declare module '*.css' {
+  const classes: CSSModuleClasses;
+  export default classes;
+}
+declare module '*.scss' {
+  const classes: CSSModuleClasses;
+  export default classes;
+}
+declare module '*.sass' {
+  const classes: CSSModuleClasses;
+  export default classes;
+}
+declare module '*.less' {
+  const classes: CSSModuleClasses;
+  export default classes;
+}
+declare module '*.styl' {
+  const classes: CSSModuleClasses;
+  export default classes;
+}
+declare module '*.stylus' {
+  const classes: CSSModuleClasses;
+  export default classes;
+}
+
+// images
+declare module '*.jpg' {
+  const src: string;
+  export default src;
+}
+declare module '*.jpeg' {
+  const src: string;
+  export default src;
+}
+declare module '*.png' {
+  const src: string;
+  export default src;
+}
+declare module '*.gif' {
+  const src: string;
+  export default src;
+}
+declare module '*.svg' {
+  import * as React from 'react';
+  export const ReactComponent: React.FunctionComponent<
+    React.SVGProps<SVGSVGElement> & { title?: string }
+  >;
+
+  const src: string;
+  export default src;
+}
+declare module '*.ico' {
+  const src: string;
+  export default src;
+}
+declare module '*.webp' {
+  const src: string;
+  export default src;
+}
+declare module '*.avif' {
+  const src: string;
+  export default src;
+}
+
+// media
+declare module '*.mp4' {
+  const src: string;
+  export default src;
+}
+declare module '*.webm' {
+  const src: string;
+  export default src;
+}
+declare module '*.ogg' {
+  const src: string;
+  export default src;
+}
+declare module '*.mp3' {
+  const src: string;
+  export default src;
+}
+declare module '*.wav' {
+  const src: string;
+  export default src;
+}
+declare module '*.flac' {
+  const src: string;
+  export default src;
+}
+declare module '*.aac' {
+  const src: string;
+  export default src;
+}
+
+// fonts
+declare module '*.woff' {
+  const src: string;
+  export default src;
+}
+declare module '*.woff2' {
+  const src: string;
+  export default src;
+}
+declare module '*.eot' {
+  const src: string;
+  export default src;
+}
+declare module '*.ttf' {
+  const src: string;
+  export default src;
+}
+declare module '*.otf' {
+  const src: string;
+  export default src;
+}
+
+// other
+declare module '*.wasm' {
+  const initWasm: (
+    options: WebAssembly.Imports,
+  ) => Promise<WebAssembly.Exports>;
+  export default initWasm;
+}
+declare module '*.webmanifest' {
+  const src: string;
+  export default src;
+}
+declare module '*.pdf' {
+  const src: string;
+  export default src;
+}
+declare module '*.txt' {
+  const src: string;
+  export default src;
+}

web/src/hooks/fileManagerHooks.ts

@@ -0,0 +1,80 @@
+import { IFileListRequestBody } from '@/interfaces/request/file-manager';
+import { useCallback } from 'react';
+import { useDispatch, useSelector } from 'umi';
+
+export const useFetchFileList = () => {
+  const dispatch = useDispatch();
+
+  const fetchFileList = useCallback(
+    (payload: IFileListRequestBody) => {
+      return dispatch<any>({
+        type: 'fileManager/listFile',
+        payload,
+      });
+    },
+    [dispatch],
+  );
+
+  return fetchFileList;
+};
+
+export const useRemoveFile = () => {
+  const dispatch = useDispatch();
+
+  const removeFile = useCallback(
+    (fileIds: string[]) => {
+      return dispatch<any>({
+        type: 'fileManager/removeFile',
+        payload: { fileIds },
+      });
+    },
+    [dispatch],
+  );
+
+  return removeFile;
+};
+
+export const useRenameFile = () => {
+  const dispatch = useDispatch();
+
+  const renameFile = useCallback(
+    (fileId: string, name: string) => {
+      return dispatch<any>({
+        type: 'fileManager/renameFile',
+        payload: { fileId, name },
+      });
+    },
+    [dispatch],
+  );
+
+  return renameFile;
+};
+
+export const useFetchParentFolderList = () => {
+  const dispatch = useDispatch();
+
+  const fetchParentFolderList = useCallback(
+    (fileId: string) => {
+      return dispatch<any>({
+        type: 'fileManager/getAllParentFolder',
+        payload: { fileId },
+      });
+    },
+    [dispatch],
+  );
+
+  return fetchParentFolderList;
+};
+
+export const useSelectFileList = () => {
+  const fileList = useSelector((state) => state.fileManager.fileList);
+
+  return fileList;
+};
+
+export const useSelectParentFolderList = () => {
+  const parentFolderList = useSelector(
+    (state) => state.fileManager.parentFolderList,
+  );
+  return parentFolderList.toReversed();
+};

web/src/interfaces/database/file-manager.ts

@@ -0,0 +1,30 @@
+export interface IFile {
+  create_date: string;
+  create_time: number;
+  created_by: string;
+  id: string;
+  kb_ids: string[];
+  location: string;
+  name: string;
+  parent_id: string;
+  size: number;
+  tenant_id: string;
+  type: string;
+  update_date: string;
+  update_time: number;
+}
+
+export interface IFolder {
+  create_date: string;
+  create_time: number;
+  created_by: string;
+  id: string;
+  location: string;
+  name: string;
+  parent_id: string;
+  size: number;
+  tenant_id: string;
+  type: string;
+  update_date: string;
+  update_time: number;
+}

web/src/interfaces/request/base.ts

@@ -0,0 +1,7 @@
+export interface IPaginationRequestBody {
+  keywords?: string;
+  page?: number;
+  page_size?: number; // name|create|doc_num|create_time|update_time，default：create_time
+  orderby?: string;
+  desc?: string;
+}

web/src/interfaces/request/file-manager.ts

@@ -0,0 +1,5 @@
+import { IPaginationRequestBody } from './base';
+
+export interface IFileListRequestBody extends IPaginationRequestBody {
+  parent_id?: string; // folder id
+}

web/src/layouts/components/header/index.tsx

@@ -1,4 +1,5 @@
 import { ReactComponent as StarIon } from '@/assets/svg/chat-star.svg';
+// import { ReactComponent as FileIcon } from '@/assets/svg/file-management.svg';
 import { ReactComponent as KnowledgeBaseIcon } from '@/assets/svg/knowledge-base.svg';
 import { ReactComponent as Logo } from '@/assets/svg/logo.svg';
 import { useTranslate } from '@/hooks/commonHooks';

web/src/pages/add-knowledge/components/knowledge-file/document-toolbar.tsx

@@ -182,7 +182,14 @@ const DocumentToolbar = ({ selectedRowKeys, showCreateModal }: IProps) => {
         ),
       },
     ];
-  }, [handleDelete, handleRunClick, handleCancelClick, t]);
+  }, [
+    handleDelete,
+    handleRunClick,
+    handleCancelClick,
+    t,
+    handleDisableClick,
+    handleEnableClick,
+  ]);
 
   return (
     <div className={styles.filter}>

web/src/pages/file-manager/action-cell/index.tsx

@@ -0,0 +1,91 @@
+import { useShowDeleteConfirm, useTranslate } from '@/hooks/commonHooks';
+import { api_host } from '@/utils/api';
+import { downloadFile } from '@/utils/fileUtil';
+import {
+  DeleteOutlined,
+  DownloadOutlined,
+  EditOutlined,
+  ToolOutlined,
+} from '@ant-design/icons';
+import { Button, Space, Tooltip } from 'antd';
+
+import { useRemoveFile } from '@/hooks/fileManagerHooks';
+import { IFile } from '@/interfaces/database/file-manager';
+import styles from './index.less';
+
+interface IProps {
+  record: IFile;
+  setCurrentRecord: (record: any) => void;
+  showRenameModal: (record: IFile) => void;
+}
+
+const ActionCell = ({ record, setCurrentRecord, showRenameModal }: IProps) => {
+  const documentId = record.id;
+  const beingUsed = false;
+  const { t } = useTranslate('knowledgeDetails');
+  const removeDocument = useRemoveFile();
+  const showDeleteConfirm = useShowDeleteConfirm();
+
+  const onRmDocument = () => {
+    if (!beingUsed) {
+      showDeleteConfirm({
+        onOk: () => {
+          return removeDocument([documentId]);
+        },
+      });
+    }
+  };
+
+  const onDownloadDocument = () => {
+    downloadFile({
+      url: `${api_host}/document/get/${documentId}`,
+      filename: record.name,
+    });
+  };
+
+  const setRecord = () => {
+    setCurrentRecord(record);
+  };
+
+  const onShowRenameModal = () => {
+    setRecord();
+    showRenameModal(record);
+  };
+
+  return (
+    <Space size={0}>
+      <Button type="text" className={styles.iconButton}>
+        <ToolOutlined size={20} />
+      </Button>
+
+      <Tooltip title={t('rename', { keyPrefix: 'common' })}>
+        <Button
+          type="text"
+          disabled={beingUsed}
+          onClick={onShowRenameModal}
+          className={styles.iconButton}
+        >
+          <EditOutlined size={20} />
+        </Button>
+      </Tooltip>
+      <Button
+        type="text"
+        disabled={beingUsed}
+        onClick={onRmDocument}
+        className={styles.iconButton}
+      >
+        <DeleteOutlined size={20} />
+      </Button>
+      <Button
+        type="text"
+        disabled={beingUsed}
+        onClick={onDownloadDocument}
+        className={styles.iconButton}
+      >
+        <DownloadOutlined size={20} />
+      </Button>
+    </Space>
+  );
+};
+
+export default ActionCell;