Add command bar component

source/Component/CommandBar/CommandBar.scss

@@ -0,0 +1,3 @@
+div.command-bar {
+    height: 100%;
+}

source/Component/CommandBar/CommandBar.tsx

@@ -0,0 +1,20 @@
+import { BackgroundLevel, Theme } from "@Component/Theme/Theme";
+import { Component, ReactNode } from "react";
+
+interface ICommandBarProps {
+    width: number;
+}
+
+class CommandBar extends Component<ICommandBarProps> {
+    
+    render(): ReactNode {
+        return <Theme 
+            className="command-bar"
+            backgroundLevel={BackgroundLevel.Level2}
+            style={{ width: this.props.width }}
+        >
+        </Theme>    
+    }
+}
+
+export { CommandBar };

source/Component/HeaderBar/HeaderBar.scss

@@ -1,5 +1,5 @@
 div.header-bar {
-    padding: 0 20px;
+    padding: 0 10px;
     box-sizing: border-box;
     display: flex;
     align-items: center;

source/Component/HeaderBar/HeaderBar.tsx

@@ -60,6 +60,7 @@ class HeaderBar extends Component<
             setting.on("language", this.changeListener);
         }
         if (status) {
+            status.archive.on("save", this.changeListener);
             status.model.on("loop", this.physicsFpsCalc);
             status.renderer.on("loop", this.renderFpsCalc);
         }
@@ -71,6 +72,7 @@ class HeaderBar extends Component<
             setting.off("language", this.changeListener);
         }
         if (status) {
+            status.archive.off("save", this.changeListener);
             status.model.off("loop", this.physicsFpsCalc);
             status.renderer.off("loop", this.renderFpsCalc);
         }

source/Localization/EN-US.ts

@@ -8,6 +8,6 @@ const EN_US = {
     "Header.Bar.File.Save.Status.Saved": "Saved",
     "Header.Bar.File.Save.Status.Unsaved": "UnSaved",
     "Header.Bar.Fps": "FPS: {renderFps} | {physicsFps}",
-    "Header.Bar.Fps.Info": "The rendering frame rate ({renderFps} / fps) is on the left, and the simulation frame rate ({physicsFps} / fps) is on the right.",
+    "Header.Bar.Fps.Info": "The rendering frame rate ({renderFps} fps) is on the left, and the simulation frame rate ({physicsFps} fps) is on the right.",
 }
 export default EN_US;

source/Localization/ZH-CN.ts

@@ -8,6 +8,6 @@ const ZH_CN = {
     "Header.Bar.File.Save.Status.Saved": "已保存",
     "Header.Bar.File.Save.Status.Unsaved": "未保存",
     "Header.Bar.Fps": "帧率: {renderFps} | {physicsFps}",
-    "Header.Bar.Fps.Info": "左侧为渲染帧率 ({renderFps} / fps), 右侧为模拟帧率 ({physicsFps} / fps)。",
+    "Header.Bar.Fps.Info": "左侧为渲染帧率 ({renderFps} fps), 右侧为模拟帧率 ({physicsFps} fps)。",
 }
 export default ZH_CN;

source/Model/Archive.ts

@@ -8,7 +8,7 @@ interface IArchiveEvent {
 class Archive<
     M extends any = any,
     E extends Record<EventType, any> = {}
-> extends Emitter<E> {
+> extends Emitter<E & IArchiveEvent> {
 
     /**
      * 是否为新文件

source/Page/SimulatorWeb/SimulatorWeb.scss

@@ -3,4 +3,9 @@ div.app-root {
     height: 100%;
     position: absolute;
     overflow: hidden;
+
+    div.app-root-space {
+        height: 100%;
+        display: flex;
+    }
 }

source/Page/SimulatorWeb/SimulatorWeb.tsx

@@ -1,13 +1,13 @@
 import { Component, ReactNode } from "react";
 import { SettingProvider, Setting } from "@Context/Setting";
 import { HeaderBar } from "@Component/HeaderBar/HeaderBar";
-import { Theme, FontLevel, BackgroundLevel } from "@Component/Theme/Theme";
-import { Localization } from "@Component/Localization/Localization";
+import { Theme, BackgroundLevel, FontLevel } from "@Component/Theme/Theme";
 import { Entry } from "../Entry/Entry";
 import { StatusProvider, Status } from "@Context/Status";
 import { ClassicRenderer } from "@GLRender/ClassicRenderer";
 import { initializeIcons } from '@fluentui/font-icons-mdl2';
 import "./SimulatorWeb.scss";
+import { CommandBar } from "@Component/CommandBar/CommandBar";
 
 initializeIcons();
 
@@ -65,8 +65,12 @@ class SimulatorWeb extends Component {
         return <Theme 
             className="app-root"
             backgroundLevel={BackgroundLevel.Level5}
+            fontLevel={FontLevel.Level3}
         >
             <HeaderBar height={45}/>
+            <div className="app-root-space">
+                <CommandBar width={45}/>
+            </div>
         </Theme>
     }
 }