From e08a3ec6b550201c8e26c9b52924a1b0589e31be Mon Sep 17 00:00:00 2001
From: MrKBear <mrkbear@qq.com>
Date: Thu, 24 Feb 2022 17:34:57 +0800
Subject: [PATCH] Add header bar

---
 source/Component/HeaderBar/HeaderBar.scss  |  3 ++
 source/Component/HeaderBar/HeaderBar.tsx   | 41 +++++++++-------------
 source/Component/Theme/Theme.scss          |  6 ++--
 source/Page/SimulatorWeb/SimulatorWeb.scss |  6 ++++
 source/Page/SimulatorWeb/SimulatorWeb.tsx  | 19 +++++-----
 5 files changed, 37 insertions(+), 38 deletions(-)

diff --git a/source/Component/HeaderBar/HeaderBar.scss b/source/Component/HeaderBar/HeaderBar.scss
index e69de29..7fa55be 100644
--- a/source/Component/HeaderBar/HeaderBar.scss
+++ b/source/Component/HeaderBar/HeaderBar.scss
@@ -0,0 +1,3 @@
+div.header-bar {
+    display: flex;
+}
\ No newline at end of file
diff --git a/source/Component/HeaderBar/HeaderBar.tsx b/source/Component/HeaderBar/HeaderBar.tsx
index c38373d..86bc381 100644
--- a/source/Component/HeaderBar/HeaderBar.tsx
+++ b/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
-class HeaderBar extends Component<IHeaderBarProps & IMixinSettingProps> {
-
-    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"
-            );
-        }
-    }
+@useStatus
+class HeaderBar extends Component<IHeaderBarProps & IMixinStatusProps> {
 
     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>
     }
 }
 
diff --git a/source/Component/Theme/Theme.scss b/source/Component/Theme/Theme.scss
index 5f8439b..c714672 100644
--- a/source/Component/Theme/Theme.scss
+++ b/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-lvl2: $ms-font-size-24;
-$lt-font-size-lvl1: $ms-font-size-32;
+$lt-font-size-lvl3: $ms-font-size-16;
+$lt-font-size-lvl2: $ms-font-size-18;
+$lt-font-size-lvl1: $ms-font-size-24;
 
 $lt-font-weight-normal: $ms-font-weight-regular;
 $lt-font-weight-lvl3: $ms-font-weight-semibold;
diff --git a/source/Page/SimulatorWeb/SimulatorWeb.scss b/source/Page/SimulatorWeb/SimulatorWeb.scss
index e69de29..8677595 100644
--- a/source/Page/SimulatorWeb/SimulatorWeb.scss
+++ b/source/Page/SimulatorWeb/SimulatorWeb.scss
@@ -0,0 +1,6 @@
+div.app-root {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    overflow: hidden;
+}
\ No newline at end of file
diff --git a/source/Page/SimulatorWeb/SimulatorWeb.tsx b/source/Page/SimulatorWeb/SimulatorWeb.tsx
index 7f8afb6..4219e70 100644
--- a/source/Page/SimulatorWeb/SimulatorWeb.tsx
+++ b/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">
-            <HeaderBar/>
-            <Theme 
-                className="test" 
-                fontLevel={FontLevel.Level2}
-                backgroundLevel={BackgroundLevel.Level1}
-            >
-                Theme
-            </Theme>
-            <Localization i18nKey="EN_US"/>
-        </div>
+        return <Theme 
+            className="app-root"
+            backgroundLevel={BackgroundLevel.Level5}
+        >
+            <HeaderBar height={45}/>
+        </Theme>
     }
 }