!2642 修复：1、非管理员状态菜单栏“模块”数量显示错误的问题。 2、切换菜单tabs，下拉箭头不显示问题。3、切换单双层图标模式，下拉箭头显示错误bug

src/UI/Components/TopToolBar/ToolsBlock.tsx

@@ -1,10 +1,9 @@
 import { Button, Intent } from "@blueprintjs/core";
-import { action, observable } from "mobx";
+import { action, observable, reaction } from "mobx";
 import { observer } from "mobx-react";
 import * as React from 'react';
 import { end } from "xaop";
 import { app } from "../../../ApplicationServices/Application";
-import { CommandNames } from "../../../Common/CommandNames";
 import { Sleep } from "../../../Common/Sleep";
 import { ZINDEX } from "../../../Common/ZIndex";
 import { commandMachine } from "../../../Editor/CommandMachine";
@@ -12,7 +11,9 @@ import { CommandState } from "../../../Editor/CommandState";
 import { userConfig } from "../../../Editor/UserConfig";
 import { ICON_CDN } from "../../IconEnum";
 import { ToolsBlockStore } from "./ToolsBlockStore";
-import { ICommandIconInfo, TopToolBarBlockData, TopToolBarBlockDataItem } from "./TopToolBarInterface";
+import { ICommandIconInfo, TopToolBarBlockData } from "./TopToolBarInterface";
+
+const ICON_MAX = 35; // 顶端工具栏每部分最多显示个数
 
 export interface ToolsBlockProps
 {
@@ -26,12 +27,15 @@ export class ToolsBlock extends React.Component<ToolsBlockProps, {}>
 {
     @observable isExtendShow: boolean = false;
     divEl: HTMLDivElement;
-    @observable listMain: ICommandIconInfo[] = this.props.list.slice(0, 35); //顶端工具栏每部分最多显示个数
+    @observable listMain: ICommandIconInfo[] = this.props.list.slice(0, ICON_MAX);
-    @observable listSmall: ICommandIconInfo[] = this.props.list.slice(35); //顶端工具栏每部分最多显示个数
+    @observable listSmall: ICommandIconInfo[] = this.props.list.slice(ICON_MAX);
     @observable windowWidth = window.innerWidth;
     private blocksData = ToolsBlockStore.GetInstance().blocksData as TopToolBarBlockData;
 
     private _DisposeAOP: Function;
+    private reCalcLSNum: boolean = false; // 是否需要重新计算小图标个数
+    private _DisposeReaction: Function;
+
     componentDidMount()
     {
         window.addEventListener('resize', this.calSmallIconList, false);
@@ -42,6 +46,11 @@ export class ToolsBlock extends React.Component<ToolsBlockProps, {}>
         {
             if (this.isExtendShow) this.isExtendShow = false;
         });
+        this._DisposeReaction = reaction(() => userConfig.smalliconmode, () =>
+        {
+            this.forceUpdate();// 图标模式发生变化时，需要先render渲染大图标工具块
+            this.reCalcLSNum = true;// 渲染完毕后，再去计算小图标工具块个数
+        });
     }
     componentWillUnmount()
     {
@@ -51,11 +60,34 @@ export class ToolsBlock extends React.Component<ToolsBlockProps, {}>
             this._DisposeAOP();
             this._DisposeAOP = undefined;
         }
+        if (this._DisposeReaction)
+        {
+            this._DisposeReaction();
+            this._DisposeReaction = undefined;
+        }
     }
+
+    UNSAFE_componentWillReceiveProps(nextProps: Readonly<ToolsBlockProps>): void
+    {
+        // 在切换普通账号和管理员账号时，工具块个数会变化，需要重新计算
+        const nextLM = nextProps.list.slice(0, ICON_MAX);
+        if (this.listMain.length !== nextLM.length)
+        {
+            this.listMain = nextLM;// 工具块个数发生变化，需要先更新并render渲染大图标工具块
+            this.reCalcLSNum = true;// 渲染完毕后，再去计算小图标工具块个数
+        }
+    }
+
     componentDidUpdate()
     {
         if (this.isExtendShow)
             this.divEl.focus();
+
+        if (this.reCalcLSNum)
+        {
+            this.reCalcLSNum = false;
+            this.calSmallIconList();
+        }
     }
 
     @action
@@ -69,29 +101,6 @@ export class ToolsBlock extends React.Component<ToolsBlockProps, {}>
             return;
         this.listSmall = [];
         let width = b.clientWidth;
-        //不可见的工具块
-        if (width === 0)
-        {
-            let topToolBarEl = document.getElementById("TopToolBar");
-            let topToolBarWidth: number;
-            if (topToolBarEl)
-                topToolBarWidth = topToolBarEl.clientWidth;
-            let blocksData = ToolsBlockStore.GetInstance().blocksData as TopToolBarBlockData;
-            let iconNum = 0;
-            for (let key in blocksData)
-            {
-                let data = blocksData[key] as TopToolBarBlockDataItem;
-                if (data.blocksId.includes(blockId))
-                {
-                    iconNum = data.IconNum;
-                    break;
-                }
-            }
-            if (Math.floor(userConfig.smalliconmode ? (topToolBarWidth / 20) : (topToolBarWidth / 55)) < iconNum)
-                this.listSmall = [list[list.length - 1]];
-            return;
-        }
-        //可见的工具块
         let num: number;
         if (userConfig.smalliconmode)
         {
@@ -102,11 +111,12 @@ export class ToolsBlock extends React.Component<ToolsBlockProps, {}>
         {
             num = Math.floor(width / 55);
         }
-        // this.listMain = list.slice(0, num);
         if (num >= list.length)
             return;
+        if (num === 0) return; // 大图标工具块个数不为0
         this.listSmall = list.slice(num);
     };
+
     HandleOnClick = async (cmd: string) =>
     {
         const { execFun } = this.props;
@@ -127,14 +137,6 @@ export class ToolsBlock extends React.Component<ToolsBlockProps, {}>
         }
         execFun(cmd);
     };
-    display = (cmd: ICommandIconInfo) =>
-    {
-        if (cmd.command === CommandNames.TemplateCheck && !userConfig.isAdmin)
-            return true;
-        if (cmd.command === CommandNames.TemplateSearch && !userConfig.showShareModule)
-            return true;
-        return false;
-    };
 
     renderMainList = () =>
     {
@@ -149,7 +151,7 @@ export class ToolsBlock extends React.Component<ToolsBlockProps, {}>
                         title={cmd.title + "\n" + cmd.command}
                         style={{
                             width: userConfig.smalliconmode ? 40 : 55,
-                            display: cmd.command === CommandNames.TemplateCheck && !userConfig.isAdmin ? "none" : "block",
+                            display: "block",
                             marginRight: userConfig.smalliconmode && this.windowWidth > drawIconNum * 40 ? Math.floor((this.windowWidth - drawIconNum * 40) / drawIconNum) : 0
                         }}
                         onClick={() =>
@@ -227,7 +229,6 @@ export class ToolsBlock extends React.Component<ToolsBlockProps, {}>
                 <Button
                     text={btnTitile}
                     intent={Intent.NONE}
-                    // disabled={!(this.listSmall.length > 0)}
                     rightIcon={this.listSmall.length > 0 ? "caret-down" : false}
                     onClick={() =>
                     {

src/UI/Components/TopToolBar/TopToolBar.tsx

@@ -3,6 +3,7 @@ import { observable } from "mobx";
 import { observer } from "mobx-react";
 import * as React from 'react';
 import { CommandNames } from "../../../Common/CommandNames";
+import { userConfig } from "../../../Editor/UserConfig";
 import { IconEnum } from "../../IconEnum";
 import { DownPanelStore } from "../../Store/DownPanelStore";
 import { LayerPanel } from "../ToolBar/Layer/LayerPanel";
@@ -179,11 +180,14 @@ export class TopToolBar extends React.Component<{}, {}>
             { svg: IconEnum.TemplateGroup, title: "组合模块", command: CommandNames.TemplateGroup },
             { svg: IconEnum.TemplateCollection, title: "收藏模板", command: CommandNames.TemplateCollection },
         ];
-        store.iconList.module = [
+        const module = [
             { svg: IconEnum.ModuleManage, title: "模块管理", command: CommandNames.Template },
             { svg: IconEnum.ReviewTemplate, title: "模板审核", command: CommandNames.TemplateCheck },
             { svg: IconEnum.HoleModule, title: "排钻模块", command: CommandNames.HoleTemplate },
         ];
+        // 非管理员，不显示“模板审核”工具项
+        store.iconList.module = module.filter(item => !(item.command === CommandNames.TemplateCheck && !userConfig.isAdmin));
+
         store.iconList.commodity = [
             { svg: IconEnum.CommodityManage, title: "共享模块", command: CommandNames.TemplateSearch },
             { svg: IconEnum.ShareMaterial, title: "共享材质", command: CommandNames.BuyMaterial },
@@ -243,6 +247,7 @@ export class TopToolBar extends React.Component<{}, {}>
                     animate={false}
                     selectedTabId={this.selectedTabId}
                     onChange={e => this.selectedTabId = e}
+                    renderActiveTabPanelOnly={true}
                 >
                     <Tab className="tab-unstyle" id="file" title="文件" panel={<FileOperationPanel store={store} />} />
                     <Tab className="tab-unstyle" id="draw" title="绘图" panel={<DrawingPanel store={store} />} />