Add clip player logic

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

config/webpack.common.js

@@ -123,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
     };
 

package-lock.json

@@ -16,6 +16,8 @@
         "express": "^4.17.3",
         "gl-matrix": "^3.4.3",
         "react": "^17.0.2",
+        "react-dnd": "^16.0.1",
+        "react-dnd-html5-backend": "^16.0.1",
         "react-dom": "^17.0.2",
         "uuid": "^8.3.2"
       },
@@ -726,6 +728,17 @@
         "node": ">=4"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.17.9",
+      "resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.17.9.tgz",
+      "integrity": "sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==",
+      "dependencies": {
+        "regenerator-runtime": "^0.13.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@discoveryjs/json-ext": {
       "version": "0.5.6",
       "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.6.tgz",
@@ -1023,6 +1036,21 @@
         "node": ">=10"
       }
     },
+    "node_modules/@react-dnd/asap": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmmirror.com/@react-dnd/asap/-/asap-5.0.2.tgz",
+      "integrity": "sha512-WLyfoHvxhs0V9U+GTsGilGgf2QsPl6ZZ44fnv0/b8T3nQyvzxidxsg/ZltbWssbsRDlYW8UKSQMTGotuTotZ6A=="
+    },
+    "node_modules/@react-dnd/invariant": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmmirror.com/@react-dnd/invariant/-/invariant-4.0.2.tgz",
+      "integrity": "sha512-xKCTqAK/FFauOM9Ta2pswIyT3D8AQlfrYdOi/toTPEhqCuAs1v5tcJ3Y08Izh1cJ5Jchwy9SeAXmMg6zrKs2iw=="
+    },
+    "node_modules/@react-dnd/shallowequal": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmmirror.com/@react-dnd/shallowequal/-/shallowequal-4.0.2.tgz",
+      "integrity": "sha512-/RVXdLvJxLg4QKvMoM5WlwNR9ViO9z8B/qPcc+C0Sa/teJY7QG7kJ441DwzOjMYEY7GmU4dj5EcGHIkKZiQZCA=="
+    },
     "node_modules/@sindresorhus/is": {
       "version": "0.14.0",
       "resolved": "https://registry.npmmirror.com/@sindresorhus/is/-/is-0.14.0.tgz",
@@ -1195,7 +1223,7 @@
       "version": "17.0.21",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.21.tgz",
       "integrity": "sha512-DBZCJbhII3r90XbQxI8Y9IjjiiOGlZ0Hr32omXIZvwwZ7p4DMMXGrKXVyPfuoBOri9XNtL0UK69jYIBIsRX3QQ==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@types/normalize-package-data": {
       "version": "2.4.1",
@@ -2817,6 +2845,16 @@
         "node": ">=8"
       }
     },
+    "node_modules/dnd-core": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmmirror.com/dnd-core/-/dnd-core-16.0.1.tgz",
+      "integrity": "sha512-HK294sl7tbw6F6IeuK16YSBUoorvHpY8RHO+9yFfaJyCDVb6n7PRcezrOEOa2SBCqiYpemh5Jx20ZcjKdFAVng==",
+      "dependencies": {
+        "@react-dnd/asap": "^5.0.1",
+        "@react-dnd/invariant": "^4.0.1",
+        "redux": "^4.2.0"
+      }
+    },
     "node_modules/dns-equal": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
@@ -3317,8 +3355,7 @@
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
-      "dev": true
     },
     "node_modules/fast-glob": {
       "version": "3.2.11",
@@ -3945,6 +3982,14 @@
         "he": "bin/he"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmmirror.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
     "node_modules/hosted-git-info": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.1.0.tgz",
@@ -6164,6 +6209,43 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-dnd": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmmirror.com/react-dnd/-/react-dnd-16.0.1.tgz",
+      "integrity": "sha512-QeoM/i73HHu2XF9aKksIUuamHPDvRglEwdHL4jsp784BgUuWcg6mzfxT0QDdQz8Wj0qyRKx2eMg8iZtWvU4E2Q==",
+      "dependencies": {
+        "@react-dnd/invariant": "^4.0.1",
+        "@react-dnd/shallowequal": "^4.0.1",
+        "dnd-core": "^16.0.1",
+        "fast-deep-equal": "^3.1.3",
+        "hoist-non-react-statics": "^3.3.2"
+      },
+      "peerDependencies": {
+        "@types/hoist-non-react-statics": ">= 3.3.1",
+        "@types/node": ">= 12",
+        "@types/react": ">= 16",
+        "react": ">= 16.14"
+      },
+      "peerDependenciesMeta": {
+        "@types/hoist-non-react-statics": {
+          "optional": true
+        },
+        "@types/node": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-dnd-html5-backend": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmmirror.com/react-dnd-html5-backend/-/react-dnd-html5-backend-16.0.1.tgz",
+      "integrity": "sha512-Wu3dw5aDJmOGw8WjH1I1/yTH+vlXEL4vmjk5p+MHxP8HuHJS1lAGeIdG/hze1AvNeXWo/JgULV87LyQOr+r5jw==",
+      "dependencies": {
+        "dnd-core": "^16.0.1"
+      }
+    },
     "node_modules/react-dom": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
@@ -6177,6 +6259,11 @@
         "react": "17.0.2"
       }
     },
+    "node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmmirror.com/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/read-pkg": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
@@ -6305,6 +6392,19 @@
         "node": ">=8"
       }
     },
+    "node_modules/redux": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmmirror.com/redux/-/redux-4.2.0.tgz",
+      "integrity": "sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA==",
+      "dependencies": {
+        "@babel/runtime": "^7.9.2"
+      }
+    },
+    "node_modules/regenerator-runtime": {
+      "version": "0.13.9",
+      "resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
+      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
+    },
     "node_modules/regexp.prototype.flags": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.1.tgz",
@@ -8767,6 +8867,14 @@
         }
       }
     },
+    "@babel/runtime": {
+      "version": "7.17.9",
+      "resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.17.9.tgz",
+      "integrity": "sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==",
+      "requires": {
+        "regenerator-runtime": "^0.13.4"
+      }
+    },
     "@discoveryjs/json-ext": {
       "version": "0.5.6",
       "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.6.tgz",
@@ -9013,6 +9121,21 @@
         "rimraf": "^3.0.2"
       }
     },
+    "@react-dnd/asap": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmmirror.com/@react-dnd/asap/-/asap-5.0.2.tgz",
+      "integrity": "sha512-WLyfoHvxhs0V9U+GTsGilGgf2QsPl6ZZ44fnv0/b8T3nQyvzxidxsg/ZltbWssbsRDlYW8UKSQMTGotuTotZ6A=="
+    },
+    "@react-dnd/invariant": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmmirror.com/@react-dnd/invariant/-/invariant-4.0.2.tgz",
+      "integrity": "sha512-xKCTqAK/FFauOM9Ta2pswIyT3D8AQlfrYdOi/toTPEhqCuAs1v5tcJ3Y08Izh1cJ5Jchwy9SeAXmMg6zrKs2iw=="
+    },
+    "@react-dnd/shallowequal": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmmirror.com/@react-dnd/shallowequal/-/shallowequal-4.0.2.tgz",
+      "integrity": "sha512-/RVXdLvJxLg4QKvMoM5WlwNR9ViO9z8B/qPcc+C0Sa/teJY7QG7kJ441DwzOjMYEY7GmU4dj5EcGHIkKZiQZCA=="
+    },
     "@sindresorhus/is": {
       "version": "0.14.0",
       "resolved": "https://registry.npmmirror.com/@sindresorhus/is/-/is-0.14.0.tgz",
@@ -9176,7 +9299,7 @@
       "version": "17.0.21",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.21.tgz",
       "integrity": "sha512-DBZCJbhII3r90XbQxI8Y9IjjiiOGlZ0Hr32omXIZvwwZ7p4DMMXGrKXVyPfuoBOri9XNtL0UK69jYIBIsRX3QQ==",
-      "dev": true
+      "devOptional": true
     },
     "@types/normalize-package-data": {
       "version": "2.4.1",
@@ -10488,6 +10611,16 @@
         "path-type": "^4.0.0"
       }
     },
+    "dnd-core": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmmirror.com/dnd-core/-/dnd-core-16.0.1.tgz",
+      "integrity": "sha512-HK294sl7tbw6F6IeuK16YSBUoorvHpY8RHO+9yFfaJyCDVb6n7PRcezrOEOa2SBCqiYpemh5Jx20ZcjKdFAVng==",
+      "requires": {
+        "@react-dnd/asap": "^5.0.1",
+        "@react-dnd/invariant": "^4.0.1",
+        "redux": "^4.2.0"
+      }
+    },
     "dns-equal": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
@@ -10905,8 +11038,7 @@
     "fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
-      "dev": true
     },
     "fast-glob": {
       "version": "3.2.11",
@@ -11384,6 +11516,14 @@
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
       "dev": true
     },
+    "hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmmirror.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "requires": {
+        "react-is": "^16.7.0"
+      }
+    },
     "hosted-git-info": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.1.0.tgz",
@@ -13051,6 +13191,26 @@
         "object-assign": "^4.1.1"
       }
     },
+    "react-dnd": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmmirror.com/react-dnd/-/react-dnd-16.0.1.tgz",
+      "integrity": "sha512-QeoM/i73HHu2XF9aKksIUuamHPDvRglEwdHL4jsp784BgUuWcg6mzfxT0QDdQz8Wj0qyRKx2eMg8iZtWvU4E2Q==",
+      "requires": {
+        "@react-dnd/invariant": "^4.0.1",
+        "@react-dnd/shallowequal": "^4.0.1",
+        "dnd-core": "^16.0.1",
+        "fast-deep-equal": "^3.1.3",
+        "hoist-non-react-statics": "^3.3.2"
+      }
+    },
+    "react-dnd-html5-backend": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmmirror.com/react-dnd-html5-backend/-/react-dnd-html5-backend-16.0.1.tgz",
+      "integrity": "sha512-Wu3dw5aDJmOGw8WjH1I1/yTH+vlXEL4vmjk5p+MHxP8HuHJS1lAGeIdG/hze1AvNeXWo/JgULV87LyQOr+r5jw==",
+      "requires": {
+        "dnd-core": "^16.0.1"
+      }
+    },
     "react-dom": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
@@ -13061,6 +13221,11 @@
         "scheduler": "^0.20.2"
       }
     },
+    "react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmmirror.com/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "read-pkg": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
@@ -13163,6 +13328,19 @@
         "strip-indent": "^3.0.0"
       }
     },
+    "redux": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmmirror.com/redux/-/redux-4.2.0.tgz",
+      "integrity": "sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA==",
+      "requires": {
+        "@babel/runtime": "^7.9.2"
+      }
+    },
+    "regenerator-runtime": {
+      "version": "0.13.9",
+      "resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
+      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
+    },
     "regexp.prototype.flags": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.1.tgz",

package.json

@@ -20,6 +20,7 @@
     "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",
@@ -28,8 +29,8 @@
     "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 build-electron & 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 release-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",
@@ -75,6 +76,8 @@
     "express": "^4.17.3",
     "gl-matrix": "^3.4.3",
     "react": "^17.0.2",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^17.0.2",
     "uuid": "^8.3.2"
   }

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 {
+        i {
-            font-size: 25px;
+            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 div.command-button div.command-button-loading div.ms-Spinner-circle {
-div.command-bar.dark button.ms-Button.command-button:hover {
+    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 div.command-button.active,
-div.command-bar.light button.ms-Button.command-button:hover {
+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 { Component, ReactNode, FunctionComponent } from "react";
-import { DirectionalHint, IconButton } from "@fluentui/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";
@@ -18,23 +18,28 @@ interface IRenderButtonParameter {
     iconName?: string;
     click?: () => void;
     active?: boolean;
+    isLoading?: boolean;
 }
 
 interface ICommandBarState {
     isSaveRunning: boolean;
 }
 
-function getRenderButton(param: IRenderButtonParameter): ReactNode {
+const CommandButton: FunctionComponent<IRenderButtonParameter> = (param) => {
     return <LocalizationTooltipHost 
         i18nKey={param.i18NKey}
         directionalHint={DirectionalHint.rightCenter}
     >
-        <IconButton
+        <div
             style={{ height: COMMAND_BAR_WIDTH }}
-            iconProps={{ iconName: param.iconName }}
+            onClick={ param.isLoading ? undefined : param.click }
-            onClick={ param.click }
             className={"command-button on-end" + (param.active ? " active" : "")}
-        />
+        >
+            {param.isLoading ? 
+                <Spinner className="command-button-loading"/> :
+                <Icon iconName={param.iconName}/>
+            }
+        </div>
     </LocalizationTooltipHost>
 }
 @useSetting
@@ -68,78 +73,84 @@ class CommandBar extends Component<IMixinSettingProps & IMixinStatusProps, IComm
                     }}
                 />
 
-                {getRenderButton({
+                <CommandButton
-                    iconName: "Save",
+                    iconName="Save"
-                    i18NKey: "Command.Bar.Save.Info",
+                    i18NKey="Command.Bar.Save.Info"
-                    click: () => {
+                    isLoading={this.state.isSaveRunning}
+                    click={() => {
                         this.setState({
                             isSaveRunning: true
                         });
-                    }
+                    }}
-                })}
+                />
 
-                {getRenderButton({
+                <CommandButton
-                    iconName: this.props.status?.actuator.start() ? "Pause" : "Play",
+                    iconName={this.props.status?.actuator.start() ? "Pause" : "Play"}
-                    i18NKey: "Command.Bar.Play.Info",
+                    i18NKey="Command.Bar.Play.Info"
-                    click: () => this.props.status ? this.props.status.actuator.start(
+                    click={() => this.props.status ? this.props.status.actuator.start(
                         !this.props.status.actuator.start()
-                    ) : undefined
+                    ) : undefined}
-                })}
+                />
 
-                {getRenderButton({
+                <CommandButton
-                    iconName: "HandsFree", i18NKey: "Command.Bar.Drag.Info", 
+                    iconName="HandsFree"
-                    active: mouseMod === MouseMod.Drag,
+                    i18NKey="Command.Bar.Drag.Info"
-                    click: () => this.props.status ? this.props.status.setMouseMod(MouseMod.Drag) : undefined
+                    active={mouseMod === MouseMod.Drag}
-                })}
+                    click={() => this.props.status ? this.props.status.setMouseMod(MouseMod.Drag) : undefined}
+                />
 
-                {getRenderButton({
+                <CommandButton
-                    iconName: "TouchPointer", i18NKey: "Command.Bar.Select.Info",
+                    iconName="TouchPointer"
-                    active: mouseMod === MouseMod.click,
+                    i18NKey="Command.Bar.Select.Info"
-                    click: () => this.props.status ? this.props.status.setMouseMod(MouseMod.click) : undefined
+                    active={mouseMod === MouseMod.click}
-                })}
+                    click={() => this.props.status ? this.props.status.setMouseMod(MouseMod.click) : undefined}
+                />
 
-                {getRenderButton({
+                <CommandButton
-                    iconName: "WebAppBuilderFragmentCreate",
+                    iconName="WebAppBuilderFragmentCreate"
-                    i18NKey: "Command.Bar.Add.Group.Info",
+                    i18NKey="Command.Bar.Add.Group.Info"
-                    click: () => {
+                    click={() => {
                         this.props.status ? this.props.status.newGroup() : undefined;
-                    }
+                    }}
-                })}
+                />
 
-                {getRenderButton({
+                <CommandButton
-                    iconName: "ProductVariant",
+                    iconName="ProductVariant"
-                    i18NKey: "Command.Bar.Add.Range.Info",
+                    i18NKey="Command.Bar.Add.Range.Info"
-                    click: () => {
+                    click={() => {
                         this.props.status ? this.props.status.newRange() : undefined;
-                    }
+                    }}
-                })}
+                />
 
-                {getRenderButton({
+                <CommandButton
-                    iconName: "Running",
+                    iconName="Running"
-                    i18NKey: "Command.Bar.Add.Behavior.Info",
+                    i18NKey="Command.Bar.Add.Behavior.Info"
-                    click: () => {
+                    click={() => {
                         this.props.status?.popup.showPopup(BehaviorPopup, {});
-                    }
+                    }}
-                })}
+                />
 
-                {getRenderButton({
+                <CommandButton
-                    iconName: "Tag",
+                    iconName="Tag"
-                    i18NKey: "Command.Bar.Add.Tag.Info",
+                    i18NKey="Command.Bar.Add.Tag.Info"
-                    click: () => {
+                    click={() => {
                         this.props.status ? this.props.status.newLabel() : undefined;
-                    }
+                    }}
-                })}
+                />
 
-                {getRenderButton({ iconName: "Camera", i18NKey: "Command.Bar.Camera.Info" })}
+                <CommandButton
+                    iconName="Camera"
+                    i18NKey="Command.Bar.Camera.Info"
+                />
             </div>
             <div>
-                {getRenderButton({
+                <CommandButton
-                    iconName: "Settings",
+                    iconName="Settings"
-                    i18NKey: "Command.Bar.Setting.Info",
+                    i18NKey="Command.Bar.Setting.Info"
-                    click: () => {
+                    click={() => {
                         this.props.status?.popup.showPopup(SettingPopup, {});
-                    }
+                    }}
-                })}
+                />
             </div>
         </Theme>
     }

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}/> :
+                            <Message
-                            null
+								i18nKey={this.props.infoI18n}
+								options={this.props.infoI18nOption}
+							/> : null
             }
 		</ConfirmContent>
 	}

source/Component/LoadFile/LoadFile.scss

@@ -1,8 +1,20 @@
 @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;
@@ -10,6 +22,7 @@ div.load-file-layer-root {
 		justify-content: center;
 		align-items: center;
 		flex-wrap: wrap;
+		border-radius: 3px;
 
 		div {
 			user-select: none;
@@ -27,12 +40,21 @@ div.load-file-layer-root {
 			margin-bottom: 5px;
 			font-size: 1.5em;
 		}
+	}
 }
 
 div.load-file-layer-root.light {
-	background-color: rgba($color: #FFFFFF, $alpha: .75);
+	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: .75);
+	background-color: rgba($color: #000000, $alpha: .6);
+
+	div.load-file-layer {
+		border: 2px dashed $lt-font-color-normal-dark;
+	}
 }

source/Component/LoadFile/LoadFile.tsx

@@ -1,16 +1,20 @@
+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 { Component, ReactNode } from "react";
+import { FunctionComponent } from "react";
+import { useDrop } from 'react-dnd'
+import { NativeTypes } from "react-dnd-html5-backend"
 import "./LoadFile.scss";
 
-class LoadFile extends Component {
+const DragFileMask: FunctionComponent = () => {
 
-	private renderMask() {
 	return <Theme
 		className="load-file-layer-root"
 		fontLevel={FontLevel.normal}
 	>
+		<div className="load-file-layer">
 			<div className="drag-icon">
 				<Icon iconName="KnowledgeArticle"/>
 			</div>
@@ -20,12 +24,119 @@ class LoadFile extends Component {
 			<div className="drag-intro">
 				<Localization i18nKey="Info.Hint.Load.File.Intro"/>
 			</div>
+		</div>
 	</Theme>; 
-	}
-
-	public render(): ReactNode {
-		return <></>;
-	}
 }
 
+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/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;
+			animation: 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,116 @@
+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;
+}
+
+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}
+			/>
+			<div className="recorder-content">
+				<div className="time-view">
+					{this.getRecordInfo()}
+				</div>
+				<div className="ctrl-button">
+					<div className={"ctrl-action" + (isJumpDisable ? " disable" : "")}>
+						<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" : "")}>
+						<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/Context/Archive.tsx

@@ -1,8 +1,9 @@
 import { FunctionComponent, useEffect } from "react";
-import * as download from "downloadjs";
 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;
@@ -21,7 +22,7 @@ interface ICallBackProps {
 	then: () => any;
 }
 
-const ArchiveSaveDownloadView: FunctionComponent<IFileInfo & ICallBackProps> = function ArchiveSave(props) {
+const ArchiveSaveDownloadView: FunctionComponent<IFileInfo & ICallBackProps> = function ArchiveSaveDownloadView(props) {
 
 	const runner = async () => {
 		const file = await props.fileData();
@@ -38,6 +39,47 @@ const ArchiveSaveDownloadView: FunctionComponent<IFileInfo & ICallBackProps> = f
 
 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)));
+
 /**
  * 保存存档文件
  */
@@ -81,7 +123,7 @@ const ArchiveSaveView: FunctionComponent<IMixinSettingProps & IMixinStatusProps
 		{
 			props.setting?.platform === Platform.web ? 
 				<ArchiveSaveDownload {...fileData} then={callBack}/> :
-				<></>
+				<ArchiveSaveFs {...fileData} then={callBack}/>
 		}
 	</>
 }

source/Context/Electron.ts

@@ -1,4 +1,5 @@
 import { createContext } from "react";
+import { Emitter } from "@Model/Emitter";
 import { superConnect, superConnectWithEvent } from "@Context/Context";
 import { ISimulatorAPI, IApiEmitterEvent } from "@Electron/SimulatorAPI";
 
@@ -6,6 +7,25 @@ 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";
@@ -19,4 +39,4 @@ const useElectron = superConnect<ISimulatorAPI>(ElectronConsumer, "electron");
 
 const useElectronWithEvent = superConnectWithEvent<ISimulatorAPI, IApiEmitterEvent>(ElectronConsumer, "electron");
 
-export { useElectron, ElectronProvider, IMixinElectronProps, ISimulatorAPI, useElectronWithEvent };
+export { useElectron, ElectronProvider, IMixinElectronProps, ISimulatorAPI, useElectronWithEvent, getElectronAPI };

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 = [
@@ -35,14 +36,17 @@ interface IStatusEvent {
     fileChange: void;
     renderLoop: number;
     physicsLoop: number;
+    recordLoop: 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;
@@ -98,6 +102,11 @@ class Status extends Emitter<IStatusEvent> {
      */
     public focusBehavior?: Behavior;
 
+    /**
+     * 焦点行为
+     */
+    public focusClip?: Clip;
+
     private drawTimer?: NodeJS.Timeout;
 
     private delayDraw = () => {
@@ -119,11 +128,13 @@ class Status extends Emitter<IStatusEvent> {
 
         // 循环事件
         this.actuator.on("loop", (t) => { this.emit("physicsLoop", t) });
+        this.actuator.on("record", (t) => { this.emit("recordLoop", 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"));
@@ -161,6 +172,11 @@ class Status extends Emitter<IStatusEvent> {
             this.emit("labelChange");
             this.emit("behaviorChange");
 
+            // 清除焦点对象
+            this.setBehaviorObject();
+            this.setFocusObject(new Set());
+            this.setLabelObject();
+
             // 映射
             this.emit("fileLoad");
         });
@@ -215,6 +231,16 @@ class Status extends Emitter<IStatusEvent> {
         this.emit("focusBehaviorChange");
     }
 
+    /**
+     * 更新焦点行为
+     */
+    public setClipObject(clip?: Clip) {
+        if (this.focusClip !== clip) {
+            this.focusClip = clip;
+        }
+        this.emit("focusClipChange");
+    }
+
     /**
      * 修改范围属性
      */
@@ -398,6 +424,22 @@ class Status extends Emitter<IStatusEvent> {
         return label;
     }
 
+    public newClip() {
+        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
+            ));
+        });
+        const clip = this.model.addClip(
+            I18N(this.setting.language, "Object.List.New.Clip", {
+                id: nextIndex.toString()
+            })
+        );
+        return clip;
+    }
+
     public setMouseMod(mod: MouseMod) {
         this.mouseMod = mod;
         if (this.renderer instanceof ClassicRenderer) {

source/Electron/Electron.ts

@@ -1,6 +1,7 @@
-import { app, BrowserWindow, ipcMain } from "electron";
+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 {
@@ -28,12 +29,38 @@ class ElectronApp {
 		);
 	}
 
+	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");
@@ -49,12 +76,21 @@ class ElectronApp {
 			frame: false,
 			minWidth: 460,
 			minHeight: 300,
-			webPreferences: { preload }
+			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()
@@ -90,6 +126,56 @@ class ElectronApp {
 		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

@@ -2,6 +2,7 @@ import { Emitter } from "@Model/Emitter";
 
 type IApiEmitterEvent = {
 	windowsSizeStateChange: void;
+	fileSave: {success: boolean, name: string, url: string};
 }
 
 interface ISimulatorAPI extends Emitter<IApiEmitterEvent> {
@@ -30,6 +31,11 @@ interface ISimulatorAPI extends Emitter<IApiEmitterEvent> {
 	 * 是否处于最大化状态
 	 */
 	minimize: () => void;
+
+	/**
+	 * 存档
+	 */
+	fileSave: (text: string, name: string, title: string, button: string, url?: string) => void;
 }
 
 export { ISimulatorAPI, IApiEmitterEvent }

source/Electron/SimulatorWindow.ts

@@ -1,23 +1,11 @@
 import { contextBridge, ipcRenderer } from "electron";
-import { ISimulatorAPI } from "@Electron/SimulatorAPI"
+import { ISimulatorAPI } from "@Electron/SimulatorAPI";
 
-const emitterMap: Array<[key: string, value: Function[]]> = [];
+const emitterMap: { fn?: Function } = { fn: undefined };
-const queryEmitter = (key: string) => {
-	let res: (typeof emitterMap)[0] | undefined;
-	emitterMap.forEach((item) => {
-		if (item[0] === key) res = item;
-	});
 
-	if (res) {
+const emit = (type: string, evt?: any) => {
-		if (Array.isArray(res[1])) return res[1];
+	if (emitterMap.fn) {
-		res[1] = [];
+		emitterMap.fn(type, evt);
-		return res[1];
-	}
-
-	else {
-		res = [key, []];
-		emitterMap.push(res);
-		return res[1];
 	}
 }
 
@@ -43,22 +31,19 @@ const API: ISimulatorAPI = {
 		ipcRenderer.send("windows.minimize");
 	},
 
-	all: new Map() as any,
+	fileSave(text: string, name: string, title: string, button: string, url?: string) {
-
+		ipcRenderer.send("windows.fileSave", text, name, title, button, url);
-	resetAll: () => emitterMap.splice(0),
-	reset: (type) => queryEmitter(type).splice(0),
-	on: (type, handler) => queryEmitter(type).push(handler),
-	off: (type, handler) => {
-		const handlers = queryEmitter(type);
-		handlers.splice(handlers.indexOf(handler!) >>> 0, 1);
 	},
-	emit: ((type: string, evt: any) => {
+
-		queryEmitter(type).slice().map((handler: any) => { handler(evt) });
+	mapEmit: (fn: Function) => { emitterMap.fn = fn },
-	}) as any,
+} as any;
-}
 
 ipcRenderer.on("windows.windowsSizeStateChange", () => {
-	API.emit("windowsSizeStateChange");
+	emit("windowsSizeStateChange");
+});
+
+ipcRenderer.on("windows.EndFileSave", (_, name: string, url: string, success: boolean) => {
+	emit("fileSave", {name, url, success});
 });
 
 contextBridge.exposeInMainWorld("API", API);

source/Localization/EN-US.ts

@@ -31,6 +31,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",
@@ -53,6 +54,11 @@ 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.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",
@@ -63,8 +69,19 @@ 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.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",
@@ -133,6 +150,7 @@ 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",
     "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",

source/Localization/ZH-CN.ts

@@ -31,6 +31,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": "点击此处以赋予行为到此群",
@@ -53,6 +54,11 @@ 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.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": "确定",
@@ -63,8 +69,19 @@ 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.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} 个行为",
@@ -133,6 +150,7 @@ 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": "没有剪辑片段，请点击录制按钮录制，或者点击加号创建",
     "Info.Hint.Save.After.Close": "任何未保存的进度都会丢失, 确定要继续吗?",
     "Info.Hint.Load.File.Title": "加载存档",
     "Info.Hint.Load.File.Intro": "释放以加载拽入的存档",

source/Model/Actuator.ts

@@ -1,8 +1,17 @@
 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;
 }
 
@@ -26,6 +35,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 +215,42 @@ class Actuator extends Emitter<IActuatorEvent> {
 
 	public tickerType: 1 | 2 = 2;
 
+	private playTickerTimer?: number;
+
+	/**
+	 * 播放时钟
+	 */
+	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 +265,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 +332,4 @@ class Actuator extends Emitter<IActuatorEvent> {
 	}
 }
 
-export { Actuator }
+export { Actuator, ActuatorModel }

source/Model/Archive.ts

@@ -37,7 +37,7 @@ class Archive extends Emitter<IArchiveEvent> {
     /**
      * 是否保存
      */
-    public isSaved: boolean = false;
+    public isSaved: boolean = true;
 
     /**
      * 文件路径
@@ -100,7 +100,7 @@ class Archive extends Emitter<IArchiveEvent> {
 
         // 解析为 JSON 对象
         const archive: IArchiveObject = JSON.parse(data);
-        console.log(archive);
+        // console.log(archive);
 
         // 实例化全部对象
         const objectPool: CtrlObject[] = [];
@@ -254,7 +254,7 @@ class Archive extends Emitter<IArchiveEvent> {
      * 加载文件为模型
      * @return Model
      */
-    public load(model: Model, data: string): string | undefined {
+    public load(model: Model, data: string, name: string, url?: string): string | undefined {
 
         try {
             this.loadArchiveIntoModel(model, data);
@@ -262,8 +262,12 @@ class Archive extends Emitter<IArchiveEvent> {
             return e as string;
         }
         
-        this.isSaved = true;
         this.emit("fileLoad", this);
+        this.fileName = name;
+        this.isSaved = true;
+        this.isNewFile = false;
+        this.fileUrl = url;
+        this.emit("fileSave", this);
     };
 
     public constructor() {

source/Model/Clip.ts

@@ -0,0 +1,130 @@
+import { IAnyObject, Model } from "@Model/Model";
+import { v4 as uuid } from "uuid";
+import { Group } from "@Model/Group";
+import { Range } from "@Model/Range";
+
+interface IDrawCommand {
+	type: "points" | "cube";
+	id: string;
+	data?: Float32Array;
+	position?: number[];
+	radius?: number[];
+	parameter?: IAnyObject;
+}
+
+interface IFrame {
+	commands: IDrawCommand[];
+	duration: number;
+	process: number;
+}
+
+/**
+ * 剪辑片段
+ */
+class Clip {
+
+	public id: string;
+
+	/**
+	 * 时间
+	 */
+	public time: number = 0;
+
+	/**
+	 * 用户自定义名称
+	 */
+	public name: string = "";
+
+	/**
+	 * 模型
+	 */
+	public model: Model;
+
+	/**
+	 * 全部帧
+	 */
+	public frames: IFrame[] = [];
+
+	/**
+	 * 是否正在录制
+	 */
+	public isRecording: boolean = false;
+
+	/**
+	 * 录制一帧
+	 */
+	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) {
+				commands.push({
+					type: "points",
+					id: object.id,
+					data: object.exportPositionData(),
+					parameter: object.renderParameter
+				});
+            }
+
+
+            if (object.display && object instanceof Range) {
+				commands.push({
+					type: "cube",
+					id: object.id,
+					position: object.position,
+					radius: object.radius,
+					parameter: object.renderParameter
+				});
+            }
+        }
+
+		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 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();
+	}
+}
+
+export { Clip, IFrame };

source/Model/Model.ts

@@ -5,6 +5,7 @@ import { IParamValue } from "@Model/Parameter";
 import { CtrlObject } from "@Model/CtrlObject";
 import { Emitter } from "@Model/Emitter";
 import { AbstractRenderer } from "@Model/Renderer";
+import { Clip } from "@Model/Clip";
 import { Behavior, IAnyBehavior, IAnyBehaviorRecorder } from "@Model/Behavior";
 
 /**
@@ -22,6 +23,7 @@ type ModelEvent = {
     objectChange: CtrlObject[];
     individualChange: Group;
     behaviorChange: IAnyBehavior;
+    clipChange: Clip[];
 };
 
 /**
@@ -330,6 +332,51 @@ 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 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);
+        }
+    }
+
     /**
      * 渲染器
      */
@@ -372,8 +419,6 @@ class Model extends Emitter<ModelEvent> {
                 object.runner(t, "finalEffect");
             }
         }
-
-        this.draw();
     }
 
     public draw() {

source/Page/SimulatorDesktop/SimulatorDesktop.tsx

@@ -1,18 +1,20 @@
 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 } from "@Context/Electron";
+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 { Group } from "@Model/Group";
 import "./SimulatorDesktop.scss";
 
 initializeIcons("./font-icon/");
@@ -47,25 +49,12 @@ class SimulatorDesktop 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
         };
 
-        this.electron = {} as ISimulatorAPI;
+        this.electron = getElectronAPI();
-        if ((window as any).API) {
-            this.electron = (window as any).API;
-        } else {
-            console.error("SimulatorDesktop: Can't find electron API");
-        }
     }
 
     public componentDidMount() {
@@ -102,7 +91,9 @@ class SimulatorDesktop extends Component {
         return <SettingProvider value={this.setting}>
             <StatusProvider value={this.status}>
                 <ElectronProvider value={this.electron}>
+                    <DndProvider backend={HTML5Backend}>
                         {this.renderContent()}
+                    </DndProvider>
                 </ElectronProvider>
             </StatusProvider>
         </SettingProvider>
@@ -115,6 +106,7 @@ class SimulatorDesktop extends Component {
             fontLevel={FontLevel.Level3}
         >
             <Popup/>
+            <LoadFile>
                 <HeaderBar height={35}/>
                 <div className="app-root-space" style={{
                     height: `calc( 100% - ${35}px)`
@@ -122,6 +114,7 @@ class SimulatorDesktop extends Component {
                     <CommandBar/>
                     <RootContainer/>
                 </div>
+            </LoadFile>
         </Theme>
     }
 }

source/Page/SimulatorWeb/SimulatorWeb.tsx

@@ -1,4 +1,6 @@
 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 { StatusProvider, Status } from "@Context/Status";
@@ -7,12 +9,10 @@ import { initializeIcons } from '@fluentui/font-icons-mdl2';
 import { RootContainer } from "@Component/Container/RootContainer";
 import { LayoutDirection } from "@Context/Layout";
 import { LoadFile } from "@Component/LoadFile/LoadFile";
-import { AllBehaviors, getBehaviorById } from "@Behavior/Behavior";
 import { CommandBar } from "@Component/CommandBar/CommandBar";
 import { HeaderBar } from "@Component/HeaderBar/HeaderBar";
 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/");
@@ -42,118 +42,6 @@ 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;
-            })
-        };
-
-        // 测试代码
-        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 (false) {
-            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("ContactAttacking"));
-            attacking.name = "Contact 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).LT = {
             status: this.status,
             setting: this.setting
@@ -167,7 +55,7 @@ class SimulatorWeb extends Component {
                     items: [
                         {panels: ["RenderView"]},
                         {
-                            items: [{panels: ["BehaviorList"]}, {panels: ["LabelList"]}],
+                            items: [{panels: ["ClipPlayer", "BehaviorList"]}, {panels: ["LabelList"]}],
                             scale: 80,
                             layout: LayoutDirection.X
                         }
@@ -193,7 +81,9 @@ class SimulatorWeb extends Component {
     public render(): ReactNode {
         return <SettingProvider value={this.setting}>
             <StatusProvider value={this.status}>
+                <DndProvider backend={HTML5Backend}>
                     {this.renderContent()}
+                </DndProvider>
             </StatusProvider>
         </SettingProvider>
     }
@@ -204,8 +94,8 @@ class SimulatorWeb extends Component {
             backgroundLevel={BackgroundLevel.Level5}
             fontLevel={FontLevel.Level3}
         >
-            <LoadFile/>
             <Popup/>
+            <LoadFile>
                 <HeaderBar height={45}/>
                 <div className="app-root-space" style={{
                     height: `calc( 100% - ${45}px)`
@@ -213,6 +103,7 @@ class SimulatorWeb extends Component {
                     <CommandBar/>
                     <RootContainer/>
                 </div>
+            </LoadFile>
         </Theme>
     }
 }

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,92 @@
+import { Component, ReactNode } from "react";
+import { ClipList } from "@Component/ClipList/ClipList";
+import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
+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 "./ClipPlayer.scss";
+
+@useStatusWithEvent("clipChange", "focusClipChange", "actuatorStartChange")
+class ClipPlayer extends Component<IMixinStatusProps> {
+
+	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;
+			}}
+			click={(clip) => {
+				this.isInnerClick = true;
+				this.props.status?.setClipObject(clip);
+				this.props.status?.actuator.startPlay(clip);
+			}}
+		/>;
+	}
+
+	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,100 @@
+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")
+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 start...");
+				}
+			}}
+		/>
+	}
+}
+
+export { ClipRecorder };

source/Panel/Panel.tsx

@@ -10,6 +10,8 @@ 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";
 
 interface IPanelInfo {
 	nameKey: string;
@@ -31,6 +33,7 @@ type PanelId = ""
 | "GroupDetails" // 群属性
 | "BehaviorList" // 行为列表
 | "BehaviorDetails" // 行为属性
+| "ClipPlayer" // 剪辑影片
 ;
 
 const PanelInfoMap = new Map<PanelId, IPanelInfo>();
@@ -66,6 +69,10 @@ 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
+});
 
 function getPanelById(panelId: PanelId): ReactNode {
 	switch (panelId) {