source/Component/CommandBar/CommandBar.tsx

@@ -1,30 +1,24 @@
 import { Component, ReactNode } from "react";
 import { DirectionalHint, IconButton } from "@fluentui/react";
-import { useSetting, IMixinSettingProps } from "@Context/Setting";
+import { useSetting, useSettingWithEvent, IMixinSettingProps } from "@Context/Setting";
 import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
 import { BackgroundLevel, Theme } from "@Component/Theme/Theme";
 import { LocalizationTooltipHost } from "@Component/Localization/LocalizationTooltipHost";
-import { AllI18nKeys } from "@Component/Localization/Localization";
+import { AllI18nKeys, I18N } from "@Component/Localization/Localization";
 import { SettingPopup } from "@Component/SettingPopup/SettingPopup";
 import { BehaviorPopup } from "@Component/BehaviorPopup/BehaviorPopup";
 import { MouseMod } from "@GLRender/ClassicRenderer";
-import { ArchiveSave } from "@Context/Archive";
+import * as download from "downloadjs";
 import "./CommandBar.scss";
 
 const COMMAND_BAR_WIDTH = 45;
 
-interface IRenderButtonParameter {
+function getRenderButton(param: {
     i18NKey: AllI18nKeys;
     iconName?: string;
     click?: () => void;
     active?: boolean;
-}
+}): ReactNode {
-
-interface ICommandBarState {
-    isSaveRunning: boolean;
-}
-
-function getRenderButton(param: IRenderButtonParameter): ReactNode {
     return <LocalizationTooltipHost 
         i18nKey={param.i18NKey}
         directionalHint={DirectionalHint.rightCenter}
@@ -37,15 +31,40 @@ function getRenderButton(param: IRenderButtonParameter): ReactNode {
         />
     </LocalizationTooltipHost>
 }
-@useSetting
-@useStatusWithEvent("mouseModChange", "actuatorStartChange")
-class CommandBar extends Component<IMixinSettingProps & IMixinStatusProps, ICommandBarState> {
 
-    public state: Readonly<ICommandBarState> = {
+@useSettingWithEvent("language")
-        isSaveRunning: false
+@useStatusWithEvent()
-    };
+class SaveCommandView extends Component<IMixinStatusProps & IMixinSettingProps> {
 
     public render(): ReactNode {
+        return getRenderButton({
+            iconName: "Save",
+            i18NKey: "Command.Bar.Save.Info",
+            click: () => {
+
+                let fileName: string = "";
+                let isNewFile: boolean = true;
+                let isSaved: boolean = false;
+        
+                if (this.props.status) {
+                    isNewFile = this.props.status.archive.isNewFile;
+                    fileName = this.props.status.archive.fileName ?? "";
+                    isSaved = this.props.status.archive.isSaved;
+                }
+                
+                const file = this.props.status?.archive.save(this.props.status.model) ?? "";
+                fileName = isNewFile ? I18N(this.props, "Header.Bar.New.File.Name") : fileName;
+                download(file, fileName, "text/json");
+            }
+        })
+    }
+}
+
+@useSetting
+@useStatusWithEvent("mouseModChange", "actuatorStartChange")
+class CommandBar extends Component<IMixinSettingProps & IMixinStatusProps> {
+
+    render(): ReactNode {
 
         const mouseMod = this.props.status?.mouseMod ?? MouseMod.Drag;
 
@@ -61,22 +80,7 @@ class CommandBar extends Component<IMixinSettingProps & IMixinStatusProps, IComm
         >
             <div>
 
-                <ArchiveSave
+                <SaveCommandView/>
-                    running={this.state.isSaveRunning}
-                    afterRunning={() => {
-                        this.setState({ isSaveRunning: false });
-                    }}
-                />
-
-                {getRenderButton({
-                    iconName: "Save",
-                    i18NKey: "Command.Bar.Save.Info",
-                    click: () => {
-                        this.setState({
-                            isSaveRunning: true
-                        });
-                    }
-                })}
 
                 {getRenderButton({
                     iconName: this.props.status?.actuator.start() ? "Pause" : "Play",

source/Component/HeaderBar/HeaderBar.tsx

@@ -126,30 +126,6 @@ class HeaderWindowsAction extends Component<IMixinElectronProps> {
 @useStatusWithEvent("fileSave", "fileChange", "fileLoad")
 class HeaderBar extends Component<IHeaderBarProps & IMixinStatusProps & IMixinSettingProps> {
 
-    private showCloseMessage = (e: BeforeUnloadEvent) => {
-        if (!this.props.status?.archive.isSaved) {
-            const message = I18N(this.props, "Info.Hint.Save.After.Close");
-            (e || window.event).returnValue = message; // 兼容 Gecko + IE
-            return message; // 兼容 Gecko + Webkit, Safari, Chrome
-        }
-    }
-
-    public componentDidMount() {
-
-        if (this.props.setting?.platform === Platform.web) {
-            // 阻止页面关闭
-            window.addEventListener("beforeunload", this.showCloseMessage);
-        }
-    }
-
-    public componentWillUnmount() {
-
-        if (this.props.setting?.platform === Platform.web) {
-            // 阻止页面关闭
-            window.removeEventListener("beforeunload", this.showCloseMessage);
-        }
-    }
-
     public render(): ReactNode {
         const { status, setting } = this.props;
 

source/Component/LoadFile/LoadFile.scss

@@ -1,38 +0,0 @@
-@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

@@ -1,31 +0,0 @@
-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/Context/Archive.tsx

@@ -1,91 +0,0 @@
-import { FunctionComponent, useEffect } from "react";
-import * as download from "downloadjs";
-import { useSetting, IMixinSettingProps, Platform } from "@Context/Setting";
-import { useStatus, IMixinStatusProps } from "@Context/Status";
-import { I18N } from "@Component/Localization/Localization";
-
-interface IFileInfo {
-	fileName: string;
-	isNewFile: boolean;
-	isSaved: boolean;
-	fileUrl?: string;
-	fileData: () => Promise<string>;
-}
-
-interface IRunnerProps {
-	running?: boolean;
-	afterRunning?: () => any;
-}
-
-interface ICallBackProps {
-	then: () => any;
-}
-
-const ArchiveSaveDownloadView: FunctionComponent<IFileInfo & ICallBackProps> = function ArchiveSave(props) {
-
-	const runner = async () => {
-		const file = await props.fileData();
-		setTimeout(() => {
-			download(file, props.fileName, "text/json");
-			props.then();
-		}, 100);
-	}
-
-	useEffect(() => { runner() }, []);
-
-	return <></>;
-}
-
-const ArchiveSaveDownload = ArchiveSaveDownloadView;
-
-/**
- * 保存存档文件
- */
-const ArchiveSaveView: FunctionComponent<IMixinSettingProps & IMixinStatusProps & IRunnerProps> = function ArchiveSave(props) {
-
-	if (!props.running) {
-		return <></>;
-	}
-
-	const fileData: IFileInfo = {
-		fileName: "",
-		isNewFile: true,
-		isSaved: false,
-		fileUrl: undefined,
-		fileData: async () => `{"nextIndividualId":0,"objectPool":[],"labelPool":[],"behaviorPool":[]}`
-	}
-
-	if (props.status) {
-		fileData.isNewFile = props.status.archive.isNewFile;
-		fileData.fileName = props.status.archive.fileName ?? "";
-		fileData.isSaved = props.status.archive.isSaved;
-		fileData.fileUrl = props.status.archive.fileUrl;
-	}
-
-	if (fileData.isNewFile) {
-		fileData.fileName = I18N(props, "Header.Bar.New.File.Name");
-	}
-
-	// 生成存档文件
-	fileData.fileData = async () => {
-		return props.status?.archive.save(props.status.model) ?? "";
-	};
-
-	const callBack = () => {
-		if (props.afterRunning) {
-			props.afterRunning();
-		}
-	}
-	
-	return <>
-		{
-			props.setting?.platform === Platform.web ? 
-				<ArchiveSaveDownload {...fileData} then={callBack}/> :
-				<></>
-		}
-	</>
-}
-
-const ArchiveSave = useSetting(useStatus(ArchiveSaveView));
-
-export { ArchiveSave };

source/Context/Status.tsx

@@ -172,8 +172,6 @@ class Status extends Emitter<IStatusEvent> {
                 this.emit("fileChange");
             }
         }
-
-        // 设置文件修改状态
         this.on("objectChange", handelFileChange);
         this.on("behaviorChange", handelFileChange);
         this.on("labelChange", handelFileChange);

source/Localization/EN-US.ts

@@ -133,8 +133,5 @@ 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,8 +133,5 @@ 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/Model/Archive.ts

@@ -22,7 +22,7 @@ interface IArchiveObject {
     behaviorPool: IArchiveBehavior[];
 }
 
-class Archive extends Emitter<IArchiveEvent> {
+class Archive<M extends any = any> extends Emitter<IArchiveEvent> {
 
     /**
      * 是否为新文件
@@ -40,9 +40,9 @@ class Archive extends Emitter<IArchiveEvent> {
     public isSaved: boolean = false;
 
     /**
-     * 文件路径
+     * 文件数据
      */
-    public fileUrl?: string;
+    public fileData?: M;
 
     /**
      * 将模型转换为存档对象

source/Page/SimulatorWeb/SimulatorWeb.tsx

@@ -6,7 +6,6 @@ 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";
@@ -204,7 +203,6 @@ class SimulatorWeb extends Component {
             backgroundLevel={BackgroundLevel.Level5}
             fontLevel={FontLevel.Level3}
         >
-            <LoadFile/>
             <Popup/>
             <HeaderBar height={45}/>
             <div className="app-root-space" style={{