Add loadfile layer

source/Component/HeaderBar/HeaderBar.tsx

@@ -128,7 +128,7 @@ class HeaderBar extends Component<IHeaderBarProps & IMixinStatusProps & IMixinSe
 
     private showCloseMessage = (e: BeforeUnloadEvent) => {
         if (!this.props.status?.archive.isSaved) {
-            const message = I18N(this.props, "ZH_CH");
+            const message = I18N(this.props, "Info.Hint.Save.After.Close");
             (e || window.event).returnValue = message; // 兼容 Gecko + IE
             return message; // 兼容 Gecko + Webkit, Safari, Chrome
         }

source/Component/LoadFile/LoadFile.scss

@@ -0,0 +1,38 @@
+@import "../Theme/Theme.scss";
+
+div.load-file-layer-root {
+	position: fixed;
+	z-index: 1000;
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-content: center;
+	justify-content: center;
+	align-items: center;
+	flex-wrap: wrap;
+
+	div {
+		user-select: none;
+		text-align: center;
+		width: 100%;
+	}
+
+	div.drag-icon {
+		font-weight: 200;
+		font-size: 2.8em;
+	}
+
+	div.drag-title {
+		margin-top: 5px;
+		margin-bottom: 5px;
+		font-size: 1.5em;
+	}
+}
+
+div.load-file-layer-root.light {
+	background-color: rgba($color: #FFFFFF, $alpha: .75);
+}
+
+div.load-file-layer-root.dark {
+	background-color: rgba($color: #000000, $alpha: .75);
+}

source/Component/LoadFile/LoadFile.tsx

@@ -0,0 +1,31 @@
+import { Localization } from "@Component/Localization/Localization";
+import { FontLevel, Theme } from "@Component/Theme/Theme";
+import { Icon } from "@fluentui/react";
+import { Component, ReactNode } from "react";
+import "./LoadFile.scss";
+
+class LoadFile extends Component {
+
+	private renderMask() {
+		return <Theme
+			className="load-file-layer-root"
+			fontLevel={FontLevel.normal}
+		>
+			<div className="drag-icon">
+				<Icon iconName="KnowledgeArticle"/>
+			</div>
+			<div className="drag-title">
+				<Localization i18nKey="Info.Hint.Load.File.Title"/>
+			</div>
+			<div className="drag-intro">
+				<Localization i18nKey="Info.Hint.Load.File.Intro"/>
+			</div>
+		</Theme>;
+	}
+
+	public render(): ReactNode {
+		return <></>;
+	}
+}
+
+export { LoadFile };

source/Localization/EN-US.ts

@@ -133,5 +133,8 @@ const EN_US = {
     "Panel.Info.Behavior.Details.Parameter.Key.Vec.X": "{key} X",
     "Panel.Info.Behavior.Details.Parameter.Key.Vec.Y": "{key} Y",
     "Panel.Info.Behavior.Details.Parameter.Key.Vec.Z": "{key} Z",
+    "Info.Hint.Save.After.Close": "Any unsaved progress will be lost. Are you sure you want to continue?",
+    "Info.Hint.Load.File.Title": "Load save",
+    "Info.Hint.Load.File.Intro": "Release to load the dragged save file",
 }
 export default EN_US;

source/Localization/ZH-CN.ts

@@ -133,5 +133,8 @@ const ZH_CN = {
     "Panel.Info.Behavior.Details.Parameter.Key.Vec.X": "{key} X 坐标",
     "Panel.Info.Behavior.Details.Parameter.Key.Vec.Y": "{key} Y 坐标",
     "Panel.Info.Behavior.Details.Parameter.Key.Vec.Z": "{key} Z 坐标",
+    "Info.Hint.Save.After.Close": "任何未保存的进度都会丢失, 确定要继续吗?",
+    "Info.Hint.Load.File.Title": "加载存档",
+    "Info.Hint.Load.File.Intro": "释放以加载拽入的存档",
 }
 export default ZH_CN;

source/Page/SimulatorWeb/SimulatorWeb.tsx

@@ -6,6 +6,7 @@ import { ClassicRenderer } from "@GLRender/ClassicRenderer";
 import { initializeIcons } from '@fluentui/font-icons-mdl2';
 import { RootContainer } from "@Component/Container/RootContainer";
 import { LayoutDirection } from "@Context/Layout";
+import { LoadFile } from "@Component/LoadFile/LoadFile";
 import { AllBehaviors, getBehaviorById } from "@Behavior/Behavior";
 import { CommandBar } from "@Component/CommandBar/CommandBar";
 import { HeaderBar } from "@Component/HeaderBar/HeaderBar";
@@ -203,6 +204,7 @@ class SimulatorWeb extends Component {
             backgroundLevel={BackgroundLevel.Level5}
             fontLevel={FontLevel.Level3}
         >
+            <LoadFile/>
             <Popup/>
             <HeaderBar height={45}/>
             <div className="app-root-space" style={{