Add tab tooltips cancle outer tab

source/Component/CommandBar/CommandBar.tsx

@@ -1,6 +1,7 @@
 import { BackgroundLevel, Theme } from "@Component/Theme/Theme";
 import { DirectionalHint, IconButton } from "@fluentui/react";
 import { LocalizationTooltipHost } from "../Localization/LocalizationTooltipHost";
+import { useSetting, IMixinSettingProps } from "@Context/Setting";
 import { AllI18nKeys } from "../Localization/Localization";
 import { Component, ReactNode } from "react";
 import "./CommandBar.scss";
@@ -9,13 +10,19 @@ interface ICommandBarProps {
     width: number;
 }
 
-class CommandBar extends Component<ICommandBarProps> {
+@useSetting
+class CommandBar extends Component<ICommandBarProps & IMixinSettingProps> {
 
     render(): ReactNode {
         return <Theme
             className="command-bar"
             backgroundLevel={BackgroundLevel.Level2}
             style={{ width: this.props.width }}
+            onClick={() => {
+                if (this.props.setting) {
+                    this.props.setting.layout.focus("");
+                }
+            }}
         >
             <div>
                 {this.getRenderButton({ iconName: "Save", i18NKey: "Command.Bar.Save.Info" })}

source/Component/Container/Container.scss

@@ -98,23 +98,33 @@ div.app-container {
 		width: 100%;
 		height: 100%;
 		box-sizing: border-box;
+		padding: 10px;
+		overflow: scroll;
+		-ms-overflow-style: none;
 		border: .8px solid rgba($color: #000000, $alpha: 0);
 	}
+	
+	div.app-panel::-webkit-scrollbar {
+		width : 8px;  /*高宽分别对应横竖滚动条的尺寸*/
+  		height: 0;
+	}
+
+	div.app-panel::-webkit-scrollbar-thumb {
+		/*滚动条里面小方块*/
+		border-radius: 8px;
+	}
+
+	div.app-panel::-webkit-scrollbar-track {
+		/*滚动条里面轨道*/
+		border-radius: 8px;
+		background-color: rgba($color: #000000, $alpha: 0);
+	}
 
 	div.app-panel.active {
 		border: .8px solid blue !important;
 	}
 }
 
-div.app-panel {
-	overflow: scroll;
-	-ms-overflow-style: none;
-}
-div.app-panel::-webkit-scrollbar {
-	width: 0 !important;
-	height: 0 !important;
-}
-
 div.dark.app-container.end-containe {
 	border: .8px solid $lt-bg-color-lvl3-dark;
 
@@ -132,6 +142,10 @@ div.dark.app-container.end-containe {
 			transition: none;
 		}
 	}
+
+	div.app-panel::-webkit-scrollbar-thumb {
+		background-color: $lt-bg-color-lvl1-dark;
+	}
 }
 
 div.light.app-container.end-containe {
@@ -150,4 +164,8 @@ div.light.app-container.end-containe {
 			transition: none;
 		}
 	}
+
+	div.app-panel::-webkit-scrollbar-thumb {
+		background-color: $lt-bg-color-lvl1-light;
+	}
 }

source/Component/Container/Container.tsx

@@ -1,7 +1,11 @@
+import { Localization } from "@Component/Localization/Localization";
 import { Theme, BackgroundLevel, FontLevel } from "@Component/Theme/Theme";
 import { Themes } from "@Context/Setting";
+import { DirectionalHint } from "@fluentui/react";
 import { ILayout, LayoutDirection } from "@Model/Layout";
 import { Component, ReactNode, MouseEvent } from "react";
+import { getPanelById, getPanelInfoById } from "../../Panel/Panel";
+import { LocalizationTooltipHost } from "../Localization/LocalizationTooltipHost";
 import "./Container.scss";
 
 interface IContainerProps extends ILayout {
@@ -13,10 +17,6 @@ interface IContainerProps extends ILayout {
 	onFocusTab?: (id: string) => any;
 }
 
-function getPanelById(id: string) {
-	return <Theme>{id}</Theme>
-}
-
 class Container extends Component<IContainerProps> {
 
 	private focusEdgeId: number | undefined;
@@ -49,21 +49,41 @@ class Container extends Component<IContainerProps> {
 
 		return <>
 			{showBar ? 
-				<div className={classList.join(" ")} >{
+				<div className={classList.join(" ")} onClick={() => {
+					this.props.onFocusTab ? this.props.onFocusTab("") : undefined
+				}}>{
 					panles.map((panelId: string) => {
 
 						const classList: string[] = ["app-tab-header-item"];
 						if (panelId === this.props.focusId) classList.push("active");
 						if (panelId === showPanelId) classList.push("tab");
+						const panelInfo = getPanelInfoById(showPanelId as any);
 
-						return <div 
+						return <LocalizationTooltipHost
+							i18nKey={panelInfo ? panelInfo.introKay as any : "Panel.Info.Notfound"}
+							options={{id: panelId}}
+							directionalHint={DirectionalHint.topAutoEdge}
+							delay={2}
 							key={panelId}
-							className={classList.join(" ")}
-							onClick={() => this.props.onFocusTab ? this.props.onFocusTab(panelId) : undefined}
 						>
-							<div className="border-view"></div>
-							<div className="title-view">{panelId}</div>
-						</div>
+							<div	
+								className={classList.join(" ")}
+								onClick={(e) => {
+									e.stopPropagation();
+									this.props.onFocusTab ? this.props.onFocusTab(panelId) : undefined;
+								}}
+							>
+								<div className="border-view"></div>
+								<div className="title-view">
+									{
+										panelInfo ?
+											<Localization i18nKey={panelInfo.nameKey as any}/>:
+											<Localization i18nKey="Panel.Title.Notfound" options={{id: panelId}}/>
+									}
+									
+								</div>
+							</div>
+						</LocalizationTooltipHost>
 					})
 				}</div> : null
 			}
@@ -72,7 +92,7 @@ class Container extends Component<IContainerProps> {
 				className={"app-panel" + (hasActivePanel ? " active" : "")}
 				draggable={false}
 			>
-				{getPanelById(showPanelId)}
+				{getPanelById(showPanelId as any)}
 			</div>
 		</>
 	}

source/Component/HeaderBar/HeaderBar.tsx

@@ -100,6 +100,11 @@ class HeaderBar extends Component<
             backgroundLevel={BackgroundLevel.Level1}
             fontLevel={FontLevel.Level3}
             style={{ height: this.props.height }}
+            onClick={() => {
+                if (this.props.setting) {
+                    this.props.setting.layout.focus("");
+                }
+            }}
         >
             <LocalizationTooltipHost i18nKey="Header.Bar.Title.Info">
                 <div className="title">