source/Component/CommandBar/CommandBar.tsx

@@ -1,24 +1,30 @@
 import { Component, ReactNode } from "react";
 import { DirectionalHint, IconButton } from "@fluentui/react";
-import { useSetting, useSettingWithEvent, IMixinSettingProps } from "@Context/Setting";
+import { useSetting, 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, I18N } from "@Component/Localization/Localization";
+import { AllI18nKeys } from "@Component/Localization/Localization";
 import { SettingPopup } from "@Component/SettingPopup/SettingPopup";
 import { BehaviorPopup } from "@Component/BehaviorPopup/BehaviorPopup";
 import { MouseMod } from "@GLRender/ClassicRenderer";
-import * as download from "downloadjs";
+import { ArchiveSave } from "@Context/Archive";
 import "./CommandBar.scss";
 
 const COMMAND_BAR_WIDTH = 45;
 
-function getRenderButton(param: {
+interface IRenderButtonParameter {
     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}
@@ -31,40 +37,15 @@ function getRenderButton(param: {
         />
     </LocalizationTooltipHost>
 }
-
-@useSettingWithEvent("language")
-@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> {
+class CommandBar extends Component<IMixinSettingProps & IMixinStatusProps, ICommandBarState> {
 
-    render(): ReactNode {
+    public state: Readonly<ICommandBarState> = {
+        isSaveRunning: false
+    };
+
+    public render(): ReactNode {
 
         const mouseMod = this.props.status?.mouseMod ?? MouseMod.Drag;
 
@@ -80,7 +61,22 @@ class CommandBar extends Component<IMixinSettingProps & IMixinStatusProps> {
         >
             <div>
 
-                <SaveCommandView/>
+                <ArchiveSave
+                    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/Context/Archive.tsx

@@ -0,0 +1,91 @@
+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/Model/Archive.ts

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