Add setting option

Reviewed-on: http://git.mrkbear.com/MrKBear/living-together/pulls/52

.gitignore

@@ -42,6 +42,7 @@ node_modules/
 jspm_packages/
 build/
 out/
+bundle/
 
 # TypeScript v1 declaration files
 typings/

config/electron.forge.config.js

@@ -0,0 +1,68 @@
+const FS =  require("fs");
+const Path = require("path");
+const minimist = require("minimist");
+
+const args = minimist(process.argv.slice(2));
+
+const PackageJSON = JSON.parse(
+	FS.readFileSync(Path.join(__dirname, "../package.json"))
+);
+
+const Config = {
+	"name": PackageJSON.name,
+	"productName": PackageJSON.name,
+	"version": PackageJSON.version,
+	"description": PackageJSON.description,
+	"main": "./Electron.js",
+	"scripts": {
+		"start": "electron-forge start",
+		"package": "electron-forge package",
+		"make": "electron-forge make",
+		"publish": "electron-forge publish",
+		"lint": "echo \"No linting configured\""
+	},
+	"keywords": PackageJSON.keywords,
+	"author": {
+		"name": PackageJSON.author,
+		"email": "mrkbear@qq.com"
+	},
+	"license": PackageJSON.license,
+	"config": {
+		"forge": {
+			"packagerConfig": {
+				"appBundleId": "com.mrkbear.living-together",
+				"appCopyright": "2021-2022 © copyright MrKBear",
+				"download": {
+					"rejectUnauthorized": false,
+					"executableName": "LivingTogether",
+					"mirrorOptions": {
+						"mirror": 'https://npmmirror.com/mirrors/electron/',
+    					"customDir": '{{ version }}',
+					}
+				},
+				"asar": true,
+				"icon": "./living-together"
+			},
+			"makers": [
+				{
+					"name": "@electron-forge/maker-zip",
+					"platforms": [
+						"darwin"
+					]
+				}
+			]
+		}
+	},
+	"dependencies": {
+		"electron-squirrel-startup": "^1.0.0",
+		"detect-port": PackageJSON.dependencies["detect-port"],
+    	"express": PackageJSON.dependencies["express"],
+	},
+	"devDependencies": {
+		"@electron-forge/cli": "^6.0.0-beta.63",
+		"@electron-forge/maker-zip": "^6.0.0-beta.63",
+		"electron": PackageJSON.devDependencies.electron
+	}
+}
+
+FS.writeFileSync(Path.join(Path.resolve("./"), args.out ?? "./", "./package.json"), JSON.stringify(Config, null, 4));

config/parseSave2Obj.js

@@ -0,0 +1,304 @@
+const PATH = require("path");
+const FS = require("fs");
+const MINIMIST = require("minimist");
+const READLINE = require("readline-sync");
+
+const ARGS = MINIMIST(process.argv.slice(2), {
+    alias: {i: ["input", "save"], o: ["output", "obj"]}
+});
+
+// 获取路径
+const inputFilePath = PATH.resolve(ARGS.i ?? "./save.ltss");
+const outputFilePath = PATH.resolve(ARGS.o ?? "./output.obj");
+
+// 读取文件
+const fileString = FS.readFileSync(inputFilePath);
+console.log("文件读取成功...\r\n");
+
+/**
+ * 引入所需类型
+ * @typedef {import("../source/Model/Archive").IArchiveObject} IArchiveObject
+ * @typedef {import("../source/Model/Clip").IArchiveClip} IArchiveClip
+ */
+
+/**
+ * 解析文件
+ * @type {IArchiveObject}
+ */
+const archive = JSON.parse(fileString);
+console.log("文件解析成功...\r\n");
+
+// 打印全部的剪辑列表
+if (archive.clipPool.length > 0) {
+    console.log("这个存档中存在以下剪辑:");
+}
+archive.clipPool.map((item, index) => {    
+    console.log(" \033[44;30m" + (index + 1) + "\033[40;32m " + item.name + " [" + item.id + "]\033[0m");
+});
+
+/**
+ * 选择剪辑
+ * @type {IArchiveClip}
+ */
+let clip;
+if (archive.clipPool.length <= 0) {
+    console.log("存档中没有剪辑, 退出程序...\r\n");
+    process.exit();
+} else if (archive.clipPool.length === 1) {
+    console.log("\r\n存档中只有一个剪辑, 自动选择...\r\n");
+    clip = archive.clipPool[0];
+} else {
+    console.log("\r\n请选择一个剪辑: ");
+    let userInput = READLINE.question();
+    for (let i = 0; i < archive.clipPool.length; i++) {
+        if ((i + 1) == userInput) {
+            clip = archive.clipPool[i];
+            break;
+        }
+    }
+}
+
+// 选择提示
+if (clip) {
+    console.log("已选择剪辑: " + clip.name + "\r\n");
+} else {
+    console.log("没有选择任何剪辑, 退出程序...\r\n");
+    process.exit();
+}
+
+// 解压缩文件
+console.log("正在还原压缩剪辑记录...\r\n");
+const frames = clip.frames;
+
+/**
+ * @type {Map<string, {name: string, type: string, select?: boolean}}
+ */
+const objectMapper = new Map();
+
+const LastFrameData = "@";
+
+/**
+ * @type {IArchiveClip["frames"]}
+ */
+const F = [];
+frames.forEach((frame) => {
+    /**
+     * @type {IArchiveClip["frames"][number]["commands"]}
+     */
+    const FCS = [];
+    frame.commands.forEach((command) => {
+
+        // 压缩指令
+        const FC = {
+            id: command.id,
+            type: command.type
+        };
+
+        /**
+         * 上一帧
+         * @type {IArchiveClip["frames"][number]}
+         */
+        const lastFrame = F[F.length - 1];
+
+        /**
+         * 上一帧指令
+         * @type {IArchiveClip["frames"][number]["commands"][number]}
+         */
+        const lastCommand = lastFrame?.commands.filter((c) => {
+            if (c.type === command.type && c.id === command.id) {
+                return true;
+            } else {
+                return false;
+            }
+        })[0];
+
+        // 记录
+        FC.name = (LastFrameData === command.name) ? lastCommand?.name : command.name;
+        
+        FC.data = (LastFrameData === command.data) ? lastCommand?.data : command.data;
+
+        FC.mapId = (LastFrameData === command.mapId) ? lastCommand?.mapId : command.mapId;
+
+        FC.position = (LastFrameData === command.position) ? lastCommand?.position : command.position;
+
+        FC.radius = (LastFrameData === command.radius) ? lastCommand?.radius : command.radius;
+
+        // 获取 Mapper
+        const mapper = objectMapper.get(FC.id);
+        if (mapper) {
+            mapper.type = FC.type ?? mapper.type;
+            mapper.name = FC.name ?? mapper.name;
+        } else {
+            objectMapper.set(FC.id, {
+                type: FC.type,
+                name: FC.name
+            });
+        }
+
+        FCS.push(FC);
+    });
+
+    F.push({
+        duration: frame.duration,
+        process: frame.process,
+        commands: FCS
+    });
+});
+
+console.log("剪辑记录还原成功...\r\n");
+console.log("剪辑共 " + F.length + " 帧, 对象 " + objectMapper.size + " 个\r\n");
+if (objectMapper.size) {
+    console.log("剪辑记录中存在以下对象:");
+} else {
+    console.log("剪辑记录中没有任何对象，退出程序...");
+    process.exit();
+}
+let objectMapperForEachIndex = 1;
+objectMapper.forEach((item, key) => {
+    console.log(" \033[44;30m" + (objectMapperForEachIndex ++) + "\033[40;32m " + item.type + " " + item.name + " [" + key + "]\033[0m");
+});
+
+/**
+ * @type {number[]}
+ */
+const pointMapper = [];
+
+/**
+ * @param {number} x
+ * @param {number} y
+ * @param {number} z
+ * @returns {number}
+ */
+function getPointID(x, y, z) {
+    let search = -1;
+    let pointMapperLength = (pointMapper.length / 3);
+    // for (let i = 0; i < pointMapperLength; i++) {
+    //     if (
+    //         pointMapper[i * 3 + 0] === x &&
+    //         pointMapper[i * 3 + 1] === y &&
+    //         pointMapper[i * 3 + 2] === z
+    //     ) {
+    //         search = i;
+    //     }
+    // }
+    if (search >= 0) {
+        return search;
+    } else {
+        pointMapper.push(x);
+        pointMapper.push(y);
+        pointMapper.push(z);
+        return pointMapperLength + 1;
+    }
+}
+
+let frameId = 0;
+/**
+ * @type {Map<string, {id: number, start: number, last: number, name: string, point: number[]}[]>}
+ */
+const objectLineMapper = new Map();
+/**
+ * @param {string} obj 
+ * @param {number} id 
+ * @param {number} point 
+ */
+function recordPoint(obj, id, point) {
+    let searchObj = objectLineMapper.get(obj);
+    if (searchObj) {
+
+        /**
+         * @type {{id: number, start: number, last: number, point: number[]}}
+         */
+        let search;
+        for (let i = 0; i < searchObj.length; i++) {
+            if (searchObj[i].id === id && searchObj[i].last === (frameId - 1)) {
+                search = searchObj[i];
+            }
+        }
+
+        if (search) {
+            search.point.push(point);
+            search.last = frameId;
+        } else {
+            searchObj.push({
+                id: id,
+                start: frameId,
+                last: frameId,
+                point: [point]
+            });
+        }
+    } else {
+        objectLineMapper.set(obj, [{
+            id: id,
+            start: frameId,
+            last: frameId,
+            point: [point]
+        }]);
+    }
+}
+
+console.log("\r\n正在收集多边形数据...\r\n");
+for (frameId = 0; frameId < F.length; frameId ++) {
+    F[frameId].commands.forEach((command) => {
+
+        if (command.type === "points" && command.mapId && command.data) {
+            command.mapId.forEach((pid, index) => {
+
+                const x = command.data[index * 3 + 0];
+                const y = command.data[index * 3 + 1]
+                const z = command.data[index * 3 + 2]
+
+                if (
+                    x !== undefined &&
+                    y !== undefined &&
+                    z !== undefined
+                ) {
+                    recordPoint(command.id, pid, getPointID(x, y, z));
+                }
+            })
+        }
+    });
+}
+
+let pointCount = (pointMapper.length / 3);
+
+console.log("收集点数据 " + pointCount + "个\r\n");
+console.log("收集样条:");
+let objectLineMapperIndexPrint = 1;
+objectLineMapper.forEach((item, key) => {
+    let iName = objectMapper.get(key).name;
+    console.log(" \033[44;30m" + (objectLineMapperIndexPrint ++) + "\033[40;32m " + item.length + " " + iName + " [" + key + "]\033[0m");
+});
+
+console.log("\r\n正在生成 .obj 文件...\r\n");
+
+let fileStr = ""; let fileStrVec = "";
+
+objectLineMapper.forEach((item, key) => {
+    
+    for (let i = 0; i < item.length; i++) {
+        fileStr += "\r\n";
+        fileStr += ("o " + objectMapper.get(key).name + " " + item[i].id + "\r\n");
+        fileStr += "usemtl default\r\n";
+        fileStr += "l ";
+        fileStr += getPointID(
+            item[i].start / (F.length - 1),
+            item[i].last / (F.length - 1),
+            (item[i].last - item[i].start) / (F.length - 1)
+        ) + " ";
+        fileStr += item[i].point.join(" ");
+        fileStr += "\r\n";
+    }
+
+    fileStr += "\r\n";
+});
+
+pointCount = (pointMapper.length / 3);
+for (let i = 0; i < pointCount; i++) {
+    fileStrVec += ("v " + pointMapper[i * 3 + 0] + " " + pointMapper[i * 3 + 1] + " " + pointMapper[i * 3 + 2] + "\r\n");
+}
+
+const file = "# Create with Living Together (Parse from .ltss file)\r\n\r\n" + fileStrVec + fileStr;
+
+console.log("正在生成保存文件...\r\n");
+FS.writeFileSync(outputFilePath, file);
+console.log("成功\r\n");

config/webpack.common.js

@@ -58,10 +58,6 @@ const Entry = () => ({
         import: source("./GLRender/ClassicRenderer.ts")
     },
 
-    livingTogether: {
-        import: source("./livingTogether.ts")
-    },
-
     LaboratoryPage: {
         import: source("./Page/Laboratory/Laboratory.tsx"),
         dependOn: ["Model", "GLRender"]
@@ -70,6 +66,29 @@ const Entry = () => ({
     SimulatorWeb: {
         import: source("./Page/SimulatorWeb/SimulatorWeb.tsx"),
         dependOn: ["Model", "GLRender"]
+    },
+
+    SimulatorDesktop: {
+        import: source("./Page/SimulatorDesktop/SimulatorDesktop.tsx"),
+        dependOn: ["Model", "GLRender"]
+    },
+
+    Service: {
+        import: source("./Service/Service.ts")
+    },
+
+    ServiceRunner: {
+        import: source("./Service/Runner.ts"),
+        dependOn: ["Service"]
+    },
+
+    Electron: {
+        import: source("./Electron/Electron.ts"),
+        dependOn: ["Service"]
+    },
+
+    SimulatorWindow: {
+        import: source("./Electron/SimulatorWindow.ts"),
     }
 });
 
@@ -104,6 +123,10 @@ const resolve = (plugins = []) => {
 
     let res = {
         extensions: [ ".tsx", '.ts', '.js' ],
+        fallback: {
+            'react/jsx-runtime': 'react/jsx-runtime.js',
+            'react/jsx-dev-runtime': 'react/jsx-dev-runtime.js',
+        },
         plugins: plugins
     };
 

config/webpack.desktop.js

@@ -0,0 +1,56 @@
+const { 
+    Entry, Output, resolve, build,
+    TypeScriptRules, ScssRules,
+    HTMLPage, CssPlugin, AutoFixCssPlugin
+} = require("./webpack.common");
+
+const AllEntry = Entry();
+
+module.exports = (env) => {
+    
+    const config = {
+
+        entry: {
+            GLRender: AllEntry.GLRender,
+            Model: AllEntry.Model,
+            SimulatorDesktop: AllEntry.SimulatorDesktop
+        },
+
+        output: Output("[name].[contenthash].js"),
+        devtool: 'source-map',
+        mode: "development",
+        resolve: resolve(),
+
+        optimization: {
+            runtimeChunk: 'single',
+            chunkIds: 'named',
+            moduleIds: 'named',
+            splitChunks: {
+                chunks: 'all',
+                minSize: 1000
+            }
+        },
+
+        module: {
+            rules: [
+                TypeScriptRules(),
+                ScssRules()
+            ]
+        },
+        
+        plugins: [
+            HTMLPage("index.html", "Living Together | Simulator"),
+            CssPlugin(),
+            AutoFixCssPlugin()
+        ],
+        
+        devServer: {
+            static: {
+                directory: build("./"),
+            },
+            port: 12000,
+        }
+    };
+
+    return config;
+};

config/webpack.electron.js

@@ -0,0 +1,46 @@
+const { Entry, Output, resolve, TypeScriptRules } = require("./webpack.common");
+const nodeExternals = require("webpack-node-externals");
+
+const AllEntry = Entry();
+
+module.exports = (env) => {
+    
+    const config = {
+
+        entry: {
+            Service: AllEntry.Service,
+			Electron: AllEntry.Electron,
+            SimulatorWindow: AllEntry.SimulatorWindow
+        },
+
+        output: Output("[name].js"),
+        devtool: 'source-map',
+        mode: "development",
+        resolve: resolve(),
+
+        optimization: {
+            splitChunks: {
+                chunks: 'all',
+                minSize: 1000
+            }
+        },
+
+        // externals: [nodeExternals({ allowlist: [/^(((?!electron).)*)$/] })],
+        externals: [nodeExternals()],
+
+        module: {
+            rules: [
+                TypeScriptRules()
+            ]
+        },
+
+		node: {
+			__filename: false,
+			__dirname: false
+		},
+
+		target: 'node'
+    };
+
+    return config;
+};

config/webpack.service.js

@@ -0,0 +1,41 @@
+const { Entry, Output, resolve, TypeScriptRules } = require("./webpack.common");
+
+const AllEntry = Entry();
+
+module.exports = (env) => {
+    
+    const config = {
+
+        entry: {
+            Service: AllEntry.Service,
+			ServiceRunner: AllEntry.ServiceRunner,
+        },
+
+        output: Output("[name].js"),
+        devtool: 'source-map',
+        mode: "development",
+        resolve: resolve(),
+
+        optimization: {
+            splitChunks: {
+                chunks: 'all',
+                minSize: 1000
+            }
+        },
+
+        module: {
+            rules: [
+                TypeScriptRules()
+            ]
+        },
+
+		node: {
+			__filename: false,
+			__dirname: false
+		},
+
+		target: 'node'
+    };
+
+    return config;
+};

package.json

@@ -4,13 +4,38 @@
   "description": "An art interactive works for graduation design.",
   "main": "./source/LivingTogether.ts",
   "scripts": {
-    "clean": "rimraf ./build/*",
+    "clean": "fse emptyDir ./build/",
     "hmr-lab": "webpack serve --open --config ./config/webpack.lab.js",
     "build-lab": "npm run clean & webpack --mode development --config ./config/webpack.lab.js",
     "release-lab": "npm run clean & webpack --mode production --no-devtool --config ./config/webpack.lab.js",
     "hmr-web": "webpack serve --open --config ./config/webpack.web.js",
+    "hmr-desktop": "webpack serve --open --config ./config/webpack.desktop.js",
     "build-web": "npm run clean & webpack --mode development --config ./config/webpack.web.js",
-    "release-web": "npm run clean & webpack --mode production --no-devtool --config ./config/webpack.web.js"
+    "release-web": "npm run clean & webpack --mode production --no-devtool --config ./config/webpack.web.js",
+    "build-desktop-web": "npm run clean & webpack --mode development --config ./config/webpack.desktop.js",
+    "release-desktop-web": "npm run clean & webpack --mode production --no-devtool --config ./config/webpack.desktop.js",
+    "build-service": "webpack --mode development --config ./config/webpack.service.js",
+    "release-service": "webpack --mode production --no-devtool --config ./config/webpack.service.js",
+    "run-service": "node ./build/ServiceRunner.js --run --path ./build --port 12000",
+    "build-run-web": "npm run build-web & npm run build-service & npm run run-service",
+    "release-run-web": "npm run release-web & npm run release-service & npm run run-service",
+    "copy-fluent-icon": "fse mkdirp ./build/font-icon/ & fse emptyDir ./build/font-icon/ & fse copy ./node_modules/@fluentui/font-icons-mdl2/fonts/ ./build/font-icon/",
+    "copy-loading-page": "fse mkdirp ./build & fse copy ./assets/LoadingPage.html ./build/LoadingPage.html",
+    "build-run-desktop-web": "npm run build-desktop-web & npm run copy-fluent-icon & npm run build-service & npm run run-service",
+    "release-run-desktop-web": "npm run release-desktop-web & npm run copy-fluent-icon & npm run release-service & npm run run-service",
+    "skip-electron-ci": "set ELECTRON_SKIP_BINARY_DOWNLOAD=1& npm ci",
+    "build-electron": "webpack --mode development --config ./config/webpack.electron.js",
+    "release-electron": "webpack --mode production --no-devtool --config ./config/webpack.electron.js",
+    "electron-cache": "set ELECTRON_SKIP_BINARY_DOWNLOAD=& set ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/& set ELECTRON_CUSTOM_DIR={{ version }}& node ./node_modules/electron/install.js",
+    "electron": "set LIVING_TOGETHER_BASE_PATH=./build& set LIVING_TOGETHER_WEB_PATH=/& npx electron ./build/Electron.js",
+    "hmr-electron": "npm run build-electron & set LIVING_TOGETHER_SERVICE=http://127.0.0.1:12000& npm run electron",
+    "build-run-electron": "npm run build-desktop-web & npm run copy-fluent-icon & npm run copy-loading-page & npm run build-electron & npm run electron",
+    "release-run-electron": "npm run release-desktop-web & npm run copy-fluent-icon & npm run copy-loading-page & npm run release-electron & npm run electron",
+    "copy-package-json": "fse mkdirp ./bundle/ & node ./config/electron.forge.config.js --out ./bundle",
+    "copy-build-result": "fse mkdirp ./bundle/ & fse mkdirp ./build/ & fse copy ./build/ ./bundle/",
+    "copy-electron-icon": "fse mkdirp ./bundle/ & fse copy ./assets/living-together.ico ./bundle/living-together.ico & fse copy ./assets/living-together.icns ./bundle/living-together.icns",
+    "electron-app-ci": "cd ./bundle & npm install & cd ../",
+    "gen-bundle": "fse emptyDir ./bundle/ & npm run copy-package-json & npm run copy-electron-icon & npm run electron-app-ci"
   },
   "keywords": [
     "artwork",
@@ -21,28 +46,40 @@
   "author": "MrKBear",
   "license": "GPL",
   "devDependencies": {
+    "@atao60/fse-cli": "^0.1.7",
+    "@types/detect-port": "^1.3.2",
+    "@types/downloadjs": "^1.4.3",
     "@types/react": "^17.0.38",
     "@types/react-dom": "^17.0.11",
+    "@types/uuid": "^8.3.4",
     "autoprefixer": "^10.4.2",
     "css-loader": "^6.5.1",
+    "electron": "^18.0.4",
     "html-webpack-plugin": "^5.5.0",
     "mini-css-extract-plugin": "^2.4.6",
     "node-sass": "^7.0.1",
     "postcss-loader": "^6.2.1",
-    "rimraf": "^3.0.2",
     "sass-loader": "^12.4.0",
     "ts-loader": "^9.2.6",
     "tsconfig-paths-webpack-plugin": "^3.5.2",
     "typescript": "^4.5.4",
     "webpack": "^5.65.0",
     "webpack-cli": "^4.9.1",
-    "webpack-dev-server": "^4.7.2"
+    "webpack-dev-server": "^4.7.2",
+    "webpack-node-externals": "^3.0.0"
   },
   "dependencies": {
     "@fluentui/react": "^8.56.0",
     "@juggle/resize-observer": "^3.3.1",
+    "detect-port": "^1.3.0",
+    "downloadjs": "^1.4.7",
+    "express": "^4.17.3",
     "gl-matrix": "^3.4.3",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
+    "react-dom": "^17.0.2",
+    "readline-sync": "^1.4.10",
+    "uuid": "^8.3.2"
   }
 }

source/Behavior/Avoidance.ts

@@ -0,0 +1,86 @@
+import { Behavior } from "@Model/Behavior";
+import { Group } from "@Model/Group";
+import { Individual } from "@Model/Individual";
+import { Model } from "@Model/Model";
+
+type IAvoidanceBehaviorParameter = {
+    avoid: "CLG",
+	strength: "number",
+    range: "number"
+}
+
+type IAvoidanceBehaviorEvent = {}
+
+class Avoidance extends Behavior<IAvoidanceBehaviorParameter, IAvoidanceBehaviorEvent> {
+
+    public override behaviorId: string = "Avoidance";
+
+    public override behaviorName: string = "$Title";
+
+    public override iconName: string = "FastMode";
+
+    public override describe: string = "$Intro";
+
+    public override category: string = "$Interactive";
+
+    public override parameterOption = {
+        avoid: { name: "$Avoid", type: "CLG" },
+        strength: { type: "number", name: "$Strength", defaultValue: 1, numberMin: 0, numberStep: .1 },
+        range: { type: "number", name: "$Range", defaultValue: 4, numberMin: 0, numberStep: .1 }
+    };
+
+    public effect = (individual: Individual, group: Group, model: Model, t: number): void => {
+        
+        let currentDistant: number = Infinity;
+        let avoidTarget = undefined as Individual | undefined;
+
+        for (let i = 0; i < this.parameter.avoid.objects.length; i++) {
+            const targetGroup = this.parameter.avoid.objects[i];
+
+            targetGroup.individuals.forEach((targetIndividual) => {
+
+				// 排除自己
+				if (targetIndividual === individual) return;
+				let dis = targetIndividual.distanceTo(individual);
+
+				if (dis < currentDistant && dis <= this.parameter.range) {
+					avoidTarget = targetIndividual;
+					currentDistant = dis;
+				}
+			});
+        }
+
+        if (avoidTarget && currentDistant !== Infinity) {
+            individual.applyForce(
+				(individual.position[0] - avoidTarget.position[0]) * this.parameter.strength / currentDistant,
+				(individual.position[1] - avoidTarget.position[1]) * this.parameter.strength / currentDistant,
+				(individual.position[2] - avoidTarget.position[2]) * this.parameter.strength / currentDistant
+			);
+        }
+    }
+
+    public override terms: Record<string, Record<string, string>> = {
+        "$Title": {
+            "ZH_CN": "躲避",
+            "EN_US": "Avoidance"
+        },
+        "$Intro": {
+            "ZH_CN": "远离视野范围内最近的躲避目标",
+            "EN_US": "Stay away from the nearest evasive target in the field of vision"
+        },
+        "$Avoid": {
+            "ZH_CN": "躲避对象",
+            "EN_US": "Avoid object"
+        },
+        "$Strength": {
+            "ZH_CN": "躲避强度",
+            "EN_US": "Avoidance intensity"
+        },
+        "$Range": {
+            "ZH_CN": "视野范围",
+            "EN_US": "Field of vision"
+        }
+    };
+}
+
+export { Avoidance };

source/Behavior/Behavior.ts

@@ -4,7 +4,15 @@ import { PhysicsDynamics } from "@Behavior/PhysicsDynamics";
 import { Brownian } from "@Behavior/Brownian";
 import { BoundaryConstraint } from "@Behavior/BoundaryConstraint";
 import { Tracking } from "@Behavior/Tracking";
-import { Attacking } from "@Behavior/Attacking";
+import { ContactAttacking } from "@Behavior/ContactAttacking";
+import { ContactAssimilate } from "@Behavior/ContactAssimilate";
+import { DelayAssimilate } from "@Behavior/DelayAssimilate";
+import { Avoidance } from "@Behavior/Avoidance";
+import { DirectionCluster } from "@Behavior/DirectionCluster";
+import { CentralCluster } from "@Behavior/CentralCluster";
+import { Manufacture } from "@Behavior/Manufacture";
+import { Wastage } from "@Behavior/Wastage";
+import { SampleTracking } from "@Behavior/SampleTracking";
 
 const AllBehaviors: IAnyBehaviorRecorder[] = [
     new BehaviorRecorder(Template),
@@ -12,7 +20,15 @@ const AllBehaviors: IAnyBehaviorRecorder[] = [
     new BehaviorRecorder(Brownian),
     new BehaviorRecorder(BoundaryConstraint),
     new BehaviorRecorder(Tracking),
-    new BehaviorRecorder(Attacking),
+    new BehaviorRecorder(ContactAttacking),
+    new BehaviorRecorder(ContactAssimilate),
+    new BehaviorRecorder(DelayAssimilate),
+    new BehaviorRecorder(Avoidance),
+    new BehaviorRecorder(DirectionCluster),
+    new BehaviorRecorder(CentralCluster),
+    new BehaviorRecorder(Manufacture),
+    new BehaviorRecorder(Wastage),
+    new BehaviorRecorder(SampleTracking),
 ]
 
 /**

source/Behavior/BoundaryConstraint.ts

@@ -48,11 +48,17 @@ class BoundaryConstraint extends Behavior<IBoundaryConstraintBehaviorParameter,
 
 			if (ox || oy || oz) {
 
-				let currentFLen = individual.vectorLength(rx, ry, rz);
+				const backFocus: number[] = [0, 0, 0];
+
+				if (ox) backFocus[0] = rx - rx * rangeList[i].radius[0] / Math.abs(rx);
+				if (oy) backFocus[1] = ry - ry * rangeList[i].radius[1] / Math.abs(ry);
+				if (oz) backFocus[2] = rz - rz * rangeList[i].radius[2] / Math.abs(rz);
+
+				let currentFLen = individual.vectorLength(backFocus);
 				if (currentFLen < fLen) {
-					fx = rx;
-					fy = ry;
-					fz = rz;
+					fx = backFocus[0];
+					fy = backFocus[1];
+					fz = backFocus[2];
 					fLen = currentFLen;
 				}
 

source/Behavior/Brownian.ts

@@ -7,7 +7,9 @@ type IBrownianBehaviorParameter = {
     maxFrequency: "number",
 	minFrequency: "number",
 	maxStrength: "number",
-	minStrength: "number"
+	minStrength: "number",
+	dirLimit: "boolean",
+	angle: "number"
 }
 
 type IBrownianBehaviorEvent = {}
@@ -28,9 +30,88 @@ class Brownian extends Behavior<IBrownianBehaviorParameter, IBrownianBehaviorEve
 		maxFrequency: { type: "number", name: "$Max.Frequency", defaultValue: 5, numberStep: .1, numberMin: 0 },
 		minFrequency: { type: "number", name: "$Min.Frequency", defaultValue: 0, numberStep: .1, numberMin: 0 },
 		maxStrength: { type: "number", name: "$Max.Strength", defaultValue: 10, numberStep: .01, numberMin: 0 },
-		minStrength: { type: "number", name: "$Min.Strength", defaultValue: 0, numberStep: .01, numberMin: 0 }
+		minStrength: { type: "number", name: "$Min.Strength", defaultValue: 0, numberStep: .01, numberMin: 0 },
+		dirLimit: { type: "boolean", name: "$Direction.Limit", defaultValue: false },
+		angle: {
+			type: "number", name: "$Angle", defaultValue: 180, numberStep: 5,
+			numberMin: 0, numberMax: 360, condition: { key: "dirLimit", value: true }
+		}
 	};
 
+	private randomFocus360(): number[] {
+		let randomVec = [
+			Math.random() * 2 - 1,
+			Math.random() * 2 - 1,
+			Math.random() * 2 - 1
+		];
+
+		let randomVecLen = (randomVec[0] ** 2 + randomVec[1] ** 2 + randomVec[2] ** 2) ** 0.5;
+		return [randomVec[0] / randomVecLen, randomVec[1] / randomVecLen, randomVec[2] / randomVecLen];
+	}
+
+	private rotateWithVec(vec: number[], r: number[], ang: number) {
+
+		const cos = Math.cos(ang); const sin = Math.sin(ang);
+		const a1 = r[0] ?? 0; const a2 = r[1] ?? 0; const a3 = r[2] ?? 0; 
+
+		return [
+			(cos + (1 - cos) * a1 * a1) * (vec[0] ?? 0) +
+			((1 - cos) * a1 * a2 - sin * a3) * (vec[1] ?? 0) +
+			((1 - cos) * a1 * a3 + sin * a2) * (vec[2] ?? 0),
+
+			((1 - cos) * a1 * a2 + sin * a3) * (vec[0] ?? 0) +
+			(cos + (1 - cos) * a2 * a2) * (vec[1] ?? 0) +
+			((1 - cos) * a2 * a3 - sin * a1) * (vec[2] ?? 0),
+
+			((1 - cos) * a1 * a3 - sin * a2) * (vec[0] ?? 0) +
+			((1 - cos) * a2 * a3 + sin * a1) * (vec[1] ?? 0) +
+			(cos + (1 - cos) * a3 * a3) * (vec[2] ?? 0)
+		]
+	}
+	private angle2Vector(v1: number[], v2: number[]): number {
+		return Math.acos(
+			(v1[0] * v2[0] + v1[1] * v2[1] + v1[2] * v2[2]) /
+			(
+				(v1[0] ** 2 + v1[1] ** 2 + v1[2] ** 2) ** 0.5 *
+				(v2[0] ** 2 + v2[1] ** 2 + v2[2] ** 2) ** 0.5
+			)
+		) * 180 / Math.PI;
+	}
+
+	private randomFocusRange(dir: number[], angle: number): number[] {
+
+		// 计算 X-Z 投影
+		let pxz = [dir[0] ?? 0, 0, dir[2] ?? 0];
+
+		// 通过叉乘计算垂直向量
+		let dxz: number[];
+
+		// 如果投影向量没有长度，使用单位向量
+		if (pxz[0] ** 2 + pxz[2] ** 2 === 0) {
+			dxz = [0, 0, 1];
+		}
+
+		// 通过叉乘计算垂直轴线
+		else {
+			dxz = [
+				dir[1] * pxz[2] - pxz[1] * dir[2],
+				dir[2] * pxz[0] - pxz[2] * dir[0],
+				dir[0] * pxz[1] - pxz[0] * dir[1]
+			];
+
+			let lenDxz = (dxz[0] ** 2 + dxz[1] ** 2 + dxz[2] ** 2) ** 0.5;
+			dxz = [dxz[0] / lenDxz, dxz[1] / lenDxz, dxz[2] / lenDxz];
+		}
+
+		// 航偏角 360 随机旋转
+		let randomH = this.rotateWithVec(dxz, dir, Math.random() * Math.PI * 2);
+
+		// 俯仰角 180 * R 随机旋转
+		let randomP = this.rotateWithVec(dir, randomH, (Math.random() - 0.5) * 2 * angle * Math.PI / 180);
+		
+		return randomP;
+	}
+
 	public effect = (individual: Individual, group: Group, model: Model, t: number): void => {
 
 		const {maxFrequency, minFrequency, maxStrength, minStrength} = this.parameter;
@@ -41,11 +122,49 @@ class Brownian extends Behavior<IBrownianBehaviorParameter, IBrownianBehaviorEve
 		
 		currentTime += t;
 		if (currentTime > nextTime) {
+
+			let randomDir: number[];
+
+			// 开启角度限制
+			if (this.parameter.dirLimit) {
+
+				// 计算当前速度大小
+				const vLen = individual.vectorLength(individual.velocity);
+
+				// 随机旋转算法
+				if (vLen > 0) {
+					randomDir = this.randomFocusRange(
+						[
+							individual.velocity[0] / vLen,
+							individual.velocity[1] / vLen,
+							individual.velocity[2] / vLen
+						],
+						this.parameter.angle / 2
+					);
+
+					if (isNaN(randomDir[0]) || isNaN(randomDir[1]) || isNaN(randomDir[2])) {
+						randomDir = this.randomFocus360()
+					}
+				}
+
+				else {
+					randomDir = this.randomFocus360()
+				}
+			}
+			
+			// 随机生成算法
+			else {
+				randomDir = this.randomFocus360()
+			}
+
+			const randomLength = minStrength + Math.random() * (maxStrength - minStrength);
+
 			individual.applyForce(
-				minStrength + (Math.random() * 2 - 1) * (maxStrength - minStrength),
-				minStrength + (Math.random() * 2 - 1) * (maxStrength - minStrength),
-				minStrength + (Math.random() * 2 - 1) * (maxStrength - minStrength)
+				randomDir[0] * randomLength,
+				randomDir[1] * randomLength,
+				randomDir[2] * randomLength
 			);
+
 			nextTime = minFrequency +  Math.random() * (maxFrequency - minFrequency);
 			currentTime = 0;
 		}
@@ -78,7 +197,15 @@ class Brownian extends Behavior<IBrownianBehaviorParameter, IBrownianBehaviorEve
 		"$Min.Strength": {
             "ZH_CN": "最小强度",
             "EN_US": "Minimum strength"
-        }
+        },
+		"$Direction.Limit": {
+			"ZH_CN": "开启角度限制",
+            "EN_US": "Enable limit angle"
+		},
+		"$Angle": {
+			"ZH_CN": "限制立体角 (deg)",
+            "EN_US": "Restricted solid angle (deg)"
+		}
     };
 }
 

source/Behavior/CentralCluster.ts

@@ -0,0 +1,96 @@
+import { Behavior } from "@Model/Behavior";
+import { Group } from "@Model/Group";
+import { Individual } from "@Model/Individual";
+import { Model } from "@Model/Model";
+
+type ICentralClusterBehaviorParameter = {
+    cluster: "CLG",
+	strength: "number",
+    range: "number"
+}
+
+type ICentralClusterBehaviorEvent = {}
+
+class CentralCluster extends Behavior<ICentralClusterBehaviorParameter, ICentralClusterBehaviorEvent> {
+
+    public override behaviorId: string = "CentralCluster";
+
+    public override behaviorName: string = "$Title";
+
+    public override iconName: string = "ZoomToFit";
+
+    public override describe: string = "$Intro";
+
+    public override category: string = "$Interactive";
+
+    public override parameterOption = {
+        cluster: { name: "$Cluster", type: "CLG" },
+        strength: { type: "number", name: "$Strength", defaultValue: 1, numberMin: 0, numberStep: .1 },
+        range: { type: "number", name: "$Range", defaultValue: 4, numberMin: 0, numberStep: .1 }
+    };
+
+    public effect = (individual: Individual, group: Group, model: Model, t: number): void => {
+        
+        let findCount = 0;
+        let centerPos: number[] = [0, 0, 0];
+
+        for (let i = 0; i < this.parameter.cluster.objects.length; i++) {
+            const targetGroup = this.parameter.cluster.objects[i];
+
+            targetGroup.individuals.forEach((targetIndividual) => {
+
+				// 排除自己
+				if (targetIndividual === individual) return;
+				let dis = targetIndividual.distanceTo(individual);
+
+				if (dis <= this.parameter.range) {
+                    centerPos[0] += targetIndividual.position[0];
+                    centerPos[1] += targetIndividual.position[1];
+                    centerPos[2] += targetIndividual.position[2];
+					findCount ++;
+				}
+			});
+        }
+
+        if (findCount > 0) {
+
+            let dirX = centerPos[0] / findCount - individual.position[0];
+            let dirY = centerPos[1] / findCount - individual.position[1];
+            let dirZ = centerPos[2] / findCount - individual.position[2];
+            let length = individual.vectorLength(dirX, dirY, dirZ);
+
+            if (length > 0) {
+                individual.applyForce(
+                    dirX * this.parameter.strength / length,
+                    dirY * this.parameter.strength / length,
+                    dirZ * this.parameter.strength / length
+                );
+            }
+        }
+    }
+
+    public override terms: Record<string, Record<string, string>> = {
+        "$Title": {
+            "ZH_CN": "中心结群",
+            "EN_US": "Central cluster"
+        },
+        "$Intro": {
+            "ZH_CN": "个体将按照视野范围内目标方向结群对象个体的几何中心移动",
+            "EN_US": "The individual will move according to the geometric center of the grouped object individual in the target direction within the field of view"
+        },
+        "$Cluster": {
+            "ZH_CN": "中心结群对象",
+            "EN_US": "Central clustering object"
+        },
+        "$Strength": {
+            "ZH_CN": "结群强度",
+            "EN_US": "Clustering strength"
+        },
+        "$Range": {
+            "ZH_CN": "视野范围",
+            "EN_US": "Field of vision"
+        }
+    };
+}
+
+export { CentralCluster };

source/Behavior/ContactAssimilate.ts

@@ -0,0 +1,102 @@
+import { Behavior } from "@Model/Behavior";
+import { Group } from "@Model/Group";
+import { Individual } from "@Model/Individual";
+import { Model } from "@Model/Model";
+
+type IContactAssimilateBehaviorParameter = {
+    target: "CLG",
+    assimilate: "CG",
+    self: "CG",
+	success: "number",
+    range: "number"
+}
+
+type IContactAssimilateBehaviorEvent = {}
+
+class ContactAssimilate extends Behavior<IContactAssimilateBehaviorParameter, IContactAssimilateBehaviorEvent> {
+
+    public override behaviorId: string = "ContactAssimilate";
+
+    public override behaviorName: string = "$Title";
+
+    public override iconName: string = "SyncStatus";
+
+    public override describe: string = "$Intro";
+
+    public override category: string = "$Interactive";
+
+	public override parameterOption = {
+		target: { type: "CLG", name: "$Target" },
+        assimilate: { type: "CG", name: "$Assimilate" },
+        self: { type: "CG", name: "$Self" },
+        range: { type: "number", name: "$Range", defaultValue: .05, numberMin: 0, numberStep: .01 },
+        success: { type: "number", name: "$Success", defaultValue: 90, numberMin: 0, numberMax: 100, numberStep: 5 }
+	};
+
+    public effect = (individual: Individual, group: Group, model: Model, t: number): void => {
+
+        for (let i = 0; i < this.parameter.target.objects.length; i++) {
+			const targetGroup = this.parameter.target.objects[i];
+
+			targetGroup.individuals.forEach((targetIndividual) => {
+
+				// 排除自己
+				if (targetIndividual === individual) return;
+				let dis = targetIndividual.distanceTo(individual);
+
+                // 进入同化范围
+				if (dis <= this.parameter.range) {
+					
+                    // 成功判定
+                    if (Math.random() * 100 < this.parameter.success) {
+
+                        // 同化目标
+                        let assimilateGroup = this.parameter.assimilate.objects;
+                        if (assimilateGroup) {
+                            targetIndividual.transfer(assimilateGroup);
+                        }
+
+                        // 同化目标
+                        let selfGroup = this.parameter.self.objects;
+                        if (selfGroup) {
+                            individual.transfer(selfGroup);
+                        }
+                    }
+				}
+			});
+		}
+    }
+
+	public override terms: Record<string, Record<string, string>> = {
+        "$Title": {
+            "ZH_CN": "接触同化",
+            "EN_US": "Contact Assimilate"
+        },
+		"$Target": {
+			"ZH_CN": "从哪个群...",
+			"EN_US": "From group..."
+		},
+        "$Assimilate": {
+            "ZH_CN": "到哪个群...",
+			"EN_US": "To group..."
+        },
+        "$Self": {
+            "ZH_CN": "自身同化到...",
+			"EN_US": "Self assimilate to..."
+        },
+        "$Range": {
+            "ZH_CN": "同化范围 (m)",
+			"EN_US": "Assimilate range (m)"
+        },
+		"$Success": {
+			"ZH_CN": "成功率 (%)",
+			"EN_US": "Success rate (%)"
+		},
+        "$Intro": {
+            "ZH_CN": "将进入同化范围内的个体同化至另一个群",
+            "EN_US": "Assimilate individuals who enter the assimilation range to another group"
+        }
+    };
+}
+
+export { ContactAssimilate };

source/Behavior/ContactAttacking.ts

@@ -3,17 +3,18 @@ import { Group } from "@Model/Group";
 import { Individual } from "@Model/Individual";
 import { Model } from "@Model/Model";
 
-type IAttackingBehaviorParameter = {
+type IContactAttackingBehaviorParameter = {
     target: "CLG",
 	success: "number",
-    range: "number"
+    range: "number",
+    assimilate: "CG",
 }
 
-type IAttackingBehaviorEvent = {}
+type IContactAttackingBehaviorEvent = {}
 
-class Attacking extends Behavior<IAttackingBehaviorParameter, IAttackingBehaviorEvent> {
+class ContactAttacking extends Behavior<IContactAttackingBehaviorParameter, IContactAttackingBehaviorEvent> {
 
-    public override behaviorId: string = "Attacking";
+    public override behaviorId: string = "ContactAttacking";
 
     public override behaviorName: string = "$Title";
 
@@ -26,7 +27,8 @@ class Attacking extends Behavior<IAttackingBehaviorParameter, IAttackingBehavior
 	public override parameterOption = {
 		target: { type: "CLG", name: "$Target" },
         range: { type: "number", name: "$Range", defaultValue: .05, numberMin: 0, numberStep: .01 },
-        success: { type: "number", name: "$Success", defaultValue: 90, numberMin: 0, numberMax: 100, numberStep: 5 }
+        success: { type: "number", name: "$Success", defaultValue: 90, numberMin: 0, numberMax: 100, numberStep: 5 },
+        assimilate: { type: "CG", name: "$Assimilate"}
 	};
 
     public effect = (individual: Individual, group: Group, model: Model, t: number): void => {
@@ -46,6 +48,10 @@ class Attacking extends Behavior<IAttackingBehaviorParameter, IAttackingBehavior
                     // 成功判定
                     if (Math.random() * 100 < this.parameter.success) {
                         targetIndividual.die();
+
+                        if (this.parameter.assimilate?.objects) {
+                            individual.transfer(this.parameter.assimilate.objects);
+                        }
                     }
 				}
 			});
@@ -54,8 +60,8 @@ class Attacking extends Behavior<IAttackingBehaviorParameter, IAttackingBehavior
 
 	public override terms: Record<string, Record<string, string>> = {
         "$Title": {
-            "ZH_CN": "攻击",
-            "EN_US": "Attacking"
+            "ZH_CN": "接触攻击",
+            "EN_US": "Contact Attacking"
         },
 		"$Target": {
 			"ZH_CN": "攻击目标",
@@ -72,8 +78,12 @@ class Attacking extends Behavior<IAttackingBehaviorParameter, IAttackingBehavior
         "$Intro": {
             "ZH_CN": "攻击进入共进范围的目标群个体",
             "EN_US": "Attack the target group and individual entering the range"
+        },
+        "$Assimilate": {
+            "ZH_CN": "同化",
+            "EN_US": "Assimilate"
         }
     };
 }
 
-export { Attacking };
+export { ContactAttacking };

source/Behavior/DelayAssimilate.ts

@@ -0,0 +1,96 @@
+import { Behavior } from "@Model/Behavior";
+import { Group } from "@Model/Group";
+import { Individual } from "@Model/Individual";
+import { Model } from "@Model/Model";
+
+type IDelayAssimilateBehaviorParameter = {
+    target: "CG",
+    maxDelay: "number",
+	minDelay: "number",
+	success: "number"
+}
+
+type IDelayAssimilateBehaviorEvent = {}
+
+class DelayAssimilate extends Behavior<IDelayAssimilateBehaviorParameter, IDelayAssimilateBehaviorEvent> {
+
+    public override behaviorId: string = "DelayAssimilate";
+
+    public override behaviorName: string = "$Title";
+
+    public override iconName: string = "FunctionalManagerDashboard";
+
+    public override describe: string = "$Intro";
+
+	public override category: string = "$Initiative";
+
+	public override parameterOption = {
+        target: { type: "CG", name: "$Target" },
+		maxDelay: { type: "number", name: "$Max.Delay", defaultValue: 20, numberStep: 1, numberMin: 0 },
+		minDelay: { type: "number", name: "$Min.Delay", defaultValue: 5, numberStep: 1, numberMin: 0 },
+		success: { type: "number", name: "$Success", defaultValue: 90, numberStep: 5, numberMin: 0 }
+	};
+
+	public effect = (individual: Individual, group: Group, model: Model, t: number): void => {
+
+        let assimilateGroup = this.parameter.target.objects;
+        if (!assimilateGroup) return;
+        
+        const {maxDelay, minDelay, success} = this.parameter;
+
+		let nextTime = individual.getData("DelayAssimilate.nextTime") ?? 
+		minDelay +  Math.random() * (maxDelay - minDelay);
+		let currentTime = individual.getData("DelayAssimilate.currentTime") ?? 0;
+		
+		currentTime += t;
+		if (currentTime > nextTime) {
+		
+            // 成功判定
+            if (Math.random() * 100 < success) {
+                individual.transfer(assimilateGroup);
+                nextTime = undefined;
+                currentTime = undefined;
+            } else {
+
+                nextTime = minDelay +  Math.random() * (maxDelay - minDelay);
+			    currentTime = 0;
+            }
+		}
+
+		individual.setData("DelayAssimilate.nextTime", nextTime);
+		individual.setData("DelayAssimilate.currentTime", currentTime);
+	}
+
+	public override terms: Record<string, Record<string, string>> = {
+        "$Title": {
+            "ZH_CN": "延迟同化",
+            "EN_US": "Delayed assimilation"
+        },
+        "$Intro": {
+            "ZH_CN": "随着时间的推移，个体逐渐向另一个群同化。",
+            "EN_US": "Over time, individuals gradually assimilate to another group."
+        },
+        "$Target": {
+            "ZH_CN": "同化目标",
+            "EN_US": "Assimilation target"
+        },
+		"$Max.Delay": {
+            "ZH_CN": "最长时间",
+            "EN_US": "Longest time"
+        },
+		"$Min.Delay": {
+            "ZH_CN": "最短时间",
+            "EN_US": "Shortest time"
+        },
+		"$Success": {
+            "ZH_CN": "成功率",
+            "EN_US": "Minimum strength"
+        },
+        "$Initiative": {
+            "ZH_CN": "主动",
+            "EN_US": "Initiative"
+        }
+    };
+}
+
+export { DelayAssimilate };

source/Behavior/DirectionCluster.ts

@@ -0,0 +1,93 @@
+import { Behavior } from "@Model/Behavior";
+import { Group } from "@Model/Group";
+import { Individual } from "@Model/Individual";
+import { Model } from "@Model/Model";
+
+type IDirectionClusterBehaviorParameter = {
+    cluster: "CLG",
+	strength: "number",
+    range: "number"
+}
+
+type IDirectionClusterBehaviorEvent = {}
+
+class DirectionCluster extends Behavior<IDirectionClusterBehaviorParameter, IDirectionClusterBehaviorEvent> {
+
+    public override behaviorId: string = "DirectionCluster";
+
+    public override behaviorName: string = "$Title";
+
+    public override iconName: string = "RawSource";
+
+    public override describe: string = "$Intro";
+
+    public override category: string = "$Interactive";
+
+    public override parameterOption = {
+        cluster: { name: "$Cluster", type: "CLG" },
+        strength: { type: "number", name: "$Strength", defaultValue: 1, numberMin: 0, numberStep: .1 },
+        range: { type: "number", name: "$Range", defaultValue: 4, numberMin: 0, numberStep: .1 }
+    };
+
+    public effect = (individual: Individual, group: Group, model: Model, t: number): void => {
+        
+        let findCount = 0;
+        let centerDir: number[] = [0, 0, 0];
+
+        for (let i = 0; i < this.parameter.cluster.objects.length; i++) {
+            const targetGroup = this.parameter.cluster.objects[i];
+
+            targetGroup.individuals.forEach((targetIndividual) => {
+
+				// 排除自己
+				if (targetIndividual === individual) return;
+				let dis = targetIndividual.distanceTo(individual);
+
+				if (dis <= this.parameter.range) {
+                    centerDir[0] += targetIndividual.velocity[0];
+                    centerDir[1] += targetIndividual.velocity[1];
+                    centerDir[2] += targetIndividual.velocity[2];
+					findCount ++;
+				}
+			});
+        }
+
+        if (findCount > 0) {
+
+            let length = individual.vectorLength(centerDir);
+
+            if (length) {
+                individual.applyForce(
+                    centerDir[0] * this.parameter.strength / length,
+                    centerDir[1] * this.parameter.strength / length,
+                    centerDir[2] * this.parameter.strength / length
+                );
+            }
+        }
+    }
+
+    public override terms: Record<string, Record<string, string>> = {
+        "$Title": {
+            "ZH_CN": "方向结群",
+            "EN_US": "Directional clustering"
+        },
+        "$Intro": {
+            "ZH_CN": "个体将按照视野范围内目标方向结群对象个体的平均移动方向移动",
+            "EN_US": "Individuals will move according to the average moving direction of the grouped object individuals in the target direction within the field of vision"
+        },
+        "$Cluster": {
+            "ZH_CN": "方向结群对象",
+            "EN_US": "Directional clustering object"
+        },
+        "$Strength": {
+            "ZH_CN": "结群强度",
+            "EN_US": "Clustering strength"
+        },
+        "$Range": {
+            "ZH_CN": "视野范围",
+            "EN_US": "Field of vision"
+        }
+    };
+}
+
+export { DirectionCluster };

source/Behavior/Manufacture.ts

@@ -0,0 +1,83 @@
+import { Behavior } from "@Model/Behavior";
+import { Group } from "@Model/Group";
+import { Individual } from "@Model/Individual";
+import { Model } from "@Model/Model";
+
+type IManufactureBehaviorParameter = {
+    maxFrequency: "number",
+	minFrequency: "number",
+	genTarget: "CG",
+}
+
+type IManufactureBehaviorEvent = {}
+
+class Manufacture extends Behavior<IManufactureBehaviorParameter, IManufactureBehaviorEvent> {
+
+    public override behaviorId: string = "Manufacture";
+
+    public override behaviorName: string = "$Title";
+
+    public override iconName: string = "ProductionFloorManagement";
+
+    public override describe: string = "$Intro";
+
+	public override category: string = "$Initiative";
+
+	public override parameterOption = {
+        genTarget: { type: "CG", name: "$Gen.Target" },
+		maxFrequency: { type: "number", name: "$Max.Frequency", defaultValue: 5, numberStep: .1, numberMin: 0 },
+		minFrequency: { type: "number", name: "$Min.Frequency", defaultValue: 0, numberStep: .1, numberMin: 0 }
+	};
+
+	public effect = (individual: Individual, group: Group, model: Model, t: number): void => {
+
+		const {genTarget, maxFrequency, minFrequency} = this.parameter;
+
+        if (genTarget.objects) {
+            
+            let nextTime = individual.getData("Manufacture.nextTime") ?? 
+            minFrequency + Math.random() * (maxFrequency - minFrequency);
+            let currentTime = individual.getData("Manufacture.currentTime") ?? 0;
+
+            if (currentTime > nextTime) {
+
+                // 生成个体
+                let newIndividual = genTarget.objects.new(1);
+                newIndividual.position = individual.position.concat([]);
+                
+                nextTime = minFrequency +  Math.random() * (maxFrequency - minFrequency);
+                currentTime = 0;
+            }
+            
+            currentTime += t;
+
+            individual.setData("Manufacture.nextTime", nextTime);
+		    individual.setData("Manufacture.currentTime", currentTime);
+        }
+	}
+
+	public override terms: Record<string, Record<string, string>> = {
+        "$Title": {
+            "ZH_CN": "生产",
+            "EN_US": "Manufacture"
+        },
+        "$Intro": {
+            "ZH_CN": "在指定的群创造新的个体",
+            "EN_US": "Create new individuals in a given group"
+        },
+        "$Gen.Target": {
+            "ZH_CN": "目标群",
+            "EN_US": "Target group"
+        },
+		"$Max.Frequency": {
+            "ZH_CN": "最大频率",
+            "EN_US": "Maximum frequency"
+        },
+		"$Min.Frequency": {
+            "ZH_CN": "最小频率",
+            "EN_US": "Minimum frequency"
+        }
+    };
+}
+
+export { Manufacture };

source/Behavior/PhysicsDynamics.ts

@@ -1,6 +1,6 @@
 import { Behavior } from "@Model/Behavior";
-import Group from "@Model/Group";
-import Individual from "@Model/Individual";
+import { Group } from "@Model/Group";
+import { Individual } from "@Model/Individual";
 import { Model } from "@Model/Model";
 
 type IPhysicsDynamicsBehaviorParameter = {
@@ -31,11 +31,11 @@ class PhysicsDynamics extends Behavior<IPhysicsDynamicsBehaviorParameter, IPhysi
 		limit: { name: "$Limit", type: "boolean", defaultValue: true },
 		maxAcceleration: {
 			name: "$Max.Acceleration", type: "number", defaultValue: 6.25, 
-			numberStep: .1, numberMin: 0, condition: { key: "limit", value: true }
+			numberStep: .1, numberMin: 0.0001, condition: { key: "limit", value: true }
 		},
 		maxVelocity: {
 			name: "$Max.Velocity", type: "number", defaultValue: 12.5,
-			numberStep: .1, numberMin: 0, condition: { key: "limit", value: true }
+			numberStep: .1, numberMin: 0.0001, condition: { key: "limit", value: true }
 		},
 	};
 
@@ -64,7 +64,7 @@ class PhysicsDynamics extends Behavior<IPhysicsDynamicsBehaviorParameter, IPhysi
 		// 加速度约束
 		if (this.parameter.limit) {
 			const lengthA = individual.vectorLength(individual.acceleration);
-			if (lengthA > this.parameter.maxAcceleration) {
+			if (lengthA > this.parameter.maxAcceleration && lengthA) {
 				individual.acceleration[0] = individual.acceleration[0] * this.parameter.maxAcceleration / lengthA;
 				individual.acceleration[1] = individual.acceleration[1] * this.parameter.maxAcceleration / lengthA;
 				individual.acceleration[2] = individual.acceleration[2] * this.parameter.maxAcceleration / lengthA;
@@ -79,7 +79,7 @@ class PhysicsDynamics extends Behavior<IPhysicsDynamicsBehaviorParameter, IPhysi
 		// 速度约束
 		if (this.parameter.limit) {
 			const lengthV = individual.vectorLength(individual.velocity);
-			if (lengthV > this.parameter.maxVelocity) {
+			if (lengthV > this.parameter.maxVelocity && lengthV) {
 				individual.velocity[0] = individual.velocity[0] * this.parameter.maxVelocity / lengthV;
 				individual.velocity[1] = individual.velocity[1] * this.parameter.maxVelocity / lengthV;
 				individual.velocity[2] = individual.velocity[2] * this.parameter.maxVelocity / lengthV;

source/Behavior/SampleTracking.ts

@@ -0,0 +1,160 @@
+import { Behavior } from "@Model/Behavior";
+import { Group } from "@Model/Group";
+import { Individual } from "@Model/Individual";
+import { Model } from "@Model/Model";
+
+type ISampleTrackingBehaviorParameter = {
+    target: "CLG",
+    key: "string",
+	strength: "number",
+    range: "number",
+    angle: "number",
+    accuracy: "number"
+}
+
+type ISampleTrackingBehaviorEvent = {}
+
+class SampleTracking extends Behavior<ISampleTrackingBehaviorParameter, ISampleTrackingBehaviorEvent> {
+
+    public override behaviorId: string = "SampleTracking";
+
+    public override behaviorName: string = "$Title";
+
+    public override iconName: string = "Video360Generic";
+
+    public override describe: string = "$Intro";
+
+    public override category: string = "$Initiative";
+
+	public override parameterOption = {
+		target: { type: "CLG", name: "$Target" },
+        key: { type: "string", name: "$Key"},
+        range: { type: "number", name: "$Range", defaultValue: 4, numberMin: 0, numberStep: .1 },
+        angle: { type: "number", name: "$Angle", defaultValue: 180, numberMin: 0, numberMax: 360, numberStep: 5 },
+		strength: { type: "number", name: "$Strength", defaultValue: 1, numberMin: 0, numberStep: .1 },
+        accuracy: { type: "number", name: "$Accuracy", defaultValue: 5, numberMin: 0, numberMax: 180, numberStep: 1 }
+	};
+
+    private angle2Vector(v1: number[], v2: number[]): number {
+		return Math.acos(
+			(v1[0] * v2[0] + v1[1] * v2[1] + v1[2] * v2[2]) /
+			(
+				(v1[0] ** 2 + v1[1] ** 2 + v1[2] ** 2) ** 0.5 *
+				(v2[0] ** 2 + v2[1] ** 2 + v2[2] ** 2) ** 0.5
+			)
+		) * 180 / Math.PI;
+	}
+
+    public effect = (individual: Individual, group: Group, model: Model, t: number): void => {
+
+        const dirArr: number[][] = []; const valArr: number[] = [];
+
+        for (let i = 0; i < this.parameter.target.objects.length; i++) {
+            const targetGroup = this.parameter.target.objects[i];
+
+			targetGroup.individuals.forEach((targetIndividual) => {
+
+                // 计算距离
+                let dis = targetIndividual.distanceTo(individual);
+                if (dis > this.parameter.range) return;
+
+                // 计算方向
+                let targetDir = [
+                    targetIndividual.position[0] - individual.position[0],
+                    targetIndividual.position[1] - individual.position[1],
+                    targetIndividual.position[2] - individual.position[2]
+                ];
+
+                // 计算视线角度
+                let angle = this.angle2Vector(individual.velocity, targetDir);
+
+                // 在可视角度内
+                if (angle < (this.parameter.angle ?? 360) / 2) {
+
+                    // 采样
+                    let isFindNest = false;
+                    for (let i = 0; i < valArr.length; i++) {
+
+                        // 计算采样角度
+                        let sampleAngle = this.angle2Vector(dirArr[i], targetDir);
+
+                        // 小于采样精度，合并
+                        if (sampleAngle < this.parameter.accuracy ?? 5) {
+                            dirArr[i][0] += targetDir[0];
+                            dirArr[i][1] += targetDir[1];
+                            dirArr[i][2] += targetDir[2];
+                            valArr[i] += targetIndividual.getData(this.parameter.key) ?? 0;
+                            isFindNest = true;
+                        }
+                    }
+
+                    if (!isFindNest) {
+
+                        // 保存
+                        dirArr.push(targetDir);
+                        valArr.push(targetIndividual.getData(this.parameter.key) ?? 0);
+                    }
+                }
+            });
+        }
+
+        // 计算最大方向
+        let maxVal = -1; let maxDir: number[] | undefined;
+        for (let i = 0; i < valArr.length; i++) {
+            if (valArr[i] > maxVal) {
+                maxVal = valArr[i];
+                maxDir = dirArr[i];
+            }
+        }
+
+        if (maxDir) {
+            const dir = individual.vectorNormalize(maxDir);
+            individual.applyForce(
+                dir[0] * this.parameter.strength,
+                dir[1] * this.parameter.strength,
+                dir[2] * this.parameter.strength
+            );
+        }
+    }
+
+	public override terms: Record<string, Record<string, string>> = {
+        "$Title": {
+            "ZH_CN": "采样追踪",
+            "EN_US": "Sample tracking"
+        },
+		"$Target": {
+			"ZH_CN": "追踪目标",
+			"EN_US": "Tracking target"
+		},
+        "$Key": {
+            "ZH_CN": "计算键值",
+			"EN_US": "Calculate key value"
+        },
+        "$Accuracy": {
+            "ZH_CN": "采样精度",
+			"EN_US": "Sampling accuracy"
+        },
+        "$Range": {
+            "ZH_CN": "追踪范围 (m)",
+			"EN_US": "Tracking range (m)"
+        },
+		"$Strength": {
+			"ZH_CN": "追踪强度系数",
+			"EN_US": "Tracking intensity coefficient"
+		},
+        "$Intro": {
+            "ZH_CN": "个体将主动向目标个体较多的方向发起追踪",
+            "EN_US": "Individuals will actively initiate tracking in the direction of more target individuals"
+        },
+		"$Interactive": {
+			"ZH_CN": "交互",
+            "EN_US": "Interactive"
+		},
+        "$Angle": {
+            "ZH_CN": "可视角度",
+            "EN_US": "Viewing angle"
+        }
+    };
+}
+
+export { SampleTracking };

source/Behavior/Tracking.ts

@@ -7,6 +7,7 @@ type ITrackingBehaviorParameter = {
     target: "CLG",
 	strength: "number",
     range: "number",
+    angle: "number",
     lock: "boolean"
 }
 
@@ -28,12 +29,23 @@ class Tracking extends Behavior<ITrackingBehaviorParameter, ITrackingBehaviorEve
 		target: { type: "CLG", name: "$Target" },
         lock: { type: "boolean", name: "$Lock", defaultValue: false },
         range: { type: "number", name: "$Range", defaultValue: 4, numberMin: 0, numberStep: .1 },
+        angle: { type: "number", name: "$Angle", defaultValue: 180, numberMin: 0, numberMax: 360, numberStep: 5 },
 		strength: { type: "number", name: "$Strength", defaultValue: 1, numberMin: 0, numberStep: .1 }
 	};
 
     private target: Individual | undefined = undefined;
     private currentDistant: number = Infinity;
 
+    private angle2Vector(v1: number[], v2: number[]): number {
+		return Math.acos(
+			(v1[0] * v2[0] + v1[1] * v2[1] + v1[2] * v2[2]) /
+			(
+				(v1[0] ** 2 + v1[1] ** 2 + v1[2] ** 2) ** 0.5 *
+				(v2[0] ** 2 + v2[1] ** 2 + v2[2] ** 2) ** 0.5
+			)
+		) * 180 / Math.PI;
+	}
+
     private searchTarget(individual: Individual) {
 
 		for (let i = 0; i < this.parameter.target.objects.length; i++) {
@@ -46,8 +58,21 @@ class Tracking extends Behavior<ITrackingBehaviorParameter, ITrackingBehaviorEve
 				let dis = targetIndividual.distanceTo(individual);
 
 				if (dis < this.currentDistant && dis <= this.parameter.range) {
-					this.target = targetIndividual;
-					this.currentDistant = dis;
+
+                    // 计算目标方位
+                    const targetDir = [
+                        targetIndividual.position[0] - individual.position[0],
+                        targetIndividual.position[1] - individual.position[1],
+                        targetIndividual.position[2] - individual.position[2]
+                    ];
+
+                    // 计算角度
+                    const angle = this.angle2Vector(individual.velocity, targetDir);
+
+                    if (angle < (this.parameter.angle ?? 360) / 2) {
+                        this.target = targetIndividual;
+					    this.currentDistant = dis;
+                    }
 				}
 
 			});
@@ -150,7 +175,11 @@ class Tracking extends Behavior<ITrackingBehaviorParameter, ITrackingBehaviorEve
 		"$Interactive": {
 			"ZH_CN": "交互",
             "EN_US": "Interactive"
-		}
+		},
+        "$Angle": {
+            "ZH_CN": "可视角度",
+            "EN_US": "Viewing angle"
+        }
     };
 }
 

source/Behavior/Wastage.ts

@@ -0,0 +1,100 @@
+import { Behavior } from "@Model/Behavior";
+import { Group } from "@Model/Group";
+import { Individual } from "@Model/Individual";
+import { Model } from "@Model/Model";
+
+type IWastageBehaviorParameter = {
+    key: "string",
+    value: "number",
+    speed: "number",
+    threshold: "number",
+    kill: "boolean",
+    assimilate: "CG"
+}
+
+type IWastageBehaviorEvent = {}
+
+class Wastage extends Behavior<IWastageBehaviorParameter, IWastageBehaviorEvent> {
+
+    public override behaviorId: string = "Wastage";
+
+    public override behaviorName: string = "$Title";
+
+    public override iconName: string = "BackgroundColor";
+
+    public override describe: string = "$Intro";
+
+    public override category: string = "$Initiative";
+
+    public override parameterOption = {
+        key: { type: "string", name: "$Key" },
+        value: { type: "number", name: "$Value", defaultValue: 100, numberStep: 1 },
+        speed: { type: "number", name: "$Speed", defaultValue: 1, numberStep: .1 },
+        threshold: { type: "number", name: "$Threshold", defaultValue: 0, numberStep: 1 },
+        kill: { type: "boolean", name: "$Kill", defaultValue: true },
+        assimilate: { type: "CG", name: "$Assimilate", condition: { key: "kill", value: false } }
+    };
+
+    public effect = (individual: Individual, group: Group, model: Model, t: number): void => {
+        const key = this.parameter.key;
+        if (!key) return;
+        
+        let currentValue = individual.getData(`Wastage.${key}`) ?? this.parameter.value;
+        currentValue -= this.parameter.speed * t;
+
+        // 超过阈值
+        if (currentValue < this.parameter.threshold) {
+
+            currentValue = undefined;
+
+            // 杀死个体
+            if (this.parameter.kill) {
+                individual.die();
+            }
+
+            // 开启同化
+            else if (this.parameter.assimilate.objects) {
+                individual.transfer(this.parameter.assimilate.objects);
+            }
+        }
+
+        individual.setData(`Wastage.${key}`, currentValue);
+    }
+
+    public override terms: Record<string, Record<string, string>> = {
+        "$Title": {
+            "ZH_CN": "流逝",
+            "EN_US": "Wastage"
+        },
+        "$Intro": {
+            "ZH_CN": "随着时间流逝",
+            "EN_US": "As time goes by"
+        },
+        "$Key": {
+            "ZH_CN": "元数据",
+            "EN_US": "Metadata"
+        },
+        "$Value": {
+            "ZH_CN": "默认数值",
+            "EN_US": "Default value"
+        },
+        "$Speed": {
+            "ZH_CN": "流逝速度 (c/s)",
+            "EN_US": "Passing speed (c/s)"
+        },
+        "$Threshold": {
+            "ZH_CN": "阈值",
+            "EN_US": "Threshold"
+        },
+        "$Kill": {
+            "ZH_CN": "死亡",
+            "EN_US": "Death"
+        },
+        "$Assimilate": {
+            "ZH_CN": "同化",
+            "EN_US": "Assimilate"
+        }
+    };
+}
+
+export { Wastage };

source/Component/BehaviorPopup/BehaviorPopup.tsx

@@ -117,10 +117,26 @@ class BehaviorPopupComponent extends Component<
             if (this.props.status && recorder instanceof BehaviorRecorder) {
                 let newBehavior = this.props.status.model.addBehavior(recorder);
 
-                // 初始化名字
-                newBehavior.name = recorder.getTerms(
+                // 根据用户的命名搜索下一个名字
+                let searchKey = recorder.getTerms(
                     recorder.behaviorName, this.props.setting?.language
-                ) + " " + (recorder.nameIndex - 1).toString();
+                );
+                
+                let nextIndex = 1;
+                this.props.status.model.behaviorPool.forEach((obj) => {
+                    if (obj.behaviorId === recorder.behaviorId && obj.name.indexOf(searchKey) >= 0) {
+                        let searchRes = obj.name.match(/(\d+)$/);
+                        if (searchRes) {
+                            let nameNumber = parseInt(searchRes[1]);
+                            if (!isNaN(nameNumber)) {
+                                nextIndex = Math.max(nextIndex, nameNumber + 1);
+                            }
+                        }
+                    }
+                });
+
+                // 初始化名字
+                newBehavior.name = `${searchKey} ${nextIndex}`;
 
                 // 赋予一个随机颜色
                 newBehavior.color = randomColor(true);

source/Component/ClipList/ClipList.scss

@@ -0,0 +1,148 @@
+@import "../Theme/Theme.scss";
+
+$clip-item-height: 45px;
+
+div.clip-list-root {
+	margin: -5px;
+	display: flex;
+	flex-wrap: wrap;
+
+	div.clip-item {
+		margin: 5px;
+		height: $clip-item-height;
+		user-select: none;
+		border-radius: 3px;
+        overflow: hidden;
+		cursor: pointer;
+		display: flex;
+
+		div.clip-item-hole-view {
+			height: 100%;
+			width: 10px;
+			box-sizing: border-box;
+			display: flex;
+			flex-direction: column;
+			justify-items: center;
+			justify-content: space-between;
+			padding: 5px;
+			padding-right: 0;
+
+			div.clip-item-hole {
+				width: 5px;
+				height: 5px;
+				background-color: #000000;
+				flex-shrink: 0;
+			}
+		}
+
+		div.clip-icon-view {
+			width: $clip-item-height;
+			height: $clip-item-height;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+
+			i.icon {
+				display: inline-block;
+				font-size: 25px;
+			}
+
+			i.delete {
+				display: none;
+			}
+
+			i.delete:hover {
+				color: $lt-red;
+			}
+		}
+
+		div.clip-item-content {
+			width: calc( 100% - 65px );
+			padding-right: 10px;
+			max-width: 125px;
+			height: $clip-item-height;
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+
+			div {
+				white-space: nowrap;
+				text-overflow: ellipsis;
+				overflow: hidden;
+				width: 100%;
+			}
+
+			div.info {
+				opacity: .75;
+			}
+		}
+	}
+
+	div.clip-item.disable {
+		cursor: not-allowed;
+	}
+
+	div.clip-item.able:hover {
+
+		div.clip-icon-view {
+
+			i.icon {
+				display: none;
+			}
+
+			i.delete {
+				display: inline-block;
+			}
+		}
+	}
+
+	div.add-button {
+        width: 26px;
+        height: 26px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+}
+
+div.dark.clip-list-root {
+
+	div.clip-item {
+		background-color: $lt-bg-color-lvl3-dark;
+
+		div.clip-item-hole-view div.clip-item-hole {
+			background-color: $lt-bg-color-lvl4-dark;
+		}
+	}
+
+	div.clip-item.able:hover {
+		color: $lt-font-color-lvl2-dark;
+		background-color: $lt-bg-color-lvl2-dark;
+	}
+
+	div.clip-item.focus {
+		color: $lt-font-color-lvl1-dark;
+    	background-color: $lt-bg-color-lvl1-dark;
+	}
+}
+
+div.light.clip-list-root {
+	
+	div.clip-item {
+		background-color: $lt-bg-color-lvl3-light;
+
+		div.clip-item-hole-view div.clip-item-hole {
+			background-color: $lt-bg-color-lvl4-light;
+		}
+	}
+
+	div.clip-item.able:hover {
+		color: $lt-font-color-lvl2-light;
+		background-color: $lt-bg-color-lvl2-light;
+	}
+
+	div.clip-item.focus {
+		color: $lt-font-color-lvl1-light;
+    	background-color: $lt-bg-color-lvl1-light;
+	}
+}

source/Component/ClipList/ClipList.tsx

@@ -0,0 +1,130 @@
+import { Localization } from "@Component/Localization/Localization";
+import { Theme } from "@Component/Theme/Theme";
+import { Icon } from "@fluentui/react";
+import { Clip } from "@Model/Clip";
+import { Component, ReactNode } from "react";
+import "./ClipList.scss";
+
+interface IClipListProps {
+	clips: Clip[];
+	focus?: Clip;
+	disable?: boolean;
+	add?: () => any;
+	click?: (clip: Clip) => any;
+	delete?: (clip: Clip) => any;
+}
+
+class ClipList extends Component<IClipListProps> {
+
+	private isInnerClick: boolean = false;
+
+	private resolveCallback(fn?: (p: any) => any, p?: any): any {
+		if (this.props.disable) {
+			return false;
+		}
+		if (fn) {
+			return fn(p);
+		}
+	}
+
+	private parseTime(time?: number): string {
+		if (time === undefined) {
+			return "0:0:0:0";
+		}
+		const h = Math.floor(time / 3600);
+		const m = Math.floor((time % 3600) / 60);
+		const s = Math.floor((time % 3600) % 60);
+		const ms = Math.floor((time % 1) * 1000);
+		return `${h}:${m}:${s}:${ms}`;
+	}
+
+	private getClipInfo(clip: Clip): string {
+		let fps = Math.round((clip.frames.length - 1) / clip.time);
+		if (isNaN(fps)) fps = 0;
+		return `${this.parseTime(clip.time)} ${fps}fps`;
+	}
+
+	private renderClip(clip: Clip) {
+
+		const focus = clip.equal(this.props.focus);
+		const disable = this.props.disable;
+		const classList = ["clip-item"];
+
+		if (focus) {
+			classList.push("focus");
+		}
+
+		if (disable) {
+			classList.push("disable");
+		} else {
+			classList.push("able");
+		}
+
+		return <div
+			key={clip.id}
+			className={classList.join(" ")}
+			onClick={() => {
+				if (this.isInnerClick) {
+					this.isInnerClick = false;
+				} else {
+					this.resolveCallback(this.props.click, clip);
+				}
+			}}
+		>
+			<div className="clip-item-hole-view">
+				{new Array(4).fill(0).map((_, index) => {
+					return <div className="clip-item-hole" key={index}/>
+				})}
+			</div>
+			<div className="clip-icon-view">
+				<Icon iconName="MyMoviesTV" className="icon"/>
+				<Icon
+					iconName="Delete"
+					className="delete"
+					onClick={() => {
+						this.isInnerClick = true;
+						this.resolveCallback(this.props.delete, clip);
+					}}
+				/>
+			</div>
+			<div className="clip-item-content">
+				<div className="title">{clip.name}</div>
+				<div className="info">{
+					clip.isRecording ?
+						<Localization i18nKey="Panel.Info.Behavior.Clip.Uname.Clip"/> :
+						this.getClipInfo(clip)
+				}</div>
+			</div>
+		</div>;
+	}
+
+	private renderAddButton(): ReactNode {
+
+		const classList = ["clip-item", "add-button"];
+
+		if (this.props.disable) {
+			classList.push("disable");
+		} else {
+			classList.push("able");
+		}
+
+		return <div
+			key="ADD_BUTTON"
+			className={classList.join(" ")}
+			onClick={() => this.resolveCallback(this.props.add)}
+		>
+            <Icon iconName="Add"/>
+        </div>
+	}
+
+	public render(): ReactNode {
+		return <Theme className="clip-list-root">
+			{ this.props.clips.map((clip => {
+				return this.renderClip(clip);
+			})) }
+			{ this.renderAddButton() }
+		</Theme>;
+	}
+}
+
+export { ClipList };

source/Component/CommandBar/CommandBar.scss

@@ -1,3 +1,5 @@
+@import "../Theme/Theme.scss";
+
 div.command-bar {
     height: 100%;
     user-select: none;
@@ -5,32 +7,53 @@ div.command-bar {
     flex-direction: column;
     justify-content: space-between;
     
-    button.ms-Button.command-button {
+    div.command-button {
         width: 100%;
-        text-align: center;
         display: flex;
         justify-content: center;
+        align-items: center;
         transition: all 100ms ease-in-out;
-        color:  inherit;
+        cursor: pointer;
         
-        span.ms-Button-flexContainer i.ms-Icon {
-            font-size: 25px;
+        i {
+            font-size: 22px;
+        }
+
+        div.command-button-loading {
+            
+            div.ms-Spinner-circle {
+                border-width: 2px;
+            }
         }
     }
 
-    button.ms-Button.command-button.on-end {
+    div.command-button.on-end {
         align-self: flex-end;
     }
 }
 
-div.command-bar.dark button.ms-Button.command-button.active,
-div.command-bar.dark button.ms-Button.command-button:hover {
+div.command-bar.dark div.command-button div.command-button-loading div.ms-Spinner-circle {
+    border-top-color: rgba($color: #FFFFFF, $alpha: .9);
+    border-left-color: rgba($color: #FFFFFF, $alpha: .4);
+    border-bottom-color: rgba($color: #FFFFFF, $alpha: .4);
+    border-right-color: rgba($color: #FFFFFF, $alpha: .4);
+}
+
+div.command-bar.light div.command-button div.command-button-loading div.ms-Spinner-circle {
+    border-top-color: rgba($color: #000000, $alpha: .9);
+    border-left-color: rgba($color: #000000, $alpha: .4);
+    border-bottom-color: rgba($color: #000000, $alpha: .4);
+    border-right-color: rgba($color: #000000, $alpha: .4);
+}
+
+div.command-bar.dark div.command-button.active,
+div.command-bar.dark div.command-button:hover {
     background-color: rgba($color: #FFFFFF, $alpha: .2);
     color: rgba($color: #FFFFFF, $alpha: 1);
 }
 
-div.command-bar.light button.ms-Button.command-button.active,
-div.command-bar.light button.ms-Button.command-button:hover {
+div.command-bar.light div.command-button.active,
+div.command-bar.light div.command-button:hover {
     background-color: rgba($color: #000000, $alpha: .08);
     color: rgba($color: #000000, $alpha: 1);
 }

source/Component/CommandBar/CommandBar.tsx

@@ -1,5 +1,5 @@
-import { Component, ReactNode } from "react";
-import { DirectionalHint, IconButton } from "@fluentui/react";
+import { Component, ReactNode, FunctionComponent } from "react";
+import { DirectionalHint, Icon, Spinner } from "@fluentui/react";
 import { useSetting, IMixinSettingProps } from "@Context/Setting";
 import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
 import { BackgroundLevel, Theme } from "@Component/Theme/Theme";
@@ -8,24 +8,113 @@ import { AllI18nKeys } 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 { ActuatorModel } from "@Model/Actuator";
 import "./CommandBar.scss";
 
-interface ICommandBarProps {
-    width: number;
+const COMMAND_BAR_WIDTH = 45;
+
+interface IRenderButtonParameter {
+    i18NKey: AllI18nKeys;
+    iconName?: string;
+    click?: () => void;
+    active?: boolean;
+    isLoading?: boolean;
 }
 
+interface ICommandBarState {
+    isSaveRunning: boolean;
+}
+
+const CommandButton: FunctionComponent<IRenderButtonParameter> = (param) => {
+    return <LocalizationTooltipHost 
+        i18nKey={param.i18NKey}
+        directionalHint={DirectionalHint.rightCenter}
+    >
+        <div
+            style={{ height: COMMAND_BAR_WIDTH }}
+            onClick={ param.isLoading ? undefined : param.click }
+            className={"command-button on-end" + (param.active ? " active" : "")}
+        >
+            {param.isLoading ? 
+                <Spinner className="command-button-loading"/> :
+                <Icon iconName={param.iconName}/>
+            }
+        </div>
+    </LocalizationTooltipHost>
+}
 @useSetting
 @useStatusWithEvent("mouseModChange", "actuatorStartChange")
-class CommandBar extends Component<ICommandBarProps & IMixinSettingProps & IMixinStatusProps> {
+class CommandBar extends Component<IMixinSettingProps & IMixinStatusProps, ICommandBarState> {
 
-    render(): ReactNode {
+    public state: Readonly<ICommandBarState> = {
+        isSaveRunning: false
+    };
+
+    private renderPlayActionButton(): ReactNode {
+
+        let icon: string = "Play";
+        let handel: () => any = () => {};
+
+        // 播放模式
+        if (this.props.status?.focusClip) {
+
+            // 暂停播放
+            if (this.props.status?.actuator.mod === ActuatorModel.Play) {
+                icon = "Pause";
+                handel = () => {
+                    this.props.status?.actuator.pausePlay();
+					console.log("ClipRecorder: Pause play...");
+                };
+            }
+
+            // 开始播放
+            else {
+                icon = "Play";
+                handel = () => {
+                    this.props.status?.actuator.playing();
+					console.log("ClipRecorder: Play start...");
+                };
+            }
+        }
+        
+        // 正在录制中
+        else if (
+            this.props.status?.actuator.mod === ActuatorModel.Record ||
+			this.props.status?.actuator.mod === ActuatorModel.Offline
+        ) {
+
+            // 暂停录制
+            icon = "Stop";
+            handel = () => {
+                this.props.status?.actuator.endRecord();
+                console.log("ClipRecorder: Rec end...");
+            };
+        }
+
+        // 正常控制主时钟
+        else {
+            icon = this.props.status?.actuator.start() ? "Pause" : "Play";
+            handel = () => this.props.status?.actuator.start(
+                !this.props.status?.actuator.start()
+            );
+        }
+
+        return <CommandButton
+            iconName={icon}
+            i18NKey="Command.Bar.Play.Info"
+            click={handel}
+        />;
+    }
+
+    public render(): ReactNode {
 
         const mouseMod = this.props.status?.mouseMod ?? MouseMod.Drag;
 
         return <Theme
             className="command-bar"
             backgroundLevel={BackgroundLevel.Level2}
-            style={{ width: this.props.width }}
+            style={{ width: COMMAND_BAR_WIDTH }}
             onClick={() => {
                 if (this.props.setting) {
                     this.props.setting.layout.focus("");
@@ -33,84 +122,84 @@ class CommandBar extends Component<ICommandBarProps & IMixinSettingProps & IMixi
             }}
         >
             <div>
-                {this.getRenderButton({ iconName: "Save", i18NKey: "Command.Bar.Save.Info" })}
-                {this.getRenderButton({
-                    iconName: this.props.status?.actuator.start() ? "Pause" : "Play",
-                    i18NKey: "Command.Bar.Play.Info",
-                    click: () => this.props.status ? this.props.status.actuator.start(
-                        !this.props.status.actuator.start()
-                    ) : undefined
-                })}
-                {this.getRenderButton({
-                    iconName: "HandsFree", i18NKey: "Command.Bar.Drag.Info", 
-                    active: mouseMod === MouseMod.Drag,
-                    click: () => this.props.status ? this.props.status.setMouseMod(MouseMod.Drag) : undefined
-                })}
-                {this.getRenderButton({
-                    iconName: "TouchPointer", i18NKey: "Command.Bar.Select.Info",
-                    active: mouseMod === MouseMod.click,
-                    click: () => this.props.status ? this.props.status.setMouseMod(MouseMod.click) : undefined
-                })}
-                {this.getRenderButton({
-                    iconName: "WebAppBuilderFragmentCreate",
-                    i18NKey: "Command.Bar.Add.Group.Info",
-                    click: () => {
+
+                <ArchiveSave
+                    running={this.state.isSaveRunning}
+                    afterRunning={() => {
+                        this.setState({ isSaveRunning: false });
+                    }}
+                />
+
+                <CommandButton
+                    iconName="Save"
+                    i18NKey="Command.Bar.Save.Info"
+                    isLoading={this.state.isSaveRunning}
+                    click={() => {
+                        this.setState({
+                            isSaveRunning: true
+                        });
+                    }}
+                />
+
+                {this.renderPlayActionButton()}
+
+                <CommandButton
+                    iconName="HandsFree"
+                    i18NKey="Command.Bar.Drag.Info"
+                    active={mouseMod === MouseMod.Drag}
+                    click={() => this.props.status ? this.props.status.setMouseMod(MouseMod.Drag) : undefined}
+                />
+
+                <CommandButton
+                    iconName="TouchPointer"
+                    i18NKey="Command.Bar.Select.Info"
+                    active={mouseMod === MouseMod.click}
+                    click={() => this.props.status ? this.props.status.setMouseMod(MouseMod.click) : undefined}
+                />
+
+                <CommandButton
+                    iconName="WebAppBuilderFragmentCreate"
+                    i18NKey="Command.Bar.Add.Group.Info"
+                    click={() => {
                         this.props.status ? this.props.status.newGroup() : undefined;
-                    }
-                })}
-                {this.getRenderButton({
-                    iconName: "ProductVariant",
-                    i18NKey: "Command.Bar.Add.Range.Info",
-                    click: () => {
+                    }}
+                />
+
+                <CommandButton
+                    iconName="ProductVariant"
+                    i18NKey="Command.Bar.Add.Range.Info"
+                    click={() => {
                         this.props.status ? this.props.status.newRange() : undefined;
-                    }
-                })}
-                {this.getRenderButton({
-                    iconName: "Running",
-                    i18NKey: "Command.Bar.Add.Behavior.Info",
-                    click: () => {
+                    }}
+                />
+
+                <CommandButton
+                    iconName="Running"
+                    i18NKey="Command.Bar.Add.Behavior.Info"
+                    click={() => {
                         this.props.status?.popup.showPopup(BehaviorPopup, {});
-                    }
-                })}
-                {this.getRenderButton({
-                    iconName: "Tag",
-                    i18NKey: "Command.Bar.Add.Tag.Info",
-                    click: () => {
+                    }}
+                />
+
+                <CommandButton
+                    iconName="Tag"
+                    i18NKey="Command.Bar.Add.Tag.Info"
+                    click={() => {
                         this.props.status ? this.props.status.newLabel() : undefined;
-                    }
-                })}
-                {this.getRenderButton({ iconName: "Camera", i18NKey: "Command.Bar.Camera.Info" })}
+                    }}
+                />
             </div>
             <div>
-                {this.getRenderButton({
-                    iconName: "Settings",
-                    i18NKey: "Command.Bar.Setting.Info",
-                    click: () => {
+                <CommandButton
+                    iconName="Settings"
+                    i18NKey="Command.Bar.Setting.Info"
+                    click={() => {
                         this.props.status?.popup.showPopup(SettingPopup, {});
-                    }
-                })}
+                    }}
+                />
             </div>
         </Theme>
     }
-
-    private getRenderButton(param: {
-        i18NKey: AllI18nKeys;
-        iconName?: string;
-        click?: () => void;
-        active?: boolean;
-    }): ReactNode {
-        return <LocalizationTooltipHost 
-            i18nKey={param.i18NKey}
-            directionalHint={DirectionalHint.rightCenter}
-        >
-            <IconButton
-                style={{ height: this.props.width }}
-                iconProps={{ iconName: param.iconName }}
-                onClick={ param.click }
-                className={"command-button on-end" + (param.active ? " active" : "")}
-            />
-        </LocalizationTooltipHost>
-    }
 }
 
 export { CommandBar };

source/Component/ConfirmPopup/ConfirmPopup.tsx

@@ -9,6 +9,7 @@ interface IConfirmPopupProps {
 	titleI18N?: AllI18nKeys;
 	titleI18NOption?: Record<string, string>;
 	infoI18n?: AllI18nKeys;
+	infoI18nOption?: Record<string, string>;
 	yesI18n?: AllI18nKeys;
 	noI18n?: AllI18nKeys;
     renderInfo?: () => ReactNode;
@@ -64,8 +65,10 @@ class ConfirmPopup extends Popup<IConfirmPopupProps> {
                 this.props.renderInfo ?
                     this.props.renderInfo() :
                         this.props.infoI18n ?
-                            <Message i18nKey={this.props.infoI18n}/> :
-                            null
+                            <Message
+								i18nKey={this.props.infoI18n}
+								options={this.props.infoI18nOption}
+							/> : null
             }
 		</ConfirmContent>
 	}

source/Component/HeaderBar/HeaderBar.scss

@@ -1,11 +1,19 @@
-div.header-bar {
-    padding: 0 3px;
+@import "../Theme/Theme.scss";
+
+div.header-bar {   
     box-sizing: border-box;
     display: flex;
     align-items: center;
     justify-content: space-between;
     user-select: none;
 
+    // 在 Electron 中用于拖拽窗口
+    -webkit-app-region: drag;
+
+    div.title {
+        padding-left: 3px;
+    }
+
     div.title > i, div.fps-view > i {
         font-size: 25px;
         vertical-align: middle;
@@ -24,4 +32,63 @@ div.header-bar {
             white-space: nowrap;
         }
     }
+
+    div.header-windows-action {
+        height: 100%;
+        width: 145px;
+        min-width: 145px;
+        display: flex;
+
+        // 在 Electron 中用于拖拽窗口
+        -webkit-app-region: no-drag;
+
+        div.action-button {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: .8em;
+        }
+
+        div.action-button:hover {
+            cursor: pointer;
+        }
+
+        div.action-button.close-button:hover {
+            color: #FFFFFF !important;
+            background-color: $lt-red !important;
+        }
+    }
+
+    div.header-windows-action.light {
+
+        div.action-button:hover {
+            background-color: rgba($color: #000000, $alpha: .1);
+        }
+    }
+
+    div.header-windows-action.dark {
+
+        div.action-button:hover {
+            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

@@ -1,9 +1,10 @@
 import { Component, ReactNode } from "react";
 import { Icon } from '@fluentui/react/lib/Icon';
-import { useStatus, IMixinStatusProps } from "@Context/Status";
-import { useSetting, IMixinSettingProps } from "@Context/Setting";
+import { useStatusWithEvent, useStatus, IMixinStatusProps } from "@Context/Status";
+import { useSettingWithEvent, IMixinSettingProps, Platform } from "@Context/Setting";
 import { Theme, BackgroundLevel, FontLevel } from "@Component/Theme/Theme";
 import { LocalizationTooltipHost } from "@Component/Localization/LocalizationTooltipHost";
+import { useElectronWithEvent, IMixinElectronProps } from "@Context/Electron";
 import { I18N } from "@Component/Localization/Localization";
 import "./HeaderBar.scss";
 
@@ -11,38 +12,48 @@ interface IHeaderBarProps {
     height: number;
 }
 
-interface HeaderBarState {
+interface IHeaderFpsViewState {
     renderFps: number;
     physicsFps: number;
 }
 
-/**
- * 头部信息栏
- */
-@useSetting
 @useStatus
-class HeaderBar extends Component<
-    IHeaderBarProps & IMixinStatusProps & IMixinSettingProps,
-    HeaderBarState
-> {
+class HeaderFpsView extends Component<IMixinStatusProps & IMixinSettingProps, IHeaderFpsViewState> {
 
     public state = {
         renderFps: 0,
         physicsFps: 0,
     }
 
-    private changeListener = () => {
-        this.forceUpdate();
+    private updateTime: number = 0;
+
+    private renderFpsCalc: (t: number) => void = () => {};
+    private physicsFpsCalc: (t: number) => void = () => {};
+
+    public componentDidMount() {
+        const { status } = this.props;
+        this.renderFpsCalc = this.createFpsCalc("renderFps");
+        this.physicsFpsCalc = this.createFpsCalc("physicsFps");
+        if (status) {
+            status.on("physicsLoop", this.physicsFpsCalc);
+            status.on("renderLoop", this.renderFpsCalc);
+        }
     }
 
-    private updateTime: number = 0;
+    public componentWillUnmount() {
+        const { status } = this.props;
+        if (status) {
+            status.off("physicsLoop", this.physicsFpsCalc);
+            status.off("renderLoop", this.renderFpsCalc);
+        }
+    }
 
     private createFpsCalc(type: "renderFps" | "physicsFps") {
         return (t: number) => {
             if (t === 0) {
                 return;
             }
-            let newState: HeaderBarState = {} as any;
+            let newState: IHeaderFpsViewState = {} as any;
             newState[type] = 1 / t;
             if (this.updateTime > 20) {
                 this.updateTime = 0;
@@ -52,53 +63,113 @@ class HeaderBar extends Component<
         }
     }
 
-    private renderFpsCalc: (t: number) => void = () => {};
-    private physicsFpsCalc: (t: number) => void = () => {};
-
-    public componentDidMount() {
-        const { setting, status } = this.props;
-        this.renderFpsCalc = this.createFpsCalc("renderFps");
-        this.physicsFpsCalc = this.createFpsCalc("physicsFps");
-        if (setting) {
-            setting.on("language", this.changeListener);
-        }
-        if (status) {
-            status.archive.on("save", this.changeListener);
-            status.on("physicsLoop", this.physicsFpsCalc);
-            status.on("renderLoop", this.renderFpsCalc);
-        }
-    }
-
-    public componentWillUnmount() {
-        const { setting, status } = this.props;
-        if (setting) {
-            setting.off("language", this.changeListener);
-        }
-        if (status) {
-            status.archive.off("save", this.changeListener);
-            status.off("physicsLoop", this.physicsFpsCalc);
-            status.off("renderLoop", this.renderFpsCalc);
-        }
-    }
-
-    public render(): ReactNode {
-        const { status } = this.props;
-        let fileName: string = "";
-        let isNewFile: boolean = true;
-        let isSaved: boolean = false;
-        if (status) {
-            isNewFile = status.archive.isNewFile;
-            fileName = status.archive.fileName ?? "";
-            isSaved = status.archive.isSaved;
-        }
+    public render() {
 
         const fpsInfo = {
             renderFps: Math.floor(this.state.renderFps).toString(),
             physicsFps: Math.floor(this.state.physicsFps).toString()
         };
 
+        return <LocalizationTooltipHost i18nKey="Header.Bar.Fps.Info" options={fpsInfo}>
+                <div className="fps-view">
+                    <Icon iconName="SpeedHigh"></Icon>
+                    <span>{I18N(this.props, "Header.Bar.Fps", fpsInfo)}</span>
+                </div>
+        </LocalizationTooltipHost>
+    }
+}
+
+@useElectronWithEvent("windowsSizeStateChange")
+class HeaderWindowsAction extends Component<IMixinElectronProps> {
+
+    public render() {
+
+        const isMaxSize = this.props.electron?.isMaximized();
+
+        return <Theme className="header-windows-action">
+            <div
+                className="action-button"
+                onClick={() => {
+                    this.props.electron?.minimize();
+                }}
+            >
+                <Icon iconName="Remove"/>
+            </div>
+            <div
+                className="action-button"
+                onClick={() => {
+                    if (isMaxSize) {
+                        this.props.electron?.unMaximize();
+                    } else {
+                        this.props.electron?.maximize();
+                    }
+                }}
+            >
+                <Icon iconName={ isMaxSize ? "ArrangeSendBackward" : "Checkbox"}/>
+            </div>
+            <div
+                className="action-button close-button"
+                onClick={() => {
+                    this.props.electron?.close()
+                }}
+            >
+                <Icon iconName="Clear"/>
+            </div>
+        </Theme>
+    }
+}
+
+/**
+ * 头部信息栏
+ */
+@useSettingWithEvent("language")
+@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;
+
+        let fileName: string = "";
+        let isNewFile: boolean = true;
+        let isSaved: boolean = false;
+
+        if (status) {
+            isNewFile = status.archive.isNewFile;
+            fileName = status.archive.fileName ?? "";
+            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 }}
@@ -127,15 +198,15 @@ class HeaderBar extends Component<
                     isSaved ? "" : "*"
                 }</div>
             </LocalizationTooltipHost>
-            <LocalizationTooltipHost i18nKey="Header.Bar.Fps.Info" options={fpsInfo}>
-                <div className="fps-view">
-                    <Icon iconName="SpeedHigh"></Icon>
-                    <span>{I18N(this.props, "Header.Bar.Fps", fpsInfo)}</span>
-                </div>
-            </LocalizationTooltipHost>
+
+            {
+                setting?.platform === Platform.desktop ?
+                    <HeaderWindowsAction/> :
+                    <HeaderFpsView setting={setting}/>
+            }
+            
         </Theme>
     }
 }
 
-export default HeaderBar;
 export { HeaderBar };

source/Component/LoadFile/LoadFile.scss

@@ -0,0 +1,60 @@
+@import "../Theme/Theme.scss";
+
+div.load-file-app-root {
+	width: 100%;
+	height: 100%;
+}
+
+div.load-file-layer-root {
+	position: fixed;
+	z-index: 1000;
+	width: 100%;
+	height: 100%;
+	pointer-events: none;
+	box-sizing: border-box;
+	padding: 20px;
+
+	div.load-file-layer {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		align-content: center;
+		justify-content: center;
+		align-items: center;
+		flex-wrap: wrap;
+		border-radius: 3px;
+
+		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: .6);
+
+	div.load-file-layer {
+		border: 2px dashed $lt-font-color-normal-light;
+	}
+}
+
+div.load-file-layer-root.dark {
+	background-color: rgba($color: #000000, $alpha: .6);
+
+	div.load-file-layer {
+		border: 2px dashed $lt-font-color-normal-dark;
+	}
+}

source/Component/LoadFile/LoadFile.tsx

@@ -0,0 +1,142 @@
+import { ConfirmPopup } from "@Component/ConfirmPopup/ConfirmPopup";
+import { Localization } from "@Component/Localization/Localization";
+import { FontLevel, Theme } from "@Component/Theme/Theme";
+import { Status, useStatus, IMixinStatusProps } from "@Context/Status";
+import { Icon } from "@fluentui/react";
+import { FunctionComponent } from "react";
+import { useDrop } from 'react-dnd'
+import { NativeTypes } from "react-dnd-html5-backend"
+import "./LoadFile.scss";
+
+const DragFileMask: FunctionComponent = () => {
+
+	return <Theme
+		className="load-file-layer-root"
+		fontLevel={FontLevel.normal}
+	>
+		<div className="load-file-layer">
+			<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>
+		</div>
+	</Theme>; 
+}
+
+async function fileChecker(status: Status, file?: File) {
+
+	if (!status) return undefined;
+
+	return new Promise((r, j) => {
+		
+		// 检查文件存在性
+		if (!file) {
+			status.popup.showPopup(ConfirmPopup, {
+				infoI18n: "Popup.Load.Save.Error.Empty",
+				titleI18N: "Popup.Load.Save.Title",
+				yesI18n: "Popup.Load.Save.confirm"
+			});
+			return j();
+		}
+
+		// 检测拓展名
+		let extendName = (file.name.match(/\.(\w+)$/) ?? [])[1];
+		if (extendName !== "ltss") {
+			status.popup.showPopup(ConfirmPopup, {
+				infoI18n: "Popup.Load.Save.Error.Type",
+				infoI18nOption: { ext: extendName },
+				titleI18N: "Popup.Load.Save.Title",
+				yesI18n: "Popup.Load.Save.confirm"
+			});
+			return j();
+		}
+
+		// 文件读取
+		let fileReader = new FileReader();
+		fileReader.readAsText(file);
+		fileReader.onload = () => {
+
+			const loadFunc = () => {
+
+				// 进行转换
+				let errorMessage = status.archive.load(status.model, fileReader.result as string, file.name, file.path);
+				if (errorMessage) {
+					status.popup.showPopup(ConfirmPopup, {
+						infoI18n: "Popup.Load.Save.Error.Parse",
+						infoI18nOption: { why: errorMessage },
+						titleI18N: "Popup.Load.Save.Title",
+						yesI18n: "Popup.Load.Save.confirm"
+					});
+					j();
+				} 
+
+				else {
+					r(undefined);
+				}
+			}
+
+			// 如果保存进行提示
+			if (!status.archive.isSaved) {
+				status.popup.showPopup(ConfirmPopup, {
+					infoI18n: "Popup.Load.Save.Overwrite.Info",
+					titleI18N: "Popup.Load.Save.Title",
+					yesI18n: "Popup.Load.Save.Overwrite",
+					noI18n: "Popup.Action.No",
+					red: "yes",
+					yes: () => {
+						loadFunc();
+					},
+					no: () => {
+						j();
+					}
+				});
+			}
+
+			else {
+				loadFunc();
+			}			
+		}
+		fileReader.onerror = () => {
+			status.popup.showPopup(ConfirmPopup, {
+				infoI18n: "Popup.Load.Save.Error.Parse",
+				infoI18nOption: { why: "Unknown error" },
+				titleI18N: "Popup.Load.Save.Title",
+				yesI18n: "Popup.Load.Save.confirm"
+			});
+			j();
+		}
+	});
+}
+
+const LoadFileView: FunctionComponent<IMixinStatusProps> = (props) => {
+
+	const [{ isOver }, drop] = useDrop(() => ({
+		accept: NativeTypes.FILE,
+		drop: (item: { files: File[] }) => {
+			if (props.status) {
+				fileChecker(props.status, item.files[0]).catch((e) => undefined);
+			}
+		},
+		collect: (monitor) => ({
+			isOver: monitor.isOver()
+		})
+	}));
+
+	return <>
+		{
+			isOver ? <DragFileMask/> : null
+		}
+		<div className="load-file-app-root" ref={drop}>
+			{props.children}
+		</div>
+	</>
+}
+
+const LoadFile = useStatus(LoadFileView);
+
+export { LoadFile };

source/Component/OfflineRender/OfflineRender.scss

@@ -0,0 +1,8 @@
+@import "../Theme/Theme.scss";
+
+div.offline-render-popup {
+	width: 100%;
+	height: 100%;
+	box-sizing: border-box;
+	padding: 10px;
+}

source/Component/OfflineRender/OfflineRender.tsx

@@ -0,0 +1,124 @@
+import { Component, ReactNode } from "react";
+import { Popup } from "@Context/Popups";
+import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
+import { Localization } from "@Component/Localization/Localization";
+import { AttrInput } from "@Input/AttrInput/AttrInput";
+import { Message } from "@Input/Message/Message";
+import { ConfirmContent } from "@Component/ConfirmPopup/ConfirmPopup";
+import { ProcessPopup } from "@Component/ProcessPopup/ProcessPopup";
+import { Emitter } from "@Model/Emitter";
+import "./OfflineRender.scss";
+
+interface IOfflineRenderProps {
+	close?: () => any;
+}
+
+interface IOfflineRenderState {
+	time: number;
+	fps: number;
+	name: string;
+}
+
+class OfflineRender extends Popup<IOfflineRenderProps> {
+
+	public minWidth: number = 250;
+	public minHeight: number = 150;
+	public width: number = 400;
+	public height: number = 300;
+
+	public maskForSelf: boolean = true;
+
+	public onRenderHeader(): ReactNode {
+		return <Localization i18nKey="Popup.Offline.Render.Title"/>
+	}
+
+	public render(): ReactNode {
+		return <OfflineRenderComponent {...this.props} close={() => {
+			this.close();
+		}}/>
+	}
+}
+
+@useStatusWithEvent()
+class OfflineRenderComponent extends Component<IOfflineRenderProps & IMixinStatusProps, IOfflineRenderState> {
+
+	public constructor(props: IOfflineRenderProps & IMixinStatusProps) {
+		super(props);
+		this.state = {
+			name: this.props.status?.getNewClipName() ?? "",
+			time: 10,
+			fps: 60
+		}
+	}
+
+	public render(): ReactNode {
+		return <ConfirmContent
+			className="offline-render-popup"
+			actions={[{
+				i18nKey: "Popup.Offline.Render.Input.Start",
+				onClick: () => {
+
+					// 获取新实例
+					let newClip = this.props.status?.newClip();
+
+					if (newClip) {
+						newClip.name = this.state.name;
+						this.props.status?.actuator.offlineRender(newClip, this.state.time, this.state.fps);
+
+						// 开启进度条弹窗
+						this.props.status?.popup.showPopup(ProcessPopup, {});
+					}
+
+					// 关闭这个弹窗
+					this.props.close && this.props.close();
+				}
+			}]}
+		>
+
+			<Message i18nKey="Popup.Offline.Render.Message" isTitle first/>
+
+			<AttrInput
+                id={"Render-Name"}
+				value={this.state.name}
+				keyI18n="Popup.Offline.Render.Input.Name"
+				maxLength={15}
+                valueChange={(val) => {
+                    this.setState({
+						name: val
+					});
+                }}
+            />
+
+			<AttrInput
+				isNumber
+                id={"Render-Time"}
+				value={this.state.time}
+				keyI18n="Popup.Offline.Render.Input.Time"
+				max={3600}
+				min={1}
+                valueChange={(val) => {
+                    this.setState({
+						time: parseFloat(val)
+					});
+                }}
+            />
+
+			<AttrInput
+				isNumber
+                id={"Render-FPS"}
+				max={1000}
+				min={1}
+				value={this.state.fps}
+				keyI18n="Popup.Offline.Render.Input.Fps"
+                valueChange={(val) => {
+                    this.setState({
+						fps: parseFloat(val)
+					});
+                }}
+            />
+
+		</ConfirmContent>
+	}
+}
+
+export { OfflineRender };

source/Component/ProcessPopup/ProcessPopup.scss

@@ -0,0 +1,42 @@
+@import "../Theme/Theme.scss";
+
+div.process-popup {
+	width: 100%;
+	height: 100%;
+	box-sizing: border-box;
+	padding: 10px;
+
+	div.ms-ProgressIndicator {
+		transform: none;
+
+		div.ms-ProgressIndicator-progressTrack {
+			transform: none;
+		}
+	
+		div.ms-ProgressIndicator-progressBar {
+			transform: none;
+		}
+	}
+}
+
+div.confirm-root.dark div.ms-ProgressIndicator {
+
+	div.ms-ProgressIndicator-progressTrack {
+		background-color: $lt-bg-color-lvl3-dark;
+	}
+
+	div.ms-ProgressIndicator-progressBar {
+		background-color: $lt-font-color-normal-dark;
+	}
+}
+
+div.confirm-root.light div.ms-ProgressIndicator {
+
+	div.ms-ProgressIndicator-progressTrack {
+		background-color: $lt-bg-color-lvl3-light;
+	}
+
+	div.ms-ProgressIndicator-progressBar {
+		background-color: $lt-font-color-normal-light;
+	}
+}

source/Component/ProcessPopup/ProcessPopup.tsx

@@ -0,0 +1,89 @@
+import { Component, ReactNode } from "react";
+import { Popup } from "@Context/Popups";
+import { Localization } from "@Component/Localization/Localization";
+import { ConfirmContent } from "@Component/ConfirmPopup/ConfirmPopup";
+import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
+import { ProgressIndicator } from "@fluentui/react";
+import { ActuatorModel } from "@Model/Actuator";
+import "./ProcessPopup.scss";
+
+interface IProcessPopupProps {
+	close?: () => void;
+}
+
+class ProcessPopup extends Popup<IProcessPopupProps> {
+
+	public minWidth: number = 400;
+	public minHeight: number = 150;
+	public width: number = 400;
+	public height: number = 150;
+
+	public maskForSelf: boolean = true;
+
+	public onClose(): void {}
+
+	public onRenderHeader(): ReactNode {
+		return <Localization i18nKey="Popup.Offline.Render.Process.Title"/>
+	}
+
+	public render(): ReactNode {
+		return <ProcessPopupComponent {...this.props} close={() => this.close()}/>
+	}
+}
+
+@useStatusWithEvent("offlineLoop", "actuatorStartChange", "recordLoop")
+class ProcessPopupComponent extends Component<IProcessPopupProps & IMixinStatusProps> {
+
+	public render(): ReactNode {
+
+		let current = this.props.status?.actuator.offlineCurrentFrame ?? 0;
+		let all = this.props.status?.actuator.offlineAllFrame ?? 0;
+
+		const isRendering = this.props.status?.actuator.mod === ActuatorModel.Offline;
+		let i18nKey = "";
+		let color: undefined | "red";
+		let onClick = () => {};
+
+		if (isRendering) {
+			i18nKey = "Popup.Offline.Render.Input.End";
+			color = "red";
+			onClick = () => {
+				this.props.status?.actuator.endOfflineRender();
+				this.forceUpdate();
+			}
+		}
+
+		else {
+			i18nKey = "Popup.Offline.Render.Input.Finished";
+			onClick = () => {
+				this.props.close && this.props.close();
+			}
+		}
+
+		return <ConfirmContent
+			className="process-popup"
+			actions={[{
+				i18nKey: i18nKey,
+				color: color,
+				onClick: onClick
+			}]}
+		>
+
+			<ProgressIndicator
+				percentComplete={current / all}
+				barHeight={3}
+			/>
+
+			<Localization
+				i18nKey="Popup.Offline.Render.Process"
+				options={{
+					current: current.toString(),
+					all: all.toString()
+				}}
+			/>
+
+		</ConfirmContent>
+	}
+}
+
+export { ProcessPopup };

source/Component/Recorder/Recorder.scss

@@ -0,0 +1,160 @@
+@import "../Theme/Theme.scss";
+
+div.recorder-root {
+	width: 100%;
+	box-sizing: border-box;
+	padding: 10px 10px 0 10px;
+
+	div.recorder-slider {
+		width: 100%;
+		transition: none;
+
+		div.ms-Slider-slideBox {
+			height: 16px;
+			transition: none;
+		}
+
+		span.ms-Slider-thumb {
+			width: 12px;
+			height: 12px;
+			line-height: 16px;
+			border-width: 3px;
+			transition: none;
+			top: -4px;
+		}
+
+		span.ms-Slider-active {
+			height: 3px;
+			transition: none;
+		}
+		
+		span.ms-Slider-inactive {
+			height: 3px;
+			transition: none;
+		}
+	}
+
+	div.recorder-slider.disable {
+		opacity: .6;
+	}
+
+	div.recorder-content {
+		width: 100%;
+		height: 32px;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		box-sizing: border-box;
+		padding: 0 8px;
+
+		div.time-view {
+			flex-shrink: 1;
+			width: 50%;
+			text-align: left;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+
+		div.ctrl-button {
+			cursor: pointer;
+			user-select: none;
+			width: 96px;
+			flex-shrink: 0;
+			text-align: center;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+
+			div.ctrl-action {
+				width: 32px;
+				height: 32px;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+			}
+
+			div.ctrl-action-main {
+				font-size: 1.5em;
+			}
+
+			div.ctrl-action.disable {
+				cursor: not-allowed;
+				opacity: .6;
+			}
+		}
+
+		div.speed-view {
+			flex-shrink: 1;
+			width: 50%;
+			text-align: right;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+	}
+}
+
+div.recorder-root.light {
+
+	div.recorder-slider {
+
+		span.ms-Slider-thumb {
+			background-color: $lt-bg-color-lvl1-light;
+			border-color: $lt-font-color-normal-light;
+		}
+
+		span.ms-Slider-active {
+			background-color: $lt-font-color-normal-light;
+		}
+		
+		span.ms-Slider-inactive {
+			background-color: $lt-bg-color-lvl1-light;
+		}
+	}
+
+	div.recorder-content {
+
+		div.ctrl-button div.ctrl-action:hover {
+			background-color: $lt-bg-color-lvl3-light;
+			color: $lt-font-color-lvl1-light;
+		}
+
+		div.ctrl-button div.ctrl-action.disable:hover {
+			background-color: $lt-bg-color-lvl4-light;
+			color: $lt-font-color-normal-light;
+		}
+	}
+}
+
+div.recorder-root.dark {
+	
+	div.recorder-slider {
+
+		span.ms-Slider-thumb {
+			background-color: $lt-bg-color-lvl1-dark;
+			border-color: $lt-font-color-normal-dark;
+		}
+
+		span.ms-Slider-active {
+			background-color: $lt-font-color-normal-dark;
+		}
+		
+		span.ms-Slider-inactive {
+			background-color: $lt-bg-color-lvl1-dark;
+		}
+	}
+
+	div.recorder-content {
+
+		div.ctrl-button div.ctrl-action:hover {
+			background-color: $lt-bg-color-lvl3-dark;
+			color: $lt-font-color-lvl1-dark;
+		}
+
+		div.ctrl-button div.ctrl-action.disable:hover {
+			background-color: $lt-bg-color-lvl4-dark;
+			color: $lt-font-color-normal-dark;
+		}
+	}
+}

source/Component/Recorder/Recorder.tsx

@@ -0,0 +1,136 @@
+import { Localization } from "@Component/Localization/Localization";
+import { BackgroundLevel, FontLevel, Theme } from "@Component/Theme/Theme";
+import { Icon, Slider } from "@fluentui/react";
+import { Component, ReactNode } from "react";
+import "./Recorder.scss";
+
+interface IRecorderProps {
+	mode: "P" | "R",
+	running?: boolean,
+	name?: string;
+	fps?: number;
+	allFrame?: number;
+	currentFrame?: number;
+	allTime?: number;
+	currentTime?: number;
+	action?: () => void;
+	valueChange?: (value: number) => any;
+}
+
+class Recorder extends Component<IRecorderProps> {
+
+	private parseTime(time?: number): string {
+		if (time === undefined) {
+			return "0:0:0:0";
+		}
+		const h = Math.floor(time / 3600);
+		const m = Math.floor((time % 3600) / 60);
+		const s = Math.floor((time % 3600) % 60);
+		const ms = Math.floor((time % 1) * 1000);
+		return `${h}:${m}:${s}:${ms}`;
+	}
+
+	private getRecordInfo(): ReactNode {
+		if (this.props.mode === "P") {
+			return <Localization
+				i18nKey="Panel.Info.Behavior.Clip.Time.Formate"
+				options={{
+					current: this.parseTime(this.props.currentTime),
+					all: this.parseTime(this.props.allTime),
+					fps: this.props.fps ? this.props.fps.toString() : "0"
+				}}
+			/>;
+		}
+		else if (this.props.mode === "R") {
+			return <Localization
+				i18nKey="Panel.Info.Behavior.Clip.Record.Formate"
+				options={{
+					time: this.parseTime(this.props.currentTime),
+				}}
+			/>;
+		}
+	}
+
+	private getActionIcon(): string {
+		if (this.props.mode === "P") {
+			if (this.props.running) {
+				return "Pause";
+			} else {
+				return "Play";
+			}
+		}
+		else if (this.props.mode === "R") {
+			if (this.props.running) {
+				return "Stop";
+			} else {
+				return "StatusCircleRing";
+			}
+		}
+		return "Play";
+	}
+
+	public render(): ReactNode {
+
+		const isSliderDisable = this.props.mode === "R";
+		const isJumpDisable = this.props.mode === "R";
+
+		return <Theme
+			className="recorder-root"
+			backgroundLevel={BackgroundLevel.Level4}
+			fontLevel={FontLevel.normal}
+		>
+			<Slider
+				min={0}
+				disabled={isSliderDisable}
+				value={this.props.currentFrame}
+				max={this.props.allFrame}
+				className={"recorder-slider" + (isSliderDisable ? " disable" : "")}
+				showValue={false}
+				onChange={(value) => {
+					if (this.props.valueChange && !isSliderDisable) {
+						this.props.valueChange(value);
+					}
+				}}
+			/>
+			<div className="recorder-content">
+				<div className="time-view">
+					{this.getRecordInfo()}
+				</div>
+				<div className="ctrl-button">
+					<div
+						className={"ctrl-action" + (isJumpDisable ? " disable" : "")}
+						onClick={() => {
+							if (this.props.valueChange && !isJumpDisable && this.props.currentFrame !== undefined) {
+								this.props.valueChange(this.props.currentFrame - 1);
+							}
+						}}
+					>
+						<Icon iconName="Back"/>
+					</div>
+					<div className="ctrl-action ctrl-action-main" onClick={this.props.action}>
+						<Icon iconName={this.getActionIcon()}/>
+					</div>
+					<div
+						className={"ctrl-action" + (isJumpDisable ? " disable" : "")}
+						onClick={() => {
+							if (this.props.valueChange && !isJumpDisable && this.props.currentFrame !== undefined) {
+								this.props.valueChange(this.props.currentFrame + 1);
+							}
+						}}
+					>
+						<Icon iconName="Forward"/>
+					</div>
+				</div>
+				<div className="speed-view">
+					{
+						this.props.name ?
+							<span>{this.props.name}</span> :
+							<Localization i18nKey="Panel.Info.Behavior.Clip.Uname.Clip"/>
+					}
+				</div>
+			</div>
+		</Theme>;
+	}
+}
+
+export { Recorder };

source/Component/SettingPopup/SettingPopup.scss

@@ -3,4 +3,6 @@
 div.setting-popup {
 	width: 100%;
 	height: 100%;
+	box-sizing: border-box;
+	padding: 10px;
 }

source/Component/SettingPopup/SettingPopup.tsx

@@ -2,8 +2,11 @@ import { Component, ReactNode } from "react";
 import { Popup } from "@Context/Popups";
 import { Theme } from "@Component/Theme/Theme";
 import { Localization } from "@Component/Localization/Localization";
+import { useSettingWithEvent, IMixinSettingProps, Themes } from "@Context/Setting";
+import { ComboInput } from "@Input/ComboInput/ComboInput";
 import "./SettingPopup.scss";
 
+
 interface ISettingPopupProps {
 
 }
@@ -24,10 +27,42 @@ class SettingPopup extends Popup<ISettingPopupProps> {
 	}
 }
 
-class SettingPopupComponent extends Component<ISettingPopupProps> {
+@useSettingWithEvent("themes", "language")
+class SettingPopupComponent extends Component<ISettingPopupProps & IMixinSettingProps> {
 
 	public render(): ReactNode {
-		return <Theme className="setting-popup"></Theme>
+		return <Theme className="setting-popup">
+
+			<ComboInput
+				keyI18n="Language"
+				allOption={[
+					{ key: "EN_US", i18n: "EN_US" },
+					{ key: "ZH_CN", i18n: "ZH_CN" }
+				]}
+				value={{
+					key: this.props.setting?.language ?? "EN_US",
+					i18n: this.props.setting?.language ?? "EN_US"
+				}}
+				valueChange={(data) => {
+					this.props.setting?.setProps("language", data.key as any);
+				}}
+			/>
+
+			<ComboInput
+				keyI18n="Themes"
+				allOption={[
+					{ key: Themes.dark as any, i18n: "Themes.Dark" },
+					{ key: Themes.light as any, i18n: "Themes.Light" }
+				]}
+				value={{
+					key: this.props.setting?.themes ?? Themes.dark as any,
+					i18n: this.props.setting?.themes === Themes.dark ? "Themes.Dark" : "Themes.Light"
+				}}
+				valueChange={(data) => {
+					this.props.setting?.setProps("themes", parseInt(data.key));
+				}}
+			/>
+		</Theme>
 	}
 }
 

source/Context/Archive.tsx

@@ -0,0 +1,133 @@
+import { FunctionComponent, useEffect } from "react";
+import { useSetting, IMixinSettingProps, Platform } from "@Context/Setting";
+import { useStatus, IMixinStatusProps } from "@Context/Status";
+import { useElectron, IMixinElectronProps } from "@Context/Electron";
+import { I18N } from "@Component/Localization/Localization";
+import * as download from "downloadjs";
+
+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 ArchiveSaveDownloadView(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 ArchiveSaveFsView: FunctionComponent<IFileInfo & ICallBackProps & IMixinElectronProps & IMixinSettingProps & IMixinStatusProps> =
+function ArchiveSaveFsView(props) {
+
+	const runner = async () => {
+		const file = await props.fileData();
+		setTimeout(() => {
+			if (props.electron) {
+				props.electron.fileSave(
+					file,
+					I18N(props, "Popup.Load.Save.Select.File.Name"),
+					I18N(props, "Popup.Load.Save.Select.Path.Title"),
+					I18N(props, "Popup.Load.Save.Select.Path.Button"),
+					props.fileUrl
+				);
+			}
+		}, 100);
+	}
+
+	const saveEvent = ({name, url, success} : {name: string, url: string, success: boolean}) => {
+		if (success && props.status) {
+			props.status.archive.fileUrl = url;
+			props.status.archive.fileName = name;
+			props.status.archive.isNewFile = false;
+			props.status.archive.emit("fileSave", props.status.archive);
+		}
+		props.then();
+	}
+
+	useEffect(() => {
+		runner();
+		props.electron?.on("fileSave", saveEvent);
+		return () => {
+			props.electron?.off("fileSave", saveEvent);
+		};
+	}, []);
+
+	return <></>;
+}
+
+const ArchiveSaveFs = useSetting(useElectron(useStatus(ArchiveSaveFsView)));
+
+/**
+ * 保存存档文件
+ */
+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}/> :
+				<ArchiveSaveFs {...fileData} then={callBack}/>
+		}
+	</>
+}
+
+const ArchiveSave = useSetting(useStatus(ArchiveSaveView));
+
+export { ArchiveSave };

source/Context/Context.tsx

@@ -58,7 +58,7 @@ function superConnectWithEvent<C extends Emitter<E>, E extends Record<EventType,
 	}
 }
 
-function superConnect<C extends Emitter<any>>(consumer: Consumer<C>, keyName: string) {
+function superConnect<C>(consumer: Consumer<C>, keyName: string) {
 	return <R extends RenderComponent>(components: R): R => {
 		return ((props: any) => {
 

source/Context/Electron.ts

@@ -0,0 +1,42 @@
+import { createContext } from "react";
+import { Emitter } from "@Model/Emitter";
+import { superConnect, superConnectWithEvent } from "@Context/Context";
+import { ISimulatorAPI, IApiEmitterEvent } from "@Electron/SimulatorAPI";
+
+interface IMixinElectronProps {
+    electron?: ISimulatorAPI;
+}
+
+const getElectronAPI: () => ISimulatorAPI = () => {
+    const API = (window as any).API;
+    const mapperEmitter = new Emitter();
+    const ClassElectron: new () => ISimulatorAPI = function (this: Record<string, any>) {
+        this.resetAll = () => mapperEmitter.resetAll();
+        this.reset = (type: string) => mapperEmitter.reset(type);
+        this.on = (type: string, handel: any) => mapperEmitter.on(type, handel);
+        this.off = (type: string, handel: any) => mapperEmitter.off(type, handel);
+        this.emit = (type: string, data: any) => mapperEmitter.emit(type, data);
+    } as any;
+    ClassElectron.prototype = API;
+
+    // Emitter Mapper
+    API.mapEmit((...p: any) => {
+        mapperEmitter.emit(...p);
+    });
+    return new ClassElectron();
+}
+
+const ElectronContext = createContext<ISimulatorAPI>((window as any).API ?? {} as ISimulatorAPI);
+
+ElectronContext.displayName = "Electron";
+const ElectronProvider = ElectronContext.Provider;
+const ElectronConsumer = ElectronContext.Consumer;
+
+/**
+ * 修饰器
+ */
+const useElectron = superConnect<ISimulatorAPI>(ElectronConsumer, "electron");
+
+const useElectronWithEvent = superConnectWithEvent<ISimulatorAPI, IApiEmitterEvent>(ElectronConsumer, "electron");
+
+export { useElectron, ElectronProvider, IMixinElectronProps, ISimulatorAPI, useElectronWithEvent, getElectronAPI };

source/Context/Setting.tsx

@@ -11,6 +11,11 @@ enum Themes {
     dark = 2
 }
 
+enum Platform {
+    web = 1,
+    desktop = 2
+}
+
 type Language = "ZH_CN" | "EN_US";
 
 interface ISettingEvents extends Setting {
@@ -19,6 +24,11 @@ interface ISettingEvents extends Setting {
 
 class Setting extends Emitter<ISettingEvents> {
 
+    /**
+     * 程序平台
+     */
+    public platform: Platform = Platform.web;
+
     /**
      * 主题
      */
@@ -63,5 +73,5 @@ const useSettingWithEvent = superConnectWithEvent<Setting, ISettingEvents>(Setti
 
 export {
     Themes, Setting, SettingContext, useSetting, Language, useSettingWithEvent,
-    IMixinSettingProps, SettingProvider, SettingConsumer
+    IMixinSettingProps, SettingProvider, SettingConsumer, Platform
 };

source/Context/Status.tsx

@@ -14,6 +14,7 @@ import { PopupController } from "@Context/Popups";
 import { Behavior } from "@Model/Behavior";
 import { IParameter, IParamValue } from "@Model/Parameter";
 import { Actuator } from "@Model/Actuator";
+import { Clip } from "@Model/Clip";
 
 function randomColor(unNormal: boolean = false) {
     const color = [
@@ -30,21 +31,29 @@ function randomColor(unNormal: boolean = false) {
 }
 
 interface IStatusEvent {
+    fileSave: void;
+    fileLoad: void;
+    fileChange: void;
     renderLoop: number;
     physicsLoop: number;
+    recordLoop: number;
+    offlineLoop: number;
     mouseModChange: void;
     focusObjectChange: void;
     focusLabelChange: void;
     focusBehaviorChange: void;
     objectChange: void;
+    focusClipChange: void;
     rangeLabelChange: void;
     groupLabelChange: void;
     groupBehaviorChange: void;
+    clipChange: void;
     labelChange: void;
     rangeAttrChange: void;
     labelAttrChange: void;
     groupAttrChange: void;
     behaviorAttrChange: void;
+    clipAttrChange: void;
     individualChange: void;
     behaviorChange: void;
     popupChange: void;
@@ -55,12 +64,6 @@ class Status extends Emitter<IStatusEvent> {
 
     public setting: Setting = undefined as any;
 
-    /**
-     * 对象命名
-     */
-    public objectNameIndex = 1;
-    public labelNameIndex = 1;
-
     /**
      * 渲染器
      */
@@ -101,6 +104,11 @@ class Status extends Emitter<IStatusEvent> {
      */
     public focusBehavior?: Behavior;
 
+    /**
+     * 焦点行为
+     */
+    public focusClip?: Clip;
+
     private drawTimer?: NodeJS.Timeout;
 
     private delayDraw = () => {
@@ -122,21 +130,28 @@ class Status extends Emitter<IStatusEvent> {
 
         // 循环事件
         this.actuator.on("loop", (t) => { this.emit("physicsLoop", t) });
+        this.actuator.on("record", (t) => { this.emit("recordLoop", t) });
+        this.actuator.on("offline", (t) => { this.emit("offlineLoop", t) });
 
         // 对象变化事件
         this.model.on("objectChange", () => this.emit("objectChange"));
         this.model.on("labelChange", () => this.emit("labelChange"));
         this.model.on("behaviorChange", () => this.emit("behaviorChange"));
+        this.model.on("clipChange", () => this.emit("clipChange"));
 
         // 弹窗事件
         this.popup.on("popupChange", () => this.emit("popupChange"));
 
         // 对象变换时执行渲染，更新渲染器数据
-        this.on("objectChange", this.delayDraw);
-        this.model.on("individualChange", this.delayDraw);
         this.model.on("individualChange", () => {
             this.emit("individualChange");
         });
+        
+        // 渲染器重绘
+        this.on("objectChange", this.delayDraw);
+        this.on("individualChange", this.delayDraw);
+        this.on("groupAttrChange", this.delayDraw);
+        this.on("rangeAttrChange", this.delayDraw);
 
         // 当模型中的标签和对象改变时，更新全部行为参数中的受控对象
         const updateBehaviorParameter = () => {
@@ -148,6 +163,49 @@ class Status extends Emitter<IStatusEvent> {
         this.on("groupLabelChange", updateBehaviorParameter);
         this.on("rangeLabelChange", updateBehaviorParameter);
         this.on("behaviorAttrChange", updateBehaviorParameter);
+
+        // 映射文件状态改变事件
+        this.archive.on("fileSave", () => this.emit("fileSave"));
+
+        // 处理存档加载事件
+        this.archive.on("fileLoad", () => {
+
+            // 触发对象修改
+            this.emit("objectChange");
+            this.emit("labelChange");
+            this.emit("behaviorChange");
+            this.emit("clipChange");
+
+            // 清除焦点对象
+            this.setBehaviorObject();
+            this.setFocusObject(new Set());
+            this.setLabelObject();
+            this.setClipObject();
+
+            // 映射
+            this.emit("fileLoad");
+        });
+
+
+        // 处理存档事件
+        const handelFileChange = () => {
+            if (this.archive.isSaved) {
+                this.emit("fileChange");
+            }
+        }
+
+        // 设置文件修改状态
+        this.on("objectChange", handelFileChange);
+        this.on("behaviorChange", handelFileChange);
+        this.on("labelChange", handelFileChange);
+        this.on("clipChange", handelFileChange);
+        this.on("individualChange", handelFileChange);
+        this.on("groupAttrChange", handelFileChange);
+        this.on("rangeAttrChange", handelFileChange);
+        this.on("labelAttrChange", handelFileChange);
+        this.on("behaviorAttrChange", handelFileChange);
+        this.on("clipAttrChange", handelFileChange);
+        this.on("fileChange", () => this.archive.emit("fileChange"));
     }
 
     public bindRenderer(renderer: AbstractRenderer) {
@@ -180,6 +238,16 @@ class Status extends Emitter<IStatusEvent> {
         this.emit("focusBehaviorChange");
     }
 
+    /**
+     * 更新焦点行为
+     */
+    public setClipObject(clip?: Clip) {
+        if (this.focusClip !== clip) {
+            this.focusClip = clip;
+        }
+        this.emit("focusClipChange");
+    }
+
     /**
      * 修改范围属性
      */
@@ -189,7 +257,6 @@ class Status extends Emitter<IStatusEvent> {
         if (range && range instanceof Range) {
             range[key] = val;
             this.emit("rangeAttrChange");
-            this.model.draw();
         }
     }
 
@@ -202,7 +269,6 @@ class Status extends Emitter<IStatusEvent> {
         if (group && group instanceof Group) {
             group[key] = val;
             this.emit("groupAttrChange");
-            this.model.draw();
         }
     }
 
@@ -225,6 +291,18 @@ class Status extends Emitter<IStatusEvent> {
         }
     }
 
+    /**
+     * 修改剪辑属性
+     */
+    public changeClipAttrib<K extends keyof Clip>
+    (id: ObjectID, key: K, val: Clip[K]) {
+        const clip = this.model.getClipById(id);
+        if (clip && clip instanceof Clip) {
+            clip[key] = val;
+            this.emit("clipAttrChange");
+        }
+    }
+
     public addGroupBehavior(id: ObjectID, val: Behavior) {
         const group = this.model.getObjectById(id);
         if (group && group instanceof Group) {
@@ -296,37 +374,93 @@ class Status extends Emitter<IStatusEvent> {
      */
     public mouseMod: MouseMod = MouseMod.Drag;
 
+    private readonly SEARCH_NAME_KEY_REG = /(\d+)$/;
+    private getNextNumber(name: string, searchKey: string): number {
+        if (name.indexOf(searchKey) < 0) return 1;
+        let searchRes = name.match(this.SEARCH_NAME_KEY_REG);
+        if (searchRes) {
+            let nameNumber = parseInt(searchRes[1]);    
+            if (isNaN(nameNumber)) {
+                return 1;
+            } else {
+                return nameNumber + 1;
+            }
+        } else {
+            return 1;
+        }
+    }
+
     public newGroup() {
         const group = this.model.addGroup();
         group.color = randomColor();
+        let searchKey = I18N(this.setting.language, "Object.List.New.Group", { id: "" });
+        let nextIndex = 1;
+        this.model.objectPool.forEach((obj) => {
+            if (obj instanceof Group) {
+                nextIndex = Math.max(nextIndex, this.getNextNumber(
+                    obj.displayName, searchKey
+                ));
+            }
+        });
         group.displayName = I18N(this.setting.language, "Object.List.New.Group", {
-            id: this.objectNameIndex.toString()
+            id: nextIndex.toString()
         });
-        this.objectNameIndex ++;
         return group;
     }
 
     public newRange() {
         const range = this.model.addRange();
         range.color = randomColor();
+        let searchKey = I18N(this.setting.language, "Object.List.New.Range", { id: "" });
+        let nextIndex = 1;
+        this.model.objectPool.forEach((obj) => {
+            if (obj instanceof Range) {
+                nextIndex = Math.max(nextIndex, this.getNextNumber(
+                    obj.displayName, searchKey
+                ));
+            }
+        });
         range.displayName = I18N(this.setting.language, "Object.List.New.Range", {
-            id: this.objectNameIndex.toString()
+            id: nextIndex.toString()
         });
-        this.objectNameIndex ++;
         return range;
     }
 
     public newLabel() {
+        let searchKey = I18N(this.setting.language, "Object.List.New.Label", { id: "" });
+        let nextIndex = 1;
+        this.model.labelPool.forEach((obj) => {
+            nextIndex = Math.max(nextIndex, this.getNextNumber(
+                obj.name, searchKey
+            ));
+        });
         const label = this.model.addLabel(
             I18N(this.setting.language, "Object.List.New.Label", {
-                id: this.labelNameIndex.toString()
+                id: nextIndex.toString()
             })
         );
         label.color = randomColor(true);
-        this.labelNameIndex ++;
         return label;
     }
 
+    public getNewClipName() {
+        let searchKey = I18N(this.setting.language, "Object.List.New.Clip", { id: "" });
+        let nextIndex = 1;
+        this.model.clipPool.forEach((obj) => {
+            nextIndex = Math.max(nextIndex, this.getNextNumber(
+                obj.name, searchKey
+            ));
+        });
+        return I18N(this.setting.language, "Object.List.New.Clip", {
+            id: nextIndex.toString()
+        });
+    }
+
+    public newClip() {
+        const clip = this.model.addClip(this.getNewClipName());
+        return clip;
+    }
+
     public setMouseMod(mod: MouseMod) {
         this.mouseMod = mod;
         if (this.renderer instanceof ClassicRenderer) {

source/Electron/Electron.ts

@@ -0,0 +1,181 @@
+import { app, BrowserWindow, ipcMain, dialog } from "electron";
+import { Service } from "@Service/Service";
+import { join as pathJoin } from "path";
+import { writeFile } from "fs";
+const ENV = process.env ?? {};
+
+class ElectronApp {
+
+	public service: Service;
+
+	public serviceUrl: string = "http://127.0.0.1";
+
+	public constructor() {
+		this.service = new Service();
+	}
+
+	public async runService() {
+
+		if (ENV.LIVING_TOGETHER_SERVICE) {
+			this.serviceUrl = ENV.LIVING_TOGETHER_SERVICE;
+			return;
+		}
+
+		let defaultPort: number | undefined = parseInt(ENV.LIVING_TOGETHER_DEFAULT_PORT ?? "");
+		if (isNaN(defaultPort)) defaultPort = undefined;
+
+		this.serviceUrl = await this.service.run(
+			ENV.LIVING_TOGETHER_BASE_PATH, defaultPort
+		);
+	}
+
+	public loadingPage?: BrowserWindow;
+	public simulatorWindow?: BrowserWindow;
+
+	public async showLoadingPage() {
+		return new Promise((r) => {
+
+			this.loadingPage = new BrowserWindow({
+				width: 603,
+				height: 432,
+				fullscreenable: false,
+				skipTaskbar: true,
+				resizable: false,
+				titleBarStyle: 'hidden',
+				frame: false,
+				show: false
+			});
+
+			this.loadingPage.loadFile(ENV.LIVING_TOGETHER_LOADING_PAGE ?? "./LoadingPage.html");
+
+			this.loadingPage.on("ready-to-show", () => {
+				this.loadingPage?.show();
+				r(undefined);
+			});
+		});
+	}
+
+	public async runMainThread() {
+
+		await app.whenReady();
+
+		await this.showLoadingPage();
+
+		await this.runService();
+
+		let preload = pathJoin(__dirname, "./SimulatorWindow.js");
+
+		// if (ENV.LIVING_TOGETHER_BASE_PATH) {
+		// 	preload = pathJoin(__dirname, ENV.LIVING_TOGETHER_BASE_PATH, "./SimulatorWindow.js");
+		// }
+
+		this.simulatorWindow = new BrowserWindow({
+			width: 800,
+			height: 600,
+			titleBarStyle: 'hidden',
+			frame: false,
+			minWidth: 460,
+			minHeight: 300,
+			webPreferences: { preload },
+			show: false,
+		});
+
+		this.simulatorWindow.loadURL(this.serviceUrl + (ENV.LIVING_TOGETHER_WEB_PATH ?? "/resources/app.asar/"));
+
+		this.simulatorWindow.on("ready-to-show", () => {
+			setTimeout(() => {
+				this.loadingPage?.close();
+				this.simulatorWindow?.show();
+			}, 1220);
+		});
+
+		this.handelSimulatorWindowBehavior();
+		this.handelFileChange();
+
+		app.on('window-all-closed', function () {
+			if (process.platform !== 'darwin') app.quit()
+		});
+	}
+
+	private handelSimulatorWindowBehavior() {
+
+		ipcMain.on("windows.close", () => {
+			this.simulatorWindow?.close();
+		});
+
+		ipcMain.on("windows.maximize", () => {
+			this.simulatorWindow?.maximize();
+		});
+
+		ipcMain.on("windows.unMaximize", () => {
+			this.simulatorWindow?.unmaximize();
+		});
+
+		ipcMain.on("windows.isMaximized", (event) => {
+			event.returnValue = this.simulatorWindow?.isMaximized();
+		});
+
+		ipcMain.on("windows.minimize", (event) => {
+			this.simulatorWindow?.minimize();
+		});
+
+		const sendWindowsChangeMessage = () => {
+			this.simulatorWindow?.webContents.send("windows.windowsSizeStateChange");
+		}
+
+		this.simulatorWindow?.on("maximize", sendWindowsChangeMessage);
+		this.simulatorWindow?.on("unmaximize", sendWindowsChangeMessage);
+	}
+
+	private handelFileChange() {
+
+		// 文件保存
+		const saveFile = async (path: string, text: string) => {
+			return new Promise((r) => {
+				writeFile(path ?? "", text, {}, (e) => {
+					this.simulatorWindow?.webContents.send(
+						"windows.EndFileSave",
+						(path.match(/.+(\/|\\)(.+)$/) ?? [])[2],
+						path, !e
+					);
+					r(undefined);
+				});
+			})
+		};
+
+		// 处理文件保存事件
+		ipcMain.on("windows.fileSave",
+			(_, text: string, name: string, title: string, button: string, url?: string) => {
+
+				// 如果没有路径，询问新的路径
+				if (url) {
+					saveFile(url, text);
+				}
+
+				// 询问保存位置
+				else {
+					dialog.showSaveDialog(this.simulatorWindow!, {
+						title: title,
+						buttonLabel: button,
+						filters: [
+							{ name: name, extensions: ["ltss"] }
+						]
+					}).then(res => {
+
+						// 用户选择后继续保存
+						if (!res.canceled && res.filePath) {
+							saveFile(res.filePath, text);
+						} else {
+							this.simulatorWindow?.webContents.send(
+								"windows.EndFileSave",
+								undefined, undefined, false
+							);
+						}
+					});
+				}
+			}
+		);
+	}
+}
+
+new ElectronApp().runMainThread();

source/Electron/SimulatorAPI.ts

@@ -0,0 +1,41 @@
+import { Emitter } from "@Model/Emitter";
+
+type IApiEmitterEvent = {
+	windowsSizeStateChange: void;
+	fileSave: {success: boolean, name: string, url: string};
+}
+
+interface ISimulatorAPI extends Emitter<IApiEmitterEvent> {
+
+	/**
+	 * 关闭窗口
+	 */
+	close: () => void;
+
+	/**
+	 * 最大化窗口
+	 */
+	maximize: () => void;
+
+	/**
+	 * 取消最大化
+	 */
+	unMaximize: () => void;
+
+	/**
+	 * 是否处于最大化状态
+	 */
+	isMaximized: () => boolean;
+
+	/**
+	 * 是否处于最大化状态
+	 */
+	minimize: () => void;
+
+	/**
+	 * 存档
+	 */
+	fileSave: (text: string, name: string, title: string, button: string, url?: string) => void;
+}
+
+export { ISimulatorAPI, IApiEmitterEvent }

source/Electron/SimulatorWindow.ts

@@ -0,0 +1,49 @@
+import { contextBridge, ipcRenderer } from "electron";
+import { ISimulatorAPI } from "@Electron/SimulatorAPI";
+
+const emitterMap: { fn?: Function } = { fn: undefined };
+
+const emit = (type: string, evt?: any) => {
+	if (emitterMap.fn) {
+		emitterMap.fn(type, evt);
+	}
+}
+
+const API: ISimulatorAPI = {
+	
+	close() {
+		ipcRenderer.send("windows.close");
+	},
+
+	maximize() {
+		ipcRenderer.send("windows.maximize");
+	},
+
+	unMaximize() {
+		ipcRenderer.send("windows.unMaximize");
+	},
+
+	isMaximized() {
+		return ipcRenderer.sendSync("windows.isMaximized");
+	},
+
+	minimize() {
+		ipcRenderer.send("windows.minimize");
+	},
+
+	fileSave(text: string, name: string, title: string, button: string, url?: string) {
+		ipcRenderer.send("windows.fileSave", text, name, title, button, url);
+	},
+
+	mapEmit: (fn: Function) => { emitterMap.fn = fn },
+} as any;
+
+ipcRenderer.on("windows.windowsSizeStateChange", () => {
+	emit("windowsSizeStateChange");
+});
+
+ipcRenderer.on("windows.EndFileSave", (_, name: string, url: string, success: boolean) => {
+	emit("fileSave", {name, url, success});
+});
+
+contextBridge.exposeInMainWorld("API", API);

source/LivingTogether.ts

@@ -1 +0,0 @@
-export * from "@Model/Model";

source/Localization/EN-US.ts

@@ -1,14 +1,20 @@
 const EN_US = {
+    "Language": "Language",
     "EN_US": "English (US)",
     "ZH_CN": "Chinese (Simplified)",
+    "Themes": "Themes",
+    "Themes.Dark": "Dark",
+    "Themes.Light": "Light",
     "Header.Bar.Title": "Living Together | Emulator",
     "Header.Bar.Title.Info": "Group Behavior Research Emulator",
     "Header.Bar.File.Name.Info": "{file} ({status})",
-    "Header.Bar.New.File.Name": "New File",
+    "Header.Bar.New.File.Name": "NewFile.ltss",
     "Header.Bar.File.Save.Status.Saved": "Saved",
     "Header.Bar.File.Save.Status.Unsaved": "UnSaved",
     "Header.Bar.Fps": "FPS: {renderFps} | {physicsFps}",
     "Header.Bar.Fps.Info": "The rendering frame rate ({renderFps} fps) is on the left, and the simulation frame rate ({physicsFps} fps) is on the right.",
+    "Header.Bar.Fps.Render.Info": "Render fps {fps}",
+    "Header.Bar.Fps.Simulate.Info": "Simulate fps {fps}",
     "Command.Bar.Save.Info": "Save",
     "Command.Bar.Play.Info": "Start simulation",
     "Command.Bar.Drag.Info": "Drag and drop to move the camera",
@@ -29,6 +35,7 @@ const EN_US = {
     "Object.List.New.Group": "Group object {id}",
     "Object.List.New.Range": "Range object {id}",
     "Object.List.New.Label": "Label {id}",
+    "Object.List.New.Clip": "Clip {id}",
     "Object.List.No.Data": "There are no objects in the model, click the button to create it",
     "Object.Picker.List.No.Data": "There is no model in the model for this option",
     "Behavior.Picker.Add.Button": "Click here to assign behavior to this group",
@@ -51,6 +58,13 @@ const EN_US = {
     "Panel.Info.Behavior.List.View": "Edit view behavior list",
     "Panel.Title.Behavior.Details.View": "Behavior",
     "Panel.Info.Behavior.Details.View": "Edit view Behavior attributes",
+    "Panel.Title.Behavior.Clip.Player": "Recording",
+    "Panel.Info.Behavior.Clip.Player": "Pre render recorded data",
+    "Panel.Title.Behavior.Clip.Details": "Clip",
+    "Panel.Info.Behavior.Clip.Details": "Edit view clip attributes",
+    "Panel.Info.Behavior.Clip.Time.Formate": "{current} / {all} / {fps}fps",
+    "Panel.Info.Behavior.Clip.Record.Formate": "Record: {time}",
+    "Panel.Info.Behavior.Clip.Uname.Clip": "Waiting for recording...",
     "Popup.Title.Unnamed": "Popup message",
     "Popup.Title.Confirm": "Confirm message",
     "Popup.Action.Yes": "Confirm",
@@ -61,8 +75,29 @@ const EN_US = {
     "Popup.Action.Objects.Confirm.Restore": "Restore",
     "Popup.Delete.Objects.Confirm": "Are you sure you want to delete this object(s)? The object is deleted and cannot be recalled.",
     "Popup.Delete.Behavior.Confirm": "Are you sure you want to delete this behavior? The behavior is deleted and cannot be recalled.",
+    "Popup.Delete.Clip.Confirm": "Are you sure you want to delete this clip? The clip cannot be restored after deletion.",
     "Popup.Restore.Behavior.Confirm": "Are you sure you want to reset all parameters of this behavior? This operation cannot be recalled.",
     "Popup.Setting.Title": "Preferences setting",
+    "Popup.Offline.Render.Title": "Offline rendering",
+    "Popup.Offline.Render.Process.Title": "Rendering progress",
+    "Popup.Offline.Render.Message": "Rendering Parameters",
+    "Popup.Offline.Render.Input.Name": "Clip name",
+    "Popup.Offline.Render.Input.Time": "Duration (s)",
+    "Popup.Offline.Render.Input.Fps": "FPS (f/s)",
+    "Popup.Offline.Render.Input.Start": "Start rendering",
+    "Popup.Offline.Render.Input.End": "Terminate rendering",
+    "Popup.Offline.Render.Input.Finished": "Finished",
+    "Popup.Offline.Render.Process": "Number of frames completed: {current} / {all}",
+    "Popup.Load.Save.Title": "Load save",
+    "Popup.Load.Save.confirm": "Got it",
+    "Popup.Load.Save.Overwrite": "Overwrite and continue",
+    "Popup.Load.Save.Overwrite.Info": "The current workspace will be overwritten after the archive is loaded, and all unsaved progress will be lost. Are you sure you want to continue?",
+    "Popup.Load.Save.Error.Empty": "File information acquisition error. The file has been lost or moved.",
+    "Popup.Load.Save.Error.Type": "The file with extension name \"{ext}\" cannot be loaded temporarily",
+    "Popup.Load.Save.Error.Parse": "Archive parsing error, detailed reason: \n{why}",
+    "Popup.Load.Save.Select.Path.Title": "Please select an archive location",
+    "Popup.Load.Save.Select.Path.Button": "Save",
+    "Popup.Load.Save.Select.File.Name": "Living Together Simulator Save",
     "Popup.Add.Behavior.Title": "Add behavior",
     "Popup.Add.Behavior.Action.Add": "Add all select behavior",
     "Popup.Add.Behavior.Select.Counter": "Selected {count} behavior",
@@ -131,5 +166,10 @@ 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",
+    "Panel.Info.Clip.List.Error.Nodata": "There is no clip, please click the record button to record, or click the plus sign to create",
+    "Panel.Info.Clip.Details.Error.Nodata": "Specify a clip to view an attribute",
+    "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

@@ -1,14 +1,20 @@
 const ZH_CN = {
+    "Language": "语言",
     "EN_US": "英语 (美国)",
     "ZH_CN": "中文 (简体)",
+    "Themes": "主题",
+    "Themes.Dark": "黑暗",
+    "Themes.Light": "亮色",
     "Header.Bar.Title": "群生共进 | 仿真器",
     "Header.Bar.Title.Info": "群体行为研究仿真器",
     "Header.Bar.File.Name.Info": "{file} ({status})",
-    "Header.Bar.New.File.Name": "新存档",
+    "Header.Bar.New.File.Name": "新存档.ltss",
     "Header.Bar.File.Save.Status.Saved": "已保存",
     "Header.Bar.File.Save.Status.Unsaved": "未保存",
     "Header.Bar.Fps": "帧率: {renderFps} | {physicsFps}",
     "Header.Bar.Fps.Info": "左侧为渲染帧率 ({renderFps} fps), 右侧为模拟帧率 ({physicsFps} fps)。",
+    "Header.Bar.Fps.Render.Info": "渲染帧率 {fps}",
+    "Header.Bar.Fps.Simulate.Info": "模拟帧率 {fps}",
     "Command.Bar.Save.Info": "保存",
     "Command.Bar.Play.Info": "开始仿真",
     "Command.Bar.Drag.Info": "拖拽进行视角移动",
@@ -29,6 +35,7 @@ const ZH_CN = {
     "Object.List.New.Group": "群对象 {id}",
     "Object.List.New.Range": "范围对象 {id}",
     "Object.List.New.Label": "标签 {id}",
+    "Object.List.New.Clip": "剪辑片段 {id}",
     "Object.List.No.Data": "模型中没有任何对象，点击按钮以创建",
     "Object.Picker.List.No.Data": "模型中没有合适此选项的模型",
     "Behavior.Picker.Add.Button": "点击此处以赋予行为到此群",
@@ -51,6 +58,13 @@ const ZH_CN = {
     "Panel.Info.Behavior.List.View": "编辑查看行为列表",
     "Panel.Title.Behavior.Details.View": "行为",
     "Panel.Info.Behavior.Details.View": "编辑查看行为属性",
+    "Panel.Title.Behavior.Clip.Player": "录制",
+    "Panel.Info.Behavior.Clip.Player": "预渲染录制数据",
+    "Panel.Title.Behavior.Clip.Details": "剪辑",
+    "Panel.Info.Behavior.Clip.Details": "编辑查看剪辑片段属性",
+    "Panel.Info.Behavior.Clip.Time.Formate": "{current} / {all} / {fps} fps",
+    "Panel.Info.Behavior.Clip.Record.Formate": "录制: {time}",
+    "Panel.Info.Behavior.Clip.Uname.Clip": "等待录制...",
     "Popup.Title.Unnamed": "弹窗消息",
     "Popup.Title.Confirm": "确认消息",
     "Popup.Action.Yes": "确定",
@@ -61,8 +75,29 @@ const ZH_CN = {
     "Popup.Action.Objects.Confirm.Restore": "重置",
     "Popup.Delete.Objects.Confirm": "你确定要删除这个(些)对象吗？对象被删除将无法撤回。",
     "Popup.Delete.Behavior.Confirm": "你确定要删除这个行为吗？行为被删除将无法撤回。",
+    "Popup.Delete.Clip.Confirm": "你确定删除这个剪辑片段，剪辑片段删除后将无法恢复。",
     "Popup.Restore.Behavior.Confirm": "你确定要重置此行为的全部参数吗？此操作无法撤回。",
     "Popup.Setting.Title": "首选项设置",
+    "Popup.Offline.Render.Title": "离线渲染",
+    "Popup.Offline.Render.Process.Title": "渲染进度",
+    "Popup.Offline.Render.Message": "渲染参数",
+    "Popup.Offline.Render.Input.Name": "剪辑名称",
+    "Popup.Offline.Render.Input.Time": "时长 (s)",
+    "Popup.Offline.Render.Input.Fps": "帧率 (f/s)",
+    "Popup.Offline.Render.Input.Start": "开始渲染",
+    "Popup.Offline.Render.Input.End": "终止渲染",
+    "Popup.Offline.Render.Input.Finished": "完成",
+    "Popup.Offline.Render.Process": "完成帧数: {current} / {all}",
+    "Popup.Load.Save.Title": "加载存档",
+    "Popup.Load.Save.confirm": "我知道了",
+    "Popup.Load.Save.Overwrite": "覆盖并继续",
+    "Popup.Load.Save.Overwrite.Info": "存档加载后将覆盖当前工作区，未保存的进度将全部丢失，确定要继续吗?",
+    "Popup.Load.Save.Error.Empty": "文件信息获取错误，文件已丢失或已被移动",
+    "Popup.Load.Save.Error.Type": "暂时无法加载拓展名为 \"{ext}\" 的文件",
+    "Popup.Load.Save.Error.Parse": "存档解析错误，详细原因: \n{why}",
+    "Popup.Load.Save.Select.Path.Title": "请选择存档保存位置",
+    "Popup.Load.Save.Select.Path.Button": "保存",
+    "Popup.Load.Save.Select.File.Name": "群生共进存档",
     "Popup.Add.Behavior.Title": "添加行为",
     "Popup.Add.Behavior.Action.Add": "添加全部选中行为",
     "Popup.Add.Behavior.Select.Counter": "已选择 {count} 个行为",
@@ -131,5 +166,10 @@ 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 坐标",
+    "Panel.Info.Clip.List.Error.Nodata": "没有剪辑片段，请点击录制按钮录制，或者点击加号创建",
+    "Panel.Info.Clip.Details.Error.Nodata": "请指定一个剪辑片段以查看属性",
+    "Info.Hint.Save.After.Close": "任何未保存的进度都会丢失, 确定要继续吗?",
+    "Info.Hint.Load.File.Title": "加载存档",
+    "Info.Hint.Load.File.Intro": "释放以加载拽入的存档",
 }
 export default ZH_CN;

source/Model/Actuator.ts

@@ -1,9 +1,19 @@
 import { Model } from "@Model/Model";
 import { Emitter } from "@Model/Emitter";
+import { Clip, IFrame } from "@Model/Clip";
+
+enum ActuatorModel {
+	Play = 1,
+	Record = 2,
+	View = 3,
+	Offline = 4
+}
 
 interface IActuatorEvent {
 	startChange: boolean;
+	record: number;
 	loop: number;
+	offline: number;
 }
 
 /**
@@ -26,6 +36,154 @@ class Actuator extends Emitter<IActuatorEvent> {
 	 */
 	private startFlag: boolean = false;
 
+	/**
+	 * 模式
+	 */
+	public mod: ActuatorModel = ActuatorModel.View;
+
+	/**
+	 * 录制剪辑
+	 */
+	public recordClip?: Clip;
+
+	/**
+	 * 播放剪辑
+	 */
+	public playClip?: Clip;
+
+	/**
+	 * 播放帧
+	 */
+	public playFrame?: IFrame;
+
+	/**
+	 * 播放帧数
+	 */
+	 public playFrameId: number = 0;
+
+	/**
+	 * 开始录制
+	 */
+	public startRecord(clip: Clip) {
+
+		// 记录录制片段
+		this.recordClip = clip;
+		clip.isRecording = true;
+
+		// 如果仿真未开启，开启仿真
+		if (!this.start()) this.start(true);
+
+		// 设置状态
+		this.mod = ActuatorModel.Record;
+	}
+
+	/**
+	 * 结束录制
+	 */
+	public endRecord() {
+
+		this.recordClip && (this.recordClip.isRecording = false);
+		this.recordClip = undefined;
+
+		// 如果仿真未停止，停止仿真
+		if (this.start()) this.start(false);
+
+		// 设置状态
+		this.mod = ActuatorModel.View;
+	}
+
+	public startPlay(clip: Clip) {
+
+		// 如果仿真正在进行，停止仿真
+		if (this.start()) this.start(false);
+
+		// 如果正在录制，阻止播放
+		if (this.mod === ActuatorModel.Record) {
+			return;
+		}
+
+		// 如果正在播放，暂停播放
+		if (this.mod === ActuatorModel.Play) {
+			this.pausePlay();
+		}
+
+		// 设置播放对象
+		this.playClip = clip;
+
+		// 设置播放帧数
+		this.playFrameId = 0;
+		this.playFrame = clip.frames[this.playFrameId];
+
+		// 播放第一帧
+		clip.play(this.playFrame);
+
+		// 激发时钟状态事件
+		this.emit("startChange", true);
+	}
+
+	public endPlay() {
+
+		// 如果正在播放，暂停播放
+		if (this.mod === ActuatorModel.Play) {
+			this.pausePlay();
+		}
+
+		// 更新模式
+		this.mod = ActuatorModel.View;
+
+		// 清除状态
+		this.playClip = undefined;
+		this.playFrameId = 0;
+		this.playFrame = undefined;
+
+		// 渲染模型
+		this.model.draw();
+
+		// 激发时钟状态事件
+		this.emit("startChange", false);
+	}
+
+	/**
+	 * 是否播放完毕
+	 */
+	public isPlayEnd() {
+		if (this.playClip && this.playFrame) {
+			if (this.playFrameId >= (this.playClip.frames.length - 1)) {
+				return true;
+			} else {
+				return false;
+			}
+		} else {
+			return true;
+		}
+	}
+
+	public playing() {
+
+		// 如果播放完毕了，从头开始播放
+		if (this.isPlayEnd() && this.playClip) {
+			this.startPlay(this.playClip);
+		}
+
+		// 更新模式
+		this.mod = ActuatorModel.Play;
+
+		// 启动播放时钟
+		this.playTicker();
+
+		// 激发时钟状态事件
+		this.emit("startChange", false);
+	}
+
+	public pausePlay() {
+
+		// 更新模式
+		this.mod = ActuatorModel.View;
+
+		// 激发时钟状态事件
+		this.emit("startChange", false);
+	}
+
 	/**
 	 * 主时钟状态控制
 	 */
@@ -58,6 +216,160 @@ class Actuator extends Emitter<IActuatorEvent> {
 
 	public tickerType: 1 | 2 = 2;
 
+	private playTickerTimer?: number;
+
+	/**
+	 * 设置播放进度
+	 */
+	public setPlayProcess(id: number) {
+		if (this.playClip && id >= 0 && id < this.playClip.frames.length) {
+		
+			// 跳转值这帧
+			this.playFrameId = id;
+			this.playFrame = this.playClip.frames[this.playFrameId];
+			this.emit("record", this.playFrame.duration);
+
+			if (this.mod !== ActuatorModel.Play) {
+				this.playClip.play(this.playFrame);
+			}
+		}
+	}
+
+	/**
+	 * 离线渲染参数
+	 */
+	public offlineAllFrame: number = 0;
+	public offlineCurrentFrame: number = 0;
+	private offlineRenderTickTimer?: number;
+
+	/**
+	 * 关闭离线渲染
+	 */
+	public endOfflineRender() {
+
+		// 清除 timer
+		clearTimeout(this.offlineRenderTickTimer);
+
+		this.recordClip && (this.recordClip.isRecording = false);
+		this.recordClip = undefined;
+		
+		// 设置状态
+		this.mod = ActuatorModel.View;
+
+		// 激发结束事件
+		this.start(false);
+		this.emit("record", 0);
+	}
+
+	/**
+	 * 离线渲染 tick
+	 */
+	private offlineRenderTick(dt: number) {
+
+		if (this.mod !== ActuatorModel.Offline) {
+			return;
+		}
+
+		if (this.offlineCurrentFrame >= this.offlineAllFrame) {
+			return this.endOfflineRender();
+		}
+		
+		// 更新模型
+		this.model.update(dt);
+
+		// 录制
+		this.recordClip?.record(dt);
+
+		// 限制更新频率
+		if (this.offlineCurrentFrame % 10 === 0) {
+			this.emit("offline", dt);
+		}
+
+		this.offlineCurrentFrame++
+
+		if (this.offlineCurrentFrame <= this.offlineAllFrame) {
+			
+			// 下一个 tick
+			this.offlineRenderTickTimer = setTimeout(() => this.offlineRenderTick(dt)) as any;
+
+		} else {
+			this.endOfflineRender();
+		}
+	}
+
+	/**
+	 * 离线渲染
+	 */
+	public offlineRender(clip: Clip, time: number, fps: number) {
+		
+		// 记录录制片段
+		this.recordClip = clip;
+		clip.isRecording = true;
+
+		// 如果仿真正在进行，停止仿真
+		if (this.start()) this.start(false);
+
+		// 如果正在录制，阻止
+		if (this.mod === ActuatorModel.Record || this.mod === ActuatorModel.Offline) {
+			return;
+		}
+
+		// 如果正在播放，暂停播放
+		if (this.mod === ActuatorModel.Play) {
+			this.pausePlay();
+		}
+
+		// 设置状态
+		this.mod = ActuatorModel.Offline;
+
+		// 计算帧数
+		this.offlineCurrentFrame = 0;
+		this.offlineAllFrame = Math.round(time * fps) - 1;
+		let dt = time / this.offlineAllFrame;
+
+		// 第一帧渲染
+		clip.record(0);
+
+		// 开启时钟
+		this.offlineRenderTick(dt);
+
+		this.emit("record", dt);
+	}
+
+	/**
+	 * 播放时钟
+	 */
+	private playTicker() {
+
+		if (this.playClip && this.playFrame && this.mod === ActuatorModel.Play) {
+
+			// 播放当前帧
+			this.playClip.play(this.playFrame);
+
+			// 没有完成播放，继续播放
+			if (!this.isPlayEnd()) {
+
+				// 跳转值下一帧
+				this.playFrameId ++;
+				this.playFrame = this.playClip.frames[this.playFrameId];
+				this.emit("record", this.playFrame.duration);
+
+				// 清除计时器，保证时钟唯一性
+				clearTimeout(this.playTickerTimer);
+
+				// 延时
+				this.playTickerTimer = setTimeout(() => {
+					this.playTicker();
+				}, this.playFrame.duration * 1000) as any;
+
+			} else {
+				this.pausePlay();
+			}
+		} else {
+			this.pausePlay();
+		}
+	}
+
 	private ticker(t: number) {
 		if (this.startFlag && t !== 0) {
 			if (this.lastTime === 0) {
@@ -72,13 +384,30 @@ class Actuator extends Emitter<IActuatorEvent> {
 				} else {
 					this.alignTimer += durTime;
 					if (this.alignTimer > (1 / this.fps)) {
+
+						// 更新模型
 						this.model.update(this.alignTimer * this.speed);
+
+						// 绘制模型
+						this.model.draw();
+
+						// 录制模型
+						if (
+							this.mod === ActuatorModel.Record ||
+							this.mod === ActuatorModel.Offline
+						) {
+							this.recordClip?.record(this.alignTimer * this.speed);
+							this.emit("record", this.alignTimer);
+						}
+
 						this.emit("loop", this.alignTimer);
 						this.alignTimer = 0;
 					}
 				}
 			}
-		} else {
+		}
+		
+		else {
 			this.emit("loop", Infinity);
 		}
 	}
@@ -122,4 +451,4 @@ class Actuator extends Emitter<IActuatorEvent> {
 	}
 }
 
-export { Actuator }
+export { Actuator, ActuatorModel }

source/Model/Archive.ts

@@ -1,14 +1,30 @@
 import { Emitter, EventType } from "@Model/Emitter";
+import { CtrlObject, IArchiveCtrlObject } from "@Model/CtrlObject";
+import { Model } from "@Model/Model";
+import { IArchiveLabel, Label } from "@Model/Label";
+import { Group, IArchiveGroup } from "@Model/Group";
+import { Range } from "@Model/Range";
+import { IArchiveIndividual, Individual } from "@Model/Individual";
+import { Behavior, IArchiveBehavior } from "@Model/Behavior";
+import { getBehaviorById } from "@Behavior/Behavior";
+import { IArchiveParseFn, IObjectParamArchiveType, IRealObjectType } from "@Model/Parameter";
+import { Clip, IArchiveClip } from "@Model/Clip";
 
 interface IArchiveEvent {
-    save: Archive;
-    load: Archive;
+    fileSave: Archive;
+    fileLoad: Archive;
+    fileChange: void;
 }
 
-class Archive<
-    M extends any = any,
-    E extends Record<EventType, any> = {}
-> extends Emitter<E & IArchiveEvent> {
+interface IArchiveObject {
+    nextIndividualId: number;
+    objectPool: IArchiveCtrlObject[];
+    labelPool: IArchiveLabel[];
+    behaviorPool: IArchiveBehavior[];
+    clipPool: IArchiveClip[];
+}
+
+class Archive extends Emitter<IArchiveEvent> {
 
     /**
      * 是否为新文件
@@ -23,25 +39,266 @@ class Archive<
     /**
      * 是否保存
      */
-    public isSaved: boolean = false;
+    public isSaved: boolean = true;
 
     /**
-     * 文件数据
+     * 文件路径
      */
-    public fileData?: M;
+    public fileUrl?: string;
+
+    /**
+     * 将模型转换为存档对象
+     */
+    public parseModel2Archive(model: Model): string {
+
+        // 存贮 CtrlObject
+        const objectPool: IArchiveCtrlObject[] = [];
+        model.objectPool?.forEach(obj => {
+            let archiveObject = obj.toArchive();
+
+            // 处理每个群的个体
+            if (archiveObject.objectType === "G") {
+                const archiveGroup: IArchiveGroup = archiveObject as any;
+                const group: Group = obj as Group;
+
+                const individuals: IArchiveIndividual[] = [];
+                group.individuals?.forEach((item) => {
+                    individuals.push(item.toArchive());
+                });
+
+                archiveGroup.individuals = individuals;
+            }
+
+            objectPool.push(archiveObject);
+        })
+
+        // 存储 Label
+        const labelPool: IArchiveLabel[] = [];
+        model.labelPool?.forEach(obj => {
+            labelPool.push(obj.toArchive());
+        });
+
+        // 存储全部行为
+        const behaviorPool: IArchiveBehavior[] = [];
+        model.behaviorPool?.forEach(obj => {
+            behaviorPool.push(obj.toArchive());
+        });
+
+        // 存储全部剪辑片段
+        const clipPool: IArchiveClip[] = [];
+        model.clipPool?.forEach(obj => {
+            clipPool.push(obj.toArchive());
+        });
+
+        // 生成存档对象
+        const fileData: IArchiveObject = {
+            nextIndividualId: model.nextIndividualId,
+            objectPool: objectPool,
+            labelPool: labelPool,
+            behaviorPool: behaviorPool,
+            clipPool: clipPool
+        };
+
+        return JSON.stringify(fileData);
+    }
+
+    /**
+     * 加载存档到模型
+     */
+    public loadArchiveIntoModel(model: Model, data: string): void {
+
+        // 解析为 JSON 对象
+        const archive: IArchiveObject = JSON.parse(data);
+        // console.log(archive);
+
+        // 实例化全部对象
+        const objectPool: CtrlObject[] = [];
+        const individualPool: Individual[] = [];
+        archive.objectPool?.forEach((obj) => {
+
+            let ctrlObject: CtrlObject | undefined = undefined;
+            
+            // 处理群
+            if (obj.objectType === "G") {
+                const archiveGroup: IArchiveGroup = obj as any;
+                const newGroup = new Group(model);
+
+                // 实例化全部个体
+                const individuals: Array<Individual> = [];
+                archiveGroup.individuals?.forEach((item) => {
+                    const newIndividual = new Individual(newGroup);
+                    newIndividual.id = item.id;
+                    individuals.push(newIndividual);
+                    individualPool.push(newIndividual);
+                })
+                
+                newGroup.cacheIndividualsArray = individuals;
+                ctrlObject = newGroup;
+            }
+
+            // 处理范围
+            if (obj.objectType === "R") {
+                ctrlObject = new Range(model);
+            }
+
+            if (ctrlObject) {
+                ctrlObject.id = obj.id;
+                objectPool.push(ctrlObject);
+            }
+        });
+
+        // 实例化全部标签
+        const labelPool: Label[] = [];
+        archive.labelPool?.forEach((item) => {
+            const newLabel = new Label(model);
+            newLabel.id = item.id;
+            labelPool.push(newLabel);
+        });
+
+        // 实例化全部行为
+        const behaviorPool: Behavior[] = [];
+        archive.behaviorPool?.forEach((item) => {
+            const recorder = getBehaviorById(item.behaviorId);
+            const newBehavior = recorder.new();
+            newBehavior.id = item.id;
+            behaviorPool.push(newBehavior);
+        });
+
+        // 实例化全部剪辑
+        const clipPool: Clip[] = [];
+        archive.clipPool?.forEach((item) => {
+            const newClip = new Clip(model);
+            newClip.id = item.id;
+            clipPool.push(newClip);
+        });
+
+        // 内置标签集合
+        const buildInLabel = [model.allGroupLabel, model.allRangeLabel, model.currentGroupLabel]
+
+        const search: <T extends IRealObjectType>(pool: T[], archive: IObjectParamArchiveType) => T | undefined =
+        (pool, archive) => {
+            for (let i = 0; i < pool.length; i++) {
+                if (pool[i].id === archive.__LIVING_TOGETHER_OBJECT_ID) {
+                    return pool[i];
+                }
+            }
+
+            return undefined;
+        };
+
+        const searchAll: (archive: IObjectParamArchiveType) => IRealObjectType | undefined =
+        (archive) => {
+            return void 0 ??
+                search(individualPool, archive) ??
+                search(objectPool, archive) ??
+                search(labelPool, archive) ??
+                search(buildInLabel, archive) ??
+                search(behaviorPool, archive);
+        }
+
+        // 实例搜索函数
+        const parseFunction: IArchiveParseFn = (archive) => {
+
+            switch (archive.__LIVING_TOGETHER_OBJECT_TYPE) {
+
+                // 在个体池搜索
+                case "Individual":
+                    return search(individualPool, archive) ?? searchAll(archive);
+
+                // 对象类型在对象池中搜索
+                case "Range":
+                case "Group":
+                    return search(objectPool, archive) ?? searchAll(archive);
+
+                // 在标签池搜索
+                case "Label":
+                    return search(labelPool, archive) ?? search(buildInLabel, archive) ?? searchAll(archive);
+
+                // 在标签池搜索
+                case "Behavior":
+                    return search(behaviorPool, archive) ?? searchAll(archive);
+
+                // 在全部池子搜索
+                default:
+                    return searchAll(archive);
+            }
+        }
+
+        // 加载对象的属性
+        model.objectPool = objectPool.map((obj, index) => {
+            
+            // 加载属性
+            obj.fromArchive(archive.objectPool[index], parseFunction);
+
+            // 加载个体属性
+            if (obj instanceof Group) {
+
+                const archiveGroup: IArchiveGroup = archive.objectPool[index] as any;
+
+                obj.individuals = new Set(obj.cacheIndividualsArray.map((item, i) => {
+                    item.fromArchive(archiveGroup.individuals[i], parseFunction);
+                    return item;
+                }));
+            }
+
+            return obj;
+        });
+
+        // 加载标签属性
+        model.labelPool = labelPool.map((item, index) => {
+            item.fromArchive(archive.labelPool[index]);
+            return item;
+        });
+
+        // 加载行为属性
+        model.behaviorPool = behaviorPool.map((item, index) => {
+            item.fromArchive(archive.behaviorPool[index], parseFunction);
+            return item;
+        });
+
+        // 加载剪辑
+        model.clipPool = clipPool.map((item, index) => {
+            item.fromArchive(archive.clipPool[index], parseFunction);
+            return item;
+        });
+    }
 
     /**
      * 保存文件
      * 模型转换为文件
      */
-    public save() {};
+    public save(model: Model): string {
+        this.isSaved = true;
+        this.emit("fileSave", this);
+        return this.parseModel2Archive(model);
+    }
 
     /**
      * 加载文件为模型
-     * return Model
+     * @return Model
      */
-    public load() {};
+    public load(model: Model, data: string, name: string, url?: string): string | undefined {
+
+        try {
+            this.loadArchiveIntoModel(model, data);
+        } catch (e) {
+            return e as string;
+        }
+        
+        this.emit("fileLoad", this);
+        this.fileName = name;
+        this.isSaved = true;
+        this.isNewFile = false;
+        this.fileUrl = url;
+        this.emit("fileSave", this);
+    };
+
+    public constructor() {
+        super();
+        this.on("fileChange", () => {
+            this.isSaved = false;
+        })
+    }
 }
 
-export { Archive };
-export default Archive;
+export { Archive, IArchiveObject };

source/Model/Behavior.ts

@@ -1,8 +1,13 @@
 import { Emitter, EventType } from "@Model/Emitter";
+import { v4 as uuid } from "uuid";
 import type { Individual } from "@Model/Individual";
 import type { Group } from "@Model/Group";
 import type { Model } from "@Model/Model";
-import { getDefaultValue, IParameter, IParameterOption, IParameterValue } from "@Model/Parameter";
+import {
+    archiveObject2Parameter,
+    getDefaultValue, IArchiveParameterValue, IArchiveParseFn,
+    IParameter, IParameterOption, IParameterValue, parameter2ArchiveObject
+} from "@Model/Parameter";
 
 /**
  * 行为构造函数类型
@@ -10,7 +15,7 @@ import { getDefaultValue, IParameter, IParameterOption, IParameterValue } from "
 type IBehaviorConstructor<
     P extends IParameter = {},
     E extends Record<EventType, any> = {}
-> = new (id: string, parameter: IParameterValue<P>) => Behavior<P, E>;
+> = new (parameter: IParameterValue<P>) => Behavior<P, E>;
 
 type IAnyBehavior = Behavior<any, any>;
 type IAnyBehaviorRecorder = BehaviorRecorder<any, any>;
@@ -76,18 +81,6 @@ class BehaviorRecorder<
     E extends Record<EventType, any> = {}
 > extends BehaviorInfo<{}> {
 
-    /**
-     * 命名序号
-     */
-    public nameIndex: number = 0;
-
-    /**
-     * 获取下一个 ID
-     */
-    public getNextId() {
-        return `B-${this.behaviorId}-${this.nameIndex ++}`;
-    }
-
     /**
      * 行为类型
      */
@@ -107,13 +100,13 @@ class BehaviorRecorder<
      * 创建一个新的行为实例
      */
     public new(): Behavior<P, E> {
-        return new this.behavior(this.getNextId(), getDefaultValue(this.parameterOption));
+        return new this.behavior(getDefaultValue(this.parameterOption));
     }
 
     public constructor(behavior: IBehaviorConstructor<P, E>) {
         super();
         this.behavior = behavior;
-        this.behaviorInstance = new this.behavior(this.getNextId(), {} as any);
+        this.behaviorInstance = new this.behavior({} as any);
         this.parameterOption = this.behaviorInstance.parameterOption;
         this.iconName = this.behaviorInstance.iconName;
         this.behaviorId = this.behaviorInstance.behaviorId;
@@ -124,6 +117,17 @@ class BehaviorRecorder<
     }
 }
 
+interface IArchiveBehavior {
+    behaviorId: string;
+    name: string;
+    id: string;
+    color: number[];
+    priority: number;
+    currentGroupKey: string[];
+    deleteFlag: boolean;
+    parameter: IArchiveParameterValue<IParameter>;
+}
+
 /**
  * 群体的某种行为
  */
@@ -168,9 +172,9 @@ class Behavior<
      */
     public parameterOption: IParameterOption<P> = {} as any;
 
-    public constructor(id: string, parameter: IParameterValue<P>) {
+    public constructor(parameter: IParameterValue<P>) {
         super();
-        this.id = id;
+        this.id = uuid();
         this.parameter = parameter;
     }
 
@@ -200,6 +204,33 @@ class Behavior<
         return this.deleteFlag;
     }
 
+    public toArchive(): IArchiveBehavior {
+        return {
+            behaviorId: this.behaviorId,
+            name: this.name,
+            id: this.id,
+            color: this.color.concat([]),
+            priority: this.priority,
+            currentGroupKey: this.currentGroupKey.concat([]) as any,
+            deleteFlag: this.deleteFlag,
+            parameter: parameter2ArchiveObject(
+                this.parameter, this.parameterOption
+            )
+        };
+    }
+
+    public fromArchive(archive: IArchiveBehavior, paster: IArchiveParseFn): void {
+        this.name = archive.name,
+        this.id = archive.id,
+        this.color = archive.color.concat([]),
+        this.priority = archive.priority,
+        this.currentGroupKey = archive.currentGroupKey.concat([]) as any,
+        this.deleteFlag = archive.deleteFlag,
+        this.parameter = archiveObject2Parameter(
+            archive.parameter, paster
+        ) as any;
+    }
+
     /**
      * 加载时调用
      */
@@ -252,6 +283,6 @@ class Behavior<
 type IRenderBehavior = BehaviorInfo | Behavior;
 
 export {
-    Behavior, BehaviorRecorder, IAnyBehavior, IAnyBehaviorRecorder, BehaviorInfo, IRenderBehavior
-};
-export default { Behavior };
+    Behavior, BehaviorRecorder, IAnyBehavior, IAnyBehaviorRecorder,
+    BehaviorInfo, IRenderBehavior, IArchiveBehavior
+};

source/Model/Clip.ts

@@ -0,0 +1,456 @@
+import { IAnyObject, Model } from "@Model/Model";
+import { v4 as uuid } from "uuid";
+import { Group } from "@Model/Group";
+import { Range } from "@Model/Range";
+import { archiveObject2Parameter, IArchiveParseFn, parameter2ArchiveObject } from "@Model/Parameter";
+
+interface IDrawCommand {
+	type: "points" | "cube";
+	id: string;
+	name?: string;
+	data?: Float32Array;
+	mapId?: number[];
+	position?: number[];
+	radius?: number[];
+	parameter?: IAnyObject;
+}
+
+interface IFrame {
+	commands: IDrawCommand[];
+	duration: number;
+	process: number;
+}
+
+interface IArchiveClip {
+	id: string;
+	time: number;
+	name: string;
+	frames: IFrame[];
+}
+
+/**
+ * 剪辑片段
+ */
+class Clip {
+
+	public id: string;
+
+	/**
+	 * 时间
+	 */
+	public time: number = 0;
+
+	/**
+	 * 用户自定义名称
+	 */
+	public name: string = "";
+
+	/**
+	 * 模型
+	 */
+	public model: Model;
+
+	/**
+	 * 全部帧
+	 */
+	public frames: IFrame[] = [];
+
+	/**
+	 * 是否正在录制
+	 */
+	public isRecording: boolean = false;
+
+	/**
+	 * 判断两个 RenderParameter 是否相同
+	 */
+	public isRenderParameterEqual(p1?: IAnyObject, p2?: IAnyObject, r: boolean = true): boolean {
+
+		if ((p1 && !p2) || (!p1 && p2)) {
+			return false;
+		}
+
+		if (!p1 && !p2) {
+			return true;
+		}
+
+		for (let key in p1!) {
+
+			// 对象递归校验
+			if (typeof p1[key] === "object" && !Array.isArray(p1[key])) {
+
+				if (!(typeof (p2 as any)[key] === "object" && !Array.isArray((p2 as any)[key]))) {
+					return false;
+				}
+
+				// 递归校验
+				if (r) {
+					if (!this.isRenderParameterEqual(p1[key], (p2 as any)[key], false)) {
+						return false;
+					}
+				}
+				
+				// 浅校验
+				else {
+					if (p1[key] !== (p2 as any)[key]) {
+						return false;
+					}
+				}
+			}
+
+			// 数组遍历校验
+			else if (Array.isArray(p1[key])) {
+
+				if (!Array.isArray((p2 as any)[key])) {
+					return false;
+				}
+
+				for (let j = 0; j < p1[key].length; j++) {
+					if (p1[key][j] !== (p2 as any)[key][j]) {
+						return false;
+					}
+				}
+			}
+
+			// 数值直接校验
+			else if (p1[key] !== (p2 as any)[key]) {
+				return false;
+			}
+		}
+
+		return true;
+	}
+
+	public cloneRenderParameter(p?: IAnyObject, res: IAnyObject = {}, r: boolean = true): IAnyObject | undefined {
+
+		if (!p) return undefined;
+
+		for (let key in p) {
+
+			// 对象递归克隆
+			if (typeof p[key] === "object" && !Array.isArray(p[key]) && r) {
+				this.cloneRenderParameter(p[key], res, false);
+			}
+
+			// 数组克隆
+			else if (Array.isArray(p[key])) {
+				(res as any)[key] = p[key].concat([]);
+			}
+
+			// 数值克隆
+			else {
+				(res as any)[key] = p[key];
+			}
+		}
+
+		return res;
+	}
+
+	public isArrayEqual(a1?: Array<number | string>, a2?: Array<number | string>): boolean {
+
+		if ((a1 && !a2) || (!a1 && a2)) {
+			return false;
+		}
+
+		if (!a1 && !a2) {
+			return true;
+		}
+
+		for (let i = 0; i < a1!.length; i++) {
+			if (a1![i] !== a2![i]) {
+				return false;
+			}
+		}
+
+		return true;
+	}
+
+	/**
+	 * 从上一帧获取指令数据
+	 */
+	public getCommandFromLastFrame(type: IDrawCommand["type"], id: string, frame?: IFrame): IDrawCommand | undefined {
+		let lastCommand: IDrawCommand[] = (frame ?? this.frames[this.frames.length - 1])?.commands;
+
+		if (lastCommand) {
+			for (let i = 0; i < lastCommand.length; i++) {
+				if (type === lastCommand[i].type && id === lastCommand[i].id) {
+					return lastCommand[i];
+				}
+			}
+		}
+
+		return undefined;
+	}
+
+	/**
+	 * ID 映射
+	 */
+	private sorterIdMapper: Map<string, number> = new Map();
+	private sorterIdMapperNextId: number = 1;
+
+	/**
+	 * 获取映射ID
+	 */
+	private getMapperId = (id: string): number => {
+		let mapperId = this.sorterIdMapper.get(id);
+		if (mapperId === undefined) {
+			mapperId = this.sorterIdMapperNextId ++;
+			this.sorterIdMapper.set(id, mapperId);
+			return mapperId;
+		} else {
+			return mapperId;
+		}
+	}
+
+	/**
+	 * 录制一帧
+	 */
+	public record(t: number): IFrame {
+		const commands: IDrawCommand[] = [];
+
+		for (let i = 0; i < this.model.objectPool.length; i++) {
+
+            let object = this.model.objectPool[i];
+            object.renderParameter.color = object.color;
+
+            if (object.display && object instanceof Group) {
+
+				// 获取上一帧指令
+				const lastCommand = this.getCommandFromLastFrame("points", object.id);
+
+				// 记录
+				const dataBuffer = object.exportPositionId(this.getMapperId);
+				const recodeData: IDrawCommand = {
+					type: "points",
+					id: object.id,
+					name: object.displayName,
+					data: dataBuffer[0]
+				}
+
+				// 对比校验
+				if (this.isRenderParameterEqual(object.renderParameter, lastCommand?.parameter)) {
+					recodeData.parameter = lastCommand?.parameter;
+				} else {
+					recodeData.parameter = this.cloneRenderParameter(object.renderParameter);
+				}
+
+				if (this.isArrayEqual(dataBuffer[1], lastCommand?.mapId)) {
+					recodeData.mapId = lastCommand?.mapId;
+				} else {
+					recodeData.mapId = dataBuffer[1];
+				}
+
+				commands.push(recodeData);
+            }
+
+
+            if (object.display && object instanceof Range) {
+
+				// 获取上一帧指令
+				const lastCommand = this.getCommandFromLastFrame("cube", object.id);
+
+				// 记录
+				const recodeData: IDrawCommand = {
+					type: "cube",
+					id: object.id,
+					name: object.displayName
+				}
+
+				// 释放上一帧的内存
+				if (this.isArrayEqual(object.position, lastCommand?.position)) {
+					recodeData.position = lastCommand?.position;
+				} else {
+					recodeData.position = object.position.concat([]);
+				}
+
+				if (this.isArrayEqual(object.radius, lastCommand?.radius)) {
+					recodeData.radius = lastCommand?.radius;
+				} else {
+					recodeData.radius = object.radius.concat([]);
+				}
+
+				if (this.isRenderParameterEqual(object.renderParameter, lastCommand?.parameter)) {
+					recodeData.parameter = lastCommand?.parameter;
+				} else {
+					recodeData.parameter = this.cloneRenderParameter(object.renderParameter);
+				}
+
+				commands.push(recodeData);
+            }
+        }
+
+		const dt = this.frames.length <= 0 ? 0 : t;
+		this.time += dt;
+		
+		const frame: IFrame = {
+			commands: commands,
+			duration: dt,
+			process: this.time
+		};
+		
+		this.frames.push(frame);
+		return frame;
+	}
+
+	public readonly LastFrameData: "@" = "@";
+
+	/**
+	 * 压缩帧数据
+	 */
+	public compressed(): IFrame[] {
+		const resFrame: IFrame[] = [];
+
+		for (let i = 0; i < this.frames.length; i++) {
+			const commands = this.frames[i].commands;
+			const res: IDrawCommand[] = [];
+
+			// 处理指令
+			for (let j = 0; j < commands.length; j++) {
+				
+				// 压缩指令
+				const command: IDrawCommand = {
+					id: commands[j].id,
+					type: commands[j].type
+				};
+
+				// 搜索上一帧相同指令
+				const lastCommand = this.frames[i - 1] ?
+					this.getCommandFromLastFrame(command.type, command.id, this.frames[i - 1]) :
+					undefined;
+
+				// 记录
+				command.name = (lastCommand?.name === commands[j].name) ?
+					this.LastFrameData as any : commands[j].name;
+
+				command.data = (lastCommand?.data === commands[j].data) ?
+					this.LastFrameData as any : Array.from(commands[j].data ?? []);
+
+				command.mapId = (lastCommand?.mapId === commands[j].mapId) ?
+					this.LastFrameData as any : commands[j].mapId;
+
+				command.position = (lastCommand?.position === commands[j].position) ?
+					this.LastFrameData as any : commands[j].position?.concat([]);
+
+				command.radius = (lastCommand?.radius === commands[j].radius) ?
+					this.LastFrameData as any : commands[j].radius?.concat([]);
+
+				command.parameter = (lastCommand?.parameter === commands[j].parameter) ?
+					this.LastFrameData as any : parameter2ArchiveObject(commands[j].parameter as any);
+
+				res.push(command);
+			}
+
+			resFrame.push({
+				duration: this.frames[i].duration,
+				process: this.frames[i].process,
+				commands: res
+			})
+		}
+
+		return resFrame;
+	};
+
+	/**
+	 * 加载压缩帧数据
+	 */
+	public uncompressed(frames: IFrame[], paster: IArchiveParseFn): IFrame[] {
+		const resFrame: IFrame[] = [];
+
+		for (let i = 0; i < frames.length; i++) {
+			const commands = frames[i].commands;
+			const res: IDrawCommand[] = [];
+
+			// 处理指令
+			for (let j = 0; j < commands.length; j++) {
+				
+				// 压缩指令
+				const command: IDrawCommand = {
+					id: commands[j].id,
+					type: commands[j].type
+				};
+
+				// 搜索上一帧相同指令
+				const lastCommand = resFrame[resFrame.length - 1] ?
+					this.getCommandFromLastFrame(command.type, command.id, resFrame[resFrame.length - 1]) :
+					undefined;
+
+				// 记录
+				command.name = (this.LastFrameData as any === commands[j].name) ?
+					lastCommand?.name : commands[j].name;
+				
+				command.data = (this.LastFrameData as any === commands[j].data) ?
+					lastCommand?.data : new Float32Array(commands[j].data ?? []);
+
+				command.mapId = (this.LastFrameData as any === commands[j].mapId) ?
+					lastCommand?.mapId : commands[j].mapId;
+
+				command.position = (this.LastFrameData as any === commands[j].position) ?
+					lastCommand?.position : commands[j].position;
+
+				command.radius = (this.LastFrameData as any === commands[j].radius) ?
+					lastCommand?.radius : commands[j].radius;
+
+				command.parameter = (this.LastFrameData as any === commands[j].parameter) ?
+					lastCommand?.parameter : archiveObject2Parameter(commands[j].parameter as any, paster);
+
+				res.push(command);
+			}
+
+			resFrame.push({
+				duration: frames[i].duration,
+				process: frames[i].process,
+				commands: res
+			})
+		}
+
+		return resFrame;
+	}
+
+	/**
+	 * 播放一帧
+	 */
+	public play(frame: IFrame) {
+
+		// 清除全部渲染状态
+        this.model.renderer.clean();
+
+		// 执行全部渲染指令
+		for (let i = 0; i < frame.commands.length; i++) {
+			const command: IDrawCommand = frame.commands[i];
+
+			if (command.type === "cube") {
+				this.model.renderer.cube(command.id, command.position, command.radius, command.parameter);
+			}
+
+			else if (frame.commands[i].type === "points") {
+				this.model.renderer.points(command.id, command.data, command.parameter);
+			}
+		}
+	}
+
+	public equal(clip?: Clip) {
+		return clip === this || clip?.id === this.id;
+	}
+
+	public constructor(model: Model) {
+		this.model = model;
+		this.id = uuid();
+	}
+
+	public toArchive(): IArchiveClip {
+        return {
+            id: this.id,
+			time: this.time,
+			name: this.name,
+			frames: this.compressed()
+        };
+    }
+
+    public fromArchive(archive: IArchiveClip, paster: IArchiveParseFn): void {
+        this.id = archive.id,
+		this.time = archive.time,
+		this.name = archive.name,
+		this.frames = this.uncompressed(archive.frames, paster);
+    }
+}
+
+export { Clip, IFrame, IArchiveClip };

source/Model/CtrlObject.ts

@@ -1,11 +1,29 @@
 import { LabelObject } from "@Model/Label"
+import { v4 as uuid } from "uuid";
 import type { IAnyObject, Model } from "@Model/Model";
 import type { ObjectID } from "@Model/Model";
+import {
+    parameter2ArchiveObject, archiveObject2Parameter,
+    IArchiveParseFn, IObjectParamArchiveType, object2ArchiveObject,
+    IArchiveParameterValue, IParameter
+} from "@Model/Parameter";
+
+interface IArchiveCtrlObject {
+    objectType: "R" | "G";
+    displayName: CtrlObject["displayName"];
+    color: CtrlObject["color"];
+    display: CtrlObject["display"];
+    update: CtrlObject["update"];
+    id: string;
+    renderParameter: IArchiveParameterValue<IParameter>;
+    deleteFlag: CtrlObject["deleteFlag"];
+    labels: IObjectParamArchiveType[];
+}
 
 /**
  * 可控对象
  */
-class CtrlObject extends LabelObject {
+class CtrlObject<A extends IAnyObject = IAnyObject> extends LabelObject {
 
     /**
      * 显示名称
@@ -35,7 +53,7 @@ class CtrlObject extends LabelObject {
     /**
      * 控制模型
      */
-    protected model: Model;
+    public model: Model;
 
     /**
      * 渲染数据
@@ -45,10 +63,10 @@ class CtrlObject extends LabelObject {
     /**
      * 构造器
      */
-    public constructor(model: Model, id: ObjectID) {
+    public constructor(model: Model) {
         super();
         this.model = model;
-        this.id = id;
+        this.id = uuid();
     }
 
     /**
@@ -96,7 +114,36 @@ class CtrlObject extends LabelObject {
     public isDeleted(): boolean {
         return this.deleteFlag;
     }
+
+    public toArchive(): IArchiveCtrlObject & A {
+        return {
+            displayName: this.displayName,
+            color: this.color.concat([]),
+            display: !!this.display,
+            update: !!this.update,
+            id: this.id,
+            renderParameter: parameter2ArchiveObject(this.renderParameter),
+            deleteFlag: !!this.deleteFlag,
+            labels: this.labels.map((label) => {
+                return object2ArchiveObject(label);
+            })
+        } as any;
+    }
+
+    public fromArchive(archive: IArchiveCtrlObject & A, paster: IArchiveParseFn): void {
+        this.displayName = archive.displayName;
+        this.color = archive.color.concat([]);
+        this.display = !!archive.display;
+        this.update = !!archive.update;
+        this.id = archive.id;
+        this.deleteFlag = !!archive.deleteFlag;
+        this.renderParameter = archiveObject2Parameter(
+            archive.renderParameter, paster
+        );
+        this.labels = archive.labels.map((obj) => {
+            return paster(obj) as any;
+        }).filter((c) => !!c);
+    }
 }
 
-export default CtrlObject;
-export { CtrlObject };
+export { CtrlObject, IArchiveCtrlObject };

source/Model/Group.ts

@@ -1,26 +1,47 @@
 import { Individual } from "@Model/Individual";
-import { CtrlObject } from "@Model/CtrlObject";
+import { CtrlObject, IArchiveCtrlObject } from "@Model/CtrlObject";
 import type { Behavior, IAnyBehavior } from "@Model/Behavior"; 
 import { Label } from "@Model/Label";
 import { Range } from "@Model/Range";
 import { Model, ObjectID } from "@Model/Model";
-import { getDefaultValue } from "@Model/Parameter";
+import { IArchiveIndividual } from "@Model/Individual";
+import {
+    getDefaultValue, IArchiveParseFn,
+    IObjectParamArchiveType, object2ArchiveObject
+} from "@Model/Parameter";
 
 enum GenMod {
     Point = "p",
     Range = "R"
 }
 
+interface IArchiveGroup {
+    individuals: IArchiveIndividual[];
+    genMethod: Group["genMethod"];
+    genPoint: Group["genPoint"];
+    genRange: IObjectParamArchiveType | undefined;
+    genCount: Group["genCount"];
+    genErrorMessage: Group["genErrorMessage"];
+    genErrorMessageShowCount: Group["genErrorMessageShowCount"];
+    killCount: Group["killCount"];
+    behaviors: IObjectParamArchiveType[];
+}
+
 /**
  * 群体类型
  */
-class Group extends CtrlObject {
+class Group extends CtrlObject<IArchiveGroup> {
 
 	/**
 	 * 所有个体
 	 */
 	public individuals: Set<Individual> = new Set();
 
+    /**
+     * 缓存的 individuals 数组, 用于存档加载
+     */
+    public cacheIndividualsArray: Array<Individual> = [];
+
     /**
      * 个体生成方式
      */
@@ -406,10 +427,55 @@ class Group extends CtrlObject {
         });
         return dataBuffer;
     }
-    
-    public constructor(model: Model, id: ObjectID) {
 
-        super(model, id);
+    /**
+     * 导出个体id列表
+     */
+    public exportPositionId(idMapper: (id: string) => number ): [Float32Array, number[]] {
+        let bi = 0; let ii = 0;
+        let dataBuffer = new Float32Array(this.individuals.size * 3);
+        let idBUffer: number[] = new Array(this.individuals.size).fill("");
+        this.individuals.forEach((individual) => {
+            idBUffer[ii ++] = idMapper(individual.id);
+            dataBuffer[bi ++] = individual.position[0];
+            dataBuffer[bi ++] = individual.position[1];
+            dataBuffer[bi ++] = individual.position[2];
+        });
+        return [dataBuffer, idBUffer];
+    }
+
+    public override toArchive(): IArchiveCtrlObject & IArchiveGroup {
+        return {
+            ...super.toArchive(),
+            objectType: "G",
+            genMethod: this.genMethod,
+            genPoint: this.genPoint.concat([]),
+            genRange: object2ArchiveObject(this.genRange) as IObjectParamArchiveType,
+            genCount: this.genCount,
+            genErrorMessage: this.genErrorMessage,
+            genErrorMessageShowCount: this.genErrorMessageShowCount,
+            killCount: this.killCount,
+            behaviors: object2ArchiveObject(this.behaviors) as IObjectParamArchiveType[]
+        };
+    }
+
+    public override fromArchive(archive: IArchiveCtrlObject & IArchiveGroup, paster: IArchiveParseFn): void {
+        super.fromArchive(archive, paster);
+        this.genMethod = archive.genMethod,
+        this.genPoint = archive.genPoint.concat([]),
+        this.genRange = archive.genRange ? paster(archive.genRange) as any : undefined,
+        this.genCount = archive.genCount,
+        this.genErrorMessage = archive.genErrorMessage,
+        this.genErrorMessageShowCount = archive.genErrorMessageShowCount,
+        this.killCount = archive.killCount,
+        this.behaviors = archive.behaviors.map((item) => {
+            return item ? paster(item) as any : undefined;
+        }).filter(c => !!c);
+    }
+    
+    public constructor(model: Model) {
+
+        super(model);
         
         if (model.renderer) {
             this.renderParameter = getDefaultValue(model.renderer.pointsParameterOption);
@@ -417,5 +483,4 @@ class Group extends CtrlObject {
     }
 }
 
-export default Group;
-export { Group, GenMod };
+export { Group, GenMod, IArchiveGroup };

source/Model/Individual.ts

@@ -1,5 +1,15 @@
 import type { Group } from "@Model/Group";
-import { ObjectID } from "@Model/Model";
+import { IAnyObject, ObjectID } from "@Model/Model";
+import { IArchiveParseFn, object2ArchiveObject, isArchiveObjectType } from "@Model/Parameter";
+
+interface IArchiveIndividual {
+    id: string;
+    position: number[];
+    velocity: number[];
+    acceleration: number[];
+    force: number[];
+    metaData: IAnyObject;
+}
 
 /**
  * 群中的个体类型
@@ -47,6 +57,8 @@ class Individual {
         }
     }
 
+    public id: string;
+
 	/**
 	 * 坐标
 	 */
@@ -95,6 +107,7 @@ class Individual {
 	 */
 	public constructor(group: Group) {
 		this.group = group;
+        this.id = this.group.model.getNextIndividualId();
 	}
 
     public isDie(): boolean {
@@ -167,7 +180,67 @@ class Individual {
         this.metaData.set(key, value);
         return value;
     }
+
+    public toArchive(): IArchiveIndividual {
+
+        const metaDataArchive = {} as IAnyObject;
+        this.metaData.forEach((value, key) => {
+            
+            // 处理内置对象
+            let ltObject = object2ArchiveObject(value);
+            if (ltObject) {
+                metaDataArchive[key] = ltObject;
+            }
+
+            // 处理数组
+            else if (Array.isArray(value)) {
+                metaDataArchive[key] = value.concat([]);
+            }
+
+            // 处理值
+            else {
+                metaDataArchive[key] = value;
+            }
+        });
+
+        return {
+            id: this.id,
+            position: this.position.concat([]),
+            velocity: this.velocity.concat([]),
+            acceleration: this.acceleration.concat([]),
+            force: this.force.concat([]),
+            metaData: metaDataArchive
+        };
+    }
+
+    public fromArchive(archive: IArchiveIndividual, paster: IArchiveParseFn): void {
+
+        const metaData = new Map() as Map<ObjectID, any>;
+        for (const key in archive.metaData) {
+            
+            const value = archive.metaData[key];
+
+            // 处理内置对象
+            if (value instanceof Object && isArchiveObjectType(value)) {
+                metaData.set(key, paster(value));
+            }
+
+            else if (Array.isArray(value)) {
+                metaData.set(key, value.concat([]));
+            }
+
+            else {
+                metaData.set(key, value);
+            }
+        }
+
+        this.id = archive.id,
+        this.position = archive.position.concat([]),
+        this.velocity = archive.velocity.concat([]),
+        this.acceleration = archive.acceleration.concat([]),
+        this.force = archive.force.concat([]),
+        this.metaData = metaData;
+    }
 }
 
-export default Individual;
-export { Individual };
+export { Individual, IArchiveIndividual };

source/Model/Label.ts

@@ -1,4 +1,13 @@
 import type { Model, ObjectID } from "@Model/Model";
+import { v4 as uuid } from "uuid";
+
+interface IArchiveLabel {
+    isBuildIn: boolean;
+    id: string;
+    name: string;
+    color: number[];
+    deleteFlag: boolean;
+}
 
 /**
  * 数据标签
@@ -35,9 +44,9 @@ class Label {
      * @param id 标签 ID
      * @param name 用户定义的名称
      */
-    public constructor(model: Model, id: ObjectID, name?: string) {
+    public constructor(model: Model, name?: string) {
         this.model = model;
-        this.id = id;
+        this.id = uuid();
         this.name = name ?? this.name;
     }
 
@@ -77,10 +86,29 @@ class Label {
     /**
      * 设置为内置标签
      */
-    public setBuildInLabel(): this {
+    public setBuildInLabel(id: string): this {
+        this.id = id;
         this.isBuildIn = true;
         return this;
     }
+
+    public toArchive(): IArchiveLabel {
+        return {
+            isBuildIn: this.isBuildIn,
+            id: this.id,
+            name: this.name,
+            color: this.color.concat([]),
+            deleteFlag: this.deleteFlag
+        } as any;
+    }
+
+    public fromArchive(archive: IArchiveLabel): void {
+        this.isBuildIn = archive.isBuildIn,
+        this.id = archive.id,
+        this.name = archive.name,
+        this.color = archive.color.concat([]),
+        this.deleteFlag = archive.deleteFlag
+    }
 }
 
 /**
@@ -91,7 +119,7 @@ class LabelObject {
     /**
      * 标签集合
      */
-    private labels: Label[] = [];
+    public labels: Label[] = [];
 
     /**
      * 获取全部 Label
@@ -131,4 +159,4 @@ class LabelObject {
     }
 }
 
-export { Label, LabelObject };
+export { Label, LabelObject, IArchiveLabel };

source/Model/Model.ts

@@ -2,10 +2,10 @@ import { Label } from "@Model/Label";
 import { Group } from "@Model/Group";
 import { Range } from "@Model/Range";
 import { IParamValue } from "@Model/Parameter";
-import { Individual } from "@Model/Individual";
 import { CtrlObject } from "@Model/CtrlObject";
-import { Emitter, EventType, EventMixin } from "@Model/Emitter";
+import { Emitter } from "@Model/Emitter";
 import { AbstractRenderer } from "@Model/Renderer";
+import { Clip } from "@Model/Clip";
 import { Behavior, IAnyBehavior, IAnyBehaviorRecorder } from "@Model/Behavior";
 
 /**
@@ -23,6 +23,7 @@ type ModelEvent = {
     objectChange: CtrlObject[];
     individualChange: Group;
     behaviorChange: IAnyBehavior;
+    clipChange: Clip[];
 };
 
 /**
@@ -31,11 +32,14 @@ type ModelEvent = {
 class Model extends Emitter<ModelEvent> {
 
     /**
-     * 下一个需要分配的 ID
+     * 个体 ID 生成
      */
-    private idIndex: number = 1;
-    public nextId(label: string = "U"): string {
-        return `${label}-${this.idIndex ++}`;
+    public nextIndividualId: number = 0;
+
+    public getNextIndividualId() {
+        this.nextIndividualId ++;
+        const random = Math.random().toString(36).slice(-8);
+        return `${this.nextIndividualId}-${random}`;
     }
 
     /**
@@ -59,26 +63,26 @@ class Model extends Emitter<ModelEvent> {
     /**
      * 内置标签-全部范围标签
      */
-    public allRangeLabel = new Label(this, "AllRange").setBuildInLabel();
+    public allRangeLabel = new Label(this).setBuildInLabel("AllRange");
 
     /**
      * 内置标签-全部群标签
      */
-    public allGroupLabel = new Label(this, "AllGroup").setBuildInLabel();
+    public allGroupLabel = new Label(this).setBuildInLabel("AllGroup");
 
     /**
      * 内置标签-全部群标签
      */
-    public currentGroupLabel = new Label(this, "CurrentGroupLabel").setBuildInLabel();
+    public currentGroupLabel = new Label(this).setBuildInLabel("CurrentGroupLabel");
 
     /**
      * 添加标签
      */
     public addLabel(name: string): Label {
-        console.log(`Model: Creat label with id ${this.idIndex}`);
-        let label = new Label(this, this.nextId("L"), name);
+        let label = new Label(this, name);
         this.labelPool.push(label);
         this.emit("labelChange", this.labelPool);
+        console.log(`Model: Creat label with id ${label.id}`);
         return label;
     }
 
@@ -140,10 +144,10 @@ class Model extends Emitter<ModelEvent> {
      * 添加组
      */
     public addGroup(): Group {
-        console.log(`Model: Creat group with id ${this.idIndex}`);
-        let group = new Group(this, this.nextId("G"));
+        let group = new Group(this);
         this.objectPool.push(group);
         this.emit("objectChange", this.objectPool);
+        console.log(`Model: Creat group with id ${group.id}`);
         return group;
     }
 
@@ -151,10 +155,10 @@ class Model extends Emitter<ModelEvent> {
      * 添加范围
      */
     public addRange(): Range {
-        console.log(`Model: Creat range with id ${this.idIndex}`);
-        let range = new Range(this, this.nextId("R"));
+        let range = new Range(this);
         this.objectPool.push(range);
         this.emit("objectChange", this.objectPool);
+        console.log(`Model: Creat range with id ${range.id}`);
         return range;
     }
 
@@ -328,6 +332,59 @@ class Model extends Emitter<ModelEvent> {
         }
     }
 
+    /**
+     * 剪辑数据
+     */
+    public clipPool: Clip[] = [];
+
+    /**
+     * 新建剪辑片段
+     */
+    public addClip(name?: string): Clip {
+        let newClip = new Clip(this);
+        newClip.name = name ?? "";
+        this.clipPool.push(newClip);
+        console.log(`Model: Create clip ${name ?? newClip.id}`);
+        this.emit("clipChange", this.clipPool);
+        return newClip;
+    }
+
+    public getClipById(id: ObjectID): Clip | undefined {
+        for (let i = 0; i < this.clipPool.length; i++) {
+            if (this.clipPool[i].id.toString() === id.toString()) {
+                return this.clipPool[i];
+            }
+        }
+    }
+
+    /**
+     * 删除一个剪辑片段
+     */
+    public deleteClip(name: ObjectID | Clip) {
+        let deletedClip: Clip | undefined;
+        let index = 0;
+
+        for (let i = 0; i < this.clipPool.length; i++) {
+            if (name instanceof Clip) {
+                if (this.clipPool[i].equal(name)) {
+                    deletedClip = this.clipPool[i];
+                    index = i;
+                }
+            }
+            
+            else if (name === this.clipPool[i].id) {
+                deletedClip = this.clipPool[i];
+                index = i;
+            }
+        }
+
+        if (deletedClip) {
+            this.clipPool.splice(index, 1);
+            console.log(`Model: Delete clip ${deletedClip.name ?? deletedClip.id}`);
+            this.emit("clipChange", this.clipPool);
+        }
+    }
+
     /**
      * 渲染器
      */
@@ -370,8 +427,6 @@ class Model extends Emitter<ModelEvent> {
                 object.runner(t, "finalEffect");
             }
         }
-
-        this.draw();
     }
 
     public draw() {
@@ -393,14 +448,4 @@ class Model extends Emitter<ModelEvent> {
     }
 }
 
-export {
-    Individual,
-    Group,
-    Emitter,
-    EventType,
-    EventMixin,
-    Model,
-    CtrlObject,
-    ObjectID,
-    IAnyObject
-}
+export { Model, ObjectID, IAnyObject }

source/Model/Parameter.ts

@@ -1,6 +1,14 @@
-import type { Group } from "@Model/Group";
-import type { Range } from "@Model/Range";
-import type { Label } from "@Model/Label";
+import { Group } from "@Model/Group";
+import { Range } from "@Model/Range";
+import { Label } from "@Model/Label";
+import { Behavior, IAnyBehavior } from "@Model/Behavior";
+import { Individual } from "@Model/Individual";
+import { CtrlObject } from "@Model/CtrlObject";
+
+type IObjectParamArchiveType = {
+    __LIVING_TOGETHER_OBJECT_ID: string;
+    __LIVING_TOGETHER_OBJECT_TYPE: "Individual" | "Range" | "Group" | "Label" | "Behavior";
+}
 
 type IObjectParamCacheType<P, Q = P> = {
     picker: P;
@@ -26,6 +34,15 @@ type IMapObjectParamTypeKeyToType = {
     "CLG": IObjectParamCacheType<Label | Group | undefined, Group[]>;
 }
 
+type IMapArchiveObjectParamTypeKeyToType = {
+    "R": IObjectParamCacheType<IObjectParamArchiveType | undefined>;
+    "G": IObjectParamCacheType<IObjectParamArchiveType | undefined>;
+    "LR": IObjectParamCacheType<IObjectParamArchiveType | undefined, IObjectParamArchiveType[]>;
+    "LG": IObjectParamCacheType<IObjectParamArchiveType | undefined, IObjectParamArchiveType[]>;
+    "CG": IObjectParamCacheType<IObjectParamArchiveType | undefined>;
+    "CLG": IObjectParamCacheType<IObjectParamArchiveType | undefined, IObjectParamArchiveType[]>;
+}
+
 type IMapVectorParamTypeKeyToType = {
     "vec": number[];
     "color": number[];
@@ -35,30 +52,42 @@ type IMapVectorParamTypeKeyToType = {
  * 参数类型映射
  */
 type AllMapType = IMapBasicParamTypeKeyToType & IMapObjectParamTypeKeyToType & IMapVectorParamTypeKeyToType;
+type AllArchiveMapType = IMapBasicParamTypeKeyToType & IMapArchiveObjectParamTypeKeyToType & IMapVectorParamTypeKeyToType;
 type IParamType = keyof AllMapType;
 type IObjectType = keyof IMapObjectParamTypeKeyToType;
 type IVectorType = keyof IMapVectorParamTypeKeyToType;
 type IParamValue<K extends IParamType> = AllMapType[K];
+type IArchiveParamValue<K extends IParamType> = AllArchiveMapType[K];
 
 /**
  * 特殊对象类型判定
  */
 const objectTypeListEnumSet = new Set<string>(["R", "G", "LR", "LG", "CG", "CLG"]);
 
- /**
-  * 对象断言表达式
-  */
+/**
+ * 对象断言表达式
+ */
 function isObjectType(key: string): key is IVectorType {
     return objectTypeListEnumSet.has(key);
 }
  
- /**
-  * 向量断言表达式
-  */
+/**
+ * 向量断言表达式
+ */
 function isVectorType(key: string): key is IObjectType {
     return key === "vec";
 }
 
+/**
+ * 压缩对象断言表达式
+ */
+function isArchiveObjectType(key: Object): key is IObjectParamArchiveType {
+    return !!(
+        (key as IObjectParamArchiveType).__LIVING_TOGETHER_OBJECT_ID &&
+        (key as IObjectParamArchiveType).__LIVING_TOGETHER_OBJECT_TYPE
+    );
+}
+
 /**
  * 模型参数类型
  */
@@ -144,6 +173,10 @@ type IParameterValue<P extends IParameter> = {
     [X in keyof P]: IParamValue<P[X]>
 }
 
+type IArchiveParameterValue<P extends IParameter> = {
+    [X in keyof P]: IArchiveParamValue<P[X]>
+}
+
 function getDefaultValue<P extends IParameter> (option: IParameterOption<P>): IParameterValue<P> {
     let defaultObj = {} as IParameterValue<P>;
     for (let key in option) {
@@ -193,7 +226,139 @@ function getDefaultValue<P extends IParameter> (option: IParameterOption<P>): IP
     return defaultObj;
 }
 
+type IRealObjectType = Range | Group | Label | IAnyBehavior | Individual | CtrlObject;
+type IArchiveParseFn = (archive: IObjectParamArchiveType) => IRealObjectType | undefined;
+
+function object2ArchiveObject(object: IRealObjectType | IRealObjectType[] | any, testArray: boolean = true): 
+IObjectParamArchiveType | IObjectParamArchiveType[] | undefined {
+    if (object instanceof Individual) {
+        return {
+            __LIVING_TOGETHER_OBJECT_ID: object.id,
+            __LIVING_TOGETHER_OBJECT_TYPE: "Individual"
+        }
+    }
+    else if (object instanceof Range) {
+        return {
+            __LIVING_TOGETHER_OBJECT_ID: object.id,
+            __LIVING_TOGETHER_OBJECT_TYPE: "Range"
+        }
+    } else if (object instanceof Group) {
+        return {
+            __LIVING_TOGETHER_OBJECT_ID: object.id,
+            __LIVING_TOGETHER_OBJECT_TYPE: "Group"
+        }
+    } else if (object instanceof Label) {
+        return {
+            __LIVING_TOGETHER_OBJECT_ID: object.id,
+            __LIVING_TOGETHER_OBJECT_TYPE: "Label"
+        }
+    } else if (object instanceof Behavior) {
+        return {
+            __LIVING_TOGETHER_OBJECT_ID: object.id,
+            __LIVING_TOGETHER_OBJECT_TYPE: "Behavior"
+        }
+    } else if (Array.isArray(object) && testArray) {
+        const hasValue = (item: any): item is IObjectParamArchiveType => !!item;
+        return object.map(item => object2ArchiveObject(item, false)).filter(hasValue);
+    } else {
+        return undefined;
+    }
+}
+
+function parameter2ArchiveObject<P extends IParameter>
+(value: IParameterValue<P>, option?: IParameterOption<P>): IArchiveParameterValue<P> {
+    let archive = {} as IArchiveParameterValue<P>;
+
+    const handelColl = (key: string, cValue: IParamValue<IParamType>) => {
+
+        // 处理对象类型
+        if (cValue instanceof Object && !Array.isArray(cValue)) {
+            const picker = (cValue as IObjectParamCacheType<any>).picker;
+            const objects = (cValue as IObjectParamCacheType<any>).objects;
+
+            (archive[key] as any) = {
+                picker: object2ArchiveObject(picker),
+                objects: object2ArchiveObject(objects)
+            }
+        }
+
+        // 处理数组类型
+        else if (Array.isArray(cValue)) {
+            (archive[key] as any) = cValue.concat([]);
+        }
+
+        // 处理数值
+        else {
+            (archive[key] as any) = cValue;
+        }
+    }
+
+    // 存在参考设置对象
+    if (option) {
+        for (const key in option) {
+            handelColl(key, value[key]);
+        }
+    }
+    
+    // 不存在设置对象
+    else {
+        for (const key in value) {
+            handelColl(key, value[key]);
+        }
+    }
+
+    return archive;
+}
+
+function archiveObject2Parameter<P extends IParameter>
+(value: IArchiveParameterValue<P>, parse: IArchiveParseFn, option?: IParameterOption<P>): IParameterValue<P> {
+    let parameter = {} as IParameterValue<P>;
+
+    const handelColl = (key: string, cValue: IArchiveParamValue<IParamType>) => {
+
+        // 处理对象类型
+        if (cValue instanceof Object && !Array.isArray(cValue)) {
+            const picker = (cValue as IObjectParamCacheType<IObjectParamArchiveType>).picker;
+            const objects = (cValue as IObjectParamCacheType<IObjectParamArchiveType>).objects;
+
+            (parameter[key] as any) = {
+                picker: picker ? parse(picker) : picker,
+                objects: objects ? Array.isArray(objects) ? objects.map(item => parse(item)) : parse(objects) : objects
+            }
+        }
+
+        // 处理数组类型
+        else if (Array.isArray(cValue)) {
+            (parameter[key] as any) = cValue.concat([]);
+        }
+
+        // 处理数值
+        else {
+            (parameter[key] as any) = cValue;
+        }
+    }
+
+    // 存在参考设置对象
+    if (option) {
+        for (const key in option) {
+            handelColl(key, value[key]);
+        }
+    }
+    
+    // 不存在设置对象
+    else {
+        for (const key in value) {
+            handelColl(key, value[key]);
+        }
+    }
+
+    return parameter;
+}
+
 export {
     IParamType, IParamValue, isObjectType, isVectorType, getDefaultValue,
-    IParameterOptionItem, IParameter, IParameterOption, IParameterValue
+    IParameterOptionItem, IParameter, IParameterOption, IParameterValue,
+    object2ArchiveObject, parameter2ArchiveObject, archiveObject2Parameter,
+    IArchiveParseFn, IObjectParamArchiveType, isArchiveObjectType,
+    IArchiveParameterValue, IRealObjectType
 }

source/Model/Range.ts

@@ -1,11 +1,16 @@
-import { CtrlObject } from "@Model/CtrlObject";
-import { Model, ObjectID } from "@Model/Model";
-import { getDefaultValue } from "@Model/Parameter";
+import { CtrlObject, IArchiveCtrlObject } from "@Model/CtrlObject";
+import { Model } from "@Model/Model";
+import { getDefaultValue, IArchiveParseFn, parameter2ArchiveObject } from "@Model/Parameter";
+
+interface IArchiveRange {
+    position: Range["position"];
+    radius: Range["radius"];
+}
 
 /**
  * 范围
  */
-class Range extends CtrlObject {
+class Range extends CtrlObject<IArchiveRange> {
 
     /**
      * 坐标
@@ -17,16 +22,30 @@ class Range extends CtrlObject {
      */
     public radius: number[] = [1, 1, 1];
 
-    public constructor(model: Model, id: ObjectID) {
+    public constructor(model: Model) {
 
-        super(model, id);
+        super(model);
         
         if (model.renderer) {
             this.renderParameter = getDefaultValue(model.renderer.cubeParameterOption);
         }
     }
 
+    public override toArchive(): IArchiveCtrlObject & IArchiveRange {
+        return {
+            ...super.toArchive(),
+            objectType: "R",
+            position: this.position.concat([]),
+            radius: this.radius.concat([])
+        };
+    }
+
+    public override fromArchive(archive: IArchiveCtrlObject & IArchiveRange, paster: IArchiveParseFn): void {
+        super.fromArchive(archive, paster);
+        this.position = archive.position.concat([]),
+        this.radius = archive.radius.concat([])
+    }
+
 }
 
-export default Range;
-export { Range }; 
+export { Range, IArchiveRange }; 

source/Page/SimulatorDesktop/SimulatorDesktop.scss

@@ -0,0 +1,11 @@
+div.app-root {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    overflow: hidden;
+
+    div.app-root-space {
+        height: 100%;
+        display: flex;
+    }
+}

source/Page/SimulatorDesktop/SimulatorDesktop.tsx

@@ -0,0 +1,122 @@
+import { Component, ReactNode } from "react";
+import { DndProvider } from 'react-dnd'
+import { HTML5Backend } from 'react-dnd-html5-backend'
+import { SettingProvider, Setting, Platform } from "@Context/Setting";
+import { Theme, BackgroundLevel, FontLevel } from "@Component/Theme/Theme";
+import { ISimulatorAPI } from "@Electron/SimulatorAPI";
+import { StatusProvider, Status } from "@Context/Status";
+import { ElectronProvider, getElectronAPI } from "@Context/Electron";
+import { ClassicRenderer } from "@GLRender/ClassicRenderer";
+import { initializeIcons } from '@fluentui/font-icons-mdl2';
+import { RootContainer } from "@Component/Container/RootContainer";
+import { LayoutDirection } from "@Context/Layout";
+import { CommandBar } from "@Component/CommandBar/CommandBar";
+import { LoadFile } from "@Component/LoadFile/LoadFile";
+import { HeaderBar } from "@Component/HeaderBar/HeaderBar";
+import { Popup } from "@Component/Popup/Popup";
+import { Entry } from "../Entry/Entry";
+import "./SimulatorDesktop.scss";
+
+initializeIcons("./font-icon/");
+
+class SimulatorDesktop extends Component {
+
+    /**
+     * Electron API
+     */
+    public electron: ISimulatorAPI;
+    
+    /**
+     * 全局设置
+     */
+    private setting: Setting;
+
+    /**
+     * 全局状态
+     */
+    private status: Status;
+
+    public constructor(props: any) {
+        super(props);
+
+        // TODO: 这里要读取设置
+        this.setting = new Setting();
+        this.setting.platform = Platform.desktop;
+
+        // TODO: 这里要读取存档
+        const classicRender = new ClassicRenderer().onLoad();
+        this.status = new Status();
+        this.status.bindRenderer(classicRender);
+        this.status.setting = this.setting;
+
+        (window as any).LT = {
+            status: this.status,
+            setting: this.setting
+        };
+
+        this.electron = getElectronAPI();
+    }
+
+    public componentDidMount() {
+        this.setting.layout.setData({
+            items: [
+                {
+                    items: [
+                        {panels: ["RenderView"]},
+                        {
+                            items: [{panels: ["BehaviorList", "ClipPlayer"]}, {panels: ["LabelList"]}],
+                            scale: 80,
+                            layout: LayoutDirection.X
+                        }
+                    ],
+                    scale: 60,
+                    layout: LayoutDirection.Y
+                },
+                {
+                    items: [{
+                        panels: ["ObjectList"]
+                    }, {
+                        panels: ["GroupDetails", "RangeDetails", "LabelDetails", "BehaviorDetails", "ClipDetails"]
+                    }],
+                    scale: 30,
+                    layout: LayoutDirection.Y
+                }
+            ],
+            scale: 60,
+            layout: LayoutDirection.X
+        })
+    }
+
+    public render(): ReactNode {
+        return <SettingProvider value={this.setting}>
+            <StatusProvider value={this.status}>
+                <ElectronProvider value={this.electron}>
+                    <DndProvider backend={HTML5Backend}>
+                        {this.renderContent()}
+                    </DndProvider>
+                </ElectronProvider>
+            </StatusProvider>
+        </SettingProvider>
+    }
+
+    private renderContent(): ReactNode {
+        return <Theme 
+            className="app-root"
+            backgroundLevel={BackgroundLevel.Level5}
+            fontLevel={FontLevel.Level3}
+        >
+            <Popup/>
+            <LoadFile>
+                <HeaderBar height={35}/>
+                <div className="app-root-space" style={{
+                    height: `calc( 100% - ${35}px)`
+                }}>
+                    <CommandBar/>
+                    <RootContainer/>
+                </div>
+            </LoadFile>
+        </Theme>
+    }
+}
+
+Entry.renderComponent(SimulatorDesktop);

source/Page/SimulatorWeb/SimulatorWeb.tsx

@@ -1,17 +1,18 @@
 import { Component, ReactNode } from "react";
-import { SettingProvider, Setting } from "@Context/Setting";
+import { DndProvider } from 'react-dnd'
+import { HTML5Backend } from 'react-dnd-html5-backend'
+import { SettingProvider, Setting, Platform } from "@Context/Setting";
 import { Theme, BackgroundLevel, FontLevel } from "@Component/Theme/Theme";
 import { StatusProvider, Status } from "@Context/Status";
 import { ClassicRenderer } from "@GLRender/ClassicRenderer";
 import { initializeIcons } from '@fluentui/font-icons-mdl2';
 import { RootContainer } from "@Component/Container/RootContainer";
 import { LayoutDirection } from "@Context/Layout";
-import { AllBehaviors, getBehaviorById } from "@Behavior/Behavior";
+import { LoadFile } from "@Component/LoadFile/LoadFile";
 import { CommandBar } from "@Component/CommandBar/CommandBar";
 import { HeaderBar } from "@Component/HeaderBar/HeaderBar";
 import { Popup } from "@Component/Popup/Popup";
 import { Entry } from "../Entry/Entry";
-import { Group } from "@Model/Group";
 import "./SimulatorWeb.scss";
 
 initializeIcons("https://img.mrkbear.com/fabric-cdn-prod_20210407.001/");
@@ -33,7 +34,7 @@ class SimulatorWeb extends Component {
 
         // TODO: 这里要读取设置
         this.setting = new Setting();
-        (window as any).setting = (this.setting as any);
+        this.setting.platform = Platform.web;
 
         // TODO: 这里要读取存档
         const classicRender = new ClassicRenderer().onLoad();
@@ -41,119 +42,10 @@ class SimulatorWeb extends Component {
         this.status.bindRenderer(classicRender);
         this.status.setting = this.setting;
 
-        const randomPosition = (group: Group) => {
-            group.individuals.forEach((individual) => {
-                individual.position[0] = (Math.random() - .5) * 2;
-                individual.position[1] = (Math.random() - .5) * 2;
-                individual.position[2] = (Math.random() - .5) * 2;
-            })
+        (window as any).LT = {
+            status: this.status,
+            setting: this.setting
         };
-
-        // 测试代码
-        if (false) {
-            let group = this.status.newGroup();
-            let range = this.status.newRange();
-            range.color = [.1, .5, .9];
-            group.new(100);
-            group.color = [.8, .1, .6];
-            randomPosition(group);
-            this.status.model.update(0);
-            this.status.newLabel().name = "New Label";
-            this.status.newLabel().name = "Test Label 01";
-            let template = this.status.model.addBehavior(AllBehaviors[0]);
-            template.name = "Template"; template.color = [150, 20, 220];
-            let dynamic = this.status.model.addBehavior(AllBehaviors[1]);
-            dynamic.name = "Dynamic"; dynamic.color = [250, 200, 80];
-            let brownian = this.status.model.addBehavior(AllBehaviors[2]);
-            brownian.name = "Brownian"; brownian.color = [200, 80, 250];
-            let boundary = this.status.model.addBehavior(AllBehaviors[3]);
-            boundary.name = "Boundary"; boundary.color = [80, 200, 250];
-            boundary.parameter.range.picker = this.status.model.allRangeLabel;
-            group.addBehavior(template);
-            group.addBehavior(dynamic);
-            group.addBehavior(brownian);
-            group.addBehavior(boundary);
-        }
-
-        // 鱼群模型测试
-        if (true) {
-            let fish1 = this.status.newGroup();
-            let fish2 = this.status.newGroup();
-            let shark = this.status.newGroup();
-            let range = this.status.newRange();
-
-            range.displayName = "Experimental site";
-            range.color = [.8, .1, .6];
-
-            fish1.new(100);
-            fish1.displayName = "Fish A";            
-            fish1.color = [.1, .5, .9];
-            randomPosition(fish1);
-
-            fish2.new(50);
-            fish2.displayName = "Fish B";            
-            fish2.color = [.3, .2, .9];
-            randomPosition(fish2);
-
-            shark.new(3);
-            shark.displayName = "Shark";
-            shark.color = [.8, .2, .3];
-            shark.renderParameter.size = 100;
-            shark.renderParameter.shape = "5";
-            randomPosition(shark);
-
-            this.status.model.update(0);
-            let fishLabel = this.status.newLabel();
-            fishLabel.name = "Fish";
-            fish1.addLabel(fishLabel);
-            fish2.addLabel(fishLabel);
-
-            let template = this.status.model.addBehavior(getBehaviorById("Template"));
-            template.name = "Template"; template.color = [150, 20, 220];
-
-            let dynamicFish = this.status.model.addBehavior(getBehaviorById("PhysicsDynamics"));
-            dynamicFish.name = "Dynamic Fish"; dynamicFish.color = [250, 200, 80];
-
-            let dynamicShark = this.status.model.addBehavior(getBehaviorById("PhysicsDynamics"));
-            dynamicShark.name = "Dynamic Shark"; dynamicShark.color = [250, 200, 80];
-            dynamicShark.parameter.maxAcceleration = 8.5;
-            dynamicShark.parameter.maxVelocity = 15.8;
-            dynamicShark.parameter.resistance = 3.6;
-
-            let brownian = this.status.model.addBehavior(getBehaviorById("Brownian"));
-            brownian.name = "Brownian"; brownian.color = [200, 80, 250];
-
-            let boundary = this.status.model.addBehavior(getBehaviorById("BoundaryConstraint"));
-            boundary.name = "Boundary"; boundary.color = [80, 200, 250];
-            boundary.parameter.range.picker = this.status.model.allRangeLabel;
-
-            let tracking = this.status.model.addBehavior(getBehaviorById("Tracking"));
-            tracking.name = "Tracking"; tracking.color = [80, 200, 250];
-            tracking.parameter.target.picker = fishLabel;
-
-            let attacking = this.status.model.addBehavior(getBehaviorById("Attacking"));
-            attacking.name = "Attacking"; attacking.color = [120, 100, 250];
-            attacking.parameter.target.picker = fishLabel;
-
-            fish1.addBehavior(dynamicFish);
-            fish1.addBehavior(brownian);
-            fish1.addBehavior(boundary);
-
-            fish2.addBehavior(dynamicFish);
-            fish2.addBehavior(brownian);
-            fish2.addBehavior(boundary);
-
-            shark.addBehavior(dynamicShark);
-            shark.addBehavior(boundary);
-            shark.addBehavior(tracking);
-            shark.addBehavior(attacking);
-
-            setTimeout(() => {
-                this.status.model.updateBehaviorParameter();
-            }, 200)
-        }
-
-        (window as any).s = this;
     }
 
     public componentDidMount() {
@@ -163,7 +55,7 @@ class SimulatorWeb extends Component {
                     items: [
                         {panels: ["RenderView"]},
                         {
-                            items: [{panels: ["BehaviorList"]}, {panels: ["LabelList"]}],
+                            items: [{panels: ["BehaviorList", "ClipPlayer"]}, {panels: ["LabelList"]}],
                             scale: 80,
                             layout: LayoutDirection.X
                         }
@@ -175,7 +67,7 @@ class SimulatorWeb extends Component {
                     items: [{
                         panels: ["ObjectList"]
                     }, {
-                        panels: ["GroupDetails", "RangeDetails", "LabelDetails", "BehaviorDetails"]
+                        panels: ["GroupDetails", "RangeDetails", "LabelDetails", "BehaviorDetails", "ClipDetails"]
                     }],
                     scale: 30,
                     layout: LayoutDirection.Y
@@ -189,7 +81,9 @@ class SimulatorWeb extends Component {
     public render(): ReactNode {
         return <SettingProvider value={this.setting}>
             <StatusProvider value={this.status}>
-                {this.renderContent()}
+                <DndProvider backend={HTML5Backend}>
+                    {this.renderContent()}
+                </DndProvider>
             </StatusProvider>
         </SettingProvider>
     }
@@ -201,13 +95,15 @@ class SimulatorWeb extends Component {
             fontLevel={FontLevel.Level3}
         >
             <Popup/>
-            <HeaderBar height={45}/>
-            <div className="app-root-space" style={{
-                height: `calc( 100% - ${45}px)`
-            }}>
-                <CommandBar width={45}/>
-                <RootContainer />
-            </div>
+            <LoadFile>
+                <HeaderBar height={45}/>
+                <div className="app-root-space" style={{
+                    height: `calc( 100% - ${45}px)`
+                }}>
+                    <CommandBar/>
+                    <RootContainer/>
+                </div>
+            </LoadFile>
         </Theme>
     }
 }

source/Panel/ClipDetails/ClipDetails.tsx

@@ -0,0 +1,60 @@
+import { Component, ReactNode } from "react";
+import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
+import { TogglesInput } from "@Input/TogglesInput/TogglesInput";
+import { ConfirmPopup } from "@Component/ConfirmPopup/ConfirmPopup";
+import { AttrInput } from "@Input/AttrInput/AttrInput";
+import { Message } from "@Input/Message/Message";
+import { Clip } from "@Model/Clip";
+import "./ClipDetails.scss";
+
+@useStatusWithEvent("focusClipChange", "clipAttrChange")
+class ClipDetails extends Component<IMixinStatusProps> {
+
+    private renderFrom(clip: Clip) {
+        return <>
+
+            <Message i18nKey="Common.Attr.Title.Basic" isTitle first/>
+            
+            <AttrInput
+                keyI18n="Common.Attr.Key.Display.Name"
+                maxLength={15}
+                value={clip.name}
+                valueChange={(value) => {
+                    if (this.props.status) {
+                        this.props.status.changeClipAttrib(clip.id, "name", value);
+                    }
+                }}
+            />
+
+            <TogglesInput
+                keyI18n="Common.Attr.Key.Delete" onIconName="delete" red
+                offIconName="delete" valueChange={() => {
+                    const status = this.props.status;
+                    if (status) {
+                        status.popup.showPopup(ConfirmPopup, {
+                            infoI18n: "Popup.Delete.Clip.Confirm",
+                            titleI18N: "Popup.Action.Objects.Confirm.Title",
+                            yesI18n: "Popup.Action.Objects.Confirm.Delete",
+                            red: "yes",
+                            yes: () => {
+                                status.setClipObject();
+                                this.props.status?.actuator.endPlay();
+                                status.model.deleteClip(clip.id);
+                            }
+                        });
+                    }
+                }}
+            />
+
+		</>;
+    }
+
+	public render(): ReactNode {
+        if (this.props.status && this.props.status.focusClip) {
+            return this.renderFrom(this.props.status.focusClip);
+        }
+		return <Message i18nKey="Panel.Info.Clip.Details.Error.Nodata"/>;
+	}
+}
+
+export { ClipDetails };

source/Panel/ClipPlayer/ClipPlayer.scss

@@ -0,0 +1,6 @@
+div.Clip-player-clip-list-root {
+	width: 100%;
+	height: 100%;
+	box-sizing: border-box;
+	padding: 10px;
+}

source/Panel/ClipPlayer/ClipPlayer.tsx

@@ -0,0 +1,97 @@
+import { Component, ReactNode } from "react";
+import { ClipList } from "@Component/ClipList/ClipList";
+import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
+import { useSetting, IMixinSettingProps } from "@Context/Setting";
+import { BackgroundLevel, FontLevel, Theme } from "@Component/Theme/Theme";
+import { Message } from "@Input/Message/Message";
+import { Clip } from "@Model/Clip";
+import { ActuatorModel } from "@Model/Actuator";
+import { ConfirmPopup } from "@Component/ConfirmPopup/ConfirmPopup";
+import { OfflineRender } from "@Component/OfflineRender/OfflineRender"
+import "./ClipPlayer.scss";
+
+@useSetting
+@useStatusWithEvent("clipChange", "focusClipChange", "actuatorStartChange", "clipAttrChange")
+class ClipPlayer extends Component<IMixinStatusProps & IMixinSettingProps> {
+
+	private isInnerClick: boolean = false;
+
+	private renderMessage(): ReactNode {
+		return <Message i18nKey="Panel.Info.Clip.List.Error.Nodata"/>;
+	}
+
+	private isClipListDisable() {
+		return !this.props.status?.focusClip && 
+		(
+			this.props.status?.actuator.mod === ActuatorModel.Record ||
+			this.props.status?.actuator.mod === ActuatorModel.Offline
+		);
+	}
+
+	private renderClipList(clipList: Clip[]): ReactNode {
+
+		return <ClipList
+			focus={this.props.status?.focusClip}
+			clips={clipList}
+			disable={this.isClipListDisable()}
+			delete={(clip) => {
+				this.isInnerClick = true;
+				const status = this.props.status;
+				if (status) {
+					status.popup.showPopup(ConfirmPopup, {
+						infoI18n: "Popup.Delete.Clip.Confirm",
+						titleI18N: "Popup.Action.Objects.Confirm.Title",
+						yesI18n: "Popup.Action.Objects.Confirm.Delete",
+						red: "yes",
+						yes: () => {
+							status.setClipObject();
+							this.props.status?.actuator.endPlay();
+							status.model.deleteClip(clip.id);
+						}
+					});
+				}
+			}}
+			add={() => {
+				this.isInnerClick = true;
+				this.props.status?.popup.showPopup(OfflineRender, {});
+			}}
+			click={(clip) => {
+				this.isInnerClick = true;
+				this.props.status?.setClipObject(clip);
+				this.props.status?.actuator.startPlay(clip);
+				this.props.setting?.layout.focus("ClipDetails");
+			}}
+		/>;
+	}
+
+	public render(): ReactNode {
+		const clipList = this.props.status?.model.clipPool ?? [];
+
+		return <Theme
+			className="Clip-player-clip-list-root"
+			fontLevel={FontLevel.normal}
+			backgroundLevel={BackgroundLevel.Level4}
+			onClick={()=>{
+				
+				// 拦截禁用状态的事件
+				if (this.isClipListDisable()) {
+					return;
+				}
+				
+				if (this.isInnerClick) {
+					this.isInnerClick = false;
+				}
+
+				else {
+					this.props.status?.setClipObject();
+					this.props.status?.actuator.endPlay();
+				}
+			}}
+		>
+			{ clipList.length > 0 ? null : this.renderMessage() }
+			{ this.renderClipList(clipList) }
+		</Theme>;
+	}
+}
+
+export { ClipPlayer };

source/Panel/ClipPlayer/ClipRecorder.tsx

@@ -0,0 +1,103 @@
+import { Component, ReactNode } from "react";
+import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
+import { Recorder } from "@Component/Recorder/Recorder";
+import { ActuatorModel } from "@Model/Actuator";
+
+@useStatusWithEvent("actuatorStartChange", "focusClipChange", "recordLoop", "clipAttrChange")
+class ClipRecorder extends Component<IMixinStatusProps> {
+	public render(): ReactNode {
+
+		let mod: "P" | "R" = this.props.status?.focusClip ? "P" : "R";
+		let runner: boolean = false;
+		let currentTime: number | undefined = 0;
+		let allTime: number | undefined = 0;
+		let name: string | undefined;
+		let currentFrame: number | undefined = 0;
+		let allFrame: number | undefined = 0;
+		let fps: number | undefined = 0;
+
+		// 是否开始录制
+		if (mod === "R") {
+
+			// 是否正在录制
+			runner = this.props.status?.actuator.mod === ActuatorModel.Record ||
+			this.props.status?.actuator.mod === ActuatorModel.Offline;
+
+			currentTime = this.props.status?.actuator.recordClip?.time ?? 0;
+
+			name = this.props.status?.actuator.recordClip?.name;
+		}
+
+		else if (mod === "P") {
+
+			// 是否正在播放
+			runner = this.props.status?.actuator.mod === ActuatorModel.Play;
+			name = this.props.status?.focusClip?.name;
+			allTime = this.props.status?.focusClip?.time;
+			allFrame = this.props.status?.focusClip?.frames.length;
+			currentFrame = this.props.status?.actuator.playFrameId;
+			currentTime = this.props.status?.actuator.playFrame?.process;
+
+			if (allFrame !== undefined) {
+				allFrame --;
+			}
+
+			if (allTime !== undefined && allFrame !== undefined) {
+				fps = Math.round(allFrame / allTime);
+			}
+		}
+
+		return <Recorder
+			name={name}
+			currentTime={currentTime}
+			allTime={allTime}
+			currentFrame={currentFrame}
+			allFrame={allFrame}
+			mode={mod}
+			running={runner}
+			fps={fps}
+			action={() => {
+
+				// 开启录制
+				if (mod === "R" && !runner) {
+
+					// 获取新实例
+					let newClip = this.props.status?.newClip();
+					
+					// 开启录制时钟
+					this.props.status?.actuator.startRecord(newClip!);
+					console.log("ClipRecorder: Rec start...");
+				}
+
+				// 暂停录制
+				if (mod === "R" && runner) {
+
+					// 暂停录制时钟
+					this.props.status?.actuator.endRecord();
+					console.log("ClipRecorder: Rec end...");
+				}
+
+				// 开始播放
+				if (mod === "P" && !runner) {
+
+					// 启动播放时钟
+					this.props.status?.actuator.playing();
+					console.log("ClipRecorder: Play start...");
+				}
+
+				// 暂停播放
+				if (mod === "P" && runner) {
+
+					// 启动播放时钟
+					this.props.status?.actuator.pausePlay();
+					console.log("ClipRecorder: Pause play...");
+				}
+			}}
+			valueChange={(value) => {
+				this.props.status?.actuator.setPlayProcess(value);
+			}}
+		/>
+	}
+}
+
+export { ClipRecorder };

source/Panel/ObjectList/ObjectList.tsx

@@ -4,6 +4,8 @@ import { useSetting, IMixinSettingProps } from "@Context/Setting";
 import { Localization } from "@Component/Localization/Localization";
 import { DetailsList } from "@Component/DetailsList/DetailsList";
 import { ObjectID } from "@Model/Model";
+import { Group } from "@Model/Group";
+import { Range } from "@Model/Range";
 import { Icon } from "@fluentui/react";
 import "./ObjectList.scss";
 
@@ -24,12 +26,21 @@ class ObjectList extends Component<IMixinStatusProps & IMixinSettingProps> {
         return <DetailsList
             className="object-list"
             items={objList.concat([]).map((object => {
+
+                let objectType = "";
+                if (object instanceof Group) {
+                    objectType = "G";
+                } else if (object instanceof Range) {
+                    objectType = "R";
+                }
+
                 return {
                     key: object.id.toString(),
                     name: object.displayName,
                     color: object.color,
                     display: object.display,
                     update: object.update,
+                    type: objectType,
                     select: this.props.status ? 
                         this.props.status.focusObject.has(object.id.toString()) || 
                         this.props.status.focusObject.has(object.id) :
@@ -41,10 +52,10 @@ class ObjectList extends Component<IMixinStatusProps & IMixinSettingProps> {
                     this.props.status.setFocusObject(new Set<ObjectID>().add(item.key));
                 }
                 if (this.props.setting) {
-                    if (item.key.slice(0, 1) === "R") {
+                    if (item.type === "R") {
                         this.props.setting.layout.focus("RangeDetails");
                     }
-                    if (item.key.slice(0, 1) === "G") {
+                    else if (item.type === "G") {
                         this.props.setting.layout.focus("GroupDetails");
                     }
                     this.props.setting.layout.focus("ObjectList");
@@ -71,13 +82,13 @@ class ObjectList extends Component<IMixinStatusProps & IMixinSettingProps> {
             }}
             renderCheckbox={(item, click) => {
                 let icon = "CheckMark";
-                if (item.key.slice(0, 1) === "R") {
+                if (item.type === "R") {
                     icon = "CubeShape";
                 }
-                if (item.key.slice(0, 1) === "G") {
+                else if (item.type === "G") {
                     icon = "WebAppBuilderFragment";
                 }
-                return <div 
+                return <div
                     className="object-list-checkbox details-list-checkbox"
                     onClick={click}
                 >

source/Panel/Panel.tsx

@@ -10,6 +10,9 @@ import { LabelDetails } from "@Panel/LabelDetails/LabelDetails";
 import { GroupDetails } from "@Panel/GroupDetails/GroupDetails";
 import { BehaviorList } from "@Panel/BehaviorList/BehaviorList";
 import { BehaviorDetails } from "@Panel/BehaviorDetails/BehaviorDetails";
+import { ClipPlayer } from "@Panel/ClipPlayer/ClipPlayer";
+import { ClipRecorder } from "@Panel/ClipPlayer/ClipRecorder";
+import { ClipDetails } from "@Panel/ClipDetails/ClipDetails";
 
 interface IPanelInfo {
 	nameKey: string;
@@ -31,6 +34,8 @@ type PanelId = ""
 | "GroupDetails" // 群属性
 | "BehaviorList" // 行为列表
 | "BehaviorDetails" // 行为属性
+| "ClipPlayer" // 剪辑影片
+| "ClipDetails" // 剪辑详情
 ;
 
 const PanelInfoMap = new Map<PanelId, IPanelInfo>();
@@ -66,6 +71,14 @@ PanelInfoMap.set("BehaviorDetails", {
     nameKey: "Panel.Title.Behavior.Details.View", introKay: "Panel.Info.Behavior.Details.View",
     class: BehaviorDetails
 });
+PanelInfoMap.set("ClipPlayer", {
+    nameKey: "Panel.Title.Behavior.Clip.Player", introKay: "Panel.Info.Behavior.Clip.Player",
+    class: ClipPlayer, header: ClipRecorder, hidePadding: true
+});
+PanelInfoMap.set("ClipDetails", {
+    nameKey: "Panel.Title.Behavior.Clip.Details", introKay: "Panel.Info.Behavior.Clip.Details",
+    class: ClipDetails
+});
 
 function getPanelById(panelId: PanelId): ReactNode {
 	switch (panelId) {

source/Panel/RenderView/RenderView.scss

@@ -6,4 +6,17 @@ div.render-view {
 		width: 100%;
 		height: 100%;
 	}
+}
+
+div.render-view-fps {
+    height: 0;
+    width: 100%;
+
+    div.fps-view {
+        position: relative;
+        opacity: .5;
+        top: 10px;
+        left: 10px;
+        user-select: none;
+    }
 }

source/Panel/RenderView/RenderView.tsx

@@ -1,9 +1,85 @@
 import { Component, ReactNode, createRef } from "react";
 import { useStatus, IMixinStatusProps } from "@Context/Status";
-import { useSetting, IMixinSettingProps, Themes } from "@Context/Setting";
+import { useSetting, IMixinSettingProps, Themes, Platform } from "@Context/Setting";
 import { ClassicRenderer } from "@GLRender/ClassicRenderer";
+import { FontLevel, Theme } from "@Component/Theme/Theme";
+import { Localization } from "@Component/Localization/Localization";
 import "./RenderView.scss";
 
+interface IRendererFpsViewProps {
+    renderFps: number;
+    physicsFps: number;
+}
+
+@useStatus
+class RendererFpsView extends Component<IMixinStatusProps, IRendererFpsViewProps> {
+
+    public state = {
+        renderFps: 0,
+        physicsFps: 0,
+    }
+
+    private updateTime: number = 0;
+
+    private renderFpsCalc: (t: number) => void = () => {};
+    private physicsFpsCalc: (t: number) => void = () => {};
+
+    public componentDidMount() {
+        const { status } = this.props;
+        this.renderFpsCalc = this.createFpsCalc("renderFps");
+        this.physicsFpsCalc = this.createFpsCalc("physicsFps");
+        if (status) {
+            status.on("physicsLoop", this.physicsFpsCalc);
+            status.on("renderLoop", this.renderFpsCalc);
+        }
+    }
+
+    public componentWillUnmount() {
+        const { status } = this.props;
+        if (status) {
+            status.off("physicsLoop", this.physicsFpsCalc);
+            status.off("renderLoop", this.renderFpsCalc);
+        }
+    }
+
+    private createFpsCalc(type: "renderFps" | "physicsFps") {
+        return (t: number) => {
+            if (t === 0) {
+                return;
+            }
+            let newState: IRendererFpsViewProps = {} as any;
+            newState[type] = 1 / t;
+            if (this.updateTime > 20) {
+                this.updateTime = 0;
+                this.setState(newState);
+            }
+            this.updateTime ++;
+        }
+    }
+
+    public render() {
+
+        const fpsInfo = {
+            renderFps: Math.floor(this.state.renderFps).toString(),
+            physicsFps: Math.floor(this.state.physicsFps).toString()
+        };
+
+        return <Theme
+            className="render-view-fps"
+            fontLevel={FontLevel.normal}
+        >
+            <div className="fps-view">
+                <Localization i18nKey="Header.Bar.Fps.Render.Info" options={{
+                    fps: fpsInfo.renderFps
+                }}/><br/>
+                <Localization i18nKey="Header.Bar.Fps.Simulate.Info" options={{
+                    fps: fpsInfo.physicsFps
+                }}/>
+            </div>
+        </Theme>;
+    }
+}
+
 @useSetting
 @useStatus
 class RenderView extends Component<IMixinStatusProps & IMixinSettingProps> {
@@ -23,12 +99,17 @@ class RenderView extends Component<IMixinStatusProps & IMixinSettingProps> {
 				[190 / 255, 187 / 255, 184 / 255, 1]
 		}
 
-		return <div ref={this.rootEle} className={classList.join(" ")}/>;
+		return <>
+            {
+                this.props.setting?.platform === Platform.desktop ?
+                    <RendererFpsView/> : null
+            }
+            <div ref={this.rootEle} className={classList.join(" ")}/>;
+        </>
 	}
 
 	public componentDidMount() {
 		let div = this.rootEle.current;
-		// console.log(div, div?.childNodes, this.props.status, this.props.status?.renderer.dom)
 		if (div && (!div.childNodes || div.childNodes.length <= 0) && this.props.status) {	
 			div.appendChild(this.props.status.renderer.dom);
 		}

source/Service/Runner.ts

@@ -0,0 +1,8 @@
+import { Service } from "@Service/Service";
+import * as minimist from "minimist";
+
+const args = minimist(process.argv.slice(2));
+
+if (args.run) {
+	new Service().run(args.path, args.port);
+}

source/Service/Service.ts

@@ -0,0 +1,49 @@
+import { Express } from "express";
+import * as express from "express";
+import * as detect from "detect-port";
+
+class Service {
+
+	/**
+	 * 默认端口
+	 */
+	public servicePort: number = 12100;
+
+	/**
+	 * Express 实例
+	 */
+	public app!: Express;
+
+	/**
+	 * 获取空闲接口
+	 */
+	private async getFreePort(): Promise<number> {
+
+		let freePort: number = this.servicePort;
+		
+		try {
+			freePort = await detect(this.servicePort);
+		} catch (err) {
+			console.log(err);
+		}
+
+		return freePort;
+	}
+
+	public async run(url?: string, port?: number) {
+
+		this.servicePort = port ?? await this.getFreePort();
+
+		this.app = express();
+
+		this.app.use("/", express.static(url ?? "./"));
+
+		this.app.listen(this.servicePort);
+
+		console.log("Service: service run in port " + this.servicePort);
+
+		return "http://127.0.0.1:" + this.servicePort;
+	}
+}
+
+export { Service };

tsconfig.json

@@ -40,7 +40,13 @@
             ],
             "@Panel/*": [
                 "./source/Panel/*"
-            ]
+            ],
+            "@Service/*": [
+                "./source/Service/*"
+            ],
+            "@Electron/*": [
+                "./source/Electron/*"
+            ],
         }
     },
     "include": [