Update published-repo and wechat-department catalogue style and interaction (#3912)

* change published-index-viewer btn

* change click same link node

* change weixin work department style

* change name

frontend/src/components/index-viewer.js

@@ -78,13 +78,14 @@ class IndexContentViewer extends React.Component {
 
   onLinkClick = (event) => {
     event.preventDefault(); 
-    event.stopPropagation();
-    const link = this.getLink(event.target);
-    if (link) this.props.onLinkClick(link);
     const currentPath = event.target.getAttribute('data-path');
-    if (currentPath) {
+    if (currentPath === this.state.currentPath) {
+      return;
+    } else if (currentPath) {
       this.setState({ currentPath: currentPath });
     }
+    const link = this.getLink(event.target);
+    if (link) this.props.onLinkClick(link);
   }
 
   getLink = (node) => {
@@ -248,12 +249,16 @@ class FolderItem extends React.Component {
     });
   }
 
+  expandChildNodes = () => {
+    this.setState({ expanded: true });
+  }
+
   renderLink = (node) => {
     const className = node.path === this.props.currentPath ? 'wiki-nav-content wiki-nav-content-highlight' : 'wiki-nav-content';
     if (node.href && node.name) {
-      return <div className={className}><a href={node.href} data-path={node.path}>{node.name}</a></div>;
+      return <div className={className}><a href={node.href} data-path={node.path} onClick={this.expandChildNodes}>{node.name}</a></div>;
     } else if (node.name) {
-      return <div className="wiki-nav-content"><span>{node.name}</span></div>;
+      return <div className="wiki-nav-content"><span onClick={this.expandChildNodes}>{node.name}</span></div>;
     } else {
       return null;
     }

frontend/src/css/index-viewer.css

@@ -24,4 +24,5 @@
   color: #c0c0c0;
   cursor: pointer;
   font-size: 12px;
+  padding-right: 10px;
 }

frontend/src/css/work-weixin-departments.css

@@ -70,9 +70,11 @@
 .tree-node-hight-light .attr-action-icon:hover {
   color: #fff !important;
 }
+.tree-node-icon {
+  padding-right: 1.5rem;
+}
 .tree-node-text {
-  padding-left: 1.3rem;
+  width: calc(100% - 2.5rem);
-  width: calc(100% - 1.3rem);
   font-size: 14px;
   white-space: nowrap;
   overflow: hidden;

frontend/src/pages/sys-admin/work-weixin/work-weixin-departments-tree-node.js

@@ -75,6 +75,14 @@ class WorkWeixinDepartmentsTreeNode extends Component {
     }
   };
 
+  changeDept = (departmentID) => {
+    const { department, checkedDepartmentId } = this.props;
+    this.props.onChangeDepartment(departmentID);
+    if (checkedDepartmentId === department.id && !this.state.isChildrenShow) {
+      this.setState({ isChildrenShow: true });
+    }
+  }
+
   render() {
     const { isChildrenShow, department, checkedDepartmentId } = this.props;
     let toggleClass = classNames({
@@ -91,11 +99,13 @@ class WorkWeixinDepartmentsTreeNode extends Component {
         {isChildrenShow &&
           <div
             className={nodeInnerClass}
-            onClick={() => this.props.onChangeDepartment(department.id)}
+            onClick={() => this.changeDept(department.id)}
             onMouseEnter={this.onMouseEnter}
             onMouseLeave={this.onMouseLeave}
           >
-            <i className={toggleClass} onClick={(e) => this.toggleChildren(e)}></i>{' '}
+            <span className="tree-node-icon" onClick={(e) => this.toggleChildren(e)}>
+              <i className={toggleClass}></i>
+            </span>
             <span className="tree-node-text">{department.name}</span>
             {isPro &&
             <Dropdown