feat: metadata file name display (#6279)

* feat: metadata file name display

* feat: optimize code

---------

Co-authored-by: 杨国璇 <ygx@Hello-word.local>

frontend/package-lock.json

@@ -17,7 +17,7 @@
         "@seafile/sdoc-editor": "1.0.4",
         "@seafile/seafile-calendar": "0.0.12",
         "@seafile/seafile-editor": "1.0.99",
-        "@seafile/sf-metadata-ui-component": "0.0.4",
+        "@seafile/sf-metadata-ui-component": "0.0.7",
         "@uiw/codemirror-extensions-langs": "^4.19.4",
         "@uiw/react-codemirror": "^4.19.4",
         "chart.js": "2.9.4",
@@ -4953,9 +4953,9 @@
       }
     },
     "node_modules/@seafile/sf-metadata-ui-component": {
-      "version": "0.0.4",
+      "version": "0.0.7",
-      "resolved": "https://registry.npmjs.org/@seafile/sf-metadata-ui-component/-/sf-metadata-ui-component-0.0.4.tgz",
+      "resolved": "https://registry.npmjs.org/@seafile/sf-metadata-ui-component/-/sf-metadata-ui-component-0.0.7.tgz",
-      "integrity": "sha512-Zf8SPVXkG7iQFqaDOtgsrcIVn5l0rfX7c8h4E9yf+Ho6Y/S4Rq3vL/emLUR4syE18OlWlw656oNhsvapeWsQjQ==",
+      "integrity": "sha512-haLIkUnZaMqQQnLwjNnwb5rZoRAEv4qHE+G0xm51wBwDmFTQBkhnRJfxDlE7fxtkWGb6m5ea52U574ZnMWEarg==",
       "dependencies": {
         "@seafile/seafile-calendar": "0.0.24",
         "classnames": "2.3.2",
@@ -8041,6 +8041,11 @@
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
     },
+    "node_modules/bowser": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/bowser/-/bowser-1.9.4.tgz",
+      "integrity": "sha512-9IdMmj2KjigRq6oWhmwv1W36pDuA4STQZ8q6YO9um+x07xgYNCD3Oou+WP/3L1HNz7iqythGet3/p4wvc8AAwQ=="
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -9245,6 +9250,15 @@
         "postcss": "^8.4"
       }
     },
+    "node_modules/css-in-js-utils": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/css-in-js-utils/-/css-in-js-utils-2.0.1.tgz",
+      "integrity": "sha512-PJF0SpJT+WdbVVt0AOYp9C8GnuruRlL/UFW7932nLWmFLQTaWEzTBQEx7/hn4BuV+WON75iAViSUJLiU3PKbpA==",
+      "dependencies": {
+        "hyphenate-style-name": "^1.0.2",
+        "isobject": "^3.0.1"
+      }
+    },
     "node_modules/css-loader": {
       "version": "6.8.1",
       "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.8.1.tgz",
@@ -12593,6 +12607,18 @@
       "resolved": "https://registry.npmjs.org/github-slugger/-/github-slugger-2.0.0.tgz",
       "integrity": "sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw=="
     },
+    "node_modules/glamor": {
+      "version": "2.20.40",
+      "resolved": "https://registry.npmjs.org/glamor/-/glamor-2.20.40.tgz",
+      "integrity": "sha512-DNXCd+c14N9QF8aAKrfl4xakPk5FdcFwmH7sD0qnC0Pr7xoZ5W9yovhUrY/dJc3psfGGXC58vqQyRtuskyUJxA==",
+      "dependencies": {
+        "fbjs": "^0.8.12",
+        "inline-style-prefixer": "^3.0.6",
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.5.10",
+        "through": "^2.3.8"
+      }
+    },
     "node_modules/glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -14055,6 +14081,15 @@
       "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
       "dev": true
     },
+    "node_modules/inline-style-prefixer": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-3.0.8.tgz",
+      "integrity": "sha512-ne8XIyyqkRaNJ1JfL1NYzNdCNxq+MCBQhC8NgOQlzNm2vv3XxlP0VSLQUbSRCF6KPEoveCVEpayHoHzcMyZsMQ==",
+      "dependencies": {
+        "bowser": "^1.7.3",
+        "css-in-js-utils": "^2.0.0"
+      }
+    },
     "node_modules/internal-slot": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.5.tgz",
@@ -26311,6 +26346,11 @@
       "integrity": "sha512-WKexMoJj3vEuK0yFEapj8y64V0A6xcuPuK9Gt1d0R+dzCSJc0lHqQytAbSB4cDAK0dWh4T0E2ETkoLE2WZ41OQ==",
       "dev": true
     },
+    "node_modules/through": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
+      "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg=="
+    },
     "node_modules/thunky": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
@@ -32120,9 +32160,9 @@
       }
     },
     "@seafile/sf-metadata-ui-component": {
-      "version": "0.0.4",
+      "version": "0.0.7",
-      "resolved": "https://registry.npmjs.org/@seafile/sf-metadata-ui-component/-/sf-metadata-ui-component-0.0.4.tgz",
+      "resolved": "https://registry.npmjs.org/@seafile/sf-metadata-ui-component/-/sf-metadata-ui-component-0.0.7.tgz",
-      "integrity": "sha512-Zf8SPVXkG7iQFqaDOtgsrcIVn5l0rfX7c8h4E9yf+Ho6Y/S4Rq3vL/emLUR4syE18OlWlw656oNhsvapeWsQjQ==",
+      "integrity": "sha512-haLIkUnZaMqQQnLwjNnwb5rZoRAEv4qHE+G0xm51wBwDmFTQBkhnRJfxDlE7fxtkWGb6m5ea52U574ZnMWEarg==",
       "requires": {
         "@seafile/seafile-calendar": "0.0.24",
         "classnames": "2.3.2",
@@ -34544,6 +34584,11 @@
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
     },
+    "bowser": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/bowser/-/bowser-1.9.4.tgz",
+      "integrity": "sha512-9IdMmj2KjigRq6oWhmwv1W36pDuA4STQZ8q6YO9um+x07xgYNCD3Oou+WP/3L1HNz7iqythGet3/p4wvc8AAwQ=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -35499,6 +35544,15 @@
         "postcss-selector-parser": "^6.0.9"
       }
     },
+    "css-in-js-utils": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/css-in-js-utils/-/css-in-js-utils-2.0.1.tgz",
+      "integrity": "sha512-PJF0SpJT+WdbVVt0AOYp9C8GnuruRlL/UFW7932nLWmFLQTaWEzTBQEx7/hn4BuV+WON75iAViSUJLiU3PKbpA==",
+      "requires": {
+        "hyphenate-style-name": "^1.0.2",
+        "isobject": "^3.0.1"
+      }
+    },
     "css-loader": {
       "version": "6.8.1",
       "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.8.1.tgz",
@@ -38047,6 +38101,18 @@
       "resolved": "https://registry.npmjs.org/github-slugger/-/github-slugger-2.0.0.tgz",
       "integrity": "sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw=="
     },
+    "glamor": {
+      "version": "2.20.40",
+      "resolved": "https://registry.npmjs.org/glamor/-/glamor-2.20.40.tgz",
+      "integrity": "sha512-DNXCd+c14N9QF8aAKrfl4xakPk5FdcFwmH7sD0qnC0Pr7xoZ5W9yovhUrY/dJc3psfGGXC58vqQyRtuskyUJxA==",
+      "requires": {
+        "fbjs": "^0.8.12",
+        "inline-style-prefixer": "^3.0.6",
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.5.10",
+        "through": "^2.3.8"
+      }
+    },
     "glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -39151,6 +39217,15 @@
       "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
       "dev": true
     },
+    "inline-style-prefixer": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-3.0.8.tgz",
+      "integrity": "sha512-ne8XIyyqkRaNJ1JfL1NYzNdCNxq+MCBQhC8NgOQlzNm2vv3XxlP0VSLQUbSRCF6KPEoveCVEpayHoHzcMyZsMQ==",
+      "requires": {
+        "bowser": "^1.7.3",
+        "css-in-js-utils": "^2.0.0"
+      }
+    },
     "internal-slot": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.5.tgz",
@@ -48271,6 +48346,11 @@
       "integrity": "sha512-WKexMoJj3vEuK0yFEapj8y64V0A6xcuPuK9Gt1d0R+dzCSJc0lHqQytAbSB4cDAK0dWh4T0E2ETkoLE2WZ41OQ==",
       "dev": true
     },
+    "through": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
+      "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg=="
+    },
     "thunky": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",

frontend/package.json

@@ -12,7 +12,7 @@
     "@seafile/sdoc-editor": "1.0.4",
     "@seafile/seafile-calendar": "0.0.12",
     "@seafile/seafile-editor": "1.0.99",
-    "@seafile/sf-metadata-ui-component": "0.0.4",
+    "@seafile/sf-metadata-ui-component": "0.0.7",
     "@uiw/codemirror-extensions-langs": "^4.19.4",
     "@uiw/react-codemirror": "^4.19.4",
     "chart.js": "2.9.4",

frontend/src/assets/icons/folder.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1719816737147" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4110" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M448 224H160c-16 0-32 9.6-32 32v512c0 16 16 32 32 32h704c16 0 32-16 32-32V368c0-16-16-28.8-32-28.8h-304c-9.6 0-16-6.4-19.2-9.6L448 224z m144 22.4H896c54.4 0 96 41.6 96 96V800c0 54.4-41.6 96-96 96H128c-54.4 0-96-41.6-96-96V224c0-54.4 41.6-96 96-96h345.6c9.6 0 16 6.4 22.4 9.6l96 108.8z" p-id="4111"></path></svg>

frontend/src/assets/icons/image.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1719816786766" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4538" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M896 256v512c0 19.2-12.8 32-32 32H160c-19.2 0-32-12.8-32-32V256c0-19.2 12.8-32 32-32h704c19.2 0 32 12.8 32 32zM32 224v576c0 54.4 41.6 96 96 96h768c54.4 0 96-41.6 96-96V224c0-54.4-41.6-96-96-96H128C73.6 128 32 169.6 32 224z m563.2 224c12.8 0 25.6 6.4 32 16L864 736H160l140.8-172.8c6.4-9.6 19.2-16 32-16s25.6 6.4 32 16l51.2 67.2 144-169.6c9.6-6.4 22.4-12.8 35.2-12.8zM300.8 275.2c32 0 60.8 16 76.8 44.8 16 28.8 16 60.8 0 89.6-16 28.8-44.8 44.8-76.8 44.8-51.2 0-89.6-41.6-89.6-89.6s41.6-89.6 89.6-89.6z" p-id="4539"></path></svg>

frontend/src/assets/icons/markdown.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1719816754372" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4252" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M768 992H256c-73.6 0-128-57.6-128-131.2V163.2C128 89.6 182.4 32 256 32h297.6c12.8 0 22.4 3.2 28.8 12.8l297.6 304c9.6 9.6 12.8 16 12.8 32v480C896 934.4 841.6 992 768 992zM265.6 128C240 128 224 144 224 169.6v681.6c0 28.8 16 44.8 41.6 44.8h492.8c25.6 0 41.6-16 41.6-41.6V400L537.6 128H265.6z" p-id="4253"></path><path d="M822.4 448h-297.6c-25.6 0-41.6-16-41.6-41.6V105.6c-3.2-25.6 12.8-41.6 38.4-41.6s41.6 16 41.6 41.6v256h256c25.6 0 41.6 16 41.6 41.6s-12.8 44.8-38.4 44.8zM368 544h288c25.6 0 48 22.4 48 48s-22.4 48-48 48h-288c-25.6 0-48-22.4-48-48s22.4-48 48-48zM368 704h288c25.6 0 48 22.4 48 48s-22.4 48-48 48h-288c-25.6 0-48-22.4-48-48s22.4-48 48-48z" p-id="4254"></path></svg>

frontend/src/metadata/metadata-view/_basic/constants/column/common.js

@@ -0,0 +1,10 @@
+import { PRIVATE_COLUMN_KEY } from './private';
+
+export const NOT_DISPLAY_COLUMN_KEYS = [
+  PRIVATE_COLUMN_KEY.ID,
+  PRIVATE_COLUMN_KEY.CTIME,
+  PRIVATE_COLUMN_KEY.MTIME,
+  PRIVATE_COLUMN_KEY.CREATOR,
+  PRIVATE_COLUMN_KEY.LAST_MODIFIER,
+  PRIVATE_COLUMN_KEY.IS_DIR,
+];

frontend/src/metadata/metadata-view/_basic/constants/column/icon.js

@@ -7,6 +7,7 @@ const COLUMNS_ICON_CONFIG = {
   [CellType.MTIME]: 'creation-time',
   [CellType.DEFAULT]: 'text',
   [CellType.TEXT]: 'text',
+  [CellType.FILE_NAME]: 'text',
 };
 
 const COLUMNS_ICON_NAME = {
@@ -16,6 +17,7 @@ const COLUMNS_ICON_NAME = {
   [CellType.MTIME]: 'Last modified time',
   [CellType.DEFAULT]: 'Text',
   [CellType.TEXT]: 'Text',
+  [CellType.FILE_NAME]: 'File name',
 };
 
 export {

frontend/src/metadata/metadata-view/_basic/constants/column/index.js

@@ -20,8 +20,16 @@ export {
   SINGLE_CELL_VALUE_COLUMN_TYPE_MAP,
 } from './format';
 
+export {
+  PRIVATE_COLUMN_KEY
+} from './private';
+
 export {
   CellType,
   COLUMNS_ICON_CONFIG,
   COLUMNS_ICON_NAME,
 };
+
+export {
+  NOT_DISPLAY_COLUMN_KEYS
+} from './common';

frontend/src/metadata/metadata-view/_basic/constants/column/private.js

@@ -0,0 +1,17 @@
+export const PRIVATE_COLUMN_KEY = {
+  ID: '_id',
+
+  // base key
+  CTIME: '_ctime',
+  MTIME: '_mtime',
+  CREATOR: '_creator',
+  LAST_MODIFIER: '_last_modifier',
+
+  IS_DIR: '_is_dir',
+  PARENT_DIR: '_parent_dir',
+  FILE_CTIME: '_file_ctime',
+  FILE_MTIME: '_file_mtime',
+  FILE_CREATOR: '_file_creator',
+  FILE_MODIFIER: '_file_modifier',
+  FILE_NAME: '_name',
+};

frontend/src/metadata/metadata-view/_basic/constants/column/type.js

@@ -5,6 +5,7 @@ const CellType = {
   CTIME: 'ctime',
   LAST_MODIFIER: 'last-modifier',
   MTIME: 'mtime',
+  FILE_NAME: 'file-name',
 };
 
 export default CellType;

frontend/src/metadata/metadata-view/_basic/constants/index.js

@@ -18,6 +18,8 @@ export {
   NOT_SUPPORT_EDIT_COLUMN_TYPE_MAP,
   MULTIPLE_CELL_VALUE_COLUMN_TYPE_MAP,
   SINGLE_CELL_VALUE_COLUMN_TYPE_MAP,
+  PRIVATE_COLUMN_KEY,
+  NOT_DISPLAY_COLUMN_KEYS,
 } from './column';
 export {
   FILTER_CONJUNCTION_TYPE,

frontend/src/metadata/metadata-view/_basic/index.js

@@ -45,6 +45,8 @@ export {
   Z_INDEX,
   GROUPBY_DATE_GRANULARITY_LIST,
   HEADER_HEIGHT_TYPE,
+  PRIVATE_COLUMN_KEY,
+  NOT_DISPLAY_COLUMN_KEYS,
 } from './constants';
 
 export {

frontend/src/metadata/metadata-view/components/cell-formatter/index.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { Formatter } from '@seafile/sf-metadata-ui-component';
 import { useCollaborators } from '../../hooks';
 
-const CellFormatter = ({ readonly, value, field, }) => {
+const CellFormatter = ({ readonly, value, field, ...params }) => {
   const { collaborators, collaboratorsCache, updateCollaboratorsCache } = useCollaborators();
   return (
     <Formatter
@@ -14,6 +14,7 @@ const CellFormatter = ({ readonly, value, field, }) => {
       collaboratorsCache={collaboratorsCache}
       updateCollaboratorsCache={updateCollaboratorsCache}
       queryUserAPI={window.sfMetadataContext.userService.queryUser}
+      { ...params }
     />
   );
 };

frontend/src/metadata/metadata-view/components/table/table-main/records/record-cell.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 import { toaster } from '@seafile/sf-metadata-ui-component';
 import { isFunction } from '../../../../_basic';
 import { isNameColumn } from '../../../../utils/column-utils';
@@ -42,28 +43,16 @@ class RecordCell extends React.Component {
     const { column, highlightClassName, isLastCell, isLastFrozenCell, isCellSelected } = this.props;
     const { isFileTipShow } = this.state;
     const { type } = column;
-    let className = `sf-metadata-result-table-cell sf-metadata-result-table-${type}-cell `;
     const canEditable = window.sfMetadataContext.canModifyCell(column);
-    className = `${className}${(canEditable || !TABLE_SUPPORT_EDIT_TYPE_MAP[type]) ? '' : 'table-cell-uneditable '}`;
+    return classnames('sf-metadata-result-table-cell', `sf-metadata-result-table-${type}-cell`, {
-    if (highlightClassName) {
+      'table-cell-uneditable': !canEditable && TABLE_SUPPORT_EDIT_TYPE_MAP[type],
-      className += `${highlightClassName} `;
+      [highlightClassName]: highlightClassName,
-    }
+      'last-cell': isLastCell,
-    if (isLastCell) {
+      'table-last--frozen': isLastFrozenCell,
-      className += 'last-cell ';
+      'cell-selected': isCellSelected,
-    }
+      'draging-file-to-cell': isFileTipShow,
-    if (isLastFrozenCell) {
+      'row-comment-cell': hasComment,
-      className += 'table-last--frozen ';
+    });
-    }
-    if (isCellSelected) {
-      className += 'cell-selected ';
-    }
-    if (isFileTipShow) {
-      className += 'draging-file-to-cell ';
-    }
-    if (hasComment) {
-      className += 'row-comment-cell';
-    }
-    return className;
   };
 
   onCellClick = (e) => {
@@ -170,7 +159,7 @@ class RecordCell extends React.Component {
       ...cellEvents,
     };
     const cellContent = (
-      <CellFormatter readonly={readonly} value={cellValue} field={column} />
+      <CellFormatter readonly={readonly} value={cellValue} field={column} isDir={record['_is_dir'] === 'True'} />
     );
 
     return (

frontend/src/metadata/metadata-view/constants/index.js

@@ -37,6 +37,7 @@ export const TABLE_NOT_SUPPORT_EDIT_TYPE_MAP = {
 
 export const TABLE_SUPPORT_EDIT_TYPE_MAP = {
   [CellType.TEXT]: true,
+  [CellType.FILE_NAME]: true,
 };
 
 export const TABLE_MOBILE_SUPPORT_EDIT_CELL_TYPE_MAP = {

frontend/src/metadata/metadata-view/hooks/metadata.js

@@ -3,7 +3,7 @@ import React, { useCallback, useContext, useEffect, useState } from 'react';
 import { toaster } from '@seafile/sf-metadata-ui-component';
 import { Metadata } from '../model';
 import { gettext } from '../../../utils/constants';
-import { getErrorMsg, CellType } from '../_basic';
+import { getErrorMsg, CellType, PRIVATE_COLUMN_KEY, NOT_DISPLAY_COLUMN_KEYS } from '../_basic';
 import Context from '../context';
 
 const MetadataContext = React.createContext(null);
@@ -17,27 +17,27 @@ export const MetadataProvider = ({
 
   const getColumnName = useCallback((key, name) => {
     switch (key) {
-      case '_ctime':
+      case PRIVATE_COLUMN_KEY.CTIME:
         return gettext('Created time');
-      case '_mtime':
+      case PRIVATE_COLUMN_KEY.MTIME:
         return gettext('Last modified time');
-      case '_creator':
+      case PRIVATE_COLUMN_KEY.CREATOR:
         return gettext('Creator');
-      case '_last_modifier':
+      case PRIVATE_COLUMN_KEY.LAST_MODIFIER:
         return gettext('Last modifier');
-      case '_file_creator':
+      case PRIVATE_COLUMN_KEY.FILE_CREATOR:
         return gettext('File creator');
-      case '_file_modifier':
+      case PRIVATE_COLUMN_KEY.FILE_MODIFIER:
         return gettext('File modifier');
-      case '_file_ctime':
+      case PRIVATE_COLUMN_KEY.FILE_CTIME:
         return gettext('File created time');
-      case '_file_mtime':
+      case PRIVATE_COLUMN_KEY.FILE_MTIME:
         return gettext('File last modified time');
-      case '_is_dir':
+      case PRIVATE_COLUMN_KEY.IS_DIR:
         return gettext('Is dir');
-      case '_parent_dir':
+      case PRIVATE_COLUMN_KEY.PARENT_DIR:
         return gettext('Parent dir');
-      case '_name':
+      case PRIVATE_COLUMN_KEY.FILE_NAME:
         return gettext('File name');
       default:
         return name;
@@ -46,18 +46,20 @@ export const MetadataProvider = ({
 
   const getColumnType = useCallback((key, type) => {
     switch (key) {
-      case '_ctime':
+      case PRIVATE_COLUMN_KEY.CTIME:
-      case '_file_ctime':
+      case PRIVATE_COLUMN_KEY.FILE_CTIME:
         return CellType.CTIME;
-      case '_mtime':
+      case PRIVATE_COLUMN_KEY.MTIME:
-      case '_file_mtime':
+      case PRIVATE_COLUMN_KEY.FILE_MTIME:
         return CellType.MTIME;
-      case '_creator':
+      case PRIVATE_COLUMN_KEY.CREATOR:
-      case '_file_creator':
+      case PRIVATE_COLUMN_KEY.FILE_CREATOR:
         return CellType.CREATOR;
-      case '_last_modifier':
+      case PRIVATE_COLUMN_KEY.LAST_MODIFIER:
-      case '_file_modifier':
+      case PRIVATE_COLUMN_KEY.FILE_MODIFIER:
         return CellType.LAST_MODIFIER;
+      case PRIVATE_COLUMN_KEY.FILE_NAME:
+        return CellType.FILE_NAME;
       default:
         return type;
     }
@@ -65,7 +67,7 @@ export const MetadataProvider = ({
 
   const getColumns = useCallback((columns) => {
     if (!Array.isArray(columns) || columns.length === 0) return [];
-    return columns.map((column) => {
+    const validColumns = columns.map((column) => {
       const { type, key, name, ...params } = column;
       return {
         key,
@@ -74,7 +76,23 @@ export const MetadataProvider = ({
         ...params,
         width: 200,
       };
-    }).filter(column => !['_id', '_ctime', '_mtime', '_creator', '_last_modifier'].includes(column.key));
+    }).filter(column => !NOT_DISPLAY_COLUMN_KEYS.includes(column.key));
+    let displayColumns = [];
+    validColumns.forEach(column => {
+      if (column.key === '_name') {
+        displayColumns.unshift(column);
+      } else if (column.key === PRIVATE_COLUMN_KEY.PARENT_DIR) {
+        const nameColumnIndex = displayColumns.findIndex(column => column.key === PRIVATE_COLUMN_KEY.PARENT_DIR);
+        if (nameColumnIndex === -1) {
+          displayColumns.unshift(column);
+        } else {
+          displayColumns.splice(nameColumnIndex, 0, column);
+        }
+      } else {
+        displayColumns.push(column);
+      }
+    });
+    return displayColumns;
   }, [getColumnType, getColumnName]);
 
   // init