Add object list command bar

source/Component/Container/Container.scss

@@ -6,6 +6,7 @@ div.app-container {
 	width: 100%;
 	height: 100%;
 	display: flex;
+	align-items: stretch;
 	overflow: hidden;
 	box-sizing: border-box;
 
@@ -98,13 +99,24 @@ div.app-container {
 		padding: 10px;
 	}
 
+	div.app-panel-root {
+		width: 100%;
+		height: calc( 100% - 32px );
+		box-sizing: border-box;
+		display: flex;
+		justify-content: space-between;
+		align-items: stretch;
+		flex-direction: column;
+		border: .8px solid rgba($color: #000000, $alpha: 0);
+	}
+
 	div.app-panel {
 		width: 100%;
 		height: 100%;
 		box-sizing: border-box;
 		overflow: scroll;
 		-ms-overflow-style: none;
-		border: .8px solid rgba($color: #000000, $alpha: 0);
+		flex-shrink: 1;
 	}
 
 	div.app-panel.hide-scrollbar::-webkit-scrollbar {
@@ -128,7 +140,7 @@ div.app-container {
 		background-color: rgba($color: #000000, $alpha: 0);
 	}
 
-	div.app-panel.active {
+	div.app-panel-root.active {
 		border: .8px solid blue !important;
 	}
 }

source/Component/Container/Container.tsx

@@ -68,7 +68,7 @@ class Container extends Component<IContainerProps> {
 							delay={2}
 							key={panelId}
 						>
-							<div	
+							<div
 								className={classList.join(" ")}
 								onClick={(e) => {
 									e.stopPropagation();
@@ -90,16 +90,32 @@ class Container extends Component<IContainerProps> {
 				}</div> : null
 			}
 			<div
-				onClick={() => this.props.onFocusTab ? this.props.onFocusTab(showPanelId) : undefined}
 				className={[
-					"app-panel",
-					hasActivePanel ? "active" : "",
-					showPanelInfo?.hidePadding ? "" : "has-padding",
-					showPanelInfo?.hideScrollBar ? "hide-scrollbar" : ""
+					"app-panel-root",
+					hasActivePanel ? "active" : ""
 				].filter(x => !!x).join(" ")}
-				draggable={false}
+				onClick={() => this.props.onFocusTab ? this.props.onFocusTab(showPanelId) : undefined}
 			>
-				{getPanelById(showPanelId as any)}
+				{/* 渲染 Command Bar */}
+				{(() => {
+					let info = getPanelInfoById(showPanelId as any);
+					if (info &&  info.header) {
+						const Header = info.header;
+						return <Header></Header>
+					}
+				})()}
+
+				{/* 渲染 Panel 内容 */}
+				<div
+					className={[
+						"app-panel",
+						showPanelInfo?.hidePadding ? "" : "has-padding",
+						showPanelInfo?.hideScrollBar ? "hide-scrollbar" : ""
+					].filter(x => !!x).join(" ")}
+					draggable={false}
+				>
+					{getPanelById(showPanelId as any)}
+				</div>
 			</div>
 		</>
 	}