feat: tags (#7029)

* feat: tags

* feat: optimize code

* feat: optimize ui

* feat: update title

* feat: update title

* Feat: tags status management

* feat: optimize code

* feat: optimize code

* feat: optimize code

* feat: optimize rebase

---------

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

frontend/src/components/dir-view-mode/dir-column-view.js

@@ -7,8 +7,9 @@ import { SIDE_PANEL_FOLDED_WIDTH } from '../../constants';
 import ResizeBar from '../resize-bar';
 import { DRAG_HANDLER_HEIGHT, MAX_SIDE_PANEL_RATE, MIN_SIDE_PANEL_RATE } from '../resize-bar/constants';
 import { SeafileMetadata } from '../../metadata';
+import { TagsView } from '../../tag';
 import { mediaUrl } from '../../utils/constants';
-import { GRID_MODE, LIST_MODE, METADATA_MODE } from './constants';
+import { GRID_MODE, LIST_MODE, METADATA_MODE, TAGS_MODE } from './constants';
 
 const propTypes = {
   isSidePanelFolded: PropTypes.bool,
@@ -39,6 +40,7 @@ const propTypes = {
   filePermission: PropTypes.string,
   content: PropTypes.string,
   viewId: PropTypes.string,
+  tagId: PropTypes.string,
   lastModified: PropTypes.string,
   latestContributor: PropTypes.string,
   onLinkClick: PropTypes.func.isRequired,
@@ -208,6 +210,18 @@ class DirColumnView extends React.Component {
               showDirentDetail={this.props.showDirentDetail}
             />
           )}
+          {currentMode === TAGS_MODE && (
+            <TagsView
+              mediaUrl={mediaUrl}
+              repoID={this.props.repoID}
+              repoInfo={this.props.currentRepoInfo}
+              tagID={this.props.tagId}
+              deleteFilesCallback={this.props.deleteFilesCallback}
+              renameFileCallback={this.props.renameFileCallback}
+              updateCurrentDirent={this.props.updateCurrentDirent}
+              closeDirentDetail={this.props.closeDirentDetail}
+            />
+          )}
           {currentMode === LIST_MODE &&
             <DirListView
               path={this.props.path}