diff --git a/frontend/src/components/dirent-detail/detail-item/index.js b/frontend/src/components/dirent-detail/detail-item/index.js
index 6f1ee5f8587..f0b03dc6ae3 100644
--- a/frontend/src/components/dirent-detail/detail-item/index.js
+++ b/frontend/src/components/dirent-detail/detail-item/index.js
@@ -32,7 +32,7 @@ DetailItem.defaultProps = {
 
 DetailItem.propTypes = {
   field: PropTypes.object.isRequired,
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array, PropTypes.object]),
+  value: PropTypes.any,
   children: PropTypes.any,
   valueId: PropTypes.string,
 };
diff --git a/frontend/src/components/dirent-detail/dirent-details/dir-details.js b/frontend/src/components/dirent-detail/dirent-details/dir-details.js
index 3d666a1d3c5..5afe937d3f1 100644
--- a/frontend/src/components/dirent-detail/dirent-details/dir-details.js
+++ b/frontend/src/components/dirent-detail/dirent-details/dir-details.js
@@ -22,7 +22,7 @@ const DirDetails = ({ repoID, repoInfo, dirent, direntType, path, direntDetail }
       }]} />
       <DetailItem field={{ type: CellType.MTIME, name: gettext('Last modified time') }} value={direntDetail.mtime} />
       {window.app.pageOptions.enableMetadataManagement && (
-        <MetadataDetails repoID={repoID} filePath={direntPath} direntType={direntType} direntDetail={direntDetail} />
+        <MetadataDetails repoID={repoID} filePath={direntPath} direntType={direntType} />
       )}
     </>
   );
diff --git a/frontend/src/components/dirent-detail/dirent-details/file-details.js b/frontend/src/components/dirent-detail/dirent-details/file-details.js
index 08a9f9d6943..24a83c1cdf6 100644
--- a/frontend/src/components/dirent-detail/dirent-details/file-details.js
+++ b/frontend/src/components/dirent-detail/dirent-details/file-details.js
@@ -46,7 +46,7 @@ const FileDetails = ({ repoID, repoInfo, dirent, path, direntDetail, direntType,
         </DetailItem>
       )}
       {window.app.pageOptions.enableMetadataManagement && (
-        <MetadataDetails repoID={repoID} filePath={direntPath} direntType={direntType} direntDetail={direntDetail} />
+        <MetadataDetails repoID={repoID} filePath={direntPath} direntType={direntType} />
       )}
       {isEditFileTagShow &&
         <EditFileTagPopover
diff --git a/frontend/src/components/dirent-detail/dirent-details/index.js b/frontend/src/components/dirent-detail/dirent-details/index.js
index 73cc879df5e..be12c07061e 100644
--- a/frontend/src/components/dirent-detail/dirent-details/index.js
+++ b/frontend/src/components/dirent-detail/dirent-details/index.js
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { siteRoot } from '../../../utils/constants';
 import { seafileAPI } from '../../../utils/seafile-api';
@@ -11,17 +11,17 @@ import FileDetails from './file-details';
 
 import './index.css';
 
-const DirentDetails = ({ dirent, path, repoID, currentRepoInfo, repoTags, fileTags, onItemDetailsClose, onFileTagChanged }) => {
+const DirentDetails = React.memo(({ dirent: propsDirent, path, repoID, currentRepoInfo, repoTags, fileTags, onItemDetailsClose, onFileTagChanged }) => {
   const [direntType, setDirentType] = useState('');
   const [direntDetail, setDirentDetail] = useState('');
-  const [folderDirent, setFolderDirent] = useState(null);
-  const direntRef = useRef(null);
+  const [dirent, setDirent] = useState(null);
 
   const updateDetailView = useCallback((repoID, dirent, direntPath) => {
     const apiName = dirent.type === 'file' ? 'getFileInfo' : 'getDirInfo';
     seafileAPI[apiName](repoID, direntPath).then(res => {
       setDirentType(dirent.type === 'file' ? 'file' : 'dir');
       setDirentDetail(res.data);
+      setDirent(dirent);
     }).catch(error => {
       const errMessage = Utils.getErrorMsg(error);
       toaster.danger(errMessage);
@@ -29,11 +29,11 @@ const DirentDetails = ({ dirent, path, repoID, currentRepoInfo, repoTags, fileTa
   }, []);
 
   useEffect(() => {
-    if (direntRef.current && dirent === direntRef.current) return;
-    direntRef.current = dirent;
-    if (dirent) {
-      const direntPath = Utils.joinPath(path, dirent.name);
-      updateDetailView(repoID, dirent, direntPath);
+    console.log('index 组件更新');
+    setDirent(null);
+    if (propsDirent) {
+      const direntPath = Utils.joinPath(path, propsDirent.name);
+      updateDetailView(repoID, propsDirent, direntPath);
       return;
     }
     const dirPath = Utils.getDirName(path);
@@ -47,25 +47,25 @@ const DirentDetails = ({ dirent, path, repoID, currentRepoInfo, repoTags, fileTa
           break;
         }
       }
-      setFolderDirent(folderDirent);
       updateDetailView(repoID, folderDirent, path);
     }).catch(error => {
       const errMessage = Utils.getErrorMsg(error);
       toaster.danger(errMessage);
     });
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [dirent, path, repoID]);
+  }, [propsDirent, path]);
 
-  if (!dirent && !folderDirent) return '';
-  const direntName = dirent ? dirent.name : folderDirent.name;
-  const smallIconUrl = dirent ? Utils.getDirentIcon(dirent) : Utils.getDirentIcon(folderDirent);
+  if (!dirent) return null;
+  const direntName = dirent.name;
+  const smallIconUrl = Utils.getDirentIcon(dirent);
   // let bigIconUrl = dirent ? Utils.getDirentIcon(dirent, true) : Utils.getDirentIcon(folderDirent, true);
   let bigIconUrl = '';
-  const isImg = dirent ? Utils.imageCheck(dirent.name) : Utils.imageCheck(folderDirent.name);
+  const isImg = Utils.imageCheck(dirent.name);
   // const isVideo = dirent ? Utils.videoCheck(dirent.name) : Utils.videoCheck(folderDirent.name);
   if (isImg) {
     bigIconUrl = `${siteRoot}thumbnail/${repoID}/1024` + Utils.encodePath(`${path === '/' ? '' : path}/${dirent.name}`);
   }
+
   return (
     <div className="detail-container">
       <Header title={direntName} icon={smallIconUrl} onClose={onItemDetailsClose} />
@@ -81,7 +81,7 @@ const DirentDetails = ({ dirent, path, repoID, currentRepoInfo, repoTags, fileTa
               <DirDetails
                 repoID={repoID}
                 repoInfo={currentRepoInfo}
-                dirent={dirent || folderDirent}
+                dirent={dirent}
                 direntType={direntType}
                 direntDetail={direntDetail}
                 path={path}
@@ -90,7 +90,7 @@ const DirentDetails = ({ dirent, path, repoID, currentRepoInfo, repoTags, fileTa
               <FileDetails
                 repoID={repoID}
                 repoInfo={currentRepoInfo}
-                dirent={dirent || folderDirent}
+                dirent={dirent}
                 direntType={direntType}
                 path={path}
                 direntDetail={direntDetail}
@@ -104,7 +104,7 @@ const DirentDetails = ({ dirent, path, repoID, currentRepoInfo, repoTags, fileTa
       </div>
     </div>
   );
-};
+});
 
 DirentDetails.propTypes = {
   repoID: PropTypes.string.isRequired,
diff --git a/frontend/src/metadata/metadata-details/index.js b/frontend/src/metadata/metadata-details/index.js
index e2ca524bb79..881cfa8369a 100644
--- a/frontend/src/metadata/metadata-details/index.js
+++ b/frontend/src/metadata/metadata-details/index.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { Utils } from '../../utils/utils';
 import metadataAPI from '../api';
@@ -7,14 +7,9 @@ import { normalizeFields, getCellValueByColumn } from './utils';
 import toaster from '../../components/toast';
 import DetailItem from '../../components/dirent-detail/detail-item';
 
-const MetadataDetails = ({ repoID, filePath, direntType, direntDetail, emptyTip }) => {
+const MetadataDetails = React.memo(({ repoID, filePath, direntType, emptyTip }) => {
   const [isLoading, setLoading] = useState(true);
   const [metadata, setMetadata] = useState({ record: {}, fields: [] });
-  const isEmptyFile = useMemo(() => {
-    if (direntType === 'dir') return false;
-    const direntDetailId = direntDetail?.id || '';
-    return direntDetailId === '0'.repeat(direntDetailId.length);
-  }, [direntDetail, direntType]);
 
   useEffect(() => {
     setLoading(true);
@@ -44,7 +39,7 @@ const MetadataDetails = ({ repoID, filePath, direntType, direntDetail, emptyTip
     const value = getCellValueByColumn(record, field);
     return (<DetailItem key={field.key} field={field} value={value} emptyTip={emptyTip}/>);
   });
-};
+});
 
 MetadataDetails.propTypes = {
   repoID: PropTypes.string,
diff --git a/frontend/src/metadata/metadata-view/components/index.js b/frontend/src/metadata/metadata-view/components/index.js
index f4e738015a7..b2e6502991a 100644
--- a/frontend/src/metadata/metadata-view/components/index.js
+++ b/frontend/src/metadata/metadata-view/components/index.js
@@ -1,9 +1,7 @@
 import DeleteConfirmDialog from './delete-confirm-dialog';
-import RecordDetailsDialog from './record-details-dialog';
 import Table from './table';
 
 export {
   DeleteConfirmDialog,
-  RecordDetailsDialog,
   Table,
 };
diff --git a/frontend/src/metadata/metadata-view/components/record-details-dialog/index.js b/frontend/src/metadata/metadata-view/components/record-details-dialog/index.js
deleted file mode 100644
index 8e2a52011cb..00000000000
--- a/frontend/src/metadata/metadata-view/components/record-details-dialog/index.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import React, { useMemo } from 'react';
-import RecordDetails from './record-details';
-import { useMetadata, useRecordDetails } from '../../hooks';
-
-const RecordDetailsDialog = () => {
-  const { isShowRecordDetails, recordDetails, closeRecordDetails } = useRecordDetails();
-  const { metadata } = useMetadata();
-  const fields = useMemo(() => {
-    const { columns, hidden_columns } = metadata.view;
-    return columns.filter(column => !hidden_columns.includes(column.key));
-  }, [metadata]);
-  if (!isShowRecordDetails) return null;
-
-  const props = {
-    record: recordDetails,
-    fields: fields,
-    onToggle: closeRecordDetails,
-  };
-  return (<RecordDetails { ...props } />);
-};
-
-export default RecordDetailsDialog;
diff --git a/frontend/src/metadata/metadata-view/components/record-details-dialog/record-details/field-label/index.css b/frontend/src/metadata/metadata-view/components/record-details-dialog/record-details/field-label/index.css
deleted file mode 100644
index d64507b997e..00000000000
--- a/frontend/src/metadata/metadata-view/components/record-details-dialog/record-details/field-label/index.css
+++ /dev/null
@@ -1,31 +0,0 @@
-.sf-metadata-record-details-item .sf-metadata-record-details-item-label {
-  padding-top: 9px;
-  height: fit-content;
-}
-
-.sf-metadata-record-details-item .sf-metadata-record-details-item-label .header-icon {
-  display: inline-block;
-  margin-left: -.3125rem;
-  padding: 0 .3125rem;
-}
-
-.sf-metadata-record-details-item .sf-metadata-record-details-item-label .field-description-section .header-icon .sf-metadata-icon {
-  color: #212529a6;
-  cursor: default;
-  font-size: 14px;
-}
-
-.sf-metadata-record-details-item .sf-metadata-record-details-item-label .field-description-section .field-description-section-field-name {
-  color: #212529b3;
-}
-
-.sf-metadata-record-details-item .sf-metadata-record-details-item-label .field-description-section .field-uneditable-tip {
-  color: #bdbdbd;
-  cursor: pointer;
-  font-size: 14px;
-  position: relative;
-}
-
-.sf-metadata-record-details-item .sf-metadata-record-details-item-label .field-description-section .field-uneditable-tip:hover {
-  color: #666;
-}
diff --git a/frontend/src/metadata/metadata-view/components/record-details-dialog/record-details/field-label/index.js b/frontend/src/metadata/metadata-view/components/record-details-dialog/record-details/field-label/index.js
deleted file mode 100644
index 7330d60e47d..00000000000
--- a/frontend/src/metadata/metadata-view/components/record-details-dialog/record-details/field-label/index.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import React, { useRef } from 'react';
-import PropTypes from 'prop-types';
-import { UncontrolledTooltip, Col } from 'reactstrap';
-import { IconBtn, Icon } from '@seafile/sf-metadata-ui-component';
-import { COLUMNS_ICON_CONFIG } from '../../../../_basic';
-
-import './index.css';
-
-const FieldLabel = ({ field }) => {
-  const { type, name, description, key } = field;
-  const iconRef = useRef(null);
-  return (
-    <Col md={3} className="d-flex sf-metadata-record-details-item-label">
-      <div className="d-flex justify-content-between">
-        <div className="field-description-section">
-          <span className="header-icon" id={`header-icon-${key}`}>
-            <Icon iconName={COLUMNS_ICON_CONFIG[type]} />
-          </span>
-          <span className="field-description-section-field-name">{name || ''}</span>
-          {description &&
-            <>
-              <IconBtn ref={iconRef} iconName="description" className="field-uneditable-tip ml-2" />
-              {iconRef.current && (
-                <UncontrolledTooltip target={iconRef.current} fade={false} placement="right" modifiers={{ preventOverflow: { boundariesElement: document.body } }}>
-                  {description}
-                </UncontrolledTooltip>
-              )}
-            </>
-          }
-        </div>
-      </div>
-    </Col>
-  );
-
-};
-
-FieldLabel.propTypes = {
-  field: PropTypes.object,
-  fieldIconConfig: PropTypes.object,
-};
-
-export default FieldLabel;
diff --git a/frontend/src/metadata/metadata-view/components/record-details-dialog/record-details/index.css b/frontend/src/metadata/metadata-view/components/record-details-dialog/record-details/index.css
deleted file mode 100644
index 4b908ba9428..00000000000
--- a/frontend/src/metadata/metadata-view/components/record-details-dialog/record-details/index.css
+++ /dev/null
@@ -1,318 +0,0 @@
-.sf-metadata-record-details-dialog {
-  margin: 28px 0 0 0;
-}
-
-.sf-metadata-record-details-dialog .modal-header {
-  padding: 6px 14px 6px 20px;
-}
-
-.sf-metadata-record-details-dialog .sf-metadata-record-details-content {
-  display: flex;
-  flex-direction: row;
-}
-
-.sf-metadata-record-details-dialog .modal-content {
-  height: 100%;
-}
-
-.sf-metadata-record-details-dialog .sf-metadata-record-details {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-.sf-metadata-record-details-dialog .header-close-list {
-  display: flex;
-}
-
-.sf-metadata-record-details-dialog .header-close-list .sf-metadata-icon-btn .sf-metadata-icon {
-  color: #000;
-  opacity: 0.5;
-  font-size: 16px;
-}
-
-.sf-metadata-record-details-dialog .header-close-list .sf-metadata-icon-btn:hover .sf-metadata-icon {
-  opacity: 0.75;
-}
-
-.sf-metadata-record-details-dialog .sf-metadata-record-details-container {
-  width: 100%;
-  height: calc(100% - 37px);
-  display: flex;
-  flex-direction: column;
-  overflow-y: scroll;
-  padding: 30px;
-}
-
-.sf-metadata-record-details-dialog .sf-metadata-record-details-container .sf-metadata-record-details-item {
-  min-height: 56px;
-  flex-shrink: 0;
-}
-
-.sf-metadata-record-details-dialog .sf-metadata-record-details-container .sf-metadata-record-details-item:first-child {
-  margin-top: 2px;
-}
-
-.sf-metadata-record-details-dialog .sf-metadata-record-details-container .sf-metadata-ui.collaborator-item .collaborator-avatar {
-  margin-left: 0;
-}
-
-.sf-metadata-record-details-dialog .sf-metadata-record-details-item .sf-metadata-record-cell-empty,
-.sf-metadata-record-details-dialog .sf-metadata-record-details-item .sf-metadata-text-formatter,
-.sf-metadata-record-details-dialog .sf-metadata-record-details-item .sf-metadata-single-select-formatter,
-.sf-metadata-record-details-dialog .sf-metadata-record-details-item .sf-metadata-multiple-select-formatter,
-.sf-metadata-record-details-dialog .sf-metadata-record-details-item .multiple-select-formatter,
-.sf-metadata-record-details-dialog .sf-metadata-record-details-item .sf-metadata-collaborator-formatter,
-.sf-metadata-record-details-dialog .sf-metadata-record-details-item .sf-metadata-date-formatter,
-.sf-metadata-record-details-dialog .sf-metadata-record-details-item .sf-metadata-url-formatter,
-.sf-metadata-record-details-dialog .sf-metadata-record-details-item .sf-metadata-email-formatter,
-.sf-metadata-record-details-dialog .sf-metadata-record-details-item .sf-metadata-ctime-formatter,
-.sf-metadata-record-details-dialog .sf-metadata-record-details-item .sf-metadata-mtime-formatter,
-.sf-metadata-record-details-dialog .sf-metadata-record-details-item .sf-metadata-number-formatter,
-.sf-metadata-record-details-dialog .sf-metadata-record-details-item .sf-metadata-formula-formatter,
-.sf-metadata-record-details-dialog .sf-metadata-record-details-item .sf-metadata-duration-formatter,
-.sf-metadata-record-details-dialog .sf-metadata-record-details-item .formula-formatter.multiple,
-.sf-metadata-record-details-dialog .sf-metadata-record-details-item .sf-metadata-link-formula-formatter,
-.sf-metadata-record-details-dialog .sf-metadata-record-details-item .sf-metadata-rate-formatter,
-.sf-metadata-record-details-dialog .sf-metadata-record-details-item .sf-metadata-link-formatter {
-  background-color: #f8f9fa;
-  cursor: default;
-  display: block;
-  width: 100%;
-  height: 2.375rem;
-  padding: .375rem .75rem;
-  font-size: 0.875rem;
-  font-weight: 400;
-  line-height: 1.5;
-  color: #212529;
-  background-clip: padding-box;
-  border: 1px solid rgba(0, 40, 100, .12);
-  border-radius: 3px;
-  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
-}
-
-.sf-metadata-record-details-dialog .sf-metadata-record-details-item .sf-metadata-text-formatter,
-.sf-metadata-record-details-dialog .sf-metadata-record-details-item .sf-metadata-url-formatter,
-.sf-metadata-record-details-dialog .sf-metadata-record-details-item .sf-metadata-formula-formatter,
-.sf-metadata-record-details-dialog .sf-metadata-record-details-item .sf-metadata-email-formatter,
-.sf-metadata-record-details-dialog .sf-metadata-record-details-item .sf-metadata-rate-formatter {
-  line-height: 24px;
-  word-break: break-all;
-}
-
-.sf-metadata-record-details-dialog .sf-metadata-record-details-item .sf-metadata-single-select-formatter {
-  display: flex;
-  align-items: center;
-}
-
-.sf-metadata-record-details-dialog .sf-metadata-record-details-item .sf-metadata-collaborator-formatter,
-.sf-metadata-record-details-dialog .sf-metadata-record-details-item .sf-metadata-multiple-select-formatter,
-.sf-metadata-record-details-dialog .sf-metadata-record-details-item .multiple-select-formatter,
-.sf-metadata-record-details-dialog .sf-metadata-record-details-item .formula-formatter.multiple,
-.sf-metadata-record-details-dialog .sf-metadata-record-details-item .sf-metadata-link-formatter {
-  padding-top: 4px;
-  padding-bottom: 4px;
-  display: flex;
-  flex-wrap: wrap;
-  height: fit-content;
-  min-height: 38px;
-}
-
-.sf-metadata-record-details-dialog .sf-metadata-record-details-item .sf-metadata-multiple-select-formatter .select-item,
-.sf-metadata-record-details-dialog .sf-metadata-record-details-item .multiple-select-formatter .select-item,
-.sf-metadata-record-details-dialog .sf-metadata-record-details-item .formula-formatter.multiple .formula-formatter-content-item {
-  margin-top: 5px;
-  margin-bottom: 5px;
-}
-
-.sf-metadata-record-details-dialog .sf-metadata-record-details-item .sf-metadata-collaborator-formatter .collaborator-item,
-.sf-metadata-record-details-dialog .sf-metadata-record-details-item .sf-metadata-link-formatter .sf-metadata-link-item {
-  margin: 5px 10px 5px 0;
-}
-
-.sf-metadata-record-details-dialog .sf-metadata-record-details-item .sf-metadata-link-formatter .sf-metadata-link-item {
-  height: 20px;
-  max-width: 100%;
-  padding: 0 8px;
-  background: #eceff4;
-  border-radius: 3px;
-  display: inline-block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.sf-metadata-record-details-dialog .sf-metadata-record-details-item .sf-metadata-date-formatter,
-.sf-metadata-record-details-dialog .sf-metadata-record-details-item .sf-metadata-ctime-formatter,
-.sf-metadata-record-details-dialog .sf-metadata-record-details-item .sf-metadata-mtime-formatter,
-.sf-metadata-record-details-dialog .sf-metadata-record-details-item .sf-metadata-number-formatter,
-.sf-metadata-record-details-dialog .sf-metadata-record-details-item .sf-metadata-formula-number-formatter,
-.sf-metadata-record-details-dialog .sf-metadata-record-details-item .sf-metadata-duration-formatter,
-.sf-metadata-record-details-dialog .sf-metadata-record-details-item .sf-metadata-formula-date-formatter,
-.sf-metadata-record-details-dialog .sf-metadata-record-details-item .sf-metadata-rate-formatter {
-  width: 320px;
-  line-height: 24px;
-}
-
-.sf-metadata-record-details-dialog .sf-metadata-record-details-item .sf-metadata-rate-formatter .sf-metadata-icon {
-  margin-right: 5px;
-}
-
-.sf-metadata-record-details-dialog .sf-metadata-record-details-item .sf-metadata-checkbox-formatter {
-  width: 24px;
-  height: 24px;
-  border: 2px solid #e0e0e0;
-  border-radius: 3px;
-}
-
-.sf-metadata-record-details-dialog .sf-metadata-record-details-item .sf-metadata-record-cell-empty.sf-metadata-record-file-cell-empty,
-.sf-metadata-record-details-dialog .sf-metadata-record-details-item .sf-metadata-record-cell-empty.sf-metadata-record-image-cell-empty,
-.sf-metadata-record-details-dialog .sf-metadata-record-details-item .sf-metadata-record-creator-cell-empty,
-.sf-metadata-record-details-dialog .sf-metadata-record-details-item .sf-metadata-record-link-cell-empty {
-  display: none;
-}
-
-/* long text */
-.sf-metadata-record-details-dialog .sf-metadata-record-details-item .sf-metadata-long-text-formatter {
-  background-color: #f8f9fa;
-  cursor: default;
-  min-height: 38px;
-  border: 1px solid rgba(0, 40, 100, 0.12);
-  border-radius: 3px;
-  padding: 0 12px;
-  width: 100%;
-  overflow-x: hidden;
-  text-overflow: unset;
-  white-space: unset;
-  line-height: 1.5;
-}
-
-.sf-metadata-record-details-dialog .sf-metadata-long-text-formatter ol,
-.sf-metadata-record-details-dialog .sf-metadata-long-text-formatter ul {
-  padding-inline-start: 40px;
-  margin-bottom: 1em;
-}
-
-.sf-metadata-record-details-dialog .sf-metadata-long-text-formatter ol li a,
-.sf-metadata-record-details-dialog .sf-metadata-long-text-formatter ul li a {
-  word-break: break-all;
-}
-
-.sf-metadata-record-details-dialog .sf-metadata-long-text-formatter ul.contains-task-list,
-.sf-metadata-record-details-dialog .sf-metadata-long-text-formatter ol.contains-task-list {
-  padding-inline-start: 20px;
-}
-
-.sf-metadata-record-details-dialog .sf-metadata-long-text-formatter ul li.task-list-item,
-.sf-metadata-record-details-dialog .sf-metadata-long-text-formatter ol li.task-list-item {
-  min-height: 20px;
-}
-
-.sf-metadata-record-details-dialog .sf-metadata-long-text-formatter li.task-list-item input[type=checkbox] {
-  position: absolute;
-  left: -1.4em;
-  top: .4em;
-  display: inline-block;
-}
-
-.sf-metadata-record-details-dialog .sf-metadata-long-text-formatter thead tr {
-  min-height: 42px;
-}
-
-.sf-metadata-record-details-dialog .sf-metadata-long-text-formatter tbody tr {
-  font-weight: normal;
-  min-height: 42px;
-}
-
-.sf-metadata-record-details-dialog .sf-metadata-record-details-item .sf-metadata-geolocation-formatter {
-  min-width: 80px;
-  width: fit-content;
-  max-width: 100%;
-  height: 28px;
-  display: inline-flex;
-  justify-content: center;
-  line-height: 24px;
-  border: 2px solid transparent;
-  padding: 0 10px;
-  background-color: #f0f0f0;
-  border-radius: 3px;
-  font-size: 14px;
-  color: #212529;
-}
-
-.sf-metadata-record-details-dialog .sf-metadata-record-details-item .sf-metadata-formula-number-formatter {
-  text-align: left !important;
-}
-
-.sf-metadata-record-details-dialog .sf-metadata-record-details-item .sf-metadata-digital-sign-formatter {
-  display: flex;
-  flex-wrap: wrap;
-  margin-left: -5px;
-  margin-right: -5px;
-}
-
-.sf-metadata-record-details-dialog .sf-metadata-record-details-item .sf-metadata-creator-formatter,
-.sf-metadata-record-details-dialog .sf-metadata-record-details-item .sf-metadata-last-modifier-formatter,
-.sf-metadata-record-details-dialog .sf-metadata-record-details-item .sf-metadata-checkbox-formatter,
-.sf-metadata-record-details-dialog .sf-metadata-record-details-item .sf-metadata-image-formatter,
-.sf-metadata-record-details-dialog .sf-metadata-record-details-item .sf-metadata-file-formatter,
-.sf-metadata-record-details-dialog .sf-metadata-record-details-item .sf-metadata-geolocation-formatter,
-.sf-metadata-record-details-dialog .sf-metadata-record-details-item .sf-metadata-auto-number-formatter
-.sf-metadata-record-details-dialog .sf-metadata-record-details-item .sf-metadata-digital-sign-formatter {
-  margin-top: 8px;
-}
-
-.sf-metadata-record-details-dialog .sf-metadata-record-details-item .sf-metadata-image-formatter,
-.sf-metadata-record-details-dialog .sf-metadata-record-details-item .sf-metadata-file-formatter {
-  flex-wrap: wrap;
-  margin-left: -5px;
-  margin-right: -5px;
-  width: unset;
-}
-
-/* image */
-.sf-metadata-record-details-dialog .sf-metadata-record-details-item .sf-metadata-record-image-item {
-  height: 100px;
-  width: 100px;
-  border: 2px solid #ededed;
-  border-radius: 4px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 5px;
-  position: relative;
-}
-
-.sf-metadata-record-details-dialog .sf-metadata-record-details-item .sf-metadata-record-image-item:hover {
-  border: 2px solid #c9c9c9;
-}
-
-.sf-metadata-record-details-dialog .sf-metadata-record-details-item .sf-metadata-record-image-item .image-item,
-.sf-metadata-record-details-dialog .sf-metadata-record-details-item .sf-metadata-record-image-item .file-item-icon {
-  display: block;
-  width: 96px;
-  height: unset;
-  border: none;
-  margin-right: 0;
-  border-radius: 4px;
-}
-
-.sf-metadata-record-details-dialog .sf-metadata-record-details-item .sf-metadata-record-image-item .image-item:hover {
-  border: none;
-}
-
-.sf-metadata-record-details-dialog .sf-metadata-record-details-item .sf-metadata-digital-sign-formatter .sf-metadata-record-image-item {
-  width: 200px;
-}
-
-.sf-metadata-record-details-dialog .sf-metadata-record-details-item .sf-metadata-record-checkbox-cell-empty {
-  background-color: #fff;
-  width: 24px;
-  height: 24px;
-  border: 2px solid #e0e0e0;
-  border-radius: 3px;
-  padding: 0;
-  margin-top: 8px;
-}
diff --git a/frontend/src/metadata/metadata-view/components/record-details-dialog/record-details/index.js b/frontend/src/metadata/metadata-view/components/record-details-dialog/record-details/index.js
deleted file mode 100644
index 54aacdeab46..00000000000
--- a/frontend/src/metadata/metadata-view/components/record-details-dialog/record-details/index.js
+++ /dev/null
@@ -1,133 +0,0 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody, Col } from 'reactstrap';
-import { IconBtn, CenteredLoading } from '@seafile/sf-metadata-ui-component';
-import { gettext } from '../../../utils';
-import FieldLabel from './field-label';
-import CellFormatter from '../../cell-formatter';
-import { getCellValueByColumn } from '../../../_basic';
-
-import './index.css';
-
-const RecordDetails = ({ fields, record, onToggle, ...params }) => {
-  const [isAnimation, setAnimation] = useState(true);
-  const [isLoading, setLoading] = useState(true);
-  const modalRef = useRef(null);
-
-  const initStyle = useMemo(() => {
-    const defaultMargin = 80; // sequence cell width
-    const defaultHeight = 100;
-    return {
-      width: `${window.innerWidth - defaultMargin}px`,
-      maxWidth: `${window.innerWidth - defaultMargin}px`,
-      marginLeft: `${defaultMargin}px`,
-      height: `${defaultHeight}px`,
-      marginRight: `${defaultMargin}px`,
-      marginTop: '30%',
-      transition: 'all .3s',
-    };
-  }, []);
-
-  const style = useMemo(() => {
-    const width = 800;
-    return {
-      width,
-      maxWidth: width,
-      marginLeft: (window.innerWidth - width) / 2,
-      height: 'calc(100% - 56px)', // Dialog margin is 3.5rem (56px)
-    };
-  }, []);
-
-  useEffect(() => {
-    // use setTimeout to make sure real dom rendered
-    setTimeout(() => {
-      let dom = modalRef.current.firstChild;
-      const { width, maxWidth, marginLeft, height } = style;
-      dom.style.width = `${width}px`;
-      dom.style.maxWidth = `${maxWidth}px`;
-      dom.style.marginLeft = `${marginLeft}px`;
-      dom.style.height = height;
-      dom.style.marginRight = 'unset';
-      dom.style.marginTop = '28px';
-      // after animation, change style and run callback
-      setTimeout(() => {
-        setAnimation(false);
-        dom.style.transition = 'none';
-        setLoading(false);
-      }, 280);
-    }, 1);
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const toggle = useCallback(() => {
-    onToggle();
-  }, [onToggle]);
-
-  const renderFieldValue = useCallback((field) => {
-    const cellValue = getCellValueByColumn(record, field);
-    return (<CellFormatter field={field} value={cellValue} { ...params }/>);
-  }, [record, params]);
-
-  const renderRowContent = useCallback(() => {
-    if (isLoading) return (<CenteredLoading />);
-    if (!Array.isArray(fields) || fields.length === 0) return null;
-    return (
-      <>
-        {fields.map((field) => {
-          return (
-            <div className={`sf-metadata-record-details-item sf-metadata-record-details-item-field-${field.type}`} key={field.key}>
-              <div className="pb-4 row">
-                <FieldLabel field={field} />
-                <Col md={9} className='d-flex align-items-center sf-metadata-record-details-item-col'>
-                  {renderFieldValue(field)}
-                </Col>
-              </div>
-            </div>
-          );
-        })}
-      </>
-    );
-  }, [isLoading, fields, renderFieldValue]);
-
-  return (
-    <Modal
-      isOpen={true}
-      toggle={toggle}
-      className="sf-metadata-record-details-dialog"
-      style={isAnimation ? initStyle : style}
-      zIndex={1048}
-      contentClassName="sf-metadata-record-details-content"
-      modalClassName="sf-metadata-record-details-modal"
-      fade={false}
-      innerRef={modalRef}
-      keyboard={false}
-    >
-      {!isAnimation && (
-        <div className="sf-metadata-record-details">
-          <ModalHeader close={(
-            <div className="header-close-list">
-              <IconBtn iconName="close" size={24} onClick={toggle} />
-            </div>
-          )}>
-            <div className="sf-metadata-record-details-left-btns">
-              <div className="sf-metadata-record-details-title text-truncate">{gettext('Details')}</div>
-            </div>
-          </ModalHeader>
-          <ModalBody className="sf-metadata-record-details-container">
-            {renderRowContent()}
-          </ModalBody>
-        </div>
-      )}
-    </Modal>
-  );
-
-};
-
-RecordDetails.propTypes = {
-  record: PropTypes.object,
-  fields: PropTypes.array,
-  columns: PropTypes.array,
-  onToggle: PropTypes.func,
-};
-
-export default RecordDetails;
diff --git a/frontend/src/metadata/metadata-view/components/table/container.js b/frontend/src/metadata/metadata-view/components/table/container.js
index 985bda88010..763b295e4e9 100644
--- a/frontend/src/metadata/metadata-view/components/table/container.js
+++ b/frontend/src/metadata/metadata-view/components/table/container.js
@@ -5,7 +5,6 @@ import { CommonlyUsedHotkey, getValidGroupbys } from '../../_basic';
 import { gettext } from '../../utils';
 import { useMetadata } from '../../hooks';
 import TableMain from './table-main';
-import RecordDetailsDialog from '../record-details-dialog';
 import { Utils } from '../../../../utils/utils';
 
 import './index.css';
@@ -202,7 +201,6 @@ const Container = () => {
           )}
         </div>
       </div>
-      <RecordDetailsDialog />
     </>
   );
 };
diff --git a/frontend/src/metadata/metadata-view/components/table/table-main/index.js b/frontend/src/metadata/metadata-view/components/table/table-main/index.js
index d7fc117205e..92cd0895a17 100644
--- a/frontend/src/metadata/metadata-view/components/table/table-main/index.js
+++ b/frontend/src/metadata/metadata-view/components/table/table-main/index.js
@@ -4,7 +4,6 @@ import classnames from 'classnames';
 import Records from './records';
 import { GROUP_VIEW_OFFSET } from '../../../constants';
 import GridUtils from '../../../utils/grid-utils';
-import { useRecordDetails } from '../../../hooks';
 
 import './index.css';
 
@@ -14,8 +13,6 @@ const TableMain = ({ metadata, modifyRecord, modifyRecords, loadMore, loadAll, s
     return new GridUtils(metadata, { modifyRecord, modifyRecords, recordGetterByIndex, recordGetterById });
   }, [metadata, modifyRecord, modifyRecords, recordGetterByIndex, recordGetterById]);
 
-  const { openRecordDetails } = useRecordDetails();
-
   const groupbysCount = useMemo(() => {
     const groupbys = metadata?.view?.groupbys || [];
     return groupbys.length;
@@ -63,7 +60,6 @@ const TableMain = ({ metadata, modifyRecord, modifyRecords, loadMore, loadAll, s
         groupOffsetLeft={groupOffset}
         modifyRecord={updateRecord}
         updateRecords={updateRecords}
-        onRowExpand={openRecordDetails}
         getCopiedRecordsAndColumnsFromRange={getCopiedRecordsAndColumnsFromRange}
         recordGetterById={recordGetterById}
         recordGetterByIndex={recordGetterByIndex}
diff --git a/frontend/src/metadata/metadata-view/components/table/table-main/records/body.js b/frontend/src/metadata/metadata-view/components/table/table-main/records/body.js
index 04ee6ee92fc..42da0b93d90 100644
--- a/frontend/src/metadata/metadata-view/components/table/table-main/records/body.js
+++ b/frontend/src/metadata/metadata-view/components/table/table-main/records/body.js
@@ -232,10 +232,6 @@ class RecordsBody extends Component {
     }, 300);
   };
 
-  onRowExpand = (row) => {
-    this.props.onRowExpand && this.props.onRowExpand(row);
-  };
-
   onScrollbarScroll = (scrollTop) => {
     // solve canvas&rightScrollbar circle scroll problem
     if (this.oldScrollTop === scrollTop) {
@@ -482,7 +478,6 @@ class RecordsBody extends Component {
           selectedPosition={this.state.selectedPosition}
           selectNoneCells={this.selectNoneCells}
           onSelectRecord={this.props.onSelectRecord}
-          onRowExpand={this.onRowExpand}
           modifyRecord={this.props.modifyRecord}
           searchResult={this.props.searchResult}
           columnColor={columnColor}
@@ -610,7 +605,6 @@ RecordsBody.propTypes = {
   getCopiedRecordsAndColumnsFromRange: PropTypes.func,
   openDownloadFilesDialog: PropTypes.func,
   cacheDownloadFilesProps: PropTypes.func,
-  onRowExpand: PropTypes.func,
 };
 
 export default RecordsBody;
diff --git a/frontend/src/metadata/metadata-view/components/table/table-main/records/group-body/index.js b/frontend/src/metadata/metadata-view/components/table/table-main/records/group-body/index.js
index 2b394c48e18..e4232c1ce3e 100644
--- a/frontend/src/metadata/metadata-view/components/table/table-main/records/group-body/index.js
+++ b/frontend/src/metadata/metadata-view/components/table/table-main/records/group-body/index.js
@@ -384,10 +384,6 @@ class GroupBody extends Component {
     }, 300);
   };
 
-  onRowExpand = (record) => {
-    this.props.onRowExpand && this.props.onRowExpand(record);
-  };
-
   setRightScrollbarScrollTop = (scrollTop) => {
     this.rightScrollbar && this.rightScrollbar.setScrollTop(scrollTop);
   };
@@ -826,7 +822,6 @@ class GroupBody extends Component {
             selectedPosition={this.state.selectedPosition}
             selectNoneCells={this.selectNoneCells}
             onSelectRecord={this.props.onSelectRecord}
-            onRowExpand={this.onRowExpand}
             modifyRecord={this.props.modifyRecord}
             lockRecordViaButton={this.props.lockRecordViaButton}
             modifyRecordViaButton={this.props.modifyRecordViaButton}
diff --git a/frontend/src/metadata/metadata-view/components/table/table-main/records/record/actions-cell/index.js b/frontend/src/metadata/metadata-view/components/table/table-main/records/record/actions-cell/index.js
index aaa2cde61ee..af7bc38b196 100644
--- a/frontend/src/metadata/metadata-view/components/table/table-main/records/record/actions-cell/index.js
+++ b/frontend/src/metadata/metadata-view/components/table/table-main/records/record/actions-cell/index.js
@@ -2,7 +2,6 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { Tooltip } from 'reactstrap';
-import { Icon } from '@seafile/sf-metadata-ui-component';
 import { SEQUENCE_COLUMN_WIDTH } from '../../../../../../constants';
 import { isMobile, gettext } from '../../../../../../utils';
 
@@ -86,9 +85,6 @@ class ActionsCell extends Component {
             </label>
           </div>
         </div>
-        <span className='rdg-row-expand-icon' onClick={this.props.onRowExpand}>
-          <Icon iconName="open-record" />
-        </span>
         {/* {this.getLockedRowTooltip()} */}
       </div>
     );
@@ -103,7 +99,6 @@ ActionsCell.propTypes = {
   index: PropTypes.number,
   height: PropTypes.number,
   onSelectRecord: PropTypes.func,
-  onRowExpand: PropTypes.func,
 };
 
 export default ActionsCell;
diff --git a/frontend/src/metadata/metadata-view/components/table/table-main/records/record/index.js b/frontend/src/metadata/metadata-view/components/table/table-main/records/record/index.js
index 2f36c029411..334e47a3023 100644
--- a/frontend/src/metadata/metadata-view/components/table/table-main/records/record/index.js
+++ b/frontend/src/metadata/metadata-view/components/table/table-main/records/record/index.js
@@ -57,11 +57,6 @@ class Record extends React.Component {
     this.props.onSelectRecord({ groupRecordIndex, recordIndex: index }, e);
   };
 
-  onRowExpand = () => {
-    const { record } = this.props;
-    this.props.onRowExpand(record);
-  };
-
   isCellSelected = (columnIdx) => {
     const { hasSelectedCell, selectedPosition } = this.props;
     if (!selectedPosition) return false;
@@ -261,7 +256,6 @@ class Record extends React.Component {
             recordId={record._id}
             index={index}
             onSelectRecord={this.onSelectRecord}
-            onRowExpand={this.onRowExpand}
             isLastFrozenCell={!lastFrozenColumnKey}
             height={cellHeight}
           />
@@ -294,7 +288,6 @@ Record.propTypes = {
   height: PropTypes.number,
   selectNoneCells: PropTypes.func,
   onSelectRecord: PropTypes.func,
-  onRowExpand: PropTypes.func,
   modifyRecord: PropTypes.func,
   lockRecordViaButton: PropTypes.func,
   modifyRecordViaButton: PropTypes.func,
diff --git a/frontend/src/metadata/metadata-view/components/table/table-main/records/records-header/actions-cell.jsx b/frontend/src/metadata/metadata-view/components/table/table-main/records/records-header/actions-cell.jsx
index 9dcef651c03..b321ba9de1e 100644
--- a/frontend/src/metadata/metadata-view/components/table/table-main/records/records-header/actions-cell.jsx
+++ b/frontend/src/metadata/metadata-view/components/table/table-main/records/records-header/actions-cell.jsx
@@ -28,7 +28,6 @@ class ActionsCell extends Component {
           selectNoneRecords={this.props.selectNoneRecords}
           selectAllRecords={this.props.selectAllRecords}
         />
-        <div className='header-action-cell-placeholder'></div>
       </div>
     );
   }
diff --git a/frontend/src/metadata/metadata-view/hooks/index.js b/frontend/src/metadata/metadata-view/hooks/index.js
index 650e76b7f42..aaa50f5ec24 100644
--- a/frontend/src/metadata/metadata-view/hooks/index.js
+++ b/frontend/src/metadata/metadata-view/hooks/index.js
@@ -1,9 +1,7 @@
 import { CollaboratorsProvider, useCollaborators } from './collaborators';
 import { MetadataProvider, useMetadata } from './metadata';
-import { RecordDetailsProvider, useRecordDetails } from './record-details';
 
 export {
   CollaboratorsProvider, useCollaborators,
   MetadataProvider, useMetadata,
-  RecordDetailsProvider, useRecordDetails,
 };
diff --git a/frontend/src/metadata/metadata-view/hooks/record-details.js b/frontend/src/metadata/metadata-view/hooks/record-details.js
deleted file mode 100644
index 639d4fcf225..00000000000
--- a/frontend/src/metadata/metadata-view/hooks/record-details.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/* eslint-disable react/prop-types */
-import React, { useContext, useState, useCallback } from 'react';
-
-const RecordDetailsContext = React.createContext(null);
-
-export const RecordDetailsProvider = ({ children }) => {
-  const [isShowRecordDetails, setIsShowRecordDetails] = useState(false);
-  const [recordDetails, setRecordDetails] = useState({});
-
-  const openRecordDetails = useCallback((recordDetails) => {
-    setRecordDetails(recordDetails);
-    setIsShowRecordDetails(true);
-  }, []);
-
-  const closeRecordDetails = useCallback(() => {
-    setRecordDetails({});
-    setIsShowRecordDetails(false);
-  }, []);
-
-  return (
-    <RecordDetailsContext.Provider value={{ isShowRecordDetails, recordDetails, openRecordDetails, closeRecordDetails }}>
-      {children}
-    </RecordDetailsContext.Provider>
-  );
-};
-
-export const useRecordDetails = () => {
-  const context = useContext(RecordDetailsContext);
-  if (!context) {
-    throw new Error('\'RecordDetailsContext\' is null');
-  }
-  const { isShowRecordDetails, recordDetails, openRecordDetails, closeRecordDetails } = context;
-  return { isShowRecordDetails, recordDetails, openRecordDetails, closeRecordDetails };
-};
diff --git a/frontend/src/metadata/metadata-view/index.js b/frontend/src/metadata/metadata-view/index.js
index 4aa1cb04ed6..8fd08bfc5d6 100644
--- a/frontend/src/metadata/metadata-view/index.js
+++ b/frontend/src/metadata/metadata-view/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { MetadataProvider, CollaboratorsProvider, RecordDetailsProvider } from './hooks/index';
+import { MetadataProvider, CollaboratorsProvider } from './hooks/index';
 import { Table } from './components/index';
 
 const SeafileMetadata = ({ ...params }) => {
@@ -8,9 +8,7 @@ const SeafileMetadata = ({ ...params }) => {
   return (
     <MetadataProvider { ...params }>
       <CollaboratorsProvider >
-        <RecordDetailsProvider>
-          <Table />
-        </RecordDetailsProvider>
+        <Table />
       </CollaboratorsProvider>
     </MetadataProvider>
   );