@titaui/pc 1.8.61 → 1.9.3

package/src/components/menus/components/flip-menu-card/index.tsx

@@ -1,18 +1,24 @@
-import React, { useState, useRef, forwardRef, useImperativeHandle, useEffect } from 'react';
-import ReactDOM from 'react-dom';
-import classNames from 'classnames';
-import MenuCard from '../menu-card';
-import FlipBackHander from './flip-back-header';
-import MenuCloseBtn from '../menu-close-btn';
-import DragResize from '../drag-resize';
-import preCls from './precls';
-import './index.scss';
+import React, {
+  useState,
+  useRef,
+  forwardRef,
+  useImperativeHandle,
+  useEffect,
+} from "react";
+import ReactDOM from "react-dom";
+import classNames from "classnames";
+import MenuCard from "../menu-card";
+import FlipBackHander from "./flip-back-header";
+import MenuCloseBtn from "../menu-close-btn";
+import DragResize from "../drag-resize";
+import preCls from "./precls";
+import "./index.scss";
 
 interface Props {
   children: any;
   defaultWidth: number;
   collapseMenu: Function;
-  onChange?: Function
+  onChange?: Function;
 }
 
 export interface flipRefIns {
@@ -22,18 +28,15 @@ export interface flipRefIns {
 }
 
 export default forwardRef((props: Props, ref) => {
-  const {
-    children,
-    defaultWidth,
-    collapseMenu,
-    onChange = () => { }
-  } = props;
+  const { children, defaultWidth, collapseMenu, onChange = () => {} } = props;
 
   const [isBack, setIsBack] = useState(false);
   const [isFloat, setIsFloat] = useState(false);
   const [isFloatHide, setIsFloatHide] = useState(false);
   const [isHideTopRightIcon, setIsHideTopRightIcon] = useState(false);
 
+  const [showMore, setShowMore] = useState(false);
+
   const hideFloatRef = useRef<any>();
   const flipCardRef = useRef<any>();
   const flipFrontRef = useRef<any>();
@@ -42,168 +45,213 @@ export default forwardRef((props: Props, ref) => {
   const goBackHandler = () => {
     if (!isBack) return;
     setMenuHideIcon(true);
-    flipBackRef.current.style.position = 'absolute';
-    flipFrontRef.current.style.display = 'block';
+    flipBackRef.current.style.position = "absolute";
+    flipFrontRef.current.style.display = "block";
     setTimeout(() => {
-      flipFrontRef.current.style.position = 'relative';
-      flipBackRef.current.style.display = 'none';
+      flipFrontRef.current.style.position = "relative";
+      flipBackRef.current.style.display = "none";
       setMenuHideIcon(false);
-    }, 600)
+    }, 600);
     setIsBack(false);
     onChange(false);
-  }
+  };
 
   const nextHandler = () => {
     if (isBack) return;
     setMenuHideIcon(true);
-    flipFrontRef.current.style.position = 'absolute';
-    flipBackRef.current.style.display = 'block';
+    flipFrontRef.current.style.position = "absolute";
+    flipBackRef.current.style.display = "block";
     setTimeout(() => {
-      flipBackRef.current.style.position = 'relative';
-      flipFrontRef.current.style.display = 'none';
+      flipBackRef.current.style.position = "relative";
+      flipFrontRef.current.style.display = "none";
       setMenuHideIcon(false);
-    }, 600)
+    }, 600);
     setIsBack(true);
     onChange(true);
-  }
+  };
 
-  const setMenuHideIcon = isHide => {
+  const setMenuHideIcon = (isHide) => {
     if (isHide === false && isFloat) return; // 如果是浮动状态则不能显示隐藏按钮
     setIsHideTopRightIcon(isHide);
-  }
+  };
 
   useEffect(() => {
     setMenuHideIcon(isFloat);
   }, [isFloat]);
 
   useImperativeHandle(ref, () => ({
-    'next': nextHandler,
-    'goback': goBackHandler,
-  }))
+    next: nextHandler,
+    goback: goBackHandler,
+  }));
 
   const onMenuHideHandler = () => {
     collapseMenu(!isFloat); // 最外层菜单with=0
-    setIsFloat(!isFloat);   // 浮动菜单，设置阴影
-    setTimeout(() => {      // 1秒后隐藏菜单到左侧
-      setIsFloatHide(!isFloatHide);
-    }, !isFloat ? 400 : 0)
-  }
+    setIsFloat(!isFloat); // 浮动菜单，设置阴影
+    setTimeout(
+      () => {
+        // 1秒后隐藏菜单到左侧
+        setIsFloatHide(!isFloatHide);
+      },
+      !isFloat ? 400 : 0
+    );
+  };
 
   const removeCloseFloat = () => {
     clearTimeout(hideFloatRef.current);
-  }
+  };
 
   // 隐藏浮动的菜单（通用）
-  const hideFlipCard = e => {
+  const hideFlipCard = (e) => {
     if (!isFloat) return; // 非浮动状态下不隐藏
     removeCloseFloat();
     hideFloatRef.current = setTimeout(() => {
       setIsFloatHide(true);
-    }, 400)
-  }
+    }, 400);
+  };
 
-  const onFixedHideIconMouseEnter = e => {
+  const onFixedHideIconMouseEnter = (e) => {
     e.stopPropagation();
     removeCloseFloat();
     setIsFloatHide(false);
-  }
+  };
 
-  const onFixedHideIconMouseLeave = e => {
+  const onFixedHideIconMouseLeave = (e) => {
     e.stopPropagation();
     hideFlipCard(e);
-  }
+  };
 
-  const onFixedHideIconClickHandler = e => {
+  const onFixedHideIconClickHandler = (e) => {
     e.stopPropagation();
     collapseMenu(false);
     setIsFloat(false);
     setIsFloatHide(false);
-  }
+  };
 
-  const onFlipMouseEnterHandler = e => {
+  const onFlipMouseEnterHandler = (e) => {
     e.stopPropagation();
     removeCloseFloat();
-  }
+  };
 
-  const onFlipMouseLeaveHandler = e => {
+  const onFlipMouseLeaveHandler = (e) => {
     e.stopPropagation();
-    if (e.currentTarget.className.indexOf('titaui-flip-card--is-float-hide') != -1) {
-      return
-    };
+    if (
+      e.currentTarget.className.indexOf("titaui-flip-card--is-float-hide") != -1
+    ) {
+      return;
+    }
     hideFlipCard(e);
-  }
-
-  return <React.Fragment>
-    <div
-      ref={flipCardRef}
-      onMouseEnter={onFlipMouseEnterHandler}
-      onMouseLeave={onFlipMouseLeaveHandler}
-      className={classNames(preCls, {
-        [`${preCls}--is-back`]: isBack,
-        [`${preCls}--is-float`]: isFloat,
-        [`${preCls}--is-float-hide`]: isFloatHide,
-      })}
-    >
-      <DragResize
-        minWidth={defaultWidth - 10}
-        maxWidth={600}
-        defaultWidth={defaultWidth}
+  };
+
+  useEffect(() => {
+    const targetNode = document.getElementsByClassName(
+      "simplebar-content-wrapper"
+    )[0];
+
+    const config = { attributes: true, childList: true, subtree: true };
+
+    const callback = function (_mutationsList, _observer) {
+      const scrollArea = document.getElementsByClassName(
+        "simplebar-content-wrapper"
+      )[0];
+      if (scrollArea && scrollArea.scrollHeight > scrollArea.offsetHeight) {
+        setShowMore(true);
+      } else {
+        setShowMore(false);
+      }
+    };
+    const observer = new MutationObserver(callback);
+
+    targetNode && observer.observe(targetNode, config);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  return (
+    <React.Fragment>
+      <div
+        ref={flipCardRef}
+        onMouseEnter={onFlipMouseEnterHandler}
+        onMouseLeave={onFlipMouseLeaveHandler}
+        className={classNames(preCls, {
+          [`${preCls}--is-back`]: isBack,
+          [`${preCls}--is-float`]: isFloat,
+          [`${preCls}--is-float-hide`]: isFloatHide,
+        })}
       >
-        <div className={classNames(`${preCls}__inner`)}>
-
-          {/* 第一屏的内容 */}
-          <div
-            ref={flipFrontRef}
-            className={classNames(`${preCls}__inner-front`)}
-          >
-            <div className={classNames(`${preCls}__inner-front-content`, {
-              [`${preCls}__inner-front-content--is-float`]: isFloat,
-              [`${preCls}__inner-front-content--is-float-hide`]: isFloatHide
-            })}>
-              <MenuCard style={{ 'padding': '28px 12px 28px 12px' }}>
-                {children[0]}
-              </MenuCard>
+        <DragResize
+          minWidth={defaultWidth - 10}
+          maxWidth={600}
+          defaultWidth={defaultWidth}
+        >
+          <div className={classNames(`${preCls}__inner`)}>
+            {/* 第一屏的内容 */}
+            <div
+              ref={flipFrontRef}
+              className={classNames(`${preCls}__inner-front`)}
+            >
+              <div
+                className={classNames(`${preCls}__inner-front-content`, {
+                  [`${preCls}__inner-front-content--is-float`]: isFloat,
+                  [`${preCls}__inner-front-content--is-float-hide`]:
+                    isFloatHide,
+                })}
+              >
+                <MenuCard style={{ padding: "28px 12px 28px 12px" }}>
+                  {children[0]}
+                </MenuCard>
+              </div>
             </div>
-          </div>
 
-          {/* 第二屏的内容 */}
-          <div
-            ref={flipBackRef}
-            className={classNames(`${preCls}__inner-back`)}
-          >
-            <div className={classNames(`${preCls}__inner-back-content`, {
-              [`${preCls}__inner-back-content--is-float`]: isFloat,
-              [`${preCls}__inner-back-content--is-float-hide`]: isFloatHide
-            })}>
-              <MenuCard style={{ 'padding': '42px 12px 28px 12px' }}>
-                <FlipBackHander onClick={goBackHandler} />
-                {children[1]}
-              </MenuCard>
+            {/* 第二屏的内容 */}
+            <div
+              ref={flipBackRef}
+              className={classNames(`${preCls}__inner-back`)}
+            >
+              <div
+                className={classNames(`${preCls}__inner-back-content`, {
+                  [`${preCls}__inner-back-content--is-float`]: isFloat,
+                  [`${preCls}__inner-back-content--is-float-hide`]: isFloatHide,
+                })}
+              >
+                <MenuCard style={{ padding: "42px 12px 28px 12px" }}>
+                  <FlipBackHander onClick={goBackHandler} />
+                  {children[1]}
+                </MenuCard>
+              </div>
             </div>
+            {showMore && (
+              <div className={`${preCls}__has-more`}>
+              </div>
+            )}
           </div>
-        </div>
-      </DragResize>
-
-      {/* 菜单右上角的隐藏ICON */}
-      {!isHideTopRightIcon && <MenuCloseBtn
-        className={classNames(`${preCls}__top-right-hide-icon`)}
-        isAutoShow={true}
-        onClick={onMenuHideHandler}
-      />}
-    </div>
-
-    {/* 页面最左侧的隐藏ICON */}
-    {isFloat && ReactDOM.createPortal(
-      <span className={classNames(`${preCls}__fixed-hide-icon`)}>
-        <MenuCloseBtn
-          isClose={true}
-          isAutoShow={false}
-          onClick={onFixedHideIconClickHandler}
-          onMouseEnter={onFixedHideIconMouseEnter}
-          onMouseLeave={onFixedHideIconMouseLeave}
-        />
-      </span>,
-      document.body
-    )}
-  </React.Fragment>
-})
+        </DragResize>
+
+        {/* 菜单右上角的隐藏ICON */}
+        {!isHideTopRightIcon && (
+          <MenuCloseBtn
+            className={classNames(`${preCls}__top-right-hide-icon`)}
+            isAutoShow={true}
+            onClick={onMenuHideHandler}
+          />
+        )}
+      </div>
+
+      {/* 页面最左侧的隐藏ICON */}
+      {isFloat &&
+        ReactDOM.createPortal(
+          <span className={classNames(`${preCls}__fixed-hide-icon`)}>
+            <MenuCloseBtn
+              isClose={true}
+              isAutoShow={false}
+              onClick={onFixedHideIconClickHandler}
+              onMouseEnter={onFixedHideIconMouseEnter}
+              onMouseLeave={onFixedHideIconMouseLeave}
+            />
+          </span>,
+          document.body
+        )}
+    </React.Fragment>
+  );
+});

package/src/components/menus/components/flip-menu-card/light.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 4</title>
+    <g id="整体框架" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(-98.000000, -504.000000)" id="编组-4">
+            <g transform="translate(98.000000, 504.000000)">
+                <rect id="矩形" x="0" y="0" width="16" height="16" rx="1"></rect>
+                <g id="double-left" transform="translate(8.333333, 8.000000) rotate(-90.000000) translate(-8.333333, -8.000000) translate(2.333333, 1.000000)" fill="#2879FF" fill-rule="nonzero">
+                    <path d="M-1.76793705,3.3938889 L-1.75125494,3.40915022 L3.65139574,8.51106147 L9.06523913,3.41309131 C9.34060773,3.15378577 9.78335553,3.14884771 10.0651005,3.39816722 L10.0818093,3.41343148 C10.0819295,3.41354477 10.0820495,3.41365807 10.0821696,3.41377143 C10.3568954,3.67320717 10.3619721,4.09038252 10.0976325,4.35565042 L10.0814489,4.37138173 L4.18879147,9.92030247 C4.05610644,10.0452476 3.88456021,10.111135 3.7108896,10.1179771 C3.50761457,10.1410503 3.29591324,10.0821891 3.13579683,9.94151673 L3.11683434,9.92424333 L-2.76746471,4.36744057 C-3.04244275,4.1077667 -3.04767927,3.69025351 -2.78329081,3.42456679 L-2.76710395,3.40881027 L-2.76674348,3.40847055 C-2.49162737,3.14940283 -2.04923783,3.1446155 -1.76793705,3.3938889 Z" id="路径" transform="translate(3.657203, 6.666667) scale(-1, 1) rotate(-90.000000) translate(-3.657203, -6.666667) "></path>
+                    <path d="M5.14583122,4.27441254 L5.1580251,4.28556785 L9.10712094,8.01483661 L13.0643981,4.28844864 C13.2656802,4.0989079 13.5893091,4.09529839 13.795252,4.2775398 L13.8074654,4.2886973 C13.8075532,4.2887801 13.8076409,4.28886292 13.8077287,4.28894578 C14.008541,4.47858168 14.0122519,4.78351817 13.8190315,4.97741714 L13.8072019,4.98891602 L9.49993314,9.04492868 C9.40294634,9.13625801 9.27755368,9.18441881 9.15060828,9.18942001 C9.00202328,9.20628554 8.84727914,9.16326061 8.73024121,9.06043534 L8.71638048,9.04780928 L4.41522124,4.98603523 C4.2142246,4.79622525 4.21039694,4.49104178 4.40365307,4.2968367 L4.41548494,4.28531938 L4.41574843,4.28507108 C4.61684599,4.09570415 4.94021294,4.09220485 5.14583122,4.27441254 Z" id="路径" fill-opacity="0.3" transform="translate(9.111366, 6.666667) scale(-1, 1) rotate(-90.000000) translate(-9.111366, -6.666667) "></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/components/menus/components/menu-tree/tree-node/assess-manage.tsx

@@ -1,6 +1,9 @@
 import React from 'react';
 import classNames from 'classnames';
 import preCls from '../precls';
+import { getBSGlobal } from '../../../../../utils/bs-global';
+const i18nInfo = getBSGlobal("I18NInfo");
+const isZn = !i18nInfo || i18nInfo && i18nInfo.I18NOpen && i18nInfo.I18NUserLang === "zh_CN";
 
 import './index.scss';
 
@@ -17,6 +20,6 @@ export default props => {
     {level > 0 && <span className={classNames(`${preCls}__ass-manage-node-indent`)} />}
     {data.icon && <span className={classNames(`${preCls}__ass-manage-node-icon`, data.icon)} />}
     <span className={classNames(`${preCls}__ass-manage-node-title`, 'noselect')}>{props.title}</span>
-    <span className={classNames(`${preCls}__ass-manage-node-suffix`)} />
+    {isZn && <span className={classNames(`${preCls}__ass-manage-node-suffix`)} />}
   </div>
 }

package/src/components/menus/components/menu-tree/tree-node/assess-template.tsx

@@ -1,6 +1,9 @@
 import React from 'react';
 import classNames from 'classnames';
 import preCls from '../precls';
+import { getBSGlobal } from '../../../../../utils/bs-global';
+const i18nInfo = getBSGlobal("I18NInfo");
+const isZn = !i18nInfo || i18nInfo && i18nInfo.I18NOpen && i18nInfo.I18NUserLang === "zh_CN";
 
 import './index.scss';
 
@@ -17,6 +20,6 @@ export default props => {
     {level > 0 && <span className={classNames(`${preCls}__ass-template-node-indent`)} />}
     {data.icon && <span className={classNames(`${preCls}__ass-template-node-icon`, data.icon)} />}
     <span className={classNames(`${preCls}__ass-template-node-title`, 'noselect')}>{props.title}</span>
-    <span className={classNames(`${preCls}__ass-template-node-suffix`)} />
+    {isZn && <span className={classNames(`${preCls}__ass-template-node-suffix`)} />}
   </div>
 }

package/src/components/menus/components/menu-tree/tree-node/index.scss

@@ -180,6 +180,7 @@
       margin-left: 8px;
       background-image: url("../images/appraisal-menu/setting.svg");
       background-size: contain;
+      background-repeat: no-repeat;
     }
   }
 
@@ -195,6 +196,7 @@
       margin-left: 8px;
       background-image: url("../images/appraisal-menu/launch.svg");
       background-size: contain;
+      background-repeat: no-repeat;
     }
   }
 

package/src/components/menus/components/menu-tree/tree-node/no-follower.tsx

@@ -6,7 +6,8 @@ import preCls from '../precls';
 import './index.scss';
 
 export default () => {
+  const noFollowerText = window['getLocale'] && window['getLocale'](locale.nofollowers) || locale.nofollowers;
   return <div className={classNames(`${preCls}__no-follower-node`)} title="">
-    <span>{locale.nofollowers}</span>
+    <span>{noFollowerText}</span>
   </div>
 }

package/src/components/menus/components/search-colleague/index.tsx

@@ -13,7 +13,7 @@ interface Props {
 
 export default (props: Props) => {
   const {
-    placeholder = locale.input_search_user,
+    placeholder = window['getLocale'] && window['getLocale'](locale.input_search_user) || locale.input_search_user,
     onSelect
   } = props;
 

package/src/components/menus/export-modules/appraisal-menus/index.scss

@@ -1,5 +1,5 @@
 @mixin boxScroll {
-  height: 100%;
+  height: auto;
   overflow: overlay;
 
   &::-webkit-scrollbar {

package/src/components/menus/export-modules/appraisal-menus/index.tsx

@@ -8,6 +8,7 @@ import Scrollbar from '../../../scrollbar';
 import AppraisalMenuData, { AppraisalMenusInt, defaultRefObject } from "./menus";
 import MenuHighlight from './menu-highlight';
 import preCls from "../../precls";
+import { getLocale, isEn } from "../../../../utils/getLocale";
 
 import "../../index.scss";
 import "./index.scss";
@@ -56,8 +57,8 @@ const AppraisalMenus = (props: Props) => {
       // @ts-ignore
       window.titaTracker('action').record({
         actionName: `绩效考核__${node.title}`,
-        actionGroup: '绩效考核',
-        productName: '绩效考核',
+        actionGroup: getLocale('Menu_Title_Performance'),
+        productName: getLocale('Menu_Title_Performance'),
       });
   };
 
@@ -87,7 +88,7 @@ const AppraisalMenus = (props: Props) => {
       ref={menuRef}
       className={classNames(preCls, `${preCls}-appraisal-menus`)}
     >
-      <FlipCard collapseMenu={collapseMenu} ref={flipRef} defaultWidth={180}>
+      <FlipCard collapseMenu={collapseMenu} ref={flipRef} defaultWidth={isEn ? 210 : 180}>
         <React.Fragment>
           <div className={classNames(`${preCls}-appraisal-menus-tree`)}>
             <Scrollbar style={{ maxHeight }}>

package/src/components/menus/export-modules/appraisal-menus/menus.ts

@@ -1,5 +1,6 @@
 import { getUserInfo, getBSGlobal } from "../../../../utils/bs-global";
 import { locale } from '../../i18n';
+import { getLocale } from "../../../../utils/getLocale";
 import {
   GROUP_NAME_NODE,
   MENU_ITEM_NOE,
@@ -120,7 +121,7 @@ export default class AppraisalMenus {
       },
       {
         icon: "",
-        label: "基础设置",
+        label: locale.menu_basesetting,
         key: "base-appraisal-group",
         type: GROUP_NAME_NODE,
         href: "",
@@ -164,7 +165,7 @@ export default class AppraisalMenus {
       if (menu.isShow) {
         treeNodes.push({
           key: `${menu.key}`,
-          title: menu.label,
+          title: getLocale(menu.label) ? getLocale(menu.label) : menu.label,
           data: menu,
           isLeaf: true,
           children: [],

package/src/components/menus/export-modules/manage-menus/index.scss

@@ -1,13 +0,0 @@
-.titaui-menus-manage-menus {
-  width: 180px;
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  // max-height: calc(100vh - 72px - 74px);
-  flex-direction: column;
-  background: #ffffff;
-  padding: 28px 12px;
-  box-shadow: 0px 0px 16px 0px rgba(127, 145, 180, 0.1);
-  border-radius: 12px;
-  will-change: height;
-}

package/src/components/menus/export-modules/manage-menus/index.tsx

@@ -1,5 +1,6 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import { withRouter } from "react-router";
+import classNames from "classnames";
 import MenuTree from "../../components/menu-tree";
 import {
   PARENT_MENU_NODE,
@@ -7,6 +8,10 @@ import {
 } from "../../components/menu-tree/tree-node/index";
 import { menus } from "./constant";
 import { JudgeManageHighLightMenu } from "./handle-highlight";
+import { getLocale, isEn } from "../../../../utils/getLocale";
+import FlipCard, { flipRefIns } from "../../components/flip-menu-card";
+import Scrollbar from "../../../scrollbar";
+
 import "./index.scss";
 
 interface Props {
@@ -28,13 +33,17 @@ const expandedKeys = ["okr"];
 const ManageMenus = (props: Props) => {
   const { history } = props;
   const [selectedMenuKeys, setSelectedMenuKeys] = useState<any[]>([]);
+  const flipRef = useRef<flipRefIns>({
+    next: () => {},
+    goback: () => {},
+  });
+  const menuRef = useRef<any>();
 
   const formateToTreeNodeData = (menus, pid = 0, level = 0) => {
     const treeNodes: TreeNode[] = [];
 
     for (let i = 0; i < menus.length; i++) {
       const menu = menus[i];
-
       const hasChildren = menu.children && menu.children.length ? true : false;
       const isLeaf = menu.isLeaf !== undefined ? menu.isLeaf : !hasChildren;
 
@@ -43,7 +52,7 @@ const ManageMenus = (props: Props) => {
 
       treeNodes.push({
         key: `${menu.key}`,
-        title: menu.label,
+        title: getLocale(menu.label) ? getLocale(menu.label) : menu.label,
         data: menu.data || menu,
         isLeaf: isLeaf,
         children: formateToTreeNodeData(
@@ -57,6 +66,14 @@ const ManageMenus = (props: Props) => {
     return treeNodes;
   };
 
+  const collapseMenu = (isHide) => {
+    if (isHide) {
+      menuRef.current.style.width = "0px";
+    } else {
+      menuRef.current.style.width = "";
+    }
+  };
+
   useEffect(() => {
     const search = history.location.search;
     const activeMenu = new JudgeManageHighLightMenu(search).getHighLightMenu();
@@ -70,13 +87,27 @@ const ManageMenus = (props: Props) => {
   };
 
   return (
-    <div className={`${preCls}-manage-menus`}>
-      <MenuTree
-        data={formateToTreeNodeData(menus)}
-        selectedKeys={selectedMenuKeys}
-        expandedKeys={expandedKeys}
-        onSelect={onSelectHandler}
-      />
+    <div ref={menuRef} className={classNames(`${preCls}-manage-menus`)}>
+      <FlipCard
+        collapseMenu={collapseMenu}
+        ref={flipRef}
+        defaultWidth={isEn ? 210 : 180}
+      >
+        <React.Fragment>
+          <div className={classNames(`${preCls}-appraisal-menus-tree`)}>
+            <Scrollbar>
+              <MenuTree
+                data={formateToTreeNodeData(menus)}
+                selectedKeys={selectedMenuKeys}
+                expandedKeys={expandedKeys}
+                onSelect={onSelectHandler}
+              />
+            </Scrollbar>
+          </div>
+        </React.Fragment>
+
+        <React.Fragment></React.Fragment>
+      </FlipCard>
     </div>
   );
 };