Add electron api context

source/Component/HeaderBar/HeaderBar.scss

@@ -35,20 +35,20 @@ div.header-bar {
 
     div.header-windows-action {
         height: 100%;
-        width: 135px;
-        min-width: 135px;
+        width: 145px;
+        min-width: 145px;
         display: flex;
 
         // 在 Electron 中用于拖拽窗口
         -webkit-app-region: no-drag;
 
         div.action-button {
-            width: 45px;
-            height: 45px;
+            width: 100%;
+            height: 100%;
             display: flex;
             justify-content: center;
             align-items: center;
-            font-size: .5em;
+            font-size: .8em;
         }
 
         div.action-button:hover {
@@ -74,4 +74,21 @@ div.header-bar {
             background-color: rgba($color: #FFFFFF, $alpha: .1);
         }
     }
+}
+
+div.header-bar.desktop-header-bar {
+    font-size: .9em;
+
+    div.title > i, div.fps-view > i {
+        font-size: 18px;
+    }
+
+    div.title > span {
+        display: inline-block;
+        padding-left: 5px;
+    }
+
+    div.title {
+        padding-left: 5px;
+    }
 }

source/Component/HeaderBar/HeaderBar.tsx

@@ -4,6 +4,7 @@ import { useStatusWithEvent, useStatus, IMixinStatusProps } from "@Context/Statu
 import { useSettingWithEvent, IMixinSettingProps, Platform } from "@Context/Setting";
 import { Theme, BackgroundLevel, FontLevel } from "@Component/Theme/Theme";
 import { LocalizationTooltipHost } from "@Component/Localization/LocalizationTooltipHost";
+import { useElectron, IMixinElectronProps } from "@Context/Electron";
 import { I18N } from "@Component/Localization/Localization";
 import "./HeaderBar.scss";
 
@@ -78,7 +79,8 @@ class HeaderFpsView extends Component<IMixinStatusProps & IMixinSettingProps, IH
     }
 }
 
-class HeaderWindowsAction extends Component {
+@useElectron
+class HeaderWindowsAction extends Component<IMixinElectronProps> {
 
     public render() {
         return <Theme className="header-windows-action">
@@ -88,7 +90,10 @@ class HeaderWindowsAction extends Component {
             <div className="action-button">
                 <Icon iconName="ChromeRestore"/>
             </div>
-            <div className="action-button close-button">
+            <div
+                className="action-button close-button"
+                onClick={() => this.props.electron?.close()}
+            >
                 <Icon iconName="ChromeClose"/>
             </div>
         </Theme>
@@ -115,8 +120,13 @@ class HeaderBar extends Component<IHeaderBarProps & IMixinStatusProps & IMixinSe
             isSaved = status.archive.isSaved;
         }
 
+        const headerBarClassName = ["header-bar"];
+        if (setting?.platform === Platform.desktop) {
+            headerBarClassName.push("desktop-header-bar");
+        }
+
         return <Theme
-            className="header-bar"
+            className={headerBarClassName.join(" ")}
             backgroundLevel={BackgroundLevel.Level1}
             fontLevel={FontLevel.Level3}
             style={{ height: this.props.height }}