Add header bar

source/Component/HeaderBar/HeaderBar.scss

@@ -0,0 +1,3 @@
+div.header-bar {
+    display: flex;
+}

source/Component/HeaderBar/HeaderBar.tsx

@@ -1,45 +1,38 @@
 import { Component, ReactNode } from "react";
-import { useSetting, IMixinSettingProps, Themes } from "@Context/Setting";
+import { useStatus, IMixinStatusProps } from "@Context/Status";
+import { Theme, BackgroundLevel, FontLevel } from "@Component/Theme/Theme";
 
-interface IHeaderBarProps {}
+interface IHeaderBarProps {
+    height: number;
+}
 
 /**
  * 头部信息栏
  */
-@useSetting
+@useStatus
-class HeaderBar extends Component<IHeaderBarProps & IMixinSettingProps> {
+class HeaderBar extends Component<IHeaderBarProps & IMixinStatusProps> {
-
-    private handelClick = () => {
-        if (this.props.setting) {
-            this.props.setting.setProps("themes", 
-                this.props.setting.themes === Themes.dark ? Themes.light : Themes.dark
-            );
-            this.props.setting.setProps("language", 
-                this.props.setting.language === "EN_US" ?'ZH_CN' : "EN_US"
-            );
-        }
-    }
 
     private changeListener = () => {
         this.forceUpdate();
     }
 
     public componentDidMount() {
-        console.log("mount");
+
-        if (this.props.setting) {
-            this.props.setting.on("change", this.changeListener);
-        }
     }
 
     public componentWillUnmount() {
-        console.log("die");
+        
-        if (this.props.setting) {
-            this.props.setting.off("change", this.changeListener);
-        }
     }
 
     public render(): ReactNode {
-        return <div onClick={this.handelClick}>{this.props.setting?.themes}</div>
+        return <Theme
+            className="header-bar"
+            backgroundLevel={BackgroundLevel.Level1}
+            fontLevel={FontLevel.Level3}
+            style={{ height: this.props.height }}
+        >
+            Living Together | Web
+        </Theme>
     }
 }
 

source/Component/Theme/Theme.scss

@@ -1,9 +1,9 @@
 @import "@fluentui/react/dist/sass/References";
 
 $lt-font-size-normal: $ms-font-size-14;
-$lt-font-size-lvl3: $ms-font-size-18;
+$lt-font-size-lvl3: $ms-font-size-16;
-$lt-font-size-lvl2: $ms-font-size-24;
+$lt-font-size-lvl2: $ms-font-size-18;
-$lt-font-size-lvl1: $ms-font-size-32;
+$lt-font-size-lvl1: $ms-font-size-24;
 
 $lt-font-weight-normal: $ms-font-weight-regular;
 $lt-font-weight-lvl3: $ms-font-weight-semibold;

source/Page/SimulatorWeb/SimulatorWeb.scss

@@ -0,0 +1,6 @@
+div.app-root {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    overflow: hidden;
+}

source/Page/SimulatorWeb/SimulatorWeb.tsx

@@ -46,6 +46,8 @@ class SimulatorWeb extends Component {
             })
             this.status.model.update(0);
         }
+
+        (window as any).s = this;
     }
 
     public render(): ReactNode {
@@ -57,17 +59,12 @@ class SimulatorWeb extends Component {
     }
 
     private renderContent(): ReactNode {
-        return <div className="app-root">
+        return <Theme 
-            <HeaderBar/>
+            className="app-root"
-            <Theme 
+            backgroundLevel={BackgroundLevel.Level5}
-                className="test" 
+        >
-                fontLevel={FontLevel.Level2}
+            <HeaderBar height={45}/>
-                backgroundLevel={BackgroundLevel.Level1}
+        </Theme>
-            >
-                Theme
-            </Theme>
-            <Localization i18nKey="EN_US"/>
-        </div>
     }
 }