diff --git a/.ops/.gitlab-ci.yml b/.ops/.gitlab-ci.yml
index 03ed78d7..b26ff71b 100644
--- a/.ops/.gitlab-ci.yml
+++ b/.ops/.gitlab-ci.yml
@@ -4,4 +4,4 @@ include:
 
 variables:
   APP_NAME: "xtreme1"
-  APP_VERSION: "0.8"
+  APP_VERSION: "0.8.1"
diff --git a/README.md b/README.md
index 81195446..52057037 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 <div align="center">
 <img width="386" alt="Xtreme1 logo" src="https://user-images.githubusercontent.com/84139543/190300943-98da7d5c-bd67-4074-a94f-b7405d29fb90.png">
 
-![](https://img.shields.io/badge/Release-v0.8-green) 
+![](https://img.shields.io/badge/Release-v0.8.1-green) 
 ![](https://img.shields.io/badge/License-Apache%202.0-blueviolet)
 [![Twitter](https://img.shields.io/badge/Follow-Twitter-blue)](https://twitter.com/Xtreme1io)
 [![Online](https://img.shields.io/badge/Xtreme1_Online-App-yellow)](https://app.basic.ai/#/login)
@@ -62,8 +62,8 @@ Image Data Curation (Visualizing & Debug)  - [MobileNetV3](https://github.com/xi
 Download the latest release package and unzip it.
 
 ```bash
-wget https://github.com/xtreme1-io/xtreme1/releases/download/v0.8/xtreme1-v0.8.zip
-unzip -d xtreme1-v0.8 xtreme1-v0.8.zip
+wget https://github.com/xtreme1-io/xtreme1/releases/download/v0.8.1/xtreme1-v0.8.1.zip
+unzip -d xtreme1-v0.8.1 xtreme1-v0.8.1.zip
 ```
 
 ## Start all services
diff --git a/backend/Dockerfile b/backend/Dockerfile
index 08c5222b..3c2b0883 100644
--- a/backend/Dockerfile
+++ b/backend/Dockerfile
@@ -9,7 +9,7 @@ RUN apt update && \
     apt install -y iputils-ping curl wget netcat python3 python3-pip git
 RUN pip3 install --upgrade --force-reinstall git+https://github.com/xtreme1-io/xtreme1-sdk.git@d0cf4cc
 WORKDIR /app
-COPY --from=build /build/target/xtreme1-backend-0.8-SNAPSHOT.jar ./app.jar
+COPY --from=build /build/target/xtreme1-backend-0.8.1-SNAPSHOT.jar ./app.jar
 RUN mkdir -p config
 RUN wget 'https://github.com/xtreme1-io/asset/raw/main/datasets/xtreme1-lidar-fusion-trial.zip' -O xtreme1-lidar-fusion-trial.zip
 RUN wget 'https://github.com/xtreme1-io/asset/raw/main/datasets/xtreme1-image-trial.zip' -O xtreme1-image-trial.zip
diff --git a/backend/README.md b/backend/README.md
index 97159b53..b1843bf8 100644
--- a/backend/README.md
+++ b/backend/README.md
@@ -92,7 +92,7 @@ cd backend
 mvn package
 
 # Using local configuration to start application.
-java -Dspring.profiles.active=local -jar target/xtreme1-backend-0.8-SNAPSHOT.jar
+java -Dspring.profiles.active=local -jar target/xtreme1-backend-0.8.1-SNAPSHOT.jar
 ```
 
 Now you can access the backend service at `http://localhost:8080/`.
diff --git a/backend/pom.xml b/backend/pom.xml
index 0db8095b..a1dc1ab5 100644
--- a/backend/pom.xml
+++ b/backend/pom.xml
@@ -13,7 +13,7 @@
 
     <groupId>ai.basic</groupId>
     <artifactId>xtreme1-backend</artifactId>
-    <version>0.8-SNAPSHOT</version>
+    <version>0.8.1-SNAPSHOT</version>
     <name>Xtreme1 Backend</name>
     <description></description>
 
diff --git a/backend/src/main/java/ai/basic/x1/usecase/UploadDataUseCase.java b/backend/src/main/java/ai/basic/x1/usecase/UploadDataUseCase.java
index d27c3b35..b404960a 100644
--- a/backend/src/main/java/ai/basic/x1/usecase/UploadDataUseCase.java
+++ b/backend/src/main/java/ai/basic/x1/usecase/UploadDataUseCase.java
@@ -304,6 +304,7 @@ public void parseTextUploadFile(DataInfoUploadBO dataInfoUploadBO) {
         var rootPath = String.format("%s/%s", userId, datasetId);
         var errorBuilder = new StringBuilder();
         var dataInfoBOBuilder = DataInfoBO.builder().datasetId(datasetId)
+                .parentId(Constants.DEFAULT_PARENT_ID)
                 .type(ItemTypeEnum.SINGLE_DATA)
                 .status(DataStatusEnum.VALID)
                 .annotationStatus(DataAnnotationStatusEnum.NOT_ANNOTATED)
@@ -349,7 +350,7 @@ public void parseTextUploadFile(DataInfoUploadBO dataInfoUploadBO) {
                         dataInfoBOList.add(dataInfoBO);
                     });
                     if (CollectionUtil.isNotEmpty(dataInfoBOList)) {
-                        insertBatch(dataInfoBOList, datasetId, errorBuilder);
+                        insertBatch(dataInfoBOList, datasetId, errorBuilder, Constants.DEFAULT_PARENT_ID);
                     }
                 } catch (Exception e) {
                     log.error("Handle data error", e);
@@ -463,7 +464,15 @@ public void commonParseUploadFile(DataInfoUploadBO dataInfoUploadBO, BiConsumer<
         var dataAnnotationObjectBOBuilder = DataAnnotationObjectBO.builder()
                 .datasetId(datasetId).createdBy(userId).createdAt(OffsetDateTime.now()).sourceId(sourceId);
         sceneFileList.forEach(sceneFile -> {
-            var sceneId = this.saveScene(sceneFile, dataInfoUploadBO);
+            Long sceneId;
+            try {
+                sceneId = this.saveScene(sceneFile, dataInfoUploadBO);
+            } catch (DuplicateKeyException e) {
+                log.error("The scene already exists,scene name is {}", sceneFile.getName());
+                errorBuilder.append("Duplicate scene names:").append(sceneFile.getName()).append(";");
+                return;
+            }
+
             var dataNameList = getDataNamesFunction.apply(sceneFile);
             if (CollectionUtil.isEmpty(dataNameList)) {
                 log.error("The file in {} folder is empty", sceneFile);
@@ -498,7 +507,7 @@ public void commonParseUploadFile(DataInfoUploadBO dataInfoUploadBO, BiConsumer<
                         }
                     });
                     if (CollectionUtil.isNotEmpty(dataInfoBOList)) {
-                        var resDataInfoList = this.insertBatch(dataInfoBOList, datasetId, errorBuilder);
+                        var resDataInfoList = this.insertBatch(dataInfoBOList, datasetId, errorBuilder, sceneId);
                         this.saveBatchDataResult(resDataInfoList, dataAnnotationObjectBOList);
                     }
                 } catch (Exception e) {
@@ -1045,9 +1054,9 @@ public String getFilename(File file) {
      *
      * @param dataInfoBOList Collection of data details
      */
-    public List<DataInfoBO> insertBatch(List<DataInfoBO> dataInfoBOList, Long datasetId, StringBuilder errorBuilder) {
+    public List<DataInfoBO> insertBatch(List<DataInfoBO> dataInfoBOList, Long datasetId, StringBuilder errorBuilder, Long parentId) {
         var names = dataInfoBOList.stream().map(DataInfoBO::getName).collect(Collectors.toList());
-        var existDataInfoList = this.findByNames(datasetId, names);
+        var existDataInfoList = this.findByNames(datasetId, parentId, names);
         if (CollUtil.isNotEmpty(existDataInfoList)) {
             var existNames = existDataInfoList.stream().map(DataInfoBO::getName).collect(Collectors.toList());
             dataInfoBOList = dataInfoBOList.stream().filter(dataInfoBO -> !existNames.contains(dataInfoBO.getName())).collect(Collectors.toList());
@@ -1071,10 +1080,11 @@ public List<DataInfoBO> insertBatch(List<DataInfoBO> dataInfoBOList, Long datase
         }
     }
 
-    private List<DataInfoBO> findByNames(Long datasetId, List<String> names) {
+    private List<DataInfoBO> findByNames(Long datasetId, Long parentId, List<String> names) {
         var dataInfoLambdaQueryWrapper = Wrappers.lambdaQuery(DataInfo.class);
         dataInfoLambdaQueryWrapper.eq(DataInfo::getDatasetId, datasetId);
         dataInfoLambdaQueryWrapper.in(DataInfo::getName, names);
+        dataInfoLambdaQueryWrapper.eq(DataInfo::getParentId, parentId);
         return DefaultConverter.convert(dataInfoDAO.list(dataInfoLambdaQueryWrapper), DataInfoBO.class);
     }
 
diff --git a/docker-compose.yml b/docker-compose.yml
index 3bc7a534..d7506828 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -19,7 +19,7 @@ services:
       - 8191:3306
     volumes:
       - mysql-data:/var/lib/mysql
-      - ./deploy/mysql/custom.cnf:/etc/mysql/conf.d
+      - ./deploy/mysql/custom.cnf:/etc/mysql/conf.d/custom.cnf
       - ./deploy/mysql/migration:/docker-entrypoint-initdb.d
     healthcheck:
       test: '/usr/bin/mysql --user=xtreme1 --password=Rc4K3L6f --execute "SHOW DATABASES;"'
@@ -65,7 +65,7 @@ services:
       retries: 10
   backend:
     # By default, Compose will pull image from Docker Hub when no local image found.
-    image: basicai/xtreme1-backend:v0.8
+    image: basicai/xtreme1-backend:v0.8.1
     pull_policy: always
     # Uncomment this line and comment previous line to build image locally, not pull from Docker Hub.
     # build: ./backend
@@ -96,7 +96,7 @@ services:
         condition: service_healthy
   frontend:
     # By default, Compose will pull image from Docker Hub when no local image found.
-    image: basicai/xtreme1-frontend:v0.8
+    image: basicai/xtreme1-frontend:v0.8.1
     pull_policy: always
     # Uncomment this line and comment previous line to build image locally, not pull from Docker Hub.
     # build: ./frontend
diff --git a/frontend/image-tool/index.html b/frontend/image-tool/index.html
index b87ac144..81f239ed 100644
--- a/frontend/image-tool/index.html
+++ b/frontend/image-tool/index.html
@@ -3,7 +3,7 @@
     <head>
         <meta charset="UTF-8" />
         <link rel="icon" href="/favicon.ico" />
-        <link rel="stylesheet" href="/iconfont/style.css" />
+        <link rel="stylesheet" href="/iconfont/iconfont.css" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>Image Tool - Xtreme1</title>
     </head>
diff --git a/frontend/image-tool/package.json b/frontend/image-tool/package.json
index b588abe1..27c24973 100644
--- a/frontend/image-tool/package.json
+++ b/frontend/image-tool/package.json
@@ -15,10 +15,11 @@
         "@types/js-cookie": "^3.0.1",
         "@types/qs": "^6.9.7",
         "@types/three": "^0.136.1",
+        "@types/uuid": "^9.0.7",
         "@typescript-eslint/eslint-plugin": "^5.16.0",
         "@vueuse/components": "^8.6.0",
         "@vueuse/core": "^8.6.0",
-        "ant-design-vue": "2.2.8",
+        "ant-design-vue": "3.2.19",
         "axios": "^0.26.1",
         "colord": "^2.9.2",
         "cross-env": "^7.0.3",
@@ -34,7 +35,7 @@
         "hotkeys-js": "^3.8.7",
         "interactjs": "^1.10.11",
         "js-cookie": "^3.0.1",
-        "konva": "^8.3.8",
+        "konva": "^9.2.3",
         "less": "^4.1.2",
         "less-loader": "^10.2.0",
         "lodash": "^4.17.21",
@@ -50,7 +51,8 @@
         "vue": "^3.2.25",
         "vue-clipboard2": "^0.3.3",
         "vue-i18n": "^9.1.9",
-        "vue-router": "^4.0.14"
+        "vue-router": "^4.0.14",
+        "vue3-colorpicker": "^2.2.3"
     },
     "devDependencies": {
         "@commitlint/cli": "^16.2.3",
diff --git a/frontend/image-tool/prettier.config.js b/frontend/image-tool/prettier.config.js
index 1a56157c..01aaed56 100644
--- a/frontend/image-tool/prettier.config.js
+++ b/frontend/image-tool/prettier.config.js
@@ -6,6 +6,6 @@ module.exports = {
     trailingComma: 'all',
     proseWrap: 'never',
     htmlWhitespaceSensitivity: 'strict',
-    tabWidth: 4,
+    tabWidth: 2,
     endOfLine: 'auto',
 };
diff --git a/frontend/image-tool/public/iconfont/Read Me.txt b/frontend/image-tool/public/iconfont/Read Me.txt
deleted file mode 100644
index 8491652f..00000000
--- a/frontend/image-tool/public/iconfont/Read Me.txt	
+++ /dev/null
@@ -1,7 +0,0 @@
-Open *demo.html* to see a list of all the glyphs in your font along with their codes/ligatures.
-
-To use the generated font in desktop programs, you can install the TTF font. In order to copy the character associated with each icon, refer to the text box at the bottom right corner of each glyph in demo.html. The character inside this text box may be invisible; but it can still be copied. See this guide for more info: https://icomoon.io/#docs/local-fonts
-
-You won't need any of the files located under the *demo-files* directory when including the generated font in your own projects.
-
-You can import *selection.json* back to the IcoMoon app using the *Import Icons* button (or via Main Menu → Manage Projects) to retrieve your icon selection.
diff --git a/frontend/image-tool/public/iconfont/demo-files/demo.css b/frontend/image-tool/public/iconfont/demo-files/demo.css
deleted file mode 100644
index 39b8991d..00000000
--- a/frontend/image-tool/public/iconfont/demo-files/demo.css
+++ /dev/null
@@ -1,152 +0,0 @@
-body {
-  padding: 0;
-  margin: 0;
-  font-family: sans-serif;
-  font-size: 1em;
-  line-height: 1.5;
-  color: #555;
-  background: #fff;
-}
-h1 {
-  font-size: 1.5em;
-  font-weight: normal;
-}
-small {
-  font-size: .66666667em;
-}
-a {
-  color: #e74c3c;
-  text-decoration: none;
-}
-a:hover, a:focus {
-  box-shadow: 0 1px #e74c3c;
-}
-.bshadow0, input {
-  box-shadow: inset 0 -2px #e7e7e7;
-}
-input:hover {
-  box-shadow: inset 0 -2px #ccc;
-}
-input, fieldset {
-  font-family: sans-serif;
-  font-size: 1em;
-  margin: 0;
-  padding: 0;
-  border: 0;
-}
-input {
-  color: inherit;
-  line-height: 1.5;
-  height: 1.5em;
-  padding: .25em 0;
-}
-input:focus {
-  outline: none;
-  box-shadow: inset 0 -2px #449fdb;
-}
-.glyph {
-  font-size: 16px;
-  width: 15em;
-  padding-bottom: 1em;
-  margin-right: 4em;
-  margin-bottom: 1em;
-  float: left;
-  overflow: hidden;
-}
-.liga {
-  width: 80%;
-  width: calc(100% - 2.5em);
-}
-.talign-right {
-  text-align: right;
-}
-.talign-center {
-  text-align: center;
-}
-.bgc1 {
-  background: #f1f1f1;
-}
-.fgc1 {
-  color: #999;
-}
-.fgc0 {
-  color: #000;
-}
-p {
-  margin-top: 1em;
-  margin-bottom: 1em;
-}
-.mvm {
-  margin-top: .75em;
-  margin-bottom: .75em;
-}
-.mtn {
-  margin-top: 0;
-}
-.mtl, .mal {
-  margin-top: 1.5em;
-}
-.mbl, .mal {
-  margin-bottom: 1.5em;
-}
-.mal, .mhl {
-  margin-left: 1.5em;
-  margin-right: 1.5em;
-}
-.mhmm {
-  margin-left: 1em;
-  margin-right: 1em;
-}
-.mls {
-  margin-left: .25em;
-}
-.ptl {
-  padding-top: 1.5em;
-}
-.pbs, .pvs {
-  padding-bottom: .25em;
-}
-.pvs, .pts {
-  padding-top: .25em;
-}
-.unit {
-  float: left;
-}
-.unitRight {
-  float: right;
-}
-.size1of2 {
-  width: 50%;
-}
-.size1of1 {
-  width: 100%;
-}
-.clearfix:before, .clearfix:after {
-  content: " ";
-  display: table;
-}
-.clearfix:after {
-  clear: both;
-}
-.hidden-true {
-  display: none;
-}
-.textbox0 {
-  width: 3em;
-  background: #f1f1f1;
-  padding: .25em .5em;
-  line-height: 1.5;
-  height: 1.5em;
-}
-#testDrive {
-  display: block;
-  padding-top: 24px;
-  line-height: 1.5;
-}
-.fs0 {
-  font-size: 16px;
-}
-.fs1 {
-  font-size: 32px;
-}
-
diff --git a/frontend/image-tool/public/iconfont/demo-files/demo.js b/frontend/image-tool/public/iconfont/demo-files/demo.js
deleted file mode 100644
index 6f45f1c4..00000000
--- a/frontend/image-tool/public/iconfont/demo-files/demo.js
+++ /dev/null
@@ -1,30 +0,0 @@
-if (!('boxShadow' in document.body.style)) {
-    document.body.setAttribute('class', 'noBoxShadow');
-}
-
-document.body.addEventListener("click", function(e) {
-    var target = e.target;
-    if (target.tagName === "INPUT" &&
-        target.getAttribute('class').indexOf('liga') === -1) {
-        target.select();
-    }
-});
-
-(function() {
-    var fontSize = document.getElementById('fontSize'),
-        testDrive = document.getElementById('testDrive'),
-        testText = document.getElementById('testText');
-    function updateTest() {
-        testDrive.innerHTML = testText.value || String.fromCharCode(160);
-        if (window.icomoonLiga) {
-            window.icomoonLiga(testDrive);
-        }
-    }
-    function updateSize() {
-        testDrive.style.fontSize = fontSize.value + 'px';
-    }
-    fontSize.addEventListener('change', updateSize, false);
-    testText.addEventListener('input', updateTest, false);
-    testText.addEventListener('change', updateTest, false);
-    updateSize();
-}());
diff --git a/frontend/image-tool/public/iconfont/demo.css b/frontend/image-tool/public/iconfont/demo.css
new file mode 100644
index 00000000..a67054a0
--- /dev/null
+++ b/frontend/image-tool/public/iconfont/demo.css
@@ -0,0 +1,539 @@
+/* Logo 字体 */
+@font-face {
+  font-family: "iconfont logo";
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
+}
+
+.logo {
+  font-family: "iconfont logo";
+  font-size: 160px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* tabs */
+.nav-tabs {
+  position: relative;
+}
+
+.nav-tabs .nav-more {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 42px;
+  line-height: 42px;
+  color: #666;
+}
+
+#tabs {
+  border-bottom: 1px solid #eee;
+}
+
+#tabs li {
+  cursor: pointer;
+  width: 100px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  font-size: 16px;
+  border-bottom: 2px solid transparent;
+  position: relative;
+  z-index: 1;
+  margin-bottom: -1px;
+  color: #666;
+}
+
+
+#tabs .active {
+  border-bottom-color: #f00;
+  color: #222;
+}
+
+.tab-container .content {
+  display: none;
+}
+
+/* 页面布局 */
+.main {
+  padding: 30px 100px;
+  width: 960px;
+  margin: 0 auto;
+}
+
+.main .logo {
+  color: #333;
+  text-align: left;
+  margin-bottom: 30px;
+  line-height: 1;
+  height: 110px;
+  margin-top: -50px;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.main .logo a {
+  font-size: 160px;
+  color: #333;
+}
+
+.helps {
+  margin-top: 40px;
+}
+
+.helps pre {
+  padding: 20px;
+  margin: 10px 0;
+  border: solid 1px #e7e1cd;
+  background-color: #fffdef;
+  overflow: auto;
+}
+
+.icon_lists {
+  width: 100% !important;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.icon_lists li {
+  width: 100px;
+  margin-bottom: 10px;
+  margin-right: 20px;
+  text-align: center;
+  list-style: none !important;
+  cursor: default;
+}
+
+.icon_lists li .code-name {
+  line-height: 1.2;
+}
+
+.icon_lists .icon {
+  display: block;
+  height: 100px;
+  line-height: 100px;
+  font-size: 42px;
+  margin: 10px auto;
+  color: #333;
+  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
+  -moz-transition: font-size 0.25s linear, width 0.25s linear;
+  transition: font-size 0.25s linear, width 0.25s linear;
+}
+
+.icon_lists .icon:hover {
+  font-size: 100px;
+}
+
+.icon_lists .svg-icon {
+  /* 通过设置 font-size 来改变图标大小 */
+  width: 1em;
+  /* 图标和文字相邻时，垂直对齐 */
+  vertical-align: -0.15em;
+  /* 通过设置 color 来改变 SVG 的颜色/fill */
+  fill: currentColor;
+  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+      normalize.css 中也包含这行 */
+  overflow: hidden;
+}
+
+.icon_lists li .name,
+.icon_lists li .code-name {
+  color: #666;
+}
+
+/* markdown 样式 */
+.markdown {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.highlight {
+  line-height: 1.5;
+}
+
+.markdown img {
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+.markdown h1 {
+  color: #404040;
+  font-weight: 500;
+  line-height: 40px;
+  margin-bottom: 24px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  color: #404040;
+  margin: 1.6em 0 0.6em 0;
+  font-weight: 500;
+  clear: both;
+}
+
+.markdown h1 {
+  font-size: 28px;
+}
+
+.markdown h2 {
+  font-size: 22px;
+}
+
+.markdown h3 {
+  font-size: 16px;
+}
+
+.markdown h4 {
+  font-size: 14px;
+}
+
+.markdown h5 {
+  font-size: 12px;
+}
+
+.markdown h6 {
+  font-size: 12px;
+}
+
+.markdown hr {
+  height: 1px;
+  border: 0;
+  background: #e9e9e9;
+  margin: 16px 0;
+  clear: both;
+}
+
+.markdown p {
+  margin: 1em 0;
+}
+
+.markdown>p,
+.markdown>blockquote,
+.markdown>.highlight,
+.markdown>ol,
+.markdown>ul {
+  width: 80%;
+}
+
+.markdown ul>li {
+  list-style: circle;
+}
+
+.markdown>ul li,
+.markdown blockquote ul>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown>ul li p,
+.markdown>ol li p {
+  margin: 0.6em 0;
+}
+
+.markdown ol>li {
+  list-style: decimal;
+}
+
+.markdown>ol li,
+.markdown blockquote ol>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown code {
+  margin: 0 3px;
+  padding: 0 5px;
+  background: #eee;
+  border-radius: 3px;
+}
+
+.markdown strong,
+.markdown b {
+  font-weight: 600;
+}
+
+.markdown>table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+  empty-cells: show;
+  border: 1px solid #e9e9e9;
+  width: 95%;
+  margin-bottom: 24px;
+}
+
+.markdown>table th {
+  white-space: nowrap;
+  color: #333;
+  font-weight: 600;
+}
+
+.markdown>table th,
+.markdown>table td {
+  border: 1px solid #e9e9e9;
+  padding: 8px 16px;
+  text-align: left;
+}
+
+.markdown>table th {
+  background: #F7F7F7;
+}
+
+.markdown blockquote {
+  font-size: 90%;
+  color: #999;
+  border-left: 4px solid #e9e9e9;
+  padding-left: 0.8em;
+  margin: 1em 0;
+}
+
+.markdown blockquote p {
+  margin: 0;
+}
+
+.markdown .anchor {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-left: 8px;
+}
+
+.markdown .waiting {
+  color: #ccc;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  opacity: 1;
+  display: inline-block;
+}
+
+.markdown>br,
+.markdown>p>br {
+  clear: both;
+}
+
+
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+
+.hljs-tag {
+  color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+
+.hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+/* 代码高亮 */
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+@media print {
+
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+}
+
+:not(pre)>code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre)>code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #999;
+}
+
+.namespace {
+  opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+  background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}
diff --git a/frontend/image-tool/public/iconfont/demo.html b/frontend/image-tool/public/iconfont/demo.html
deleted file mode 100644
index 39d757d1..00000000
--- a/frontend/image-tool/public/iconfont/demo.html
+++ /dev/null
@@ -1,808 +0,0 @@
-<!doctype html>
-<html>
-<head>
-    <meta charset="utf-8">
-    <title>IcoMoon Demo</title>
-    <meta name="description" content="An Icon Font Generated By IcoMoon.io">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="demo-files/demo.css">
-    <link rel="stylesheet" href="style.css"></head>
-<body>
-    <div class="bgc1 clearfix">
-        <h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> icomoon <small class="fgc1">(Glyphs:&nbsp;55)</small></h1>
-    </div>
-    <div class="clearfix mhl ptl">
-        <h1 class="mvm mtn fgc1">Grid Size: 32</h1>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-polygon-hollow"></span>
-                <span class="mls"> icon-polygon-hollow</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e934" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe934;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-cancel-hollow"></span>
-                <span class="mls"> icon-cancel-hollow</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e935" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe935;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-polygon-clip"></span>
-                <span class="mls"> icon-polygon-clip</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e931" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe931;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-keyboard"></span>
-                <span class="mls"> icon-keyboard</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e932" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe932;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-command"></span>
-                <span class="mls"> icon-command</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e933" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe933;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-Job-information"></span>
-                <span class="mls"> icon-Job-information</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e900" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe900;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-Expiration-time"></span>
-                <span class="mls"> icon-Expiration-time</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e901" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe901;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-Work-flow"></span>
-                <span class="mls"> icon-Work-flow</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e902" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe902;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-save"></span>
-                <span class="mls"> icon-save</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e903" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe903;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-help"></span>
-                <span class="mls"> icon-help</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e904" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe904;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-enter-fullscreen"></span>
-                <span class="mls"> icon-enter-fullscreen</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e905" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe905;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-exit-fullscreen"></span>
-                <span class="mls"> icon-exit-fullscreen</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e906" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe906;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-hang-up"></span>
-                <span class="mls"> icon-hang-up</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e907" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe907;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-submit"></span>
-                <span class="mls"> icon-submit</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e908" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe908;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-setting"></span>
-                <span class="mls"> icon-setting</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e909" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe909;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-information"></span>
-                <span class="mls"> icon-information</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e90a" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe90a;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-mapping"></span>
-                <span class="mls"> icon-mapping</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e90b" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe90b;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-rotating"></span>
-                <span class="mls"> icon-rotating</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e90c" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe90c;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-move"></span>
-                <span class="mls"> icon-move</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e90d" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe90d;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-tool"></span>
-                <span class="mls"> icon-tool</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e90e" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe90e;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-Pack-up"></span>
-                <span class="mls"> icon-Pack-up</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e90f" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe90f;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-an-right"></span>
-                <span class="mls"> icon-an-right</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e910" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe910;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-down"></span>
-                <span class="mls"> icon-down</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e911" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe911;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-up"></span>
-                <span class="mls"> icon-up</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e912" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe912;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-Right-rotation"></span>
-                <span class="mls"> icon-Right-rotation</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e913" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe913;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-Left-rotation"></span>
-                <span class="mls"> icon-Left-rotation</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e914" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe914;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-remind"></span>
-                <span class="mls"> icon-remind</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e915" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe915;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-Notes---list"></span>
-                <span class="mls"> icon-Notes---list</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e916" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe916;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-Have-been-added"></span>
-                <span class="mls"> icon-Have-been-added</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e917" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe917;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-Add-a-notation"></span>
-                <span class="mls"> icon-Add-a-notation</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e918" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe918;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-notation-tool"></span>
-                <span class="mls"> icon-notation-tool</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e919" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe919;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-filter"></span>
-                <span class="mls"> icon-filter</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e91a" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe91a;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-class-edit"></span>
-                <span class="mls"> icon-class-edit</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e91b" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe91b;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-delete"></span>
-                <span class="mls"> icon-delete</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e91c" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe91c;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-visible"></span>
-                <span class="mls"> icon-visible</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e91d" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe91d;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-biaozhunkuang"></span>
-                <span class="mls"> icon-biaozhunkuang</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e91e" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe91e;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-lifangti"></span>
-                <span class="mls"> icon-lifangti</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e91f" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe91f;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-target"></span>
-                <span class="mls"> icon-target</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e920" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe920;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-auxiliaryline"></span>
-                <span class="mls"> icon-auxiliaryline</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e921" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe921;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-more"></span>
-                <span class="mls"> icon-more</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e922" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe922;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-unfold"></span>
-                <span class="mls"> icon-unfold</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e923" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe923;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-hidden"></span>
-                <span class="mls"> icon-hidden</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e924" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe924;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-left"></span>
-                <span class="mls"> icon-left</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e925" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe925;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-right"></span>
-                <span class="mls"> icon-right</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e926" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe926;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-dakai"></span>
-                <span class="mls"> icon-dakai</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e927" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe927;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-model"></span>
-                <span class="mls"> icon-model</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e928" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe928;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-interactive"></span>
-                <span class="mls"> icon-interactive</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e936" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe936;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-loading"></span>
-                <span class="mls"> icon-loading</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e929" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe929;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-cube"></span>
-                <span class="mls"> icon-cube</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e92a" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe92a;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-Frame"></span>
-                <span class="mls"> icon-Frame</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e92b" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe92b;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-polygon"></span>
-                <span class="mls"> icon-polygon</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e92c" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe92c;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-edit"></span>
-                <span class="mls"> icon-edit</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e92d" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe92d;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-rectangle"></span>
-                <span class="mls"> icon-rectangle</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e92e" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe92e;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-ai"></span>
-                <span class="mls"> icon-ai</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e92f" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe92f;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-polyline"></span>
-                <span class="mls"> icon-polyline</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e930" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe930;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-    </div>
-
-    <!--[if gt IE 8]><!-->
-    <div class="mhl clearfix mbl">
-        <h1>Font Test Drive</h1>
-        <label>
-            Font Size: <input id="fontSize" type="number" class="textbox0 mbm"
-            min="8" value="48" />
-            px
-        </label>
-        <input id="testText" type="text" class="phl size1of1 mvl"
-        placeholder="Type some text to test..." value=""/>
-        <div id="testDrive" class="icon-" style="font-family: icomoon">&nbsp;
-        </div>
-    </div>
-    <!--<![endif]-->
-    <div class="bgc1 clearfix">
-        <p class="mhl">Generated by <a href="https://icomoon.io/app">IcoMoon</a></p>
-    </div>
-
-    <script src="demo-files/demo.js"></script>
-</body>
-</html>
diff --git a/frontend/image-tool/public/iconfont/demo_index.html b/frontend/image-tool/public/iconfont/demo_index.html
new file mode 100644
index 00000000..869ef075
--- /dev/null
+++ b/frontend/image-tool/public/iconfont/demo_index.html
@@ -0,0 +1,1154 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>iconfont Demo</title>
+  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
+  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
+  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
+  <link rel="stylesheet" href="demo.css">
+  <link rel="stylesheet" href="iconfont.css">
+  <script src="iconfont.js"></script>
+  <!-- jQuery -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
+  <!-- 代码高亮 -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
+  <style>
+    .main .logo {
+      margin-top: 0;
+      height: auto;
+    }
+
+    .main .logo a {
+      display: flex;
+      align-items: center;
+    }
+
+    .main .logo .sub-title {
+      margin-left: 0.5em;
+      font-size: 22px;
+      color: #fff;
+      background: linear-gradient(-45deg, #3967FF, #B500FE);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  </style>
+</head>
+<body>
+  <div class="main">
+    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
+      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
+      
+    </a></h1>
+    <div class="nav-tabs">
+      <ul id="tabs" class="dib-box">
+        <li class="dib active"><span>Unicode</span></li>
+        <li class="dib"><span>Font class</span></li>
+        <li class="dib"><span>Symbol</span></li>
+      </ul>
+      
+      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4374613" target="_blank" class="nav-more">查看项目</a>
+      
+    </div>
+    <div class="tab-container">
+      <div class="content unicode" style="display: block;">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe736;</span>
+                <div class="name">cube</div>
+                <div class="code-name">&amp;#xe736;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe741;</span>
+                <div class="name">play</div>
+                <div class="code-name">&amp;#xe741;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe743;</span>
+                <div class="name">replay</div>
+                <div class="code-name">&amp;#xe743;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe745;</span>
+                <div class="name">backup</div>
+                <div class="code-name">&amp;#xe745;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe746;</span>
+                <div class="name">forward</div>
+                <div class="code-name">&amp;#xe746;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe750;</span>
+                <div class="name">ongoing</div>
+                <div class="code-name">&amp;#xe750;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe769;</span>
+                <div class="name">Crop non-first</div>
+                <div class="code-name">&amp;#xe769;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe76a;</span>
+                <div class="name">Crop the first</div>
+                <div class="code-name">&amp;#xe76a;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe621;</span>
+                <div class="name">transform</div>
+                <div class="code-name">&amp;#xe621;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe60d;</span>
+                <div class="name">point</div>
+                <div class="code-name">&amp;#xe60d;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe61a;</span>
+                <div class="name">reset</div>
+                <div class="code-name">&amp;#xe61a;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6de;</span>
+                <div class="name">rotate-right</div>
+                <div class="code-name">&amp;#xe6de;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6e0;</span>
+                <div class="name">rotate-left</div>
+                <div class="code-name">&amp;#xe6e0;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6fe;</span>
+                <div class="name">information</div>
+                <div class="code-name">&amp;#xe6fe;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe620;</span>
+                <div class="name">hollow</div>
+                <div class="code-name">&amp;#xe620;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe752;</span>
+                <div class="name">cancel-hollow</div>
+                <div class="code-name">&amp;#xe752;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe767;</span>
+                <div class="name">hotkey</div>
+                <div class="code-name">&amp;#xe767;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe67c;</span>
+                <div class="name">rect</div>
+                <div class="code-name">&amp;#xe67c;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe703;</span>
+                <div class="name">save</div>
+                <div class="code-name">&amp;#xe703;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe704;</span>
+                <div class="name">help</div>
+                <div class="code-name">&amp;#xe704;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe705;</span>
+                <div class="name">fullscreen</div>
+                <div class="code-name">&amp;#xe705;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe706;</span>
+                <div class="name">exitfullscreen</div>
+                <div class="code-name">&amp;#xe706;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe70b;</span>
+                <div class="name">info</div>
+                <div class="code-name">&amp;#xe70b;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe70c;</span>
+                <div class="name">setting</div>
+                <div class="code-name">&amp;#xe70c;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe712;</span>
+                <div class="name">toleft</div>
+                <div class="code-name">&amp;#xe712;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe713;</span>
+                <div class="name">toright</div>
+                <div class="code-name">&amp;#xe713;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe71a;</span>
+                <div class="name">remind</div>
+                <div class="code-name">&amp;#xe71a;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe71f;</span>
+                <div class="name">view</div>
+                <div class="code-name">&amp;#xe71f;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe721;</span>
+                <div class="name">delete</div>
+                <div class="code-name">&amp;#xe721;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe722;</span>
+                <div class="name">editlabel</div>
+                <div class="code-name">&amp;#xe722;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe724;</span>
+                <div class="name">filter</div>
+                <div class="code-name">&amp;#xe724;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe72d;</span>
+                <div class="name">more</div>
+                <div class="code-name">&amp;#xe72d;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe72f;</span>
+                <div class="name">hidden</div>
+                <div class="code-name">&amp;#xe72f;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe730;</span>
+                <div class="name">left</div>
+                <div class="code-name">&amp;#xe730;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe731;</span>
+                <div class="name">right</div>
+                <div class="code-name">&amp;#xe731;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe737;</span>
+                <div class="name">loading </div>
+                <div class="code-name">&amp;#xe737;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe738;</span>
+                <div class="name">model</div>
+                <div class="code-name">&amp;#xe738;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe751;</span>
+                <div class="name">arrow</div>
+                <div class="code-name">&amp;#xe751;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe764;</span>
+                <div class="name">ai</div>
+                <div class="code-name">&amp;#xe764;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe766;</span>
+                <div class="name">smart</div>
+                <div class="code-name">&amp;#xe766;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe601;</span>
+                <div class="name">polygon</div>
+                <div class="code-name">&amp;#xe601;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe602;</span>
+                <div class="name">polyline</div>
+                <div class="code-name">&amp;#xe602;</div>
+              </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="unicode-">Unicode 引用</h2>
+          <hr>
+
+          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
+          <ul>
+            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
+            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
+          </ul>
+          <blockquote>
+            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
+          </blockquote>
+          <p>Unicode 使用步骤如下：</p>
+          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
+<pre><code class="language-css"
+>@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.woff2?t=1704191662778') format('woff2'),
+       url('iconfont.woff?t=1704191662778') format('woff'),
+       url('iconfont.ttf?t=1704191662778') format('truetype');
+}
+</code></pre>
+          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
+<pre><code class="language-css"
+>.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
+<pre>
+<code class="language-html"
+>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
+</code></pre>
+          <blockquote>
+            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+          </blockquote>
+          </div>
+      </div>
+      <div class="content font-class">
+        <ul class="icon_lists dib-box">
+          
+          <li class="dib">
+            <span class="icon iconfont icon-cube"></span>
+            <div class="name">
+              cube
+            </div>
+            <div class="code-name">.icon-cube
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-play"></span>
+            <div class="name">
+              play
+            </div>
+            <div class="code-name">.icon-play
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-replay"></span>
+            <div class="name">
+              replay
+            </div>
+            <div class="code-name">.icon-replay
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-backup"></span>
+            <div class="name">
+              backup
+            </div>
+            <div class="code-name">.icon-backup
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-forward"></span>
+            <div class="name">
+              forward
+            </div>
+            <div class="code-name">.icon-forward
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-Frame23"></span>
+            <div class="name">
+              ongoing
+            </div>
+            <div class="code-name">.icon-Frame23
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-crop-non-first"></span>
+            <div class="name">
+              Crop non-first
+            </div>
+            <div class="code-name">.icon-crop-non-first
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-crop-first"></span>
+            <div class="name">
+              Crop the first
+            </div>
+            <div class="code-name">.icon-crop-first
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-transform"></span>
+            <div class="name">
+              transform
+            </div>
+            <div class="code-name">.icon-transform
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-point"></span>
+            <div class="name">
+              point
+            </div>
+            <div class="code-name">.icon-point
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-reset"></span>
+            <div class="name">
+              reset
+            </div>
+            <div class="code-name">.icon-reset
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-rotate90"></span>
+            <div class="name">
+              rotate-right
+            </div>
+            <div class="code-name">.icon-rotate90
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-rotate270"></span>
+            <div class="name">
+              rotate-left
+            </div>
+            <div class="code-name">.icon-rotate270
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-information"></span>
+            <div class="name">
+              information
+            </div>
+            <div class="code-name">.icon-information
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-hollow"></span>
+            <div class="name">
+              hollow
+            </div>
+            <div class="code-name">.icon-hollow
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-cancel-hollow"></span>
+            <div class="name">
+              cancel-hollow
+            </div>
+            <div class="code-name">.icon-cancel-hollow
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-hotkey"></span>
+            <div class="name">
+              hotkey
+            </div>
+            <div class="code-name">.icon-hotkey
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-rect"></span>
+            <div class="name">
+              rect
+            </div>
+            <div class="code-name">.icon-rect
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-save"></span>
+            <div class="name">
+              save
+            </div>
+            <div class="code-name">.icon-save
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-help"></span>
+            <div class="name">
+              help
+            </div>
+            <div class="code-name">.icon-help
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-fullscreen"></span>
+            <div class="name">
+              fullscreen
+            </div>
+            <div class="code-name">.icon-fullscreen
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-exitfullscreen"></span>
+            <div class="name">
+              exitfullscreen
+            </div>
+            <div class="code-name">.icon-exitfullscreen
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-info"></span>
+            <div class="name">
+              info
+            </div>
+            <div class="code-name">.icon-info
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-setting"></span>
+            <div class="name">
+              setting
+            </div>
+            <div class="code-name">.icon-setting
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-toleft"></span>
+            <div class="name">
+              toleft
+            </div>
+            <div class="code-name">.icon-toleft
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-toright"></span>
+            <div class="name">
+              toright
+            </div>
+            <div class="code-name">.icon-toright
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-remind"></span>
+            <div class="name">
+              remind
+            </div>
+            <div class="code-name">.icon-remind
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-view"></span>
+            <div class="name">
+              view
+            </div>
+            <div class="code-name">.icon-view
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-delete"></span>
+            <div class="name">
+              delete
+            </div>
+            <div class="code-name">.icon-delete
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-editlabel"></span>
+            <div class="name">
+              editlabel
+            </div>
+            <div class="code-name">.icon-editlabel
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-filter"></span>
+            <div class="name">
+              filter
+            </div>
+            <div class="code-name">.icon-filter
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-more"></span>
+            <div class="name">
+              more
+            </div>
+            <div class="code-name">.icon-more
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-hidden"></span>
+            <div class="name">
+              hidden
+            </div>
+            <div class="code-name">.icon-hidden
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-left"></span>
+            <div class="name">
+              left
+            </div>
+            <div class="code-name">.icon-left
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-right"></span>
+            <div class="name">
+              right
+            </div>
+            <div class="code-name">.icon-right
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-loading"></span>
+            <div class="name">
+              loading 
+            </div>
+            <div class="code-name">.icon-loading
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-model"></span>
+            <div class="name">
+              model
+            </div>
+            <div class="code-name">.icon-model
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-arrow"></span>
+            <div class="name">
+              arrow
+            </div>
+            <div class="code-name">.icon-arrow
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-ai"></span>
+            <div class="name">
+              ai
+            </div>
+            <div class="code-name">.icon-ai
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-smart"></span>
+            <div class="name">
+              smart
+            </div>
+            <div class="code-name">.icon-smart
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-polygon"></span>
+            <div class="name">
+              polygon
+            </div>
+            <div class="code-name">.icon-polygon
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-polyline"></span>
+            <div class="name">
+              polyline
+            </div>
+            <div class="code-name">.icon-polyline
+            </div>
+          </li>
+          
+        </ul>
+        <div class="article markdown">
+        <h2 id="font-class-">font-class 引用</h2>
+        <hr>
+
+        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
+        <p>与 Unicode 使用方式相比，具有如下特点：</p>
+        <ul>
+          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
+          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
+        </ul>
+        <p>使用步骤如下：</p>
+        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
+<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
+</code></pre>
+        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
+</code></pre>
+        <blockquote>
+          <p>"
+            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+        </blockquote>
+      </div>
+      </div>
+      <div class="content symbol">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-cube"></use>
+                </svg>
+                <div class="name">cube</div>
+                <div class="code-name">#icon-cube</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-play"></use>
+                </svg>
+                <div class="name">play</div>
+                <div class="code-name">#icon-play</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-replay"></use>
+                </svg>
+                <div class="name">replay</div>
+                <div class="code-name">#icon-replay</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-backup"></use>
+                </svg>
+                <div class="name">backup</div>
+                <div class="code-name">#icon-backup</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-forward"></use>
+                </svg>
+                <div class="name">forward</div>
+                <div class="code-name">#icon-forward</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-Frame23"></use>
+                </svg>
+                <div class="name">ongoing</div>
+                <div class="code-name">#icon-Frame23</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-crop-non-first"></use>
+                </svg>
+                <div class="name">Crop non-first</div>
+                <div class="code-name">#icon-crop-non-first</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-crop-first"></use>
+                </svg>
+                <div class="name">Crop the first</div>
+                <div class="code-name">#icon-crop-first</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-transform"></use>
+                </svg>
+                <div class="name">transform</div>
+                <div class="code-name">#icon-transform</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-point"></use>
+                </svg>
+                <div class="name">point</div>
+                <div class="code-name">#icon-point</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-reset"></use>
+                </svg>
+                <div class="name">reset</div>
+                <div class="code-name">#icon-reset</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-rotate90"></use>
+                </svg>
+                <div class="name">rotate-right</div>
+                <div class="code-name">#icon-rotate90</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-rotate270"></use>
+                </svg>
+                <div class="name">rotate-left</div>
+                <div class="code-name">#icon-rotate270</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-information"></use>
+                </svg>
+                <div class="name">information</div>
+                <div class="code-name">#icon-information</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-hollow"></use>
+                </svg>
+                <div class="name">hollow</div>
+                <div class="code-name">#icon-hollow</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-cancel-hollow"></use>
+                </svg>
+                <div class="name">cancel-hollow</div>
+                <div class="code-name">#icon-cancel-hollow</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-hotkey"></use>
+                </svg>
+                <div class="name">hotkey</div>
+                <div class="code-name">#icon-hotkey</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-rect"></use>
+                </svg>
+                <div class="name">rect</div>
+                <div class="code-name">#icon-rect</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-save"></use>
+                </svg>
+                <div class="name">save</div>
+                <div class="code-name">#icon-save</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-help"></use>
+                </svg>
+                <div class="name">help</div>
+                <div class="code-name">#icon-help</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-fullscreen"></use>
+                </svg>
+                <div class="name">fullscreen</div>
+                <div class="code-name">#icon-fullscreen</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-exitfullscreen"></use>
+                </svg>
+                <div class="name">exitfullscreen</div>
+                <div class="code-name">#icon-exitfullscreen</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-info"></use>
+                </svg>
+                <div class="name">info</div>
+                <div class="code-name">#icon-info</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-setting"></use>
+                </svg>
+                <div class="name">setting</div>
+                <div class="code-name">#icon-setting</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-toleft"></use>
+                </svg>
+                <div class="name">toleft</div>
+                <div class="code-name">#icon-toleft</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-toright"></use>
+                </svg>
+                <div class="name">toright</div>
+                <div class="code-name">#icon-toright</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-remind"></use>
+                </svg>
+                <div class="name">remind</div>
+                <div class="code-name">#icon-remind</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-view"></use>
+                </svg>
+                <div class="name">view</div>
+                <div class="code-name">#icon-view</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-delete"></use>
+                </svg>
+                <div class="name">delete</div>
+                <div class="code-name">#icon-delete</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-editlabel"></use>
+                </svg>
+                <div class="name">editlabel</div>
+                <div class="code-name">#icon-editlabel</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-filter"></use>
+                </svg>
+                <div class="name">filter</div>
+                <div class="code-name">#icon-filter</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-more"></use>
+                </svg>
+                <div class="name">more</div>
+                <div class="code-name">#icon-more</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-hidden"></use>
+                </svg>
+                <div class="name">hidden</div>
+                <div class="code-name">#icon-hidden</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-left"></use>
+                </svg>
+                <div class="name">left</div>
+                <div class="code-name">#icon-left</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-right"></use>
+                </svg>
+                <div class="name">right</div>
+                <div class="code-name">#icon-right</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-loading"></use>
+                </svg>
+                <div class="name">loading </div>
+                <div class="code-name">#icon-loading</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-model"></use>
+                </svg>
+                <div class="name">model</div>
+                <div class="code-name">#icon-model</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-arrow"></use>
+                </svg>
+                <div class="name">arrow</div>
+                <div class="code-name">#icon-arrow</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-ai"></use>
+                </svg>
+                <div class="name">ai</div>
+                <div class="code-name">#icon-ai</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-smart"></use>
+                </svg>
+                <div class="name">smart</div>
+                <div class="code-name">#icon-smart</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-polygon"></use>
+                </svg>
+                <div class="name">polygon</div>
+                <div class="code-name">#icon-polygon</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-polyline"></use>
+                </svg>
+                <div class="name">polyline</div>
+                <div class="code-name">#icon-polyline</div>
+            </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="symbol-">Symbol 引用</h2>
+          <hr>
+
+          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
+            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
+          <ul>
+            <li>支持多色图标了，不再受单色限制。</li>
+            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
+            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
+            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
+          </ul>
+          <p>使用步骤如下：</p>
+          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
+<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
+</code></pre>
+          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
+<pre><code class="language-html">&lt;style&gt;
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+&lt;/style&gt;
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
+  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
+&lt;/svg&gt;
+</code></pre>
+          </div>
+      </div>
+
+    </div>
+  </div>
+  <script>
+  $(document).ready(function () {
+      $('.tab-container .content:first').show()
+
+      $('#tabs li').click(function (e) {
+        var tabContent = $('.tab-container .content')
+        var index = $(this).index()
+
+        if ($(this).hasClass('active')) {
+          return
+        } else {
+          $('#tabs li').removeClass('active')
+          $(this).addClass('active')
+
+          tabContent.hide().eq(index).fadeIn()
+        }
+      })
+    })
+  </script>
+</body>
+</html>
diff --git a/frontend/image-tool/public/iconfont/fonts/icomoon.eot b/frontend/image-tool/public/iconfont/fonts/icomoon.eot
deleted file mode 100644
index 2f97b8c2..00000000
Binary files a/frontend/image-tool/public/iconfont/fonts/icomoon.eot and /dev/null differ
diff --git a/frontend/image-tool/public/iconfont/fonts/icomoon.svg b/frontend/image-tool/public/iconfont/fonts/icomoon.svg
deleted file mode 100644
index 40b47ed1..00000000
--- a/frontend/image-tool/public/iconfont/fonts/icomoon.svg
+++ /dev/null
@@ -1,65 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
-<svg xmlns="http://www.w3.org/2000/svg">
-<metadata>Generated by IcoMoon</metadata>
-<defs>
-<font id="icomoon" horiz-adv-x="1024">
-<font-face units-per-em="1024" ascent="960" descent="-64" />
-<missing-glyph horiz-adv-x="1024" />
-<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
-<glyph unicode="&#xe900;" glyph-name="Job-information" d="M358.39-64c-11.024 0.165-20.77 5.496-26.945 13.673l-0.063 0.087c-7.097 8.543-11.403 19.624-11.403 31.71 0 0.372 0.004 0.743 0.012 1.113l-0.001-0.055v93.12c-0.006 0.287-0.009 0.625-0.009 0.964 0 12.065 4.28 23.131 11.405 31.761l-0.068-0.085c6.189 8.365 15.994 13.749 27.060 13.824h38.412v279.424h-38.4c-11.024 0.165-20.77 5.496-26.945 13.673l-0.063 0.087c-7.096 8.542-11.402 19.623-11.402 31.709 0 0.35 0.004 0.699 0.011 1.047l-0.001-0.052v93.12c-0.006 0.279-0.009 0.608-0.009 0.937 0 12.095 4.279 23.19 11.406 31.854l-0.069-0.087c6.213 8.325 16.009 13.679 27.059 13.76h230.413c11.019-0.128 20.771-5.441 26.946-13.61l0.062-0.086c7.020-8.565 11.274-19.631 11.274-31.69 0-0.356-0.004-0.712-0.011-1.067l0.001 0.053v-419.008h38.4c11.019-0.128 20.771-5.441 26.946-13.61l0.062-0.086c7.173-8.679 11.524-19.921 11.524-32.179 0-0.23-0.002-0.459-0.005-0.688v0.035-93.12c0.006-0.285 0.009-0.622 0.009-0.959 0-12.087-4.28-23.175-11.406-31.831l0.069 0.086c-6.246-8.298-16.016-13.653-27.045-13.824h-0.027zM435.19 727.424c-11.029 0.144-20.782 5.481-26.945 13.672l-0.063 0.088c-7.096 8.534-11.402 19.607-11.402 31.686 0 0.358 0.004 0.715 0.011 1.071l-0.001-0.053v139.648c-0.008 0.325-0.012 0.709-0.012 1.093 0 12.044 4.282 23.089 11.407 31.694l-0.067-0.083c6.22 8.318 16.012 13.669 27.057 13.76h153.615c11.029-0.144 20.782-5.481 26.945-13.672l0.063-0.088c7.097-8.479 11.408-19.501 11.408-31.531 0-0.435-0.006-0.869-0.017-1.301l0.001 0.064v-139.584c0.007-0.315 0.011-0.686 0.011-1.058 0-12.046-4.255-23.097-11.345-31.734l0.070 0.088c-6.226-8.279-15.979-13.616-26.985-13.76h-0.023z" />
-<glyph unicode="&#xe901;" glyph-name="Expiration-time" d="M943.003 758.44c8.725-7.503 20.162-12.071 32.666-12.071 14.241 0 27.097 5.926 36.239 15.446l0.016 0.017c7.778 8.149 12.565 19.212 12.565 31.393 0 13.883-6.218 26.313-16.020 34.659l-0.064 0.053-126.322 109.492c-8.72 7.485-20.143 12.041-32.631 12.041-14.226 0-27.071-5.913-36.21-15.416l-0.016-0.016c-7.778-8.149-12.565-19.212-12.565-31.393 0-13.883 6.218-26.313 16.020-34.659l0.064-0.053 26.813-23.23-49.211-51.834c-54.445 39.050-118.927 68.012-188.687 82.614l-3.293 0.577c-1.994 17.969-8.906 34.028-19.342 47.159l0.144-0.188c-19.624 22.622-48.415 36.845-80.527 36.845-1.139 0-2.274-0.018-3.405-0.053l0.165 0.004h-1.984c-1.43 0.070-3.105 0.11-4.79 0.11-29.785 0-56.666-12.43-75.74-32.386l-0.038-0.040c-12.229-13.843-20.606-31.353-23.299-50.684l-0.058-0.511c-222.314-42.799-388.644-233.779-392.975-464.386l-0.007-0.46c12.023-265.362 230.080-475.948 497.323-475.948s485.3 210.586 497.284 474.869l0.039 1.079c-0.347 123.758-49.277 236.021-128.713 318.779l0.15-0.158 49.275 51.898 27.133-23.549zM497.995 29.878c-203.355 9.664-364.569 176.886-364.569 381.762 0 211.065 171.102 382.167 382.167 382.167s382.167-171.102 382.167-382.167c0-0.015 0-0.030 0-0.045v0.002c-5.421-212.011-178.576-381.809-391.39-381.809-2.945 0-5.882 0.033-8.812 0.097l0.437-0.008zM583.297 411.661c-1.519-44.752-38.163-80.454-83.146-80.454-0.556 0-1.11 0.005-1.664 0.016l0.083-0.001c-0.46-0.009-1.002-0.015-1.545-0.015-44.675 0-80.97 35.877-81.646 80.39l-0.001 0.064c-0.019 0.627-0.030 1.365-0.030 2.105 0 26.837 14.44 50.301 35.975 63.046l0.34 0.186v188.78c1.367 25.869 22.675 46.328 48.763 46.328s47.396-20.459 48.758-46.206l0.005-0.121v-188.78c20.678-12.756 34.253-35.285 34.253-60.985 0-1.599-0.053-3.185-0.156-4.758l0.011 0.214z" />
-<glyph unicode="&#xe902;" glyph-name="Work-flow" d="M926.663 585.099c-45.589 107.289-130.322 190.524-235.828 233.078l-2.885 1.028c-5.511 2.114-9.499 7.041-10.231 12.977l-0.008 0.077c-6.966 71.949-67.125 127.74-140.315 127.74-76.563 0-138.866-61.051-140.884-137.126l-0.004-0.187v-7.525c0-0.088 0-0.192 0-0.296 0-20.379 4.14-39.791 11.626-57.441l-0.363 0.965c21.142-51.962 71.249-87.927 129.756-87.927 53.453 0 99.895 30.020 123.385 74.12l0.366 0.753c2.694 5.011 7.9 8.36 13.888 8.36 2.213 0 4.32-0.458 6.23-1.283l-0.102 0.039c5.119-2.304 10.699-4.812 13.259-6.041 37.957-19.073 70.404-43.035 98.157-71.585l0.082-0.085c26.659-27.406 49.157-59.047 66.353-93.779l0.966-2.157c1.090-2.118 1.729-4.623 1.729-7.276 0-7.641-5.298-14.045-12.42-15.739l-0.11-0.022-27.644-5.836c-1.816-0.446-3.142-2.059-3.142-3.983 0-1.024 0.376-1.959 0.996-2.677l-0.004 0.005 108.017-124.348c0.717-0.826 1.769-1.345 2.942-1.345 1.733 0 3.202 1.134 3.705 2.7l0.008 0.028 20.989 65.066 30.101 92.967c0.114 0.355 0.18 0.763 0.18 1.187 0 2.205-1.788 3.993-3.993 3.993-0.245 0-0.484-0.022-0.717-0.064l0.024 0.004-36.654-7.73c-1.023-0.243-2.198-0.382-3.405-0.382-6.425 0-11.928 3.945-14.22 9.546l-0.037 0.102zM606.195 776.407c-13.199-24.914-38.963-41.598-68.624-41.598s-55.425 16.683-68.421 41.178l-0.203 0.42c-6.188 11.168-9.829 24.488-9.829 38.658 0 0.051 0 0.103 0 0.154v-0.008c0.022 9.153 1.5 17.953 4.214 26.192l-0.17-0.595c10.113 32.074 39.592 54.926 74.409 54.926s64.296-22.851 74.259-54.374l0.15-0.552c2.551-7.587 4.024-16.324 4.024-25.406 0-14.264-3.633-27.68-10.023-39.373l0.215 0.429zM955.69 343.928c-17.257 10.968-37.842 18.305-59.949 20.434l-0.561 0.044c-3.741 0.391-8.083 0.614-12.477 0.614-0.023 0-0.046 0-0.069 0h0.004c-78.203-1.034-141.201-64.671-141.201-143.022 0-0.616 0.004-1.231 0.012-1.846l-0.001 0.093c0-0.128-0.001-0.28-0.001-0.431 0-28.414 8.1-54.937 22.116-77.384l-0.359 0.616c1.55-2.466 2.469-5.464 2.469-8.677 0-5.109-2.325-9.676-5.974-12.699l-0.027-0.022c-23.654-19.112-50.628-35.612-79.626-48.353l-2.283-0.894c-41.207-18.377-89.293-29.078-139.879-29.078-0.209 0-0.418 0-0.627 0.001h0.033c-8.447 0-16.843 0.307-25.187 0.921-8.27 0.696-14.719 7.58-14.719 15.97 0 2.101 0.404 4.108 1.139 5.946l-0.038-0.108 10.597 28.259c0.179 0.437 0.283 0.945 0.283 1.477 0 2.205-1.788 3.993-3.993 3.993-0.208 0-0.413-0.016-0.613-0.047l0.022 0.003-160.183-26.211c-1.91-0.372-3.332-2.032-3.332-4.024 0-0.958 0.329-1.84 0.881-2.538l-0.007 0.009 102.079-129.467c0.709-0.899 1.799-1.471 3.022-1.471 1.676 0 3.101 1.074 3.625 2.571l0.008 0.027 12.747 33.89c2.237 6.096 7.991 10.367 14.742 10.367 0.705 0 1.398-0.047 2.078-0.137l-0.080 0.009c17.118-2.494 36.882-3.918 56.979-3.918 105.985 0 202.719 39.611 276.204 104.835l-0.429-0.374c2.704 2.426 6.297 3.909 10.236 3.909 2.145 0 4.187-0.44 6.041-1.234l-0.1 0.038c14.35-6.178 31.012-10.034 48.5-10.642l0.235-0.006c0.762-0.015 1.66-0.023 2.56-0.023 79.165 0 143.34 64.176 143.34 143.34 0 0.008 0 0.016 0 0.024v-0.001c0.008 0.567 0.012 1.236 0.012 1.906 0 51.774-26.987 97.245-67.661 123.114l-0.592 0.352zM882.637 139.668c-0.080 0-0.174 0-0.268 0-5.179 0-10.231 0.541-15.104 1.569l0.475-0.084c-22.147 4.577-40.512 18.012-51.559 36.353l-0.197 0.352c-7.394 12.030-11.775 26.602-11.775 42.197 0 0.049 0 0.098 0 0.147v-0.008c-0.003 0.255-0.005 0.556-0.005 0.857 0 43.102 34.256 78.204 77.027 79.564l0.125 0.003h1.28c22.429-0.039 42.614-9.611 56.726-24.879l0.047-0.052c13.42-14.456 21.655-33.888 21.655-55.244 0-0.088 0-0.175 0-0.262v0.013c0.004-0.292 0.006-0.636 0.006-0.981 0-43.543-34.982-78.915-78.374-79.545l-0.059-0.001zM193.733 364.457c-8.132 0.296-14.695 6.629-15.354 14.635l-0.004 0.057c-0.94 10.147-1.479 21.952-1.485 33.881v0.009c-0.003 0.562-0.005 1.226-0.005 1.891 0 51.229 10.274 100.057 28.874 144.539l-0.918-2.475c10.481 25.285 22.302 46.972 36.091 67.211l-0.819-1.274c2.788 4.183 7.487 6.901 12.82 6.901 4.935 0 9.326-2.328 12.136-5.945l0.026-0.035 16.689-21.092c0.709-0.899 1.799-1.471 3.022-1.471 1.676 0 3.101 1.074 3.625 2.571l0.008 0.027 58.053 155.729c0.179 0.437 0.283 0.945 0.283 1.477 0 2.205-1.788 3.993-3.993 3.993-0.208 0-0.413-0.016-0.613-0.047l0.022 0.003-67.37-11.365-92.659-15.102c-1.91-0.372-3.332-2.032-3.332-4.024 0-0.958 0.329-1.84 0.881-2.538l-0.007 0.009 24.419-30.716c2.137-2.752 3.425-6.255 3.425-10.059s-1.289-7.307-3.453-10.097l0.028 0.037c-56.322-73.599-90.249-166.937-90.249-268.199 0-20.797 1.431-41.259 4.2-61.295l-0.263 2.32c0.096-0.666 0.151-1.435 0.151-2.216 0-5.362-2.576-10.123-6.559-13.111l-0.042-0.030c-36.604-26.711-60.118-69.462-60.118-117.705 0-0.788 0.006-1.574 0.019-2.359l-0.001 0.119c0-0.007 0-0.015 0-0.023 0-79.165 64.176-143.34 143.34-143.34 0.9 0 1.798 0.008 2.694 0.025l-0.135-0.002c21.032 0.683 40.663 6.036 58.095 15.049l-0.759-0.357c19.77 10.104 36.255 24.003 49.044 40.859l0.255 0.351c18.532 24.279 29.693 55.049 29.693 88.426 0 0.157 0 0.313-0.001 0.469v-0.024c0.006 0.484 0.009 1.056 0.009 1.629 0 72.87-54.376 133.040-124.765 142.148l-0.718 0.076c-3.843 0.297-8.322 0.467-12.841 0.467-0.507 0-1.013-0.002-1.519-0.006l0.077 0.001zM259.107 177.756c-11.29-18.686-29.626-32.146-51.238-36.766l-0.518-0.093c-4.398-0.944-9.45-1.485-14.629-1.485-0.094 0-0.188 0-0.283 0.001h0.015c-43.451 0.632-78.433 36.004-78.433 79.546 0 0.309 0.002 0.617 0.005 0.925v-0.047c0 0.074 0 0.161 0 0.249 0 21.356 8.235 40.788 21.702 55.296l-0.047-0.051c14.149 15.335 34.341 24.912 56.77 24.931h1.283c42.896-1.365 77.151-36.466 77.151-79.567 0-0.247-0.001-0.494-0.003-0.741v0.038c0-0.020 0-0.043 0-0.066 0-15.585-4.38-30.147-11.977-42.523l0.202 0.354z" />
-<glyph unicode="&#xe903;" glyph-name="save" d="M565.453 685.005c20.517 0.029 37.142 16.654 37.171 37.168v37.174c0 20.543-16.654 37.197-37.197 37.197s-37.197-16.654-37.197-37.197v0-37.171c0.116-20.5 16.718-37.085 37.214-37.171h0.008zM960.154 768.051l-147.61 147.456c-6.507 6.687-15.552 10.876-25.575 11.008h-664.038c-61.008-0.174-110.418-49.584-110.592-110.575v-737.297c0.174-61.008 49.584-110.418 110.575-110.592h737.297c61.008 0.174 110.418 49.584 110.592 110.575v663.825c-0.006 10.005-4.076 19.058-10.648 25.599l-0.001 0.001zM325.786 853.043h331.93v-197.325c-0.226-13.17-10.843-23.787-23.991-24.013h-283.925c-13.17 0.226-23.787 10.843-24.013 23.991v0.021zM712.96 41.779h-442.419v254.413c0.229 22.303 18.248 40.321 40.529 40.55h361.392c22.303-0.229 40.321-18.248 40.55-40.529v-254.435zM897.28 78.643c-0.029-20.348-16.516-36.835-36.861-36.864h-71.683v254.413c-0.289 62.998-51.281 113.989-114.251 114.278h-363.548c-62.998-0.289-113.989-51.281-114.278-114.251v-254.441h-73.728c-20.348 0.029-36.835 16.516-36.864 36.861v737.539c0.029 20.348 16.516 36.835 36.861 36.864h129.078v-197.325c0.433-53.829 44.041-97.328 97.87-97.587h283.98c53.841 0.346 97.395 43.9 97.741 97.708v197.204h40.55l125.44-125.44v-648.96z" />
-<glyph unicode="&#xe904;" glyph-name="help" horiz-adv-x="1025" d="M775.398 954.976h-543.829c-125.552-1.999-226.563-104.246-226.563-230.085 0-0.999 0.006-1.996 0.019-2.992l-0.002 0.151v-372.651c-0.011-0.845-0.018-1.842-0.018-2.841 0-125.839 101.011-228.086 226.375-230.083l0.188-0.002h138.369l133.546-158.516 133.546 158.516h138.369c125.552 1.999 226.563 104.246 226.563 230.085 0 0.999-0.006 1.996-0.019 2.992l0.002-0.151v372.651c0.012 0.859 0.018 1.874 0.018 2.89 0 125.83-101.017 228.065-226.378 230.033l-0.185 0.002zM939.843 349.449c-10.218-87.415-77.644-156.416-163.402-168.942l-1.043-0.125h-179.819l-92.095-115.559-92.095 115.207h-179.819c-86.801 12.651-154.227 81.652-164.359 168.165l-0.086 0.903v372.752c10.218 87.415 77.644 156.416 163.402 168.942l1.043 0.125h543.728c89.35-7.228 159.749-79.226 164.427-168.628l0.018-0.439v-372.651zM520.818 747.975c-7.22 1.282-15.533 2.015-24.016 2.015-73.902 0-134.81-55.633-143.129-127.304l-0.063-0.671 63.005-15.073q19.544 86.769 95.461 86.87c0.799 0.034 1.736 0.054 2.678 0.054 36.384 0 65.972-29.101 66.757-65.296l0.001-0.073q2.16-43.46-58.633-86.87c-34.041-19.907-56.545-56.282-56.545-97.914 0-1.417 0.026-2.828 0.078-4.232l-0.006 0.203v-21.755h58.633v17.384c0 0.042 0 0.092 0 0.142 0 33.862 19.219 63.235 47.343 77.806l0.488 0.23c47.1 21.38 79.461 67.62 80.387 121.519l0.002 0.119c-4.912 63.565-57.699 113.283-122.099 113.283-3.64 0-7.243-0.159-10.803-0.47l0.462 0.033zM459.923 365.677h71.697v-69.436h-71.697z" />
-<glyph unicode="&#xe905;" glyph-name="enter-fullscreen" d="M69.734-43.827v0.256h-5.12c-16.257 2.265-29.172 14.3-32.718 29.896l-0.050 0.261-0.41 7.629v307.2c0 21.547 17.467 39.014 39.014 39.014s39.014-17.467 39.014-39.014v0-213.197l227.891 227.635c7.057 7.076 16.815 11.454 27.597 11.454 21.524 0 38.974-17.449 38.974-38.974 0-10.743-4.347-20.471-11.378-27.521l0.001 0.001-227.942-227.482h220.16c18.507-3.204 32.404-19.139 32.404-38.321 0-20.992-16.645-38.097-37.456-38.836l-0.068-0.002zM614.81-5.222c-0.003 0.184-0.005 0.402-0.005 0.62 0 21.315 17.093 38.637 38.319 39.008h270.985v267.878c0.342 21.377 17.624 38.606 38.99 38.861h3.608c20.033-1.857 35.624-18.479 35.84-38.788v-306.812c-0.174-21.556-17.689-38.963-39.269-38.963 0 0-0.001 0-0.001 0h-309.555c-21.197 0.081-38.403 17.054-38.86 38.153l-0.001 0.043zM69.683 542.925c-21.473 0.087-38.854 17.486-38.912 38.958v307.206c0.317 21.467 17.766 38.754 39.265 38.81h307.205c0.522 0.025 1.133 0.039 1.748 0.039 21.519 0 38.963-17.444 38.963-38.963 0-21.179-16.898-38.412-37.948-38.95l-0.050-0.001h-271.36v-268.288c-0.058-21.475-17.48-38.861-38.963-38.861 0 0 0 0 0 0v0zM924.006 581.837v212.941l-227.635-227.533c-7.059-7.091-16.828-11.479-27.622-11.479-21.525 0-38.974 17.449-38.974 38.974 0 10.73 4.336 20.448 11.353 27.496l-0.001-0.001 227.789 227.533h-213.043c-0.404-0.015-0.88-0.024-1.357-0.024-21.588 0-39.089 17.501-39.089 39.089 0 21.111 16.736 38.314 37.664 39.064l0.069 0.002h314.931c16.446-2.348 29.474-14.616 32.925-30.461l0.047-0.259v-3.174l2.97-7.066-1.997-305.050c-0.087-21.491-17.515-38.883-39.012-38.912h-0.003c-21.476 0.086-38.87 17.444-39.014 38.898v0.014z" />
-<glyph unicode="&#xe906;" glyph-name="exit-fullscreen" d="M367.014 340.984h5.678c17.137-2.353 30.758-15.033 34.484-31.469l0.052-0.274 0.419-8.006v-323.997c-0.768-22.121-18.885-39.762-41.122-39.762s-40.355 17.641-41.12 39.692l-0.002 0.070v224.484l-240.216-239.984c-7.493-7.808-18.015-12.66-29.671-12.66-22.698 0-41.099 18.401-41.099 41.099 0 11.621 4.823 22.115 12.576 29.59l0.013 0.012 240.216 240.030h-232.304c-19.499 3.406-34.132 20.207-34.132 40.426 0 22.145 17.554 40.189 39.506 40.979l0.072 0.002h326.696zM657.731 959.98c22.594-0.131 40.874-18.412 41.006-40.993v-224.451l240.077 239.844c7.495 7.821 18.026 12.682 29.692 12.682 22.698 0 41.099-18.401 41.099-41.099 0-11.608-4.813-22.092-12.551-29.566l-0.012-0.011-240.216-239.891h224.624c0.423 0.016 0.92 0.025 1.42 0.025 22.673 0 41.054-18.38 41.054-41.054 0-22.174-17.58-40.242-39.562-41.027l-0.072-0.002h-332.095c-17.4 2.48-31.169 15.511-34.721 32.312l-0.048 0.27v3.118l-3.118 7.633 2.141 321.157c0.079 22.638 18.449 40.959 41.099 40.959 0 0 0 0 0 0v0zM656.148-63.86c-22.194 0.646-39.939 18.792-39.939 41.082 0 21.815 16.997 39.661 38.47 41.016l0.119 0.006h285.039v282.386c0.362 22.523 18.564 40.676 41.072 40.959h3.797c20.992-2.095 37.274-19.572 37.468-40.893v-323.458c-0.158-22.7-18.57-41.047-41.28-41.099h-0.005zM40.923 554.437c-22.575 0.132-40.834 18.423-40.913 40.998v323.539c0.236 22.649 18.613 40.928 41.278 41.006h323.119c0.396 0.014 0.861 0.021 1.328 0.021 22.698 0 41.099-18.401 41.099-41.099 0-10.828-4.187-20.678-11.031-28.019l0.023 0.024c-7.179-7.711-17.271-12.626-28.514-12.984l-0.064-0.002h-285.225v-282.525c-0.079-22.622-18.423-40.933-41.050-40.959h-0.003z" />
-<glyph unicode="&#xe907;" glyph-name="hang-up" d="M512-64c-282.77 0-512 229.23-512 512s229.23 512 512 512c282.77 0 512-229.23 512-512v0c0-282.77-229.23-512-512-512v0zM512 29.111c231.346 0 418.889 187.543 418.889 418.889s-187.543 418.889-418.889 418.889c-231.346 0-418.889-187.543-418.889-418.889v0c0-231.346 187.543-418.889 418.889-418.889v0zM418.889 634.149v-372.297c0-25.712-20.844-46.555-46.555-46.555s-46.555 20.844-46.555 46.555v0 372.297c0 25.712 20.844 46.555 46.555 46.555s46.555-20.844 46.555-46.555v0zM698.149 634.149v-372.297c0-25.712-20.844-46.555-46.555-46.555s-46.555 20.844-46.555 46.555v0 372.297c0 25.712 20.844 46.555 46.555 46.555s46.555-20.844 46.555-46.555v0z" />
-<glyph unicode="&#xe908;" glyph-name="submit" d="M677.231-63.845c-16.195 0.842-29.008 14.178-29.008 30.508s12.813 29.666 28.933 30.504l0.075 0.003h187.542v901.582h-402.297v-222.43c0-0.046 0-0.101 0-0.155 0-22.479-18.223-40.703-40.703-40.703-0.027 0-0.055 0-0.082 0h-261.578l-1.396-633.953h197.233c16.195-0.842 29.008-14.178 29.008-30.508s-12.813-29.666-28.933-30.504l-0.075-0.003h-218.631c-0.14-0.002-0.305-0.003-0.47-0.003-21.409 0-38.764 17.355-38.764 38.764 0 0.219 0.002 0.438 0.005 0.656v-0.033l1.396 696.208c0.068 10.992 4.593 20.914 11.857 28.060l0.005 0.005 249.875 244.758c6.987 6.855 16.57 11.087 27.141 11.087 0.052 0 0.105 0 0.157 0h497.882c0.023 0 0.050 0 0.078 0 21.709 0 39.307-17.598 39.307-39.307 0-0.027 0-0.055 0-0.082v0.004-945.231c0-0.070 0.001-0.152 0.001-0.234 0-21.487-17.309-38.931-38.744-39.15h-0.021zM799.028 518.784c0.004 0.185 0.006 0.403 0.006 0.622 0 16.678-13.434 30.218-30.071 30.39h-486.432c-16.654-0.172-30.088-13.712-30.088-30.39 0-0.219 0.002-0.437 0.007-0.654l-0.001 0.032c-0.004-0.185-0.006-0.403-0.006-0.622 0-16.678 13.434-30.218 30.071-30.39h486.432c16.654 0.172 30.088 13.712 30.088 30.39 0 0.219-0.002 0.437-0.007 0.654l0.001-0.032zM799.028 414.818c0.004 0.185 0.006 0.403 0.006 0.622 0 16.678-13.434 30.218-30.071 30.39h-486.432c-16.654-0.172-30.088-13.712-30.088-30.39 0-0.219 0.002-0.437 0.007-0.654l-0.001 0.032c-0.004-0.185-0.006-0.403-0.006-0.622 0-16.678 13.434-30.218 30.071-30.39h486.432c16.654 0.172 30.088 13.712 30.088 30.39 0 0.219-0.002 0.437-0.007 0.654l0.001-0.032zM799.028 309.456c0.004 0.185 0.006 0.403 0.006 0.622 0 16.678-13.434 30.218-30.071 30.39h-486.432c-16.654-0.172-30.088-13.712-30.088-30.39 0-0.219 0.002-0.437 0.007-0.654l-0.001 0.032c-0.004-0.185-0.006-0.403-0.006-0.622 0-16.678 13.434-30.218 30.071-30.39h486.432c16.654 0.172 30.088 13.712 30.088 30.39 0 0.219-0.002 0.437-0.007 0.654l0.001-0.032zM519.149 198.823c-1.093 1.087-2.6 1.759-4.264 1.759s-3.171-0.672-4.264-1.76v0l-84.894-91.949c-0.972-1.058-1.567-2.475-1.567-4.032 0-3.297 2.673-5.97 5.97-5.97 0.006 0 0.012 0 0.017 0h54.967v-137.381c-0.007-0.117-0.012-0.254-0.012-0.391 0-3.562 2.826-6.464 6.358-6.586h56.762c3.538 0.129 6.358 3.028 6.358 6.586 0 0.029 0 0.057-0.001 0.086v-0.004 137.536h54.968c0.003 0 0.008 0 0.012 0 3.297 0 5.97 2.673 5.97 5.97 0 1.709-0.718 3.251-1.87 4.339l-0.003 0.003z" />
-<glyph unicode="&#xe909;" glyph-name="setting" horiz-adv-x="1118" d="M240.286 248.877c0.181 0.001 0.396 0.001 0.611 0.001 74.77 0 137.524-51.45 154.788-120.879l0.231-1.097-0.632 7.026h682.314c0.495 0.022 1.075 0.035 1.658 0.035 21.614 0 39.136-17.522 39.136-39.136s-17.522-39.136-39.136-39.136c-0.583 0-1.163 0.013-1.74 0.038l0.082-0.003h-682.244l-0.773-3.232c-19.748-67.758-81.294-116.428-154.208-116.428-76.758 0-140.919 53.937-156.648 125.978l-0.194 1.060 0.632-7.378h-43.914c-0.495-0.022-1.075-0.035-1.658-0.035-21.614 0-39.136 17.522-39.136 39.136s17.522 39.136 39.136 39.136c0.583 0 1.163-0.013 1.74-0.038l-0.082 0.003h43.914c0-11.734-4.005-27.402-4.005-39.066 0.040-3.142 0.243-6.189 0.602-9.188l-0.039 0.405v6.464c1.147 86.625 71.638 156.407 158.428 156.407 0.4 0 0.799-0.001 1.199-0.004h-0.061zM240.286 170.675c-42.589-0.828-76.796-35.548-76.796-78.258 0-43.228 35.044-78.272 78.272-78.272s78.272 35.044 78.272 78.272c0 0.020 0 0.040 0 0.060v-0.003c-0.594 43.317-35.847 78.203-79.249 78.203-0.175 0-0.351-0.001-0.526-0.002h0.027zM798.588 600.819c0.172 0.001 0.376 0.001 0.58 0.001 74.923 0 137.779-51.66 154.893-121.303l0.227-1.094-0.632 7.448h123.661c0.495 0.022 1.075 0.035 1.658 0.035 21.614 0 39.136-17.522 39.136-39.136s-17.522-39.136-39.136-39.136c-0.583 0-1.163 0.013-1.74 0.038l0.082-0.003h-123.45v0.492c-18.397-69.637-80.828-120.141-155.054-120.141-76.764 0-140.912 54.016-156.507 126.113l-0.191 1.055 0.632-7.378h-602.497c-0.495-0.022-1.075-0.035-1.658-0.035-21.614 0-39.136 17.522-39.136 39.136s17.522 39.136 39.136 39.136c0.583 0 1.163-0.013 1.74-0.038l-0.082 0.003h602.427c0-11.734-3.935-27.402-3.935-39.066 0.035-3.581 0.263-7.067 0.676-10.497l-0.044 0.45v7.659c1.227 86.563 71.687 156.265 158.426 156.265 0.277 0 0.554-0.001 0.831-0.002h-0.043zM798.588 522.618c-42.396-1.022-76.375-35.633-76.375-78.18 0-43.19 35.012-78.202 78.202-78.202 43.182 0 78.189 35 78.202 78.179v0.001c-0.592 43.318-35.846 78.205-79.249 78.205-0.274 0-0.548-0.001-0.822-0.004h0.042zM401.397 959.999c0.181 0.001 0.395 0.001 0.609 0.001 74.809 0 137.594-51.481 154.86-120.948l0.231-1.098h520.501c0.772 0.057 1.671 0.089 2.579 0.089 20.605 0 37.309-16.704 37.309-37.309 0-0.674-0.018-1.344-0.053-2.009l0.004 0.093c0.029-0.551 0.046-1.196 0.046-1.846 0-20.605-16.704-37.309-37.309-37.309-0.906 0-1.805 0.032-2.695 0.096l0.12-0.007h-522.679v1.546c-20.351-66.508-81.196-114.041-153.143-114.041-86.998 0-157.763 69.501-159.801 156.008l-0.004 0.19c1.030 86.678 71.535 156.547 158.36 156.547 0.374 0 0.748-0.001 1.122-0.004h-0.057zM401.397 881.797c-42.558-0.867-76.726-35.572-76.726-78.257 0-43.228 35.044-78.272 78.272-78.272 43.223 0 78.263 35.035 78.272 78.256v0.001c-0.554 43.347-35.823 78.274-79.249 78.274-0.2 0-0.399-0.001-0.599-0.002h0.031zM243.518 837.883c0-11.734-3.935-27.402-3.935-39.066s3.935-27.402 3.935-39.066h-203.268c-0.77-0.057-1.669-0.089-2.575-0.089-20.605 0-37.309 16.704-37.309 37.309 0 0.649 0.017 1.294 0.049 1.935l-0.004-0.090c-0.029 0.551-0.046 1.196-0.046 1.846 0 20.605 16.704 37.309 37.309 37.309 0.906 0 1.805-0.032 2.695-0.096l-0.12 0.007z" />
-<glyph unicode="&#xe90a;" glyph-name="information" d="M512 960c282.77 0 512-229.23 512-512s-229.23-512-512-512c-282.77 0-512 229.23-512 512v0c0 282.77 229.23 512 512 512v0zM512 857.6c-226.216 0-409.6-183.384-409.6-409.6s183.384-409.6 409.6-409.6c226.216 0 409.6 183.384 409.6 409.6v0c0 226.216-183.384 409.6-409.6 409.6v0zM512 524.8c28.277 0 51.2-22.923 51.2-51.2v0-256c0-28.277-22.923-51.2-51.2-51.2s-51.2 22.923-51.2 51.2v0 256c0 28.277 22.923 51.2 51.2 51.2v0zM512 729.6c35.346 0 64-28.654 64-64s-28.654-64-64-64c-35.346 0-64 28.654-64 64v0c0 35.346 28.654 64 64 64v0z" />
-<glyph unicode="&#xe90b;" glyph-name="mapping" horiz-adv-x="1170" d="M813.056 423.863l240.201-235.666c6.338-6.149 14.995-9.94 24.537-9.94 4.814 0 9.403 0.965 13.584 2.712l-0.233-0.086c12.616 5.164 21.356 17.314 21.431 31.515v471.195c-0.087 14.226-8.858 26.383-21.276 31.442l-0.228 0.082c-3.948 1.661-8.537 2.626-13.351 2.626-9.542 0-18.199-3.791-24.546-9.949l0.009 0.009-239.909-235.666c-6.257-6.126-10.137-14.66-10.137-24.101s3.879-17.974 10.131-24.095l0.006-0.006zM1170.286 821.029v-746.057c-0.087-14.226-8.858-26.383-21.276-31.442l-0.228-0.082c-3.948-1.661-8.537-2.626-13.351-2.626-9.542 0-18.199 3.791-24.546 9.949l0.009-0.009-379.465 373.102c-6.257 6.126-10.137 14.66-10.137 24.101s3.879 17.974 10.131 24.095l0.006 0.006 379.611 373.029c6.338 6.149 14.995 9.94 24.537 9.94 4.814 0 9.403-0.965 13.584-2.712l-0.233 0.086c12.541-5.167 21.233-17.242 21.358-31.363v-0.016zM438.857 423.863l-379.685-373.029c-6.338-6.149-14.995-9.94-24.537-9.94-4.814 0-9.403 0.965-13.584 2.712l0.233-0.086c-12.533 5.198-21.204 17.302-21.285 31.441v746.067c0.087 14.226 8.858 26.383 21.276 31.442l0.228 0.082c3.948 1.661 8.537 2.626 13.351 2.626 9.542 0 18.199-3.791 24.546-9.949l-0.009 0.009 379.465-373.175c6.257-6.126 10.137-14.66 10.137-24.101s-3.879-17.974-10.131-24.095l-0.006-0.006zM621.714 960h-73.143v-1024h73.143z" />
-<glyph unicode="&#xe90c;" glyph-name="rotating" d="M95.567 745.454c94 130.478 245.512 214.431 416.633 214.431 282.752 0 511.967-229.216 511.967-511.967s-229.216-511.967-511.967-511.967c-235.623 0-434.069 159.173-493.677 375.857l-0.843 3.594 98.366 26.486c48.295-176.319 207.099-303.751 395.667-303.751 226.201 0 409.574 183.372 409.574 409.574s-183.372 409.574-409.574 409.574c-135.036 0-254.808-65.349-329.418-166.148l-0.786-1.111 96.455-61.436-219.19-64.576-58.774 242.195zM409.574 447.967c0.037-56.522 45.866-102.328 102.393-102.328 56.55 0 102.393 45.843 102.393 102.393s-45.843 102.393-102.393 102.393c-18.85 0-36.511-5.094-51.68-13.98l0.483 0.262c-30.822-18.034-51.197-50.975-51.197-88.675 0-0.023 0-0.046 0-0.069v0.004z" />
-<glyph unicode="&#xe90d;" glyph-name="move" d="M305.024 142.464l55.552 58.944 113.024-110.016-3.456 317.632-316.992-2.112 111.232-106.112-55.68-59.072-208.704 205.376 205.44 208.192 59.072-55.552-110.336-112.832 318.080 3.584-2.048 316.672-106.176-111.104-59.136 55.552 205.504 208.384 208.64-204.8-55.68-59.008-112.96 109.76 3.392-317.632 316.992 2.112-111.232 105.92 55.744 59.072 208.704-205.184-205.376-208.256-59.136 55.552 110.208 112.96-318.208-3.584 2.112-316.416 106.112 111.040 59.2-55.552-206.912-209.984z" />
-<glyph unicode="&#xe90e;" glyph-name="tool" d="M1024.147 723.788v-472.79c0.001-0.119 0.001-0.26 0.001-0.4 0-14.624-4.138-28.282-11.308-39.866l0.187 0.325c-7.356-12.208-17.593-22-29.802-28.619l-0.41-0.204-433.214-236.431c-10.785-6.193-23.711-9.846-37.491-9.846s-26.706 3.653-37.864 10.043l0.373-0.197-433.214 236.431c-12.565 6.9-22.783 16.673-30.014 28.475l-0.198 0.348c-6.982 11.259-11.12 24.917-11.12 39.541 0 0.141 0 0.281 0.001 0.422v-0.022 472.79c0 0.047 0 0.103 0 0.159 0 33.649 21.233 62.339 51.032 73.403l0.542 0.176 433.214 157.572c8.086 3.045 17.43 4.836 27.185 4.901h0.028c9.707-0.067 18.976-1.859 27.543-5.083l-0.55 0.181 433.507-157.572c15.535-5.68 28.356-15.694 37.362-28.572l0.166-0.25c8.786-12.205 14.052-27.456 14.052-43.936 0-0.345-0.002-0.689-0.007-1.032l0.001 0.052zM512.074 568.63l429.629 156.329-429.629 156.548-429.629-156.475zM551.357 36.439l393.931 214.705v391.59l-393.931-143.673z" />
-<glyph unicode="&#xe90f;" glyph-name="Pack-up" d="M778.477-63.996l-10.488 5.593-530.876 447.774c-3.767 3.080-7.054 6.525-9.879 10.334l-0.109 0.154c-7.406 9.712-11.866 22.017-11.866 35.365 0 2.639 0.174 5.237 0.512 7.784l-0.032-0.299c2.127 15.71 10.292 29.191 22.039 38.255l0.135 0.1 534.272 476.64 12.286 2.098 17.579-7.791 7.092-17.779v-106.375c-0.182-11.406-5.49-21.537-13.715-28.213l-0.069-0.054-392.339-362.973 392.638-340.2c8.227-6.662 13.452-16.751 13.484-28.062v-112.473l-5.593-10.488c-4.596-5.746-11.606-9.394-19.469-9.394-0.179 0-0.357 0.002-0.534 0.006h0.027z" />
-<glyph unicode="&#xe910;" glyph-name="an-right" d="M245.658-63.996l10.488 5.593 530.876 447.774c3.767 3.080 7.054 6.525 9.879 10.334l0.109 0.154c7.406 9.712 11.866 22.017 11.866 35.365 0 2.639-0.174 5.237-0.512 7.784l0.032-0.299c-2.127 15.71-10.292 29.191-22.039 38.255l-0.135 0.1-534.272 476.64-12.286 2.098-17.579-7.791-7.092-17.779v-106.375c0.182-11.406 5.49-21.537 13.715-28.213l0.069-0.054 392.339-362.973-392.638-340.2c-8.227-6.662-13.452-16.751-13.484-28.062v-112.473l5.593-10.488c4.596-5.746 11.606-9.394 19.469-9.394 0.179 0 0.357 0.002 0.534 0.006h-0.027z" />
-<glyph unicode="&#xe911;" glyph-name="down" d="M783.069 180.825l-225.798-226.077c-11.583-11.584-27.586-18.749-45.262-18.749s-33.679 7.165-45.262 18.749v0l-225.798 226.17c-0.729 0.725-1.181 1.728-1.181 2.838s0.451 2.113 1.18 2.837v0l62.148 62.148c0.725 0.729 1.728 1.181 2.838 1.181s2.113-0.451 2.837-1.18v0l148.392-148.857c0.72-0.702 1.705-1.135 2.792-1.135 2.183 0 3.958 1.749 4 3.922v853.328c0.241 2 1.928 3.535 3.973 3.535 0.010 0 0.019 0 0.029 0h88.104c2.209 0 4.001-1.791 4.001-4.001v-852.394c0.042-2.177 1.817-3.926 4-3.926 1.086 0 2.072 0.433 2.793 1.136l148.298 148.391c0.725 0.729 1.728 1.181 2.838 1.181s2.113-0.451 2.837-1.18v0l62.148-62.148c0.729-0.725 1.181-1.728 1.181-2.838s-0.451-2.113-1.18-2.837v0z" />
-<glyph unicode="&#xe912;" glyph-name="up" d="M783.116 715.175l-225.705 226.077c-11.583 11.584-27.586 18.749-45.262 18.749s-33.679-7.165-45.262-18.749v0l-225.798-226.17c-0.729-0.725-1.181-1.728-1.181-2.838s0.451-2.113 1.18-2.837v0l62.148-62.148c0.725-0.729 1.728-1.181 2.838-1.181s2.113 0.451 2.837 1.18v0l148.857 148.857c0.72 0.702 1.705 1.135 2.792 1.135 2.183 0 3.958-1.749 4-3.922v-853.328c0.204-1.834 1.621-3.283 3.421-3.533l0.021-0.002h88.105c2.209 0 4.001 1.791 4.001 4.001v0 852.394c0.042 2.177 1.817 3.926 4 3.926 1.086 0 2.072-0.433 2.793-1.136l148.298-148.391c0.725-0.729 1.728-1.181 2.838-1.181s2.113 0.451 2.837 1.18v0l62.241 62.241c0.729 0.725 1.181 1.728 1.181 2.838s-0.451 2.113-1.18 2.837v0z" />
-<glyph unicode="&#xe913;" glyph-name="Right-rotation" d="M832.992 519.145c35.967-2.461 64.21-32.239 64.21-68.615 0-1.524-0.050-3.036-0.147-4.536l0.011 0.204v-365.159c0.068-1.142 0.106-2.477 0.106-3.822 0-36.365-28.227-66.137-63.966-68.601l-0.214-0.012h-509.345c-35.812 2.633-63.87 32.336-63.87 68.591 0 1.532 0.050 3.053 0.149 4.56l-0.011-0.205v364.732c-0.085 1.277-0.133 2.768-0.133 4.27 0 36.254 28.055 65.955 63.639 68.578l0.226 0.013zM832.992 592.091h-509.345c-71.592-5.356-127.65-64.759-127.65-137.256 0-3.039 0.098-6.055 0.292-9.044l-0.021 0.407v-365.159c-0.143-2.351-0.225-5.099-0.225-7.867 0-72.463 56.041-131.837 127.147-137.146l0.457-0.027h509.345c71.853 5.065 128.224 64.597 128.224 137.296 0 2.904-0.090 5.788-0.267 8.647l0.019-0.392v364.732c0.171 2.567 0.268 5.564 0.268 8.584 0 72.672-56.399 132.171-127.815 137.114l-0.429 0.024zM568.508 876.284c-227.627 23.804-443.651-142.224-504.568-402.784-0.835-2.942-1.315-6.322-1.315-9.813 0-15.787 9.812-29.282 23.67-34.72l0.253-0.088c2.33-0.612 5.005-0.964 7.763-0.964 15.699 0 28.736 11.399 31.286 26.372l0.026 0.187c55.883 238.889 261.583 385.891 470.526 344.256l-47.778-54.603c-5.372-6.771-8.618-15.44-8.618-24.867 0-9.855 3.548-18.882 9.436-25.872l-0.050 0.061c5.376-6.499 13.441-10.61 22.467-10.61 8.671 0 16.456 3.793 21.786 9.811l0.027 0.031 90.437 103.234c5.729 6.895 9.206 15.839 9.206 25.595s-3.477 18.7-9.259 25.661l0.053-0.066-89.754 103.234c-5.34 5.84-12.992 9.489-21.496 9.489-9.059 0-17.152-4.141-22.487-10.633l-0.040-0.051c-5.807-6.941-9.333-15.964-9.333-25.81 0-9.269 3.125-17.808 8.379-24.621l-0.070 0.094 19.452-22.438z" />
-<glyph unicode="&#xe914;" glyph-name="Left-rotation" d="M190.863 519.145c-35.812-2.633-63.87-32.336-63.87-68.591 0-1.532 0.050-3.053 0.149-4.56l-0.011 0.205v-364.732c-0.081-1.251-0.127-2.713-0.127-4.185 0-36.252 28.052-65.952 63.633-68.577l0.226-0.013h509.345c35.812 2.633 63.87 32.336 63.87 68.591 0 1.532-0.050 3.053-0.149 4.56l0.011-0.205v364.647c0.085 1.277 0.133 2.768 0.133 4.27 0 36.254-28.055 65.955-63.639 68.578l-0.226 0.013zM190.863 592.091h509.345c71.592-5.356 127.65-64.759 127.65-137.256 0-3.039-0.098-6.055-0.292-9.044l0.021 0.407v-364.732c0.143-2.351 0.225-5.099 0.225-7.867 0-72.463-56.041-131.837-127.147-137.146l-0.457-0.027h-509.345c-71.842 5.078-128.199 64.604-128.199 137.294 0 2.755 0.081 5.49 0.241 8.205l-0.018-0.374v364.732c-0.171 2.567-0.268 5.564-0.268 8.584 0 72.672 56.399 132.171 127.815 137.114l0.429 0.024zM455.347 876.284c227.627 23.804 443.651-142.395 504.568-402.784 0.835-2.942 1.315-6.322 1.315-9.813 0-15.787-9.812-29.282-23.67-34.72l-0.253-0.088c-2.33-0.612-5.005-0.964-7.763-0.964-15.699 0-28.736 11.399-31.286 26.372l-0.026 0.187c-55.883 238.889-261.583 385.891-470.526 344.256l47.778-54.603c5.372-6.771 8.618-15.44 8.618-24.867 0-9.855-3.548-18.882-9.436-25.872l0.050 0.061c-5.376-6.499-13.441-10.61-22.467-10.61-8.671 0-16.456 3.793-21.786 9.811l-0.027 0.031-90.437 103.234c-5.729 6.895-9.206 15.839-9.206 25.595s3.477 18.7 9.259 25.661l-0.053-0.066 89.754 103.234c5.34 5.84 12.992 9.489 21.496 9.489 9.059 0 17.152-4.141 22.487-10.633l0.040-0.051c5.807-6.941 9.333-15.964 9.333-25.81 0-9.269-3.125-17.808-8.379-24.621l0.070 0.094-19.452-22.438z" />
-<glyph unicode="&#xe915;" glyph-name="remind" horiz-adv-x="1212" d="M1183.557 118.258c16.592-19.193 26.701-44.392 26.701-71.952 0-60.916-49.382-110.299-110.299-110.299-7.008 0-13.864 0.654-20.509 1.903l0.685-0.107h-949.293c-115.595 0-164.286 79.82-106.396 180.455l474.554 766.237c15.226 44.189 56.45 75.368 104.956 75.368s89.729-31.179 104.722-74.59l0.234-0.778zM566.182 692.796v-392.596c0-0.002 0-0.004 0-0.007 0-13.593 7.408-25.455 18.406-31.771l0.178-0.094c5.445-3.1 11.964-4.927 18.91-4.927s13.464 1.827 19.102 5.028l-0.192-0.1c11.177 6.41 18.584 18.273 18.584 31.866 0 0.002 0 0.005 0 0.007v0 392.596c-0.003 20.884-16.934 37.813-37.819 37.813s-37.816-16.929-37.819-37.813v0zM566.182 153.847v-49.063c0-0.002 0-0.004 0-0.007 0-13.593 7.408-25.455 18.406-31.771l0.178-0.094c5.445-3.1 11.964-4.927 18.91-4.927s13.464 1.827 19.102 5.028l-0.192-0.1c11.177 6.41 18.584 18.273 18.584 31.866 0 0.002 0 0.005 0 0.007v0 48.691c-0.003 20.884-16.934 37.813-37.819 37.813s-37.816-16.929-37.819-37.813v0z" />
-<glyph unicode="&#xe916;" glyph-name="Notes---list" horiz-adv-x="1102" d="M924.521-10.278c-15.571 11.143-35.771 24.6-56.345 37.516l-5.608 3.285c-21.122 15.557-45.692 28.034-72.182 36.102l-1.719 0.45c-40.261-14.918-86.767-23.549-135.288-23.549-0.79 0-1.58 0.002-2.37 0.007l0.122-0.001c-0.943-0.006-2.057-0.009-3.173-0.009-28.053 0-55.601 2.159-82.488 6.321l2.997-0.382c-21.182 4.453-36.856 22.983-36.856 45.173 0 2.55 0.207 5.051 0.605 7.488l-0.036-0.266c1.908 10.353 6.582 19.391 13.221 26.588l-0.033-0.037c-24.893-4.765-53.561-7.531-82.861-7.611h-0.068c-1.054-0.008-2.3-0.012-3.548-0.012-55.192 0-108.341 8.745-158.138 24.925l3.617-1.016c-24.348-10.891-45.151-22.715-64.672-36.257l1.303 0.855c-29.295-17.701-55.227-35.933-61.953-40.358l-78.238-55.404 9.647 98.063c2.301 25.224 3.717 50.802 4.602 76.38 0.954 7.745 1.498 16.712 1.498 25.805 0 20.536-2.776 40.424-7.972 59.31l0.367-1.566c-67.417 69.825-108.957 165.018-108.957 269.914 0 60.050 13.614 116.92 37.923 167.693l-1.009-2.34c24.777 52.413 58.238 96.803 98.989 133.201l0.401 0.352c85.102 74.624 197.34 120.148 320.21 120.148s235.108-45.524 320.766-120.626l-0.556 0.478c41.234-36.752 74.779-81.139 98.586-131.062l1.070-2.492c23.361-48.625 37.009-105.714 37.009-165.991s-13.648-117.366-38.023-168.345l1.014 2.355c-24.836-52.432-58.322-96.845-99.081-133.292l-0.399-0.35c-51.415-45.736-113.45-80.743-181.864-100.842l-3.376-0.85c15.806-1.906 34.245-3.060 52.929-3.185l0.174-0.001c46.322 0.002 90.882 7.548 132.517 21.476l-2.946-0.855c5.873 1.328 12.644 2.13 19.588 2.212l0.060 0.001c0.117 0.001 0.256 0.001 0.395 0.001 18.123 0 35.046-5.139 49.391-14.039l-0.4 0.231c22.462-10.539 41.056-20.804 58.934-32.099l-2.202 1.299c-0.708 94.966 12.656 121.783 27.525 137.536 53.886 54.479 87.49 129.115 88.503 211.598l0.002 0.194c-0.16 47.376-11.52 92.062-31.569 131.598l0.77-1.673c-21.071 42.405-49.548 78.097-84.077 106.749l-0.534 0.43c-8.923 7.578-14.995 18.275-16.526 30.387l-0.024 0.235c-0.198 1.652-0.311 3.565-0.311 5.504 0 10.691 3.434 20.58 9.26 28.624l-0.098-0.142c7.816 10.766 20.357 17.689 34.515 17.701h0.002c10.151-0.107 19.418-3.802 26.614-9.875l-0.063 0.051c44.916-37.12 81.447-82.646 107.505-134.353l1.090-2.387c25.354-50.488 40.27-109.995 40.447-172.968v-0.058c-0.755-107.912-43.96-205.589-113.728-277.287l0.088 0.091c-2.177-13.176-3.422-28.36-3.422-43.835 0-11.030 0.632-21.911 1.862-32.611l-0.122 1.306c0.974-36.641 3.806-69.122 4.514-76.291l9.647-99.037zM437.125 867.867c-0.005 0-0.011 0-0.017 0-185.645 0-337.662-143.974-350.488-326.356l-0.063-1.112c1.15-82.15 34.481-156.299 87.924-210.593l-0.039 0.040c15.488-16.55 29.472-44.783 27.702-139.129 28.9 24.049 64.831 40.611 104.285 46.245l1.125 0.132h0.797c0.519 0.015 1.13 0.024 1.743 0.024 6.156 0 12.107-0.882 17.732-2.525l-0.446 0.112c38.372-13.075 82.575-20.622 128.541-20.622 0.051 0 0.102 0 0.154 0h8.222c10.886-0.974 21.861-1.593 32.57-1.593 0.671-0.005 1.464-0.008 2.258-0.008 181.54 0 328.707 147.167 328.707 328.707 0 171.18-130.849 311.798-297.983 327.29l-1.297 0.097c-9.593 0.966-20.801 1.544-32.134 1.593h-0.081c-13.665-0.005-27.136-0.809-40.377-2.367l1.612 0.154c-7.611-0.266-14.072-0.089-20.445-0.089zM246.043 474.64c-35.866 2.502-64.175 31.609-65.402 67.589l-0.003 0.117c-0.464 2.973-0.729 6.401-0.729 9.891 0 37.246 30.194 67.441 67.441 67.441s67.441-30.194 67.441-67.441c0-1.612-0.057-3.211-0.168-4.794l0.012 0.213c0.010-0.451 0.016-0.983 0.016-1.516 0-19.164-7.338-36.613-19.358-49.692l0.048 0.053c-12.013-13.252-29.212-21.613-48.368-21.86h-0.929zM682.549 474.463c-37.106 0.097-67.208 29.95-67.706 66.951v0.047c-0.009 0.42-0.015 0.915-0.015 1.411 0 18.222 7.265 34.748 19.057 46.838l-0.013-0.014c12.33 12.666 29.545 20.523 48.596 20.523 37.442 0 67.795-30.353 67.795-67.795 0-37.040-29.704-67.142-66.59-67.784l-0.060-0.001zM455.445 474.463c-37.241 0.201-67.352 30.437-67.352 67.705 0 37.393 30.313 67.706 67.706 67.706s67.706-30.313 67.706-67.706c0-37.269-30.112-67.504-67.333-67.705h-0.019z" />
-<glyph unicode="&#xe917;" glyph-name="Have-been-added" d="M511.733 960c-282.623 0-511.733-229.111-511.733-511.733v0-461.093c0-28.262 22.911-51.173 51.173-51.173h460.56c282.77 0 512 229.23 512 512s-229.23 512-512 512v0zM750.756 397.093c-39.096 0-70.79 31.694-70.79 70.79s31.694 70.79 70.79 70.79c39.096 0 70.79-31.694 70.79-70.79v0c-0.061-39.072-31.718-70.729-70.784-70.79h-0.006zM239.022 397.093c-39.096 0-70.79 31.694-70.79 70.79s31.694 70.79 70.79 70.79c39.096 0 70.79-31.694 70.79-70.79v0c-0.060-38.997-31.597-70.608-70.559-70.79h-0.017zM506.51 397.093c-39.096 0-70.79 31.694-70.79 70.79s31.694 70.79 70.79 70.79c39.096 0 70.79-31.694 70.79-70.79v0c-0.060-38.997-31.597-70.608-70.559-70.79h-0.017z" />
-<glyph unicode="&#xe918;" glyph-name="Add-a-notation" d="M512 929.882c-266.136 0-481.882-215.746-481.882-481.882v0-433.694c0-26.614 21.575-48.188 48.188-48.188v0h433.694c266.136 0 481.882 215.746 481.882 481.882s-215.746 481.882-481.882 481.882v0zM489.653 719.059c27.479 0 49.754-22.276 49.754-49.754v-149.203h149.203c0.516 0.019 1.122 0.030 1.731 0.030 27.479 0 49.754-22.276 49.754-49.754s-22.276-49.754-49.754-49.754c-0.609 0-1.215 0.011-1.818 0.033l0.087-0.002h-149.263v-149.203c0.019-0.516 0.030-1.122 0.030-1.731 0-27.479-22.276-49.754-49.754-49.754s-49.754 22.276-49.754 49.754c0 0.609 0.011 1.215 0.033 1.818l-0.002-0.087v149.203h-149.203c-0.516-0.019-1.122-0.030-1.731-0.030-27.479 0-49.754 22.276-49.754 49.754s22.276 49.754 49.754 49.754c0.609 0 1.215-0.011 1.818-0.033l-0.087 0.002h149.203v149.203c0 27.479 22.276 49.754 49.754 49.754v0z" />
-<glyph unicode="&#xe919;" glyph-name="notation-tool" d="M977.665 682.567c-27.498 56.931-64.25 105.146-108.829 144.743l-0.467 0.407c-45.379 40.55-98.701 73.375-157.189 95.758l-3.502 1.177c-58.131 22.398-125.389 35.373-195.678 35.373s-137.547-12.975-199.51-36.66l3.833 1.287c-61.964-23.593-115.261-56.44-161.112-97.441l0.493 0.433c-45.046-40.003-81.799-88.219-108.11-142.441l-1.186-2.709c-25.501-52.443-40.407-114.084-40.407-179.207 0-75.804 20.198-146.89 55.505-208.171l-1.074 2.023c34.828-60.331 80.405-110.591 134.574-149.685l1.395-0.958c5.508-13.153 10.231-28.677 13.403-44.758l0.259-1.577c2.752-11.324 4.33-24.325 4.33-37.695 0-25.829-5.89-50.282-16.4-72.090l0.432 0.995c-2.704-4.946-4.295-10.835-4.295-17.096 0-19.978 16.195-36.173 36.173-36.173 13.717 0 25.651 7.635 31.783 18.888l0.095 0.19c31.688 49.367 80.287 85.517 137.457 100.478l1.62 0.36c33.251-6.987 71.459-10.987 110.602-10.987 0.074 0 0.148 0 0.222 0h-0.011c19.961 0 36.143 16.182 36.143 36.143s-16.182 36.143-36.143 36.143v0c-0.048 0-0.104 0-0.161 0-35.783 0-70.668 3.844-104.265 11.141l3.226-0.588c-2.805 0.782-6.026 1.231-9.352 1.231-2.549 0-5.037-0.264-7.437-0.766l0.235 0.041c-41.234-8.555-77.647-24.809-109.321-47.298l0.892 0.601c-3.688 38.016-13.699 72.879-28.996 104.721l0.804-1.858c-3.166 6.050-7.794 10.956-13.428 14.367l-0.161 0.091c-49.57 34.554-90.097 78.565-119.684 129.698l-1.033 1.934c-28.412 49.048-45.179 107.909-45.179 170.687 0 0.044 0 0.088 0 0.131v-0.007c1.076 107.969 49.395 204.441 125.24 269.884l0.465 0.392c38.971 34.807 84.762 62.981 134.986 82.19l3.007 1.010c50.523 19.43 108.973 30.684 170.052 30.684s119.53-11.255 173.391-31.803l-3.338 1.119c53.232-20.22 99.023-48.394 138.422-83.577l-0.428 0.376c76.256-65.857 124.523-162.328 125.559-270.096l0.001-0.18c0-0.058 0-0.125 0-0.193 0-64.773-17.838-125.379-48.869-177.175l0.872 1.569c-3.538-5.489-5.641-12.194-5.641-19.39 0-19.961 16.182-36.143 36.143-36.143 13.836 0 25.857 7.775 31.931 19.194l0.095 0.195c36.16 60.783 57.616 133.979 57.828 212.171v0.060c0 0.086 0 0.188 0 0.29 0 64.882-14.854 126.296-41.346 181.025l1.083-2.48zM330.274 548.477h341.55c19.961 0 36.143 16.182 36.143 36.143s-16.182 36.143-36.143 36.143h-341.55c-19.961 0-36.143-16.182-36.143-36.143s16.182-36.143 36.143-36.143v0zM330.274 362.414h341.55c19.961 0 36.143 16.182 36.143 36.143s-16.182 36.143-36.143 36.143v0h-341.55c-19.961 0-36.143-16.182-36.143-36.143s16.182-36.143 36.143-36.143v0zM906.319 135.364h-90.791v90.791c0 19.961-16.182 36.143-36.143 36.143s-36.143-16.182-36.143-36.143v0-90.791h-90.863c-19.961 0-36.143-16.182-36.143-36.143s16.182-36.143 36.143-36.143v0h90.863v-90.646c0-19.961 16.182-36.143 36.143-36.143s36.143 16.182 36.143 36.143v0 90.863h90.791c19.961 0 36.143 16.182 36.143 36.143s-16.182 36.143-36.143 36.143v0z" />
-<glyph unicode="&#xe91a;" glyph-name="filter" d="M576.839-64c-0.078 0-0.171 0-0.263 0-17.457 0-33.866 4.491-48.133 12.38l0.512-0.26-132.043 72.722c-31.168 17.418-51.896 50.209-51.896 87.842 0 0.086 0 0.171 0 0.257v-0.013 419.944c-0.021 6.502-3.186 12.261-8.054 15.838l-0.055 0.038-304.972 243.346-4.609 4.012c-16.912 17.791-27.315 41.908-27.315 68.456 0 54.918 44.52 99.438 99.438 99.438 0.181 0 0.361 0 0.541-0.001h821.595c55.207-0.24 99.869-45.050 99.869-100.291 0-26.083-9.957-49.84-26.277-67.678l0.069 0.076-4.012-4.012-307.276-247.101c-4.302-3.73-7.007-9.204-7.007-15.31 0-0.199 0.003-0.397 0.009-0.595l-0.001 0.029v-489.081c0-0.025 0-0.055 0-0.085 0-55.154-44.711-99.865-99.865-99.865-0.060 0-0.12 0-0.18 0h0.009zM83.831 847.842l303.094-242.492c22.928-18.042 37.599-45.687 37.897-76.77v-419.823c0-0.036 0-0.079 0-0.122 0-7.585 4.071-14.219 10.148-17.835l0.095-0.053 132.043-71.954c2.926-1.718 6.444-2.733 10.2-2.733s7.274 1.015 10.296 2.785l-0.096-0.052c5.826 3.559 9.656 9.883 9.656 17.102 0 0.229-0.004 0.458-0.012 0.685l0.001-0.033v488.228c-0.003 0.269-0.004 0.587-0.004 0.905 0 31.063 14.231 58.803 36.53 77.054l0.177 0.14 304.204 244.968c2.455 3.337 3.929 7.528 3.929 12.063 0 3.25-0.757 6.324-2.104 9.054l0.054-0.12c-3.524 6.162-10.057 10.248-17.545 10.248-0.163 0-0.326-0.002-0.488-0.006h-821.94c-0.077 0.001-0.167 0.002-0.258 0.002-11.031 0-19.973-8.942-19.973-19.973 0-4.58 1.541-8.8 4.134-12.169l-0.035 0.047zM983.724 447.956h-218.422c-21.53 1.020-38.6 18.724-38.6 40.415s17.070 39.395 38.509 40.412l0.091 0.003h218.337c21.53-1.020 38.6-18.724 38.6-40.415s-17.070-39.395-38.509-40.412l-0.091-0.003zM983.724 298.671h-218.422c-21.53 1.020-38.6 18.724-38.6 40.415s17.070 39.395 38.509 40.412l0.091 0.003h218.337c21.53-1.020 38.6-18.724 38.6-40.415s-17.070-39.395-38.509-40.412l-0.091-0.003zM983.724 150.496h-218.422c-21.53 1.020-38.6 18.724-38.6 40.415s17.070 39.395 38.509 40.412l0.091 0.003h218.337c21.53-1.020 38.6-18.724 38.6-40.415s-17.070-39.395-38.509-40.412l-0.091-0.003z" />
-<glyph unicode="&#xe91b;" glyph-name="class-edit" horiz-adv-x="1184" d="M287.649 515.073c0-44.901 36.4-81.301 81.301-81.301s81.301 36.4 81.301 81.301c0 44.901-36.4 81.301-81.301 81.301v0c-44.901 0-81.301-36.4-81.301-81.301v0zM865.27 186.774c0.982-0.047 2.133-0.074 3.291-0.074 40.464 0 73.267 32.803 73.267 73.267s-32.803 73.267-73.267 73.267c-40.464 0-73.267-32.803-73.267-73.267 0-0.008 0-0.016 0-0.024v0.001c0.013-39.297 30.961-71.362 69.815-73.165l0.162-0.006zM865.27 117.862c-78.47 0-142.082 63.612-142.082 142.082s63.612 142.082 142.082 142.082c78.47 0 142.082-63.612 142.082-142.082v0c0-78.47-63.612-142.082-142.082-142.082v0zM831.298 514.105l-11.905-35.617-124.758-72.009-36.585 7.453-31.165-53.813 24.777-27.971v-143.921l-24.777-27.971 31.165-53.813 36.585 7.549 124.758-72.106 11.905-35.617h61.943l11.808 35.521 125.822 72.106 36.585-7.549 31.165 53.813-22.551 27.971v144.309l24.777 27.971-31.165 53.813-36.585-7.549-125.822 72.106-11.905 35.617h-64.073zM962.153 525.429l79.752-46.264 59.233 12.292 82.268-139.953-40.36-45.199v-92.625l40.36-45.199-80.72-140.050-59.233 12.389-79.655-46.264-19.357-57.588h-161.44l-19.357 57.588-79.655 45.78-59.814-12.389-80.72 140.050 40.36 45.78v92.141l-40.36 45.586 80.72 139.953 59.814-12.292 79.655 45.78 19.357 57.588h161.536l17.809-57.007zM943.183 582.92h-161.44l-19.357-57.588-79.655-45.78-59.717 12.389-80.72-139.953 40.36-45.78v-92.141l-40.36-45.683 80.72-140.050 59.717 12.389 79.655-45.78 19.357-57.588h161.536l19.357 57.588 79.752 46.264 59.233-12.292 81.784 139.469-40.36 45.199v92.625l40.36 45.199-80.72 139.953-59.233-12.292-79.655 46.264zM694.539 406.382l124.758 72.106 11.905 35.617h61.943l11.808-35.617 125.822-72.009 36.585 7.453 31.165-53.813-24.681-27.971v-145.18l24.681-27.971-31.165-53.813-36.585 7.549-125.822-72.106-11.905-35.617h-61.847l-11.905 35.617-124.758 72.106-36.585-7.549-31.165 53.813 24.681 27.971v145.18l-24.681 27.971 31.165 53.813 36.585-7.549zM865.174 402.026c-78.47 0-142.082-63.612-142.082-142.082s63.612-142.082 142.082-142.082c78.47 0 142.082 63.612 142.082 142.082v0c0 0.029 0 0.063 0 0.097 0 78.47-63.612 142.082-142.082 142.082v0zM865.174 186.774c-0.982-0.047-2.133-0.074-3.291-0.074-40.464 0-73.267 32.803-73.267 73.267s32.803 73.267 73.267 73.267c40.464 0 73.267-32.803 73.267-73.267 0-0.008 0-0.016 0-0.024v0.001c-0.013-39.297-30.961-71.362-69.815-73.165l-0.162-0.006zM454.896 161.028h-84.978c-0.059 0-0.129 0-0.199 0-17.782 0-33.55 8.625-43.348 21.92l-0.104 0.148-219.608 301.974c-5.785 8.452-9.239 18.897-9.239 30.149s3.453 21.697 9.358 30.334l-0.119-0.185 219.608 301.974c9.902 13.443 25.67 22.068 43.452 22.068 0.070 0 0.14 0 0.209 0h667.815c29.72 0 53.813-24.093 53.813-53.813v0-235.772c0-25.284 20.496-45.78 45.78-45.78s45.78 20.496 45.78 45.78v0 272.357c0 0.029 0 0.063 0 0.097 0 59.426-48.119 107.613-107.519 107.723h-728.909c-0.035 0-0.076 0-0.117 0-35.996 0-67.857-17.703-87.352-44.877l-0.22-0.322-241.192-340.398c-11.102-16.668-17.715-37.154-17.715-59.185s6.613-42.516 17.963-59.581l-0.248 0.396 241.095-340.204c19.824-26.888 51.375-44.137 86.955-44.137 0.258 0 0.516 0.001 0.773 0.003h107.491c0.689-0.038 1.496-0.060 2.308-0.060 24.696 0 44.715 20.020 44.715 44.715s-20.020 44.715-44.715 44.715c-0.641 0-1.28-0.014-1.914-0.040l0.091 0.003z" />
-<glyph unicode="&#xe91c;" glyph-name="delete" d="M519.4 960c-104.088-0.349-188.696-83.261-191.773-186.651l-0.007-0.284h-242.169c-27.197 0-49.244-22.047-49.244-49.244s22.047-49.244 49.244-49.244v0h54.001v-550.673c-0.391-4.377-0.614-9.468-0.614-14.612 0-89.811 67.946-163.752 155.238-173.224l0.773-0.068h438.706c88.34 9.155 156.636 83.201 156.636 173.197 0 5.177-0.226 10.301-0.669 15.363l0.046-0.657v550.409h48.892c27.197 0 49.244 22.047 49.244 49.244s-22.047 49.244-49.244 49.244v0h-227.546c-2.605 103.822-87.257 187.023-191.402 187.287h-0.026zM419.237 773.065c2.812 53.060 46.521 95.019 100.030 95.019s97.218-41.959 100.020-94.77l0.011-0.249zM294.849 28.058c-30.48 0-64.132 39.378-64.132 95.846v550.409h566.882v-550.937c0-56.292-33.564-95.846-64.132-95.846h-438.618zM361.8 148.129c22.994 2.767 40.642 22.159 40.642 45.673 0 1.537-0.075 3.056-0.223 4.553l0.015-0.19v285.423c0.588 2.616 0.925 5.62 0.925 8.703 0 22.867-18.537 41.404-41.404 41.404s-41.404-18.537-41.404-41.404c0-3.083 0.337-6.087 0.976-8.978l-0.051 0.275v-285.423c-0.142-1.352-0.222-2.921-0.222-4.509 0-23.516 17.719-42.893 40.534-45.508l0.211-0.020zM508.3 148.129c22.994 2.767 40.642 22.159 40.642 45.673 0 1.537-0.075 3.056-0.223 4.553l0.015-0.19v285.423c0.588 2.616 0.925 5.62 0.925 8.703 0 22.867-18.537 41.404-41.404 41.404s-41.404-18.537-41.404-41.404c0-3.083 0.337-6.087 0.976-8.978l-0.051 0.275v-285.423c-0.127-1.282-0.199-2.77-0.199-4.276 0-23.56 17.684-42.989 40.502-45.74l0.22-0.022zM662.376 148.129c22.994 2.767 40.642 22.159 40.642 45.673 0 1.537-0.075 3.056-0.223 4.553l0.015-0.19v285.423c0.588 2.616 0.925 5.62 0.925 8.703 0 22.867-18.537 41.404-41.404 41.404s-41.404-18.537-41.404-41.404c0-3.083 0.337-6.087 0.976-8.978l-0.051 0.275v-285.423c-0.152-1.396-0.238-3.016-0.238-4.656 0-23.517 17.79-42.879 40.647-45.363l0.203-0.018z" />
-<glyph unicode="&#xe91d;" glyph-name="visible" horiz-adv-x="1366" d="M682.807-64c-250.538 0-473.763 157.571-669.676 466.304-8.344 12.83-13.306 28.526-13.306 45.38s4.962 32.551 13.505 45.707l-0.199-0.326c195.913 308.524 419.138 466.935 669.676 466.935s473.763-157.571 669.676-466.304c8.344-12.83 13.306-28.526 13.306-45.38s-4.962-32.551-13.505-45.707l0.199 0.326c-195.703-309.259-418.928-466.935-669.676-466.935zM682.807 857.579c-207.573 0-399.179-134.46-576.184-409.684 176.794-275.119 368.611-409.684 576.184-409.684s399.179 134.46 576.184 409.684c-177.005 275.224-368.4 409.684-576.184 409.684zM682.807 209.018c-130.852 1.484-236.356 107.905-236.356 238.968 0 131.986 106.996 238.982 238.982 238.982 131.981 0 238.974-106.988 238.982-238.967v-0.001c-0.594-132.116-107.832-238.988-240.031-238.988-0.555 0-1.109 0.002-1.663 0.006h0.085zM682.807 311.439c74.831 0.772 135.196 61.614 135.196 136.555 0 75.421-61.141 136.561-136.561 136.561-75.418 0-136.558-61.137-136.561-136.554v0c0.654-75.56 62.059-136.562 137.712-136.562 0.076 0 0.151 0 0.227 0h-0.012z" />
-<glyph unicode="&#xe91e;" glyph-name="biaozhunkuang" d="M0-63.744v753.971l269.107 269.773h754.893v-754.176l-269.107-269.824zM691.2 4.608v197.171h-378.163l-196.813-197.171zM759.245 37.325l163.84 164.454h-163.84zM68.045 52.685l196.71 197.222v376.474h-196.71zM956.006 269.824v573.696l-196.813-197.274v-376.474zM691.149 269.824v356.506h-358.4v-356.506zM711.219 694.784l196.813 197.222h-575.181v-197.222zM264.755 694.784v163.84l-163.84-163.84z" />
-<glyph unicode="&#xe91f;" glyph-name="lifangti" horiz-adv-x="1054" d="M29.191 378.221l32.952 22.57 37.090-57.779-35.059-23.698zM86.744 412.151l52.061 33.705 36.94-57.704-54.243-34.983zM163.106 457.291l52.137 33.78 37.090-57.779-54.243-34.983zM239.693 502.431l52.061 33.855 37.090-57.704-54.243-35.134zM316.281 547.571l10.307 9.028-1.204 9.178 68.613 2.407 2.483-51.46-45.14-28.137zM327.867 593.764l-2.483 62.444 68.613 2.483 2.483-65.002zM327.867 684.044l-2.483 62.444 68.613 2.483 2.483-65.002zM327.867 774.851l-2.483 62.444 68.613 2.483 2.483-65.002zM327.867 865.131l-2.483 40.099 68.613 2.483 2.483-42.582zM1.354 336.617l-1.354 414.611 358.712 208.471 688.46-367.289h6.32l-1.128-10.232v-435.074l-389.182-210.653zM70.193 711.204l1.279-335.014 595.321-357.734 315.98 171.005-1.354 359.314-620.298 330.349zM630.53-38.045l-2.483 386.172-619.696 359.013 32.35 60.563 624.963-360.367 345.546 187.18 34.758-59.209-348.104-189.889 1.279-383.69z" />
-<glyph unicode="&#xe920;" glyph-name="target" d="M804.16-63.999h-584.159c-17.621 0-32.542 11.562-37.59 27.513l-0.076 0.279-180.506 584.159c-1.124 3.491-1.772 7.507-1.772 11.674 0 12.701 6.017 23.996 15.356 31.19l0.092 0.068 472.622 361.013c6.552 5.055 14.878 8.102 23.916 8.102s17.365-3.047 24.008-8.17l-0.092 0.068 472.622-361.013c9.431-7.263 15.449-18.558 15.449-31.259 0-4.167-0.648-8.183-1.848-11.952l0.077 0.279-180.506-584.232c-5.070-16.183-19.929-27.72-37.483-27.72-0.039 0-0.078 0-0.116 0h0.006zM249.037 14.771h526.233l163.611 530.329-426.911 325.979-426.764-325.979 163.831-530.183zM341.558 120.091c-17.592 0.034-32.476 11.585-37.517 27.513l-0.076 0.279-105.393 340.9c-1.096 3.453-1.728 7.424-1.728 11.542 0 12.724 6.029 24.041 15.385 31.249l0.092 0.068 275.806 210.713c6.556 5.044 14.881 8.084 23.916 8.084s17.361-3.040 24.009-8.152l-0.093 0.069 275.806-210.713c9.389-7.278 15.373-18.559 15.373-31.237 0-7.359-2.016-14.246-5.526-20.141l0.1 0.181-162.514-272.369c-5.434-8.984-14.113-15.539-24.376-18.082l-0.271-0.057-283.778-68.458c-2.732-0.774-5.89-1.273-9.146-1.388l-0.069-0.002zM282.023 485.785l86.304-279.317 231.703 55.878 136.038 228.047-223.951 171.071zM551.393 920.594h-78.697v-511.532h78.697zM34.595 593.298l-20.406-75.991 490.907-131.65 20.406 76.064zM976.183 591.909l-485.641-130.187 20.406-75.991 485.641 130.187zM486.738 432.393l-302.575-431.884 64.435-45.2 302.575 431.884zM536.765 432.905l-63.85-45.639 303.453-442.27 63.777 45.565z" />
-<glyph unicode="&#xe921;" glyph-name="auxiliaryline" d="M408.288 767.168h402.304v-402.304h-402.304zM257.888 960v-225.216h-73.152v225.216zM257.888 693.76v-225.216h-73.152v225.216zM257.888 427.456v-225.216h-73.152v225.216zM257.888 161.216v-225.216h-73.152v225.216zM1020.96 155.392h-225.216v73.152h225.216zM756.768 155.392h-225.216v73.152h225.216zM492.512 155.392h-225.216v73.152h225.216zM228.256 155.392h-225.216v73.152h225.216z" />
-<glyph unicode="&#xe922;" glyph-name="more" d="M853.333 448c0 47.128 38.205 85.333 85.333 85.333s85.333-38.205 85.333-85.333c0-47.128-38.205-85.333-85.333-85.333v0c-47.128 0-85.333 38.205-85.333 85.333v0zM426.667 448c0 47.128 38.205 85.333 85.333 85.333s85.333-38.205 85.333-85.333c0-47.128-38.205-85.333-85.333-85.333v0c-47.128 0-85.333 38.205-85.333 85.333v0zM0 448c0 47.128 38.205 85.333 85.333 85.333s85.333-38.205 85.333-85.333c0-47.128-38.205-85.333-85.333-85.333v0c-47.128 0-85.333 38.205-85.333 85.333v0z" />
-<glyph unicode="&#xe923;" glyph-name="unfold" d="M183.723 604.245c7.665 8.863 18.925 14.437 31.488 14.437s23.823-5.574 31.443-14.384l0.045-0.053 265.301-293.376 265.301 293.376c7.665 8.863 18.925 14.437 31.488 14.437s23.823-5.574 31.443-14.384l0.045-0.053c8.101-9.258 13.042-21.46 13.042-34.816s-4.941-25.558-13.095-34.878l0.053 0.062-296.789-328.192c-7.665-8.863-18.925-14.437-31.488-14.437s-23.823 5.574-31.443 14.384l-0.045 0.053-296.789 328.192c-8.104 9.020-13.060 21.010-13.060 34.158 0 0.231 0.002 0.462 0.005 0.693v-0.035c-0.003 0.196-0.004 0.426-0.004 0.658 0 13.148 4.956 25.139 13.102 34.206l-0.042-0.047z" />
-<glyph unicode="&#xe924;" glyph-name="hidden" d="M992.335 612.706c4.027 7.335 6.396 16.072 6.396 25.363 0 13.735-5.177 26.261-13.687 35.732l0.044-0.049c-5.806 5.632-13.735 9.103-22.475 9.103-12.507 0-23.354-7.11-28.719-17.509l-0.085-0.181c-1.812-2.127-179.594-291.998-421.415-291.998-234.575 0-428.662 294.203-430.474 296.33-6.033 8.817-16.045 14.528-27.39 14.528-9.385 0-17.857-3.908-23.878-10.185l-0.011-0.011c-7.614-8.76-12.254-20.281-12.254-32.886 0-10.51 3.226-20.266 8.742-28.333l-0.111 0.172c24.783-53.571 58.084-99.096 98.673-136.897l0.261-0.24-93.499-115.554c-6.331-8.024-10.156-18.283-10.156-29.435 0-12.148 4.538-23.236 12.010-31.661l-0.043 0.050c3.947-7.863 11.948-13.165 21.187-13.165 0.25 0 0.499 0.004 0.747 0.012l-0.036-0.001c10.49 0.288 19.742 5.347 25.699 13.076l0.058 0.078 100.746 124.219c48.011-40.285 102.978-74.621 162.394-100.694l4.36-1.706-38.439-154.86c-1.198-3.869-1.887-8.317-1.887-12.927 0-18.627 11.264-34.622 27.351-41.548l0.294-0.112h11.028c18.095 1.059 32.651 14.91 34.798 32.589l0.018 0.179 38.439 154.86c27.353-6.615 58.868-10.611 91.247-11.025l0.283-0.003c32.599 0.276 64.127 4.28 94.356 11.606l-2.826-0.579 38.439-152.655c2.747-17.57 16.979-31.104 34.662-32.756l0.154-0.012c0.601-0.102 1.294-0.161 2-0.161 2.704 0 5.207 0.857 7.254 2.314l-0.038-0.026c16.375 7.066 27.628 23.071 27.628 41.706 0 4.592-0.683 9.025-1.954 13.202l0.084-0.321-38.991 152.734c63.776 27.782 118.742 62.118 167.809 103.26l-1.054-0.86 98.934-122.092c6.050-7.765 15.282-12.807 25.702-13.153l0.055-0.001c10.49 0.288 19.742 5.347 25.699 13.076l0.058 0.078c7.014 8.573 11.265 19.643 11.265 31.707 0 11.015-3.544 21.203-9.554 29.485l0.101-0.145-93.342 115.633c41.833 34.567 73.97 79.439 92.668 130.77l0.673 2.114z" />
-<glyph unicode="&#xe925;" glyph-name="left" d="M309.248 701.525l-207.36-207.019c-10.625-10.624-17.196-25.302-17.196-41.515s6.572-30.89 17.196-41.515v0l207.445-207.104c0.665-0.669 1.585-1.083 2.603-1.083s1.938 0.414 2.602 1.083v0l57.003 57.003c0.669 0.665 1.083 1.585 1.083 2.603s-0.414 1.938-1.083 2.602v0l-136.533 136.533c-0.644 0.66-1.041 1.564-1.041 2.561 0 2.003 1.604 3.63 3.598 3.669h782.681c1.682 0.187 3.011 1.487 3.24 3.138l0.002 0.019v80.811c0 2.027-1.643 3.669-3.669 3.669v0h-781.824c-1.997 0.038-3.601 1.666-3.601 3.669 0 0.996 0.397 1.9 1.042 2.561l136.106 136.020c0.669 0.665 1.083 1.585 1.083 2.603s-0.414 1.938-1.083 2.602v0l-57.088 57.088c-0.665 0.669-1.585 1.083-2.603 1.083s-1.938-0.414-2.602-1.083v0z" />
-<glyph unicode="&#xe926;" glyph-name="right" d="M714.667 701.611l207.36-207.104c10.625-10.624 17.196-25.302 17.196-41.515s-6.572-30.89-17.196-41.515v0l-207.445-207.189c-0.665-0.669-1.585-1.083-2.603-1.083s-1.938 0.414-2.602 1.083v0l-57.003 57.088c-0.669 0.665-1.083 1.585-1.083 2.603s0.414 1.938 1.083 2.602v0l136.533 136.533c0.644 0.66 1.041 1.564 1.041 2.561 0 2.003-1.604 3.63-3.598 3.669h-782.681c-1.835 0.221-3.243 1.768-3.243 3.644 0 0.009 0 0.017 0 0.026v-0.001 80.299c0 2.027 1.643 3.669 3.669 3.669v0h781.824c1.997 0.038 3.601 1.666 3.601 3.669 0 0.996-0.397 1.9-1.042 2.561l-136.532 136.532c-0.669 0.665-1.083 1.585-1.083 2.603s0.414 1.938 1.083 2.602v0l57.003 57.088c0.665 0.669 1.585 1.083 2.603 1.083s1.938-0.414 2.602-1.083v0z" />
-<glyph unicode="&#xe927;" glyph-name="dakai" d="M313.088 77.056c-8.863 7.665-14.437 18.925-14.437 31.488s5.574 23.823 14.384 31.443l0.053 0.045 293.376 265.301-293.376 265.301c-8.863 7.665-14.437 18.925-14.437 31.488s5.574 23.823 14.384 31.443l0.053 0.045c9.258 8.101 21.46 13.042 34.816 13.042s25.558-4.941 34.878-13.095l-0.062 0.053 328.192-296.789c8.863-7.665 14.437-18.925 14.437-31.488s-5.574-23.823-14.384-31.443l-0.053-0.045-328.192-296.789c-9.020-8.104-21.010-13.060-34.158-13.060-0.231 0-0.462 0.002-0.693 0.005h0.035c-0.196-0.003-0.426-0.004-0.658-0.004-13.148 0-25.139 4.956-34.206 13.102l0.047-0.042z" />
-<glyph unicode="&#xe928;" glyph-name="model" d="M692.405 899.945c-79.209 0-147.697-59.151-159.744-134.927-1.601-3.95-2.53-8.532-2.53-13.33 0-0.036 0-0.072 0-0.108v0.006l0.181-614.52c-16.023-64.934 8.915-133.783 65.837-174.682 18.372-10.24 38.129-17.709 58.669-22.227l14.878-2.53 5.542-0.602 10.842-0.723 6.325-0.12c0.38-0.003 0.829-0.005 1.278-0.005 44.45 0 84.683 18.052 113.768 47.226l0.004 0.004c29.469 30.165 47.65 71.469 47.65 117.019 0 11.192-1.098 22.128-3.191 32.706l0.176-1.064c79.39 10.421 141.553 79.752 141.553 160.949-0.272 50.341-23.374 95.232-59.47 124.883l-0.284 0.226c36.402 29.812 59.516 74.677 59.753 124.948v0.040c0 81.679-62.765 151.070-142.577 161.009l1.988 11.083c1.084 7.409 1.687 14.938 1.687 22.408-0.744 89.354-72.98 161.59-162.263 162.334h-0.071zM331.053 899.945c-89.354-0.744-161.59-72.98-162.334-162.263v-0.071c0-11.445 1.265-22.709 3.735-33.852-79.062-12.049-139.047-79.2-139.806-160.508l-0.001-0.079c0-0.056 0-0.122 0-0.188 0-49.747 22.204-94.309 57.243-124.314l0.222-0.186c-37.527-30.6-60.235-76.499-60.235-125.53 0-79.511 59.753-147.878 137.156-160.226l-1.807-12.529c-3.795-38.972 6.024-78.065 27.708-110.652l6.927-10.12c5-6.746 10.541-13.131 16.504-19.034 27.365-24.91 63.103-41.053 102.534-43.762l0.528-0.029 11.686-0.422 10.24 0.301 9.999 0.904 16.866 2.891c29.515 6.686 56.621 21.685 78.005 43.128 23.191 23.010 38.49 52.887 43.61 85.173 1.546 3.205 2.669 6.926 3.173 10.84l0.019 0.183 0.422 4.939-0.060 279.733c0.723 7.529 0.783 15.059 0.12 22.588l-0.12 364.725c0.002 0.126 0.003 0.275 0.003 0.425 0 3.969-0.775 7.756-2.183 11.22l0.072-0.2c-13.34 77.663-79.81 136.131-160.083 136.914l-0.083 0.001zM692.465 825.434c47.586 0 87.823-40.177 87.823-87.823 0-37.768-22.648-70.234-58.007-82.944-18.854-7.529-29.395-29.756-22.287-47.164 4.262-15.259 17.905-26.32 34.179-26.623l0.034-0.001c0.288-0.012 0.627-0.020 0.967-0.020 1.922 0 3.79 0.227 5.581 0.655l-0.163-0.033c3.192 0.843 6.084 2.409 5.060 2.771 20.42 7.409 39.153 18.793 55.236 33.431l9.276 9.035 10.782 2.65c4.337 1.024 8.794 1.506 13.252 1.566 47.586 0 87.763-40.237 87.763-87.823-0.674-45.299-35.033-82.368-79.106-87.304l-0.404-0.037-8.433-0.482h-2.65c-0.478 0.023-1.039 0.036-1.602 0.036-19.694 0-35.659-15.965-35.659-35.659 0-0.563 0.013-1.124 0.039-1.681l-0.003 0.079c0-19.637 12.469-34.093 30.901-36.744l14.637-0.904c44.478-4.973 78.837-42.042 79.51-87.273l0.001-0.068c0-47.586-40.177-87.883-87.823-87.883-45.299 0.674-82.368 35.033-87.304 79.106l-0.037 0.404-0.904 14.697c-2.65 18.432-17.107 30.84-36.744 30.84-0.478 0.023-1.039 0.036-1.602 0.036-19.694 0-35.659-15.965-35.659-35.659 0-0.563 0.013-1.124 0.039-1.681l-0.003 0.079c0.541-66.246 40.315-123.071 97.202-148.427l1.042-0.415c17.769-29.094 16.143-65.596-4.939-95.955-4.382-6.337-9.305-11.834-14.833-16.655l-0.105-0.090c-35.539-28.311-85.353-25.48-117.82 6.987-16.279 15.963-26.369 38.186-26.369 62.765s10.090 46.802 26.355 62.751l0.014 0.014c6.851 6.615 11.105 15.882 11.105 26.142s-4.254 19.527-11.095 26.132l-0.011 0.010c-5.174 5.263-11.881 9.005-19.398 10.501l-0.239 0.040-5.421 0.602v143.36c0 16.986 3.132 31.744 10.059 45.779 9.336 18.673 28.552 34.455 50.176 42.526 21.805 7.288 44.333 5.421 67.223-4.638 18.191-10.963 40.719-4.216 51.802 14.336 10.963 18.251 4.216 40.719-14.697 52.043-37.406 20.179-81.438 24.094-123.784 11.927-11.914-3.487-22.262-7.936-31.923-13.45l0.722 0.379-9.638-5.963v223.895c0 47.586 40.237 87.823 87.883 87.823zM331.174 825.434c44.755 0 83.125-35.599 87.462-79.511l0.361-8.252v-224.858c-10.912 7.139-23.517 12.996-36.948 16.917l-1 0.25c-14.186 4.426-30.496 6.975-47.402 6.975-28.095 0-54.545-7.040-77.683-19.453l0.88 0.431c-18.552-11.144-25.299-33.732-14.396-51.923 11.204-18.552 33.611-25.299 51.26-14.697 21.082 10.421 45.417 12.228 67.825 5.060 26.817-8.553 47.482-29.357 55.677-55.659l0.161-0.6 1.807-6.024-0.12-169.502c-9.846-0.375-18.651-4.544-25.052-11.077l-0.006-0.006c-6.883-6.591-11.161-15.855-11.161-26.118 0-7.717 2.419-14.869 6.539-20.74l-0.077 0.116 4.216-5.060 4.759-4.578 1.205-2.65 6.445-10.722c6.846-12.273 10.876-26.925 10.876-42.518 0-30.032-14.952-56.573-37.817-72.583l-0.285-0.189c-14.052-9.784-31.481-15.632-50.276-15.632-26.13 0-49.621 11.303-65.848 29.287l-0.070 0.078c-12.042 15.689-19.297 35.601-19.297 57.208 0 10.337 1.661 20.287 4.73 29.596l-0.191-0.668 4.337 11.384 0.843 3.012 10.421 4.819c54.071 27.161 90.637 81.986 91.136 145.401v0.067c0.023 0.477 0.036 1.037 0.036 1.599 0 19.694-15.965 35.659-35.659 35.659-0.542 0-1.082-0.012-1.618-0.036l0.076 0.003c-19.697 0-34.153-12.408-36.744-30.84l-1.024-15.119c-3.253-31.684-24.094-59.874-49.875-71.8-9.999 1.024-20.54-1.867-24.094-6.144-3.933-0.728-8.458-1.145-13.080-1.145-0.082 0-0.163 0-0.245 0h0.013c-47.586 0-87.823 40.237-87.823 87.823 0.67 45.281 34.998 82.34 79.044 87.304l0.406 0.037 14.697 0.904c18.372 2.711 30.901 17.167 30.901 36.804s-12.469 34.093-30.901 36.744l-14.637 0.904c-44.465 4.999-78.809 42.053-79.51 87.27l-0.001 0.071c0 47.586 40.177 87.883 87.823 87.883 6.987 0 14.697-1.265 18.191-0.723 19.034-21.444 43.43-37.527 70.716-46.562-0.602 0-0.723 0-0.542-0.12l3.494-1.626c1.514-0.65 3.277-1.027 5.128-1.027 0.103 0 0.206 0.001 0.309 0.004h-0.015c15.855 0.187 29.207 10.693 33.664 25.106l0.067 0.253c7.469 18.673-3.072 40.96-22.287 48.55-13.894 5.018-25.701 12.89-35.196 22.965l-0.042 0.045c-1.363 2.896-2.972 5.392-4.862 7.643l0.043-0.053-2.409 2.108-3.494 5.662c-7.349 12.679-11.686 27.896-11.686 44.125 0 0.115 0 0.231 0.001 0.346v-0.018c0 47.586 40.297 87.823 87.823 87.823z" />
-<glyph unicode="&#xe929;" glyph-name="loading" d="M507.725-21.092v161.361c45.053 0 85.529 8.975 126.125 26.924l63.002-152.386c-56.059-22.089-120.961-35.2-188.838-35.896l-0.29-0.002zM863.514 131.294l-117.091 112.031c30.879 30.176 54.226 67.928 67.042 110.255l0.478 1.836 153.109-53.787c-24.446-65.953-59.62-122.593-103.924-170.693l0.325 0.357zM994.097 494.371l-162.144-8.975c-4.457 44.812-13.492 85.168-36.019 125.523l144.135 71.676c31.501-58.244 49.51-121.006 54.028-188.224zM818.461 835.042l-103.599-125.523c-31.846 26.741-69.271 48.102-110.135 62.039l-2.438 0.722 45.053 156.904c63.063-22.406 121.608-53.787 171.118-94.142zM440.206 942.616l22.527-161.421c-45.053-4.457-85.589-22.346-121.668-44.752l-85.469 143.352c58.545 31.381 117.091 53.787 184.671 62.761zM111.461 745.417l130.582-94.142c-25.020-32.881-43.765-71.982-53.626-114.49l-0.402-2.058-157.626 35.838c18.070 62.761 45.053 121.066 81.072 174.853zM30.389 364.391l157.626 31.321c9.035-44.752 26.984-80.65 49.511-116.488l-135.1-94.142c-31.501 53.847-58.545 112.031-72.037 179.31zM251.078 50.583l85.529 139.015c36.019-22.406 76.555-35.898 121.608-44.873l-22.527-161.361c-67.58 9.035-126.065 31.381-184.61 67.279z" />
-<glyph unicode="&#xe92a;" glyph-name="cube" horiz-adv-x="1109" d="M1108.66 387.159c0 0.001 0 0.002 0 0.003 0 26.984-15.41 50.368-37.91 61.834l-0.393 0.182-218.814 109.45c-11.424 5.843-19.109 17.53-19.109 31.013 0 0.014 0 0.028 0 0.042v-0.002 226.066c0 28.834-17.915 54.768-45.042 64.834l-191.942 72.085c-12.035 4.663-25.962 7.364-40.521 7.364s-28.486-2.701-41.309-7.63l0.788 0.266-191.345-72.512c-26.379-10.221-44.75-35.378-44.787-64.829v-224.705c-0.018-13.465-7.698-25.131-18.913-30.876l-0.196-0.091-220.862-110.388c-22.893-11.647-38.304-35.032-38.304-62.016 0-0.091 0-0.182 0.001-0.273v0.014l0.512-244.919c0-25.166 13.649-48.284 35.573-60.568l243.383-135.725c20.474-11.431 45.384-11.346 65.772 0.171l2.218 1.194 189.98 109.194c4.927 2.889 10.85 4.595 17.171 4.595 6.441 0 12.468-1.771 17.62-4.853l-0.157 0.087 191.26-111.071c9.557-5.558 21.032-8.838 33.274-8.838 11.998 0 23.259 3.151 33.002 8.671l-0.333-0.174 3.242 1.877 240.824 133.763c21.43 12.121 35.659 34.759 35.659 60.72 0 0.037 0 0.074 0 0.111v-0.006l-0.341 245.942zM763.164 591.129c0-0.015 0-0.032 0-0.049 0-13.501-7.725-25.198-18.997-30.912l-0.197-0.091-142.123-71.232c-1.12-0.563-2.441-0.893-3.839-0.893-4.79 0-8.675 3.87-8.701 8.653v176.589c0 31.564 19.109 59.886 48.284 71.659l124.891 49.905 0.597-203.63zM278.36 329.661l-0.256 0.171-161.232 81.298 179.402 89.744c4.498 2.319 9.817 3.679 15.453 3.679 5.897 0 11.446-1.488 16.293-4.11l-0.181 0.090 19.535-10.237 140.331-69.611c2.887-1.432 4.836-4.36 4.836-7.743 0-3.282-1.835-6.135-4.535-7.59l-0.046-0.023-140.587-75.753c-10.034-5.164-21.896-8.191-34.465-8.191-12.636 0-24.557 3.059-35.063 8.477l0.429-0.201zM500.843 108.714l-153.383-76.606-0.853 177.44c0 0.065 0 0.142 0 0.219 0 29.958 17.044 55.935 41.965 68.762l0.434 0.203 117.725 59.118c1.119 0.569 2.44 0.902 3.839 0.902 4.746 0 8.596-3.837 8.616-8.578v-0.002l0.853-190.407c-0.030-13.53-7.739-25.253-18.998-31.046l-0.196-0.092zM527.629 804.911l-111.412 41.801 138.454 52.038 138.454-52.038-111.412-41.801c-8.028-3.141-17.323-4.961-27.043-4.961s-19.015 1.82-27.562 5.139l0.52-0.177zM760.946 328.893l-139.734 76.35c-2.67 1.52-4.441 4.347-4.441 7.587 0 3.376 1.923 6.303 4.733 7.746l0.049 0.023 141.611 70.805 17.488 9.128c4.655 2.518 10.189 3.998 16.070 3.998 5.619 0 10.922-1.351 15.603-3.747l-0.194 0.090 20.218-10.066 159.184-79.763-158.075-83.004c-10.293-5.454-22.501-8.656-35.457-8.656-13.593 0-26.362 3.524-37.445 9.709l0.39-0.2zM1039.305 156.572c0-12.796-7.081-24.569-18.426-30.711l-188.53-99.895-0.597 183.326c0 0.092-0.001 0.202-0.001 0.311 0 29.952 17.132 55.902 42.131 68.587l0.438 0.202 164.985 82.749v-204.568z" />
-<glyph unicode="&#xe92b;" glyph-name="Frame" d="M761.6 953.6c64 0 128-25.6 179.2-76.8 102.4-102.4 102.4-262.4 0-364.8l-134.4-134.4-89.6 89.6 134.4 134.4c51.2 51.2 51.2 128 0 179.2s-128 51.2-179.2 0l-179.2-179.2c-25.6-25.6-38.4-57.6-38.4-89.6s12.8-64 32-89.6l70.4-64-89.6-89.6-70.4 70.4c-44.8 44.8-70.4 108.8-70.4 179.2s25.6 134.4 76.8 179.2l179.2 179.2c44.8 51.2 115.2 76.8 179.2 76.8zM556.8 627.2l70.4-64c102.4-102.4 102.4-262.4 0-364.8l-179.2-179.2c-46.342-47.411-110.938-76.81-182.4-76.81s-136.059 29.399-182.353 76.762l-0.047 0.048c-47.411 46.342-76.81 110.938-76.81 182.4s29.399 136.059 76.762 182.353l0.048 0.047 134.4 134.4 89.6-89.6-134.4-134.4c-51.2-51.2-51.2-128 0-179.2s134.4-51.2 179.2 0l185.6 172.8c51.2 51.2 51.2 128 0 179.2l-70.4 70.4 89.6 89.6z" />
-<glyph unicode="&#xe92c;" glyph-name="polygon" d="M942.592 138.701l-27.853 387.328c33.824 16.411 56.73 50.492 56.73 89.924 0 41.167-24.967 76.503-60.585 91.692l-0.651 0.247c-11.179 4.799-24.191 7.589-37.854 7.589-27.231 0-51.873-11.084-69.661-28.985l-0.005-0.005-245.76 122.317c0.135 2.112 0.211 4.58 0.211 7.066s-0.077 4.954-0.228 7.401l0.017-0.336c-6.602 48.799-47.991 86.018-98.074 86.018s-91.472-37.219-98.017-85.507l-0.057-0.511c0.051-9.062 1.485-18.022 4.147-26.675l-154.778-104.55c-16.345 13.49-37.447 21.745-60.471 21.964h-0.048c-54.475-0.973-98.262-45.362-98.262-99.979 0-43.605 27.911-80.691 66.842-94.367l0.701-0.214v-229.478c-40.129-13.254-68.577-50.417-68.577-94.225 0-54.688 44.333-99.021 99.021-99.021 43.522 0 80.486 28.078 93.766 67.108l0.206 0.697h174.797c10.272-32.939 36.56-58.023 69.517-66.414l0.678-0.146c6.81-1.712 14.627-2.694 22.674-2.694 27.253 0 51.875 11.266 69.463 29.396l0.024 0.024 244.992-93.338c4.034-51.18 46.558-91.183 98.426-91.183 54.518 0 98.714 44.196 98.714 98.714 0 48.079-34.373 88.131-79.886 96.92l-0.62 0.1 0.461 3.123zM872.397 650.701c0.12 0.001 0.262 0.002 0.405 0.002 15.414 0 28.636-9.382 34.269-22.747l0.091-0.244c1.835-4.3 2.902-9.302 2.902-14.553 0-18.155-12.752-33.331-29.787-37.061l-0.251-0.046c-2.134-0.439-4.586-0.691-7.098-0.691-5.302 0-10.343 1.121-14.897 3.139l0.235-0.093c-13.461 5.932-22.687 19.157-22.687 34.537 0 0.224 0.002 0.448 0.006 0.671v-0.034c0 0.046 0 0.1 0 0.155 0 20.308 16.376 36.791 36.643 36.965h0.17zM773.786 627.712c-0.512-4.71-0.512-9.421 0-14.131 0-0.103-0.001-0.226-0.001-0.348 0-47.965 33.754-88.046 78.804-97.785l0.659-0.119 27.853-387.328c-16.485-8.169-29.944-20.282-39.497-35.144l-0.234-0.389-233.318 88.883c0.12 2.111 0.188 4.58 0.188 7.066s-0.068 4.955-0.203 7.407l0.015-0.341c0 0.039 0 0.086 0 0.133 0 54.219-43.264 98.334-97.153 99.705l-0.127 0.003c-43.343-0.301-79.989-28.634-92.732-67.76l-0.196-0.695h-174.643c-9.98 29.672-32.847 52.623-61.77 62.514l-0.694 0.206v229.632c39.937 13.628 68.147 50.821 68.147 94.603 0 0.005 0 0.011 0 0.016v-0.001c-0.364 9.439-1.855 18.379-4.343 26.893l0.196-0.781 154.829 104.55c16.472-13.63 37.814-21.898 61.087-21.898 27.323 0 51.985 11.397 69.49 29.696l0.034 0.036 243.61-124.621zM459.469 860.006c0.185 0.003 0.404 0.005 0.623 0.005 17.996 0 33.014-12.754 36.507-29.716l0.041-0.241c0.506-2.317 0.795-4.978 0.795-7.707 0-15.563-9.422-28.926-22.873-34.695l-0.246-0.094c-4.143-1.711-8.954-2.704-13.997-2.704-20.755 0-37.581 16.825-37.581 37.581 0 20.456 16.344 37.095 36.686 37.57l0.044 0.001zM149.658 650.957c0.12 0.001 0.262 0.002 0.405 0.002 15.414 0 28.636-9.382 34.269-22.747l0.091-0.244c1.86-4.328 2.941-9.366 2.941-14.656 0-10.366-4.152-19.762-10.883-26.616l0.006 0.006c-6.689-6.836-16.010-11.075-26.32-11.075-5.294 0-10.327 1.117-14.875 3.129l0.235-0.093c-13.461 5.932-22.687 19.157-22.687 34.537 0 0.224 0.002 0.448 0.006 0.671v-0.034c-0.001 0.076-0.001 0.166-0.001 0.257 0 20.288 16.389 36.748 36.649 36.863h0.165zM149.658 158.054c-20.228 0.174-36.558 16.612-36.558 36.864 0 20.36 16.505 36.865 36.865 36.865 0.108 0 0.216 0 0.324-0.001h-0.017c20.228-0.174 36.558-16.612 36.558-36.864 0-20.36-16.505-36.865-36.865-36.865-0.108 0-0.216 0-0.324 0.001h0.017zM510.976 158.054c-20.762 0.029-37.581 16.866-37.581 37.632 0 20.784 16.848 37.632 37.632 37.632s37.632-16.848 37.632-37.632c0-20.766-16.819-37.603-37.578-37.632h-0.105zM924.006 1.28c-20.228 0.174-36.558 16.612-36.558 36.864 0 20.36 16.505 36.865 36.865 36.865 0.108 0 0.216 0 0.324-0.001h-0.017c20.228-0.174 36.558-16.612 36.558-36.864 0-20.36-16.505-36.865-36.865-36.865-0.108 0-0.216 0-0.324 0.001h0.017z" />
-<glyph unicode="&#xe92d;" glyph-name="edit" d="M186.745 790.663l566.703-424.691-190.087-11.426c-78.050-8.234-145.198-49.017-188.481-108.324l-0.528-0.758-104.717-158.451-82.998 703.704 0.108-0.054zM143.091 904.866c-24.468 6.575-38.804-11.102-34.493-47.373l104.017-881.287c2.695-23.444 10.779-36.864 20.803-39.559s23.929 5.389 37.349 25.762l161.684 244.574c31.819 42.345 79.528 71.266 134.113 77.892l0.947 0.094 292.648 17.624c47.859 2.856 55.619 28.726 17.246 57.452l-709.47 531.672c-7.086 5.683-15.412 10.176-24.473 13.006l-0.535 0.144h0.108z" />
-<glyph unicode="&#xe92e;" glyph-name="rectangle" d="M905.168 203.28v490.113c27.683 8.649 50.961 27.787 64.753 53.32 9.069 17.407 13.839 36.701 13.895 56.364-0.329 64.033-52.313 115.812-116.392 115.812-50.941 0-94.236-32.721-110.013-78.293l-0.247-0.816h-489.957c-15.697 46.969-59.279 80.22-110.631 80.22-64.281 0-116.393-52.112-116.393-116.393 0-51.352 33.251-94.935 79.399-110.392l0.821-0.239v-490.113c-46.713-15.842-79.735-59.3-79.735-110.471 0-64.24 52.044-116.325 116.269-116.393h0.007c43.865 0.084 81.973 24.633 101.411 60.731l0.303 0.616c3.568 6.082 6.237 12.689 7.97 19.559h490.113c15.835-46.561 59.101-79.49 110.083-79.64h0.020c43.865 0.084 81.973 24.633 101.411 60.731l0.303 0.616c9.175 17.303 14 36.701 14.156 56.312-0.597 49.817-32.395 92.052-76.731 108.118l-0.809 0.259zM758.369 129.877h-490.533c-11.953 34.657-38.746 61.448-72.58 73.153l-0.822 0.248v490.113c27.735 8.649 50.961 27.787 64.805 53.32 3.568 6.134 6.237 12.74 7.97 19.611h490.113c11.962-34.652 38.75-61.441 72.58-73.153l0.822-0.249v-490.113c-34.44-11.813-61.066-38.437-72.634-72.065l-0.244-0.813h0.524zM868.469 845.336c0.019 0 0.036 0 0.057 0 23.657 0 42.835-19.178 42.835-42.835 0-0.24-0.002-0.479-0.006-0.719v0.034c-0.077-7.641-1.865-14.839-5.004-21.267l0.13 0.293c-7.93-13.234-22.193-21.953-38.495-21.953-5.765 0-11.278 1.092-16.338 3.079l0.304-0.104c-15.963 6.52-27.008 21.922-27.008 39.913 0 12.004 4.919 22.856 12.847 30.651l0.006 0.006c7.867 7.864 18.727 12.727 30.72 12.74h0.002v0.156zM159.62 845.336c0.001 0 0.003 0 0.005 0 23.688 0 42.887-19.204 42.887-42.887 0-0.22-0.002-0.443-0.005-0.664v0.031c0-7.342-1.887-14.576-5.507-20.974-7.736-12.776-21.564-21.188-37.352-21.188-23.558 0-42.743 18.718-43.495 42.092l-0.002 0.070c0 24.035 19.484 43.515 43.515 43.515v0zM197 72.15c-7.559-13.211-21.567-21.973-37.624-21.973-23.862 0-43.203 19.342-43.203 43.203s19.342 43.203 43.203 43.203c6.071 0 11.848-1.253 17.090-3.511l-0.279 0.107c15.595-6.651 26.325-21.855 26.325-39.56 0-0.229-0.002-0.458-0.006-0.686v0.033c0-7.342-1.887-14.576-5.507-20.974v0.156zM906.428 72.15c-7.916-13.241-22.173-21.967-38.47-21.967-5.774 0-11.296 1.093-16.361 3.093l0.303-0.104c-15.928 6.502-26.948 21.87-26.948 39.815 0 0.012 0 0.023 0 0.030v-0.002c0.044 23.999 19.509 43.439 43.515 43.439 5.977 0 11.67-1.206 16.852-3.386l-0.285 0.106c15.594-6.638 26.326-21.827 26.326-39.525 0-0.243-0.002-0.484-0.006-0.726v0.034c-0.075-7.641-1.864-14.839-5.004-21.267l0.13 0.293v0.156z" />
-<glyph unicode="&#xe92f;" glyph-name="ai" d="M90.675 324.608l69.786-2.355-2.253-86.118 372.326-218.778 232.755 134.963 34.97-62.72-2.355-2.355-267.725-151.245h-2.253l-437.606 260.71 2.355 127.898zM709.837 859.904l262.963-158.31-4.608-512-104.806-62.822-34.816 62.874 72.192 41.83 4.608 428.237-232.858 141.978 37.376 58.214zM514.304 657.459c18.586 0 25.6-11.725 34.918-23.347l2.355-2.253 174.592-335.206c4.382-5.761 7.021-13.055 7.021-20.966s-2.639-15.206-7.084-21.052l0.063 0.086c-6.113-8.564-16.018-14.081-27.21-14.081-14.003 0-25.99 8.635-30.924 20.872l-0.080 0.224-16.384 32.666-34.918 65.126c-4.086 7.36-7.967 13.481-12.152 19.372l0.427-0.633-37.171-72.192c-7.014-16.333-16.333-30.31-23.347-46.541-4.836-12.2-16.533-20.67-30.209-20.67-11.854 0-22.221 6.364-27.872 15.862l-0.082 0.149c-3.139 5.504-4.989 12.094-4.989 19.116 0 8.565 2.753 16.488 7.423 22.931l-0.078-0.114 48.845 90.726c6.963 16.333 16.384 30.31 23.245 46.592 3.289 4.521 5.261 10.184 5.261 16.307s-1.972 11.786-5.317 16.388l0.056-0.080c-16.333 27.853-27.955 55.808-44.186 83.763-5.846-4.571-10.040-11.017-11.685-18.423l-0.040-0.214-69.786-132.608-67.277-132.864c-5.807-13.113-16.569-23.141-29.85-27.845l-0.358-0.111c-2.052-0.473-4.409-0.745-6.829-0.745-17.503 0-31.693 14.189-31.693 31.693 0 3.073 0.437 6.044 1.253 8.853l-0.056-0.224c1.843 5.632 4.147 11.11 6.912 16.384 58.163 111.718 114.022 221.133 172.186 332.8 7.066 18.586 16.435 30.259 35.021 30.259zM537.446 960l104.755-65.126-34.97-60.57-72.090 44.186-374.784-209.408v-267.725h-69.734l2.355 309.555 444.467 249.088zM707.43 627.2c31.414-2.369 56.005-28.44 56.005-60.255 0-1.715-0.071-3.413-0.211-5.091l0.015 0.22c-3.159-31.592-29.605-56.056-61.764-56.056-1.201 0-2.394 0.034-3.578 0.101l0.164-0.007c-32.278 0.205-58.365 26.419-58.365 58.725 0 1.478 0.055 2.943 0.162 4.393l-0.012-0.194c0.92 32.565 27.538 58.612 60.24 58.612 2.589 0 5.139-0.163 7.642-0.48l-0.298 0.031z" />
-<glyph unicode="&#xe930;" glyph-name="polyline" horiz-adv-x="1120" d="M424.842 645.6c-27.69 15.533-47.959 35.979-75.328 19.841-26.381-15.801-43.762-44.238-43.762-76.73 0-15.167 3.796-29.457 10.477-41.97l-0.237 0.475-163.763-159.739c-11.241 5.614-24.487 8.904-38.485 8.904h-0.001c-0.042 0-0.075 0-0.128 0-49.505 0-89.616-40.126-89.616-89.616s40.126-89.616 89.616-89.616c16.904 0 32.716 4.691 46.215 12.825l-0.401-0.22c13.777 8.288 25.092 20.129 32.668 34.326 7.627 13.258 11.7 28.314 11.739 43.647-0.107 15.381-4.284 29.767-11.488 42.171l0.215-0.411 163.763 159.507c12.020-6.302 25.381-9.51 38.972-9.473 48.553 0.45 87.732 39.925 87.732 88.527 0 0.042 0 0.103 0 0.157v-0.016c0 12.825-33.576-39.953-39.009-28.41 75.752 67.184 4.074 49.386 2.647 74.848 0.417 12.12-17.518-24.623-10.462-4.736 3.738 6.015 26.651 58.094-11.353 15.714zM143.328 290.134c-6.015-10.315-16.952-17.186-29.509-17.379l-0.027-0.001c-16.718 1.081-29.854 14.903-29.854 31.799 0 17.592 14.271 31.867 31.867 31.867 16.897 0 30.719-13.146 31.788-29.767l0.010-0.103c-0.244-6.025-1.773-11.645-4.316-16.666l0.103 0.228h-0.042zM424.842 571.641c-6.015-10.315-16.952-17.186-29.509-17.379l-0.027-0.001c-16.718 1.081-29.854 14.903-29.854 31.799 0 17.592 14.271 31.867 31.867 31.867 16.897 0 30.719-13.146 31.788-29.767l0.010-0.103c-0.244-6.025-1.773-11.645-4.316-16.666l0.103 0.228h-0.042zM957.515 678.457c-49.399-0.215-89.385-40.213-89.579-89.609v-0.016c-0.279-16.519 4.11-32.809 12.684-46.914l-161.396-156.24c-12.511 7.104-27.473 11.29-43.416 11.29-49.24 0-89.153-39.918-89.153-89.153 0-0.173 0.001-0.345 0.003-0.517v0.024c0.941-14.209 5.495-27.978 13.165-40.011-5.355-4.736 13.827 0 9.473-7.766-11.353-11.841 13.445 3.591 11.319-9.473-10.315-25.704 53.116 2.369 17.938-20.548 11.501-6.768 24.521-10.554 37.876-11.039 49.1 0.33 88.894 39.693 89.957 88.576l0.004 0.103c-0.132 13.492-3.23 26.218-8.662 37.616l0.234-0.537 165.71 161.396c10.895-4.354 22.492-6.621 34.235-6.583 0.042 0 0.077 0 0.128 0 33.688 0 62.98 18.784 77.993 46.443l0.233 0.473c7.627 13.258 11.7 28.314 11.739 43.647-0.646 49.187-40.671 88.817-89.947 88.817-0.189 0-0.367-0.001-0.561-0.004h0.028zM705.594 290.889c-6.015-10.315-16.952-17.186-29.509-17.379l-0.027-0.001c-18.382 0.369-33.143 15.368-33.143 33.802 0 0.004 0 0.010 0 0.016v-0.001c2.148 16.778 16.346 29.622 33.547 29.622s31.383-12.83 33.52-29.449l0.016-0.164c-0.302-6.047-1.897-11.654-4.518-16.652l0.103 0.215zM987.11 572.405c-6.015-10.315-16.952-17.186-29.509-17.379l-0.027-0.001c-18.382 0.369-33.143 15.368-33.143 33.802 0 0.004 0 0.010 0 0.016v-0.001c2.148 16.778 16.346 29.622 33.547 29.622s31.383-12.83 33.52-29.449l0.016-0.164c-0.244-6.025-1.773-11.645-4.316-16.666l0.103 0.228h-0.189zM746.878 271.526c9.622 12.738 15.397 28.846 15.397 46.303 0 12.972-3.187 25.19-8.842 35.925l0.204-0.417c-15.801 26.381-44.238 43.762-76.73 43.762-15.167 0-29.457-3.796-41.97-10.477l0.475 0.237-159.97 163.763c5.874 11.98 8.904 25.145 8.904 38.486 0 0.042 0 0.075 0 0.128 0 49.505-40.126 89.616-89.616 89.616s-89.616-40.126-89.616-89.616c0-16.904 4.691-32.716 12.825-46.215l-0.22 0.401c8.288-13.777 20.129-25.092 34.326-32.668 13.258-7.718 28.35-11.841 43.705-11.98 15.381 0.107 29.767 4.284 42.171 11.488l-0.411-0.215 159.549-163.521c-5.961-11.213-9.474-24.515-9.474-38.626 0-0.122 0-0.244 0.001-0.362v0.016c0.33-49.1 39.693-88.894 88.576-89.957l0.103-0.004c12.886 0.475 25.565 3.738 37.068 9.473 1.513-1.707-6.101 14.768 0 11.179 15.195-14.069 8.525 36.025 22.578 26.185 46.776-34.326-39.111 66.418 10.981 7.105zM378.352 559.521c-10.315 6.015-17.186 16.952-17.379 29.509l-0.001 0.027c0.369 18.382 15.368 33.143 33.802 33.143 0.004 0 0.010 0 0.016 0h-0.001c16.778-2.148 29.622-16.346 29.622-33.547s-12.83-31.383-29.449-33.52l-0.164-0.016c-6.025 0.244-11.645 1.773-16.666 4.316l0.228-0.103v0.189zM659.859 278.014c-10.315 6.015-17.186 16.952-17.379 29.509l-0.001 0.027c0.369 18.382 15.368 33.143 33.802 33.143 0.004 0 0.010 0 0.016 0h-0.001c16.778-2.148 29.622-16.346 29.622-33.547s-12.83-31.383-29.449-33.52l-0.164-0.016c-6.025 0.244-11.645 1.773-16.666 4.316l0.228-0.103v0.189z" />
-<glyph unicode="&#xe931;" glyph-name="polygon-clip" horiz-adv-x="1184" d="M518.529 644.035c-3.389 0-5.081 0-8.466 1.692l-86.363 50.803c-5.081 3.389-8.466 8.466-8.466 15.242s3.389 11.853 8.466 15.242l196.437 115.151c40.643 23.707 91.442 25.399 133.782 5.080l33.866-16.934c5.080-3.389 8.466-8.466 8.466-15.242s-3.389-11.853-8.466-15.242l-262.466-152.407c-1.692-1.692-3.389-3.389-6.773-3.389h-0.010zM196.505 517.035c0-9.351-7.581-16.934-16.934-16.934s-16.934 7.581-16.934 16.934c0 9.351 7.581 16.934 16.934 16.934s16.934-7.581 16.934-16.934zM440.468 625.42l-86.363 50.802c-5.081 3.389-11.853 3.389-16.934 0l-77.898-45.722c-13.546-8.466-30.48-10.161-44.030-5.080-32.177 10.161-66.045 6.772-93.135-10.162-54.191-32.176-72.818-101.605-42.333-155.791 15.242-25.399 38.949-45.722 67.736-52.494 10.162-3.389 20.324-3.389 28.788-3.389 20.323 0 38.949 5.081 57.575 15.242 32.176 18.626 54.191 52.495 57.575 91.444l149.019 86.363c5.081 3.389 8.466 8.466 8.466 15.242s-3.389 10.161-8.466 13.546zM179.682 467.931c-27.096 0-49.11 22.015-49.11 49.111s22.015 49.11 49.11 49.11c27.096 0 49.11-22.015 49.11-49.11s-22.015-49.111-49.11-49.111zM196.505 804.92c0-9.351-7.581-16.934-16.934-16.934s-16.934 7.581-16.934 16.934c0 9.351 7.581 16.934 16.934 16.934s16.934-7.581 16.934-16.934zM787.627 523.813l-496.178 289.562c-3.389 37.258-23.706 72.818-57.575 91.444-25.399 15.242-55.883 18.626-86.363 11.853-28.787-8.466-54.191-27.096-67.736-52.494-30.48-54.191-11.853-125.312 42.333-155.791 27.096-16.934 60.964-20.323 91.444-10.161 15.242 5.080 30.479 3.389 44.029-5.081l362.391-211.685c22.015-13.546 45.722-18.626 71.124-18.626 22.020 0 42.336 5.080 62.658 15.242l33.866 16.934c5.080 3.389 8.466 8.466 8.466 15.242 0 3.389-3.389 10.161-8.466 13.546l0.013 0.020zM179.704 755.821c-27.096 0-49.111 22.015-49.111 49.11s22.015 49.111 49.111 49.111c27.096 0 49.11-22.015 49.11-49.111s-22.015-49.11-49.11-49.11zM430.321 644.030c-1.692 0-5.080 0-6.772 1.692s-3.389 1.692-5.081 3.389c-1.692 1.692-3.389 3.389-3.389 5.080s-1.692 5.081-1.692 6.773c0 1.692 0 5.080 1.692 6.773s1.692 3.389 3.389 5.080c1.692 1.692 3.389 3.389 5.081 3.389 3.389 1.692 6.772 1.692 10.161 1.692 1.692 0 1.692 0 3.389-1.692 1.692 0 1.692 0 3.389-1.692 1.692 0 1.692-1.692 3.389-1.692 3.389-3.389 5.081-6.773 5.081-11.853s-1.692-8.466-5.081-11.853c-1.692-1.692-3.389-3.389-5.081-3.389-3.389-1.692-6.772-1.692-8.466-1.692zM154.108 291.802c-17.143 0-28.576 6.772-28.576 16.933v50.805c0 10.161 11.428 16.934 28.576 16.934s28.575-6.773 28.575-16.934v-50.805c0-8.466-14.288-16.933-28.575-16.933zM154.108 134.331c-17.143 0-28.576 6.772-28.576 16.933v77.899c0 10.161 11.428 16.933 28.576 16.933s28.575-6.772 28.575-16.933v-77.899c0-8.466-14.288-16.933-28.575-16.933zM216.968-23.999h-68.579c-13.717 0-22.862 9.145-22.862 22.862v68.577c0 13.717 9.144 22.862 22.862 22.862s22.861-9.145 22.861-22.862v-45.719h45.718c13.717 0 22.862-9.145 22.862-22.859 0-13.717-11.428-22.862-22.862-22.862zM951.706-17.653h-94.832c-10.161 0-16.933 11.427-16.933 28.575s6.772 28.575 16.933 28.575h94.832c10.161 0 16.939-11.427 16.939-28.575s-6.779-28.575-16.939-28.575zM762.046-17.653h-94.832c-10.161 0-16.932 11.427-16.932 28.575s6.772 28.575 16.932 28.575h94.832c10.161 0 16.933-11.427 16.933-28.575s-8.466-28.575-16.933-28.575zM572.383-17.653h-94.832c-10.161 0-16.934 11.427-16.934 28.575s6.773 28.575 16.934 28.575h94.832c10.161 0 16.934-11.427 16.934-28.575s-8.466-28.575-16.934-28.575zM382.724-17.653h-94.833c-10.161 0-16.934 11.427-16.934 28.575s6.773 28.575 16.934 28.575h94.833c10.161 0 16.934-11.427 16.934-28.575s-8.466-28.575-16.934-28.575zM1095.98-23.999h-68.584c-13.714 0-22.859 9.145-22.859 22.862 0 13.714 9.145 22.859 22.859 22.859h45.719v45.719c0 13.717 9.145 22.862 22.862 22.862 13.714 0 22.859-9.145 22.859-22.862v-68.577c0-13.717-9.145-22.862-22.859-22.862zM1090.27 177.073c-17.139 0-28.575 6.53-28.575 16.324v102.87c0 9.794 11.433 16.324 28.575 16.324s28.582-6.53 28.582-16.324v-102.87c0-8.161-11.433-16.324-28.582-16.324zM1090.27 384.432c-17.139 0-28.575 6.53-28.575 16.328v102.867c0 9.797 11.433 16.328 28.575 16.328s28.582-6.53 28.582-16.328v-102.867c0-8.166-11.433-16.328-28.582-16.328zM1095.98 563.624c-13.717 0-22.862 9.144-22.862 22.862v45.718h-45.719c-13.714 0-22.859 9.144-22.859 22.862s9.145 22.861 22.859 22.861h68.584c13.714 0 22.859-9.144 22.859-22.861v-68.58c0-11.428-9.145-22.862-22.859-22.862zM929.98 620.752h-116.846c-10.167 0-16.939 11.428-16.939 28.576s6.772 28.576 16.939 28.576h116.846c10.161 0 16.933-11.429 16.933-28.576s-6.772-28.576-16.933-28.576zM697.993 620.752h-50.802c-10.162 0-16.934 11.428-16.934 28.576s6.772 28.576 16.934 28.576h50.802c10.161 0 16.933-11.429 16.933-28.576s-6.772-28.576-16.933-28.576z" />
-<glyph unicode="&#xe932;" glyph-name="keyboard" horiz-adv-x="1088" d="M965.569 829.032c67.618 0 122.432-54.815 122.432-122.432v0-517.202c0-67.618-54.815-122.432-122.432-122.432v0h-843.139c-67.618 0-122.432 54.815-122.432 122.432v517.202c0 67.618 54.815 122.432 122.432 122.432v0h843.139zM965.569 747.411h-843.139c-22.538 0-40.811-18.273-40.811-40.811v0-517.202c0-22.527 18.284-40.811 40.811-40.811h843.139c22.538 0 40.811 18.273 40.811 40.811v0 517.202c0 22.538-18.273 40.811-40.811 40.811v0zM258.464 312.103h571.344c22.533-0.007 40.799-18.276 40.799-40.811 0-20.577-15.23-37.596-35.029-40.404l-0.218-0.027-5.552-0.381h-571.344c-22.533 0.007-40.799 18.276-40.799 40.811 0 20.577 15.23 37.596 35.029 40.404l0.218 0.027 5.552 0.381zM788.998 502.549c30.052 0 54.413-24.361 54.413-54.413s-24.361-54.413-54.413-54.413v0c-30.052 0-54.413 24.361-54.413 54.413s24.361 54.413 54.413 54.413v0zM462.787 502.549c30.052 0 54.413-24.361 54.413-54.413s-24.361-54.413-54.413-54.413v0c-30.052 0-54.413 24.361-54.413 54.413s24.361 54.413 54.413 54.413v0zM299.547 502.549c30.052 0 54.413-24.361 54.413-54.413s-24.361-54.413-54.413-54.413v0c-30.052 0-54.413 24.361-54.413 54.413s24.361 54.413 54.413 54.413v0zM626.028 502.549c30.052 0 54.413-24.361 54.413-54.413s-24.361-54.413-54.413-54.413v0c-30.052 0-54.413 24.361-54.413 54.413s24.361 54.413 54.413 54.413v0zM217.653 665.793c30.052 0 54.413-24.361 54.413-54.413s-24.361-54.413-54.413-54.413v0c-30.052 0-54.413 24.361-54.413 54.413s24.361 54.413 54.413 54.413v0zM380.624 665.793c30.052 0 54.413-24.361 54.413-54.413s-24.361-54.413-54.413-54.413v0c-30.052 0-54.413 24.361-54.413 54.413s24.361 54.413 54.413 54.413v0zM543.864 665.793c30.052 0 54.413-24.361 54.413-54.413s-24.361-54.413-54.413-54.413v0c-30.052 0-54.413 24.361-54.413 54.413s24.361 54.413 54.413 54.413v0zM707.107 665.793c30.052 0 54.413-24.361 54.413-54.413s-24.361-54.413-54.413-54.413v0c-30.052 0-54.413 24.361-54.413 54.413s24.361 54.413 54.413 54.413v0zM870.347 665.793c30.052 0 54.413-24.361 54.413-54.413s-24.361-54.413-54.413-54.413v0c-30.052 0-54.413 24.361-54.413 54.413s24.361 54.413 54.413 54.413v0z" />
-<glyph unicode="&#xe933;" glyph-name="command" d="M749.022 365.956h-100.282v164.094h100.282c85.593 0 154.978 69.385 154.978 154.978s-69.385 154.978-154.978 154.978c-85.593 0-154.978-69.385-154.978-154.978v0-100.282h-164.094v100.282c0 85.593-69.385 154.978-154.978 154.978s-154.978-69.385-154.978-154.978c0-85.593 69.385-154.978 154.978-154.978v0h100.282v-164.094h-100.282c-85.593 0-154.978-69.385-154.978-154.978s69.385-154.978 154.978-154.978c85.593 0 154.978 69.385 154.978 154.978v0 100.282h164.094v-100.282c0-85.593 69.385-154.978 154.978-154.978s154.978 69.385 154.978 154.978c0 85.593-69.385 154.978-154.978 154.978v0zM648.746 685.022c0 55.381 44.895 100.282 100.282 100.282s100.282-44.895 100.282-100.282c0-55.381-44.895-100.282-100.282-100.282v0h-100.282zM174.696 685.022c0 55.381 44.895 100.282 100.282 100.282s100.282-44.895 100.282-100.282v0-100.282h-100.282c-55.278 0.256-100.020 44.998-100.282 100.254v0.028zM375.254 210.978c0-55.381-44.895-100.282-100.282-100.282s-100.282 44.895-100.282 100.282c0 55.381 44.895 100.282 100.282 100.282v0h100.282zM429.956 530.044h164.094v-164.094h-164.094zM749.022 110.696c-55.278 0.256-100.020 44.998-100.282 100.254v100.304h100.282c55.381 0 100.282-44.895 100.282-100.282s-44.895-100.282-100.282-100.282v0z" />
-<glyph unicode="&#xe934;" glyph-name="polygon-hollow" horiz-adv-x="1152" d="M150.991 857.599h531.21v-102.401h106.24v204.803h-743.692v-716.806h212.483v102.399h-106.241v512.006zM894.707 652.781v-102.401h106.24v-512.006h-531.206v102.4h-106.241v-204.8h743.687v716.807h-212.48zM788.467 652.781h-424.967v-409.607h424.967v409.607zM682.227 345.578h-212.486v204.803h212.486v-204.803z" />
-<glyph unicode="&#xe935;" glyph-name="cancel-hollow" horiz-adv-x="1084" d="M872.376 759.542c0 12.55-4.759 24.992-14.173 34.405-18.932 18.933-49.875 18.933-68.807 0l-563.458-563.457c-9.412-9.415-14.173-21.962-14.173-34.406 0-12.439 4.653-24.883 14.173-34.4 18.933-18.938 49.876-18.938 68.809 0l563.455 563.454c9.415 9.412 14.173 21.962 14.173 34.405zM536.986 472.080c13.416 14.497 28.887 25.642 46.197 33.431l-288.436 288.436c-18.933 18.933-49.876 18.933-68.809 0-9.412-9.412-14.173-21.855-14.173-34.405 0-12.442 4.761-24.992 14.173-34.405l285.082-285.083c6.925 11.685 15.58 22.288 25.966 32.025zM612.412 77.161c-23.045-4-46.522-6.054-70.324-6.054-54.853 0-108.083 10.71-158.175 31.913-48.361 20.45-91.854 49.766-129.179 87.203-37.326 37.328-66.646 80.818-87.202 129.289-21.205 50.091-31.916 103.321-31.916 158.174s10.711 108.083 31.916 158.175c20.448 48.361 49.768 91.854 87.202 129.288 37.325 37.326 80.818 66.646 129.179 87.202 50.092 21.205 103.322 31.916 158.175 31.916s108.080-10.711 158.177-31.916c48.357-20.448 91.853-49.768 129.283-87.202 37.328-37.325 66.65-80.818 87.203-129.288 21.209-50.092 31.919-103.322 31.919-158.175 0-23.802-2.054-47.171-6.060-70.216h76.601c3.349 22.936 5.084 46.414 5.084 70.324 0 266.257-215.95 482.206-482.207 482.206s-482.206-215.948-482.206-482.206c0-266.26 215.949-482.203 482.206-482.203 23.91 0 47.388 1.729 70.324 5.084v76.487zM978.745 227.876l-186.735-186.741c-16.878-16.878-44.357-16.878-61.235 0s-16.878 44.357 0 61.235l186.735 186.741c16.878 16.878 44.357 16.878 61.235 0 16.77-16.878 16.77-44.466 0-61.235zM792.010 289.099l186.741-186.735c16.878-16.878 16.878-44.357 0-61.235s-44.363-16.878-61.235 0l-186.741 186.735c-16.878 16.878-16.878 44.357 0 61.235 16.878 16.77 44.466 16.77 61.235 0z" />
-<glyph unicode="&#xe936;" glyph-name="interactive" horiz-adv-x="964" d="M873.526 426.933c-23.202 107.298-99.606 213.771-163.547 195.279-22.88-6.602-40.46-18.692-51.794-35.374-20.615 9.56-41.719 10.483-62.369 1.375-15.136-6.499-27.787-17.675-36.119-31.87-23.78 12.028-51.114 11.771-79.761-1.671-6.093-2.815-11.876-6.263-17.254-10.282-69.833 98.686-126.887 143.222-178.309 131.564-72.823-16.482-72.823-79.994-17.575-163.172l106.063-164.004c-58.201 10.942-100.294 1.545-125.247-31.792-40.801-54.558 2.381-104.946 102.646-150.055l193.785-86.195c6.929-2.949 14.742-3.053 21.751-0.289s12.65 8.156 15.715 15.040c3.059 6.875 3.303 14.685 0.658 21.745s-7.952 12.789-14.786 15.967l-193.671 86.139c-39.081 17.575-64.888 34.056-76.778 47.95-6.896 8.041-7.097 10.285-3.329 15.311 14.183 18.954 58.256 18.954 135.098-9.711 25.896-9.673 49.156 19.262 34.136 42.498l-148.020 228.87c-36.781 55.387-36.781 71.383-17.775 75.687 25.187 5.689 78.153-44.332 148.532-153.045 5.289-12.461 13.529-25.438 24.584-38.559 22.851-27.166 64.982 3.185 46.46 33.478-6.771 11.092-13.662 22.103-20.669 33.051 0.49 3.354 3.48 5.515 8.354 7.807 20.162 9.447 32.73 5.859 46.83-14.070 15.677-22.108 50.448-12.198 52.089 14.875 1.143 19.007 6.398 28.076 15.738 32.19 8.041 3.53 18.030 0.49 33.626-14.359 3.91-3.731 8.802-6.272 14.086-7.349 5.293-1.074 10.791-0.641 15.841 1.269s9.472 5.194 12.748 9.5c3.266 4.307 5.261 9.434 5.738 14.819 1.319 14.842 8.103 22.65 24.958 27.536 17.688 5.113 74.596-74.198 91.48-152.266 12.148-56.166 12.148-122.921-0.289-200.213-1.207-7.525 0.619-15.213 5.088-21.39 4.463-6.168 11.196-10.314 18.719-11.52 7.525-1.207 15.213 0.619 21.381 5.088s10.314 11.196 11.52 18.719c13.467 83.903 13.467 157.718-0.314 221.434zM292.381 103.457h-122.519c-17.857 0-32.529 14.899-32.529 33.503v622.096c0 18.605 14.672 33.503 32.529 33.503h336.89c17.888 0 32.56-14.904 32.56-33.503 0-7.618 3.027-14.914 8.404-20.305s12.689-8.406 20.305-8.406c7.618 0 14.914 3.027 20.308 8.406 5.385 5.389 8.404 12.688 8.404 20.305 0 50.136-40.164 90.938-89.958 90.938h-336.922c-49.784 0-89.958-40.801-89.958-90.938v-622.131c0-50.109 40.166-90.912 89.958-90.912h122.519c7.618 0 14.914 3.027 20.305 8.407s8.406 12.688 8.406 20.31c0 7.613-3.027 14.911-8.406 20.301s-12.688 8.407-20.305 8.407z" />
-</font></defs></svg>
\ No newline at end of file
diff --git a/frontend/image-tool/public/iconfont/fonts/icomoon.ttf b/frontend/image-tool/public/iconfont/fonts/icomoon.ttf
deleted file mode 100644
index 5d00e908..00000000
Binary files a/frontend/image-tool/public/iconfont/fonts/icomoon.ttf and /dev/null differ
diff --git a/frontend/image-tool/public/iconfont/fonts/icomoon.woff b/frontend/image-tool/public/iconfont/fonts/icomoon.woff
deleted file mode 100644
index 4d5cdbca..00000000
Binary files a/frontend/image-tool/public/iconfont/fonts/icomoon.woff and /dev/null differ
diff --git a/frontend/image-tool/public/iconfont/iconfont.css b/frontend/image-tool/public/iconfont/iconfont.css
new file mode 100644
index 00000000..501ccba3
--- /dev/null
+++ b/frontend/image-tool/public/iconfont/iconfont.css
@@ -0,0 +1,183 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 4374613 */
+  src: url('iconfont.woff2?t=1704191662778') format('woff2'),
+       url('iconfont.woff?t=1704191662778') format('woff'),
+       url('iconfont.ttf?t=1704191662778') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-cube:before {
+  content: "\e736";
+}
+
+.icon-play:before {
+  content: "\e741";
+}
+
+.icon-replay:before {
+  content: "\e743";
+}
+
+.icon-backup:before {
+  content: "\e745";
+}
+
+.icon-forward:before {
+  content: "\e746";
+}
+
+.icon-Frame23:before {
+  content: "\e750";
+}
+
+.icon-crop-non-first:before {
+  content: "\e769";
+}
+
+.icon-crop-first:before {
+  content: "\e76a";
+}
+
+.icon-transform:before {
+  content: "\e621";
+}
+
+.icon-point:before {
+  content: "\e60d";
+}
+
+.icon-reset:before {
+  content: "\e61a";
+}
+
+.icon-rotate90:before {
+  content: "\e6de";
+}
+
+.icon-rotate270:before {
+  content: "\e6e0";
+}
+
+.icon-information:before {
+  content: "\e6fe";
+}
+
+.icon-hollow:before {
+  content: "\e620";
+}
+
+.icon-cancel-hollow:before {
+  content: "\e752";
+}
+
+.icon-hotkey:before {
+  content: "\e767";
+}
+
+.icon-rect:before {
+  content: "\e67c";
+}
+
+.icon-save:before {
+  content: "\e703";
+}
+
+.icon-help:before {
+  content: "\e704";
+}
+
+.icon-fullscreen:before {
+  content: "\e705";
+}
+
+.icon-exitfullscreen:before {
+  content: "\e706";
+}
+
+.icon-info:before {
+  content: "\e70b";
+}
+
+.icon-setting:before {
+  content: "\e70c";
+}
+
+.icon-toleft:before {
+  content: "\e712";
+}
+
+.icon-toright:before {
+  content: "\e713";
+}
+
+.icon-remind:before {
+  content: "\e71a";
+}
+
+.icon-view:before {
+  content: "\e71f";
+}
+
+.icon-delete:before {
+  content: "\e721";
+}
+
+.icon-editlabel:before {
+  content: "\e722";
+}
+
+.icon-filter:before {
+  content: "\e724";
+}
+
+.icon-more:before {
+  content: "\e72d";
+}
+
+.icon-hidden:before {
+  content: "\e72f";
+}
+
+.icon-left:before {
+  content: "\e730";
+}
+
+.icon-right:before {
+  content: "\e731";
+}
+
+.icon-loading:before {
+  content: "\e737";
+}
+
+.icon-model:before {
+  content: "\e738";
+}
+
+.icon-arrow:before {
+  content: "\e751";
+}
+
+.icon-ai:before {
+  content: "\e764";
+}
+
+.icon-smart:before {
+  content: "\e766";
+}
+
+.icon-polygon:before {
+  content: "\e601";
+}
+
+.icon-polyline:before {
+  content: "\e602";
+}
+
diff --git a/frontend/image-tool/public/iconfont/iconfont.js b/frontend/image-tool/public/iconfont/iconfont.js
new file mode 100644
index 00000000..6769921b
--- /dev/null
+++ b/frontend/image-tool/public/iconfont/iconfont.js
@@ -0,0 +1 @@
+window._iconfont_svg_string_4374613='<svg><symbol id="icon-cube" viewBox="0 0 1109 1024"><path d="M1108.660256 572.841481a69.355193 69.355193 0 0 0-38.303176-62.018728L851.542724 401.372921a34.720251 34.720251 0 0 1-19.108934-31.052017v-226.065514c0-28.834016-17.914626-54.76757-45.042487-64.833883L595.448886 7.336466a115.16545 115.16545 0 0 0-81.042354 0l-191.345263 72.51158a69.440501 69.440501 0 0 0-44.786564 64.833883V369.382519a34.720251 34.720251 0 0 1-19.108934 30.96671L38.304029 510.737445a69.355193 69.355193 0 0 0-38.303176 62.274651l0.511847 244.918525c0 25.165784 13.649239 48.284181 35.573328 60.568496l242.103369 135.042154 1.279616 0.682462c20.473858 11.431237 45.383718 11.34593 65.772268-0.170616l2.218001-1.194308 189.98034-109.193908a34.37902 34.37902 0 0 1 34.634943 0.170615l191.259955 111.070679a67.051884 67.051884 0 0 0 65.942884 0.341231l3.241694-1.876771 240.823753-133.762537A69.525809 69.525809 0 0 0 1109.001486 818.783698l-0.34123-245.942217z m-345.496352-203.970809a34.634943 34.634943 0 0 1-19.194241 31.052018l-142.122697 71.231964a8.70139 8.70139 0 0 1-12.540238-7.763005v-176.587024c0-31.563864 19.108934-59.886034 48.284182-71.658502l124.890532-49.905029 0.597155 203.629578zM278.360012 630.338898l-0.255923-0.170615-161.23163-81.298277 161.23163-80.615816 18.170549-9.127928a34.293712 34.293712 0 0 1 31.563864 0.341231l19.535473 10.236929 140.331234 69.611117a8.616082 8.616082 0 0 1 0.255923 15.355393l-140.587157 75.753274a76.606351 76.606351 0 0 1-69.09927-0.085308z m222.482589 220.94705l-153.383319 76.606351-0.853077-177.440101a77.288813 77.288813 0 0 1 42.397947-69.184578l117.724683-59.118265a8.616082 8.616082 0 0 1 12.45493 7.677697l0.853078 190.406878a34.976174 34.976174 0 0 1-19.194242 31.137325z m26.78663-696.196475l-111.411909-41.800793 138.454463-52.037722 138.454464 52.037722-111.41191 41.800793a76.179813 76.179813 0 0 1-54.085108 0z m233.316672 476.017195l-139.73408-76.350428a8.70139 8.70139 0 0 1 0.341231-15.355394l141.61085-70.805425 17.488087-9.127928a34.293712 34.293712 0 0 1 31.478557-0.341231l20.217934 10.066314 159.184245 79.762737-158.075244 83.004432a76.947582 76.947582 0 0 1-72.51158-0.853077z m278.359159 172.321637c0 12.796161-7.080543 24.568629-18.426472 30.710787l-188.530108 99.895364L831.751328 750.708121a76.862275 76.862275 0 0 1 42.568563-69.09927l164.985171-82.748509v204.567963z"  ></path></symbol><symbol id="icon-play" viewBox="0 0 1126 1024"><path d="M572.669834 0C468.19905 0 366.082825 29.995041 279.168866 86.24854a515.69973 515.69973 0 0 0-194.507094 229.723116 497.119184 497.119184 0 0 0-30.097414 295.753155 507.151655 507.151655 0 0 0 144.600669 262.072716 533.717229 533.717229 0 0 0 270.467233 140.096294c102.474527 19.757826 208.634451 9.622983 305.171393-29.176064a525.015596 525.015596 0 0 0 237.093911-188.467137A500.599837 500.599837 0 0 0 1100.910152 511.860774c0-135.745477-55.639266-265.962858-154.735512-361.936753C847.129581 53.950126 712.766128 0 572.669834 0z m221.123854 545.797143l-300.052786 191.94779a43.149863 43.149863 0 0 1-59.017547-13.257194 40.027513 40.027513 0 0 1-6.142329-20.730361v-383.89558a40.027513 40.027513 0 0 1 6.142329-20.730362 41.716653 41.716653 0 0 1 16.123615-14.843962 43.354608 43.354608 0 0 1 42.893932 1.586768l300.155158 191.845418a41.460723 41.460723 0 0 1 13.717869 14.741591 39.92514 39.92514 0 0 1 0 38.49193 41.460723 41.460723 0 0 1-13.717869 14.74159l-0.051186 0.102372z"  ></path></symbol><symbol id="icon-replay" viewBox="0 0 1097 1024"><path d="M872.521143 412.672l-75.117714-43.885714a48.566857 48.566857 0 0 0-65.243429 15.725714 45.129143 45.129143 0 0 0 16.237714 63.268571l207.579429 120.832 124.708571-201.142857a44.836571 44.836571 0 0 0 5.412572-34.816 46.226286 46.226286 0 0 0-21.650286-28.379428 48.859429 48.859429 0 0 0-36.059429-5.193143 47.469714 47.469714 0 0 0-29.257142 20.992l-37.302858 60.123428a461.238857 461.238857 0 0 0-173.860571-239.469714A485.961143 485.961143 0 0 0 500.224 51.2a485.302857 485.302857 0 0 0-285.257143 96.548571A460.288 460.288 0 0 0 47.177143 391.314286a447.414857 447.414857 0 0 0 17.627428 292.278857 465.042286 465.042286 0 0 0 195.876572 223.085714 487.936 487.936 0 0 0 294.985143 63.561143 482.523429 482.523429 0 0 0 274.944-121.417143 45.275429 45.275429 0 0 0 2.340571-65.097143 48.493714 48.493714 0 0 0-67.218286-2.194285 390.363429 390.363429 0 0 1-457.435428 45.494857 371.931429 371.931429 0 0 1-156.306286-179.931429 357.961143 357.961143 0 0 1-12.434286-234.715428 368.64 368.64 0 0 1 136.557715-194.267429A388.534857 388.534857 0 0 1 506.148571 143.213714c83.017143 0 163.84 26.331429 229.888 74.971429a368.64 368.64 0 0 1 136.484572 194.413714z"  ></path><path d="M723.236571 573.44L423.716571 727.259429c-21.650286 11.702857-49.956571-2.925714-49.956571-24.868572V394.752c0-21.942857 28.306286-36.571429 49.956571-24.868571L723.236571 523.702857c21.650286 10.24 21.650286 39.497143 0 49.737143z"  ></path></symbol><symbol id="icon-backup" viewBox="0 0 1194 1024"><path d="M22.101333 468.224L537.088 77.909333a58.538667 58.538667 0 0 1 84.309333 14.336 54.442667 54.442667 0 0 1 8.704 29.610667v780.544a54.442667 54.442667 0 0 1-8.704 29.525333 56.917333 56.917333 0 0 1-23.637333 20.650667 59.050667 59.050667 0 0 1-60.586667-6.229333L22.016 556.032A56.064 56.064 0 0 1 0 512a54.272 54.272 0 0 1 22.101333-43.861333z"  ></path><path d="M537.088 468.224L1052.16 77.909333a58.538667 58.538667 0 0 1 84.309333 14.336 54.442667 54.442667 0 0 1 8.704 29.610667v780.544a54.442667 54.442667 0 0 1-8.704 29.525333 56.832 56.832 0 0 1-23.637333 20.650667 59.050667 59.050667 0 0 1-60.586667-6.229333L537.002667 556.032A56.064 56.064 0 0 1 514.986667 512a54.272 54.272 0 0 1 22.186666-43.861333z"  ></path></symbol><symbol id="icon-forward" viewBox="0 0 1194 1024"><path d="M1141.504 468.138667L626.517333 77.909333a58.538667 58.538667 0 0 0-84.309333 14.336 54.442667 54.442667 0 0 0-8.704 29.610667v780.544c0 10.410667 2.986667 20.650667 8.704 29.525333a56.917333 56.917333 0 0 0 23.637333 20.650667 59.050667 59.050667 0 0 0 60.672-6.229333l514.986667-390.229334a56.064 56.064 0 0 0 22.186667-44.032 54.272 54.272 0 0 0-22.186667-43.946666z"  ></path><path d="M626.858667 468.138667L111.872 77.909333a58.538667 58.538667 0 0 0-84.309333 14.336 54.442667 54.442667 0 0 0-8.704 29.610667v780.544c0 10.410667 2.986667 20.650667 8.704 29.525333a56.917333 56.917333 0 0 0 23.637333 20.650667 59.050667 59.050667 0 0 0 60.672-6.229333l514.986667-390.229334A56.149333 56.149333 0 0 0 649.045333 512a54.272 54.272 0 0 0-22.186666-43.946667z"  ></path></symbol><symbol id="icon-Frame23" viewBox="0 0 1024 1024"><path d="M512 85.357714c-235.666286 0-426.642286 191.012571-426.642286 426.678857S276.333714 938.678857 512 938.678857s426.678857-190.976 426.678857-426.642286S747.666286 85.357714 512 85.357714z m-50.688 587.300572c0 28.525714-20.845714 51.785143-46.336 51.785143-25.526857 0-46.372571-23.332571-46.372571-51.785143V351.378286c0-28.525714 20.845714-51.785143 46.372571-51.785143 25.490286 0 46.336 23.369143 46.336 51.785143v321.28z m188.342857 0c0 28.525714-20.845714 51.785143-46.372571 51.785143-25.526857 0-46.336-23.332571-46.336-51.785143V351.378286c0-28.525714 20.845714-51.785143 46.336-51.785143 25.526857 0 46.336 23.369143 46.336 51.785143v321.28z"  ></path></symbol><symbol id="icon-crop-non-first" viewBox="0 0 1024 1024"><path d="M440.548466 261.871633c-3.263796 0-4.927692 0-8.255484-1.5999l-83.898757-48.188988a16.766952 16.766952 0 0 1 0-28.926192l190.900069-109.305169a142.711081 142.711081 0 0 1 129.975877-4.7997l32.893944 15.999a16.766952 16.766952 0 0 1 0 28.990188l-255.024061 144.630961c-1.663896 1.5999-3.263796 3.1998-6.591588 3.1998zM127.736016 382.440097a16.254984 16.254984 0 0 1-16.446972 15.999001 16.254984 16.254984 0 0 1-16.510968-15.999001c0-8.895444 7.423536-16.062996 16.510968-16.062996 9.087432 0 16.446972 7.167552 16.446972 15.999z"  ></path><path d="M364.777201 279.662521l-83.962752-48.252984a15.231048 15.231048 0 0 0-16.446972 0l-75.707268 43.389288a50.748828 50.748828 0 0 1-42.813324 4.7997c-31.230048-9.5994-64.187988-6.3996-90.490345 9.5994C2.687832 319.852009-15.423036 385.76789 14.207112 437.092682c14.783076 24.126492 37.821636 43.389288 65.851884 49.852884 9.855384 3.1998 19.710768 3.1998 27.966252 3.1998 19.710768 0 37.821636-4.7997 55.932505-14.463096 31.294044-17.662896 52.668708-49.788888 55.932504-86.778576L364.777201 306.988813a16.766952 16.766952 0 0 0 8.255484-14.527092c0-6.3996-3.327792-9.5994-8.255484-12.7992zM111.35304 429.029186a47.229048 47.229048 0 0 1-47.805012-46.653085c0-25.662396 21.43866-46.589088 47.741016-46.589088 26.366352 0 47.741016 20.926692 47.741017 46.589088a47.229048 47.229048 0 0 1-47.741017 46.653085zM127.736016 109.177176a16.254984 16.254984 0 0 1-16.446972 16.062996 16.254984 16.254984 0 0 1-16.510968-15.999c0-8.95944 7.423536-16.126992 16.510968-16.126992 9.087432 0 16.446972 7.231548 16.446972 16.062996z"  ></path><path d="M702.036123 376.040497L219.954253 101.11368c-3.263796-35.325792-23.03856-69.11568-55.932504-86.778576C139.255297 0 109.625148-3.1998 80.058996 3.1998 52.028748 11.1993 27.390288 28.862196 14.207112 52.988688a108.025248 108.025248 0 0 0 41.149428 147.830761c26.302356 16.062996 59.260296 19.326792 88.826449 9.663396a50.108868 50.108868 0 0 1 42.813324 4.7997l352.169989 200.947441c21.374664 12.7992 44.413224 17.662896 69.11568 17.662896 21.374664 0 41.149428-4.7997 60.860197-14.463096l32.893944-16.062996a16.766952 16.766952 0 0 0 8.255484-14.463096c0-3.1998-3.263796-9.663396-8.191488-12.863197zM111.35304 155.830261a47.229048 47.229048 0 0 1-47.741016-46.589089c0-25.726392 21.374664-46.653084 47.67702-46.653084 26.366352 0 47.741016 20.926692 47.741017 46.653084a47.229048 47.229048 0 0 1-47.741017 46.589089z"  ></path><path d="M354.857821 261.935629c-1.5999 0-4.927692 0-6.591588-1.5999-1.5999-1.5999-3.263796-1.5999-4.927692-3.1998-1.5999-1.5999-3.263796-3.1998-3.263796-4.863696 0-1.5999-1.663896-4.7997-1.663896-6.3996 0-1.5999 0-4.7997 1.663896-6.3996 1.663896-1.663896 1.663896-3.1998 3.263796-4.863696 1.663896-1.5999 3.327792-3.1998 4.927692-3.1998 3.327792-1.5999 6.591588-1.5999 9.91938-1.5999 1.5999 0 1.5999 0 3.263796 1.5999 1.663896 0 1.663896 0 3.327792 1.5999 1.5999 0 1.5999 1.5999 3.1998 1.5999 3.327792 3.1998 4.991688 6.3996 4.991688 11.263296a14.463096 14.463096 0 0 1-4.927692 11.263296c-1.663896 1.5999-3.263796 3.1998-4.927692 3.1998-3.327792 1.5999-6.591588 1.5999-8.255484 1.5999zM86.586588 596.186738c-16.63896 0-27.774264-6.3996-27.774264-15.999v-48.252984c0-9.663396 11.071308-16.062996 27.774264-16.062996 16.63896 0 27.774264 6.3996 27.774264 15.999v48.252984c0 8.063496-13.887132 16.062996-27.774264 16.062996zM86.586588 745.681395c-16.63896 0-27.774264-6.3996-27.774264-16.126992v-73.91538c0-9.5994 11.071308-15.999 27.774264-15.999001 16.63896 0 27.774264 6.3996 27.774264 15.999001V729.554403c0 8.063496-13.887132 16.126992-27.774264 16.126992zM86.586588 874.057371c-16.63896 0-27.774264-6.3996-27.774264-16.126992v-73.91538c0-9.5994 11.071308-16.062996 27.774264-16.062996 16.63896 0 27.774264 6.3996 27.774264 16.062996v73.91538c0 8.063496-13.887132 16.126992-27.774264 16.126992zM996.225736 857.930379c-16.63896 0-27.774264-6.3996-27.774264-15.999V767.952003c0-9.5994 11.071308-16.062996 27.774264-16.062996 16.63896 0 27.774264 6.3996 27.774264 16.062996v73.91538c0 8.063496-13.887132 16.126992-27.774264 16.126992zM147.638773 1023.936004h-66.555841c-13.43916 0-22.270608-8.703456-22.270608-21.75864v-65.019936c0-13.055184 8.895444-21.75864 22.206612-21.75864 13.311168 0 22.206612 8.703456 22.206612 21.75864v43.389288h44.413225c13.375164 0 22.270608 8.63946 22.270608 21.694644a22.014624 22.014624 0 0 1-22.270608 21.694644zM861.514155 1017.92038h-92.15424c-9.855384 0-16.446972-10.87932-16.446972-27.134304s6.591588-27.070308 16.446972-27.070308h92.15424c9.855384 0 16.446972 10.87932 16.446972 27.070308 0 16.31898-6.591588 27.134304-16.446972 27.134304z m-184.30848 0h-92.154241c-9.855384 0-16.446972-10.87932-16.446972-27.134304s6.591588-27.070308 16.446972-27.070308h92.154241c9.855384 0 16.446972 10.87932 16.446972 27.070308 0 16.31898-8.191488 27.134304-16.446972 27.134304z m-184.308481 0h-92.15424c-9.855384 0-16.446972-10.87932-16.446972-27.134304s6.591588-27.070308 16.446972-27.070308h92.15424c9.855384 0 16.446972 10.87932 16.446972 27.070308 0 16.31898-8.191488 27.134304-16.446972 27.134304z m-184.308481 0h-92.15424c-9.855384 0-16.446972-10.87932-16.446972-27.134304s6.591588-27.070308 16.446972-27.070308h92.15424c9.855384 0 16.446972 10.87932 16.446972 27.070308 0 16.31898-8.191488 27.134304-16.446972 27.134304zM1001.729392 1023.936004h-66.619836c-13.375164 0-22.206612-8.703456-22.206612-21.75864 0-12.991188 8.831448-21.630648 22.206612-21.630648h44.413224v-43.389288c0-13.055184 8.895444-21.75864 22.206612-21.75864 13.311168 0 22.206612 8.703456 22.206612 21.75864v65.083932c0 12.991188-8.895444 21.694644-22.206612 21.694644zM996.16174 705.107931c-16.63896 0-27.774264-6.207612-27.774264-15.487032V591.963002c0-9.27942 11.071308-15.487032 27.774264-15.487032 16.63896 0 27.774264 6.207612 27.774264 15.487032v97.657897c0 7.67952-11.135304 15.487032-27.774264 15.487032z m0-196.787701c-16.63896 0-27.774264-6.207612-27.774264-15.551028V395.175302c0-9.343416 11.071308-15.487032 27.774264-15.487033 16.63896 0 27.774264 6.143616 27.774264 15.487033V492.769202c0 7.743516-11.135304 15.551028-27.774264 15.551028zM1001.729392 338.218861c-13.311168 0-22.206612-8.703456-22.206612-21.75864v-43.325292h-44.413224c-13.375164 0-22.206612-8.703456-22.206612-21.75864 0-12.991188 8.831448-21.630648 22.206612-21.630648h66.619836c13.311168 0 22.206612 8.63946 22.206612 21.694644v65.083932c0 10.87932-8.895444 21.694644-22.206612 21.694644zM840.459471 284.014249h-113.528904c-9.91938 0-16.446972-10.87932-16.446972-27.070308 0-16.31898 6.527592-27.134304 16.446972-27.134304h113.528904c9.855384 0 16.446972 10.87932 16.446972 27.134304s-6.591588 27.070308-16.446972 27.070308zM614.87357 284.014249h-49.404912c-9.855384 0-16.446972-10.87932-16.446972-27.070308 0-16.31898 6.591588-27.134304 16.446972-27.134304h49.404912c9.855384 0 16.446972 10.87932 16.446972 27.134304s-6.591588 27.070308-16.446972 27.070308zM617.689394 479.970002h80.442973v447.972002H591.19505V568.412474c-39.293544 24.510468-88.698456 42.685332-149.046684 54.588588V550.23761a501.088682 501.088682 0 0 0 93.242172-26.366352c32.95794-13.75914 60.348228-28.15824 82.298856-43.901256z"  ></path><path d="M799.950003 796.814199H489.569402V716.115243h310.252609v80.698956z"  ></path></symbol><symbol id="icon-crop-first" viewBox="0 0 1024 1024"><path d="M440.548466 261.871633c-3.263796 0-4.927692 0-8.255484-1.5999l-83.898757-48.188988a16.766952 16.766952 0 0 1 0-28.926192l190.900069-109.305169a142.711081 142.711081 0 0 1 129.975877-4.7997l32.893944 15.999a16.766952 16.766952 0 0 1 0 28.990188l-255.024061 144.630961c-1.663896 1.5999-3.263796 3.1998-6.591588 3.1998zM127.736016 382.440097a16.254984 16.254984 0 0 1-16.446972 15.999001 16.254984 16.254984 0 0 1-16.510968-15.999001c0-8.895444 7.423536-16.062996 16.510968-16.062996 9.087432 0 16.446972 7.167552 16.446972 15.999z"  ></path><path d="M364.777201 279.662521l-83.962752-48.252984a15.231048 15.231048 0 0 0-16.446972 0l-75.707268 43.389288a50.748828 50.748828 0 0 1-42.813324 4.7997c-31.230048-9.5994-64.187988-6.3996-90.490345 9.5994C2.687832 319.852009-15.423036 385.76789 14.207112 437.092682c14.783076 24.126492 37.821636 43.389288 65.851884 49.852884 9.855384 3.1998 19.710768 3.1998 27.966252 3.1998 19.710768 0 37.821636-4.7997 55.932505-14.463096 31.294044-17.662896 52.668708-49.788888 55.932504-86.778576L364.777201 306.988813a16.766952 16.766952 0 0 0 8.255484-14.527092c0-6.3996-3.327792-9.5994-8.255484-12.7992zM111.35304 429.029186a47.229048 47.229048 0 0 1-47.805012-46.653085c0-25.662396 21.43866-46.589088 47.741016-46.589088 26.366352 0 47.741016 20.926692 47.741017 46.589088a47.229048 47.229048 0 0 1-47.741017 46.653085zM127.736016 109.177176a16.254984 16.254984 0 0 1-16.446972 16.062996 16.254984 16.254984 0 0 1-16.510968-15.999c0-8.95944 7.423536-16.126992 16.510968-16.126992 9.087432 0 16.446972 7.231548 16.446972 16.062996z"  ></path><path d="M702.036123 376.040497L219.954253 101.11368c-3.263796-35.325792-23.03856-69.11568-55.932504-86.778576C139.255297 0 109.625148-3.1998 80.058996 3.1998 52.028748 11.1993 27.390288 28.862196 14.207112 52.988688a108.025248 108.025248 0 0 0 41.149428 147.830761c26.302356 16.062996 59.260296 19.326792 88.826449 9.663396a50.108868 50.108868 0 0 1 42.813324 4.7997l352.169989 200.947441c21.374664 12.7992 44.413224 17.662896 69.11568 17.662896 21.374664 0 41.149428-4.7997 60.860197-14.463096l32.893944-16.062996a16.766952 16.766952 0 0 0 8.255484-14.463096c0-3.1998-3.263796-9.663396-8.191488-12.863197zM111.35304 155.830261a47.229048 47.229048 0 0 1-47.741016-46.589089c0-25.726392 21.374664-46.653084 47.67702-46.653084 26.366352 0 47.741016 20.926692 47.741017 46.653084a47.229048 47.229048 0 0 1-47.741017 46.589089z"  ></path><path d="M354.857821 261.935629c-1.5999 0-4.927692 0-6.591588-1.5999-1.5999-1.5999-3.263796-1.5999-4.927692-3.1998-1.5999-1.5999-3.263796-3.1998-3.263796-4.863696 0-1.5999-1.663896-4.7997-1.663896-6.3996 0-1.5999 0-4.7997 1.663896-6.3996 1.663896-1.663896 1.663896-3.1998 3.263796-4.863696 1.663896-1.5999 3.327792-3.1998 4.927692-3.1998 3.327792-1.5999 6.591588-1.5999 9.91938-1.5999 1.5999 0 1.5999 0 3.263796 1.5999 1.663896 0 1.663896 0 3.327792 1.5999 1.5999 0 1.5999 1.5999 3.1998 1.5999 3.327792 3.1998 4.991688 6.3996 4.991688 11.263296a14.463096 14.463096 0 0 1-4.927692 11.263296c-1.663896 1.5999-3.263796 3.1998-4.927692 3.1998-3.327792 1.5999-6.591588 1.5999-8.255484 1.5999zM86.586588 596.186738c-16.63896 0-27.774264-6.3996-27.774264-15.999v-48.252984c0-9.663396 11.071308-16.062996 27.774264-16.062996 16.63896 0 27.774264 6.3996 27.774264 15.999v48.252984c0 8.063496-13.887132 16.062996-27.774264 16.062996zM86.586588 745.681395c-16.63896 0-27.774264-6.3996-27.774264-16.126992v-73.91538c0-9.5994 11.071308-15.999 27.774264-15.999001 16.63896 0 27.774264 6.3996 27.774264 15.999001V729.554403c0 8.063496-13.887132 16.126992-27.774264 16.126992zM86.586588 874.057371c-16.63896 0-27.774264-6.3996-27.774264-16.126992v-73.91538c0-9.5994 11.071308-16.062996 27.774264-16.062996 16.63896 0 27.774264 6.3996 27.774264 16.062996v73.91538c0 8.063496-13.887132 16.126992-27.774264 16.126992zM996.225736 857.930379c-16.63896 0-27.774264-6.3996-27.774264-15.999V767.952003c0-9.5994 11.071308-16.062996 27.774264-16.062996 16.63896 0 27.774264 6.3996 27.774264 16.062996v73.91538c0 8.063496-13.887132 16.126992-27.774264 16.126992zM147.638773 1023.936004h-66.555841c-13.43916 0-22.270608-8.703456-22.270608-21.75864v-65.019936c0-13.055184 8.895444-21.75864 22.206612-21.75864 13.311168 0 22.206612 8.703456 22.206612 21.75864v43.389288h44.413225c13.375164 0 22.270608 8.63946 22.270608 21.694644a22.014624 22.014624 0 0 1-22.270608 21.694644zM861.514155 1017.92038h-92.15424c-9.855384 0-16.446972-10.87932-16.446972-27.134304s6.591588-27.070308 16.446972-27.070308h92.15424c9.855384 0 16.446972 10.87932 16.446972 27.070308 0 16.31898-6.591588 27.134304-16.446972 27.134304z m-184.30848 0h-92.154241c-9.855384 0-16.446972-10.87932-16.446972-27.134304s6.591588-27.070308 16.446972-27.070308h92.154241c9.855384 0 16.446972 10.87932 16.446972 27.070308 0 16.31898-8.191488 27.134304-16.446972 27.134304z m-184.308481 0h-92.15424c-9.855384 0-16.446972-10.87932-16.446972-27.134304s6.591588-27.070308 16.446972-27.070308h92.15424c9.855384 0 16.446972 10.87932 16.446972 27.070308 0 16.31898-8.191488 27.134304-16.446972 27.134304z m-184.308481 0h-92.15424c-9.855384 0-16.446972-10.87932-16.446972-27.134304s6.591588-27.070308 16.446972-27.070308h92.15424c9.855384 0 16.446972 10.87932 16.446972 27.070308 0 16.31898-8.191488 27.134304-16.446972 27.134304zM1001.729392 1023.936004h-66.619836c-13.375164 0-22.206612-8.703456-22.206612-21.75864 0-12.991188 8.831448-21.630648 22.206612-21.630648h44.413224v-43.389288c0-13.055184 8.895444-21.75864 22.206612-21.75864 13.311168 0 22.206612 8.703456 22.206612 21.75864v65.083932c0 12.991188-8.895444 21.694644-22.206612 21.694644zM996.16174 705.107931c-16.63896 0-27.774264-6.207612-27.774264-15.487032V591.963002c0-9.27942 11.071308-15.487032 27.774264-15.487032 16.63896 0 27.774264 6.207612 27.774264 15.487032v97.657897c0 7.67952-11.135304 15.487032-27.774264 15.487032z m0-196.787701c-16.63896 0-27.774264-6.207612-27.774264-15.551028V395.175302c0-9.343416 11.071308-15.487032 27.774264-15.487033 16.63896 0 27.774264 6.143616 27.774264 15.487033V492.769202c0 7.743516-11.135304 15.551028-27.774264 15.551028zM1001.729392 338.218861c-13.311168 0-22.206612-8.703456-22.206612-21.75864v-43.325292h-44.413224c-13.375164 0-22.206612-8.703456-22.206612-21.75864 0-12.991188 8.831448-21.630648 22.206612-21.630648h66.619836c13.311168 0 22.206612 8.63946 22.206612 21.694644v65.083932c0 10.87932-8.895444 21.694644-22.206612 21.694644zM840.459471 284.014249h-113.528904c-9.91938 0-16.446972-10.87932-16.446972-27.070308 0-16.31898 6.527592-27.134304 16.446972-27.134304h113.528904c9.855384 0 16.446972 10.87932 16.446972 27.134304s-6.591588 27.070308-16.446972 27.070308zM614.87357 284.014249h-49.404912c-9.855384 0-16.446972-10.87932-16.446972-27.070308 0-16.31898 6.591588-27.134304 16.446972-27.134304h49.404912c9.855384 0 16.446972 10.87932 16.446972 27.134304s-6.591588 27.070308-16.446972 27.070308zM617.689394 479.970002h80.442973v447.972002H591.19505V568.412474c-39.293544 24.510468-88.698456 42.685332-149.046684 54.588588V550.23761a501.088682 501.088682 0 0 0 93.242172-26.366352c32.95794-13.75914 60.348228-28.15824 82.298856-43.901256z"  ></path></symbol><symbol id="icon-transform" viewBox="0 0 1024 1024"><path d="M147.4 187.1 283.7 323.4 322.7 284.3 324.6 282.5 190.4 148.2 329.8 148.2 329.8 90.3 89.5 90.3 89.5 329 147.4 329Z"  ></path><path d="M322.5 739.5 283.4 700.4 281.6 698.5 147.4 832.7 147.4 693.4 89.5 693.4 89.5 933.7 328.1 933.7 328.1 875.8 186.2 875.8Z"  ></path><path d="M694.2 90.3 694.2 148.2 833.6 148.2 701.2 280.6 699.4 282.5 738.5 321.6 740.3 323.3 876.6 187.1 876.6 329 934.5 329 934.5 90.3Z"  ></path><path d="M876.6 832.8 742.3 698.6 703.2 737.7 701.5 739.5 837.7 875.8 695.8 875.8 695.8 933.7 934.5 933.7 934.5 693.4 876.6 693.4Z"  ></path><path d="M512 291.1c-121.8 0-220.9 99.1-220.9 220.8S390.2 732.8 512 732.8 732.9 633.8 732.9 512 633.8 291.1 512 291.1zM675 512c0 89.9-73.1 163-163 163s-163-73.1-163-163c0-89.9 73.1-163 163-163S675 422.1 675 512z"  ></path></symbol><symbol id="icon-point" viewBox="0 0 1024 1024"><path d="M512 384c-70.7 0-128 57.3-128 128s57.3 128 128 128 128-57.3 128-128-57.3-128-128-128z"  ></path></symbol><symbol id="icon-reset" viewBox="0 0 1026 1024"><path d="M809.70944214 216.6875A401.81039429 401.81039429 0 0 0 514.41589355 90.13323974 421.84780883 421.84780883 0 1 0 920.44421387 617.44403076H809.70944214a314.13619995 314.13619995 0 0 1-295.29354858 210.92349244 316.38565063 316.38565063 0 0 1 0-632.77212525 306.47241211 306.47241211 0 0 1 221.46954345 94.91610718L567.14697266 459.2491455h369.11590576V90.13406372z"  ></path></symbol><symbol id="icon-rotate90" viewBox="0 0 1024 1024"><path d="M29.4528 922.5216a28.8768 28.8768 0 0 1-29.3888-27.2896v-76.2368a29.5424 29.5424 0 0 1 59.0848 0v44.8h44.8512a29.5424 29.5424 0 0 1 0 59.0848z m252.7744 0a29.5936 29.5936 0 0 1 0-59.136h14.6944v-44.7488a29.5936 29.5936 0 0 1 59.136 0v74.1888a28.1088 28.1088 0 0 1-14.6432 25.6v3.6352h-14.6944z m43.776-163.4816a28.8256 28.8256 0 0 1-28.7232-27.2384V610.304a29.5936 29.5936 0 0 1 59.136 0v118.8864a27.9552 27.9552 0 0 1-15.0016 26.2656v2.7136zM28.6848 729.2928a28.7232 28.7232 0 0 1-28.6208-27.2896v-121.0368a29.5424 29.5424 0 1 1 59.0848 0v118.8864a27.904 27.904 0 0 1-7.6288 20.0704 29.9008 29.9008 0 0 1-7.3216 5.6832v2.7136z m297.3184-208.0256a28.8256 28.8256 0 0 1-28.7232-27.2384V372.8896a29.5936 29.5936 0 0 1 59.136 0v118.8864a28.6208 28.6208 0 0 1-15.0016 25.6v2.7648z m-297.2672-29.696a28.7744 28.7744 0 0 1-28.672-27.3408V343.1936a29.5424 29.5424 0 1 1 59.0848 0v118.8864a28.0064 28.0064 0 0 1-7.6288 20.1216 29.952 29.952 0 0 1-7.3216 5.6832v2.7136z m0-208.0256a28.7744 28.7744 0 0 1-28.672-27.3408v-46.4896a28.1088 28.1088 0 0 1 7.424-19.968 28.5184 28.5184 0 0 1 19.9168-9.4208h76.4416a29.5424 29.5424 0 0 1 0 59.0848h-44.8512v15.0016a28.2624 28.2624 0 0 1-7.936 20.224 27.5968 27.5968 0 0 1-6.8608 5.12v2.8672z m297.2672-0.3072a28.7232 28.7232 0 0 1-28.7232-27.1872v-17.2544h-15.0528a29.5936 29.5936 0 0 1 0-59.136h44.6464a28.8768 28.8768 0 0 1 29.3888 27.3408v46.6944a27.8528 27.8528 0 0 1-7.168 19.9168 28.7744 28.7744 0 0 1-19.8144 9.6768h-3.2256z"  ></path><path d="M717.6832 503.2448a25.6 25.6 0 0 1-17.8176-7.168 33.3824 33.3824 0 0 1-5.888-38.0928l108.7488-133.4272a29.5936 29.5936 0 0 1 47.0016 35.84l-107.52 131.2768a29.5936 29.5936 0 0 1-22.9376 11.3152z"  ></path><path d="M714.2016 503.0912a37.6832 37.6832 0 0 1-20.1728-9.8816l-108.3904-135.2192a29.5936 29.5936 0 0 1 23.3472-47.7184 29.9008 29.9008 0 0 1 23.7568 11.8272l106.7008 133.4272a29.3376 29.3376 0 0 1-5.376 41.472 24.2176 24.2176 0 0 1-16.7424 6.2976z"  ></path><path d="M718.3488 452.608a28.7744 28.7744 0 0 1-28.7744-27.1872 264.3456 264.3456 0 0 0-261.7344-263.936 29.5424 29.5424 0 1 1 0-59.0848 320.9216 320.9216 0 0 1 320.8704 319.8976 28.8256 28.8256 0 0 1-27.2896 30.3104h-3.072z"  ></path><path d="M325.952 922.2656a28.7232 28.7232 0 0 1-28.672-27.1872v-299.4176a28.5696 28.5696 0 0 1 27.5456-29.184h656.0768a28.7744 28.7744 0 0 1 29.3376 27.2896v299.3152a28.5696 28.5696 0 0 1-27.3408 29.44H326.72l-0.7168-14.6432z m625.0496-59.136v-238.08H356.5184v238.08z"  ></path></symbol><symbol id="icon-rotate270" viewBox="0 0 1024 1024"><path d="M901.200384 918.1184a29.44 29.44 0 0 1 0-58.8288h44.3392v-44.4928a29.44 29.44 0 1 1 58.8288 0v73.8816a28.928 28.928 0 0 1-28.5184 29.2864z m-236.3392 0v-4.4544a27.4432 27.4432 0 0 1-14.7456-25.6v-73.1136a29.44 29.44 0 0 1 58.8288 0v44.4928h14.8992a29.44 29.44 0 1 1 0 58.8288z m0-163.2768v-3.6864a27.3408 27.3408 0 0 1-14.8992-26.1632v-117.2992a29.44 29.44 0 0 1 58.8288 0v118.5792a29.0816 29.0816 0 0 1-28.5696 29.2864z m295.6288-29.5424v-3.072a25.2928 25.2928 0 0 1-7.3728-5.5808 28.4672 28.4672 0 0 1-7.6288-20.48v-117.76a29.44 29.44 0 1 1 58.8288 0v118.2208a28.928 28.928 0 0 1-28.5184 29.2864z m-295.6288-206.9504v-3.0208a26.2144 26.2144 0 0 1-7.2704-5.5808 28.2624 28.2624 0 0 1-7.6288-20.48v-117.76a29.44 29.44 0 1 1 58.8288 0v118.2208a29.1328 29.1328 0 0 1-28.5696 29.2864z m295.6288-29.5424v-2.9696a26.1632 26.1632 0 0 1-7.3728-5.632 28.4672 28.4672 0 0 1-7.6288-20.48v-117.76a29.44 29.44 0 1 1 58.8288 0v118.1696a28.9792 28.9792 0 0 1-28.5184 29.3376z m0-206.8992v-2.9696a26.4704 26.4704 0 0 1-7.2192-5.4272 28.3648 28.3648 0 0 1-7.7824-20.48v-14.5408h-44.288a29.44 29.44 0 0 1 0-58.8288h73.9328a29.5936 29.5936 0 0 1 21.9136 9.3696 28.5184 28.5184 0 0 1 7.3216 20.48v43.6736a28.928 28.928 0 0 1-28.5184 29.2864z m-283.904 0.512a28.672 28.672 0 0 1-26.4704-30.3104v-43.4176a28.9792 28.9792 0 0 1 28.5184-29.3376h45.0048a29.44 29.44 0 1 1 0 58.8288h-14.8992v14.9504a29.0816 29.0816 0 0 1-28.5696 29.2864h-3.584z"  ></path><path d="M287.773184 500.8384a28.8768 28.8768 0 0 1-21.5552-11.4688L160.029184 359.5776a29.3888 29.3888 0 0 1 23.1424-47.5648 29.7984 29.7984 0 0 1 23.6032 11.8272l106.0352 129.5872a33.4336 33.4336 0 0 1-3.6352 39.936 25.9072 25.9072 0 0 1-18.2272 7.68z"  ></path><path d="M290.998784 501.0432a25.6 25.6 0 0 1-17.664-7.1168 28.8768 28.8768 0 0 1-4.4544-40.0896l106.5984-133.12a29.4912 29.4912 0 0 1 46.848 35.84l-106.752 133.12a37.376 37.376 0 0 1-20.8384 11.1616z"  ></path><path d="M286.953984 450.7136a28.672 28.672 0 0 1-27.1872-30.0032 319.0784 319.0784 0 0 1 318.6688-318.3616 29.44 29.44 0 1 1 0.4096 58.8288 262.4512 262.4512 0 0 0-260.3008 260.3008 28.9792 28.9792 0 0 1-28.5184 29.2352h-3.072z"  ></path><path d="M29.315584 917.6576a29.5936 29.5936 0 0 1-21.9136-9.3696 28.5696 28.5696 0 0 1-7.3728-20.48v-294.8608a28.9792 28.9792 0 0 1 28.5184-29.2864h651.008a29.5424 29.5424 0 0 1 21.9648 9.4208 28.2624 28.2624 0 0 1 7.3216 20.48v294.8096a28.9792 28.9792 0 0 1-28.4672 29.2864z m620.9024-58.7776v-236.6464H58.755584v236.7488z"  ></path></symbol><symbol id="icon-information" viewBox="0 0 1024 1024"><path d="M358.389919 1024a34.368 34.368 0 0 1-27.008-13.76 49.792 49.792 0 0 1-11.392-32.768v-93.12a49.92 49.92 0 0 1 11.328-32.64 33.856 33.856 0 0 1 27.072-13.824h38.4V558.464H358.389919a34.368 34.368 0 0 1-27.008-13.76A49.792 49.792 0 0 1 319.989919 512V418.88a50.176 50.176 0 0 1 11.328-32.704 33.984 33.984 0 0 1 27.072-13.76h230.4a34.24 34.24 0 0 1 27.008 13.696 50.176 50.176 0 0 1 11.264 32.704v419.008h38.4a34.24 34.24 0 0 1 27.008 13.696 50.688 50.688 0 0 1 11.52 32.832v93.12a50.112 50.112 0 0 1-11.328 32.704A34.432 34.432 0 0 1 665.589919 1024zM435.189919 232.576a34.24 34.24 0 0 1-27.008-13.76 49.728 49.728 0 0 1-11.392-32.704V46.464a49.728 49.728 0 0 1 11.328-32.704A34.048 34.048 0 0 1 435.189919 0h153.6a34.24 34.24 0 0 1 27.008 13.76 49.28 49.28 0 0 1 11.392 32.768v139.584a50.048 50.048 0 0 1-11.264 32.704 34.24 34.24 0 0 1-27.008 13.76z"  ></path></symbol><symbol id="icon-hollow" viewBox="0 0 1097 1024"><path d="M1026.43766667 295.863L455.11966667 36.57 46.39666667 295.863 59.56266667 771.29H543.03666667l527.36 216.138-43.959-691.566zM534.18666667 706.56l-417.5 8.63-10.97-371.711 366.957-231.132 496.64 237.715 37.303 553.18L534.18666667 706.56z"  ></path><path d="M722.96866667 325.632l-332.361-33.06-119.37 198.217 285.55 138.825 299.593 28.672-133.412-332.654zM344.38066667 475.429l74.313-129.975 259.804 24.21L746.66666667 585.143l-189.879-8.119-212.407-101.595z"  ></path></symbol><symbol id="icon-cancel-hollow" viewBox="0 0 1082 1024"><path d="M870.759445 202.000198a48.398906 48.398906 0 0 0-14.188996-34.270032 48.69952 48.69952 0 0 0-68.660312 0l-562.389273 562.389273a48.579274 48.579274 0 0 0 68.660311 68.660311L856.630571 236.390477a48.579274 48.579274 0 0 0 14.128874-34.390279z"  ></path><path d="M535.995336 488.906507c13.407399-14.429487 28.858975-25.552217 46.114237-33.308067L294.181175 167.670043a48.398906 48.398906 0 1 0-82.849307 34.330155c0 12.445433 4.809829 24.950989 14.188996 34.390279l284.561517 284.501394c6.914129-11.663836 15.511699-22.24546 25.852832-31.925241z"  ></path><path d="M611.269162 883.072006A410.037935 410.037935 0 0 1 541.105779 889.204538a402.823191 402.823191 0 0 1-286.846186-118.862903 405.648966 405.648966 0 0 1-87.057907-129.08379 402.763068 402.763068 0 0 1-31.865118-157.882641A404.506631 404.506631 0 0 1 254.319716 196.408772a402.823191 402.823191 0 0 1 286.786063-118.923026 404.506631 404.506631 0 0 1 286.906309 118.923026A405.52872 405.52872 0 0 1 915.069996 325.372316a408.234249 408.234249 0 0 1 25.852831 227.985902h76.416161A481.403775 481.403775 0 1 0 59.82225 483.254958a481.403775 481.403775 0 0 0 551.507035 476.173086v-76.356038z m365.667261-150.427407l-186.38088 186.38088a43.288462 43.288462 0 0 1-61.144953-61.08483l186.38088-186.38088a43.288462 43.288462 0 0 1 61.144953 0 43.468831 43.468831 0 0 1 0 61.08483z"  ></path><path d="M790.555543 671.499646l186.38088 186.38088a43.288462 43.288462 0 0 1-61.144953 61.144953l-186.38088-186.38088a43.288462 43.288462 0 0 1 0-61.144953 43.468831 43.468831 0 0 1 61.144953 0z"  ></path></symbol><symbol id="icon-hotkey" viewBox="0 0 1280 1024"><path d="M1015.808 0H223.573333A180.138667 180.138667 0 0 0 43.52 180.053333v592.213334a177.322667 177.322667 0 0 0 177.322667 176.981333h797.781333a177.408 177.408 0 0 0 177.322667-176.981333V180.053333A180.138667 180.138667 0 0 0 1015.808 0z m90.026667 765.696v3.584a90.026667 90.026667 0 0 1-90.026667 89.941333H223.573333A90.026667 90.026667 0 0 1 133.546667 768.853333v-588.8A90.112 90.112 0 0 1 223.573333 90.112h792.234667a90.112 90.112 0 0 1 90.026667 89.941333v585.898667-0.256z"  ></path><path d="M926.549333 631.296H313.173333a46.165333 46.165333 0 1 0 0 92.330667h613.290667a46.08 46.08 0 1 0 0-92.330667zM240.298667 328.021333h99.669333a46.165333 46.165333 0 1 0 0-92.330666H240.298667a46.165333 46.165333 0 0 0 0 92.330666z m219.904 0h99.413333a46.165333 46.165333 0 1 0 0-92.330666H459.946667a46.165333 46.165333 0 0 0 0 92.330666h0.170666z m219.818666 0h99.669334a46.165333 46.165333 0 1 0 0-92.330666H680.021333a46.165333 46.165333 0 0 0 0 92.330666z m319.573334-92.330666h-99.584a46.08 46.08 0 1 0 0 92.330666h99.584a46.08 46.08 0 1 0 0-92.330666z m-613.888 238.933333a45.909333 45.909333 0 0 0-45.738667-46.165333H240.298667a46.165333 46.165333 0 0 0 0 92.330666h99.669333a45.909333 45.909333 0 0 0 45.568-46.250666h0.170667z m74.496 46.08h99.413333a46.165333 46.165333 0 1 0 0-92.245333H459.946667a46.165333 46.165333 0 0 0 0 92.330666h0.170666z m219.818666 0h99.669334a46.165333 46.165333 0 1 0 0-92.245333H680.021333a46.165333 46.165333 0 0 0 0 92.330666z m319.573334-92.245333h-99.584a46.08 46.08 0 1 0 0 92.330666h99.584a46.08 46.08 0 1 0 0-92.330666z"  ></path></symbol><symbol id="icon-rect" viewBox="0 0 1025 1024"><path d="M938.250574 777.376992v-531.801634a120.984872 120.984872 0 0 0 70.463716-57.833427 132.950408 132.950408 0 0 0 15.289297-61.157188 126.302888 126.302888 0 0 0-245.958255-39.885123h-531.801634a126.302888 126.302888 0 1 0-159.54049 159.540491v531.801633a126.302888 126.302888 0 0 0 39.885122 245.958256 124.973384 124.973384 0 0 0 110.348839-66.475204 84.423509 84.423509 0 0 0 8.641777-21.272066h531.801634a126.302888 126.302888 0 0 0 119.655367 86.417766 124.973384 124.973384 0 0 0 110.348839-66.475204 132.950408 132.950408 0 0 0 15.289297-61.157188 126.302888 126.302888 0 0 0-84.423509-117.661112z m-159.54049 79.770245h-531.801634a126.96764 126.96764 0 0 0-79.770245-79.770245v-531.801634a120.984872 120.984872 0 0 0 70.463716-57.833427 84.423509 84.423509 0 0 0 8.641777-21.272066h531.801634a126.96764 126.96764 0 0 0 79.770245 79.770246v531.801633a125.638136 125.638136 0 0 0-79.105493 79.105493z m119.655367-776.430385a46.532643 46.532643 0 0 1 46.532643 47.197395 53.844915 53.844915 0 0 1-5.318016 22.601569 48.526899 48.526899 0 0 1-41.214627 23.931074 46.532643 46.532643 0 0 1-47.197395-46.532643 47.197395 47.197395 0 0 1 47.197395-47.197395z m-769.118113 0a46.532643 46.532643 0 0 1 46.532643 47.197395 45.867891 45.867891 0 0 1-5.982768 22.601569 47.197395 47.197395 0 0 1-87.74727-22.601569 47.197395 47.197395 0 0 1 47.197395-47.197395z m40.549875 838.917077a47.197395 47.197395 0 0 1-87.74727-22.601569 47.197395 47.197395 0 0 1 47.197395-47.197395 46.532643 46.532643 0 0 1 46.532643 47.197395 45.867891 45.867891 0 0 1-5.982768 22.601569z m769.782865 0a48.526899 48.526899 0 0 1-41.214627 23.931074 46.532643 46.532643 0 0 1-47.197395-46.532643 47.197395 47.197395 0 0 1 47.197395-47.197395 46.532643 46.532643 0 0 1 46.532643 47.197395 53.844915 53.844915 0 0 1-5.318016 22.601569z"  ></path></symbol><symbol id="icon-save" viewBox="0 0 1024 1024"><path d="M565.4528 274.9952a37.2224 37.2224 0 0 0 37.1712-37.1712v-37.1712a37.1712 37.1712 0 1 0-74.3936 0v37.1712a37.376 37.376 0 0 0 37.2224 37.1712z"  ></path><path d="M960.1536 191.9488L812.544 44.4928a36.352 36.352 0 0 0-25.6-11.008H122.9312a110.8992 110.8992 0 0 0-110.592 110.592v737.28a110.8992 110.8992 0 0 0 110.592 110.592h737.28a110.8992 110.8992 0 0 0 110.592-110.592V217.5488a36.1472 36.1472 0 0 0-10.6496-25.6z m-634.368-84.992h331.9296v197.3248a24.4224 24.4224 0 0 1-24.0128 24.0128H349.7984a24.4224 24.4224 0 0 1-24.0128-24.0128z m387.1744 811.264H270.5408v-254.4128a40.96 40.96 0 0 1 40.5504-40.5504h361.3696a40.96 40.96 0 0 1 40.5504 40.5504v254.4128z m184.32-36.864a36.9152 36.9152 0 0 1-36.864 36.864h-71.68v-254.4128a114.7904 114.7904 0 0 0-114.2784-114.2784h-363.52a114.7904 114.7904 0 0 0-114.2784 114.2784v254.4128h-73.728a36.9152 36.9152 0 0 1-36.864-36.864V143.8208a36.9152 36.9152 0 0 1 36.864-36.864h129.0752v197.3248a98.3552 98.3552 0 0 0 97.8944 97.5872h283.9552a98.3552 98.3552 0 0 0 97.7408-97.7408V106.9568h40.5504l125.44 125.44v648.96z"  ></path></symbol><symbol id="icon-help" viewBox="0 0 1025 1024"><path d="M775.398263 5.024287H231.569403A230.11236 230.11236 0 0 0 5.024287 237.950248v372.651391a230.11236 230.11236 0 0 0 226.545116 232.92596h138.368873l133.545557 158.516265 133.545557-158.516265h138.368873a230.11236 230.11236 0 0 0 226.545116-232.92596V237.950248A230.062117 230.062117 0 0 0 775.398263 5.024287z m164.444924 605.527109a192.731662 192.731662 0 0 1-164.444924 169.067268h-179.819243l-92.095187 115.558609-92.095187-115.206908H231.569403a192.731662 192.731662 0 0 1-164.444924-169.067269V238.151219a192.731662 192.731662 0 0 1 164.444924-169.067268h543.728374a178.663657 178.663657 0 0 1 164.444925 169.067268v372.651391z"  ></path><path d="M520.817624 212.024925a144.096561 144.096561 0 0 0-167.208282 125.958883l63.004563 15.072862q19.544478-86.769442 95.461459-86.869927a66.772779 66.772779 0 0 1 69.435651 65.315735q2.160444 43.460085-58.633433 86.869928a113.046465 113.046465 0 0 0-56.472989 101.94279v21.755164h58.633433v-17.384035a87.573328 87.573328 0 0 1 47.831215-78.17791 135.655758 135.655758 0 0 0 80.388597-121.637996 122.441882 122.441882 0 0 0-132.440214-112.845494z m-60.894362 382.298023h71.69658v69.435651H459.923262z"  ></path></symbol><symbol id="icon-fullscreen" viewBox="0 0 1024 1024"><path d="M69.7344 1003.8272v-0.256h-5.12a38.912 38.912 0 0 1-32.768-30.1568l-0.4096-7.6288v-307.2a39.0144 39.0144 0 0 1 78.0288 0v213.1968l227.8912-227.6352a38.9632 38.9632 0 1 1 55.1936 55.04l-227.9424 227.4816h220.16a38.8608 38.8608 0 0 1-5.12 77.1584z m545.0752-38.6048a39.0144 39.0144 0 0 1 38.3488-39.6288h270.9504v-267.8784a39.4752 39.4752 0 0 1 39.0144-38.8608h3.584a39.3728 39.3728 0 0 1 35.84 38.8096v306.7904a39.2704 39.2704 0 0 1-39.2704 38.9632H653.7216a39.0144 39.0144 0 0 1-38.8608-38.1952zM69.6832 417.0752a39.0656 39.0656 0 0 1-38.912-38.9632v-307.2a39.3728 39.3728 0 0 1 39.2704-38.8096h307.2a38.9632 38.9632 0 1 1 2.7136 77.8752h-271.36v268.288a38.9632 38.9632 0 0 1-38.9632 38.8608z m854.3232-38.912V165.2224l-227.6352 227.5328a38.9632 38.9632 0 1 1-55.2448-54.9888l227.7888-227.5328H655.872a39.0656 39.0656 0 1 1-2.7136-78.1312h314.9312a39.2192 39.2192 0 0 1 32.9728 30.72v3.1744l2.9696 7.0656-1.9968 305.0496a39.0656 39.0656 0 0 1-39.0144 38.912 39.168 39.168 0 0 1-39.0144-38.912z"  ></path></symbol><symbol id="icon-exitfullscreen" viewBox="0 0 1024 1024"><path d="M367.013743 619.015916h5.678434a40.912655 40.912655 0 0 1 34.536053 31.743379l0.418901 8.005662v323.996576a41.145378 41.145378 0 0 1-82.244211 0v-224.484339L85.186524 998.260867A41.098833 41.098833 0 1 1 27.005843 940.219819l240.216396-240.030217H34.918416a41.005744 41.005744 0 0 1 5.445711-81.406409h326.69616z"  ></path><path d="M657.73097 0.020014a41.238467 41.238467 0 0 1 41.005744 41.005744v224.437795L938.813476 25.619514a41.098833 41.098833 0 1 1 58.227225 57.994503L756.824306 323.504601h224.623973a41.052289 41.052289 0 1 1 2.839217 82.058032h-332.095327a41.285011 41.285011 0 0 1-34.768775-32.581181v-3.118485l-3.118485-7.633305 2.14105-321.157359a41.098833 41.098833 0 0 1 41.098833-40.9592z"  ></path><path d="M656.148455 1023.860366a41.098833 41.098833 0 0 1-1.349792-82.104577h285.038793v-282.385753a41.610823 41.610823 0 0 1 41.098833-40.959199h3.770108a41.471189 41.471189 0 0 1 37.468359 40.912654v323.438042a41.3781 41.3781 0 0 1-41.285012 41.098833zM40.922662 405.562633A41.145378 41.145378 0 0 1 0.010007 364.556889V41.025758A41.424645 41.424645 0 0 1 41.295018 0.020014h323.11223a41.098833 41.098833 0 0 1 31.417568 69.072105 40.726477 40.726477 0 0 1-28.57835 12.985928H82.021495v282.525387a41.098833 41.098833 0 0 1-41.052288 40.959199z"  ></path></symbol><symbol id="icon-info" viewBox="0 0 1024 1024"><path d="M512 0a512 512 0 1 1-512 512 512 512 0 0 1 512-512z m0 102.4A409.6 409.6 0 1 0 921.6 512 409.6 409.6 0 0 0 512 102.4z m0 332.8a51.2 51.2 0 0 1 51.2 51.2v256a51.2 51.2 0 0 1-102.4 0v-256a51.2 51.2 0 0 1 51.2-51.2z m0-204.8a64 64 0 1 1-64 64 64 64 0 0 1 64-64z"  ></path></symbol><symbol id="icon-setting" viewBox="0 0 1118 1024"><path d="M240.286252 711.123251a159.494772 159.494772 0 0 1 155.630362 121.974856l-0.632358-7.026201h682.314419a39.135942 39.135942 0 1 1 0 78.201622h-682.244157l-0.772882 3.232052a160.337916 160.337916 0 0 1-311.049937-10.609564l0.632358 7.377512H40.250298a39.135942 39.135942 0 1 1 0-78.201622h43.913759c0 11.733756-4.004935 27.402186-4.004935 39.06568a85.227823 85.227823 0 0 0 0.562096 8.782752v-6.464106a158.440842 158.440842 0 0 1 159.565034-156.403243z m0 78.201622a78.271884 78.271884 0 1 0 79.747387 78.201621 79.255552 79.255552 0 0 0-79.747387-78.201621z m558.301965-430.144051a159.494772 159.494772 0 0 1 155.700624 122.396428l-0.632359-7.447773h123.661145a39.135942 39.135942 0 1 1 0 78.201622H953.867268v-0.491834a160.12713 160.12713 0 0 1-311.752556-7.026202l0.632358 7.377512H40.250298a39.135942 39.135942 0 1 1 0-78.201622h602.42651c0 11.733756-3.934673 27.402186-3.934673 39.06568a94.151099 94.151099 0 0 0 0.632358 10.047468v-7.65856a158.440842 158.440842 0 0 1 159.213724-156.262719z m0 78.201622a78.201622 78.201622 0 1 0 80.028434 78.201621 79.255552 79.255552 0 0 0-80.028434-78.201621zM401.397051 0.001405a159.565034 159.565034 0 0 1 155.700623 122.045119h520.501001a37.30913 37.30913 0 0 1 39.838563 39.135942 37.30913 37.30913 0 0 1-39.838563 39.06568H554.919552v-1.545765a159.846082 159.846082 0 0 1-312.947011-42.157208A158.37058 158.37058 0 0 1 401.397051 0.001405z m0 78.201622a78.271884 78.271884 0 1 0 79.817648 78.271884 79.255552 79.255552 0 0 0-79.817648-78.271884z m-157.878746 43.913759c0 11.733756-3.934673 27.402186-3.934673 39.06568s3.934673 27.402186 3.934673 39.06568H40.250298A37.30913 37.30913 0 0 1 0.411736 161.182466a37.30913 37.30913 0 0 1 39.838562-39.06568z"  ></path></symbol><symbol id="icon-toleft" viewBox="0 0 1024 1024"><path d="M778.477481 1023.996005l-10.487669-5.593424L237.114006 570.629065a57.232707 57.232707 0 0 1-9.988256-10.487669 58.631063 58.631063 0 0 1-11.386612-42.849618 57.832002 57.832002 0 0 1 22.173928-38.354903L772.18488 2.297299l12.285555-2.097534 17.57933 7.79084 7.091662 17.779095v106.374927a37.05643 37.05643 0 0 1-13.783793 28.266764L403.018938 523.384614l392.638343 340.199999a36.157487 36.157487 0 0 1 13.484146 28.067v112.467762l-5.593423 10.487669a24.870757 24.870757 0 0 1-19.976512 9.388961z"  ></path></symbol><symbol id="icon-toright" viewBox="0 0 1024 1024"><path d="M245.658031 1023.996005l10.487668-5.593424 530.875807-447.773516a57.232707 57.232707 0 0 0 9.988256-10.487669 58.631063 58.631063 0 0 0 11.386611-42.849618 57.832002 57.832002 0 0 0-22.173928-38.354903L251.950632 2.297299 239.665077 0.199765 222.085746 7.990605l-7.091661 17.779095v106.374927a37.05643 37.05643 0 0 0 13.783793 28.266764L621.116573 523.384614 228.47823 863.584613a36.157487 36.157487 0 0 0-13.484145 28.067v112.467762l5.593423 10.487669a24.870757 24.870757 0 0 0 19.976512 9.388961z"  ></path></symbol><symbol id="icon-remind" viewBox="0 0 1212 1024"><path d="M1183.556744 841.742371A110.298667 110.298667 0 0 1 1080.134321 1022.197309H130.840992C15.245759 1022.197309-33.44548 942.377128 24.445058 841.742371L498.9988 75.505803a110.763278 110.763278 0 0 1 209.91128 0zM566.18156 267.204328V659.800678a36.611352 36.611352 0 0 0 18.584443 31.872319 38.748563 38.748563 0 0 0 37.819341 0 36.611352 36.611352 0 0 0 18.584442-31.872319V267.204328a37.819341 37.819341 0 0 0-75.638681 0z m0 538.948836v49.062928a36.611352 36.611352 0 0 0 18.584443 31.872319 38.748563 38.748563 0 0 0 37.819341 0 36.611352 36.611352 0 0 0 18.584442-31.872319v-48.691239a37.819341 37.819341 0 0 0-75.638681 0z"  ></path></symbol><symbol id="icon-view" viewBox="0 0 1366 1024"><path d="M682.80673 1024c-250.537546 0-473.762823-157.570784-669.675831-466.304473a84.037751 84.037751 0 0 1 0-90.760771C209.043906 158.411161 432.269183 0 682.80673 0s473.762823 157.570784 669.675831 466.304473a84.037751 84.037751 0 0 1 0 90.760771C1156.779647 866.324169 933.55437 1024 682.80673 1024z m0-921.578991c-207.573246 0-399.179319 134.460402-576.183833 409.684038 176.794419 275.118588 368.610587 409.684038 576.183833 409.684038s399.179319-134.460402 576.183832-409.684038C1081.986048 236.881412 890.59007 102.421009 682.80673 102.421009z m0 648.561346a238.982355 238.982355 0 1 1 241.608535-238.982355 240.032827 240.032827 0 0 1-241.608535 238.982355z m0-102.421009a136.561346 136.561346 0 1 0-137.92696-136.561346 137.716865 137.716865 0 0 0 137.92696 136.561346z m0 0"  ></path></symbol><symbol id="icon-delete" viewBox="0 0 1024 1024"><path d="M519.399862 0a192.484515 192.484515 0 0 0-191.779766 186.934618H85.450791a49.244322 49.244322 0 0 0 0 98.488644h54.001377v550.67309a174.24914 174.24914 0 0 0 155.397109 187.903648h438.706126a174.072953 174.072953 0 0 0 156.013764-187.903648V285.687543h48.891948a49.244322 49.244322 0 0 0 0-98.488644H710.915348A191.955953 191.955953 0 0 0 519.487956-0.088094zM419.23744 186.934618a100.162423 100.162423 0 0 1 200.060564 0z m-124.388163 745.007571c-30.480385 0-64.13214-39.377839-64.13214-95.845837V285.687543h566.882312v550.937371c0 56.29181-33.563661 95.845836-64.13214 95.845836H294.849277z m0 0"  ></path><path d="M361.800413 811.870613a45.984859 45.984859 0 0 0 40.434962-50.037165v-285.423262a41.403992 41.403992 0 1 0-80.958018 0v285.423262a45.808672 45.808672 0 0 0 40.523056 50.037165z m146.499656 0a45.984859 45.984859 0 0 0 40.434962-50.037165v-285.423262a41.403992 41.403992 0 1 0-80.958018 0v285.423262a46.072953 46.072953 0 0 0 40.523056 50.037165z m154.075705 0a45.984859 45.984859 0 0 0 40.434962-50.037165v-285.423262a41.403992 41.403992 0 1 0-80.958017 0v285.423262a45.632485 45.632485 0 0 0 40.611149 50.037165z m0 0"  ></path></symbol><symbol id="icon-editlabel" viewBox="0 0 1184 1024"><path d="M287.649149 444.927032a81.300567 81.300567 0 1 0 81.300567-81.300567 81.300567 81.300567 0 0 0-81.300567 81.300567zM865.270321 773.226465a73.267297 73.267297 0 1 0-69.976559-73.17051 73.267297 73.267297 0 0 0 69.976559 73.17051z m0 68.911909a142.08242 142.08242 0 1 1 142.08242-142.082419A142.08242 142.08242 0 0 1 865.270321 842.138374z m-33.972022-396.243478l-11.904726 35.617391-124.757656 72.009074-36.585255-7.452552-31.165218 53.813233 24.777316 27.971266v143.921361l-24.777316 27.971267 31.165218 53.813232 36.585255-7.549338 124.757656 72.10586 11.904726 35.617391h61.943289l11.807939-35.520605 125.822307-72.10586 36.585255 7.549339 31.165217-53.813233-22.551228-27.971266V627.562949l24.777315-27.971267-31.165217-53.813232-36.585255 7.549338-125.822307-72.10586-11.904726-35.617391h-64.072589z m130.855198-11.324008l79.751985 46.263895 59.23327-12.291872 82.268431 139.953119-40.359924 45.199244v92.624575l40.359924 45.199244-80.719848 140.049905-59.233271-12.388658-79.655198 46.263894-19.357278 57.587902H783.00189l-19.357278-57.587902-79.655198-45.779962-59.813989 12.388658-80.719848-140.049905 40.359924-45.779963v-92.140642l-40.359924-45.58639 80.719848-139.953119 59.813989 12.291872 79.655198-45.779963 19.357278-57.587901h161.536484l17.808696 57.007183z"  ></path><path d="M943.183365 377.079773H781.743667l-19.357278 57.587902-79.655198 45.779962-59.717202-12.388658-80.719849 139.953119 40.359924 45.779962v92.140643l-40.359924 45.683176 80.719849 140.049905 59.717202-12.388657 79.655198 45.779962 19.357278 57.587902h161.536484l19.357278-57.587902 79.751985-46.263894 59.23327 12.291871 81.784499-139.469187-40.359924-45.199244v-92.624575l40.359924-45.199243-80.719848-139.953119-59.233271 12.291871-79.655198-46.263894zM694.53913 553.618147l124.757656-72.10586 11.904726-35.617391h61.94329l11.807939 35.617391 125.822306 72.009074 36.585255-7.452552 31.165218 53.813233-24.680529 27.971266v145.179584l24.680529 27.971267-31.165218 53.813232-36.585255-7.549338-125.822306 72.10586-11.904726 35.617391h-61.846503l-11.904726-35.617391-124.757656-72.10586-36.585255 7.549338-31.165217-53.813232 24.680529-27.971267v-145.179584l-24.680529-27.971266 31.165217-53.813233 36.585255 7.549338z m170.634405 4.355388a142.08242 142.08242 0 1 0 142.08242 142.08242 142.08242 142.08242 0 0 0-142.08242-142.179206z m0 215.25293a73.267297 73.267297 0 1 1 69.97656-73.17051 73.267297 73.267297 0 0 1-69.97656 73.17051z"  ></path><path d="M454.89603 798.971645h-84.97845a53.813233 53.813233 0 0 1-43.650661-22.067297l-219.608318-301.973535a53.813233 53.813233 0 0 1 0-60.297921l219.608318-301.973535a53.813233 53.813233 0 0 1 43.650661-22.067297h667.826087a53.813233 53.813233 0 0 1 53.813233 53.813233v235.771645a45.779962 45.779962 0 0 0 91.559924 0V107.820038A107.723251 107.723251 0 0 0 1075.587146 0H346.688847a107.432892 107.432892 0 0 0-87.688469 45.199244L17.808696 385.596975a107.723251 107.723251 0 0 0 0 118.369755l241.094896 340.204158a107.723251 107.723251 0 0 0 87.688468 44.134594h107.529679a44.715312 44.715312 0 1 0 0.483932-89.333837z"  ></path></symbol><symbol id="icon-filter" viewBox="0 0 1024 1024"><path d="M576.838723 1024a99.608736 99.608736 0 0 1-47.883891-12.120343l-132.043457-72.72206a100.291572 100.291572 0 0 1-51.895554-88.085874v-419.944286a19.716896 19.716896 0 0 0-8.108681-15.875943L31.935406 171.90573l-4.609145-4.011663A99.438027 99.438027 0 0 1 99.962966 0.001707h821.622703a100.291572 100.291572 0 0 1 73.660959 167.89236l-4.011663 4.011663-307.276307 247.101363a20.229024 20.229024 0 0 0-6.999071 15.875943v489.081455a99.8648 99.8648 0 0 1-100.035509 99.950154zM83.83096 112.157559l303.093935 242.492219a98.669836 98.669836 0 0 1 37.897411 76.819077v419.773577a20.741151 20.741151 0 0 0 10.242543 18.009806l132.043458 71.953868a20.399733 20.399733 0 0 0 20.399733 0 19.97296 19.97296 0 0 0 9.645061-17.753742v-488.22791a99.523382 99.523382 0 0 1 36.702448-78.099395l304.203544-244.9675a20.485087 20.485087 0 0 0 1.8778-20.997214 20.143669 20.143669 0 0 0-18.009806-10.242544H99.962966a19.97296 19.97296 0 0 0-16.132006 32.093303z m899.892806 399.885972H765.301525a40.458047 40.458047 0 0 1 0-80.83074h218.336887a40.458047 40.458047 0 0 1 0 80.83074z m0 149.285072H765.301525a40.458047 40.458047 0 0 1 0-80.830739h218.336887a40.458047 40.458047 0 0 1 0 80.830739z m0 148.175464H765.301525a40.458047 40.458047 0 0 1 0-80.83074h218.336887a40.458047 40.458047 0 0 1 0 80.83074z"  ></path></symbol><symbol id="icon-more" viewBox="0 0 1024 1024"><path d="M853.333333 512a85.333333 85.333333 0 1 1 85.333334 85.333333 85.333333 85.333333 0 0 1-85.333334-85.333333zM426.666667 512a85.333333 85.333333 0 1 1 85.333333 85.333333 85.333333 85.333333 0 0 1-85.333333-85.333333zM0 512a85.333333 85.333333 0 1 1 85.333333 85.333333 85.333333 85.333333 0 0 1-85.333333-85.333333z"  ></path></symbol><symbol id="icon-hidden" viewBox="0 0 1024 1024"><path d="M992.334769 347.293538a53.484308 53.484308 0 0 0-7.246769-61.046153 32.295385 32.295385 0 0 0-51.278769 8.585846c-1.811692 2.126769-179.593846 291.997538-421.415385 291.997538-234.574769 0-428.662154-294.203077-430.473846-296.329846a33.083077 33.083077 0 0 0-51.278769-4.332308 50.254769 50.254769 0 0 0-3.623385 61.046154 431.891692 431.891692 0 0 0 98.934154 137.137231L32.452923 599.906462a47.734154 47.734154 0 0 0 1.811692 61.046153 23.630769 23.630769 0 0 0 21.897847 13.154462 33.555692 33.555692 0 0 0 25.757538-13.154462l100.745846-124.219077a678.990769 678.990769 0 0 0 166.754462 102.4l-38.439385 154.860308a45.213538 45.213538 0 0 0 25.757539 54.587077h11.027692a37.179077 37.179077 0 0 0 34.816-32.768l38.439384-154.860308a429.528615 429.528615 0 0 0 91.529847 11.027693 413.538462 413.538462 0 0 0 91.529846-11.027693l38.439384 152.65477a38.754462 38.754462 0 0 0 34.816 32.768 12.524308 12.524308 0 0 0 9.216-2.12677 45.292308 45.292308 0 0 0 25.757539-54.587077l-38.990769-152.733538a679.227077 679.227077 0 0 0 166.754461-102.4l98.934154 122.092308a33.949538 33.949538 0 0 0 25.757538 13.154461 33.555692 33.555692 0 0 0 25.757539-13.154461 50.254769 50.254769 0 0 0 1.811692-61.046154l-93.341538-115.633231a303.970462 303.970462 0 0 0 93.341538-132.883692z m0 0"  ></path></symbol><symbol id="icon-left" viewBox="0 0 1024 1024"><path d="M309.248 258.474667l-207.36 207.018666a58.709333 58.709333 0 0 0 0 83.029334l207.445333 207.104a3.669333 3.669333 0 0 0 5.205334 0l57.002666-57.002667a3.669333 3.669333 0 0 0 0-5.205333l-136.533333-136.533334a3.669333 3.669333 0 0 1 2.56-6.229333h782.677333a3.669333 3.669333 0 0 0 3.242667-3.157333v-80.810667a3.669333 3.669333 0 0 0-3.669333-3.669333H237.994667a3.669333 3.669333 0 0 1-2.56-6.229334l136.106666-136.021333a3.669333 3.669333 0 0 0 0-5.205333l-57.088-57.088a3.669333 3.669333 0 0 0-5.205333 0z"  ></path></symbol><symbol id="icon-right" viewBox="0 0 1024 1024"><path d="M714.666667 258.389333l207.36 207.104a58.709333 58.709333 0 0 1 0 83.029334L714.581333 755.712a3.669333 3.669333 0 0 1-5.205333 0l-57.002667-57.088a3.669333 3.669333 0 0 1 0-5.205333l136.533334-136.533334a3.669333 3.669333 0 0 0-2.56-6.229333H3.669333a3.669333 3.669333 0 0 1-3.242666-3.669333v-80.298667a3.669333 3.669333 0 0 1 3.669333-3.669333H785.92a3.669333 3.669333 0 0 0 2.56-6.229334l-136.533333-136.533333a3.669333 3.669333 0 0 1 0-5.205333l57.002666-57.088a3.669333 3.669333 0 0 1 5.205334 0z"  ></path></symbol><symbol id="icon-loading" viewBox="0 0 1024 1024"><path d="M507.725333 981.09240634v-161.360861c45.05335 0 85.529087-8.974531 126.125287-26.923593l63.002412 152.38633a544.675725 544.675725 0 0 1-189.127699 35.898124z m355.788954-152.38633l-117.090524-112.031057a259.297688 259.297688 0 0 0 67.519793-112.091289l153.109111 53.786954a510.042468 510.042468 0 0 1-103.598612 170.335392zM994.096723 465.62908034l-162.143874 8.974531c-4.45715-44.812423-13.491912-85.167696-36.018587-125.522969l144.13458-71.675784c31.501206 58.244103 49.510499 121.005588 54.027881 188.224222z m-175.635786-340.670784l-103.598612 125.522969a346.332569 346.332569 0 0 0-112.573143-62.761484l45.05335-156.903712c63.062643 22.406211 121.607905 53.786954 171.118405 94.142227zM440.20554 17.38438934l22.526675 161.421093c-45.05335 4.45715-85.589318 22.34598-121.668137 44.752191L255.595223 80.20610534c58.545262-31.380742 117.090524-53.786954 184.670549-62.761484zM111.460643 214.58314234l130.582436 94.142227a305.073819 305.073819 0 0 0-54.027881 116.548438L30.388706 389.43591534c18.069525-62.761485 45.05335-121.06582 81.071937-174.852773zM30.388706 595.60919934l157.626492-31.32051c9.034763 44.752191 26.983824 80.650315 49.5105 116.488206l-135.099818 94.142227C70.924674 721.07193734 43.880618 662.88806534 30.388706 595.60919934z m220.689136 313.807423l85.529086-139.014881c36.018587 22.406211 76.554556 35.898124 121.607906 44.872654l-22.526675 161.360861c-67.580025-9.034763-126.065055-31.380742-184.610317-67.278866z"  ></path></symbol><symbol id="icon-model" viewBox="0 0 1024 1024"><path d="M692.404706 60.054588c-79.209412 0-147.696941 59.151059-159.744 134.927059a36.382118 36.382118 0 0 0-2.529882 13.432471l0.180705 614.52047c-16.022588 64.933647 8.914824 133.782588 65.837177 174.682353 18.371765 10.24 38.128941 17.709176 58.669176 22.226824l14.878118 2.529882 5.541647 0.602353 10.842353 0.722824 6.324706 0.12047a160.647529 160.647529 0 0 0 115.049412-47.22447 167.514353 167.514353 0 0 0 44.634353-148.660706c79.390118-10.420706 141.552941-79.751529 141.552941-160.948706a162.635294 162.635294 0 0 0-59.753412-125.108706A162.153412 162.153412 0 0 0 993.641412 416.888471c0-81.679059-62.765176-151.070118-142.576941-161.008942l1.987764-11.083294c1.084235-7.408941 1.686588-14.938353 1.686589-22.407529A163.659294 163.659294 0 0 0 692.404706 60.054588zM331.053176 60.054588a163.659294 163.659294 0 0 0-162.334117 162.334118c0 11.444706 1.264941 22.708706 3.734588 33.852235A163.84 163.84 0 0 0 32.647529 416.828235 163.599059 163.599059 0 0 0 90.112 541.515294c-37.526588 30.599529-60.235294 76.498824-60.235294 125.530353 0 79.510588 59.753412 147.877647 137.155765 160.225882l-1.807059 12.528942c-3.794824 38.972235 6.023529 78.064941 27.708235 110.652235l6.927059 10.119529c4.999529 6.746353 10.541176 13.131294 16.50447 19.034353a170.164706 170.164706 0 0 0 103.062589 43.791059l11.685647 0.421647 10.24-0.301176 9.999059-0.90353 16.865882-2.891294c29.515294-6.686118 56.621176-21.684706 78.004706-43.12847 23.190588-23.009882 38.490353-52.886588 43.610353-85.172706a36.562824 36.562824 0 0 0 3.19247-11.023059l0.421647-4.939294-0.060235-279.732706c0.722824-7.529412 0.783059-15.058824 0.120471-22.588235L493.387294 208.414118a29.816471 29.816471 0 0 0-2.108235-11.444706A163.960471 163.960471 0 0 0 331.113412 60.054588zM692.464941 134.565647c47.585882 0 87.823059 40.176941 87.823059 87.823059 0 37.767529-22.648471 70.234353-58.006588 82.944-18.853647 7.529412-29.394824 29.756235-22.287059 47.164235a36.141176 36.141176 0 0 0 34.213647 26.624 23.913412 23.913412 0 0 0 6.384941-0.602353c3.192471-0.843294 6.083765-2.409412 5.059765-2.770823 20.419765-7.408941 39.152941-18.793412 55.235765-33.430589l9.276235-9.035294 10.782118-2.650353c4.336941-1.024 8.794353-1.505882 13.251764-1.566117 47.585882 0 87.762824 40.237176 87.762824 87.823059a89.148235 89.148235 0 0 1-79.510588 87.341176l-8.432942 0.481882h-2.650353a35.659294 35.659294 0 0 0-37.225411 37.225412c0 19.636706 12.468706 34.093176 30.900706 36.74353l14.637176 0.903529a89.148235 89.148235 0 0 1 79.510588 87.341176c0 47.585882-40.176941 87.883294-87.823059 87.883295a89.148235 89.148235 0 0 1-87.341176-79.510589l-0.903529-14.697411c-2.650353-18.432-17.106824-30.840471-36.74353-30.840471a35.659294 35.659294 0 0 0-37.225412 37.225412 163.84 163.84 0 0 0 98.243765 148.841412c17.769412 29.093647 16.143059 65.596235-4.939294 95.954823a88.545882 88.545882 0 0 1-14.938353 16.745412c-35.538824 28.310588-85.353412 25.479529-117.820235-6.987294a87.883294 87.883294 0 0 1 0-125.530353 36.321882 36.321882 0 0 0 0-52.284236 37.526588 37.526588 0 0 0-19.636706-10.541176l-5.421177-0.602353v-143.36c0-16.986353 3.132235-31.744 10.059294-45.778823 9.336471-18.672941 28.551529-34.454588 50.176-42.526118 21.805176-7.288471 44.333176-5.421176 67.222589 4.638118 18.191059 10.962824 40.719059 4.216471 51.802353-14.336 10.962824-18.251294 4.216471-40.719059-14.697412-52.043295-37.406118-20.178824-81.438118-24.094118-123.78353-11.926588a146.853647 146.853647 0 0 0-31.201882 13.071059l-9.637647 5.963294V222.388706c0-47.585882 40.237176-87.823059 87.883294-87.823059z m-361.291294 0c44.754824 0 83.124706 35.599059 87.461647 79.510588l0.361412 8.252236v224.858353a141.552941 141.552941 0 0 0-37.948235-17.167059 164.562824 164.562824 0 0 0-124.205177 12.047059c-18.552471 11.143529-25.298824 33.731765-14.396235 51.922823 11.203765 18.552471 33.611294 25.298824 51.260235 14.697412 21.082353-10.420706 45.417412-12.227765 67.824941-5.059765a84.751059 84.751059 0 0 1 55.838118 56.259765l1.807059 6.023529-0.120471 169.502118a36.984471 36.984471 0 0 0-25.057882 11.083294 36.141176 36.141176 0 0 0-4.698353 46.742588l4.21647 5.059765 4.758589 4.577882 1.204706 2.650353 6.445176 10.721883a88.545882 88.545882 0 0 1-27.226353 115.290353 88.666353 88.666353 0 0 1-116.193882-13.733648 94.448941 94.448941 0 0 1-14.757647-86.13647l4.336941-11.384471 0.843294-3.011764 10.420706-4.818824a163.659294 163.659294 0 0 0 91.136-145.468235 35.659294 35.659294 0 0 0-37.165177-37.225412c-19.696941 0-34.153412 12.408471-36.743529 30.840471l-1.024 15.119058c-3.252706 31.683765-24.094118 59.873882-49.874824 71.800471-9.999059-1.024-20.540235 1.867294-24.094117 6.144a75.294118 75.294118 0 0 1-13.312 1.144471c-47.585882 0-87.823059-40.237176-87.823059-87.823059a89.148235 89.148235 0 0 1 79.450353-87.341177l14.697412-0.903529c18.371765-2.710588 30.900706-17.167059 30.900706-36.803765s-12.468706-34.093176-30.900706-36.743529l-14.637177-0.90353a89.208471 89.208471 0 0 1-79.510588-87.341176c0-47.585882 40.176941-87.883294 87.823059-87.883294 6.987294 0 14.697412 1.264941 18.191059 0.722823 19.034353 21.443765 43.429647 37.526588 70.716235 46.561883-0.602353 0-0.722824 0-0.542118 0.12047l3.493647 1.626353a13.312 13.312 0 0 0 5.421177 1.024 35.659294 35.659294 0 0 0 33.731765-25.359059c7.469176-18.672941-3.072-40.96-22.287059-48.549647a89.449412 89.449412 0 0 1-35.237647-23.009882 34.575059 34.575059 0 0 0-4.818824-7.589647l-2.409412-2.108235-3.493647-5.662118a89.148235 89.148235 0 0 1-11.685647-44.453647c0-47.585882 40.297412-87.823059 87.823059-87.823059z"  ></path></symbol><symbol id="icon-arrow" viewBox="0 0 1024 1024"><path d="M143.08864 55.13216c-24.46848-6.57408-38.80448 11.10016-34.48832 47.37024l104.0128 881.29024c2.69824 23.44448 10.7776 36.864 20.80256 39.55712 10.02496 2.69312 23.93088-5.39136 37.3504-25.75872l161.6896-244.57728a197.2224 197.2224 0 0 1 135.05536-77.98272L860.16 657.40288c47.85664-2.85184 55.61856-28.7232 17.24416-57.45152L167.936 68.28032a75.45856 75.45856 0 0 0-25.00608-13.14816h0.15872z"  ></path></symbol><symbol id="icon-ai" viewBox="0 0 1024 1024"><path d="M59.335111 635.392l71.793778 2.332444-2.275556 86.129778L512 942.648889l239.502222-134.997333 36.010667 62.748444-2.446222 2.332444L509.553778 1024h-2.275556L56.888889 763.278222l2.446222-127.886222z m637.155556-535.324444L967.111111 258.389333l-4.778667 512-107.804444 62.862223-35.896889-62.919112 74.296889-41.813333 4.721778-428.202667-239.559111-141.994666 38.4-58.197334zM495.274667 302.648889c19.114667 0 26.339556 11.662222 35.953777 23.324444l2.389334 2.275556 179.655111 335.132444a34.133333 34.133333 0 0 1 0 41.984 35.214222 35.214222 0 0 1-48.924445 7.111111 33.393778 33.393778 0 0 1-10.979555-14.165333l-16.839111-32.654222-35.953778-65.137778a204.458667 204.458667 0 0 0-12.060444-18.773333l-38.229334 72.248889c-7.224889 16.327111-16.839111 30.321778-24.007111 46.535111a32.540444 32.540444 0 0 1-11.207111 14.222222 33.905778 33.905778 0 0 1-48.696889-9.557333 38.229333 38.229333 0 0 1 2.446222-41.927111l50.289778-90.737778c7.168-16.327111 16.782222-30.321778 23.893333-46.648889a27.363556 27.363556 0 0 0 0-32.540445c-16.782222-27.875556-28.785778-55.808-45.511111-83.797333a32.085333 32.085333 0 0 0-12.003555 18.659556L413.582222 560.696889l-69.233778 132.892444a52.963556 52.963556 0 0 1-31.061333 27.932445 33.450667 33.450667 0 0 1-30.72-9.159111 31.459556 31.459556 0 0 1-7.68-30.378667c1.877333-5.688889 4.266667-11.093333 7.111111-16.384C341.902222 553.870222 399.36 444.472889 459.207111 332.8c7.281778-18.602667 16.952889-30.264889 36.067556-30.264889zM519.111111 0l107.804445 65.137778-36.010667 60.529778-74.183111-44.145778-385.706667 209.351111V558.648889H59.221333l2.389334-309.589333L519.111111 0z m174.876445 332.8a63.544889 63.544889 0 0 1 42.666666 20.935111 59.960889 59.960889 0 0 1 14.791111 44.202667c-1.649778 15.928889-9.500444 30.606222-21.959111 41.073778-12.515556 10.410667-28.672 15.758222-45.112889 14.904888a61.952 61.952 0 0 1-43.975111-18.887111 58.424889 58.424889 0 0 1-15.928889-44.088889 58.823111 58.823111 0 0 1 21.504-43.975111 62.464 62.464 0 0 1 48.014223-14.165333z"  ></path></symbol><symbol id="icon-smart" viewBox="0 0 1024 1024"><path d="M981.414551 537.238588c-27.768471-128.662588-119.386353-256.240941-196.005647-234.074353-27.467294 7.890824-48.489412 22.407529-62.102589 42.405647-24.696471-11.444706-49.995294-12.589176-74.752-1.686588-18.130824 7.830588-33.310118 21.202824-43.309176 38.189177-28.491294-14.396235-61.259294-14.095059-95.593412 2.048a115.290353 115.290353 0 0 0-20.720941 12.288c-83.727059-118.302118-152.094118-171.670588-213.714824-157.696-87.341176 19.757176-87.341176 95.894588-21.082353 195.584l127.096471 196.608c-69.692235-13.131294-120.169412-1.807059-150.106353 38.128941-48.911059 65.355294 2.891294 125.771294 123.060706 179.862588l232.327529 103.303529a34.394353 34.394353 0 0 0 27.949177-62.885647L382.314315 786.070588c-46.863059-21.082353-77.763765-40.839529-92.039529-57.46447-8.252235-9.637647-8.493176-12.348235-3.97553-18.371765 16.986353-22.708706 69.872941-22.708706 161.912471 11.625412 31.081412 11.625412 58.910118-23.070118 40.96-50.898824L311.718551 396.589176c-44.092235-66.379294-44.092235-85.534118-21.323295-90.714352 30.177882-6.806588 93.726118 53.127529 178.05553 183.41647 6.324706 14.938353 16.263529 30.539294 29.515294 46.260706 27.346824 32.527059 77.824-3.855059 55.657412-40.116706-8.131765-13.312-16.384-26.503529-24.816941-39.634823 0.602353-4.035765 4.216471-6.625882 10.059294-9.396706 24.094118-11.324235 39.213176-6.987294 56.139294 16.865882a34.394353 34.394353 0 0 0 62.403765-17.829647c1.385412-22.768941 7.710118-33.611294 18.853647-38.550588 9.637647-4.216471 21.684706-0.602353 40.357647 17.227294a34.394353 34.394353 0 0 0 58.006588-21.865412c1.566118-17.829647 9.697882-27.166118 29.936941-33.008941 21.202824-6.144 89.389176 88.907294 109.628235 182.512941 14.576941 67.343059 14.576941 147.335529-0.361411 239.977412a34.394353 34.394353 0 1 0 68.005647 10.902588c16.143059-100.592941 16.143059-189.018353-0.421647-265.396706z"  ></path><path d="M284.793374 925.033412H137.939727a39.574588 39.574588 0 0 1-38.972235-40.176941V139.143529c0-22.287059 17.588706-40.176941 38.972235-40.176941h403.877647c21.443765 0 39.032471 17.829647 39.032471 40.176941a34.394353 34.394353 0 1 0 68.788706 0A108.423529 108.423529 0 0 0 541.817374 30.117647H137.939727A108.423529 108.423529 0 0 0 30.118551 139.143529v745.712942c0 60.114824 48.188235 109.025882 107.821176 109.025882h146.853647a34.394353 34.394353 0 1 0 0-68.848941z"  ></path></symbol><symbol id="icon-polygon" viewBox="0 0 1024 1024"><path d="M835.008 568.96V404.48a126.592 126.592 0 0 0-39.808-246.528 125.952 125.952 0 0 0-97.408 44.416L352.384 103.616a126.592 126.592 0 1 0-164.352 143.168v530.304a126.592 126.592 0 1 0 164.352 140.544l368.64-125.312c21.376 16.128 47.36 24.96 74.24 25.152a126.592 126.592 0 0 0 39.68-246.528v-2.048z m-39.808-331.52a47.104 47.104 0 1 1 0 94.208 47.104 47.104 0 0 1 0-94.144z m-39.744 167.04v164.48a125.952 125.952 0 0 0-86.848 119.296c0 11.52 1.792 22.848 5.312 33.792L339.2 836.032a125.312 125.312 0 0 0-71.68-60.928V244.8a127.296 127.296 0 0 0 73.6-66.304l331.52 92.8v8.64a127.296 127.296 0 0 0 82.816 124.608zM225.152 79.808a47.04 47.04 0 0 1 47.744 47.04 47.744 47.744 0 1 1-94.848 0 47.04 47.04 0 0 1 49.728-47.04h-2.624z m0 861.696a47.04 47.04 0 1 1 47.744-47.04 47.04 47.04 0 0 1-45.12 47.744l-2.624-0.64z m567.424-206.08a47.68 47.68 0 1 1 47.68-47.808 47.04 47.04 0 0 1-45.056 48.448l-2.624-0.64z"  ></path></symbol><symbol id="icon-polyline" viewBox="0 0 1024 1024"><path d="M871.570286 1024c-82.578286 0-146.066286-64-146.066286-147.163429 0-19.236571 6.363429-44.836571 12.726857-64v-6.436571L204.726857 275.163429h-12.726857v454.436571h6.363429c44.470857 12.8 76.214857 51.2 88.941714 89.6 25.380571 76.8-12.726857 166.4-88.941714 192-12.726857 12.8-31.744 12.8-50.834286 12.8-63.488 0-120.685714-38.4-139.702857-102.4-25.380571-76.8 12.726857-166.4 88.941714-192h6.363429v-435.2h-6.363429A161.718857 161.718857 0 0 1 1.462857 147.163429C1.462857 70.436571 71.314286 0 147.529143 0c82.651429 0 146.139429 70.436571 146.139428 153.6 0 19.163429-6.363429 44.763429-12.726857 64v6.363429l520.777143 524.873142h6.363429c6.363429 0 12.653714-6.436571 12.653714-6.436571h6.363429V294.4h-6.363429c-44.397714-12.8-76.141714-51.2-88.868571-89.6C706.413714 128 744.594286 38.4 820.662857 12.8c19.017143-12.8 31.817143-12.8 50.834286-12.8 63.488 0 120.685714 38.4 139.702857 102.4 12.726857 38.4 12.726857 76.8-6.363429 115.2-19.017143 38.4-44.397714 64-82.505142 76.8h-6.363429v441.563429h6.363429c57.124571 19.236571 101.595429 76.8 101.595428 140.873142-6.363429 83.163429-69.851429 147.163429-152.429714 147.163429z m-724.041143-204.8a57.124571 57.124571 0 0 0-57.124572 57.636571c0 38.326857 25.380571 64 57.124572 64 19.017143 0 31.817143-6.436571 44.470857-19.236571 12.726857-12.8 19.017143-25.6 12.726857-44.763429 0-32.036571-19.017143-57.636571-57.197714-57.636571z m717.677714-6.363429c-12.653714 0-31.744 6.363429-38.034286 19.163429-12.726857 12.8-19.090286 25.6-12.726857 44.836571a57.124571 57.124571 0 1 0 114.322286 0c0-12.8-6.363429-32.036571-12.726857-44.836571a435.712 435.712 0 0 0-50.834286-19.163429zM147.529143 89.6a57.124571 57.124571 0 0 0-57.124572 57.636571 57.124571 57.124571 0 1 0 114.322286 0c6.363429-32.036571-19.017143-57.636571-57.197714-57.636571z m666.916571 64c0 32.036571 25.380571 57.636571 57.124572 57.636571 31.744 0 57.124571-25.6 63.488-57.636571 0-38.4-25.380571-64-57.124572-64-44.470857 0-69.851429 32.036571-63.488 64z"  ></path></symbol></svg>',function(h){var a=(a=document.getElementsByTagName("script"))[a.length-1],l=a.getAttribute("data-injectcss"),a=a.getAttribute("data-disable-injectsvg");if(!a){var c,t,o,v,z,m=function(a,l){l.parentNode.insertBefore(a,l)};if(l&&!h.__iconfont__svg__cssinject__){h.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(a){console&&console.log(a)}}c=function(){var a,l=document.createElement("div");l.innerHTML=h._iconfont_svg_string_4374613,(l=l.getElementsByTagName("svg")[0])&&(l.setAttribute("aria-hidden","true"),l.style.position="absolute",l.style.width=0,l.style.height=0,l.style.overflow="hidden",l=l,(a=document.body).firstChild?m(l,a.firstChild):a.appendChild(l))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(c,0):(t=function(){document.removeEventListener("DOMContentLoaded",t,!1),c()},document.addEventListener("DOMContentLoaded",t,!1)):document.attachEvent&&(o=c,v=h.document,z=!1,e(),v.onreadystatechange=function(){"complete"==v.readyState&&(v.onreadystatechange=null,i())})}function i(){z||(z=!0,o())}function e(){try{v.documentElement.doScroll("left")}catch(a){return void setTimeout(e,50)}i()}}(window);
\ No newline at end of file
diff --git a/frontend/image-tool/public/iconfont/iconfont.json b/frontend/image-tool/public/iconfont/iconfont.json
new file mode 100644
index 00000000..aede06d0
--- /dev/null
+++ b/frontend/image-tool/public/iconfont/iconfont.json
@@ -0,0 +1,303 @@
+{
+  "id": "4374613",
+  "name": "image-tool-open",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "图片工具开源",
+  "glyphs": [
+    {
+      "icon_id": "29769749",
+      "name": "cube",
+      "font_class": "cube",
+      "unicode": "e736",
+      "unicode_decimal": 59190
+    },
+    {
+      "icon_id": "32271488",
+      "name": "play",
+      "font_class": "play",
+      "unicode": "e741",
+      "unicode_decimal": 59201
+    },
+    {
+      "icon_id": "32271490",
+      "name": "replay",
+      "font_class": "replay",
+      "unicode": "e743",
+      "unicode_decimal": 59203
+    },
+    {
+      "icon_id": "32271492",
+      "name": "backup",
+      "font_class": "backup",
+      "unicode": "e745",
+      "unicode_decimal": 59205
+    },
+    {
+      "icon_id": "32271493",
+      "name": "forward",
+      "font_class": "forward",
+      "unicode": "e746",
+      "unicode_decimal": 59206
+    },
+    {
+      "icon_id": "32608846",
+      "name": "ongoing",
+      "font_class": "Frame23",
+      "unicode": "e750",
+      "unicode_decimal": 59216
+    },
+    {
+      "icon_id": "34058418",
+      "name": "Crop non-first",
+      "font_class": "crop-non-first",
+      "unicode": "e769",
+      "unicode_decimal": 59241
+    },
+    {
+      "icon_id": "34058419",
+      "name": "Crop the first",
+      "font_class": "crop-first",
+      "unicode": "e76a",
+      "unicode_decimal": 59242
+    },
+    {
+      "icon_id": "553250",
+      "name": "transform",
+      "font_class": "transform",
+      "unicode": "e621",
+      "unicode_decimal": 58913
+    },
+    {
+      "icon_id": "16082215",
+      "name": "point",
+      "font_class": "point",
+      "unicode": "e60d",
+      "unicode_decimal": 58893
+    },
+    {
+      "icon_id": "23422758",
+      "name": "reset",
+      "font_class": "reset",
+      "unicode": "e61a",
+      "unicode_decimal": 58906
+    },
+    {
+      "icon_id": "26196680",
+      "name": "rotate-right",
+      "font_class": "rotate90",
+      "unicode": "e6de",
+      "unicode_decimal": 59102
+    },
+    {
+      "icon_id": "26196684",
+      "name": "rotate-left",
+      "font_class": "rotate270",
+      "unicode": "e6e0",
+      "unicode_decimal": 59104
+    },
+    {
+      "icon_id": "28765080",
+      "name": "information",
+      "font_class": "information",
+      "unicode": "e6fe",
+      "unicode_decimal": 59134
+    },
+    {
+      "icon_id": "32195920",
+      "name": "hollow",
+      "font_class": "hollow",
+      "unicode": "e620",
+      "unicode_decimal": 58912
+    },
+    {
+      "icon_id": "34047962",
+      "name": "cancel-hollow",
+      "font_class": "cancel-hollow",
+      "unicode": "e752",
+      "unicode_decimal": 59218
+    },
+    {
+      "icon_id": "34059152",
+      "name": "hotkey",
+      "font_class": "hotkey",
+      "unicode": "e767",
+      "unicode_decimal": 59239
+    },
+    {
+      "icon_id": "7405528",
+      "name": "rect",
+      "font_class": "rect",
+      "unicode": "e67c",
+      "unicode_decimal": 59004
+    },
+    {
+      "icon_id": "28765334",
+      "name": "save",
+      "font_class": "save",
+      "unicode": "e703",
+      "unicode_decimal": 59139
+    },
+    {
+      "icon_id": "28765336",
+      "name": "help",
+      "font_class": "help",
+      "unicode": "e704",
+      "unicode_decimal": 59140
+    },
+    {
+      "icon_id": "28765362",
+      "name": "fullscreen",
+      "font_class": "fullscreen",
+      "unicode": "e705",
+      "unicode_decimal": 59141
+    },
+    {
+      "icon_id": "28765402",
+      "name": "exitfullscreen",
+      "font_class": "exitfullscreen",
+      "unicode": "e706",
+      "unicode_decimal": 59142
+    },
+    {
+      "icon_id": "28766072",
+      "name": "info",
+      "font_class": "info",
+      "unicode": "e70b",
+      "unicode_decimal": 59147
+    },
+    {
+      "icon_id": "28766074",
+      "name": "setting",
+      "font_class": "setting",
+      "unicode": "e70c",
+      "unicode_decimal": 59148
+    },
+    {
+      "icon_id": "28766268",
+      "name": "toleft",
+      "font_class": "toleft",
+      "unicode": "e712",
+      "unicode_decimal": 59154
+    },
+    {
+      "icon_id": "28766291",
+      "name": "toright",
+      "font_class": "toright",
+      "unicode": "e713",
+      "unicode_decimal": 59155
+    },
+    {
+      "icon_id": "28766446",
+      "name": "remind",
+      "font_class": "remind",
+      "unicode": "e71a",
+      "unicode_decimal": 59162
+    },
+    {
+      "icon_id": "28766552",
+      "name": "view",
+      "font_class": "view",
+      "unicode": "e71f",
+      "unicode_decimal": 59167
+    },
+    {
+      "icon_id": "28766555",
+      "name": "delete",
+      "font_class": "delete",
+      "unicode": "e721",
+      "unicode_decimal": 59169
+    },
+    {
+      "icon_id": "28766569",
+      "name": "editlabel",
+      "font_class": "editlabel",
+      "unicode": "e722",
+      "unicode_decimal": 59170
+    },
+    {
+      "icon_id": "28766583",
+      "name": "filter",
+      "font_class": "filter",
+      "unicode": "e724",
+      "unicode_decimal": 59172
+    },
+    {
+      "icon_id": "28940596",
+      "name": "more",
+      "font_class": "more",
+      "unicode": "e72d",
+      "unicode_decimal": 59181
+    },
+    {
+      "icon_id": "28941931",
+      "name": "hidden",
+      "font_class": "hidden",
+      "unicode": "e72f",
+      "unicode_decimal": 59183
+    },
+    {
+      "icon_id": "28942286",
+      "name": "left",
+      "font_class": "left",
+      "unicode": "e730",
+      "unicode_decimal": 59184
+    },
+    {
+      "icon_id": "28942378",
+      "name": "right",
+      "font_class": "right",
+      "unicode": "e731",
+      "unicode_decimal": 59185
+    },
+    {
+      "icon_id": "29769750",
+      "name": "loading ",
+      "font_class": "loading",
+      "unicode": "e737",
+      "unicode_decimal": 59191
+    },
+    {
+      "icon_id": "29769751",
+      "name": "model",
+      "font_class": "model",
+      "unicode": "e738",
+      "unicode_decimal": 59192
+    },
+    {
+      "icon_id": "33261081",
+      "name": "arrow",
+      "font_class": "arrow",
+      "unicode": "e751",
+      "unicode_decimal": 59217
+    },
+    {
+      "icon_id": "34058413",
+      "name": "ai",
+      "font_class": "ai",
+      "unicode": "e764",
+      "unicode_decimal": 59236
+    },
+    {
+      "icon_id": "34058415",
+      "name": "smart",
+      "font_class": "smart",
+      "unicode": "e766",
+      "unicode_decimal": 59238
+    },
+    {
+      "icon_id": "36275522",
+      "name": "polygon",
+      "font_class": "polygon",
+      "unicode": "e601",
+      "unicode_decimal": 58881
+    },
+    {
+      "icon_id": "36275575",
+      "name": "polyline",
+      "font_class": "polyline",
+      "unicode": "e602",
+      "unicode_decimal": 58882
+    }
+  ]
+}
diff --git a/frontend/image-tool/public/iconfont/iconfont.ttf b/frontend/image-tool/public/iconfont/iconfont.ttf
new file mode 100644
index 00000000..18f61e1a
Binary files /dev/null and b/frontend/image-tool/public/iconfont/iconfont.ttf differ
diff --git a/frontend/image-tool/public/iconfont/iconfont.woff b/frontend/image-tool/public/iconfont/iconfont.woff
new file mode 100644
index 00000000..706bbb19
Binary files /dev/null and b/frontend/image-tool/public/iconfont/iconfont.woff differ
diff --git a/frontend/image-tool/public/iconfont/iconfont.woff2 b/frontend/image-tool/public/iconfont/iconfont.woff2
new file mode 100644
index 00000000..15b04429
Binary files /dev/null and b/frontend/image-tool/public/iconfont/iconfont.woff2 differ
diff --git a/frontend/image-tool/public/iconfont/selection.json b/frontend/image-tool/public/iconfont/selection.json
deleted file mode 100644
index 469320dc..00000000
--- a/frontend/image-tool/public/iconfont/selection.json
+++ /dev/null
@@ -1 +0,0 @@
-{"IcoMoonType":"selection","icons":[{"icon":{"paths":["M150.991 102.401h531.21v102.401h106.24v-204.803h-743.692v716.806h212.483v-102.399h-106.241v-512.006z","M894.707 307.219v102.401h106.24v512.006h-531.206v-102.4h-106.241v204.8h743.687v-716.807h-212.48z","M788.467 307.219h-424.967v409.607h424.967v-409.607zM682.227 614.422h-212.486v-204.803h212.486v204.803z"],"attrs":[],"width":1152,"isMulticolor":false,"isMulticolor2":false,"grid":32,"tags":["polyon-hollow"],"colorPermutations":{}},"attrs":[],"properties":{"order":111,"id":54,"name":"polygon-hollow","prevSize":32,"code":59700},"setIdx":0,"setId":2,"iconIdx":0},{"icon":{"paths":["M872.376 200.458c0-12.55-4.759-24.992-14.173-34.405-18.932-18.933-49.875-18.933-68.807 0l-563.458 563.457c-9.412 9.415-14.173 21.962-14.173 34.406 0 12.439 4.653 24.883 14.173 34.4 18.933 18.938 49.876 18.938 68.809 0l563.455-563.454c9.415-9.412 14.173-21.962 14.173-34.405z","M536.986 487.92c13.416-14.497 28.887-25.642 46.197-33.431l-288.436-288.436c-18.933-18.933-49.876-18.933-68.809 0-9.412 9.412-14.173 21.855-14.173 34.405 0 12.442 4.761 24.992 14.173 34.405l285.082 285.083c6.925-11.685 15.58-22.288 25.966-32.025z","M612.412 882.839c-23.045 4-46.522 6.054-70.324 6.054-54.853 0-108.083-10.71-158.175-31.913-48.361-20.45-91.854-49.766-129.179-87.203-37.326-37.328-66.646-80.818-87.202-129.289-21.205-50.091-31.916-103.321-31.916-158.174s10.711-108.083 31.916-158.175c20.448-48.361 49.768-91.854 87.202-129.288 37.325-37.326 80.818-66.646 129.179-87.202 50.092-21.205 103.322-31.916 158.175-31.916s108.080 10.711 158.177 31.916c48.357 20.448 91.853 49.768 129.283 87.202 37.328 37.325 66.65 80.818 87.203 129.288 21.209 50.092 31.919 103.322 31.919 158.175 0 23.802-2.054 47.171-6.060 70.216h76.601c3.349-22.936 5.084-46.414 5.084-70.324 0-266.257-215.95-482.206-482.207-482.206s-482.206 215.948-482.206 482.206c0 266.26 215.949 482.203 482.206 482.203 23.91 0 47.388-1.729 70.324-5.084v-76.487zM978.745 732.124l-186.735 186.741c-16.878 16.878-44.357 16.878-61.235 0s-16.878-44.357 0-61.235l186.735-186.741c16.878-16.878 44.357-16.878 61.235 0 16.77 16.878 16.77 44.466 0 61.235z","M792.010 670.901l186.741 186.735c16.878 16.878 16.878 44.357 0 61.235s-44.363 16.878-61.235 0l-186.741-186.735c-16.878-16.878-16.878-44.357 0-61.235 16.878-16.77 44.466-16.77 61.235 0z"],"attrs":[],"width":1084,"isMulticolor":false,"isMulticolor2":false,"grid":32,"tags":["cancel-hollow"],"colorPermutations":{}},"attrs":[],"properties":{"order":112,"id":53,"name":"cancel-hollow","prevSize":32,"code":59701},"setIdx":0,"setId":2,"iconIdx":1},{"icon":{"paths":["M518.529 315.965c-3.389 0-5.081 0-8.466-1.692l-86.363-50.803c-5.081-3.389-8.466-8.466-8.466-15.242s3.389-11.853 8.466-15.242l196.437-115.151c40.643-23.707 91.442-25.399 133.782-5.080l33.866 16.934c5.080 3.389 8.466 8.466 8.466 15.242s-3.389 11.853-8.466 15.242l-262.466 152.407c-1.692 1.692-3.389 3.389-6.773 3.389h-0.010z","M196.505 442.965c0 9.351-7.581 16.934-16.934 16.934s-16.934-7.581-16.934-16.934c0-9.351 7.581-16.934 16.934-16.934s16.934 7.581 16.934 16.934z","M440.468 334.58l-86.363-50.802c-5.081-3.389-11.853-3.389-16.934 0l-77.898 45.722c-13.546 8.466-30.48 10.161-44.030 5.080-32.177-10.161-66.045-6.772-93.135 10.162-54.191 32.176-72.818 101.605-42.333 155.791 15.242 25.399 38.949 45.722 67.736 52.494 10.162 3.389 20.324 3.389 28.788 3.389 20.323 0 38.949-5.081 57.575-15.242 32.176-18.626 54.191-52.495 57.575-91.444l149.019-86.363c5.081-3.389 8.466-8.466 8.466-15.242s-3.389-10.161-8.466-13.546zM179.682 492.069c-27.096 0-49.11-22.015-49.11-49.111s22.015-49.11 49.11-49.11c27.096 0 49.11 22.015 49.11 49.11s-22.015 49.111-49.11 49.111z","M196.505 155.080c0 9.351-7.581 16.934-16.934 16.934s-16.934-7.581-16.934-16.934c0-9.351 7.581-16.934 16.934-16.934s16.934 7.581 16.934 16.934z","M787.627 436.187l-496.178-289.562c-3.389-37.258-23.706-72.818-57.575-91.444-25.399-15.242-55.883-18.626-86.363-11.853-28.787 8.466-54.191 27.096-67.736 52.494-30.48 54.191-11.853 125.312 42.333 155.791 27.096 16.934 60.964 20.323 91.444 10.161 15.242-5.080 30.479-3.389 44.029 5.081l362.391 211.685c22.015 13.546 45.722 18.626 71.124 18.626 22.020 0 42.336-5.080 62.658-15.242l33.866-16.934c5.080-3.389 8.466-8.466 8.466-15.242 0-3.389-3.389-10.161-8.466-13.546l0.013-0.020zM179.704 204.179c-27.096 0-49.111-22.015-49.111-49.11s22.015-49.111 49.111-49.111c27.096 0 49.11 22.015 49.11 49.111s-22.015 49.11-49.11 49.11z","M430.321 315.97c-1.692 0-5.080 0-6.772-1.692s-3.389-1.692-5.081-3.389c-1.692-1.692-3.389-3.389-3.389-5.080s-1.692-5.081-1.692-6.773c0-1.692 0-5.080 1.692-6.773s1.692-3.389 3.389-5.080c1.692-1.692 3.389-3.389 5.081-3.389 3.389-1.692 6.772-1.692 10.161-1.692 1.692 0 1.692 0 3.389 1.692 1.692 0 1.692 0 3.389 1.692 1.692 0 1.692 1.692 3.389 1.692 3.389 3.389 5.081 6.773 5.081 11.853s-1.692 8.466-5.081 11.853c-1.692 1.692-3.389 3.389-5.081 3.389-3.389 1.692-6.772 1.692-8.466 1.692z","M154.108 668.198c-17.143 0-28.576-6.772-28.576-16.933v-50.805c0-10.161 11.428-16.934 28.576-16.934s28.575 6.773 28.575 16.934v50.805c0 8.466-14.288 16.933-28.575 16.933z","M154.108 825.669c-17.143 0-28.576-6.772-28.576-16.933v-77.899c0-10.161 11.428-16.933 28.576-16.933s28.575 6.772 28.575 16.933v77.899c0 8.466-14.288 16.933-28.575 16.933z","M216.968 983.999h-68.579c-13.717 0-22.862-9.145-22.862-22.862v-68.577c0-13.717 9.144-22.862 22.862-22.862s22.861 9.145 22.861 22.862v45.719h45.718c13.717 0 22.862 9.145 22.862 22.859 0 13.717-11.428 22.862-22.862 22.862z","M951.706 977.653h-94.832c-10.161 0-16.933-11.427-16.933-28.575s6.772-28.575 16.933-28.575h94.832c10.161 0 16.939 11.427 16.939 28.575s-6.779 28.575-16.939 28.575zM762.046 977.653h-94.832c-10.161 0-16.932-11.427-16.932-28.575s6.772-28.575 16.932-28.575h94.832c10.161 0 16.933 11.427 16.933 28.575s-8.466 28.575-16.933 28.575zM572.383 977.653h-94.832c-10.161 0-16.934-11.427-16.934-28.575s6.773-28.575 16.934-28.575h94.832c10.161 0 16.934 11.427 16.934 28.575s-8.466 28.575-16.934 28.575zM382.724 977.653h-94.833c-10.161 0-16.934-11.427-16.934-28.575s6.773-28.575 16.934-28.575h94.833c10.161 0 16.934 11.427 16.934 28.575s-8.466 28.575-16.934 28.575z","M1095.98 983.999h-68.584c-13.714 0-22.859-9.145-22.859-22.862 0-13.714 9.145-22.859 22.859-22.859h45.719v-45.719c0-13.717 9.145-22.862 22.862-22.862 13.714 0 22.859 9.145 22.859 22.862v68.577c0 13.717-9.145 22.862-22.859 22.862z","M1090.27 782.927c-17.139 0-28.575-6.53-28.575-16.324v-102.87c0-9.794 11.433-16.324 28.575-16.324 17.143 0 28.582 6.53 28.582 16.324v102.87c0 8.161-11.433 16.324-28.582 16.324zM1090.27 575.568c-17.139 0-28.575-6.53-28.575-16.328v-102.867c0-9.797 11.433-16.328 28.575-16.328 17.143 0 28.582 6.53 28.582 16.328v102.867c0 8.166-11.433 16.328-28.582 16.328z","M1095.98 396.376c-13.717 0-22.862-9.144-22.862-22.862v-45.718h-45.719c-13.714 0-22.859-9.144-22.859-22.862s9.145-22.861 22.859-22.861h68.584c13.714 0 22.859 9.144 22.859 22.861v68.58c0 11.428-9.145 22.862-22.859 22.862z","M929.98 339.248h-116.846c-10.167 0-16.939-11.428-16.939-28.576s6.772-28.576 16.939-28.576h116.846c10.161 0 16.933 11.429 16.933 28.576s-6.772 28.576-16.933 28.576z","M697.993 339.248h-50.802c-10.162 0-16.934-11.428-16.934-28.576s6.772-28.576 16.934-28.576h50.802c10.161 0 16.933 11.429 16.933 28.576s-6.772 28.576-16.933 28.576z"],"attrs":[],"width":1184,"isMulticolor":false,"isMulticolor2":false,"grid":32,"tags":["polygon_clip"],"colorPermutations":{}},"attrs":[],"properties":{"order":55,"id":49,"name":"polygon-clip","prevSize":32,"code":59697},"setIdx":0,"setId":2,"iconIdx":2},{"icon":{"paths":["M965.569 130.968c67.618 0 122.432 54.815 122.432 122.432v0 517.202c0 67.618-54.815 122.432-122.432 122.432v0h-843.139c-67.618 0-122.432-54.815-122.432-122.432v-517.202c0-67.618 54.815-122.432 122.432-122.432v0h843.139zM965.569 212.589h-843.139c-22.538 0-40.811 18.273-40.811 40.811v0 517.202c0 22.527 18.284 40.811 40.811 40.811h843.139c22.538 0 40.811-18.273 40.811-40.811v0-517.202c0-22.538-18.273-40.811-40.811-40.811v0zM258.464 647.897h571.344c22.533 0.007 40.799 18.276 40.799 40.811 0 20.577-15.23 37.596-35.029 40.404l-0.218 0.027-5.552 0.381h-571.344c-22.533-0.007-40.799-18.276-40.799-40.811 0-20.577 15.23-37.596 35.029-40.404l0.218-0.027 5.552-0.381zM788.998 457.451c30.052 0 54.413 24.361 54.413 54.413s-24.361 54.413-54.413 54.413v0c-30.052 0-54.413-24.361-54.413-54.413s24.361-54.413 54.413-54.413v0zM462.787 457.451c30.052 0 54.413 24.361 54.413 54.413s-24.361 54.413-54.413 54.413v0c-30.052 0-54.413-24.361-54.413-54.413s24.361-54.413 54.413-54.413v0zM299.547 457.451c30.052 0 54.413 24.361 54.413 54.413s-24.361 54.413-54.413 54.413v0c-30.052 0-54.413-24.361-54.413-54.413s24.361-54.413 54.413-54.413v0zM626.028 457.451c30.052 0 54.413 24.361 54.413 54.413s-24.361 54.413-54.413 54.413v0c-30.052 0-54.413-24.361-54.413-54.413s24.361-54.413 54.413-54.413v0zM217.653 294.207c30.052 0 54.413 24.361 54.413 54.413s-24.361 54.413-54.413 54.413v0c-30.052 0-54.413-24.361-54.413-54.413s24.361-54.413 54.413-54.413v0zM380.624 294.207c30.052 0 54.413 24.361 54.413 54.413s-24.361 54.413-54.413 54.413v0c-30.052 0-54.413-24.361-54.413-54.413s24.361-54.413 54.413-54.413v0zM543.864 294.207c30.052 0 54.413 24.361 54.413 54.413s-24.361 54.413-54.413 54.413v0c-30.052 0-54.413-24.361-54.413-54.413s24.361-54.413 54.413-54.413v0zM707.107 294.207c30.052 0 54.413 24.361 54.413 54.413s-24.361 54.413-54.413 54.413v0c-30.052 0-54.413-24.361-54.413-54.413s24.361-54.413 54.413-54.413v0zM870.347 294.207c30.052 0 54.413 24.361 54.413 54.413s-24.361 54.413-54.413 54.413v0c-30.052 0-54.413-24.361-54.413-54.413s24.361-54.413 54.413-54.413v0z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"grid":32,"tags":["keyboard"],"colorPermutations":{},"width":1088},"attrs":[],"properties":{"order":56,"id":50,"name":"keyboard","prevSize":32,"code":59698},"setIdx":0,"setId":2,"iconIdx":3},{"icon":{"paths":["M749.022 594.044h-100.282v-164.094h100.282c85.593 0 154.978-69.385 154.978-154.978s-69.385-154.978-154.978-154.978c-85.593 0-154.978 69.385-154.978 154.978v0 100.282h-164.094v-100.282c0-85.593-69.385-154.978-154.978-154.978s-154.978 69.385-154.978 154.978c0 85.593 69.385 154.978 154.978 154.978v0h100.282v164.094h-100.282c-85.593 0-154.978 69.385-154.978 154.978s69.385 154.978 154.978 154.978c85.593 0 154.978-69.385 154.978-154.978v0-100.282h164.094v100.282c0 85.593 69.385 154.978 154.978 154.978s154.978-69.385 154.978-154.978c0-85.593-69.385-154.978-154.978-154.978v0zM648.746 274.978c0-55.381 44.895-100.282 100.282-100.282s100.282 44.895 100.282 100.282c0 55.381-44.895 100.282-100.282 100.282v0h-100.282zM174.696 274.978c0-55.381 44.895-100.282 100.282-100.282s100.282 44.895 100.282 100.282v0 100.282h-100.282c-55.278-0.256-100.020-44.998-100.282-100.254v-0.028zM375.254 749.022c0 55.381-44.895 100.282-100.282 100.282s-100.282-44.895-100.282-100.282c0-55.381 44.895-100.282 100.282-100.282v0h100.282zM429.956 429.956h164.094v164.094h-164.094zM749.022 849.304c-55.278-0.256-100.020-44.998-100.282-100.254v-100.304h100.282c55.381 0 100.282 44.895 100.282 100.282s-44.895 100.282-100.282 100.282v0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":32,"tags":["command"]},"attrs":[{}],"properties":{"order":57,"id":51,"name":"command","prevSize":32,"code":59699},"setIdx":0,"setId":2,"iconIdx":4},{"icon":{"paths":["M358.39 1024c-11.024-0.165-20.77-5.496-26.945-13.673l-0.063-0.087c-7.097-8.543-11.403-19.624-11.403-31.71 0-0.372 0.004-0.743 0.012-1.113l-0.001 0.055v-93.12c-0.006-0.287-0.009-0.625-0.009-0.964 0-12.065 4.28-23.131 11.405-31.761l-0.068 0.085c6.189-8.365 15.994-13.749 27.060-13.824l0.012-0h38.4v-279.424h-38.4c-11.024-0.165-20.77-5.496-26.945-13.673l-0.063-0.087c-7.096-8.542-11.402-19.623-11.402-31.709 0-0.35 0.004-0.699 0.011-1.047l-0.001 0.052v-93.12c-0.006-0.279-0.009-0.608-0.009-0.937 0-12.095 4.279-23.19 11.406-31.854l-0.069 0.087c6.213-8.325 16.009-13.679 27.059-13.76l0.013-0h230.4c11.019 0.128 20.771 5.441 26.946 13.61l0.062 0.086c7.020 8.565 11.274 19.631 11.274 31.69 0 0.356-0.004 0.712-0.011 1.067l0.001-0.053v419.008h38.4c11.019 0.128 20.771 5.441 26.946 13.61l0.062 0.086c7.173 8.679 11.524 19.921 11.524 32.179 0 0.23-0.002 0.459-0.005 0.688l0-0.035v93.12c0.006 0.285 0.009 0.622 0.009 0.959 0 12.087-4.28 23.175-11.406 31.831l0.069-0.086c-6.246 8.298-16.016 13.653-27.045 13.824l-0.027 0zM435.19 232.576c-11.029-0.144-20.782-5.481-26.945-13.672l-0.063-0.088c-7.096-8.534-11.402-19.607-11.402-31.686 0-0.358 0.004-0.715 0.011-1.071l-0.001 0.053v-139.648c-0.008-0.325-0.012-0.709-0.012-1.093 0-12.044 4.282-23.089 11.407-31.694l-0.067 0.083c6.22-8.318 16.012-13.669 27.057-13.76l0.015-0h153.6c11.029 0.144 20.782 5.481 26.945 13.672l0.063 0.088c7.097 8.479 11.408 19.501 11.408 31.531 0 0.435-0.006 0.869-0.017 1.301l0.001-0.064v139.584c0.007 0.315 0.011 0.686 0.011 1.058 0 12.046-4.255 23.097-11.345 31.734l0.070-0.088c-6.226 8.279-15.979 13.616-26.985 13.76l-0.023 0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":32,"tags":["Job information"]},"attrs":[{}],"properties":{"order":58,"id":48,"name":"Job-information","prevSize":32,"code":59648},"setIdx":0,"setId":2,"iconIdx":5},{"icon":{"paths":["M943.003 201.56c8.725 7.503 20.162 12.071 32.666 12.071 14.241 0 27.097-5.926 36.239-15.446l0.016-0.017c7.778-8.149 12.565-19.212 12.565-31.393 0-13.883-6.218-26.313-16.020-34.659l-0.064-0.053-126.322-109.492c-8.72-7.485-20.143-12.041-32.631-12.041-14.226 0-27.071 5.913-36.21 15.416l-0.016 0.016c-7.778 8.149-12.565 19.212-12.565 31.393 0 13.883 6.218 26.313 16.020 34.659l0.064 0.053 26.813 23.23-49.211 51.834c-54.445-39.050-118.927-68.012-188.687-82.614l-3.293-0.577c-1.994-17.969-8.906-34.028-19.342-47.159l0.144 0.188c-19.624-22.622-48.415-36.845-80.527-36.845-1.139 0-2.274 0.018-3.405 0.053l0.165-0.004h-1.984c-1.43-0.070-3.105-0.11-4.79-0.11-29.785 0-56.666 12.43-75.74 32.386l-0.038 0.040c-12.229 13.843-20.606 31.353-23.299 50.684l-0.058 0.511c-222.314 42.799-388.644 233.779-392.975 464.386l-0.007 0.46c12.023 265.362 230.080 475.948 497.323 475.948s485.3-210.586 497.284-474.869l0.039-1.079c-0.347-123.758-49.277-236.021-128.713-318.779l0.15 0.158 49.275-51.898 27.133 23.549zM497.995 930.122c-203.355-9.664-364.569-176.886-364.569-381.762 0-211.065 171.102-382.167 382.167-382.167s382.167 171.102 382.167 382.167c0 0.015-0 0.030-0 0.045l0-0.002c-5.421 212.011-178.576 381.809-391.39 381.809-2.945 0-5.882-0.033-8.812-0.097l0.437 0.008zM583.297 548.339c-1.519 44.752-38.163 80.454-83.146 80.454-0.556 0-1.11-0.005-1.664-0.016l0.083 0.001c-0.46 0.009-1.002 0.015-1.545 0.015-44.675 0-80.97-35.877-81.646-80.39l-0.001-0.064c-0.019-0.627-0.030-1.365-0.030-2.105 0-26.837 14.44-50.301 35.975-63.046l0.34-0.186v-188.78c1.367-25.869 22.675-46.328 48.763-46.328s47.396 20.459 48.758 46.206l0.005 0.121v188.78c20.678 12.756 34.253 35.285 34.253 60.985 0 1.599-0.053 3.185-0.156 4.758l0.011-0.214z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":32,"tags":["Expiration time"]},"attrs":[{}],"properties":{"order":59,"id":47,"name":"Expiration-time","prevSize":32,"code":59649},"setIdx":0,"setId":2,"iconIdx":6},{"icon":{"paths":["M926.663 374.901c-45.589-107.289-130.322-190.524-235.828-233.078l-2.885-1.028c-5.511-2.114-9.499-7.041-10.231-12.977l-0.008-0.077c-6.966-71.949-67.125-127.74-140.315-127.74-76.563 0-138.866 61.051-140.884 137.126l-0.004 0.187v7.525c-0 0.088-0 0.192-0 0.296 0 20.379 4.14 39.791 11.626 57.441l-0.363-0.965c21.142 51.962 71.249 87.927 129.756 87.927 53.453 0 99.895-30.020 123.385-74.12l0.366-0.753c2.694-5.011 7.9-8.36 13.888-8.36 2.213 0 4.32 0.458 6.23 1.283l-0.102-0.039c5.119 2.304 10.699 4.812 13.259 6.041 37.957 19.073 70.404 43.035 98.157 71.585l0.082 0.085c26.659 27.406 49.157 59.047 66.353 93.779l0.966 2.157c1.090 2.118 1.729 4.623 1.729 7.276 0 7.641-5.298 14.045-12.42 15.739l-0.11 0.022-27.644 5.836c-1.816 0.446-3.142 2.059-3.142 3.983 0 1.024 0.376 1.959 0.996 2.677l-0.004-0.005 108.017 124.348c0.717 0.826 1.769 1.345 2.942 1.345 1.733 0 3.202-1.134 3.705-2.7l0.008-0.028 20.989-65.066 30.101-92.967c0.114-0.355 0.18-0.763 0.18-1.187 0-2.205-1.788-3.993-3.993-3.993-0.245 0-0.484 0.022-0.717 0.064l0.024-0.004-36.654 7.73c-1.023 0.243-2.198 0.382-3.405 0.382-6.425 0-11.928-3.945-14.22-9.546l-0.037-0.102zM606.195 183.593c-13.199 24.914-38.963 41.598-68.624 41.598s-55.425-16.683-68.421-41.178l-0.203-0.42c-6.188-11.168-9.829-24.488-9.829-38.658 0-0.051 0-0.103 0-0.154l-0 0.008c0.022-9.153 1.5-17.953 4.214-26.192l-0.17 0.595c10.113-32.074 39.592-54.926 74.409-54.926s64.296 22.851 74.259 54.374l0.15 0.552c2.551 7.587 4.024 16.324 4.024 25.406 0 14.264-3.633 27.68-10.023 39.373l0.215-0.429zM955.69 616.072c-17.257-10.968-37.842-18.305-59.949-20.434l-0.561-0.044c-3.741-0.391-8.083-0.614-12.477-0.614-0.023 0-0.046 0-0.069 0l0.004-0c-78.203 1.034-141.201 64.671-141.201 143.022 0 0.616 0.004 1.231 0.012 1.846l-0.001-0.093c-0 0.128-0.001 0.28-0.001 0.431 0 28.414 8.1 54.937 22.116 77.384l-0.359-0.616c1.55 2.466 2.469 5.464 2.469 8.677 0 5.109-2.325 9.676-5.974 12.699l-0.027 0.022c-23.654 19.112-50.628 35.612-79.626 48.353l-2.283 0.894c-41.207 18.377-89.293 29.078-139.879 29.078-0.209 0-0.418-0-0.627-0.001l0.033 0c-8.447 0-16.843-0.307-25.187-0.921-8.27-0.696-14.719-7.58-14.719-15.97 0-2.101 0.404-4.108 1.139-5.946l-0.038 0.108 10.597-28.259c0.179-0.437 0.283-0.945 0.283-1.477 0-2.205-1.788-3.993-3.993-3.993-0.208 0-0.413 0.016-0.613 0.047l0.022-0.003-160.183 26.211c-1.91 0.372-3.332 2.032-3.332 4.024 0 0.958 0.329 1.84 0.881 2.538l-0.007-0.009 102.079 129.467c0.709 0.899 1.799 1.471 3.022 1.471 1.676 0 3.101-1.074 3.625-2.571l0.008-0.027 12.747-33.89c2.237-6.096 7.991-10.367 14.742-10.367 0.705 0 1.398 0.047 2.078 0.137l-0.080-0.009c17.118 2.494 36.882 3.918 56.979 3.918 105.985 0 202.719-39.611 276.204-104.835l-0.429 0.374c2.704-2.426 6.297-3.909 10.236-3.909 2.145 0 4.187 0.44 6.041 1.234l-0.1-0.038c14.35 6.178 31.012 10.034 48.5 10.642l0.235 0.006c0.762 0.015 1.66 0.023 2.56 0.023 79.165 0 143.34-64.176 143.34-143.34 0-0.008-0-0.016-0-0.024l0 0.001c0.008-0.567 0.012-1.236 0.012-1.906 0-51.774-26.987-97.245-67.661-123.114l-0.592-0.352zM882.637 820.332c-0.080 0-0.174 0-0.268 0-5.179 0-10.231-0.541-15.104-1.569l0.475 0.084c-22.147-4.577-40.512-18.012-51.559-36.353l-0.197-0.352c-7.394-12.030-11.775-26.602-11.775-42.197 0-0.049 0-0.098 0-0.147l-0 0.008c-0.003-0.255-0.005-0.556-0.005-0.857 0-43.102 34.256-78.204 77.027-79.564l0.125-0.003h1.28c22.429 0.039 42.614 9.611 56.726 24.879l0.047 0.052c13.42 14.456 21.655 33.888 21.655 55.244 0 0.088-0 0.175-0 0.262l0-0.013c0.004 0.292 0.006 0.636 0.006 0.981 0 43.543-34.982 78.915-78.374 79.545l-0.059 0.001zM193.733 595.543c-8.132-0.296-14.695-6.629-15.354-14.635l-0.004-0.057c-0.94-10.147-1.479-21.952-1.485-33.881l-0-0.009c-0.003-0.562-0.005-1.226-0.005-1.891 0-51.229 10.274-100.057 28.874-144.539l-0.918 2.475c10.481-25.285 22.302-46.972 36.091-67.211l-0.819 1.274c2.788-4.183 7.487-6.901 12.82-6.901 4.935 0 9.326 2.328 12.136 5.945l0.026 0.035 16.689 21.092c0.709 0.899 1.799 1.471 3.022 1.471 1.676 0 3.101-1.074 3.625-2.571l0.008-0.027 58.053-155.729c0.179-0.437 0.283-0.945 0.283-1.477 0-2.205-1.788-3.993-3.993-3.993-0.208 0-0.413 0.016-0.613 0.047l0.022-0.003-67.37 11.365-92.659 15.102c-1.91 0.372-3.332 2.032-3.332 4.024 0 0.958 0.329 1.84 0.881 2.538l-0.007-0.009 24.419 30.716c2.137 2.752 3.425 6.255 3.425 10.059s-1.289 7.307-3.453 10.097l0.028-0.037c-56.322 73.599-90.249 166.937-90.249 268.199 0 20.797 1.431 41.259 4.2 61.295l-0.263-2.32c0.096 0.666 0.151 1.435 0.151 2.216 0 5.362-2.576 10.123-6.559 13.111l-0.042 0.030c-36.604 26.711-60.118 69.462-60.118 117.705 0 0.788 0.006 1.574 0.019 2.359l-0.001-0.119c-0 0.007-0 0.015-0 0.023 0 79.165 64.176 143.34 143.34 143.34 0.9 0 1.798-0.008 2.694-0.025l-0.135 0.002c21.032-0.683 40.663-6.036 58.095-15.049l-0.759 0.357c19.77-10.104 36.255-24.003 49.044-40.859l0.255-0.351c18.532-24.279 29.693-55.049 29.693-88.426 0-0.157-0-0.313-0.001-0.469l0 0.024c0.006-0.484 0.009-1.056 0.009-1.629 0-72.87-54.376-133.040-124.765-142.148l-0.718-0.076c-3.843-0.297-8.322-0.467-12.841-0.467-0.507 0-1.013 0.002-1.519 0.006l0.077-0.001zM259.107 782.244c-11.29 18.686-29.626 32.146-51.238 36.766l-0.518 0.093c-4.398 0.944-9.45 1.485-14.629 1.485-0.094 0-0.188-0-0.283-0.001l0.015 0c-43.451-0.632-78.433-36.004-78.433-79.546 0-0.309 0.002-0.617 0.005-0.925l-0 0.047c-0-0.074-0-0.161-0-0.249 0-21.356 8.235-40.788 21.702-55.296l-0.047 0.051c14.149-15.335 34.341-24.912 56.77-24.931l1.283-0c42.896 1.365 77.151 36.466 77.151 79.567 0 0.247-0.001 0.494-0.003 0.741l0-0.038c0 0.020 0 0.043 0 0.066 0 15.585-4.38 30.147-11.977 42.523l0.202-0.354z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":32,"tags":["Work flow"]},"attrs":[{}],"properties":{"order":60,"id":46,"name":"Work-flow","prevSize":32,"code":59650},"setIdx":0,"setId":2,"iconIdx":7},{"icon":{"paths":["M565.453 274.995c20.517-0.029 37.142-16.654 37.171-37.168l0-0.003v-37.171c0-20.543-16.654-37.197-37.197-37.197s-37.197 16.654-37.197 37.197h-0v37.171c0.116 20.5 16.718 37.085 37.214 37.171l0.008 0z","M960.154 191.949l-147.61-147.456c-6.507-6.687-15.552-10.876-25.575-11.008l-0.025-0h-664.013c-61.008 0.174-110.418 49.584-110.592 110.575l-0 0.017v737.28c0.174 61.008 49.584 110.418 110.575 110.592l0.017 0h737.28c61.008-0.174 110.418-49.584 110.592-110.575l0-0.017v-663.808c-0.006-10.005-4.076-19.058-10.648-25.599l-0.001-0.001zM325.786 106.957h331.93v197.325c-0.226 13.17-10.843 23.787-23.991 24.013l-0.021 0h-283.904c-13.17-0.226-23.787-10.843-24.013-23.991l-0-0.021zM712.96 918.221h-442.419v-254.413c0.229-22.303 18.248-40.321 40.529-40.55l0.022-0h361.37c22.303 0.229 40.321 18.248 40.55 40.529l0 0.022v254.413zM897.28 881.357c-0.029 20.348-16.516 36.835-36.861 36.864l-0.003 0h-71.68v-254.413c-0.289-62.998-51.281-113.989-114.251-114.278l-0.028-0h-363.52c-62.998 0.289-113.989 51.281-114.278 114.251l-0 0.028v254.413h-73.728c-20.348-0.029-36.835-16.516-36.864-36.861l-0-0.003v-737.536c0.029-20.348 16.516-36.835 36.861-36.864l0.003-0h129.075v197.325c0.433 53.829 44.041 97.328 97.87 97.587l0.025 0h283.955c53.841-0.346 97.395-43.9 97.741-97.708l0-0.033v-197.171h40.55l125.44 125.44v648.96z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":32,"tags":["save"]},"attrs":[{},{}],"properties":{"order":61,"id":45,"name":"save","prevSize":32,"code":59651},"setIdx":0,"setId":2,"iconIdx":8},{"icon":{"paths":["M775.398 5.024h-543.829c-125.552 1.999-226.563 104.246-226.563 230.085 0 0.999 0.006 1.996 0.019 2.992l-0.002-0.151v372.651c-0.011 0.845-0.018 1.842-0.018 2.841 0 125.839 101.011 228.086 226.375 230.083l0.188 0.002h138.369l133.546 158.516 133.546-158.516h138.369c125.552-1.999 226.563-104.246 226.563-230.085 0-0.999-0.006-1.996-0.019-2.992l0.002 0.151v-372.651c0.012-0.859 0.018-1.874 0.018-2.89 0-125.83-101.017-228.065-226.378-230.033l-0.185-0.002zM939.843 610.551c-10.218 87.415-77.644 156.416-163.402 168.942l-1.043 0.125h-179.819l-92.095 115.559-92.095-115.207h-179.819c-86.801-12.651-154.227-81.652-164.359-168.165l-0.086-0.903v-372.752c10.218-87.415 77.644-156.416 163.402-168.942l1.043-0.125h543.728c89.35 7.228 159.749 79.226 164.427 168.628l0.018 0.439v372.651z","M520.818 212.025c-7.22-1.282-15.533-2.015-24.016-2.015-73.902 0-134.81 55.633-143.129 127.304l-0.063 0.671 63.005 15.073q19.544-86.769 95.461-86.87c0.799-0.034 1.736-0.054 2.678-0.054 36.384 0 65.972 29.101 66.757 65.296l0.001 0.073q2.16 43.46-58.633 86.87c-34.041 19.907-56.545 56.282-56.545 97.914 0 1.417 0.026 2.828 0.078 4.232l-0.006-0.203v21.755h58.633v-17.384c-0-0.042-0-0.092-0-0.142 0-33.862 19.219-63.235 47.343-77.806l0.488-0.23c47.1-21.38 79.461-67.62 80.387-121.519l0.002-0.119c-4.912-63.565-57.699-113.283-122.099-113.283-3.64 0-7.243 0.159-10.803 0.47l0.462-0.033zM459.923 594.323h71.697v69.436h-71.697z"],"attrs":[{},{}],"width":1025,"isMulticolor":false,"isMulticolor2":false,"grid":32,"tags":["help"]},"attrs":[{},{}],"properties":{"order":62,"id":44,"name":"help","prevSize":32,"code":59652},"setIdx":0,"setId":2,"iconIdx":9},{"icon":{"paths":["M69.734 1003.827v-0.256h-5.12c-16.257-2.265-29.172-14.3-32.718-29.896l-0.050-0.261-0.41-7.629v-307.2c-0-21.547 17.467-39.014 39.014-39.014s39.014 17.467 39.014 39.014v0 213.197l227.891-227.635c7.057-7.076 16.815-11.454 27.597-11.454 21.524 0 38.974 17.449 38.974 38.974 0 10.743-4.347 20.471-11.378 27.521l0.001-0.001-227.942 227.482h220.16c18.507 3.204 32.404 19.139 32.404 38.321 0 20.992-16.645 38.097-37.456 38.836l-0.068 0.002zM614.81 965.222c-0.003-0.184-0.005-0.402-0.005-0.62 0-21.315 17.093-38.637 38.319-39.008l0.035-0h270.95v-267.878c0.342-21.377 17.624-38.606 38.99-38.861l0.024-0h3.584c20.033 1.857 35.624 18.479 35.84 38.788l0 0.022v306.79c-0.174 21.556-17.689 38.963-39.269 38.963-0 0-0.001-0-0.001-0l-309.555 0c-21.197-0.081-38.403-17.054-38.86-38.153l-0.001-0.043zM69.683 417.075c-21.473-0.087-38.854-17.486-38.912-38.958l-0-0.006v-307.2c0.317-21.467 17.766-38.754 39.265-38.81l0.005-0h307.2c0.522-0.025 1.133-0.039 1.748-0.039 21.519 0 38.963 17.444 38.963 38.963 0 21.179-16.898 38.412-37.948 38.95l-0.050 0.001h-271.36v268.288c-0.058 21.475-17.48 38.861-38.963 38.861-0 0-0-0-0-0l0 0zM924.006 378.163v-212.941l-227.635 227.533c-7.059 7.091-16.828 11.479-27.622 11.479-21.525 0-38.974-17.449-38.974-38.974 0-10.73 4.336-20.448 11.353-27.496l-0.001 0.001 227.789-227.533h-213.043c-0.404 0.015-0.88 0.024-1.357 0.024-21.588 0-39.089-17.501-39.089-39.089 0-21.111 16.736-38.314 37.664-39.064l0.069-0.002h314.931c16.446 2.348 29.474 14.616 32.925 30.461l0.047 0.259v3.174l2.97 7.066-1.997 305.050c-0.087 21.491-17.515 38.883-39.012 38.912l-0.003 0c-21.476-0.086-38.87-17.444-39.014-38.898l-0-0.014z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":32,"tags":["enter-fullscreen"]},"attrs":[{}],"properties":{"order":63,"id":43,"name":"enter-fullscreen","prevSize":32,"code":59653},"setIdx":0,"setId":2,"iconIdx":10},{"icon":{"paths":["M367.014 619.016h5.678c17.137 2.353 30.758 15.033 34.484 31.469l0.052 0.274 0.419 8.006v323.997c-0.768 22.121-18.885 39.762-41.122 39.762s-40.355-17.641-41.12-39.692l-0.002-0.070v-224.484l-240.216 239.984c-7.493 7.808-18.015 12.66-29.671 12.66-22.698 0-41.099-18.401-41.099-41.099 0-11.621 4.823-22.115 12.576-29.59l0.013-0.012 240.216-240.030h-232.304c-19.499-3.406-34.132-20.207-34.132-40.426 0-22.145 17.554-40.189 39.506-40.979l0.072-0.002h326.696z","M657.731 0.020c22.594 0.131 40.874 18.412 41.006 40.993l0 0.013v224.438l240.077-239.844c7.495-7.821 18.026-12.682 29.692-12.682 22.698 0 41.099 18.401 41.099 41.099 0 11.608-4.813 22.092-12.551 29.566l-0.012 0.011-240.216 239.891h224.624c0.423-0.016 0.92-0.025 1.42-0.025 22.673 0 41.054 18.38 41.054 41.054 0 22.174-17.58 40.242-39.562 41.027l-0.072 0.002h-332.095c-17.4-2.48-31.169-15.511-34.721-32.312l-0.048-0.27v-3.118l-3.118-7.633 2.141-321.157c0.079-22.638 18.449-40.959 41.099-40.959 0 0 0 0 0 0l-0-0z","M656.148 1023.86c-22.194-0.646-39.939-18.792-39.939-41.082 0-21.815 16.997-39.661 38.47-41.016l0.119-0.006h285.039v-282.386c0.362-22.523 18.564-40.676 41.072-40.959l0.027-0h3.77c20.992 2.095 37.274 19.572 37.468 40.893l0 0.020v323.438c-0.158 22.7-18.57 41.047-41.28 41.099l-0.005 0zM40.923 405.563c-22.575-0.132-40.834-18.423-40.913-40.998l-0-0.008v-323.531c0.236-22.649 18.613-40.928 41.278-41.006l0.007-0h323.112c0.396-0.014 0.861-0.021 1.328-0.021 22.698 0 41.099 18.401 41.099 41.099 0 10.828-4.187 20.678-11.031 28.019l0.023-0.024c-7.179 7.711-17.271 12.626-28.514 12.984l-0.064 0.002h-285.225v282.525c-0.079 22.622-18.423 40.933-41.050 40.959l-0.003 0z"],"attrs":[{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":32,"tags":["exit-fullscreen"]},"attrs":[{},{},{}],"properties":{"order":64,"id":42,"name":"exit-fullscreen","prevSize":32,"code":59654},"setIdx":0,"setId":2,"iconIdx":11},{"icon":{"paths":["M512 1024c-282.77 0-512-229.23-512-512s229.23-512 512-512c282.77 0 512 229.23 512 512v0c0 282.77-229.23 512-512 512v0zM512 930.889c231.346 0 418.889-187.543 418.889-418.889s-187.543-418.889-418.889-418.889c-231.346 0-418.889 187.543-418.889 418.889h-0c0 231.346 187.543 418.889 418.889 418.889v0zM418.889 325.851v372.297c0 25.712-20.844 46.555-46.555 46.555s-46.555-20.844-46.555-46.555v0-372.297c0-25.712 20.844-46.555 46.555-46.555s46.555 20.844 46.555 46.555v-0zM698.149 325.851v372.297c0 25.712-20.844 46.555-46.555 46.555s-46.555-20.844-46.555-46.555l0-0v-372.297c-0-25.712 20.844-46.555 46.555-46.555s46.555 20.844 46.555 46.555v-0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":32,"tags":["hang up"]},"attrs":[{}],"properties":{"order":65,"id":41,"name":"hang-up","prevSize":32,"code":59655},"setIdx":0,"setId":2,"iconIdx":12},{"icon":{"paths":["M677.231 1023.845c-16.195-0.842-29.008-14.178-29.008-30.508s12.813-29.666 28.933-30.504l0.075-0.003h187.542v-901.582h-402.297v222.43c0 0.046 0 0.101 0 0.155 0 22.479-18.223 40.703-40.703 40.703-0.027 0-0.055-0-0.082-0l0.004 0h-261.582l-1.396 633.953h197.233c16.195 0.842 29.008 14.178 29.008 30.508s-12.813 29.666-28.933 30.504l-0.075 0.003h-218.631c-0.14 0.002-0.305 0.003-0.47 0.003-21.409 0-38.764-17.355-38.764-38.764 0-0.219 0.002-0.438 0.005-0.656l-0 0.033 1.396-696.208c0.068-10.992 4.593-20.914 11.857-28.060l0.005-0.005 249.875-244.758c6.987-6.855 16.57-11.087 27.141-11.087 0.052 0 0.105 0 0.157 0l-0.008-0h497.89c0.023-0 0.050-0 0.078-0 21.709 0 39.307 17.598 39.307 39.307 0 0.027-0 0.055-0 0.082l0-0.004v945.231c0 0.070 0.001 0.152 0.001 0.234 0 21.487-17.309 38.931-38.744 39.15l-0.021 0z","M799.028 441.216c0.004-0.185 0.006-0.403 0.006-0.622 0-16.678-13.434-30.218-30.071-30.39l-0.016-0h-486.416c-16.654 0.172-30.088 13.712-30.088 30.39 0 0.219 0.002 0.437 0.007 0.654l-0.001-0.032c-0.004 0.185-0.006 0.403-0.006 0.622 0 16.678 13.434 30.218 30.071 30.39l0.016 0h486.416c16.654-0.172 30.088-13.712 30.088-30.39 0-0.219-0.002-0.437-0.007-0.654l0.001 0.032zM799.028 545.182c0.004-0.185 0.006-0.403 0.006-0.622 0-16.678-13.434-30.218-30.071-30.39l-0.016-0h-486.416c-16.654 0.172-30.088 13.712-30.088 30.39 0 0.219 0.002 0.437 0.007 0.654l-0.001-0.032c-0.004 0.185-0.006 0.403-0.006 0.622 0 16.678 13.434 30.218 30.071 30.39l0.016 0h486.416c16.654-0.172 30.088-13.712 30.088-30.39 0-0.219-0.002-0.437-0.007-0.654l0.001 0.032zM799.028 650.544c0.004-0.185 0.006-0.403 0.006-0.622 0-16.678-13.434-30.218-30.071-30.39l-0.016-0h-486.416c-16.654 0.172-30.088 13.712-30.088 30.39 0 0.219 0.002 0.437 0.007 0.654l-0.001-0.032c-0.004 0.185-0.006 0.403-0.006 0.622 0 16.678 13.434 30.218 30.071 30.39l0.016 0h486.416c16.654-0.172 30.088-13.712 30.088-30.39 0-0.219-0.002-0.437-0.007-0.654l0.001 0.032zM519.149 761.177c-1.093-1.087-2.6-1.759-4.264-1.759s-3.171 0.672-4.264 1.76l0-0-84.894 91.949c-0.972 1.058-1.567 2.475-1.567 4.032 0 3.297 2.673 5.97 5.97 5.97 0.006 0 0.012-0 0.017-0l-0.001 0h54.968v137.381c-0.007 0.117-0.012 0.254-0.012 0.391 0 3.562 2.826 6.464 6.358 6.586l0.011 0h56.751c3.538-0.129 6.358-3.028 6.358-6.586 0-0.029-0-0.057-0.001-0.086l0 0.004v-137.536h54.968c0.003 0 0.008 0 0.012 0 3.297 0 5.97-2.673 5.97-5.97 0-1.709-0.718-3.251-1.87-4.339l-0.003-0.003z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":32,"tags":["submit"]},"attrs":[{},{}],"properties":{"order":66,"id":40,"name":"submit","prevSize":32,"code":59656},"setIdx":0,"setId":2,"iconIdx":13},{"icon":{"paths":["M240.286 711.123c0.181-0.001 0.396-0.001 0.611-0.001 74.77 0 137.524 51.45 154.788 120.879l0.231 1.097-0.632-7.026h682.314c0.495-0.022 1.075-0.035 1.658-0.035 21.614 0 39.136 17.522 39.136 39.136s-17.522 39.136-39.136 39.136c-0.583 0-1.163-0.013-1.74-0.038l0.082 0.003h-682.244l-0.773 3.232c-19.748 67.758-81.294 116.428-154.208 116.428-76.758 0-140.919-53.937-156.648-125.978l-0.194-1.060 0.632 7.378h-43.914c-0.495 0.022-1.075 0.035-1.658 0.035-21.614 0-39.136-17.522-39.136-39.136s17.522-39.136 39.136-39.136c0.583 0 1.163 0.013 1.74 0.038l-0.082-0.003h43.914c0 11.734-4.005 27.402-4.005 39.066 0.040 3.142 0.243 6.189 0.602 9.188l-0.039-0.405v-6.464c1.147-86.625 71.638-156.407 158.428-156.407 0.4 0 0.799 0.001 1.199 0.004l-0.061-0zM240.286 789.325c-42.589 0.828-76.796 35.548-76.796 78.258 0 43.228 35.044 78.272 78.272 78.272s78.272-35.044 78.272-78.272c0-0.020-0-0.040-0-0.060l0 0.003c-0.594-43.317-35.847-78.203-79.249-78.203-0.175 0-0.351 0.001-0.526 0.002l0.027-0zM798.588 359.181c0.172-0.001 0.376-0.001 0.58-0.001 74.923 0 137.779 51.66 154.893 121.303l0.227 1.094-0.632-7.448h123.661c0.495-0.022 1.075-0.035 1.658-0.035 21.614 0 39.136 17.522 39.136 39.136s-17.522 39.136-39.136 39.136c-0.583 0-1.163-0.013-1.74-0.038l0.082 0.003h-123.45v-0.492c-18.397 69.637-80.828 120.141-155.054 120.141-76.764 0-140.912-54.016-156.507-126.113l-0.191-1.055 0.632 7.378h-602.497c-0.495 0.022-1.075 0.035-1.658 0.035-21.614 0-39.136-17.522-39.136-39.136s17.522-39.136 39.136-39.136c0.583 0 1.163 0.013 1.74 0.038l-0.082-0.003h602.427c0 11.734-3.935 27.402-3.935 39.066 0.035 3.581 0.263 7.067 0.676 10.497l-0.044-0.45v-7.659c1.227-86.563 71.687-156.265 158.426-156.265 0.277 0 0.554 0.001 0.831 0.002l-0.043-0zM798.588 437.382c-42.396 1.022-76.375 35.633-76.375 78.18 0 43.19 35.012 78.202 78.202 78.202 43.182 0 78.189-35 78.202-78.179l0-0.001c-0.592-43.318-35.846-78.205-79.249-78.205-0.274 0-0.548 0.001-0.822 0.004l0.042-0zM401.397 0.001c0.181-0.001 0.395-0.001 0.609-0.001 74.809 0 137.594 51.481 154.86 120.948l0.231 1.098h520.501c0.772-0.057 1.671-0.089 2.579-0.089 20.605 0 37.309 16.704 37.309 37.309 0 0.674-0.018 1.344-0.053 2.009l0.004-0.093c0.029 0.551 0.046 1.196 0.046 1.846 0 20.605-16.704 37.309-37.309 37.309-0.906 0-1.805-0.032-2.695-0.096l0.12 0.007h-522.679v-1.546c-20.351 66.508-81.196 114.041-153.143 114.041-86.998 0-157.763-69.501-159.801-156.008l-0.004-0.19c1.030-86.678 71.535-156.547 158.36-156.547 0.374 0 0.748 0.001 1.122 0.004l-0.057-0zM401.397 78.203c-42.558 0.867-76.726 35.572-76.726 78.257 0 43.228 35.044 78.272 78.272 78.272 43.223 0 78.263-35.035 78.272-78.256l0-0.001c-0.554-43.347-35.823-78.274-79.249-78.274-0.2 0-0.399 0.001-0.599 0.002l0.031-0zM243.518 122.117c0 11.734-3.935 27.402-3.935 39.066s3.935 27.402 3.935 39.066h-203.268c-0.77 0.057-1.669 0.089-2.575 0.089-20.605 0-37.309-16.704-37.309-37.309 0-0.649 0.017-1.294 0.049-1.935l-0.004 0.090c-0.029-0.551-0.046-1.196-0.046-1.846 0-20.605 16.704-37.309 37.309-37.309 0.906 0 1.805 0.032 2.695 0.096l-0.12-0.007z"],"attrs":[{}],"width":1118,"isMulticolor":false,"isMulticolor2":false,"grid":32,"tags":["setting"]},"attrs":[{}],"properties":{"order":67,"id":39,"name":"setting","prevSize":32,"code":59657},"setIdx":0,"setId":2,"iconIdx":14},{"icon":{"paths":["M512 0c282.77 0 512 229.23 512 512s-229.23 512-512 512c-282.77 0-512-229.23-512-512v0c0-282.77 229.23-512 512-512v0zM512 102.4c-226.216-0-409.6 183.384-409.6 409.6s183.384 409.6 409.6 409.6c226.216 0 409.6-183.384 409.6-409.6h0c-0-226.216-183.384-409.6-409.6-409.6l0 0zM512 435.2c28.277 0 51.2 22.923 51.2 51.2v-0 256c0 28.277-22.923 51.2-51.2 51.2s-51.2-22.923-51.2-51.2l0 0v-256c0-28.277 22.923-51.2 51.2-51.2v0zM512 230.4c35.346 0 64 28.654 64 64s-28.654 64-64 64c-35.346 0-64-28.654-64-64v0c0-35.346 28.654-64 64-64v0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":32,"tags":["information"]},"attrs":[{}],"properties":{"order":68,"id":38,"name":"information","prevSize":32,"code":59658},"setIdx":0,"setId":2,"iconIdx":15},{"icon":{"paths":["M813.056 536.137l240.201 235.666c6.338 6.149 14.995 9.94 24.537 9.94 4.814 0 9.403-0.965 13.584-2.712l-0.233 0.086c12.616-5.164 21.356-17.314 21.431-31.515l0-0.009v-471.186c-0.087-14.226-8.858-26.383-21.276-31.442l-0.228-0.082c-3.948-1.661-8.537-2.626-13.351-2.626-9.542 0-18.199 3.791-24.546 9.949l0.009-0.009-239.909 235.666c-6.257 6.126-10.137 14.66-10.137 24.101s3.879 17.974 10.131 24.095l0.006 0.006zM1170.286 138.971v746.057c-0.087 14.226-8.858 26.383-21.276 31.442l-0.228 0.082c-3.948 1.661-8.537 2.626-13.351 2.626-9.542 0-18.199-3.791-24.546-9.949l0.009 0.009-379.465-373.102c-6.257-6.126-10.137-14.66-10.137-24.101s3.879-17.974 10.131-24.095l0.006-0.006 379.611-373.029c6.338-6.149 14.995-9.94 24.537-9.94 4.814 0 9.403 0.965 13.584 2.712l-0.233-0.086c12.541 5.167 21.233 17.242 21.358 31.363l0 0.016zM438.857 536.137l-379.685 373.029c-6.338 6.149-14.995 9.94-24.537 9.94-4.814 0-9.403-0.965-13.584-2.712l0.233 0.086c-12.533-5.198-21.204-17.302-21.285-31.441l-0-0.010v-746.057c0.087-14.226 8.858-26.383 21.276-31.442l0.228-0.082c3.948-1.661 8.537-2.626 13.351-2.626 9.542 0 18.199 3.791 24.546 9.949l-0.009-0.009 379.465 373.175c6.257 6.126 10.137 14.66 10.137 24.101s-3.879 17.974-10.131 24.095l-0.006 0.006zM621.714 0h-73.143v1024h73.143z"],"attrs":[{}],"width":1170,"isMulticolor":false,"isMulticolor2":false,"grid":32,"tags":["mapping"]},"attrs":[{}],"properties":{"order":69,"id":37,"name":"mapping","prevSize":32,"code":59659},"setIdx":0,"setId":2,"iconIdx":16},{"icon":{"paths":["M95.567 214.546c94-130.478 245.512-214.431 416.633-214.431 282.752 0 511.967 229.216 511.967 511.967s-229.216 511.967-511.967 511.967c-235.623 0-434.069-159.173-493.677-375.857l-0.843-3.594 98.366-26.486c48.295 176.319 207.099 303.751 395.667 303.751 226.201 0 409.574-183.372 409.574-409.574s-183.372-409.574-409.574-409.574c-135.036 0-254.808 65.349-329.418 166.148l-0.786 1.111 96.455 61.436-219.19 64.576-58.774-242.195z","M409.574 512.033c0.037 56.522 45.866 102.328 102.393 102.328 56.55 0 102.393-45.843 102.393-102.393s-45.843-102.393-102.393-102.393c-18.85 0-36.511 5.094-51.68 13.98l0.483-0.262c-30.822 18.034-51.197 50.975-51.197 88.675 0 0.023 0 0.046 0 0.069l-0-0.004z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":32,"tags":["rotating"]},"attrs":[{},{}],"properties":{"order":70,"id":36,"name":"rotating","prevSize":32,"code":59660},"setIdx":0,"setId":2,"iconIdx":17},{"icon":{"paths":["M305.024 817.536l55.552-58.944 113.024 110.016-3.456-317.632-316.992 2.112 111.232 106.112-55.68 59.072-208.704-205.376 205.44-208.192 59.072 55.552-110.336 112.832 318.080-3.584-2.048-316.672-106.176 111.104-59.136-55.552 205.504-208.384 208.64 204.8-55.68 59.008-112.96-109.76 3.392 317.632 316.992-2.112-111.232-105.92 55.744-59.072 208.704 205.184-205.376 208.256-59.136-55.552 110.208-112.96-318.208 3.584 2.112 316.416 106.112-111.040 59.2 55.552-206.912 209.984z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":32,"tags":["move"]},"attrs":[{}],"properties":{"order":71,"id":35,"name":"move","prevSize":32,"code":59661},"setIdx":0,"setId":2,"iconIdx":18},{"icon":{"paths":["M1024.147 236.212v472.79c0.001 0.119 0.001 0.26 0.001 0.4 0 14.624-4.138 28.282-11.308 39.866l0.187-0.325c-7.356 12.208-17.593 22-29.802 28.619l-0.41 0.204-433.214 236.431c-10.785 6.193-23.711 9.846-37.491 9.846s-26.706-3.653-37.864-10.043l0.373 0.197-433.214-236.431c-12.565-6.9-22.783-16.673-30.014-28.475l-0.198-0.348c-6.982-11.259-11.12-24.917-11.12-39.541 0-0.141 0-0.281 0.001-0.422l-0 0.022v-472.79c-0-0.047-0-0.103-0-0.159 0-33.649 21.233-62.339 51.032-73.403l0.542-0.176 433.214-157.572c8.086-3.045 17.43-4.836 27.185-4.901l0.028-0c9.707 0.067 18.976 1.859 27.543 5.083l-0.55-0.181 433.507 157.572c15.535 5.68 28.356 15.694 37.362 28.572l0.166 0.25c8.786 12.205 14.052 27.456 14.052 43.936 0 0.345-0.002 0.689-0.007 1.032l0.001-0.052zM512.074 391.37l429.629-156.329-429.629-156.548-429.629 156.475zM551.357 923.561l393.931-214.705v-391.59l-393.931 143.673z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":32,"tags":["tool"]},"attrs":[{}],"properties":{"order":72,"id":34,"name":"tool","prevSize":32,"code":59662},"setIdx":0,"setId":2,"iconIdx":19},{"icon":{"paths":["M778.477 1023.996l-10.488-5.593-530.876-447.774c-3.767-3.080-7.054-6.525-9.879-10.334l-0.109-0.154c-7.406-9.712-11.866-22.017-11.866-35.365 0-2.639 0.174-5.237 0.512-7.784l-0.032 0.299c2.127-15.71 10.292-29.191 22.039-38.255l0.135-0.1 534.272-476.64 12.286-2.098 17.579 7.791 7.092 17.779v106.375c-0.182 11.406-5.49 21.537-13.715 28.213l-0.069 0.054-392.339 362.973 392.638 340.2c8.227 6.662 13.452 16.751 13.484 28.062l0 0.005v112.468l-5.593 10.488c-4.596 5.746-11.606 9.394-19.469 9.394-0.179 0-0.357-0.002-0.534-0.006l0.027 0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":32,"tags":["Pack up"]},"attrs":[{}],"properties":{"order":73,"id":33,"name":"Pack-up","prevSize":32,"code":59663},"setIdx":0,"setId":2,"iconIdx":20},{"icon":{"paths":["M245.658 1023.996l10.488-5.593 530.876-447.774c3.767-3.080 7.054-6.525 9.879-10.334l0.109-0.154c7.406-9.712 11.866-22.017 11.866-35.365 0-2.639-0.174-5.237-0.512-7.784l0.032 0.299c-2.127-15.71-10.292-29.191-22.039-38.255l-0.135-0.1-534.272-476.64-12.286-2.098-17.579 7.791-7.092 17.779v106.375c0.182 11.406 5.49 21.537 13.715 28.213l0.069 0.054 392.339 362.973-392.638 340.2c-8.227 6.662-13.452 16.751-13.484 28.062l-0 0.005v112.468l5.593 10.488c4.596 5.746 11.606 9.394 19.469 9.394 0.179 0 0.357-0.002 0.534-0.006l-0.027 0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":32,"tags":["an-right"]},"attrs":[{}],"properties":{"order":74,"id":32,"name":"an-right","prevSize":32,"code":59664},"setIdx":0,"setId":2,"iconIdx":21},{"icon":{"paths":["M783.069 779.175l-225.798 226.077c-11.583 11.584-27.586 18.749-45.262 18.749s-33.679-7.165-45.262-18.749l0 0-225.798-226.17c-0.729-0.725-1.181-1.728-1.181-2.838s0.451-2.113 1.18-2.837l0-0 62.148-62.148c0.725-0.729 1.728-1.181 2.838-1.181s2.113 0.451 2.837 1.18l0 0 148.392 148.857c0.72 0.702 1.705 1.135 2.792 1.135 2.183 0 3.958-1.749 4-3.922l0-0.004v-853.324c0.241-2 1.928-3.535 3.973-3.535 0.010 0 0.019 0 0.029 0l-0.001-0h88.105c2.209-0 4.001 1.791 4.001 4.001v852.394c0.042 2.177 1.817 3.926 4 3.926 1.086 0 2.072-0.433 2.793-1.136l-0.001 0.001 148.299-148.392c0.725-0.729 1.728-1.181 2.838-1.181s2.113 0.451 2.837 1.18l0 0 62.148 62.148c0.729 0.725 1.181 1.728 1.181 2.838s-0.451 2.113-1.18 2.837l-0 0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":32,"tags":["down"]},"attrs":[{}],"properties":{"order":75,"id":31,"name":"down","prevSize":32,"code":59665},"setIdx":0,"setId":2,"iconIdx":22},{"icon":{"paths":["M783.116 244.825l-225.705-226.077c-11.583-11.584-27.586-18.749-45.262-18.749s-33.679 7.165-45.262 18.749l0-0-225.798 226.17c-0.729 0.725-1.181 1.728-1.181 2.838s0.451 2.113 1.18 2.837l0 0 62.148 62.148c0.725 0.729 1.728 1.181 2.838 1.181s2.113-0.451 2.837-1.18l0-0 148.857-148.857c0.72-0.702 1.705-1.135 2.792-1.135 2.183 0 3.958 1.749 4 3.922l0 0.004v853.324c0.204 1.834 1.621 3.283 3.421 3.533l0.021 0.002h88.105c2.209 0 4.001-1.791 4.001-4.001v0-852.394c0.042-2.177 1.817-3.926 4-3.926 1.086 0 2.072 0.433 2.793 1.136l-0.001-0.001 148.299 148.392c0.725 0.729 1.728 1.181 2.838 1.181s2.113-0.451 2.837-1.18l0-0 62.241-62.241c0.729-0.725 1.181-1.728 1.181-2.838s-0.451-2.113-1.18-2.837l-0-0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":32,"tags":["up"]},"attrs":[{}],"properties":{"order":76,"id":30,"name":"up","prevSize":32,"code":59666},"setIdx":0,"setId":2,"iconIdx":23},{"icon":{"paths":["M832.992 440.855c35.967 2.461 64.21 32.239 64.21 68.615 0 1.524-0.050 3.036-0.147 4.536l0.011-0.204v365.159c0.068 1.142 0.106 2.477 0.106 3.822 0 36.365-28.227 66.137-63.966 68.601l-0.214 0.012h-509.345c-35.812-2.633-63.87-32.336-63.87-68.591 0-1.532 0.050-3.053 0.149-4.56l-0.011 0.205v-364.732c-0.085-1.277-0.133-2.768-0.133-4.27 0-36.254 28.055-65.955 63.639-68.578l0.226-0.013zM832.992 367.909h-509.345c-71.592 5.356-127.65 64.759-127.65 137.256 0 3.039 0.098 6.055 0.292 9.044l-0.021-0.407v365.159c-0.143 2.351-0.225 5.099-0.225 7.867 0 72.463 56.041 131.837 127.147 137.146l0.457 0.027h509.345c71.853-5.065 128.224-64.597 128.224-137.296 0-2.904-0.090-5.788-0.267-8.647l0.019 0.392v-364.732c0.171-2.567 0.268-5.564 0.268-8.584 0-72.672-56.399-132.171-127.815-137.114l-0.429-0.024zM568.508 83.716c-227.627-23.804-443.651 142.224-504.568 402.784-0.835 2.942-1.315 6.322-1.315 9.813 0 15.787 9.812 29.282 23.67 34.72l0.253 0.088c2.33 0.612 5.005 0.964 7.763 0.964 15.699 0 28.736-11.399 31.286-26.372l0.026-0.187c55.883-238.889 261.583-385.891 470.526-344.256l-47.778 54.603c-5.372 6.771-8.618 15.44-8.618 24.867 0 9.855 3.548 18.882 9.436 25.872l-0.050-0.061c5.376 6.499 13.441 10.61 22.467 10.61 8.671 0 16.456-3.793 21.786-9.811l0.027-0.031 90.437-103.234c5.729-6.895 9.206-15.839 9.206-25.595s-3.477-18.7-9.259-25.661l0.053 0.066-89.754-103.234c-5.34-5.84-12.992-9.489-21.496-9.489-9.059 0-17.152 4.141-22.487 10.633l-0.040 0.051c-5.807 6.941-9.333 15.964-9.333 25.81 0 9.269 3.125 17.808 8.379 24.621l-0.070-0.094 19.452 22.438z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":32,"tags":["Right rotation"]},"attrs":[{}],"properties":{"order":77,"id":29,"name":"Right-rotation","prevSize":32,"code":59667},"setIdx":0,"setId":2,"iconIdx":24},{"icon":{"paths":["M190.863 440.855c-35.812 2.633-63.87 32.336-63.87 68.591 0 1.532 0.050 3.053 0.149 4.56l-0.011-0.205v364.732c-0.081 1.251-0.127 2.713-0.127 4.185 0 36.252 28.052 65.952 63.633 68.577l0.226 0.013h509.345c35.812-2.633 63.87-32.336 63.87-68.591 0-1.532-0.050-3.053-0.149-4.56l0.011 0.205v-364.647c0.085-1.277 0.133-2.768 0.133-4.27 0-36.254-28.055-65.955-63.639-68.578l-0.226-0.013zM190.863 367.909h509.345c71.592 5.356 127.65 64.759 127.65 137.256 0 3.039-0.098 6.055-0.292 9.044l0.021-0.407v364.732c0.143 2.351 0.225 5.099 0.225 7.867 0 72.463-56.041 131.837-127.147 137.146l-0.457 0.027h-509.345c-71.842-5.078-128.199-64.604-128.199-137.294 0-2.755 0.081-5.49 0.241-8.205l-0.018 0.374v-364.732c-0.171-2.567-0.268-5.564-0.268-8.584 0-72.672 56.399-132.171 127.815-137.114l0.429-0.024zM455.347 83.716c227.627-23.804 443.651 142.395 504.568 402.784 0.835 2.942 1.315 6.322 1.315 9.813 0 15.787-9.812 29.282-23.67 34.72l-0.253 0.088c-2.33 0.612-5.005 0.964-7.763 0.964-15.699 0-28.736-11.399-31.286-26.372l-0.026-0.187c-55.883-238.889-261.583-385.891-470.526-344.256l47.778 54.603c5.372 6.771 8.618 15.44 8.618 24.867 0 9.855-3.548 18.882-9.436 25.872l0.050-0.061c-5.376 6.499-13.441 10.61-22.467 10.61-8.671 0-16.456-3.793-21.786-9.811l-0.027-0.031-90.437-103.234c-5.729-6.895-9.206-15.839-9.206-25.595s3.477-18.7 9.259-25.661l-0.053 0.066 89.754-103.234c5.34-5.84 12.992-9.489 21.496-9.489 9.059 0 17.152 4.141 22.487 10.633l0.040 0.051c5.807 6.941 9.333 15.964 9.333 25.81 0 9.269-3.125 17.808-8.379 24.621l0.070-0.094-19.452 22.438z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":32,"tags":["Left rotation"]},"attrs":[{}],"properties":{"order":78,"id":28,"name":"Left-rotation","prevSize":32,"code":59668},"setIdx":0,"setId":2,"iconIdx":25},{"icon":{"paths":["M1183.557 841.742c16.592 19.193 26.701 44.392 26.701 71.952 0 60.916-49.382 110.299-110.299 110.299-7.008 0-13.864-0.654-20.509-1.903l0.685 0.107h-949.293c-115.595 0-164.286-79.82-106.396-180.455l474.554-766.237c15.226-44.189 56.45-75.368 104.956-75.368s89.729 31.179 104.722 74.59l0.234 0.778zM566.182 267.204v392.596c-0 0.002-0 0.004-0 0.007 0 13.593 7.408 25.455 18.406 31.771l0.178 0.094c5.445 3.1 11.964 4.927 18.91 4.927s13.464-1.827 19.102-5.028l-0.192 0.1c11.177-6.41 18.584-18.273 18.584-31.866 0-0.002-0-0.005-0-0.007l0 0v-392.596c-0.003-20.884-16.934-37.813-37.819-37.813s-37.816 16.929-37.819 37.813l-0 0zM566.182 806.153v49.063c-0 0.002-0 0.004-0 0.007 0 13.593 7.408 25.455 18.406 31.771l0.178 0.094c5.445 3.1 11.964 4.927 18.91 4.927s13.464-1.827 19.102-5.028l-0.192 0.1c11.177-6.41 18.584-18.273 18.584-31.866 0-0.002-0-0.005-0-0.007l0 0v-48.691c-0.003-20.884-16.934-37.813-37.819-37.813s-37.816 16.929-37.819 37.813l-0 0z"],"attrs":[{}],"width":1212,"isMulticolor":false,"isMulticolor2":false,"grid":32,"tags":["remind"]},"attrs":[{}],"properties":{"order":79,"id":27,"name":"remind","prevSize":32,"code":59669},"setIdx":0,"setId":2,"iconIdx":26},{"icon":{"paths":["M924.521 970.278c-15.571-11.143-35.771-24.6-56.345-37.516l-5.608-3.285c-21.122-15.557-45.692-28.034-72.182-36.102l-1.719-0.45c-40.261 14.918-86.767 23.549-135.288 23.549-0.79 0-1.58-0.002-2.37-0.007l0.122 0.001c-0.943 0.006-2.057 0.009-3.173 0.009-28.053 0-55.601-2.159-82.488-6.321l2.997 0.382c-21.182-4.453-36.856-22.983-36.856-45.173 0-2.55 0.207-5.051 0.605-7.488l-0.036 0.266c1.908-10.353 6.582-19.391 13.221-26.588l-0.033 0.037c-24.893 4.765-53.561 7.531-82.861 7.611l-0.068 0c-1.054 0.008-2.3 0.012-3.548 0.012-55.192 0-108.341-8.745-158.138-24.925l3.617 1.016c-24.348 10.891-45.151 22.715-64.672 36.257l1.303-0.855c-29.295 17.701-55.227 35.933-61.953 40.358l-78.238 55.404 9.647-98.063c2.301-25.224 3.717-50.802 4.602-76.38 0.954-7.745 1.498-16.712 1.498-25.805 0-20.536-2.776-40.424-7.972-59.31l0.367 1.566c-67.417-69.825-108.957-165.018-108.957-269.914 0-60.050 13.614-116.92 37.923-167.693l-1.009 2.34c24.777-52.413 58.238-96.803 98.989-133.201l0.401-0.352c85.102-74.624 197.34-120.148 320.21-120.148s235.108 45.524 320.766 120.626l-0.556-0.478c41.234 36.752 74.779 81.139 98.586 131.062l1.070 2.492c23.361 48.625 37.009 105.714 37.009 165.991s-13.648 117.366-38.023 168.345l1.014-2.355c-24.836 52.432-58.322 96.845-99.081 133.292l-0.399 0.35c-51.415 45.736-113.45 80.743-181.864 100.842l-3.376 0.85c15.806 1.906 34.245 3.060 52.929 3.185l0.174 0.001c46.322-0.002 90.882-7.548 132.517-21.476l-2.946 0.855c5.873-1.328 12.644-2.13 19.588-2.212l0.060-0.001c0.117-0.001 0.256-0.001 0.395-0.001 18.123 0 35.046 5.139 49.391 14.039l-0.4-0.231c22.462 10.539 41.056 20.804 58.934 32.099l-2.202-1.299c-0.708-94.966 12.656-121.783 27.525-137.536 53.886-54.479 87.49-129.115 88.503-211.598l0.002-0.194c-0.16-47.376-11.52-92.062-31.569-131.598l0.77 1.673c-21.071-42.405-49.548-78.097-84.077-106.749l-0.534-0.43c-8.923-7.578-14.995-18.275-16.526-30.387l-0.024-0.235c-0.198-1.652-0.311-3.565-0.311-5.504 0-10.691 3.434-20.58 9.26-28.624l-0.098 0.142c7.816-10.766 20.357-17.689 34.515-17.701l0.002-0c10.151 0.107 19.418 3.802 26.614 9.875l-0.063-0.051c44.916 37.12 81.447 82.646 107.505 134.353l1.090 2.387c25.354 50.488 40.27 109.995 40.447 172.968l0 0.058c-0.755 107.912-43.96 205.589-113.728 277.287l0.088-0.091c-2.177 13.176-3.422 28.36-3.422 43.835 0 11.030 0.632 21.911 1.862 32.611l-0.122-1.306c0.974 36.641 3.806 69.122 4.514 76.291l9.647 99.037zM437.125 92.133c-0.005-0-0.011-0-0.017-0-185.645 0-337.662 143.974-350.488 326.356l-0.063 1.112c1.15 82.15 34.481 156.299 87.924 210.593l-0.039-0.040c15.488 16.55 29.472 44.783 27.702 139.129 28.9-24.049 64.831-40.611 104.285-46.245l1.125-0.132h0.797c0.519-0.015 1.13-0.024 1.743-0.024 6.156 0 12.107 0.882 17.732 2.525l-0.446-0.112c38.372 13.075 82.575 20.622 128.541 20.622 0.051 0 0.102-0 0.154-0l8.222 0c10.886 0.974 21.861 1.593 32.57 1.593 0.671 0.005 1.464 0.008 2.258 0.008 181.54 0 328.707-147.167 328.707-328.707 0-171.18-130.849-311.798-297.983-327.29l-1.297-0.097c-9.593-0.966-20.801-1.544-32.134-1.593l-0.081-0c-13.665 0.005-27.136 0.809-40.377 2.367l1.612-0.154c-7.611 0.266-14.072 0.089-20.445 0.089zM246.043 485.36c-35.866-2.502-64.175-31.609-65.402-67.589l-0.003-0.117c-0.464-2.973-0.729-6.401-0.729-9.891 0-37.246 30.194-67.441 67.441-67.441s67.441 30.194 67.441 67.441c0 1.612-0.057 3.211-0.168 4.794l0.012-0.213c0.010 0.451 0.016 0.983 0.016 1.516 0 19.164-7.338 36.613-19.358 49.692l0.048-0.053c-12.013 13.252-29.212 21.613-48.368 21.86l-0.044 0h-0.885z","M682.549 485.537c-37.106-0.097-67.208-29.95-67.706-66.951l-0-0.047c-0.009-0.42-0.015-0.915-0.015-1.411 0-18.222 7.265-34.748 19.057-46.838l-0.013 0.014c12.33-12.666 29.545-20.523 48.596-20.523 37.442 0 67.795 30.353 67.795 67.795 0 37.040-29.704 67.142-66.59 67.784l-0.060 0.001zM455.445 485.537c-37.241-0.201-67.352-30.437-67.352-67.705 0-37.393 30.313-67.706 67.706-67.706s67.706 30.313 67.706 67.706c0 37.269-30.112 67.504-67.333 67.705l-0.019 0z"],"attrs":[{},{}],"width":1102,"isMulticolor":false,"isMulticolor2":false,"grid":32,"tags":["Notes - list"]},"attrs":[{},{}],"properties":{"order":80,"id":26,"name":"Notes---list","prevSize":32,"code":59670},"setIdx":0,"setId":2,"iconIdx":27},{"icon":{"paths":["M511.733 0c-282.623 0-511.733 229.111-511.733 511.733v0 461.093c-0 28.262 22.911 51.173 51.173 51.173h460.56c282.77 0 512-229.23 512-512s-229.23-512-512-512l0-0z","M750.756 562.907c-39.096 0-70.79-31.694-70.79-70.79s31.694-70.79 70.79-70.79c39.096 0 70.79 31.694 70.79 70.79v-0c-0.061 39.072-31.718 70.729-70.784 70.79l-0.006 0zM239.022 562.907c-39.096 0-70.79-31.694-70.79-70.79s31.694-70.79 70.79-70.79c39.096 0 70.79 31.694 70.79 70.79v-0c-0.060 38.997-31.597 70.608-70.559 70.79l-0.017 0zM506.51 562.907c-39.096 0-70.79-31.694-70.79-70.79s31.694-70.79 70.79-70.79c39.096 0 70.79 31.694 70.79 70.79l-0-0c-0.060 38.997-31.597 70.608-70.559 70.79l-0.017 0z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":32,"tags":["Have been added"]},"attrs":[{},{}],"properties":{"order":81,"id":25,"name":"Have-been-added","prevSize":32,"code":59671},"setIdx":0,"setId":2,"iconIdx":28},{"icon":{"paths":["M512 30.118c-266.136-0-481.882 215.746-481.882 481.882v0 433.694c-0 26.614 21.575 48.188 48.188 48.188v0h433.694c266.136 0 481.882-215.746 481.882-481.882s-215.746-481.882-481.882-481.882v0z","M489.653 240.941c27.479-0 49.754 22.276 49.754 49.754v149.203h149.203c0.516-0.019 1.122-0.030 1.731-0.030 27.479 0 49.754 22.276 49.754 49.754s-22.276 49.754-49.754 49.754c-0.609 0-1.215-0.011-1.818-0.033l0.087 0.002h-149.263v149.203c0.019 0.516 0.030 1.122 0.030 1.731 0 27.479-22.276 49.754-49.754 49.754s-49.754-22.276-49.754-49.754c0-0.609 0.011-1.215 0.033-1.818l-0.002 0.087v-149.203h-149.203c-0.516 0.019-1.122 0.030-1.731 0.030-27.479 0-49.754-22.276-49.754-49.754s22.276-49.754 49.754-49.754c0.609 0 1.215 0.011 1.818 0.033l-0.087-0.002h149.203v-149.203c0-27.479 22.276-49.754 49.754-49.754l-0 0z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":32,"tags":["Add a notation"]},"attrs":[{},{}],"properties":{"order":82,"id":24,"name":"Add-a-notation","prevSize":32,"code":59672},"setIdx":0,"setId":2,"iconIdx":29},{"icon":{"paths":["M977.665 277.433c-27.498-56.931-64.25-105.146-108.829-144.743l-0.467-0.407c-45.379-40.55-98.701-73.375-157.189-95.758l-3.502-1.177c-58.131-22.398-125.389-35.373-195.678-35.373s-137.547 12.975-199.51 36.66l3.833-1.287c-61.964 23.593-115.261 56.44-161.112 97.441l0.493-0.433c-45.046 40.003-81.799 88.219-108.11 142.441l-1.186 2.709c-25.501 52.443-40.407 114.084-40.407 179.207 0 75.804 20.198 146.89 55.505 208.171l-1.074-2.023c34.828 60.331 80.405 110.591 134.574 149.685l1.395 0.958c5.508 13.153 10.231 28.677 13.403 44.758l0.259 1.577c2.752 11.324 4.33 24.325 4.33 37.695 0 25.829-5.89 50.282-16.4 72.090l0.432-0.995c-2.704 4.946-4.295 10.835-4.295 17.096 0 19.978 16.195 36.173 36.173 36.173 13.717 0 25.651-7.635 31.783-18.888l0.095-0.19c31.688-49.367 80.287-85.517 137.457-100.478l1.62-0.36c33.251 6.987 71.459 10.987 110.602 10.987 0.074 0 0.148-0 0.222-0l-0.011 0c19.961 0 36.143-16.182 36.143-36.143s-16.182-36.143-36.143-36.143h0c-0.048 0-0.104 0-0.161 0-35.783 0-70.668-3.844-104.265-11.141l3.226 0.588c-2.805-0.782-6.026-1.231-9.352-1.231-2.549 0-5.037 0.264-7.437 0.766l0.235-0.041c-41.234 8.555-77.647 24.809-109.321 47.298l0.892-0.601c-3.688-38.016-13.699-72.879-28.996-104.721l0.804 1.858c-3.166-6.050-7.794-10.956-13.428-14.367l-0.161-0.091c-49.57-34.554-90.097-78.565-119.684-129.698l-1.033-1.934c-28.412-49.048-45.179-107.909-45.179-170.687 0-0.044 0-0.088 0-0.131l-0 0.007c1.076-107.969 49.395-204.441 125.24-269.884l0.465-0.392c38.971-34.807 84.762-62.981 134.986-82.19l3.007-1.010c50.523-19.43 108.973-30.684 170.052-30.684s119.53 11.255 173.391 31.803l-3.338-1.119c53.232 20.22 99.023 48.394 138.422 83.577l-0.428-0.376c76.256 65.857 124.523 162.328 125.559 270.096l0.001 0.18c0 0.058 0 0.125 0 0.193 0 64.773-17.838 125.379-48.869 177.175l0.872-1.569c-3.538 5.489-5.641 12.194-5.641 19.39 0 19.961 16.182 36.143 36.143 36.143 13.836 0 25.857-7.775 31.931-19.194l0.095-0.195c36.16-60.783 57.616-133.979 57.828-212.171l0-0.060c0-0.086 0-0.188 0-0.29 0-64.882-14.854-126.296-41.346-181.025l1.083 2.48z","M330.274 411.523h341.55c19.961 0 36.143-16.182 36.143-36.143s-16.182-36.143-36.143-36.143h-341.55c-19.961 0-36.143 16.182-36.143 36.143s16.182 36.143 36.143 36.143h0zM330.274 597.586h341.55c19.961 0 36.143-16.182 36.143-36.143s-16.182-36.143-36.143-36.143v0h-341.55c-19.961 0-36.143 16.182-36.143 36.143s16.182 36.143 36.143 36.143v0zM906.319 824.636h-90.791v-90.791c0-19.961-16.182-36.143-36.143-36.143s-36.143 16.182-36.143 36.143v-0 90.791h-90.863c-19.961 0-36.143 16.182-36.143 36.143s16.182 36.143 36.143 36.143v0h90.863v90.646c-0 19.961 16.182 36.143 36.143 36.143s36.143-16.182 36.143-36.143v0-90.863h90.791c19.961 0 36.143-16.182 36.143-36.143s-16.182-36.143-36.143-36.143l0 0z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":32,"tags":["notation-tool"]},"attrs":[{},{}],"properties":{"order":83,"id":23,"name":"notation-tool","prevSize":32,"code":59673},"setIdx":0,"setId":2,"iconIdx":30},{"icon":{"paths":["M576.839 1024c-0.078 0-0.171 0-0.263 0-17.457 0-33.866-4.491-48.133-12.38l0.512 0.26-132.043-72.722c-31.168-17.418-51.896-50.209-51.896-87.842 0-0.086 0-0.171 0-0.257l-0 0.013v-419.944c-0.021-6.502-3.186-12.261-8.054-15.838l-0.055-0.038-304.972-243.346-4.609-4.012c-16.912-17.791-27.315-41.908-27.315-68.456 0-54.918 44.52-99.438 99.438-99.438 0.181 0 0.361 0 0.541 0.001l-0.028-0h821.623c55.207 0.24 99.869 45.050 99.869 100.291 0 26.083-9.957 49.84-26.277 67.678l0.069-0.076-4.012 4.012-307.276 247.101c-4.302 3.73-7.007 9.204-7.007 15.31 0 0.199 0.003 0.397 0.009 0.595l-0.001-0.029v489.081c0 0.025 0 0.055 0 0.085 0 55.154-44.711 99.865-99.865 99.865-0.060 0-0.12-0-0.18-0l0.009 0zM83.831 112.158l303.094 242.492c22.928 18.042 37.599 45.687 37.897 76.77l0 0.049v419.774c-0 0.036-0 0.079-0 0.122 0 7.585 4.071 14.219 10.148 17.835l0.095 0.053 132.043 71.954c2.926 1.718 6.444 2.733 10.2 2.733s7.274-1.015 10.296-2.785l-0.096 0.052c5.826-3.559 9.656-9.883 9.656-17.102 0-0.229-0.004-0.458-0.012-0.685l0.001 0.033v-488.228c-0.003-0.269-0.004-0.587-0.004-0.905 0-31.063 14.231-58.803 36.53-77.054l0.177-0.14 304.204-244.968c2.455-3.337 3.929-7.528 3.929-12.063 0-3.25-0.757-6.324-2.104-9.054l0.054 0.12c-3.524-6.162-10.057-10.248-17.545-10.248-0.163 0-0.326 0.002-0.488 0.006l0.024-0h-821.964c-0.077-0.001-0.167-0.002-0.258-0.002-11.031 0-19.973 8.942-19.973 19.973 0 4.58 1.541 8.8 4.134 12.169l-0.035-0.047zM983.724 512.044h-218.422c-21.53-1.020-38.6-18.724-38.6-40.415s17.070-39.395 38.509-40.412l0.091-0.003h218.337c21.53 1.020 38.6 18.724 38.6 40.415s-17.070 39.395-38.509 40.412l-0.091 0.003zM983.724 661.329h-218.422c-21.53-1.020-38.6-18.724-38.6-40.415s17.070-39.395 38.509-40.412l0.091-0.003h218.337c21.53 1.020 38.6 18.724 38.6 40.415s-17.070 39.395-38.509 40.412l-0.091 0.003zM983.724 809.504h-218.422c-21.53-1.020-38.6-18.724-38.6-40.415s17.070-39.395 38.509-40.412l0.091-0.003h218.337c21.53 1.020 38.6 18.724 38.6 40.415s-17.070 39.395-38.509 40.412l-0.091 0.003z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":32,"tags":["filter"]},"attrs":[{}],"properties":{"order":84,"id":22,"name":"filter","prevSize":32,"code":59674},"setIdx":0,"setId":2,"iconIdx":31},{"icon":{"paths":["M287.649 444.927c0 44.901 36.4 81.301 81.301 81.301s81.301-36.4 81.301-81.301c0-44.901-36.4-81.301-81.301-81.301v0c-44.901 0-81.301 36.4-81.301 81.301v0zM865.27 773.226c0.982 0.047 2.133 0.074 3.291 0.074 40.464 0 73.267-32.803 73.267-73.267s-32.803-73.267-73.267-73.267c-40.464 0-73.267 32.803-73.267 73.267 0 0.008 0 0.016 0 0.024l-0-0.001c0.013 39.297 30.961 71.362 69.815 73.165l0.162 0.006zM865.27 842.138c-78.47-0-142.082-63.612-142.082-142.082s63.612-142.082 142.082-142.082c78.47 0 142.082 63.612 142.082 142.082v0c0 78.47-63.612 142.082-142.082 142.082v0zM831.298 445.895l-11.905 35.617-124.758 72.009-36.585-7.453-31.165 53.813 24.777 27.971v143.921l-24.777 27.971 31.165 53.813 36.585-7.549 124.758 72.106 11.905 35.617h61.943l11.808-35.521 125.822-72.106 36.585 7.549 31.165-53.813-22.551-27.971v-144.309l24.777-27.971-31.165-53.813-36.585 7.549-125.822-72.106-11.905-35.617h-64.073zM962.153 434.571l79.752 46.264 59.233-12.292 82.268 139.953-40.36 45.199v92.625l40.36 45.199-80.72 140.050-59.233-12.389-79.655 46.264-19.357 57.588h-161.44l-19.357-57.588-79.655-45.78-59.814 12.389-80.72-140.050 40.36-45.78v-92.141l-40.36-45.586 80.72-139.953 59.814 12.292 79.655-45.78 19.357-57.588h161.536l17.809 57.007z","M943.183 377.080h-161.44l-19.357 57.588-79.655 45.78-59.717-12.389-80.72 139.953 40.36 45.78v92.141l-40.36 45.683 80.72 140.050 59.717-12.389 79.655 45.78 19.357 57.588h161.536l19.357-57.588 79.752-46.264 59.233 12.292 81.784-139.469-40.36-45.199v-92.625l40.36-45.199-80.72-139.953-59.233 12.292-79.655-46.264zM694.539 553.618l124.758-72.106 11.905-35.617h61.943l11.808 35.617 125.822 72.009 36.585-7.453 31.165 53.813-24.681 27.971v145.18l24.681 27.971-31.165 53.813-36.585-7.549-125.822 72.106-11.905 35.617h-61.847l-11.905-35.617-124.758-72.106-36.585 7.549-31.165-53.813 24.681-27.971v-145.18l-24.681-27.971 31.165-53.813 36.585 7.549zM865.174 557.974c-78.47-0-142.082 63.612-142.082 142.082s63.612 142.082 142.082 142.082c78.47 0 142.082-63.612 142.082-142.082v0c0-0.029 0-0.063 0-0.097 0-78.47-63.612-142.082-142.082-142.082l-0 0zM865.174 773.226c-0.982 0.047-2.133 0.074-3.291 0.074-40.464 0-73.267-32.803-73.267-73.267s32.803-73.267 73.267-73.267c40.464 0 73.267 32.803 73.267 73.267 0 0.008-0 0.016-0 0.024l0-0.001c-0.013 39.297-30.961 71.362-69.815 73.165l-0.162 0.006z","M454.896 798.972h-84.978c-0.059 0-0.129 0-0.199 0-17.782 0-33.55-8.625-43.348-21.92l-0.104-0.148-219.608-301.974c-5.785-8.452-9.239-18.897-9.239-30.149s3.453-21.697 9.358-30.334l-0.119 0.185 219.608-301.974c9.902-13.443 25.67-22.068 43.452-22.068 0.070 0 0.14 0 0.209 0l-0.011-0h667.826c29.72 0 53.813 24.093 53.813 53.813h-0v235.772c0 25.284 20.496 45.78 45.78 45.78s45.78-20.496 45.78-45.78l-0 0v-272.357c0-0.029 0-0.063 0-0.097 0-59.426-48.119-107.613-107.519-107.723l-0.011-0h-728.898c-0.035-0-0.076-0-0.117-0-35.996 0-67.857 17.703-87.352 44.877l-0.22 0.322-241.192 340.398c-11.102 16.668-17.715 37.154-17.715 59.185s6.613 42.516 17.963 59.581l-0.248-0.396 241.095 340.204c19.824 26.888 51.375 44.137 86.955 44.137 0.258 0 0.516-0.001 0.773-0.003l-0.039 0h107.53c0.689 0.038 1.496 0.060 2.308 0.060 24.696 0 44.715-20.020 44.715-44.715s-20.020-44.715-44.715-44.715c-0.641 0-1.28 0.014-1.914 0.040l0.091-0.003z"],"attrs":[{},{},{}],"width":1184,"isMulticolor":false,"isMulticolor2":false,"grid":32,"tags":["class-edit"]},"attrs":[{},{},{}],"properties":{"order":85,"id":21,"name":"class-edit","prevSize":32,"code":59675},"setIdx":0,"setId":2,"iconIdx":32},{"icon":{"paths":["M519.4 0c-104.088 0.349-188.696 83.261-191.773 186.651l-0.007 0.284h-242.169c-27.197 0-49.244 22.047-49.244 49.244s22.047 49.244 49.244 49.244v0h54.001v550.673c-0.391 4.377-0.614 9.468-0.614 14.612 0 89.811 67.946 163.752 155.238 173.224l0.773 0.068h438.706c88.34-9.155 156.636-83.201 156.636-173.197 0-5.177-0.226-10.301-0.669-15.363l0.046 0.657v-550.409h48.892c27.197 0 49.244-22.047 49.244-49.244s-22.047-49.244-49.244-49.244v0h-227.546c-2.605-103.822-87.257-187.023-191.402-187.287l-0.026-0zM419.237 186.935c2.812-53.060 46.521-95.019 100.030-95.019s97.218 41.959 100.020 94.77l0.011 0.249zM294.849 931.942c-30.48 0-64.132-39.378-64.132-95.846v-550.409h566.882v550.937c0 56.292-33.564 95.846-64.132 95.846h-438.618zM294.849 931.942z","M361.8 811.871c22.994-2.767 40.642-22.159 40.642-45.673 0-1.537-0.075-3.056-0.223-4.553l0.015 0.19v-285.423c0.588-2.616 0.925-5.62 0.925-8.703 0-22.867-18.537-41.404-41.404-41.404s-41.404 18.537-41.404 41.404c0 3.083 0.337 6.087 0.976 8.978l-0.051-0.275v285.423c-0.142 1.352-0.222 2.921-0.222 4.509 0 23.516 17.719 42.893 40.534 45.508l0.211 0.020zM508.3 811.871c22.994-2.767 40.642-22.159 40.642-45.673 0-1.537-0.075-3.056-0.223-4.553l0.015 0.19v-285.423c0.588-2.616 0.925-5.62 0.925-8.703 0-22.867-18.537-41.404-41.404-41.404s-41.404 18.537-41.404 41.404c0 3.083 0.337 6.087 0.976 8.978l-0.051-0.275v285.423c-0.127 1.282-0.199 2.77-0.199 4.276 0 23.56 17.684 42.989 40.502 45.74l0.22 0.022zM662.376 811.871c22.994-2.767 40.642-22.159 40.642-45.673 0-1.537-0.075-3.056-0.223-4.553l0.015 0.19v-285.423c0.588-2.616 0.925-5.62 0.925-8.703 0-22.867-18.537-41.404-41.404-41.404s-41.404 18.537-41.404 41.404c0 3.083 0.337 6.087 0.976 8.978l-0.051-0.275v285.423c-0.152 1.396-0.238 3.016-0.238 4.656 0 23.517 17.79 42.879 40.647 45.363l0.203 0.018zM662.376 811.871z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":32,"tags":["delete"]},"attrs":[{},{}],"properties":{"order":86,"id":20,"name":"delete","prevSize":32,"code":59676},"setIdx":0,"setId":2,"iconIdx":33},{"icon":{"paths":["M682.807 1024c-250.538 0-473.763-157.571-669.676-466.304-8.344-12.83-13.306-28.526-13.306-45.38s4.962-32.551 13.505-45.707l-0.199 0.326c195.913-308.524 419.138-466.935 669.676-466.935s473.763 157.571 669.676 466.304c8.344 12.83 13.306 28.526 13.306 45.38s-4.962 32.551-13.505 45.707l0.199-0.326c-195.703 309.259-418.928 466.935-669.676 466.935zM682.807 102.421c-207.573 0-399.179 134.46-576.184 409.684 176.794 275.119 368.611 409.684 576.184 409.684s399.179-134.46 576.184-409.684c-177.005-275.224-368.4-409.684-576.184-409.684zM682.807 750.982c-130.852-1.484-236.356-107.905-236.356-238.968 0-131.986 106.996-238.982 238.982-238.982 131.981 0 238.974 106.988 238.982 238.967l0 0.001c-0.594 132.116-107.832 238.988-240.031 238.988-0.555 0-1.109-0.002-1.663-0.006l0.085 0zM682.807 648.561c74.831-0.772 135.196-61.614 135.196-136.555 0-75.421-61.141-136.561-136.561-136.561-75.418 0-136.558 61.137-136.561 136.554l-0 0c0.654 75.56 62.059 136.562 137.712 136.562 0.076 0 0.151-0 0.227-0l-0.012 0zM682.807 648.561z"],"attrs":[{}],"width":1366,"isMulticolor":false,"isMulticolor2":false,"grid":32,"tags":["visible"]},"attrs":[{}],"properties":{"order":87,"id":19,"name":"visible","prevSize":32,"code":59677},"setIdx":0,"setId":2,"iconIdx":34},{"icon":{"paths":["M0 1023.744v-753.971l269.107-269.773h754.893v754.176l-269.107 269.824zM691.2 955.392v-197.171h-378.163l-196.813 197.171zM759.245 922.675l163.84-164.454h-163.84zM68.045 907.315l196.71-197.222v-376.474h-196.71zM956.006 690.176v-573.696l-196.813 197.274v376.474zM691.149 690.176v-356.506h-358.4v356.506zM711.219 265.216l196.813-197.222h-575.181v197.222zM264.755 265.216v-163.84l-163.84 163.84z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":32,"tags":["biaozhunkuang"]},"attrs":[{}],"properties":{"order":88,"id":18,"name":"biaozhunkuang","prevSize":32,"code":59678},"setIdx":0,"setId":2,"iconIdx":35},{"icon":{"paths":["M29.191 581.779l32.952-22.57 37.090 57.779-35.059 23.698zM86.744 547.849l52.061-33.705 36.94 57.704-54.243 34.983zM163.106 502.709l52.137-33.78 37.090 57.779-54.243 34.983zM239.693 457.569l52.061-33.855 37.090 57.704-54.243 35.134zM316.281 412.429l10.307-9.028-1.204-9.178 68.613-2.407 2.483 51.46-45.14 28.137zM327.867 366.236l-2.483-62.444 68.613-2.483 2.483 65.002zM327.867 275.956l-2.483-62.444 68.613-2.483 2.483 65.002zM327.867 185.149l-2.483-62.444 68.613-2.483 2.483 65.002zM327.867 94.869l-2.483-40.099 68.613-2.483 2.483 42.582z","M1.354 623.383l-1.354-414.611 358.712-208.471 688.46 367.289h6.32l-1.128 10.232v435.074l-389.182 210.653zM70.193 248.796l1.279 335.014 595.321 357.734 315.98-171.005-1.354-359.314-620.298-330.349z","M630.53 998.045l-2.483-386.172-619.696-359.013 32.35-60.563 624.963 360.367 345.546-187.18 34.758 59.209-348.104 189.889 1.279 383.69z"],"attrs":[{},{},{}],"width":1054,"isMulticolor":false,"isMulticolor2":false,"grid":32,"tags":["lifangti"]},"attrs":[{},{},{}],"properties":{"order":89,"id":17,"name":"lifangti","prevSize":32,"code":59679},"setIdx":0,"setId":2,"iconIdx":36},{"icon":{"paths":["M804.16 1023.999h-584.159c-17.621-0-32.542-11.562-37.59-27.513l-0.076-0.279-180.506-584.159c-1.124-3.491-1.772-7.507-1.772-11.674 0-12.701 6.017-23.996 15.356-31.19l0.092-0.068 472.622-361.013c6.552-5.055 14.878-8.102 23.916-8.102s17.365 3.047 24.008 8.17l-0.092-0.068 472.622 361.013c9.431 7.263 15.449 18.558 15.449 31.259 0 4.167-0.648 8.183-1.848 11.952l0.077-0.279-180.506 584.232c-5.070 16.183-19.929 27.72-37.483 27.72-0.039 0-0.078-0-0.116-0l0.006 0zM249.037 945.229h526.233l163.611-530.329-426.911-325.979-426.764 325.979 163.831 530.183z","M341.558 839.909c-17.592-0.034-32.476-11.585-37.517-27.513l-0.076-0.279-105.393-340.9c-1.096-3.453-1.728-7.424-1.728-11.542 0-12.724 6.029-24.041 15.385-31.249l0.092-0.068 275.806-210.713c6.556-5.044 14.881-8.084 23.916-8.084s17.361 3.040 24.009 8.152l-0.093-0.069 275.806 210.713c9.389 7.278 15.373 18.559 15.373 31.237 0 7.359-2.016 14.246-5.526 20.141l0.1-0.181-162.514 272.369c-5.434 8.984-14.113 15.539-24.376 18.082l-0.271 0.057-283.778 68.458c-2.732 0.774-5.89 1.273-9.146 1.388l-0.069 0.002zM282.023 474.215l86.304 279.317 231.703-55.878 136.038-228.047-223.951-171.071z","M551.393 39.406h-78.697v511.532h78.697z","M34.595 366.702l-20.406 75.991 490.907 131.65 20.406-76.064z","M976.183 368.091l-485.641 130.187 20.406 75.991 485.641-130.187z","M486.738 527.607l-302.575 431.884 64.435 45.2 302.575-431.884z","M536.765 527.095l-63.85 45.639 303.453 442.27 63.777-45.565z"],"attrs":[{},{},{},{},{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":32,"tags":["target"]},"attrs":[{},{},{},{},{},{},{}],"properties":{"order":90,"id":16,"name":"target","prevSize":32,"code":59680},"setIdx":0,"setId":2,"iconIdx":37},{"icon":{"paths":["M408.288 192.832h402.304v402.304h-402.304z","M257.888 0v225.216h-73.152v-225.216z","M257.888 266.24v225.216h-73.152v-225.216z","M257.888 532.544v225.216h-73.152v-225.216z","M257.888 798.784v225.216h-73.152v-225.216z","M1020.96 804.608h-225.216v-73.152h225.216z","M756.768 804.608h-225.216v-73.152h225.216z","M492.512 804.608h-225.216v-73.152h225.216z","M228.256 804.608h-225.216v-73.152h225.216z"],"attrs":[{},{},{},{},{},{},{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":32,"tags":["auxiliaryline"]},"attrs":[{},{},{},{},{},{},{},{},{}],"properties":{"order":91,"id":15,"name":"auxiliaryline","prevSize":32,"code":59681},"setIdx":0,"setId":2,"iconIdx":38},{"icon":{"paths":["M853.333 512c0-47.128 38.205-85.333 85.333-85.333s85.333 38.205 85.333 85.333c0 47.128-38.205 85.333-85.333 85.333h0c-47.128 0-85.333-38.205-85.333-85.333v0zM426.667 512c0-47.128 38.205-85.333 85.333-85.333s85.333 38.205 85.333 85.333c0 47.128-38.205 85.333-85.333 85.333v0c-47.128 0-85.333-38.205-85.333-85.333v0zM0 512c0-47.128 38.205-85.333 85.333-85.333s85.333 38.205 85.333 85.333c0 47.128-38.205 85.333-85.333 85.333v0c-47.128 0-85.333-38.205-85.333-85.333v0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":32,"tags":["more"]},"attrs":[{}],"properties":{"order":92,"id":14,"name":"more","prevSize":32,"code":59682},"setIdx":0,"setId":2,"iconIdx":39},{"icon":{"paths":["M183.723 355.755c7.665-8.863 18.925-14.437 31.488-14.437s23.823 5.574 31.443 14.384l0.045 0.053 265.301 293.376 265.301-293.376c7.665-8.863 18.925-14.437 31.488-14.437s23.823 5.574 31.443 14.384l0.045 0.053c8.101 9.258 13.042 21.46 13.042 34.816s-4.941 25.558-13.095 34.878l0.053-0.062-296.789 328.192c-7.665 8.863-18.925 14.437-31.488 14.437s-23.823-5.574-31.443-14.384l-0.045-0.053-296.789-328.192c-8.104-9.020-13.060-21.010-13.060-34.158 0-0.231 0.002-0.462 0.005-0.693l-0 0.035c-0.003-0.196-0.004-0.426-0.004-0.658 0-13.148 4.956-25.139 13.102-34.206l-0.042 0.047z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":32,"tags":["unfold"]},"attrs":[{}],"properties":{"order":93,"id":13,"name":"unfold","prevSize":32,"code":59683},"setIdx":0,"setId":2,"iconIdx":40},{"icon":{"paths":["M992.335 347.294c4.027-7.335 6.396-16.072 6.396-25.363 0-13.735-5.177-26.261-13.687-35.732l0.044 0.049c-5.806-5.632-13.735-9.103-22.475-9.103-12.507 0-23.354 7.11-28.719 17.509l-0.085 0.181c-1.812 2.127-179.594 291.998-421.415 291.998-234.575 0-428.662-294.203-430.474-296.33-6.033-8.817-16.045-14.528-27.39-14.528-9.385 0-17.857 3.908-23.878 10.185l-0.011 0.011c-7.614 8.76-12.254 20.281-12.254 32.886 0 10.51 3.226 20.266 8.742 28.333l-0.111-0.172c24.783 53.571 58.084 99.096 98.673 136.897l0.261 0.24-93.499 115.554c-6.331 8.024-10.156 18.283-10.156 29.435 0 12.148 4.538 23.236 12.010 31.661l-0.043-0.050c3.947 7.863 11.948 13.165 21.187 13.165 0.25 0 0.499-0.004 0.747-0.012l-0.036 0.001c10.49-0.288 19.742-5.347 25.699-13.076l0.058-0.078 100.746-124.219c48.011 40.285 102.978 74.621 162.394 100.694l4.36 1.706-38.439 154.86c-1.198 3.869-1.887 8.317-1.887 12.927 0 18.627 11.264 34.622 27.351 41.548l0.294 0.112h11.028c18.095-1.059 32.651-14.91 34.798-32.589l0.018-0.179 38.439-154.86c27.353 6.615 58.868 10.611 91.247 11.025l0.283 0.003c32.599-0.276 64.127-4.28 94.356-11.606l-2.826 0.579 38.439 152.655c2.747 17.57 16.979 31.104 34.662 32.756l0.154 0.012c0.601 0.102 1.294 0.161 2 0.161 2.704 0 5.207-0.857 7.254-2.314l-0.038 0.026c16.375-7.066 27.628-23.071 27.628-41.706 0-4.592-0.683-9.025-1.954-13.202l0.084 0.321-38.991-152.734c63.776-27.782 118.742-62.118 167.809-103.26l-1.054 0.86 98.934 122.092c6.050 7.765 15.282 12.807 25.702 13.153l0.055 0.001c10.49-0.288 19.742-5.347 25.699-13.076l0.058-0.078c7.014-8.573 11.265-19.643 11.265-31.707 0-11.015-3.544-21.203-9.554-29.485l0.101 0.145-93.342-115.633c41.833-34.567 73.97-79.439 92.668-130.77l0.673-2.114zM992.335 347.294z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":32,"tags":["hidden"]},"attrs":[{}],"properties":{"order":94,"id":12,"name":"hidden","prevSize":32,"code":59684},"setIdx":0,"setId":2,"iconIdx":41},{"icon":{"paths":["M309.248 258.475l-207.36 207.019c-10.625 10.624-17.196 25.302-17.196 41.515s6.572 30.89 17.196 41.515l-0-0 207.445 207.104c0.665 0.669 1.585 1.083 2.603 1.083s1.938-0.414 2.602-1.083l0-0 57.003-57.003c0.669-0.665 1.083-1.585 1.083-2.603s-0.414-1.938-1.083-2.602l-0-0-136.533-136.533c-0.644-0.66-1.041-1.564-1.041-2.561 0-2.003 1.604-3.63 3.598-3.669l0.004-0h782.677c1.682-0.187 3.011-1.487 3.24-3.138l0.002-0.019v-80.811c0-2.027-1.643-3.669-3.669-3.669v0h-781.824c-1.997-0.038-3.601-1.666-3.601-3.669 0-0.996 0.397-1.9 1.042-2.561l-0.001 0.001 136.107-136.021c0.669-0.665 1.083-1.585 1.083-2.603s-0.414-1.938-1.083-2.602l-0-0-57.088-57.088c-0.665-0.669-1.585-1.083-2.603-1.083s-1.938 0.414-2.602 1.083l-0 0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":32,"tags":["left"]},"attrs":[{}],"properties":{"order":95,"id":11,"name":"left","prevSize":32,"code":59685},"setIdx":0,"setId":2,"iconIdx":42},{"icon":{"paths":["M714.667 258.389l207.36 207.104c10.625 10.624 17.196 25.302 17.196 41.515s-6.572 30.89-17.196 41.515l0-0-207.445 207.189c-0.665 0.669-1.585 1.083-2.603 1.083s-1.938-0.414-2.602-1.083l-0-0-57.003-57.088c-0.669-0.665-1.083-1.585-1.083-2.603s0.414-1.938 1.083-2.602l0-0 136.533-136.533c0.644-0.66 1.041-1.564 1.041-2.561 0-2.003-1.604-3.63-3.598-3.669l-0.004-0h-782.677c-1.835-0.221-3.243-1.768-3.243-3.644 0-0.009 0-0.017 0-0.026l-0 0.001v-80.299c0-2.027 1.643-3.669 3.669-3.669v0h781.824c1.997-0.038 3.601-1.666 3.601-3.669 0-0.996-0.397-1.9-1.042-2.561l0.001 0.001-136.533-136.533c-0.669-0.665-1.083-1.585-1.083-2.603s0.414-1.938 1.083-2.602l0-0 57.003-57.088c0.665-0.669 1.585-1.083 2.603-1.083s1.938 0.414 2.602 1.083l0 0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":32,"tags":["right"]},"attrs":[{}],"properties":{"order":96,"id":10,"name":"right","prevSize":32,"code":59686},"setIdx":0,"setId":2,"iconIdx":43},{"icon":{"paths":["M313.088 882.944c-8.863-7.665-14.437-18.925-14.437-31.488s5.574-23.823 14.384-31.443l0.053-0.045 293.376-265.301-293.376-265.301c-8.863-7.665-14.437-18.925-14.437-31.488s5.574-23.823 14.384-31.443l0.053-0.045c9.258-8.101 21.46-13.042 34.816-13.042s25.558 4.941 34.878 13.095l-0.062-0.053 328.192 296.789c8.863 7.665 14.437 18.925 14.437 31.488s-5.574 23.823-14.384 31.443l-0.053 0.045-328.192 296.789c-9.020 8.104-21.010 13.060-34.158 13.060-0.231 0-0.462-0.002-0.693-0.005l0.035 0c-0.196 0.003-0.426 0.004-0.658 0.004-13.148 0-25.139-4.956-34.206-13.102l0.047 0.042z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":32,"tags":["dakai"]},"attrs":[{}],"properties":{"order":97,"id":9,"name":"dakai","prevSize":32,"code":59687},"setIdx":0,"setId":2,"iconIdx":44},{"icon":{"paths":["M692.405 60.055c-79.209 0-147.697 59.151-159.744 134.927-1.601 3.95-2.53 8.532-2.53 13.33 0 0.036 0 0.072 0 0.108l-0-0.006 0.181 614.52c-16.023 64.934 8.915 133.783 65.837 174.682 18.372 10.24 38.129 17.709 58.669 22.227l14.878 2.53 5.542 0.602 10.842 0.723 6.325 0.12c0.38 0.003 0.829 0.005 1.278 0.005 44.45 0 84.683-18.052 113.768-47.226l0.004-0.004c29.469-30.165 47.65-71.469 47.65-117.019 0-11.192-1.098-22.128-3.191-32.706l0.176 1.064c79.39-10.421 141.553-79.752 141.553-160.949-0.272-50.341-23.374-95.232-59.47-124.883l-0.284-0.226c36.402-29.812 59.516-74.677 59.753-124.948l0-0.040c0-81.679-62.765-151.070-142.577-161.009l1.988-11.083c1.084-7.409 1.687-14.938 1.687-22.408-0.744-89.354-72.98-161.59-162.263-162.334l-0.071-0zM331.053 60.055c-89.354 0.744-161.59 72.98-162.334 162.263l-0 0.071c0 11.445 1.265 22.709 3.735 33.852-79.062 12.049-139.047 79.2-139.806 160.508l-0.001 0.079c-0 0.056-0 0.122-0 0.188 0 49.747 22.204 94.309 57.243 124.314l0.222 0.186c-37.527 30.6-60.235 76.499-60.235 125.53 0 79.511 59.753 147.878 137.156 160.226l-1.807 12.529c-3.795 38.972 6.024 78.065 27.708 110.652l6.927 10.12c5 6.746 10.541 13.131 16.504 19.034 27.365 24.91 63.103 41.053 102.534 43.762l0.528 0.029 11.686 0.422 10.24-0.301 9.999-0.904 16.866-2.891c29.515-6.686 56.621-21.685 78.005-43.128 23.191-23.010 38.49-52.887 43.61-85.173 1.546-3.205 2.669-6.926 3.173-10.84l0.019-0.183 0.422-4.939-0.060-279.733c0.723-7.529 0.783-15.059 0.12-22.588l-0.12-364.725c0.002-0.126 0.003-0.275 0.003-0.425 0-3.969-0.775-7.756-2.183-11.22l0.072 0.2c-13.34-77.663-79.81-136.131-160.083-136.914l-0.083-0.001zM692.465 134.566c47.586 0 87.823 40.177 87.823 87.823 0 37.768-22.648 70.234-58.007 82.944-18.854 7.529-29.395 29.756-22.287 47.164 4.262 15.259 17.905 26.32 34.179 26.623l0.034 0.001c0.288 0.012 0.627 0.020 0.967 0.020 1.922 0 3.79-0.227 5.581-0.655l-0.163 0.033c3.192-0.843 6.084-2.409 5.060-2.771 20.42-7.409 39.153-18.793 55.236-33.431l9.276-9.035 10.782-2.65c4.337-1.024 8.794-1.506 13.252-1.566 47.586 0 87.763 40.237 87.763 87.823-0.674 45.299-35.033 82.368-79.106 87.304l-0.404 0.037-8.433 0.482h-2.65c-0.478-0.023-1.039-0.036-1.602-0.036-19.694 0-35.659 15.965-35.659 35.659 0 0.563 0.013 1.124 0.039 1.681l-0.003-0.079c0 19.637 12.469 34.093 30.901 36.744l14.637 0.904c44.478 4.973 78.837 42.042 79.51 87.273l0.001 0.068c0 47.586-40.177 87.883-87.823 87.883-45.299-0.674-82.368-35.033-87.304-79.106l-0.037-0.404-0.904-14.697c-2.65-18.432-17.107-30.84-36.744-30.84-0.478-0.023-1.039-0.036-1.602-0.036-19.694 0-35.659 15.965-35.659 35.659 0 0.563 0.013 1.124 0.039 1.681l-0.003-0.079c0.541 66.246 40.315 123.071 97.202 148.427l1.042 0.415c17.769 29.094 16.143 65.596-4.939 95.955-4.382 6.337-9.305 11.834-14.833 16.655l-0.105 0.090c-35.539 28.311-85.353 25.48-117.82-6.987-16.279-15.963-26.369-38.186-26.369-62.765s10.090-46.802 26.355-62.751l0.014-0.014c6.851-6.615 11.105-15.882 11.105-26.142s-4.254-19.527-11.095-26.132l-0.011-0.010c-5.174-5.263-11.881-9.005-19.398-10.501l-0.239-0.040-5.421-0.602v-143.36c0-16.986 3.132-31.744 10.059-45.779 9.336-18.673 28.552-34.455 50.176-42.526 21.805-7.288 44.333-5.421 67.223 4.638 18.191 10.963 40.719 4.216 51.802-14.336 10.963-18.251 4.216-40.719-14.697-52.043-37.406-20.179-81.438-24.094-123.784-11.927-11.914 3.487-22.262 7.936-31.923 13.45l0.722-0.379-9.638 5.963v-223.895c0-47.586 40.237-87.823 87.883-87.823zM331.174 134.566c44.755 0 83.125 35.599 87.462 79.511l0.361 8.252v224.858c-10.912-7.139-23.517-12.996-36.948-16.917l-1-0.25c-14.186-4.426-30.496-6.975-47.402-6.975-28.095 0-54.545 7.040-77.683 19.453l0.88-0.431c-18.552 11.144-25.299 33.732-14.396 51.923 11.204 18.552 33.611 25.299 51.26 14.697 21.082-10.421 45.417-12.228 67.825-5.060 26.817 8.553 47.482 29.357 55.677 55.659l0.161 0.6 1.807 6.024-0.12 169.502c-9.846 0.375-18.651 4.544-25.052 11.077l-0.006 0.006c-6.883 6.591-11.161 15.855-11.161 26.118 0 7.717 2.419 14.869 6.539 20.74l-0.077-0.116 4.216 5.060 4.759 4.578 1.205 2.65 6.445 10.722c6.846 12.273 10.876 26.925 10.876 42.518 0 30.032-14.952 56.573-37.817 72.583l-0.285 0.189c-14.052 9.784-31.481 15.632-50.276 15.632-26.13 0-49.621-11.303-65.848-29.287l-0.070-0.078c-12.042-15.689-19.297-35.601-19.297-57.208 0-10.337 1.661-20.287 4.73-29.596l-0.191 0.668 4.337-11.384 0.843-3.012 10.421-4.819c54.071-27.161 90.637-81.986 91.136-145.401l0-0.067c0.023-0.477 0.036-1.037 0.036-1.599 0-19.694-15.965-35.659-35.659-35.659-0.542 0-1.082 0.012-1.618 0.036l0.076-0.003c-19.697 0-34.153 12.408-36.744 30.84l-1.024 15.119c-3.253 31.684-24.094 59.874-49.875 71.8-9.999-1.024-20.54 1.867-24.094 6.144-3.933 0.728-8.458 1.145-13.080 1.145-0.082 0-0.163-0-0.245-0l0.013 0c-47.586 0-87.823-40.237-87.823-87.823 0.67-45.281 34.998-82.34 79.044-87.304l0.406-0.037 14.697-0.904c18.372-2.711 30.901-17.167 30.901-36.804s-12.469-34.093-30.901-36.744l-14.637-0.904c-44.465-4.999-78.809-42.053-79.51-87.27l-0.001-0.071c0-47.586 40.177-87.883 87.823-87.883 6.987 0 14.697 1.265 18.191 0.723 19.034 21.444 43.43 37.527 70.716 46.562-0.602 0-0.723 0-0.542 0.12l3.494 1.626c1.514 0.65 3.277 1.027 5.128 1.027 0.103 0 0.206-0.001 0.309-0.004l-0.015 0c15.855-0.187 29.207-10.693 33.664-25.106l0.067-0.253c7.469-18.673-3.072-40.96-22.287-48.55-13.894-5.018-25.701-12.89-35.196-22.965l-0.042-0.045c-1.363-2.896-2.972-5.392-4.862-7.643l0.043 0.053-2.409-2.108-3.494-5.662c-7.349-12.679-11.686-27.896-11.686-44.125 0-0.115 0-0.231 0.001-0.346l-0 0.018c0-47.586 40.297-87.823 87.823-87.823z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":32,"tags":["model"]},"attrs":[{}],"properties":{"order":98,"id":8,"name":"model","prevSize":32,"code":59688},"setIdx":0,"setId":2,"iconIdx":45},{"icon":{"paths":["M873.526 533.067c-23.202-107.298-99.606-213.771-163.547-195.279-22.88 6.602-40.46 18.692-51.794 35.374-20.615-9.56-41.719-10.483-62.369-1.375-15.136 6.499-27.787 17.675-36.119 31.87-23.78-12.028-51.114-11.771-79.761 1.671-6.093 2.815-11.876 6.263-17.254 10.282-69.833-98.686-126.887-143.222-178.309-131.564-72.823 16.482-72.823 79.994-17.575 163.172l106.063 164.004c-58.201-10.942-100.294-1.545-125.247 31.792-40.801 54.558 2.381 104.946 102.646 150.055l193.785 86.195c6.929 2.949 14.742 3.053 21.751 0.289s12.65-8.156 15.715-15.040c3.059-6.875 3.303-14.685 0.658-21.745s-7.952-12.789-14.786-15.967l-193.671-86.139c-39.081-17.575-64.888-34.056-76.778-47.95-6.896-8.041-7.097-10.285-3.329-15.311 14.183-18.954 58.256-18.954 135.098 9.711 25.896 9.673 49.156-19.262 34.136-42.498l-148.020-228.87c-36.781-55.387-36.781-71.383-17.775-75.687 25.187-5.689 78.153 44.332 148.532 153.045 5.289 12.461 13.529 25.438 24.584 38.559 22.851 27.166 64.982-3.185 46.46-33.478-6.771-11.092-13.662-22.103-20.669-33.051 0.49-3.354 3.48-5.515 8.354-7.807 20.162-9.447 32.73-5.859 46.83 14.070 15.677 22.108 50.448 12.198 52.089-14.875 1.143-19.007 6.398-28.076 15.738-32.19 8.041-3.53 18.030-0.49 33.626 14.359 3.91 3.731 8.802 6.272 14.086 7.349 5.293 1.074 10.791 0.641 15.841-1.269s9.472-5.194 12.748-9.5c3.266-4.307 5.261-9.434 5.738-14.819 1.319-14.842 8.103-22.65 24.958-27.536 17.688-5.113 74.596 74.198 91.48 152.266 12.148 56.166 12.148 122.921-0.289 200.213-1.207 7.525 0.619 15.213 5.088 21.39 4.463 6.168 11.196 10.314 18.719 11.52 7.525 1.207 15.213-0.619 21.381-5.088s10.314-11.196 11.52-18.719c13.467-83.903 13.467-157.718-0.314-221.434z","M292.381 856.543h-122.519c-17.857 0-32.529-14.899-32.529-33.503v-622.096c0-18.605 14.672-33.503 32.529-33.503h336.89c17.888 0 32.56 14.904 32.56 33.503 0 7.618 3.027 14.914 8.404 20.305s12.689 8.406 20.305 8.406c7.618 0 14.914-3.027 20.308-8.406 5.385-5.389 8.404-12.688 8.404-20.305 0-50.136-40.164-90.938-89.958-90.938h-336.922c-49.784 0-89.958 40.801-89.958 90.938v622.131c0 50.109 40.166 90.912 89.958 90.912h122.519c7.618 0 14.914-3.027 20.305-8.407s8.406-12.688 8.406-20.31c0-7.613-3.027-14.911-8.406-20.301s-12.688-8.407-20.305-8.407z"],"attrs":[],"width":964,"isMulticolor":false,"isMulticolor2":false,"grid":32,"tags":["interactive"],"colorPermutations":{}},"attrs":[],"properties":{"order":110,"id":52,"name":"interactive","prevSize":32,"code":59702},"setIdx":0,"setId":2,"iconIdx":46},{"icon":{"paths":["M507.725 981.092v-161.361c45.053 0 85.529-8.975 126.125-26.924l63.002 152.386c-56.059 22.089-120.961 35.2-188.838 35.896l-0.29 0.002zM863.514 828.706l-117.091-112.031c30.879-30.176 54.226-67.928 67.042-110.255l0.478-1.836 153.109 53.787c-24.446 65.953-59.62 122.593-103.924 170.693l0.325-0.357zM994.097 465.629l-162.144 8.975c-4.457-44.812-13.492-85.168-36.019-125.523l144.135-71.676c31.501 58.244 49.51 121.006 54.028 188.224zM818.461 124.958l-103.599 125.523c-31.846-26.741-69.271-48.102-110.135-62.039l-2.438-0.722 45.053-156.904c63.063 22.406 121.608 53.787 171.118 94.142zM440.206 17.384l22.527 161.421c-45.053 4.457-85.589 22.346-121.668 44.752l-85.469-143.352c58.545-31.381 117.091-53.787 184.671-62.761zM111.461 214.583l130.582 94.142c-25.020 32.881-43.765 71.982-53.626 114.49l-0.402 2.058-157.626-35.838c18.070-62.761 45.053-121.066 81.072-174.853zM30.389 595.609l157.626-31.321c9.035 44.752 26.984 80.65 49.511 116.488l-135.1 94.142c-31.501-53.847-58.545-112.031-72.037-179.31zM251.078 909.417l85.529-139.015c36.019 22.406 76.555 35.898 121.608 44.873l-22.527 161.361c-67.58-9.035-126.065-31.381-184.61-67.279z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":32,"tags":["loading"]},"attrs":[{}],"properties":{"order":99,"id":7,"name":"loading","prevSize":32,"code":59689},"setIdx":0,"setId":2,"iconIdx":47},{"icon":{"paths":["M1108.66 572.841c0-0.001 0-0.002 0-0.003 0-26.984-15.41-50.368-37.91-61.834l-0.393-0.182-218.814-109.45c-11.424-5.843-19.109-17.53-19.109-31.013 0-0.014 0-0.028 0-0.042l-0 0.002v-226.066c0-28.834-17.915-54.768-45.042-64.834l-191.942-72.085c-12.035-4.663-25.962-7.364-40.521-7.364s-28.486 2.701-41.309 7.63l0.788-0.266-191.345 72.512c-26.379 10.221-44.75 35.378-44.787 64.829l-0 0.004v224.701c-0.018 13.465-7.698 25.131-18.913 30.876l-0.196 0.091-220.862 110.388c-22.893 11.647-38.304 35.032-38.304 62.016 0 0.091 0 0.182 0.001 0.273l-0-0.014 0.512 244.919c0 25.166 13.649 48.284 35.573 60.568l243.383 135.725c20.474 11.431 45.384 11.346 65.772-0.171l2.218-1.194 189.98-109.194c4.927-2.889 10.85-4.595 17.171-4.595 6.441 0 12.468 1.771 17.62 4.853l-0.157-0.087 191.26 111.071c9.557 5.558 21.032 8.838 33.274 8.838 11.998 0 23.259-3.151 33.002-8.671l-0.333 0.174 3.242-1.877 240.824-133.763c21.43-12.121 35.659-34.759 35.659-60.72 0-0.037-0-0.074-0-0.111l0 0.006-0.341-245.942zM763.164 368.871c0 0.015 0 0.032 0 0.049 0 13.501-7.725 25.198-18.997 30.912l-0.197 0.091-142.123 71.232c-1.12 0.563-2.441 0.893-3.839 0.893-4.79 0-8.675-3.87-8.701-8.653l-0-0.002v-176.587c0-31.564 19.109-59.886 48.284-71.659l124.891-49.905 0.597 203.63zM278.36 630.339l-0.256-0.171-161.232-81.298 179.402-89.744c4.498-2.319 9.817-3.679 15.453-3.679 5.897 0 11.446 1.488 16.293 4.11l-0.181-0.090 19.535 10.237 140.331 69.611c2.887 1.432 4.836 4.36 4.836 7.743 0 3.282-1.835 6.135-4.535 7.59l-0.046 0.023-140.587 75.753c-10.034 5.164-21.896 8.191-34.465 8.191-12.636 0-24.557-3.059-35.063-8.477l0.429 0.201zM500.843 851.286l-153.383 76.606-0.853-177.44c-0-0.065-0-0.142-0-0.219 0-29.958 17.044-55.935 41.965-68.762l0.434-0.203 117.725-59.118c1.119-0.569 2.44-0.902 3.839-0.902 4.746 0 8.596 3.837 8.616 8.578l0 0.002 0.853 190.407c-0.030 13.53-7.739 25.253-18.998 31.046l-0.196 0.092zM527.629 155.089l-111.412-41.801 138.454-52.038 138.454 52.038-111.412 41.801c-8.028 3.141-17.323 4.961-27.043 4.961s-19.015-1.82-27.562-5.139l0.52 0.177zM760.946 631.107l-139.734-76.35c-2.67-1.52-4.441-4.347-4.441-7.587 0-3.376 1.923-6.303 4.733-7.746l0.049-0.023 141.611-70.805 17.488-9.128c4.655-2.518 10.189-3.998 16.070-3.998 5.619 0 10.922 1.351 15.603 3.747l-0.194-0.090 20.218 10.066 159.184 79.763-158.075 83.004c-10.293 5.454-22.501 8.656-35.457 8.656-13.593 0-26.362-3.524-37.445-9.709l0.39 0.2zM1039.305 803.428c0 12.796-7.081 24.569-18.426 30.711l-188.53 99.895-0.597-183.326c-0-0.092-0.001-0.202-0.001-0.311 0-29.952 17.132-55.902 42.131-68.587l0.438-0.202 164.985-82.749v204.568z"],"attrs":[{}],"width":1109,"isMulticolor":false,"isMulticolor2":false,"grid":32,"tags":["cube"]},"attrs":[{}],"properties":{"order":100,"id":6,"name":"cube","prevSize":32,"code":59690},"setIdx":0,"setId":2,"iconIdx":48},{"icon":{"paths":["M761.6 6.4c64 0 128 25.6 179.2 76.8 102.4 102.4 102.4 262.4 0 364.8l-134.4 134.4-89.6-89.6 134.4-134.4c51.2-51.2 51.2-128 0-179.2s-128-51.2-179.2 0l-179.2 179.2c-25.6 25.6-38.4 57.6-38.4 89.6s12.8 64 32 89.6l70.4 64-89.6 89.6-70.4-70.4c-44.8-44.8-70.4-108.8-70.4-179.2s25.6-134.4 76.8-179.2l179.2-179.2c44.8-51.2 115.2-76.8 179.2-76.8z","M556.8 332.8l70.4 64c102.4 102.4 102.4 262.4 0 364.8l-179.2 179.2c-46.342 47.411-110.938 76.81-182.4 76.81s-136.059-29.399-182.353-76.762l-0.047-0.048c-47.411-46.342-76.81-110.938-76.81-182.4s29.399-136.059 76.762-182.353l0.048-0.047 134.4-134.4 89.6 89.6-134.4 134.4c-51.2 51.2-51.2 128 0 179.2s134.4 51.2 179.2 0l185.6-172.8c51.2-51.2 51.2-128 0-179.2l-70.4-70.4 89.6-89.6z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":32,"tags":["Frame"]},"attrs":[{},{}],"properties":{"order":101,"id":5,"name":"Frame","prevSize":32,"code":59691},"setIdx":0,"setId":2,"iconIdx":49},{"icon":{"paths":["M942.592 821.299l-27.853-387.328c33.824-16.411 56.73-50.492 56.73-89.924 0-41.167-24.967-76.503-60.585-91.692l-0.651-0.247c-11.179-4.799-24.191-7.589-37.854-7.589-27.231 0-51.873 11.084-69.661 28.985l-0.005 0.005-245.76-122.317c0.135-2.112 0.211-4.58 0.211-7.066s-0.077-4.954-0.228-7.401l0.017 0.336c-6.602-48.799-47.991-86.018-98.074-86.018s-91.472 37.219-98.017 85.507l-0.057 0.511c0.051 9.062 1.485 18.022 4.147 26.675l-154.778 104.55c-16.345-13.49-37.447-21.745-60.471-21.964l-0.048-0c-54.475 0.973-98.262 45.362-98.262 99.979 0 43.605 27.911 80.691 66.842 94.367l0.701 0.214v229.478c-40.129 13.254-68.577 50.417-68.577 94.225 0 54.688 44.333 99.021 99.021 99.021 43.522 0 80.486-28.078 93.766-67.108l0.206-0.697h174.797c10.272 32.939 36.56 58.023 69.517 66.414l0.678 0.146c6.81 1.712 14.627 2.694 22.674 2.694 27.253 0 51.875-11.266 69.463-29.396l0.024-0.024 244.992 93.338c4.034 51.18 46.558 91.183 98.426 91.183 54.518 0 98.714-44.196 98.714-98.714 0-48.079-34.373-88.131-79.886-96.92l-0.62-0.1 0.461-3.123zM872.397 309.299c0.12-0.001 0.262-0.002 0.405-0.002 15.414 0 28.636 9.382 34.269 22.747l0.091 0.244c1.835 4.3 2.902 9.302 2.902 14.553 0 18.155-12.752 33.331-29.787 37.061l-0.251 0.046c-2.134 0.439-4.586 0.691-7.098 0.691-5.302 0-10.343-1.121-14.897-3.139l0.235 0.093c-13.461-5.932-22.687-19.157-22.687-34.537 0-0.224 0.002-0.448 0.006-0.671l-0 0.034c-0-0.046-0-0.1-0-0.155 0-20.308 16.376-36.791 36.643-36.965l0.016-0h0.154zM773.786 332.288c-0.512 4.71-0.512 9.421 0 14.131-0 0.103-0.001 0.226-0.001 0.348 0 47.965 33.754 88.046 78.804 97.785l0.659 0.119 27.853 387.328c-16.485 8.169-29.944 20.282-39.497 35.144l-0.234 0.389-233.318-88.883c0.12-2.111 0.188-4.58 0.188-7.066s-0.068-4.955-0.203-7.407l0.015 0.341c0-0.039 0-0.086 0-0.133 0-54.219-43.264-98.334-97.153-99.705l-0.127-0.003c-43.343 0.301-79.989 28.634-92.732 67.76l-0.196 0.695h-174.643c-9.98-29.672-32.847-52.623-61.77-62.514l-0.694-0.206v-229.632c39.937-13.628 68.147-50.821 68.147-94.603 0-0.005-0-0.011-0-0.016l0 0.001c-0.364-9.439-1.855-18.379-4.343-26.893l0.196 0.781 154.829-104.55c16.472 13.63 37.814 21.898 61.087 21.898 27.323 0 51.985-11.397 69.49-29.696l0.034-0.036 243.61 124.621zM459.469 99.994c0.185-0.003 0.404-0.005 0.623-0.005 17.996 0 33.014 12.754 36.507 29.716l0.041 0.241c0.506 2.317 0.795 4.978 0.795 7.707 0 15.563-9.422 28.926-22.873 34.695l-0.246 0.094c-4.143 1.711-8.954 2.704-13.997 2.704-20.755 0-37.581-16.825-37.581-37.581 0-20.456 16.344-37.095 36.686-37.57l0.044-0.001zM149.658 309.043c0.12-0.001 0.262-0.002 0.405-0.002 15.414 0 28.636 9.382 34.269 22.747l0.091 0.244c1.86 4.328 2.941 9.366 2.941 14.656 0 10.366-4.152 19.762-10.883 26.616l0.006-0.006c-6.689 6.836-16.010 11.075-26.32 11.075-5.294 0-10.327-1.117-14.875-3.129l0.235 0.093c-13.461-5.932-22.687-19.157-22.687-34.537 0-0.224 0.002-0.448 0.006-0.671l-0 0.034c-0.001-0.076-0.001-0.166-0.001-0.257 0-20.288 16.389-36.748 36.649-36.863l0.011-0h0.154zM149.658 801.946c-20.228-0.174-36.558-16.612-36.558-36.864 0-20.36 16.505-36.865 36.865-36.865 0.108 0 0.216 0 0.324 0.001l-0.017-0c20.228 0.174 36.558 16.612 36.558 36.864 0 20.36-16.505 36.865-36.865 36.865-0.108 0-0.216-0-0.324-0.001l0.017 0zM510.976 801.946c-20.762-0.029-37.581-16.866-37.581-37.632 0-20.784 16.848-37.632 37.632-37.632s37.632 16.848 37.632 37.632c0 20.766-16.819 37.603-37.578 37.632l-0.003 0h-0.102zM924.006 958.72c-20.228-0.174-36.558-16.612-36.558-36.864 0-20.36 16.505-36.865 36.865-36.865 0.108 0 0.216 0 0.324 0.001l-0.017-0c20.228 0.174 36.558 16.612 36.558 36.864 0 20.36-16.505 36.865-36.865 36.865-0.108 0-0.216-0-0.324-0.001l0.017 0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":32,"tags":["polygon"]},"attrs":[{}],"properties":{"order":102,"id":4,"name":"polygon","prevSize":32,"code":59692},"setIdx":0,"setId":2,"iconIdx":50},{"icon":{"paths":["M186.745 169.337l566.703 424.691-190.087 11.426c-78.050 8.234-145.198 49.017-188.481 108.324l-0.528 0.758-104.717 158.451-82.998-703.704 0.108 0.054zM143.091 55.134c-24.468-6.575-38.804 11.102-34.493 47.373l104.017 881.287c2.695 23.444 10.779 36.864 20.803 39.559s23.929-5.389 37.349-25.762l161.684-244.574c31.819-42.345 79.528-71.266 134.113-77.892l0.947-0.094 292.648-17.624c47.859-2.856 55.619-28.726 17.246-57.452l-709.47-531.672c-7.086-5.683-15.412-10.176-24.473-13.006l-0.535-0.144h0.108z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":32,"tags":["edit"]},"attrs":[{}],"properties":{"order":103,"id":3,"name":"edit","prevSize":32,"code":59693},"setIdx":0,"setId":2,"iconIdx":51},{"icon":{"paths":["M905.168 756.72v-490.113c27.683-8.649 50.961-27.787 64.753-53.32 9.069-17.407 13.839-36.701 13.895-56.364-0.329-64.033-52.313-115.812-116.392-115.812-50.941 0-94.236 32.721-110.013 78.293l-0.247 0.816h-489.957c-15.697-46.969-59.279-80.22-110.631-80.22-64.281 0-116.393 52.112-116.393 116.393 0 51.352 33.251 94.935 79.399 110.392l0.821 0.239v490.113c-46.713 15.842-79.735 59.3-79.735 110.471 0 64.24 52.044 116.325 116.269 116.393h0.007c43.865-0.084 81.973-24.633 101.411-60.731l0.303-0.616c3.568-6.082 6.237-12.689 7.97-19.559h490.113c15.835 46.561 59.101 79.49 110.083 79.64h0.020c43.865-0.084 81.973-24.633 101.411-60.731l0.303-0.616c9.175-17.303 14-36.701 14.156-56.312-0.597-49.817-32.395-92.052-76.731-108.118l-0.809-0.259zM758.369 830.123h-490.533c-11.953-34.657-38.746-61.448-72.58-73.153l-0.822-0.248v-490.113c27.735-8.649 50.961-27.787 64.805-53.32 3.568-6.134 6.237-12.74 7.97-19.611h490.113c11.962 34.652 38.75 61.441 72.58 73.153l0.822 0.249v490.113c-34.44 11.813-61.066 38.437-72.634 72.065l-0.244 0.813h0.524zM868.469 114.664c0.019 0 0.036 0 0.057 0 23.657 0 42.835 19.178 42.835 42.835 0 0.24-0.002 0.479-0.006 0.719v-0.034c-0.077 7.641-1.865 14.839-5.004 21.267l0.13-0.293c-7.93 13.234-22.193 21.953-38.495 21.953-5.765 0-11.278-1.092-16.338-3.079l0.304 0.104c-15.963-6.52-27.008-21.922-27.008-39.913 0-12.004 4.919-22.856 12.847-30.651l0.006-0.006c7.867-7.864 18.727-12.727 30.72-12.74h0.002v-0.156zM159.62 114.664c0.001 0 0.003 0 0.005 0 23.688 0 42.887 19.204 42.887 42.887 0 0.22-0.002 0.443-0.005 0.664v-0.031c0 7.342-1.887 14.576-5.507 20.974-7.736 12.776-21.564 21.188-37.352 21.188-23.558 0-42.743-18.718-43.495-42.092l-0.002-0.070c0-24.035 19.484-43.515 43.515-43.515v0zM197 887.85c-7.559 13.211-21.567 21.973-37.624 21.973-23.862 0-43.203-19.342-43.203-43.203s19.342-43.203 43.203-43.203c6.071 0 11.848 1.253 17.090 3.511l-0.279-0.107c15.595 6.651 26.325 21.855 26.325 39.56 0 0.229-0.002 0.458-0.006 0.686v-0.033c0 7.342-1.887 14.576-5.507 20.974v-0.156zM906.428 887.85c-7.916 13.241-22.173 21.967-38.47 21.967-5.774 0-11.296-1.093-16.361-3.093l0.303 0.104c-15.928-6.502-26.948-21.87-26.948-39.815 0-0.012 0-0.023 0-0.030v0.002c0.044-23.999 19.509-43.439 43.515-43.439 5.977 0 11.67 1.206 16.852 3.386l-0.285-0.106c15.594 6.638 26.326 21.827 26.326 39.525 0 0.243-0.002 0.484-0.006 0.726v-0.034c-0.075 7.641-1.864 14.839-5.004 21.267l0.13-0.293v-0.156z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":32,"tags":["rectangle"]},"attrs":[{}],"properties":{"order":104,"id":2,"name":"rectangle","prevSize":32,"code":59694},"setIdx":0,"setId":2,"iconIdx":52},{"icon":{"paths":["M90.675 635.392l69.786 2.355-2.253 86.118 372.326 218.778 232.755-134.963 34.97 62.72-2.355 2.355-267.725 151.245h-2.253l-437.606-260.71 2.355-127.898zM709.837 100.096l262.963 158.31-4.608 512-104.806 62.822-34.816-62.874 72.192-41.83 4.608-428.237-232.858-141.978 37.376-58.214zM514.304 302.541c18.586 0 25.6 11.725 34.918 23.347l2.355 2.253 174.592 335.206c4.382 5.761 7.021 13.055 7.021 20.966s-2.639 15.206-7.084 21.052l0.063-0.086c-6.113 8.564-16.018 14.081-27.21 14.081-14.003 0-25.99-8.635-30.924-20.872l-0.080-0.224-16.384-32.666-34.918-65.126c-4.086-7.36-7.967-13.481-12.152-19.372l0.427 0.633-37.171 72.192c-7.014 16.333-16.333 30.31-23.347 46.541-4.836 12.2-16.533 20.67-30.209 20.67-11.854 0-22.221-6.364-27.872-15.862l-0.082-0.149c-3.139-5.504-4.989-12.094-4.989-19.116 0-8.565 2.753-16.488 7.423-22.931l-0.078 0.114 48.845-90.726c6.963-16.333 16.384-30.31 23.245-46.592 3.289-4.521 5.261-10.184 5.261-16.307s-1.972-11.786-5.317-16.388l0.056 0.080c-16.333-27.853-27.955-55.808-44.186-83.763-5.846 4.571-10.040 11.017-11.685 18.423l-0.040 0.214-69.786 132.608-67.277 132.864c-5.807 13.113-16.569 23.141-29.85 27.845l-0.358 0.111c-2.052 0.473-4.409 0.745-6.829 0.745-17.503 0-31.693-14.189-31.693-31.693 0-3.073 0.437-6.044 1.253-8.853l-0.056 0.224c1.843-5.632 4.147-11.11 6.912-16.384 58.163-111.718 114.022-221.133 172.186-332.8 7.066-18.586 16.435-30.259 35.021-30.259zM537.446 0l104.755 65.126-34.97 60.57-72.090-44.186-374.784 209.408v267.725h-69.734l2.355-309.555 444.467-249.088zM707.43 332.8c31.414 2.369 56.005 28.44 56.005 60.255 0 1.715-0.071 3.413-0.211 5.091l0.015-0.22c-3.159 31.592-29.605 56.056-61.764 56.056-1.201 0-2.394-0.034-3.578-0.101l0.164 0.007c-32.278-0.205-58.365-26.419-58.365-58.725 0-1.478 0.055-2.943 0.162-4.393l-0.012 0.194c0.92-32.565 27.538-58.612 60.24-58.612 2.589 0 5.139 0.163 7.642 0.48l-0.298-0.031z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":32,"tags":["ai"]},"attrs":[{}],"properties":{"order":105,"id":1,"name":"ai","prevSize":32,"code":59695},"setIdx":0,"setId":2,"iconIdx":53},{"icon":{"paths":["M424.842 314.4c-27.69-15.533-47.959-35.979-75.328-19.841-26.381 15.801-43.762 44.238-43.762 76.73 0 15.167 3.796 29.457 10.477 41.97l-0.237-0.475-163.763 159.739c-11.241-5.614-24.487-8.904-38.485-8.904h-0.001c-0.042 0-0.075 0-0.128 0-49.505 0-89.616 40.126-89.616 89.616s40.126 89.616 89.616 89.616c16.904 0 32.716-4.691 46.215-12.825l-0.401 0.22c13.777-8.288 25.092-20.129 32.668-34.326 7.627-13.258 11.7-28.314 11.739-43.647-0.107-15.381-4.284-29.767-11.488-42.171l0.215 0.411 163.763-159.507c12.020 6.302 25.381 9.51 38.972 9.473 48.553-0.45 87.732-39.925 87.732-88.527 0-0.042 0-0.103 0-0.157v0.016c0-12.825-33.576 39.953-39.009 28.41 75.752-67.184 4.074-49.386 2.647-74.848 0.417-12.12-17.518 24.623-10.462 4.736 3.738-6.015 26.651-58.094-11.353-15.714zM143.328 669.866c-6.015 10.315-16.952 17.186-29.509 17.379l-0.027 0.001c-16.718-1.081-29.854-14.903-29.854-31.799 0-17.592 14.271-31.867 31.867-31.867 16.897 0 30.719 13.146 31.788 29.767l0.010 0.103c-0.244 6.025-1.773 11.645-4.316 16.666l0.103-0.228h-0.042zM424.842 388.359c-6.015 10.315-16.952 17.186-29.509 17.379l-0.027 0.001c-16.718-1.081-29.854-14.903-29.854-31.799 0-17.592 14.271-31.867 31.867-31.867 16.897 0 30.719 13.146 31.788 29.767l0.010 0.103c-0.244 6.025-1.773 11.645-4.316 16.666l0.103-0.228h-0.042zM957.515 281.543c-49.399 0.215-89.385 40.213-89.579 89.609v0.016c-0.279 16.519 4.11 32.809 12.684 46.914l-161.396 156.24c-12.511-7.104-27.473-11.29-43.416-11.29-49.24 0-89.153 39.918-89.153 89.153 0 0.173 0.001 0.345 0.003 0.517v-0.024c0.941 14.209 5.495 27.978 13.165 40.011-5.355 4.736 13.827 0 9.473 7.766-11.353 11.841 13.445-3.591 11.319 9.473-10.315 25.704 53.116-2.369 17.938 20.548 11.501 6.768 24.521 10.554 37.876 11.039 49.1-0.33 88.894-39.693 89.957-88.576l0.004-0.103c-0.132-13.492-3.23-26.218-8.662-37.616l0.234 0.537 165.71-161.396c10.895 4.354 22.492 6.621 34.235 6.583 0.042 0 0.077 0 0.128 0 33.688 0 62.98-18.784 77.993-46.443l0.233-0.473c7.627-13.258 11.7-28.314 11.739-43.647-0.646-49.187-40.671-88.817-89.947-88.817-0.189 0-0.367 0.001-0.561 0.004h0.028zM705.594 669.111c-6.015 10.315-16.952 17.186-29.509 17.379l-0.027 0.001c-18.382-0.369-33.143-15.368-33.143-33.802 0-0.004 0-0.010 0-0.016v0.001c2.148-16.778 16.346-29.622 33.547-29.622s31.383 12.83 33.52 29.449l0.016 0.164c-0.302 6.047-1.897 11.654-4.518 16.652l0.103-0.215zM987.11 387.595c-6.015 10.315-16.952 17.186-29.509 17.379l-0.027 0.001c-18.382-0.369-33.143-15.368-33.143-33.802 0-0.004 0-0.010 0-0.016v0.001c2.148-16.778 16.346-29.622 33.547-29.622s31.383 12.83 33.52 29.449l0.016 0.164c-0.244 6.025-1.773 11.645-4.316 16.666l0.103-0.228h-0.189z","M746.878 688.474c9.622-12.738 15.397-28.846 15.397-46.303 0-12.972-3.187-25.19-8.842-35.925l0.204 0.417c-15.801-26.381-44.238-43.762-76.73-43.762-15.167 0-29.457 3.796-41.97 10.477l0.475-0.237-159.97-163.763c5.874-11.98 8.904-25.145 8.904-38.486 0-0.042 0-0.075 0-0.128 0-49.505-40.126-89.616-89.616-89.616s-89.616 40.126-89.616 89.616c0 16.904 4.691 32.716 12.825 46.215l-0.22-0.401c8.288 13.777 20.129 25.092 34.326 32.668 13.258 7.718 28.35 11.841 43.705 11.98 15.381-0.107 29.767-4.284 42.171-11.488l-0.411 0.215 159.549 163.521c-5.961 11.213-9.474 24.515-9.474 38.626 0 0.122 0 0.244 0.001 0.362v-0.016c0.33 49.1 39.693 88.894 88.576 89.957l0.103 0.004c12.886-0.475 25.565-3.738 37.068-9.473 1.513 1.707-6.101-14.768 0-11.179 15.195 14.069 8.525-36.025 22.578-26.185 46.776 34.326-39.111-66.418 10.981-7.105zM378.352 400.479c-10.315-6.015-17.186-16.952-17.379-29.509l-0.001-0.027c0.369-18.382 15.368-33.143 33.802-33.143 0.004 0 0.010 0 0.016 0h-0.001c16.778 2.148 29.622 16.346 29.622 33.547s-12.83 31.383-29.449 33.52l-0.164 0.016c-6.025-0.244-11.645-1.773-16.666-4.316l0.228 0.103v-0.189zM659.859 681.986c-10.315-6.015-17.186-16.952-17.379-29.509l-0.001-0.027c0.369-18.382 15.368-33.143 33.802-33.143 0.004 0 0.010 0 0.016 0h-0.001c16.778 2.148 29.622 16.346 29.622 33.547s-12.83 31.383-29.449 33.52l-0.164 0.016c-6.025-0.244-11.645-1.773-16.666-4.316l0.228 0.103v-0.189z"],"attrs":[{},{}],"width":1120,"isMulticolor":false,"isMulticolor2":false,"grid":32,"tags":["polyline"]},"attrs":[{},{}],"properties":{"order":106,"id":0,"name":"polyline","prevSize":32,"code":59696},"setIdx":0,"setId":2,"iconIdx":54}],"height":1024,"metadata":{"name":""},"preferences":{"showGlyphs":true,"showQuickUse":true,"showQuickUse2":true,"showSVGs":true,"fontPref":{"prefix":"icon-","metadata":{"fontFamily":"","majorVersion":1,"minorVersion":0},"metrics":{"emSize":1024,"baseline":6.25,"whitespace":50},"embed":false},"imagePref":{"prefix":"icon-","png":true,"useClassSelector":true,"color":0,"bgColor":16777215,"classSelector":".icon","name":"icomoon","autoHost":false,"height":32,"columns":16,"margin":16},"historySize":50,"showCodes":true,"gridSize":16,"quickUsageToken":{"UntitledProject":"NTg1MDYyOTQ5N2U5MTU4YzFjM2E2YjA2ZTYxOGU3ODcjMSMxNjU2NjU2MTQ0IyMjNGNlZGI4ODExOWQx"},"showGrid":true}}
\ No newline at end of file
diff --git a/frontend/image-tool/public/iconfont/style.css b/frontend/image-tool/public/iconfont/style.css
deleted file mode 100644
index e3667fa5..00000000
--- a/frontend/image-tool/public/iconfont/style.css
+++ /dev/null
@@ -1,192 +0,0 @@
-@font-face {
-  font-family: 'icomoon';
-  src:  url('fonts/icomoon.eot?rxbdnw');
-  src:  url('fonts/icomoon.eot?rxbdnw#iefix') format('embedded-opentype'),
-    url('fonts/icomoon.ttf?rxbdnw') format('truetype'),
-    url('fonts/icomoon.woff?rxbdnw') format('woff'),
-    url('fonts/icomoon.svg?rxbdnw#icomoon') format('svg');
-  font-weight: normal;
-  font-style: normal;
-  font-display: block;
-}
-
-[class^="icon-"], [class*=" icon-"] {
-  /* use !important to prevent issues with browser extensions that change fonts */
-  font-family: 'icomoon' !important;
-  speak: never;
-  font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-  text-transform: none;
-  line-height: 1;
-
-  /* Better Font Rendering =========== */
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.icon-polygon-hollow:before {
-  content: "\e934";
-}
-.icon-cancel-hollow:before {
-  content: "\e935";
-}
-.icon-polygon-clip:before {
-  content: "\e931";
-}
-.icon-keyboard:before {
-  content: "\e932";
-}
-.icon-command:before {
-  content: "\e933";
-}
-.icon-Job-information:before {
-  content: "\e900";
-}
-.icon-Expiration-time:before {
-  content: "\e901";
-}
-.icon-Work-flow:before {
-  content: "\e902";
-}
-.icon-save:before {
-  content: "\e903";
-}
-.icon-help:before {
-  content: "\e904";
-}
-.icon-enter-fullscreen:before {
-  content: "\e905";
-}
-.icon-exit-fullscreen:before {
-  content: "\e906";
-}
-.icon-hang-up:before {
-  content: "\e907";
-}
-.icon-submit:before {
-  content: "\e908";
-}
-.icon-setting:before {
-  content: "\e909";
-}
-.icon-information:before {
-  content: "\e90a";
-}
-.icon-mapping:before {
-  content: "\e90b";
-}
-.icon-rotating:before {
-  content: "\e90c";
-}
-.icon-move:before {
-  content: "\e90d";
-}
-.icon-tool:before {
-  content: "\e90e";
-}
-.icon-Pack-up:before {
-  content: "\e90f";
-}
-.icon-an-right:before {
-  content: "\e910";
-}
-.icon-down:before {
-  content: "\e911";
-}
-.icon-up:before {
-  content: "\e912";
-}
-.icon-Right-rotation:before {
-  content: "\e913";
-}
-.icon-Left-rotation:before {
-  content: "\e914";
-}
-.icon-remind:before {
-  content: "\e915";
-}
-.icon-Notes---list:before {
-  content: "\e916";
-}
-.icon-Have-been-added:before {
-  content: "\e917";
-}
-.icon-Add-a-notation:before {
-  content: "\e918";
-}
-.icon-notation-tool:before {
-  content: "\e919";
-}
-.icon-filter:before {
-  content: "\e91a";
-}
-.icon-class-edit:before {
-  content: "\e91b";
-}
-.icon-delete:before {
-  content: "\e91c";
-}
-.icon-visible:before {
-  content: "\e91d";
-}
-.icon-biaozhunkuang:before {
-  content: "\e91e";
-}
-.icon-lifangti:before {
-  content: "\e91f";
-}
-.icon-target:before {
-  content: "\e920";
-}
-.icon-auxiliaryline:before {
-  content: "\e921";
-}
-.icon-more:before {
-  content: "\e922";
-}
-.icon-unfold:before {
-  content: "\e923";
-}
-.icon-hidden:before {
-  content: "\e924";
-}
-.icon-left:before {
-  content: "\e925";
-}
-.icon-right:before {
-  content: "\e926";
-}
-.icon-dakai:before {
-  content: "\e927";
-}
-.icon-model:before {
-  content: "\e928";
-}
-.icon-interactive:before {
-  content: "\e936";
-}
-.icon-loading:before {
-  content: "\e929";
-}
-.icon-cube:before {
-  content: "\e92a";
-}
-.icon-Frame:before {
-  content: "\e92b";
-}
-.icon-polygon:before {
-  content: "\e92c";
-}
-.icon-edit:before {
-  content: "\e92d";
-}
-.icon-rectangle:before {
-  content: "\e92e";
-}
-.icon-ai:before {
-  content: "\e92f";
-}
-.icon-polyline:before {
-  content: "\e930";
-}
diff --git a/frontend/image-tool/public/image/20736.jpg b/frontend/image-tool/public/image/20736.jpg
new file mode 100644
index 00000000..8fbcbabd
Binary files /dev/null and b/frontend/image-tool/public/image/20736.jpg differ
diff --git a/frontend/image-tool/src/App.vue b/frontend/image-tool/src/App.vue
index 6f2f9653..b622376e 100644
--- a/frontend/image-tool/src/App.vue
+++ b/frontend/image-tool/src/App.vue
@@ -9,7 +9,8 @@
     import { ConfigProvider } from 'ant-design-vue';
     import enUS from 'ant-design-vue/es/locale/en_US';
     import zhCN from 'ant-design-vue/es/locale/zh_CN';
-    import Editor from '/@/business/chengdu/Editor.vue';
+    // import Editor from '/@/business/chengdu/Editor.vue';
+    import Editor from '/@/businessNew/Editor.vue';
 </script>
 
 <style></style>
diff --git a/frontend/image-tool/src/businessNew/Editor.vue b/frontend/image-tool/src/businessNew/Editor.vue
new file mode 100644
index 00000000..79748dee
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/Editor.vue
@@ -0,0 +1,94 @@
+<template>
+  <div class="image-tool-editor">
+    <Layout>
+      <template #header><Header /></template>
+      <template #tools><Tool /></template>
+      <div class="main-container">
+        <div class="editor-wrap">
+          <MainView>
+            <ObjectText />
+            <EditClass />
+            <MouseHelp />
+          </MainView>
+          <Mask v-show="false"></Mask>
+        </div>
+        <div class="framesline-wrap" v-if="state.isSeriesFrame">
+          <FrameLine />
+        </div>
+      </div>
+      <template #operation><Operation /></template>
+      <template #mask><Loading /></template>
+    </Layout>
+    <Mask v-show="false"></Mask>
+    <Modal />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { nextTick, onMounted, watch } from 'vue';
+  import { useProvideBSEditor } from './context';
+  import { Event as EditorEvent } from 'image-editor';
+  import useFlow from './hook/useFlow';
+
+  import Layout from './components/Layout/index.vue';
+  import Mask from './components/Mask/index.vue';
+  import Header from './components/Header/index.vue';
+  import Operation from './components/Operation/index.vue';
+  import Confirm from './components/Modal/Confirm.vue';
+  import HotkeyHelp from './components/Modal/HotkeyHelp/index.vue';
+
+  import {
+    MainView,
+    Tool,
+    MouseHelp,
+    Modal,
+    Loading,
+    ObjectText,
+    EditClass,
+    FrameLine,
+  } from 'image-ui/components';
+
+  const editor = useProvideBSEditor();
+  const { state } = editor;
+
+  onMounted(() => {
+    editor.registerModal('confirm', Confirm);
+    editor.registerModal('HotkeyHelp', HotkeyHelp);
+    watch(
+      () => [state.isSeriesFrame],
+      () => {
+        nextTick(() => {
+          editor.mainView.resize();
+        });
+      },
+    );
+  });
+
+  editor.on(EditorEvent.INIT, () => {
+    const flow = useFlow();
+    flow?.init();
+  });
+</script>
+
+<style lang="less">
+  .image-tool-editor {
+    width: 100%;
+    height: 100%;
+
+    .main-container {
+      display: flex;
+      width: 100%;
+      height: 100%;
+      flex-direction: column;
+
+      .editor-wrap {
+        flex: 1;
+        position: relative;
+        background-color: #6a6a6a;
+      }
+      .framesline-wrap {
+        position: relative;
+      }
+    }
+  }
+</style>
diff --git a/frontend/image-tool/src/businessNew/actions/flow.ts b/frontend/image-tool/src/businessNew/actions/flow.ts
new file mode 100644
index 00000000..515b7097
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/actions/flow.ts
@@ -0,0 +1,57 @@
+import { defineAction } from 'image-editor';
+import Editor from '../common/Editor';
+import { BsUIType } from '../configs/ui';
+import Event from '../configs/event';
+import { FlowAction } from '../types';
+
+// save
+export const flowSave = defineAction({
+  valid(editor: Editor) {
+    const { state, bsState } = editor;
+    return state.modeConfig.ui[BsUIType.flowSave] && !bsState.doing.saving;
+  },
+  execute(editor: Editor) {
+    editor.emit(Event.FLOW_ACTION, FlowAction.save);
+  },
+});
+
+export const dataFrameNext = defineAction({
+  valid(editor: Editor) {
+    return !editor.bsState.blocking;
+  },
+  execute(editor: Editor) {
+    if (editor.state.isSeriesFrame) changeScene(editor, 1);
+    else changeFrame(editor, 1);
+  },
+});
+export const dataFrameLast = defineAction({
+  valid(editor: Editor) {
+    return !editor.bsState.blocking;
+  },
+  execute(editor: Editor) {
+    if (editor.state.isSeriesFrame) changeScene(editor, -1);
+    else changeFrame(editor, -1);
+  },
+});
+function changeFrame(editor: Editor, step: number) {
+  const { frames, frameIndex } = editor.state;
+  const index = frameIndex + step;
+  if (index < 0 || index >= frames.length) return;
+  editor.switchFrame(index);
+}
+async function changeScene(editor: Editor, step: number) {
+  const { state } = editor;
+  const { sceneIds, sceneId } = state;
+  const isShow = state.isSeriesFrame && sceneIds.length > 0;
+  if (!isShow) return;
+  const sceneIdx = sceneIds.indexOf(sceneId);
+  const nextIdx = sceneIdx + step;
+  if (nextIdx < 0 || nextIdx >= sceneIds.length) return;
+  const needSave = state.frames.findIndex((e) => e.needSave) !== -1;
+  if (needSave) {
+    const result = await editor.save();
+    if (!result) return;
+  }
+  await editor.loadManager.loadSceneData(nextIdx);
+  editor.emit(Event.SCENE_CHANGE, { preScene: sceneIdx, newScene: nextIdx });
+}
diff --git a/frontend/image-tool/src/businessNew/actions/index.ts b/frontend/image-tool/src/businessNew/actions/index.ts
new file mode 100644
index 00000000..5851cb1e
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/actions/index.ts
@@ -0,0 +1 @@
+export * from './flow';
diff --git a/frontend/image-tool/src/businessNew/api/base.ts b/frontend/image-tool/src/businessNew/api/base.ts
new file mode 100644
index 00000000..14e8bbbe
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/api/base.ts
@@ -0,0 +1,70 @@
+import axios, { AxiosRequestHeaders, AxiosRequestConfig } from 'axios';
+import { BSError } from 'image-editor';
+
+// token
+export const requestConfig = {
+  token:
+    'Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiIzMDA4MCIsInRlYW1JZCI6IjUxIiwiaXNzIjoiYmFzaWMuYWkiLCJpYXQiOjE2NTI0MDc3MDcsImV4cCI6MTY1MjQ1MDkwN30.HC2tAjiDdYpjVvlnLXfNO_2_V7b0AAHrLVPm7Ox0tyuBA-c4-asQnDkbu6P4Nn1yvW2K9-8THpJEnOruA1Yf5g',
+};
+
+export function setToken(token: string) {
+  requestConfig.token = token;
+}
+
+function isResource(headers: AxiosRequestHeaders) {
+  // 'x-request-type': 'resource'
+  return headers['x-request-type'] === 'resource';
+}
+
+// Service
+const BaseURL = '';
+export const Service = axios.create({
+  timeout: 1000 * 60 * 20,
+  baseURL: BaseURL,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
+
+Service.interceptors.request.use((config) => {
+  config.headers = config.headers || {};
+  if (!isResource(config.headers)) {
+    config.headers['Authorization'] = requestConfig.token;
+  }
+
+  return config;
+});
+
+Service.interceptors.response.use(
+  (response) => {
+    let data = response.data;
+    if (!isResource(response.config.headers || {}) && data.message) {
+      return Promise.reject(new BSError('', 'Network Error'));
+    }
+    return data;
+  },
+  (error) => {
+    return Promise.reject(new BSError('', 'Network Error'));
+  },
+);
+
+export function get<T = any>(url: string, data?: any, config?: AxiosRequestConfig) {
+  return Service.request<any, T>({
+    url,
+    method: 'get',
+    params: data,
+    ...config,
+  });
+}
+
+export function post<T = any>(url: string, data?: any, config?: AxiosRequestConfig) {
+  let headers = {} as AxiosRequestHeaders;
+
+  return Service.request<any, T>({
+    url,
+    data,
+    method: 'post',
+    headers,
+    ...config,
+  });
+}
diff --git a/frontend/image-tool/src/businessNew/api/class.ts b/frontend/image-tool/src/businessNew/api/class.ts
new file mode 100644
index 00000000..e97f2e17
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/api/class.ts
@@ -0,0 +1,24 @@
+import { parseClassesFromBackend, traverseClassification2Arr } from '../utils';
+import { get } from './base';
+import { Api } from './type';
+
+/** all class */
+export async function getDataflowClass(datasetId: string) {
+  const url = `${Api.API}/datasetClass/findAll/${datasetId}`;
+  let data = await get(url);
+  data = data.data || [];
+
+  const classTypes = parseClassesFromBackend(data);
+
+  return classTypes;
+}
+/** all Classification */
+export async function getDataflowClassification(datasetId: string) {
+  const url = `${Api.API}/datasetClassification/findAll/${datasetId}`;
+  let data = await get(url);
+  data = data.data || [];
+  const classifications = traverseClassification2Arr(data);
+  console.log('classifications', classifications);
+
+  return classifications;
+}
diff --git a/frontend/image-tool/src/businessNew/api/common.ts b/frontend/image-tool/src/businessNew/api/common.ts
new file mode 100644
index 00000000..d6023445
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/api/common.ts
@@ -0,0 +1,82 @@
+import { Api, IModelResult } from './type';
+import { get, post } from './base';
+import { IFrame, LoadStatus, __UNSERIES__, IObjectSource, SourceType } from 'image-editor';
+
+export async function unlockRecord(recordId: string) {
+  const url = `${Api.DATA}/unLock/${recordId}`;
+  return await post(url);
+}
+
+export async function getInfoByRecordId(recordId: string) {
+  const url = `${Api.DATA}/findDataAnnotationRecord/${recordId}`;
+  let data = await get(url);
+  data = data.data;
+  if (!data) return { dataInfos: [], isSeriesFrame: false, seriesFrameId: '' };
+
+  const isSeriesFrame = data.itemType === 'SCENE';
+  let model: IModelResult;
+  if (data.serialNo) {
+    model = { recordId: data.serialNo, id: '', version: '', state: LoadStatus.DEFAULT };
+  }
+  const dataInfos: IFrame[] = [];
+  const seriesFrames: string[] = [];
+  (data.datas || []).forEach((config: any) => {
+    const sceneId = config.sceneId || __UNSERIES__;
+    dataInfos.push({
+      id: config.dataId,
+      datasetId: config.datasetId,
+      needSave: false,
+      model,
+      sceneId,
+    } as IFrame);
+    if (!seriesFrames.includes(sceneId)) seriesFrames.push(sceneId);
+  });
+
+  return { dataInfos, isSeriesFrame, seriesFrames };
+}
+export async function getResultSources(dataId: string) {
+  let url = `/api/data/getDataModelRunResult/${dataId}`;
+  let data = await get(url);
+  data = data.data || {};
+
+  let sources = [] as IObjectSource[];
+  data.forEach((item: any) => {
+    let { modelId, modelName, runRecords = [] } = item;
+    runRecords.forEach((e: any) => {
+      sources.push({
+        name: e.runNo,
+        sourceId: e.id,
+        modelId: modelId,
+        modelName: modelName,
+        sourceType: SourceType.MODEL,
+        frameId: dataId,
+      });
+    });
+  });
+  return sources;
+}
+/** Data flow */
+export async function setInvalid(dataId: string) {
+  const url = `${Api.DATA}/flow/markAsInvalid/${dataId}`;
+  await post(url);
+}
+export async function setValid(dataId: string) {
+  const url = `${Api.DATA}/flow/markAsValid/${dataId}`;
+  await post(url);
+}
+export async function submit(dataId: string) {
+  const url = `${Api.DATA}/flow/submit/${dataId}`;
+  await post(url);
+}
+export async function getDataStatusByIds(dataId: string) {
+  let url = `${Api.DATA}/getDataStatusByIds`;
+  let data = await get(url, { dataIds: dataId });
+  data = data.data || [];
+  return data[0];
+}
+
+export async function takeRecordByData(params: any) {
+  const url = `${Api.DATA}/annotate`;
+  const res = await post(url, params);
+  return res;
+}
diff --git a/frontend/image-tool/src/businessNew/api/data.ts b/frontend/image-tool/src/businessNew/api/data.ts
new file mode 100644
index 00000000..3cd65d33
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/api/data.ts
@@ -0,0 +1,44 @@
+import { ISaveFormat, ISaveResp } from '../types';
+import { get, post } from './base';
+import { Api, DataflowAnnotationParamsReq, DataflowAnnotationParamsRsp, IFileConfig } from './type';
+
+export async function getAnnotationByDataIds(params: DataflowAnnotationParamsReq) {
+  const url = `${Api.ANNOTATION}/data/listByDataIds`;
+
+  const res = await get(url, { dataIds: params.dataIds.join(',') });
+  const data = (res.data || []) as DataflowAnnotationParamsRsp[];
+  console.log('frame data', data);
+  return data;
+}
+
+export async function getDataFile(id: string) {
+  const url = `${Api.DATA}/listByIds`;
+  let data = await get(url, { dataIds: id });
+  data = data.data || [];
+
+  const name = data[0]?.name || '';
+  let configs = [] as IFileConfig[];
+  data[0].content.forEach((config: any) => {
+    let file = config.files?.[0].file || config.file;
+    configs.push({
+      name,
+      size: +file.size,
+      url: file.url,
+      deviceName: config.name,
+    });
+  });
+
+  return {
+    config: configs[0],
+    datasetId: data[0].datasetId,
+    annotationStatus: data[0].annotationStatus,
+    validStatus: data[0].status,
+  };
+}
+
+export async function saveData(datasetId: string, dataInfos: Array<ISaveFormat>) {
+  const url = `${Api.ANNOTATION}/data/save`;
+
+  let data = await post(url, { datasetId, dataInfos });
+  return (data.data || []) as ISaveResp[];
+}
diff --git a/frontend/image-tool/src/businessNew/api/index.ts b/frontend/image-tool/src/businessNew/api/index.ts
new file mode 100644
index 00000000..b0047fc4
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/api/index.ts
@@ -0,0 +1,5 @@
+export * from './type';
+export * from './common';
+export * from './class';
+export * from './model';
+export * from './data';
diff --git a/frontend/image-tool/src/businessNew/api/model.ts b/frontend/image-tool/src/businessNew/api/model.ts
new file mode 100644
index 00000000..1e94be3e
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/api/model.ts
@@ -0,0 +1,49 @@
+import { IModel, IModelClass } from 'image-editor';
+import { get, post } from './base';
+import { Api } from './type';
+/**
+ * model
+ */
+export async function getModelList() {
+  const url = `${Api.API}/model/list`;
+  const res = await get(url);
+  const data = res.data || [];
+
+  const models = [] as IModel[];
+  data.forEach((e: any) => {
+    if (e.datasetType !== 'IMAGE') return;
+    let classes = (e.classes || []) as IModelClass[];
+    //  COCO subClass
+    classes = classes
+      .map((item) => {
+        return item.subClasses || item;
+      })
+      .flat(1)
+      .map((e: any) => {
+        return { ...e, label: e.name, value: e.code };
+      });
+    models.push({
+      id: e.id + '',
+      name: e.name,
+      version: e.version,
+      code: e.modelCode,
+      classes,
+      isInteractive: e.isInteractive,
+      type: e.type,
+    });
+  });
+
+  return models;
+}
+
+export async function getModelResult(dataIds: string[], recordId: string) {
+  const url = `${Api.DATA}/modelAnnotationResult`;
+  const args: string[] = [];
+  dataIds.forEach((e) => args.push(`dataIds=${e}`));
+  args.push(`serialNo=${recordId}`);
+  return await get(`${url}?${args.join('&')}`);
+}
+export async function runModel(config: any) {
+  const url = `${Api.DATA}/modelAnnotate`;
+  return await post(url, config);
+}
diff --git a/frontend/image-tool/src/businessNew/api/type.ts b/frontend/image-tool/src/businessNew/api/type.ts
new file mode 100644
index 00000000..40dcc0c1
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/api/type.ts
@@ -0,0 +1,31 @@
+import { LoadStatus } from 'image-editor';
+import { IObject } from '../types';
+
+export enum Api {
+  API = '/api',
+  DATA = '/api/data',
+  ANNOTATION = '/api/annotate',
+}
+/** Model Result */
+export interface IModelResult {
+  recordId: string;
+  id: string;
+  version: string;
+  state?: LoadStatus;
+}
+/** dataflow annotations request */
+export interface DataflowAnnotationParamsReq {
+  dataIds: Array<string | number>;
+}
+/** dataflow annotations response */
+export interface DataflowAnnotationParamsRsp {
+  classificationValues: any[];
+  dataId: string;
+  objects: IObject[];
+}
+export interface IFileConfig {
+  deviceName: string;
+  name: string;
+  size: number;
+  url: string;
+}
diff --git a/frontend/image-tool/src/businessNew/common/DataManager.ts b/frontend/image-tool/src/businessNew/common/DataManager.ts
new file mode 100644
index 00000000..00b8224e
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/common/DataManager.ts
@@ -0,0 +1,137 @@
+import {
+  DataManager as BaseDataManager,
+  IFrame,
+  IModelRunningState,
+  LoadStatus,
+  ModelCodeEnum,
+  MsgType,
+  utils as EditorUtils,
+} from 'image-editor';
+import Editor from './Editor';
+import * as api from '../api';
+import { IObject } from '../types';
+
+interface IModelData {
+  objects?: any[];
+  modelCode: ModelCodeEnum;
+}
+
+export default class DataManager extends BaseDataManager {
+  declare editor: Editor;
+  modelMap: Map<string, IModelData> = new Map();
+
+  constructor(editor: Editor) {
+    super(editor);
+    this.editor = editor;
+  }
+  clearModelData() {
+    this.modelMap.clear();
+  }
+  removeModelResult(frameId: string, code?: ModelCodeEnum) {
+    if (code) {
+      const id = EditorUtils.formatId(frameId, code);
+      this.modelMap.delete(id);
+    } else {
+      const ids: string[] = Array.from(this.modelMap.keys());
+      ids.forEach((id) => {
+        if (id.indexOf(frameId) === 0) this.modelMap.delete(id);
+      });
+    }
+  }
+  setModelResult(frameId: any, data: IModelData) {
+    const id = EditorUtils.formatId(frameId, data.modelCode);
+    this.modelMap.set(id, data);
+  }
+  getModelResult(code: ModelCodeEnum, frame?: IFrame) {
+    frame = frame || this.editor.getCurrentFrame();
+    const id = EditorUtils.formatId(frame.id, code);
+    return this.modelMap.get(id) as IModelData;
+  }
+  hasModelResult(modelCode: ModelCodeEnum, frame?: IFrame) {
+    frame = frame || this.editor.getCurrentFrame();
+    if (!frame) return false;
+    const result = this.getModelResult(modelCode, frame);
+    if (result) return true;
+    return false;
+  }
+
+  async pollDataModelResult() {
+    const _this = this;
+    const editor = this.editor;
+    const { state } = this.editor;
+    const confidence = state.modelConfig.confidence || [0.5, 1];
+    const modelMap = {} as Record<string, IFrame[]>;
+
+    state.frames.forEach((frame) => {
+      if (frame.model && frame.model.state !== LoadStatus.COMPLETE) {
+        const id = frame.model.recordId;
+        modelMap[id] = modelMap[id] || [];
+        modelMap[id].push(frame);
+      }
+    });
+    if (Object.keys(modelMap).length === 0) return;
+
+    const requests = [] as Promise<any>[];
+    Object.keys(modelMap).forEach((recordId) => {
+      requests.push(createRequest(recordId, modelMap[recordId]));
+    });
+
+    await Promise.all(requests);
+
+    setTimeout(this.pollDataModelResult.bind(this), 1000);
+
+    function createRequest(recordId: string, dataList: IFrame[]) {
+      const ids = dataList.map((e) => e.id);
+      const request = api
+        .getModelResult(ids, recordId)
+        .then((data) => {
+          const { frameIndex, frames } = state;
+          const curData = frames[frameIndex];
+          data = data.data || {};
+          const resultList = data.modelDataResults;
+          if (!resultList) return;
+
+          const modelCode = data.modelCode;
+          const resultMap = {} as Record<string, any>;
+          resultList.forEach((e: any) => {
+            resultMap[e.dataId] = e;
+          });
+
+          dataList.forEach((frame) => {
+            const info = resultMap[frame.id];
+            const model = (frame.model ?? { code: modelCode }) as IModelRunningState;
+
+            if (info) {
+              const modelResult = info.modelResult;
+              if (modelResult.code != 'OK') {
+                frame.model = undefined;
+                if (frame.id === curData.id) {
+                  editor.showMsg(MsgType.error, modelResult.message || 'Model Run Error');
+                }
+                return;
+              }
+              let objects = (modelResult.objects || []) as IObject[];
+              if (objects.length > 0) {
+                model.state = LoadStatus.COMPLETE;
+                objects = objects.filter(
+                  (e: any) => e.confidence >= confidence[0] && e.confidence <= confidence[1],
+                );
+
+                _this.setModelResult(frame.id, { objects, modelCode });
+                frame.model = model;
+              } else {
+                frame.model = undefined;
+                if (frame.id === curData.id) editor.showMsg(MsgType.warning, 'No Model Results.');
+              }
+            } else {
+              frame.model = undefined;
+              if (frame.id === curData.id) editor.showMsg(MsgType.warning, 'No Model Results.');
+            }
+          });
+        })
+        .catch(() => {});
+
+      return request;
+    }
+  }
+}
diff --git a/frontend/image-tool/src/businessNew/common/Editor.ts b/frontend/image-tool/src/businessNew/common/Editor.ts
new file mode 100644
index 00000000..80de562b
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/common/Editor.ts
@@ -0,0 +1,175 @@
+import {
+  Editor as BaseEditor,
+  __ALL__ as ALL,
+  IFrame,
+  Event,
+  MsgType,
+  BSError,
+  AnnotateObject,
+  IModel,
+  DataTypeEnum,
+  LoadStatus,
+} from 'image-editor';
+import { getDefault } from '../state';
+import { IBSState, ISaveResp } from '../types';
+import { ILocale, languages } from '@/locales';
+import * as utils from '../utils';
+import * as api from '../api';
+
+import LoadManager from './LoadManager';
+import DataManager from './DataManager';
+
+export default class Editor extends BaseEditor {
+  bsState: IBSState = getDefault();
+
+  loadManager: LoadManager;
+  dataManager: DataManager;
+
+  constructor() {
+    super();
+    this.loadManager = new LoadManager(this);
+    this.dataManager = new DataManager(this);
+  }
+  // locale common
+  lang<T extends keyof ILocale>(name: T, args?: Record<string, any> | any[]) {
+    const data = this.i18n.lang(this.state.lang, name, args);
+    if (!data) {
+      return this.i18n.lang(languages.default, name, args);
+    }
+    return data;
+  }
+  frameChangeToggle(change: boolean, frame?: IFrame | IFrame[]) {
+    let frames = frame || this.state.frames;
+    if (!Array.isArray(frames)) frames = [frames];
+    frames.forEach((frame) => {
+      frame.needSave = !!change;
+    });
+    // this.trackManager.clearChangedTrack();
+  }
+  needSave(frames?: IFrame[]) {
+    frames = frames || this.state.frames;
+    const needSaveData = frames.filter((e) => e.needSave);
+    return needSaveData.length > 0;
+  }
+  async save() {
+    const { bsState } = this;
+    if (bsState.doing.saving) return;
+    const saveFrames = this.state.frames.filter((e) => e.needSave);
+    if (saveFrames.length == 0) return;
+
+    const { saveDatas } = utils.getDataFlowSaveData(this, saveFrames);
+    console.log('========> saveDataFlow saveDatas: ', saveDatas);
+    if (saveDatas.length === 0) return;
+
+    bsState.doing.saving = true;
+    let saveResult;
+    try {
+      const res = await api.saveData(bsState.datasetId, saveDatas);
+      this.updateBackId(res);
+      this.frameChangeToggle(false, saveFrames);
+      this.showMsg(MsgType.success, this.lang('save-ok'));
+      saveResult = true;
+    } catch (e: any) {
+      this.showMsg(MsgType.error, this.lang('save-error'));
+    }
+    bsState.doing.saving = false;
+    this.emit(Event.SAVE_SUCCESS);
+    return saveResult;
+  }
+  updateBackId(data: ISaveResp[]) {
+    data.forEach((e) => {
+      const frame = this.getFrame(e.dataId + '');
+      const obj = this.dataManager.getObject(e.frontId, frame);
+      obj && (obj.userData.backId = e.id);
+    });
+  }
+  handleErr(err: BSError | Error | any, message: string = '') {
+    if (err instanceof BSError) {
+      utils.handleError(this, err);
+    } else {
+      utils.handleError(this, new BSError('', message, err));
+    }
+  }
+  getRenderFilter() {
+    const { bsState, state } = this;
+
+    // source
+    const sourceMap: any = {};
+    bsState.activeSource.forEach((s) => {
+      sourceMap[s] = true;
+    });
+
+    // class
+    const classMap: any = {};
+    bsState.filterClasses.forEach((e) => {
+      classMap[e] = true;
+    });
+
+    return (e: AnnotateObject) => {
+      const userData = this.getUserData(e);
+      const sourceId = userData.sourceId || state.defaultSourceId;
+      const classId = userData.classId || '';
+
+      const validSource = sourceMap[ALL] || sourceMap[sourceId];
+      const validClass = classMap[ALL] || classMap[classId];
+
+      return !!(validSource && validClass);
+    };
+  }
+  async runModel() {
+    const modelConfig = this.state.modelConfig;
+    if (!modelConfig.model) {
+      this.showMsg(MsgType.warning, 'Please choose Model');
+      return;
+    }
+    const frame = this.getCurrentFrame();
+    const model = this.state.models.find((e) => e.name === modelConfig.model) as IModel;
+    const resultFilterParam: Record<string, any> = {
+      classes: model?.classes.map((e) => e.value),
+    };
+    if (modelConfig.confidence[0]) resultFilterParam.minConfidence = modelConfig.confidence[0];
+    if (modelConfig.confidence[1]) resultFilterParam.maxConfidence = modelConfig.confidence[1];
+    if (!modelConfig.predict) {
+      const selectedClasses = Object.values(modelConfig.classes[modelConfig.model]).reduce(
+        (classes, item) => {
+          if (item.selected) {
+            classes.push(item.value);
+          }
+          return classes;
+        },
+        [] as string[],
+      );
+      if (selectedClasses.length <= 0) {
+        this.showMsg(MsgType.warning, 'Select at least one Class!');
+        return;
+      }
+      resultFilterParam.classes = selectedClasses;
+    }
+    const config = {
+      datasetId: this.bsState.datasetId,
+      dataIds: [+frame.id],
+      modelId: +model.id,
+      modelVersion: model?.version,
+      dataType: DataTypeEnum.SINGLE_DATA,
+      modelCode: model.code,
+      resultFilterParam,
+    };
+
+    modelConfig.loading = true;
+    try {
+      let result = await api.runModel(config);
+      if (!result.data) throw new Error('Model Run Error');
+      frame.model = {
+        recordId: result.data,
+        id: model.id,
+        version: model.version,
+        state: LoadStatus.LOADING,
+        code: model.code,
+      };
+    } catch (error: any) {
+      this.showMsg(MsgType.error, error.message || 'Model Run Error');
+    }
+    modelConfig.loading = false;
+    await this.dataManager.pollDataModelResult();
+  }
+}
diff --git a/frontend/image-tool/src/businessNew/common/LoadManager.ts b/frontend/image-tool/src/businessNew/common/LoadManager.ts
new file mode 100644
index 00000000..9aa2e437
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/common/LoadManager.ts
@@ -0,0 +1,89 @@
+import Editor from './Editor';
+import * as api from '../api';
+import {
+  AnnotateModeEnum,
+  LoadManager as BaseLoadManager,
+  Event,
+  IDataResource,
+  IFrame,
+  SourceType,
+} from 'image-editor';
+import { ShapeRoot } from 'image-editor/ImageView';
+import * as utils from '../utils';
+
+export default class LoadManager extends BaseLoadManager {
+  declare editor: Editor;
+  constructor(editor: Editor) {
+    super(editor);
+  }
+  /**
+   * load frames data
+   */
+  async loadFramesData(frames: IFrame[]) {
+    console.log('loadFramesData');
+    this.editor.clearResource({ resetBgRotation: true });
+
+    // Filter out data that has already been loaded
+    const loadFrames = frames.filter((frame) => {
+      return !this.editor.dataManager.getFrameObject(frame.id);
+    });
+    if (loadFrames.length === 0) return;
+
+    const dataIds = loadFrames.map((e) => e.id);
+    const frameDatas = await api.getAnnotationByDataIds({ dataIds });
+    if (!frameDatas || frameDatas.length === 0) return;
+
+    const dataMap: Record<string, any> = {};
+    frameDatas.forEach((e) => (dataMap[`${e.dataId}`] = e));
+
+    loadFrames.forEach(async (frame) => {
+      const frameData = dataMap[String(frame.id)];
+      if (!frameData) return;
+      // set result objects
+      const root_ins = new ShapeRoot({ frame, type: AnnotateModeEnum.INSTANCE });
+      this.editor.dataManager.setFrameRoot(frame.id, [root_ins]);
+      const instances = frameData.objects || [];
+      const annotates_ins = utils.convertObject2Annotate(this.editor, instances);
+      this.editor.mainView.updateObjectByUserData(annotates_ins);
+      root_ins.addObjects(annotates_ins);
+      // set classifications
+      const values = frameData.classificationValues || [];
+      frame.classifications = utils.classificationAssign(
+        this.editor.bsState.classifications,
+        values,
+      );
+    });
+
+    this.editor.emit(Event.ANNOTATIONS_LOADED, dataIds);
+  }
+  /**
+   * load result source
+   */
+  async loadResultSource(frames: IFrame[]) {
+    frames.forEach(async (frame) => {
+      const frameId = String(frame.id);
+      let sources = await api.getResultSources(frameId);
+      sources.unshift({
+        name: 'Without Task',
+        sourceId: this.editor.state.defaultSourceId,
+        sourceType: SourceType.DATA_FLOW,
+        frameId,
+      });
+      this.editor.dataManager.setSources(frame, sources);
+    });
+  }
+  /**
+   * request data resource
+   * This is a virtual method that needs to be instantiated
+   */
+  async requestResource(frame: IFrame): Promise<IDataResource> {
+    const { config, annotationStatus, validStatus } = await api.getDataFile(frame.id);
+    frame.annotationStatus = annotationStatus;
+    frame.validStatus = validStatus;
+    const data: IDataResource = {
+      ...config,
+      time: Date.now(),
+    };
+    return data;
+  }
+}
diff --git a/frontend/image-tool/src/businessNew/components/Collapse/index.vue b/frontend/image-tool/src/businessNew/components/Collapse/index.vue
new file mode 100644
index 00000000..be64a3a4
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/components/Collapse/index.vue
@@ -0,0 +1,62 @@
+<template>
+  <a-collapse class="operation-collapse" v-model:activeKey="state.activeTabs" :bordered="false">
+    <a-collapse-panel key="item-1">
+      <template #header>
+        <div class="header">
+          <slot name="header" v-if="$slots.header"></slot>
+          <span v-else>{{ header || '' }}</span>
+        </div>
+      </template>
+      <slot></slot>
+    </a-collapse-panel>
+  </a-collapse>
+</template>
+
+<script setup lang="ts">
+  import { reactive } from 'vue';
+
+  interface IProps {
+    header?: string;
+    open?: boolean;
+  }
+  // ***************Props and Emits***************
+  let props = withDefaults(defineProps<IProps>(), {
+    open: true,
+  });
+  // *********************************************
+  let state = reactive({
+    activeTabs: props.open ? ['item-1'] : [],
+  });
+</script>
+
+<style lang="less">
+  .operation-collapse {
+    .ant-collapse-header {
+      .tool {
+        float: right;
+        padding-right: 4px;
+        .icon {
+          font-size: 14px;
+          margin-left: 2px;
+          padding: 4px;
+          &:hover {
+            color: #ed4014;
+          }
+          &.active {
+            background: #3c9be8;
+            color: white;
+            border-radius: 4px;
+          }
+        }
+      }
+    }
+
+    .content {
+      height: 300px;
+      border: 1px solid;
+    }
+    .header {
+      width: 100%;
+    }
+  }
+</style>
diff --git a/frontend/image-tool/src/businessNew/components/Header/components/ActionBtn.vue b/frontend/image-tool/src/businessNew/components/Header/components/ActionBtn.vue
new file mode 100644
index 00000000..8ab12fb4
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/components/Header/components/ActionBtn.vue
@@ -0,0 +1,23 @@
+<template>
+  <Tooltip :title="title" :trigger="title ? 'hover' : undefined">
+    <Button :class="['flow-btn', type]" :loading="loading" @click="$emit('onActions', type)">
+      <template #icon><slot name="icon" /></template>
+      <slot />
+    </Button>
+  </Tooltip>
+</template>
+
+<script setup lang="ts">
+  import { Tooltip, Button } from 'ant-design-vue';
+  import { FlowAction } from '../../../types';
+
+  interface IActionBtnProps {
+    type: FlowAction;
+    title?: string;
+    loading?: boolean;
+  }
+  defineProps<IActionBtnProps>();
+  defineEmits(['onActions']);
+</script>
+
+<style lang="less" scoped></style>
diff --git a/frontend/image-tool/src/businessNew/components/Header/components/Close.vue b/frontend/image-tool/src/businessNew/components/Header/components/Close.vue
new file mode 100644
index 00000000..cd8b23ec
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/components/Header/components/Close.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="close-btn" @click="$emit('onClose')">
+    <CloseOutlined />
+    <span style="margin-left: 4px">{{ label }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { CloseOutlined } from '@ant-design/icons-vue';
+
+  defineProps<{ label: string }>();
+  defineEmits(['onClose']);
+</script>
+
+<style lang="less" scoped>
+  .close-btn {
+    font-size: 20px;
+    font-weight: 400;
+    font-style: normal;
+    cursor: pointer;
+    :hover {
+      color: #ffffff;
+    }
+  }
+</style>
diff --git a/frontend/image-tool/src/businessNew/components/Header/components/Flowindex.vue b/frontend/image-tool/src/businessNew/components/Header/components/Flowindex.vue
new file mode 100644
index 00000000..ee69229b
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/components/Header/components/Flowindex.vue
@@ -0,0 +1,75 @@
+<template>
+  <div class="flow-index">
+    <Tooltip placement="bottom" trigger="hover">
+      <template #title> {{ editor.lang('Page Up') }} </template>
+      <i
+        :class="['iconfont icon-toleft action-icon', { disabled: flowIndex <= 1 }]"
+        @click="handleSwitch(-1)"
+      />
+    </Tooltip>
+    <span class="flow-index-input">
+      <InputNumber
+        style="width: 54px; font-size: 16px"
+        v-model:value="flowIndex"
+        :precision="0"
+        @blur="() => inputIndex()"
+        @pressEnter="() => inputIndex()"
+        autocomplete="off"
+        :min="1"
+        :max="props.info.total"
+        size="small"
+      />
+      <span> / {{ props.info.total }}</span>
+    </span>
+    <Tooltip placement="bottom" trigger="hover">
+      <template #title> {{ editor.lang('Page Down') }} </template>
+      <i
+        :class="['iconfont icon-toright action-icon', { disabled: flowIndex >= props.info.total }]"
+        @click="handleSwitch(1)"
+      />
+    </Tooltip>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, watch } from 'vue';
+  import { Tooltip, InputNumber } from 'ant-design-vue';
+  import { IFlowIndex } from '../type';
+  import { useInjectBSEditor } from '../../../context';
+
+  interface IFlowIndexState {
+    info: IFlowIndex;
+  }
+  const editor = useInjectBSEditor();
+
+  const props = defineProps<IFlowIndexState>();
+  const emits = defineEmits(['onFlowindex']);
+  const flowIndex = ref(props.info.currentIndex + 1);
+
+  function handleSwitch(step: number) {
+    const index = flowIndex.value + step;
+    if (index < 1 || index > props.info.total) return;
+    emits('onFlowindex', { index: index - 1 });
+  }
+  function inputIndex() {
+    if (!flowIndex.value) flowIndex.value = props.info.currentIndex + 1;
+    handleSwitch(0);
+  }
+  watch(
+    () => props.info.currentIndex,
+    () => {
+      if (flowIndex.value !== props.info.currentIndex + 1)
+        flowIndex.value = props.info.currentIndex + 1;
+    },
+    { immediate: true },
+  );
+</script>
+
+<style lang="less" scoped>
+  .flow-index {
+    font-size: 16px;
+  }
+  .flow-index-input {
+    padding: 0 8px;
+  }
+</style>
diff --git a/frontend/image-tool/src/businessNew/components/Header/components/InfoData.vue b/frontend/image-tool/src/businessNew/components/Header/components/InfoData.vue
new file mode 100644
index 00000000..b5b792d6
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/components/Header/components/InfoData.vue
@@ -0,0 +1,108 @@
+<template>
+  <div v-bind="$attrs" class="data-info" @click="handleDetail">
+    <Tooltip placement="bottom" :title="props.dataInfo.name">
+      <span class="name">{{ props.dataInfo.name }}</span>
+    </Tooltip>
+    <div class="header-info-divider"></div>
+    <i class="iconfont icon-information"></i>
+  </div>
+  <Modal v-model:visible="thisState.visible" :title="editor.lang('titleData')" :footer="false">
+    <div class="detail-content">
+      <template v-for="data in props.dataInfo.details" :key="data.label">
+        <h3> {{ data.label }} </h3>
+        <div v-for="item in data.value" :key="item.label" class="detail">
+          <div class="label">{{ item.label }}：</div>
+          <span class="value">{{ item.value }}</span>
+        </div>
+      </template>
+      <div style="margin-top: 10px; text-align: right">
+        <Button @click="handleCopy" type="primary">{{ editor.lang('Copy') }}</Button>
+      </div>
+    </div>
+  </Modal>
+</template>
+
+<script setup lang="ts">
+  import { reactive } from 'vue';
+  import { message, Modal, Tooltip, Button } from 'ant-design-vue';
+  import { useClipboard } from '@vueuse/core';
+  import { useInjectBSEditor } from '../../../context';
+  import { IDataInfo } from '../type';
+
+  interface IDataInfoState {
+    dataInfo: IDataInfo;
+  }
+  const editor = useInjectBSEditor();
+  /**
+   * props & emits
+   */
+  const props = defineProps<IDataInfoState>();
+
+  const thisState = reactive({
+    visible: false,
+  });
+  const { copy, isSupported } = useClipboard();
+  async function handleCopy() {
+    if (isSupported) {
+      const data: string[] = [];
+      props.dataInfo.details.forEach((option) => {
+        data.push(`<${option.label}>\n`);
+        option.value.forEach((item: { label: string; value: any }) => {
+          data.push(`${item.label}: ${item.value}\n`);
+        });
+      });
+      await copy(data.join(''));
+      message.success(editor.lang('copy-ok'));
+    } else {
+      message.warning(editor.lang('the browser does not support copying'));
+    }
+  }
+
+  function handleDetail() {
+    thisState.visible = !thisState.visible;
+  }
+</script>
+
+<style lang="less" scoped>
+  .data-info {
+    display: flex;
+    padding: 8px 15px;
+    border-radius: 300px;
+    justify-content: center;
+    align-items: center;
+    height: 28px;
+    background: #3a3a3e;
+    flex-direction: row;
+    cursor: pointer;
+  }
+  .name {
+    overflow: hidden;
+    max-width: 140px;
+    font-size: 14px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    // line-height: 16px;
+    color: #dee5eb;
+  }
+  .header-info-divider {
+    margin: 0 12px;
+    width: 1px;
+    height: 100%;
+    background-color: #57575c;
+  }
+  .detail-content {
+    padding-left: 32px;
+    .detail {
+      display: flex;
+      gap: 4px;
+      margin-bottom: 10px;
+      padding-left: 18px;
+    }
+    .label {
+      word-break: keep-all;
+    }
+    .value {
+      word-break: break-word;
+    }
+  }
+</style>
diff --git a/frontend/image-tool/src/businessNew/components/Header/index.vue b/frontend/image-tool/src/businessNew/components/Header/index.vue
new file mode 100644
index 00000000..19007961
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/components/Header/index.vue
@@ -0,0 +1,201 @@
+<template>
+  <div class="tool-header">
+    <div class="header-left">
+      <Close :label="editor.lang('Close')" @onClose="onFlowAction(FlowAction.close)" />
+      <InfoData v-bind="{ dataInfo }" />
+    </div>
+    <div class="header-center">
+      <Flowindex @onFlowindex="onIndex" v-bind="{ info: indexInfo }" />
+    </div>
+    <div class="header-right">
+      <Tooltip :title="editor.lang('titleHelp')">
+        <div @click="onHelp">
+          <i class="iconfont icon-hotkey action-icon" />
+        </div>
+      </Tooltip>
+      <Tooltip :title="isFullscreen ? editor.lang('ExitFullscreen') : editor.lang('Fullscreen')">
+        <div @click="toggle">
+          <i v-if="isFullscreen" class="iconfont icon-exitfullscreen action-icon" />
+          <i v-else class="iconfont icon-fullscreen action-icon" />
+        </div>
+      </Tooltip>
+      <div class="header-divider"></div>
+      <!-- save button -->
+      <ActionBtn
+        v-if="has(BsUIType.flowSave)"
+        :type="FlowAction.save"
+        :loading="bsState.doing.saving"
+        title="Ctrl + S"
+        @onActions="onFlowAction(FlowAction.save)"
+      >
+        <template #icon><i class="iconfont icon-save icon" /></template>
+        {{ editor.lang('btnSave') }}
+      </ActionBtn>
+      <!-- mark vaild or invaild button -->
+      <ActionBtn
+        v-if="has(BsUIType.markValid)"
+        :type="validStatus ? FlowAction.markinvaild : FlowAction.markvaild"
+        :loading="bsState.doing.marking"
+        @onActions="markVaild"
+      >
+        {{ validStatus ? editor.lang('Mark as Invalid') : editor.lang('Mark as valid') }}
+      </ActionBtn>
+      <!-- skip button -->
+      <ActionBtn
+        v-if="has(BsUIType.skip)"
+        :type="FlowAction.skip"
+        :loading="bsState.doing.skip"
+        @onActions="onSkip"
+      >
+        {{ editor.lang('Skip') }}
+      </ActionBtn>
+      <!-- submit button -->
+      <ActionBtn
+        v-if="has(BsUIType.submit)"
+        :type="FlowAction.submit"
+        :loading="bsState.doing.submitting"
+        @onActions="onSubmit"
+      >
+        <template #icon><i class="iconfont icon-hotkey icon" /></template>
+        {{ annotateStatus ? editor.lang('Update') : editor.lang('btnSubmit') }}
+      </ActionBtn>
+      <!-- modify button -->
+      <ActionBtn
+        v-if="has(BsUIType.modify)"
+        :type="FlowAction.modify"
+        :loading="bsState.doing.modify"
+        @onActions="onViewToAnnotate"
+      >
+        {{ editor.lang('btnModify') }}
+      </ActionBtn>
+    </div>
+    <div class="block-mask" v-show="bsState.blocking"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { useFullscreen } from '@vueuse/core';
+  import { Tooltip } from 'ant-design-vue';
+  import { useInjectBSEditor } from '../../context';
+  import { FlowAction } from '../../types';
+  import { Event as EditorEvent } from 'image-editor';
+
+  // useHandler
+  import useHeader from './useHeader';
+  import useDataInfo from './useDataInfo';
+  import useFlowIndex from './useFlowIndex';
+  import useUI from 'image-ui/hook/useUI';
+
+  // components
+  import Close from './components/Close.vue';
+  import InfoData from './components/InfoData.vue';
+  import Flowindex from './components/Flowindex.vue';
+  import ActionBtn from './components/ActionBtn.vue';
+  import { BsUIType } from '@/businessNew/configs/ui';
+
+  const { isFullscreen, toggle } = useFullscreen();
+  const editor = useInjectBSEditor();
+  const { bsState } = editor;
+  const {
+    onHelp,
+    markVaild,
+    onSubmit,
+    onSkip,
+    onViewToAnnotate,
+    onFlowAction,
+    validStatus,
+    annotateStatus,
+  } = useHeader();
+  const { updateDataInfo, dataInfo } = useDataInfo();
+  const { indexInfo, onIndex } = useFlowIndex();
+  const { has } = useUI();
+
+  editor.on(EditorEvent.FRAME_CHANGE, async () => {
+    updateDataInfo();
+  });
+</script>
+
+<style lang="less">
+  .tool-header {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 100%;
+    padding: 0 16px;
+    font-style: normal;
+    font-weight: 400;
+    white-space: nowrap;
+
+    .header-left {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      font-style: normal;
+      font-weight: 400;
+    }
+    .header-center {
+    }
+    .header-right {
+      display: flex;
+      justify-content: flex-end;
+      gap: 15px;
+      font-size: 22px;
+    }
+    .action-icon {
+      cursor: pointer;
+      overflow: hidden;
+      // vertical-align: -0.15em;
+      fill: currentcolor;
+      font-size: 20px;
+    }
+    .disabled {
+      cursor: not-allowed !important;
+      color: #5a5a5a;
+    }
+    .block-mask {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      cursor: not-allowed;
+      z-index: 998;
+    }
+    .flow-btn {
+      border: 0;
+      border-radius: 4px;
+      height: 32px;
+      padding: 4px 12px;
+      color: #ffffff !important;
+      .icon {
+        margin-right: 5px;
+        font-size: 12px;
+      }
+      &.save {
+        background: #57ccef;
+      }
+      &.markvaild {
+        background: #91e0a2;
+      }
+      &.markinvaild {
+        background: #fcb17a;
+      }
+      &.skip {
+        background: #98b0d2;
+      }
+      &.submit {
+        background: #60a9fe;
+      }
+      &.modify {
+        background: #fcb17a;
+      }
+    }
+    .header-divider {
+      width: 1px;
+      height: 36px;
+      border-left: 1px solid #57575c;
+      margin: 0 10px;
+    }
+  }
+</style>
diff --git a/frontend/image-tool/src/businessNew/components/Header/type.ts b/frontend/image-tool/src/businessNew/components/Header/type.ts
new file mode 100644
index 00000000..4bc4eb02
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/components/Header/type.ts
@@ -0,0 +1,55 @@
+export interface IDataInfo {
+  name: string;
+  sceneName: string;
+  details: { label: string; value: IDataInfoItem[] }[];
+}
+export interface IDataInfoItem {
+  label: string;
+  value: string | number;
+}
+export interface IStage {
+  id: string;
+  name: string;
+  type: string;
+}
+export interface IStageInfo {
+  stageName: string;
+  stageType: string;
+  stages: IStage[];
+}
+export interface IFlowIndex {
+  total: number;
+  currentIndex: number;
+}
+export interface IFlowIndexCallback {
+  index: number;
+}
+export interface IStatus {
+  // visible
+  showTaskTimer?: boolean;
+  showWorkflow?: boolean;
+  showSave?: boolean;
+  showReject?: boolean;
+  showModify?: boolean;
+  showSubmit?: boolean;
+  showRevise?: boolean;
+  showSuspend?: boolean;
+  // doing
+  saving: boolean;
+  rejecting: boolean;
+  submitting: boolean;
+  suspending: boolean;
+  isModify: boolean;
+}
+export enum TimeStatus {
+  PAUSED = 'PAUSED',
+  WORKING = 'WORKING',
+  TIMEOUT = 'TIMEOUT',
+  DONE = 'DONE',
+}
+export interface ITimeInfo {
+  status?: TimeStatus;
+  updateTm: number;
+  remainTm: number;
+  pausedTm?: number;
+}
diff --git a/frontend/image-tool/src/businessNew/components/Header/useDataInfo.ts b/frontend/image-tool/src/businessNew/components/Header/useDataInfo.ts
new file mode 100644
index 00000000..1847b7a8
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/components/Header/useDataInfo.ts
@@ -0,0 +1,43 @@
+import { reactive } from 'vue';
+import { useInjectBSEditor } from '../../context';
+import { divide, round } from 'lodash';
+
+interface IDetails {
+  label: string;
+  value: any;
+}
+export default function useDataInfo() {
+  const dataInfo = reactive({ name: '', sceneName: '', details: [] as IDetails[] });
+  const editor = useInjectBSEditor();
+  const updateDataInfo = async () => {
+    let name: string = '';
+    const details: IDetails[] = [];
+    const frame = editor.getCurrentFrame();
+    if (frame) {
+      const dataName = frame.imageData?.name || '';
+      if (!name) name = dataName;
+      details.push({
+        label: editor.lang('titleFrame'),
+        value: [
+          { label: editor.lang('Data ID'), value: frame.id },
+          { label: editor.lang('Data Name'), value: dataName },
+          {
+            label: editor.lang('Data Size'),
+            value: round(divide(frame.imageData?.size || 0, 1024 * 1024), 2) + 'MB',
+          },
+          {
+            label: editor.lang('Width x height'),
+            value: `${editor.mainView.backgroundWidth} x ${editor.mainView.backgroundHeight}`,
+          },
+        ],
+      });
+    }
+    dataInfo.name = name || '...';
+    dataInfo.sceneName = frame.imageData?.name || '';
+    dataInfo.details = details;
+  };
+  return {
+    dataInfo,
+    updateDataInfo,
+  };
+}
diff --git a/frontend/image-tool/src/businessNew/components/Header/useFlowIndex.ts b/frontend/image-tool/src/businessNew/components/Header/useFlowIndex.ts
new file mode 100644
index 00000000..9d12cee4
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/components/Header/useFlowIndex.ts
@@ -0,0 +1,47 @@
+import { computed } from 'vue';
+import { useInjectBSEditor } from '../../context';
+import Event from '../../configs/event';
+
+export default function useFlowIndex() {
+  const editor = useInjectBSEditor();
+  const { state } = editor;
+
+  const indexInfo = computed(() => {
+    let total = 1;
+    let currentIndex = 1;
+    if (state.isSeriesFrame) {
+      total = state.sceneIds.length;
+      currentIndex = state.sceneIndex;
+    } else {
+      total = state.frames.length;
+      currentIndex = state.frameIndex;
+    }
+    return {
+      total,
+      currentIndex,
+    };
+  });
+
+  async function onIndex(args: { index: number }) {
+    const { index } = args;
+    const { frames } = editor.state;
+    if (state.isSeriesFrame) {
+      const { sceneIds, sceneIndex } = state;
+      if (index < 0 || index >= sceneIds.length) return;
+      const needSave = frames.findIndex((e) => e.needSave) !== -1;
+      if (needSave) {
+        const result = await editor.save();
+        if (!result) return;
+      }
+      await editor.loadManager.loadSceneData(index);
+      editor.emit(Event.SCENE_CHANGE, { preScene: sceneIndex, newScene: index });
+    } else {
+      if (index < 0 || index >= frames.length) return;
+      editor.switchFrame(index);
+    }
+  }
+  return {
+    indexInfo,
+    onIndex,
+  };
+}
diff --git a/frontend/image-tool/src/businessNew/components/Header/useHeader.ts b/frontend/image-tool/src/businessNew/components/Header/useHeader.ts
new file mode 100644
index 00000000..0bd48409
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/components/Header/useHeader.ts
@@ -0,0 +1,172 @@
+import { useInjectBSEditor } from '../../context';
+import Event from '../../configs/event';
+import * as api from '../../api';
+import { AnnotateStatus, FlowAction, ValidStatus } from '../../types';
+import { computed } from 'vue';
+import { MsgType } from 'image-editor';
+import { ButtonOk } from '../../configs/ui';
+import { closeTab } from '../../utils';
+
+export default function useHeader() {
+  // const { loadClaimRecord } = useLoadState();
+  const editor = useInjectBSEditor();
+  const { bsState, state } = editor;
+
+  const validStatus = computed<boolean>(() => {
+    const { frames, frameIndex } = state;
+    const frame = frames[frameIndex];
+    return frame?.validStatus == ValidStatus.vaild;
+  });
+  const annotateStatus = computed<boolean>(() => {
+    const { frames, frameIndex } = state;
+    const frame = frames[frameIndex];
+    return frame?.annotationStatus == AnnotateStatus.annotated;
+  });
+
+  function onHelp() {
+    editor
+      .showModal('HotkeyHelp', { title: editor.lang('titleHelp'), width: 1000 })
+      .catch(() => {});
+  }
+  async function updateDataStatus() {
+    const frame = editor.getCurrentFrame();
+    const res = await api.getDataStatusByIds(frame.id);
+    frame.validStatus = res.status;
+    frame.annotationStatus = res.annotationStatus;
+  }
+  async function markVaild() {
+    if (bsState.doing.marking) return;
+    bsState.doing.marking = true;
+    const frame = editor.getCurrentFrame();
+    try {
+      if (validStatus.value) {
+        await api.setInvalid(frame.id);
+      } else {
+        await api.setValid(frame.id);
+      }
+      await updateDataStatus();
+    } catch (error) {
+      console.log(error);
+    }
+    bsState.doing.marking = false;
+  }
+  async function submitReq(id: string) {
+    try {
+      await api.submit(id);
+      await updateDataStatus();
+    } catch (error) {
+      console.log(error);
+    }
+  }
+  async function onSubmit() {
+    if (bsState.doing.submitting) return;
+    bsState.doing.submitting = true;
+    const frame = editor.getCurrentFrame();
+    const hasAnnotated = annotateStatus.value || frame.needSave;
+    await editor.save();
+    if (validStatus.value && !hasAnnotated) {
+      await editor
+        .showConfirm({
+          title: editor.lang('Reminder'),
+          subTitle: editor.lang('submitTips'),
+          okText: editor.lang('btnSubmit'),
+        })
+        .then(
+          async () => {
+            await submitReq(frame.id);
+            await switchData();
+          },
+          () => {},
+        );
+    } else {
+      await submitReq(frame.id);
+      await switchData();
+    }
+    bsState.doing.submitting = false;
+
+    async function switchData() {
+      const { frameIndex, frames } = editor.state;
+      if (frameIndex < frames.length - 1) {
+        editor.loadFrame(frameIndex + 1);
+      } else {
+        const notAnnotateIndex = frames.findIndex((item) => {
+          return item.annotationStatus == AnnotateStatus.unannotated;
+        });
+        if (notAnnotateIndex != -1) {
+          editor.loadFrame(notAnnotateIndex);
+        } else {
+          // All Annotated
+          await editor
+            .showModal('confirm', {
+              title: editor.lang('Reminder'),
+              data: {
+                content: editor.lang('Well Done!'),
+                subContent: editor.lang('You have finish all the annotation!'),
+                buttons: [{ ...ButtonOk, content: editor.lang('Close and release those data') }],
+              },
+            })
+            .then(
+              async () => {
+                await api.unlockRecord(bsState.recordId);
+                closeTab();
+              },
+              () => {},
+            );
+        }
+      }
+    }
+  }
+  async function onSkip() {
+    if (bsState.doing.skip) return;
+    bsState.doing.skip = true;
+    if (editor.needSave()) await editor.save();
+
+    const { frames, frameIndex } = state;
+    if (frameIndex < frames.length - 1) {
+      editor.loadFrame(frameIndex + 1);
+    } else {
+      editor.showMsg(MsgType.info, editor.lang('This is last data'));
+    }
+    bsState.doing.skip = false;
+  }
+  async function onViewToAnnotate() {
+    if (bsState.doing.modify) return;
+    bsState.doing.modify = true;
+
+    const frame = editor.getCurrentFrame();
+    try {
+      const res = await api.takeRecordByData({
+        datasetId: bsState.datasetId,
+        dataIds: [frame.id],
+        dataType: 'SINGLE_DATA',
+      });
+      console.log(res);
+
+      const { origin, pathname } = window.location;
+      window.location.href = `${origin}${pathname}?recordId=${res.data}`;
+    } catch (error) {
+      // DATASET_DATA_EXIST_ANNOTATE
+      console.log(error);
+      editor.showMsg(
+        MsgType.warning,
+        `Fail to modify data because it is being annotated by others`,
+      );
+    }
+
+    bsState.doing.modify = false;
+  }
+  function onFlowAction(action: FlowAction) {
+    editor.emit(Event.FLOW_ACTION, action);
+  }
+
+  return {
+    onHelp,
+    markVaild,
+    onSubmit,
+    onSkip,
+    onViewToAnnotate,
+    onFlowAction,
+    validStatus,
+    annotateStatus,
+  };
+}
diff --git a/frontend/image-tool/src/businessNew/components/Layout/index.vue b/frontend/image-tool/src/businessNew/components/Layout/index.vue
new file mode 100644
index 00000000..1b189c81
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/components/Layout/index.vue
@@ -0,0 +1,47 @@
+<template>
+  <!-- [header] -->
+  <!-- [container] = [tools, editor, operation] -->
+  <div class="image-tool-layout">
+    <div class="layout-header"><slot name="header" /></div>
+    <div class="layout-content">
+      <div class="tools-wrap"><slot name="tools" /></div>
+      <div class="main-wrap"><slot name="default" /></div>
+      <div class="operation-wrap"><slot name="operation" /></div>
+      <slot name="mask"></slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="less">
+  .image-tool-layout {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    background-color: #3a393e;
+
+    .layout-header {
+      width: 100%;
+      height: 54px;
+      background-color: #1e1f22;
+    }
+    .layout-content {
+      flex: 1;
+      display: flex;
+      flex-direction: row;
+      position: relative;
+    }
+    .tools-wrap {
+      width: 50px;
+    }
+    .operation-wrap {
+      width: 300px;
+      padding: 4px;
+    }
+    .main-wrap {
+      flex: 1;
+    }
+  }
+</style>
diff --git a/frontend/image-tool/src/businessNew/components/Mask/index.vue b/frontend/image-tool/src/businessNew/components/Mask/index.vue
new file mode 100644
index 00000000..235a5e5b
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/components/Mask/index.vue
@@ -0,0 +1,34 @@
+<template>
+  <div :style="maskStyle" class="mask">
+    <!-- <loading v-if="showLoading" /> -->
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { computed } from 'vue';
+
+  interface IConfig {
+    zIndex?: number;
+    bgColor?: string;
+    showLoading?: boolean;
+  }
+  const props = withDefaults(defineProps<IConfig>(), {
+    zIndex: 999,
+    bgColor: 'rgba(0,0,0,0.6)',
+    showLoading: false,
+  });
+  const maskStyle = computed(() => {
+    return {
+      zIndex: props.zIndex,
+      background: props.bgColor,
+    };
+  });
+</script>
+
+<style lang="less" scoped>
+  .mask {
+    position: absolute;
+    inset: 0;
+  }
+</style>
diff --git a/frontend/image-tool/src/businessNew/components/Modal/Confirm.vue b/frontend/image-tool/src/businessNew/components/Modal/Confirm.vue
new file mode 100644
index 00000000..8c43291f
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/components/Modal/Confirm.vue
@@ -0,0 +1,103 @@
+<template>
+  <div class="modal-confirm-base" style="padding-left: 40px">
+    <div class="msg" v-show="data.content"> {{ data.content }}</div>
+    <div class="sub-msg" v-show="data.subContent"> {{ data.subContent }}</div>
+    <div style="margin-top: 20px; text-align: right">
+      <a-button
+        class="btn"
+        v-for="btn in props.data.buttons"
+        :key="btn.action"
+        v-bind="btn"
+        @click="onClick(btn)"
+      >
+        {{ editor.lang(btn.content as any) || btn.content }}
+      </a-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { IConfirmProps, IConfirmBtn } from '../../configs/ui';
+  import { useInjectBSEditor } from '../../context';
+
+  // ***************Props and Emits***************
+  const emit = defineEmits(['cancel', 'ok']);
+  const editor = useInjectBSEditor();
+  const props = withDefaults(
+    defineProps<{
+      data: IConfirmProps;
+    }>(),
+    {
+      data: () => {
+        return {
+          content: '',
+          subContent: '',
+          buttons: [],
+        };
+      },
+    },
+  );
+  // ***************Props and Emits*************
+  let action = '';
+  function onClick(item: IConfirmBtn) {
+    action = item.action;
+    emit('ok');
+  }
+
+  function valid(): Promise<boolean> {
+    return Promise.resolve(true);
+  }
+  function onCancel() {
+    emit('cancel');
+  }
+
+  function getData(): any {
+    return action;
+  }
+
+  defineExpose({
+    valid,
+    getData,
+  });
+</script>
+
+<style lang="less">
+  .modal-confirm-base {
+    .btn {
+      margin-right: 10px;
+      min-width: 80px;
+      height: 30px;
+    }
+
+    .msg {
+      font-size: 16px;
+      line-height: 32px;
+    }
+
+    .sub-msg {
+      font-size: 14px;
+      line-height: 24px;
+      color: #bec1ca;
+    }
+
+    .btn.ghost-gray {
+      border-color: #cccccc;
+      color: #cccccc;
+
+      &:hover {
+        border-color: fade(#cccccc, 80%);
+        color: fade(#cccccc, 80%);
+      }
+    }
+
+    .btn.ghost-red {
+      border-color: #f8827b;
+      color: #f8827b;
+
+      &:hover {
+        border-color: fade(#f8827b, 80%);
+        color: fade(#f8827b, 80%);
+      }
+    }
+  }
+</style>
diff --git a/frontend/image-tool/src/businessNew/components/Modal/HotkeyHelp/HotkeyItem.vue b/frontend/image-tool/src/businessNew/components/Modal/HotkeyHelp/HotkeyItem.vue
new file mode 100644
index 00000000..57a7e286
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/components/Modal/HotkeyHelp/HotkeyItem.vue
@@ -0,0 +1,64 @@
+<template>
+  <div class="hotkey-item">
+    <div class="hotkey-tips">
+      {{ editor.lang(props.item.label as any) }}
+      <span v-if="props.item.tips">[{{ editor.lang(props.item.tips as any) }}]</span>
+    </div>
+    <div class="hotkey-tags">
+      <template v-for="(action, index) in props.item.keys" :key="index">
+        <span class="action-text">{{ action }}</span>
+        <span class="action-plus" v-if="index < props.item.keys.length - 1"> + </span>
+      </template>
+      <span v-if="props.item.otherKeys">
+        <span class="action-plus"> or </span>
+        <template v-for="(action, index) in props.item.otherKeys" :key="index">
+          <span class="action-text">{{ action }}</span>
+          <span
+            class="action-plus"
+            v-if="props.item.otherKeys && index < props.item.otherKeys.length - 1"
+          >
+            +
+          </span>
+        </template>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { useInjectBSEditor } from '../../../context';
+  import { IKeyboardConfig } from '.';
+
+  const props = defineProps<{ item: IKeyboardConfig }>();
+
+  const editor = useInjectBSEditor();
+</script>
+
+<style lang="less" scoped>
+  .hotkey-item {
+    display: flex;
+    margin: 0 32px 16px 16px;
+    padding: 10px;
+    border-radius: 5px;
+    justify-content: space-between;
+    height: 45px;
+    background-color: #424247;
+    font-size: 14px;
+    flex-direction: row;
+  }
+
+  .hotkey-tips {
+    line-height: 25px;
+    flex: 1;
+  }
+
+  .hotkey-tags {
+    .action-text {
+      padding: 5px 10px;
+      border-radius: 3px;
+      background-color: #ffffff;
+      font-size: 12px;
+      color: #000000;
+    }
+  }
+</style>
diff --git a/frontend/image-tool/src/businessNew/components/Modal/HotkeyHelp/index.ts b/frontend/image-tool/src/businessNew/components/Modal/HotkeyHelp/index.ts
new file mode 100644
index 00000000..4882df16
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/components/Modal/HotkeyHelp/index.ts
@@ -0,0 +1,148 @@
+import { AnnotateModeEnum } from 'image-editor';
+
+const showCtrl = 'Ctrl/⌘';
+const Tags_Instance = [AnnotateModeEnum.INSTANCE];
+// const Tags_Segment = [AnnotateModeEnum.SEGMENTATION];
+const Tags_All = [AnnotateModeEnum.INSTANCE, AnnotateModeEnum.SEGMENTATION];
+
+export interface IKeyboardConfig {
+  label: string;
+  tips: string;
+  keys: string[];
+  otherKeys?: string[];
+  tags: AnnotateModeEnum[];
+  wrap?: boolean;
+}
+
+export const dataConfig: IKeyboardConfig[] = [
+  {
+    label: 'Page Up',
+    tips: '',
+    keys: ['Page Up'],
+    tags: Tags_All,
+  },
+  {
+    label: 'Page Down',
+    tips: '',
+    keys: ['Page Down'],
+    tags: Tags_All,
+  },
+];
+export const instanceConfig: IKeyboardConfig[] = [
+  {
+    label: 'Save',
+    tips: '',
+    keys: [showCtrl, 'S'],
+    tags: Tags_All,
+  },
+  {
+    label: 'Delete instance/point',
+    tips: '',
+    keys: ['Delete'],
+    tags: Tags_Instance,
+  },
+  {
+    label: 'Finish drawing',
+    tips: '',
+    keys: ['Space'],
+    otherKeys: ['Enter'],
+    tags: Tags_All,
+  },
+  {
+    label: 'Show/hide tag pad',
+    tips: '',
+    keys: ['T'],
+    tags: Tags_All,
+  },
+  {
+    label: 'Move the object 1px',
+    tips: '',
+    keys: [showCtrl, 'Shift', '↑↓←→'],
+    tags: Tags_Instance,
+  },
+  {
+    label: 'Undo',
+    tips: '',
+    keys: [showCtrl, 'Z'],
+    tags: Tags_All,
+  },
+  {
+    label: 'Redo',
+    tips: '',
+    keys: [showCtrl, 'Shift', 'Z'],
+    tags: Tags_All,
+  },
+  {
+    label: 'Hollow',
+    tips: '',
+    keys: ['H'],
+    tags: Tags_Instance,
+  },
+  {
+    label: 'Crop',
+    tips: '',
+    keys: ['C'],
+    tags: Tags_Instance,
+  },
+  {
+    label: 'Horizontal Drawing Model',
+    tips: '',
+    keys: ['A'],
+    tags: Tags_Instance,
+  },
+  {
+    label: 'Vertical Drawing Model',
+    tips: '',
+    keys: [showCtrl, 'A'],
+    tags: Tags_Instance,
+  },
+];
+export const resultConfig: IKeyboardConfig[] = [
+  {
+    label: 'Show Class',
+    tips: '',
+    keys: ['M'],
+    tags: Tags_All,
+  },
+  {
+    label: 'Show Size',
+    tips: '',
+    keys: ['B'],
+    tags: Tags_Instance,
+  },
+  {
+    label: 'Show annotation sequence',
+    tips: '',
+    keys: ['D'],
+    tags: Tags_Instance,
+  },
+];
+export const imageConfig: IKeyboardConfig[] = [
+  {
+    label: 'Zoom in、Zoom Out',
+    tips: '',
+    keys: ['wheel'],
+    tags: Tags_All,
+  },
+  {
+    label: 'Drag',
+    tips: '',
+    keys: ['RightClick'],
+    tags: Tags_All,
+  },
+];
+// 其它
+export const elseConfig: IKeyboardConfig[] = [
+  {
+    label: 'Cancel window',
+    tips: '',
+    keys: ['Esc'],
+    tags: Tags_All,
+  },
+  {
+    label: 'Show Auxiliary Line',
+    tips: '',
+    keys: ['Y'],
+    tags: Tags_All,
+  },
+];
diff --git a/frontend/image-tool/src/businessNew/components/Modal/HotkeyHelp/index.vue b/frontend/image-tool/src/businessNew/components/Modal/HotkeyHelp/index.vue
new file mode 100644
index 00000000..d32bbf4f
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/components/Modal/HotkeyHelp/index.vue
@@ -0,0 +1,174 @@
+<template>
+  <div class="hotkey-body">
+    <a-row>
+      <a-col :span="15"></a-col>
+      <a-col :span="8">
+        <a-input-search v-model:value="searchValue" :placeholder="editor.lang('Input keyword')" />
+      </a-col>
+    </a-row>
+    <div class="body-content">
+      <div v-for="list in shortcutsData" :key="list.key">
+        <a-row v-if="list.value.length > 0">
+          <a-col :span="24" class="i-flex i-header">
+            <div>{{ editor.lang(list.key as any) }}</div>
+            <div class="i-title-line"></div>
+          </a-col>
+          <a-col :span="12" v-for="item in list.value" :key="item.label">
+            <HotkeyItem :item="item" />
+          </a-col>
+        </a-row>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { computed, ref } from 'vue';
+  import { useInjectBSEditor } from '../../../context';
+  import { AnnotateModeEnum, tools } from 'image-editor';
+  import {
+    IKeyboardConfig,
+    dataConfig,
+    elseConfig,
+    imageConfig,
+    instanceConfig,
+    resultConfig,
+  } from './index';
+
+  import HotkeyItem from './HotkeyItem.vue';
+
+  const editor = useInjectBSEditor();
+  const activeVal = ref<AnnotateModeEnum>(AnnotateModeEnum.INSTANCE);
+  const searchValue = ref('');
+
+  const dataList = computed(() => {
+    return filterSearch(dataConfig, activeVal.value, searchValue.value);
+  });
+  const instanceList = computed(() => {
+    return filterSearch(instanceConfig, activeVal.value, searchValue.value);
+  });
+  const toolList = computed(() => {
+    const map = tools[activeVal.value];
+    const list = [...map.fixed, ...map.model, ...map.tools]
+      .filter((e) => e.isDisplay(editor) && e.hotkey)
+      .sort((tool1, tool2) => Number(tool1.hotkey) - Number(tool2.hotkey));
+    const toolList = list.map((tool) => {
+      return {
+        label: tool.name,
+        tips: '',
+        keys: [String(tool.hotkey)],
+        tags: [activeVal.value],
+      };
+    });
+    return filterSearch(toolList, activeVal.value, searchValue.value);
+  });
+  const resultList = computed(() => {
+    return filterSearch(resultConfig, activeVal.value, searchValue.value);
+  });
+  const imageList = computed(() => {
+    return filterSearch(imageConfig, activeVal.value, searchValue.value);
+  });
+  const elseList = computed(() => {
+    return filterSearch(elseConfig, activeVal.value, searchValue.value);
+  });
+  const shortcutsData = computed(() => {
+    return [
+      {
+        key: 'Data',
+        value: dataList.value,
+      },
+      {
+        key: 'Actions',
+        value: instanceList.value,
+      },
+      {
+        key: 'Tool',
+        value: toolList.value,
+      },
+      {
+        key: 'Result',
+        value: resultList.value,
+      },
+      {
+        key: 'Image',
+        value: imageList.value,
+      },
+      {
+        key: 'Else',
+        value: elseList.value,
+      },
+    ];
+  });
+
+  function filterSearch(list: IKeyboardConfig[], model: AnnotateModeEnum, search: string) {
+    list = list.filter((e) => e.tags.includes(model));
+    if (search) {
+      return list.filter((item) => {
+        const filterReg = new RegExp(search, 'i');
+        let filterVal =
+          editor.lang(item.label as any) + editor.lang(item.tips as any) + item.keys.join();
+        item.otherKeys && (filterVal += item.otherKeys.join());
+        return filterReg.test(filterVal);
+        // const filterSpace = filterVal.replace(/ /g, '');
+        // return filterReg.test(filterVal) || filterReg.test(filterSpace);
+      });
+    } else {
+      return list;
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+  .hotkey-body {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    max-height: 650px;
+
+    .body-content {
+      overflow: auto;
+      max-height: 600px;
+    }
+
+    button {
+      border: 1px solid #1e1f22;
+      width: 140px;
+      background: none;
+      color: #dddede;
+
+      &:hover {
+        border-color: #57ccef;
+        color: #57ccef;
+        cursor: pointer;
+      }
+
+      &.active {
+        background-color: #57ccef;
+        color: #dddede;
+      }
+    }
+
+    .i-header {
+      height: 30px;
+      font-size: 16px;
+      line-height: 30px;
+    }
+
+    .i-flex {
+      display: flex;
+
+      .i-title-line {
+        margin: 0 40px 0 8px;
+        height: 1px;
+        flex: 1 1 0;
+        border-top: 1px solid #515151;
+        align-self: center;
+      }
+    }
+  }
+
+  .content-text-no {
+    width: 100%;
+    text-align: center;
+  }
+</style>
diff --git a/frontend/image-tool/src/businessNew/components/Operation/Classification/AttrValue.vue b/frontend/image-tool/src/businessNew/components/Operation/Classification/AttrValue.vue
new file mode 100644
index 00000000..d466ee83
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/components/Operation/Classification/AttrValue.vue
@@ -0,0 +1,88 @@
+<template>
+  <div class="attr-item">
+    <div class="name" :span="10">
+      {{ item.parentValue ? `${item.parentValue} ${item.name}` : item.name }}
+      <span v-if="item.type === AttrType.RADIO || item.type === AttrType.MULTI_SELECTION"> </span>
+    </div>
+    <div class="value" :span="14">
+      <Radio
+        :disabled="!canEdit()"
+        :name="item.name"
+        v-model:value="item.value"
+        @change="onAttChange"
+        :options="item.options"
+        v-if="item.type === AttrType.RADIO"
+      />
+      <Select
+        :disabled="!canEdit()"
+        :name="item.name"
+        v-model:value="item.value"
+        @change="onAttChange"
+        :options="item.options"
+        v-else-if="item.type === AttrType.DROPDOWN"
+      />
+      <Text
+        :disabled="!canEdit()"
+        :name="item.name"
+        v-model:value="item.value"
+        @change="onAttChange"
+        v-else-if="item.type === AttrType.TEXT"
+      />
+      <Check
+        :disabled="!canEdit()"
+        :name="item.name"
+        v-model:value="item.value"
+        @change="onAttChange"
+        :options="item.options"
+        v-else-if="item.type === AttrType.MULTI_SELECTION"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { IClassificationAttr } from '../../../types';
+  import { AttrType } from 'image-editor';
+
+  import Radio from 'image-ui/components/common/Radio.vue';
+  import Select from 'image-ui/components/common/Select.vue';
+  import Text from 'image-ui/components/common/Text.vue';
+  import Check from 'image-ui/components/common/Check.vue';
+
+  import useUI from '../../../hook/useUI';
+
+  interface IProps {
+    item: IClassificationAttr;
+  }
+
+  // ***************Props and Emits***************
+  let emit = defineEmits(['change']);
+  defineProps<IProps>();
+  // *********************************************
+
+  let { canEdit } = useUI();
+
+  function onAttChange(...args: any[]) {
+    emit('change', ...args);
+  }
+</script>
+
+<style lang="less">
+  .instance-item {
+    display: inline-block;
+    padding: 2px 6px;
+    background: #177ddc;
+    margin-right: 4px;
+    margin-bottom: 4px;
+    border-radius: 2px;
+
+    .remove {
+      cursor: pointer;
+    }
+
+    .name {
+      font-size: 14px;
+      margin: 0px 4px;
+    }
+  }
+</style>
diff --git a/frontend/image-tool/src/businessNew/components/Operation/Classification/index.vue b/frontend/image-tool/src/businessNew/components/Operation/Classification/index.vue
new file mode 100644
index 00000000..02f34f6a
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/components/Operation/Classification/index.vue
@@ -0,0 +1,86 @@
+<template>
+  <Collapse header="Classifications">
+    <div class="operation-classification">
+      <template v-if="classifications.length > 0">
+        <div class="classification-wrap" v-for="item in classifications" :key="item.id">
+          <AttrValue
+            v-for="attr in item.attrs"
+            :key="attr.id + '#' + state.frameIndex"
+            v-show="isAttrVisible(attr)"
+            @change="onAttChange"
+            :item="attr"
+          />
+        </div>
+      </template>
+      <div v-else class="no-info">{{ editor.lang('no-data') }}</div>
+    </div>
+  </Collapse>
+</template>
+
+<script setup lang="ts">
+  import { computed } from 'vue';
+  import { useInjectBSEditor } from '../../../context';
+  import { IClassificationAttr, IClassification } from '../../../types';
+  import { isAttrTypeMulti } from '../../../utils';
+
+  import AttrValue from './AttrValue.vue';
+  import Collapse from '../../Collapse/index.vue';
+
+  const editor = useInjectBSEditor();
+  const { state } = editor;
+
+  let attrMap = {} as Record<string, IClassificationAttr>;
+  const classifications = computed(() => {
+    let frame = editor.getCurrentFrame();
+    let datas: IClassification[] = frame?.classifications || [];
+
+    datas.forEach((e) => {
+      e.attrs.forEach((attr) => {
+        attrMap[attr.id] = attr;
+      });
+    });
+
+    return datas;
+  });
+
+  function onAttChange(name: string, value: any) {
+    console.log(name, value);
+    let dataInfo = editor.getCurrentFrame();
+    dataInfo.needSave = true;
+  }
+
+  function isItemVisible(attr: IClassificationAttr): boolean {
+    let parentAttr = attrMap[attr.parent];
+    return isAttrTypeMulti(parentAttr.type)
+      ? (parentAttr.value as any[]).indexOf(attr.parentValue) >= 0
+      : parentAttr.value === attr.parentValue;
+  }
+
+  function isAttrVisible(attr: IClassificationAttr): boolean {
+    if (!attr.parent) return true;
+    let parentAttr = attrMap[attr.parent];
+    return isItemVisible(attr) && isAttrVisible(parentAttr);
+  }
+</script>
+
+<style lang="less">
+  .operation-classification {
+    text-align: left;
+    padding: 4px 10px;
+    max-height: 350px;
+    overflow: auto;
+    position: relative;
+
+    .attr-item {
+      text-align: left;
+      .name {
+        font-size: 16px;
+        line-height: 34px;
+      }
+
+      .value {
+        padding: 4px 0px;
+      }
+    }
+  }
+</style>
diff --git a/frontend/image-tool/src/businessNew/components/Operation/Results/Header.vue b/frontend/image-tool/src/businessNew/components/Operation/Results/Header.vue
new file mode 100644
index 00000000..37ff691e
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/components/Operation/Results/Header.vue
@@ -0,0 +1,72 @@
+<template>
+  <div class="header-content">
+    <div class="header-title">{{ props.title }}</div>
+    <span class="info-count">({{ resultState.objectN }})</span>
+    <div class="tool header-tool">
+      <!-- filter -->
+      <Filter />
+      <!-- delete -->
+      <i
+        class="icon iconfont icon-delete"
+        v-show="canEdit()"
+        @click.stop="onDelete"
+        :title="editor.lang('Delete')"
+      />
+      <!-- setting -->
+      <Setting />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { useInjectBSEditor } from '../../../context';
+  import { useResultsInject } from './context';
+  import useUI from '../../../hook/useUI';
+
+  import Filter from './components/Filter.vue';
+  import Setting from './components/Setting.vue';
+
+  const props = defineProps<{ title: string }>();
+
+  const editor = useInjectBSEditor();
+  const { resultState } = useResultsInject();
+  const { canEdit } = useUI();
+
+  function onDelete() {
+    const frame = editor.getCurrentFrame();
+    let objects = editor.dataManager.getFrameObject(frame.id) || [];
+
+    if (objects.length > 0) {
+      editor
+        .showConfirm({
+          title: editor.lang('Delete'),
+          subTitle: editor.lang('Delete {num} Objects?', { num: objects.length }),
+          okText: editor.lang('Delete'),
+          cancelText: editor.lang('Cancel'),
+          okDanger: true,
+        })
+        .then(
+          () => {
+            editor.cmdManager.execute('delete-object', objects);
+          },
+          () => {},
+        );
+    }
+  }
+</script>
+
+<style lang="less">
+  .header-content {
+    display: flex;
+    .header-title {
+      overflow: hidden;
+      max-width: 100px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .header-tool {
+      position: absolute;
+      right: 0;
+    }
+  }
+</style>
diff --git a/frontend/image-tool/src/businessNew/components/Operation/Results/ResultList.vue b/frontend/image-tool/src/businessNew/components/Operation/Results/ResultList.vue
new file mode 100644
index 00000000..5f91a49d
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/components/Operation/Results/ResultList.vue
@@ -0,0 +1,146 @@
+<template>
+  <div class="result-data-list">
+    <a-collapse
+      style="border: none !important"
+      v-model:activeKey="resultState.activeClass"
+      :bordered="false"
+      :openAnimation="animation"
+    >
+      <template #expandIcon="{ isActive }: any">
+        <CaretRightOutlined :rotate="isActive ? 90 : 0" />
+      </template>
+      <a-collapse-panel v-for="item in resultState.list" :key="item.key">
+        <div class="list">
+          <Item
+            v-for="objItem in item.data"
+            :key="objItem.key"
+            :data="objItem"
+            :select="resultState.selectMap"
+            :editable="canEdit()"
+          />
+        </div>
+        <template #header>
+          <div>
+            <span class="class-title limit" :style="{ color: item.color }">
+              {{ item.name }}
+            </span>
+            <span>{{ `(${item.data.length})` }}</span>
+          </div>
+        </template>
+        <template #extra>
+          <i class="icon iconfont icon-model" v-if="item.isModel" />
+          <ToolIcon v-else-if="item.classType" :tool="item.toolType" />
+          <warning-outlined v-else style="color: #fcb17a" />
+          <div class="extra-tool" v-show="item.data.length > 0">
+            <EditOutlined
+              v-if="item.classType"
+              title="Edit"
+              @click.stop="classHandler.onAction(IAction.edit, item)"
+              class="tool-icon"
+            />
+            <EyeOutlined
+              class="tool-icon"
+              @click.stop="classHandler.onAction(IAction.toggleVisible, item)"
+              v-if="item.visible"
+            />
+            <EyeInvisibleOutlined
+              class="tool-icon"
+              @click.stop="classHandler.onAction(IAction.toggleVisible, item)"
+              v-else
+            />
+            <DeleteOutlined
+              v-show="canEdit()"
+              class="tool-icon"
+              @click.stop="classHandler.onAction(IAction.delete, item)"
+            />
+          </div>
+        </template>
+      </a-collapse-panel>
+    </a-collapse>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import {
+    CaretRightOutlined,
+    EditOutlined,
+    WarningOutlined,
+    EyeOutlined,
+    EyeInvisibleOutlined,
+    DeleteOutlined,
+  } from '@ant-design/icons-vue';
+  import { useResultsInject } from './context';
+  import { animation } from './useList';
+  import { ToolIcon } from 'image-editor';
+  import useUI from '../../../hook/useUI';
+  import { IAction } from './type';
+  import Item from './components/Item.vue';
+
+  const { resultState, classHandler } = useResultsInject();
+  const { canEdit } = useUI();
+</script>
+
+<style lang="less" scoped>
+  .result-data-list {
+    position: relative;
+    height: 100%;
+    margin-bottom: unset;
+    border: 0 !important;
+    border-radius: 4px;
+    background-color: #303036 !important;
+    .list {
+      overflow: hidden;
+    }
+
+    .class-title {
+      display: inline-block;
+      margin-left: 16px;
+      max-width: 100px;
+      vertical-align: middle;
+    }
+
+    .header-highlight {
+      position: absolute;
+      inset: 0;
+      padding-left: 33px;
+      line-height: 39px;
+
+      &.active {
+        background: #455a9580;
+      }
+    }
+
+    .ant-collapse-arrow {
+      display: none;
+    }
+
+    .ant-collapse-item {
+      margin-bottom: 3px;
+      border: 1px solid #1e1f22;
+      border-radius: 4px 4px 5px 5px;
+      border-bottom: 0;
+
+      &.ant-collapse-item-active {
+        border: 1px solid #1e1f22 !important;
+      }
+
+      :deep(.ant-collapse-header) {
+        position: relative;
+        padding-left: 10px;
+        border-radius: 4px;
+        background: #3e4047;
+        font-size: 14px;
+        color: #bec1ca;
+        font-weight: 500;
+        border-bottom: 1px solid #1e1f22;
+
+        .ant-collapse-extra {
+          position: absolute;
+          inset: 0 0 0 28px;
+          pointer-events: none;
+          line-height: 40px;
+        }
+      }
+    }
+  }
+</style>
diff --git a/frontend/image-tool/src/businessNew/components/Operation/Results/components/Filter.vue b/frontend/image-tool/src/businessNew/components/Operation/Results/components/Filter.vue
new file mode 100644
index 00000000..a1669197
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/components/Operation/Results/components/Filter.vue
@@ -0,0 +1,106 @@
+<template>
+  <a-popover
+    :title="editor.lang('Filter')"
+    placement="bottomRight"
+    :trigger="['click']"
+    overlayClassName="result-header-filter"
+  >
+    <i class="iconfont icon-filter icon" @click.stop />
+    <template #content>
+      <div class="filter-body">
+        <a-tree
+          class="filter-tree"
+          checkable
+          :treeData="classList"
+          :defaultExpandAll="true"
+          v-model:checkedKeys="bsState.filterClasses"
+          @check="handleCheck"
+          :selectable="false"
+        >
+        </a-tree>
+      </div>
+      <div class="filter-divider"></div>
+      <div class="filter-footer">
+        <a-button size="small" @click="onReset">
+          {{ editor.lang('Reset') }}
+        </a-button>
+      </div>
+    </template>
+  </a-popover>
+</template>
+<script lang="ts" setup>
+  import { computed } from 'vue';
+  import { __ALL__ as ALL } from 'image-editor';
+  import { useInjectBSEditor } from '../../../../context';
+
+  const editor = useInjectBSEditor();
+  const { bsState } = editor;
+
+  const classList = computed(() => {
+    const list = editor.state.classTypes.map((e) => {
+      return { title: e.name, key: e.id };
+    });
+    list.unshift({ title: editor.lang('Class Required'), key: '' });
+    return [{ title: 'All', key: ALL, children: list }];
+  });
+
+  const handleCheck = () => {
+    editor.mainView.renderFrame();
+  };
+
+  function onReset() {
+    bsState.filterClasses = [ALL];
+    editor.mainView.renderFrame();
+  }
+</script>
+<style lang="less">
+  .result-header-filter {
+    width: 240px;
+
+    .filter {
+      position: absolute;
+      top: 40px;
+      right: 16px;
+      padding: 12px 16px;
+      border-radius: 4px;
+      z-index: 10;
+      overflow-x: hidden;
+      background-color: #1f1f1f;
+      color: rgb(255 255 255 / 85%);
+    }
+
+    .filter-title {
+      margin: 0;
+      padding: 5px 16px 4px;
+      min-width: 177px;
+      min-height: 32px;
+      color: rgb(255 255 255 / 85%);
+      font-weight: 500;
+      border-bottom: 1px solid #303030;
+    }
+
+    .filter-body {
+      overflow: overlay;
+      max-height: 400px;
+      color: rgb(255 255 255 / 85%);
+    }
+
+    .filter-divider {
+      margin-top: 10px;
+      width: 100%;
+      height: 1px;
+      background-color: #303030;
+    }
+
+    .filter-footer {
+      display: flex;
+      padding-top: 10px;
+      justify-content: space-between;
+    }
+  }
+  .filter-tree {
+    .ant-tree-switcher {
+      display: none !important;
+    }
+  }
+</style>
diff --git a/frontend/image-tool/src/businessNew/components/Operation/Results/components/Item.vue b/frontend/image-tool/src/businessNew/components/Operation/Results/components/Item.vue
new file mode 100644
index 00000000..c437e0a7
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/components/Operation/Results/components/Item.vue
@@ -0,0 +1,212 @@
+<template>
+  <div
+    @click="onTool(IAction.click, $event)"
+    :class="{
+      item: true,
+      active: select[data.id],
+    }"
+  >
+    <div class="item-header">
+      <span class="item-header-name">
+        <span v-if="classInvalid(data.id)" :title="editor.lang('Class Invalid')">
+          <warning-outlined style="color: #fcb17a" /> &nbsp;
+        </span>
+        {{ '#' + data.name }}
+        <!-- <span v-show="data.infoLabel" class="info">({{ data.infoLabel }})</span>
+        <span
+          class="no-true-info"
+          :title="editor.lang('Not True-Value')"
+          v-show="!data.trueValue && data.hasObject"
+        ></span> -->
+      </span>
+
+      <!-- tool -->
+      <div class="extra-tool" style="padding-right: 0">
+        <EditOutlined title="Edit" @click.stop="onTool(IAction.edit)" class="tool-icon" />
+        <EyeOutlined
+          class="tool-icon"
+          @click.stop="onTool(IAction.toggleVisible)"
+          v-if="data.visible"
+        />
+        <EyeInvisibleOutlined
+          class="tool-icon"
+          @click.stop="onTool(IAction.toggleVisible)"
+          v-else
+        />
+        <template v-if="editable">
+          <DeleteOutlined
+            class="tool-icon"
+            @click.stop="itemHandler.onAction(IAction.delete, data)"
+          />
+        </template>
+      </div>
+    </div>
+    <div v-show="data.attrLabel && config.showAttrs">
+      <div class="props">{{ data.attrLabel }}</div>
+    </div>
+    <div v-show="data.sizeLabel && config.showSize">
+      <div class="props">{{ data.sizeLabel }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import {
+    EditOutlined,
+    EyeOutlined,
+    EyeInvisibleOutlined,
+    DeleteOutlined,
+    WarningOutlined,
+  } from '@ant-design/icons-vue';
+  import { IAction, IObjectItem } from '../type';
+  import { useInjectEditor } from 'image-ui/context';
+  import { useResultsInject } from '../context';
+
+  // ***************Props and Emits***************
+  const emit = defineEmits(['tool', 'group-tool']);
+  const props = defineProps<{
+    data: IObjectItem;
+    select: Record<string, true>;
+    editable: boolean;
+  }>();
+  // *********************************************
+
+  const editor = useInjectEditor();
+  const { config } = editor.state;
+  const { itemHandler } = useResultsInject();
+
+  function onTool(action: IAction, event?: MouseEvent) {
+    itemHandler.onAction(action, props.data, event?.shiftKey);
+  }
+  function classInvalid(id: string): boolean {
+    const obj = editor.dataManager.getObject(id);
+    const invalid = (obj?.userData.limitState || '') !== '';
+    return invalid;
+  }
+</script>
+
+<style lang="less" scoped>
+  .attrs-item + .attrs-item {
+    border-left: 1px solid rgb(0 157 255);
+  }
+
+  .item {
+    padding: 0 10px;
+    font-size: 14px;
+    color: #bec1ca;
+    cursor: pointer;
+
+    &:first-child {
+      border-top: none;
+
+      .item-header {
+        border-top: none;
+      }
+    }
+
+    .item-header-name {
+      display: flex;
+      align-items: center;
+
+      .no-true-info {
+        display: inline-block;
+        margin-left: 4px;
+        width: 50px;
+        height: 14px;
+        background: linear-gradient(to right, transparent 50%, #8f8f8f 50%);
+        background-size: 4px 100%;
+      }
+
+      .info {
+        margin-left: 4px;
+        font-size: 12px;
+        color: #afafaf;
+      }
+    }
+
+    .item-header {
+      display: flex;
+      padding-left: 4px;
+      justify-content: space-between;
+      align-items: center;
+      height: 36px;
+      border-top: 1px solid #cccccc2b;
+
+      .item-header-icon {
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        gap: 8px;
+
+        .tool-icon {
+          width: 12px;
+          height: 12px;
+          font-size: 12px;
+          // margin-left: 6px;
+          // margin-top: 10px;
+          // line-height: 1;
+        }
+      }
+    }
+
+    .sub-item-wrap {
+      display: flex;
+      padding-left: 20px;
+      justify-content: space-between;
+      flex-wrap: wrap;
+    }
+
+    .props {
+      display: inline-block;
+      margin-bottom: 4px;
+      padding: 2px 6px;
+      border-radius: 4px;
+      background: #45454b;
+      font-size: 12px;
+      color: #bec1ca;
+      line-height: 16px;
+      word-wrap: break-word;
+    }
+
+    .annotation {
+      line-height: 12px;
+    }
+
+    .item-attrs {
+      line-height: 1.4;
+      padding: 4px 0;
+      // border-top: 1px solid #4a4a4a;
+      .attrs-item {
+        padding: 0 5px;
+      }
+    }
+
+    &:hover {
+      background: #353841;
+
+      .tool-icon {
+        display: block;
+        color: white;
+
+        &:hover {
+          color: #ed4014;
+        }
+      }
+    }
+
+    &.no-object {
+      // background: #494949 !important;
+      background: #494949;
+    }
+
+    &.invisible {
+      .tool-icon {
+        display: block;
+      }
+    }
+
+    &.active {
+      background: #424d6d;
+    }
+  }
+</style>
diff --git a/frontend/image-tool/src/businessNew/components/Operation/Results/components/Setting.vue b/frontend/image-tool/src/businessNew/components/Operation/Results/components/Setting.vue
new file mode 100644
index 00000000..c80d0cc7
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/components/Operation/Results/components/Setting.vue
@@ -0,0 +1,66 @@
+<template>
+  <a-popover
+    overlayClassName="result-header-show"
+    :title="editor.lang('Setting')"
+    placement="bottomRight"
+    :trigger="['click']"
+  >
+    <i class="icon iconfont icon-more" @click.stop />
+    <template #content>
+      <a-row class="setting-item">
+        <a-col :span="16" class="title">
+          <span class="item-title">{{ editor.lang('Show Size') }}</span>
+        </a-col>
+        <a-col :span="8">
+          <a-switch
+            size="small"
+            v-model:checked="config.showSize"
+            checked-children="On"
+            un-checked-children="Off"
+            @change="onChange"
+          />
+        </a-col>
+      </a-row>
+      <a-row class="setting-item">
+        <a-col :span="16" class="title">
+          <span class="item-title">{{ editor.lang('Show Attr') }}</span>
+        </a-col>
+        <a-col :span="8">
+          <a-switch
+            size="small"
+            v-model:checked="config.showAttrs"
+            checked-children="On"
+            un-checked-children="Off"
+            @change="onChange"
+          />
+        </a-col>
+      </a-row>
+    </template>
+  </a-popover>
+</template>
+
+<script setup lang="ts">
+  import { useInjectBSEditor } from '../../../../context';
+  import { useResultsInject } from '../context';
+
+  const editor = useInjectBSEditor();
+  const { bsState } = editor;
+  const config = editor.state.config;
+  const { onUpdateList } = useResultsInject();
+
+  function onChange() {
+    onUpdateList();
+  }
+</script>
+
+<style lang="less" scoped>
+  .result-header-show {
+    .setting-item {
+      margin: 4px 0;
+    }
+
+    .item-title {
+      font-size: 12px;
+    }
+  }
+</style>
diff --git a/frontend/image-tool/src/businessNew/components/Operation/Results/context.ts b/frontend/image-tool/src/businessNew/components/Operation/Results/context.ts
new file mode 100644
index 00000000..1d75c32a
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/components/Operation/Results/context.ts
@@ -0,0 +1,12 @@
+import { inject, provide } from 'vue';
+import { IContext } from './type';
+
+const context = Symbol('instance-context');
+
+export function useResultsInject() {
+  return inject(context) as IContext;
+}
+
+export function useResultsProvide(value: IContext) {
+  provide(context, value);
+}
diff --git a/frontend/image-tool/src/businessNew/components/Operation/Results/index.vue b/frontend/image-tool/src/businessNew/components/Operation/Results/index.vue
new file mode 100644
index 00000000..4dcd2356
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/components/Operation/Results/index.vue
@@ -0,0 +1,67 @@
+<template>
+  <Collapse>
+    <template #header>
+      <Header title="Instance" />
+    </template>
+    <div class="operation-instance" ref="domRef">
+      <ResultList />
+      <div v-if="resultState.list.length === 0" style="padding: 4px 10px"> No Data </div>
+    </div>
+  </Collapse>
+</template>
+
+<script setup lang="ts">
+  import useResults from './useResults';
+  import { useResultsProvide } from './context';
+
+  import Collapse from '../../Collapse/index.vue';
+  import Header from './Header.vue';
+  import ResultList from './ResultList.vue';
+  import useObjectItem from './useObjectItem';
+  import useClassItem from './useClassItem';
+
+  const { resultState, domRef, onUpdateList } = useResults();
+  const itemHandler = useObjectItem();
+  const classHandler = useClassItem();
+
+  useResultsProvide({
+    resultState,
+    itemHandler,
+    classHandler,
+    onUpdateList,
+  });
+</script>
+
+<style lang="less">
+  .operation-instance {
+    position: relative;
+    padding: 8px 7px 10px;
+    overflow-x: hidden;
+    overflow-y: overlay;
+    height: 100%;
+    text-align: left;
+    .operation-instance-collapse {
+      position: relative;
+      height: 100%;
+      user-select: none;
+    }
+    .extra-tool {
+      display: flex;
+      padding-right: 10px;
+      align-items: center;
+      float: right;
+      height: 100%;
+      height: 36px;
+      pointer-events: visible;
+
+      .tool-icon {
+        margin-left: 7px;
+        font-size: 14px;
+
+        &:hover {
+          color: #57ccef;
+        }
+      }
+    }
+  }
+</style>
diff --git a/frontend/image-tool/src/businessNew/components/Operation/Results/type.ts b/frontend/image-tool/src/businessNew/components/Operation/Results/type.ts
new file mode 100644
index 00000000..3447ebb8
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/components/Operation/Results/type.ts
@@ -0,0 +1,50 @@
+import { IFrame, ToolType } from 'image-editor';
+
+export interface IItem {
+  key: string;
+  id: string;
+  name: string;
+  classType: string;
+  classId: string;
+  toolType: ToolType | ''; // todo
+  visible?: boolean;
+  isModel?: boolean;
+}
+export interface IObjectItem extends IItem {
+  trackId: string;
+  trackName: string;
+  frame?: IFrame;
+  attrLabel?: any;
+  sizeLabel?: string;
+  infoLabel?: string;
+  trueValue?: boolean;
+}
+export interface IClassItem extends IItem {
+  data: IObjectItem[];
+  alias?: string;
+  color: string;
+}
+export interface IState {
+  objectN: number;
+  list: IClassItem[];
+  updateListFlag: boolean;
+  updateSelectFlag: boolean;
+  selectMap: Record<string, true>;
+  activeClass: string[];
+}
+export enum IAction {
+  edit = 'edit',
+  click = 'click',
+  toggleVisible = 'toggleVisible',
+  delete = 'delete',
+}
+
+export interface IHandler {
+  onAction: (action: IAction, ...args: any[]) => void;
+}
+export interface IContext {
+  resultState: IState;
+  onUpdateList: () => void;
+  itemHandler: IHandler;
+  classHandler: IHandler;
+}
diff --git a/frontend/image-tool/src/businessNew/components/Operation/Results/useClassItem.ts b/frontend/image-tool/src/businessNew/components/Operation/Results/useClassItem.ts
new file mode 100644
index 00000000..323d9eac
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/components/Operation/Results/useClassItem.ts
@@ -0,0 +1,73 @@
+import { useInjectEditor } from 'image-ui/context';
+import { IAction, IClassItem, IObjectItem } from './type';
+import { AnnotateObject, Event } from 'image-editor';
+
+export default function useClassItem() {
+  const editor = useInjectEditor();
+
+  function onEdit(item: IClassItem) {
+    const objects = getObjects(item.data);
+    if (objects.length > 0) {
+      editor.selectObject(objects);
+      editor.emit(Event.SHOW_CLASS_INFO, objects);
+    }
+  }
+  function onDelete(item: IClassItem) {
+    const objects = getObjects(item.data);
+    if (objects.length > 0) {
+      editor
+        .showConfirm({
+          title: editor.lang('delete-title'),
+          subTitle: editor.lang('delete-object'),
+          okText: editor.lang('delete'),
+          cancelText: editor.lang('cancel'),
+          okDanger: true,
+        })
+        .then(
+          () => {
+            editor.cmdManager.withGroup(() => {
+              editor.cmdManager.execute('delete-object', objects);
+            });
+            editor.emit(Event.ANNOTATE_HANDLE_DELETE, { objects, type: 2 });
+          },
+          () => {},
+        );
+    }
+  }
+  function onToggleVisible(item: IClassItem) {
+    const objects = getObjects(item.data);
+    if (objects.length > 0) {
+      const visible = !item.visible;
+      editor.dataManager.setAnnotatesVisible(objects, visible);
+    }
+  }
+
+  function getObjects(items: IObjectItem[]) {
+    const frame = editor.getCurrentFrame();
+    return items
+      .filter((e) => frame && e.frame?.id === frame.id)
+      .map((e) => editor.dataManager.getObject(e.id))
+      .filter((e) => e) as AnnotateObject[];
+  }
+  function onAction(action: IAction, item: IClassItem, args: any) {
+    console.log('item action', action);
+    switch (action) {
+      case IAction.edit:
+        onEdit(item);
+        break;
+      case IAction.delete:
+        onDelete(item);
+        break;
+      case IAction.toggleVisible:
+        onToggleVisible(item);
+        break;
+      case IAction.click:
+        // onClick(item);
+        break;
+    }
+  }
+
+  return {
+    onAction,
+  };
+}
diff --git a/frontend/image-tool/src/businessNew/components/Operation/Results/useList.ts b/frontend/image-tool/src/businessNew/components/Operation/Results/useList.ts
new file mode 100644
index 00000000..9047f646
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/components/Operation/Results/useList.ts
@@ -0,0 +1,181 @@
+import { Ref } from 'vue';
+import { IClassItem, IObjectItem, IState } from './type';
+import { useInjectBSEditor } from '../../../context';
+import { debounce } from 'lodash';
+import { IFrame, IUserData } from 'image-editor';
+import { getObjectInfo } from './utils';
+
+export const animation = {
+  onEnter(node: any, done: any) {},
+  onLeave(node: any, done: any) {
+    done();
+  },
+};
+
+export default function useList(state: IState, domRef: Ref<HTMLDivElement>) {
+  const editor = useInjectBSEditor();
+
+  /** list scroll */
+  const scrollSelectToView = debounce(() => {
+    if (!domRef.value) return;
+
+    const item = domRef.value.querySelector('.result-data-list .list > .item.active');
+    if (item) {
+      if (!isSelectVisible(item as any, domRef.value)) {
+        item.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' });
+      }
+    }
+  }, 100);
+  function isSelectVisible(dom: HTMLDivElement, parent: HTMLDivElement) {
+    const parentBox = parent.getBoundingClientRect();
+    const domBox = dom.getBoundingClientRect();
+
+    if (domBox.y + domBox.height > parentBox.y + parentBox.height || domBox.y < parentBox.y)
+      return false;
+    return true;
+  }
+  function getClassInfo(userData: IUserData) {
+    let className = '';
+    let classId = '';
+    let isModel = false;
+    if (!userData.classId && userData.modelClass) {
+      isModel = true;
+      classId = '__Model__##' + userData.modelClass;
+      className = userData.modelClass;
+    } else {
+      classId = userData.classId || '';
+      const classConfig = editor.getClassType(classId);
+      className = classConfig ? classConfig.name : '';
+    }
+    return { className, isModel, classId };
+  }
+  function getClassList() {
+    const classMap: Record<string, IClassItem> = {};
+    const classTypes = editor.state.classTypes;
+    classTypes.forEach((config) => {
+      const classItem: IClassItem = {
+        data: [],
+        alias: config.alias,
+        color: config.color || '#ffffff',
+        id: config.id,
+        name: config.name,
+        classType: config.name,
+        classId: config.id,
+        toolType: config.toolType,
+        key: config.id,
+      };
+      classMap[config.id] = classItem;
+    });
+    return classMap;
+  }
+
+  const update = debounce(() => {
+    if (state.updateListFlag) {
+      state.updateSelectFlag = true;
+      updateList();
+    }
+    if (state.updateSelectFlag) {
+      updateSelect();
+    }
+    scrollSelectToView();
+  }, 100);
+  function onUpdateList() {
+    state.updateListFlag = true;
+    update();
+  }
+  function onSelect() {
+    state.updateSelectFlag = true;
+    update();
+  }
+
+  function updateList() {
+    const isShowAll = false;
+    let frames: IFrame[] = [];
+    if (isShowAll) frames = editor.state.frames;
+    else frames = [editor.getCurrentFrame()];
+    const filter = editor.getRenderFilter();
+    let objN = 0;
+
+    // class items
+    const classMap = getClassList();
+    // object items
+    frames.forEach((f) => {
+      let objs = editor.dataManager.getFrameObject(f.id) || [];
+      objs = objs.filter((e) => filter(e));
+      objs.forEach((obj) => {
+        const userData = editor.getUserData(obj);
+        const trackName = userData.trackName || '';
+        const trackId = userData.trackId || '';
+        const { isModel, classId, className } = getClassInfo(userData);
+        const classConfig = editor.getClassType(classId);
+        const toolType = classConfig ? classConfig.toolType : obj.toolType;
+        let classItem = classMap[classId];
+        if (!classItem) {
+          classItem = {
+            data: [],
+            alias: classConfig?.label,
+            color: 'rgb(252, 177, 122)',
+            id: classId,
+            name: classId ? className : editor.lang('Class Required'),
+            classType: className,
+            classId: classId,
+            toolType,
+            isModel: isModel,
+            visible: false,
+            key: classId,
+          };
+          classMap[classId] = classItem;
+        }
+        const objItem: IObjectItem = {
+          id: obj.uuid,
+          trackId,
+          trackName,
+          name: trackName,
+          classType: classConfig?.name || '',
+          classId,
+          toolType,
+          visible: obj.showVisible,
+          isModel: false,
+          frame: obj.frame,
+          key: obj.uuid + Date.now(),
+        };
+        objItem.attrLabel = classConfig ? editor.getValidAttrs(userData) : '';
+        const infos = getObjectInfo(obj);
+        objItem.sizeLabel = infos.join(' | ');
+        classItem.data.push(objItem);
+        objN++;
+        if (obj.showVisible) classItem.visible = true;
+      });
+    });
+    const list: IClassItem[] = [];
+    Object.values(classMap).forEach((e) => {
+      if (e.data.length === 0) return;
+      if (e.id === '') list.unshift(e);
+      else list.push(e);
+    });
+    state.list = list;
+    state.objectN = objN;
+    console.log('=======>>>>>>>>> result state', state);
+  }
+  function updateSelect() {
+    console.log('updateSelect');
+    const selection = editor.selection;
+    state.selectMap = {};
+    if (selection.length === 0) return;
+    selection.forEach((object) => {
+      state.selectMap[object.uuid] = true;
+      state.updateSelectFlag = false;
+      const userData = editor.getUserData(object);
+      const { classId } = getClassInfo(userData);
+      if (state.activeClass.indexOf(classId) < 0) {
+        state.activeClass = [...state.activeClass, classId];
+      }
+    });
+  }
+
+  return {
+    update,
+    onUpdateList,
+    onSelect,
+  };
+}
diff --git a/frontend/image-tool/src/businessNew/components/Operation/Results/useObjectItem.ts b/frontend/image-tool/src/businessNew/components/Operation/Results/useObjectItem.ts
new file mode 100644
index 00000000..9683d17c
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/components/Operation/Results/useObjectItem.ts
@@ -0,0 +1,76 @@
+import { useInjectEditor } from 'image-ui/context';
+import { IAction, IObjectItem } from './type';
+import { Event } from 'image-editor';
+
+export default function useObjectItem() {
+  const editor = useInjectEditor();
+
+  function onEdit(item: IObjectItem) {
+    const find = editor.dataManager.getObject(item.id);
+    if (find) {
+      editor.selectObject(find);
+      editor.emit(Event.SHOW_CLASS_INFO, find);
+    }
+  }
+  function onDelete(item: IObjectItem) {
+    const find = editor.dataManager.getObject(item.id);
+    if (!find) return;
+    editor
+      .showConfirm({
+        title: editor.lang('delete-title'),
+        subTitle: editor.lang('delete-object'),
+        okText: editor.lang('delete'),
+        cancelText: editor.lang('cancel'),
+        okDanger: true,
+      })
+      .then(
+        () => {
+          find && editor.cmdManager.execute('delete-object', find);
+          editor.emit(Event.ANNOTATE_HANDLE_DELETE, { objects: [find], type: 2 });
+        },
+        () => {},
+      );
+  }
+  function onToggleVisible(item: IObjectItem) {
+    const find = editor.dataManager.getObject(item.id);
+    if (find) {
+      const visible = !find.showVisible;
+      editor.dataManager.setAnnotatesVisible(find, visible);
+    }
+  }
+  function onClick(item: IObjectItem, mult?: boolean) {
+    if (!item.id) return;
+
+    const curFrame = editor.getCurrentFrame();
+    const find = editor.dataManager.getObject(item.id, item.frame || curFrame);
+    if (!find) return;
+    if (mult) {
+      if (find.state?.select) {
+        editor.selectObject(editor.selection.filter((e) => e.uuid !== find.uuid));
+      } else {
+        editor.selectObject([find, ...editor.selection]);
+      }
+    } else {
+      editor.selectObject(find);
+    }
+  }
+  function onAction(action: IAction, item: IObjectItem, args: any) {
+    console.log('item action', action);
+    switch (action) {
+      case IAction.edit:
+        onEdit(item);
+        break;
+      case IAction.delete:
+        onDelete(item);
+        break;
+      case IAction.toggleVisible:
+        onToggleVisible(item);
+        break;
+      case IAction.click:
+        onClick(item, args);
+        break;
+    }
+  }
+
+  return { onAction };
+}
diff --git a/frontend/image-tool/src/businessNew/components/Operation/Results/useResults.ts b/frontend/image-tool/src/businessNew/components/Operation/Results/useResults.ts
new file mode 100644
index 00000000..b2edb605
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/components/Operation/Results/useResults.ts
@@ -0,0 +1,33 @@
+import { reactive, ref } from 'vue';
+import { useInjectBSEditor } from '../../../context';
+import { IState } from './type';
+import vueEvent from 'image-ui/vueEvent';
+import { Event } from 'image-editor';
+import useList from './useList';
+
+export default function useResults() {
+  const editor = useInjectBSEditor();
+
+  const domRef = ref<HTMLDivElement>();
+  const resultState = reactive<IState>({
+    list: [],
+    objectN: 0,
+    updateListFlag: true,
+    updateSelectFlag: true,
+    selectMap: {},
+    activeClass: [],
+  });
+  const { onSelect, onUpdateList, update } = useList(resultState, domRef);
+
+  // *****hook******
+  vueEvent(editor, Event.FRAME_CHANGE, onUpdateList);
+  vueEvent(editor, Event.ANNOTATE_ADD, onUpdateList);
+  // vueEvent(editor, Event.ANNOTATE_LOAD, onUpdateList);
+  vueEvent(editor, Event.ANNOTATE_REMOVE, onUpdateList);
+  // vueEvent(editor, Event.TRACK_OBJECT_CHANGE, onUpdateList);
+  vueEvent(editor, Event.ANNOTATE_CHANGE, onUpdateList);
+  vueEvent(editor, Event.ANNOTATE_VISIBLE, onUpdateList);
+  vueEvent(editor, Event.SELECT, onSelect);
+
+  return { resultState, domRef, onUpdateList };
+}
diff --git a/frontend/image-tool/src/businessNew/components/Operation/Results/utils.ts b/frontend/image-tool/src/businessNew/components/Operation/Results/utils.ts
new file mode 100644
index 00000000..160e4375
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/components/Operation/Results/utils.ts
@@ -0,0 +1,30 @@
+import { AnnotateObject, Rect, Polygon, Line } from 'image-editor';
+
+export function getObjectInfo(object: AnnotateObject) {
+  const infos = [] as string[];
+  if (object instanceof Rect) {
+    const { width, height, rotation = 0 } = object.attrs;
+    infos.push(`width: ${format(width)}`);
+    infos.push(`height: ${format(height)}`);
+    infos.push(`area: ${format(width * height)}`);
+    infos.push(`W/H: ${format(width / height, 2)}`);
+    infos.push(`rotation: ${formatRotation(rotation)}`);
+  } else if (object instanceof Polygon) {
+    const area = object.getArea();
+    infos.push(`area: ${format(area)}`);
+  } else if (object instanceof Line) {
+    const length = object.getLength();
+    infos.push(`length: ${format(length)}`);
+  }
+  return infos;
+}
+
+function format(v: number, precision: number = 0): string {
+  return Math.abs(v).toFixed(precision);
+}
+
+function formatRotation(r: number, precision: number = 1): string {
+  let angle = r % 360;
+  angle = angle < 0 ? 360 + angle : angle;
+  return angle.toFixed(precision);
+}
diff --git a/frontend/image-tool/src/businessNew/components/Operation/SourceTab/index.vue b/frontend/image-tool/src/businessNew/components/Operation/SourceTab/index.vue
new file mode 100644
index 00000000..a709e89c
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/components/Operation/SourceTab/index.vue
@@ -0,0 +1,162 @@
+<template>
+  <Collapse header="Results source">
+    <div class="operation-results">
+      <div class="filter-wrap">
+        <a-select
+          v-model:value="bsState.activeSource"
+          mode="multiple"
+          :fieldNames="replaceFields"
+          :maxTagCount="1"
+          :maxTagTextLength="6"
+          style="width: 100%"
+          :showSearch="false"
+          :options="treeData"
+          @deselect="onDeselect"
+          @select="onSelect"
+        >
+        </a-select>
+      </div>
+    </div>
+  </Collapse>
+</template>
+<script lang="ts" setup>
+  import Collapse from '../../Collapse/index.vue';
+  import { onMounted, onUnmounted, ref } from 'vue';
+  import { useInjectBSEditor } from '../../../context';
+  import { SourceType, Event, __ALL__ as ALL_SOURCE } from 'image-editor';
+
+  const editor = useInjectBSEditor();
+  const { bsState } = editor;
+
+  const treeData = ref<any[]>([]);
+  const replaceFields = {
+    label: 'name',
+    value: 'sourceId',
+    options: 'children',
+  };
+
+  onMounted(() => {
+    editor.on(Event.FRAME_CHANGE, onFrameChange);
+  });
+
+  onUnmounted(() => {
+    editor.off(Event.FRAME_CHANGE, onFrameChange);
+  });
+
+  function onFrameChange() {
+    updateSourceList();
+  }
+  function updateData() {
+    editor.mainView.renderFrame();
+  }
+
+  function onSelect(value: string) {
+    const ALL = ALL_SOURCE;
+    if (value === ALL && bsState.activeSource.length > 1) {
+      bsState.activeSource = [ALL];
+    } else if (value !== ALL && bsState.activeSource.indexOf(ALL) >= 0) {
+      bsState.activeSource = bsState.activeSource.filter((v) => v !== ALL);
+    }
+    updateData();
+  }
+  function onDeselect() {
+    if (bsState.activeSource.length === 0) {
+      bsState.activeSource = [ALL_SOURCE];
+    }
+    updateData();
+  }
+  function updateSourceList() {
+    const frame = editor.getCurrentFrame();
+    const sources = editor.dataManager.getSources(frame);
+    if (!sources) return;
+    const model = sources.filter((e) => e.sourceType == SourceType.MODEL);
+
+    const data: any[] = [
+      {
+        name: 'ALL',
+        sourceId: ALL_SOURCE,
+      },
+      {
+        name: 'Ground Truth',
+        sourceId: editor.state.defaultSourceId,
+      },
+    ];
+    if (model.length > 0) {
+      data.push({
+        name: 'Model Runs',
+        sourceId: 'MODEL_RUNS',
+        children: model,
+      });
+    }
+    console.log('data', data);
+    treeData.value = data;
+  }
+</script>
+<style lang="less">
+  .operation-results {
+    // height: 40px;
+    background: #1e1f23;
+
+    padding: 4px 8px;
+    // padding-left: 12px;
+    margin-bottom: 6px;
+
+    .ant-select-selection-overflow-item-suffix {
+      display: none;
+    }
+
+    .filter-wrap {
+      display: flex;
+      align-items: center;
+      .title {
+        // color: rgba(177, 177, 177, 0.85);
+        margin-right: 6px;
+      }
+
+      .ant-select-multiple .ant-select-selection-item {
+        max-width: 70px;
+      }
+    }
+
+    .result-source-wrap {
+      // min-height: 100px;
+      background: #1e1f23;
+      padding: 10px 0px;
+
+      .source-item {
+        display: inline-block;
+        font-size: 14px;
+        line-height: 16px;
+        border: 1px solid rgba(222, 229, 235, 1);
+        padding: 4px 6px;
+        border-radius: 4px;
+        margin-right: 4px;
+        margin-top: 4px;
+        cursor: pointer;
+        user-select: none;
+
+        .iconfont {
+          vertical-align: middle;
+          font-size: 12px;
+          margin-right: 4px;
+        }
+        .remove {
+          font-size: 12px;
+          vertical-align: middle;
+        }
+
+        .name {
+          display: inline-block;
+          max-width: 85px;
+          vertical-align: middle;
+        }
+
+        &.active {
+          background: red;
+          color: white;
+          border-color: transparent;
+        }
+      }
+    }
+  }
+</style>
diff --git a/frontend/image-tool/src/businessNew/components/Operation/index.vue b/frontend/image-tool/src/businessNew/components/Operation/index.vue
new file mode 100644
index 00000000..69ba85a0
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/components/Operation/index.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="pc-editor-operation">
+    <SourceTab />
+    <Classification />
+    <Results />
+    <div v-show="!canOperate()" class="over-not-allowed"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import useUI from '../../hook/useUI';
+  import SourceTab from './SourceTab/index.vue';
+  import Classification from './Classification/index.vue';
+  import Results from './Results/index.vue';
+
+  const { canOperate } = useUI();
+</script>
+
+<style lang="less">
+  .pc-editor-operation {
+    position: relative;
+    color: white;
+    height: 100%;
+    overflow-y: overlay;
+    &::-webkit-scrollbar {
+      width: 0;
+    }
+  }
+</style>
diff --git a/frontend/image-tool/src/businessNew/configs/action.ts b/frontend/image-tool/src/businessNew/configs/action.ts
new file mode 100644
index 00000000..7b62532c
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/configs/action.ts
@@ -0,0 +1,38 @@
+import * as BsActions from '../actions';
+import { IActionName, AllActions as baseActions } from 'image-editor';
+
+export type IBsActionName = keyof typeof BsActions | IActionName;
+export const allActions = [...baseActions, ...Object.keys(BsActions)] as IBsActionName[];
+
+export const defaultActions: IBsActionName[] = [
+  'dataFrameNext',
+  'dataFrameLast',
+  'toggleClassView',
+  'toggleClassTitle',
+  // 'toggleShowPolygonArrow',
+  'toggleHelpLine',
+  'selectTool',
+  'changeTool',
+  'toNextFrame',
+  'previousFrame',
+];
+
+export const baseEditActions: IBsActionName[] = [
+  ...defaultActions,
+  'redo',
+  'undo',
+  'cutSelectionOther',
+  'cutSelectionFirst',
+  'deleteSelection',
+  'adjustObject',
+  'drawTool',
+  'holeSelection',
+  'removeHoleSelection',
+  'stopCurrentDraw',
+  // 'copyToNext',
+  // 'copyToLast',
+  // 'toggleSizeInfo',
+  'lineToolDrawMode',
+];
+
+export const baseViewActions: IBsActionName[] = [...defaultActions];
diff --git a/frontend/image-tool/src/businessNew/configs/event.ts b/frontend/image-tool/src/businessNew/configs/event.ts
new file mode 100644
index 00000000..274d4472
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/configs/event.ts
@@ -0,0 +1,10 @@
+const Event = {
+  BUSINESS_INIT: 'bussiness_init',
+  FLOW_ACTION: 'flow_action',
+  SCENE_CHANGE: 'scene_change',
+  SCENE_LOADED: 'scene_loaded',
+
+  ERROR_CONSOLE: 'error_console',
+};
+
+export default Event;
diff --git a/frontend/image-tool/src/businessNew/configs/hotkey.ts b/frontend/image-tool/src/businessNew/configs/hotkey.ts
new file mode 100644
index 00000000..b4fe22ff
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/configs/hotkey.ts
@@ -0,0 +1,12 @@
+import { IHotkeyConfig, userAgent } from 'image-editor';
+import { IBsActionName } from './action';
+
+const isMac = userAgent.isMac;
+const Ctrl = isMac ? '⌘' : 'ctrl';
+const hotkeyConfig: IHotkeyConfig<IBsActionName>[] = [
+  { key: `${Ctrl}+s`, action: 'flowSave' },
+  { key: 'PageUp', action: 'dataFrameLast' },
+  { key: 'PageDown', action: 'dataFrameNext' },
+];
+
+export default hotkeyConfig;
diff --git a/frontend/image-tool/src/businessNew/configs/mode.ts b/frontend/image-tool/src/businessNew/configs/mode.ts
new file mode 100644
index 00000000..797f109d
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/configs/mode.ts
@@ -0,0 +1,51 @@
+import { IModeConfig, OPType } from 'image-editor';
+import { IBsUIType, BsUIType, baseEditUI, baseViewUI, allUI } from './ui';
+import { IBsActionName, baseEditActions, baseViewActions, allActions } from './action';
+
+function toMap<T extends string>(arr: T[]) {
+  const map = {} as Record<T, boolean>;
+  arr.forEach((e) => (map[e] = true));
+  return map;
+}
+
+/**
+ * all
+ */
+// all
+const all: IModeConfig<IBsUIType, IBsActionName> = {
+  name: 'all',
+  op: OPType.EDIT,
+  ui: toMap(allUI), // executeUI
+  actions: toMap<IBsActionName>(allActions), //
+};
+
+/**
+ * data flow
+ */
+// execute
+const execute: IModeConfig<IBsUIType, IBsActionName> = {
+  name: 'execute',
+  op: OPType.EDIT,
+  ui: toMap([...baseEditUI, BsUIType.flowSave, BsUIType.markValid, BsUIType.skip, BsUIType.submit]),
+  actions: toMap<IBsActionName>([...baseEditActions, 'flowSave']), //
+};
+
+// view
+const view: IModeConfig<IBsUIType, IBsActionName> = {
+  name: 'view',
+  op: OPType.VIEW,
+  ui: toMap([...baseViewUI, BsUIType.modify]),
+  actions: toMap<IBsActionName>(baseViewActions),
+};
+
+const pageModes = {
+  all,
+  execute,
+  view,
+};
+
+export type BsModeType = keyof typeof pageModes;
+
+(window as any).pageModes = pageModes;
+
+export default pageModes;
diff --git a/frontend/image-tool/src/businessNew/configs/ui.ts b/frontend/image-tool/src/businessNew/configs/ui.ts
new file mode 100644
index 00000000..e3b8ac5d
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/configs/ui.ts
@@ -0,0 +1,70 @@
+import { UIType } from 'image-editor';
+import { ButtonProps } from 'ant-design-vue';
+
+export interface IConfirmBtn extends ButtonProps {
+  action: string;
+  content: string;
+  class?: string;
+}
+export interface IConfirmProps {
+  content?: string;
+  subContent?: string;
+  buttons: IConfirmBtn[];
+}
+
+export const BsUIType = {
+  ...UIType,
+  flowSave: 'flowSave',
+  markValid: 'markValid',
+  skip: 'skip',
+  submit: 'submit',
+  modify: 'modify',
+};
+
+export type IBsUIType = keyof typeof BsUIType;
+export const allUI = Object.keys(BsUIType) as IBsUIType[];
+
+export const baseViewUI = [BsUIType.setting, BsUIType.info] as IBsUIType[];
+
+export const baseEditUI = [
+  ...baseViewUI,
+  BsUIType.edit,
+  BsUIType.tool_rect,
+  BsUIType.tool_polygon,
+  BsUIType.tool_line,
+  BsUIType.tool_keyPoint,
+  BsUIType.model,
+] as IBsUIType[];
+
+export const ButtonCancel: IConfirmBtn = {
+  type: 'primary',
+  action: 'cancel',
+  content: 'Cancel',
+  class: 'ghost-white',
+  ghost: true,
+};
+
+export const ButtonDiscard: IConfirmBtn = {
+  type: 'primary',
+  action: 'discard',
+  content: 'Discard',
+  class: 'ghost-red',
+  ghost: true,
+};
+
+export const ButtonSave: IConfirmBtn = {
+  type: 'primary',
+  action: 'save',
+  content: 'Save',
+};
+
+export const ButtonOk: IConfirmBtn = {
+  type: 'primary',
+  action: 'ok',
+  content: 'Ok',
+};
+export const ButtonRefresh: IConfirmBtn = {
+  type: 'primary',
+  action: 'refresh',
+  content: 'Refresh',
+};
diff --git a/frontend/image-tool/src/businessNew/context.ts b/frontend/image-tool/src/businessNew/context.ts
new file mode 100644
index 00000000..113993ae
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/context.ts
@@ -0,0 +1,23 @@
+import { provide, inject, reactive } from 'vue';
+import Editor from './common/Editor';
+import { context } from 'image-ui/context';
+import { initRegistry } from './registry';
+
+export function useProvideBSEditor() {
+  const editor = new Editor();
+  // @ts-ignore
+  window.editor = editor;
+  // @ts-ignore
+  editor.state = reactive(editor.state);
+  editor.bsState = reactive(editor.bsState);
+
+  initRegistry(editor);
+
+  provide(context, editor);
+
+  return editor;
+}
+
+export function useInjectBSEditor(): Editor {
+  return inject(context) as Editor;
+}
diff --git a/frontend/image-tool/src/businessNew/hook/useCommon.ts b/frontend/image-tool/src/businessNew/hook/useCommon.ts
new file mode 100644
index 00000000..93deb3a2
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/hook/useCommon.ts
@@ -0,0 +1,45 @@
+import { OPType } from 'image-editor';
+import { useInjectBSEditor } from '../context';
+import { ButtonCancel, ButtonDiscard, ButtonSave } from '../configs/ui';
+import pageModes from '../configs/mode';
+import * as api from '../api';
+import { closeTab } from '../utils';
+
+export default function useCommon() {
+  const editor = useInjectBSEditor();
+  const { state } = editor;
+
+  async function onClose() {
+    if (state.modeConfig.op == OPType.VIEW) {
+      state.frames.forEach((frame) => {
+        frame.needSave = false;
+      });
+      closeTab();
+      return;
+    }
+    let action = '';
+    if (editor.needSave()) {
+      action = await editor.showModal('confirm', {
+        title: editor.lang('Save Changes'),
+        data: {
+          subContent: editor.lang('Do you want to save changes?'),
+          buttons: [ButtonCancel, ButtonDiscard, ButtonSave],
+        },
+      });
+    }
+    if (action === ButtonSave.action) {
+      await editor.save();
+    } else if (action === ButtonDiscard.action) {
+      editor.frameChangeToggle(false);
+    } else if (action === ButtonCancel.action) {
+      return;
+    }
+
+    if (editor.state.modeConfig.name === pageModes.execute.name) {
+      await api.unlockRecord(editor.bsState.recordId);
+    }
+    closeTab();
+  }
+
+  return { onClose };
+}
diff --git a/frontend/image-tool/src/businessNew/hook/useDataflow.ts b/frontend/image-tool/src/businessNew/hook/useDataflow.ts
new file mode 100644
index 00000000..9e052cf0
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/hook/useDataflow.ts
@@ -0,0 +1,58 @@
+import { useInjectBSEditor } from '../context';
+import * as api from '../api';
+import { BSError, Event } from 'image-editor';
+
+export default function useDataFlow() {
+  const editor = useInjectBSEditor();
+  const { bsState, state } = editor;
+
+  async function loadRecord() {
+    try {
+      const { recordId } = bsState;
+      const { dataInfos, isSeriesFrame, seriesFrames } = await api.getInfoByRecordId(recordId);
+
+      state.isSeriesFrame = isSeriesFrame;
+      state.sceneIds = seriesFrames || [];
+      bsState.datasetId = dataInfos[0].datasetId + '';
+
+      editor.dataManager.setSceneDataByFrames(dataInfos);
+    } catch (error) {
+      throw error instanceof BSError
+        ? error
+        : new BSError('', editor.lang('load-record-error'), error);
+    }
+  }
+  async function loadClasses() {
+    try {
+      const config = await api.getDataflowClass(bsState.datasetId);
+      editor.setClassTypes(config);
+    } catch (error) {
+      throw error instanceof BSError
+        ? error
+        : new BSError('', editor.lang('load-class-error'), error);
+    }
+  }
+  async function loadDateSetClassification() {
+    try {
+      const classifications = await api.getDataflowClassification(bsState.datasetId);
+      bsState.classifications = classifications;
+    } catch (error) {
+      throw error instanceof BSError
+        ? error
+        : new BSError('', editor.lang('load-dataset-classification-error'), error);
+    }
+  }
+  async function loadModels() {
+    try {
+      const models = await api.getModelList();
+      state.models = models;
+      editor.emit(Event.MODEL_LOADED);
+    } catch (error) {
+      throw error instanceof BSError
+        ? error
+        : new BSError('', editor.lang('load-model-error'), error);
+    }
+  }
+
+  return { loadModels, loadClasses, loadRecord, loadDateSetClassification };
+}
diff --git a/frontend/image-tool/src/businessNew/hook/useFlow.ts b/frontend/image-tool/src/businessNew/hook/useFlow.ts
new file mode 100644
index 00000000..1df97c6e
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/hook/useFlow.ts
@@ -0,0 +1,91 @@
+import * as pageHandler from '../pages';
+import { useInjectBSEditor } from '../context';
+import Event from '../configs/event';
+import useQuery from './useQuery';
+import useToken from './useToken';
+import { MsgType, StatusType } from 'image-editor';
+import { setToken } from '../api/base';
+import { enableEscOnFullScreen } from '../utils';
+import { computed, watch } from 'vue';
+
+export type IHandlerType = keyof typeof pageHandler;
+
+export default function UseFlow() {
+  const editor = useInjectBSEditor();
+  const { bsState, state } = editor;
+  const { query, iniQuery } = useQuery();
+  const token = useToken();
+
+  iniQuery();
+  const mode = getMode(query);
+  if (!mode || !pageHandler[mode]) {
+    editor.showMsg(MsgType.error, 'invalid-query');
+    return;
+  }
+  const handler = pageHandler[mode]();
+
+  // console.log('UseFlow ===> query', query);
+  // console.log('UseFlow ===> bsState', bsState.query);
+  // console.log('UseFlow ===> token', token);
+  // console.log('UseFlow ===> mode', mode);
+
+  function handleUnload() {
+    window.addEventListener('beforeunload', (event: Event) => {
+      console.log('beforeunload');
+      if (editor.needSave()) {
+        event.preventDefault();
+        // @ts-ignore
+        event.returnValue = editor.t('msg-not-save');
+      }
+    });
+  }
+  function initFlowEvent() {
+    editor.on(Event.FLOW_ACTION, async (action, data) => {
+      if (bsState.blocking) return;
+      console.log('action', action);
+      handler.onAction(action, data);
+    });
+  }
+  async function init() {
+    if (!token) {
+      editor.showMsg(MsgType.error, 'Not logged in');
+      return;
+    }
+    setToken(token);
+    initFlowEvent();
+    handleUnload();
+    enableEscOnFullScreen();
+    await handler.init();
+    editor.emit(Event.BUSINESS_INIT);
+  }
+  const blocking = computed(() => {
+    return (
+      bsState.doing.saving ||
+      bsState.doing.submitting ||
+      bsState.doing.marking ||
+      bsState.doing.skip ||
+      state.editorMuted ||
+      state.status !== StatusType.Default
+    );
+  });
+
+  watch(
+    () => blocking.value,
+    () => {
+      bsState.blocking = blocking.value;
+    },
+    {
+      immediate: true,
+    },
+  );
+
+  return { init };
+}
+
+function getMode(query: Record<string, any>): IHandlerType {
+  let mode = 'execute' as IHandlerType;
+  if (query.type === 'readOnly') {
+    mode = 'view';
+  }
+  return mode;
+}
diff --git a/frontend/image-tool/src/businessNew/hook/useQuery.ts b/frontend/image-tool/src/businessNew/hook/useQuery.ts
new file mode 100644
index 00000000..38976b3c
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/hook/useQuery.ts
@@ -0,0 +1,33 @@
+import qs from 'qs';
+import { useInjectBSEditor } from '../context';
+import { parseUrlIds } from '../utils';
+
+export default function useQuery() {
+  const queryStr = location.href.split('?').reverse();
+  const query = qs.parse(queryStr[0] || '');
+
+  const editor = useInjectBSEditor();
+  const { bsState } = editor;
+  function iniQuery() {
+    Object.assign(bsState.query, query || {});
+
+    bsState.recordId = (query.recordId as string) || '';
+    bsState.datasetId = (query.datasetId as string) || '';
+    if (bsState.query.itemIds) {
+      bsState.query.itemIds = parseUrlIds(bsState.query.itemIds || '');
+    }
+    if (bsState.query.classIds) {
+      bsState.query.classIds = parseUrlIds(bsState.query.classIds || '');
+    }
+    if (bsState.query.classificationIds) {
+      bsState.query.classificationIds = parseUrlIds(bsState.query.classificationIds || '');
+    }
+    if (bsState.query.dataIds) {
+      bsState.query.dataIds = parseUrlIds(bsState.query.dataIds || '');
+    }
+    if (bsState.query.dataType) {
+      bsState.query.dataType = bsState.query.dataType.toUpperCase();
+    }
+  }
+  return { query, iniQuery };
+}
diff --git a/frontend/image-tool/src/businessNew/hook/useToken.ts b/frontend/image-tool/src/businessNew/hook/useToken.ts
new file mode 100644
index 00000000..bcf163e7
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/hook/useToken.ts
@@ -0,0 +1,13 @@
+import Cookies from 'js-cookie';
+
+window.Cookies = Cookies;
+
+let hostname = document.location.hostname || document.location.host;
+// let dot = hostname.indexOf('.');
+// let parentHost = isIp(hostname) ? hostname : hostname.substring(dot + 1);
+
+export default function useToken() {
+  let token = Cookies.get(`${hostname} token`);
+  token = token ? `Bearer ${token}` : '';
+  return token;
+}
diff --git a/frontend/image-tool/src/businessNew/hook/useUI.ts b/frontend/image-tool/src/businessNew/hook/useUI.ts
new file mode 100644
index 00000000..2fa6e0b4
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/hook/useUI.ts
@@ -0,0 +1,28 @@
+import { useInjectBSEditor } from '../context';
+import { IBsUIType } from '../configs/ui';
+import { OPType, StatusType } from 'image-editor';
+
+export default function useUI() {
+  const editor = useInjectBSEditor();
+  const state = editor.state;
+  function has(name: IBsUIType | string) {
+    return state.modeConfig.ui[name];
+  }
+  function canEdit() {
+    return state.modeConfig.op === OPType.EDIT;
+  }
+  function canAnnotate() {
+    return true;
+  }
+
+  function canOperate() {
+    return state.status === StatusType.Default;
+  }
+
+  return {
+    has,
+    canEdit,
+    canAnnotate,
+    canOperate,
+  };
+}
diff --git a/frontend/image-tool/src/businessNew/pages/execute.ts b/frontend/image-tool/src/businessNew/pages/execute.ts
new file mode 100644
index 00000000..b510d541
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/pages/execute.ts
@@ -0,0 +1,49 @@
+import { FlowAction, IPageHandler } from '../types';
+import { useInjectBSEditor } from '../context';
+import pageModes from '../configs/mode';
+import { MsgType } from 'image-editor';
+import useDataFlow from '../hook/useDataflow';
+import useCommon from '../hook/useCommon';
+
+export function execute(): IPageHandler {
+  const editor = useInjectBSEditor();
+  const { bsState } = editor;
+
+  const { loadRecord, loadClasses, loadDateSetClassification, loadModels } = useDataFlow();
+  const { onClose } = useCommon();
+
+  async function init() {
+    if (!bsState.query.recordId) {
+      editor.showMsg(MsgType.error, 'Invalid Query');
+      return;
+    }
+    editor.setMode(pageModes.execute);
+    editor.showLoading(true);
+    try {
+      await loadRecord();
+      await Promise.all([loadClasses(), loadDateSetClassification(), loadModels()]);
+      await editor.loadManager.loadSceneData(0);
+    } catch (error: any) {
+      editor.handleErr(error, 'Load Error');
+    }
+    editor.showLoading(false);
+
+    if (bsState.query.type === 'modelRun') {
+      editor.dataManager.pollDataModelResult();
+    }
+  }
+
+  function onAction(action: FlowAction) {
+    console.log(action);
+    switch (action) {
+      case FlowAction.save:
+        editor.save();
+        break;
+      case FlowAction.close:
+        onClose();
+        break;
+    }
+  }
+
+  return { init, onAction };
+}
diff --git a/frontend/image-tool/src/businessNew/pages/index.ts b/frontend/image-tool/src/businessNew/pages/index.ts
new file mode 100644
index 00000000..3b77ad10
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/pages/index.ts
@@ -0,0 +1,2 @@
+export * from './execute';
+export * from './view';
diff --git a/frontend/image-tool/src/businessNew/pages/view.ts b/frontend/image-tool/src/businessNew/pages/view.ts
new file mode 100644
index 00000000..38c9a501
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/pages/view.ts
@@ -0,0 +1,61 @@
+import { IPageHandler } from '../types';
+import { useInjectBSEditor } from '../context';
+import useDataFlow from '../hook/useDataflow';
+import pageModes from '../configs/mode';
+import { IFrame, MsgType } from 'image-editor';
+
+export function view(): IPageHandler {
+  const editor = useInjectBSEditor();
+  const { state, bsState } = editor;
+  const { loadClasses, loadDateSetClassification } = useDataFlow();
+
+  async function init() {
+    let { query } = bsState;
+    if (!query.datasetId || !query.dataId) {
+      editor.showMsg(MsgType.error, 'Invalid Query');
+      return;
+    }
+    editor.setMode(pageModes.view);
+
+    editor.showLoading(true);
+    try {
+      await Promise.all([loadClasses(), loadDateSetClassification(), loadDataInfo()]);
+      await editor.loadManager.loadSceneData(0);
+    } catch (error: any) {
+      editor.handleErr(error, 'Load Error');
+    }
+    editor.showLoading(false);
+  }
+
+  async function loadDataInfo() {
+    let { query } = bsState;
+
+    let dataId = query.dataId;
+    if (query.dataType === 'frame') {
+      state.isSeriesFrame = true;
+      // await loadDataFromFrameSeries(dataId);
+    } else {
+      createSingleData();
+    }
+  }
+
+  function createSingleData() {
+    let { query } = bsState;
+
+    let dataId = query.dataId;
+    let data: IFrame = {
+      id: dataId,
+      datasetId: query.datasetId,
+      teamId: '',
+      pointsUrl: '',
+      queryTime: '',
+      loadState: '',
+      needSave: false,
+      classifications: [],
+    };
+    editor.dataManager.setSceneDataByFrames([data]);
+  }
+  function onAction() {}
+
+  return { init, onAction };
+}
diff --git a/frontend/image-tool/src/businessNew/registry.ts b/frontend/image-tool/src/businessNew/registry.ts
new file mode 100644
index 00000000..9d8f1d05
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/registry.ts
@@ -0,0 +1,10 @@
+import Editor from './common/Editor';
+import hotkeyConfig from './configs/hotkey';
+import * as Actions from './actions';
+
+export function initRegistry(editor: Editor) {
+  editor.hotkeyManager.registryHotkey(hotkeyConfig);
+  Object.keys(Actions).forEach((name) => {
+    editor.actionManager.registryAction(name, (Actions as any)[name]);
+  });
+}
diff --git a/frontend/image-tool/src/businessNew/state.ts b/frontend/image-tool/src/businessNew/state.ts
new file mode 100644
index 00000000..64044976
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/state.ts
@@ -0,0 +1,17 @@
+import { __ALL__ } from 'image-editor';
+import { IBSState } from './types';
+
+export function getDefault(): IBSState {
+  return {
+    blocking: false,
+    user: {} as any,
+    team: {} as any,
+    query: {},
+    recordId: '',
+    doing: { saving: false, marking: false, skip: false, submitting: false, modify: false },
+    datasetId: '',
+    classifications: [],
+    activeSource: [__ALL__],
+    filterClasses: [__ALL__],
+  };
+}
diff --git a/frontend/image-tool/src/businessNew/types/class.ts b/frontend/image-tool/src/businessNew/types/class.ts
new file mode 100644
index 00000000..7973dfe8
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/types/class.ts
@@ -0,0 +1,34 @@
+import { AttrType } from 'image-editor';
+
+export interface IClassificationAttr {
+  classificationId: string;
+  parent: string;
+  parentAttr: string;
+  parentValue: any;
+  parentLabel?: any;
+  id: string;
+  type: AttrType;
+  name: string;
+  label?: string;
+  alias?: string;
+  required: boolean;
+  attributeVersion?: number;
+  options: {
+    value: any;
+    name: string;
+    alias?: string;
+    [k: string]: any;
+  }[];
+  value: any;
+  isLeaf?: boolean;
+  [k: string]: any;
+}
+export interface IClassification {
+  id: string;
+  uuid: string;
+  name: string;
+  label?: string;
+  alias?: string;
+  attrs: IClassificationAttr[];
+  [k: string]: any;
+}
diff --git a/frontend/image-tool/src/businessNew/types/common.ts b/frontend/image-tool/src/businessNew/types/common.ts
new file mode 100644
index 00000000..c77cb557
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/types/common.ts
@@ -0,0 +1,65 @@
+import { SourceType, ToolType, Vector2 } from 'image-editor';
+
+export interface IDoing {
+  // flow
+  saving: boolean;
+  marking: boolean;
+  skip: boolean;
+  submitting: boolean;
+  modify: boolean;
+}
+export interface IObjectBasicInfo {
+  classAttributes: IObject;
+  classId: number;
+  frontId: string;
+  id: string | number;
+  sourceId: number;
+  sourceType?: SourceType;
+}
+export interface IObjectInfo extends IObjectBasicInfo {
+  dataId: number;
+  datasetId: number;
+  lockedBy: any;
+  objectCount: number;
+}
+export interface IObject {
+  backId: string | number;
+  classId: string;
+  classValues: any;
+  contour: IContour; // { points: [], ... }
+  id: string;
+  meta: any; // other
+  sourceId: string;
+  sourceType?: SourceType;
+  trackId?: string;
+  trackName?: string;
+  type: ToolType;
+
+  modelConfidence?: number;
+  modelClass?: string;
+  version?: number;
+  createdAt?: string;
+  createdBy?: string | number;
+}
+export interface IDataAnnotations {
+  classificationId: string;
+  classificationAttributes: Record<string, any>;
+}
+export interface ISaveFormat {
+  dataAnnotations: IDataAnnotations[];
+  dataId: string | number;
+  objects: IObjectBasicInfo[];
+  [key: string]: any;
+}
+export interface ISaveResp {
+  dataId: string | number;
+  frontId: string;
+  id: string | number;
+}
+
+export interface IContour {
+  points?: Vector2[];
+  interior?: { points: Vector2[] }[]; // only polygon
+  rotation?: number; // only rect;
+  area?: number; // closed figure: rect, polygon
+}
diff --git a/frontend/image-tool/src/businessNew/types/enum.ts b/frontend/image-tool/src/businessNew/types/enum.ts
new file mode 100644
index 00000000..c7f3052a
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/types/enum.ts
@@ -0,0 +1,21 @@
+export enum FlowAction {
+  close = 'close',
+  switch = 'switchSeriesFrame',
+  help = 'help',
+  save = 'save',
+  markvaild = 'markvaild',
+  markinvaild = 'markinvaild',
+  skip = 'skip',
+  submit = 'submit',
+  modify = 'modify',
+}
+
+export enum ValidStatus {
+  vaild = 'VALID',
+  invaild = 'INVALID',
+}
+export enum AnnotateStatus {
+  annotated = 'ANNOTATED',
+  unannotated = 'NOT_ANNOTATED',
+  invalid = 'INVALID',
+}
diff --git a/frontend/image-tool/src/businessNew/types/index.ts b/frontend/image-tool/src/businessNew/types/index.ts
new file mode 100644
index 00000000..f6366f5d
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/types/index.ts
@@ -0,0 +1,6 @@
+export * from './class';
+export * from './common';
+export * from './enum';
+export * from './page';
+export * from './state';
+export * from './user';
diff --git a/frontend/image-tool/src/businessNew/types/page.ts b/frontend/image-tool/src/businessNew/types/page.ts
new file mode 100644
index 00000000..52a956d0
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/types/page.ts
@@ -0,0 +1,6 @@
+import { FlowAction } from './enum';
+
+export interface IPageHandler {
+  init: () => void;
+  onAction: (e: FlowAction, data?: any) => void;
+}
diff --git a/frontend/image-tool/src/businessNew/types/state.ts b/frontend/image-tool/src/businessNew/types/state.ts
new file mode 100644
index 00000000..463820fc
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/types/state.ts
@@ -0,0 +1,22 @@
+import { IClassification } from './class';
+import { IDoing } from './common';
+import { ITeam, IUser } from './user';
+
+export interface IBSState {
+  user: IUser;
+  team: ITeam;
+  // config: IGlobalConfig;
+
+  doing: IDoing;
+  blocking: boolean;
+
+  query: Record<string, any>;
+
+  recordId: string;
+  datasetId: string;
+  classifications: IClassification[];
+
+  // fitler
+  activeSource: string[];
+  filterClasses: string[];
+}
diff --git a/frontend/image-tool/src/businessNew/types/user.ts b/frontend/image-tool/src/businessNew/types/user.ts
new file mode 100644
index 00000000..770c4a75
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/types/user.ts
@@ -0,0 +1,19 @@
+export interface IUser {
+  id: string;
+  nickname: string;
+  email?: string;
+  status?: string;
+  username?: string;
+  avatarUrl?: string;
+}
+export interface ITeam {
+  id: string;
+  name: string;
+  inviteCode: string;
+  isDefaultTeam: boolean;
+  isDeleted: boolean;
+  planId: number;
+  planType: string;
+  status: string;
+  expireAt: string;
+}
diff --git a/frontend/image-tool/src/businessNew/utils/class.ts b/frontend/image-tool/src/businessNew/utils/class.ts
new file mode 100644
index 00000000..56a87f8c
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/utils/class.ts
@@ -0,0 +1,126 @@
+import { AttrType, IClassType } from 'image-editor';
+import { IClassification, IClassificationAttr } from '../types';
+import { cloneDeep } from 'lodash';
+
+export function isAttrTypeMulti(type: string) {
+  switch (type) {
+    case AttrType.RANK:
+    case AttrType.MULTI_SELECTION:
+      return true;
+    case AttrType.DROPDOWN:
+    case AttrType.RADIO:
+    case AttrType.TEXT:
+    default:
+      return false;
+  }
+}
+export function parseClassesFromBackend(data: any[]) {
+  const classTypes = [] as IClassType[];
+
+  data.forEach((config: any) => {
+    const classType: IClassType = {
+      id: config.id + '',
+      name: config.name || '',
+      label: config.alias || '',
+      color: config.color || '#ff0000',
+      classVersion: config.version || 1,
+      // attrs: [],
+      attrs: config.attributes || [],
+      toolType: config.toolType,
+      toolTypeOptions: config.toolTypeOptions || {},
+    };
+
+    classTypes.push(classType);
+  });
+
+  return classTypes;
+}
+
+export function traverseClassification2Arr(data: any[]) {
+  let classifications = [] as IClassification[];
+
+  data.forEach((e: any) => {
+    let classificationId = e.id + '';
+    let classification: IClassification = {
+      id: classificationId,
+      uuid: '',
+      name: e.name,
+      alias: e.alias,
+      attrs: [],
+    };
+    const options = e.attribute?.options || [];
+    let classificationAttr: IClassificationAttr = {
+      id: e.attribute.id,
+      classificationId,
+      parent: '',
+      parentValue: '',
+      parentAttr: e.name,
+      type: e.inputType,
+      name: e.name,
+      alias: e.alias,
+      value: isAttrTypeMulti(e.inputType) ? [] : '',
+      required: e.isRequired,
+      options: options.map((e: any) => {
+        return { value: e.name, ...e };
+      }),
+    };
+
+    classification.attrs.push(classificationAttr);
+    options.forEach((option: any) => {
+      traverseOption(classification, option, classificationAttr.id, e.name);
+    });
+    classifications.push(classification);
+  });
+
+  return classifications;
+
+  function traverseOption(
+    classification: IClassification,
+    option: any,
+    parent: string,
+    parentAttr: string,
+  ) {
+    if (!option.attributes || option.attributes.length === 0) return;
+
+    option.attributes.forEach((attr: any) => {
+      let name = attr.name;
+      let classificationAttr: IClassificationAttr = {
+        id: attr.id,
+        key: `${parent}[${option.name}]-${name}`,
+        classificationId: classification.id,
+        parent,
+        parentAttr,
+        parentValue: option.name,
+        type: attr.type,
+        name,
+        alias: attr.alias,
+        value: isAttrTypeMulti(attr.type) ? [] : '',
+        required: attr.required,
+        options: attr.options.map((e: any) => {
+          return { value: e.name, ...e };
+        }),
+      };
+      classification.attrs.push(classificationAttr);
+      (attr.options || []).forEach((option: any) => {
+        traverseOption(classification, option, classificationAttr.id, name);
+      });
+    });
+  }
+}
+
+export function classificationAssign(baseArr: IClassification[], values: any[]) {
+  const returnArr = cloneDeep(baseArr);
+  const valuesMap: Record<string, any> = {};
+  values.forEach((e: any) => {
+    const attrsValues = e.classificationAttributes.values;
+    attrsValues.forEach((attr: any) => {
+      valuesMap[attr.id] = attr.value;
+    });
+  });
+  returnArr.forEach((e) => {
+    e.attrs?.forEach((e) => {
+      if (valuesMap[e.id]) e.value = valuesMap[e.id];
+    });
+  });
+  return returnArr;
+}
diff --git a/frontend/image-tool/src/businessNew/utils/common.ts b/frontend/image-tool/src/businessNew/utils/common.ts
new file mode 100644
index 00000000..af78b618
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/utils/common.ts
@@ -0,0 +1,53 @@
+import { Vector2 } from 'image-editor';
+import { isNaN } from 'lodash';
+
+export function empty(value: any) {
+  return value == undefined || value == null || value === '';
+}
+export function validNumber(val: any) {
+  return !empty(val) && typeof val === 'number' && !isNaN(val) && isFinite(val);
+}
+export function fixed(num: number, len: number = 4) {
+  return Number(num.toFixed(len));
+}
+export function checkPoints(points?: Vector2[]) {
+  if (!Array.isArray(points)) return [];
+  const keys: String[] = [];
+  const pointKey = (p: Vector2) => fixed(p.x) + '##' + fixed(p.y);
+  return points.filter((point) => {
+    if (point && validNumber(point.x) && validNumber(point.y) && !keys.includes(pointKey(point))) {
+      keys.push(pointKey(point));
+      point.x = fixed(point.x);
+      point.y = fixed(point.y);
+      return true;
+    }
+    return false;
+  });
+}
+export function fillStr(v: string | number, fill = 2) {
+  let str = v + '';
+  const len = Math.max(str.length, fill);
+  str = '0000000000' + str;
+  return str.substring(str.length - len);
+}
+export function parseUrlIds(str: string) {
+  str = decodeURIComponent(str);
+  const ids = str.split(',');
+  const set = new Set(ids);
+  return [...set];
+}
+
+export function enableEscOnFullScreen() {
+  // @ts-ignore
+  if (navigator.keyboard && navigator.keyboard.lock) {
+    // @ts-ignore
+    navigator.keyboard.lock(['Escape']);
+  }
+}
+export function closeTab() {
+  const win = window.open('about:blank', '_self');
+  win && win.close();
+}
+export function refreshTab() {
+  window.location.reload();
+}
diff --git a/frontend/image-tool/src/businessNew/utils/error.ts b/frontend/image-tool/src/businessNew/utils/error.ts
new file mode 100644
index 00000000..b689d9ae
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/utils/error.ts
@@ -0,0 +1,25 @@
+import { Editor, BSError, MsgType } from 'image-editor';
+// import Code from '../config/code';
+
+function logErrorStack(err: BSError | Error) {
+  while (err) {
+    if (err instanceof BSError) {
+      console.log(err);
+    } else {
+      console.error(err);
+    }
+
+    err = (err as any).oriError;
+  }
+}
+
+export function handleError(editor: Editor, err: BSError | Error) {
+  const oriError = (err as any).oriError;
+
+  if (err instanceof BSError) {
+    editor.showMsg(MsgType.error, err.message);
+    if (oriError) logErrorStack(oriError);
+  } else {
+    console.error(err);
+  }
+}
diff --git a/frontend/image-tool/src/businessNew/utils/index.ts b/frontend/image-tool/src/businessNew/utils/index.ts
new file mode 100644
index 00000000..97dd3d8f
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/utils/index.ts
@@ -0,0 +1,5 @@
+export * from './result-save';
+export * from './result-request';
+export * from './common';
+export * from './error';
+export * from './class';
diff --git a/frontend/image-tool/src/businessNew/utils/result-request.ts b/frontend/image-tool/src/businessNew/utils/result-request.ts
new file mode 100644
index 00000000..538db497
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/utils/result-request.ts
@@ -0,0 +1,92 @@
+import { v4 as uuid } from 'uuid';
+import {
+  AnnotateObject,
+  utils as EditorUtils,
+  IPolygonInnerConfig,
+  IUserData,
+  KeyPoint,
+  Line,
+  Polygon,
+  Rect,
+  SourceType,
+  ToolType,
+} from 'image-editor';
+import Editor from '../common/Editor';
+import { IContour, IObjectInfo } from '../types';
+import { checkPoints } from './common';
+
+export function convertObject2Annotate(editor: Editor, objects: IObjectInfo[]) {
+  const annotates = [] as AnnotateObject[];
+
+  objects.forEach((e: IObjectInfo) => {
+    const obj = e.classAttributes;
+    const contour = (obj.contour || {}) as IContour;
+    const classConfig = editor.getClassType(obj.classId || '');
+
+    const userData: IUserData = {
+      ...obj?.meta,
+      backId: obj.backId,
+      classId: classConfig ? classConfig.id : '',
+      classType: classConfig ? classConfig.name : '',
+      attrs: arrayToObj(obj.classValues),
+      modelClass: obj.modelClass,
+      confidence: obj.modelConfidence,
+      trackId: obj.trackId,
+      trackName: obj.trackName,
+      sourceId: obj.sourceId || String(e.sourceId) || editor.state.defaultSourceId,
+      sourceType: obj.sourceType || e.sourceType || SourceType.DATA_FLOW,
+      createdAt: obj.createdAt,
+      createdBy: obj.createdBy,
+      version: obj.version,
+    };
+    const points = checkPoints(contour.points || []);
+    const interior = contour.interior || [];
+    const pointsLen = points.length;
+    const type = obj.type.toLocaleUpperCase();
+    let annotate;
+    switch (type) {
+      case ToolType.RECTANGLE:
+      case ToolType.BOUNDING_BOX:
+        if (pointsLen >= 2) {
+          const rectOption = EditorUtils.getRectFromPointsWithRotation(points);
+          annotate = new Rect({ ...rectOption, points });
+        }
+        break;
+      case ToolType.POLYGON:
+        if (pointsLen >= 3) {
+          const pointsOrder = EditorUtils.countPointsOrder(points);
+          const innerPoints: IPolygonInnerConfig[] = [];
+          interior.forEach((e: any) => {
+            let filters = checkPoints(e.coordinate || e.points || []);
+            if (filters.length >= 3) {
+              if (EditorUtils.countPointsOrder(filters) === pointsOrder) filters.reverse();
+              innerPoints.push({ points: filters });
+            }
+          });
+          annotate = new Polygon({ points, innerPoints });
+        }
+        break;
+      case ToolType.POLYLINE:
+        if (pointsLen > 1) annotate = new Line({ points });
+        break;
+      case ToolType.KEY_POINT:
+        if (pointsLen > 0) annotate = new KeyPoint({ ...points[0] });
+        break;
+    }
+    if (!annotate) return;
+    annotate.uuid = obj.id || uuid();
+    annotate.userData = userData;
+    annotates.push(annotate);
+  });
+  return annotates;
+}
+function arrayToObj(data: any[] = []) {
+  const values = {} as Record<string, any>;
+  if (!Array.isArray(data)) return values;
+
+  data.forEach((e) => {
+    if (Array.isArray(e)) return;
+    values[e.id] = e;
+  });
+  return values;
+}
diff --git a/frontend/image-tool/src/businessNew/utils/result-save.ts b/frontend/image-tool/src/businessNew/utils/result-save.ts
new file mode 100644
index 00000000..aee5b307
--- /dev/null
+++ b/frontend/image-tool/src/businessNew/utils/result-save.ts
@@ -0,0 +1,147 @@
+/**
+ *
+ */
+import Editor from '../common/Editor';
+import { IContour, IObject, IObjectBasicInfo, ISaveFormat } from '../types';
+import {
+  AnnotateObject,
+  IFrame,
+  utils as EditorUtils,
+  IAttrOption,
+  ToolType,
+  Rect,
+  Vector2,
+  IPolygonInnerConfig,
+  Polygon,
+  SourceType,
+} from 'image-editor';
+import { checkPoints, empty, fixed, validNumber } from './common';
+
+function objToArray(obj: Record<string, any> = {}, attrMap: Map<string, any>) {
+  const data = [] as any[];
+  Object.keys(obj).forEach((key) => {
+    const objAttr = obj[key];
+    const attr = attrMap.get(key);
+    if (empty(objAttr.value) || !attr) return;
+    const option = attr?.options?.find((e: IAttrOption) => e.name == objAttr.value) as IAttrOption;
+    const hasChild = option?.attributes && option.attributes.length > 0;
+    data.push({
+      id: key,
+      pid: attr.parent,
+      name: attr.name || '',
+      value: objAttr.value,
+      alias: attr.alias || '',
+      isLeaf: !hasChild,
+      type: attr?.type,
+    });
+  });
+  return data;
+}
+function updateObjectVersion(obj: AnnotateObject) {
+  if (!obj.updateTime || !obj.lastTime) return;
+  let version = (validNumber(obj.version) ? obj.version : 0) as number;
+  if (obj.updateTime > obj.lastTime) {
+    version++;
+  }
+  obj.lastTime = obj.updateTime;
+  obj.version = version;
+}
+function getContourData(object: AnnotateObject) {
+  const returnContour: IContour = {};
+  const pos = object.position();
+  switch (object.toolType) {
+    case ToolType.BOUNDING_BOX:
+      const rect = object as Rect;
+      returnContour.points = checkPoints(EditorUtils.getRotatedRectPoints(rect));
+      returnContour.area = fixed(rect.getArea(), 0) || 0;
+      let r = object.rotation() || 0;
+      r = r < 0 ? 360 + r : r;
+      returnContour.rotation = fixed(r, 1);
+      break;
+    case ToolType.KEY_POINT:
+      returnContour.points = [{ ...pos }];
+      break;
+    case ToolType.POLYGON:
+    case ToolType.POLYLINE:
+      const objectPoints = checkPoints(object.attrs.points);
+      returnContour.points = EditorUtils.getShapeRealPoint(object, objectPoints);
+      const objectInnerPoints = object.attrs.innerPoints as IPolygonInnerConfig[];
+      if (objectInnerPoints) {
+        const innerPoints = [] as { points: Vector2[] }[];
+        objectInnerPoints.forEach((inner) => {
+          let _points = checkPoints(inner.points);
+          _points = EditorUtils.getShapeRealPoint(object, _points);
+          innerPoints.push({ points: _points });
+        });
+        returnContour.interior = innerPoints;
+      }
+      if (object instanceof Polygon) returnContour.area = fixed(object.getArea(), 0) || 0;
+      break;
+  }
+  return returnContour;
+}
+
+export function convertAnnotate2Object(editor: Editor, annotates: AnnotateObject[]) {
+  const objects = [] as IObject[];
+
+  annotates.forEach((obj: any) => {
+    const userData = editor.getUserData(obj);
+    const classConfig = editor.getClassType(userData.classId || '');
+
+    // updateVersion
+    updateObjectVersion(obj);
+
+    const newInfo: IObject = {
+      backId: userData.backId,
+      classId: classConfig?.id || '',
+      classValues: objToArray(editor.getValidAttrs(userData) || {}, editor.attrMap),
+      contour: getContourData(obj),
+      id: obj.uuid,
+      meta: {
+        classType: userData.classType || '',
+        color: classConfig?.color || '',
+      },
+      sourceId: userData.sourceId || editor.state.defaultSourceId,
+      sourceType: userData.sourceType || SourceType.DATA_FLOW,
+      trackId: userData.trackId,
+      trackName: userData.trackName,
+      type: obj.toolType,
+    };
+    objects.push(newInfo);
+  });
+  return objects;
+}
+export function getDataFlowSaveData(editor: Editor, frames?: IFrame[]) {
+  if (!frames) frames = editor.state.frames;
+  const dataMap: Record<string, ISaveFormat> = {};
+  frames.forEach((frame) => {
+    const id = String(frame.id);
+    const objectInfos: IObjectBasicInfo[] = [];
+
+    // result object
+    const arr = editor.state.annotateModeList;
+    arr.forEach((type) => {
+      const annitates = editor.dataManager.getFrameObject(frame.id, type) || [];
+      const objects = convertAnnotate2Object(editor, annitates);
+      objects.forEach((e) => {
+        objectInfos.push({
+          classAttributes: e,
+          classId: +e.classId,
+          frontId: e.id,
+          id: e.backId,
+          sourceId: +e.sourceId,
+          sourceType: e.sourceType,
+        });
+      });
+    });
+
+    dataMap[id] = {
+      dataAnnotations: [],
+      dataId: id,
+      objects: objectInfos,
+    };
+  });
+  const saveDatas = Object.values(dataMap);
+
+  return { saveDatas };
+}
diff --git a/frontend/image-tool/src/locales/helper.ts b/frontend/image-tool/src/locales/helper.ts
deleted file mode 100644
index b9ba43b3..00000000
--- a/frontend/image-tool/src/locales/helper.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import type { LocaleType } from '/#/config';
-
-import { set } from 'lodash-es';
-
-export const loadLocalePool: LocaleType[] = [];
-
-export function setHtmlPageLang(locale: LocaleType) {
-    document.querySelector('html')?.setAttribute('lang', locale);
-}
-
-export function setLoadLocalePool(cb: (loadLocalePool: LocaleType[]) => void) {
-    cb(loadLocalePool);
-}
-
-export function genMessage(langs: Record<string, Record<string, any>>, prefix = 'lang') {
-    const obj: Recordable = {};
-
-    Object.keys(langs).forEach((key) => {
-        const langFileModule = langs[key].default;
-        let fileName = key.replace(`./${prefix}/`, '').replace(/^\.\//, '');
-        const lastIndex = fileName.lastIndexOf('.');
-        fileName = fileName.substring(0, lastIndex);
-        const keyList = fileName.split('/');
-        const moduleName = keyList.shift();
-        const objKey = keyList.join('.');
-
-        if (moduleName) {
-            if (objKey) {
-                set(obj, moduleName, obj[moduleName] || {});
-                set(obj[moduleName], objKey, langFileModule);
-            } else {
-                set(obj, moduleName, langFileModule || {});
-            }
-        }
-    });
-    return obj;
-}
diff --git a/frontend/image-tool/src/locales/index.ts b/frontend/image-tool/src/locales/index.ts
new file mode 100644
index 00000000..0dff8385
--- /dev/null
+++ b/frontend/image-tool/src/locales/index.ts
@@ -0,0 +1,13 @@
+import en from './lang/en-US';
+import zh from './lang/zh-CN';
+import ko from './lang/ko-KR';
+export * from './lang/type';
+
+const languages = {
+  'en-US': en,
+  'zh-CN': zh,
+  'ko-KR': ko,
+  default: en,
+};
+
+export { languages };
diff --git a/frontend/image-tool/src/locales/lang/en-US.ts b/frontend/image-tool/src/locales/lang/en-US.ts
new file mode 100644
index 00000000..c1a19b50
--- /dev/null
+++ b/frontend/image-tool/src/locales/lang/en-US.ts
@@ -0,0 +1,505 @@
+export const text = {
+  'load-point': 'Loading....',
+  'load-class-error': 'Load class error',
+  'load-model-error': 'Load model error',
+  'load-dataset-classification-error': 'Load dataset classification error',
+  'load-record-error': 'Load record error',
+  'load-resource-error': 'Load resource error',
+  'load-object-error': 'Load object error',
+  'load-classification-error': 'Load classification error',
+  'load-frame-series-error': 'Load frame series data error',
+  'invalid-query': 'Invalid query',
+  'load-error': 'Load error',
+  'load-comment-error': 'Load comment error',
+  'save-ok': 'Saved successfully',
+  'save-error': 'Save failed',
+  'success-submit': 'Successfully submitted',
+  'success-accept': 'Successfully accepted',
+  'success-reject': 'Successfully rejected',
+  'model-run-error': 'Model run error',
+  'model-run-no-data': 'No model results',
+  'no-point-data': 'No point cloud data',
+  'play-error': 'Play failed',
+  'unknown-error': 'Error',
+  'network-error': 'Network error',
+  'login-invalid': 'Login invalid',
+  'not-login': 'Not logged in',
+  'copy-ok': 'Copy successfully',
+  'no-valid-data': 'No valid data',
+  'no-data': 'No data',
+  'title-reject': 'Reject',
+  'title-claiming': 'Claiming data...',
+  'title-noData-claim': 'No data to claim',
+  'confirm-title': 'Confirm',
+  'delete-title': 'Delete',
+  'delete-object': 'Are you sure to delete objects?',
+  'frame-title': 'Frame',
+  'result-incomplete': 'Results {results} is not completed. Please fix it.',
+  'result-exceedLimit': 'Results {results} is exceed class limit. Please fix it.',
+  'result-need-attributes':
+    'Result {results} is required to have manual labels or necessary attributes. Please fix it.',
+  'Frame need classifications':
+    'Frame {results} is required to have classifications. Please fix it.',
+  'data need classifications': 'It is required to have the classifications. Please fix it.',
+  confirm: 'Confirm',
+  cancel: 'Cancel',
+  Cancel: 'Cancel',
+  delete: 'Delete',
+  Delete: 'Delete',
+  hotKey: 'Hotkey',
+  save: 'Save',
+  Save: 'Save',
+  Close: 'Close',
+  Release: 'Release',
+  Discard: 'Discard',
+  groupInvalidTips: 'Multiple choice groups do not support only one result',
+  splitGroup: 'Disband and delete the group?',
+  polygonPlusDrawTips: '{pointsLimit} points must be drawn.',
+  hollowConditionTips: 'Not eligible for hollowing out.',
+  clipConditionTips: 'Not eligible for cropping.',
+  clipCannotTips: 'The selected result cannot be cropped.',
+  changeTips:
+    'Are you sure to switch from {pre} to {cur}? If switched, it will force automatic adjustment of key points.',
+  'track-object-title': 'Track object',
+  'track-no-source': 'No tracking objects',
+  'load-track': 'Tracking....',
+  'track-no-data': "No Tracking object found. Please check your objects' location and direction",
+  'track-error': 'Tracking error',
+  'track-ok': 'Tracking successfully',
+  'track-invalid': 'The current result type does not support model tracking.',
+  validity: 'Validity',
+  classification: 'Classification',
+  results: 'Results',
+  changeMode: 'Change {type} mode',
+  list: 'list',
+  layer: 'layer',
+  comments: 'Comments',
+  timeLine: 'Timeline',
+  autoLoad: 'Auto load',
+  copyLeft1: 'Copy one frame backward (Alt+←)',
+  copyRight1: 'Copy one frame forward (Alt+→)',
+  speedDown: 'Speed Down({n} times)',
+  speedUp: 'Speed Up({n} times)',
+  merge: 'Merge',
+  settingTrack: 'Setting',
+  objectTracking: 'Object Tracking',
+  allObjects: 'All Objects',
+  selectObjects: 'Selected Objects',
+  method: 'Method',
+  object: 'Object',
+  left: 'Backward',
+  right: 'Forward',
+  direction: 'Direction',
+  method_copy: 'Copy',
+  frameNumber: 'Frame number',
+  Frames: 'Frames',
+  mergeFrom: 'Merge from',
+  mergeTo: 'Merge to',
+  target: 'Target',
+  split: 'Split',
+  invisible: 'Disappeared',
+  invalid: 'Class invalid',
+  mark: 'Mark',
+  'class-recent': 'Recent classes',
+  'class-other': 'Other',
+  replay: 'Replay',
+  pre: 'Pre(←)',
+  next: 'Next(→)',
+  play: 'Play({n} times)',
+  pause: 'Pause',
+  switch_on: 'on',
+  switch_off: 'off',
+  selectObject: 'Select an object',
+  newBadge: 'Task Pool',
+  noPlayData: 'No data to play',
+  newTrackObject: 'New tracking object',
+  warnEmptyTarget: 'No data in the target frame',
+  warnTrackObjectEmpty: 'No tracking objects',
+  warnNoObject: 'Please select an object',
+  successTrack: 'Tracking successful',
+  successCopy: 'Copy successfully',
+  merge_error_object_not_exist: 'Error! Track object is not exist',
+  merge_error_object_repeat: 'Conflicts detected. Please check in the timeline.',
+  merge_error_class_none: 'Cannot merge objects without the class.',
+  merge_error_class_diff: 'Cannot merge objects with different classes.',
+  successMerge: 'Merge successfully',
+  errorMerge: 'Merge failed. Please try again',
+  warnEmptyObject: 'Cannot create an empty object',
+  successDelete: 'Successfully deleted',
+  successSplit: 'Split successful',
+  errorSplit: 'Split failed. Please try again',
+  errorDelete: 'Delete failed. Please try again',
+  btnCancelText: 'Cancel',
+  btnOkText: 'Ok',
+  btnDelete: 'Delete',
+  btnReview: 'Review',
+  btnCloseReview: 'Close review',
+  deleteTitle: 'You are going to delete this tracking object in all frames.',
+  class: 'Class',
+  'Search Class': 'Search class',
+  titleHelp: 'Help',
+  Instruction: 'Instruction',
+  titleWorkFlow: 'Workflow',
+  titleFlow: 'Workflow Detail',
+  titleData: 'Data Detail',
+  titleBack: 'Back',
+  titleClose: 'Close',
+  Fullscreen: 'Fullscreen',
+  ExitFullscreen: 'Exit Fullscreen',
+  titleSaveChange: 'Save Changes',
+  titleHotKeys: 'Hotkeys',
+  msgSaveChange: 'Do you want to save changes?',
+  'Save Changes': 'Save Changes',
+  btnReject: 'Reject',
+  btnModify: 'Modify',
+  btnQuitModify: 'Quit Modify',
+  btnAccept: 'Accept',
+  btnSubmit: 'Submit',
+  btnSave: 'Save',
+  btnPass: 'Pass',
+  btnClaim: 'Claim',
+  btnR_E: 'Reject & Exit',
+  btnR_C: 'Reject & Claim',
+  btnP_E: 'Pass & Exit',
+  btnP_C: 'Pass & Claim',
+  btnS_E: 'Submit & Exit',
+  btnS_C: 'Submit & Claim',
+  msgSample:
+    "You're now viewing a frame that is not sampled. Any comments in this frame will not be counted in Sampling Accuracy.",
+  titleAnnotate: 'Annotate',
+  titleReview: 'Review',
+  titleAcceptance: 'Acceptance',
+  titleQA: 'QA',
+  titleView: 'View',
+  titleModify: 'Modify',
+  titlePausedFor: 'Paused for',
+  titleDueIn: 'Due in',
+  titlePause: 'Pause',
+  titleRestart: 'Resume',
+  msgOutTime:
+    'Your claimed data ({ n } data remaining) is expiring in { t }. After that, they will all be released to task pool.',
+  msgAgain: 'Please claim again.',
+  msgPaused: 'Claimed data is now paused.',
+  msgOver2M: "It seems you haven't operate in 2 minutes.",
+  msgClickStart: 'Click button {btn} to continue working.',
+  msgClaimMsg: 'Claimed data is now paused. Click button to continue working.',
+  msgExpire: 'Claimed data is about to expire',
+  msgExpired: 'Claimed data has expired',
+  'Track Object': 'Track Object',
+  Status: 'Status',
+  'Track ID': 'Track ID',
+  'Mark All as Ground Truth': 'Mark All as Ground Truth',
+  Attribute: 'Attribute',
+  Objects: 'Objects',
+  copy_attrs_from: 'Copy attributes from other objects in this frame',
+  copy_attrs_from_frames: 'Copy these attributes to other frames of this tracking object',
+  copy_attrs_from_frames_tips: '(This will overwrite original attributes)',
+  Copy: 'Copy',
+  'Copy To Frames': 'Copy to Frames',
+  Advanced: 'Advanced',
+  'Split from Current Frame': 'Split from current frame',
+  'New Tracking Object': 'New tracking object',
+  'All Frames': 'All Frames',
+  'Some Frames': 'Some Frames',
+  'All Non-True Values': 'All Non-True Values',
+  deleteFromAllFrames: 'You are going to delete this tracking object in all frames.',
+  deleteFromSomeFrames: 'You are going to delete this tracking object in the following frames.',
+  deleteAllUntrue: 'You are going to delete all non-True Values of this tracking object.',
+  Undo: 'Undo',
+  Redo: 'Redo',
+  Hollow: 'Hollow',
+  Crop: 'Crop',
+  Drag: 'Drag',
+  Group: 'Group',
+  Ungroup: 'Ungroup',
+  'Create group': 'Create group',
+  'Dissolve group': 'Dissolve group',
+  editTips: 'Resize',
+  rectTips: 'Bounding box',
+  polygonTips: 'Polygon',
+  lineTips: 'Polyline',
+  pointTips: 'Key Point',
+  curveTips: 'Spline Curve',
+  skeletonTips: 'Skeleton',
+  groupTips: 'Create Group',
+  modelTips: 'Smart Editor',
+  Model: 'Model',
+  'AI Annotation Setting': 'AI Annotation Setting',
+  'Predict all in Model': 'Predict all in Model',
+  Confidence: 'Confidence',
+  interactiveTips: 'Interactive Editor',
+  'Interactive Model Setting': 'Interactive Model Setting',
+  Smoothness: 'Smoothness',
+  commentTips: 'Comment Editor',
+  hollowTips: 'Hollow out',
+  cancelHollowTips: 'Cancel Hollow',
+  cutNotFirstTips: 'Do not crop the first object',
+  cutFirstTips: 'Crop the first object',
+  fill: 'fill',
+  Contour: 'Contour',
+  'Page Up': 'Previous',
+  'Page Down': 'Next',
+  'Input keyword': 'Input keyword',
+  'Delete instance/point': 'Delete instance/point',
+  'Delete Mask': 'Delete mask',
+  'Finish drawing': 'Finish drawing',
+  'Show/hide tag pad': 'Show/hide tag pad',
+  'Move the top edge 1px': 'Move the top edge 1px',
+  'Move the bottom edge 1px': 'Move the bottom edge 1px',
+  'Move the left edge 1px': 'Move the left edge 1px',
+  'Movem the right edge 1px': 'Move the right edge 1px',
+  'Move the object 1px': 'Move the object 1px',
+  'Parallel result Edge': 'Parallel result Edge',
+  'Show Single Result': 'Show Single Result',
+  'Show Result': 'Show Result',
+  'Switch Results': 'Switch Results',
+  'Show Result Number': 'Show Result Number',
+  'Show Comments': 'Show Comments',
+  'Show Class': 'Show Class',
+  'Show label and attributes': 'Show label and attributes',
+  'Normal/Outline Select': 'Normal/outline Select',
+  'Zoom in、Zoom Out': 'Zoom in/out',
+  'Cancel window': 'Cancel/close popup',
+  Data: 'Data',
+  Instance: 'Instance',
+  Tool: 'Tool',
+  Result: 'Result',
+  Image: 'Image',
+  Else: 'Else',
+  'Selection Tool': 'Selection Tool',
+  'Rectangle Tool': 'B-box Tool',
+  'Polygon Tool': 'Polygon Tool',
+  'Polyline Tool': 'Polyline Tool',
+  'KeyPoint Tool': 'Key-point Tool',
+  'SplineCurve Tool': 'SplineCurve Tool',
+  'Skeleton Tool': 'Skeleton Tool',
+  'Group Tool': 'Group Tool',
+  'Smart Tool': 'Smart Tool',
+  'Interactive Tool': 'Interactive Tool',
+  'Comment Tool': 'Comment Tool',
+  Info: 'Info',
+  'Data info': 'Data info',
+  Name: 'Name',
+  Width: 'Width',
+  Height: 'Height',
+  Length: 'Length',
+  Area: 'Area',
+  Size: 'Size',
+  'Map Classes': 'Map Classes',
+  'Model Classes': 'Model Classes',
+  Reset: 'Reset',
+  'Apply and Run': 'Apply and Run',
+  Apply: 'Apply',
+  'Select all': 'Select all',
+  'Unselect all': 'Unselect all',
+  Setting: 'Setting',
+  Brightness: 'Brightness',
+  Contrast: 'Contrast',
+  Opacity: 'Opacity',
+  'Border Width': 'Border Width',
+  'Show Size': 'Show Size',
+  'Show Attr': 'Show Attr',
+  Comment: 'Comment',
+  Other: 'Other',
+  'Auxiliary Line': 'Measure Line',
+  'Auxiliary Shape': 'Measure Tools',
+  radius: 'Radius',
+  px: 'px',
+  BisectrixLine: 'Equisector',
+  horizontal: 'Horizontal',
+  vertical: 'Vertical',
+  'Display Mode': 'Display Mode',
+  'Do you want to save changes?': 'Do you want to save changes?',
+  'Results Source': 'Results Source',
+  Valid: 'Valid',
+  Invalid: 'Invalid',
+  Unknown: 'Unknown',
+  Filter: 'Filter',
+  'Please fill in as required': 'Please fill in as required',
+  Open: 'Open',
+  Resolved: 'Resolved',
+  'Fix All': 'Fix All',
+  Fixed: 'Fixed',
+  'Resolve All': 'Resolve All',
+  'Are you sure to delete?': 'Are you sure to delete?',
+  'View All': 'View All',
+  Type: 'Type',
+  'Reply Comment': 'Reply Comment',
+  'Task ID': 'Task ID',
+  'Task Name': 'Task Name',
+  'Data ID': 'Data ID',
+  'Data Name': 'Data Name',
+  'Data Size': 'Data Size',
+  Attachment: 'Attachment',
+  'Open in New Tab': 'Open in New Tab',
+  'the browser does not support copying': 'Your browser does not support copying.',
+  'Target Stage': 'Target Stage',
+  Worker: 'Worker',
+  'Who submitted this work': 'Who submitted this work',
+  New: 'Task Pool',
+  'Assign to any other worker in the stage': 'Assign to any worker in the stage',
+  'Keep results': 'Keep results',
+  'Keep all results': 'Keep all results',
+  'Clear results': 'Clear results',
+  'Clear all ground truth results': 'Clear all ground truth results and performances',
+  'Reject Reasons': 'Reject Reasons',
+  'Delete {num} Objects?': 'Delete {num} Objects?',
+  'No Attritube': 'No Attritube',
+  'Class Invalid': 'Class Invalid',
+  language: 'language',
+  'en-US': 'English',
+  'zh-CN': 'Chinese',
+  'ko-KR': 'Korean',
+  not_show_anymore: 'Do not show this any more',
+  class_change_warn:
+    'Labeling this tracking object as {type} will rewrite all of its attributes. Are you sure to change?',
+  'Width x height': 'Width x height',
+  Retry: 'Retry',
+  Ok: 'Ok',
+  Refresh: 'Refresh',
+  'Polygon shared edge by points drawing mode': 'Shared edge by points drawing mode.',
+  'Switch shared edge': 'Switch shared edge',
+  'Not True-Value': 'Not True-Value',
+  'Object of Frame': 'Object of Frame {index}',
+  'No Object': 'No Object',
+  'Show All Objects': 'Show All Objects',
+  '{num} selected': '{num} selected',
+  'Class Required': 'Class Required',
+  Warning: 'Warning',
+  taskReviewCloseTips:
+    'Do you want to save changes and keep these data to yourself? Or release these data to the pool which it belongs?',
+  Segmentation: 'Segmentation',
+  reload: 'reload',
+  'Fail to load resource, please reload': 'Fail to load resource. Please reload',
+  'Switch alias/name': 'Switch alias/name',
+  'Polygon shared edge by edges drawing mode': 'Shared edge by edges drawing mode.',
+  'Shared edge polygon by points': 'Shared edge polygon by points',
+  'Shared edge polygon by edges': 'Shared edge polygon by edges',
+  'Switch to view/edit Instance': 'Switch to view/edit Instance',
+  'Switch to view/edit Segmentation': 'Switch to view/edit Segmentation',
+  cuboidTips: 'Cuboid',
+  'Cuboid Tool': 'Cuboid Tool',
+  'Segmentation Tool': 'Segmentation Tool',
+  'Load Sources': 'Load Sources',
+  'Editing Source': 'Editing Source',
+  'No data available for now': 'No data available for now',
+  'You have completed all claimed data': 'You have completed all claimed data',
+  'There is no data in your current queue.': 'There is no data in your current queue.',
+  reClaimTips:
+    '{ pre } You can either click "ReClaim" to claim more data in the task pool, or close the current page.',
+  msgNormalCompleted: 'You have completed all the data in current task.',
+  msgSuspendCompleted: 'You have completed all the suspend data in current task.',
+  msgReReviewCompleted: 'You have completed all the re-review data in current task.',
+  msgRejectedCompleted: 'You have completed all the rejected in current task.',
+  'Re-Claim': 'Re-Claim',
+  'Claim Data': 'Claim Data',
+  continueClaimTips: "You currently don't have any data available. Continue to claim data?",
+  msgResolveAll: 'Are you sure to resolve all comments?',
+  msgFixAll: 'Are you sure to fix all comments?',
+  Resolve: 'Resolve',
+  unResolve: 'Cancel Resolve',
+  Fix: 'Fix',
+  unFix: 'Cancel Fix',
+  Restore: 'Restore',
+  'You have already claimed {num} data.': 'You have already claimed {num} data.',
+  'msg-dataflow-qaerror':
+    'Your results have violated mandatory QA rules. Are you sure you want to save this result?',
+  'Switch mark/mask': 'Switch mark/mask',
+  'Panoramic Tool': 'Smart Tool',
+  panoramicTips: 'Panoramic',
+  'Intellect Tool': 'Intellect Tool',
+  intellectTips: 'Intellect',
+  'warn-addModel':
+    'Adding model results may overwrite the annotated objects. Do you want to proceed?',
+  'Add Results?': 'Do you want to proceed?',
+  'Circle Tool': 'Circle Tool',
+  circleTips: 'Circle',
+  'Ellipse Tool': 'Ellipse Tool',
+  ellipseTips: 'Ellipse',
+  'brush tips': 'Brush',
+  'Brush Tool': 'Brush Tool',
+  'Brush width': 'Brush width',
+  'Fill Tool': 'Fill Tool',
+  'mask fill tips': 'Fill',
+  Boundary: 'Boundary',
+  Finer: 'Finer',
+  Coarser: 'Coarser',
+  titleFrame: 'Data',
+  titleTask: 'Task',
+  titleScene: 'Scene',
+  titleSceneId: 'Scene ID',
+  titleSceneName: 'Scene Name',
+  titleSceneIndex: 'Current Frame Index',
+  btnSaveQuit: 'Save and Quit',
+  'Switch Tool': 'Switch Tool',
+  'Add Region': 'Add Region',
+  'Crop Region': 'Crop Region',
+  'The model is running...': 'The model is running...',
+  cover: 'cover',
+  Actions: 'Actions',
+  'Workflow Detail': 'Workflow Detail',
+  'Reject Info': 'Reject Info',
+  'No Info': 'No Info',
+  'Show Auxiliary Line': 'Show Measure Line',
+  'Show Auxiliary Shape': 'Show Measure Tools',
+  'Show BisectrixLine': 'Show Bisectors',
+  'show points': 'Show Key-points',
+  resultNotComplete: 'Results not complete',
+  'Add a circle': 'Add a circle',
+  'Add a rectangle': 'Add a rectangle',
+  'Horizontal Drawing Model': 'Horizontal Drawing Model',
+  'Vertical Drawing Model': 'Vertical Drawing Model',
+  'Crop by selected area': 'Crop by selected area',
+  'Show Group Result': 'Show Group Result',
+  titleAnnotator: 'Assignee Annotator',
+  noneText: 'None',
+  all: 'All',
+  Missed: 'Missed',
+  'Wrong Object': 'Wrong Object',
+  'Wrong Point': 'Wrong Point',
+  'Wrong label': 'Wrong label',
+  'Not Fit': 'Not Fit',
+  Duplicate: 'Duplicate',
+  Uncertain: 'Uncertain',
+  Discussion: 'Discussion',
+  AddReply: 'Add a new reply…',
+  msgChar: 'Input should be less than 500 characters',
+  filterByCreator: 'Filter By Creator',
+  filterByStage: 'Filter By Stage',
+  filterByType: 'Filter By Error Type',
+  you: 'You',
+  'next point:': 'Next Point: ',
+  point: 'point',
+  shareFailed: 'Partial polygon({polygons}) sharing failed',
+  KeyPoints: 'KeyPoints',
+  'Equidistant Skeleton': 'Equidistant Skeleton',
+  'In order': 'In order',
+  Custom: 'Custom',
+  Curve: 'Curve',
+  Equal: 'Equal',
+  Creation: 'Creation',
+  'Create new when complete': 'Create new when complete',
+  'Canvas Skeleton Setting': 'Canvas Skeleton Setting',
+  'Show Series Number': 'Show Series Number',
+  'Show Attribute': 'Show Attribute',
+  'Sample Skeleton Setting': 'Sample Skeleton Setting',
+  successResolved: 'Resolved',
+  successRestored: 'Restored',
+  successFixed: 'Fixed',
+  imageSmoothing: 'Image smoothing',
+  'Shared Edge': 'Shared Edge',
+  'By Edges': 'By Edges',
+  'By Points': 'By Points',
+  'Show annotation sequence': 'Show annotation sequence',
+  'Mark as Invalid': 'Mark as Invalid',
+  'Mark as valid': 'Mark as valid',
+  Skip: 'Skip',
+  'This is last data': 'This is last data',
+  Update: 'Update',
+  Reminder: 'Reminder',
+  submitTips: `you don't have any annotation yet, are you sure you want to submit this data? If you can't annotate this data, you'd better mark this data as invaild.`,
+  'Well Done!': 'Well Done!',
+  'You have finish all the annotation!': 'You have finish all the annotation!',
+  'Close and release those data': 'Close and release those data',
+};
+export default text;
diff --git a/frontend/image-tool/src/locales/lang/en.ts b/frontend/image-tool/src/locales/lang/en.ts
deleted file mode 100644
index 6fc47748..00000000
--- a/frontend/image-tool/src/locales/lang/en.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { genMessage } from '../helper';
-import antdLocale from 'ant-design-vue/es/locale/en_US';
-// import momentLocale from 'moment/dist/locale/en-us';
-
-const modules = import.meta.globEager('./en/**/*.ts');
-export default {
-    message: {
-        ...genMessage(modules, 'en'),
-        antdLocale,
-    },
-    momentLocale: null,
-    momentLocaleName: 'en',
-};
diff --git a/frontend/image-tool/src/locales/lang/en/action.ts b/frontend/image-tool/src/locales/lang/en/action.ts
deleted file mode 100644
index 217f8816..00000000
--- a/frontend/image-tool/src/locales/lang/en/action.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export default {
-    createSuccess: 'Create Success',
-    deleteSuccess: 'Delete Success',
-    renameSuccess: 'Rename Success',
-};
diff --git a/frontend/image-tool/src/locales/lang/ko-KR.ts b/frontend/image-tool/src/locales/lang/ko-KR.ts
new file mode 100644
index 00000000..15646fe0
--- /dev/null
+++ b/frontend/image-tool/src/locales/lang/ko-KR.ts
@@ -0,0 +1,504 @@
+import { ILocale } from './type';
+
+const text: ILocale = {
+  'load-point': '로드 중....',
+  'load-class-error': '클래스 로드 오류',
+  'load-model-error': '모델 로드 오류',
+  'load-dataset-classification-error': '데이터셋 분류 로드 오류',
+  'load-record-error': '기록 로드 오류',
+  'load-resource-error': '리소스 로드 오류',
+  'load-object-error': '객체 로드 오류',
+  'load-classification-error': '분류 로드 오류',
+  'load-frame-series-error': '씬 데이터 로드 오류',
+  'invalid-query': '요청 무효',
+  'load-error': '로드 오류',
+  'load-comment-error': '코멘트 로드 오류',
+  'save-ok': '저장 성공',
+  'save-error': '저장 오류',
+  'success-submit': '제출 성공',
+  'success-accept': '검수 성공',
+  'success-reject': '반려 성공',
+  'model-run-error': '모델 실행 오류',
+  'model-run-no-data': '모델 결과 없음',
+  'no-point-data': 'PointCloud 데이터 없음',
+  'play-error': '재생 오류',
+  'unknown-error': '오류',
+  'network-error': '네트워크 오류',
+  'login-invalid': '로그인 무효',
+  'not-login': '로그인되지 않음',
+  'copy-ok': '복사 성공',
+  'no-valid-data': '유효한 데이터 없음',
+  'no-data': '데이터 없음',
+  'title-reject': '반려',
+  'title-claiming': '데이터 수령 중...',
+  'title-noData-claim': '수령할 데이터가 없습니다.',
+  'confirm-title': '확인',
+  'delete-title': '삭제',
+  'delete-object': '객체를 삭제하시겠습니까?',
+  'frame-title': '프레임',
+  'result-incomplete': '결과 {results}가 완료되지 않았습니다. 먼저 완료하세요.',
+  'result-exceedLimit': '결과 {results}가 클래스 한도를 초과했습니다.',
+  'result-need-attributes':
+    '결과 {results} 는 수동으로 라벨을 지정해야 하는 속성이므로, 먼저 수정 작업을 수행해야 합니다.',
+  'Frame need classifications': '프레임 {results} 에는 분류가 필요합니다. 먼저 수정해야 합니다.',
+  'data need classifications': '데이터에는 분류가 필요합니다. 먼저 수정해야 합니다.',
+  confirm: '확인',
+  cancel: '취소',
+  Cancel: '취소',
+  delete: '삭제',
+  Delete: '삭제',
+  hotKey: '단축키',
+  save: '저장',
+  Save: '저장',
+  Close: '닫기',
+  Release: '해제',
+  Discard: '취소',
+  groupInvalidTips: '한 결과는 다중 그룹에서 지원되지 않습니다.',
+  splitGroup: '객체를 분할 및 삭제 하시겠습니까?',
+  polygonPlusDrawTips: '{pointsLimit}포인트가 필요합니다.',
+  hollowConditionTips: '적합하지 않은 중앙 구멍 조건',
+  clipConditionTips: '선택한 결과가 중앙 구멍 조건에 맞지 않습니다.',
+  clipCannotTips: '선택한 결과는 중앙 구멍 내기 기능에 적용할 수 없습니다.',
+  changeTips:
+    '{pre} 라벨을 {cur} 라벨로 변경하시겠습니까? 이 변경으로 인해 포인트 수량 조정이 필요합니다.',
+  'track-object-title': '객체 추적',
+  'track-no-source': '추적 객체 없음',
+  'load-track': '추적 중....',
+  'track-no-data': '추적 가능한 객체를 찾을 수 없습니다. 객체의 위치와 방향을 확인하세요.',
+  'track-error': '추적 오류',
+  'track-ok': '추적 성공',
+  'track-invalid': '현재 결과 유형은 모델 추적을 지원하지 않습니다.',
+  validity: '유효성',
+  classification: '분류',
+  results: '결과',
+  changeMode: '{type} 모드로 변경',
+  list: '리스트',
+  layer: '레이어',
+  comments: '코멘트',
+  timeLine: '타임라인',
+  autoLoad: '자동 로드',
+  copyLeft1: '한 프레임 앞으로 복사하기 (Alt+←)',
+  copyRight1: '한 프레임 뒤로 복사하기 (Alt+→)',
+  speedDown: '속도 감소({n}배)',
+  speedUp: '속도 증가({n}배)',
+  merge: '병합',
+  settingTrack: '객체 추적',
+  objectTracking: '객체 추적',
+  allObjects: '모든 객체',
+  selectObjects: '선택한 객체',
+  method: '방법',
+  object: '객체',
+  left: '앞으로',
+  right: '뒤로',
+  direction: '방향',
+  method_copy: '복사',
+  frameNumber: '프레임 번호',
+  Frames: '프레임',
+  mergeFrom: '병합 오기',
+  mergeTo: '병합 가기',
+  target: '대상',
+  split: '분할',
+  invisible: '안 보임',
+  invalid: '유효하지 않은 클래스',
+  mark: '표시',
+  'class-recent': '최근 클래스',
+  'class-other': '다른 클래스',
+  replay: '재생',
+  pre: '이전(←)',
+  next: '다음(→)',
+  play: '재생({n}배)',
+  pause: '일시정지',
+  switch_on: '켜기',
+  switch_off: '끄기',
+  selectObject: '객체 선택',
+  newBadge: 'New',
+  noPlayData: '재생 데이터 없음',
+  newTrackObject: '새로운 추적 객체',
+  warnEmptyTarget: '대상 프레임에 데이터가 없습니다',
+  warnTrackObjectEmpty: '추적 대상이 없습니다',
+  warnNoObject: '객체를 선택해주세요',
+  successTrack: '추적 성공',
+  successCopy: '복사 성공',
+  merge_error_object_not_exist: '오류! 추적 대상 객체가 존재하지 않습니다.',
+  merge_error_object_repeat: '충돌이 감지되었습니다. 타임라인에서 확인해주세요.',
+  merge_error_class_none: '클래스 없는 객체는 병합할 수 없습니다.',
+  merge_error_class_diff: '클래스 일치하지 않은 객체는 병합할 수 없습니다.',
+  successMerge: '병합 성공',
+  errorMerge: '병합 실패, 다시 시도해주세요.',
+  warnEmptyObject: '빈 객체를 생성할 수 없습니다.',
+  successDelete: '삭제 성공',
+  successSplit: '분할 성공',
+  errorSplit: '분할 실패, 다시 시도해주세요.',
+  errorDelete: '삭제 실패, 다시 시도해주세요.',
+  btnCancelText: '취소',
+  btnOkText: '확인',
+  btnDelete: '삭제',
+  btnReview: '리뷰',
+  btnCloseReview: '리뷰 닫기',
+  deleteTitle: '모든 프레임에서 추적 대상 객체를 삭제합니다.',
+  class: '클래스',
+  'Search Class': '클래스 검색',
+  titleHelp: '도움말',
+  Instruction: '설명',
+  titleWorkFlow: '워크플로우',
+  titleFlow: '워크플로우 상세',
+  titleData: '데이터 상세',
+  titleBack: '뒤로',
+  titleClose: '닫기',
+  Fullscreen: '전체화면',
+  ExitFullscreen: '전체화면 종료',
+  titleSaveChange: '변경사항 저장',
+  titleHotKeys: '단축키',
+  msgSaveChange: '변경사항을 저장하시겠습니까?',
+  'Save Changes': '변경 사항 저장',
+  btnReject: '반려',
+  btnModify: '수정',
+  btnQuitModify: '수정 종료',
+  btnAccept: '검수',
+  btnSubmit: '제출',
+  btnSave: '저장',
+  btnPass: '통과',
+  btnClaim: '수령',
+  btnR_E: '반려 및 종료',
+  btnR_C: '반려 및 수령',
+  btnP_E: '통과 및 종료',
+  btnP_C: '통과 및 수령',
+  btnS_E: '제출 및 종료',
+  btnS_C: '제출 및 수령',
+  msgSample:
+    '샘플링되지 않은 프레임입니다. 이 프레임에 대한 코멘트는 샘플링 정확도에 포함되지 않습니다.',
+  titleAnnotate: '작업',
+  titleReview: '리뷰',
+  titleAcceptance: '검수',
+  titleQA: '품질 검사',
+  titleView: '보기',
+  titleModify: '수정',
+  titlePausedFor: '일시정지',
+  titleDueIn: '만료 시간',
+  titlePause: '일시정지',
+  titleRestart: '다시 시작',
+  msgOutTime:
+    '수령한 ({ n } 데이터) { t } 후 만료됩니다. 만료 후 데이터는 모두 태스크 풀에 반환됩니다.',
+  msgAgain: '다시 수령하세요.',
+  msgPaused: '수령한 데이터가 일시정지되었습니다.',
+  msgOver2M: '2분 동안 작업이 없습니다.',
+  msgClickStart: '계속 작업하려면 버튼을 {btn} 클릭하십시오.',
+  msgClaimMsg: '수령한 데이터가 일시정지되었습니다. 버튼을 클릭하여 작업을 계속하십시오.',
+  msgExpire: '수령한 데이터의 만료일이 다가오고 있습니다.',
+  msgExpired: '수령한 데이터가 곧 만료됩니다.',
+  'Track Object': '추적 객체',
+  Status: '상태',
+  'Track ID': '추적 ID',
+  'Mark All as Ground Truth': '모두 Ground Truth로 표시',
+  Attribute: '속성',
+  Objects: '객체',
+  copy_attrs_from: '이 프레임의 다른 객체에서 속성 복사하기',
+  copy_attrs_from_frames: '해당 속성을 이 추적 객체의 다른 프레임에 복사하기',
+  copy_attrs_from_frames_tips: '(원래 속성을 덮어씁니다)',
+  Copy: '복사',
+  'Copy To Frames': '프레임에 복사',
+  Advanced: '고급',
+  'Split from Current Frame': '현재 프레임에서 분할',
+  'New Tracking Object': '새 추적 객체',
+  'All Frames': '모든 프레임',
+  'Some Frames': '일부 프레임',
+  'All Non-True Values': '모든 모델 결과',
+  deleteFromAllFrames: '모든 프레임에서 이 추적 객체를 삭제합니다.',
+  deleteFromSomeFrames: '뒤로 모든 프레임에서 이 추적 대상 객체를 삭제합니다.',
+  deleteAllUntrue: '이 추적 대상 객체의 모든 모델 결과를 삭제합니다.',
+  Undo: '실행 취소',
+  Redo: '재실행',
+  Hollow: '중앙 구멍 내기',
+  Crop: '자르기',
+  Drag: '드래그',
+  Group: '그룹',
+  Ungroup: '그룹 해제',
+  'Create group': '그룹 생성',
+  'Dissolve group': '그룹 해체',
+  editTips: '크기 조정',
+  rectTips: '사각형',
+  polygonTips: '폴리곤',
+  lineTips: '폴리라인',
+  pointTips: '키포인트',
+  curveTips: '스플라인 곡선',
+  skeletonTips: '스켈레톤',
+  groupTips: '그룹 생성',
+  modelTips: '스마트 에디터',
+  Model: '모델',
+  'AI Annotation Setting': 'AI 작업 설정',
+  'Predict all in Model': '모두 모델로 예측하기',
+  Confidence: '신뢰도',
+  interactiveTips: '자동인식 에디터',
+  'Interactive Model Setting': '자동인식 모델 설정',
+  Smoothness: '부드러움',
+  commentTips: '코멘트 에디터',
+  hollowTips: '중앙 구멍 내기 H ',
+  cancelHollowTips: '중앙 구멍 내기 취소',
+  cutNotFirstTips: '첫 번째 객체를 자르지 않음',
+  cutFirstTips: '첫 번째 객체 자르기',
+  fill: '채우기',
+  Contour: '실루엣',
+  'Page Up': '이전',
+  'Page Down': '다음',
+  'Input keyword': '검색어 입력',
+  'Delete instance/point': '인스턴스/포인트 삭제',
+  'Delete Mask': '마스크 삭제',
+  'Finish drawing': '완료',
+  'Show/hide tag pad': '태그 패드 보이기/숨기기',
+  'Move the top edge 1px': '위쪽 가장자리 1px 이동',
+  'Move the bottom edge 1px': '아래쪽 가장자리 1px 이동',
+  'Move the left edge 1px': '왼쪽 가장자리 1px 이동',
+  'Movem the right edge 1px': '오른쪽 가장자리 1px 이동',
+  'Move the object 1px': '객체 1px 이동',
+  'Parallel result Edge': '평행 결과 엣지',
+  'Show Single Result': '단일 결과 보이기',
+  'Show Result': '결과 보기',
+  'Switch Results': '결과 스위치',
+  'Show Result Number': '결과 번호 보이기',
+  'Show Comments': '코멘트 보이기',
+  'Show Class': '클래스 보이기',
+  'Show label and attributes': '클래스 및 속성 보이기',
+  'Normal/Outline Select': '일반/실루엣 선택',
+  'Zoom in、Zoom Out': '확대/축소',
+  'Cancel window': '취소',
+  Data: '데이터',
+  Instance: '인스턴스',
+  Tool: '툴',
+  Result: '결과',
+  Image: '이미지',
+  Else: '기타',
+  'Selection Tool': '선택 툴',
+  'Rectangle Tool': '사각형 툴',
+  'Polygon Tool': '폴리곤 툴',
+  'Polyline Tool': '폴리라인 툴',
+  'KeyPoint Tool': '키포인트 툴',
+  'SplineCurve Tool': '스플라인 곡선 툴',
+  'Skeleton Tool': '스켈레톤 툴',
+  'Group Tool': '그룹 툴',
+  'Smart Tool': '스마트 툴',
+  'Interactive Tool': '자동인식 툴',
+  'Comment Tool': '코멘트 툴',
+  Info: '정보',
+  'Data info': '데이터 정보',
+  Name: '이름',
+  Width: '너비',
+  Height: '높이',
+  Length: '길이',
+  Area: '면적',
+  Size: '크기',
+  'Map Classes': '클래스 매핑',
+  'Model Classes': '모델 클래스',
+  Reset: '초기화',
+  'Apply and Run': '적용 및 실행',
+  Apply: '적용',
+  'Select all': '모두 선택',
+  'Unselect all': '모두 선택 해제',
+  Setting: '설정',
+  Brightness: '밝기',
+  Contrast: '대조도',
+  Opacity: '불투명도',
+  'Border Width': '테두리 너비',
+  'Show Size': '크기 보이기',
+  'Show Attr': '속성 보이기',
+  Comment: '코멘트',
+  Other: '기타',
+  'Auxiliary Line': '보조선',
+  'Auxiliary Shape': '보조원',
+  radius: '반지름',
+  px: '픽셀',
+  BisectrixLine: '이등분선',
+  horizontal: '수평',
+  vertical: '수직',
+  'Display Mode': '디스플레이 모드',
+  'Do you want to save changes?': '변경 내용을 저장하시겠습니까?',
+  'Results Source': '결과 소스',
+  Valid: '유효',
+  Invalid: '유효하지 않음',
+  Unknown: '알 수 없음',
+  Filter: '필터',
+  'Please fill in as required': '규칙 대로 작성해주세요.',
+  Open: '열기',
+  Resolved: '해결됨',
+  'Fix All': 'Fix All',
+  Fixed: 'Fixed',
+  'Resolve All': '모두 해결',
+  'Are you sure to delete?': '삭제하시겠습니까?',
+  'View All': '전체 보이기',
+  Type: '유형',
+  'Reply Comment': '댓글 달기',
+  'Task ID': '태스크 ID',
+  'Task Name': '태스크 이름',
+  'Data ID': '데이터 ID',
+  'Data Name': '데이터 이름',
+  'Data Size': '데이터 크기',
+  Attachment: '첨부파일',
+  'Open in New Tab': '새 탭에서 열기',
+  'the browser does not support copying': '해당 브라우저는 복사를 지원하지 않습니다',
+  'Target Stage': '목표 단계',
+  Worker: '작업자',
+  'Who submitted this work': '이 작업을 제출한 사람에게',
+  New: 'New',
+  'Assign to any other worker in the stage': '단계 내 다른 작업자에게 할당',
+  'Keep results': '결과 유지',
+  'Keep all results': '모든 결과 유지',
+  'Clear results': '결과 지우기',
+  'Clear all ground truth results': '모든 Ground Truth 결과 및 성과 지우기',
+  'Reject Reasons': '반려 이유',
+  'Delete {num} Objects?': '객체 {num}번을 삭제하시겠습니까?',
+  'No Attritube': '속성 없음',
+  'Class Invalid': '무효 클래스',
+  language: '언어',
+  'en-US': '영어',
+  'zh-CN': '중국어',
+  'ko-KR': '한국어',
+  not_show_anymore: '이 컨텐트는 더 이상 표시되지 않습니다.',
+  class_change_warn:
+    '이 추적 객체를 {type}으로 라벨링하면 모든 속성이 변경됩니다. 변경하시겠습니까?',
+  'Width x height': '너비 x 높이',
+  Retry: '재시도',
+  Ok: '확인',
+  Refresh: '새로고침',
+  'Polygon shared edge by points drawing mode': '공유 엣지 다각형/폴리라인 포인트 모드.',
+  'Switch shared edge': '공유 엣지 전환',
+  'Not True-Value': '모델 결과',
+  'Object of Frame': '{index}번째 프레임의 객체',
+  'No Object': '객체 없음',
+  'Show All Objects': '모든 객체 보이기',
+  '{num} selected': '{num} 선택됨',
+  'Class Required': '클래스 필수',
+  Warning: '알림',
+  taskReviewCloseTips:
+    '변경 사항을 저장하고 데이터를 유지하시겠습니까? 또는 작업 풀에 릴리스하시겠습니까?',
+  Segmentation: '세그멘테이션',
+  reload: '새로고침',
+  'Fail to load resource, please reload': '리소스를 로드하지 못했습니다. 새로고침하세요.',
+  'Switch alias/name': '별명/클래스 이름 보이기',
+  'Polygon shared edge by edges drawing mode': '공유 엣지 다각형/폴리라인 엣지 모드.',
+  'Shared edge polygon by points': '공유 엣지 다각형/폴리라인 포인트 모드',
+  'Shared edge polygon by edges': '공유 엣지 다각형/폴리라인 엣지 모드',
+  'Switch to view/edit Instance': '인스턴스 결과 보기/편집 모드로 전환되었습니다',
+  'Switch to view/edit Segmentation': '세그멘테이션 결과 보기/편집 모드로 전환되었습니다',
+  cuboidTips: '큐보이드',
+  'Cuboid Tool': '큐보이드 툴',
+  'Segmentation Tool': '마스크 생성',
+  'Load Sources': '로드 소스',
+  'Editing Source': '편집 소스',
+  'No data available for now': '해당 데이터 없습니다.',
+  'You have completed all claimed data': '수령한 모든 데이터가 작업 완료했습니다.  ',
+  'There is no data in your current queue.': '현제 기다릴 데이터가 없습니다.',
+  reClaimTips:
+    '{ pre } You can either click "ReClaim" to claim more data in the task pool, or close the current page.',
+  msgNormalCompleted: 'You have completed all the data in current task.',
+  msgSuspendCompleted: 'You have completed all the suspend data in current task.',
+  msgReReviewCompleted: 'You have completed all the re-review data in current task.',
+  msgRejectedCompleted: 'You have completed all the rejected in current task.',
+  'Re-Claim': '재수령',
+  'Claim Data': '수령',
+  continueClaimTips: '작업 가능한 데이터가 없습니다.수령하시겠습니까? ',
+  msgResolveAll: '모든 코멘트를 처리하시겠습니까?',
+  msgFixAll: 'Are you sure to fix all comments?',
+  Resolve: '해결',
+  unResolve: 'Cancel Resolve',
+  Fix: 'Fix',
+  unFix: 'Cancel Fix',
+  Restore: '복구',
+  'You have already claimed {num} data.': '{num} 개 데이터가 수령되었습니다.',
+  'msg-dataflow-qaerror': '',
+  'Switch mark/mask': 'mark/mask 전환',
+  'Panoramic Tool': '자동 툴',
+  panoramicTips: '자동 툴',
+  'Intellect Tool': '스마트 툴자동 툴',
+  intellectTips: '스마트 툴',
+  'warn-addModel': '모델 결과를 추가하면 작업한 포인트가 커버 될 수 있습니다. 계속하시겠습니까?',
+  'Add Results?': '계속하시겠습니까?',
+  'Circle Tool': '원',
+  circleTips: '원',
+  'Ellipse Tool': '타원',
+  ellipseTips: '타원',
+  'brush tips': '브러시',
+  'Brush Tool': '브러시 툴',
+  'Brush width': '브러시 너비',
+  'Fill Tool': '채우기 툴',
+  'mask fill tips': '채우기',
+  Boundary: '초화소',
+  Finer: '정밀',
+  Coarser: '대략',
+  titleFrame: '데이터',
+  titleTask: '태스크',
+  titleScene: '씬',
+  titleSceneId: '씬 ID',
+  titleSceneName: '씬 이름',
+  titleSceneIndex: '현재 프레임 인덕스',
+  btnSaveQuit: '저장 및 종료',
+  'Switch Tool': '툴 변경',
+  'Add Region': '구역 추가',
+  'Crop Region': '구역 감수',
+  'The model is running...': '로딩 중...',
+  cover: '커버',
+  Actions: '작업',
+  'Workflow Detail': '워크플로우 상세',
+  'Reject Info': '반려 정보',
+  'No Info': '정보 없음',
+  'Show Auxiliary Line': '보조선 표시',
+  'Show Auxiliary Shape': '보조 원 표시',
+  'Show BisectrixLine': '이등분선 표시',
+  'show points': '키포인트 보이기',
+  resultNotComplete: '미완성',
+  'Add a circle': 'Add a circle',
+  'Add a rectangle': 'Add a rectangle',
+  'Horizontal Drawing Model': 'Horizontal Drawing Model',
+  'Vertical Drawing Model': 'Vertical Drawing Model',
+  'Crop by selected area': 'Crop by selected area',
+  'Show Group Result': 'Show Group Result',
+  titleAnnotator: 'Assignee Annotator',
+  noneText: '없음',
+  all: '모두',
+  Missed: 'Missed',
+  'Wrong Object': 'Wrong Object',
+  'Wrong Point': 'Wrong Point',
+  'Wrong label': 'Wrong label',
+  'Not Fit': 'Not Fit',
+  Duplicate: 'Duplicate',
+  Uncertain: 'Uncertain',
+  Discussion: 'Discussion',
+  AddReply: 'Add a new reply…',
+  msgChar: '입력은 500자 미만이어야 합니다',
+  filterByCreator: '생성자별 필터링하기',
+  filterByStage: '단계별 필터링하기',
+  filterByType: '오류 유형별 필터링하기',
+  you: '나의 코멘트',
+  'next point:': 'next point: ',
+  point: 'point',
+  shareFailed: 'Partial polygon({polygons}) sharing failed',
+  KeyPoints: 'KeyPoints',
+  'Equidistant Skeleton': 'Equidistant Skeleton',
+  'In order': 'In order',
+  Custom: 'Custom',
+  Curve: 'Curve',
+  Equal: 'Equal',
+  Creation: 'Creation',
+  'Create new when complete': 'Create new when complete',
+  'Canvas Skeleton Setting': 'Canvas Skeleton Setting',
+  'Show Series Number': 'Show Series Number',
+  'Show Attribute': 'Show Attribute',
+  'Sample Skeleton Setting': 'Sample Skeleton Setting',
+  successResolved: 'Resolved',
+  successRestored: 'Restored',
+  successFixed: 'Fixed',
+  imageSmoothing: 'Image smoothing',
+  'Shared Edge': 'Shared Edge',
+  'By Edges': 'By Edges',
+  'By Points': 'By Points',
+  'Show annotation sequence': 'Show annotation sequence',
+  'Mark as Invalid': 'Mark as Invalid',
+  'Mark as valid': 'Mark as valid',
+  Skip: 'Skip',
+  'This is last data': 'This is last data',
+  Update: 'Update',
+  Reminder: 'Reminder',
+  submitTips: `you don't have any annotation yet, are you sure you want to submit this data? If you can't annotate this data, you'd better mark this data as invaild.`,
+  'Well Done!': 'Well Done!',
+  'You have finish all the annotation!': 'You have finish all the annotation!',
+  'Close and release those data': 'Close and release those data',
+};
+export default text;
diff --git a/frontend/image-tool/src/locales/lang/type.ts b/frontend/image-tool/src/locales/lang/type.ts
new file mode 100644
index 00000000..9651c483
--- /dev/null
+++ b/frontend/image-tool/src/locales/lang/type.ts
@@ -0,0 +1,3 @@
+import en from './en-US';
+
+export type ILocale = typeof en;
diff --git a/frontend/image-tool/src/locales/lang/zh-CN.ts b/frontend/image-tool/src/locales/lang/zh-CN.ts
new file mode 100644
index 00000000..694036f8
--- /dev/null
+++ b/frontend/image-tool/src/locales/lang/zh-CN.ts
@@ -0,0 +1,498 @@
+import { ILocale } from './type';
+
+const text: ILocale = {
+  'load-point': '加载中...',
+  'load-class-error': '标签加载错误',
+  'load-model-error': '模型加载错误',
+  'load-dataset-classification-error': '数据集分类加载错误',
+  'load-record-error': '记录加载错误',
+  'load-resource-error': '资源加载错误',
+  'load-object-error': '标注结果加载错误',
+  'load-classification-error': '分类加载错误',
+  'load-frame-series-error': '连续帧加载错误',
+  'invalid-query': '查询无效',
+  'load-error': '加载错误',
+  'load-comment-error': '评论加载错误',
+  'save-ok': '保存成功',
+  'save-error': '保存失败',
+  'success-submit': '提交成功',
+  'success-accept': '验收通过',
+  'success-reject': '驳回成功',
+  'model-run-error': '模型运行出错',
+  'model-run-no-data': '模型运行无结果',
+  'no-point-data': '无数据',
+  'play-error': '播放错误',
+  'unknown-error': '未知错误',
+  'network-error': '网络错误, 请检查您的网络',
+  'login-invalid': '登录无效',
+  'not-login': '未登陆',
+  'copy-ok': '复制成功',
+  'no-valid-data': '无有效数据',
+  'no-data': '暂无数据',
+  'title-reject': '驳回',
+  'title-claiming': '领取',
+  'title-noData-claim': '没有可领取的数据',
+  'confirm-title': '确认',
+  'delete-title': '删除',
+  'delete-object': '删除结果',
+  'frame-title': '当前帧',
+  'result-incomplete': '以下结果未完成：{results}， 请先完成后再操作。',
+  'result-exceedLimit': '以下结果超出标签限制：{results}，请先规范结果后再操作。',
+  'result-need-attributes': '结果{results}，缺失人工标签或必须属性。请修改。',
+  'Frame need classifications': '第 {results} 缺失分类标签。请修改。',
+  'data need classifications': '当前数据缺失分类标签。请修改。',
+  confirm: '确认',
+  cancel: '取消',
+  Cancel: '取消',
+  delete: '删除',
+  Delete: '删除',
+  hotKey: '快捷键',
+  save: '保存',
+  Save: '保存',
+  Close: '关闭',
+  Release: '释放',
+  Discard: '放弃',
+  groupInvalidTips: '多选组不支持只有一个结果',
+  splitGroup: '解散并删除该组？',
+  polygonPlusDrawTips: '必须绘制{pointsLimit}个点',
+  hollowConditionTips: '不符合镂空条件',
+  clipConditionTips: '不符合裁剪条件',
+  clipCannotTips: '选择的结果不能进行裁剪',
+  changeTips: '确认切换{pre}为{cur}吗？如果切换，则会强制自动调整骨骼点。',
+  'track-object-title': '追踪对象',
+  'track-no-source': '无追踪对象',
+  'load-track': '追踪加载中...',
+  'track-no-data': '未找到追踪对象',
+  'track-error': '追踪失败',
+  'track-ok': '追踪成功',
+  'track-invalid': '当前对象不支持进行模型追踪',
+  validity: '有效性',
+  classification: '分类',
+  results: '结果',
+  changeMode: '切换为{type}模式',
+  list: '列表',
+  layer: '图层',
+  comments: '评论',
+  timeLine: '时间轴',
+  autoLoad: '自动加载',
+  copyLeft1: '向左复制一帧(Alt+←)',
+  copyRight1: '向右复制一帧(Alt+→)',
+  speedDown: '{n} 倍速',
+  speedUp: '{n} 倍速',
+  merge: '合并',
+  settingTrack: '追踪设置',
+  objectTracking: '追踪/复制',
+  allObjects: '全部结果',
+  selectObjects: '选中结果',
+  method: '方式',
+  object: '目标',
+  left: '向左',
+  right: '向右',
+  direction: '方向',
+  method_copy: '复制',
+  frameNumber: '帧数',
+  Frames: '帧数',
+  mergeFrom: '合并从',
+  mergeTo: '合并到',
+  target: '目标',
+  split: '拆分',
+  invisible: '消失',
+  invalid: '标签限制',
+  mark: '批注',
+  'class-recent': '最近使用标签',
+  'class-other': '其他',
+  replay: '重新播放',
+  pre: '上一帧(←)',
+  next: '下一帧(→)',
+  play: '播放({n} 倍速)',
+  pause: '暂停',
+  switch_on: '开',
+  switch_off: '关',
+  selectObject: '选择一个对象',
+  newBadge: '新',
+  noPlayData: '无播放数据',
+  newTrackObject: '新追踪对象',
+  warnEmptyTarget: '无目标帧数据',
+  warnTrackObjectEmpty: '无追踪对象',
+  warnNoObject: '请选择一个对象',
+  successTrack: '追踪成功',
+  successCopy: '复制成功',
+  merge_error_object_not_exist: '合并对象不存在',
+  merge_error_object_repeat: '存在合并冲突，请在时间轴里查看',
+  merge_error_class_none: '不能合并没有标签的对象',
+  merge_error_class_diff: '不能合并不同标签',
+  successMerge: '合并成功',
+  errorMerge: '合并失败, 请重试',
+  warnEmptyObject: '不能创建空对象',
+  successDelete: '删除成功',
+  successSplit: '拆分成功',
+  errorSplit: '拆分失败, 请重试',
+  errorDelete: '删除失败, 请重试',
+  btnCancelText: '取消',
+  btnOkText: '确认',
+  btnDelete: '删除',
+  btnReview: '检查',
+  btnCloseReview: '关闭检查',
+  deleteTitle: '您将在所有帧中删除此追踪对象。',
+  class: '标签',
+  'Search Class': '搜索标签',
+  titleHelp: '帮助',
+  Instruction: '说明',
+  titleWorkFlow: '工作流',
+  titleFlow: '工作流',
+  titleData: '数据详情',
+  titleBack: '返回',
+  titleClose: '关闭',
+  Fullscreen: '全屏',
+  ExitFullscreen: '退出全屏',
+  titleSaveChange: '保存修改',
+  titleHotKeys: '快捷键',
+  msgSaveChange: '是否保存修改？',
+  'Save Changes': '保存修改',
+  btnReject: '驳回',
+  btnModify: '修改',
+  btnQuitModify: '退出修改',
+  btnAccept: '验收通过',
+  btnSubmit: '提交',
+  btnSave: '保存',
+  btnPass: '通过',
+  btnClaim: '领取',
+  btnR_E: '驳回 & 退出',
+  btnR_C: '驳回 & 领取',
+  btnP_E: '通过 & 退出',
+  btnP_C: '通过 & 领取',
+  btnS_E: '提交 & 退出',
+  btnS_C: '提交 & 领取',
+  msgSample: '你正在查看未被抽样的帧。这一帧的评论不会计入抽样准确率。',
+  titleAnnotate: '标注',
+  titleReview: '审核',
+  titleAcceptance: '验收',
+  titleQA: '质检',
+  titleView: '浏览',
+  titleModify: '修改',
+  titlePausedFor: '已挂起',
+  titleDueIn: '过期时间',
+  titlePause: '暂停',
+  titleRestart: '继续',
+  msgOutTime: '你领取的数据（剩余 {n} 条）将在 {t} 内过期。过期后，它们将全部被释放到任务池中。',
+  msgAgain: '请重新领取',
+  msgPaused: '领取的数据现已暂停。',
+  msgOver2M: '你已经有 2 分钟没有操作了。',
+  msgClickStart: '点击按钮{btn}继续工作。',
+  msgClaimMsg: '领取的数据现已暂停。点击按钮继续工作。',
+  msgExpire: '领取的作业即将过期',
+  msgExpired: '领取的作业已过期',
+  'Track Object': '追踪对象',
+  Status: '状态',
+  'Track ID': '追踪对象ID',
+  'Mark All as Ground Truth': '全部帧标为人工标注',
+  Attribute: '属性',
+  Objects: '对象',
+  copy_attrs_from: '从当前帧的其他相同标签的对象复制属性',
+  copy_attrs_from_frames: '将该对象的标签属性复制到其他帧该结果上',
+  copy_attrs_from_frames_tips: '(将会覆盖目标对象的原有标签属性)',
+  Copy: '复制',
+  'Copy To Frames': '选择需要复制的帧',
+  Advanced: '高级',
+  'Split from Current Frame': '从当前帧开始拆分',
+  'New Tracking Object': '新的追踪对象',
+  'All Frames': '所有帧',
+  'Some Frames': '某些帧',
+  'All Non-True Values': '所有非真值的对象',
+  deleteFromAllFrames: '删除所有帧中的该追踪对象。',
+  deleteFromSomeFrames: '删除选择帧中的该追踪对象。',
+  deleteAllUntrue: '删除所有帧中该追踪对象非真值的对象。',
+  Undo: '撤销',
+  Redo: '执行',
+  Hollow: '镂空',
+  Crop: '裁剪',
+  Drag: '拖动',
+  Group: '组',
+  Ungroup: '取消编组',
+  'Create group': '创建组',
+  'Dissolve group': '解散组',
+  editTips: '编辑',
+  rectTips: '矩形',
+  polygonTips: '多边形',
+  lineTips: '折线',
+  pointTips: '关键点',
+  curveTips: '曲线',
+  skeletonTips: '骨骼点',
+  groupTips: '组',
+  modelTips: '模型',
+  Model: '模型',
+  'AI Annotation Setting': '智能标注设置',
+  'Predict all in Model': '使用模型所有标签进行识别',
+  Confidence: '置信度',
+  interactiveTips: '交互式识别',
+  'Interactive Model Setting': '交互式模型设置',
+  Smoothness: '平滑度',
+  commentTips: '评论',
+  hollowTips: '镂空',
+  cancelHollowTips: '取消镂空',
+  cutNotFirstTips: '裁剪非第一个选中的结果',
+  cutFirstTips: '裁剪选中的第一个结果',
+  fill: '填充',
+  Contour: '轮廓',
+  'Page Up': '上一页',
+  'Page Down': '下一页',
+  'Input keyword': '输入关键字',
+  'Delete instance/point': '删除结果/点',
+  'Delete Mask': '删除结果',
+  'Finish drawing': '完成绘制',
+  'Show/hide tag pad': '展示/隐藏标签卡片',
+  'Move the top edge 1px': '移动上边框1像素',
+  'Move the bottom edge 1px': '移动下边框1像素',
+  'Move the left edge 1px': '移动左边框1像素',
+  'Movem the right edge 1px': '移动右边框1像素',
+  'Move the object 1px': '移动目标结果1像素',
+  'Parallel result Edge': '平行边',
+  'Show Single Result': '只显示选中的结果',
+  'Show Result': '展示结果',
+  'Switch Results': '切换选中结果',
+  'Show Result Number': '显示结果序号',
+  'Show Comments': '显示评论',
+  'Show Class': '显示标签',
+  'Show label and attributes': '显示结果属性值',
+  'Normal/Outline Select': '选中模式: 正常/轮廓',
+  'Zoom in、Zoom Out': '缩放',
+  'Cancel window': '取消/关闭弹窗',
+  Data: '数据',
+  Instance: '实例',
+  Tool: '工具',
+  Result: '结果',
+  Image: '图片',
+  Else: '其他',
+  'Selection Tool': '编辑工具',
+  'Rectangle Tool': '矩形工具',
+  'Polygon Tool': '多边形工具',
+  'Polyline Tool': '折线工具',
+  'KeyPoint Tool': '关键点工具',
+  'SplineCurve Tool': '曲线工具',
+  'Skeleton Tool': '骨骼工具',
+  'Group Tool': '组工具',
+  'Smart Tool': '模型工具',
+  'Interactive Tool': '交互式识别工具',
+  'Comment Tool': '评论工具',
+  Info: '信息',
+  'Data info': '数据信息',
+  Name: '名称',
+  Width: '宽',
+  Height: '高',
+  Length: '长',
+  Area: '面积',
+  Size: '大小',
+  'Map Classes': '映射标签',
+  'Model Classes': '模型标签',
+  Reset: '重置',
+  'Apply and Run': '应用并识别',
+  Apply: '应用',
+  'Select all': '选中所有',
+  'Unselect all': '取消选中所有',
+  Setting: '设置',
+  Brightness: '亮度',
+  Contrast: '对比度',
+  Opacity: '透明度',
+  'Border Width': '边框宽度',
+  'Show Size': '尺寸信息',
+  'Show Attr': '属性信息',
+  Comment: '评论',
+  Other: '其他',
+  'Auxiliary Line': '辅助线',
+  'Auxiliary Shape': '辅助工具',
+  radius: '半径',
+  px: '像素',
+  BisectrixLine: '等分线',
+  horizontal: '水平',
+  vertical: '竖直',
+  'Display Mode': '显示模式',
+  'Do you want to save changes?': '是否保存修改？',
+  'Results Source': '结果来源',
+  Valid: '有效的',
+  Invalid: '无效的',
+  Unknown: '未知的',
+  Filter: '筛选',
+  'Please fill in as required': '请完善必填项',
+  Open: '未解决',
+  Resolved: '已解决',
+  Fixed: '已修改',
+  'Fix All': '全部修改',
+  'Resolve All': '全部解决',
+  'Are you sure to delete?': '确定删除吗？',
+  'View All': '显示全部',
+  Type: '类型',
+  'Reply Comment': '回复评论',
+  'Task ID': '任务ID',
+  'Task Name': '任务名',
+  'Data ID': '数据ID',
+  'Data Name': '数据名',
+  'Data Size': '数据大小',
+  Attachment: '附件',
+  'Open in New Tab': '在新的标签页中打开',
+  'the browser does not support copying': '您的浏览器不支持复制',
+  'Target Stage': '目标阶段',
+  Worker: '人员',
+  'Who submitted this work': '谁提交了这项工作',
+  New: '作业池',
+  'Assign to any other worker in the stage': '分配给该阶段的所有人员',
+  'Keep results': '保留结果',
+  'Keep all results': '保留所有结果',
+  'Clear results': '清除结果',
+  'Clear all ground truth results': '清除所有真值结果',
+  'Reject Reasons': '驳回原因',
+  'Delete {num} Objects?': '是否删除这{num}个对象?',
+  'No Attritube': '无属性',
+  'Class Invalid': '标签无效',
+  language: '语言',
+  'en-US': '英语',
+  'zh-CN': '简体中文',
+  'ko-KR': '韩语',
+  not_show_anymore: '不再提示',
+  class_change_warn:
+    '设置该追踪对象的标签为{type}，将清空该追踪对象在全部帧中已标注的属性信息，是否确认？',
+  'Width x height': '长 x 宽',
+  Retry: '重试',
+  Ok: '确定',
+  Refresh: '刷新',
+  'Polygon shared edge by points drawing mode': '按点共享边模式。',
+  'Switch shared edge': '切换共享边',
+  'Not True-Value': '非真值',
+  'Object of Frame': '第{index}帧的结果',
+  'No Object': '当前帧无该对象',
+  'Show All Objects': '展示全部帧结果',
+  '{num} selected': '已选择{num}个来源',
+  'Class Required': '无标签',
+  Warning: '警告',
+  taskReviewCloseTips: '你想保存修改并保留数据吗？或不保存结果、将这些数据释放到所属任务池中？',
+  Segmentation: '分割',
+  reload: '重新加载',
+  'Fail to load resource, please reload': '加载资源失败，请重新加载',
+  'Switch alias/name': '切换别名/名称展示',
+  'Polygon shared edge by edges drawing mode': '按边共享边绘制模式。',
+  'Shared edge polygon by points': '按点共享边模式',
+  'Shared edge polygon by edges': '按边共享边模式',
+  'Switch to view/edit Instance': '切换到 查看/编辑 实例',
+  'Switch to view/edit Segmentation': '切换到 查看/编辑 分割',
+  cuboidTips: '伪3D框',
+  'Cuboid Tool': '伪3D框工具',
+  'Segmentation Tool': '分割工具',
+  'Load Sources': '加载来源',
+  'Editing Source': '编辑来源',
+  'No data available for now': '无有效数据',
+  'You have completed all claimed data': '您已完成所有领取的数据',
+  'There is no data in your current queue.': '当前队列无数据',
+  reClaimTips: '{ pre } 点击“重新领取”按钮领取作业池数据，或者关闭当前页面',
+  msgNormalCompleted: '你已经完成当前任务的所有数据',
+  msgSuspendCompleted: '你已经完成当前任务的所有挂起数据',
+  msgReReviewCompleted: '你已经完成当前任务的所有待复审数据',
+  msgRejectedCompleted: '你已经完成当前任务的所有被驳回数据',
+  'Re-Claim': '重新领取',
+  'Claim Data': '领取数据',
+  continueClaimTips: '无有效数据，是否继续领取？',
+  msgResolveAll: '是否确认解决全部评论？',
+  msgFixAll: '确定将所有评论标记为已修改吗？',
+  Resolve: '解决',
+  unResolve: '撤销已解决',
+  Fix: '修改',
+  unFix: '撤销已修改',
+  Restore: '恢复',
+  'You have already claimed {num} data.': '成功领取{num}数据',
+  'msg-dataflow-qaerror': '您的结果违反了质检强制性规则,是否确实要保存此结果?',
+  'Switch mark/mask': '切换mark/mask',
+  'Panoramic Tool': '全景分割工具',
+  panoramicTips: '全景分割',
+  'Intellect Tool': '智能分割工具',
+  intellectTips: '智能分割',
+  'warn-addModel': '添加模型结果可能会覆盖已标注的结果，是否确认添加？',
+  'Add Results?': '是否确认添加？',
+  'Circle Tool': '圆工具',
+  circleTips: '圆',
+  'Ellipse Tool': '椭圆工具',
+  ellipseTips: '椭圆',
+  'brush tips': '笔刷',
+  'Brush Tool': '笔刷工具',
+  'Brush width': '笔刷宽度',
+  'Fill Tool': '填充工具',
+  'mask fill tips': '填充',
+  Boundary: '超像素',
+  Finer: '精细',
+  Coarser: '粗略',
+  titleFrame: '数据',
+  titleTask: '任务',
+  titleScene: '连续帧',
+  titleSceneId: '连续帧ID',
+  titleSceneName: '连续帧名称',
+  titleSceneIndex: '当前帧',
+  btnSaveQuit: '保存并退出',
+  'Switch Tool': '切换工具',
+  'Add Region': '增加区域',
+  'Crop Region': '减少区域',
+  'The model is running...': '模型运行中, 请稍等...',
+  cover: '覆盖',
+  Actions: '操作',
+  'Workflow Detail': '工作流',
+  'Reject Info': '驳回信息',
+  'No Info': '无信息',
+  'Show Auxiliary Line': '展示辅助线',
+  'Show Auxiliary Shape': '展示辅助工具',
+  'Show BisectrixLine': '展示等分线',
+  'show points': '展示结果关键点',
+  resultNotComplete: '未完成',
+  'Add a circle': '添加辅助圆',
+  'Add a rectangle': '添加辅助矩形',
+  'Horizontal Drawing Model': '水平线模式',
+  'Vertical Drawing Model': '垂直线模式',
+  'Crop by selected area': '按所选区域裁剪',
+  'Show Group Result': '展示组结果',
+  titleAnnotator: '标注员',
+  noneText: '空',
+  all: '全部',
+  Missed: '漏框',
+  'Wrong Object': '错误结果',
+  'Wrong Point': '错误点',
+  'Wrong label': '错误标签',
+  'Not Fit': '不贴合',
+  Duplicate: '重复',
+  Uncertain: '不确定',
+  Discussion: '待讨论',
+  AddReply: '请输入…',
+  msgChar: '输入应少于500个字符',
+  filterByCreator: '按创建者筛选',
+  filterByStage: '按工序筛选',
+  filterByType: '按错误类型筛选',
+  you: '你',
+  'next point:': '下一个点：',
+  point: '点',
+  shareFailed: '部分多边形({polygons})共享失败',
+  KeyPoints: '关键点',
+  'Equidistant Skeleton': '等分',
+  'In order': '顺序等分',
+  Custom: '自定义等分',
+  Curve: '曲线',
+  Equal: '等分',
+  Creation: '创建',
+  'Create new when complete': '连续创建新的骨骼点对象',
+  'Canvas Skeleton Setting': '画布区骨骼点设置',
+  'Show Series Number': '显示骨骼点序号',
+  'Show Attribute': '显示骨骼点属性',
+  'Sample Skeleton Setting': '模板区骨骼点设置',
+  successResolved: '已解决',
+  successRestored: '已撤销',
+  successFixed: '已修改',
+  imageSmoothing: '图像平滑处理',
+  'Shared Edge': '共享边',
+  'By Edges': '按边共享',
+  'By Points': '按点共享',
+  'Show annotation sequence': '展示标注顺序',
+  'Mark as Invalid': 'Mark as Invalid',
+  'Mark as valid': 'Mark as valid',
+  Skip: 'Skip',
+  'This is last data': 'This is last data',
+  Update: 'Update',
+  Reminder: 'Reminder',
+  submitTips: `you don't have any annotation yet, are you sure you want to submit this data? If you can't annotate this data, you'd better mark this data as invaild.`,
+  'Well Done!': 'Well Done!',
+  'You have finish all the annotation!': 'You have finish all the annotation!',
+  'Close and release those data': 'Close and release those data',
+};
+export default text;
diff --git a/frontend/image-tool/src/locales/lang/zh-CN/action.ts b/frontend/image-tool/src/locales/lang/zh-CN/action.ts
deleted file mode 100644
index 1d7225e1..00000000
--- a/frontend/image-tool/src/locales/lang/zh-CN/action.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export default {
-    createSuccess: '创建成功',
-    deleteSuccess: '删除成功',
-    renameSuccess: '重命名成功',
-};
diff --git a/frontend/image-tool/src/locales/lang/zh_CN.ts b/frontend/image-tool/src/locales/lang/zh_CN.ts
deleted file mode 100644
index 3d40cca4..00000000
--- a/frontend/image-tool/src/locales/lang/zh_CN.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { genMessage } from '../helper';
-import antdLocale from 'ant-design-vue/es/locale/zh_CN';
-// import momentLocale from 'moment/dist/locale/zh-cn';
-
-const modules = import.meta.globEager('./zh-CN/**/*.ts');
-export default {
-    message: {
-        ...genMessage(modules, 'zh-CN'),
-        antdLocale,
-    },
-    // momentLocale,
-    momentLocaleName: 'zh-cn',
-};
diff --git a/frontend/image-tool/src/locales/setupI18n.ts b/frontend/image-tool/src/locales/setupI18n.ts
deleted file mode 100644
index 97a5e569..00000000
--- a/frontend/image-tool/src/locales/setupI18n.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import type { App } from 'vue';
-import type { I18n, I18nOptions } from 'vue-i18n';
-
-import { createI18n } from 'vue-i18n';
-import { setHtmlPageLang, setLoadLocalePool } from './helper';
-// import { localeSetting } from '/@/settings/localeSetting';
-// import { useLocaleStoreWithOut } from '/@/store/modules/locale';
-
-// const { fallback, availableLocales } = localeSetting;
-import en from './lang/en';
-import zh_CN from './lang/zh_CN';
-
-export let i18n: ReturnType<typeof createI18n>;
-
-async function createI18nOptions(): Promise<I18nOptions> {
-    // const localeStore = useLocaleStoreWithOut();
-    // const locale = localeStore.getLocale;
-    let locale = 'zh-CN';
-    // const defaultLocal = await import(`./lang/${locale}.ts`);
-    // const message = defaultLocal.default?.message ?? {};
-
-    let message = zh_CN;
-
-    // setHtmlPageLang(locale);
-    // setLoadLocalePool((loadLocalePool) => {
-    //     loadLocalePool.push(locale);
-    // });
-
-    return {
-        legacy: false,
-        locale,
-        // fallbackLocale: fallback,
-        messages: {
-            [locale]: message,
-        },
-        // availableLocales: availableLocales,
-        sync: true, //If you don’t want to inherit locale from global scope, you need to set sync of i18n component option to false.
-        silentTranslationWarn: true, // true - warning off
-        missingWarn: false,
-        silentFallbackWarn: true,
-    };
-}
-
-// setup i18n instance with glob
-export async function setupI18n(app: App) {
-    const options = await createI18nOptions();
-    i18n = createI18n(options) as I18n;
-    app.use(i18n);
-}
diff --git a/frontend/image-tool/src/locales/useLocale.ts b/frontend/image-tool/src/locales/useLocale.ts
index 994c9dd9..6a1b8954 100644
--- a/frontend/image-tool/src/locales/useLocale.ts
+++ b/frontend/image-tool/src/locales/useLocale.ts
@@ -1,72 +1,16 @@
-/**
- * Multi-language related operations
- */
-// import type { LocaleType } from '/#/config';
-
-import moment from 'moment';
-
-import { i18n } from './setupI18n';
-// import { useLocaleStoreWithOut } from '/@/store/modules/locale';
-import { unref, computed } from 'vue';
-import { loadLocalePool, setHtmlPageLang } from './helper';
-
-interface LangModule {
-    message: Recordable;
-    momentLocale: Recordable;
-    momentLocaleName: string;
-}
-
-function setI18nLanguage(locale: any) {
-    // const localeStore = useLocaleStoreWithOut();
-
-    if (i18n.mode === 'legacy') {
-        i18n.global.locale = locale;
-    } else {
-        (i18n.global.locale as any).value = locale;
-    }
-    // localeStore.setLocaleInfo({ locale });
-    setHtmlPageLang(locale);
-}
-
-export function useLocale() {
-    // const localeStore = useLocaleStoreWithOut();
-    // const getLocale = computed(() => localeStore.getLocale);
-    // const getShowLocalePicker = computed(() => localeStore.getShowPicker);
-
-    const getAntdLocale = computed((): any => {
-        return i18n.global.getLocaleMessage(unref(getLocale))?.antdLocale ?? {};
-    });
-
-    // Switching the language will change the locale of useI18n
-    // And submit to configuration modification
-    async function changeLocale(locale: any) {
-        const globalI18n = i18n.global;
-        const currentLocale = unref(globalI18n.locale);
-        if (currentLocale === locale) {
-            return locale;
-        }
-
-        if (loadLocalePool.includes(locale)) {
-            setI18nLanguage(locale);
-            return locale;
-        }
-        const langModule = ((await import(`./lang/${locale}.ts`)) as any).default as LangModule;
-        if (!langModule) return;
-
-        const { message, momentLocale, momentLocaleName } = langModule;
-
-        globalI18n.setLocaleMessage(locale, message);
-        moment.updateLocale(momentLocaleName, momentLocale);
-        loadLocalePool.push(locale);
-
-        setI18nLanguage(locale);
-        return locale;
+import { Editor } from 'image-editor';
+import { ILocale, languages } from './index';
+
+export default function useLocale(editor: Editor) {
+  function lang<D extends keyof ILocale>(name: D, args?: Record<string, any> | any[]) {
+    const data = editor.i18n.lang('common', name as any, args);
+    if (!data) {
+      return editor.i18n.lang(languages.default, String(name), args);
     }
+    return data;
+  }
 
-    return {
-        getLocale,
-        getShowLocalePicker,
-        changeLocale,
-        getAntdLocale,
-    };
+  return {
+    lang,
+  };
 }
diff --git a/frontend/image-tool/src/package/image-editor/Editor.ts b/frontend/image-tool/src/package/image-editor/Editor.ts
new file mode 100644
index 00000000..c557f997
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/Editor.ts
@@ -0,0 +1,414 @@
+import EventEmitter from 'eventemitter3';
+import ImageView from './ImageView';
+import { Event } from './configs';
+import { IImageViewOption } from './ImageView';
+import { getDefaultState } from './state';
+import {
+  Const,
+  IState,
+  AnnotateModeEnum,
+  ToolType,
+  RegisterFn,
+  ModalFn,
+  MsgFn,
+  ConfirmFn,
+  LoadingFn,
+  I18n,
+  AnnotateObject,
+  IFrame,
+  IClassType,
+  IModeConfig,
+  OPType,
+  IAttr,
+  IUserData,
+  StatusType,
+  AttrType,
+} from './types';
+import userAgent, { IUserAgent } from './lib/ua';
+import * as utils from './utils';
+import BSError from './common/BSError';
+import DataResource from './common/ResourceManager';
+import CmdManager from './common/CmdManager';
+import ActionManager from './common/ActionManager';
+import DataManager from './common/DataManager';
+import HotkeyManager from './common/HotkeyManager';
+import LoadManager from './common/LoadManager';
+import TrackManager from './common/TrackManager';
+import Stats from 'three/examples/jsm/libs/stats.module.js';
+
+export default class Editor extends EventEmitter {
+  idCount: number = 1;
+  state: IState;
+  mainView!: ImageView;
+  userAgent: IUserAgent = userAgent;
+  editable: boolean = true;
+  eventSource = '';
+  // frame
+  frameMap: Map<string, IFrame> = new Map();
+  frameIndexMap: Map<string, number> = new Map();
+  // class
+  classMap: Map<string, IClassType> = new Map();
+  classToolMap: Map<ToolType, IClassType[]> = new Map();
+  allAttrMap: Map<string, any> = new Map();
+  // select
+  selection: AnnotateObject[] = [];
+  selectionMap: Record<string, AnnotateObject> = {};
+  // manager
+  actionManager: ActionManager;
+  cmdManager: CmdManager;
+  loadManager: LoadManager;
+  dataManager: DataManager;
+  dataResource: DataResource;
+  hotkeyManager: HotkeyManager;
+  trackManager: TrackManager;
+
+  i18n!: I18n;
+  registerModal: RegisterFn = () => {};
+  showModal: ModalFn = () => Promise.resolve();
+  showMsg: MsgFn = () => {};
+  showConfirm: ConfirmFn = () => Promise.resolve();
+  showLoading: LoadingFn = () => {};
+
+  constructor() {
+    super();
+    this.state = getDefaultState();
+    this.actionManager = new ActionManager(this);
+    this.cmdManager = new CmdManager(this);
+    this.loadManager = new LoadManager(this);
+    this.dataManager = new DataManager(this);
+    this.dataResource = new DataResource(this);
+    this.hotkeyManager = new HotkeyManager(this);
+    this.trackManager = new TrackManager(this);
+
+    this.lang = this.lang.bind(this);
+    utils.initI18n(this);
+
+    if (import.meta.env.DEV) {
+      this.initStats();
+    }
+  }
+  // Stats
+  initStats() {
+    const stats = Stats();
+    stats.dom.style.left = 'auto';
+    stats.dom.style.right = '2px';
+    stats.dom.style.top = '55px';
+    document.body.appendChild(stats.dom);
+    const frame = () => {
+      stats.update();
+      requestAnimationFrame(frame);
+    };
+    frame();
+  }
+
+  init(container: HTMLDivElement, option?: IImageViewOption) {
+    this.mainView = new ImageView(this, container, option);
+    this.initEvent();
+    this.emit(Event.INIT);
+  }
+  initEvent() {
+    this.on(Event.SELECT, () => {
+      if (
+        this.editable &&
+        this.selection.length === 1 &&
+        this.selection[0].editable &&
+        this.mainView.getShapeTool(this.selection[0].className as any)
+      ) {
+        this.mainView.enableEdit(this.selection[0] as any);
+      } else {
+        this.mainView.disableEdit();
+      }
+      this.updateCurrentTrack();
+    });
+    this.cmdManager.on(Event.UNDO, () => {
+      this.updateCurrentTrack();
+    });
+
+    this.cmdManager.on(Event.REDO, () => {
+      this.updateCurrentTrack();
+    });
+  }
+  createTrackObj(objects: AnnotateObject | AnnotateObject[]) {
+    if (!this.state.isSeriesFrame) return;
+    if (!Array.isArray(objects)) objects = [objects];
+    const trackObjects = [] as IUserData[];
+    objects.forEach((e) => {
+      const userData = e.userData as IUserData;
+      const classObj = this.getClassType(userData.classId || '');
+      trackObjects.push({
+        trackId: userData.trackId,
+        trackName: userData.trackName,
+        classId: userData.classId,
+        classType: userData.classType || classObj?.name || '',
+        annotationType: AnnotateModeEnum.INSTANCE,
+      });
+    });
+    return trackObjects;
+  }
+  initIDInfo(objects: AnnotateObject | AnnotateObject[]) {
+    if (!Array.isArray(objects)) objects = [objects];
+    objects.forEach((object) => {
+      const userData = object.userData;
+      userData.id = object.uuid;
+
+      if (!userData.trackId) {
+        userData.trackId = utils.createTrackId();
+      }
+      if (!userData.trackName) {
+        userData.trackName = this.getId();
+      }
+      this.initOtherInfo(object);
+    });
+  }
+  initOtherInfo(object: AnnotateObject) {
+    object.userData.sourceId = '-1';
+    !object.userData.resultStatus && (object.userData.resultStatus = Const.True_Value);
+  }
+  // trackName
+  getId() {
+    return this.idCount++ + '';
+  }
+  updateTrack() {
+    const { frameIndex, frames, isSeriesFrame, defaultSourceId } = this.state;
+    let countFrames: IFrame[] = [];
+    if (isSeriesFrame) countFrames = frames;
+    else countFrames = [frames[frameIndex]];
+
+    const objects: AnnotateObject[] = [];
+    countFrames.forEach((f) => {
+      const objs_ins = this.dataManager.getFrameObject(f.id, AnnotateModeEnum.INSTANCE) || [];
+      const objs_seg = this.dataManager.getFrameObject(f.id, AnnotateModeEnum.SEGMENTATION) || [];
+      const objs = objs_ins.concat(objs_seg);
+      objects.push(...objs.filter((e) => e.userData.sourceId == defaultSourceId));
+    });
+    let maxId = 0;
+    objects.forEach((e) => {
+      if (!e.userData.trackName) return;
+      const id = parseInt(e.userData.trackName);
+      if (id > maxId) maxId = id;
+    });
+    this.idCount = maxId + 1;
+  }
+  updateCurrentTrack() {
+    const selection = this.selection;
+    const userData = selection.length == 1 ? selection[0].userData : undefined;
+    this.setCurrentTrack(userData?.trackId);
+  }
+  setCurrentTrack(trackId: string = '') {
+    if (this.state.currentTrack !== trackId) {
+      this.state.currentTrack = trackId;
+      this.emit(Event.CURRENT_TRACK_CHANGE, this.state.currentTrack);
+    }
+  }
+  withEventSource(source: string, fn: () => void) {
+    this.eventSource = source;
+    try {
+      fn();
+    } catch (e: any) {}
+    this.eventSource = '';
+  }
+  showNameOrAlias(obj: { name: string; alias?: string; label?: string }, showAll: boolean = false) {
+    return obj.name;
+  }
+  // locale common
+  lang(name: string, args?: Record<string, any>) {
+    return name;
+  }
+  selectObject(object?: AnnotateObject | AnnotateObject[], force?: boolean) {
+    const preSelection = this.selection;
+    let selection: AnnotateObject[] = [];
+    if (object) {
+      selection = Array.isArray(object) ? object : [object];
+    }
+    if (
+      !force &&
+      selection.length === 1 &&
+      this.selection.length === 1 &&
+      this.selection[0] === selection[0]
+    ) {
+      return;
+    }
+
+    preSelection.forEach((e) => {
+      this.mainView.setState(e, { select: false });
+    });
+
+    this.selection = selection;
+    this.selectionMap = {};
+    selection.forEach((e) => {
+      this.mainView.setState(e, { select: true });
+      this.selectionMap[e.uuid] = e;
+    });
+    this.emit(Event.SELECT, preSelection, this.selection);
+  }
+  updateSelect() {
+    const { selection, selectionMap } = this;
+    const filterSelection = selection.filter((e) => selectionMap[e.uuid]);
+    this.selectObject(filterSelection);
+  }
+  getUserData(object: AnnotateObject) {
+    const { isSeriesFrame } = this.state;
+
+    const userData = object.userData as Required<IUserData>;
+    const trackId = userData.trackId as string;
+    if (isSeriesFrame) {
+      const globalTrack = this.trackManager.getTrackObject(trackId) || {};
+      Object.assign(userData, globalTrack);
+    }
+    return userData;
+  }
+  setMode(modeConfig: IModeConfig) {
+    this.state.modeConfig = modeConfig;
+
+    const editable = modeConfig.op === OPType.EDIT;
+    (this.mainView.stage as any).globalDisableDrag = !editable;
+    this.editable = editable;
+
+    this.hotkeyManager.setHotKeyFromAction(this.state.modeConfig.actions);
+    this.actionManager.stopCurrentAction();
+    this.mainView.disableEdit();
+    this.mainView.disableDraw();
+    this.selectObject();
+    this.emit(Event.UPDATE_VIEW_MODE);
+  }
+
+  // frame
+  setFrames(frames: IFrame[]) {
+    this.state.frames = frames;
+    this.updateFrameIndex();
+    this.emit(Event.FRAMES);
+  }
+  updateFrameIndex() {
+    const frames = this.state.frames;
+    this.frameMap.clear();
+    frames.forEach((e, index) => {
+      this.frameMap.set(e.id + '', e);
+      this.frameIndexMap.set(e.id + '', index);
+    });
+  }
+  getFrameIndex(frameId: string) {
+    return this.frameIndexMap.get(frameId + '') as number;
+  }
+  getFrame(frameId: string) {
+    return this.frameMap.get(frameId + '') as IFrame;
+  }
+  getCurrentFrame() {
+    return this.state.frames[this.state.frameIndex];
+  }
+  async switchFrame(index: number) {
+    if (index === this.state.frameIndex) return;
+    const beforeIndex = this.state.frameIndex;
+    await this.loadFrame(index);
+    this.emit(Event.FRAME_SWITCH, { from: beforeIndex, to: index });
+  }
+  async loadFrame(index: number, showLoading: boolean = true, force: boolean = false) {
+    await this.loadManager.loadFrame(index, showLoading, force);
+    await this.mainView.renderFrame();
+    // this.selectByTrackId(this.state.currentTrack);
+    this.emit(Event.FRAME_CHANGE, this.state.frameIndex);
+  }
+
+  setClassTypes(classTypes: IClassType[]) {
+    this.classMap.clear();
+    this.classToolMap.clear();
+    this.allAttrMap.clear();
+
+    this.state.classTypes = classTypes;
+    classTypes.forEach((e) => {
+      this.classMap.set(e.name + '', e);
+      this.classMap.set(e.id + '', e);
+
+      let classes = this.classToolMap.get(e.toolType);
+      if (!classes) {
+        classes = [];
+        this.classToolMap.set(e.toolType, classes);
+      }
+      classes.push(e);
+    });
+    this.emit(Event.CLASS_INITDATA);
+  }
+  /** get class details by id or name */
+  getClassType(name: string | number) {
+    return this.classMap.get(name + '');
+  }
+  getClassTypesByToolType(tooltype: ToolType) {
+    let list = this.classToolMap.get(tooltype) || [];
+    return list;
+  }
+  getClassList(tooltype: ToolType) {
+    let list = this.classToolMap.get(tooltype) || ([] as IClassType[]);
+    return list;
+  }
+  // all classTypes [key: uuid]: [value: attr/attributes/options] map
+  get attrMap() {
+    if (this.allAttrMap.size === 0) {
+      this.state.classTypes.forEach((classType) => {
+        this.setAttrsMap(classType.attrs);
+      });
+    }
+    return this.allAttrMap;
+  }
+  setAttrsMap(attrs: any[], parent?: any) {
+    if (!attrs || attrs.length === 0) return;
+    attrs.forEach((attr) => {
+      if (parent) {
+        attr.parent = parent.id;
+        attr.parentValue = parent.name;
+      }
+      this.allAttrMap.set(attr.id, attr);
+      if (attr.options) this.setAttrsMap(attr.options);
+      if (attr.attributes) this.setAttrsMap(attr.attributes, attr);
+    });
+  }
+  getValidAttrs(userData: IUserData) {
+    const classId = userData.classId || '';
+    const classConfig = this.getClassType(classId);
+    const rAttrs: Record<string, any> = {};
+    if (!classConfig) return rAttrs;
+    const data = userData.attrs || {};
+    const validAttribute = (attr: IAttr) => {
+      const attrId = attr.id;
+      const item = data[attrId];
+      if (!item) return;
+      const isMulti = [AttrType.MULTI_SELECTION, AttrType.RANK].includes(attr.type);
+      const hasValue = isMulti ? item.value.length > 0 : item.value;
+      if (hasValue) {
+        rAttrs[attrId] = item;
+        const options = attr.options.filter((e) => {
+          if (isMulti) {
+            return item.value.includes(e.name);
+          } else {
+            return item.value === e.name;
+          }
+        });
+        options.forEach((o) => {
+          if (o.attributes) {
+            o.attributes.forEach(validAttribute);
+          }
+        });
+      }
+    };
+    classConfig.attrs.forEach(validAttribute);
+    return rAttrs;
+  }
+
+  isDefaultStatus() {
+    return this.state.status === StatusType.Default;
+  }
+  clearResource(config?: { resetBgRotation?: boolean }) {
+    this.mainView.clearBackground();
+    this.mainView.clearAllShape();
+    if (config?.resetBgRotation) this.mainView.stage.rotation(0);
+  }
+  getRenderFilter() {
+    return (e: any) => Boolean(e);
+  }
+
+  handleErr(err: BSError | Error | any, message: string = '') {
+    console.error(err);
+  }
+  // 跑模型函数
+  async runModel() {
+    throw 'runModel implement error';
+  }
+}
diff --git a/frontend/image-tool/src/package/image-editor/ImageView/View.ts b/frontend/image-tool/src/package/image-editor/ImageView/View.ts
new file mode 100644
index 00000000..acd78bfb
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/ImageView/View.ts
@@ -0,0 +1,44 @@
+import EventEmitter from 'eventemitter3';
+import Action from './actions/Action';
+import Actions, { ActionCtr } from './actions';
+
+export default class View extends EventEmitter {
+  // plugin action
+  actions: string[] = [];
+  actionMap: { [key: string]: Action } = {};
+  constructor() {
+    super();
+  }
+
+  getAction(name: string) {
+    return this.actionMap[name];
+  }
+  addActions(actionNames: string[]) {
+    actionNames.forEach((name) => {
+      if (this.actionMap[name]) return;
+      let Ctr = Actions[name] as ActionCtr;
+      if (!Ctr) return;
+      let action: Action = new Ctr(this);
+      try {
+        action.init();
+      } catch (error) {
+        console.error(error);
+      }
+      this.actionMap[name] = action;
+      this.actions.push(name);
+    });
+  }
+  removeActions(actionNames: string[]) {
+    actionNames.forEach((name) => {
+      let action = this.actionMap[name];
+      if (!action) return;
+      try {
+        action.destroy();
+      } catch (error) {
+        console.error(error);
+      }
+      this.actions = this.actions.filter((e) => e !== name);
+      delete this.actionMap[name];
+    });
+  }
+}
diff --git a/frontend/image-tool/src/package/image-editor/ImageView/actions/Action.ts b/frontend/image-tool/src/package/image-editor/ImageView/actions/Action.ts
new file mode 100644
index 00000000..f18b7dc2
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/ImageView/actions/Action.ts
@@ -0,0 +1,13 @@
+export default class Action {
+  actionName!: string;
+  enabled: boolean = true;
+  constructor() {}
+  init() {}
+  destroy() {}
+  toggle(enabled: boolean) {
+    this.enabled = enabled;
+  }
+  isEnable(): boolean {
+    return this.enabled;
+  }
+}
diff --git a/frontend/image-tool/src/package/image-editor/ImageView/actions/SelectHoverAction.ts b/frontend/image-tool/src/package/image-editor/ImageView/actions/SelectHoverAction.ts
new file mode 100644
index 00000000..6ebf474a
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/ImageView/actions/SelectHoverAction.ts
@@ -0,0 +1,123 @@
+import Action from './Action';
+import ImageView from '../index';
+import Konva from 'konva';
+import { Shape } from '../shape';
+import { Cursor } from '../../configs';
+
+type IFilter = (e: any) => boolean;
+
+const actionName = 'select-hover';
+class SelectHoverAction extends Action {
+  // enabled = true;
+  selectFlag = true;
+  stageClickFlag = true;
+  cursorFlag = true;
+  view: ImageView;
+  filter?: IFilter;
+
+  constructor(view: ImageView) {
+    super();
+    this.view = view;
+    this.onMouseOver = this.onMouseOver.bind(this);
+    this.onMouseOut = this.onMouseOut.bind(this);
+    this.onMouseClick = this.onMouseClick.bind(this);
+    this.onClick = this.onClick.bind(this);
+  }
+  init() {
+    this.view.stage.on('mouseover', this.onMouseOver);
+    this.view.stage.on('mouseout', this.onMouseOut);
+    this.view.stage.on('click', this.onMouseClick);
+    // click
+    this.view.shapes.on('click', this.onClick);
+  }
+  destroy() {
+    this.view.stage.off('mouseover', this.onMouseOver);
+    this.view.stage.off('mouseout', this.onMouseOut);
+    this.view.stage.off('click', this.onMouseClick);
+    this.view.shapes.off('click', this.onClick);
+  }
+
+  onMouseClick(e: Konva.KonvaEventObject<MouseEvent>) {
+    // if (!this.enabled) return;
+    if (e.evt.button !== 0 || !this.selectFlag || !this.stageClickFlag) return;
+
+    if (this.filter && !this.filter(e.target)) return;
+    if (e.target === this.view.stage && !this.view.currentDrawTool) {
+      const editor = this.view.editor;
+      if (editor.selection.length > 0) editor.selectObject([]);
+    }
+  }
+  onMouseOver(e: Konva.KonvaEventObject<MouseEvent>) {
+    if (this.filter && !this.filter(e.target)) return;
+
+    if (e.target === this.view.stage) {
+      this.view.setCursor(this.view.cursor || Cursor.auto);
+      return;
+    }
+
+    let target = e.target as Shape;
+    const object = target.object;
+
+    target = object || target;
+    if (!target.attrs.skipStateStyle) this.view.setState(target, { hover: true });
+
+    if (this.cursorFlag) {
+      this.view.setCursor(target.attrs.cursor || this.view.cursor || Cursor.pointer);
+    }
+  }
+
+  onMouseOut(e: Konva.KonvaEventObject<MouseEvent>) {
+    if (this.filter && !this.filter(e.target)) return;
+    // if (!this.enabled) return;
+    // console.log('mouseout', e);
+    if (e.target === this.view.stage) {
+      return;
+    }
+
+    let target = e.target as Shape;
+    const object = target.object;
+
+    target = object || target;
+    if (!target.attrs.skipStateStyle) this.view.setState(target, { hover: false });
+
+    if (this.cursorFlag) {
+      this.view.setCursor(this.view.cursor || Cursor.auto);
+    }
+  }
+
+  // click
+  onClick(e: Konva.KonvaEventObject<MouseEvent>) {
+    // if (!this.enabled) return;
+    if (e.evt.button !== 0 || !this.selectFlag) return;
+
+    if (this.filter && !this.filter(e.target)) return;
+
+    const editor = this.view.editor;
+    const event = e.evt;
+    let target = e.target as Shape;
+
+    target = target.object || target;
+
+    if (!target.attrs.selectable) return;
+
+    console.log(target);
+    if (event.shiftKey) {
+      const { selection, selectionMap } = editor;
+      let newSelection = [...selection];
+      if (selectionMap[target.uuid]) {
+        // remove
+        newSelection = newSelection.filter((e) => e !== target);
+      } else {
+        newSelection.push(target);
+      }
+      editor.selectObject(newSelection);
+    } else {
+      editor.selectObject(target);
+    }
+    // editor.mainView.focusView();
+  }
+}
+
+SelectHoverAction.prototype.actionName = actionName;
+
+export default SelectHoverAction;
diff --git a/frontend/image-tool/src/package/image-editor/ImageView/actions/ZoomMoveAction.ts b/frontend/image-tool/src/package/image-editor/ImageView/actions/ZoomMoveAction.ts
new file mode 100644
index 00000000..003ff052
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/ImageView/actions/ZoomMoveAction.ts
@@ -0,0 +1,77 @@
+import Action from './Action';
+import ImageView from '../index';
+import Konva from 'konva';
+
+const actionName = 'zoom-move';
+class ZoomMoveAction extends Action {
+  scaleRatio: number = 1.03;
+  view: ImageView;
+  mouseDown: number = -1;
+  startPos?: Konva.Vector2d;
+  startStagePos?: Konva.Vector2d;
+  startRotation?: number;
+  constructor(view: ImageView) {
+    super();
+    this.view = view;
+    this.onMouseWheel = this.onMouseWheel.bind(this);
+    this.onMouseDown = this.onMouseDown.bind(this);
+    this.onMouseUp = this.onMouseUp.bind(this);
+    this.onMouseMove = this.onMouseMove.bind(this);
+  }
+  init() {
+    this.view.stage.on('wheel', this.onMouseWheel);
+    this.view.stage.on('mousedown', this.onMouseDown);
+    document.addEventListener('mouseup', this.onMouseUp);
+    document.addEventListener('mousemove', this.onMouseMove);
+  }
+
+  destroy() {
+    this.view.stage.off('wheel', this.onMouseWheel);
+    this.view.stage.off('mousedown', this.onMouseDown);
+    document.removeEventListener('mouseup', this.onMouseUp);
+    document.removeEventListener('mousemove', this.onMouseMove);
+  }
+
+  onMouseDown(e: Konva.KonvaEventObject<MouseEvent>) {
+    // 右键
+    if (e.evt.button == 0) return;
+
+    this.mouseDown = e.evt.button;
+    this.startPos = { x: e.evt.clientX, y: e.evt.clientY };
+    this.startStagePos = this.view.stage.getAbsolutePosition();
+    this.startRotation = this.view.stage.rotation();
+  }
+  onMouseUp(e: MouseEvent) {
+    this.startPos = undefined;
+    this.startStagePos = undefined;
+    this.startRotation = undefined;
+    this.mouseDown = -1;
+  }
+  onMouseMove(e: MouseEvent) {
+    const stage = this.view.stage;
+    if (this.mouseDown < 1 || !this.startPos || !this.startStagePos) return;
+
+    if (this.mouseDown === 1) {
+      // rotate
+    } else if (this.mouseDown === 2) {
+      // drag
+      stage.position({
+        x: this.startStagePos.x + e.clientX - this.startPos.x,
+        y: this.startStagePos.y + e.clientY - this.startPos.y,
+      });
+    }
+  }
+  onMouseWheel(e: Konva.KonvaEventObject<WheelEvent>) {
+    const oldScale = this.view.stage.scaleX();
+    const direction = e.evt.deltaY < 0 ? 1 : -1;
+    let newScale = direction > 0 ? oldScale * this.scaleRatio : oldScale / this.scaleRatio;
+
+    if (newScale < 0.01) newScale = 0.01;
+    else if (newScale > 50) newScale = 50;
+
+    this.view.zoomTo(newScale);
+  }
+}
+
+ZoomMoveAction.prototype.actionName = actionName;
+export default ZoomMoveAction;
diff --git a/frontend/image-tool/src/package/image-editor/ImageView/actions/index.ts b/frontend/image-tool/src/package/image-editor/ImageView/actions/index.ts
new file mode 100644
index 00000000..2d7a5ab4
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/ImageView/actions/index.ts
@@ -0,0 +1,16 @@
+import Action from './Action';
+import ZoomMoveAction from './ZoomMoveAction';
+import SelectHoverAction from './SelectHoverAction';
+
+export type ActionCtr = new (args: any) => Action;
+export type IActionMap = { [key: string]: ActionCtr };
+
+const Actions: IActionMap = {};
+
+[ZoomMoveAction, SelectHoverAction].forEach((actionCtr: ActionCtr) => {
+  Actions[actionCtr.prototype.actionName] = actionCtr;
+});
+
+export { SelectHoverAction, ZoomMoveAction };
+
+export default Actions;
diff --git a/frontend/image-tool/src/package/image-editor/ImageView/components/BackgroundGroup.ts b/frontend/image-tool/src/package/image-editor/ImageView/components/BackgroundGroup.ts
new file mode 100644
index 00000000..70242da3
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/ImageView/components/BackgroundGroup.ts
@@ -0,0 +1,98 @@
+import Konva from 'konva';
+import ImageView from '../index';
+import Editor from '../../Editor';
+
+export default class BackgroundGroup {
+  private static _instance: BackgroundGroup;
+  public static getInstance() {
+    if (!this._instance) this._instance = new BackgroundGroup();
+    return this._instance;
+  }
+
+  view!: ImageView;
+  editor!: Editor;
+  group: Konva.Group;
+  bgImg: Konva.Image;
+  lines: Konva.Line[] = [];
+
+  constructor() {
+    this.group = new Konva.Group({ listening: false, sign: 'renderLayer-bgGroup' });
+    this.bgImg = new Konva.Image({ image: undefined });
+  }
+  init(view: ImageView) {
+    this.view = view;
+    this.editor = this.view.editor;
+    this.view.renderLayer.add(this.group);
+    this.group.moveToBottom();
+    this.initEvent();
+    return this.group;
+  }
+  initEvent() {}
+  updateBgImage(image: HTMLImageElement) {
+    this.clearBgImage();
+    this.bgImg = new Konva.Image({
+      image,
+      x: 0,
+      y: 0,
+      width: image.naturalWidth,
+      height: image.naturalHeight,
+    });
+    this.group.add(this.bgImg);
+    this.bgImg.moveToBottom();
+    this.updateBackgroundStyle();
+    this.updateEquisector();
+  }
+  clearBgImage() {
+    this.bgImg?.remove?.();
+    this.bgImg?.destroy?.();
+  }
+  updateEquisector() {
+    if (!this.bgImg) return;
+    const { enable, vertical, horizontal, width, color } =
+      this.view.editor.state.config.bisectrixLine;
+    if (vertical < 2 || vertical > 10 || horizontal < 2 || vertical > 10) return;
+    this.clearEquisector();
+    if (!enable) return;
+    const maxX = this.bgImg.width();
+    const maxY = this.bgImg.height();
+    const averageX = maxX / vertical;
+    const averageY = maxY / horizontal;
+    for (let i = 1; i < vertical; i++) {
+      const lineX = averageX * i;
+      const bline = new Konva.Line({
+        points: [lineX, 0, lineX, maxY],
+        strokeWidth: width,
+        stroke: color,
+        hitStrokeWidth: 0,
+      });
+      this.lines.push(bline);
+    }
+    for (let i = 1; i < horizontal; i++) {
+      const lineY = averageY * i;
+      const bline = new Konva.Line({
+        points: [0, lineY, maxX, lineY],
+        strokeWidth: width,
+        stroke: color,
+        hitStrokeWidth: 0,
+      });
+      this.lines.push(bline);
+    }
+    this.group.add(...this.lines);
+  }
+  clearEquisector() {
+    if (this.lines.length > 0) {
+      this.lines.forEach((line) => {
+        line.destroy();
+      });
+    }
+    this.lines.length = 0;
+  }
+  updateBackgroundStyle() {
+    if (!this.view) return;
+    const { brightness, contrast } = this.view.editor.state.config;
+    this.bgImg.cache();
+    this.bgImg.filters([Konva.Filters.Brighten, Konva.Filters.Contrast]);
+    this.bgImg.brightness(brightness / 100);
+    this.bgImg.contrast(contrast);
+  }
+}
diff --git a/frontend/image-tool/src/package/image-editor/ImageView/components/ShapeRoot.ts b/frontend/image-tool/src/package/image-editor/ImageView/components/ShapeRoot.ts
new file mode 100644
index 00000000..a78923a1
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/ImageView/components/ShapeRoot.ts
@@ -0,0 +1,113 @@
+import Konva from 'konva';
+import { v4 as uuid } from 'uuid';
+import * as utils from '../utils';
+import { removeShapeKey, addShapeKey } from '../utils';
+import { AnnotateObject } from '../shape';
+import { IFrame, AnnotateModeEnum } from '../../types';
+
+interface IShapeRoot {
+  frame?: IFrame;
+  children?: AnnotateObject[];
+  type?: AnnotateModeEnum;
+}
+const renderFilter = (e: AnnotateObject) => true;
+
+export default class ShapeRoot extends Konva.Container {
+  className: string = 'shape-root';
+  uuid: string = uuid();
+  children: AnnotateObject[] = [];
+  hasMap: Map<string, AnnotateObject> = new Map();
+  renderFilter = renderFilter;
+  frame!: IFrame;
+  type: AnnotateModeEnum = AnnotateModeEnum.INSTANCE;
+
+  constructor(config: IShapeRoot) {
+    super();
+    if (config.frame) this.frame = config.frame;
+    if (config.children) this.addObjects(config.children);
+    if (config.type) this.type = config.type;
+  }
+
+  get allObjects() {
+    return Array.from(this.hasMap.values());
+  }
+
+  addObjects(objects: AnnotateObject[] | AnnotateObject) {
+    if (!Array.isArray(objects)) objects = [objects];
+    if (objects.length === 0) return;
+
+    utils.traverse(objects, (e) => {
+      e.frame = this.frame;
+      this.hasMap.set(e.uuid, e);
+    });
+
+    objects.forEach((e) => {
+      e._clearCaches();
+      e.parent = this;
+    });
+
+    this.children.push(...objects);
+    this._setChildrenIndices();
+    addShapeKey(objects);
+    this._requestDraw();
+  }
+
+  _addObjectIndex(index: number = Infinity, object: AnnotateObject) {
+    object.parent = this;
+    object._clearCaches();
+    object.frame = this.frame;
+
+    if (index === Infinity) {
+      this.children.push(object);
+    } else {
+      index = index < 0 ? 0 : index;
+      this.children.splice(index, 0, object);
+    }
+    addShapeKey(object);
+    this._requestDraw();
+  }
+
+  addObjectIndex(index: number = Infinity, object: AnnotateObject) {
+    this._addObjectIndex(index, object);
+    this._setChildrenIndices();
+    this._requestDraw();
+  }
+
+  removeObjects(objects: AnnotateObject[] | AnnotateObject) {
+    if (!Array.isArray(objects)) objects = [objects];
+
+    utils.traverse(objects, (e) => {
+      this.hasMap.delete(e.uuid);
+    });
+
+    const delMap: any = {};
+    objects.forEach((e) => {
+      e._clearCaches();
+      delMap[e.uuid] = true;
+      e.parent = null;
+      e.remove();
+    });
+
+    this.children = this.children.filter((e) => !delMap[e.uuid]);
+    this._setChildrenIndices();
+    removeShapeKey(objects);
+    this._requestDraw();
+  }
+  destroySelf() {
+    this.removeChildren();
+    this.hasMap.clear();
+    this.remove();
+    this.destroy();
+  }
+
+  // override
+  _validateAdd(node: Konva.Node) {}
+  _drawChildren(drawMethod: string, canvas: any, top: any) {
+    // update bgRect
+    this.children?.forEach((child: AnnotateObject) => {
+      if (this.renderFilter(child)) {
+        child[drawMethod as keyof AnnotateObject](canvas, top);
+      }
+    });
+  }
+}
diff --git a/frontend/image-tool/src/package/image-editor/ImageView/index.ts b/frontend/image-tool/src/package/image-editor/ImageView/index.ts
new file mode 100644
index 00000000..2fa64d0b
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/ImageView/index.ts
@@ -0,0 +1,407 @@
+import Konva from 'konva';
+import View from './View';
+import Editor from '../Editor';
+import Actions from './actions';
+import * as utils from '../utils';
+import * as _utils from './utils';
+import { AnnotateObject, Polygon, Rect, Shape } from './shape';
+import { IShapeConfig, Vector2 } from './type';
+import { Cursor, Event } from '../configs';
+import { throttle } from 'lodash';
+import { AnnotateModeEnum, DisplayModeEnum, IStateMap, LoadStatus, ToolName } from '../types';
+import { allTools, IToolName, ShapeTool } from './shapeTool';
+import BackgroundGroup from './components/BackgroundGroup';
+import ShapeRoot from './components/ShapeRoot';
+import { colord } from 'colord';
+
+_utils.hackOverwriteShape();
+export type IFilter = (e: AnnotateObject) => boolean;
+export interface IImageViewOption {
+  actions?: string[];
+}
+export * from './shapeTool';
+export { ShapeRoot, BackgroundGroup };
+
+export default class ImageView extends View {
+  static Actions = Actions;
+  editor: Editor;
+  container: HTMLDivElement;
+  stage: Konva.Stage;
+  renderLayer: Konva.Layer;
+  helpLayer: Konva.Layer;
+  shapes: Konva.Group;
+  renderFilter: IFilter = () => true;
+
+  currentDrawTool?: ShapeTool;
+  currentEditTool?: ShapeTool;
+  toolMap: Record<string, ShapeTool> = {};
+  backgroundWidth = 1;
+  backgroundHeight = 1;
+  backgroundAsRatio = 1;
+  cursor: string = '';
+  zoomAnimation?: Konva.Animation;
+
+  constructor(editor: Editor, container: HTMLDivElement, option: IImageViewOption = {}) {
+    super();
+    this.editor = editor;
+    this.container = container;
+    this.stage = new Konva.Stage({
+      container: container,
+      width: container.clientWidth,
+      height: container.clientHeight,
+    });
+    const imageSmoothingEnabled = this.editor.state.config.imageSmoothing;
+    this.renderLayer = new Konva.Layer({ imageSmoothingEnabled });
+    this.helpLayer = new Konva.Layer({ imageSmoothingEnabled });
+    this.shapes = new Konva.Group({ sign: 'renderLayer-shapes' });
+    BackgroundGroup.getInstance().init(this);
+    const roots: any[] = [new ShapeRoot({ type: AnnotateModeEnum.INSTANCE })];
+    this.editor.dataManager.setFrameRoot('test001', roots);
+    this.shapes.add(...roots);
+
+    utils.disableContextMenu(this.renderLayer.canvas._canvas);
+    utils.disableContextMenu(this.helpLayer.canvas._canvas);
+
+    _utils.hackContext(this, this.renderLayer);
+    _utils.hackContext(this, this.helpLayer);
+
+    this.renderLayer.add(this.shapes);
+    this.stage.add(this.renderLayer, this.helpLayer);
+    const { actions } = option;
+    if (actions && actions.length > 0) this.addActions(actions);
+    this.resize = throttle(this.resize.bind(this), 50);
+    this.initEvent();
+  }
+  draw() {
+    this.stage.batchDraw();
+  }
+  initEvent() {
+    _utils.handleDragToCmd(this);
+    // draw
+    this.renderLayer.on('draw', () => {
+      this.editor.emit(Event.DRAW);
+    });
+    this.editor.on(Event.FRAME_CHANGE, () => {
+      this.currentDrawTool?.clearDraw();
+      BackgroundGroup.getInstance().updateEquisector();
+    });
+    window.addEventListener('resize', this.resize);
+    // object visible changed
+    this.editor.on(Event.ANNOTATE_VISIBLE, (objects) => {
+      const curTool = this.currentDrawTool || this.currentEditTool;
+      if (!curTool || !curTool.object) return;
+      const group = this.currentDrawTool?.drawGroup || this.currentEditTool?.editGroup || undefined;
+      if (!group) return;
+      const visible = curTool.object.showVisible;
+      if (visible) {
+        group.show();
+      } else {
+        group.hide();
+      }
+    });
+  }
+  /**
+   * renderFrame: background image && annotations
+   */
+  async renderFrame() {
+    try {
+      const frame = this.editor.getCurrentFrame();
+      if (!frame) throw `render error: the frame does not exist`;
+      const resource = this.editor.dataResource.getResourceData(frame);
+      const root_ins = this.editor.dataManager.getFrameRoot(frame.id, AnnotateModeEnum.INSTANCE);
+      if (!resource || !root_ins) {
+        frame.loadState = LoadStatus.ERROR;
+        throw `render error: resource(${frame.id}) has not be loaded`;
+      }
+      this.setBackground(resource.image);
+      this.updateShapeRoot([root_ins]);
+    } catch (err) {
+      throw `render error: ${err}`;
+    }
+  }
+  resize() {
+    const bbox = this.container.getBoundingClientRect();
+    this.stage.size(bbox);
+    this.editor.emit(Event.RESIZE);
+  }
+  imageSmoothing(val: boolean) {
+    this.renderLayer.setAttrs({ imageSmoothingEnabled: val });
+    this.helpLayer.setAttrs({ imageSmoothingEnabled: val });
+  }
+  zoomTo(newScale: number, pointer?: Konva.Vector2d) {
+    const stage = this.stage;
+    const oldScale = stage.scaleX();
+    pointer = pointer || (stage.getPointerPosition() as Konva.Vector2d);
+    if (!pointer) return;
+
+    const mousePointTo = {
+      x: (pointer.x - stage.x()) / oldScale,
+      y: (pointer.y - stage.y()) / oldScale,
+    };
+    stage.scale({ x: newScale, y: newScale });
+    const newPos = {
+      x: pointer.x - mousePointTo.x * newScale,
+      y: pointer.y - mousePointTo.y * newScale,
+    };
+    stage.position(newPos);
+    this.emit(Event.ZOOM, newScale);
+  }
+  setCursor(cursor: string) {
+    this.container.style.cursor = cursor;
+  }
+  // shaperoot
+  getRoot(type?: AnnotateModeEnum) {
+    type = type || this.editor.state.annotateMode;
+    return this.shapes.getChildren((e: ShapeRoot) => {
+      return e.type === type;
+    })[0] as any as ShapeRoot;
+  }
+  updateShapeRoot(roots?: ShapeRoot[]) {
+    if (!roots) {
+      if (!this.shapes.children || this.shapes.children.length < 1) return;
+      roots = [this.shapes.children[0], this.shapes.children[1]] as any as ShapeRoot[];
+    }
+    const { annotateMode } = this.editor.state;
+    roots.forEach((root) => {
+      root.index = root.type === annotateMode ? 1 : 0;
+      root.listening(root.type === annotateMode);
+      root.renderFilter = this.editor.getRenderFilter();
+      // resultTypeFilter.includes(root.type) ? root.show() : root.hide();
+    });
+    roots.sort((root1, root2) => root1.index - root2.index);
+    this.shapes.removeChildren();
+    this.shapes.add(...(roots as any));
+    this.draw();
+  }
+  setBackground(image?: HTMLImageElement) {
+    if (!image || !image.naturalWidth || !image.naturalHeight) return;
+    this.backgroundWidth = image.naturalWidth;
+    this.backgroundHeight = image.naturalHeight;
+    this.backgroundAsRatio = this.backgroundWidth / this.backgroundHeight;
+    BackgroundGroup.getInstance().updateBgImage(image);
+    this.fitBackgroundAsRatio();
+  }
+  fitBackgroundAsRatio(resetRotation = true) {
+    if (resetRotation) this.stage.rotation(0);
+    const bgR = this.stage.rotation();
+    let bgRect = { x: 0, y: 0, width: this.backgroundWidth, height: this.backgroundHeight };
+    const bgPoints = utils.getRectPointsWithRotation(bgRect, bgR);
+    bgRect = utils.getPointsBoundRect(bgPoints);
+
+    const width = this.stage.content.clientWidth;
+    const height = this.stage.content.clientHeight;
+
+    const scaleX = bgRect.width / width;
+    const scaleY = bgRect.height / height;
+
+    let scale = 1;
+    let offsetX = 0;
+    let offsetY = 0;
+    if (scaleX > scaleY) {
+      scale = 1 / scaleX;
+      offsetY = (height - bgRect.height * scale) / 2;
+    } else {
+      scale = 1 / scaleY;
+      offsetX = (width - bgRect.width * scale) / 2;
+    }
+    offsetX -= bgRect.x * scale;
+    offsetY -= bgRect.y * scale;
+
+    this.stage.scale({ x: scale, y: scale });
+    this.stage.position({ x: offsetX, y: offsetY });
+    this.emit(Event.ZOOM, scale, false);
+    this.emit(Event.ROTATE, this.stage.rotation());
+  }
+  rotateAroundCenter(r: number) {
+    function rotatePoint({ x, y }: Vector2, r: number) {
+      const rcos = Math.cos(r);
+      const rsin = Math.sin(r);
+      return { x: x * rcos - y * rsin, y: y * rcos + x * rsin };
+    }
+    const stagePos = this.stage.position();
+    const stageScale = this.stage.scaleX();
+    const tl = { x: -this.backgroundWidth / 2, y: -this.backgroundHeight / 2 };
+    const current = rotatePoint(tl, utils.deg2radian(this.stage.rotation()));
+    const rotated = rotatePoint(tl, utils.deg2radian(r));
+    const dx = (rotated.x - current.x) * stageScale,
+      dy = (rotated.y - current.y) * stageScale;
+    this.stage.rotation(r);
+    this.stage.position({ x: stagePos.x + dx, y: stagePos.y + dy });
+    this.emit(Event.ROTATE, r);
+  }
+  getStatePriority(object: AnnotateObject) {
+    return object.statePriority;
+  }
+  getStateStyles(object: AnnotateObject) {
+    return object.stateStyles;
+  }
+  getDefaultStyle(object: AnnotateObject) {
+    return object.stateStyles?.general || {};
+  }
+  setState(object: AnnotateObject, config: Partial<Record<keyof IStateMap, boolean>>) {
+    Object.assign(object.state || { hover: false, select: false }, config);
+    this.updateStateStyle(object);
+  }
+  updateStateStyle(objects: AnnotateObject | AnnotateObject[], viewType?: DisplayModeEnum) {
+    if (!Array.isArray(objects)) objects = [objects];
+    viewType = viewType || this.editor.state.config.viewType;
+    const isMaskMode = DisplayModeEnum.MASK === viewType;
+    objects.forEach((object) => {
+      const { skipStateStyle } = object.attrs;
+      if (skipStateStyle) return;
+
+      const statePriority = this.getStatePriority(object);
+      const stateStyles = this.getStateStyles(object);
+      let defaultStyle = this.getDefaultStyle(object);
+      if (object instanceof Rect || object instanceof Polygon) {
+        defaultStyle = { ...defaultStyle, fill: isMaskMode ? object.stroke() : '' };
+        const rgba = colord(object.stroke()).toRgb();
+        const colorRGBA = `rgba(${rgba.r},${rgba.g},${rgba.b},0)`;
+        stateStyles.hover.fill = colorRGBA;
+        stateStyles.select.fill = colorRGBA;
+      }
+      this.updateStyleByState(object, object.state, statePriority, stateStyles, defaultStyle);
+    });
+  }
+  updateStyleByState(
+    object: AnnotateObject,
+    states: IStateMap,
+    statePriority: string[],
+    stateStyle: Record<string, IShapeConfig>,
+    defaultStyle: IShapeConfig,
+  ) {
+    const config = { ...defaultStyle };
+    statePriority?.forEach((state) => {
+      if (states && states[state] && stateStyle && stateStyle[state]) {
+        Object.assign(config, stateStyle[state]);
+      }
+    });
+    object.setAttrs(config);
+  }
+  updateObjectByUserData(objects: AnnotateObject | AnnotateObject[]) {
+    if (!Array.isArray(objects)) objects = [objects];
+    objects.forEach((object) => {
+      const userData = this.editor.getUserData(object);
+      const classConfig = this.editor.getClassType(userData.classId || '');
+      let config: IShapeConfig = { stroke: classConfig ? classConfig.color : '#fff' };
+      object.setAttrs(config);
+      this.setState(object, {});
+    });
+  }
+  updateToolStyleByClass() {
+    const tool = this.currentEditTool;
+    tool && tool.object && tool.edit(tool.object);
+  }
+  updateBGDisplayModel() {
+    const frame = this.editor.getCurrentFrame();
+    const {
+      config: { viewType },
+      annotateMode,
+    } = this.editor.state;
+    const objInstance =
+      this.editor.dataManager.getFrameObject(frame.id, AnnotateModeEnum.INSTANCE) || [];
+    const objSegmentation =
+      this.editor.dataManager.getFrameObject(frame.id, AnnotateModeEnum.SEGMENTATION) || [];
+    const objectsMap: Record<AnnotateModeEnum, AnnotateObject[]> = {
+      [AnnotateModeEnum.INSTANCE]: objInstance,
+      [AnnotateModeEnum.SEGMENTATION]: objSegmentation,
+    };
+    Object.keys(objectsMap).forEach((type: AnnotateModeEnum) => {
+      const objs = objectsMap[type];
+      const objArr: any[] = objs.filter((e) => e instanceof Rect || e instanceof Polygon);
+      const inCurToolModel = annotateMode === type;
+      this.updateStateStyle(objArr, inCurToolModel ? viewType : DisplayModeEnum.MARK);
+    });
+  }
+  clearBackground() {
+    BackgroundGroup.getInstance().clearBgImage();
+  }
+  clearAllShape() {
+    this.shapes.removeChildren();
+  }
+
+  /**
+   * tool
+   */
+  setShapeTool(name: string, tool: ShapeTool) {
+    this.toolMap[name] = tool;
+  }
+  getShapeTool(name: IToolName) {
+    if (!this.toolMap[name]) {
+      const Ctr = allTools[name];
+      if (!Ctr) return;
+      const tool = new Ctr(this);
+      this.toolMap[name] = tool;
+    }
+    return this.toolMap[name];
+  }
+  enableDraw(name: IToolName | string) {
+    const tool = this.getShapeTool(name as any);
+    if (!tool) return;
+
+    const curTool = this.currentDrawTool || this.currentEditTool;
+    if (curTool?.doing()) {
+      // return this.editor.showMsg('warning', 'Please finish drawing first');
+    }
+    if (curTool) {
+      this.disableDraw();
+      this.disableEdit();
+    }
+
+    this.currentDrawTool = tool;
+    try {
+      tool.draw();
+    } catch (error) {
+      console.error(error);
+    }
+
+    this.cursor = tool.cursor;
+    this.setCursor(this.cursor);
+    if (tool.config.disableRenderLayer) {
+      this.renderLayer.listening(false);
+    }
+
+    this.editor.state.activeTool = name as any;
+    _utils.handleDrawToCmd(this, this.currentDrawTool);
+  }
+
+  disableDraw() {
+    const previousTool = this.currentDrawTool;
+    this.cursor = '';
+    this.editor.state.activeTool = ToolName.default;
+    this.setCursor(Cursor.auto);
+    this.renderLayer.listening(true);
+    this.currentDrawTool = undefined;
+    if (previousTool) {
+      previousTool.stopDraw();
+      _utils.handleDrawToCmdClear(previousTool);
+    }
+    this.editor.emit(Event.ANNOTATE_DISABLED_DRAW);
+  }
+
+  enableEdit(shape: Shape) {
+    const name = shape.className;
+    const tool = this.getShapeTool(name as any);
+    if (!tool) return;
+
+    this.disableEdit();
+    this.disableDraw();
+
+    this.currentEditTool = tool;
+    try {
+      tool.edit(shape);
+    } catch (error) {
+      console.error(error);
+    }
+    _utils.handleEditToCmd(this, this.currentEditTool);
+  }
+  disableEdit() {
+    if (!this.currentEditTool) return;
+    _utils.handleEditToCmdClear(this.currentEditTool);
+    this.currentEditTool.stopEdit();
+    this.cursor = '';
+    this.setCursor(Cursor.auto);
+    this.currentEditTool = undefined;
+    this.editor.state.activeTool = ToolName.default;
+  }
+}
diff --git a/frontend/image-tool/src/package/image-editor/ImageView/shape/Anchor.ts b/frontend/image-tool/src/package/image-editor/ImageView/shape/Anchor.ts
new file mode 100644
index 00000000..e6149dc0
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/ImageView/shape/Anchor.ts
@@ -0,0 +1,18 @@
+import { isNumber } from 'lodash';
+import { AnnotateClassName, ICircleConfig } from '../type';
+import Circle from './Circle';
+
+/**
+ * Class Anchor
+ */
+export default class Anchor extends Circle {
+  className = 'anchor' as AnnotateClassName;
+  anchorIndex: number = 0;
+  anchorType: number = -1;
+
+  constructor(config?: ICircleConfig) {
+    super(config);
+    this.anchorIndex = isNumber(config?.pointIndex) ? config?.pointIndex : 0;
+    this.anchorType = isNumber(config?.pointType) ? config?.pointType : -1;
+  }
+}
diff --git a/frontend/image-tool/src/package/image-editor/ImageView/shape/Circle.ts b/frontend/image-tool/src/package/image-editor/ImageView/shape/Circle.ts
new file mode 100644
index 00000000..ea35505b
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/ImageView/shape/Circle.ts
@@ -0,0 +1,53 @@
+import { cloneDeep } from 'lodash';
+import Konva from 'konva';
+import { AnnotateClassName, ICircleConfig } from '../type';
+import { CircleStateStyle, defaultCircleConfig } from '../../configs';
+import Shape from './Shape';
+
+// Circle Point
+export default class Circle extends Shape {
+  className = 'circle' as AnnotateClassName;
+  declare attrs: Required<ICircleConfig>;
+  _stateStyles = cloneDeep(CircleStateStyle);
+
+  constructor(config?: ICircleConfig) {
+    const _cfg = Object.assign({ sizeAttenuation: false }, defaultCircleConfig, config);
+    super(_cfg);
+    // this.stateStyles = CircleStateStyle;
+  }
+  _sceneFunc(context: Konva.Context, shape: Konva.Shape) {
+    const { radius, sizeAttenuation } = this.attrs;
+    let scale = 1;
+    if (!sizeAttenuation) {
+      const stage = this.getStage();
+      if (stage) {
+        scale = 1 / stage.scaleX();
+      }
+    }
+    context.beginPath();
+    context.arc(0, 0, radius * scale, 0, 2 * Math.PI, true);
+    context.closePath();
+    context.fillStrokeShape(shape);
+  }
+  getSelfRect(onlySelf?: boolean) {
+    const { radius, strokeWidth } = this.attrs;
+    const size = onlySelf ? 0 : radius + (strokeWidth || 0);
+    return { x: -size, y: -size, width: size * 2, height: size * 2 };
+  }
+  get stateStyles() {
+    const { general, hover, select } = this._stateStyles;
+    return {
+      general,
+      hover: {
+        ...hover,
+        radius: general?.radius + hover.radius,
+        strokeWidth: (general?.strokeWidth ?? 0) + (hover.strokeWidth ?? 0),
+      },
+      select: {
+        ...select,
+        radius: general.radius + select.radius,
+        strokeWidth: (general.strokeWidth ?? 0) + (select.strokeWidth ?? 0),
+      },
+    };
+  }
+}
diff --git a/frontend/image-tool/src/package/image-editor/ImageView/shape/Ellipse.ts b/frontend/image-tool/src/package/image-editor/ImageView/shape/Ellipse.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/frontend/image-tool/src/package/image-editor/ImageView/shape/Keypoint.ts b/frontend/image-tool/src/package/image-editor/ImageView/shape/Keypoint.ts
new file mode 100644
index 00000000..875364a6
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/ImageView/shape/Keypoint.ts
@@ -0,0 +1,17 @@
+import { AnnotateClassName, ICircleConfig } from '../type';
+import { ToolType } from '../../types';
+import Circle from './Circle';
+
+export default class KeyPoint extends Circle {
+  className = 'key-point' as AnnotateClassName;
+
+  constructor(config?: ICircleConfig) {
+    super(config);
+  }
+  newShape() {
+    return new KeyPoint();
+  }
+  get toolType() {
+    return ToolType.KEY_POINT;
+  }
+}
diff --git a/frontend/image-tool/src/package/image-editor/ImageView/shape/Line.ts b/frontend/image-tool/src/package/image-editor/ImageView/shape/Line.ts
new file mode 100644
index 00000000..c4fad05c
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/ImageView/shape/Line.ts
@@ -0,0 +1,70 @@
+import Konva from 'konva';
+import { AnnotateClassName, CacheName, IShapeConfig } from '../type';
+import { ToolType } from '../../types';
+import Shape from './Shape';
+import * as utils from '../../utils';
+import { cloneDeep } from 'lodash';
+
+export default class Line extends Shape {
+  className = 'polyline' as AnnotateClassName;
+
+  constructor(config?: IShapeConfig) {
+    super(Object.assign({ points: [] }, config));
+
+    this.on('pointsChange', function () {
+      this.onPointChange();
+    });
+  }
+  _sceneFunc(context: Konva.Context, shape: Konva.Shape) {
+    const { points } = this.attrs;
+
+    if (!points || points.length === 0) return;
+
+    context.beginPath();
+    context.moveTo(points[0].x, points[0].y);
+    for (let i = 1; i < points.length; i++) {
+      const p = points[i];
+      context.lineTo(p.x, p.y);
+    }
+
+    context.strokeShape(this);
+  }
+  onPointChange() {
+    this._clearCache('length' as CacheName);
+    super.onPointChange();
+  }
+  getLength() {
+    return this._getCache('length' as CacheName, this._getLength) as number;
+  }
+  _getLength() {
+    const { points } = this.attrs;
+    const len = utils.getLineLength(points);
+    return len;
+  }
+  getSelfRect() {
+    const { points } = this.attrs;
+    return utils.getPointsBoundRect(points);
+  }
+  _getTextPosition() {
+    this.updateTextPosition();
+    const { points, textPosIndex } = this.attrs;
+    return points[textPosIndex || 0];
+  }
+
+  updateTextPosition() {
+    const { points } = this.attrs;
+    const rect = this.getBoundRect();
+    const index = utils.getMinVectorIndex({ x: rect.x, y: rect.y }, points);
+    if (index < 0) return;
+    this.attrs.textPosIndex = index;
+  }
+  clonePointsData() {
+    return { points: cloneDeep(this.attrs.points) };
+  }
+  newShape() {
+    return new Line();
+  }
+  get toolType() {
+    return ToolType.POLYLINE;
+  }
+}
diff --git a/frontend/image-tool/src/package/image-editor/ImageView/shape/Polygon.ts b/frontend/image-tool/src/package/image-editor/ImageView/shape/Polygon.ts
new file mode 100644
index 00000000..32416d21
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/ImageView/shape/Polygon.ts
@@ -0,0 +1,91 @@
+import Konva from 'konva';
+import Shape from './Shape';
+import { IPolygonConfig, CacheName, AnnotateClassName } from '../type';
+import * as utils from '../../utils';
+import { ToolType } from '../../types';
+import { cloneDeep } from 'lodash';
+
+export default class Polygon extends Shape {
+  className = 'polygon' as AnnotateClassName;
+  declare attrs: Required<IPolygonConfig>;
+
+  constructor(config?: IPolygonConfig) {
+    super(Object.assign({ points: [], innerPoints: [] }, config));
+
+    this.on('pointsChange innerPointsChange', function () {
+      this.onPointChange();
+    });
+  }
+
+  onPointChange() {
+    this._clearCache('area' as CacheName);
+    super.onPointChange();
+  }
+
+  _sceneFunc(context: Konva.Context, shape: Konva.Shape) {
+    const { points, innerPoints } = this.attrs;
+    if (!points || points.length < 3) return;
+
+    context.beginPath();
+    context.moveTo(points[0].x, points[0].y);
+    for (let i = 1; i < points.length; i++) {
+      const p = points[i];
+      context.lineTo(p.x, p.y);
+    }
+    context.closePath();
+    if (innerPoints && innerPoints.length > 0) {
+      innerPoints.forEach((config) => {
+        const points = config.points;
+        context.moveTo(points[0].x, points[0].y);
+        for (let i = 1; i < points.length; i++) {
+          const p = points[i];
+          context.lineTo(p.x, p.y);
+        }
+        context.closePath();
+      });
+    }
+    context.fillStrokeShape(this);
+  }
+
+  getArea() {
+    return this._getCache('area' as CacheName, this._getArea) as number;
+  }
+  _getArea() {
+    const { points, innerPoints } = this.attrs;
+    const area = utils.getArea(points, innerPoints);
+    return area;
+  }
+
+  getSelfRect() {
+    const { points } = this.attrs;
+    return utils.getPointsBoundRect(points);
+  }
+
+  _getTextPosition() {
+    this.updateTextPosition();
+    const { points, textPosIndex } = this.attrs;
+    return points[textPosIndex || 0];
+  }
+
+  updateTextPosition() {
+    const { points } = this.attrs;
+    const rect = this.getBoundRect();
+    const index = utils.getMinVectorIndex({ x: rect.x, y: rect.y }, points);
+    if (index < 0) return;
+    this.attrs.textPosIndex = index;
+  }
+
+  clonePointsData() {
+    const { points, innerPoints } = this.attrs;
+    return {
+      points: cloneDeep(points),
+      innerPoints: cloneDeep(innerPoints),
+    };
+  }
+  newShape() {
+    return new Polygon();
+  }
+  get toolType() {
+    return ToolType.POLYGON;
+  }
+}
diff --git a/frontend/image-tool/src/package/image-editor/ImageView/shape/Rect.ts b/frontend/image-tool/src/package/image-editor/ImageView/shape/Rect.ts
new file mode 100644
index 00000000..da49a5c7
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/ImageView/shape/Rect.ts
@@ -0,0 +1,56 @@
+import Konva from 'konva';
+import { AnnotateClassName, IShapeConfig } from '../type';
+import { ToolType } from '../../types';
+import Shape from './Shape';
+
+export default class Rect extends Shape {
+  className = 'rect' as AnnotateClassName;
+
+  constructor(config?: IShapeConfig) {
+    const cfg = Object.assign({ width: 1, height: 1, points: [] }, config);
+    super(cfg);
+
+    this.on('xChange yChange widthChange heightChange', () => {
+      this.onPointChange();
+    });
+  }
+  _sceneFunc(context: Konva.Context, shape: Konva.Shape) {
+    const { width, height } = this.attrs;
+
+    context.beginPath();
+    context.rect(0, 0, width, height);
+    context.closePath();
+
+    context.fillStrokeShape(this);
+  }
+  get rotationCenter() {
+    const { x, y } = this.attrs;
+    return { x, y };
+  }
+  getSelfRect(onlySelf?: boolean) {
+    const { width, height } = this.attrs;
+    if (onlySelf) return { x: 0, y: 0, width, height };
+    const w = width - 2;
+    const h = height - 2;
+    return {
+      x: 1,
+      y: 1,
+      width: Math.abs(w) < 1 ? 1 : w,
+      height: Math.abs(h) < 1 ? 1 : h,
+    };
+  }
+  getArea() {
+    const { width, height } = this.attrs;
+    return width * height;
+  }
+  clonePointsData() {
+    const { width, height, x, y } = this.attrs;
+    return { width, height, x, y };
+  }
+  newShape() {
+    return new Rect();
+  }
+  get toolType() {
+    return ToolType.BOUNDING_BOX;
+  }
+}
diff --git a/frontend/image-tool/src/package/image-editor/ImageView/shape/Shape.ts b/frontend/image-tool/src/package/image-editor/ImageView/shape/Shape.ts
new file mode 100644
index 00000000..a2723062
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/ImageView/shape/Shape.ts
@@ -0,0 +1,129 @@
+import Konva from 'konva';
+import { v4 as uuid } from 'uuid';
+import { cloneDeep } from 'lodash';
+import { IFrame, IUserData, ToolType } from '../../types';
+import { defaultConfig, Cursor, defaultStateStyle } from '../../configs';
+import { IShapeConfig, Vector2, IStateMap, ITransform, IRectOption, CacheName } from '../type';
+import { AnnotateClassName } from './index';
+
+export interface IAnnotateObject {
+  className: AnnotateClassName;
+  uuid: string;
+  userData: IUserData;
+  frame: IFrame;
+  boundRect: IRectOption;
+  object?: any;
+  // state
+  state: IStateMap;
+  // style
+  stateStyles?: Record<string, IShapeConfig>;
+  statePriority?: string[];
+  showVisible: boolean;
+  toolType: ToolType | '';
+
+  clonePointsData(): ITransform;
+  cloneThisShape(children?: boolean): Shape;
+  cloneProps(prop: string): any;
+  newShape(): any;
+  // updateBoundRect(): void;
+  onPointChange(): void;
+  // updateGroup(): void;
+  remove(): this;
+  // isObject(): boolean;
+  getBoundRect(): IRectOption;
+  // _getBoundRect(): IRectOption;
+  getTextPosition(): Vector2;
+  _getTextPosition(): Vector2;
+}
+
+export default class Shape extends Konva.Shape implements IAnnotateObject {
+  className = '' as AnnotateClassName;
+  uuid = uuid();
+  userData: IUserData = {};
+  frame!: IFrame;
+  boundRect!: IRectOption;
+  object!: any;
+  state: IStateMap = {};
+  statePriority = ['hover', 'select'];
+  _stateStyles: Record<string, IShapeConfig> = cloneDeep(defaultStateStyle);
+  _editable = true;
+
+  // 统计信息
+  lastTime?: number;
+  updateTime?: number;
+  createdAt?: any;
+  createdBy?: any;
+  version?: number;
+
+  declare attrs: Required<IShapeConfig>;
+  constructor(config: IShapeConfig = {}) {
+    const _config: IShapeConfig = {
+      draggable: true,
+      x: 0,
+      y: 0,
+      stroke: '#fff',
+      cursor: Cursor.pointer,
+      skipStageScale: true,
+      selectable: true,
+    };
+    super(Object.assign(_config, defaultConfig, config));
+  }
+  get stateStyles() {
+    return this._stateStyles;
+  }
+  get defaultStyle(): IShapeConfig {
+    return this._stateStyles.general;
+  }
+  get showVisible() {
+    return this.visible();
+  }
+  set showVisible(val: boolean) {
+    this.visible(val);
+  }
+  get editable() {
+    return this._editable && this.showVisible;
+  }
+  set editable(val: boolean) {
+    this._editable = val;
+  }
+  get toolType() {
+    return '' as ToolType;
+  }
+  updateStateStyles(styles: Record<string, IShapeConfig>) {
+    const { general = {}, hover = {}, select = {} } = styles;
+    Object.assign(this._stateStyles.general, general);
+    Object.assign(this._stateStyles.hover, hover);
+    Object.assign(this._stateStyles.select, select);
+  }
+  clonePointsData(): ITransform {
+    return {};
+  }
+  cloneThisShape(): Shape {
+    const newShape = this.newShape();
+    newShape.setAttrs(this.cloneProps('attrs'));
+    newShape.userData = this.cloneProps('userData');
+    return newShape;
+  }
+  cloneProps(prop: string) {
+    return this[prop as keyof Shape] ? cloneDeep(this[prop as keyof Shape]) : {};
+  }
+  newShape() {
+    return new Shape();
+  }
+  onPointChange() {
+    this._clearCache('boundRect' as CacheName);
+    this._clearCache('textPosition' as CacheName);
+  }
+  getSelfRect(onlySelf?: boolean) {
+    return { x: 0, y: 0, width: 0, height: 0 };
+  }
+  getBoundRect() {
+    return this._getCache('boundRect' as CacheName, this.getSelfRect) as IRectOption;
+  }
+  getTextPosition() {
+    return this._getCache('textPosition' as CacheName, this._getTextPosition) as Vector2;
+  }
+  _getTextPosition(): Vector2 {
+    return { x: 0, y: 0 };
+  }
+}
diff --git a/frontend/image-tool/src/package/image-editor/ImageView/shape/index.ts b/frontend/image-tool/src/package/image-editor/ImageView/shape/index.ts
new file mode 100644
index 00000000..6daafb7b
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/ImageView/shape/index.ts
@@ -0,0 +1,11 @@
+import Shape from './Shape';
+import Circle from './Circle';
+import Anchor from './Anchor';
+import KeyPoint from './Keypoint';
+import Rect from './Rect';
+import Line from './Line';
+import Polygon from './Polygon';
+
+export { Shape, Circle, Anchor, KeyPoint, Rect, Line, Polygon };
+export type AnnotateObject = Shape;
+export type AnnotateClassName = 'rect' | 'polyline' | 'polygon' | 'key-point';
diff --git a/frontend/image-tool/src/package/image-editor/ImageView/shapeTool/KeyPointTool.ts b/frontend/image-tool/src/package/image-editor/ImageView/shapeTool/KeyPointTool.ts
new file mode 100644
index 00000000..c516e33b
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/ImageView/shapeTool/KeyPointTool.ts
@@ -0,0 +1,53 @@
+import { ToolName, Vector2 } from '../../types';
+import ShapeTool from './ShapeTool';
+import ImageView from '../index';
+import { KeyPoint } from '../shape';
+import Konva from 'konva';
+
+export default class KeyPointTool extends ShapeTool {
+  name = ToolName['key-point'];
+  points: Vector2[] = [];
+  declare object?: KeyPoint;
+
+  constructor(view: ImageView) {
+    super(view);
+  }
+
+  // draw
+  draw() {
+    this.clearDraw();
+    this.clearEvent();
+    this.initEvent();
+    this.onDrawStart();
+  }
+  stopDraw() {
+    this.clearDraw();
+    this.clearEvent();
+    this.onDrawEnd();
+  }
+  stopCurrentDraw() {
+    let keyPoint = undefined;
+    if (this.points.length === 1) keyPoint = new KeyPoint({ ...this.points[0] });
+    this.onDraw(keyPoint);
+    this.clearDraw();
+  }
+  clearDraw() {
+    this.mouseDown = false;
+    this.points = [];
+    this.onDrawClear();
+  }
+  onMouseDown(e: Konva.KonvaEventObject<MouseEvent>, point: Vector2) {
+    this.addPoint(point);
+    this.stopCurrentDraw();
+  }
+  addPoint(point: Vector2) {
+    this.points.push(point);
+  }
+  edit(object: KeyPoint) {
+    this.object = object;
+  }
+  stopEdit() {
+    this.removeChangeEvent();
+    this.object = undefined;
+  }
+}
diff --git a/frontend/image-tool/src/package/image-editor/ImageView/shapeTool/PolygonTool.ts b/frontend/image-tool/src/package/image-editor/ImageView/shapeTool/PolygonTool.ts
new file mode 100644
index 00000000..1583d962
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/ImageView/shapeTool/PolygonTool.ts
@@ -0,0 +1,296 @@
+import { IPolygonInnerConfig, MsgType, ToolName, Vector2 } from '../../types';
+import { Event } from '../../configs';
+import ImageView from '../index';
+import { Anchor, Line, Polygon, Shape } from '../shape';
+import PolylineTool from './PolylineTool';
+import * as utils from '../../utils';
+import Konva from 'konva';
+
+export default class PolygonTool extends PolylineTool {
+  name = ToolName.polygon;
+  _minPointNum = 3;
+  _innerPoints?: IPolygonInnerConfig[];
+
+  holderFill: Polygon;
+
+  constructor(view: ImageView) {
+    super(view);
+
+    this.holderFill = new Polygon({ fill: 'rgba(255,255,255,0.2)', stroke: '' });
+    this.drawGroup.add(this.holderFill);
+    this.holderFill.moveToBottom();
+    this.changeEvent = 'absoluteTransformChange pointsChange innerPointsChange';
+  }
+
+  updateLastHolderLine() {
+    const endPos = this.currentAnchor.position();
+    this.holderFill.show();
+    this.holderFill.setAttrs({ points: [...this.points, endPos] });
+    super.updateLastHolderLine();
+  }
+  stopCurrentDraw() {
+    if (this.points.length < this._minPointNum) return;
+    const poly = new Polygon({ points: this.points.slice(0) });
+    this.onDraw(poly);
+    this.onDrawEnd();
+    this.clearDraw();
+  }
+  clearDraw() {
+    this.holderFill.hide();
+    super.clearDraw();
+  }
+  // edit
+  edit(object: Shape) {
+    this.removeChangeEvent();
+    this.object = object;
+    this.initEditObject();
+    this.updateEditObject();
+    this.editGroup.show();
+    this.addChangEvent();
+  }
+  stopEdit() {
+    this.removeChangeEvent();
+    this.object = undefined;
+    this.editGroup.hide();
+  }
+  initEditObject() {
+    if (!this.object) return;
+    const object = this.object as Polygon;
+    const { points, innerPoints } = object.attrs;
+    // clear
+    const children = [...(this.editGroup.children || [])];
+    children.forEach((e) => e.destroy());
+
+    this._points = points;
+    this._innerPoints = innerPoints;
+    const realPoints = utils.getShapeRealPoint(object, points);
+
+    // anchors
+    this.addEditLines(realPoints, -1);
+    if (innerPoints) {
+      innerPoints.forEach((e, index) => {
+        this.addEditLines(utils.getShapeRealPoint(object, e.points), index);
+      });
+    }
+
+    this.addEditPoints(realPoints, -1);
+    if (innerPoints) {
+      innerPoints.forEach((e, index) => {
+        this.addEditPoints(utils.getShapeRealPoint(object, e.points), index);
+      });
+    }
+    this.selectAnchorIndex(-1, -1);
+  }
+
+  // points: -1,  innerPoints: 0 1 2 3
+  addEditPoints(points: Vector2[], typeIndex: number) {
+    points.forEach((p, index) => {
+      const anchor = new Anchor({
+        pointIndex: index,
+        pointType: typeIndex,
+        x: p.x,
+        y: p.y,
+      });
+      this.editGroup.add(anchor);
+    });
+  }
+  // points: -1,  innerPoints: 0 1 2 3
+  addEditLines(points: Vector2[], typeIndex: number) {
+    const len = points.length;
+    points.forEach((p, index) => {
+      const nextP = points[(index + 1) % len];
+      const line = new Line({
+        stroke: '#ff0000',
+        perfectDrawEnabled: false,
+        typeIndex,
+        lineIndex: index,
+        draggable: false,
+        opacity: 0,
+        points: [p, nextP],
+      });
+      this.editGroup.add(line);
+    });
+  }
+  initEditEvent() {
+    this.editGroup.on(Event.DRAG_START, () => {
+      this.onEditStart();
+    });
+
+    this.editGroup.on(Event.DRAG_MOVE, (e: Konva.KonvaEventObject<MouseEvent>) => {
+      if (!this.object) return;
+      const target = e.target;
+      const object = this.object as Polygon;
+      if (target instanceof Anchor) {
+        const { x, y, points, innerPoints } = object.attrs;
+        const pointIndex = target.anchorIndex;
+        const typeIndex = target.anchorType;
+        const anchorX = target.attrs.x as number;
+        const anchorY = target.attrs.y as number;
+
+        if (typeIndex === -1) {
+          const newPoints = points;
+          newPoints[pointIndex].x = anchorX - x;
+          newPoints[pointIndex].y = anchorY - y;
+          this.object.setAttrs({ points: newPoints });
+        } else {
+          const newPoints = innerPoints[typeIndex].points;
+          newPoints[pointIndex].x = anchorX - x;
+          newPoints[pointIndex].y = anchorY - y;
+          this.object.setAttrs({ innerPoints });
+        }
+      }
+      this.onEditChange();
+    });
+
+    this.editGroup.on(Event.DRAG_END, () => {
+      // console.log('dragstend');
+      this.onEditEnd();
+      if (!this.checkPositionWithInterior()) {
+        this.view.editor.showMsg(MsgType.warning, 'Unqualified hollow condition');
+        this.view.editor.actionManager.execute('undo');
+      }
+    });
+
+    // line
+    this.editGroup.on(Event.CLICK, (e: Konva.KonvaEventObject<MouseEvent>) => {
+      if (!this.object) return;
+      if (e.target instanceof Anchor) {
+        // select anchor
+        this.selectAnchor(e.target);
+      } else if (e.target instanceof Line) {
+        this.onPolygonEdgeEdit(e.target);
+      }
+    });
+  }
+  selectAnchor(anchor: Anchor) {
+    const { anchorIndex, anchorType } = anchor;
+    const anchors = this.editGroup.children?.filter((e) => e instanceof Anchor) as Anchor[];
+    if (!anchors || anchors.length === 0) return;
+    anchors.forEach((e) => {
+      e.state.select = anchorIndex === e.anchorIndex && anchorType === e.anchorType;
+    });
+    this.view.updateStateStyle(anchors);
+    this.selectAnchorIndex(anchorIndex, anchorType);
+    this.updateAttrHtml();
+  }
+  onPolygonEdgeEdit(target: Line) {
+    const object = this.object as Polygon;
+    const { x, y, points, innerPoints } = object.attrs;
+    const lineIndex = target.attrs.lineIndex as number;
+    const typeIndex = target.attrs.typeIndex as number;
+    this._points = undefined;
+    this.onEditStart();
+    let relPos = this.editGroup.getRelativePointerPosition() || { x: 0, y: 0 };
+    relPos = utils.getPointOnLine(relPos, target.attrs.points[0], target.attrs.points[1]);
+    if (typeIndex === -1) {
+      const newPoints = points;
+      newPoints.splice(lineIndex + 1, 0, { x: relPos.x - x, y: relPos.y - y });
+      this.updateAttrsInDataManager({ points: newPoints });
+    } else {
+      const newPoints = innerPoints[typeIndex].points;
+      newPoints.splice(lineIndex + 1, 0, { x: relPos.x - x, y: relPos.y - y });
+      this.updateAttrsInDataManager({ innerPoints });
+    }
+    this.onEditEnd();
+  }
+  onToolDelete() {
+    if (!this.object || this.object.userData.pointsLimit > 0) return;
+    const idx = this.selectAnchorIndex();
+    const type = this.anchorType();
+    const anchor = this.editGroup.children?.find(
+      (e) => e.attrs.pointIndex === idx && e.attrs.typeIndex === type,
+    );
+    if (!anchor) return;
+
+    const { points, innerPoints } = this.object.attrs;
+    const arr = type > -1 ? innerPoints[type].points : points;
+    if (arr.length <= this._minPointNum) {
+      this.view.editor.showMsg(
+        MsgType.warning,
+        `The polygon has at least ${this._minPointNum} points`,
+      );
+      return;
+    }
+
+    this.onEditStart();
+    arr.splice(idx, 1);
+    this._points = undefined;
+    this.updateAttrsInDataManager({ points, innerPoints });
+    this.onEditEnd();
+    this.view.editor.once(Event.ACTION_END, () => {
+      if (!this.checkPositionWithInterior()) {
+        this.view.editor.showMsg(MsgType.warning, 'Unqualified hollow condition');
+        this.view.editor.actionManager.execute('undo');
+      }
+    });
+  }
+  updateEditObject() {
+    if (!this.object) return;
+
+    const object = this.object as Polygon;
+    const { points, innerPoints } = object.attrs;
+    const children = this.editGroup.children || [];
+    this.editGroup.setAttrs({ x: 0, y: 0 });
+    const realPoints = utils.getShapeRealPoint(object, points);
+    const realInners = innerPoints?.map((e) => utils.getShapeRealPoint(object, e.points));
+
+    children.forEach((e) => {
+      if (e instanceof Anchor) {
+        const anchor = e as Anchor;
+        const pointIndex = anchor.anchorIndex;
+        const typeIndex = anchor.anchorType;
+
+        const p = typeIndex === -1 ? realPoints[pointIndex] : realInners[typeIndex][pointIndex];
+        const fill = object.attrs.stroke as string;
+        anchor.updateStateStyles({ general: { fill } });
+        anchor.setAttrs({ x: p.x, y: p.y, fill });
+      } else {
+        const line = e as Line;
+        const lineIndex = line.attrs.lineIndex as number;
+        const typeIndex = line.attrs.typeIndex as number;
+
+        const nexIndex =
+          typeIndex === -1
+            ? (lineIndex + 1) % realPoints.length
+            : (lineIndex + 1) % realInners[typeIndex].length;
+        const p1 = typeIndex === -1 ? realPoints[lineIndex] : realInners[typeIndex][lineIndex];
+        const p2 = typeIndex === -1 ? realPoints[nexIndex] : realInners[typeIndex][nexIndex];
+        line.setAttrs({ points: [p1, p2], x: 0, y: 0 });
+      }
+    });
+  }
+  onObjectChange() {
+    if (!this.object) return;
+    const object = this.object as Polygon;
+    const { points, innerPoints } = object.attrs;
+    if (this._points !== points || this._innerPoints !== innerPoints) {
+      this.initEditObject();
+    }
+    this.updateEditObject();
+  }
+  checkPositionWithInterior() {
+    if (!this.object) {
+      this.view.editor.showMsg(MsgType.error, 'this Object is not exist');
+      return false;
+    }
+    if (!this.object.attrs.innerPoints || this.object.attrs.innerPoints.length === 0) {
+      return true;
+    }
+    return utils.checkPolygonInnerPoints(this.object as Polygon);
+  }
+  drawInfo() {
+    let nowPoints: Vector2[] = [];
+    let nowInner: IPolygonInnerConfig[] = [];
+    if (this.object) {
+      nowPoints = this.object.attrs.points;
+      nowInner = this.object.attrs.innerPoints;
+    } else if (this.holder.visible()) {
+      nowPoints = [...this.points, this.currentAnchor.position()];
+    }
+    if (nowPoints.length > 0) {
+      const area = utils.getArea(nowPoints, nowInner);
+      return `area:${area.toFixed(0)}px`;
+    }
+    return '';
+  }
+}
diff --git a/frontend/image-tool/src/package/image-editor/ImageView/shapeTool/PolylineTool.ts b/frontend/image-tool/src/package/image-editor/ImageView/shapeTool/PolylineTool.ts
new file mode 100644
index 00000000..475c1d9c
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/ImageView/shapeTool/PolylineTool.ts
@@ -0,0 +1,304 @@
+import { ITransform, LineDrawMode, MsgType, ToolAction, ToolName, Vector2 } from '../../types';
+import { Event } from '../../configs';
+import ShapeTool from './ShapeTool';
+import ImageView from '../index';
+import { Anchor, Line, Shape } from '../shape';
+import Konva from 'konva';
+import * as utils from '../../utils';
+
+export default class PolylineTool extends ShapeTool {
+  name = ToolName.polyline;
+  _points?: Vector2[];
+  points: Vector2[] = [];
+  _minPointNum = 2;
+  intervalTm: number = 0;
+
+  holder: Line;
+  holderLastLine: Line;
+  anchors: Konva.Group;
+  currentAnchor: Anchor;
+
+  constructor(view: ImageView) {
+    super(view);
+
+    this.holder = new Line();
+    this.holderLastLine = new Line({ dash: [5, 5], strokeWidth: 2 });
+    this.anchors = new Konva.Group();
+    this.currentAnchor = new Anchor();
+    this.drawGroup.add(this.holder, this.holderLastLine, this.anchors, this.currentAnchor);
+
+    this.initEditEvent();
+    this.changeEvent = 'absoluteTransformChange pointsChange';
+  }
+  // draw
+  draw() {
+    console.log('draw');
+    this.clearDraw();
+    this.clearEvent();
+    this.initEvent();
+    this.drawGroup.show();
+    this.onDrawStart();
+  }
+  stopDraw() {
+    this.drawGroup.hide();
+    this.clearDraw();
+    this.clearEvent();
+    this.onDrawEnd();
+  }
+  stopCurrentDraw() {
+    if (this.points.length < this._minPointNum) return;
+    const line = new Line({ points: this.points.slice(0) });
+    this.onDraw(line);
+    this.onDrawEnd();
+    this.clearDraw();
+  }
+  clearDraw() {
+    this.mouseDown = false;
+    this.points = [];
+    this.holder.hide();
+    this.holderLastLine.hide();
+    this.anchors.removeChildren();
+    this.currentAnchor.hide();
+  }
+  undoDraw() {
+    if (this.points.length === 0) return;
+
+    this.points.pop();
+    const children = this.anchors.children || [];
+    const anchor = children[children.length - 1] as Anchor;
+    anchor?.remove();
+    anchor?.destroy();
+    if (this.points.length > 0) {
+      this.updateHolder();
+    } else {
+      this.clearDraw();
+    }
+    this.onDrawChange();
+  }
+  drawInfo() {
+    if (this.object) {
+      const len = utils.getLineLength(this.object.attrs.points);
+      return `length:${len.toFixed(0)}px`;
+    } else if (this.holder.visible()) {
+      const points = [...this.points, this.currentAnchor.position()];
+      const len = utils.getLineLength(points);
+      return `length:${len.toFixed(0)}px`;
+    }
+    return '';
+  }
+  onMouseDown(e: Konva.KonvaEventObject<MouseEvent>, point: Vector2) {
+    point = this.updateHolderAnchor(point);
+    this.addPoint(point);
+    this.updateHolder();
+  }
+  onMouseMove(e: Konva.KonvaEventObject<MouseEvent>, point: Vector2) {
+    this.updateHolderAnchor(point);
+    this.updateLastHolderLine();
+    this.autoAddPoint(point);
+    this.onDrawChange();
+  }
+  autoAddPoint(point: Vector2) {
+    if (!this.mouseDowning) return;
+    const { polyAuto, polyAutoTm } = this.view.editor.state.toolConfig;
+    if (!polyAuto) return;
+    if (Date.now() - this.intervalTm < polyAutoTm) return;
+    this.intervalTm = Date.now();
+    this.addPoint(point);
+    this.updateHolder();
+  }
+  addPoint(point: Vector2) {
+    this.points.push(point);
+    this.anchors.add(new Anchor({ ...point }));
+  }
+  updateHolder() {
+    this.holder.show();
+    this.holder.setAttrs({ points: this.points });
+    this.updateHolderAnchor(this.currentAnchor.attrs.originPos);
+    this.updateLastHolderLine();
+  }
+  updateLastHolderLine() {
+    const endPos = this.currentAnchor.position();
+    this.holderLastLine.setAttrs({
+      points: [this.points[this.points.length - 1], endPos],
+    });
+    this.holderLastLine.show();
+    this.currentAnchor.show();
+  }
+  updateHolderAnchor(pos: Vector2) {
+    if (!pos) return { x: 0, y: 0 };
+    const mode = this.view.editor.state.toolConfig.lineMode;
+    this.currentAnchor.setAttrs({ originPos: pos });
+    const lastPoint = this.points[this.points.length - 1];
+    if (mode === LineDrawMode.horizontal && lastPoint) {
+      pos = { x: pos.x, y: lastPoint.y };
+    } else if (mode === LineDrawMode.vertical && lastPoint) {
+      pos = { x: lastPoint.x, y: pos.y };
+    }
+    this.currentAnchor.position(pos);
+    return pos;
+  }
+  doing(): boolean {
+    return this.points.length > 0;
+  }
+
+  // edit
+  edit(object: Shape) {
+    this.removeChangeEvent();
+    this.object = object;
+    this.initEditObject();
+    this.updateEditObject();
+    this.editGroup.show();
+    this.addChangEvent();
+  }
+  stopEdit() {
+    this.removeChangeEvent();
+    this.object = undefined;
+    this.editGroup.hide();
+  }
+  initEditObject() {
+    if (!this.object) return;
+    const object = this.object as Line;
+    const { points } = object.attrs;
+    // clear
+    const children = [...(this.editGroup.children || [])];
+    children.forEach((e) => e.destroy());
+    this._points = points;
+    const realPoints = utils.getShapeRealPoint(object, points);
+    realPoints.forEach((p, index) => {
+      if (index >= realPoints.length - 1) return;
+      const nextP = realPoints[index + 1];
+      const line = new Line({
+        lineIndex: index,
+        draggable: false,
+        opacity: 0,
+        points: [p, nextP],
+      });
+      this.editGroup.add(line);
+    });
+
+    realPoints.forEach((p, index) => {
+      const anchor = new Anchor({ pointIndex: index, x: p.x, y: p.y });
+      this.editGroup.add(anchor);
+    });
+    this.selectAnchorIndex(-1);
+  }
+  initEditEvent() {
+    this.editGroup.on(Event.DRAG_START, (e: Konva.KonvaEventObject<MouseEvent>) => {
+      this.onEditStart();
+    });
+
+    this.editGroup.on(Event.DRAG_MOVE, (e: Konva.KonvaEventObject<MouseEvent>) => {
+      if (!this.object) return;
+      const target = e.target;
+      if (target instanceof Anchor) {
+        const { x, y, points } = this.object.attrs;
+        const pointIndex = target.anchorIndex as number;
+        const anchorX = target.attrs.x as number;
+        const anchorY = target.attrs.y as number;
+        points[pointIndex].x = anchorX - x;
+        points[pointIndex].y = anchorY - y;
+        this.object.setAttrs({ points });
+      }
+      this.onEditChange();
+    });
+
+    this.editGroup.on(Event.DRAG_END, () => {
+      this.onEditEnd();
+    });
+
+    // line
+    this.editGroup.on(Event.CLICK, (e: Konva.KonvaEventObject<MouseEvent>) => {
+      if (!this.object) return;
+      const target = e.target;
+      const object = this.object as Line;
+      if (target instanceof Line) {
+        const { x, y, points } = object.attrs;
+        const lineIndex = target.attrs.lineIndex as number;
+        this.onEditStart();
+        let relPos = this.editGroup.getRelativePointerPosition() || { x: 0, y: 0 };
+        relPos = utils.getPointOnLine(relPos, target.attrs.points[0], target.attrs.points[1]);
+        points.splice(lineIndex + 1, 0, { x: relPos.x - x, y: relPos.y - y });
+        this._points = undefined;
+        this.updateAttrsInDataManager({ points });
+        this.onEditEnd();
+      } else if (target instanceof Anchor) {
+        this.updateAnchors(target.attrs.pointIndex);
+      }
+    });
+  }
+  updateEditObject() {
+    if (!this.object) return;
+    const { points } = this.object.attrs;
+    const children = this.editGroup.children || [];
+    this.editGroup.setAttrs({ x: 0, y: 0 });
+    const realPoints = utils.getShapeRealPoint(this.object, points);
+
+    children.forEach((e) => {
+      if (e instanceof Anchor) {
+        const anchor = e as Anchor;
+        const pointIndex = anchor.anchorIndex as number;
+        const p = realPoints[pointIndex];
+        const fill = this.object?.attrs.stroke as string;
+        anchor.updateStateStyles({ general: { fill } });
+        anchor.setAttrs({ x: p.x, y: p.y, fill });
+      } else {
+        const line = e as Line;
+        const lineIndex = line.attrs.lineIndex as number;
+        const p1 = realPoints[lineIndex];
+        const p2 = realPoints[lineIndex + 1];
+        line.setAttrs({ points: [p1, p2], x: 0, y: 0 });
+      }
+    });
+  }
+  updateAnchors(idx: number = -1) {
+    const anchors = this.editGroup.children?.filter((e) => e instanceof Anchor) as Anchor[];
+    if (!anchors || anchors.length === 0) return;
+    anchors.forEach((e) => {
+      e.state.select = idx === e.anchorIndex;
+    });
+    this.view.updateStateStyle(anchors);
+    this.selectAnchorIndex(idx);
+  }
+  onObjectChange() {
+    if (!this.object) return;
+
+    const object = this.object as Line;
+    const { points } = object.attrs;
+
+    if (this._points !== points) {
+      this.initEditObject();
+    }
+    this.updateEditObject();
+  }
+  checkEditAction(action: ToolAction) {
+    return [ToolAction.del, ToolAction.esc].includes(action) && this.selectAnchorIndex() !== -1;
+  }
+  onToolDelete() {
+    if (!this.object) return;
+    const idx = this.selectAnchorIndex();
+    const anchor = this.editGroup.children?.find((e) => (e as Anchor).anchorIndex === idx);
+    if (!anchor) return;
+
+    const { points } = this.object.attrs;
+    if (points.length <= this._minPointNum) {
+      this.view.editor.showMsg(
+        MsgType.warning,
+        `The line has at least ${this._minPointNum} points`,
+      );
+      return;
+    }
+
+    this.onEditStart();
+    points.splice(idx, 1);
+    this._points = undefined;
+    this.updateAttrsInDataManager({ points });
+    this.onEditEnd();
+  }
+  updateAttrsInDataManager(attrs: ITransform) {
+    if (!this.object) return;
+    this.view.editor.dataManager.setAnnotatesTransform(this.object, attrs);
+  }
+  clearEdit() {
+    this.updateAnchors(-1);
+  }
+}
diff --git a/frontend/image-tool/src/package/image-editor/ImageView/shapeTool/RectTool.ts b/frontend/image-tool/src/package/image-editor/ImageView/shapeTool/RectTool.ts
new file mode 100644
index 00000000..703afe4a
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/ImageView/shapeTool/RectTool.ts
@@ -0,0 +1,453 @@
+import Konva from 'konva';
+import { ToolAction, ToolName, Vector2 } from '../../types';
+import { Cursor, Event, defaultCircleConfig } from '../../configs';
+import ShapeTool from './ShapeTool';
+import ImageView from '../index';
+import { Anchor, Line, Rect, Shape } from '../shape';
+import * as utils from '../../utils';
+import { handleRotateToCmd } from '../utils';
+
+// rect lines
+enum Lines {
+  TOP = 'line-top',
+  BOTTOM = 'line-bottom',
+  LEFT = 'line-left',
+  RIGHT = 'line-right',
+  TRANS = 'line-trans',
+}
+// rect anchors
+enum Anchors {
+  TOPLEFT = 'top-left',
+  TOPRIGHTT = 'top-right',
+  BOTTOMLEFT = 'bottom-left',
+  BOTTOMRIGHT = 'bottom-right',
+  TRANS = 'rotater',
+}
+// clockwise
+const AnchorsOrder = [Anchors.TOPLEFT, Anchors.TOPRIGHTT, Anchors.BOTTOMRIGHT, Anchors.BOTTOMLEFT];
+
+export default class RectTool extends ShapeTool {
+  name = ToolName.rect;
+  points: Vector2[] = [];
+  // draw
+  holder: Rect;
+  currentAnchor: Anchor;
+  anchors: Konva.Group;
+  // edit
+  declare object?: Rect;
+  editObjectMap = {} as Record<Anchors | Lines, Shape>;
+  transform: Konva.Transformer = new Konva.Transformer({
+    resizeEnabled: false,
+    // rotationSnaps: [0, 90, 180, 270],
+    // rotationSnapTolerance: 5,
+    borderEnabled: true,
+    enabledAnchors: [
+      'top-left',
+      'top-right',
+      'bottom-left',
+      'bottom-right',
+      'middle-right',
+      'middle-left',
+      'top-center',
+      'bottom-center',
+    ],
+  });
+  // drag
+  dragging = false;
+  dragObject!: any;
+  dragLastPos: Vector2 | undefined;
+
+  constructor(view: ImageView) {
+    super(view);
+    this.holder = new Rect({ dash: [5, 5], strokeWidth: 2 });
+    this.currentAnchor = new Anchor();
+    this.anchors = new Konva.Group();
+    this.drawGroup.add(this.holder, this.anchors, this.currentAnchor);
+
+    // edit
+    this.initEditObject();
+    this.initEditEvent();
+    this.changeEvent = 'absoluteTransformChange widthChange heightChange transform';
+    handleRotateToCmd(this.view, this.transform);
+  }
+  doing(): boolean {
+    return this.points.length > 0;
+  }
+  validPoint(p: Vector2, referPoint?: Vector2) {
+    if (!referPoint) return true;
+    const w = p.x - referPoint.x;
+    const h = p.y - referPoint.y;
+    if (this.invalidSide(w) || this.invalidSide(h)) return false;
+    return true;
+  }
+  invalidSide(val: number) {
+    if (!val || Math.abs(val) < 0.01) return true;
+    return false;
+  }
+  // draw
+  draw() {
+    console.log('draw');
+    this.clearDraw();
+    this.clearEvent();
+    this.initEvent();
+    this.drawGroup.show();
+    this.onDrawStart();
+  }
+  stopDraw() {
+    this.clearDraw();
+    this.clearEvent();
+    this.drawGroup.hide();
+    this.onDrawEnd();
+  }
+  clearDraw() {
+    this.mouseDown = false;
+    this.points = [];
+    this.holder.hide();
+    this.currentAnchor.hide();
+    this.anchors.removeChildren();
+    this.onDrawClear();
+  }
+  stopCurrentDraw() {
+    let rect = undefined;
+    if (this.points.length === 2) {
+      const rectOption = utils.getRectFromPoints(this.points as any);
+      rect = new Rect(rectOption);
+    }
+    this.onDraw(rect);
+    this.clearDraw();
+  }
+  undoDraw() {
+    this.clearDraw();
+  }
+  drawInfo() {
+    if (!this.holder.visible()) return '';
+    const { width, height } = this.holder.attrs;
+    return `width:${Math.abs(width).toFixed(0)}px;
+      height:${Math.abs(height).toFixed(0)}px;
+      area:${Math.abs(width * height).toFixed(0)};
+      W/H:${Math.abs(width / height).toFixed(2)};`;
+  }
+  onMouseDown(e: Konva.KonvaEventObject<MouseEvent>, point: Vector2) {
+    this.addPoint(point);
+    if (this.points.length >= 2) {
+      this.stopCurrentDraw();
+    }
+  }
+  onMouseMove(e: Konva.KonvaEventObject<MouseEvent>, point: Vector2) {
+    this.currentAnchor.position(point);
+    this.updateHolder();
+    this.onDrawChange();
+  }
+  addPoint(point: Vector2) {
+    if (this.validPoint(point, this.points[0])) {
+      this.points.push(point);
+      this.anchors.add(new Anchor({ ...point }));
+    }
+  }
+  updateHolder() {
+    const startPos = this.points[0];
+    const endPos = this.currentAnchor.position();
+
+    const rectOption = utils.getRectFromPoints([startPos, endPos]);
+    this.holder.setAttrs(rectOption);
+
+    this.holder.show();
+    this.currentAnchor.show();
+  }
+
+  // edit
+  edit(object: Rect) {
+    this.removeChangeEvent();
+    this._hoverIndex = -1;
+    this.object = object;
+    this.updateAnchors(-1);
+    this.updateEditObject();
+    this.updateTransformer();
+    this.editGroup.show();
+
+    this.addChangEvent();
+  }
+  stopEdit() {
+    this.removeChangeEvent();
+    this.transform.detach();
+    this.object = undefined;
+    this.editGroup.hide();
+  }
+  initEditObject() {
+    this.editGroup.add(this.transform);
+    const lines = [Lines.BOTTOM, Lines.LEFT, Lines.RIGHT, Lines.TOP];
+    const cursor = Cursor.move;
+    lines.forEach((id) => {
+      const line = new Line({
+        id,
+        cursor,
+        points: [
+          { x: 0, y: 0 },
+          { x: 0, y: 0 },
+        ],
+        opacity: 0,
+      });
+      this.editGroup.add(line);
+      this.editObjectMap[id] = line;
+    });
+
+    const anchors = [Anchors.BOTTOMLEFT, Anchors.BOTTOMRIGHT, Anchors.TOPLEFT, Anchors.TOPRIGHTT];
+    anchors.forEach((id) => {
+      const anchor = new Anchor({ id, cursor });
+      this.editGroup.add(anchor);
+      this.editObjectMap[id] = anchor;
+    });
+  }
+  initEditEvent() {
+    let endRect: { x: number; y: number; width: number; height: number } | undefined;
+    this.editGroup.on(Event.DRAG_START, (e: Konva.KonvaEventObject<MouseEvent>) => {
+      endRect = undefined;
+      this.onEditStart();
+      // drag
+      this.dragging = true;
+      this.dragObject = e.target;
+      this.dragLastPos = { x: this.dragObject.x(), y: this.dragObject.y() };
+    });
+
+    this.editGroup.on(Event.DRAG_MOVE, (e: Konva.KonvaEventObject<MouseEvent>) => {
+      if (!this.dragging) return;
+
+      const dragNode = e.target;
+      this.validLineDrag(dragNode);
+      const id = dragNode.attrs.id;
+      const rect = this.object as Rect;
+      const { x, y } = dragNode.attrs;
+
+      const r = rect.rotation();
+      let rectInfo = { x: 0, y: 0, width: 0, height: 0 };
+      let compareAnchor: Shape, transPos: Vector2;
+      let topLeft!: Vector2, topRight!: Vector2, bottomLeft!: Vector2, bottomRight!: Vector2;
+      let newWidth: number = 0,
+        newHeight: number = 0,
+        newPos: Vector2 = { x: 0, y: 0 };
+
+      if (id === Lines.TOP) {
+        topLeft = { x, y };
+        const bottomLeftAnchor = this.editObjectMap[Anchors.BOTTOMLEFT];
+        bottomLeft = { x: bottomLeftAnchor.x(), y: bottomLeftAnchor.y() };
+        const bottomTrans = utils.countTransformPoint(topLeft, bottomLeft, -r);
+        newWidth = rect.attrs.width;
+        newHeight = bottomTrans.y - topLeft.y;
+      } else if (id === Lines.BOTTOM) {
+        const topLeftAnchor = this.editObjectMap[Anchors.TOPLEFT];
+        topLeft = { x: topLeftAnchor.x(), y: topLeftAnchor.y() };
+        transPos = utils.countTransformPoint(topLeft, { x, y }, -r);
+
+        newWidth = rect.attrs.width;
+        newHeight = transPos.y - topLeft.y + dragNode.attrs.points[0].y;
+        bottomLeft = { x: topLeft.x, y: topLeft.y + newHeight };
+        bottomLeft = utils.countTransformPoint(topLeft, bottomLeft, r);
+      } else if (id === Lines.LEFT) {
+        topLeft = { x, y };
+        const topRightAnchor = this.editObjectMap[Anchors.TOPRIGHTT];
+        topRight = { x: topRightAnchor.x(), y: topRightAnchor.y() };
+        const rightTrans = utils.countTransformPoint(topLeft, topRight, -r);
+        newWidth = rightTrans.x - topLeft.x;
+        newHeight = rect.attrs.height;
+      } else if (id === Lines.RIGHT) {
+        const topLeftAnchor = this.editObjectMap[Anchors.TOPLEFT];
+        topLeft = { x: topLeftAnchor.x(), y: topLeftAnchor.y() };
+        transPos = utils.countTransformPoint(topLeft, { x, y }, -r);
+
+        newWidth = transPos.x - topLeft.x + dragNode.attrs.points[0].x;
+        newHeight = rect.attrs.height;
+        topRight = { x: topLeft.x + newWidth, y: topLeft.y };
+        topRight = utils.countTransformPoint(topLeft, topRight, r);
+      } else if (id === Anchors.TOPLEFT) {
+        topLeft = { x, y };
+        compareAnchor = this.editObjectMap[Anchors.BOTTOMRIGHT];
+        bottomRight = { x: compareAnchor.x(), y: compareAnchor.y() };
+        transPos = utils.countTransformPoint(bottomRight, topLeft, -r);
+        topRight = utils.countTransformPoint(bottomRight, { x: bottomRight.x, y: transPos.y }, r);
+        bottomLeft = utils.countTransformPoint(bottomRight, { x: transPos.x, y: bottomRight.y }, r);
+        newWidth = bottomRight.x - transPos.x;
+        newHeight = bottomRight.y - transPos.y;
+      } else if (id === Anchors.TOPRIGHTT) {
+        topRight = { x, y };
+        compareAnchor = this.editObjectMap[Anchors.BOTTOMLEFT];
+        bottomLeft = { x: compareAnchor.x(), y: compareAnchor.y() };
+        transPos = utils.countTransformPoint(bottomLeft, topRight, -r);
+        topLeft = utils.countTransformPoint(bottomLeft, { x: bottomLeft.x, y: transPos.y }, r);
+        bottomRight = utils.countTransformPoint(bottomLeft, { x: transPos.x, y: bottomLeft.y }, r);
+        newWidth = transPos.x - bottomLeft.x;
+        newHeight = bottomLeft.y - transPos.y;
+      } else if (id === Anchors.BOTTOMLEFT) {
+        bottomLeft = { x, y };
+        compareAnchor = this.editObjectMap[Anchors.TOPRIGHTT];
+        topRight = { x: compareAnchor.x(), y: compareAnchor.y() };
+        transPos = utils.countTransformPoint(topRight, bottomLeft, -r);
+        topLeft = utils.countTransformPoint(topRight, { x: transPos.x, y: topRight.y }, r);
+        bottomRight = utils.countTransformPoint(topRight, { x: topRight.x, y: transPos.y }, r);
+        newWidth = topRight.x - transPos.x;
+        newHeight = transPos.y - topRight.y;
+      } else if (id === Anchors.BOTTOMRIGHT) {
+        bottomRight = { x, y };
+        compareAnchor = this.editObjectMap[Anchors.TOPLEFT];
+        topLeft = { x: compareAnchor.x(), y: compareAnchor.y() };
+        transPos = utils.countTransformPoint(topLeft, bottomRight, -r);
+        topRight = utils.countTransformPoint(topLeft, { x: transPos.x, y: topLeft.y }, r);
+        bottomLeft = utils.countTransformPoint(topLeft, { x: topLeft.x, y: transPos.y }, r);
+        newWidth = transPos.x - topLeft.x;
+        newHeight = transPos.y - topLeft.y;
+      }
+      rectInfo = { ...topLeft, width: newWidth, height: newHeight };
+      if (newWidth < 0 && newHeight < 0) newPos = bottomRight;
+      else if (newWidth < 0) newPos = topRight;
+      else if (newHeight < 0) newPos = bottomLeft;
+      else newPos = topLeft;
+      endRect = { ...newPos, width: Math.abs(newWidth), height: Math.abs(newHeight) };
+      this.dragLastPos = { x: this.dragObject.x(), y: this.dragObject.y() };
+      rect.setAttrs(rectInfo);
+      this.updateEditObject();
+      this.onEditChange();
+    });
+
+    this.editGroup.on(Event.DRAG_END, (e: Konva.KonvaEventObject<MouseEvent>) => {
+      // console.log('dragstend');
+      this.dragging = false;
+      this.dragObject = undefined;
+      this.dragLastPos = undefined;
+      endRect && this.object?.setAttrs(endRect);
+      endRect = undefined;
+      this.updateEditObject();
+      this.onEditEnd();
+      if (this.object) {
+        if (this.invalidSide(this.object.width()) || this.invalidSide(this.object.height())) {
+          this.view.editor.actionManager.execute('undo');
+        }
+      }
+    });
+
+    this.editGroup.on(Event.CLICK, (e: Konva.KonvaEventObject<MouseEvent>) => {
+      const isAnchors = Object.values(Anchors).includes(e.target.attrs?.id);
+      if (e.target instanceof Anchor && isAnchors) {
+        const idx = AnchorsOrder.indexOf(e.target.attrs?.id as any);
+        this.updateAnchors(idx);
+      }
+    });
+  }
+  updateTransformer() {
+    if (!this.object) return;
+    const anchorStyle = defaultCircleConfig;
+    this.transform.setAttrs({
+      anchorFill: anchorStyle.fill,
+      anchorSize: ((anchorStyle.radius || 3) + (anchorStyle.strokeWidth || 2)) * 2,
+      anchorStrokeWidth: anchorStyle.strokeWidth,
+      anchorStroke: this.object.stroke(),
+      borderStroke: this.object.stroke(),
+    });
+    this.transform.nodes([this.object]);
+    const rotaterAnchor = this.transform.getChildren((child: any) => {
+      return child.attrs.name?.indexOf('rotater') != -1;
+    })[0];
+    if (rotaterAnchor) {
+      rotaterAnchor.on('mouseenter', () => {
+        const stage = rotaterAnchor.getStage();
+        if (stage && stage.content) {
+          stage.content.style.cursor = Cursor.rotating;
+        }
+      });
+    }
+  }
+  updateEditObject() {
+    if (!this.object) return;
+    const object = this.object;
+    const { x, y, width, height, rotation = 0 } = object.attrs;
+    this.editGroup.setAttrs({ x: 0, y: 0 });
+
+    const children = this.editGroup.children || [];
+    const left = x;
+    const top = y;
+    const right = x + width;
+    const bottom = y + height;
+    children.forEach((e) => {
+      if (e === this.dragObject || e instanceof Konva.Transformer) return;
+
+      const id = e.attrs.id as any;
+      const isAnchors = Object.values(Anchors).includes(id);
+      const isLines = Object.values(Lines).includes(id);
+      const center = object.rotationCenter;
+      if (isAnchors) {
+        const anchor = e as Anchor;
+        anchor.updateStateStyles({ general: { fill: object.attrs.stroke as string } });
+        anchor.fill(object.attrs.stroke as string);
+        if (id === Anchors.TOPLEFT) {
+          anchor.position(utils.countTransformPoint(center, { x: left, y: top }, rotation));
+        } else if (id === Anchors.TOPRIGHTT) {
+          anchor.position(utils.countTransformPoint(center, { x: right, y: top }, rotation));
+        } else if (id === Anchors.BOTTOMLEFT) {
+          anchor.position(utils.countTransformPoint(center, { x: left, y: bottom }, rotation));
+        } else if (id === Anchors.BOTTOMRIGHT) {
+          anchor.position(utils.countTransformPoint(center, { x: right, y: bottom }, rotation));
+        }
+      } else if (isLines) {
+        const line = e as Line;
+        line.position(center);
+        line.rotation(rotation);
+        line.setAttrs({ center });
+        const point0 = line.attrs.points[0];
+        const point1 = line.attrs.points[1];
+        if (id === Lines.TOP) {
+          point1.x = width;
+          point1.y = 0;
+        } else if (id === Lines.BOTTOM) {
+          point0.x = 0;
+          point0.y = height;
+          point1.x = width;
+          point1.y = height;
+        } else if (id === Lines.LEFT) {
+          point1.x = 0;
+          point1.y = height;
+        } else if (id === Lines.RIGHT) {
+          point0.x = width;
+          point0.y = 0;
+          point1.x = width;
+          point1.y = height;
+        }
+      }
+    });
+  }
+  updateAnchors(idx: number = -1) {
+    AnchorsOrder.forEach((id, i) => {
+      const anchor = this.editObjectMap[id];
+      anchor.state.select = i === idx;
+    });
+    this.view.updateStateStyle(AnchorsOrder.map((e) => this.editObjectMap[e]));
+    this.selectAnchorIndex(idx);
+    this.updateAttrHtml();
+  }
+  validLineDrag(dragNode: any) {
+    const { x, y, rotation = 0, id } = dragNode.attrs;
+    const isLines = Object.values(Lines).includes(id);
+    if (!this.object || !isLines) return;
+
+    const topLeftAnchor = this.editObjectMap[Anchors.TOPLEFT];
+    const topleft = { x: topLeftAnchor.x(), y: topLeftAnchor.y() };
+    const transPos = utils.countTransformPoint(topleft, { x, y }, -rotation);
+
+    let validPos = { x: 0, y: 0 };
+    if (id === Lines.TOP || id === Lines.BOTTOM) {
+      transPos.x = topleft.x;
+    } else if (id === Lines.LEFT || id === Lines.RIGHT) {
+      transPos.y = topleft.y;
+    }
+
+    validPos = utils.countTransformPoint(topleft, transPos, rotation);
+    dragNode.position(validPos);
+  }
+  onObjectChange() {
+    if (this.dragging) return;
+    this.updateEditObject();
+  }
+  checkEditAction(action: ToolAction) {
+    return [ToolAction.esc].includes(action) && this.selectAnchorIndex() !== -1;
+  }
+  clearEdit() {
+    this.updateAnchors(-1);
+  }
+}
diff --git a/frontend/image-tool/src/package/image-editor/ImageView/shapeTool/ShapeTool.ts b/frontend/image-tool/src/package/image-editor/ImageView/shapeTool/ShapeTool.ts
new file mode 100644
index 00000000..406ac158
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/ImageView/shapeTool/ShapeTool.ts
@@ -0,0 +1,313 @@
+import { AnnotateObject, Anchor } from '../shape';
+import Konva from 'konva';
+import ImageView from '../index';
+import EventEmitter from 'eventemitter3';
+import { Cursor, Event } from '../../configs';
+import { Vector2, ToolAction, AnnotateModeEnum, StatusType, ToolName } from '../../types';
+import { isBoolean, isNumber } from 'lodash';
+
+export type ToolEvent =
+  | 'object'
+  | 'draw-start'
+  | 'draw-clear'
+  | 'draw-change'
+  | 'draw-end'
+  | 'edit-start'
+  | 'edit-change'
+  | 'edit-end';
+
+interface IConfig {
+  disableRenderLayer: boolean;
+}
+
+export default class ShapeTool extends EventEmitter {
+  name: ToolName = ToolName.default;
+  toolMode: AnnotateModeEnum = AnnotateModeEnum.INSTANCE;
+  view: ImageView;
+  enable: boolean = true;
+  cursor: string = Cursor.crosshair;
+  // config
+  config: IConfig = {
+    disableRenderLayer: true,
+  };
+  // draw
+  drawGroup: Konva.Group;
+  mouseDown: boolean = false;
+  mouseDowning: boolean = false;
+  holder!: AnnotateObject;
+  currentAnchor!: Anchor;
+  // edit
+  editGroup: Konva.Group;
+  _anchorIndex = -1;
+  _anchorType = -1;
+  _hoverIndex = -1;
+  _hoverType = -1;
+  // help
+  helpGroup: Konva.Group;
+  object?: AnnotateObject;
+  changeEvent: string = '';
+  roundMousePoint = false;
+  constructor(view: ImageView) {
+    super();
+    this.view = view;
+    this.drawGroup = new Konva.Group({ visible: false, sign: 'tool-draw-group' });
+    this.editGroup = new Konva.Group({ visible: false, sign: 'tool-edit-group' });
+    this.helpGroup = new Konva.Group({ visible: false, sign: 'tool-help-group' });
+    this.drawGroup.listening(false);
+    this.view.helpLayer.add(this.drawGroup);
+    this.view.helpLayer.add(this.editGroup);
+    this.view.helpLayer.add(this.helpGroup);
+
+    this._onMouseDown = this._onMouseDown.bind(this);
+    this._onMouseMove = this._onMouseMove.bind(this);
+    this._onMouseUp = this._onMouseUp.bind(this);
+    this._onDocMouseUp = this._onDocMouseUp.bind(this);
+
+    this._onObjectChange = this._onObjectChange.bind(this);
+  }
+  // hooks
+  /**
+   * start
+   */
+  draw() {}
+  /**
+   * stop
+   */
+  stopDraw() {}
+  /**
+   * clear
+   */
+  clearDraw() {}
+  /**
+   * complete
+   */
+  stopCurrentDraw() {}
+  /**
+   * undo
+   */
+  undoDraw() {}
+  /**
+   * delete
+   */
+  onToolDelete() {}
+  /**
+   * update
+   */
+  updateTool() {}
+  updateHolder() {}
+  /**
+   * complete handler
+   */
+  onDraw(object: AnnotateObject | AnnotateObject[] | undefined) {
+    this.emit('object' as ToolEvent, object);
+  }
+  onDrawStart() {
+    this.emit('draw-start' as ToolEvent);
+  }
+  onDrawChange() {
+    this.emit('draw-change' as ToolEvent);
+    this.updateStatus();
+  }
+  onDrawClear() {
+    this.emit('draw-clear' as ToolEvent);
+    this.updateStatus(false);
+  }
+  onDrawEnd() {
+    this.emit('draw-end' as ToolEvent);
+    this.updateStatus(false);
+  }
+  drawInfo() {
+    return '';
+  }
+
+  doing(): boolean {
+    return false;
+  }
+
+  updateStatus(doing?: boolean) {
+    const state = this.view.editor.state;
+    doing = isBoolean(doing) ? doing : this.doing();
+    const toStatus = doing ? StatusType.Create : StatusType.Default;
+    const curStatus = state.status;
+    if (toStatus === curStatus) return;
+    state.status = toStatus;
+  }
+
+  // edit
+  edit(object: AnnotateObject) {}
+  updateEditObject() {}
+  stopEdit() {}
+  clearEdit() {}
+
+  onEditStart() {
+    this.emit('edit-start' as ToolEvent);
+  }
+  onEditChange() {
+    this.object?.onPointChange();
+    this.emit('edit-change' as ToolEvent);
+  }
+  onEditEnd() {
+    this.emit('edit-end' as ToolEvent);
+  }
+  selectAnchorIndex(val?: number, type?: number) {
+    if (isNumber(val)) {
+      this.anchorType(isNumber(type) ? type : -1);
+      this._anchorIndex = val;
+      this.view.editor.emit(Event.ANNOTATE_OBJECT_POINT);
+    }
+    return this._anchorIndex;
+  }
+  anchorType(val?: number) {
+    if (isNumber(val)) this._anchorType = val;
+    return this._anchorType;
+  }
+  hoverIndex(index?: number, type?: number) {
+    if (isNumber(index)) {
+      this.hoverType(isNumber(type) ? type : -1);
+      this._hoverIndex = index;
+    }
+    return this._hoverIndex;
+  }
+  hoverType(val?: number) {
+    if (isNumber(val)) this._hoverType = val;
+    return this._hoverType;
+  }
+
+  onAction(action: ToolAction) {
+    switch (action) {
+      case ToolAction.undo:
+        this.undoDraw();
+        this.updateStatus();
+        break;
+      case ToolAction.esc:
+        if (this.drawGroup.visible()) {
+          this.clearDraw();
+          this.onDrawClear();
+        } else if (this.editGroup.visible()) {
+          this.clearEdit();
+        }
+        break;
+      case ToolAction.stop:
+        this.stopCurrentDraw();
+        this.updateStatus();
+        break;
+      case ToolAction.del:
+        this.onToolDelete();
+        break;
+    }
+  }
+
+  checkAction(action: ToolAction): boolean {
+    // draw
+    if (this.drawGroup.visible()) {
+      return this.checkDrawAction(action);
+    } else if (this.editGroup.visible()) {
+      // edit
+      return this.checkEditAction(action);
+    }
+    return false;
+  }
+  checkDrawAction(action: ToolAction) {
+    return [ToolAction.esc, ToolAction.stop, ToolAction.undo].includes(action);
+  }
+  checkEditAction(action: ToolAction) {
+    return false;
+  }
+
+  // default draw event handle
+  clearEvent() {
+    this.mouseDown = false;
+    this.view.stage.off('mousedown', this._onMouseDown);
+    this.view.stage.off('mousemove', this._onMouseMove);
+    document.removeEventListener('mouseup', this._onDocMouseUp);
+  }
+  initEvent() {
+    this.view.stage.on('mousedown', this._onMouseDown);
+    this.view.stage.on('mousemove', this._onMouseMove);
+    document.addEventListener('mouseup', this._onDocMouseUp);
+  }
+  _onDocMouseUp(e: MouseEvent) {
+    this.mouseDowning = false;
+    this._onMouseUp({ evt: e } as Konva.KonvaEventObject<MouseEvent>);
+  }
+  _onMouseUp(e: Konva.KonvaEventObject<MouseEvent>) {
+    const point = this.intPoint(this.view.stage.getRelativePointerPosition());
+    this.mouseUpInevitable(e, point);
+    if (e.evt.button !== 0) return;
+    this.onMouseUp(e, point);
+  }
+  _onMouseDown(e: Konva.KonvaEventObject<MouseEvent>) {
+    let point = this.intPoint(this.view.stage.getRelativePointerPosition());
+    this.mouseDownInevitable(e, point);
+    if (e.evt.button !== 0) return;
+
+    // valid position
+    if (!this.isValid(point)) {
+      point = this.validPosition(point);
+    }
+
+    this.mouseDown = true;
+    this.onMouseDown(e, point);
+    this.mouseDowning = true;
+  }
+  _onMouseMove(e: Konva.KonvaEventObject<MouseEvent>) {
+    let point = this.intPoint(this.view.stage.getRelativePointerPosition());
+    this.mouseMoveInevitable(e, point);
+    if (!this.mouseDown) return;
+
+    // valid position
+    if (!this.isValid(point)) {
+      point = this.validPosition(point);
+    }
+
+    this.onMouseMove(e, point);
+  }
+  _onMouseOut() {
+    this.onMouseOut();
+  }
+
+  updateAttrHtml() {
+    this.view.emit(Event.UPDATE_ATTR);
+  }
+
+  onMouseDown(e: Konva.KonvaEventObject<MouseEvent>, point: Vector2) {}
+  onMouseUp(e: Konva.KonvaEventObject<MouseEvent>, point: Vector2) {}
+  onMouseMove(e: Konva.KonvaEventObject<MouseEvent>, point: Vector2) {}
+  onMouseOut() {}
+  mouseMoveInevitable(e: Konva.KonvaEventObject<MouseEvent>, point: Vector2) {}
+  mouseDownInevitable(e: Konva.KonvaEventObject<MouseEvent>, point: Vector2) {}
+  mouseUpInevitable(e: Konva.KonvaEventObject<MouseEvent>, point: Vector2) {}
+
+  // edit
+  addChangEvent() {
+    if (!this.object || !this.changeEvent) return;
+    this.object.on(this.changeEvent, this._onObjectChange);
+  }
+  removeChangeEvent() {
+    if (!this.object || !this.changeEvent) return;
+    this.object.off(this.changeEvent, this._onObjectChange);
+  }
+
+  _onObjectChange(e: any) {
+    this.onObjectChange();
+  }
+
+  onObjectChange() {}
+
+  // valid
+  validPosition(position: Vector2) {
+    return position;
+  }
+
+  isValid(position: Vector2) {
+    return true;
+  }
+
+  intPoint(point?: Vector2 | null) {
+    if (this.roundMousePoint && point) {
+      point.x = Math.floor(point.x);
+      point.y = Math.floor(point.y);
+    }
+    return point || { x: 0, y: 0 };
+  }
+}
diff --git a/frontend/image-tool/src/package/image-editor/ImageView/shapeTool/index.ts b/frontend/image-tool/src/package/image-editor/ImageView/shapeTool/index.ts
new file mode 100644
index 00000000..3de92095
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/ImageView/shapeTool/index.ts
@@ -0,0 +1,21 @@
+import ShapeTool, { ToolEvent } from './ShapeTool';
+import RectTool from './RectTool';
+import PolygonTool from './PolygonTool';
+import PolylineTool from './PolylineTool';
+import KeyPointTool from './KeyPointTool';
+
+export { ShapeTool, RectTool, PolygonTool, PolylineTool, KeyPointTool };
+
+export type ShapeToolCtr = new (...args: any) => ShapeTool;
+
+export const toolMap = {
+  rect: RectTool,
+  polyline: PolylineTool,
+  polygon: PolygonTool,
+  'key-point': KeyPointTool,
+};
+
+export const allTools = toolMap as Record<string, ShapeToolCtr>;
+
+export type IToolName = keyof typeof toolMap;
+export type { ToolEvent };
diff --git a/frontend/image-tool/src/package/image-editor/ImageView/type.ts b/frontend/image-tool/src/package/image-editor/ImageView/type.ts
new file mode 100644
index 00000000..2098c9de
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/ImageView/type.ts
@@ -0,0 +1,89 @@
+import Konva from 'konva';
+import { IUserData } from '../types';
+
+export type { AnnotateObject, AnnotateClassName } from './shape';
+
+export interface IObjectStatus {
+  select?: boolean;
+  hover?: boolean;
+}
+
+export type CacheName =
+  | 'boundRect'
+  | 'textPosition'
+  | 'expandData'
+  | 'curveLength'
+  | 'area'
+  | 'length';
+
+export interface Vector2 {
+  x: number;
+  y: number;
+  attr?: IUserData;
+}
+
+export interface ITransform {
+  x?: number;
+  y?: number;
+  scaleX?: number;
+  scaleY?: number;
+  rotation?: number;
+  width?: number;
+  height?: number;
+  points?: Vector2[];
+  innerPoints?: IPolygonInnerConfig[];
+}
+
+export interface IRectOption {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export interface ISideRect {
+  left: number;
+  right: number;
+  top: number;
+  bottom: number;
+}
+export interface IPolygonInnerConfig {
+  points: Vector2[];
+}
+
+export interface IShapeConfig extends Konva.ShapeConfig {
+  points?: Vector2[];
+  innerPoints?: IPolygonInnerConfig[];
+  cursor?: string;
+  skipStageScale?: boolean;
+  skipStateStyle?: boolean;
+  textPosIndex?: number;
+  selectable?: boolean;
+  // Skeleton point
+  valid?: boolean;
+  // fill
+  fillColorRgba?: { r: number; g: number; b: number; a: number };
+}
+export interface ICircleConfig extends IShapeConfig {
+  radius?: number;
+  sizeAttenuation?: boolean;
+  pointIndex?: number;
+  pointType?: number;
+}
+
+export interface IStateMap {
+  select?: boolean;
+  hover?: boolean;
+  edit?: boolean;
+  [k: string]: any;
+}
+
+export interface IPolygonInnerConfig {
+  points: Vector2[];
+}
+
+export interface IPolygonConfig extends IShapeConfig {
+  innerPoints?: IPolygonInnerConfig[];
+}
+
+export type ICubicControl = [undefined, Vector2] | [Vector2, Vector2] | [Vector2, undefined];
diff --git a/frontend/image-tool/src/package/image-editor/ImageView/utils/common.ts b/frontend/image-tool/src/package/image-editor/ImageView/utils/common.ts
new file mode 100644
index 00000000..3e3f8d20
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/ImageView/utils/common.ts
@@ -0,0 +1,18 @@
+import Konva from 'konva';
+import { AnnotateObject } from '../type';
+
+export function traverse(objects: AnnotateObject[], fn: (e: AnnotateObject) => void) {
+  objects.forEach((e) => {
+    fn(e);
+  });
+}
+export function traverseShape(objects: AnnotateObject[], fn: (e: Konva.Shape) => void) {
+  objects.forEach((e) => {
+    if (e instanceof Konva.Shape) {
+      fn(e);
+    }
+    if (e instanceof Konva.Container && e.children) {
+      traverseShape(e.children, fn);
+    }
+  });
+}
diff --git a/frontend/image-tool/src/package/image-editor/ImageView/utils/context.ts b/frontend/image-tool/src/package/image-editor/ImageView/utils/context.ts
new file mode 100644
index 00000000..2a6c4c51
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/ImageView/utils/context.ts
@@ -0,0 +1,75 @@
+import ImageView from '../index';
+import Konva from 'konva';
+import { Shape } from '../shape';
+
+export function hackContext(view: ImageView, layer: Konva.Layer) {
+  const context = layer.canvas.context;
+
+  // copy from Konva.Context#_stroke
+  context._stroke = function (shape: Shape) {
+    const dash = shape.dash(),
+      // ignore strokeScaleEnabled for Text
+      strokeScaleEnabled = (shape as any).getStrokeScaleEnabled();
+
+    if (shape.hasStroke()) {
+      if (!strokeScaleEnabled) {
+        this.save();
+        const pixelRatio = this.getCanvas().getPixelRatio();
+        this.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
+      }
+
+      this._applyLineCap(shape);
+      if (dash && shape.dashEnabled()) {
+        this.setLineDash(dash);
+        this.setAttr('lineDashOffset', shape.dashOffset());
+      }
+
+      let scale = 1;
+      if (shape.attrs.skipStageScale) {
+        scale = 1 / view.stage.scaleX();
+      }
+      if (shape.defaultStyle?.hitStrokeWidth) {
+        shape.setAttrs({
+          hitStrokeWidth: Number(shape.defaultStyle.hitStrokeWidth) * scale,
+        });
+      }
+      const baseLineWidth = view.editor.state.config.baseLineWidth || 0;
+      this.setAttr('lineWidth', (shape.strokeWidth() + baseLineWidth) * scale);
+
+      if (!(shape as any).getShadowForStrokeEnabled()) {
+        this.setAttr('shadowColor', 'rgba(0,0,0,0)');
+      }
+
+      const hasLinearGradient = (shape as any).getStrokeLinearGradientColorStops();
+      if (hasLinearGradient) {
+        (this as any)._strokeLinearGradient(shape);
+      } else {
+        this.setAttr('strokeStyle', shape.stroke());
+      }
+
+      shape._strokeFunc(this);
+
+      if (!strokeScaleEnabled) {
+        this.restore();
+      }
+    }
+  };
+
+  (context as any)._fillColor = function (shape: Shape) {
+    const state = shape.state;
+    const { fillColorRgba } = shape.attrs;
+    const { r, g, b, a } = fillColorRgba;
+
+    let addOpacity = 0;
+    if (state && (state.hover || state.select)) {
+      addOpacity = view.editor.state.config.baseFillOpacity || 0;
+    }
+    this.setAttr('fillStyle', `rgba(${r},${g},${b},${a + addOpacity})`);
+    shape._fillFunc(this);
+  };
+
+  layer.hitCanvas.context.fillStrokeShape = function fillStrokeShape(shape: Shape) {
+    this.fillShape(shape);
+    this.strokeShape(shape);
+  };
+}
diff --git a/frontend/image-tool/src/package/image-editor/ImageView/utils/drag.ts b/frontend/image-tool/src/package/image-editor/ImageView/utils/drag.ts
new file mode 100644
index 00000000..01844a4d
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/ImageView/utils/drag.ts
@@ -0,0 +1,57 @@
+import Konva from 'konva';
+import ImageView from '../index';
+import { AnnotateObject } from '../shape';
+import { ITransform } from '../type';
+import UpdateTransform from '../../common/CmdManager/cmd/UpdateTransform';
+
+enum EVENT {
+  START = 'dragstart',
+  DRAG = 'dragmove',
+  END = 'dragend',
+}
+/**
+ *  drag
+ */
+export function handleDragToCmd(view: ImageView) {
+  let startTransform: ITransform;
+  let object: AnnotateObject;
+
+  view.renderLayer.on(EVENT.START, (e: Konva.KonvaEventObject<MouseEvent>) => {
+    object = e.target as AnnotateObject;
+
+    startTransform = {
+      x: object.x(),
+      y: object.y(),
+    };
+  });
+
+  view.renderLayer.on(EVENT.DRAG, (e: Konva.KonvaEventObject<MouseEvent>) => {
+    object = e.target as AnnotateObject;
+    view.editor.dataManager.onAnnotatesChange([object], 'transform');
+  });
+
+  view.renderLayer.on(EVENT.END, (e: Konva.KonvaEventObject<MouseEvent>) => {
+    if (!startTransform || object !== e.target) return;
+
+    const endTransform: ITransform = {
+      x: object.x(),
+      y: object.y(),
+    };
+    addDragCmd(view, object, startTransform, endTransform);
+  });
+}
+
+export function addDragCmd(
+  view: ImageView,
+  object: AnnotateObject,
+  startData: ITransform,
+  endData: ITransform,
+) {
+  const editor = view.editor;
+  const cmd = new UpdateTransform(editor, { objects: object, transforms: endData });
+  cmd.undoData = {
+    objects: [object],
+    transforms: [startData],
+  };
+  editor.cmdManager.addExecuteManually(cmd as any);
+}
diff --git a/frontend/image-tool/src/package/image-editor/ImageView/utils/handleDrawCmd.ts b/frontend/image-tool/src/package/image-editor/ImageView/utils/handleDrawCmd.ts
new file mode 100644
index 00000000..d1485044
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/ImageView/utils/handleDrawCmd.ts
@@ -0,0 +1,116 @@
+import ImageView from '../index';
+import { AnnotateObject } from '../shape';
+import { ShapeTool, ToolEvent } from '../shapeTool';
+import { ITransform } from '../type';
+import UpdateTransform from '../../common/CmdManager/cmd/UpdateTransform';
+import { Event } from '../../configs';
+
+/**
+ * shapeTool draw
+ */
+let viewDraw = {} as ImageView;
+let shapeToolDraw = {} as ShapeTool;
+export function handleDrawToCmd(_view: ImageView, _shapeTool: ShapeTool) {
+  viewDraw = _view;
+  shapeToolDraw = _shapeTool;
+  handleDrawToCmdClear(shapeToolDraw);
+
+  shapeToolDraw.on('object' as ToolEvent, onObject);
+  shapeToolDraw.on('draw-change' as ToolEvent, onDrawChange);
+  shapeToolDraw.on('draw-clear' as ToolEvent, onDrawClear);
+  shapeToolDraw.on('draw-end' as ToolEvent, onDrawEnd);
+}
+
+function onObject(shapes: AnnotateObject | AnnotateObject[]) {
+  const et = viewDraw.editor;
+  console.log(shapes);
+  if (!shapes) return;
+  if (!Array.isArray(shapes)) shapes = [shapes];
+  console.log('created==>>', shapes);
+
+  et.initIDInfo(shapes);
+  et.cmdManager.withGroup(() => {
+    if (et.state.isSeriesFrame) {
+      et.cmdManager.execute('add-track', et.createTrackObj(shapes));
+    }
+    et.cmdManager.execute('add-object', shapes);
+  });
+  if (shapes.length > 0) {
+    et.setCurrentTrack(shapes[0].userData.trackId);
+    et.emit(Event.SHOW_CLASS_INFO, shapes);
+  }
+  et.emit(Event.TOOL_DRAW, 'end', shapeToolDraw.holder, shapeToolDraw);
+  et.emit(Event.ANNOTATE_CREATE, shapes);
+}
+function onDrawChange() {
+  viewDraw.editor.emit(Event.TOOL_DRAW, 'change', shapeToolDraw.holder, shapeToolDraw);
+}
+function onDrawEnd() {
+  viewDraw.editor.emit(Event.TOOL_DRAW, 'end', shapeToolDraw.holder, shapeToolDraw);
+}
+function onDrawClear() {
+  viewDraw.editor.emit(Event.TOOL_DRAW, 'end', shapeToolDraw.holder, shapeToolDraw);
+}
+
+export function handleDrawToCmdClear(shapeTool: ShapeTool) {
+  shapeTool.off('object' as ToolEvent, onObject);
+  shapeTool.off('draw-change' as ToolEvent, onDrawChange);
+  shapeTool.off('draw-clear' as ToolEvent, onDrawClear);
+  shapeTool.off('draw-end' as ToolEvent, onDrawEnd);
+}
+
+/**
+ * shapeTool edit
+ */
+let viewEdit = {} as ImageView;
+let shapeToolEdit = {} as ShapeTool;
+export function handleEditToCmd(_view: ImageView, _shapeTool: ShapeTool) {
+  viewEdit = _view;
+  shapeToolEdit = _shapeTool;
+  handleEditToCmdClear(shapeToolEdit);
+
+  // console.log('handleEditToCmd');
+  shapeToolEdit.on('edit-start' as ToolEvent, onEditStart);
+  shapeToolEdit.on('edit-change' as ToolEvent, onEditChange);
+  shapeToolEdit.on('edit-end' as ToolEvent, onEditEnd);
+}
+
+let startPointsInfo: ITransform;
+let object: AnnotateObject | undefined;
+function onEditStart() {
+  object = shapeToolEdit.object;
+  if (object) {
+    startPointsInfo = object.clonePointsData();
+  }
+}
+function onEditChange() {
+  // console.log('onEditChange');
+  viewEdit.editor.emit(Event.TOOL_Edit, 'change', shapeToolEdit.object, shapeToolEdit);
+  viewEdit.editor.dataManager.onAnnotatesChange([shapeToolEdit.object as any], 'transform');
+}
+function onEditEnd() {
+  if (!startPointsInfo || object !== shapeToolEdit.object) return;
+  if (object) {
+    const endPointsInfo = object.clonePointsData();
+    addEditCmd(viewEdit, object, startPointsInfo, endPointsInfo);
+  }
+  viewEdit.editor.emit(Event.TOOL_Edit, 'end', shapeToolEdit.object, shapeToolEdit);
+}
+
+export function handleEditToCmdClear(shapeTool: ShapeTool) {
+  shapeTool.off('edit-start' as ToolEvent, onEditStart);
+  shapeTool.off('edit-end' as ToolEvent, onEditEnd);
+  shapeTool.off('edit-change' as ToolEvent, onEditChange);
+}
+
+export function addEditCmd(
+  view: ImageView,
+  object: AnnotateObject,
+  startData: ITransform,
+  endData: ITransform,
+) {
+  const editor = view.editor;
+  const cmd = new UpdateTransform(editor, { objects: object, transforms: endData });
+  cmd.undoData = { objects: object, transforms: startData };
+  editor.cmdManager.addExecuteManually(cmd as any);
+}
diff --git a/frontend/image-tool/src/package/image-editor/ImageView/utils/index.ts b/frontend/image-tool/src/package/image-editor/ImageView/utils/index.ts
new file mode 100644
index 00000000..c06918b1
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/ImageView/utils/index.ts
@@ -0,0 +1,6 @@
+export * from './konvaProto';
+export * from './common';
+export * from './drag';
+export * from './rotate';
+export * from './context';
+export * from './handleDrawCmd';
diff --git a/frontend/image-tool/src/package/image-editor/ImageView/utils/konvaProto.ts b/frontend/image-tool/src/package/image-editor/ImageView/utils/konvaProto.ts
new file mode 100644
index 00000000..b4ab1cc9
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/ImageView/utils/konvaProto.ts
@@ -0,0 +1,104 @@
+import Konva from 'konva';
+import { colord } from 'colord';
+import { Shape } from '../shape';
+import { traverseShape } from './common';
+
+const DD = Konva.DD;
+export function hackOverwriteShape() {
+  Konva.Node.prototype._listenDrag = function () {
+    this._dragCleanup();
+
+    this.on('mousedown.konva touchstart.konva', function (evt: Konva.KonvaEventObject<any>) {
+      // TODO
+      const stage = this.getStage();
+      if (stage && (stage as any).globalDisableDrag) {
+        return;
+      }
+
+      const shouldCheckButton = evt.evt['button'] !== undefined;
+      const canDrag = !shouldCheckButton || Konva.dragButtons.indexOf(evt.evt['button']) >= 0;
+      if (!canDrag) {
+        return;
+      }
+      if (this.isDragging()) {
+        return;
+      }
+
+      let hasDraggingChild = false;
+      DD._dragElements.forEach((elem) => {
+        if (this.isAncestorOf(elem.node)) {
+          hasDraggingChild = true;
+        }
+      });
+      // nested drag can be started
+      // in that case we don't need to start new drag
+      if (!hasDraggingChild) {
+        this._createDragElement(evt);
+      }
+    });
+  };
+  // shape._dragChange();
+
+  const _oldSetAttr = Konva.Node.prototype._setAttr;
+  Konva.Node.prototype._setAttr = function (key: any, val: any) {
+    if (key === 'fill' && val) {
+      const rgba = colord(val);
+      this.attrs.fillColorRgba = rgba.toRgb();
+    }
+    _oldSetAttr.call(this, key, val);
+  };
+
+  Konva.Group.prototype._validateAdd = function () {};
+
+  // colorKey
+  const _fire = Konva.Container.prototype._fire;
+  Konva.Container.prototype._fire = function (eventType: string, evt: any) {
+    _fire.call(this, eventType, evt);
+    if (eventType === 'add' && evt.child) {
+      if (!evt.currentTarget.getStage()) return;
+      addShapeKey(evt.child as Shape);
+    }
+  };
+
+  const _remove = Konva.Node.prototype._remove;
+  Konva.Node.prototype._remove = function () {
+    if (this.getStage()) {
+      removeShapeKey(this);
+    }
+    _remove.call(this);
+  };
+}
+
+export function removeShapeKey(object: any) {
+  object = Array.isArray(object) ? object : [object];
+  traverseShape(object, (child: Konva.Shape) => {
+    // console.log('remove', child, child.colorKey);
+    if (child.colorKey) delete Konva.shapes[child.colorKey];
+  });
+}
+
+export function addShapeKey(object: any) {
+  object = Array.isArray(object) ? object : [object];
+  traverseShape(object, (child: Konva.Shape) => {
+    // console.log('add', child, child.colorKey);
+    const colorKey = child.colorKey;
+    const existShape = Konva.shapes[colorKey];
+    if (existShape && existShape !== child) {
+      child.colorKey = getColorKey();
+    }
+    Konva.shapes[child.colorKey] = child;
+  });
+}
+
+export function getColorKey() {
+  let key = '';
+  // eslint-disable-next-line no-constant-condition
+  while (true) {
+    key = Konva.Util.getRandomColor();
+    if (key && !(key in Konva.shapes)) {
+      break;
+    }
+  }
+
+  return key;
+}
diff --git a/frontend/image-tool/src/package/image-editor/ImageView/utils/rotate.ts b/frontend/image-tool/src/package/image-editor/ImageView/utils/rotate.ts
new file mode 100644
index 00000000..2d3594b7
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/ImageView/utils/rotate.ts
@@ -0,0 +1,49 @@
+import Konva from 'konva';
+import ImageView from '../index';
+import { AnnotateObject, Rect } from '../shape';
+import { ITransform } from '../type';
+import UpdateTransform from '../../common/CmdManager/cmd/UpdateTransform';
+
+enum EVENT {
+  START = 'transformstart',
+  ROTATE = 'transform',
+  END = 'transformend',
+}
+/**
+ * rotate
+ */
+export function handleRotateToCmd(view: ImageView, transform: Konva.Transformer) {
+  let startTransform: ITransform;
+  let object: Rect;
+
+  transform.on(EVENT.START, (e: Konva.KonvaEventObject<MouseEvent>) => {
+    object = e.target as Rect;
+
+    startTransform = { x: object.x(), y: object.y(), rotation: object.rotation() || 0 };
+  });
+  transform.on(EVENT.ROTATE, (e: Konva.KonvaEventObject<MouseEvent>) => {
+    object = e.target as Rect;
+    view.editor.dataManager.onAnnotatesChange([object], 'transform');
+  });
+  transform.on(EVENT.END, (e: Konva.KonvaEventObject<MouseEvent>) => {
+    if (!startTransform || object !== e.target) return;
+
+    const endTransform = { x: object.x(), y: object.y(), rotation: object.rotation() || 0 };
+    addRotateCmd(view, object, startTransform, endTransform);
+  });
+}
+
+export function addRotateCmd(
+  view: ImageView,
+  object: AnnotateObject,
+  startData: ITransform,
+  endData: ITransform,
+) {
+  const editor = view.editor;
+  const cmd = new UpdateTransform(editor, { objects: object, transforms: endData });
+  cmd.undoData = {
+    objects: [object],
+    transforms: [startData],
+  };
+  editor.cmdManager.addExecuteManually(cmd as any);
+}
diff --git a/frontend/image-tool/src/package/image-editor/assets/command.svg b/frontend/image-tool/src/package/image-editor/assets/command.svg
new file mode 100644
index 00000000..f0e9d42c
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/assets/command.svg
@@ -0,0 +1,17 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    aria-hidden="true"
+    role="img"
+    id="footer-sample-full"
+    width="1em"
+    height="1em"
+    preserveAspectRatio="xMidYMid meet"
+    viewBox="0 0 256 256"
+    class="iconify iconify--ph"
+>
+    <path
+        fill="currentColor"
+        d="M180 146h-22v-36h22a34 34 0 1 0-34-34v22h-36V76a34 34 0 1 0-34 34h22v36H76a34 34 0 1 0 34 34v-22h36v22a34 34 0 1 0 34-34Zm-22-70a22 22 0 1 1 22 22h-22ZM54 76a22 22 0 0 1 44 0v22H76a22.1 22.1 0 0 1-22-22Zm44 104a22 22 0 1 1-22-22h22Zm12-70h36v36h-36Zm70 92a22.1 22.1 0 0 1-22-22v-22h22a22 22 0 0 1 0 44Z"
+    ></path>
+</svg>
diff --git a/frontend/image-tool/src/package/image-editor/assets/comment.svg b/frontend/image-tool/src/package/image-editor/assets/comment.svg
new file mode 100644
index 00000000..1961312d
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/assets/comment.svg
@@ -0,0 +1,11 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="8" cy="8" r="8" fill="#F8827B" />
+    <path
+        d="M7.9987 3C6.67296 3 5.40152 3.52665 4.46408 4.46408C3.52665 5.40152 3 6.67296 3 7.9987L3 12.5027C3 12.6353 3.05266 12.7625 3.14641 12.8562C3.24015 12.9499 3.3673 13.0026 3.49987 13.0026H7.9987C9.32513 13.0026 10.5972 12.4757 11.5352 11.5378C12.4731 10.5998 13 9.32773 13 8.0013C13 6.67487 12.4731 5.40277 11.5352 4.46485C10.5972 3.52692 9.32513 3 7.9987 3V3Z"
+        fill="white"
+    />
+    <path
+        d="M10.3335 8.49821C10.1967 8.49821 10.063 8.45766 9.94933 8.38167C9.83562 8.30569 9.74698 8.19769 9.69464 8.07133C9.6423 7.94498 9.62861 7.80595 9.6553 7.67182C9.68198 7.53768 9.74785 7.41448 9.84455 7.31778C9.94126 7.22107 10.0645 7.1552 10.1986 7.12852C10.3327 7.10184 10.4718 7.11553 10.5981 7.16787C10.7245 7.2202 10.8325 7.30884 10.9084 7.42256C10.9844 7.53627 11.025 7.66996 11.025 7.80673C11.0247 7.99004 10.9518 8.16574 10.8221 8.29536C10.6925 8.42498 10.5168 8.49794 10.3335 8.49821ZM5.3348 8.49821C5.19804 8.49821 5.06435 8.45766 4.95063 8.38167C4.83692 8.30569 4.74829 8.19769 4.69596 8.07133C4.64362 7.94498 4.62991 7.80595 4.65659 7.67182C4.68328 7.53768 4.74914 7.41448 4.84585 7.31778C4.94256 7.22107 5.06577 7.1552 5.1999 7.12852C5.33404 7.10184 5.47307 7.11553 5.59942 7.16787C5.72577 7.2202 5.83376 7.30884 5.90975 7.42256C5.98573 7.53627 6.02629 7.66996 6.02629 7.80673C6.02601 7.98968 5.95336 8.16507 5.82419 8.29463C5.69502 8.42419 5.51983 8.49739 5.33688 8.49821H5.3348ZM7.94766 8.49821C7.8109 8.49821 7.67721 8.45766 7.5635 8.38167C7.44978 8.30569 7.36114 8.19769 7.3088 8.07133C7.25647 7.94498 7.24278 7.80595 7.26946 7.67182C7.29614 7.53768 7.36201 7.41448 7.45871 7.31778C7.55542 7.22107 7.67862 7.1552 7.81275 7.12852C7.94689 7.10184 8.08593 7.11553 8.21229 7.16787C8.33864 7.2202 8.44663 7.30884 8.52261 7.42256C8.59859 7.53627 8.63915 7.66996 8.63915 7.80673C8.63888 7.98968 8.56623 8.16507 8.43706 8.29463C8.30789 8.42419 8.13269 8.49739 7.94974 8.49821H7.94766Z"
+        fill="#F8827B"
+    />
+</svg>
diff --git a/frontend/image-tool/src/package/image-editor/assets/commentPointer.svg b/frontend/image-tool/src/package/image-editor/assets/commentPointer.svg
new file mode 100644
index 00000000..7d98d27a
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/assets/commentPointer.svg
@@ -0,0 +1,5 @@
+<svg width="17" height="31" viewBox="0 0 17 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.5 0.5C6.37827 0.5 4.34344 1.34285 2.84315 2.84315C1.34285 4.34344 0.5 6.37827 0.5 8.5L0.5 15.7C0.5 15.9122 0.584285 16.1157 0.734315 16.2657C0.884344 16.4157 1.08783 16.5 1.3 16.5H8.5C10.6217 16.5 12.6566 15.6571 14.1569 14.1569C15.6571 12.6566 16.5 10.6217 16.5 8.5C16.5 6.37827 15.6571 4.34344 14.1569 2.84315C12.6566 1.34285 10.6217 0.5 8.5 0.5V0.5Z" fill="#57CCEF" stroke="#E6F7FD"/>
+<path d="M8.45499 7.303V7.803H8.95499H11.432H11.4407L11.4494 7.8027C11.4931 7.80117 11.5367 7.80847 11.5776 7.82416C11.6184 7.83985 11.6557 7.8636 11.6872 7.89401L12.0345 7.53436L11.6872 7.89401C11.7187 7.92441 11.7437 7.96084 11.7608 8.00113C11.7779 8.04142 11.7867 8.08473 11.7867 8.1285C11.7867 8.17227 11.7779 8.21558 11.7608 8.25587C11.7437 8.29616 11.7187 8.33259 11.6872 8.36299L12.0345 8.72264L11.6872 8.36299C11.6557 8.3934 11.6184 8.41715 11.5776 8.43284C11.5367 8.44852 11.4931 8.45582 11.4494 8.4543L11.4407 8.454H11.432H8.95399H8.45399V8.954V11.431V11.4397L8.45429 11.4484C8.45581 11.4921 8.44851 11.5357 8.43283 11.5766C8.41714 11.6174 8.39338 11.6547 8.36298 11.6862C8.33258 11.7177 8.29614 11.7427 8.25586 11.7598C8.21557 11.7769 8.17225 11.7857 8.12849 11.7857C8.08472 11.7857 8.0414 11.7769 8.00112 11.7598C7.96083 11.7427 7.9244 11.7177 7.89399 11.6862C7.86359 11.6547 7.83984 11.6174 7.82415 11.5766C7.80846 11.5357 7.80116 11.4921 7.80269 11.4484L7.80299 11.4397V11.431V8.954V8.454H7.30299H4.82599H4.81729L4.80859 8.4543C4.76485 8.45582 4.72126 8.44852 4.6804 8.43284C4.63954 8.41715 4.60226 8.3934 4.57078 8.36299C4.5393 8.33259 4.51426 8.29616 4.49716 8.25587C4.48006 8.21558 4.47125 8.17227 4.47125 8.1285C4.47125 8.08473 4.48006 8.04142 4.49716 8.00113C4.51426 7.96084 4.5393 7.92441 4.57078 7.89401C4.60226 7.8636 4.63954 7.83985 4.6804 7.82416C4.72126 7.80847 4.76486 7.80117 4.80859 7.8027L4.81729 7.803H4.82599H7.30299H7.80299V7.303V4.826C7.80299 4.78319 7.81142 4.7408 7.8278 4.70125C7.84419 4.66169 7.8682 4.62575 7.89847 4.59548C7.92874 4.56521 7.96468 4.5412 8.00423 4.52482C8.04379 4.50843 8.08618 4.5 8.12899 4.5C8.21545 4.5 8.29837 4.53435 8.3595 4.59548C8.42064 4.65662 8.45499 4.73954 8.45499 4.826V7.303Z" fill="white" stroke="#E6F7FD"/>
+<path d="M8.67201 23.3193L11.344 27.9513L7.85501 30.0723L5.08501 25.2643L2.25101 28.0103L1.49802 15.4023L12.034 22.3613L8.67201 23.3193Z" fill="black" stroke="white"/>
+</svg>
diff --git a/frontend/image-tool/src/package/image-editor/assets/default-avatar.svg b/frontend/image-tool/src/package/image-editor/assets/default-avatar.svg
new file mode 100644
index 00000000..6896c1c8
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/assets/default-avatar.svg
@@ -0,0 +1,11 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="10" cy="10" r="10" fill="#CCCCCC"/>
+<mask id="mask0_15520_206956" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
+<circle cx="10" cy="10" r="10" fill="#CCCCCC"/>
+</mask>
+<g mask="url(#mask0_15520_206956)">
+<path d="M17 17.5C17 17.5 15 15 13 14.7969L11.9763 14.9999C11.9763 14.9999 11.7278 16.2182 9.98817 16.2859C8.24852 16.3536 8 14.9999 8 14.9999L7.08876 14.7969C7.08876 14.7969 4 15.5 3 18C3 18 9.5 25.0034 17 17.5Z" fill="#95949D"/>
+</g>
+<path d="M11.3579 14.9658C11.3579 14.9658 9.99992 17 8.49992 14.9997C8.49992 14.9997 10.4467 15.1689 11.3579 14.9658Z" fill="#95949D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.90229 14.6561C13.121 14.6561 15.7304 12.0468 15.7304 8.82807C15.7304 7.84866 15.4888 6.92568 15.0619 6.11546C15.169 5.72267 15.3661 4.99489 15.5933 4.13163C15.9361 2.82888 14.8391 3.13743 14.8391 3.13743L12.7149 3.72235C11.881 3.26199 10.9222 3 9.90229 3C6.68353 3 4.07422 5.60932 4.07422 8.82807C4.07422 12.0468 6.68353 14.6561 9.90229 14.6561ZM7.67392 10.0626C6.98826 10.0626 7.15968 10.4054 7.15968 10.4054C9.59375 13.4223 12.1992 11.0911 12.5078 10.6111C12.8163 10.1312 12.3364 10.0626 12.3364 10.0626H7.67392ZM7.34813 8.27913C7.67947 8.27913 7.94807 8.01053 7.94807 7.67918C7.94807 7.34784 7.67947 7.07924 7.34813 7.07924C7.01678 7.07924 6.74818 7.34784 6.74818 7.67918C6.74818 8.01053 7.01678 8.27913 7.34813 8.27913ZM13.022 7.67918C13.022 8.01053 12.7534 8.27913 12.4221 8.27913C12.0907 8.27913 11.8221 8.01053 11.8221 7.67918C11.8221 7.34784 12.0907 7.07924 12.4221 7.07924C12.7534 7.07924 13.022 7.34784 13.022 7.67918Z" fill="#95949D"/>
+</svg>
diff --git a/frontend/image-tool/src/package/image-editor/assets/empty_help.svg b/frontend/image-tool/src/package/image-editor/assets/empty_help.svg
new file mode 100644
index 00000000..65eb1eab
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/assets/empty_help.svg
@@ -0,0 +1,149 @@
+<svg width="201" height="114" viewBox="0 0 201 114" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M100.39 167.646C155.883 167.646 200.868 144.046 200.868 114.934C200.868 85.821 155.883 62.2207 100.39 62.2207C44.8976 62.2207 -0.0878906 85.821 -0.0878906 114.934C-0.0878906 144.046 44.8976 167.646 100.39 167.646Z" fill="url(#paint0_linear_11045_184122)"/>
+<g opacity="0.55">
+<path d="M43.8294 34.5323C41.0102 23.8389 38.3232 13.5004 31.5395 12.3911C24.7558 11.2818 18.5447 34.4435 18.0161 36.5734C17.4875 38.6588 45.6795 41.4098 43.8294 34.5323Z" fill="url(#paint1_linear_11045_184122)"/>
+<path d="M31.1872 24.2824C29.1609 16.6062 27.3108 9.24058 22.3772 8.4419C17.4877 7.64322 13.0827 24.2824 12.6422 25.791C12.3338 27.2552 32.4206 29.2076 31.1872 24.2824Z" fill="url(#paint2_linear_11045_184122)"/>
+<path d="M64.5772 33.2459C60.877 19.4909 57.5292 6.17959 48.8513 4.80408C40.1735 3.42858 32.1123 33.1572 31.4516 35.8638C30.7468 38.5705 66.9118 42.0758 64.5772 33.2459Z" fill="url(#paint3_linear_11045_184122)"/>
+</g>
+<path opacity="0.3" d="M68.1895 88.6537L128.053 87.8994L162.412 106.092L123.472 140.213L68.1895 88.6537Z" fill="url(#paint4_linear_11045_184122)" fill-opacity="0.2"/>
+<path d="M74.0923 82.3202C74.0923 82.3202 73.2554 75.7532 68.2337 71.9373L66.736 72.6029L67.617 71.4049C67.617 71.4049 64.0489 68.4764 61.7583 69.8519C60.4809 70.6062 61.2297 74.1115 64.0049 78.948L65.2823 78.8149L64.3573 79.791C64.3573 79.791 65.899 84.5387 69.9516 85.5593L72.1541 84.1838L74.0923 82.3202Z" fill="url(#paint5_linear_11045_184122)"/>
+<path d="M72.1536 84.14C71.6691 83.0307 71.1405 81.9215 70.5238 80.8566C68.7618 77.6618 65.8104 72.4261 61.7578 69.8525" fill="url(#paint6_linear_11045_184122)"/>
+<path d="M72.1536 84.14C71.6691 83.0307 71.1405 81.9215 70.5238 80.8566C68.7618 77.6618 65.8104 72.4261 61.7578 69.8525" stroke="#AAD0FF" stroke-miterlimit="10" stroke-linecap="round"/>
+<path d="M67.1319 75.3543C67.1319 75.3543 65.1056 74.2893 63.3877 75.5761" stroke="#AAD0FF" stroke-miterlimit="10" stroke-linecap="round"/>
+<path d="M65.8545 81.5653C68.2332 79.6573 70.4357 80.6335 70.4357 80.6335" stroke="#AAD0FF" stroke-miterlimit="10" stroke-linecap="round"/>
+<path d="M69.6436 79.2588C69.6436 79.2588 68.1459 76.1972 68.6745 73.0469" stroke="#AAD0FF" stroke-miterlimit="10" stroke-linecap="round"/>
+<path d="M57.4404 75.4873C57.4404 75.4873 58.9822 85.7814 69.2458 86.6688L71.5364 83.9622C71.5364 84.0066 58.5417 77.3065 57.4404 75.4873Z" fill="#AAD0FF"/>
+<path d="M71.5364 84.0065C71.5364 84.0065 69.0696 80.1906 63.4312 78.2383C63.4312 78.2383 59.0262 76.9959 57.4404 75.4873C59.0262 77.6171 61.2287 79.1257 63.7396 79.88C63.7396 79.88 63.2991 80.1906 60.7001 79.2145C60.7001 79.2145 64.2241 83.7403 70.1268 84.9383L71.5364 84.0065Z" fill="#63A6F9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M73.96 43.7617H122.239V59.2472H73.96V43.7617Z" fill="url(#paint7_linear_11045_184122)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M67.1764 53.1683L79.9509 32.9795V48.3763L66.9121 78.1049V54.1001C66.9121 53.7452 67.0002 53.4346 67.1764 53.1683Z" fill="url(#paint8_linear_11045_184122)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M67.1764 54.4105L79.9509 34.2217V49.6184L66.9121 79.3471V55.3423C66.9121 55.0317 67.0002 54.7211 67.1764 54.4105Z" fill="url(#paint9_linear_11045_184122)"/>
+<path d="M116.689 32.9795H79.9512V48.465H116.689V32.9795Z" fill="#8BBAF2"/>
+<path d="M116.689 33.8223H79.9512V47.7548H116.689V33.8223Z" fill="url(#paint10_linear_11045_184122)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M129.022 52.8134L116.688 32.9795V48.3763L129.287 77.7499V53.7452C129.287 53.3902 129.199 53.0796 129.022 52.8134Z" fill="#6098F1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M129.022 53.8776L116.732 34.2656V49.6624L129.287 78.8142V54.8094C129.287 54.4545 129.199 54.1439 129.022 53.8776Z" fill="url(#paint11_linear_11045_184122)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M129.304 53.6475V86.837C129.304 88.7006 127.807 90.2092 125.957 90.2092H70.2775C68.4274 90.2092 66.9297 88.7006 66.9297 86.837V53.6475H92.4787C92.4787 56.7978 95.0336 59.3713 98.1611 59.3713C101.289 59.3713 103.844 56.7978 103.844 53.6475H129.304Z" fill="#8BBAF2"/>
+<mask id="mask0_11045_184122" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="66" y="53" width="64" height="38">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M129.304 53.6475V86.837C129.304 88.7006 127.807 90.2092 125.957 90.2092H70.2775C68.4274 90.2092 66.9297 88.7006 66.9297 86.837V53.6475H92.4787C92.4787 56.7978 95.0336 59.3713 98.1611 59.3713C101.289 59.3713 103.844 56.7978 103.844 53.6475H129.304Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_11045_184122)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M129.304 54.4902V85.2838C129.304 87.1473 127.807 88.656 125.957 88.656H70.2775C68.4274 88.656 66.9297 87.1473 66.9297 85.2838V54.4902H92.4787C92.4787 57.6406 95.0336 60.2141 98.1611 60.2141C101.289 60.2141 103.844 57.6406 103.844 54.4902H129.304Z" fill="url(#paint12_linear_11045_184122)"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M90.3905 65.2812H106.645C108.891 65.2812 110.698 67.1005 110.698 69.3634C110.698 71.6263 108.891 73.4455 106.645 73.4455H90.3905C88.1439 73.4455 86.3379 71.6263 86.3379 69.3634C86.3379 67.1005 88.188 65.2812 90.3905 65.2812Z" fill="#8BBAF2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M90.1262 65.0156H106.953C109.024 65.0156 110.742 66.7017 110.742 68.8315C110.742 70.917 109.068 72.6474 106.953 72.6474H90.1262C88.0558 72.6474 86.3379 70.9613 86.3379 68.8315C86.3379 66.7017 88.0558 65.0156 90.1262 65.0156Z" fill="url(#paint13_linear_11045_184122)"/>
+<g opacity="0.8969">
+<path opacity="0.5969" d="M38.6754 85.7808C40.1838 85.7808 41.4065 85.4034 41.4065 84.9378C41.4065 84.4722 40.1838 84.0947 38.6754 84.0947C37.1671 84.0947 35.9443 84.4722 35.9443 84.9378C35.9443 85.4034 37.1671 85.7808 38.6754 85.7808Z" fill="#85A0C7"/>
+<path opacity="0.5765" fill-rule="evenodd" clip-rule="evenodd" d="M36.694 85.0715C37.7071 85.4709 42.3764 78.549 43.0372 76.7298C43.6979 74.8662 42.9931 72.8695 41.4073 72.2483C39.8215 71.6271 38.0155 72.6033 37.3107 74.4668C36.694 76.2861 35.6808 84.6722 36.694 85.0715Z" fill="url(#paint14_linear_11045_184122)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M36.6936 85.0712C37.927 84.7606 37.7508 75.0434 37.1341 72.8692C36.5174 70.695 34.447 69.3195 32.5088 69.852C30.5706 70.3844 29.4694 72.5586 30.042 74.7328C30.6587 76.907 35.4602 85.4262 36.6936 85.0712Z" fill="url(#paint15_linear_11045_184122)"/>
+</g>
+<g opacity="0.8969">
+<path opacity="0.5969" d="M155.012 72.9578C157.031 72.9578 158.668 72.4612 158.668 71.8485C158.668 71.2359 157.031 70.7393 155.012 70.7393C152.992 70.7393 151.355 71.2359 151.355 71.8485C151.355 72.4612 152.992 72.9578 155.012 72.9578Z" fill="#85A0C7"/>
+<path opacity="0.5765" fill-rule="evenodd" clip-rule="evenodd" d="M152.37 72.0707C153.692 72.6032 159.991 63.3296 160.916 60.8448C161.841 58.36 160.872 55.6978 158.757 54.8547C156.643 54.0117 154.176 55.3428 153.295 57.8276C152.326 60.268 151.004 71.5383 152.37 72.0707Z" fill="url(#paint16_linear_11045_184122)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M152.369 72.0708C154.043 71.6271 153.779 58.6264 152.986 55.6979C152.193 52.7694 149.418 50.9502 146.775 51.6157C144.132 52.2813 142.678 55.2542 143.471 58.1826C144.264 61.1111 150.695 72.5145 152.369 72.0708Z" fill="url(#paint17_linear_11045_184122)"/>
+</g>
+<path d="M77.088 14.3444C77.088 14.3444 73.0354 9.81854 73.4759 6.93442C73.9604 4.0503 76.6034 8.88675 77.132 10.6616C77.7047 12.8801 77.088 14.3444 77.088 14.3444Z" fill="url(#paint18_linear_11045_184122)"/>
+<path d="M94.5761 8.75325C94.5761 8.75325 87.1317 5.64727 86.0745 1.96447C85.0173 -1.71833 91.0081 2.45256 92.5498 4.36051C94.488 6.71218 94.5761 8.75325 94.5761 8.75325Z" fill="url(#paint19_linear_11045_184122)"/>
+<path d="M96.5579 21.221C96.5579 21.221 91.0516 21.9753 89.1134 20.1561C87.1752 18.3369 92.1969 18.7362 93.7387 19.313C95.809 19.9786 96.5579 21.221 96.5579 21.221Z" fill="url(#paint20_linear_11045_184122)"/>
+<path d="M108.01 25.393C108.01 25.393 101.844 18.2936 102.548 13.9009C103.253 9.46377 107.394 16.9625 108.099 19.6691C109.024 23.2188 108.01 25.393 108.01 25.393Z" fill="url(#paint21_linear_11045_184122)"/>
+<g opacity="0.55">
+<path d="M163.954 38.3047C161.135 27.6113 158.448 17.2729 151.664 16.1636C144.881 15.0543 138.67 38.216 138.141 40.3458C137.613 42.4313 165.849 45.1823 163.954 38.3047Z" fill="url(#paint22_linear_11045_184122)"/>
+<path d="M151.312 28.0548C149.286 20.3786 147.436 13.013 142.502 12.2144C137.613 11.4157 133.208 28.0548 132.767 29.5635C132.459 31.0277 152.546 32.98 151.312 28.0548Z" fill="url(#paint23_linear_11045_184122)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_11045_184122" x1="100.398" y1="30.7145" x2="100.398" y2="108.674" gradientUnits="userSpaceOnUse">
+<stop stop-color="#515C7A"/>
+<stop offset="1" stop-color="#393C45" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_11045_184122" x1="30.9573" y1="38.9165" x2="30.9573" y2="12.3497" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5F82C1" stop-opacity="0"/>
+<stop offset="1" stop-color="#5F82C1" stop-opacity="0.5"/>
+</linearGradient>
+<linearGradient id="paint2_linear_11045_184122" x1="21.94" y1="27.4269" x2="21.94" y2="8.42988" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5F82C1" stop-opacity="0"/>
+<stop offset="1" stop-color="#5F82C1" stop-opacity="0.5"/>
+</linearGradient>
+<linearGradient id="paint3_linear_11045_184122" x1="48.0497" y1="38.8969" x2="48.0497" y2="4.79365" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5F82C1" stop-opacity="0"/>
+<stop offset="1" stop-color="#5F82C1" stop-opacity="0.5"/>
+</linearGradient>
+<linearGradient id="paint4_linear_11045_184122" x1="25.0885" y1="21.9239" x2="141.319" y2="123.348" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5792F0"/>
+<stop offset="1" stop-color="#BFD4FA" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint5_linear_11045_184122" x1="1964.2" y1="1214.3" x2="1956.94" y2="1213.73" gradientUnits="userSpaceOnUse">
+<stop stop-color="#63A6F9"/>
+<stop offset="1" stop-color="#92C1FC"/>
+</linearGradient>
+<linearGradient id="paint6_linear_11045_184122" x1="1633.99" y1="1486.78" x2="1628.05" y2="1486.91" gradientUnits="userSpaceOnUse">
+<stop stop-color="#63A6F9"/>
+<stop offset="1" stop-color="#92C1FC"/>
+</linearGradient>
+<linearGradient id="paint7_linear_11045_184122" x1="98.1009" y1="59.237" x2="98.1009" y2="39.9807" gradientUnits="userSpaceOnUse">
+<stop stop-color="#BFD4FA"/>
+<stop offset="1" stop-color="#5792F0"/>
+</linearGradient>
+<linearGradient id="paint8_linear_11045_184122" x1="66.9096" y1="55.537" x2="79.9409" y2="55.537" gradientUnits="userSpaceOnUse">
+<stop stop-color="#BFD4FA"/>
+<stop offset="1" stop-color="#5792F0"/>
+</linearGradient>
+<linearGradient id="paint9_linear_11045_184122" x1="79.9451" y1="56.808" x2="66.9129" y2="56.808" gradientUnits="userSpaceOnUse">
+<stop stop-color="#BFD4FA"/>
+<stop offset="1" stop-color="#5792F0"/>
+</linearGradient>
+<linearGradient id="paint10_linear_11045_184122" x1="98.3153" y1="33.8287" x2="98.3153" y2="47.7478" gradientUnits="userSpaceOnUse">
+<stop stop-color="#BFD4FA"/>
+<stop offset="1" stop-color="#5792F0"/>
+</linearGradient>
+<linearGradient id="paint11_linear_11045_184122" x1="116.737" y1="56.5101" x2="129.289" y2="56.5101" gradientUnits="userSpaceOnUse">
+<stop stop-color="#BFD4FA"/>
+<stop offset="1" stop-color="#5792F0"/>
+</linearGradient>
+<linearGradient id="paint12_linear_11045_184122" x1="66.9094" y1="71.5793" x2="129.289" y2="71.5793" gradientUnits="userSpaceOnUse">
+<stop stop-color="#BFD4FA"/>
+<stop offset="1" stop-color="#60A9FE"/>
+</linearGradient>
+<linearGradient id="paint13_linear_11045_184122" x1="86.4003" y1="68.8022" x2="110.648" y2="68.8022" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.0974377"/>
+</linearGradient>
+<linearGradient id="paint14_linear_11045_184122" x1="40.3338" y1="73.3516" x2="36.3785" y2="84.1201" gradientUnits="userSpaceOnUse">
+<stop stop-color="#BFD4FA"/>
+<stop offset="1" stop-color="#5792F0"/>
+</linearGradient>
+<linearGradient id="paint15_linear_11045_184122" x1="33.4034" y1="70.8541" x2="37.5518" y2="84.1005" gradientUnits="userSpaceOnUse">
+<stop stop-color="#BFD4FA"/>
+<stop offset="1" stop-color="#5792F0"/>
+</linearGradient>
+<linearGradient id="paint16_linear_11045_184122" x1="157.251" y1="56.3189" x2="151.939" y2="70.784" gradientUnits="userSpaceOnUse">
+<stop stop-color="#BFD4FA"/>
+<stop offset="1" stop-color="#5792F0"/>
+</linearGradient>
+<linearGradient id="paint17_linear_11045_184122" x1="147.941" y1="52.9702" x2="153.517" y2="70.7593" gradientUnits="userSpaceOnUse">
+<stop stop-color="#BFD4FA"/>
+<stop offset="1" stop-color="#5792F0"/>
+</linearGradient>
+<linearGradient id="paint18_linear_11045_184122" x1="74.2066" y1="11.4436" x2="76.9654" y2="8.75005" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5F82C1" stop-opacity="0"/>
+<stop offset="1" stop-color="#5F82C1" stop-opacity="0.5"/>
+</linearGradient>
+<linearGradient id="paint19_linear_11045_184122" x1="89.5263" y1="6.90623" x2="91.2986" y2="2.08598" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5F82C1" stop-opacity="0"/>
+<stop offset="1" stop-color="#5F82C1" stop-opacity="0.5"/>
+</linearGradient>
+<linearGradient id="paint20_linear_11045_184122" x1="92.9247" y1="21.8818" x2="92.2604" y2="18.4055" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5F82C1" stop-opacity="0"/>
+<stop offset="1" stop-color="#5F82C1" stop-opacity="0.5"/>
+</linearGradient>
+<linearGradient id="paint21_linear_11045_184122" x1="103.659" y1="20.8253" x2="107.953" y2="16.6871" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5F82C1" stop-opacity="0"/>
+<stop offset="1" stop-color="#5F82C1" stop-opacity="0.5"/>
+</linearGradient>
+<linearGradient id="paint22_linear_11045_184122" x1="151.095" y1="42.6889" x2="151.095" y2="16.1221" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5F82C1" stop-opacity="0"/>
+<stop offset="1" stop-color="#5F82C1" stop-opacity="0.5"/>
+</linearGradient>
+<linearGradient id="paint23_linear_11045_184122" x1="142.078" y1="31.1992" x2="142.078" y2="12.2022" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5F82C1" stop-opacity="0"/>
+<stop offset="1" stop-color="#5F82C1" stop-opacity="0.5"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/frontend/image-tool/src/package/image-editor/assets/keyboard.svg b/frontend/image-tool/src/package/image-editor/assets/keyboard.svg
new file mode 100644
index 00000000..a91a3708
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/assets/keyboard.svg
@@ -0,0 +1,16 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    aria-hidden="true"
+    role="img"
+    id="footer-sample-full"
+    width="1em"
+    height="1em"
+    preserveAspectRatio="xMidYMid meet"
+    viewBox="0 0 24 24"
+>
+    <path
+        fill="#dee5eb"
+        d="M19.745 5a2.25 2.25 0 0 1 2.25 2.25v9.505a2.25 2.25 0 0 1-2.25 2.25H4.25A2.25 2.25 0 0 1 2 16.755V7.25A2.25 2.25 0 0 1 4.25 5h15.495Zm0 1.5H4.25a.75.75 0 0 0-.75.75v9.505c0 .414.336.75.75.75h15.495a.75.75 0 0 0 .75-.75V7.25a.75.75 0 0 0-.75-.75Zm-12.995 8h10.5a.75.75 0 0 1 .102 1.493L17.25 16H6.75a.75.75 0 0 1-.102-1.493l.102-.007h10.5h-10.5ZM16.5 11a1 1 0 1 1 0 2a1 1 0 0 1 0-2Zm-5.995 0a1 1 0 1 1 0 2a1 1 0 0 1 0-2Zm-3 0a1 1 0 1 1 0 2a1 1 0 0 1 0-2Zm6 0a1 1 0 1 1 0 2a1 1 0 0 1 0-2ZM6 8a1 1 0 1 1 0 2a1 1 0 0 1 0-2Zm2.995 0a1 1 0 1 1 0 2a1 1 0 0 1 0-2Zm3 0a1 1 0 1 1 0 2a1 1 0 0 1 0-2Zm3 0a1 1 0 1 1 0 2a1 1 0 0 1 0-2Zm3 0a1 1 0 1 1 0 2a1 1 0 0 1 0-2Z"
+    ></path>
+</svg>
diff --git a/frontend/image-tool/src/package/image-editor/assets/loading.png b/frontend/image-tool/src/package/image-editor/assets/loading.png
new file mode 100644
index 00000000..a46f1f91
Binary files /dev/null and b/frontend/image-tool/src/package/image-editor/assets/loading.png differ
diff --git a/frontend/image-tool/src/package/image-editor/assets/logo.png b/frontend/image-tool/src/package/image-editor/assets/logo.png
new file mode 100644
index 00000000..f3d2503f
Binary files /dev/null and b/frontend/image-tool/src/package/image-editor/assets/logo.png differ
diff --git a/frontend/image-tool/src/package/image-editor/assets/maskfill.svg b/frontend/image-tool/src/package/image-editor/assets/maskfill.svg
new file mode 100644
index 00000000..082a3082
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/assets/maskfill.svg
@@ -0,0 +1,6 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.21519 15.0201C5.54378 15.0201 5 15.5639 5 16.2353V28.7257C5 29.0497 5.1254 29.3583 5.35512 29.5869L5.46055 29.6812C5.93775 30.0596 6.62913 30.0285 7.07081 29.5869L8.92079 27.7358L10.581 31.2959C10.864 31.9063 11.5831 32.1693 12.1935 31.8863L13.9857 31.0506L14.1034 30.9885C14.6272 30.6733 14.8391 30.0075 14.575 29.4382L12.9659 25.9846L15.4839 25.7959C15.7204 25.7772 15.9462 25.6899 16.1337 25.5445C16.3212 25.3992 16.4622 25.2023 16.5393 24.978C16.6164 24.7536 16.6263 24.5117 16.5677 24.2818C16.5092 24.0519 16.3847 23.8442 16.2097 23.684L7.03197 15.3375C6.80866 15.1338 6.51745 15.0207 6.21519 15.0201Z" fill="white"/>
+<path d="M6.21519 15.0201C5.54378 15.0201 5 15.5639 5 16.2353V28.7257C5 29.0497 5.1254 29.3583 5.35512 29.5869L5.46055 29.6812C5.93775 30.0596 6.62913 30.0285 7.07081 29.5869L8.92079 27.7358L10.581 31.2959C10.864 31.9063 11.5831 32.1693 12.1935 31.8863L13.9857 31.0506L14.1034 30.9885C14.6272 30.6733 14.8391 30.0075 14.575 29.4382L12.9659 25.9846L15.4839 25.7959C15.7204 25.7772 15.9463 25.6899 16.1337 25.5445C16.3212 25.3992 16.4622 25.2023 16.5393 24.978C16.6164 24.7536 16.6263 24.5117 16.5677 24.2818C16.5092 24.0519 16.3847 23.8442 16.2097 23.684L7.03197 15.3375C6.80866 15.1338 6.51745 15.0207 6.21519 15.0201ZM6.44158 16.7491L14.8491 24.3965L10.7774 24.7028L13.1701 29.8377L11.7928 30.4813L9.35914 25.2588L6.44158 28.1741V16.7491Z" fill="#000000"/>
+<path d="M25.6804 12.7722L9.94528 13.2218H9.49571L8.59656 12.3226L17.1385 2.88159L21.6342 7.37733L25.6804 12.7722Z" fill="white"/>
+<path d="M7.76211 12.4247L17.4682 22.847L27.2091 12.3872L17.5031 1.96495L18.3062 1.1026L17.2794 0L5.93505 12.1815L6.96193 13.284L7.76211 12.4263V12.4247ZM25.1555 12.3872H9.78092L17.4682 4.13272L25.1555 12.3872Z" fill="#000000"/>
+</svg>
diff --git a/frontend/image-tool/src/package/image-editor/assets/minus.svg b/frontend/image-tool/src/package/image-editor/assets/minus.svg
new file mode 100644
index 00000000..46b6a6a0
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/assets/minus.svg
@@ -0,0 +1,17 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    aria-hidden="true"
+    role="img"
+    id="footer-sample-full"
+    width="1em"
+    height="1em"
+    preserveAspectRatio="xMidYMid meet"
+    viewBox="0 0 24 24"
+    class="iconify iconify--akar-icons"
+>
+    <g fill="none" stroke="#ffffff" stroke-width="2">
+        <path stroke-linecap="round" d="M16 12H8"></path>
+        <circle cx="12" cy="12" r="10"></circle>
+    </g>
+</svg>
diff --git a/frontend/image-tool/src/package/image-editor/assets/negative.svg b/frontend/image-tool/src/package/image-editor/assets/negative.svg
new file mode 100644
index 00000000..03a82aab
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/assets/negative.svg
@@ -0,0 +1,13 @@
+<svg width="29" height="19" viewBox="0 0 29 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_8181_216844)">
+<path d="M7.41673 7.85671H6.67096L6.95419 8.5466L8.36172 11.975L7.1981 12.4822L5.86922 9.24756L5.57957 8.54252L5.04824 9.08902L2.9375 11.26V0.579045L10.0129 7.85671H7.41673Z" fill="black" stroke="white"/>
+</g>
+<path d="M18 6.625C18.5908 6.625 19.1641 6.74023 19.7031 6.96875C20.2236 7.18945 20.6924 7.50488 21.0938 7.90625C21.4961 8.30859 21.8115 8.77637 22.0312 9.29688C22.2598 9.83594 22.375 10.4092 22.375 11C22.375 11.5908 22.2598 12.1641 22.0312 12.7031C21.8105 13.2236 21.4951 13.6924 21.0938 14.0938C20.6914 14.4961 20.2236 14.8115 19.7031 15.0312C19.1641 15.2598 18.5908 15.375 18 15.375C17.4092 15.375 16.8359 15.2598 16.2969 15.0312C15.7764 14.8105 15.3076 14.4951 14.9062 14.0938C14.5039 13.6914 14.1885 13.2236 13.9688 12.7031C13.7402 12.1641 13.625 11.5908 13.625 11C13.625 10.4092 13.7402 9.83594 13.9688 9.29688C14.1895 8.77637 14.5049 8.30762 14.9062 7.90625C15.3076 7.50488 15.7764 7.18848 16.2969 6.96875C16.8359 6.74023 17.4092 6.625 18 6.625ZM18 6C15.2383 6 13 8.23828 13 11C13 13.7617 15.2383 16 18 16C20.7617 16 23 13.7617 23 11C23 8.23828 20.7617 6 18 6Z" fill="#ff4e4e"/>
+<path d="M17.0625 11C17.0625 11.2486 17.1613 11.4871 17.3371 11.6629C17.5129 11.8387 17.7514 11.9375 18 11.9375C18.2486 11.9375 18.4871 11.8387 18.6629 11.6629C18.8387 11.4871 18.9375 11.2486 18.9375 11C18.9375 10.7514 18.8387 10.5129 18.6629 10.3371C18.4871 10.1613 18.2486 10.0625 18 10.0625C17.7514 10.0625 17.5129 10.1613 17.3371 10.3371C17.1613 10.5129 17.0625 10.7514 17.0625 11Z" fill="#ff4e4e"/>
+<path d="M28.4787 15.4805H23.5217C23.2357 15.4805 23.002 15.6716 23.002 15.9055C23.002 16.1393 23.2357 16.3305 23.5217 16.3305H28.4787C28.7646 16.3305 28.9984 16.1393 28.9984 15.9055C28.9984 15.6716 28.7646 15.4805 28.4787 15.4805Z" fill="#ff4e4e"/>
+<defs>
+<clipPath id="clip0_8181_216844">
+<rect width="13" height="13" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/frontend/image-tool/src/package/image-editor/assets/positive.svg b/frontend/image-tool/src/package/image-editor/assets/positive.svg
new file mode 100644
index 00000000..764f1dbe
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/assets/positive.svg
@@ -0,0 +1,13 @@
+<svg width="29" height="19" viewBox="0 0 29 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_8181_216837)">
+<path d="M7.41673 7.85671H6.67096L6.95419 8.5466L8.36172 11.975L7.1981 12.4822L5.86922 9.24756L5.57957 8.54252L5.04824 9.08902L2.9375 11.26V0.579045L10.0129 7.85671H7.41673Z" fill="black" stroke="white"/>
+</g>
+<path d="M18 6.625C18.5908 6.625 19.1641 6.74023 19.7031 6.96875C20.2236 7.18945 20.6924 7.50488 21.0938 7.90625C21.4961 8.30859 21.8115 8.77637 22.0312 9.29688C22.2598 9.83594 22.375 10.4092 22.375 11C22.375 11.5908 22.2598 12.1641 22.0312 12.7031C21.8105 13.2236 21.4951 13.6924 21.0938 14.0938C20.6914 14.4961 20.2236 14.8115 19.7031 15.0312C19.1641 15.2598 18.5908 15.375 18 15.375C17.4092 15.375 16.8359 15.2598 16.2969 15.0312C15.7764 14.8105 15.3076 14.4951 14.9062 14.0938C14.5039 13.6914 14.1885 13.2236 13.9688 12.7031C13.7402 12.1641 13.625 11.5908 13.625 11C13.625 10.4092 13.7402 9.83594 13.9688 9.29688C14.1895 8.77637 14.5049 8.30762 14.9062 7.90625C15.3076 7.50488 15.7764 7.18848 16.2969 6.96875C16.8359 6.74023 17.4092 6.625 18 6.625ZM18 6C15.2383 6 13 8.23828 13 11C13 13.7617 15.2383 16 18 16C20.7617 16 23 13.7617 23 11C23 8.23828 20.7617 6 18 6Z" fill="#00ff4e"/>
+<path d="M17.0625 11C17.0625 11.2486 17.1613 11.4871 17.3371 11.6629C17.5129 11.8387 17.7514 11.9375 18 11.9375C18.2486 11.9375 18.4871 11.8387 18.6629 11.6629C18.8387 11.4871 18.9375 11.2486 18.9375 11C18.9375 10.7514 18.8387 10.5129 18.6629 10.3371C18.4871 10.1613 18.2486 10.0625 18 10.0625C17.7514 10.0625 17.5129 10.1613 17.3371 10.3371C17.1613 10.5129 17.0625 10.7514 17.0625 11Z" fill="#00ff4e"/>
+<path d="M23.3969 16.1975H25.6008V18.5653C25.6008 18.786 25.78 18.9652 26.0007 18.9652C26.2217 18.9652 26.4006 18.786 26.4006 18.5653V16.1975H28.6047C28.8231 16.1975 29 16.0205 29 15.8022C29 15.5838 28.8231 15.4069 28.6047 15.4069H26.4006V13.4346C26.4006 13.2138 26.2217 13.0347 26.0007 13.0347C25.78 13.0347 25.6008 13.2138 25.6008 13.4346V15.4069H23.3969C23.1786 15.4069 23.0014 15.5838 23.0014 15.8022C23.0014 16.0205 23.1786 16.1975 23.3969 16.1975Z" fill="#00ff4e"/>
+<defs>
+<clipPath id="clip0_8181_216837">
+<rect width="13" height="13" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/frontend/image-tool/src/package/image-editor/assets/rotating.svg b/frontend/image-tool/src/package/image-editor/assets/rotating.svg
new file mode 100644
index 00000000..7d5ded6e
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/assets/rotating.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="20" t="1689747590429" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8867">
+<path d="M95.567217 214.545672a511.967234 511.967234 0 1 1-77.887282 430.052476L116.045906 618.112377a409.573787 409.573787 0 1 0 65.463544-348.137719l96.454627 61.436068L58.773838 395.98686 0 153.792227z" p-id="8868" fill="#000"></path>
+<path d="M409.573787 512.032766a102.393447 102.393447 0 1 0 51.196724-88.740987A102.393447 102.393447 0 0 0 409.573787 512.032766z" p-id="8869" fill="#000"></path>
+</svg>
\ No newline at end of file
diff --git a/frontend/image-tool/src/package/image-editor/assets/tools/interactive.svg b/frontend/image-tool/src/package/image-editor/assets/tools/interactive.svg
new file mode 100644
index 00000000..bf1808bc
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/assets/tools/interactive.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.7935 8.91925C15.3318 6.78388 13.8112 4.66508 12.5387 5.03307C12.0833 5.1645 11.7336 5.40506 11.5079 5.73705C11.0976 5.54677 10.6776 5.52849 10.2668 5.70963C9.96568 5.83904 9.71382 6.06127 9.54792 6.34389C9.07479 6.10447 8.53081 6.10961 7.96054 6.37704C7.83924 6.43305 7.72414 6.50161 7.61712 6.5816C6.22744 4.61766 5.09205 3.7314 4.06865 3.96339C2.61954 4.29138 2.61954 5.55534 3.71894 7.21073L5.82974 10.4746C4.67149 10.2569 3.8338 10.4438 3.33724 11.1072C2.52526 12.1929 3.38467 13.1957 5.38004 14.0934L9.2365 15.8088C9.37445 15.8674 9.52993 15.8695 9.66942 15.8146C9.80891 15.7597 9.92123 15.6522 9.98217 15.5152C10.0431 15.3783 10.0478 15.2229 9.99522 15.0825C9.94263 14.9421 9.83699 14.828 9.70106 14.7648L5.84688 13.0506C5.06919 12.7009 4.55549 12.3729 4.31892 12.0963C4.18179 11.9363 4.17779 11.8917 4.25264 11.7917C4.53492 11.4146 5.41204 11.4146 6.94114 11.9849C7.45655 12.1774 7.9194 11.6015 7.62055 11.1392L4.67492 6.58446C3.94294 5.4822 3.94294 5.16393 4.32121 5.07821C4.82234 4.96508 5.8766 5.96048 7.27713 8.12384C7.38227 8.37184 7.54626 8.63012 7.76626 8.89125C8.2211 9.43181 9.05936 8.82782 8.6908 8.22498C8.55601 8.00429 8.41886 7.78505 8.27939 7.56729C8.2891 7.50043 8.34853 7.45758 8.44567 7.41186C8.8468 7.22387 9.09708 7.2953 9.37764 7.69186C9.68963 8.13184 10.3816 7.93471 10.4142 7.39586C10.437 7.01759 10.5416 6.83702 10.7273 6.75531C10.8873 6.68503 11.0862 6.7456 11.3964 7.04102C11.4743 7.1152 11.5715 7.16592 11.6768 7.18735C11.7822 7.20878 11.8915 7.20004 11.9921 7.16214C12.0927 7.12424 12.1806 7.05872 12.2457 6.97311C12.3107 6.8875 12.3503 6.78527 12.3598 6.67817C12.3861 6.38275 12.521 6.22733 12.8564 6.13018C13.2084 6.02847 14.3409 7.60672 14.6769 9.16039C14.9186 10.2781 14.9186 11.6066 14.6712 13.1448C14.6472 13.2945 14.6836 13.4476 14.7724 13.5704C14.8613 13.6932 14.9953 13.7757 15.1449 13.7997C15.2946 13.8237 15.4476 13.7873 15.5704 13.6985C15.6932 13.6096 15.7757 13.4756 15.7997 13.326C16.0677 11.6563 16.0677 10.1872 15.7935 8.91925Z" fill="#DEE5EB"/>
+<path d="M4.22845 15.3567H1.79024C1.43482 15.3567 1.14283 15.0602 1.14283 14.6899V2.30966C1.14283 1.93939 1.43482 1.64283 1.79024 1.64283H8.49462C8.85061 1.64283 9.1426 1.93939 9.1426 2.30966C9.1426 2.46121 9.2028 2.60655 9.30996 2.71371C9.41712 2.82087 9.56247 2.88108 9.71401 2.88108C9.86556 2.88108 10.0109 2.82087 10.1181 2.71371C10.2252 2.60655 10.2854 2.46121 10.2854 2.30966C10.2854 1.31198 9.48602 0.5 8.49519 0.5H1.79024C0.799406 0.5 0 1.31198 0 2.30966V14.6905C0 15.6876 0.799406 16.4996 1.79024 16.4996H4.22845C4.38 16.4996 4.52534 16.4394 4.6325 16.3322C4.73966 16.225 4.79987 16.0797 4.79987 15.9281C4.79987 15.7766 4.73966 15.6313 4.6325 15.5241C4.52534 15.4169 4.38 15.3567 4.22845 15.3567Z" fill="#DEE5EB"/>
+</svg>
diff --git a/frontend/image-tool/src/package/image-editor/common/ActionManager/action/clip.ts b/frontend/image-tool/src/package/image-editor/common/ActionManager/action/clip.ts
new file mode 100644
index 00000000..fb7605d1
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/common/ActionManager/action/clip.ts
@@ -0,0 +1,253 @@
+import Editor from '../../../Editor';
+import { Polygon, Shape } from '../../../ImageView/shape';
+import { define } from '../define';
+import {
+  getArea,
+  polygonContains,
+  shapePositionRelation,
+  POSTYPE,
+  polygon2PointsVector,
+  polygonsHollow,
+  getShapeRealPoint,
+  polygonToClip,
+  polygonToClips,
+} from '../../../utils';
+import { MsgType, OPType } from '../../../types/enum';
+
+function isAllPolygons(shapes: Shape[] | Shape) {
+  if (!Array.isArray(shapes)) shapes = [shapes];
+  const invalid = shapes.find((shape) => !(shape instanceof Polygon));
+  return !invalid;
+}
+
+export const holeSelection = define({
+  valid() {
+    return true;
+  },
+  execute(editor: Editor) {
+    const selection = editor.selection as Polygon[];
+    if (selection.length < 2) return;
+    const hollowTips: string = editor.lang('hollowConditionTips'); // 不满足镂空条件的提示
+    if (!isAllPolygons(selection)) {
+      editor.showMsg(MsgType.warning, hollowTips);
+      return;
+    }
+    // sort by area
+    selection.sort((shape1, shape2) => {
+      return getArea(shape2.attrs.points) - getArea(shape1.attrs.points);
+    });
+    const [maxShape, ...otherShapes] = selection;
+    // condition 1
+    const invalid = otherShapes.find((shape) => {
+      return shape.attrs.innerPoints?.length > 0;
+    });
+    if (invalid) {
+      editor.showMsg(MsgType.warning, hollowTips);
+      return;
+    }
+    // condition 2; condition 3
+    const innerNum: number = maxShape.attrs.innerPoints.length;
+    const arrLen = otherShapes.length;
+    for (let i = 0; i < arrLen; i++) {
+      const shape = otherShapes[i];
+      const isInner = polygonContains(maxShape, shape);
+      if (!isInner) {
+        editor.showMsg(MsgType.warning, hollowTips);
+        if (maxShape.attrs.innerPoints.length > innerNum) {
+          maxShape.attrs.innerPoints.splice(innerNum, i);
+        }
+        return;
+      }
+      maxShape.attrs.innerPoints.push({ points: shape.attrs.points });
+    }
+    if (maxShape.attrs.innerPoints.length === otherShapes.length + innerNum) {
+      maxShape.attrs.innerPoints.length = innerNum;
+      holeShape(editor, maxShape, otherShapes);
+      editor.showMsg(MsgType.success, 'Hollow out Succeeded');
+    }
+  },
+});
+
+export const removeHoleSelection = define({
+  valid() {
+    return true;
+  },
+  execute(editor: Editor) {
+    const object = editor.selection[0] as Polygon;
+    if (!(object instanceof Polygon) || object.attrs.innerPoints.length === 0) return;
+    removeHole(editor, object);
+  },
+});
+
+export const clipSelection = define({
+  valid() {
+    return true;
+  },
+  execute(editor: Editor, isClipFirst: boolean = false) {
+    const selection = editor.selection as Polygon[];
+    let condition = isAllPolygons(selection);
+    if (!condition) {
+      editor.showMsg(MsgType.warning, editor.lang('clipConditionTips'));
+      return;
+    }
+    const [targetShape, ...ohterShapes] = selection;
+    const targetPoints = polygon2PointsVector(targetShape).points;
+    ohterShapes.forEach((shape) => {
+      const shapePoints = polygon2PointsVector(shape).points;
+      const pos = shapePositionRelation(targetPoints, shapePoints);
+      if (pos == POSTYPE.disjoint) {
+        condition = false;
+        return;
+      }
+    });
+    if (!condition) {
+      editor.showMsg(MsgType.warning, editor.lang('clipCannotTips'));
+      return;
+    }
+    if (isClipFirst) cropFirstPolygon(editor, selection);
+    else cropOtherPolygon(editor, selection);
+  },
+});
+export const cutSelectionOther = define({
+  valid(editor: Editor) {
+    return checkClip(editor);
+  },
+  execute(editor: Editor) {
+    clipSelection.execute(editor, false);
+  },
+});
+export const cutSelectionFirst = define({
+  valid(editor: Editor) {
+    return checkClip(editor);
+  },
+  execute(editor: Editor) {
+    clipSelection.execute(editor, true);
+  },
+});
+function checkClip(editor: Editor) {
+  const polys = editor.selection.filter((e) => e instanceof Polygon);
+  const selectValid = Boolean(polys && polys.length > 1);
+  const modeValid = editor.state.modeConfig.op === OPType.EDIT;
+  return selectValid && modeValid;
+}
+function holeShape(editor: Editor, shape: Polygon, hole: Polygon | Polygon[]) {
+  const holes = Array.isArray(hole) ? hole : [hole];
+  const pos = shape.position();
+  const holesPoints = polygonsHollow(shape, holes);
+  if (pos.x !== 0 || pos.y !== 0) {
+    holesPoints.forEach((inner) => {
+      inner.points.forEach((point) => {
+        point.x -= pos.x;
+        point.y -= pos.y;
+      });
+    });
+  }
+  let { innerPoints } = shape.clonePointsData();
+  innerPoints = innerPoints.concat(holesPoints);
+
+  editor.cmdManager.withGroup(() => {
+    editor.cmdManager.execute('delete-object', holes);
+    editor.cmdManager.execute('update-transform', {
+      objects: shape,
+      transforms: { innerPoints },
+    });
+  });
+
+  editor.selectObject(shape, true);
+}
+function removeHole(editor: Editor, shape: Polygon) {
+  const innerShapes: Polygon[] = [];
+  const { innerPoints } = shape.clonePointsData();
+  innerPoints.forEach((inner) => {
+    const points = getShapeRealPoint(shape, inner.points);
+    const newPoly = new Polygon({ points, innerPoints: [] });
+    editor.initIDInfo(newPoly);
+    innerShapes.push(newPoly);
+  });
+  editor.cmdManager.withGroup(() => {
+    editor.cmdManager.execute('add-object', innerShapes);
+    editor.cmdManager.execute('update-transform', {
+      objects: shape,
+      transforms: { innerPoints: [] },
+    });
+  });
+}
+function clipMultipleByOne(editor: Editor, cropPoly: Polygon, otherPoly: Polygon[]): Polygon[] {
+  let newPolyArr: Polygon[] = [];
+  otherPoly.forEach((cliped) => {
+    const shapes = polygonToClip(cliped, cropPoly);
+    shapes.forEach((poly) => {
+      editor.initIDInfo(poly);
+      poly.userData.classId = cliped.userData.classId;
+      poly.userData.classType = cliped.userData.classType;
+      poly.userData.classVersion = cliped.userData.classVersion;
+      poly.userData.sourceId = cliped.userData.sourceId;
+      editor.mainView.updateObjectByUserData(poly);
+    });
+    newPolyArr = newPolyArr.concat(shapes);
+  });
+  return newPolyArr;
+}
+function clipOneByMultiple(editor: Editor, poly: Polygon, polys: Polygon[]) {
+  let failed: Polygon[] = [];
+  let clipedArr: Polygon[] = [];
+  try {
+    clipedArr = polygonToClips(poly, polys);
+  } catch (error) {
+    failed = polys;
+  }
+  if (failed.length > 0) {
+    console.log('========== clip all failed, and clip one by one');
+    clipedArr = [poly];
+    failed = [];
+    polys.forEach((clipPoly) => {
+      try {
+        const clipeds = clipMultipleByOne(editor, clipPoly, clipedArr);
+        if (clipeds.length > 0) clipedArr = clipeds;
+      } catch (error) {
+        failed.push(clipPoly);
+      }
+    });
+  }
+  if (failed.length > 0) {
+    editor.showMsg(
+      MsgType.error,
+      editor.lang('shareFailed', {
+        polygons: failed.map((e) => `#${e.userData.trackName}`).join(','),
+      }),
+    );
+  }
+  if (clipedArr.length === 0) return [poly];
+  return clipedArr;
+}
+function cropFirstPolygon(editor: Editor, polygonList: Polygon[]) {
+  const [firstPoly, ...otherPoly] = polygonList;
+  const clipedArr = clipOneByMultiple(editor, firstPoly, otherPoly);
+  clipedArr.forEach((poly) => {
+    editor.initIDInfo(poly);
+    poly.userData.classId = firstPoly.userData.classId;
+    poly.userData.classType = firstPoly.userData.classType;
+    poly.userData.classVersion = firstPoly.userData.classVersion;
+    poly.userData.sourceId = firstPoly.userData.sourceId;
+    editor.mainView.updateObjectByUserData(poly);
+  });
+  editor.cmdManager.withGroup(() => {
+    if (editor.state.isSeriesFrame) {
+      editor.cmdManager.execute('add-track', editor.createTrackObj(clipedArr));
+    }
+    editor.cmdManager.execute('add-object', clipedArr);
+    editor.cmdManager.execute('delete-object', firstPoly);
+  });
+}
+function cropOtherPolygon(editor: Editor, polygonList: Polygon[]) {
+  const [firstPoly, ...otherPoly] = polygonList;
+  const newPolyArr: Polygon[] = clipMultipleByOne(editor, firstPoly, otherPoly);
+  if (newPolyArr.length === 0) return;
+  editor.cmdManager.withGroup(() => {
+    if (editor.state.isSeriesFrame) {
+      editor.cmdManager.execute('add-track', editor.createTrackObj(newPolyArr));
+    }
+    editor.cmdManager.execute('add-object', newPolyArr);
+    editor.cmdManager.execute('delete-object', otherPoly);
+  });
+}
diff --git a/frontend/image-tool/src/package/image-editor/common/ActionManager/action/common.ts b/frontend/image-tool/src/package/image-editor/common/ActionManager/action/common.ts
new file mode 100644
index 00000000..5bc9cc8d
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/common/ActionManager/action/common.ts
@@ -0,0 +1,71 @@
+import { AnnotateModeEnum, AnnotateObject, ITransform, ToolAction } from './../../../types';
+import Editor from '../../../Editor';
+import { define } from '../define';
+import { Event } from '../../../configs';
+
+export const deleteSelection = define({
+  valid() {
+    return true;
+  },
+  execute(editor: Editor) {
+    const { currentDrawTool, currentEditTool } = editor.mainView;
+
+    const tool = currentDrawTool || currentEditTool;
+    if (tool && tool.checkAction(ToolAction.del)) {
+      tool.onAction(ToolAction.del);
+    } else {
+      const selection = editor.selection;
+      if (selection.length === 0) return;
+      editor.cmdManager.execute('delete-object', selection);
+      editor.emit(Event.ANNOTATE_HANDLE_DELETE, { objects: selection, type: 1 });
+      editor.selectObject();
+    }
+  },
+});
+export const adjustObject = define({
+  valid(editor: Editor) {
+    const { selection, state } = editor;
+    return (
+      selection.length === 1 &&
+      state.annotateMode === AnnotateModeEnum.INSTANCE &&
+      editor.isDefaultStatus()
+    );
+  },
+  execute(editor: Editor, args?: any) {
+    const object = editor.selection[0];
+    if (!object) return;
+    const rect = object.getSelfRect(true);
+    const position = object.getAbsolutePosition(editor.mainView.stage);
+    const { backgroundWidth, backgroundHeight } = editor.mainView;
+    const left = position.x + rect.x;
+    const up = position.y + rect.y;
+    const right = left + rect.width;
+    const down = up + rect.height;
+
+    const key = args.split('+').pop();
+    let { x, y } = object.attrs;
+    switch (key) {
+      case 'up':
+        if (up <= 0) return;
+        y--;
+        break;
+      case 'down':
+        if (down >= backgroundHeight) return;
+        y++;
+        break;
+      case 'left':
+        if (left <= 0) return;
+        x--;
+        break;
+      case 'right':
+        if (right >= backgroundWidth) return;
+        x++;
+        break;
+    }
+    let objects: AnnotateObject[] = [];
+    let transforms: ITransform[] = [];
+    objects = [object];
+    transforms = [{ x, y }];
+    editor.cmdManager.execute('update-transform', { objects, transforms });
+  },
+});
diff --git a/frontend/image-tool/src/package/image-editor/common/ActionManager/action/index.ts b/frontend/image-tool/src/package/image-editor/common/ActionManager/action/index.ts
new file mode 100644
index 00000000..c0bd0782
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/common/ActionManager/action/index.ts
@@ -0,0 +1,6 @@
+export * from './common';
+export * from './tool';
+export * from './undo-redo';
+export * from './clip';
+export * from './ui';
+export * from './seriesFrame';
diff --git a/frontend/image-tool/src/package/image-editor/common/ActionManager/action/seriesFrame.ts b/frontend/image-tool/src/package/image-editor/common/ActionManager/action/seriesFrame.ts
new file mode 100644
index 00000000..18879779
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/common/ActionManager/action/seriesFrame.ts
@@ -0,0 +1,51 @@
+import Editor from '../../../Editor';
+import { define } from '../define';
+import { OPType, StatusType, AnnotateModeEnum } from '../../../types';
+
+export const toNextFrame = define({
+  valid(editor: Editor) {
+    return editor.isDefaultStatus();
+  },
+  execute(editor: Editor) {
+    changeFrame(editor, 1);
+  },
+});
+export const previousFrame = define({
+  valid(editor: Editor) {
+    return editor.isDefaultStatus();
+  },
+  execute(editor: Editor) {
+    changeFrame(editor, -1);
+  },
+});
+export const copyToNext = define({
+  valid(editor: Editor) {
+    return canCopy(editor);
+  },
+  execute(editor: Editor) {
+    editor.dataManager.copyForward();
+  },
+});
+export const copyToLast = define({
+  valid(editor: Editor) {
+    return canCopy(editor);
+  },
+  execute(editor: Editor) {
+    editor.dataManager.copyBackWard();
+  },
+});
+
+function changeFrame(editor: Editor, type: number) {
+  const { frames, frameIndex } = editor.state;
+  const index = frameIndex + type;
+  if (index < 0 || index >= frames.length) return;
+  editor.switchFrame(index);
+}
+function canCopy(editor: Editor) {
+  const { state } = editor;
+  return (
+    (state.modeConfig.op === OPType.EDIT || state.modeConfig.name === 'all') &&
+    state.annotateMode === AnnotateModeEnum.INSTANCE &&
+    state.status === StatusType.Default
+  );
+}
diff --git a/frontend/image-tool/src/package/image-editor/common/ActionManager/action/tool.ts b/frontend/image-tool/src/package/image-editor/common/ActionManager/action/tool.ts
new file mode 100644
index 00000000..23a8ac4b
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/common/ActionManager/action/tool.ts
@@ -0,0 +1,99 @@
+import Editor from '../../../Editor';
+import { define } from '../define';
+import { LineDrawMode, ToolAction } from '../../../types';
+import { Event, Cursor } from '../../../configs';
+import { PolylineTool } from 'image-editor/ImageView/shapeTool';
+
+export const changeTool = define({
+  valid() {
+    return true;
+  },
+  canBlocked() {
+    return false;
+  },
+  execute(editor: Editor, args?: any) {
+    return () => {
+      editor.emit(Event.TOOL_CHANGE, args);
+    };
+  },
+  end(editor: Editor, executeCallback: Function) {
+    executeCallback();
+  },
+});
+
+export const selectTool = define({
+  valid() {
+    return true;
+  },
+  canBlocked() {
+    return false;
+  },
+  execute(editor: Editor) {
+    editor.mainView.disableDraw();
+    editor.selectObject();
+  },
+});
+
+export const drawTool = define({
+  valid() {
+    return true;
+  },
+  canBlocked() {
+    return false;
+  },
+  execute(editor: Editor, type: string) {
+    const state = editor.state;
+    if (state.activeTool !== type) editor.mainView.enableDraw(type);
+  },
+});
+
+export const stopCurrentDraw = define({
+  valid() {
+    return true;
+  },
+  canBlocked() {
+    return false;
+  },
+  execute(editor: Editor) {
+    const { currentDrawTool, currentEditTool } = editor.mainView;
+    const tool = currentDrawTool || currentEditTool;
+
+    if (tool && tool.checkAction(ToolAction.stop)) {
+      tool.onAction(ToolAction.stop);
+    }
+    editor.mainView.setCursor(editor.mainView.cursor || Cursor.auto);
+  },
+});
+
+export const lineToolDrawMode = define({
+  valid(editor: Editor) {
+    const curDrawTool = editor.mainView.currentDrawTool;
+    return Boolean(curDrawTool && curDrawTool instanceof PolylineTool);
+  },
+  canBlocked() {
+    return false;
+  },
+  execute(editor: Editor, key: string) {
+    const cfg = editor.state.toolConfig;
+    if (key === 'a') {
+      cfg.lineMode =
+        cfg.lineMode === LineDrawMode.horizontal ? LineDrawMode.default : LineDrawMode.horizontal;
+    } else {
+      cfg.lineMode =
+        cfg.lineMode === LineDrawMode.vertical ? LineDrawMode.default : LineDrawMode.vertical;
+    }
+    const curDrawTool = editor.mainView.currentDrawTool;
+    if (curDrawTool && curDrawTool instanceof PolylineTool) {
+      curDrawTool.updateHolder();
+    }
+    // if (cfg.lineMode === LineDrawMode.default) {
+    //   editor.visibleMessageBox(false);
+    // } else if (cfg.lineMode === LineDrawMode.horizontal) {
+    //   const txt = editor.lang('Horizontal Drawing Model');
+    //   editor.visibleMessageBox(true, txt);
+    // } else if (cfg.lineMode === LineDrawMode.vertical) {
+    //   const txt = editor.lang('Vertical Drawing Model');
+    //   editor.visibleMessageBox(true, txt);
+    // }
+  },
+});
diff --git a/frontend/image-tool/src/package/image-editor/common/ActionManager/action/ui.ts b/frontend/image-tool/src/package/image-editor/common/ActionManager/action/ui.ts
new file mode 100644
index 00000000..774b1ddd
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/common/ActionManager/action/ui.ts
@@ -0,0 +1,40 @@
+import Editor from '../../../Editor';
+import { define } from '../define';
+import { Event } from '../../../configs';
+
+export const toggleHelpLine = define({
+  valid() {
+    return true;
+  },
+  canBlocked: () => false,
+  execute(editor: Editor) {
+    const { config } = editor.state;
+    config.helperLine.showLine = !config.helperLine.showLine;
+  },
+});
+export const toggleClassTitle = define({
+  valid() {
+    return true;
+  },
+  canBlocked: () => false,
+  execute(editor: Editor) {
+    const { config } = editor.state;
+    config.showClassTitle = !config.showClassTitle;
+    if (config.showClassTitle) editor.emit(Event.DRAW);
+  },
+});
+export const toggleClassView = define({
+  valid() {
+    return true;
+  },
+  execute(editor: Editor) {
+    const { config } = editor.state;
+    const selection = editor.selection;
+
+    if (config.showClassView) {
+      config.showClassView = false;
+    } else if (selection.length === 1) {
+      editor.emit(Event.SHOW_CLASS_INFO, selection[0]);
+    }
+  },
+});
diff --git a/frontend/image-tool/src/package/image-editor/common/ActionManager/action/undo-redo.ts b/frontend/image-tool/src/package/image-editor/common/ActionManager/action/undo-redo.ts
new file mode 100644
index 00000000..3b945bbc
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/common/ActionManager/action/undo-redo.ts
@@ -0,0 +1,28 @@
+import { ToolAction } from './../../../types';
+import Editor from '../../../Editor';
+import { define } from '../define';
+
+export const undo = define({
+  valid() {
+    return true;
+  },
+  canBlocked: () => false,
+  execute(editor: Editor) {
+    const { currentDrawTool, currentEditTool } = editor.mainView;
+    const tool = currentDrawTool || currentEditTool;
+    if (tool && tool.checkAction(ToolAction.undo)) {
+      tool.onAction(ToolAction.undo);
+    } else {
+      editor.cmdManager.undo();
+    }
+  },
+});
+
+export const redo = define({
+  valid() {
+    return true;
+  },
+  execute(editor: Editor) {
+    editor.cmdManager.redo();
+  },
+});
diff --git a/frontend/image-tool/src/package/image-editor/common/ActionManager/define.ts b/frontend/image-tool/src/package/image-editor/common/ActionManager/define.ts
new file mode 100644
index 00000000..e4918fa5
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/common/ActionManager/define.ts
@@ -0,0 +1,27 @@
+import type Editor from '../../Editor';
+
+export interface IActionOption {
+  name?: string;
+  end?: (e: Editor, executeCallback: Function, ...args: any[]) => void;
+  isContinue?: (e: Editor) => boolean;
+  canBlocked?: (e: Editor) => boolean;
+  valid?: (e: Editor) => boolean;
+  execute: (e: Editor, ...args: any[]) => Promise<any> | void | Error | Function;
+  [key: string]: any;
+}
+
+export type IAction = Required<IActionOption>;
+
+function noop() {}
+const defaultOption: IAction = {
+  name: '',
+  valid: () => true,
+  execute: noop,
+  end: noop,
+  canBlocked: () => true,
+  isContinue: () => false,
+};
+
+export function define(option: IActionOption): IAction {
+  return Object.assign({}, defaultOption, option);
+}
diff --git a/frontend/image-tool/src/package/image-editor/common/ActionManager/index.ts b/frontend/image-tool/src/package/image-editor/common/ActionManager/index.ts
new file mode 100644
index 00000000..7b510b63
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/common/ActionManager/index.ts
@@ -0,0 +1,117 @@
+import Editor from '../../Editor';
+import * as Actions from './action';
+import { IAction } from './define';
+import { StatusType, ToolAction } from '../../types';
+import { Event } from '../../configs';
+
+export type IActionName = keyof typeof Actions;
+
+Object.keys(Actions).forEach((name) => {
+  Actions[name as IActionName].name = name;
+});
+
+export const AllActions = Object.keys(Actions) as IActionName[];
+
+export default class ActionManager {
+  editor: Editor;
+  actions: Record<string, IAction>;
+  currentAction: IAction | undefined = undefined;
+  blockStatus: StatusType[] = [
+    StatusType.Loading,
+    StatusType.Confirm,
+    StatusType.Modal,
+    StatusType.Play,
+    StatusType.Create,
+  ];
+  constructor(editor: Editor) {
+    this.editor = editor;
+    this.actions = { ...Actions };
+  }
+
+  registryAction(name: string, action: IAction) {
+    this.actions[name] = action;
+  }
+
+  async execute<T extends IActionName>(name: T | T[], ...args: any[]): Promise<any> {
+    let action = undefined;
+    if (Array.isArray(name)) {
+      action = this.getEnableAction(name);
+    } else {
+      action = this.actions[name] as IAction;
+    }
+
+    if (!action) return;
+    const canBlocked = action.canBlocked(this.editor);
+    if (this.isBlocked() && canBlocked) {
+      console.log(`action ${name} blocked`);
+      return;
+    }
+
+    let result;
+    let preAction;
+    if (action.valid(this.editor)) {
+      this.editor.emit(Event.ACTION_START, name);
+      console.log('action start:', action.name);
+      preAction = this.currentAction;
+      this.currentAction = action;
+      try {
+        result = await action.execute(this.editor, ...args);
+      } catch (e) {
+        console.error('action error:', name);
+        console.error(e);
+      }
+      this.currentAction = preAction;
+      console.log('action end:', name);
+      action.end(this.editor, result);
+      this.editor.emit(Event.ACTION_END, name);
+    }
+
+    return result;
+  }
+
+  isBlocked() {
+    // return false;
+    const { status, blocked } = this.editor.state;
+    console.log(this.currentAction);
+    return this.currentAction || blocked || this.blockStatus.includes(status);
+  }
+
+  getEnableAction(names: IActionName[]) {
+    const config = this.editor.state.modeConfig;
+    for (let i = 0; i < names.length; i++) {
+      const name = names[i];
+      const action = this.actions[name] as IAction;
+      if (action && config.actions[name] && action.valid(this.editor)) return action;
+    }
+
+    return undefined;
+  }
+
+  stopCurrentAction() {
+    if (!this.currentAction) return;
+
+    this.currentAction.end(this.editor, () => {});
+    console.log(`stop action: ${this.currentAction.name}`);
+
+    this.currentAction = undefined;
+  }
+
+  handleEsc() {
+    const { currentDrawTool, currentEditTool } = this.editor.mainView;
+    const tool = currentDrawTool || currentEditTool;
+    if (tool && tool.checkAction(ToolAction.esc)) {
+      tool.onAction(ToolAction.esc);
+    } else if (this.currentAction) {
+      this.stopCurrentAction();
+    } else if (this.editor.selection.length > 0) {
+      this.editor.selectObject();
+    }
+  }
+
+  isActionValid(name: IActionName) {
+    const action = this.actions[name] as IAction;
+    if (!action) return false;
+
+    return action.valid(this.editor);
+  }
+}
diff --git a/frontend/image-tool/src/package/image-editor/common/BSError.ts b/frontend/image-tool/src/package/image-editor/common/BSError.ts
new file mode 100644
index 00000000..4e131f28
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/common/BSError.ts
@@ -0,0 +1,10 @@
+export default class BSError {
+  code: string;
+  message: string;
+  oriError: any;
+  constructor(code?: string, message?: string, oriError?: any) {
+    this.code = code || '';
+    this.message = message || '';
+    this.oriError = oriError;
+  }
+}
diff --git a/frontend/image-tool/src/package/image-editor/common/CmdManager/CmdBase.ts b/frontend/image-tool/src/package/image-editor/common/CmdManager/CmdBase.ts
new file mode 100644
index 00000000..3a0d86b1
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/common/CmdManager/CmdBase.ts
@@ -0,0 +1,27 @@
+import Editor from '../../Editor';
+export default class CmdBase<T = any, D = any> {
+  name: string = '';
+  createTime: number = 0;
+  updateTime: number = 0;
+  editor: Editor;
+  data: T;
+  undoData: D | undefined = undefined;
+  constructor(editor: Editor, data: T) {
+    this.createTime = new Date().getTime();
+    this.updateTime = this.createTime;
+    this.data = data;
+    this.editor = editor;
+  }
+  redo() {
+    throw new Error('need implement redo method');
+  }
+  undo() {
+    throw new Error('need implement undo method');
+  }
+
+  canMerge(cmd: CmdBase) {
+    return false;
+  }
+
+  merge(cmd: CmdBase) {}
+}
diff --git a/frontend/image-tool/src/package/image-editor/common/CmdManager/CmdGroup.ts b/frontend/image-tool/src/package/image-editor/common/CmdManager/CmdGroup.ts
new file mode 100644
index 00000000..8c2e8951
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/common/CmdManager/CmdGroup.ts
@@ -0,0 +1,28 @@
+import Editor from '../../Editor';
+import CmdBase from './CmdBase';
+
+export default class CmdGroup extends CmdBase {
+  cmds: CmdBase[] = [];
+  constructor(editor: Editor) {
+    super(editor, undefined);
+  }
+  redo() {
+    try {
+      this.cmds.forEach((e) => {
+        e.redo();
+      });
+    } catch (error) {
+      console.error(error);
+    }
+  }
+  undo() {
+    try {
+      const cmds = [...this.cmds].reverse();
+      cmds.forEach((e) => {
+        e.undo();
+      });
+    } catch (error) {
+      console.error(error);
+    }
+  }
+}
diff --git a/frontend/image-tool/src/package/image-editor/common/CmdManager/cmd/AddObject.ts b/frontend/image-tool/src/package/image-editor/common/CmdManager/cmd/AddObject.ts
new file mode 100644
index 00000000..823bc92a
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/common/CmdManager/cmd/AddObject.ts
@@ -0,0 +1,42 @@
+import CmdBase from '../CmdBase';
+import type { ICmdOption } from './index';
+import { AnnotateObject, IFrame } from '../../../types';
+import Konva from 'konva';
+
+export interface IAddObjectItem {
+  group?: Konva.Group;
+  objects: AnnotateObject | AnnotateObject[];
+  frame?: IFrame;
+}
+
+export type IAddObjectOption = IAddObjectItem[] | AnnotateObject | AnnotateObject[];
+
+export default class AddObject extends CmdBase<ICmdOption['add-object'], any> {
+  name: string = 'add-object';
+  redo(): void {
+    const editor = this.editor;
+    const frame = editor.getCurrentFrame();
+
+    if (!Array.isArray(this.data) || !(this.data[0] as any).objects) {
+      const objects = Array.isArray(this.data) ? this.data : [this.data];
+      const data: IAddObjectItem[] = [{ objects: objects as AnnotateObject[] }];
+      this.data = data;
+    }
+
+    const datas = this.data as IAddObjectItem[];
+
+    datas.forEach((data) => {
+      if (!data.frame) data.frame = frame;
+      editor.dataManager.addAnnotates(data.objects, data.frame);
+    });
+  }
+  undo(): void {
+    const editor = this.editor;
+
+    const datas = this.data as IAddObjectItem[];
+
+    datas.forEach((data) => {
+      editor.dataManager.removeAnnotates(data.objects, data.frame);
+    });
+  }
+}
diff --git a/frontend/image-tool/src/package/image-editor/common/CmdManager/cmd/AddTrack.ts b/frontend/image-tool/src/package/image-editor/common/CmdManager/cmd/AddTrack.ts
new file mode 100644
index 00000000..de8344ab
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/common/CmdManager/cmd/AddTrack.ts
@@ -0,0 +1,30 @@
+import CmdBase from '../CmdBase';
+import type { ICmdOption } from './index';
+import { IUserData } from '../../../types';
+import { createUUID } from '../../../utils';
+
+export type IAddTrackOption = Partial<IUserData> | Partial<IUserData>[];
+
+export default class AddTrack extends CmdBase<ICmdOption['add-track'], any> {
+  redo(): void {
+    const editor = this.editor;
+
+    let data = this.data;
+    if (!Array.isArray(data)) data = [data];
+
+    data.forEach((e: Partial<IUserData>) => {
+      if (!e.trackId) e.trackId = createUUID();
+      editor.trackManager.addTrackObject(e.trackId, e);
+    });
+  }
+  undo(): void {
+    const editor = this.editor;
+
+    let data = this.data;
+    if (!Array.isArray(data)) data = [data];
+
+    data.forEach((e: Partial<IUserData>) => {
+      editor.trackManager.removeTrackObject(e.trackId as string);
+    });
+  }
+}
diff --git a/frontend/image-tool/src/package/image-editor/common/CmdManager/cmd/DeleteObject.ts b/frontend/image-tool/src/package/image-editor/common/CmdManager/cmd/DeleteObject.ts
new file mode 100644
index 00000000..7272cd2e
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/common/CmdManager/cmd/DeleteObject.ts
@@ -0,0 +1,68 @@
+import CmdBase from '../CmdBase';
+import type { ICmdOption } from './index';
+import type { AnnotateObject, IFrame } from '../../../types';
+
+export interface IDeleteObjectItem {
+  objects: AnnotateObject | AnnotateObject[];
+  frame?: IFrame;
+}
+
+interface IUndoData {
+  subObjects: AnnotateObject[];
+  topObjects: AnnotateObject[];
+}
+
+export type IDeleteObjectOption = IDeleteObjectItem | AnnotateObject | AnnotateObject[];
+
+export default class DeleteObject extends CmdBase<ICmdOption['delete-object'], IUndoData> {
+  name: string = 'delete-object';
+  redo(): void {
+    const editor = this.editor;
+    const frame = editor.getCurrentFrame();
+
+    if (!(this.data as any).objects) {
+      const objects = Array.isArray(this.data) ? this.data : [this.data];
+      const _data: IDeleteObjectItem = { objects: objects as AnnotateObject[] };
+      this.data = _data;
+    }
+
+    const data = this.data as IDeleteObjectItem;
+    if (!data.frame) data.frame = frame;
+    const objects = data.objects as AnnotateObject[];
+
+    if (!this.undoData) {
+      const { subObjects, topObjects } = getObjects(objects);
+      this.undoData = {
+        subObjects,
+        topObjects,
+      };
+    }
+
+    const { subObjects, topObjects } = this.undoData;
+    editor.dataManager.removeAnnotates([...subObjects, ...topObjects], data.frame);
+  }
+  undo(): void {
+    const editor = this.editor;
+    const data = this.data as IDeleteObjectItem;
+
+    if (!this.undoData) return;
+
+    const { topObjects, subObjects } = this.undoData;
+    editor.dataManager.addAnnotates([...subObjects, ...topObjects], data.frame);
+  }
+}
+
+function getObjects(objects: AnnotateObject[]) {
+  const map: any = {};
+  objects.forEach((e) => {
+    map[e.uuid] = true;
+  });
+
+  const subObjects = [] as AnnotateObject[];
+  const topObjects = [] as AnnotateObject[];
+  objects.forEach((e) => {
+    topObjects.push(e);
+  });
+
+  return { subObjects, topObjects };
+}
diff --git a/frontend/image-tool/src/package/image-editor/common/CmdManager/cmd/DeleteTrack.ts b/frontend/image-tool/src/package/image-editor/common/CmdManager/cmd/DeleteTrack.ts
new file mode 100644
index 00000000..16b92f60
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/common/CmdManager/cmd/DeleteTrack.ts
@@ -0,0 +1,35 @@
+import CmdBase from '../CmdBase';
+import type { ICmdOption } from './index';
+// import { IUserData } from '../../../type';
+import { IUserData } from '../../../types';
+
+export type IDeleteTrackOption = string | string[];
+
+export default class DeleteTrack extends CmdBase<ICmdOption['delete-track'], IUserData[]> {
+  redo(): void {
+    const editor = this.editor;
+
+    let data = this.data;
+    if (!Array.isArray(data)) data = [data];
+
+    if (!this.undoData) {
+      this.undoData = data.map((trackId) =>
+        editor.trackManager.getTrackObject(trackId),
+      ) as IUserData[];
+    }
+
+    data.forEach((trackId) => {
+      editor.trackManager.removeTrackObject(trackId);
+    });
+  }
+  undo(): void {
+    const editor = this.editor;
+
+    if (!this.undoData) return;
+
+    const data = this.undoData;
+    data.forEach((obj) => {
+      editor.trackManager.addTrackObject(obj.trackId as string, obj);
+    });
+  }
+}
diff --git a/frontend/image-tool/src/package/image-editor/common/CmdManager/cmd/UpdateAttrs.ts b/frontend/image-tool/src/package/image-editor/common/CmdManager/cmd/UpdateAttrs.ts
new file mode 100644
index 00000000..f9f85e84
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/common/CmdManager/cmd/UpdateAttrs.ts
@@ -0,0 +1,52 @@
+import CmdBase from '../CmdBase';
+import * as THREE from 'three';
+import type { ICmdOption } from './index';
+import { ITransform, IShapeConfig } from '../../../types';
+import { AnnotateObject } from '../../../ImageView/shape';
+import * as utils from '../../../utils';
+
+export interface IUpdateAttrsOption {
+  objects: AnnotateObject[] | AnnotateObject;
+  data: IShapeConfig[] | IShapeConfig;
+}
+
+export default class UpdateAttrs extends CmdBase<ICmdOption['update-attrs'], IShapeConfig[]> {
+  name: string = 'update-points';
+  redo(): void {
+    let { data, objects } = this.data;
+    const editor = this.editor;
+
+    if (!Array.isArray(objects)) objects = [objects];
+
+    if (!this.undoData) {
+      const undoData = [] as IShapeConfig[];
+
+      const attrKeys = Object.keys(Array.isArray(data) ? data[0] : data);
+      objects.forEach((object, index) => {
+        const copeData = pickAttrs(object, attrKeys) as IShapeConfig;
+        undoData.push(copeData);
+      });
+
+      this.undoData = undoData;
+    }
+
+    // editor.dataManager.setAnnotatesAttrs(objects, data);
+  }
+  undo(): void {
+    if (!this.undoData) return;
+    const editor = this.editor;
+    let { objects } = this.data;
+
+    if (!Array.isArray(objects)) objects = [objects];
+
+    // editor.dataManager.setAnnotatesAttrs(objects, this.undoData);
+  }
+}
+
+function pickAttrs(object: AnnotateObject, attrs: string[]) {
+  const newObj: any = {};
+  attrs.forEach((attr) => {
+    newObj[attr] = object.getAttr(attr);
+  });
+  return newObj;
+}
diff --git a/frontend/image-tool/src/package/image-editor/common/CmdManager/cmd/UpdateTrack.ts b/frontend/image-tool/src/package/image-editor/common/CmdManager/cmd/UpdateTrack.ts
new file mode 100644
index 00000000..f8412f30
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/common/CmdManager/cmd/UpdateTrack.ts
@@ -0,0 +1,57 @@
+import CmdBase from '../CmdBase';
+import type { ICmdOption } from './index';
+import { IUserData } from '../../../types';
+import { cloneDeep } from 'lodash';
+
+interface ITrackItem {
+  trackId: string;
+  data: Partial<IUserData>;
+}
+
+export type IUpdateTrackOption = ITrackItem[];
+
+export default class UpdateTrack extends CmdBase<
+  ICmdOption['update-track'],
+  ICmdOption['update-track']
+> {
+  redo(): void {
+    const editor = this.editor;
+
+    // let { tracks, objects } = this.data;
+
+    if (!this.undoData) {
+      const undoData: ITrackItem[] = [];
+      this.data.forEach((data) => {
+        let oldData = editor.trackManager.getTrackObject(data.trackId) || {};
+        oldData = cloneDeep(oldData);
+        undoData.push({ trackId: data.trackId, data: oldData });
+      });
+
+      this.undoData = undoData;
+    }
+
+    this.data.forEach((data) => {
+      editor.trackManager.updateTrackData(data.trackId, data.data);
+    });
+
+    const trackIds = this.data.map((e) => e.trackId);
+    const objects = editor.trackManager.getObjects(trackIds);
+    // test
+    (this as any).objects = objects;
+    if (objects.length > 0) editor.mainView.updateObjectByUserData(objects);
+  }
+  undo(): void {
+    const editor = this.editor;
+
+    if (!this.undoData) return;
+
+    this.undoData.forEach((data) => {
+      editor.trackManager.updateTrackData(data.trackId, data.data);
+    });
+
+    const trackIds = this.data.map((e) => e.trackId);
+    const objects = editor.trackManager.getObjects(trackIds);
+
+    if (objects.length > 0) editor.mainView.updateObjectByUserData(objects);
+  }
+}
diff --git a/frontend/image-tool/src/package/image-editor/common/CmdManager/cmd/UpdateTransform.ts b/frontend/image-tool/src/package/image-editor/common/CmdManager/cmd/UpdateTransform.ts
new file mode 100644
index 00000000..725498b7
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/common/CmdManager/cmd/UpdateTransform.ts
@@ -0,0 +1,66 @@
+import CmdBase from '../CmdBase';
+import type { ICmdOption } from './index';
+import { ITransform } from '../../../types';
+import { AnnotateObject } from '../../../ImageView/shape';
+import { cloneDeep } from 'lodash';
+
+export interface IUpdateTransformOption {
+  objects: AnnotateObject[] | AnnotateObject;
+  transforms: ITransform[] | ITransform;
+  fromData?: ITransform[] | ITransform;
+}
+
+export default class UpdateTransform extends CmdBase<
+  ICmdOption['update-transform'],
+  ICmdOption['update-transform']
+> {
+  name: string = 'update-transform';
+  redo(): void {
+    let editor = this.editor;
+
+    let { objects, transforms } = this.data;
+    if (!Array.isArray(objects)) objects = [objects];
+
+    if (!this.undoData) {
+      let undoData: IUpdateTransformOption = {
+        objects: objects,
+        transforms: [],
+      };
+      objects.forEach((object, index) => {
+        const changePro = Array.isArray(transforms)
+          ? transforms[index] || transforms[0]
+          : transforms;
+        const clonePro: Record<string, any> = {};
+        Object.keys(changePro).forEach((key) => {
+          clonePro[key] = cloneDeep(object.attrs[key]);
+        });
+        (undoData.transforms as ITransform[]).push(clonePro);
+      });
+      this.undoData = undoData;
+    }
+
+    editor.dataManager.setAnnotatesTransform(objects, transforms);
+  }
+  undo(): void {
+    if (!this.undoData) return;
+    let editor = this.editor;
+    let { transforms, objects } = this.undoData;
+    if (!Array.isArray(objects)) objects = [objects];
+
+    editor.dataManager.setAnnotatesTransform(objects, transforms);
+  }
+  canMerge(cmd: CmdBase): boolean {
+    let offsetTime = Math.abs(this.updateTime - cmd.updateTime);
+    return cmd instanceof UpdateTransform &&
+      this.data.objects === cmd.data.objects &&
+      !Array.isArray(this.data.transforms) &&
+      offsetTime < 500
+      ? true
+      : false;
+  }
+
+  merge(cmd: UpdateTransform) {
+    Object.assign(this.data.transforms, cmd.data.transforms);
+    this.updateTime = new Date().getTime();
+  }
+}
diff --git a/frontend/image-tool/src/package/image-editor/common/CmdManager/cmd/UpdateUserData.ts b/frontend/image-tool/src/package/image-editor/common/CmdManager/cmd/UpdateUserData.ts
new file mode 100644
index 00000000..78ab0eea
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/common/CmdManager/cmd/UpdateUserData.ts
@@ -0,0 +1,68 @@
+import CmdBase from '../CmdBase';
+import type { ICmdOption } from './index';
+import { IUserData, AnnotateObject } from '../../../types';
+import * as utils from '../../../utils';
+
+export interface IUpdateUserDataOption {
+  objects: AnnotateObject[] | AnnotateObject;
+  data: IUserData[] | IUserData;
+}
+
+export default class UpdateUserData extends CmdBase<
+  ICmdOption['update-user-data'],
+  ICmdOption['update-user-data']
+> {
+  name: string = 'update-user-data';
+  redo(): void {
+    const editor = this.editor;
+
+    let { data, objects } = this.data;
+
+    if (!Array.isArray(objects)) objects = [objects];
+
+    if (!this.undoData) {
+      const undoData: IUpdateUserDataOption = {
+        objects: objects,
+        data: [],
+        // transform: { objects: [], transforms: [] },
+      };
+
+      const attrKeys = Object.keys(Array.isArray(data) ? data[0] : data);
+      objects.forEach((object, index) => {
+        const copeData = utils.pickAttrs(object.userData, attrKeys) as IUserData;
+        undoData.data.push(copeData);
+      });
+
+      this.undoData = undoData;
+    }
+
+    editor.dataManager.setAnnotatesUserData(objects, data);
+  }
+  undo(): void {
+    const editor = this.editor;
+
+    if (!this.undoData) return;
+
+    let { data, objects } = this.undoData;
+    if (!Array.isArray(objects)) objects = [objects];
+
+    editor.dataManager.setAnnotatesUserData(objects, data);
+  }
+
+  canMerge(cmd: UpdateUserData): boolean {
+    const data = this.data;
+    const offsetTime = Math.abs(this.updateTime - cmd.updateTime);
+    const valid =
+      cmd instanceof UpdateUserData &&
+      data.objects === data.objects &&
+      !Array.isArray(data.data) &&
+      offsetTime < 1000;
+
+    return valid;
+  }
+
+  merge(cmd: UpdateUserData) {
+    Object.assign(this.data.data, cmd.data.data);
+    this.updateTime = new Date().getTime();
+  }
+}
diff --git a/frontend/image-tool/src/package/image-editor/common/CmdManager/cmd/index.ts b/frontend/image-tool/src/package/image-editor/common/CmdManager/cmd/index.ts
new file mode 100644
index 00000000..149c37a1
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/common/CmdManager/cmd/index.ts
@@ -0,0 +1,33 @@
+import AddObject, { IAddObjectOption } from './AddObject';
+import DeleteObject, { IDeleteObjectOption } from './DeleteObject';
+import UpdateUserData, { IUpdateUserDataOption } from './UpdateUserData';
+import UpdateTransform, { IUpdateTransformOption } from './UpdateTransform';
+import UpdateAttrs, { IUpdateAttrsOption } from './UpdateAttrs';
+import AddTrack, { IAddTrackOption } from './AddTrack';
+import UpdateTrack, { IUpdateTrackOption } from './UpdateTrack';
+import DeleteTrack, { IDeleteTrackOption } from './DeleteTrack';
+
+export interface ICmdOption {
+  'add-object': IAddObjectOption;
+  'delete-object': IDeleteObjectOption;
+  'update-user-data': IUpdateUserDataOption;
+  'update-transform': IUpdateTransformOption;
+  'update-attrs': IUpdateAttrsOption;
+  'add-track': IAddTrackOption;
+  'update-track': IUpdateTrackOption;
+  'delete-track': IDeleteTrackOption;
+}
+
+type Name = keyof ICmdOption;
+const CMD: Record<Name, any> = {
+  'add-object': AddObject,
+  'delete-object': DeleteObject,
+  'update-user-data': UpdateUserData,
+  'update-transform': UpdateTransform,
+  'update-attrs': UpdateAttrs,
+  'add-track': AddTrack,
+  'update-track': UpdateTrack,
+  'delete-track': DeleteTrack,
+};
+
+export default CMD;
diff --git a/frontend/image-tool/src/package/image-editor/common/CmdManager/index.ts b/frontend/image-tool/src/package/image-editor/common/CmdManager/index.ts
new file mode 100644
index 00000000..d3e36e57
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/common/CmdManager/index.ts
@@ -0,0 +1,147 @@
+import CmdBase from './CmdBase';
+import CMD from './cmd/index';
+import Editor from '../../Editor';
+import type { ICmdOption } from './cmd/index';
+import { Event } from '../../configs';
+import CmdGroup from './CmdGroup';
+import EventEmitter from 'eventemitter3';
+
+export type ICmdName = keyof typeof CMD;
+
+export interface ICmdBackup {
+  cmds: CmdBase[];
+  index: number;
+}
+
+export default class CmdManager extends EventEmitter {
+  static Cmd = CMD;
+  editor: Editor;
+  cmds: CmdBase[] = [];
+  index: number = -1;
+  max: number = 20;
+  backup: ICmdBackup | undefined = undefined;
+  private _group: CmdGroup | undefined = undefined;
+  constructor(editor: Editor) {
+    super();
+    this.editor = editor;
+  }
+
+  execute<T extends ICmdName>(name: T | CmdGroup, data?: ICmdOption[T]) {
+    let cmd = {} as CmdBase;
+    if (name instanceof CmdGroup) {
+      cmd = name;
+    } else {
+      const CmdCtr = CmdManager.Cmd[name];
+      if (!CmdCtr) return;
+      cmd = new CmdCtr(this.editor, data as any);
+      cmd.name = name;
+    }
+
+    if (this._group) {
+      this._group.cmds.push(cmd);
+      return;
+    }
+
+    this.cmds = this.cmds.slice(0, this.index + 1);
+
+    const last = this.cmds[this.index];
+    if (last && last.canMerge(cmd)) {
+      last.merge(cmd);
+      last.redo();
+    } else {
+      cmd.redo();
+      this.cmds.push(cmd);
+    }
+
+    if (this.cmds.length > this.max) {
+      this.cmds = this.cmds.slice(-this.max);
+    }
+
+    this.index = this.cmds.length - 1;
+    this.emit(Event.EXECUTE, { cmd, last });
+  }
+
+  addExecuteManually(cmd: CmdBase) {
+    if (this._group) {
+      this._group.cmds.push(cmd);
+      return;
+    }
+
+    this.cmds = this.cmds.slice(0, this.index + 1);
+    this.cmds.push(cmd);
+    if (this.cmds.length > this.max) {
+      this.cmds = this.cmds.slice(-this.max);
+    }
+    this.index = this.cmds.length - 1;
+    this.emit(Event.EXECUTE, { cmd });
+  }
+
+  undo() {
+    if (this.index < 0 || this.cmds.length === 0) return;
+
+    const cmd = this.cmds[this.index];
+
+    cmd.undo();
+
+    this.index--;
+    this.emit(Event.UNDO, { cmd });
+  }
+
+  redo() {
+    if (this.cmds.length === 0 || this.index >= this.cmds.length - 1) return;
+
+    const cmd = this.cmds[this.index + 1];
+
+    cmd.redo();
+
+    this.index++;
+    this.emit(Event.REDO, { cmd });
+  }
+
+  withGroup(groupFn: () => void) {
+    if (this._group) {
+      groupFn();
+      return;
+    }
+
+    const group = new CmdGroup(this.editor);
+    this._group = group;
+
+    let errFlag = false;
+    try {
+      groupFn();
+    } catch (error) {
+      console.log(error);
+      errFlag = true;
+    }
+
+    this._group = undefined;
+
+    if (errFlag) return;
+
+    if (group.cmds.length > 0) this.execute(group);
+  }
+
+  reset() {
+    this.cmds = [];
+    this.index = -1;
+    this.emit(Event.RESET);
+  }
+
+  saveHistory() {
+    const backup: ICmdBackup = {
+      cmds: this.cmds,
+      index: this.index,
+    };
+    this.backup = backup;
+    this.cmds = [];
+    this.index = -1;
+  }
+  restoreHistory() {
+    if (this.backup) {
+      this.cmds = this.backup.cmds;
+      this.index = this.backup.index;
+      this.backup = undefined;
+    }
+  }
+}
diff --git a/frontend/image-tool/src/package/image-editor/common/CmdManager/type.ts b/frontend/image-tool/src/package/image-editor/common/CmdManager/type.ts
new file mode 100644
index 00000000..595ad516
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/common/CmdManager/type.ts
@@ -0,0 +1,2 @@
+export type { ICmdName } from './index';
+// export type { ICmdOption } from './cmd/index';
diff --git a/frontend/image-tool/src/package/image-editor/common/DataManager.ts b/frontend/image-tool/src/package/image-editor/common/DataManager.ts
new file mode 100644
index 00000000..7ba14623
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/common/DataManager.ts
@@ -0,0 +1,291 @@
+import {
+  IFrame,
+  AnnotateModeEnum,
+  AnnotateObject,
+  Const,
+  ITransform,
+  IObjectSource,
+  IShapeConfig,
+  IUserData,
+  ModelCodeEnum,
+  MsgType,
+} from '../types';
+import * as utils from '../utils';
+import * as _utils from '../ImageView/utils';
+import Editor from '../Editor';
+import { Event } from '../configs';
+import { ShapeRoot } from '../ImageView';
+import { __UNSERIES__ } from '..';
+
+export default class DataManager {
+  editor: Editor;
+  // Multi series frames; seriesFrame is named scene
+  sceneMap: Map<string, IFrame[]> = new Map();
+  sceneId: string = __UNSERIES__;
+  // annotations container map
+  dataMap: Map<string, ShapeRoot> = new Map();
+  // annotations source map
+  sourceMap: Record<string, IObjectSource[]> = {};
+
+  constructor(editor: Editor) {
+    this.editor = editor;
+  }
+  /**
+   * Scene
+   */
+  setSceneDataByFrames(data: IFrame[]) {
+    this.clearSceneMap();
+    data.forEach((e) => {
+      const key = e.sceneId ? String(e.sceneId) : __UNSERIES__;
+      let arr = this.sceneMap.get(key);
+      if (!arr) {
+        arr = [];
+        this.sceneMap.set(key, arr);
+      }
+      arr.push(e);
+    });
+  }
+  getFramesBySceneIndex(index: number) {
+    const arr = Array.from(this.sceneMap.values());
+    return arr[index] || [];
+  }
+  getFramesBySceneId(id: string) {
+    return this.sceneMap.get(id + '') || [];
+  }
+  clearSceneMap() {
+    this.sceneMap.clear();
+  }
+  /**
+   * source
+   */
+  setSources(frame: IFrame, data: IObjectSource[]) {
+    this.sourceMap[String(frame.id)] = data;
+  }
+  getSources(frame: IFrame) {
+    return this.sourceMap[String(frame.id)];
+  }
+  clearSource(frame?: IFrame) {
+    if (frame) {
+      delete this.sourceMap[String(frame.id)];
+    } else {
+      this.sourceMap = {};
+    }
+  }
+
+  /**
+   * annotations
+   */
+  // set roots
+  setFrameRoot(frameId: string, roots: ShapeRoot | ShapeRoot[]) {
+    if (!Array.isArray(roots)) roots = [roots];
+    roots.forEach((root) => {
+      const key = utils.formatId(frameId, root.type);
+      this.dataMap.set(key, root);
+    });
+  }
+  getFrameRoot(frameId?: string, type?: AnnotateModeEnum) {
+    type = type || this.editor.state.annotateMode;
+    frameId = frameId || this.editor.getCurrentFrame()?.id || '';
+    const key = utils.formatId(frameId, type);
+    return this.dataMap.get(key) as ShapeRoot;
+  }
+  hasObject(uuid: string, frame?: IFrame) {
+    return !!this.getObject(uuid, frame);
+  }
+  // get specific annotation
+  getObject(uuid: string, frame?: IFrame) {
+    frame = frame || this.editor.getCurrentFrame();
+    const root_ins = this.getFrameRoot(frame.id, AnnotateModeEnum.INSTANCE);
+    const root_seg = this.getFrameRoot(frame.id, AnnotateModeEnum.SEGMENTATION);
+    return root_ins?.hasMap.get(uuid) || root_seg?.hasMap.get(uuid);
+  }
+  // get frame annotations
+  getFrameObject(frameId: string, type?: AnnotateModeEnum) {
+    type = type || this.editor.state.annotateMode;
+    const root = this.getFrameRoot(frameId, type);
+    return root ? root.children : undefined;
+  }
+  addAnnotates(objects: AnnotateObject[] | AnnotateObject, frame?: IFrame) {
+    if (!Array.isArray(objects)) objects = [objects];
+    frame = frame || this.editor.getCurrentFrame();
+    const root = this.getFrameRoot(frame.id);
+    if (!root) return;
+
+    root.addObjects(objects);
+    this.onAnnotatesAdd(objects, frame);
+  }
+  removeAnnotates(objects: AnnotateObject[] | AnnotateObject, frame?: IFrame) {
+    if (!Array.isArray(objects)) objects = [objects];
+    frame = frame || this.editor.getCurrentFrame();
+    const root = this.getFrameRoot(frame.id);
+    if (!root) return;
+    const removeMap = {} as Record<string, boolean>;
+    const selectionMap = this.editor.selectionMap;
+    let delFlag = false;
+    _utils.traverse(objects, (e) => {
+      removeMap[e.uuid] = true;
+      if (selectionMap[e.uuid]) {
+        delFlag = true;
+        delete selectionMap[e.uuid];
+      }
+    });
+    if (delFlag) this.editor.updateSelect();
+    root.removeObjects(objects);
+    this.onAnnotatesRemove(objects, frame);
+  }
+  setAnnotatesTransform(
+    objects: AnnotateObject[] | AnnotateObject,
+    datas: ITransform | ITransform[],
+  ) {
+    if (!Array.isArray(objects)) objects = [objects];
+
+    objects.forEach((obj, index) => {
+      const data = Array.isArray(datas) ? datas[index] : datas;
+      obj.setAttrs(data);
+    });
+
+    this.editor.emit(Event.ANNOTATE_TRANSFORM, objects, datas);
+    this.onAnnotatesChange(objects, 'transform', datas);
+  }
+  onAnnotatesAdd(objects: AnnotateObject[], frame?: IFrame) {
+    frame = frame || this.editor.getCurrentFrame();
+    frame.needSave = true;
+
+    this.editor.emit(Event.ANNOTATE_ADD, objects, frame);
+  }
+  onAnnotatesChange(
+    objects: AnnotateObject[],
+    type?: 'userData' | 'transform' | 'attrs' | 'group' | 'positionIndex' | 'other',
+    data?: any,
+  ) {
+    objects.forEach((obj) => {
+      const frame = obj.frame;
+      if (frame) frame.needSave = true;
+      obj.userData.resultStatus = Const.True_Value;
+    });
+    this.editor.emit(Event.ANNOTATE_CHANGE, objects, type, data);
+  }
+  onAnnotatesRemove(objects: AnnotateObject[], frame?: IFrame) {
+    frame = frame || this.editor.getCurrentFrame();
+    frame.needSave = true;
+
+    this.editor.emit(Event.ANNOTATE_REMOVE, objects, frame);
+  }
+  setAnnotatesUserData(objects: AnnotateObject[] | AnnotateObject, datas: IUserData | IUserData[]) {
+    if (!Array.isArray(objects)) objects = [objects];
+
+    objects.forEach((obj, index) => {
+      const data = Array.isArray(datas) ? datas[index] : datas;
+      Object.assign(obj.userData, data);
+    });
+    this.editor.mainView.updateObjectByUserData(objects);
+    this.editor.mainView.updateToolStyleByClass();
+
+    this.editor.emit(Event.ANNOTATE_USER_DATA, objects, datas);
+    this.onAnnotatesChange(objects, 'userData', datas);
+  }
+  setAnnotatesVisible(objects: AnnotateObject | AnnotateObject[], data: boolean | boolean[]) {
+    let visibleObjs = Array.isArray(objects) ? objects : [objects];
+    if (visibleObjs.length === 0) return;
+    const attrs: IShapeConfig[] = [];
+    visibleObjs.forEach((obj, index) => {
+      let visible = typeof data === 'boolean' ? data : data[index];
+      if (typeof visible !== 'boolean') visible = (data as boolean[])[0];
+      obj.showVisible = visible;
+      attrs.push({ visible });
+    });
+
+    this.editor.emit(Event.ANNOTATE_VISIBLE, visibleObjs);
+  }
+
+  /**
+   * scene
+   */
+  copyForward() {
+    return this.track({
+      direction: 'FORWARD',
+      object: this.editor.selection.length > 0 ? 'select' : 'all',
+      method: 'copy',
+      frameN: 1,
+    });
+  }
+  copyBackWard() {
+    return this.track({
+      direction: 'BACKWARD',
+      object: this.editor.selection.length > 0 ? 'select' : 'all',
+      method: 'copy',
+      frameN: 1,
+    });
+  }
+  async track(option: {
+    method: 'copy' | ModelCodeEnum;
+    object: 'select' | 'all';
+    direction: 'BACKWARD' | 'FORWARD';
+    frameN: number;
+  }) {
+    const editor = this.editor;
+    const { frameIndex, frames } = editor.state;
+    const curId = frames[frameIndex].id;
+
+    const getToDataId = () => {
+      const ids = [] as string[];
+      const forward = option.direction === 'FORWARD' ? 1 : -1;
+      const frameN = option.frameN;
+      if (frameN <= 0) return ids;
+      for (let i = 1; i <= frameN; i++) {
+        const frame = frames[frameIndex + forward * i];
+        if (frame) ids.push(frame.id);
+      }
+      return ids;
+    };
+    const ids = getToDataId();
+    if (ids.length === 0) return;
+
+    const getObjects = () => {
+      let objects: AnnotateObject[] = [];
+      if (option.object === 'all') {
+        const root = this.getFrameRoot(curId);
+        objects = root.allObjects.filter((e) => root.renderFilter(e));
+      } else {
+        editor.selection.forEach((e) => {
+          objects.push(e);
+        });
+      }
+      return objects;
+    };
+
+    let objects = getObjects();
+
+    if (objects.length === 0) {
+      editor.showMsg(MsgType.warning, editor.lang('track-no-source'));
+      return;
+    }
+    const data = { ...option };
+    this.editor.emit(Event.MODEL_RUN_TRACK, data);
+    const startTm = Date.now();
+    utils.copyData(editor, curId, ids, objects);
+    editor.showMsg(MsgType.success, editor.lang('copy-ok'));
+    this.gotoNext(ids[0]);
+    const modelTm = Date.now() - startTm;
+    this.editor.emit(Event.MODEL_RUN_TRACK_SUCCESS, { time: modelTm });
+  }
+  gotoNext(dataId: string) {
+    const { frames } = this.editor.state;
+    const index = frames.findIndex((e) => e.id === dataId);
+    if (index < 0) return;
+    this.editor.loadFrame(index);
+  }
+
+  /**
+   * clear
+   */
+  clear(frame?: IFrame) {
+    if (frame) {
+      this.dataMap.delete(utils.formatId(frame.id, AnnotateModeEnum.INSTANCE));
+      delete this.sourceMap[frame.id];
+    } else {
+      this.dataMap.clear();
+      this.clearSource();
+    }
+  }
+}
diff --git a/frontend/image-tool/src/package/image-editor/common/HotkeyManager/index.ts b/frontend/image-tool/src/package/image-editor/common/HotkeyManager/index.ts
new file mode 100644
index 00000000..18174fea
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/common/HotkeyManager/index.ts
@@ -0,0 +1,93 @@
+import hotkeys from 'hotkeys-js';
+import Editor from '../../Editor';
+import type { IHotkeyConfig } from './type';
+import { IActionName } from '../ActionManager';
+import { Event, hotkeyConfig, seriesFrameHotKey } from '../../configs';
+
+export enum NameSpace {
+  All = 'Hotkey_NameSapce_All',
+}
+export default class HotkeyManager {
+  editor: Editor;
+  hotkeyConfigs: IHotkeyConfig[];
+  constructor(editor: Editor) {
+    this.editor = editor;
+    this.hotkeyConfigs = [...hotkeyConfig];
+  }
+
+  initHotkey() {
+    hotkeyConfig.forEach((config) => {
+      this.bindConfig(config);
+    });
+  }
+
+  registryHotkey(configs: IHotkeyConfig<any>[]) {
+    this.hotkeyConfigs = [...this.hotkeyConfigs, ...configs];
+  }
+
+  setHotKeyFromAction(actions: Record<IActionName, boolean>) {
+    // hotkeys.unbind();
+    hotkeys.deleteScope(NameSpace.All);
+    hotkeys.setScope(NameSpace.All);
+
+    const filterConfig = this.hotkeyConfigs.filter((e) => {
+      return Array.isArray(e.action) ? validActions(actions, e.action) : actions[e.action];
+    });
+    filterConfig.forEach((config) => {
+      this.bindConfig(config);
+    });
+    this.bindEsc();
+    this.editor.emit(Event.HOTKEY);
+  }
+
+  bindEsc() {
+    hotkeys('esc', (event, handler) => {
+      event.preventDefault();
+      console.log('esc', '--> ');
+      this.editor.actionManager.handleEsc();
+    });
+  }
+
+  bindConfig(config: IHotkeyConfig) {
+    hotkeys(config.key, (event, handler) => {
+      event.preventDefault();
+      console.log(config.key, '--> action:', config.action);
+
+      this.editor.actionManager.execute(config.action, config.key);
+    });
+  }
+
+  bindSeriesFrameEvent() {
+    seriesFrameHotKey.forEach((config) => {
+      this.bindConfig(config);
+    });
+    this.registryHotkey(seriesFrameHotKey);
+  }
+}
+
+function validActions(actionMap: Record<IActionName, boolean>, actions: IActionName[]) {
+  for (let i = 0; i < actions.length; i++) {
+    const action = actions[i];
+    if (actionMap[action]) return true;
+  }
+
+  return false;
+}
+hotkeys.filter = filter;
+function filter(event: KeyboardEvent) {
+  const target = (event.target || event.srcElement) as HTMLFormElement;
+  const tagName = target.tagName;
+  const type = target.type;
+  let flag = true; // ignore: isContentEditable === 'true', <input> and <textarea> when readOnly state is false, <select>
+
+  if (
+    target.isContentEditable ||
+    (((tagName === 'INPUT' && !['radio', 'checkbox'].includes(type)) ||
+      tagName === 'TEXTAREA' ||
+      tagName === 'SELECT') &&
+      !target.readOnly)
+  ) {
+    flag = false;
+  }
+  return flag;
+}
diff --git a/frontend/image-tool/src/package/image-editor/common/HotkeyManager/type.ts b/frontend/image-tool/src/package/image-editor/common/HotkeyManager/type.ts
new file mode 100644
index 00000000..21614719
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/common/HotkeyManager/type.ts
@@ -0,0 +1,8 @@
+import type { IActionName } from '../ActionManager';
+
+export interface IHotkeyConfig<T extends string = IActionName> {
+  key: string;
+  action: T | T[];
+  viewType?: any;
+  args?: any;
+}
diff --git a/frontend/image-tool/src/package/image-editor/common/LoadManager.ts b/frontend/image-tool/src/package/image-editor/common/LoadManager.ts
new file mode 100644
index 00000000..5ab26206
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/common/LoadManager.ts
@@ -0,0 +1,105 @@
+import { IDataResource, IFrame, IObjectSource, SourceType, __UNSERIES__ } from '..';
+import Editor from '../Editor';
+import { Event } from '../configs';
+import { ResourceLoader } from './ResourceManager/ResourceLoader';
+
+export default class LoadManager {
+  editor: Editor;
+
+  constructor(editor: Editor) {
+    this.editor = editor;
+  }
+
+  /**
+   * load scene data
+   */
+  async loadSceneData(index: number) {
+    this.editor.showLoading(true);
+
+    const { state } = this.editor;
+    state.sceneIndex = index;
+    state.sceneId = state.sceneIds[index] || __UNSERIES__;
+    const sceneFrames = this.editor.dataManager.getFramesBySceneId(state.sceneId);
+    if (sceneFrames.length === 0) return;
+    this.editor.setFrames(sceneFrames);
+    // If it is a seriesFrame, all frames need to be loaded
+    if (state.isSeriesFrame) {
+      await this.loadFramesData(state.frames);
+      this.editor.updateTrack();
+    }
+    await this.editor.loadFrame(0, false, true);
+
+    this.editor.showLoading(false);
+    this.editor.emit(Event.SCENE_LOADED);
+  }
+
+  async loadFrame(index: number, showLoading: boolean = true, force: boolean = false) {
+    const { isSeriesFrame, frameIndex, frames } = this.editor.state;
+    if (index > frames.length - 1 || index < 0) return;
+    if (index === frameIndex && !force) return;
+
+    this.editor.emit(Event.BEFORE_FRAME_CHANGE, this.editor.state.frameIndex);
+    this.editor.state.frameIndex = index;
+    this.editor.actionManager.stopCurrentAction();
+    showLoading && this.editor.showLoading(true);
+
+    try {
+      await this.loadResultSource([frames[index]]);
+      await this.loadResource();
+      await this.loadFramesData([frames[index]]);
+
+      this.editor.dataResource.load(-1, 1); // preload resource
+    } catch (error: any) {
+      this.editor.handleErr(error);
+    }
+    if (!isSeriesFrame) {
+      this.editor.cmdManager.reset();
+      this.editor.updateTrack();
+    }
+
+    showLoading && this.editor.showLoading(false);
+  }
+  /**
+   * load frames data
+   * This is a virtual method that needs to be instantiated
+   */
+  async loadFramesData(frames: IFrame[]) {
+    throw 'loadFramesData implement error';
+  }
+  /**
+   * load result source
+   * This is a virtual method that needs to be instantiated
+   */
+  async loadResultSource(frames: IFrame[]) {
+    if (!frames) throw 'frames is required';
+    const { state } = this.editor;
+    frames.forEach((frame) => {
+      if (this.editor.dataManager.getSources(frame)) return;
+      const sources: IObjectSource[] = [
+        {
+          name: 'Without Task',
+          sourceId: state.defaultSourceId,
+          sourceType: SourceType.DATA_FLOW,
+          frameId: frame.id + '',
+        },
+      ];
+      this.editor.dataManager.setSources(frame, sources);
+    });
+  }
+  /**
+   * load data resource
+   */
+  async loadResource() {
+    const { frames, frameIndex } = this.editor.state;
+    const frame = frames[frameIndex];
+    const resource = this.editor.dataResource.getResource(frame);
+    if (resource instanceof ResourceLoader) await resource.get();
+  }
+  /**
+   * request data resource
+   * This is a virtual method that needs to be instantiated
+   */
+  async requestResource(frame: IFrame): Promise<IDataResource> {
+    throw 'requestResource implement error';
+  }
+}
diff --git a/frontend/image-tool/src/package/image-editor/common/PlayManager.ts b/frontend/image-tool/src/package/image-editor/common/PlayManager.ts
new file mode 100644
index 00000000..87f78c45
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/common/PlayManager.ts
@@ -0,0 +1,88 @@
+import EventEmitter from 'eventemitter3';
+import Editor from '../Editor';
+import { Event } from '../configs';
+import { StatusType } from '../types';
+
+type IForward = 1 | -1;
+interface IPlayOption {
+  forward?: IForward;
+  interval?: number;
+}
+
+export default class PlayManager extends EventEmitter {
+  private static _instance: PlayManager;
+  public static get instance(): PlayManager {
+    if (!this._instance) this._instance = new PlayManager();
+    return this._instance;
+  }
+
+  editor!: Editor;
+  playing: boolean = false;
+  interval: number = 300;
+  forward: IForward = 1;
+  timer: number = -1;
+  constructor() {
+    super();
+    this.run = this.run.bind(this);
+  }
+  init(editor: Editor) {
+    this.editor = editor;
+  }
+  play(option: IPlayOption = {}) {
+    const { forward = 1, interval = this.interval } = option;
+    this.emit(Event.PLAY_START);
+    this.forward = forward;
+    this.interval = interval;
+
+    if (this.playing) return;
+    this.playing = true;
+    this.editor.state.status = StatusType.Play;
+
+    if (this.timer > 0) {
+      clearTimeout(this.timer);
+    }
+
+    this.timer = setTimeout(this.run, this.interval) as any;
+  }
+  stop() {
+    if (!this.playing) return;
+
+    this.playing = false;
+    this.editor.state.status = StatusType.Default;
+
+    if (this.timer > 0) {
+      clearTimeout(this.timer);
+      this.timer = -1;
+    }
+    this.emit(Event.PLAY_STOP);
+  }
+  async next() {
+    if (!this.playing) return;
+
+    const { frameIndex, frames } = this.editor.state;
+    const toIndex = frameIndex + this.forward;
+    const data = frames[toIndex];
+    // data.loadState === 'complete'
+    if (toIndex < frames.length && toIndex >= 0 && data.loadState === 'complete') {
+      try {
+        console.log('play next toIndex:', toIndex);
+        await this.editor.loadFrame(toIndex, false);
+        this.emit(Event.PLAY_FRAME_CHANGE);
+      } catch (error) {
+        this.editor.handleErr(error as any, this.editor.lang('play-error'));
+        this.stop();
+      }
+    } else {
+      console.log('play next stop:', toIndex);
+      this.stop();
+    }
+  }
+  async run() {
+    // console.log('run:');
+    await this.next();
+
+    if (this.playing) {
+      this.timer = setTimeout(this.run, this.interval) as any;
+    }
+  }
+}
diff --git a/frontend/image-tool/src/package/image-editor/common/ResourceManager/ResourceLoader.ts b/frontend/image-tool/src/package/image-editor/common/ResourceManager/ResourceLoader.ts
new file mode 100644
index 00000000..7cc161d4
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/common/ResourceManager/ResourceLoader.ts
@@ -0,0 +1,48 @@
+import DataResource from '.';
+import { IDataResource, IFrame, LoadStatus } from '../../types';
+
+export class ResourceLoader {
+  manual: boolean = false;
+  data: IFrame;
+  dataResource: DataResource;
+  promise: Promise<IDataResource> = {} as Promise<IDataResource>;
+
+  constructor(dataResource: DataResource, data: IFrame) {
+    this.data = data;
+    this.dataResource = dataResource;
+    this.handleProgress = this.handleProgress.bind(this);
+  }
+  remove() {
+    this.dataResource.loaders = this.dataResource.loaders.filter((e) => e.data.id !== this.data.id);
+    this.dataResource.load();
+  }
+  get() {
+    return this.promise;
+  }
+  load() {
+    const promise: Promise<IDataResource> = new Promise(async (resolve, reject) => {
+      try {
+        const info = await this.dataResource.requestResource(this.data);
+        // console.log('load info: ', info);
+        this.data.imageData = info;
+
+        console.time(`load(${this.data.id}) image from server`);
+        info.image = await this.dataResource.loadData(info.url);
+        console.timeEnd(`load(${this.data.id}) image from server`);
+
+        this.dataResource.setResource(this.data, info);
+        this.data.loadState = LoadStatus.COMPLETE;
+        this.remove();
+        resolve(this.dataResource.dataMap[this.data.id]);
+      } catch (e) {
+        this.data.loadState = LoadStatus.ERROR;
+        this.remove();
+        reject(e);
+      }
+    });
+    this.promise = promise;
+  }
+  handleProgress(percent: number) {
+    console.log(percent);
+  }
+}
diff --git a/frontend/image-tool/src/package/image-editor/common/ResourceManager/index.ts b/frontend/image-tool/src/package/image-editor/common/ResourceManager/index.ts
new file mode 100644
index 00000000..9693bb4a
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/common/ResourceManager/index.ts
@@ -0,0 +1,204 @@
+import Editor from '../../Editor';
+import { IDataResource, IFrame, LoadStatus, ResourceLoadMode } from '../../types';
+import { Event } from '../../configs';
+import { ResourceLoader } from './ResourceLoader';
+
+export default class DataResource {
+  // Maximum Memory 3gb => byte
+  loadMax: number = 3 * 1024 * 1024 * 1024;
+  // test 100mb
+  // loadMax: number = 100 * 1024 * 1024;
+  loadMode: ResourceLoadMode = ResourceLoadMode.near;
+  /**
+   * -1: any;
+   * 0: Stop loading when memory overflows;
+   * 1: Release memory when memory overflows;
+   */
+  loadTactics: number = -1;
+
+  editor: Editor;
+  // You can enter 'editor.dataResource' in the browser console to view cached image data
+  dataMap: Record<string, IDataResource> = {};
+  loaders: ResourceLoader[] = [];
+  loadFrameNum: number = 10;
+  firstLoadNum: number = 50;
+  waitLoads: IFrame[] = [];
+
+  constructor(editor: Editor) {
+    this.editor = editor;
+  }
+  /**
+   * load image data
+   * @param fromIndex the start frame index
+   * @param tactics
+   */
+  load(fromIndex: number = -1, tactics: number = -1) {
+    const { frameIndex } = this.editor.state;
+    fromIndex = fromIndex >= 0 ? fromIndex : frameIndex;
+    fromIndex = Math.max(0, fromIndex);
+    if (tactics !== -1) {
+      this.loadTactics = tactics;
+      this.waitLoads = this.countLoadList(fromIndex);
+    }
+
+    const overflows = this.checkMemory();
+    if (overflows) {
+      if (this.loadTactics !== 1) return;
+      // Release memory && load continue
+      const clearList = this.countClearList(fromIndex);
+      this.clearResource(clearList);
+      this.loadTactics = 0;
+      if (clearList.length === 0) return;
+    }
+
+    // loading
+    if (this.loaders.length > 0) return;
+
+    let nextLoad: IFrame | undefined = undefined;
+    while (!nextLoad && this.waitLoads.length > 0) {
+      const frame = this.waitLoads.shift();
+      if (!frame) return;
+      if (!frame.loadState) nextLoad = frame;
+    }
+    if (!nextLoad) return;
+
+    this.loadNext(nextLoad);
+  }
+  countLoadList(fIndex?: number) {
+    const { frames, frameIndex } = this.editor.state;
+    const startIndex = fIndex || frameIndex;
+    let loadNum = this.loadFrameNum;
+    if (this.loadMode === ResourceLoadMode.all) {
+      if (this.loadTactics === 1) loadNum = this.firstLoadNum;
+      else loadNum = Math.max(startIndex, frames.length - startIndex - 1);
+    }
+    let countedNum = 1;
+    const loadList: IFrame[] = [];
+    while (countedNum <= loadNum) {
+      let f = frames[startIndex - countedNum];
+      if (f) loadList.push(f);
+      f = frames[startIndex + countedNum];
+      if (f) loadList.push(f);
+      countedNum++;
+    }
+    return loadList;
+  }
+  countClearList(fIndex?: number) {
+    const { frames, frameIndex } = this.editor.state;
+    const initIndex = fIndex || frameIndex;
+    const clearList = frames.filter((e, index) => {
+      return Math.abs(index - initIndex) > this.firstLoadNum && e.loadState === LoadStatus.COMPLETE;
+    });
+    return clearList;
+  }
+  checkMemory(): boolean {
+    let total = 0;
+    let count = 0;
+    Object.values(this.dataMap).forEach((e) => {
+      if (e.size > 0) {
+        count++;
+        total += e.size;
+      }
+    });
+    count = Math.max(1, count);
+    const average = total / count;
+    const overflows = total + average >= this.loadMax;
+    return overflows;
+  }
+  setLoadMode(mode: ResourceLoadMode) {
+    this.loadMode = mode;
+    this.load(-1, 0);
+    const config = this.editor.state.config;
+    config.autoLoad = mode === 'all';
+    this.editor.emit(Event.FRAME_AUTOLOAD, config.autoLoad);
+  }
+  clear(frame?: IFrame) {
+    if (frame) {
+      this.clearResource([frame]);
+      delete this.dataMap[frame.id];
+    } else {
+      this.dataMap = {};
+      this.loaders = [];
+      this.clearResource(this.editor.state.frames);
+    }
+  }
+  clearResource(frames: IFrame[]) {
+    if (!frames || frames.length == 0) return;
+    frames.forEach((frame) => {
+      const key = frame.id;
+      frame.loadState = '';
+      delete this.dataMap[key];
+      frame.imageData = undefined;
+    });
+  }
+  loadNext(data: IFrame, manual: boolean = false) {
+    const oldLoader = this.loaders.find((e) => e.data.id === data.id);
+    if (this.loaders.length > 0 && oldLoader) return oldLoader;
+
+    const loader = new ResourceLoader(this, data);
+    loader.manual = manual;
+    this.loaders.push(loader);
+    loader.load();
+
+    return loader;
+  }
+  // load image && create HTMLImageElement
+  async loadData(url: string): Promise<HTMLImageElement> {
+    return new Promise((resolve, reject) => {
+      const img = new Image();
+      img.src = url;
+      img.setAttribute('crossOrigin', '');
+      img.onload = () => {
+        resolve(img);
+      };
+      img.onerror = () => {
+        reject();
+      };
+      img.onabort = () => {
+        reject();
+      };
+    });
+  }
+
+  // set dataMap, cache resource data
+  setResource(data: IFrame, resource: IDataResource) {
+    const { frames } = this.editor.state;
+    const resourceIds = Object.keys(this.dataMap).filter((e) => this.dataMap[e]);
+    // clear cache
+    if (resourceIds.length > this.loadMax) {
+      const dataMap = {} as Record<string, IFrame>;
+      frames.forEach((e) => {
+        dataMap[e.id] = e;
+      });
+      resourceIds.sort((a, b) => {
+        return this.dataMap[b].time - this.dataMap[a].time;
+      });
+      while (resourceIds.length > this.loadMax - 2) {
+        const key = resourceIds.pop() as string;
+        const data = dataMap[key];
+        if (data) data.loadState = '';
+        delete this.dataMap[key];
+      }
+    }
+    this.dataMap[data.id] = resource;
+  }
+  getResource(data: IFrame) {
+    const resource = this.getResourceData(data);
+    // If the resource has been loaded, return it
+    if (resource) return resource;
+
+    // If the resource is not loaded, return resourceLoader
+    return this.getResourceLoader(data);
+  }
+  getResourceLoader(data: IFrame) {
+    return this.loadNext(data, true);
+  }
+  getResourceData(data: IFrame) {
+    const resource = this.dataMap[data.id];
+    if (resource) resource.time = Date.now();
+    return resource;
+  }
+  async requestResource(frame: IFrame): Promise<IDataResource> {
+    return this.editor.loadManager.requestResource(frame);
+  }
+}
diff --git a/frontend/image-tool/src/package/image-editor/common/TrackManager.ts b/frontend/image-tool/src/package/image-editor/common/TrackManager.ts
new file mode 100644
index 00000000..3574d8fc
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/common/TrackManager.ts
@@ -0,0 +1,135 @@
+import { IFrame, IUserData, Const, AnnotateObject } from '../types';
+import Editor from '../Editor';
+import { Event } from '../configs/event';
+
+export type IMergeStatus =
+  | 'merge_error_object_not_exist'
+  | 'merge_error_object_repeat'
+  | 'merge_error_class_none'
+  | 'merge_error_class_diff'
+  | 'merge_ok';
+export interface IMergeCodeData {
+  code: IMergeStatus;
+  data?: any;
+}
+
+export default class TrackManager {
+  editor: Editor;
+  // track
+  trackMap: Map<string, Partial<IUserData>> = new Map();
+  classChangedTracks: string[] = [];
+
+  constructor(editor: Editor) {
+    this.editor = editor;
+  }
+
+  clear() {
+    this.trackMap.clear();
+    // this.trackInfo.clear();
+  }
+
+  // basic
+  hasTrackObject(trackId: string) {
+    return !!this.getTrackObject(trackId);
+  }
+  getTrackObject(trackId: string) {
+    return this.trackMap.get(trackId + '') as IUserData;
+  }
+
+  removeTrackObject(trackId: string) {
+    return this.trackMap.delete(trackId);
+  }
+  addTrackObject(trackId: string, object: Partial<IUserData>) {
+    return this.trackMap.set(trackId + '', object);
+  }
+  addChangedTrack(id: string | string[]) {
+    if (Array.isArray(id)) this.classChangedTracks.push(...id);
+    else this.classChangedTracks.push(id);
+  }
+  clearChangedTrack() {
+    this.classChangedTracks.length = 0;
+  }
+  isChanged(id: string) {
+    return this.classChangedTracks.indexOf(id) !== -1;
+  }
+
+  updateTrackData(trackId: string, object: Partial<IUserData>) {
+    const trackObject = this.getTrackObject(trackId);
+    Object.assign(trackObject, object || {});
+    this.editor.emit(Event.TRACK_OBJECT_CHANGE, trackId);
+    // this.editor.frameChange(frame);
+  }
+
+  getObjects(
+    trackIds: string | string[],
+    frames?: IFrame[],
+    filter: (f: IFrame, e: AnnotateObject) => boolean = () => true,
+  ) {
+    frames = frames || this.editor.state.frames;
+    if (!Array.isArray(trackIds)) trackIds = [trackIds];
+
+    const idMap: any = {};
+    trackIds.forEach((e) => (idMap[e] = true));
+
+    const findObjects = [] as AnnotateObject[];
+    frames.forEach((frame) => {
+      const objects = this.editor.dataManager.getFrameObject(frame.id) || [];
+      objects.forEach((obj) => {
+        if (idMap[obj.userData.trackId] && filter(frame, obj as any)) findObjects.push(obj as any);
+      });
+    });
+    return findObjects;
+  }
+
+  deleteObjectByTrack(trackId: string | string[], frames?: IFrame[]) {
+    if (!frames || frames.length === 0) frames = this.editor.state.frames;
+    if (!Array.isArray(trackId)) trackId = [trackId];
+    const deleteData = [] as { objects: AnnotateObject[]; frame: IFrame }[];
+    frames.forEach((frame) => {
+      const objects = this.getObjectByTrackId(trackId, frame);
+      if (objects.length > 0) deleteData.push({ objects, frame });
+    });
+    this.editor.cmdManager.withGroup(() => {
+      deleteData.forEach((data) => {
+        this.editor.cmdManager.execute('delete-object', data as any);
+      });
+    });
+  }
+  deleteUntrueObjectByTrack(trackId: string, frames?: IFrame[]) {
+    if (!frames || frames.length === 0) frames = this.editor.state.frames;
+    const deleteData = [] as { objects: AnnotateObject[]; frame: IFrame }[];
+    frames.forEach((frame) => {
+      const object = this.getObjectByTrackId(trackId, frame)[0];
+      if (object && object.userData.resultStatus != Const.True_Value) {
+        deleteData.push({ objects: [object], frame });
+      }
+    });
+    this.editor.cmdManager.withGroup(() => {
+      deleteData.forEach((data) => {
+        this.editor.cmdManager.execute('delete-object', data as any);
+      });
+    });
+  }
+
+  getObjectByTrackId(trackId: string | string[], frame?: IFrame) {
+    if (!frame) frame = this.editor.getCurrentFrame();
+    if (!Array.isArray(trackId)) trackId = [trackId];
+
+    const trackObjs: AnnotateObject[] = [];
+    const objects = this.editor.dataManager.getFrameRoot(frame.id)?.allObjects || [];
+    objects.forEach((val) => {
+      if (trackId.includes(val.userData.trackId)) trackObjs.push(val);
+    });
+    return trackObjs;
+  }
+
+  getAllFrameDataByTrack(id: string) {
+    const { frames } = this.editor.state;
+    const trackList = frames.map((frame) => {
+      const objectArr = this.editor.dataManager.getFrameObject(frame.id);
+      const trackObj = objectArr?.find((obj) => obj.userData.trackId == id);
+      return trackObj;
+    });
+    return trackList;
+  }
+}
diff --git a/frontend/image-tool/src/package/image-editor/configs/event.ts b/frontend/image-tool/src/package/image-editor/configs/event.ts
new file mode 100644
index 00000000..24616bc4
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/configs/event.ts
@@ -0,0 +1,86 @@
+export const Event = {
+  // cmd
+  EXECUTE: 'execute',
+  UNDO: 'undo',
+  REDO: 'redo',
+  RESET: 'reset',
+  // action
+  ACTION_START: 'action_start',
+  ACTION_END: 'action_end',
+
+  INIT: 'init', // editor init
+  DRAW: 'draw',
+  RESIZE: 'resize',
+  ZOOM: 'zoom',
+  ROTATE: 'rotate',
+  TOOL_CHANGE: 'tool_change',
+  HOTKEY: 'HOTKEY',
+  SELECT: 'select',
+
+  ANNOTATIONS_LOADED: 'annotations_loaded',
+  ANNOTATE_CHANGE: 'annotate_change',
+  ANNOTATE_TRANSFORM: 'annotate_transform',
+  ANNOTATE_EDIT: 'annotate_edit',
+  ANNOTATE_USER_DATA: 'annotate_user_data',
+  ANNOTATE_CLEAR: 'annotate_clear',
+  ANNOTATE_ADD: 'annotate_add',
+  ANNOTATE_REMOVE: 'annotate_remove',
+  // delete handler: args(objects, type(1: delet by hotkey;2: delete by click result list))
+  ANNOTATE_HANDLE_DELETE: 'annotate_handle_delete',
+  ANNOTATE_LOAD: 'annotate_load',
+  ANNOTATE_VISIBLE: 'annotate_visible',
+  ANNOTATE_CREATE: 'annotate_create',
+  ANNOTATE_DISABLED_DRAW: 'annotate_disabled_draw',
+  ANNOTATE_OBJECT_POINT: 'annotate_object_point',
+
+  // shape-tool
+  TOOL_DRAW: 'tool_draw',
+  TOOL_Edit: 'tool_edit',
+  TOOL_DRAW_CHANGE: 'tool_draw_change',
+  TOOL_DRAW_END: 'tool_draw_end',
+  UPDATE_ATTR: 'update_attr',
+
+  // scene frame
+  SCENE_LOADED: 'scene_loaded',
+  FRAMES: 'frames',
+  BEFORE_FRAME_CHANGE: 'before_frame-change',
+  FRAME_CHANGE: 'frame_change',
+  FRAME_SWITCH: 'frame_switch',
+  SHOW_CLASS_INFO: 'show_class_info',
+  NAME_OR_ALIAS: 'name_or_alias',
+
+  PLAY_START: 'play_start',
+  PLAY_STOP: 'play_stop',
+  PLAY_FRAME_CHANGE: 'play_frame_change',
+  CURRENT_TRACK_CHANGE: 'current_track_change',
+  FRAME_PLAY: 'frame_play',
+  FRAME_PAUSE: 'frame_pause',
+  FRAME_REPLAY: 'frame_replay',
+  FRAME_AUTOLOAD: 'frame_autoload',
+  FRAME_PLAY_SPEED: 'frame_play_speed',
+
+  // track
+  TRACK_OBJECT_CHANGE: 'track_object_change',
+
+  // flow
+  SAVE_SUCCESS: 'save_success',
+  CLASS_INITDATA: 'class_initdata',
+  MODEL_LOADED: 'model_loaded',
+  UPDATE_VIEW_MODE: 'update_view_mode',
+
+  // model: time, classes, modelConfig
+  MODEL_RUN: 'model_run',
+  MODEL_RESULT_ADD: 'model_result_add',
+
+  // mouseEvent
+  DRAG_START: 'dragstart',
+  DRAG_MOVE: 'dragmove',
+  DRAG_END: 'dragend',
+  MOUSE_DOWN: 'mousedown',
+  MOUSE_UP: 'mouseup',
+  MOUSE_MOVE: 'mousemove',
+  MOUSE_ENTER: 'mouseenter',
+  MOUSE_OVER: 'mouseover',
+  MOUSE_OUT: 'mouseout',
+  CLICK: 'click',
+};
diff --git a/frontend/image-tool/src/package/image-editor/configs/hotkey.ts b/frontend/image-tool/src/package/image-editor/configs/hotkey.ts
new file mode 100644
index 00000000..e7d27586
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/configs/hotkey.ts
@@ -0,0 +1,65 @@
+import { IHotkeyConfig } from '../types';
+import { isMac } from '../lib/ua';
+
+const Ctrl = isMac ? '⌘' : 'ctrl';
+const Del = isMac ? 'backspace' : 'del';
+const Alt = 'alt';
+
+// tool
+const toolHotKye: IHotkeyConfig[] = [
+  { key: '1', action: 'changeTool' },
+  { key: '2', action: 'changeTool' },
+  { key: '3', action: 'changeTool' },
+  { key: '4', action: 'changeTool' },
+  { key: '5', action: 'changeTool' },
+  { key: '6', action: 'changeTool' },
+  { key: '7', action: 'changeTool' },
+  { key: '8', action: 'changeTool' },
+  { key: '9', action: 'changeTool' },
+  { key: '0', action: 'changeTool' },
+  { key: 'q', action: 'selectTool' },
+  { key: 'e', action: 'changeTool' },
+];
+// LineTool
+export const lineToolHotKey: IHotkeyConfig[] = [
+  { key: `a`, action: 'lineToolDrawMode' },
+  { key: `${Ctrl}+a`, action: 'lineToolDrawMode' },
+];
+
+export const objectHotKey: IHotkeyConfig[] = [
+  { key: `${Ctrl}+shift+up`, action: 'adjustObject' },
+  { key: `${Ctrl}+shift+down`, action: 'adjustObject' },
+  { key: `${Ctrl}+shift+left`, action: 'adjustObject' },
+  { key: `${Ctrl}+shift+right`, action: 'adjustObject' },
+];
+
+export const seriesFrameHotKey: IHotkeyConfig[] = [
+  { key: 'right', action: 'toNextFrame' },
+  { key: 'left', action: 'previousFrame' },
+  { key: `${Alt}+right`, action: 'copyToNext' },
+  { key: `${Alt}+left`, action: 'copyToLast' },
+];
+// ui
+const displayControllerHotkey: IHotkeyConfig[] = [
+  { key: 't', action: 'toggleClassView' },
+  { key: 'm', action: 'toggleClassTitle' },
+  { key: 'y', action: 'toggleHelpLine' },
+  // { key: 'd', action: 'toggleShowPolygonArrow' },
+];
+
+const hotkeyConfig: IHotkeyConfig[] = [
+  { key: `${Ctrl}+z`, action: 'undo' },
+  { key: `${Ctrl}+shift+z`, action: 'redo' },
+  { key: 'Space', action: 'stopCurrentDraw' },
+  { key: 'enter', action: 'stopCurrentDraw' },
+  { key: Del, action: 'deleteSelection' },
+  { key: 'h', action: 'holeSelection' },
+  { key: 'c', action: 'cutSelectionOther' },
+  { key: `${Ctrl}+c`, action: 'cutSelectionFirst' },
+  ...displayControllerHotkey,
+  ...toolHotKye,
+  ...objectHotKey,
+  ...lineToolHotKey,
+];
+
+export default hotkeyConfig;
diff --git a/frontend/image-tool/src/package/image-editor/configs/icons.ts b/frontend/image-tool/src/package/image-editor/configs/icons.ts
new file mode 100644
index 00000000..e13f970f
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/configs/icons.ts
@@ -0,0 +1,32 @@
+import { h } from 'vue';
+import { ToolName, ToolType } from '../types';
+
+type AllTool = ToolType | ToolName | 'loading' | '';
+const ToolIconClass: Record<AllTool, string> = {
+  [ToolType.RECTANGLE]: 'iconfont icon-rect',
+  [ToolType.BOUNDING_BOX]: 'iconfont icon-rect',
+  [ToolName.rect]: 'iconfont icon-rect',
+
+  [ToolType.POLYGON]: 'iconfont icon-polygon',
+  [ToolName.polygon]: 'iconfont icon-polygon',
+
+  [ToolType.POLYLINE]: 'iconfont icon-polyline',
+  [ToolName.polyline]: 'iconfont icon-polyline',
+
+  [ToolType.KEY_POINT]: 'iconfont icon-point',
+  [ToolName['key-point']]: 'iconfont icon-point',
+
+  [ToolName.model]: 'iconfont icon-ai',
+
+  [ToolName.edit]: 'iconfont icon-arrow',
+  loading: 'iconfont icon-loading loading',
+  [ToolName.default]: '',
+};
+interface IToolIcon {
+  tool: AllTool;
+}
+export const ToolIcon = (props: IToolIcon, ctx: any) => {
+  const { tool } = props;
+  let iconClass: string = ToolIconClass[tool] || '';
+  return h('i', { style: 'font-size: 16px', class: iconClass });
+};
diff --git a/frontend/image-tool/src/package/image-editor/configs/index.ts b/frontend/image-tool/src/package/image-editor/configs/index.ts
new file mode 100644
index 00000000..429364b7
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/configs/index.ts
@@ -0,0 +1,9 @@
+import hotkeyConfig from './hotkey';
+
+export * from './tools';
+export * from './icons';
+export * from './event';
+export * from './mode';
+export * from './style';
+export * from './hotkey';
+export { hotkeyConfig };
diff --git a/frontend/image-tool/src/package/image-editor/configs/mode.ts b/frontend/image-tool/src/package/image-editor/configs/mode.ts
new file mode 100644
index 00000000..a0ee11bc
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/configs/mode.ts
@@ -0,0 +1,35 @@
+import { IModeConfig, OPType } from '../types';
+import { IActionName } from '../common/ActionManager';
+
+function toMap<T extends string>(arr: T[]) {
+  const map = {} as Record<T, boolean>;
+  arr.forEach((e) => (map[e] = true));
+  return map;
+}
+
+export const UIType = {
+  // ****** left tool**********
+  edit: 'edit',
+  tool_rect: 'tool_rect',
+  tool_polygon: 'tool_polygon',
+  tool_line: 'tool_line',
+  tool_keyPoint: 'tool_keyPoint',
+  model: 'model',
+  setting: 'setting',
+  info: 'info',
+};
+
+export type IUIType = keyof typeof UIType;
+
+const empty: IModeConfig<IUIType, IActionName> = {
+  name: 'empty',
+  op: OPType.VIEW,
+  ui: toMap([] as IUIType[]),
+  actions: {} as any,
+};
+
+export const modes = { empty };
+
+export type IModeType = keyof typeof modes;
+
+export const ModeKeys = Object.keys(modes).filter((e) => e !== 'all') as IModeType[];
diff --git a/frontend/image-tool/src/package/image-editor/configs/style.ts b/frontend/image-tool/src/package/image-editor/configs/style.ts
new file mode 100644
index 00000000..04c007ec
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/configs/style.ts
@@ -0,0 +1,93 @@
+import { IShapeConfig, ICircleConfig } from '../ImageView/type';
+
+import positiveImg from '../assets/positive.svg';
+import negativeImg from '../assets/negative.svg';
+import commentPointer from '../assets/commentPointer.svg';
+import rotating from '../assets/rotating.svg';
+import maskfill from '../assets/maskfill.svg';
+
+export const Cursor = {
+  auto: 'auto',
+  move: 'move',
+  crosshair: 'crosshair',
+  pointer: 'pointer',
+  none: 'none',
+  grab: 'garb',
+  grabbing: 'grabbing',
+  alias: 'alias',
+  ewResize: 'ew-resize',
+  nsResize: 'ns-resize',
+  neswResize: 'nesw-resize',
+  nwseResize: 'nwse-resize',
+  positive: `url(${positiveImg}), auto`,
+  negative: `url(${negativeImg}), auto`,
+  comment: `url(${commentPointer}) 0 16, auto`,
+  rotating: `url(${rotating}) 10 10, auto`,
+  maskfill: `url(${maskfill}) 8 15, auto`,
+};
+export function getCursor(r: number) {
+  if (inRange(r, 0, 22.5) || inRange(r, 337.5, 360)) {
+    return Cursor.ewResize;
+  } else if (inRange(r, 45 - 22.5, 45 + 22.5)) {
+    return Cursor.nwseResize;
+  } else if (inRange(r, 90 - 22.5, 90 + 22.5)) {
+    return Cursor.nsResize;
+  } else if (inRange(r, 135 - 22.5, 135 + 22.5)) {
+    return Cursor.neswResize;
+  } else if (inRange(r, 180 - 22.5, 180 + 22.5)) {
+    return Cursor.ewResize;
+  } else if (inRange(r, 225 - 22.5, 225 + 22.5)) {
+    return Cursor.nwseResize;
+  } else if (inRange(r, 270 - 22.5, 270 + 22.5)) {
+    return Cursor.nsResize;
+  } else if (inRange(r, 315 - 22.5, 315 + 22.5)) {
+    return Cursor.neswResize;
+  }
+}
+function inRange(r: number, start: number, end: number) {
+  return r >= start && r < end;
+}
+
+type StateType = 'general' | 'hover' | 'select';
+// shape style
+export const defaultConfig: IShapeConfig = {
+  fill: '',
+  strokeWidth: 1,
+  hitStrokeWidth: 6,
+};
+export const hoverConfig: IShapeConfig = {
+  fill: 'rgba(255 ,255 ,255 ,0.15)',
+  strokeWidth: 2,
+};
+export const selectConfig: IShapeConfig = {
+  fill: 'rgba(255 ,255 ,255 ,0.22)',
+  strokeWidth: 2,
+};
+export const defaultStateStyle: Record<StateType, IShapeConfig> = {
+  general: defaultConfig,
+  hover: hoverConfig,
+  select: selectConfig,
+};
+
+// point style
+export const defaultCircleConfig: ICircleConfig = {
+  radius: 3,
+  fill: '#fff',
+  strokeWidth: 1,
+  stroke: '#fff',
+};
+export const hoverCircleConfig: ICircleConfig = {
+  radius: 2,
+  strokeWidth: 0,
+  stroke: '#ff3333',
+};
+export const selectedCircleConfig: ICircleConfig = {
+  radius: 2,
+  strokeWidth: 1,
+  stroke: '#ff3333',
+};
+export const CircleStateStyle: Record<StateType, IShapeConfig> = {
+  general: defaultCircleConfig,
+  hover: hoverCircleConfig,
+  select: selectedCircleConfig,
+};
diff --git a/frontend/image-tool/src/package/image-editor/configs/tools/config.ts b/frontend/image-tool/src/package/image-editor/configs/tools/config.ts
new file mode 100644
index 00000000..96626dad
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/configs/tools/config.ts
@@ -0,0 +1,51 @@
+import { IToolItemConfig } from '../..';
+import { AnnotateModeEnum, ToolName } from '../../types/enum';
+import { editTool, rectTool, polygonTool, lineTool, keyPointTool, modelTool } from './index';
+
+interface IToolMode {
+  fixed: IToolItemConfig[];
+  model: IToolItemConfig[];
+  tools: IToolItemConfig[];
+}
+
+export const toolMap: Record<ToolName, IToolItemConfig> = {
+  [ToolName.default]: editTool,
+  [ToolName.edit]: editTool,
+  [ToolName.rect]: rectTool,
+  [ToolName.polygon]: polygonTool,
+  [ToolName.polyline]: lineTool,
+  [ToolName['key-point']]: keyPointTool,
+  [ToolName.model]: modelTool,
+};
+
+// fixed tools
+const tools_fixed: IToolItemConfig[] = [toolMap[ToolName.edit]];
+// instance
+const tools_graph: IToolItemConfig[] = [
+  toolMap[ToolName.rect],
+  toolMap[ToolName.polygon],
+  toolMap[ToolName.polyline],
+  // toolMap[ToolName['key-point']],
+];
+// segment
+const tools_segment: IToolItemConfig[] = [];
+// model
+const tools_model: IToolItemConfig[] = [toolMap[ToolName.model]];
+// segment model
+const tools_model_seg: IToolItemConfig[] = [];
+// instance tools
+export const tools_instance: IToolMode = {
+  fixed: tools_fixed,
+  model: tools_model,
+  tools: tools_graph,
+};
+// segment tools
+export const tools_segmentation: IToolMode = {
+  fixed: tools_fixed,
+  model: tools_model_seg,
+  tools: tools_segment,
+};
+export const tools = {
+  [AnnotateModeEnum.INSTANCE]: tools_instance,
+  [AnnotateModeEnum.SEGMENTATION]: tools_segmentation,
+};
diff --git a/frontend/image-tool/src/package/image-editor/configs/tools/index.ts b/frontend/image-tool/src/package/image-editor/configs/tools/index.ts
new file mode 100644
index 00000000..c7a8af83
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/configs/tools/index.ts
@@ -0,0 +1,4 @@
+export * from './tool-instance';
+export * from './tool-segment';
+export * from './tool-model';
+export * from './config';
diff --git a/frontend/image-tool/src/package/image-editor/configs/tools/tool-instance.ts b/frontend/image-tool/src/package/image-editor/configs/tools/tool-instance.ts
new file mode 100644
index 00000000..c0435001
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/configs/tools/tool-instance.ts
@@ -0,0 +1,81 @@
+import { ToolName } from './../../types/enum';
+import { Editor, IToolItemConfig, UIType } from '../..';
+
+/**
+ * tools
+ */
+// edit
+export const editTool: IToolItemConfig = {
+  action: ToolName.edit,
+  name: 'Selection Tool',
+  hotkey: 'Q',
+  title: 'edit',
+  getIcon: () => ToolName.edit,
+  isDisplay: function (editor: Editor) {
+    return true; // editor.state.modeConfig.ui[UIType.edit];
+  },
+  isActive: function (editor: Editor) {
+    const state = editor.state;
+    return state.activeTool === ToolName.default;
+  },
+};
+// rect
+export const rectTool: IToolItemConfig = {
+  action: ToolName.rect,
+  name: 'Rectangle Tool',
+  hotkey: 1,
+  title: 'Bounding Box',
+  getIcon: () => ToolName.rect,
+  isDisplay: function (editor: Editor) {
+    return editor.state.modeConfig.ui[UIType.tool_rect];
+  },
+  isActive: function (editor: Editor) {
+    const state = editor.state;
+    return state.activeTool === ToolName.rect;
+  },
+};
+// polygon
+export const polygonTool: IToolItemConfig = {
+  action: ToolName.polygon,
+  name: 'Polygon Tool',
+  hotkey: 2,
+  title: 'Polygon',
+  getIcon: () => ToolName.polygon,
+  isDisplay: function (editor: Editor) {
+    return editor.state.modeConfig.ui[UIType.tool_polygon];
+  },
+  isActive: function (editor: Editor) {
+    const state = editor.state;
+    return state.activeTool === ToolName.polygon;
+  },
+};
+// polyline
+export const lineTool: IToolItemConfig = {
+  action: ToolName.polyline,
+  name: 'Polyline Tool',
+  hotkey: 3,
+  title: 'Polyline',
+  getIcon: () => ToolName.polyline,
+  isDisplay: function (editor: Editor) {
+    return editor.state.modeConfig.ui[UIType.tool_line];
+  },
+  isActive: function (editor: Editor) {
+    const state = editor.state;
+    return state.activeTool === ToolName.polyline;
+  },
+};
+// keypoint
+export const keyPointTool: IToolItemConfig = {
+  action: ToolName['key-point'],
+  name: 'KeyPoint Tool',
+  hotkey: 4,
+  title: 'Key Point',
+  getIcon: () => ToolName['key-point'],
+  isDisplay: function (editor: Editor) {
+    return editor.state.modeConfig.ui[UIType.tool_keyPoint];
+  },
+  isActive: function (editor: Editor) {
+    const state = editor.state;
+    return state.activeTool === ToolName['key-point'];
+  },
+};
diff --git a/frontend/image-tool/src/package/image-editor/configs/tools/tool-model.ts b/frontend/image-tool/src/package/image-editor/configs/tools/tool-model.ts
new file mode 100644
index 00000000..733b1962
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/configs/tools/tool-model.ts
@@ -0,0 +1,45 @@
+import { Editor, IToolItemConfig } from '../..';
+import { ToolName } from '../../types/enum';
+import ModelConfig from 'image-ui/components/Tools/components/ModelConfig.vue';
+
+const hasMsg = (editor: Editor) => {
+  return false;
+  // const list = editor
+  //   .getModelsByType(ModelTypeEnum.DETECTION)
+  //   .filter((e) => e.code !== ModelCodeEnum.IMAGE_SAM_EMBEDDING);
+  // const result = list.find((e) => editor.modelManager.hasModelResult(e.code));
+  // if (result) return true;
+  // return false;
+};
+/**
+ * model
+ */
+export const modelTool: IToolItemConfig = {
+  action: ToolName.model,
+  name: 'Smart Tool',
+  hotkey: 'E',
+  title: 'modelTips',
+  hasMsg,
+  extra: () => ModelConfig,
+  extraClass: true,
+  getIcon: (editor?: Editor) => {
+    const icon = ToolName.model;
+    return icon;
+    // if (!editor) return icon;
+    // const frame = editor.getCurrentFrame();
+    // if (!frame || !frame.model) return icon;
+    // const isLoading = frame.model.state === LoadStatus.LOADING;
+    // const codes: any[] = [ModelCodeEnum.COCO_80];
+    // return isLoading && codes.includes(frame.model.code) ? 'loading' : icon;
+  },
+  isDisplay: function (editor: Editor) {
+    return true;
+    // return (
+    //   editor.state.modeConfig.ui[UIType.model] &&
+    //   editor.getModelsByType(ModelTypeEnum.DETECTION, AnnotateModeEnum.INSTANCE).length > 0
+    // );
+  },
+  isActive: function () {
+    return false;
+  },
+};
diff --git a/frontend/image-tool/src/package/image-editor/configs/tools/tool-segment.ts b/frontend/image-tool/src/package/image-editor/configs/tools/tool-segment.ts
new file mode 100644
index 00000000..b979278b
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/configs/tools/tool-segment.ts
@@ -0,0 +1,3 @@
+import { ToolName } from '../../types/enum';
+
+export const segmentTools: ToolName[] = [];
diff --git a/frontend/image-tool/src/package/image-editor/index.ts b/frontend/image-tool/src/package/image-editor/index.ts
new file mode 100644
index 00000000..84eb2776
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/index.ts
@@ -0,0 +1,27 @@
+import Editor from './Editor';
+import * as utils from './utils';
+import userAgent from './lib/ua';
+import BSError from './common/BSError';
+import { AllActions, IActionName } from './common/ActionManager';
+import { define as defineAction } from './common/ActionManager/define';
+import LoadManager from './common/LoadManager';
+import DataManager from './common/DataManager';
+
+export * from './types';
+export * from './configs';
+export * from './ImageView/shape';
+const __ALL__ = '__ALL__';
+const __UNSERIES__ = '__UNSERIES__';
+export type { IActionName };
+export {
+  Editor,
+  LoadManager,
+  DataManager,
+  utils,
+  userAgent,
+  BSError,
+  defineAction,
+  AllActions,
+  __ALL__,
+  __UNSERIES__,
+};
diff --git a/frontend/image-tool/src/package/image-editor/lib/polygon-clipping.js b/frontend/image-tool/src/package/image-editor/lib/polygon-clipping.js
new file mode 100644
index 00000000..b0be3796
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/lib/polygon-clipping.js
@@ -0,0 +1,1903 @@
+/* eslint-disable */
+import SplayTree from 'splaytree';
+
+function _classCallCheck(instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError('Cannot call a class as a function');
+  }
+}
+
+function _defineProperties(target, props) {
+  for (let i = 0; i < props.length; i++) {
+    const descriptor = props[i];
+    descriptor.enumerable = descriptor.enumerable || false;
+    descriptor.configurable = true;
+    if ('value' in descriptor) descriptor.writable = true;
+    Object.defineProperty(target, descriptor.key, descriptor);
+  }
+}
+
+function _createClass(Constructor, protoProps, staticProps) {
+  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+  if (staticProps) _defineProperties(Constructor, staticProps);
+  return Constructor;
+}
+
+/**
+ * A bounding box has the format:
+ *
+ *  { ll: { x: xmin, y: ymin }, ur: { x: xmax, y: ymax } }
+ *
+ */
+const isInBbox = function isInBbox(bbox, point) {
+  return (
+    bbox.ll.x <= point.x && point.x <= bbox.ur.x && bbox.ll.y <= point.y && point.y <= bbox.ur.y
+  );
+};
+/* Returns either null, or a bbox (aka an ordered pair of points)
+ * If there is only one point of overlap, a bbox with identical points
+ * will be returned */
+
+const getBboxOverlap = function getBboxOverlap(b1, b2) {
+  // check if the bboxes overlap at all
+  if (b2.ur.x < b1.ll.x || b1.ur.x < b2.ll.x || b2.ur.y < b1.ll.y || b1.ur.y < b2.ll.y) return null; // find the middle two X values
+
+  const lowerX = b1.ll.x < b2.ll.x ? b2.ll.x : b1.ll.x;
+  const upperX = b1.ur.x < b2.ur.x ? b1.ur.x : b2.ur.x; // find the middle two Y values
+
+  const lowerY = b1.ll.y < b2.ll.y ? b2.ll.y : b1.ll.y;
+  const upperY = b1.ur.y < b2.ur.y ? b1.ur.y : b2.ur.y; // put those middle values together to get the overlap
+
+  return {
+    ll: {
+      x: lowerX,
+      y: lowerY,
+    },
+    ur: {
+      x: upperX,
+      y: upperY,
+    },
+  };
+};
+
+/* Javascript doesn't do integer math. Everything is
+ * floating point with percision Number.EPSILON.
+ *
+ * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/EPSILON
+ */
+let epsilon = Number.EPSILON; // IE Polyfill
+
+if (epsilon === undefined) epsilon = Math.pow(2, -52);
+const EPSILON_SQ = epsilon * epsilon;
+/* FLP comparator */
+
+const cmp = function cmp(a, b) {
+  // check if they're both 0
+  if (-epsilon < a && a < epsilon) {
+    if (-epsilon < b && b < epsilon) {
+      return 0;
+    }
+  } // check if they're flp equal
+
+  const ab = a - b;
+
+  if (ab * ab < EPSILON_SQ * a * b) {
+    return 0;
+  } // normal comparison
+
+  return a < b ? -1 : 1;
+};
+
+/**
+ * This class rounds incoming values sufficiently so that
+ * floating points problems are, for the most part, avoided.
+ *
+ * Incoming points are have their x & y values tested against
+ * all previously seen x & y values. If either is 'too close'
+ * to a previously seen value, it's value is 'snapped' to the
+ * previously seen value.
+ *
+ * All points should be rounded by this class before being
+ * stored in any data structures in the rest of this algorithm.
+ */
+
+const PtRounder = /*#__PURE__*/ (function () {
+  function PtRounder() {
+    _classCallCheck(this, PtRounder);
+
+    this.reset();
+  }
+
+  _createClass(PtRounder, [
+    {
+      key: 'reset',
+      value: function reset() {
+        this.xRounder = new CoordRounder();
+        this.yRounder = new CoordRounder();
+      },
+    },
+    {
+      key: 'round',
+      value: function round(x, y) {
+        return {
+          x: this.xRounder.round(x),
+          y: this.yRounder.round(y),
+        };
+      },
+    },
+  ]);
+
+  return PtRounder;
+})();
+
+var CoordRounder = /*#__PURE__*/ (function () {
+  function CoordRounder() {
+    _classCallCheck(this, CoordRounder);
+
+    this.tree = new SplayTree(); // preseed with 0 so we don't end up with values < Number.EPSILON
+
+    this.round(0);
+  } // Note: this can rounds input values backwards or forwards.
+  //       You might ask, why not restrict this to just rounding
+  //       forwards? Wouldn't that allow left endpoints to always
+  //       remain left endpoints during splitting (never change to
+  //       right). No - it wouldn't, because we snap intersections
+  //       to endpoints (to establish independence from the segment
+  //       angle for t-intersections).
+
+  _createClass(CoordRounder, [
+    {
+      key: 'round',
+      value: function round(coord) {
+        const node = this.tree.add(coord);
+        const prevNode = this.tree.prev(node);
+
+        if (prevNode !== null && cmp(node.key, prevNode.key) === 0) {
+          this.tree.remove(coord);
+          return prevNode.key;
+        }
+
+        const nextNode = this.tree.next(node);
+
+        if (nextNode !== null && cmp(node.key, nextNode.key) === 0) {
+          this.tree.remove(coord);
+          return nextNode.key;
+        }
+
+        return coord;
+      },
+    },
+  ]);
+
+  return CoordRounder;
+})(); // singleton available by import
+
+const rounder = new PtRounder();
+
+/* Cross Product of two vectors with first point at origin */
+
+const crossProduct = function crossProduct(a, b) {
+  return a.x * b.y - a.y * b.x;
+};
+/* Dot Product of two vectors with first point at origin */
+
+const dotProduct = function dotProduct(a, b) {
+  return a.x * b.x + a.y * b.y;
+};
+/* Comparator for two vectors with same starting point */
+
+const compareVectorAngles = function compareVectorAngles(basePt, endPt1, endPt2) {
+  const v1 = {
+    x: endPt1.x - basePt.x,
+    y: endPt1.y - basePt.y,
+  };
+  const v2 = {
+    x: endPt2.x - basePt.x,
+    y: endPt2.y - basePt.y,
+  };
+  const kross = crossProduct(v1, v2);
+  const epsilon = 0.001;
+  return kross > epsilon ? 1 : kross < -epsilon ? -1 : 0;
+};
+const length = function length(v) {
+  return Math.sqrt(dotProduct(v, v));
+};
+/* Get the sine of the angle from pShared -> pAngle to pShaed -> pBase */
+
+const sineOfAngle = function sineOfAngle(pShared, pBase, pAngle) {
+  const vBase = {
+    x: pBase.x - pShared.x,
+    y: pBase.y - pShared.y,
+  };
+  const vAngle = {
+    x: pAngle.x - pShared.x,
+    y: pAngle.y - pShared.y,
+  };
+  return crossProduct(vAngle, vBase) / length(vAngle) / length(vBase);
+};
+/* Get the cosine of the angle from pShared -> pAngle to pShaed -> pBase */
+
+const cosineOfAngle = function cosineOfAngle(pShared, pBase, pAngle) {
+  const vBase = {
+    x: pBase.x - pShared.x,
+    y: pBase.y - pShared.y,
+  };
+  const vAngle = {
+    x: pAngle.x - pShared.x,
+    y: pAngle.y - pShared.y,
+  };
+  return dotProduct(vAngle, vBase) / length(vAngle) / length(vBase);
+};
+/* Get the x coordinate where the given line (defined by a point and vector)
+ * crosses the horizontal line with the given y coordiante.
+ * In the case of parrallel lines (including overlapping ones) returns null. */
+
+const horizontalIntersection = function horizontalIntersection(pt, v, y) {
+  if (v.y === 0) return null;
+  return {
+    x: pt.x + (v.x / v.y) * (y - pt.y),
+    y: y,
+  };
+};
+/* Get the y coordinate where the given line (defined by a point and vector)
+ * crosses the vertical line with the given x coordiante.
+ * In the case of parrallel lines (including overlapping ones) returns null. */
+
+const verticalIntersection = function verticalIntersection(pt, v, x) {
+  if (v.x === 0) return null;
+  return {
+    x: x,
+    y: pt.y + (v.y / v.x) * (x - pt.x),
+  };
+};
+/* Get the intersection of two lines, each defined by a base point and a vector.
+ * In the case of parrallel lines (including overlapping ones) returns null. */
+
+const intersection = function intersection(pt1, v1, pt2, v2) {
+  // take some shortcuts for vertical and horizontal lines
+  // this also ensures we don't calculate an intersection and then discover
+  // it's actually outside the bounding box of the line
+  if (v1.x === 0) return verticalIntersection(pt2, v2, pt1.x);
+  if (v2.x === 0) return verticalIntersection(pt1, v1, pt2.x);
+  if (v1.y === 0) return horizontalIntersection(pt2, v2, pt1.y);
+  if (v2.y === 0) return horizontalIntersection(pt1, v1, pt2.y); // General case for non-overlapping segments.
+  // This algorithm is based on Schneider and Eberly.
+  // http://www.cimec.org.ar/~ncalvo/Schneider_Eberly.pdf - pg 244
+
+  const kross = crossProduct(v1, v2);
+  if (kross == 0) return null;
+  const ve = {
+    x: pt2.x - pt1.x,
+    y: pt2.y - pt1.y,
+  };
+  const d1 = crossProduct(ve, v1) / kross;
+  const d2 = crossProduct(ve, v2) / kross; // take the average of the two calculations to minimize rounding error
+
+  const x1 = pt1.x + d2 * v1.x,
+    x2 = pt2.x + d1 * v2.x;
+  const y1 = pt1.y + d2 * v1.y,
+    y2 = pt2.y + d1 * v2.y;
+  const x = (x1 + x2) / 2;
+  const y = (y1 + y2) / 2;
+  return {
+    x: x,
+    y: y,
+  };
+};
+
+const SweepEvent = /*#__PURE__*/ (function () {
+  _createClass(SweepEvent, null, [
+    {
+      key: 'compare',
+      // for ordering sweep events in the sweep event queue
+      value: function compare(a, b) {
+        // favor event with a point that the sweep line hits first
+        const ptCmp = SweepEvent.comparePoints(a.point, b.point);
+        if (ptCmp !== 0) return ptCmp; // the points are the same, so link them if needed
+
+        if (a.point !== b.point) a.link(b); // favor right events over left
+
+        if (a.isLeft !== b.isLeft) return a.isLeft ? 1 : -1; // we have two matching left or right endpoints
+        // ordering of this case is the same as for their segments
+
+        return Segment.compare(a.segment, b.segment);
+      }, // for ordering points in sweep line order
+    },
+    {
+      key: 'comparePoints',
+      value: function comparePoints(aPt, bPt) {
+        if (aPt.x < bPt.x) return -1;
+        if (aPt.x > bPt.x) return 1;
+        if (aPt.y < bPt.y) return -1;
+        if (aPt.y > bPt.y) return 1;
+        return 0;
+      }, // Warning: 'point' input will be modified and re-used (for performance)
+    },
+  ]);
+
+  function SweepEvent(point, isLeft) {
+    _classCallCheck(this, SweepEvent);
+
+    if (point.events === undefined) point.events = [this];
+    else point.events.push(this);
+    this.point = point;
+    this.isLeft = isLeft; // this.segment, this.otherSE set by factory
+  }
+
+  _createClass(SweepEvent, [
+    {
+      key: 'link',
+      value: function link(other) {
+        if (other.point === this.point) {
+          throw new Error('Tried to link already linked events');
+        }
+
+        const otherEvents = other.point.events;
+
+        for (let i = 0, iMax = otherEvents.length; i < iMax; i++) {
+          const evt = otherEvents[i];
+          this.point.events.push(evt);
+          evt.point = this.point;
+        }
+
+        this.checkForConsuming();
+      },
+      /* Do a pass over our linked events and check to see if any pair
+       * of segments match, and should be consumed. */
+    },
+    {
+      key: 'checkForConsuming',
+      value: function checkForConsuming() {
+        // FIXME: The loops in this method run O(n^2) => no good.
+        //        Maintain little ordered sweep event trees?
+        //        Can we maintaining an ordering that avoids the need
+        //        for the re-sorting with getLeftmostComparator in geom-out?
+        // Compare each pair of events to see if other events also match
+        const numEvents = this.point.events.length;
+
+        for (let i = 0; i < numEvents; i++) {
+          const evt1 = this.point.events[i];
+          if (evt1.segment.consumedBy !== undefined) continue;
+
+          for (let j = i + 1; j < numEvents; j++) {
+            const evt2 = this.point.events[j];
+            if (evt2.consumedBy !== undefined) continue;
+            if (evt1.otherSE.point.events !== evt2.otherSE.point.events) continue;
+            evt1.segment.consume(evt2.segment);
+          }
+        }
+      },
+    },
+    {
+      key: 'getAvailableLinkedEvents',
+      value: function getAvailableLinkedEvents() {
+        // point.events is always of length 2 or greater
+        const events = [];
+
+        for (let i = 0, iMax = this.point.events.length; i < iMax; i++) {
+          const evt = this.point.events[i];
+
+          if (evt !== this && !evt.segment.ringOut && evt.segment.isInResult()) {
+            events.push(evt);
+          }
+        }
+
+        return events;
+      },
+      /**
+       * Returns a comparator function for sorting linked events that will
+       * favor the event that will give us the smallest left-side angle.
+       * All ring construction starts as low as possible heading to the right,
+       * so by always turning left as sharp as possible we'll get polygons
+       * without uncessary loops & holes.
+       *
+       * The comparator function has a compute cache such that it avoids
+       * re-computing already-computed values.
+       */
+    },
+    {
+      key: 'getLeftmostComparator',
+      value: function getLeftmostComparator(baseEvent) {
+        const _this = this;
+
+        const cache = new Map();
+
+        const fillCache = function fillCache(linkedEvent) {
+          const nextEvent = linkedEvent.otherSE;
+          cache.set(linkedEvent, {
+            sine: sineOfAngle(_this.point, baseEvent.point, nextEvent.point),
+            cosine: cosineOfAngle(_this.point, baseEvent.point, nextEvent.point),
+          });
+        };
+
+        return function (a, b) {
+          if (!cache.has(a)) fillCache(a);
+          if (!cache.has(b)) fillCache(b);
+
+          const _cache$get = cache.get(a),
+            asine = _cache$get.sine,
+            acosine = _cache$get.cosine;
+
+          const _cache$get2 = cache.get(b),
+            bsine = _cache$get2.sine,
+            bcosine = _cache$get2.cosine; // both on or above x-axis
+
+          if (asine >= 0 && bsine >= 0) {
+            if (acosine < bcosine) return 1;
+            if (acosine > bcosine) return -1;
+            return 0;
+          } // both below x-axis
+
+          if (asine < 0 && bsine < 0) {
+            if (acosine < bcosine) return -1;
+            if (acosine > bcosine) return 1;
+            return 0;
+          } // one above x-axis, one below
+
+          if (bsine < asine) return -1;
+          if (bsine > asine) return 1;
+          return 0;
+        };
+      },
+    },
+  ]);
+
+  return SweepEvent;
+})();
+
+// segments and sweep events when all else is identical
+
+let segmentId = 0;
+
+var Segment = /*#__PURE__*/ (function () {
+  _createClass(Segment, null, [
+    {
+      key: 'compare',
+
+      /* This compare() function is for ordering segments in the sweep
+       * line tree, and does so according to the following criteria:
+       *
+       * Consider the vertical line that lies an infinestimal step to the
+       * right of the right-more of the two left endpoints of the input
+       * segments. Imagine slowly moving a point up from negative infinity
+       * in the increasing y direction. Which of the two segments will that
+       * point intersect first? That segment comes 'before' the other one.
+       *
+       * If neither segment would be intersected by such a line, (if one
+       * or more of the segments are vertical) then the line to be considered
+       * is directly on the right-more of the two left inputs.
+       */
+      value: function compare(a, b) {
+        const alx = a.leftSE.point.x;
+        const blx = b.leftSE.point.x;
+        const arx = a.rightSE.point.x;
+        const brx = b.rightSE.point.x; // check if they're even in the same vertical plane
+
+        if (brx < alx) return 1;
+        if (arx < blx) return -1;
+        const aly = a.leftSE.point.y;
+        const bly = b.leftSE.point.y;
+        const ary = a.rightSE.point.y;
+        const bry = b.rightSE.point.y; // is left endpoint of segment B the right-more?
+
+        if (alx < blx) {
+          // are the two segments in the same horizontal plane?
+          if (bly < aly && bly < ary) return 1;
+          if (bly > aly && bly > ary) return -1; // is the B left endpoint colinear to segment A?
+
+          const aCmpBLeft = a.comparePoint(b.leftSE.point);
+          if (aCmpBLeft < 0) return 1;
+          if (aCmpBLeft > 0) return -1; // is the A right endpoint colinear to segment B ?
+
+          const bCmpARight = b.comparePoint(a.rightSE.point);
+          if (bCmpARight !== 0) return bCmpARight; // colinear segments, consider the one with left-more
+          // left endpoint to be first (arbitrary?)
+
+          return -1;
+        } // is left endpoint of segment A the right-more?
+
+        if (alx > blx) {
+          if (aly < bly && aly < bry) return -1;
+          if (aly > bly && aly > bry) return 1; // is the A left endpoint colinear to segment B?
+
+          const bCmpALeft = b.comparePoint(a.leftSE.point);
+          if (bCmpALeft !== 0) return bCmpALeft; // is the B right endpoint colinear to segment A?
+
+          const aCmpBRight = a.comparePoint(b.rightSE.point);
+          if (aCmpBRight < 0) return 1;
+          if (aCmpBRight > 0) return -1; // colinear segments, consider the one with left-more
+          // left endpoint to be first (arbitrary?)
+
+          return 1;
+        } // if we get here, the two left endpoints are in the same
+        // vertical plane, ie alx === blx
+        // consider the lower left-endpoint to come first
+
+        if (aly < bly) return -1;
+        if (aly > bly) return 1; // left endpoints are identical
+        // check for colinearity by using the left-more right endpoint
+        // is the A right endpoint more left-more?
+
+        if (arx < brx) {
+          const _bCmpARight = b.comparePoint(a.rightSE.point);
+
+          if (_bCmpARight !== 0) return _bCmpARight;
+        } // is the B right endpoint more left-more?
+
+        if (arx > brx) {
+          const _aCmpBRight = a.comparePoint(b.rightSE.point);
+
+          if (_aCmpBRight < 0) return 1;
+          if (_aCmpBRight > 0) return -1;
+        }
+
+        if (arx !== brx) {
+          // are these two [almost] vertical segments with opposite orientation?
+          // if so, the one with the lower right endpoint comes first
+          const ay = ary - aly;
+          const ax = arx - alx;
+          const by = bry - bly;
+          const bx = brx - blx;
+          if (ay > ax && by < bx) return 1;
+          if (ay < ax && by > bx) return -1;
+        } // we have colinear segments with matching orientation
+        // consider the one with more left-more right endpoint to be first
+
+        if (arx > brx) return 1;
+        if (arx < brx) return -1; // if we get here, two two right endpoints are in the same
+        // vertical plane, ie arx === brx
+        // consider the lower right-endpoint to come first
+
+        if (ary < bry) return -1;
+        if (ary > bry) return 1; // right endpoints identical as well, so the segments are idential
+        // fall back on creation order as consistent tie-breaker
+
+        if (a.id < b.id) return -1;
+        if (a.id > b.id) return 1; // identical segment, ie a === b
+
+        return 0;
+      },
+      /* Warning: a reference to ringWindings input will be stored,
+       *  and possibly will be later modified */
+    },
+  ]);
+
+  function Segment(leftSE, rightSE, rings, windings) {
+    _classCallCheck(this, Segment);
+
+    this.id = ++segmentId;
+    this.leftSE = leftSE;
+    leftSE.segment = this;
+    leftSE.otherSE = rightSE;
+    this.rightSE = rightSE;
+    rightSE.segment = this;
+    rightSE.otherSE = leftSE;
+    this.rings = rings;
+    this.windings = windings; // left unset for performance, set later in algorithm
+    // this.ringOut, this.consumedBy, this.prev
+  }
+
+  _createClass(
+    Segment,
+    [
+      {
+        key: 'replaceRightSE',
+
+        /* When a segment is split, the rightSE is replaced with a new sweep event */
+        value: function replaceRightSE(newRightSE) {
+          this.rightSE = newRightSE;
+          this.rightSE.segment = this;
+          this.rightSE.otherSE = this.leftSE;
+          this.leftSE.otherSE = this.rightSE;
+        },
+      },
+      {
+        key: 'bbox',
+        value: function bbox() {
+          const y1 = this.leftSE.point.y;
+          const y2 = this.rightSE.point.y;
+          return {
+            ll: {
+              x: this.leftSE.point.x,
+              y: y1 < y2 ? y1 : y2,
+            },
+            ur: {
+              x: this.rightSE.point.x,
+              y: y1 > y2 ? y1 : y2,
+            },
+          };
+        },
+        /* A vector from the left point to the right */
+      },
+      {
+        key: 'vector',
+        value: function vector() {
+          return {
+            x: this.rightSE.point.x - this.leftSE.point.x,
+            y: this.rightSE.point.y - this.leftSE.point.y,
+          };
+        },
+      },
+      {
+        key: 'isAnEndpoint',
+        value: function isAnEndpoint(pt) {
+          return (
+            (pt.x === this.leftSE.point.x && pt.y === this.leftSE.point.y) ||
+            (pt.x === this.rightSE.point.x && pt.y === this.rightSE.point.y)
+          );
+        },
+        /* Compare this segment with a point.
+         *
+         * A point P is considered to be colinear to a segment if there
+         * exists a distance D such that if we travel along the segment
+         * from one * endpoint towards the other a distance D, we find
+         * ourselves at point P.
+         *
+         * Return value indicates:
+         *
+         *   1: point lies above the segment (to the left of vertical)
+         *   0: point is colinear to segment
+         *  -1: point lies below the segment (to the right of vertical)
+         */
+      },
+      {
+        key: 'comparePoint',
+        value: function comparePoint(point) {
+          if (this.isAnEndpoint(point)) return 0;
+          const lPt = this.leftSE.point;
+          const rPt = this.rightSE.point;
+          const v = this.vector(); // Exactly vertical segments.
+
+          if (lPt.x === rPt.x) {
+            if (point.x === lPt.x) return 0;
+            return point.x < lPt.x ? 1 : -1;
+          } // Nearly vertical segments with an intersection.
+          // Check to see where a point on the line with matching Y coordinate is.
+
+          const yDist = (point.y - lPt.y) / v.y;
+          const xFromYDist = lPt.x + yDist * v.x;
+          if (point.x === xFromYDist) return 0; // General case.
+          // Check to see where a point on the line with matching X coordinate is.
+
+          const xDist = (point.x - lPt.x) / v.x;
+          const yFromXDist = lPt.y + xDist * v.y;
+          if (point.y === yFromXDist) return 0;
+          return point.y < yFromXDist ? -1 : 1;
+        },
+        /**
+         * Given another segment, returns the first non-trivial intersection
+         * between the two segments (in terms of sweep line ordering), if it exists.
+         *
+         * A 'non-trivial' intersection is one that will cause one or both of the
+         * segments to be split(). As such, 'trivial' vs. 'non-trivial' intersection:
+         *
+         *   * endpoint of segA with endpoint of segB --> trivial
+         *   * endpoint of segA with point along segB --> non-trivial
+         *   * endpoint of segB with point along segA --> non-trivial
+         *   * point along segA with point along segB --> non-trivial
+         *
+         * If no non-trivial intersection exists, return null
+         * Else, return null.
+         */
+      },
+      {
+        key: 'getIntersection',
+        value: function getIntersection(other) {
+          // If bboxes don't overlap, there can't be any intersections
+          const tBbox = this.bbox();
+          const oBbox = other.bbox();
+          const bboxOverlap = getBboxOverlap(tBbox, oBbox);
+          if (bboxOverlap === null) return null; // We first check to see if the endpoints can be considered intersections.
+          // This will 'snap' intersections to endpoints if possible, and will
+          // handle cases of colinearity.
+
+          const tlp = this.leftSE.point;
+          const trp = this.rightSE.point;
+          const olp = other.leftSE.point;
+          const orp = other.rightSE.point; // does each endpoint touch the other segment?
+          // note that we restrict the 'touching' definition to only allow segments
+          // to touch endpoints that lie forward from where we are in the sweep line pass
+
+          const touchesOtherLSE = isInBbox(tBbox, olp) && this.comparePoint(olp) === 0;
+          const touchesThisLSE = isInBbox(oBbox, tlp) && other.comparePoint(tlp) === 0;
+          const touchesOtherRSE = isInBbox(tBbox, orp) && this.comparePoint(orp) === 0;
+          const touchesThisRSE = isInBbox(oBbox, trp) && other.comparePoint(trp) === 0; // do left endpoints match?
+
+          if (touchesThisLSE && touchesOtherLSE) {
+            // these two cases are for colinear segments with matching left
+            // endpoints, and one segment being longer than the other
+            if (touchesThisRSE && !touchesOtherRSE) return trp;
+            if (!touchesThisRSE && touchesOtherRSE) return orp; // either the two segments match exactly (two trival intersections)
+            // or just on their left endpoint (one trivial intersection
+
+            return null;
+          } // does this left endpoint matches (other doesn't)
+
+          if (touchesThisLSE) {
+            // check for segments that just intersect on opposing endpoints
+            if (touchesOtherRSE) {
+              if (tlp.x === orp.x && tlp.y === orp.y) return null;
+            } // t-intersection on left endpoint
+
+            return tlp;
+          } // does other left endpoint matches (this doesn't)
+
+          if (touchesOtherLSE) {
+            // check for segments that just intersect on opposing endpoints
+            if (touchesThisRSE) {
+              if (trp.x === olp.x && trp.y === olp.y) return null;
+            } // t-intersection on left endpoint
+
+            return olp;
+          } // trivial intersection on right endpoints
+
+          if (touchesThisRSE && touchesOtherRSE) return null; // t-intersections on just one right endpoint
+
+          if (touchesThisRSE) return trp;
+          if (touchesOtherRSE) return orp; // None of our endpoints intersect. Look for a general intersection between
+          // infinite lines laid over the segments
+
+          const pt = intersection(tlp, this.vector(), olp, other.vector()); // are the segments parrallel? Note that if they were colinear with overlap,
+          // they would have an endpoint intersection and that case was already handled above
+
+          if (pt === null) return null; // is the intersection found between the lines not on the segments?
+
+          if (!isInBbox(bboxOverlap, pt)) return null; // round the the computed point if needed
+
+          return rounder.round(pt.x, pt.y);
+        },
+        /**
+         * Split the given segment into multiple segments on the given points.
+         *  * Each existing segment will retain its leftSE and a new rightSE will be
+         *    generated for it.
+         *  * A new segment will be generated which will adopt the original segment's
+         *    rightSE, and a new leftSE will be generated for it.
+         *  * If there are more than two points given to split on, new segments
+         *    in the middle will be generated with new leftSE and rightSE's.
+         *  * An array of the newly generated SweepEvents will be returned.
+         *
+         * Warning: input array of points is modified
+         */
+      },
+      {
+        key: 'split',
+        value: function split(point) {
+          const newEvents = [];
+          const alreadyLinked = point.events !== undefined;
+          const newLeftSE = new SweepEvent(point, true);
+          const newRightSE = new SweepEvent(point, false);
+          const oldRightSE = this.rightSE;
+          this.replaceRightSE(newRightSE);
+          newEvents.push(newRightSE);
+          newEvents.push(newLeftSE);
+          const newSeg = new Segment(
+            newLeftSE,
+            oldRightSE,
+            this.rings.slice(),
+            this.windings.slice(),
+          ); // when splitting a nearly vertical downward-facing segment,
+          // sometimes one of the resulting new segments is vertical, in which
+          // case its left and right events may need to be swapped
+
+          if (SweepEvent.comparePoints(newSeg.leftSE.point, newSeg.rightSE.point) > 0) {
+            newSeg.swapEvents();
+          }
+
+          if (SweepEvent.comparePoints(this.leftSE.point, this.rightSE.point) > 0) {
+            this.swapEvents();
+          } // in the point we just used to create new sweep events with was already
+          // linked to other events, we need to check if either of the affected
+          // segments should be consumed
+
+          if (alreadyLinked) {
+            newLeftSE.checkForConsuming();
+            newRightSE.checkForConsuming();
+          }
+
+          return newEvents;
+        },
+        /* Swap which event is left and right */
+      },
+      {
+        key: 'swapEvents',
+        value: function swapEvents() {
+          const tmpEvt = this.rightSE;
+          this.rightSE = this.leftSE;
+          this.leftSE = tmpEvt;
+          this.leftSE.isLeft = true;
+          this.rightSE.isLeft = false;
+
+          for (let i = 0, iMax = this.windings.length; i < iMax; i++) {
+            this.windings[i] *= -1;
+          }
+        },
+        /* Consume another segment. We take their rings under our wing
+         * and mark them as consumed. Use for perfectly overlapping segments */
+      },
+      {
+        key: 'consume',
+        value: function consume(other) {
+          let consumer = this;
+          let consumee = other;
+
+          while (consumer.consumedBy) {
+            consumer = consumer.consumedBy;
+          }
+
+          while (consumee.consumedBy) {
+            consumee = consumee.consumedBy;
+          }
+
+          const cmp = Segment.compare(consumer, consumee);
+          if (cmp === 0) return; // already consumed
+          // the winner of the consumption is the earlier segment
+          // according to sweep line ordering
+
+          if (cmp > 0) {
+            const tmp = consumer;
+            consumer = consumee;
+            consumee = tmp;
+          } // make sure a segment doesn't consume it's prev
+
+          if (consumer.prev === consumee) {
+            const _tmp = consumer;
+            consumer = consumee;
+            consumee = _tmp;
+          }
+
+          for (let i = 0, iMax = consumee.rings.length; i < iMax; i++) {
+            const ring = consumee.rings[i];
+            const winding = consumee.windings[i];
+            const index = consumer.rings.indexOf(ring);
+
+            if (index === -1) {
+              consumer.rings.push(ring);
+              consumer.windings.push(winding);
+            } else consumer.windings[index] += winding;
+          }
+
+          consumee.rings = null;
+          consumee.windings = null;
+          consumee.consumedBy = consumer; // mark sweep events consumed as to maintain ordering in sweep event queue
+
+          consumee.leftSE.consumedBy = consumer.leftSE;
+          consumee.rightSE.consumedBy = consumer.rightSE;
+        },
+        /* The first segment previous segment chain that is in the result */
+      },
+      {
+        key: 'prevInResult',
+        value: function prevInResult() {
+          if (this._prevInResult !== undefined) return this._prevInResult;
+          if (!this.prev) this._prevInResult = null;
+          else if (this.prev.isInResult()) this._prevInResult = this.prev;
+          else this._prevInResult = this.prev.prevInResult();
+          return this._prevInResult;
+        },
+      },
+      {
+        key: 'beforeState',
+        value: function beforeState() {
+          if (this._beforeState !== undefined) return this._beforeState;
+          if (!this.prev)
+            this._beforeState = {
+              rings: [],
+              windings: [],
+              multiPolys: [],
+            };
+          else {
+            const seg = this.prev.consumedBy || this.prev;
+            this._beforeState = seg.afterState();
+          }
+          return this._beforeState;
+        },
+      },
+      {
+        key: 'afterState',
+        value: function afterState() {
+          if (this._afterState !== undefined) return this._afterState;
+          const beforeState = this.beforeState();
+          this._afterState = {
+            rings: beforeState.rings.slice(0),
+            windings: beforeState.windings.slice(0),
+            multiPolys: [],
+          };
+          const ringsAfter = this._afterState.rings;
+          const windingsAfter = this._afterState.windings;
+          const mpsAfter = this._afterState.multiPolys; // calculate ringsAfter, windingsAfter
+
+          for (let i = 0, iMax = this.rings.length; i < iMax; i++) {
+            const ring = this.rings[i];
+            const winding = this.windings[i];
+            const index = ringsAfter.indexOf(ring);
+
+            if (index === -1) {
+              ringsAfter.push(ring);
+              windingsAfter.push(winding);
+            } else windingsAfter[index] += winding;
+          } // calcualte polysAfter
+
+          const polysAfter = [];
+          const polysExclude = [];
+
+          for (let _i = 0, _iMax = ringsAfter.length; _i < _iMax; _i++) {
+            if (windingsAfter[_i] === 0) continue; // non-zero rule
+
+            const _ring = ringsAfter[_i];
+            const poly = _ring.poly;
+            if (polysExclude.indexOf(poly) !== -1) continue;
+            if (_ring.isExterior) polysAfter.push(poly);
+            else {
+              if (polysExclude.indexOf(poly) === -1) polysExclude.push(poly);
+
+              const _index = polysAfter.indexOf(_ring.poly);
+
+              if (_index !== -1) polysAfter.splice(_index, 1);
+            }
+          } // calculate multiPolysAfter
+
+          for (let _i2 = 0, _iMax2 = polysAfter.length; _i2 < _iMax2; _i2++) {
+            const mp = polysAfter[_i2].multiPoly;
+            if (mpsAfter.indexOf(mp) === -1) mpsAfter.push(mp);
+          }
+
+          return this._afterState;
+        },
+        /* Is this segment part of the final result? */
+      },
+      {
+        key: 'isInResult',
+        value: function isInResult() {
+          // if we've been consumed, we're not in the result
+          if (this.consumedBy) return false;
+          if (this._isInResult !== undefined) return this._isInResult;
+          const mpsBefore = this.beforeState().multiPolys;
+          const mpsAfter = this.afterState().multiPolys;
+
+          switch (operation.type) {
+            case 'union': {
+              // UNION - included iff:
+              //  * On one side of us there is 0 poly interiors AND
+              //  * On the other side there is 1 or more.
+              const noBefores = mpsBefore.length === 0;
+              const noAfters = mpsAfter.length === 0;
+              this._isInResult = noBefores !== noAfters;
+              break;
+            }
+
+            case 'intersection': {
+              // INTERSECTION - included iff:
+              //  * on one side of us all multipolys are rep. with poly interiors AND
+              //  * on the other side of us, not all multipolys are repsented
+              //    with poly interiors
+              let least;
+              let most;
+
+              if (mpsBefore.length < mpsAfter.length) {
+                least = mpsBefore.length;
+                most = mpsAfter.length;
+              } else {
+                least = mpsAfter.length;
+                most = mpsBefore.length;
+              }
+
+              this._isInResult = most === operation.numMultiPolys && least < most;
+              break;
+            }
+
+            case 'xor': {
+              // XOR - included iff:
+              //  * the difference between the number of multipolys represented
+              //    with poly interiors on our two sides is an odd number
+              const diff = Math.abs(mpsBefore.length - mpsAfter.length);
+              this._isInResult = diff % 2 === 1;
+              break;
+            }
+
+            case 'difference': {
+              // DIFFERENCE included iff:
+              //  * on exactly one side, we have just the subject
+              const isJustSubject = function isJustSubject(mps) {
+                return mps.length === 1 && mps[0].isSubject;
+              };
+
+              this._isInResult = isJustSubject(mpsBefore) !== isJustSubject(mpsAfter);
+              break;
+            }
+
+            default:
+              throw new Error('Unrecognized operation type found '.concat(operation.type));
+          }
+
+          return this._isInResult;
+        },
+      },
+    ],
+    [
+      {
+        key: 'fromRing',
+        value: function fromRing(pt1, pt2, ring) {
+          let leftPt, rightPt, winding; // ordering the two points according to sweep line ordering
+
+          const cmpPts = SweepEvent.comparePoints(pt1, pt2);
+
+          if (cmpPts < 0) {
+            leftPt = pt1;
+            rightPt = pt2;
+            winding = 1;
+          } else if (cmpPts > 0) {
+            leftPt = pt2;
+            rightPt = pt1;
+            winding = -1;
+          } else
+            throw new Error(
+              'Tried to create degenerate segment at ['.concat(pt1.x, ', ').concat(pt1.y, ']'),
+            );
+
+          const leftSE = new SweepEvent(leftPt, true);
+          const rightSE = new SweepEvent(rightPt, false);
+          return new Segment(leftSE, rightSE, [ring], [winding]);
+        },
+      },
+    ],
+  );
+
+  return Segment;
+})();
+
+const RingIn = /*#__PURE__*/ (function () {
+  function RingIn(geomRing, poly, isExterior) {
+    _classCallCheck(this, RingIn);
+
+    if (!Array.isArray(geomRing) || geomRing.length === 0) {
+      throw new Error('Input geometry is not a valid Polygon or MultiPolygon');
+    }
+
+    this.poly = poly;
+    this.isExterior = isExterior;
+    this.segments = [];
+
+    if (typeof geomRing[0][0] !== 'number' || typeof geomRing[0][1] !== 'number') {
+      throw new Error('Input geometry is not a valid Polygon or MultiPolygon');
+    }
+
+    const firstPoint = rounder.round(geomRing[0][0], geomRing[0][1]);
+    this.bbox = {
+      ll: {
+        x: firstPoint.x,
+        y: firstPoint.y,
+      },
+      ur: {
+        x: firstPoint.x,
+        y: firstPoint.y,
+      },
+    };
+    let prevPoint = firstPoint;
+
+    for (let i = 1, iMax = geomRing.length; i < iMax; i++) {
+      if (typeof geomRing[i][0] !== 'number' || typeof geomRing[i][1] !== 'number') {
+        throw new Error('Input geometry is not a valid Polygon or MultiPolygon');
+      }
+
+      const point = rounder.round(geomRing[i][0], geomRing[i][1]); // skip repeated points
+
+      if (point.x === prevPoint.x && point.y === prevPoint.y) continue;
+      this.segments.push(Segment.fromRing(prevPoint, point, this));
+      if (point.x < this.bbox.ll.x) this.bbox.ll.x = point.x;
+      if (point.y < this.bbox.ll.y) this.bbox.ll.y = point.y;
+      if (point.x > this.bbox.ur.x) this.bbox.ur.x = point.x;
+      if (point.y > this.bbox.ur.y) this.bbox.ur.y = point.y;
+      prevPoint = point;
+    } // add segment from last to first if last is not the same as first
+
+    if (firstPoint.x !== prevPoint.x || firstPoint.y !== prevPoint.y) {
+      this.segments.push(Segment.fromRing(prevPoint, firstPoint, this));
+    }
+  }
+
+  _createClass(RingIn, [
+    {
+      key: 'getSweepEvents',
+      value: function getSweepEvents() {
+        const sweepEvents = [];
+
+        for (let i = 0, iMax = this.segments.length; i < iMax; i++) {
+          const segment = this.segments[i];
+          sweepEvents.push(segment.leftSE);
+          sweepEvents.push(segment.rightSE);
+        }
+
+        return sweepEvents;
+      },
+    },
+  ]);
+
+  return RingIn;
+})();
+const PolyIn = /*#__PURE__*/ (function () {
+  function PolyIn(geomPoly, multiPoly) {
+    _classCallCheck(this, PolyIn);
+
+    if (!Array.isArray(geomPoly)) {
+      throw new Error('Input geometry is not a valid Polygon or MultiPolygon');
+    }
+
+    this.exteriorRing = new RingIn(geomPoly[0], this, true); // copy by value
+
+    this.bbox = {
+      ll: {
+        x: this.exteriorRing.bbox.ll.x,
+        y: this.exteriorRing.bbox.ll.y,
+      },
+      ur: {
+        x: this.exteriorRing.bbox.ur.x,
+        y: this.exteriorRing.bbox.ur.y,
+      },
+    };
+    this.interiorRings = [];
+
+    for (let i = 1, iMax = geomPoly.length; i < iMax; i++) {
+      const ring = new RingIn(geomPoly[i], this, false);
+      if (ring.bbox.ll.x < this.bbox.ll.x) this.bbox.ll.x = ring.bbox.ll.x;
+      if (ring.bbox.ll.y < this.bbox.ll.y) this.bbox.ll.y = ring.bbox.ll.y;
+      if (ring.bbox.ur.x > this.bbox.ur.x) this.bbox.ur.x = ring.bbox.ur.x;
+      if (ring.bbox.ur.y > this.bbox.ur.y) this.bbox.ur.y = ring.bbox.ur.y;
+      this.interiorRings.push(ring);
+    }
+
+    this.multiPoly = multiPoly;
+  }
+
+  _createClass(PolyIn, [
+    {
+      key: 'getSweepEvents',
+      value: function getSweepEvents() {
+        const sweepEvents = this.exteriorRing.getSweepEvents();
+
+        for (let i = 0, iMax = this.interiorRings.length; i < iMax; i++) {
+          const ringSweepEvents = this.interiorRings[i].getSweepEvents();
+
+          for (let j = 0, jMax = ringSweepEvents.length; j < jMax; j++) {
+            sweepEvents.push(ringSweepEvents[j]);
+          }
+        }
+
+        return sweepEvents;
+      },
+    },
+  ]);
+
+  return PolyIn;
+})();
+const MultiPolyIn = /*#__PURE__*/ (function () {
+  function MultiPolyIn(geom, isSubject) {
+    _classCallCheck(this, MultiPolyIn);
+
+    if (!Array.isArray(geom)) {
+      throw new Error('Input geometry is not a valid Polygon or MultiPolygon');
+    }
+
+    try {
+      // if the input looks like a polygon, convert it to a multipolygon
+      if (typeof geom[0][0][0] === 'number') geom = [geom];
+    } catch (ex) {
+      // The input is either malformed or has empty arrays.
+      // In either case, it will be handled later on.
+    }
+
+    this.polys = [];
+    this.bbox = {
+      ll: {
+        x: Number.POSITIVE_INFINITY,
+        y: Number.POSITIVE_INFINITY,
+      },
+      ur: {
+        x: Number.NEGATIVE_INFINITY,
+        y: Number.NEGATIVE_INFINITY,
+      },
+    };
+
+    for (let i = 0, iMax = geom.length; i < iMax; i++) {
+      const poly = new PolyIn(geom[i], this);
+      if (poly.bbox.ll.x < this.bbox.ll.x) this.bbox.ll.x = poly.bbox.ll.x;
+      if (poly.bbox.ll.y < this.bbox.ll.y) this.bbox.ll.y = poly.bbox.ll.y;
+      if (poly.bbox.ur.x > this.bbox.ur.x) this.bbox.ur.x = poly.bbox.ur.x;
+      if (poly.bbox.ur.y > this.bbox.ur.y) this.bbox.ur.y = poly.bbox.ur.y;
+      this.polys.push(poly);
+    }
+
+    this.isSubject = isSubject;
+  }
+
+  _createClass(MultiPolyIn, [
+    {
+      key: 'getSweepEvents',
+      value: function getSweepEvents() {
+        const sweepEvents = [];
+
+        for (let i = 0, iMax = this.polys.length; i < iMax; i++) {
+          const polySweepEvents = this.polys[i].getSweepEvents();
+
+          for (let j = 0, jMax = polySweepEvents.length; j < jMax; j++) {
+            sweepEvents.push(polySweepEvents[j]);
+          }
+        }
+
+        return sweepEvents;
+      },
+    },
+  ]);
+
+  return MultiPolyIn;
+})();
+
+const RingOut = /*#__PURE__*/ (function () {
+  _createClass(RingOut, null, [
+    {
+      key: 'factory',
+
+      /* Given the segments from the sweep line pass, compute & return a series
+       * of closed rings from all the segments marked to be part of the result */
+      value: function factory(allSegments) {
+        const ringsOut = [];
+
+        for (let i = 0, iMax = allSegments.length; i < iMax; i++) {
+          const segment = allSegments[i];
+          if (!segment.isInResult() || segment.ringOut) continue;
+          let prevEvent = null;
+          let event = segment.leftSE;
+          let nextEvent = segment.rightSE;
+          const events = [event];
+          const startingPoint = event.point;
+          const intersectionLEs = [];
+          /* Walk the chain of linked events to form a closed ring */
+
+          while (true) {
+            prevEvent = event;
+            event = nextEvent;
+            events.push(event);
+            /* Is the ring complete? */
+
+            if (event.point === startingPoint) break;
+
+            while (true) {
+              const availableLEs = event.getAvailableLinkedEvents();
+              /* Did we hit a dead end? This shouldn't happen. Indicates some earlier
+               * part of the algorithm malfunctioned... please file a bug report. */
+
+              if (availableLEs.length === 0) {
+                const firstPt = events[0].point;
+                const lastPt = events[events.length - 1].point;
+                throw new Error(
+                  'Unable to complete output ring starting at ['.concat(firstPt.x, ',') +
+                    ' '.concat(firstPt.y, ']. Last matching segment found ends at') +
+                    ' ['.concat(lastPt.x, ', ').concat(lastPt.y, '].'),
+                );
+              }
+              /* Only one way to go, so cotinue on the path */
+
+              if (availableLEs.length === 1) {
+                nextEvent = availableLEs[0].otherSE;
+                break;
+              }
+              /* We must have an intersection. Check for a completed loop */
+
+              let indexLE = null;
+
+              for (let j = 0, jMax = intersectionLEs.length; j < jMax; j++) {
+                if (intersectionLEs[j].point === event.point) {
+                  indexLE = j;
+                  break;
+                }
+              }
+              /* Found a completed loop. Cut that off and make a ring */
+
+              if (indexLE !== null) {
+                const intersectionLE = intersectionLEs.splice(indexLE)[0];
+                const ringEvents = events.splice(intersectionLE.index);
+                ringEvents.unshift(ringEvents[0].otherSE);
+                ringsOut.push(new RingOut(ringEvents.reverse()));
+                continue;
+              }
+              /* register the intersection */
+
+              intersectionLEs.push({
+                index: events.length,
+                point: event.point,
+              });
+              /* Choose the left-most option to continue the walk */
+
+              const comparator = event.getLeftmostComparator(prevEvent);
+              nextEvent = availableLEs.sort(comparator)[0].otherSE;
+              break;
+            }
+          }
+
+          ringsOut.push(new RingOut(events));
+        }
+
+        return ringsOut;
+      },
+    },
+  ]);
+
+  function RingOut(events) {
+    _classCallCheck(this, RingOut);
+
+    this.events = events;
+
+    for (let i = 0, iMax = events.length; i < iMax; i++) {
+      events[i].segment.ringOut = this;
+    }
+
+    this.poly = null;
+  }
+
+  _createClass(RingOut, [
+    {
+      key: 'getGeom',
+      value: function getGeom() {
+        // Remove superfluous points (ie extra points along a straight line),
+        let prevPt = this.events[0].point;
+        const points = [prevPt];
+
+        for (let i = 1, iMax = this.events.length - 1; i < iMax; i++) {
+          const _pt = this.events[i].point;
+          const _nextPt = this.events[i + 1].point;
+          if (compareVectorAngles(_pt, prevPt, _nextPt) === 0) continue;
+          points.push(_pt);
+          prevPt = _pt;
+        } // ring was all (within rounding error of angle calc) colinear points
+
+        if (points.length === 1) return null; // check if the starting point is necessary
+
+        const pt = points[0];
+        const nextPt = points[1];
+        if (compareVectorAngles(pt, prevPt, nextPt) === 0) points.shift();
+        points.push(points[0]);
+        const step = this.isExteriorRing() ? 1 : -1;
+        const iStart = this.isExteriorRing() ? 0 : points.length - 1;
+        const iEnd = this.isExteriorRing() ? points.length : -1;
+        const orderedPoints = [];
+
+        for (let _i = iStart; _i != iEnd; _i += step) {
+          orderedPoints.push([points[_i].x, points[_i].y]);
+        }
+
+        return orderedPoints;
+      },
+    },
+    {
+      key: 'isExteriorRing',
+      value: function isExteriorRing() {
+        if (this._isExteriorRing === undefined) {
+          const enclosing = this.enclosingRing();
+          this._isExteriorRing = enclosing ? !enclosing.isExteriorRing() : true;
+        }
+
+        return this._isExteriorRing;
+      },
+    },
+    {
+      key: 'enclosingRing',
+      value: function enclosingRing() {
+        if (this._enclosingRing === undefined) {
+          this._enclosingRing = this._calcEnclosingRing();
+        }
+
+        return this._enclosingRing;
+      },
+      /* Returns the ring that encloses this one, if any */
+    },
+    {
+      key: '_calcEnclosingRing',
+      value: function _calcEnclosingRing() {
+        // start with the ealier sweep line event so that the prevSeg
+        // chain doesn't lead us inside of a loop of ours
+        let leftMostEvt = this.events[0];
+
+        for (let i = 1, iMax = this.events.length; i < iMax; i++) {
+          const evt = this.events[i];
+          if (SweepEvent.compare(leftMostEvt, evt) > 0) leftMostEvt = evt;
+        }
+
+        let prevSeg = leftMostEvt.segment.prevInResult();
+        let prevPrevSeg = prevSeg ? prevSeg.prevInResult() : null;
+
+        while (true) {
+          // no segment found, thus no ring can enclose us
+          if (!prevSeg) return null; // no segments below prev segment found, thus the ring of the prev
+          // segment must loop back around and enclose us
+
+          if (!prevPrevSeg) return prevSeg.ringOut; // if the two segments are of different rings, the ring of the prev
+          // segment must either loop around us or the ring of the prev prev
+          // seg, which would make us and the ring of the prev peers
+
+          if (prevPrevSeg.ringOut !== prevSeg.ringOut) {
+            if (prevPrevSeg.ringOut.enclosingRing() !== prevSeg.ringOut) {
+              return prevSeg.ringOut;
+            } else return prevSeg.ringOut.enclosingRing();
+          } // two segments are from the same ring, so this was a penisula
+          // of that ring. iterate downward, keep searching
+
+          prevSeg = prevPrevSeg.prevInResult();
+          prevPrevSeg = prevSeg ? prevSeg.prevInResult() : null;
+        }
+      },
+    },
+  ]);
+
+  return RingOut;
+})();
+const PolyOut = /*#__PURE__*/ (function () {
+  function PolyOut(exteriorRing) {
+    _classCallCheck(this, PolyOut);
+
+    this.exteriorRing = exteriorRing;
+    exteriorRing.poly = this;
+    this.interiorRings = [];
+  }
+
+  _createClass(PolyOut, [
+    {
+      key: 'addInterior',
+      value: function addInterior(ring) {
+        this.interiorRings.push(ring);
+        ring.poly = this;
+      },
+    },
+    {
+      key: 'getGeom',
+      value: function getGeom() {
+        const geom = [this.exteriorRing.getGeom()]; // exterior ring was all (within rounding error of angle calc) colinear points
+
+        if (geom[0] === null) return null;
+
+        for (let i = 0, iMax = this.interiorRings.length; i < iMax; i++) {
+          const ringGeom = this.interiorRings[i].getGeom(); // interior ring was all (within rounding error of angle calc) colinear points
+
+          if (ringGeom === null) continue;
+          geom.push(ringGeom);
+        }
+
+        return geom;
+      },
+    },
+  ]);
+
+  return PolyOut;
+})();
+const MultiPolyOut = /*#__PURE__*/ (function () {
+  function MultiPolyOut(rings) {
+    _classCallCheck(this, MultiPolyOut);
+
+    this.rings = rings;
+    this.polys = this._composePolys(rings);
+  }
+
+  _createClass(MultiPolyOut, [
+    {
+      key: 'getGeom',
+      value: function getGeom() {
+        const geom = [];
+
+        for (let i = 0, iMax = this.polys.length; i < iMax; i++) {
+          const polyGeom = this.polys[i].getGeom(); // exterior ring was all (within rounding error of angle calc) colinear points
+
+          if (polyGeom === null) continue;
+          geom.push(polyGeom);
+        }
+
+        return geom;
+      },
+    },
+    {
+      key: '_composePolys',
+      value: function _composePolys(rings) {
+        const polys = [];
+
+        for (let i = 0, iMax = rings.length; i < iMax; i++) {
+          const ring = rings[i];
+          if (ring.poly) continue;
+          if (ring.isExteriorRing()) polys.push(new PolyOut(ring));
+          else {
+            const enclosingRing = ring.enclosingRing();
+            if (!enclosingRing.poly) polys.push(new PolyOut(enclosingRing));
+            enclosingRing.poly.addInterior(ring);
+          }
+        }
+
+        return polys;
+      },
+    },
+  ]);
+
+  return MultiPolyOut;
+})();
+
+/**
+ * NOTE:  We must be careful not to change any segments while
+ *        they are in the SplayTree. AFAIK, there's no way to tell
+ *        the tree to rebalance itself - thus before splitting
+ *        a segment that's in the tree, we remove it from the tree,
+ *        do the split, then re-insert it. (Even though splitting a
+ *        segment *shouldn't* change its correct position in the
+ *        sweep line tree, the reality is because of rounding errors,
+ *        it sometimes does.)
+ */
+
+const SweepLine = /*#__PURE__*/ (function () {
+  function SweepLine(queue) {
+    const comparator =
+      arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : Segment.compare;
+
+    _classCallCheck(this, SweepLine);
+
+    this.queue = queue;
+    this.tree = new SplayTree(comparator);
+    this.segments = [];
+  }
+
+  _createClass(SweepLine, [
+    {
+      key: 'process',
+      value: function process(event) {
+        const segment = event.segment;
+        const newEvents = []; // if we've already been consumed by another segment,
+        // clean up our body parts and get out
+
+        if (event.consumedBy) {
+          if (event.isLeft) this.queue.remove(event.otherSE);
+          else this.tree.remove(segment);
+          return newEvents;
+        }
+
+        const node = event.isLeft ? this.tree.insert(segment) : this.tree.find(segment);
+        if (!node)
+          throw new Error(
+            'Unable to find segment #'.concat(segment.id, ' ') +
+              '['.concat(segment.leftSE.point.x, ', ').concat(segment.leftSE.point.y, '] -> ') +
+              '['.concat(segment.rightSE.point.x, ', ').concat(segment.rightSE.point.y, '] ') +
+              'in SweepLine tree. Please submit a bug report.',
+          );
+        let prevNode = node;
+        let nextNode = node;
+        let prevSeg = undefined;
+        let nextSeg = undefined; // skip consumed segments still in tree
+
+        while (prevSeg === undefined) {
+          prevNode = this.tree.prev(prevNode);
+          if (prevNode === null) prevSeg = null;
+          else if (prevNode.key.consumedBy === undefined) prevSeg = prevNode.key;
+        } // skip consumed segments still in tree
+
+        while (nextSeg === undefined) {
+          nextNode = this.tree.next(nextNode);
+          if (nextNode === null) nextSeg = null;
+          else if (nextNode.key.consumedBy === undefined) nextSeg = nextNode.key;
+        }
+
+        if (event.isLeft) {
+          // Check for intersections against the previous segment in the sweep line
+          let prevMySplitter = null;
+
+          if (prevSeg) {
+            const prevInter = prevSeg.getIntersection(segment);
+
+            if (prevInter !== null) {
+              if (!segment.isAnEndpoint(prevInter)) prevMySplitter = prevInter;
+
+              if (!prevSeg.isAnEndpoint(prevInter)) {
+                const newEventsFromSplit = this._splitSafely(prevSeg, prevInter);
+
+                for (let i = 0, iMax = newEventsFromSplit.length; i < iMax; i++) {
+                  newEvents.push(newEventsFromSplit[i]);
+                }
+              }
+            }
+          } // Check for intersections against the next segment in the sweep line
+
+          let nextMySplitter = null;
+
+          if (nextSeg) {
+            const nextInter = nextSeg.getIntersection(segment);
+
+            if (nextInter !== null) {
+              if (!segment.isAnEndpoint(nextInter)) nextMySplitter = nextInter;
+
+              if (!nextSeg.isAnEndpoint(nextInter)) {
+                const _newEventsFromSplit = this._splitSafely(nextSeg, nextInter);
+
+                for (let _i = 0, _iMax = _newEventsFromSplit.length; _i < _iMax; _i++) {
+                  newEvents.push(_newEventsFromSplit[_i]);
+                }
+              }
+            }
+          } // For simplicity, even if we find more than one intersection we only
+          // spilt on the 'earliest' (sweep-line style) of the intersections.
+          // The other intersection will be handled in a future process().
+
+          if (prevMySplitter !== null || nextMySplitter !== null) {
+            let mySplitter = null;
+            if (prevMySplitter === null) mySplitter = nextMySplitter;
+            else if (nextMySplitter === null) mySplitter = prevMySplitter;
+            else {
+              const cmpSplitters = SweepEvent.comparePoints(prevMySplitter, nextMySplitter);
+              mySplitter = cmpSplitters <= 0 ? prevMySplitter : nextMySplitter;
+            } // Rounding errors can cause changes in ordering,
+            // so remove afected segments and right sweep events before splitting
+
+            this.queue.remove(segment.rightSE);
+            newEvents.push(segment.rightSE);
+
+            const _newEventsFromSplit2 = segment.split(mySplitter);
+
+            for (let _i2 = 0, _iMax2 = _newEventsFromSplit2.length; _i2 < _iMax2; _i2++) {
+              newEvents.push(_newEventsFromSplit2[_i2]);
+            }
+          }
+
+          if (newEvents.length > 0) {
+            // We found some intersections, so re-do the current event to
+            // make sure sweep line ordering is totally consistent for later
+            // use with the segment 'prev' pointers
+            this.tree.remove(segment);
+            newEvents.push(event);
+          } else {
+            // done with left event
+            this.segments.push(segment);
+            segment.prev = prevSeg;
+          }
+        } else {
+          // event.isRight
+          // since we're about to be removed from the sweep line, check for
+          // intersections between our previous and next segments
+          if (prevSeg && nextSeg) {
+            const inter = prevSeg.getIntersection(nextSeg);
+
+            if (inter !== null) {
+              if (!prevSeg.isAnEndpoint(inter)) {
+                const _newEventsFromSplit3 = this._splitSafely(prevSeg, inter);
+
+                for (let _i3 = 0, _iMax3 = _newEventsFromSplit3.length; _i3 < _iMax3; _i3++) {
+                  newEvents.push(_newEventsFromSplit3[_i3]);
+                }
+              }
+
+              if (!nextSeg.isAnEndpoint(inter)) {
+                const _newEventsFromSplit4 = this._splitSafely(nextSeg, inter);
+
+                for (let _i4 = 0, _iMax4 = _newEventsFromSplit4.length; _i4 < _iMax4; _i4++) {
+                  newEvents.push(_newEventsFromSplit4[_i4]);
+                }
+              }
+            }
+          }
+
+          this.tree.remove(segment);
+        }
+
+        return newEvents;
+      },
+      /* Safely split a segment that is currently in the datastructures
+       * IE - a segment other than the one that is currently being processed. */
+    },
+    {
+      key: '_splitSafely',
+      value: function _splitSafely(seg, pt) {
+        // Rounding errors can cause changes in ordering,
+        // so remove afected segments and right sweep events before splitting
+        // removeNode() doesn't work, so have re-find the seg
+        // https://github.com/w8r/splay-tree/pull/5
+        this.tree.remove(seg);
+        const rightSE = seg.rightSE;
+        this.queue.remove(rightSE);
+        const newEvents = seg.split(pt);
+        newEvents.push(rightSE); // splitting can trigger consumption
+
+        if (seg.consumedBy === undefined) this.tree.insert(seg);
+        return newEvents;
+      },
+    },
+  ]);
+
+  return SweepLine;
+})();
+
+const POLYGON_CLIPPING_MAX_QUEUE_SIZE =
+  (typeof process !== 'undefined' && process.env.POLYGON_CLIPPING_MAX_QUEUE_SIZE) || 1000000;
+const POLYGON_CLIPPING_MAX_SWEEPLINE_SEGMENTS =
+  (typeof process !== 'undefined' && process.env.POLYGON_CLIPPING_MAX_SWEEPLINE_SEGMENTS) ||
+  1000000;
+const Operation = /*#__PURE__*/ (function () {
+  function Operation() {
+    _classCallCheck(this, Operation);
+  }
+
+  _createClass(Operation, [
+    {
+      key: 'run',
+      value: function run(type, geom, moreGeoms) {
+        operation.type = type;
+        rounder.reset();
+        /* Convert inputs to MultiPoly objects */
+        const multipolys = [new MultiPolyIn(geom, true)];
+
+        for (let i = 0, iMax = moreGeoms.length; i < iMax; i++) {
+          multipolys.push(new MultiPolyIn(moreGeoms[i], false));
+        }
+
+        operation.numMultiPolys = multipolys.length;
+        /* BBox optimization for difference operation
+         * If the bbox of a multipolygon that's part of the clipping doesn't
+         * intersect the bbox of the subject at all, we can just drop that
+         * multiploygon. */
+
+        if (operation.type === 'difference') {
+          // in place removal
+          const subject = multipolys[0];
+          let _i = 1;
+
+          while (_i < multipolys.length) {
+            if (getBboxOverlap(multipolys[_i].bbox, subject.bbox) !== null) _i++;
+            else multipolys.splice(_i, 1);
+          }
+        }
+        /* BBox optimization for intersection operation
+         * If we can find any pair of multipolygons whose bbox does not overlap,
+         * then the result will be empty. */
+
+        if (operation.type === 'intersection') {
+          // TODO: this is O(n^2) in number of polygons. By sorting the bboxes,
+          //       it could be optimized to O(n * ln(n))
+          for (let _i2 = 0, _iMax = multipolys.length; _i2 < _iMax; _i2++) {
+            const mpA = multipolys[_i2];
+
+            for (let j = _i2 + 1, jMax = multipolys.length; j < jMax; j++) {
+              if (getBboxOverlap(mpA.bbox, multipolys[j].bbox) === null) return [];
+            }
+          }
+        }
+        /* Put segment endpoints in a priority queue */
+
+        const queue = new SplayTree(SweepEvent.compare);
+
+        for (let _i3 = 0, _iMax2 = multipolys.length; _i3 < _iMax2; _i3++) {
+          const sweepEvents = multipolys[_i3].getSweepEvents();
+
+          for (let _j = 0, _jMax = sweepEvents.length; _j < _jMax; _j++) {
+            queue.insert(sweepEvents[_j]);
+
+            if (queue.size > POLYGON_CLIPPING_MAX_QUEUE_SIZE) {
+              // prevents an infinite loop, an otherwise common manifestation of bugs
+              throw new Error(
+                'Infinite loop when putting segment endpoints in a priority queue ' +
+                  '(queue size too big). Please file a bug report.',
+              );
+            }
+          }
+        }
+        /* Pass the sweep line over those endpoints */
+
+        const sweepLine = new SweepLine(queue);
+        let prevQueueSize = queue.size;
+        let node = queue.pop();
+
+        while (node) {
+          const evt = node.key;
+
+          if (queue.size === prevQueueSize) {
+            // prevents an infinite loop, an otherwise common manifestation of bugs
+            const seg = evt.segment;
+            throw new Error(
+              'Unable to pop() '.concat(evt.isLeft ? 'left' : 'right', ' SweepEvent ') +
+                '['
+                  .concat(evt.point.x, ', ')
+                  .concat(evt.point.y, '] from segment #')
+                  .concat(seg.id, ' ') +
+                '['.concat(seg.leftSE.point.x, ', ').concat(seg.leftSE.point.y, '] -> ') +
+                '['
+                  .concat(seg.rightSE.point.x, ', ')
+                  .concat(seg.rightSE.point.y, '] from queue. ') +
+                'Please file a bug report.',
+            );
+          }
+
+          if (queue.size > POLYGON_CLIPPING_MAX_QUEUE_SIZE) {
+            // prevents an infinite loop, an otherwise common manifestation of bugs
+            throw new Error(
+              'Infinite loop when passing sweep line over endpoints ' +
+                '(queue size too big). Please file a bug report.',
+            );
+          }
+
+          if (sweepLine.segments.length > POLYGON_CLIPPING_MAX_SWEEPLINE_SEGMENTS) {
+            // prevents an infinite loop, an otherwise common manifestation of bugs
+            throw new Error(
+              'Infinite loop when passing sweep line over endpoints ' +
+                '(too many sweep line segments). Please file a bug report.',
+            );
+          }
+
+          const newEvents = sweepLine.process(evt);
+
+          for (let _i4 = 0, _iMax3 = newEvents.length; _i4 < _iMax3; _i4++) {
+            const _evt = newEvents[_i4];
+            if (_evt.consumedBy === undefined) queue.insert(_evt);
+          }
+
+          prevQueueSize = queue.size;
+          node = queue.pop();
+        } // free some memory we don't need anymore
+
+        rounder.reset();
+        /* Collect and compile segments we're keeping into a multipolygon */
+
+        const ringsOut = RingOut.factory(sweepLine.segments);
+        const result = new MultiPolyOut(ringsOut);
+        return result.getGeom();
+      },
+    },
+  ]);
+
+  return Operation;
+})(); // singleton available by import
+
+var operation = new Operation();
+
+const union = function union(geom) {
+  for (
+    var _len = arguments.length, moreGeoms = new Array(_len > 1 ? _len - 1 : 0), _key = 1;
+    _key < _len;
+    _key++
+  ) {
+    moreGeoms[_key - 1] = arguments[_key];
+  }
+
+  return operation.run('union', geom, moreGeoms);
+};
+
+const intersection$1 = function intersection(geom) {
+  for (
+    var _len2 = arguments.length, moreGeoms = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1;
+    _key2 < _len2;
+    _key2++
+  ) {
+    moreGeoms[_key2 - 1] = arguments[_key2];
+  }
+
+  return operation.run('intersection', geom, moreGeoms);
+};
+
+const xor = function xor(geom) {
+  for (
+    var _len3 = arguments.length, moreGeoms = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1;
+    _key3 < _len3;
+    _key3++
+  ) {
+    moreGeoms[_key3 - 1] = arguments[_key3];
+  }
+
+  return operation.run('xor', geom, moreGeoms);
+};
+
+const difference = function difference(subjectGeom) {
+  for (
+    var _len4 = arguments.length, clippingGeoms = new Array(_len4 > 1 ? _len4 - 1 : 0), _key4 = 1;
+    _key4 < _len4;
+    _key4++
+  ) {
+    clippingGeoms[_key4 - 1] = arguments[_key4];
+  }
+
+  return operation.run('difference', subjectGeom, clippingGeoms);
+};
+
+const index = {
+  union: union,
+  intersection: intersection$1,
+  xor: xor,
+  difference: difference,
+};
+
+export default index;
diff --git a/frontend/image-tool/src/package/image-editor/lib/ua.ts b/frontend/image-tool/src/package/image-editor/lib/ua.ts
new file mode 100644
index 00000000..2b4c5daf
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/lib/ua.ts
@@ -0,0 +1,17 @@
+import UAParser, { IResult } from 'ua-parser-js';
+
+export type IUserAgent = IResult & {
+  isMac: boolean;
+};
+
+const parser = new UAParser();
+let agent = parser.getResult();
+
+let osName = (agent.os.name || '').toLowerCase();
+const isMac = osName.indexOf('mac') >= 0;
+
+let userAgent = agent as IUserAgent;
+userAgent.isMac = isMac;
+
+export default userAgent;
+export { isMac };
diff --git a/frontend/image-tool/src/package/image-editor/state.ts b/frontend/image-tool/src/package/image-editor/state.ts
new file mode 100644
index 00000000..424eae2a
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/state.ts
@@ -0,0 +1,85 @@
+import { __UNSERIES__ } from '.';
+import { modes } from './configs';
+import {
+  AnnotateModeEnum,
+  DisplayModeEnum,
+  IConfig,
+  IState,
+  IToolConfig,
+  LangType,
+  LineDrawMode,
+  StatusType,
+  ToolName,
+} from './types';
+
+function getDefaultConfig(): IConfig {
+  return {
+    autoLoad: false,
+    baseFillOpacity: 0.2,
+    baseLineWidth: 0,
+    bisectrixLine: {
+      enable: false,
+      vertical: 2,
+      horizontal: 2,
+      width: 1,
+      color: '#b3e08fb3',
+    },
+    brightness: 0,
+    contrast: 0,
+    helperLine: {
+      showLine: false,
+      lineColor: '#ffffff',
+    },
+    imageSmoothing: true,
+    showAttrs: false,
+    showSize: false,
+    showClassTitle: true,
+    showClassView: false,
+    showSizeTips: true,
+    strokeWidth: 1,
+    viewType: DisplayModeEnum.MARK,
+  };
+}
+function getDefaultToolConfig(): IToolConfig {
+  return {
+    lineMode: LineDrawMode.default,
+    polyAuto: false,
+    polyAutoTm: 100,
+  };
+}
+
+export function getDefaultState(): IState {
+  return {
+    activeTool: ToolName.default,
+    annotateMode: AnnotateModeEnum.INSTANCE,
+    annotateModeList: [AnnotateModeEnum.INSTANCE],
+    blocked: false,
+    classTypes: [],
+    config: getDefaultConfig(),
+    currentClass: '',
+    currentTrack: '',
+    defaultSourceId: '-1',
+    editorMuted: false,
+    editorMutedMsg: '',
+    editorMessage: { visible: false },
+    frameIndex: 0,
+    frames: [],
+    modeConfig: modes.empty,
+    models: [],
+    modelConfig: {
+      confidence: [0.5, 1],
+      predict: true,
+      classes: {},
+      model: '',
+      loading: false,
+      code: '',
+    },
+    isSeriesFrame: false,
+    lang: LangType['en-US'],
+    sceneId: __UNSERIES__,
+    sceneIndex: 0,
+    sceneIds: [__UNSERIES__],
+    status: StatusType.Default,
+    toolConfig: getDefaultToolConfig(),
+  };
+}
diff --git a/frontend/image-tool/src/package/image-editor/types/class.ts b/frontend/image-tool/src/package/image-editor/types/class.ts
new file mode 100644
index 00000000..6d181714
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/types/class.ts
@@ -0,0 +1,40 @@
+import { AttrType, ToolType } from './enum';
+
+export interface IClassType {
+  id: string;
+  label: string;
+  name: string;
+  color: string;
+  classVersion: number;
+  attrs: IAttr[];
+  toolType: ToolType;
+  toolTypeOptions: IClassLimit;
+  modelMapClass?: string[];
+  [k: string]: any;
+}
+
+export interface IClassLimit {
+  [k: string]: any;
+}
+
+export interface IAttr {
+  id: string;
+  name: string;
+  alias: string;
+  options: IAttrOption[];
+  required: boolean;
+  type: AttrType;
+  attributeVersion?: number;
+  latexExpression?: boolean;
+  value?: any;
+}
+export interface IAttrOption {
+  id: string;
+  name: string;
+  alias: string;
+  attributes?: IAttr[];
+  value?: any;
+}
+export interface IClassOptions {
+  [k: string]: any;
+}
diff --git a/frontend/image-tool/src/package/image-editor/types/common.ts b/frontend/image-tool/src/package/image-editor/types/common.ts
new file mode 100644
index 00000000..3d1b059e
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/types/common.ts
@@ -0,0 +1,122 @@
+import {
+  AnnotateModeEnum,
+  LoadStatus,
+  ModelCodeEnum,
+  ModelTypeEnum,
+  OPType,
+  SourceType,
+} from './enum';
+
+export interface IUserDataBase {
+  id?: string;
+  annotationType?: AnnotateModeEnum;
+  trackId?: any;
+  trackName?: any;
+  sourceType?: SourceType;
+  sourceId?: string;
+  modelClass?: string;
+  classType?: string;
+  classId?: string;
+  attrs?: Record<string, any>;
+  // info
+  valid?: boolean;
+  version?: number;
+  createdBy?: any;
+  createdAt?: string;
+}
+
+export interface IUserData extends IUserDataBase {
+  [key: string]: any;
+}
+export interface IDataResource {
+  // IFileConfig
+  url: string;
+  name: string;
+  size: number;
+  deviceName: string;
+  // extends
+  time: number;
+  image?: HTMLImageElement;
+}
+export interface IModelRunningState {
+  recordId: string;
+  id: string;
+  version: string;
+  code?: ModelCodeEnum;
+  state?: LoadStatus;
+  config?: Record<string, any>;
+}
+export interface IFrame {
+  // id
+  id: string;
+  imageData?: IDataResource | undefined;
+  datasetId?: string;
+  sceneId?: string;
+  loadState: LoadStatus | '';
+  // model
+  model?: IModelRunningState;
+  // save
+  needSave?: boolean;
+  // other any
+  [k: string]: any;
+}
+/** Model */
+export interface IModel {
+  id: string;
+  name: string;
+  version: string;
+  classes: IModelClass[];
+  mapClass?: Record<string, any>;
+  code: ModelCodeEnum;
+  isInteractive: boolean;
+  type: ModelTypeEnum;
+}
+/** Model Config */
+export interface IModelConfig {
+  confidence: number[];
+  predict: boolean;
+  classes: { [key: string]: Record<string, IModelClass> };
+  model: string;
+  loading: boolean;
+  code: ModelCodeEnum | '';
+}
+export interface IModelClass {
+  code: string;
+  name: string;
+  label: string;
+  value: string;
+  selected?: boolean;
+  subClasses?: IModelClass;
+  url?: string;
+  isShow?: boolean;
+  mapClass?: string[];
+}
+export interface IHelpLine {
+  showLine: boolean;
+  lineColor: string;
+}
+export interface IBisectrixLine {
+  enable?: boolean;
+  horizontal: number;
+  vertical: number;
+  width: number;
+  color: string;
+}
+export interface IModeConfig<U extends string = string, A extends string = string> {
+  name: string;
+  op: OPType;
+  ui: Record<U, boolean>;
+  actions: Record<A, boolean>;
+}
+export interface ILoadFrameDataOptions {
+  source?: Boolean;
+  resource?: Boolean;
+}
+export interface IObjectSource {
+  name: string;
+  sourceId: string;
+  sourceType: SourceType;
+  frameId: string;
+  modelId?: string;
+  modelName?: string;
+}
diff --git a/frontend/image-tool/src/package/image-editor/types/enum.ts b/frontend/image-tool/src/package/image-editor/types/enum.ts
new file mode 100644
index 00000000..9c289467
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/types/enum.ts
@@ -0,0 +1,106 @@
+export enum LangType {
+  'zh-CN' = 'zh-CN',
+  'en-US' = 'en-US',
+  'ko-KR' = 'ko-KR',
+}
+export enum OPType {
+  EDIT = 'edit',
+  VIEW = 'view',
+}
+export enum ToolType {
+  BOUNDING_BOX = 'BOUNDING_BOX',
+  RECTANGLE = 'RECTANGLE',
+  POLYGON = 'POLYGON',
+  POLYLINE = 'POLYLINE',
+  KEY_POINT = 'KEY_POINT',
+}
+export enum ToolName {
+  default = '',
+  edit = 'edit', // edit tool, ToolType: none
+  // instance
+  rect = 'rect', // rect tool, ToolType.BOUNDING_BOX
+  polygon = 'polygon', // polygon tool, ToolType.POLYGON
+  polyline = 'polyline', // polyline tool, ToolType.POLYLINE
+  'key-point' = 'key-point', // key-point tool, ToolType.KEY_POINT
+  // model
+  model = 'model',
+}
+export enum AnnotateModeEnum {
+  INSTANCE = 'INSTANCE',
+  SEGMENTATION = 'SEGMENTATION',
+}
+export enum DataTypeEnum {
+  SINGLE_DATA = 'SINGLE_DATA',
+  FRAME_SERIES = 'FRAME_SERIES',
+  SCENE = 'SCENE',
+}
+export enum LoadStatus {
+  DEFAULT = '',
+  LOADING = 'loading',
+  COMPLETE = 'complete',
+  ERROR = 'error',
+}
+export enum ModelCodeEnum {
+  IMAGE_DETECTION = 'IMAGE_DETECTION',
+}
+
+export enum ModelTypeEnum {
+  DETECTION = 'DETECTION',
+  TRACKING = 'TRACKING',
+  INTERACTIVE = 'INTERACTIVE',
+}
+export enum AttrType {
+  RADIO = 'RADIO',
+  MULTI_SELECTION = 'MULTI_SELECTION',
+  DROPDOWN = 'DROPDOWN',
+  TEXT = 'TEXT',
+  RANK = 'RANK',
+}
+export enum StatusType {
+  Default = '',
+  Create = 'Create',
+  Loading = 'Loading',
+  Modal = 'Modal',
+  Confirm = 'Confirm',
+  Play = 'Play',
+  Stop = 'Stop',
+}
+export enum DisplayModeEnum {
+  MASK = 'mask',
+  MARK = 'mark',
+}
+export enum LineDrawMode {
+  default = '',
+  horizontal = 'HORIZONTAL',
+  vertical = 'VERTICAL',
+}
+export enum ToolAction {
+  del = 'del',
+  esc = 'esc',
+  stop = 'stop-current',
+  undo = 'undo',
+}
+export enum Const {
+  Fixed = 'Fixed',
+  Dynamic = 'Dynamic',
+  Frozen = 'Frozen',
+  Standard = 'Standard',
+  True_Value = 'True_value',
+  Predicted = 'Predicted',
+  Copied = 'Copied',
+}
+
+export enum MsgType {
+  error = 'error',
+  warning = 'warning',
+  success = 'success',
+  info = 'info',
+}
+export enum SourceType {
+  DATA_FLOW = 'DATA_FLOW',
+  MODEL = 'MODEL',
+}
+export enum ResourceLoadMode {
+  near = 'near', // load last and next frame data
+  all = 'all', // load all frame data
+}
diff --git a/frontend/image-tool/src/package/image-editor/types/index.ts b/frontend/image-tool/src/package/image-editor/types/index.ts
new file mode 100644
index 00000000..046302a2
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/types/index.ts
@@ -0,0 +1,9 @@
+export * from './tool';
+export * from './state';
+export * from './enum';
+export * from './common';
+export * from './type';
+export * from './class';
+
+export * from '../ImageView/type';
+export * from '../common/HotkeyManager/type';
diff --git a/frontend/image-tool/src/package/image-editor/types/state.ts b/frontend/image-tool/src/package/image-editor/types/state.ts
new file mode 100644
index 00000000..29216064
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/types/state.ts
@@ -0,0 +1,81 @@
+import { IClassType } from './class';
+import { IBisectrixLine, IFrame, IHelpLine, IModeConfig, IModel, IModelConfig } from './common';
+import {
+  AnnotateModeEnum,
+  DisplayModeEnum,
+  LangType,
+  LineDrawMode,
+  StatusType,
+  ToolName,
+} from './enum';
+
+export interface IState {
+  // global state
+  lang: LangType;
+  currentClass: string;
+  currentTrack: string;
+  // scene && frame state
+  isSeriesFrame: boolean;
+  sceneIds: string[];
+  sceneId: string;
+  sceneIndex: number;
+  frames: IFrame[];
+  frameIndex: number;
+  defaultSourceId: string;
+  // class
+  classTypes: IClassType[];
+  // block msg
+  blocked: boolean;
+  editorMuted: boolean;
+  editorMutedMsg?: string;
+  editorMutedData?: IMuted;
+  editorMessage: IMessage;
+  // model
+  models: IModel[];
+  modelConfig: IModelConfig;
+  // status
+  config: IConfig;
+  status: StatusType;
+  modeConfig: IModeConfig;
+  // tool
+  activeTool: ToolName;
+  toolConfig: IToolConfig;
+  annotateMode: AnnotateModeEnum;
+  annotateModeList: AnnotateModeEnum[];
+}
+
+export interface IConfig {
+  autoLoad: boolean; // is load auto
+  brightness: number;
+  contrast: number;
+  imageSmoothing: boolean;
+  helperLine: IHelpLine;
+  bisectrixLine: IBisectrixLine;
+  viewType: DisplayModeEnum;
+  // show
+  showClassView: boolean;
+  showClassTitle: boolean;
+  showSize: boolean;
+  showAttrs: boolean;
+  showSizeTips: boolean;
+
+  // other
+  strokeWidth: number;
+  baseLineWidth: number;
+  baseFillOpacity: number;
+}
+export interface IToolConfig {
+  polyAuto: boolean;
+  polyAutoTm: number;
+  lineMode: LineDrawMode;
+}
+export interface IMuted {
+  message?: string;
+  showBtn?: boolean;
+  btnText?: string;
+  btnCallback?: any;
+}
+export interface IMessage {
+  visible: boolean;
+  messgae?: string;
+}
diff --git a/frontend/image-tool/src/package/image-editor/types/tool.ts b/frontend/image-tool/src/package/image-editor/types/tool.ts
new file mode 100644
index 00000000..9c595d59
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/types/tool.ts
@@ -0,0 +1,17 @@
+import { Component } from 'vue';
+import { ToolName } from './enum';
+import Editor from '../Editor';
+
+export interface IToolItemConfig {
+  action: ToolName;
+  name: string;
+  hotkey: number | string;
+  title: string;
+  order?: number;
+  extraClass?: boolean;
+  extra?: (editor: Editor) => Component;
+  hasMsg?: (editor: Editor) => boolean;
+  getIcon: (editor?: Editor) => ToolName | 'loading' | '';
+  isDisplay: (editor: Editor) => boolean;
+  isActive: (editor: Editor) => boolean;
+}
diff --git a/frontend/image-tool/src/package/image-editor/types/type.ts b/frontend/image-tool/src/package/image-editor/types/type.ts
new file mode 100644
index 00000000..96fbf255
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/types/type.ts
@@ -0,0 +1,36 @@
+import { ButtonProps } from 'ant-design-vue';
+import { MsgType } from './enum';
+
+export interface IModalOption {
+  [x: string]: any;
+  title: string;
+  width?: number;
+  data?: any;
+  closable?: boolean;
+}
+export interface IConfirmOption {
+  title: string;
+  subTitle: string;
+  okText?: string;
+  cancelText?: string;
+  okDanger?: boolean;
+  cancelButtonProps?: ButtonProps;
+}
+export interface ILoadingOption {
+  type: 'loading' | 'error';
+  content: string;
+}
+export type RegisterFn = (name: string, modal: any) => void;
+export type ModalFn = (name: string | false, option?: IModalOption) => Promise<any>;
+export type MsgFn = (type: MsgType, msg: string, config?: Object) => void;
+export type ConfirmFn = (config: IConfirmOption) => Promise<any>;
+export type LoadingFn = (config: ILoadingOption | boolean) => void;
+
+export interface I18n {
+  messages: Record<string, Record<string, any>>;
+  lang: (
+    module: string | Record<string, any>,
+    name: string,
+    args?: any[] | Record<string, any>,
+  ) => string;
+}
diff --git a/frontend/image-tool/src/package/image-editor/utils/clip.ts b/frontend/image-tool/src/package/image-editor/utils/clip.ts
new file mode 100644
index 00000000..71187734
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/utils/clip.ts
@@ -0,0 +1,276 @@
+// import polygonClip from 'polygon-clipping';
+// @ts-ignore
+import polygonClip from '../lib/polygon-clipping';
+import { Polygon } from '../ImageView/shape';
+import { Vector2, IPolygonInnerConfig } from '../types';
+import { countPointsOrder, getArea } from './common';
+import { getShapeRealPoint } from './shape';
+
+export function polygon2GeoPointsArray(polygon: Polygon) {
+  const { points, innerPoints, x, y } = polygon.attrs;
+  const toFixed = (n: any) => {
+    return +Number(n).toFixed(8);
+  };
+  const geom: polygonClip.Polygon = [];
+  const pointsArray = points.map((p) => [toFixed(p.x + x), toFixed(p.y + y)]);
+  geom.push(pointsArray);
+
+  innerPoints.forEach((e) => {
+    const inPointsArr = e.points.map((p) => [toFixed(p.x + x), toFixed(p.y + y)]);
+    if (inPointsArr.length > 0) {
+      geom.push(inPointsArr);
+    }
+  });
+  return geom;
+}
+export function polygon2PointsVector(polygon: Polygon) {
+  const { points, innerPoints, x, y } = polygon.attrs;
+
+  const geoArray: { points: Vector2[]; innerPoints?: IPolygonInnerConfig[] } = {
+    points: [] as Vector2[],
+  };
+  const pointsArray = [] as any[];
+  points.forEach((p) => {
+    pointsArray.push({ x: p.x + x, y: p.y + y });
+  });
+  geoArray.points = pointsArray;
+
+  if (innerPoints && innerPoints.length > 0) {
+    const innerPointsArray = [] as IPolygonInnerConfig[];
+    innerPoints.forEach((config) => {
+      const inners: IPolygonInnerConfig = { points: [] as Vector2[] };
+      config.points.forEach((p) => {
+        inners.points.push({ x: p.x + x, y: p.y + y });
+      });
+      innerPointsArray.push(inners);
+    });
+    geoArray.innerPoints = innerPointsArray;
+  }
+
+  return geoArray;
+}
+
+export function geoPointsArray2Polygon(pointsArray: number[][][], originPoints?: Vector2[]) {
+  let points = [] as Vector2[];
+  const innerPoints = [] as IPolygonInnerConfig[];
+  const mapKey = (p: number[]) => `${p[0].toFixed(4)}-${p[1].toFixed(4)}`;
+
+  pointsArray.forEach((_pointsArray, index) => {
+    const pointsMap: Record<string, Vector2> = {};
+    if (index === 0) {
+      _pointsArray.forEach((p) => {
+        const p2v = { x: p[0], y: p[1] };
+        if (!pointsMap[mapKey(p)]) {
+          pointsMap[mapKey(p)] = p2v;
+          points.push(p2v);
+        }
+      });
+    } else {
+      const inner = [] as Vector2[];
+      _pointsArray.forEach((p) => {
+        const p2v = { x: p[0], y: p[1] };
+        if (!pointsMap[mapKey(p)]) {
+          pointsMap[mapKey(p)] = p2v;
+          inner.push(p2v);
+        }
+      });
+      if (inner.length > 2) innerPoints.push({ points: inner });
+    }
+  });
+  if (points.length > 2) return new Polygon({ points, innerPoints });
+  return null;
+}
+
+export function polygonToClip(cliped: Polygon, clip: Polygon) {
+  const newShapes: Polygon[] = [];
+  const clipedPoints: any[] = polygon2GeoPointsArray(cliped);
+  const clipPoints: any[] = polygon2GeoPointsArray(clip);
+  const results = polygonClip.difference(clipedPoints, clipPoints);
+  results.forEach((result: any) => {
+    const poly = geoPointsArray2Polygon(result as any, getShapeRealPoint(cliped, undefined, true));
+    poly && newShapes.push(poly);
+  });
+  return newShapes;
+}
+export function polygonToClips(cliped: Polygon, clips: Polygon[]) {
+  const newShapes: Polygon[] = [];
+  const clipedPoints: any[] = polygon2GeoPointsArray(cliped);
+  const clipPoints: any[] = [];
+  clips.forEach((e) => {
+    clipPoints.push(polygon2GeoPointsArray(e));
+  });
+  const results = polygonClip.difference(clipedPoints, ...clipPoints);
+  results.forEach((result: any) => {
+    const poly = geoPointsArray2Polygon(result as any, getShapeRealPoint(cliped, undefined, true));
+    poly && newShapes.push(poly);
+  });
+  return newShapes;
+}
+export function polygonsHollow(hollowedShape: Polygon, holes: Polygon[]) {
+  const hollowedOrder = countPointsOrder(hollowedShape.attrs.points);
+  const holesPoints = [] as IPolygonInnerConfig[];
+  holes.forEach((holeShape) => {
+    let nowPoints = polygon2PointsVector(holeShape).points;
+    const polygonOrder = countPointsOrder(holeShape.attrs.points);
+    if (hollowedOrder === polygonOrder) {
+      nowPoints = nowPoints.reverse();
+    }
+    holesPoints.push({ points: nowPoints });
+  });
+  return holesPoints;
+}
+
+export function pointIsInPolygon(p: Vector2, polygon: Vector2[]) {
+  let minX = polygon[0].x,
+    maxX = polygon[0].x;
+  let minY = polygon[0].y,
+    maxY = polygon[0].y;
+  for (let n = 1; n < polygon.length; n++) {
+    const q = polygon[n];
+    minX = Math.min(q.x, minX);
+    maxX = Math.max(q.x, maxX);
+    minY = Math.min(q.y, minY);
+    maxY = Math.max(q.y, maxY);
+  }
+
+  if (p.x < minX || p.x > maxX || p.y < minY || p.y > maxY) {
+    return false;
+  }
+
+  let isInside = false;
+  let i = 0,
+    j = polygon.length - 1;
+  for (; i < polygon.length; j = i++) {
+    if (
+      polygon[i].y > p.y != polygon[j].y > p.y &&
+      p.x <
+        ((polygon[j].x - polygon[i].x) * (p.y - polygon[i].y)) / (polygon[j].y - polygon[i].y) +
+          polygon[i].x
+    ) {
+      isInside = !isInside;
+    }
+  }
+
+  return isInside;
+}
+
+export const POSTYPE = {
+  intersect: 'intersect',
+  disjoint: 'disjoint',
+  contain: 'contain',
+  contain_1: 'contain_1',
+};
+export function polygonContains(source: Polygon, target: Polygon) {
+  const sourcePoints = polygon2PointsVector(source);
+  const targetPoints = polygon2PointsVector(target).points;
+  return checkPolygonHollowCondition(sourcePoints, targetPoints);
+}
+export function checkPolygonInnerPoints(shape: Polygon): boolean {
+  const realPoints = polygon2PointsVector(shape);
+  const innerPoints = realPoints.innerPoints;
+  const innerLen = innerPoints?.length || 0;
+  if (!innerPoints || innerLen === 0) return true;
+  for (let i = 0; i < innerLen; i++) {
+    if (!checkPolygonHollowCondition(realPoints, innerPoints[i].points, i)) return false;
+  }
+  return true;
+}
+/**
+ * @param polgon
+ * @param hole
+ * @param holeIndex
+ */
+export function checkPolygonHollowCondition(
+  polgon: {
+    points: Vector2[];
+    innerPoints?: IPolygonInnerConfig[];
+  },
+  hole: Vector2[],
+  holeIndex?: number,
+): boolean {
+  const holeArea = getArea(hole);
+  if (getArea(polgon.points) <= holeArea) return false;
+  for (let i = 0; i < hole.length; i++) {
+    if (!pointIsInPolygon(hole[i], polgon.points)) return false;
+  }
+  const sourceRelation = shapePositionRelation(polgon.points, hole);
+  if (sourceRelation !== POSTYPE.contain) return false;
+  let allDisJoint: boolean = true;
+  if (polgon.innerPoints && polgon.innerPoints.length > 0) {
+    polgon.innerPoints.forEach((ring, index) => {
+      if (index === holeIndex) return;
+      const args = getArea(ring.points) > holeArea ? [ring.points, hole] : [hole, ring.points];
+      if (shapePositionRelation(args[0], args[1]) !== POSTYPE.disjoint) {
+        allDisJoint = false;
+        return;
+      }
+    });
+  }
+  return allDisJoint;
+}
+export function shapePositionRelation(points1: Vector2[], points2: Vector2[]): string {
+  const lines1 = getEdgesByPoints(points1);
+  const lines2 = getEdgesByPoints(points2);
+  let linesIntersect: boolean = false;
+  lines2.forEach((line2: Vector2[]) => {
+    lines1.forEach((line1: Vector2[]) => {
+      if (checkLinesIntersect(line1, line2)) {
+        linesIntersect = true;
+        return;
+      }
+    });
+    if (linesIntersect) return;
+  });
+  if (linesIntersect) return POSTYPE.intersect;
+  let allIn_p1 = true;
+  for (let i = 0; i < points2.length; i++) {
+    const point_in_p1 = pointIsInPolygon(points2[i], points1);
+    if (!point_in_p1) {
+      allIn_p1 = false;
+      break;
+    }
+  }
+  if (allIn_p1) return POSTYPE.contain;
+  let allIn_p2 = true;
+  for (let i = 0; i < points1.length; i++) {
+    const point_in_p2 = pointIsInPolygon(points1[i], points2);
+    if (!point_in_p2) {
+      allIn_p2 = false;
+      break;
+    }
+  }
+  if (allIn_p2) return POSTYPE.contain_1;
+  return POSTYPE.disjoint;
+}
+export function getEdgesByPoints(points: Vector2[]): Vector2[][] {
+  const len = points.length;
+  const arr = [];
+  for (let i = 0; i < len; i++) {
+    if (i === len - 1) arr.push([points[i], points[0]]);
+    else arr.push([points[i], points[i + 1]]);
+  }
+  return arr;
+}
+export function checkLinesIntersect(L1: Vector2[], L2: Vector2[]): boolean {
+  if (L1.length === 0 || L2.length === 0) return false;
+  if (Math.max(L1[0].x, L1[1].x) < Math.min(L2[0].x, L2[1].x)) return false;
+  if (Math.max(L2[0].x, L2[1].x) < Math.min(L1[0].x, L1[1].x)) return false;
+  if (Math.max(L1[0].y, L1[1].y) < Math.min(L2[0].y, L2[1].y)) return false;
+  if (Math.max(L2[0].y, L2[1].y) < Math.min(L1[0].y, L1[1].y)) return false;
+  function mult(x1: number, y1: number, x2: number, y2: number, x3: number, y3: number) {
+    return (x1 - x3) * (y2 - y3) - (x2 - x3) * (y1 - y3);
+  }
+  if (
+    mult(L2[0].x, L2[0].y, L1[1].x, L1[1].y, L1[0].x, L1[0].y) *
+      mult(L1[1].x, L1[1].y, L2[1].x, L2[1].y, L1[0].x, L1[0].y) <
+    0
+  )
+    return false;
+  if (
+    mult(L1[0].x, L1[0].y, L2[1].x, L2[1].y, L2[0].x, L2[0].y) *
+      mult(L2[1].x, L2[1].y, L1[1].x, L1[1].y, L2[0].x, L2[0].y) <
+    0
+  )
+    return false;
+  return true;
+}
diff --git a/frontend/image-tool/src/package/image-editor/utils/common.ts b/frontend/image-tool/src/package/image-editor/utils/common.ts
new file mode 100644
index 00000000..246760fb
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/utils/common.ts
@@ -0,0 +1,149 @@
+/**
+ * mathematical formulas
+ */
+
+import { IPolygonInnerConfig, IRectOption, Vector2 } from '../ImageView/type';
+
+export function getDistance(p0: Vector2, p1: Vector2, zoom: number = 1) {
+  const dis = Math.sqrt(Math.pow(p0.x - p1.x, 2) + Math.pow(p0.y - p1.y, 2));
+  return dis / zoom;
+}
+
+export function getLineLength(points: Vector2[], zoom: number = 1) {
+  let ret = 0;
+  const length = points.length;
+  if (length < 2) return ret;
+  for (let i = 1; i < length; i++) {
+    ret = ret + getDistance(points[i - 1], points[i], zoom);
+  }
+  return ret;
+}
+/**
+ * Calculate the area of a closed shape
+ * @param points
+ * @param inners
+ * @returns number
+ */
+export function getArea(points: Vector2[], inners?: IPolygonInnerConfig[]) {
+  const l = points.length;
+  let area = 0;
+  points = points.concat(points[0]);
+  let s = 0;
+  for (let i = 0; i < l; i++) {
+    s += points[i].x * points[i + 1].y - points[i].y * points[i + 1].x;
+  }
+  area = Math.abs(s / 2);
+  if (inners && inners.length > 0) {
+    let innerArea = 0;
+    inners.forEach((innerPoints) => {
+      innerArea += getArea(innerPoints.points);
+    });
+    area -= innerArea;
+  }
+  return area;
+}
+// Calculation vector modulus
+export function getMinVectorIndex(p: Vector2, points: Vector2[]) {
+  let minDis = Infinity;
+  let minIndex = -1;
+  points.forEach((e, index) => {
+    const dirx = e.x - p.x;
+    const diry = e.y - p.y;
+    const dis = Math.sqrt(dirx * dirx + diry * diry);
+    if (dis < minDis) {
+      minDis = dis;
+      minIndex = index;
+    }
+  });
+  return minIndex;
+}
+// [0, 2π] => [0, 360]
+export function rad2deg(ra: number) {
+  return ra * (180 / Math.PI);
+}
+// [0, 360] => [0, 2π]
+export function deg2radian(deg: number) {
+  return deg * (Math.PI / 180);
+}
+// Calculate the coordinates of a point rotating a certain angle around another point
+export function countTransformPoint(center: Vector2, point: Vector2, angle: number): Vector2 {
+  const dx = point.x - center.x;
+  const dy = point.y - center.y;
+  const r = deg2radian(angle);
+  const x = dx * Math.cos(r) - dy * Math.sin(r) + center.x;
+  const y = dx * Math.sin(r) + dy * Math.cos(r) + center.y;
+  return { x, y };
+}
+// vector rad
+export function computeDegree(point1: Vector2, point2?: Vector2) {
+  let x: number;
+  let y: number;
+  if (point2) {
+    x = point2.x - point1.x;
+    y = point2.y - point1.y;
+  } else {
+    x = point1.x;
+    y = point1.y;
+  }
+  const angel = Math.atan2(-y, -x) + Math.PI;
+  return ((angel / Math.PI) * 180) % 360;
+}
+// b-box
+export function getPointsBoundRect(points: Vector2[]): IRectOption {
+  if (points.length === 0) return { x: 0, y: 0, width: 0, height: 0 };
+
+  let minX = points[0].x,
+    maxX = points[0].x;
+  let minY = points[0].y,
+    maxY = points[0].y;
+  for (let n = 1; n < points.length; n++) {
+    const q = points[n];
+    minX = Math.min(q.x, minX);
+    maxX = Math.max(q.x, maxX);
+    minY = Math.min(q.y, minY);
+    maxY = Math.max(q.y, maxY);
+  }
+
+  return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+}
+
+export function getPointOnLine(relativePoint: Vector2, startPoint: Vector2, endPoint: Vector2) {
+  const dx = endPoint.x - startPoint.x;
+  if (dx == 0) {
+    return {
+      x: startPoint.x,
+      y: relativePoint.y,
+    };
+  }
+  const A = (endPoint.y - startPoint.y) / dx;
+  const B = endPoint.y - A * endPoint.x;
+  const m = relativePoint.x + A * relativePoint.y;
+  const x = (m - A * B) / (A * A + 1);
+  const y = A * x + B;
+  return {
+    x: x,
+    y: y,
+  };
+}
+// 1 clockwise; -1 anticlockwise
+export function countPointsOrder(points: Vector2[]) {
+  let maxXindex = 0;
+  let maxX = 0;
+  points.forEach((p, index) => {
+    if (p.x > maxX) {
+      maxX = p.x;
+      maxXindex = index;
+    }
+  });
+  const index0 = (maxXindex === 0 ? points.length : maxXindex) - 1;
+  const index1 = maxXindex === points.length - 1 ? 0 : maxXindex + 1;
+  const p0 = points[index0];
+  const p1 = points[maxXindex];
+  const p2 = points[index1];
+  const crossResult = (p1.x - p0.x) * (p2.y - p1.y) - (p1.y - p0.y) * (p2.x - p1.x);
+  if (crossResult < 0) return -1;
+  else if (crossResult > 0) return 1;
+  else if (p2.y > p1.y) return 1;
+  else if (p2.y < p1.y) return -1;
+  else return 1;
+}
diff --git a/frontend/image-tool/src/package/image-editor/utils/data.ts b/frontend/image-tool/src/package/image-editor/utils/data.ts
new file mode 100644
index 00000000..3f2c2149
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/utils/data.ts
@@ -0,0 +1,92 @@
+import { cloneDeep } from 'lodash';
+import Editor from '../Editor';
+import { AnnotateObject, IFrame, IUserData, Const, ITransform } from '../types';
+
+const userdataKeys = ['classId', 'resultType', 'resultStatus', 'pointsLimit'];
+export function copyUserData(userData: Partial<IUserData> = {}, attrs = userdataKeys) {
+  const newData = pickAttrs(userData, attrs) as IUserData;
+  newData.attrs = JSON.parse(JSON.stringify(userData.attrs || {}));
+  return newData;
+}
+const attrsKeys = ['x', 'y', 'rotation', 'width', 'height', 'points', 'innerPoints'];
+export function copyAttrs(attrs: Record<string, any> = {}, keys = attrsKeys) {
+  const newData: Record<string, any> = {};
+  keys.forEach((key) => {
+    if (attrs[key] !== undefined) newData[key] = cloneDeep(attrs[key]);
+  });
+  return newData;
+}
+export function pickAttrs(obj: any, attrs: string[]) {
+  const newObj: any = {};
+  attrs.forEach((attr) => {
+    newObj[attr] = cloneDeep(obj[attr]);
+  });
+  return newObj;
+}
+
+export function copyData(
+  editor: Editor,
+  copyId: string,
+  toIds: string[],
+  annotations: AnnotateObject[],
+) {
+  const updateDatas = { objects: [], data: [] } as { objects: AnnotateObject[]; data: IUserData[] };
+  const addDatas = [] as { objects: AnnotateObject[]; frame: IFrame }[];
+  const updateTrans = { objects: [], transforms: [] } as {
+    objects: AnnotateObject[];
+    transforms: ITransform[];
+  };
+
+  toIds.forEach((id, index) => {
+    if (id === copyId) return;
+
+    const frame = editor.getFrame(id);
+    frame.needSave = true;
+    const oldObjects = editor.dataManager.getFrameRoot(id)?.allObjects || [];
+    const oldMap = {} as Record<string, AnnotateObject>;
+    oldObjects.forEach((e: AnnotateObject) => {
+      oldMap[e.userData.trackId] = e;
+    });
+
+    const addOption = { objects: [], frame: frame, groupMap: new Map() } as {
+      objects: AnnotateObject[];
+      frame: IFrame;
+      groupMap: Map<string, any>;
+    };
+
+    annotations.forEach((annotate) => {
+      const userData = annotate.userData as Required<IUserData>;
+      const object = oldMap[userData.trackId];
+
+      if (object) {
+        const updateData = copyUserData(annotate.userData) as IUserData;
+        updateData.resultStatus = Const.Copied;
+
+        updateDatas.objects.push(object);
+        updateDatas.data.push(updateData);
+
+        const copyedAttrs = copyAttrs(annotate.attrs);
+        updateTrans.objects.push(object);
+        updateTrans.transforms.push(copyedAttrs);
+      } else {
+        const newObject = annotate.cloneThisShape();
+        newObject.userData.resultStatus = Const.Copied;
+        addOption.objects.push(newObject);
+      }
+    });
+
+    if (addOption.objects.length > 0) addDatas.push(addOption);
+  });
+
+  editor.cmdManager.withGroup(() => {
+    if (addDatas.length > 0) {
+      editor.cmdManager.execute('add-object', addDatas);
+    }
+    if (updateDatas.objects.length > 0) {
+      editor.cmdManager.execute('update-user-data', updateDatas);
+    }
+    if (updateTrans.objects.length > 0) {
+      editor.cmdManager.execute('update-transform', updateTrans);
+    }
+  });
+}
diff --git a/frontend/image-tool/src/package/image-editor/utils/dom.ts b/frontend/image-tool/src/package/image-editor/utils/dom.ts
new file mode 100644
index 00000000..21a34795
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/utils/dom.ts
@@ -0,0 +1,12 @@
+export function disableContextMenu(dom: HTMLCanvasElement) {
+  dom.addEventListener('contextmenu', oncontextmenu, true);
+  dom.addEventListener('wheel', oncontextmenu, true);
+  function oncontextmenu(e: Event) {
+    e.preventDefault();
+  }
+}
+
+export function elementBlur(dom?: HTMLElement) {
+  dom = dom || (document.activeElement as HTMLElement);
+  dom !== document.body && dom?.blur?.();
+}
diff --git a/frontend/image-tool/src/package/image-editor/utils/i18n.ts b/frontend/image-tool/src/package/image-editor/utils/i18n.ts
new file mode 100644
index 00000000..a7a33f8a
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/utils/i18n.ts
@@ -0,0 +1,34 @@
+import Editor from '../Editor';
+import { isString } from 'lodash';
+import { template } from './string';
+
+export function initI18n(editor: Editor) {
+  // default i18n
+  const lang = (
+    module: string | Record<string, any>,
+    name: string,
+    args?: any[] | Record<string, any>,
+  ) => {
+    const { lang } = editor.state;
+    const i18n = editor.i18n;
+    const moduleLang = isString(module)
+      ? i18n.messages[lang] || i18n.messages.default || undefined
+      : module;
+
+    if (moduleLang && moduleLang[name]) {
+      const data = moduleLang[name];
+      if (args) {
+        return template(data, args);
+      }
+      return data;
+    } else {
+      return '';
+    }
+  };
+
+  editor.i18n = {
+    messages: {},
+    lang,
+    // t: () => '',
+  };
+}
diff --git a/frontend/image-tool/src/package/image-editor/utils/index.ts b/frontend/image-tool/src/package/image-editor/utils/index.ts
new file mode 100644
index 00000000..7a429f57
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/utils/index.ts
@@ -0,0 +1,7 @@
+export * from './dom';
+export * from './common';
+export * from './shape';
+export * from './string';
+export * from './clip';
+export * from './i18n';
+export * from './data';
diff --git a/frontend/image-tool/src/package/image-editor/utils/shape.ts b/frontend/image-tool/src/package/image-editor/utils/shape.ts
new file mode 100644
index 00000000..81ea6154
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/utils/shape.ts
@@ -0,0 +1,68 @@
+import { Rect } from '../ImageView/shape';
+import { Vector2, IRectOption, AnnotateObject } from '../ImageView/type';
+import { computeDegree, countTransformPoint } from './common';
+
+export function getRectSide(rect: IRectOption) {
+  const { x, y, width, height } = rect;
+  const left = x;
+  const right = x + width;
+  const top = y;
+  const bottom = y + height;
+  return { left, right, top, bottom };
+}
+// return [leftTop, rightTop, rightBottom, leftBottom]
+export function getRotatedRectPoints(rect: Rect) {
+  const center = rect.rotationCenter;
+  const r = rect.rotation() || 0;
+  return getRectPointsWithRotation(rect.attrs, r, center);
+}
+export function getRectPointsWithRotation(rect: IRectOption, r: number, center?: Vector2) {
+  const { x, y } = rect;
+  center = center || { x, y };
+  const { left, right, top, bottom } = getRectSide(rect);
+  const topleft = countTransformPoint(center, { x: left, y: top }, r);
+  const topright = countTransformPoint(center, { x: right, y: top }, r);
+  const bottomright = countTransformPoint(center, { x: right, y: bottom }, r);
+  const bottomleft = countTransformPoint(center, { x: left, y: bottom }, r);
+  return [topleft, topright, bottomright, bottomleft];
+}
+export function getRectFromPoints(points: [Vector2, Vector2]) {
+  const minX = Math.min(points[0].x, points[1].x);
+  const minY = Math.min(points[0].y, points[1].y);
+  return {
+    x: minX,
+    y: minY,
+    width: Math.abs(points[0].x - points[1].x),
+    height: Math.abs(points[0].y - points[1].y),
+    rotation: 0,
+  };
+}
+export function getRectFromPointsWithRotation(points: Vector2[]) {
+  if (points.length === 0) return { x: 0, y: 0, width: 0, height: 0, rotation: 0 };
+  if (points.length === 4) {
+    const x = points[0].x;
+    const y = points[0].y;
+    let dx = points[1].x - points[0].x;
+    let dy = points[1].y - points[0].y;
+    const width = Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2));
+    dx = points[3].x - points[0].x;
+    dy = points[3].y - points[0].y;
+    const height = Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2));
+    const rotation = computeDegree(points[0], points[1]);
+    return { x, y, width, height, rotation };
+  }
+  return getRectFromPoints([points[0], points[points.length - 1]]);
+}
+// Coordinate Mapping
+export function getShapeRealPoint(
+  object: AnnotateObject,
+  points?: Vector2[],
+  self: boolean = true,
+) {
+  const nowPoints: Vector2[] = points || object.attrs.points;
+  if (!nowPoints || nowPoints.length === 0) return [];
+  const offset = self ? { x: object.attrs.x, y: object.attrs.y } : { x: 0, y: 0 };
+  return nowPoints.map((p) => {
+    return { x: p.x + offset.x, y: p.y + offset.y, attr: p.attr } as Vector2;
+  });
+}
diff --git a/frontend/image-tool/src/package/image-editor/utils/string.ts b/frontend/image-tool/src/package/image-editor/utils/string.ts
new file mode 100644
index 00000000..c29b78d9
--- /dev/null
+++ b/frontend/image-tool/src/package/image-editor/utils/string.ts
@@ -0,0 +1,25 @@
+/**
+ * string
+ */
+import { v4 as uuid } from 'uuid';
+import { nanoid } from 'nanoid';
+
+// uuid
+export function createUUID() {
+  return uuid();
+}
+export function createTrackId() {
+  return nanoid(16);
+}
+// formatId
+export function formatId(...args: string[]) {
+  return args.join('##');
+}
+// 'template { name }ddd'
+// 'template { 0 }ddd'
+export function template(str: string, args: Record<string, any> = {}) {
+  const reg = /\{\s*(\w+)\s*\}/g;
+  return str.replace(reg, (word: string, name: string) => {
+    return args[name] || '';
+  });
+}
diff --git a/frontend/image-tool/src/package/image-ui/components/EditClass/components/AttrValue.vue b/frontend/image-tool/src/package/image-ui/components/EditClass/components/AttrValue.vue
new file mode 100644
index 00000000..8d874a94
--- /dev/null
+++ b/frontend/image-tool/src/package/image-ui/components/EditClass/components/AttrValue.vue
@@ -0,0 +1,157 @@
+<template>
+  <div class="attr-item-content" :sign-attr-id="item.id">
+    <div class="name" :span="10">
+      {{ (props.preName ? props.preName + ' & ' : '') + item.name }}
+      <span v-if="item.type === AttrType.RADIO || item.type === AttrType.MULTI_SELECTION">
+        {{ item.type === AttrType.RADIO ? '(Radio)' : '(CheckBox)' }}
+      </span>
+      <span v-if="item.latexExpression">
+        {{ '(LaTeX)' }}
+      </span>
+    </div>
+    <div class="value" :span="14">
+      <Radio
+        :disabled="props.isDisable"
+        :name="item.id"
+        v-model:value="item.value"
+        @change="onAttChange"
+        :options="transformOptions(item.options)"
+        v-if="item.type === AttrType.RADIO"
+      />
+      <Select
+        :disabled="props.isDisable"
+        :name="item.id"
+        v-model:value="item.value"
+        @change="onAttChange"
+        :options="transformOptions(item.options)"
+        v-else-if="item.type === AttrType.DROPDOWN"
+      />
+      <Text
+        :disabled="props.isDisable"
+        :name="item.id"
+        v-model:value="item.value"
+        @change="onAttChange"
+        v-else-if="item.type === AttrType.TEXT"
+      />
+      <Check
+        :disabled="props.isDisable"
+        :name="item.id"
+        v-model:value="item.value"
+        @change="onAttChange"
+        :options="transformOptions(item.options)"
+        v-else-if="item.type === AttrType.MULTI_SELECTION"
+      />
+    </div>
+  </div>
+
+  <div v-if="curOptions && curOptions.length > 0">
+    <div class="attr-extra" v-for="option in curOptions" :key="option.id">
+      <div class="attr-item" v-for="optionAttr in option.attributes" :key="optionAttr.id">
+        <AttrValue
+          @change="onOptionAttChange"
+          :item="(optionAttr as any)"
+          :preName="editor.showNameOrAlias(option)"
+          :isDisable="isDisable"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, watch, computed } from 'vue';
+  import { AttrType, IAttr, IAttrOption } from '../../../../image-editor';
+  import { useInjectEditor } from '../../../context';
+  import Radio from '../../common/Radio.vue';
+  import Check from '../../common/Check.vue';
+  import Select from '../../common/Select.vue';
+  import Text from '../../common/Text.vue';
+
+  interface IProps {
+    item: IAttr;
+    isDisable: boolean;
+    preName?: string;
+  }
+  const props = defineProps<IProps>();
+
+  const emit = defineEmits(['change', 'toggle', 'validate']);
+
+  const editor = useInjectEditor();
+
+  const optionVals = computed(() => {
+    return props.item.options.map((option) => {
+      return option.name;
+    });
+  });
+
+  const curOptions = ref<IAttrOption[]>([]);
+  function transformOptions(options: IAttrOption[]) {
+    return options.map((o) => {
+      return {
+        name: o.name,
+        alias: o.alias,
+        value: o.name,
+        id: o.id,
+      };
+    });
+  }
+  function onAttChange(name: string, value: any) {
+    checkCurOptions(value);
+    const oriAttr = editor.attrMap.get(props.item.id);
+    const data = {
+      id: props.item.id,
+      name: props.item.name || '',
+      pid: oriAttr.parent,
+      alias: oriAttr.alias,
+      isLeaf: Boolean(oriAttr.parent),
+      attributeVersion: oriAttr.attributeVersion,
+      value,
+    };
+    emit('change', name, data);
+  }
+  function onOptionAttChange(name: string, value: any) {
+    emit('change', name, value);
+  }
+
+  function checkCurOptions(value: any) {
+    if (!value) {
+      curOptions.value = [];
+      return;
+    }
+    const optionAttrs = [] as IAttrOption[];
+    if (props.item.type !== AttrType.TEXT) {
+      const values = Array.isArray(value) ? value : [value];
+      values.forEach((val: string) => {
+        const idx = optionVals.value.indexOf(val);
+        if (
+          idx > -1 &&
+          props.item.options[idx] &&
+          props.item.options[idx].attributes &&
+          (props.item.options[idx].attributes?.length || 0) > 0
+        ) {
+          optionAttrs.push(props.item.options[idx]);
+        }
+      });
+    }
+    curOptions.value = optionAttrs;
+  }
+  watch(
+    () => props.item,
+    () => {
+      checkCurOptions(props.item.value);
+    },
+    { immediate: true },
+  );
+</script>
+<style lang="less">
+  .attr-item-content {
+    padding: 5px 10px;
+  }
+
+  .attr-extra {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    margin-top: 8px;
+  }
+</style>
diff --git a/frontend/image-tool/src/package/image-ui/components/EditClass/components/Msgwarn.vue b/frontend/image-tool/src/package/image-ui/components/EditClass/components/Msgwarn.vue
new file mode 100644
index 00000000..300b86ad
--- /dev/null
+++ b/frontend/image-tool/src/package/image-ui/components/EditClass/components/Msgwarn.vue
@@ -0,0 +1,65 @@
+<template>
+  <div class="class-msg-warn">
+    <div class="content-wrap">
+      <span class="icon"><WarningOutlined /></span>
+      <span class="msg">
+        <slot name="msg" v-if="$slots.msg"></slot>
+      </span>
+    </div>
+    <div class="btn">
+      <a-button style="margin-right: 10px" @click="onCancel">
+        {{ editor.lang('cancel') }}
+      </a-button>
+      <a-button type="primary" @click="onOk">{{ editor.lang('confirm') }}</a-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { WarningOutlined } from '@ant-design/icons-vue';
+  import { useInjectEditor } from '../../../context';
+
+  const emit = defineEmits(['cancel', 'ok']);
+
+  const editor = useInjectEditor();
+
+  function onCancel() {
+    emit('cancel');
+  }
+  function onOk() {
+    emit('ok');
+  }
+</script>
+
+<style lang="less" scoped>
+  .class-msg-warn {
+    margin-top: 10px;
+    padding: 10px;
+    border: 1px solid #d89614;
+    border-radius: 10px;
+    width: 306px;
+    box-shadow: 0 0 2px 2px #000000;
+
+    .content-wrap {
+      display: flex;
+      align-items: center;
+    }
+
+    .msg {
+      color: #b1b1b1;
+    }
+
+    .icon {
+      display: inline-block;
+      width: 100px;
+      font-size: 24px;
+      text-align: center;
+      color: #d89614;
+    }
+
+    .btn {
+      margin-top: 10px;
+      text-align: right;
+    }
+  }
+</style>
diff --git a/frontend/image-tool/src/package/image-ui/components/EditClass/components/classAttrsCopy.vue b/frontend/image-tool/src/package/image-ui/components/EditClass/components/classAttrsCopy.vue
new file mode 100644
index 00000000..a9b37483
--- /dev/null
+++ b/frontend/image-tool/src/package/image-ui/components/EditClass/components/classAttrsCopy.vue
@@ -0,0 +1,230 @@
+<template>
+  <div class="class-copy">
+    <!-- <span>{{ `${editor.lang('frame-title')}: ${editor.state.frameIndex + 1}` }}</span> -->
+    <div class="copy-attr">
+      <span>{{ editor.lang('Attribute') }}</span>
+      <div class="copy-icon">
+        <NodeCollapseOutlined
+          :class="{ icon: true, active: state.copyType == 'from' }"
+          @click="onChooseCopyType('from')"
+          title="attr-copy-from"
+        />
+        <NodeExpandOutlined
+          :class="{ icon: true, active: state.copyType == 'to' }"
+          @click="onChooseCopyType('to')"
+          title="attr-copy-to"
+        />
+      </div>
+    </div>
+    <div v-show="state.copyType" class="copy-info">
+      <div v-if="state.copyType == 'from'">
+        <div>{{ editor.lang('copy_attrs_from') }}</div>
+        <div class="copy-select">
+          <span> {{ editor.lang('Objects') }} </span>
+          <a-select
+            show-search
+            animation="no"
+            :options="state.objects"
+            v-model:value="state.copyObject"
+          >
+          </a-select>
+        </div>
+      </div>
+      <div v-else-if="state.copyType == 'to'">
+        <div>{{ editor.lang('copy_attrs_from_frames') }}</div>
+        <div class="warn-tips">{{ editor.lang('copy_attrs_from_frames_tips') }}</div>
+        <div>
+          {{ editor.lang('Copy To Frames') }}
+          {{ state.range.length > 0 ? ` (${String(state.range)})` : '' }}
+        </div>
+        <a-slider range v-model:value="state.range" :min="1" :max="state.frames" />
+      </div>
+      <div class="copy-btn">
+        <a-button style="margin-right: 10px" @click="onCancel">
+          {{ editor.lang('cancel') }}
+        </a-button>
+        <a-button type="primary" @click="onCopy" :disabled="state.copyDisable">
+          {{ editor.lang('Copy') }}
+        </a-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { reactive, watch } from 'vue';
+  import { NodeExpandOutlined, NodeCollapseOutlined } from '@ant-design/icons-vue';
+  import { useInjectEditor } from '../../../context';
+  import { useInject } from '../context';
+  import { AnnotateObject, MsgType } from '../../../../image-editor';
+
+  interface IObjectOption {
+    value: string;
+    label: string;
+    object: AnnotateObject;
+  }
+  const editor = useInjectEditor();
+  const editState = useInject();
+  const state = reactive({
+    copyType: '',
+    // to
+    range: [] as number[],
+    frames: 0,
+    // from
+    objects: [] as IObjectOption[],
+    copyObject: '',
+    copyDisable: false,
+  });
+  watch(
+    () => editor.state.config.showClassView,
+    () => {
+      if (!editor.state.config.showClassView) {
+        state.copyType = '';
+      }
+    },
+  );
+
+  function onChooseCopyType(type: 'from' | 'to' | '') {
+    if (state.copyType == type) state.copyType = '';
+    else state.copyType = type;
+    if (state.copyType == '') return;
+    if (state.copyType == 'from') {
+      state.copyObject = '';
+      updateSameclassObjects();
+    } else if (state.copyType == 'to') {
+      updateFrameRangeInfo();
+    }
+  }
+  function updateFrameRangeInfo() {
+    const { frames } = editor.state;
+    state.frames = frames.length;
+    state.range = [1, state.frames];
+  }
+  function updateSameclassObjects() {
+    const frame = editor.getCurrentFrame();
+    const frameObjects = editor.dataManager.getFrameObject(frame.id);
+    if (frameObjects) {
+      const objs = frameObjects.filter(
+        (obj) => editState.classId && obj.userData.classId == editState.classId,
+      );
+      state.objects = objs.map((e) => {
+        return {
+          object: e,
+          value: e.uuid,
+          label: `#${e.userData.trackName} (${e.userData.trackId})`,
+        };
+      });
+    } else state.objects = [];
+  }
+  function onCancel() {
+    onChooseCopyType('');
+  }
+  function onCopy() {
+    if (!state.copyType) return;
+    if (state.copyType == 'from') {
+      copyFrom();
+    } else if (state.copyType == 'to') {
+      copyTo();
+    }
+    editor.showMsg(MsgType.success, editor.lang('copy-ok'));
+  }
+  function copyFrom() {
+    const copyObjectUUID = state.copyObject;
+    if (!copyObjectUUID) return;
+    const copyObject = state.objects.find((e) => copyObjectUUID == e.value)?.object;
+    if (!copyObject) return;
+    const copyUserData = copyObject.userData;
+    const attrs = JSON.parse(JSON.stringify(copyUserData.attrs));
+    updateCopyAttrs(editState.objects, attrs);
+  }
+  function copyTo() {
+    const frameRange = state.range;
+    const objList = [] as AnnotateObject[];
+    const attrs = editState.objects[0].userData.attrs;
+    const trackId = editState.trackId[0];
+    frameRange.forEach((index) => {
+      const frame = editor.state.frames[index - 1];
+      if (!frame) return;
+      const objectArr = editor.dataManager.getFrameObject(frame.id);
+      const trackObj = objectArr?.find((e) => e.userData.trackId == trackId);
+      if (trackObj) objList.push(trackObj);
+    });
+    objList.length > 0 && updateCopyAttrs(objList, attrs);
+  }
+  function updateCopyAttrs(objects: AnnotateObject[], attrs: any) {
+    attrs = JSON.parse(JSON.stringify(attrs));
+    editor.cmdManager.execute('update-user-data', {
+      objects: objects,
+      data: {
+        attrs,
+      },
+    });
+  }
+</script>
+
+<style lang="less" scoped>
+  .class-copy {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .copy-attr {
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: 40px;
+    width: 100%;
+    color: white;
+
+    .copy-icon {
+      position: absolute;
+      right: 10px;
+
+      .icon {
+        margin-left: 10px;
+        font-size: 18px;
+        cursor: pointer;
+
+        :hover {
+          color: #2e8cf0;
+        }
+
+        &.active {
+          color: #2e8cf0;
+        }
+      }
+    }
+  }
+
+  .copy-info {
+    padding: 5px 10px;
+    border: 1px solid #7e7e7e;
+    width: 100%;
+    text-align: left;
+
+    .ant-slider {
+      margin: 5px 13px;
+      width: 250px;
+      vertical-align: middle;
+    }
+
+    .copy-select {
+      margin: 5px 0;
+    }
+
+    .ant-select {
+      border: 1px solid #7e7e7e;
+      width: 200px;
+    }
+  }
+
+  .copy-btn {
+    margin: 10px 0 5px;
+    text-align: right;
+  }
+
+  .warn-tips {
+    color: #d89614;
+  }
+</style>
diff --git a/frontend/image-tool/src/package/image-ui/components/EditClass/components/classList.vue b/frontend/image-tool/src/package/image-ui/components/EditClass/components/classList.vue
new file mode 100644
index 00000000..4242e556
--- /dev/null
+++ b/frontend/image-tool/src/package/image-ui/components/EditClass/components/classList.vue
@@ -0,0 +1,187 @@
+<template>
+  <div class="class-search">
+    <a-form-item :label="editor.lang('class')">
+      <a-input
+        v-model:value="thisSta.searchVal"
+        class="search-input"
+        :placeholder="editor.lang('Search Class')"
+      />
+    </a-form-item>
+  </div>
+  <div class="class-list" v-if="state.classList">
+    <span
+      :ref="classItemRef"
+      :id="item.name"
+      v-for="item in classList"
+      :key="item.name"
+      :class="{ 'item limit': true, active: state.classType === item.name }"
+      @click="canEdit() ? onClassChange(item) : undefined"
+      :style="{ color: item.color }"
+    >
+      <ToolIcon :tool="state.toolType" />&nbsp;{{ editor.showNameOrAlias(item) }}
+    </span>
+    <div ref="classAttrsCard" class="class-attrs-card">
+      <div v-if="state.classType && state.attrs.length > 0" class="attr-container">
+        <div class="attr-item" v-for="item in state.attrs" :key="state.classType + item.name">
+          <AttrValue @change="onAttChange" :item="item" :isDisable="!canEdit()" />
+        </div>
+      </div>
+    </div>
+    <div class="warn-msg" :style="{ top: `${thisSta.msgTop}px` }">
+      <Msgwarn
+        @ok="onSureChangeClass"
+        @cancel="onCancel"
+        v-if="thisSta.showWarn && !thisSta.hideMsg"
+      >
+        <template #msg>
+          {{ editor.lang('class_change_warn', { type: changeClass?.name }) }}
+          <br />
+          <a-checkbox class="checkbox-wrap" v-model:checked="thisSta.hideValue">{{
+            editor.lang('not_show_anymore')
+          }}</a-checkbox>
+        </template>
+      </Msgwarn>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { computed, reactive, ref, watch } from 'vue';
+  import { useInjectEditor } from '../../../context';
+  import { useInject } from '../context';
+  import { IClassType, ToolIcon } from '../../../../image-editor';
+  import useUI from '../../../hook/useUI';
+  import AttrValue from './AttrValue.vue';
+  import Msgwarn from './Msgwarn.vue';
+
+  const emit = defineEmits(['onChangeClass', 'onChangeAttrs']);
+
+  const { canEdit } = useUI();
+
+  const state = useInject();
+  const editor = useInjectEditor();
+  const thisSta = reactive({
+    hideMsg: false,
+    hideValue: false,
+    searchVal: '',
+    showWarn: false,
+    msgTop: 0,
+    showHoverAttr: false,
+  });
+  const changeClass = ref<IClassType>();
+  const classAttrsCard = ref();
+  const refItemMap: Record<string, HTMLElement> = {};
+  const classItemRef = (el: any) => {
+    if (el) refItemMap[el.id] = el;
+  };
+  const classList = computed(() => {
+    return state.classList.filter((classType) => {
+      const name = classType.name + (classType.label || '');
+      return name.indexOf(thisSta.searchVal) > -1 || !thisSta.searchVal;
+    });
+  });
+  watch(
+    () => editor.state.config.showClassView,
+    () => {
+      if (!editor.state.config.showClassView) {
+        onCancel();
+      }
+    },
+  );
+
+  function onClassChange(classType: IClassType) {
+    if (classType.id === state.classId) return;
+    changeClass.value = classType;
+    if (!state.classId || thisSta.hideMsg) onSureChangeClass();
+    else {
+      const itemDom = refItemMap[classType.name];
+      const { top } = itemDom.getBoundingClientRect();
+      const pTop = itemDom.parentElement?.getBoundingClientRect().top || 0;
+      thisSta.msgTop = top - pTop + 35;
+      thisSta.showWarn = true;
+    }
+  }
+  function onSureChangeClass() {
+    if (changeClass.value) {
+      emit('onChangeClass', changeClass.value.id);
+    }
+    thisSta.hideMsg = thisSta.hideValue;
+    onCancel();
+  }
+  function onCancel() {
+    thisSta.showWarn = false;
+    changeClass.value = undefined;
+  }
+  function onAttChange(name: string, value: any) {
+    emit('onChangeAttrs', name, value);
+  }
+</script>
+
+<style lang="less" scoped>
+  .class-list {
+    position: relative;
+    z-index: 1;
+    width: 306px;
+    font-size: 14px;
+    text-align: left;
+
+    .disable {
+      color: #a3a3a3 !important;
+      filter: grayscale(100%);
+      pointer-events: none;
+    }
+  }
+
+  .item {
+    display: inline-block;
+    margin-right: 8px;
+    margin-bottom: 8px;
+    padding: 4px 6px;
+    border-radius: 3px;
+    max-width: 140px;
+    background: #303036;
+    white-space: nowrap;
+    cursor: pointer;
+    vertical-align: middle;
+
+    .anticon,
+    .iconfont {
+      margin-right: 4px;
+    }
+
+    &.active,
+    &:hover {
+      background: #2e8cf0;
+      color: white !important;
+    }
+  }
+
+  .class-attrs-card {
+    display: flex;
+    width: 306px;
+    flex-direction: column;
+
+    .attr-container {
+      display: flex;
+      flex-direction: column;
+      gap: 5px;
+      padding: 10px;
+      border: 1px solid #6e6e6e;
+    }
+  }
+
+  .warn-msg {
+    position: absolute;
+    left: 0;
+    background-color: #393c45;
+
+    .class-msg-item {
+      padding: 5px 10px;
+      font-size: 12px;
+    }
+  }
+
+  .no-mouse-event {
+    pointer-events: none;
+  }
+</style>
diff --git a/frontend/image-tool/src/package/image-ui/components/EditClass/context.ts b/frontend/image-tool/src/package/image-ui/components/EditClass/context.ts
new file mode 100644
index 00000000..d2c9cebe
--- /dev/null
+++ b/frontend/image-tool/src/package/image-ui/components/EditClass/context.ts
@@ -0,0 +1,27 @@
+import { AnnotateObject, IAttr, IClassType, ToolType } from '../../../image-editor';
+import { provide, inject } from 'vue';
+
+export const context = Symbol('edit-class');
+export interface IAttrItem extends IAttr {
+  value: any;
+}
+export interface IState {
+  toolType: ToolType;
+  classId: string;
+  classType: string;
+  classList: IClassType[];
+  objects: AnnotateObject[];
+  attrs: IAttrItem[];
+  trackId: string[];
+  pointsLimit: number;
+  isMultiple: boolean;
+  reset: () => void;
+}
+
+export function useProvide(state: IState) {
+  provide(context, state);
+}
+
+export function useInject() {
+  return inject(context) as IState;
+}
diff --git a/frontend/image-tool/src/package/image-ui/components/EditClass/index.vue b/frontend/image-tool/src/package/image-ui/components/EditClass/index.vue
new file mode 100644
index 00000000..ff5ca58b
--- /dev/null
+++ b/frontend/image-tool/src/package/image-ui/components/EditClass/index.vue
@@ -0,0 +1,316 @@
+<template>
+  <div v-show="state.objectId && config.showClassView" ref="editClassView" class="edit-class">
+    <div ref="container" class="edit-class-over">
+      <div class="edit-class-title">
+        <h3>{{ editor.lang('Track Object') + ' #' + state.trackName }}</h3>
+        <CloseCircleOutlined @click="onClose" class="tool-icon" />
+      </div>
+      <div class="edit-class-panel">
+        <ClassList @onChangeClass="onClassChange" @onChangeAttrs="onAttChange" />
+        <ClassAttrsCopy v-if="state.classId && !state.isMultiple" />
+      </div>
+      <div class="edit-class-title">
+        <h3>{{ editor.lang('Advanced') }}</h3>
+      </div>
+      <div class="advance-item">
+        <span>{{ editor.lang('Track ID') }}</span>
+        <div class="item-content">
+          <div class="item-info"> {{ String(state.trackId) }} </div>
+          <copy-outlined class="copy-icon" :title="'copy'" @click="onCopyTrackId" />
+        </div>
+      </div>
+    </div>
+    <div v-show="!canOperate()" class="over-not-allowed"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { reactive, ref, onUpdated, onMounted } from 'vue';
+  import { useClipboard } from '@vueuse/core';
+  import { CopyOutlined, CloseCircleOutlined } from '@ant-design/icons-vue';
+  import { debounce, cloneDeep } from 'lodash';
+  import {
+    IAttr,
+    IClassType,
+    Event,
+    AnnotateObject,
+    ToolType,
+    utils,
+    MsgType,
+  } from '../../../image-editor';
+  import { useInjectEditor } from '../../context';
+  import { useProvide } from './context';
+  import vueEvent from '../../../image-ui/vueEvent';
+  import useUI from '../../hook/useUI';
+
+  import ClassList from './components/classList.vue';
+  import ClassAttrsCopy from './components/classAttrsCopy.vue';
+  import useEditclass from './useEditclass';
+
+  interface IAttrItem extends IAttr {
+    value: any;
+  }
+  const container = ref<HTMLElement | undefined>();
+
+  const EVENT_SOURCE = 'edit_class';
+  let currentObject = [] as AnnotateObject[];
+  let currentAttrs = {} as any;
+  const { canOperate } = useUI();
+  const { copy } = useClipboard();
+  const editor = useInjectEditor();
+  const config = editor.state.config;
+  const editClassView = ref<HTMLDivElement>();
+  const uiSta = reactive({
+    collActiveKeys: ['base'],
+  });
+  const state = reactive({
+    searchVal: '',
+    value: '',
+    objects: [] as AnnotateObject[],
+    objectId: [] as string[],
+    trackId: [] as string[],
+    trackName: [] as string[],
+    toolType: ToolType.BOUNDING_BOX,
+    classType: '',
+    classList: [] as IClassType[],
+    classId: '',
+    attrs: [] as IAttrItem[],
+    pointsLimit: 0,
+    isMultiple: false,
+    posX: 0,
+    posY: 0,
+    isSkeleton: false,
+    reset: resetClassInfo,
+  });
+  useProvide(state as any);
+  const { getClassInfo, getUserDataAttrs, setAttrsDefaultValue } = useEditclass();
+
+  onMounted(() => {
+    container.value?.addEventListener('scroll', () => {
+      utils.elementBlur();
+    });
+  });
+  onUpdated(() => {
+    // fitPosition();
+  });
+
+  const debounceUpdate = debounce(() => {
+    updateData();
+  }, 100);
+
+  vueEvent(editor, Event.SHOW_CLASS_INFO, showMsgInfo);
+  vueEvent(editor, Event.ANNOTATE_REMOVE, update);
+  vueEvent(editor, Event.ANNOTATE_USER_DATA, update);
+  vueEvent(editor, Event.TRACK_OBJECT_CHANGE, update);
+  vueEvent(editor, Event.SELECT, onSelect);
+
+  function onCopyTrackId() {
+    copy(String(state.trackId));
+    editor.showMsg(MsgType.success, editor.lang('copy-ok'));
+  }
+  function update() {
+    if (editor.eventSource === EVENT_SOURCE) return;
+    debounceUpdate();
+  }
+
+  function resetClassInfo() {
+    currentObject?.length > 0 && showObject(currentObject);
+  }
+
+  function showMsgInfo(object: AnnotateObject | AnnotateObject[]) {
+    config.showClassView = true;
+    uiSta.collActiveKeys = ['base'];
+    showObject(object);
+  }
+
+  function onSelect() {
+    if (!config.showClassView) return;
+    const selection = editor.selection;
+    if (selection.length === 1) {
+      currentObject = selection;
+      showObject(selection[0]);
+    } else {
+      onClose();
+    }
+  }
+
+  function onClose() {
+    config.showClassView = false;
+  }
+
+  const showObject = debounce((object: AnnotateObject | AnnotateObject[]) => {
+    state.isMultiple = Array.isArray(object) && object.length > 1;
+    const objects: AnnotateObject[] = Array.isArray(object) ? object : [object];
+    state.objectId.length = 0;
+    state.trackId.length = 0;
+    state.trackName.length = 0;
+    state.objects = objects;
+    objects.forEach((obj) => {
+      state.objectId.push(obj.uuid);
+      state.trackId.push(obj.userData.trackId);
+      state.trackName.push(obj.userData.trackName);
+    });
+    updateData();
+  }, 100);
+
+  function updateData() {
+    console.log('class edit updateData ');
+
+    state.isSkeleton = false;
+    const objArr: AnnotateObject[] = [];
+    state.objectId.forEach((id) => {
+      const obj = editor.dataManager.getObject(id);
+      if (obj) {
+        objArr.push(obj);
+        obj.userData.needCompose = true;
+      }
+    });
+    if (objArr.length === 0) {
+      state.objectId = [];
+      onClose();
+      return;
+    }
+
+    currentObject = objArr;
+    const object = objArr[0];
+    const userData = getClassInfo(object);
+    state.pointsLimit = userData.pointsLimit || 0;
+    const classConfig = editor.getClassType(userData.classId || '');
+
+    state.classType = classConfig ? classConfig.name : '';
+    state.classId = classConfig ? classConfig.id : '';
+    state.toolType = classConfig?.toolType || userData.toolType || object.toolType;
+
+    updateAttrInfo(object, state.classId);
+
+    state.classList = editor.getClassList(state.toolType);
+  }
+
+  function onClassChange(classId: string) {
+    const classConfig = editor.getClassType(classId);
+    if (!classConfig) return;
+    editor.trackManager.addChangedTrack(state.trackId);
+    let objects: AnnotateObject[] = [];
+    if (editor.state.isSeriesFrame) {
+      objects = editor.trackManager.getObjects(state.trackId);
+    } else objects = currentObject;
+
+    editor.cmdManager.withGroup(() => {
+      if (editor.state.isSeriesFrame) {
+        const data = { classId: classId, classType: classConfig.name };
+        const trackData = state.trackId.map((trackId) => {
+          return { trackId, data };
+        });
+        editor.cmdManager.execute('update-track', trackData);
+      }
+
+      editor.cmdManager.execute('update-user-data', {
+        objects,
+        data: {
+          classId: classId,
+          classType: classConfig.name,
+          attrs: {},
+        },
+      });
+    });
+    editor.mainView.draw();
+  }
+
+  const debounceUpdateAttr = debounce(() => {
+    editor.withEventSource(EVENT_SOURCE, () => {
+      const attrs = JSON.parse(JSON.stringify(currentAttrs));
+      editor.cmdManager.execute('update-user-data', {
+        objects: currentObject,
+        data: {
+          attrs,
+        },
+      });
+    });
+  }, 100);
+
+  function onAttChange(name: string, value: any) {
+    currentAttrs[name] = value;
+    debounceUpdateAttr();
+    // console.log('更新attrs:', currentAttrs);
+  }
+
+  function updateAttrInfo(object: AnnotateObject, classId: string) {
+    const classConfig = editor.getClassType(classId);
+    if (!classConfig) return;
+    const attrs = getUserDataAttrs(object);
+    const newAttrs: any[] = cloneDeep(classConfig.attrs || []);
+    setAttrsDefaultValue(newAttrs, attrs);
+    state.attrs = newAttrs;
+    currentAttrs = JSON.parse(JSON.stringify(attrs));
+  }
+</script>
+<style lang="less" scoped>
+  .edit-class {
+    position: absolute;
+    right: 2px;
+    bottom: 2px;
+    padding: 10px 0;
+    border-radius: 10px;
+    z-index: 11;
+    width: 360px;
+    background: #393c45;
+
+    .edit-class-over {
+      padding: 0 5px;
+      overflow: auto;
+      min-height: 100px;
+      max-height: 600px;
+    }
+    .edit-class-title {
+      display: flex;
+      align-items: center;
+      padding: 4px 10px;
+      h3 {
+        flex: 1;
+        text-align: left;
+        font-weight: 600;
+        padding: 0;
+        margin: 0;
+      }
+    }
+    .edit-class-panel {
+      padding: 0 20px;
+      text-align: left;
+    }
+
+    .tool-icon {
+      font-size: 18px;
+    }
+    .advance-item {
+      margin-bottom: 20px;
+      text-align: left;
+      padding: 0 20px;
+
+      .item-content {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+      }
+
+      .item-info {
+        display: inline-block;
+        padding: 2px 5px;
+        width: 290px;
+        background-color: #4a5162;
+      }
+
+      .copy-icon {
+        margin-top: 2px;
+        font-size: 20px;
+
+        :hover {
+          color: #2e8cf0;
+        }
+      }
+    }
+
+    .ant-collapse {
+      border: 0;
+    }
+  }
+</style>
diff --git a/frontend/image-tool/src/package/image-ui/components/EditClass/useEditclass.ts b/frontend/image-tool/src/package/image-ui/components/EditClass/useEditclass.ts
new file mode 100644
index 00000000..4cf3ee5f
--- /dev/null
+++ b/frontend/image-tool/src/package/image-ui/components/EditClass/useEditclass.ts
@@ -0,0 +1,53 @@
+import { useInjectEditor } from '../../context';
+import { AnnotateObject, IUserData, IClassType, IAttr, AttrType } from '../../../image-editor';
+
+export function isAttrTypeMulti(type: string) {
+  switch (type) {
+    case AttrType.RANK:
+    case AttrType.MULTI_SELECTION:
+      return true;
+    case AttrType.DROPDOWN:
+    case AttrType.RADIO:
+    case AttrType.TEXT:
+    default:
+      return false;
+  }
+}
+export default function useEditclass() {
+  const editor = useInjectEditor();
+
+  function getClassInfo(object: AnnotateObject) {
+    return editor.getUserData(object);
+  }
+
+  /**
+   * class attrs
+   */
+  function getUserDataAttrs(object: AnnotateObject) {
+    return object.userData.attrs || {};
+  }
+
+  // set default value
+  function setAttrsDefaultValue(attrs: any[], defaultMap: Record<string, any>) {
+    if (!attrs || attrs.length === 0) return;
+    attrs.forEach((e: any) => {
+      const defaultValue = isAttrTypeMulti(e.type) ? [] : '';
+      e.value = e.id in defaultMap ? defaultMap[e.id].value : defaultValue;
+      if (e.options) {
+        let arr1: any[] = [];
+        e.options.forEach((option: any) => {
+          if (option.attributes && option.attributes.length > 0) {
+            arr1 = arr1.concat(option.attributes);
+          }
+        });
+        setAttrsDefaultValue(arr1, defaultMap);
+      }
+    });
+  }
+
+  return {
+    getClassInfo,
+    getUserDataAttrs,
+    setAttrsDefaultValue,
+  };
+}
diff --git a/frontend/image-tool/src/package/image-ui/components/FrameLine/frameContext.ts b/frontend/image-tool/src/package/image-ui/components/FrameLine/frameContext.ts
new file mode 100644
index 00000000..e103ff51
--- /dev/null
+++ b/frontend/image-tool/src/package/image-ui/components/FrameLine/frameContext.ts
@@ -0,0 +1,23 @@
+import { provide, inject } from 'vue';
+import { Editor } from '../../../image-editor';
+
+interface IContext {
+  editor: Editor;
+  state: IFrameLineState;
+}
+const context = Symbol('frame-line');
+
+export interface IFrameLineState {
+  playSpeed: number;
+  playStart: number;
+  play: boolean;
+  animation: number;
+}
+
+export function useProvideFrame(data: IContext) {
+  provide(context, data);
+}
+
+export function useInjectFrame() {
+  return inject(context) as IContext;
+}
diff --git a/frontend/image-tool/src/package/image-ui/components/FrameLine/index.vue b/frontend/image-tool/src/package/image-ui/components/FrameLine/index.vue
new file mode 100644
index 00000000..f8d13650
--- /dev/null
+++ b/frontend/image-tool/src/package/image-ui/components/FrameLine/index.vue
@@ -0,0 +1,207 @@
+<template>
+  <div ref="topContainerRef" class="editor-frame">
+    <div class="editor-frame-head" v-show="visible">
+      <ToolBar
+        @updateTrackLine="updateTrackLine"
+        :state="iState"
+        @onTrackAction="onHandleTrackAction"
+      />
+    </div>
+    <div ref="zoomContainer" v-show="visible" class="editor-frame-body">
+      <div class="i-body-left">
+        <div class="i-lineheight i-label tick-line-title">{{ editor.lang('timeLine') }}</div>
+        <div class="i-lineheight i-label">
+          <ToolIcon
+            v-if="iState.trackTargetLine.trackIcon"
+            :tool="iState.trackTargetLine.trackIcon"
+            style="font-size: 12px"
+          />
+          <i class="iconfont icon-cube" v-else />
+          <span class="i-title"> {{ getTitle(iState.trackTargetLine) }}</span>
+        </div>
+      </div>
+      <div class="i-body-right">
+        <TickLine
+          :frames="editor.state.frames"
+          :status="iState.annotationStatus"
+          :config="iState.frameConfig"
+        />
+        <TrackLine
+          style="height: 32px"
+          :trackList="iState.trackTargetLine.list"
+          :colorMap="iState.colorMap"
+          :msg-event="false"
+          :msg-tip="iState.tip"
+          :click="true"
+          :showStatus="true"
+          :annotates="iState.annotationStatus"
+          :spanWidth="iState.frameConfig.spanWidth"
+          :activeType="iState.activeType"
+        />
+      </div>
+      <div v-show="!canOperate() || iState.play" class="over-not-allowed"></div>
+    </div>
+    <contentMsg :state="iState" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, watch } from 'vue';
+  import useUI from '../../hook/useUI';
+  import useBottom, { ITrackObject, IConfig } from './useBottom';
+  import { useProvideFrame } from './frameContext';
+  import ToolBar from './toolbar.vue';
+  import TickLine from './tickLine.vue';
+  import TrackLine from './trackLine.vue';
+  import contentMsg from './tip/msg.vue';
+  import { ToolIcon } from '../../../image-editor';
+  import { useInjectEditor } from '../../context';
+
+  const props = defineProps<{
+    config?: IConfig;
+  }>();
+
+  const { canOperate } = useUI();
+  const { updateTrackLine, iState, zoomContainer, setConfig, onHandleTrackAction } = useBottom();
+  const editor = useInjectEditor();
+
+  const visible = ref(true);
+  const topContainerRef = ref<HTMLElement>();
+  watch(
+    () => props.config,
+    () => {
+      setConfig(props.config);
+    },
+    {
+      deep: true,
+      immediate: true,
+    },
+  );
+  function getTitle(trackObject: ITrackObject) {
+    const { trackId, trackName } = trackObject;
+    if (trackId) return `#${trackName} (${trackId})`;
+    else return editor.lang('selectObject');
+  }
+  useProvideFrame({
+    editor,
+    state: iState,
+  });
+</script>
+
+<style lang="less">
+  .editor-frame {
+    display: flex;
+    position: relative;
+    margin-top: 4px;
+    padding-left: 2px;
+    width: 100%;
+    height: 100%;
+    background-color: #1e1f22;
+    text-align: left;
+    flex-direction: column;
+
+    .toggle-handle {
+      position: absolute;
+      top: -18px;
+      left: 50%;
+      padding: 0 15px;
+      text-align: center;
+      color: #aaaaaa;
+      transform: translateX(-50%);
+      line-height: 18px;
+      border-top-left-radius: 10px;
+      border-top-right-radius: 10px;
+
+      &:hover {
+        background: #2b2a2e;
+      }
+    }
+
+    .i-lineheight {
+      height: 32px;
+      line-height: 32px;
+      white-space: nowrap;
+
+      .comment {
+        display: block;
+        margin-top: 2px;
+        font-size: 12px;
+        text-align: center;
+        color: #60a9fe;
+        line-height: 1;
+      }
+
+      .miss-icon {
+        display: block;
+        padding-left: 1px;
+        font-size: 12px;
+      }
+
+      .invalid-icon {
+        display: block;
+        margin-top: 2px;
+        font-size: 12px;
+        text-align: center;
+        color: #ff5656;
+        line-height: 1;
+      }
+
+      .i-title {
+        padding-left: 8px;
+        font-size: 12px;
+      }
+
+      .new-badge {
+        display: block;
+        padding-right: 4px;
+        float: right;
+        font-size: 12px;
+        color: red;
+      }
+    }
+
+    .i-label {
+      padding-left: 8px;
+      overflow: hidden;
+    }
+
+    &-body {
+      flex: 1;
+      display: flex;
+      position: relative;
+      flex-direction: row;
+
+      .i-body-left {
+        width: 200px;
+
+        .tick-line-title {
+          height: 36px;
+          line-height: 36px;
+          background-color: #23262e;
+          box-shadow: inset 0 -1px 0 #43454b;
+        }
+      }
+
+      .i-body-right {
+        &::-webkit-scrollbar-thumb {
+          border-radius: 10px;
+          background: #818181;
+        }
+
+        &::-webkit-scrollbar {
+          // display: none;
+          position: absolute;
+          height: 6px;
+        }
+
+        position: relative;
+        overflow-x: auto;
+        overflow-y: hidden;
+        width: 0;
+        text-align: left;
+        flex: 1;
+        // }
+      }
+    }
+  }
+</style>
diff --git a/frontend/image-tool/src/package/image-ui/components/FrameLine/tickLine.vue b/frontend/image-tool/src/package/image-ui/components/FrameLine/tickLine.vue
new file mode 100644
index 00000000..0432842b
--- /dev/null
+++ b/frontend/image-tool/src/package/image-ui/components/FrameLine/tickLine.vue
@@ -0,0 +1,406 @@
+<template>
+  <div
+    style="height: 36px; background-color: #23262e; white-space: nowrap"
+    @click.prevent="(e) => onClickTick(e)"
+  >
+    <div class="i-scale-head-container">
+      <template v-for="(item, index) in configArray" :key="item.key">
+        <div class="ruler-container" :style="_style(index)">
+          <div v-if="_mark(index)" class="ruler-text">{{ index + 1 }}</div>
+          <span :class="{ 'ruler-scale': true, bold: _mark(index) }"></span>
+          <span :style="_style1(index)" class="loaded"></span>
+        </div>
+      </template>
+    </div>
+  </div>
+  <div :style="{ left: iState.dragDomLeft + 'px' }" ref="indicatorRef" class="i-scale-indicator">
+    <span class="i-scale-indicator-bar"></span>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { onMounted, reactive, watch, ref, computed, onUnmounted } from 'vue';
+  import { useInjectEditor } from '../../context';
+  const editor = useInjectEditor();
+  // interface & type & constant -------------------------------------
+  const defaultConfig = {
+    spanWidth: 20,
+    interval: 5,
+    animation: 1,
+    emptyColor: '#C5C8CD',
+    loadedColor: '#7acae8',
+    activeColor: '#fcecc4',
+  };
+
+  interface Frame {
+    id: number | string;
+    resultExist?: boolean | string;
+    hasAnnotate?: boolean;
+    loadState: boolean | string;
+  }
+
+  interface frameProps {
+    frames: Array<Frame>;
+    status: Array<boolean>;
+    config: {
+      curFrameIndex: number;
+      disabled?: boolean;
+      //--
+      activeColor?: string;
+      emptyColor?: string;
+      loadedColor?: string;
+      interval?: number;
+      spanWidth?: number;
+      showProcess?: boolean;
+    };
+  }
+
+  // emit & props -------------------------------------
+  // const emit = defineEmits(['frameIndexChange']);
+
+  const props = defineProps<frameProps>();
+
+  const indicatorRef = ref<HTMLElement>();
+
+  let parentElement: HTMLElement; // ref<HTMLElement | undefined>(undefined);
+  const iState = reactive({
+    containerWidth: 0,
+    dragDomLeft: 0,
+    isDrag: false,
+  });
+
+  // life
+
+  onMounted(() => {
+    addDragListener();
+    addResizeListener();
+    setTimeout(domResize, 2000);
+  });
+
+  onUnmounted(() => {
+    removeEvent();
+  });
+
+  // data && computed && watch
+
+  const _config = computed(() => {
+    return Object.assign(defaultConfig, props.config || {});
+  });
+
+  const configArray = computed(() => {
+    const headConfig = [];
+    const width = _config.value.spanWidth;
+    let temp = 0;
+    const maxWidth = Math.max(width * props.frames.length, iState.containerWidth);
+    while (temp + width <= maxWidth) {
+      headConfig.push({
+        key: temp,
+      });
+      temp += width;
+    }
+    return headConfig;
+  });
+
+  watch(
+    () => props.config.curFrameIndex,
+    () => {
+      checkPosition();
+      checkView();
+    },
+    { immediate: true },
+  );
+
+  watch(
+    () => props.config.spanWidth,
+    () => {
+      checkPosition();
+    },
+  );
+  // methods
+  const _mark = (index: number) => {
+    return (index + 1) % _config.value.interval === 0 || index === 0;
+  };
+
+  function addResizeListener() {
+    if (indicatorRef.value) {
+      parentElement = (indicatorRef.value as HTMLElement).parentElement as HTMLElement;
+      if (!parentElement) return;
+      if (!iState.containerWidth) {
+        iState.containerWidth = parentElement.offsetWidth;
+      }
+      window.addEventListener('resize', domResize);
+    }
+  }
+
+  function domResize() {
+    if (parentElement) {
+      const dom = parentElement as HTMLElement;
+      iState.containerWidth = dom.offsetWidth;
+    }
+  }
+
+  function removeEvent() {
+    if (parentElement) {
+      (parentElement as HTMLElement).onmousedown = null;
+    }
+    if (indicatorRef.value) {
+      (indicatorRef.value as HTMLElement).onmousedown = null;
+    }
+    window.removeEventListener('resize', domResize);
+  }
+
+  function checkPosition() {
+    const width = _config.value.spanWidth;
+    iState.dragDomLeft = props.config.curFrameIndex * width - width / 2 - 2;
+  }
+
+  function checkView() {
+    if (parentElement) {
+      const container = parentElement as HTMLElement;
+      const width = _config.value.spanWidth;
+      const needWidth = props.config.curFrameIndex * width;
+      const scrollX = container.scrollLeft;
+      const total = container.offsetWidth;
+      const offset = width;
+      if (scrollX + total < needWidth + offset) {
+        container.scrollLeft = needWidth - total + offset;
+      } else if (scrollX > needWidth - width - offset) {
+        container.scrollLeft = needWidth - width - offset;
+      }
+    }
+  }
+  const _style1 = (index: number) => {
+    const style: Partial<Record<keyof CSSStyleDeclaration, any>> = {
+      backgroundColor: 'transparent',
+    };
+    const item = props.frames[index] as any;
+    if (item) {
+      switch (item.loadState) {
+        case true:
+        case 'complete':
+          style.backgroundColor = '#2B3452';
+          break;
+        case 'err':
+        case 'error':
+        case false:
+          style.backgroundColor = '#ff0000';
+          break;
+        default:
+          break;
+      }
+    }
+    return style;
+  };
+  const _style = (index: number) => {
+    const item: any = props.frames[index] || {};
+    // const { loadedColor, emptyColor } = _config.value;
+    const style: Partial<Record<keyof CSSStyleDeclaration, any>> = {
+      width: _config.value.spanWidth + 'px',
+    };
+    if (item.isSample) {
+      const itemPre: any = props.frames[index - 1];
+      const itemNext: any = props.frames[index + 1];
+      const border = '1px solid #e2e3a7';
+      style.borderTop = border;
+      style.borderBottom = border;
+      if (!itemPre?.isSample) {
+        style.borderLeft = border;
+      }
+      if (!itemNext?.isSample) {
+        style.borderRight = border;
+      }
+    }
+    return style;
+  };
+  function preMouseEvent(e: MouseEvent) {
+    e.stopPropagation && e.stopPropagation();
+    e.preventDefault && e.preventDefault();
+    e.cancelBubble = true;
+  }
+
+  function getFrameIndexByEvent(event: MouseEvent): number {
+    const frameIndex = Math.ceil(event.offsetX / _config.value.spanWidth);
+    return frameIndex;
+  }
+
+  function onClickTick(event: MouseEvent) {
+    const index = getFrameIndexByEvent(event);
+    onChangeFrameIndex(index);
+  }
+
+  function onChangeFrameIndex(index: number) {
+    // let beforeIndex = editor.state.frameIndex + 1;
+    if (index > props.frames.length) {
+      index = props.frames.length;
+      return false;
+    }
+    editor.loadFrame(index - 1); // emit('frameIndexChange', index);
+    // editor.reportManager.reportChangeFrame('Time Line', beforeIndex);
+    return true;
+  }
+  function addDragListener() {
+    if (indicatorRef.value) {
+      const dom = indicatorRef.value as HTMLElement;
+      let divX: number;
+      let maxX: number;
+      let tempDragDomLeft: number;
+      const onMouseMove = (e: MouseEvent) => {
+        const x = e.clientX - divX;
+        preMouseEvent(e);
+        divX = e.clientX;
+        const tempX = iState.dragDomLeft + x;
+        if (tempX <= maxX && tempX > 0) {
+          iState.dragDomLeft += x;
+        }
+      };
+      const onMouseUp = () => {
+        document.removeEventListener('mousemove', onMouseMove);
+        document.removeEventListener('mouseup', onMouseUp);
+        if (iState.isDrag) {
+          iState.isDrag = false;
+          const width = _config.value.spanWidth;
+          const index = Math.ceil(iState.dragDomLeft / width);
+          if (index === props.config.curFrameIndex) {
+            iState.dragDomLeft = tempDragDomLeft;
+          } else {
+            onChangeFrameIndex(index);
+          }
+        }
+      };
+      dom.onmousedown = function (e) {
+        e = e || window.event;
+        preMouseEvent(e);
+        if (e.button === 2) return;
+        tempDragDomLeft = iState.dragDomLeft;
+        iState.isDrag = true;
+        divX = e.clientX;
+        const width = _config.value.spanWidth;
+        maxX = width * props.frames.length;
+        document.addEventListener('mousemove', onMouseMove);
+        document.addEventListener('mouseup', onMouseUp);
+      };
+    }
+  }
+</script>
+<style lang="less">
+  .i-scale-indicator {
+    // background: aquamarine;
+    position: absolute;
+    top: 6px;
+    bottom: 0;
+    z-index: 7;
+    width: 4px;
+    pointer-events: none;
+
+    &::after {
+      position: absolute;
+      top: 6px;
+      left: 50%;
+      width: 1px;
+      height: 100%;
+      background-color: #ffffff;
+      content: '';
+      transform: translateX(-50%);
+    }
+
+    .i-scale-indicator-bar {
+      display: block;
+      position: absolute;
+      top: 1px;
+      left: 50%;
+      z-index: 3;
+      width: 16px;
+      height: 18px;
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      pointer-events: auto;
+      transform: translateX(-50%);
+      background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxNS45OTciIHZpZXdCb3g9IjAgMCAxMiAxNS45OTciPg0KICA8cGF0aCBpZD0i6Lev5b6EXzIzNDYyIiBkYXRhLW5hbWU9Iui3r+W+hCAyMzQ2MiIgZD0iTTM4My45NjYsNDE5LjI1OGw1LjcwNS0zLjY3NFY0MDMuNjI5YzAtLjE2Mi0uMTgxLS4yOTMtLjQtLjI5MWgtMTEuMmMtLjIxNywwLS40LjEyOS0uNC4yOTFsMCwxMS45NTUsNS43LDMuNjcyQS42LjYsMCwwLDAsMzgzLjk2Niw0MTkuMjU4WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTM3Ny42NzIgLTQwMy4zMzgpIiBmaWxsPSIjZmZmZmZmIi8+DQo8L3N2Zz4=');
+      cursor: grab;
+    }
+
+    .disabled {
+      cursor: not-allowed;
+    }
+
+    .active {
+      cursor: grab;
+    }
+
+    // .i-tool-scale-head:hover {
+    //     background: #89d1f8;
+    // }
+
+    .i-tool-scale-body {
+      display: block;
+      position: absolute;
+      top: 6px;
+      bottom: 0;
+      left: 50%;
+      width: 1px;
+      border-left: 1px solid #1296db;
+      transform: translateX(-50%);
+    }
+  }
+
+  .i-scale-head-container {
+    display: inline-block;
+    overflow: hidden;
+    height: 100%;
+    cursor: pointer;
+
+    .ruler-container {
+      display: inline-block;
+      position: relative;
+      height: 100%;
+      background-color: #23262e;
+      // background-color: #292746;
+      pointer-events: none;
+      user-select: none;
+
+      &.active {
+        background-color: #1d3f64;
+      }
+
+      .ruler-text {
+        position: absolute;
+        bottom: 0;
+        z-index: 4;
+        width: 100%;
+        font-size: 12px;
+        text-align: center;
+        color: #aaaaaa;
+        line-height: 36px;
+        pointer-events: none;
+      }
+
+      .loaded {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        z-index: 0;
+        height: 100%;
+        box-shadow: inset 0 -1px 0 #43454b;
+      }
+
+      .ruler-scale {
+        position: absolute;
+        bottom: 0;
+        left: 50%;
+        z-index: 1;
+        width: 1px;
+        height: 6px;
+        border-left: 1px solid #666666;
+        transform: translateX(-0.5px);
+      }
+
+      .bold {
+        border-width: 1px;
+        border-color: #cecfd5;
+        height: 10px;
+      }
+    }
+  }
+  // }
+</style>
diff --git a/frontend/image-tool/src/package/image-ui/components/FrameLine/tip/menu.vue b/frontend/image-tool/src/package/image-ui/components/FrameLine/tip/menu.vue
new file mode 100644
index 00000000..0bd340d4
--- /dev/null
+++ b/frontend/image-tool/src/package/image-ui/components/FrameLine/tip/menu.vue
@@ -0,0 +1,54 @@
+<template>
+    <div class="bottom-right-click-menu">
+        <a-checkbox v-model:checked="iState.checked"
+            ><span class="mark-gone">标记为消失</span></a-checkbox
+        >
+        <!-- <div class="menu-item">标记为消失</div> -->
+    </div>
+</template>
+<script lang="ts" setup>
+    import { reactive } from 'vue';
+    const props = defineProps<{
+        data: {
+            invisible: boolean;
+        };
+    }>();
+    const iState = reactive({
+        checked: props.data.invisible,
+    });
+    const emit = defineEmits(['cancel', 'ok']);
+    function valid(): Promise<boolean> {
+        return Promise.resolve(true);
+    }
+    function getData(): any {
+        return {
+            ...iState,
+        };
+    }
+    defineExpose({
+        valid,
+        getData,
+    });
+</script>
+<style lang="less">
+    .bottom-right-click-menu {
+        width: 120px;
+        min-height: 30px;
+        background-color: rgb(255 255 255);
+        padding: 4px 0 0 4px;
+        color: #1e1f23;
+        box-shadow: 0 0 10px -2px #1e1f23;
+        .menu-item {
+            padding: 0 8px;
+            line-height: 32px;
+            &:hover {
+                background-color: #1e1f2349;
+                color: white;
+            }
+        }
+        .mark-gone {
+            color: @primary-color;
+            user-select: none;
+        }
+    }
+</style>
diff --git a/frontend/image-tool/src/package/image-ui/components/FrameLine/tip/msg.vue b/frontend/image-tool/src/package/image-ui/components/FrameLine/tip/msg.vue
new file mode 100644
index 00000000..0c41c5aa
--- /dev/null
+++ b/frontend/image-tool/src/package/image-ui/components/FrameLine/tip/msg.vue
@@ -0,0 +1,68 @@
+<template>
+  <teleport to="body">
+    <div v-show="iState.visible" class="timeline-message" :style="iState.style" ref="popContainer">
+      <div
+        style="
+          padding: 1px 8px;
+          border-radius: 2px;
+          background: #303036;
+          font-size: 12px;
+          color: white;
+          box-shadow: 0 0 10px -2px #1e1f23;
+        "
+      >
+        <span :style="{ color: iState.color }">
+          <div v-for="msg in iState.msg" :class="msg.class">{{ msg.msg }}</div>
+        </span>
+      </div>
+    </div>
+  </teleport>
+</template>
+<script lang="ts" setup>
+  import { onMounted, reactive } from 'vue';
+  import { IBottomState, IMsgOption } from '../useBottom';
+  const props = defineProps<{
+    state: IBottomState;
+  }>();
+  const iState = reactive({
+    style: { left: 0, top: 0 },
+    visible: false,
+    color: '#ffffff',
+    placement: 'top',
+    msg: [] as any[],
+  });
+  onMounted(() => {
+    props.state.tip = (option: IMsgOption) => {
+      const {
+        visible,
+        target,
+        data: { msg },
+      } = option;
+      Object.assign(iState, {
+        visible: visible,
+        msg: msg,
+      });
+      updatePosition(target);
+    };
+  });
+  function updatePosition(target: { x: number; y: number }) {
+    if (!iState.visible) return;
+    const style: any = {};
+    switch (iState.placement) {
+      default:
+      case 'top':
+        style.bottom = target.y + 'px';
+        style.left = target.x + 'px';
+        break;
+    }
+
+    iState.style = style;
+  }
+</script>
+<style lang="less">
+  .timeline-message {
+    position: absolute;
+    z-index: 707;
+    min-width: 20px;
+  }
+</style>
diff --git a/frontend/image-tool/src/package/image-ui/components/FrameLine/toolbar.vue b/frontend/image-tool/src/package/image-ui/components/FrameLine/toolbar.vue
new file mode 100644
index 00000000..ba17475f
--- /dev/null
+++ b/frontend/image-tool/src/package/image-ui/components/FrameLine/toolbar.vue
@@ -0,0 +1,429 @@
+<template>
+  <div class="i-toolbar-container">
+    <div class="bar-left">
+      <span style="display: inline-block; padding-right: 10px; min-width: 60px">
+        {{ editor.lang('autoLoad') }}</span
+      >
+      <a-tooltip placement="top">
+        <template #title>{{ editor.lang('autoLoad') }}</template>
+        <span @keydown.capture="(e) => e.stopPropagation()">
+          <a-switch
+            :checked="config.autoLoad"
+            @change="onAutoLoadHandle"
+            style="margin-right: 10px"
+          />
+        </span>
+      </a-tooltip>
+      <div v-show="disable" class="over-not-allowed"></div>
+    </div>
+    <div class="bar-center">
+      <div style="display: flex; justify-content: center; width: 100%; text-align: center">
+        <!-- CopyBackward -->
+        <a-tooltip v-if="showCopy()" placement="top">
+          <template #title>{{ editor.lang('copyLeft1') }}</template>
+          <a-button
+            v-show="!isCheck()"
+            :disabled="disable"
+            @click="() => onAction('CopyBackward')"
+            style="width: 40px"
+          >
+            <template #icon>
+              <div>
+                <StepBackwardOutlined />
+                <CopyOutlined
+                  style="margin-left: -4px; font-size: 14px; transform: rotateY(180deg)"
+                />
+              </div>
+            </template>
+          </a-button>
+        </a-tooltip>
+        <!-- speedDown -->
+        <a-tooltip placement="top">
+          <template #title>{{
+            editor.lang('speedDown', {
+              n: state.playSpeed,
+            })
+          }}</template>
+          <a-button :disabled="!canOperate()" v-show="!isCheck()" @click="onChangeSpeed(-1)">
+            <template #icon>
+              <i class="iconfont icon-backup" />
+            </template>
+          </a-button>
+        </a-tooltip>
+        <!-- replay -->
+        <a-tooltip placement="top">
+          <template #title>{{ editor.lang('replay') }}</template>
+          <a-button :disabled="!canOperate()" v-show="!isCheck()" @click="() => onAction('Replay')">
+            <template #icon>
+              <i class="iconfont icon-replay" />
+            </template>
+          </a-button>
+        </a-tooltip>
+        <!-- last frame -->
+        <a-tooltip placement="top">
+          <template #title>{{ editor.lang('pre') }}</template>
+          <a-button :disabled="isPreDisabled" @click="() => onAction('PreFrame')" type="default">
+            <template #icon>
+              <i class="iconfont icon-toleft" />
+            </template>
+          </a-button>
+        </a-tooltip>
+        <a-input-number
+          style="width: 80px"
+          :disabled="disable"
+          v-model:value="iState.frameIndex"
+          :precision="0"
+          @blur="() => changeFrameIndex()"
+          @pressEnter="() => changeFrameIndex()"
+          :min="1"
+          :max="total"
+          size="small"
+        />
+        <span class="i-span">/ {{ total }}</span>
+        <!-- next frame -->
+        <a-tooltip placement="top">
+          <template #title>{{ editor.lang('next') }}</template>
+          <a-button :disabled="isNextDisabled" @click="() => onAction('NextFrame')" type="default">
+            <template #icon>
+              <i class="iconfont icon-toright" />
+            </template>
+          </a-button>
+        </a-tooltip>
+        <!-- play -->
+        <a-tooltip placement="top">
+          <template #title>{{
+            state.play ? editor.lang('pause') : editor.lang('play', { n: state.playSpeed })
+          }}</template>
+          <a-button
+            v-show="!isCheck()"
+            :disabled="!canOperate()"
+            @click="() => onAction(state.play ? 'Stop' : 'Play')"
+            type="default"
+          >
+            <template #icon>
+              <i class="iconfont icon-Frame23" v-if="state.play" />
+              <i class="iconfont icon-play" v-else />
+            </template>
+          </a-button>
+        </a-tooltip>
+        <!-- speedUp -->
+        <a-tooltip placement="top">
+          <template #title>{{ editor.lang('speedUp', { n: state.playSpeed }) }}</template>
+          <a-button :disabled="!canOperate()" v-show="!isCheck()" @click="onChangeSpeed(1)">
+            <template #icon>
+              <i class="iconfont icon-forward" />
+            </template>
+          </a-button>
+        </a-tooltip>
+        <!-- CopyForward -->
+        <a-tooltip v-if="showCopy()" placement="top">
+          <template #title>{{ editor.lang('copyRight1') }}</template>
+          <a-button
+            v-show="!isCheck()"
+            :disabled="disable"
+            @click="() => onAction('CopyForward')"
+            style="width: 40px"
+          >
+            <template #icon>
+              <div>
+                <CopyOutlined style="margin-right: -4px; font-size: 14px" />
+                <StepForwardOutlined />
+              </div>
+            </template>
+          </a-button>
+        </a-tooltip>
+      </div>
+    </div>
+    <div class="bar-right" v-show="!isCheck()" v-if="canEdit()">
+      <a-tooltip placement="top">
+        <template #title>{{ editor.lang('delete') }}</template>
+        <a-button @click="() => onTrackAction('Delete')">
+          <template #icon>
+            <i class="iconfont icon-delete" />
+          </template>
+        </a-button>
+      </a-tooltip>
+      <div v-show="disable" class="over-not-allowed"></div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { debounce } from 'lodash';
+  import { computed, watch, reactive } from 'vue';
+  import { useInjectEditor } from '../../context';
+  import useUI from '../../hook/useUI';
+  import { ITrackAction, IBottomState } from './useBottom';
+  import { StepForwardOutlined, StepBackwardOutlined, CopyOutlined } from '@ant-design/icons-vue';
+  import { useInjectFrame } from './frameContext';
+  import { Event, MsgType } from '../../../image-editor';
+  import PlayManager from 'image-editor/common/PlayManager';
+
+  const props = defineProps<{
+    state: IBottomState;
+  }>();
+  const { canEdit, isCheck, canOperate, showCopy } = useUI();
+  const frameState = useInjectFrame();
+  const editor = useInjectEditor();
+  const config = editor.state.config;
+  const iState = reactive({
+    // autoLoad: false,
+    frameIndex: editor.state.frameIndex + 1,
+  });
+  const emit = defineEmits(['onTrackAction', 'updateTrackLine']);
+
+  watch(
+    () => editor.state.frameIndex,
+    () => {
+      if (iState.frameIndex !== editor.state.frameIndex + 1)
+        iState.frameIndex = editor.state.frameIndex + 1;
+    },
+    { immediate: true },
+  );
+
+  const isPreDisabled = computed(() => {
+    return iState.frameIndex <= 1 || disable.value;
+  });
+  const isNextDisabled = computed(() => {
+    return iState.frameIndex >= editor.state.frames.length || disable.value;
+  });
+  const total = computed(() => {
+    return editor.state.frames.length;
+  });
+
+  type IBarAction =
+    | 'AutoLoad'
+    | 'CopyForward'
+    | 'CopyBackward'
+    | 'Replay'
+    | 'PreFrame'
+    | 'NextFrame'
+    | 'Play'
+    | 'Stop';
+
+  function onChangeSpeed(dir: 1 | -1) {
+    const scale = dir === 1 ? 2 : 0.5;
+    frameState.state.playSpeed *= scale;
+    frameState.state.playSpeed = Math.max(0.5, Math.min(4, props.state.playSpeed));
+    PlayManager.instance.interval = Math.round(300 / props.state.playSpeed);
+  }
+  function onTrackAction(action: ITrackAction) {
+    emit('onTrackAction', action);
+  }
+  function onAutoLoadHandle(val: boolean) {
+    config.autoLoad = val;
+    onAction('AutoLoad');
+  }
+  function onAction(action: IBarAction) {
+    switch (action) {
+      case 'AutoLoad':
+        const mode: any = config.autoLoad ? 'all' : 'near';
+        editor.dataResource.setLoadMode(mode);
+        break;
+      case 'CopyForward':
+        editor.dataManager.copyForward();
+        break;
+
+      case 'CopyBackward':
+        editor.dataManager.copyBackWard();
+        break;
+      case 'Replay':
+        rePlay();
+        editor.emit(Event.FRAME_REPLAY, editor.state.frameIndex);
+        break;
+      case 'PreFrame':
+        iState.frameIndex--;
+        changeFrameIndex();
+
+        break;
+      case 'NextFrame':
+        iState.frameIndex++;
+        changeFrameIndex();
+        break;
+      case 'Play':
+        play();
+        editor.emit(Event.FRAME_PLAY, editor.state.frameIndex);
+        break;
+      case 'Stop':
+        PlayManager.instance.stop();
+        editor.emit(Event.FRAME_PAUSE, editor.state.frameIndex);
+        break;
+    }
+  }
+
+  async function rePlay() {
+    if (PlayManager.instance.playing) {
+      PlayManager.instance.stop();
+    }
+    await editor.loadFrame(props.state.playStart, false);
+    play();
+  }
+
+  function play() {
+    const { frames, frameIndex } = editor.state;
+    const nextData = frames[frameIndex + 1];
+    if (!nextData || nextData.loadState !== 'complete') {
+      editor.showMsg(MsgType.warning, editor.lang('noPlayData'));
+      return;
+    }
+
+    frameState.state.play = true;
+    frameState.state.playStart = frameIndex;
+    PlayManager.instance.play();
+  }
+
+  const changeFrameIndex = debounce(() => {
+    const { frames } = editor.state;
+    if (!iState.frameIndex) iState.frameIndex = 1;
+    iState.frameIndex = Math.max(1, Math.min(frames.length, iState.frameIndex));
+    editor.switchFrame(iState.frameIndex - 1);
+  }, 300);
+
+  const disable = computed(() => {
+    return !canOperate() || props.state.play;
+  });
+</script>
+<style lang="less">
+  .i-toolbar-container {
+    display: flex;
+    position: relative;
+    align-items: center;
+    overflow-x: auto;
+    overflow-y: hidden;
+    height: 32px;
+    background-color: #1e1f22;
+    white-space: nowrap;
+    flex-direction: row;
+
+    .annotation {
+      font-size: 14px;
+    }
+
+    .bar-left {
+      display: flex;
+      position: relative;
+      align-items: center;
+      height: 100%;
+    }
+
+    .bar-right {
+      display: flex;
+      position: relative;
+      align-items: center;
+      height: 100%;
+    }
+
+    .bar-center {
+      display: flex;
+      position: relative;
+      align-items: center;
+      height: 100%;
+      flex: 1;
+    }
+
+    &::-webkit-scrollbar {
+      // display: none;
+      position: absolute;
+      height: 2px;
+    }
+
+    .i-margin-right {
+      margin-right: 1px;
+    }
+
+    .ant-input-number-input-wrap {
+      line-height: 32px;
+    }
+
+    .ant-input-number-handler-wrap {
+      display: none;
+    }
+
+    .ant-input-number {
+      margin-left: 2px;
+    }
+
+    .ant-input-number-input {
+      background-color: white;
+      text-align: center;
+      color: black;
+    }
+
+    .empty-space {
+      display: inline-block;
+      width: 80px;
+      height: 20px;
+    }
+
+    .divide-line {
+      display: inline-block;
+      margin: 0 10px;
+      width: 1px;
+      height: 20px;
+      border-left: 1px solid white;
+    }
+
+    .ant-btn {
+      border: none;
+    }
+
+    .i-span {
+      display: inline-block;
+      user-select: none;
+      margin: 0 4px;
+      line-height: 32px;
+    }
+
+    .item {
+      display: inline-block;
+      margin-left: 10px;
+      cursor: pointer;
+
+      &.icon {
+        margin-right: 5px;
+        margin-left: 8px;
+      }
+    }
+  }
+
+  .frame-setting {
+    width: 220px;
+
+    .wrap {
+      margin-top: 10px;
+      padding-right: 4px;
+      padding-left: 6px;
+    }
+
+    .title {
+      font-size: 14px;
+      text-align: center;
+      line-height: 32px;
+    }
+
+    .title1 {
+      font-size: 12px;
+      text-align: left;
+      // padding-bottom: 8px;
+      line-height: 32px;
+    }
+
+    .title2 {
+      display: flex;
+      font-size: 12px;
+      color: white;
+      line-height: 32px;
+
+      .ant-input-number-input {
+        text-align: center;
+      }
+
+      > label {
+        display: inline-block;
+        padding: 0 8px 0 0;
+        min-width: 70px;
+        text-align: left;
+        line-height: 32px;
+      }
+    }
+  }
+</style>
diff --git a/frontend/image-tool/src/package/image-ui/components/FrameLine/trackLine.vue b/frontend/image-tool/src/package/image-ui/components/FrameLine/trackLine.vue
new file mode 100644
index 00000000..dd102ee6
--- /dev/null
+++ b/frontend/image-tool/src/package/image-ui/components/FrameLine/trackLine.vue
@@ -0,0 +1,313 @@
+<template>
+  <div class="i-lineheight">
+    <div
+      @mousemove="(e) => onHandleEvent(e, true)"
+      @mouseleave="(e) => onHandleEvent(e, false)"
+      @click.stop="onCurTrackClick"
+      @contextmenu.prevent.stop="onContextMenu"
+      style="display: inline-block; height: 100%"
+    >
+      <div
+        v-for="(item, index) in trackList"
+        :key="index"
+        :class="{
+          'i-tool-frame': true,
+          'truth-value': showStatus && isTrueValue(item),
+          'no-truth-value': showStatus && isNoTrueValue(item),
+        }"
+        :style="{ width: spanWidth + 'px' }"
+      >
+        <span :class="['i-tool-span', _status_color(item)]" :style="_style_track(item, index)">
+          <template v-if="showStatus">
+            <div class="status-context miss" v-if="isMiss(item)"></div>
+            <div class="status-context invalid" v-if="invalid(item, index)"></div>
+            <div class="status-context frame-invalid" v-if="frameDataInvalid(index)"></div>
+            <div class="icon-context">
+              <i
+                v-if="marked(index)"
+                style="display: inline-block"
+                class="comment iconfont icon-pizhu"
+              ></i>
+            </div>
+          </template>
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { CSSProperties, reactive } from 'vue';
+
+  import { IUserData, Const } from '../../../image-editor';
+  import { useInjectEditor } from '../../context';
+  import { IMsgOption } from './useBottom';
+
+  const editor = useInjectEditor();
+  const errorColor = '#ff3653';
+
+  const props = defineProps<{
+    trackList: IUserData[];
+    annotates?: boolean[];
+    colorMap: {};
+    spanWidth: number;
+    msgEvent?: boolean;
+    click?: boolean;
+    showStatus?: boolean;
+    primary?: boolean;
+    msgTip?: (option: IMsgOption) => void;
+    errIndex?: number[];
+    activeType?: {
+      classType: any;
+      modelClass: any;
+    };
+  }>();
+  enum IMsgStatus {
+    MSG,
+    Menu,
+  }
+  const iState = reactive({
+    msgStatus: IMsgStatus.MSG,
+    msgVisible: false,
+    menuIndex: -1,
+  });
+  const isError = (index: number) => {
+    return (props.errIndex || []).indexOf(index) !== -1;
+  };
+  const isTrueValue = (item?: IUserData) => {
+    return item?.resultStatus === Const.True_Value;
+  };
+  const isNoTrueValue = (item?: IUserData) => {
+    return item?.resultStatus && item.resultStatus !== Const.True_Value;
+  };
+
+  const _status_color = (userData: IUserData) => {
+    if (userData?.classType) {
+      return props.primary ? 'primary-color' : 'default-color';
+    } else if (userData) {
+      return 'no-class-color';
+    } else {
+      return 'empty-color';
+    }
+  };
+  const _style_track = (userData: IUserData, index: number) => {
+    const style: CSSProperties = {};
+    if (isError(index)) {
+      style.backgroundColor = errorColor;
+    }
+    if (index === iState.menuIndex || (iState.menuIndex < 0 && isActive(userData))) {
+      style.top = '4px';
+      style.bottom = '1px';
+    }
+    return style;
+  };
+
+  function isActive(userData: IUserData) {
+    if (!userData || !props.activeType) return;
+    if (!props.activeType?.classType) {
+      return userData.classType === props.activeType?.classType;
+    } else {
+      return !userData.classType && userData.modelClass === props.activeType?.modelClass;
+    }
+  }
+  function getFrameIndexByEvent(event: MouseEvent): number {
+    const frameIndex = Math.ceil((event.offsetX + 0.001) / props.spanWidth);
+    return frameIndex;
+  }
+  function onHandleEvent(event: MouseEvent, visible: boolean) {
+    if (!props.msgTip) {
+      return;
+    }
+    if (iState.msgStatus === IMsgStatus.Menu) return;
+    const frameIndex = getFrameIndexByEvent(event);
+    const userData: IUserData = props.trackList[frameIndex - 1];
+    let msgVisible = false;
+    const msg = [];
+    if (visible) {
+      if (invalid(userData, frameIndex - 1)) {
+        msg.push({ msg: editor.lang('invalid'), class: 'invalid' });
+        msgVisible = true;
+      }
+      if (userData && userData.invisibleFlag) {
+        msg.push({
+          msg: editor.lang('invisible'),
+          class: 'invisible',
+        });
+        msgVisible = true;
+      }
+      if (marked(frameIndex - 1)) {
+        msg.push({ msg: editor.lang('mark'), class: 'primary-font' });
+        msgVisible = true;
+      }
+      iState.menuIndex = frameIndex - 1;
+    } else {
+      iState.menuIndex = -1;
+    }
+    showMsg(event, msgVisible, msg);
+  }
+  function showMsg(event: MouseEvent, visible: boolean, msg: { msg: string; class: string }[]) {
+    if (!props.msgTip) return;
+    const { offsetX, offsetY, clientX, clientY, pageY } = event;
+    const { innerHeight, innerWidth } = window;
+
+    props.msgTip({
+      target: {
+        x: clientX,
+        y: innerHeight - clientY + offsetY,
+      },
+      data: {
+        msg: msg,
+      },
+      visible: visible,
+    });
+  }
+  function isMiss(item: IUserData) {
+    return item?.invisibleFlag === true;
+  }
+  function invalid(item: IUserData, index: number) {
+    // return true;
+    if (editor.state.currentTrack) {
+      const classLimitInvalid = !!item?.limitState; // class限制
+      return classLimitInvalid;
+    } else {
+      return editor.state.frames[index]?.invalid;
+    }
+  }
+  const frameDataInvalid = (index: number) => {
+    const frame = editor.state.frames[index];
+    if (!frame) return false;
+    return frame.validStatus === 'INVALID';
+  };
+  function marked(index: number) {
+    return props.annotates && props.annotates[index];
+  }
+  function onCurTrackClick(event: MouseEvent) {
+    if (props.click !== true) return;
+    const beforeIndex = editor.state.frameIndex;
+    let index = getFrameIndexByEvent(event);
+    // emit('frameIndexChange', frameIndex);
+    const total = editor.state.frames.length;
+    if (index > total) {
+      index = total;
+    }
+    editor.loadFrame(index - 1);
+    // editor.reportManager.reportChangeFrame('Time Line', beforeIndex);
+  }
+
+  function onContextMenu(event: MouseEvent) {
+    const frameIndex = getFrameIndexByEvent(event);
+    const userData: IUserData = props.trackList[frameIndex - 1];
+    if (props.msgEvent === false || !userData) {
+      return;
+    }
+    iState.msgStatus = IMsgStatus.Menu;
+    iState.menuIndex = frameIndex - 1;
+  }
+</script>
+<style lang="less">
+  .i-lineheight {
+    .i-tool-frame {
+      display: inline-block;
+      position: relative;
+      height: 100%;
+      pointer-events: none;
+      border-right: 1px solid #1e1f22;
+      transform: translateZ(0);
+
+      &.truth-value::after {
+        position: absolute;
+        right: 0;
+        bottom: 1px;
+        left: 0;
+        border: 2px solid #72c240;
+        z-index: 7;
+        height: 1px;
+        content: '';
+        // bottom: -3px;
+      }
+
+      &.no-truth-value::after {
+        position: absolute;
+        inset: 6px 1px 2px;
+        z-index: 5;
+        background: linear-gradient(to right, transparent 50%, #727272 50%);
+        background-size: 4px 100%;
+        content: '';
+        // background: repeating-linear-gradient(90deg, transparent, transparent, gray, gray, transparent, transparent 4px);
+      }
+
+      .i-tool-span {
+        position: absolute;
+        inset: 5px 0 1px;
+        // top: 14px;
+        overflow: hidden;
+        font-size: 14px;
+        text-align: center;
+        color: rgb(255 169 0);
+
+        &.default-color {
+          background-color: #474b5b;
+        }
+
+        &.model-color {
+          background-color: #ffffff;
+        }
+
+        &.no-class-color {
+          background-color: grey;
+        }
+
+        &.empty-color {
+          background-color: #303036;
+        }
+
+        &.primary-color {
+          background-color: #60a9fe;
+        }
+
+        &.invalid {
+          border: 1px solid #f8827b;
+        }
+
+        // padding-top: 40%;
+        &.active {
+          // box-shadow: 0 0 1px 1px #666666;
+          // z-index: 5;
+        }
+
+        .status-context {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+
+          &.frame-invalid {
+            border: 1px solid red;
+            z-index: 6;
+            background-size: 100% 100%;
+            background-image: url('/image/x.png');
+          }
+
+          &.miss {
+            border: 2px dashed white;
+          }
+
+          &.invalid {
+            border: 1px solid #f8827b;
+          }
+        }
+
+        .icon-context {
+          display: inline-block;
+          position: absolute;
+          top: 0;
+          left: 0;
+          z-index: 7;
+          width: 100%;
+          height: 100%;
+          line-height: 26px;
+        }
+      }
+    }
+  }
+</style>
diff --git a/frontend/image-tool/src/package/image-ui/components/FrameLine/useBottom.ts b/frontend/image-tool/src/package/image-ui/components/FrameLine/useBottom.ts
new file mode 100644
index 00000000..f876d7b8
--- /dev/null
+++ b/frontend/image-tool/src/package/image-ui/components/FrameLine/useBottom.ts
@@ -0,0 +1,304 @@
+import { reactive, onMounted, onBeforeUnmount, watch, ref } from 'vue';
+import { Event as EditorEvent, IUserData, MsgType, ToolType, utils } from '../../../image-editor';
+import PlayManager from 'image-editor/common/PlayManager';
+import * as THREE from 'three';
+import { useInjectEditor } from '../../context';
+import { debounce, throttle } from 'lodash';
+
+const COLOR = new THREE.Color();
+
+export interface IConfig {
+  noModelTrack?: boolean;
+}
+
+export type ITrackAction =
+  | 'Split'
+  | 'Delete'
+  | 'MergeTo'
+  | 'MergeFrom'
+  | 'PreSplit'
+  | 'PreMergeTo'
+  | 'PreMergeFrom'
+  | 'Cancel'
+  | '';
+export interface ITrackObject {
+  trackId: string;
+  trackName: string;
+  trackIcon?: ToolType;
+  list: IUserData[];
+}
+export type IMsgOption = {
+  target: {
+    x: number;
+    y: number;
+  };
+  data: {
+    msg: { class: string; msg: string }[];
+  };
+  visible: boolean;
+};
+
+export interface IBottomState {
+  tip: (option: IMsgOption) => void;
+  _config: IConfig;
+  colorMap: {};
+  // play
+  playSpeed: number;
+  playStart: number;
+  play: boolean;
+  animation: number;
+  // trackFlag: boolean;
+  trackSplitIndex: number;
+  annotationStatus: boolean[];
+  showAnnotation: boolean;
+  trackTargetLine: ITrackObject;
+  trackList: ITrackObject[];
+  trackSplitClass: string;
+  trackSplitTrackId: string;
+  trackMergeErrFrame: number[];
+  trackPinSelected: string;
+  trackMergeResult: ITrackObject;
+  trackAction: ITrackAction;
+  activeType: {
+    classType: any;
+    modelClass: any;
+  };
+  frameConfig: {
+    curFrameIndex: number;
+    interval: number;
+    spanWidth: number;
+    // showProcess: boolean;
+  };
+}
+export default function useBottom() {
+  const editor = useInjectEditor();
+  PlayManager.instance.init(editor);
+  const zoomContainer = ref<HTMLElement>();
+
+  const iState = reactive<IBottomState>({
+    tip: async (option: IMsgOption) => {},
+    _config: {},
+    colorMap: {},
+    playSpeed: 1,
+    playStart: 0,
+    play: false,
+    animation: 1,
+    // trackFlag: true,
+    trackList: [],
+    annotationStatus: [],
+    showAnnotation: false,
+    // trackPinList: [],
+    trackSplitIndex: -1,
+    trackSplitClass: '',
+    trackSplitTrackId: '',
+    trackTargetLine: { trackId: '', trackName: '', list: [] },
+    trackMergeResult: { trackId: '', trackName: '', list: [] },
+    trackMergeErrFrame: [],
+    trackAction: '',
+    trackPinSelected: '',
+    activeType: {
+      classType: undefined as any,
+      modelClass: undefined as any,
+    },
+    frameConfig: {
+      curFrameIndex: editor.state.frameIndex + 1,
+      interval: 5, // default 5
+      spanWidth: 18,
+      // showProcess: false,
+    },
+  });
+  watch(
+    () => editor.state.classTypes,
+    (classTypes) => {
+      const colorMap = {} as any;
+      classTypes.forEach((item) => {
+        colorMap[item.name] = item.color;
+        colorMap[`false_${item.name}`] = `#${COLOR.set(item.color).getHexString()}aa`;
+      });
+      iState.colorMap = colorMap;
+    },
+    { immediate: true },
+  );
+
+  watch(
+    () => editor.state.frameIndex,
+    () => {
+      iState.frameConfig.curFrameIndex = editor.state.frameIndex + 1;
+    },
+  );
+  watch(
+    () => editor.state.frames,
+    () => {
+      if (iState.trackTargetLine.list.length !== editor.state.frames.length) {
+        iState.trackTargetLine = emptyTrackObject();
+      }
+    },
+    {
+      immediate: true,
+    },
+  );
+
+  onMounted(() => {
+    editor.on(EditorEvent.CURRENT_TRACK_CHANGE, onSelect);
+    editor.on(EditorEvent.ANNOTATE_ADD, onUpdate);
+    // editor.playManager.on(EditorEvent.PLAY_STOP, onFrameStop);
+    // editor.cmdManager.addEventListener(EditorEvent.UNDO, onUpdate);
+    // editor.cmdManager.addEventListener(EditorEvent.REDO, onUpdate);
+    editor.hotkeyManager.bindSeriesFrameEvent();
+    if (zoomContainer.value) {
+      const container = zoomContainer.value as HTMLElement;
+      container.addEventListener('wheel', onMouseWheel);
+    }
+  });
+
+  onBeforeUnmount(() => {
+    editor.off(EditorEvent.CURRENT_TRACK_CHANGE, onSelect);
+    editor.off(EditorEvent.ANNOTATE_ADD, onUpdate);
+    // editor.playManager.off(EditorEvent.PLAY_STOP, onFrameStop);
+    // editor.cmdManager.removeEventListener(EditorEvent.UNDO, onUpdate);
+    // editor.cmdManager.removeEventListener(EditorEvent.REDO, onUpdate);
+  });
+
+  function updateAnnotationStatus() {}
+
+  function onFrameStop() {
+    iState.play = false;
+    editor.loadFrame(editor.state.frameIndex, false, true);
+  }
+
+  // ------
+  function onMouseWheel(event: WheelEvent) {
+    // return;
+
+    event.preventDefault();
+
+    if (event.deltaY < 0) {
+      if (++iState.frameConfig.spanWidth > 36) {
+        iState.frameConfig.spanWidth = 36;
+      }
+    } else {
+      if (--iState.frameConfig.spanWidth < 14) {
+        iState.frameConfig.spanWidth = 14;
+      }
+    }
+
+    iState.frameConfig.interval = iState.frameConfig.spanWidth < 18 ? 10 : 5;
+  }
+
+  const onHandleTrackAction = debounce((action: ITrackAction) => {
+    iState.trackAction = action;
+    switch (action) {
+      case 'Cancel':
+        onClear();
+        break;
+      case 'Delete':
+        onDelete();
+        break;
+      default:
+      case '':
+        break;
+    }
+  }, 100);
+  function onDelete() {
+    const trackTargetId = iState.trackTargetLine.trackId;
+    if (!trackTargetId) {
+      editor.showMsg(MsgType.warning, editor.lang('warnNoObject'));
+      return;
+    }
+    editor
+      .showConfirm({
+        title: editor.lang('btnDelete'),
+        subTitle: editor.lang('deleteTitle'),
+        okText: editor.lang('btnDelete'),
+        cancelText: editor.lang('btnCancelText'),
+        okDanger: true,
+      })
+      .then(
+        () => {
+          try {
+            editor.trackManager.deleteObjectByTrack(trackTargetId, []);
+            editor.selectObject();
+            editor.showMsg(MsgType.success, editor.lang('successDelete'));
+            onClear();
+          } catch (error) {
+            editor.showMsg(MsgType.error, editor.lang('errorDelete'));
+          }
+        },
+        () => {},
+      );
+  }
+  function updateTrackLine(force: boolean = false) {
+    const trackId = editor.state.currentTrack;
+    if (trackId && trackId === iState.trackTargetLine.trackId && !force) return;
+    if (trackId) {
+      const obj = editor.selection[0];
+      Object.assign(iState.trackTargetLine, {
+        trackId: trackId,
+        trackName: obj?.userData.trackName || '',
+        trackIcon: obj?.toolType,
+      });
+      iState.trackTargetLine.list = getTrackLine(trackId);
+      console.log('==========>>>>>>>>>', iState.trackTargetLine);
+    } else {
+      iState.trackTargetLine = emptyTrackObject();
+    }
+  }
+
+  function getTrackLine(trackId: string) {
+    const length = editor.state.frames.length;
+    if (!trackId) return Array(length);
+    const list = editor.trackManager.getAllFrameDataByTrack(trackId);
+    return list.map((item) => {
+      if (!item) return undefined;
+      //   let trueValue = item.userData.resultStatus === Const.True_Value;
+      return item.userData;
+      //   return {
+      //     ...item.userData,
+      //     trueValue: trueValue,
+      //   };
+    });
+  }
+
+  // Object userData change Event
+  const onUpdate = throttle((data: any) => {
+    updateTrackLine(true);
+  }, 200);
+
+  function emptyTrackObject(): ITrackObject {
+    const length = editor.state.frames.length;
+    return {
+      trackId: '',
+      trackName: '',
+      trackIcon: undefined,
+      list: Array(length),
+    };
+  }
+  // object select event
+  const onSelect = debounce(() => {
+    onClear();
+    updateTrackLine();
+    updateAnnotationStatus();
+  }, 200);
+  function onClear() {
+    iState.trackAction = '';
+    iState.trackMergeErrFrame = [];
+    iState.trackMergeResult = emptyTrackObject();
+    iState.trackList = [];
+    iState.trackSplitClass = '';
+    iState.trackSplitTrackId = '';
+    // iState.trackMergeResultList = [];
+    iState.trackSplitIndex = -1;
+  }
+
+  function setConfig(config?: IConfig) {
+    Object.assign(iState._config, config || {});
+  }
+  return {
+    editor,
+    iState,
+    setConfig,
+    zoomContainer,
+    updateTrackLine,
+    onHandleTrackAction,
+  };
+}
diff --git a/frontend/image-tool/src/package/image-ui/components/Loading/index.vue b/frontend/image-tool/src/package/image-ui/components/Loading/index.vue
new file mode 100644
index 00000000..747959c3
--- /dev/null
+++ b/frontend/image-tool/src/package/image-ui/components/Loading/index.vue
@@ -0,0 +1,72 @@
+<template>
+  <div class="pc-loading" v-show="state.visible">
+    <div v-show="state.type === 'loading'">
+      <LoadingOutlined /><span>{{ state.content }}</span>
+    </div>
+    <div v-show="state.type === 'error'">Load error, click<span class="retry">retry</span></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { reactive } from 'vue';
+  import { useInjectEditor } from '../../context';
+  import { StatusType } from '../../../image-editor';
+  import { LoadingOutlined } from '@ant-design/icons-vue';
+
+  // ***************Props and Emits***************
+  // const emit = defineEmits(['close']);
+  // let props = defineProps(['data']);
+  // *********************************************
+
+  type IType = 'loading' | 'error';
+
+  const editor = useInjectEditor();
+  const state = reactive({
+    visible: false,
+    content: 'loading......',
+    type: 'error' as IType,
+  });
+
+  editor.showLoading = (config) => {
+    if (config === true) {
+      editor.state.status = StatusType.Loading;
+      state.visible = true;
+      state.content = '';
+      state.type = 'loading';
+    } else if (config === false) {
+      state.visible = false;
+      editor.state.status = StatusType.Default;
+    } else {
+      editor.state.status = StatusType.Loading;
+      state.visible = true;
+      state.content = config.content;
+      state.type = config.type;
+    }
+  };
+</script>
+
+<style lang="less">
+  .pc-loading {
+    display: flex;
+    position: absolute;
+    z-index: 1000;
+    justify-content: center;
+    align-items: center;
+    background: rgb(51 51 51 / 90%);
+    font-size: 12px;
+    color: #a2a2a2;
+    inset: 0;
+
+    .anticon {
+      margin-right: 10px;
+      font-size: 30px;
+      color: #60a9fe;
+    }
+
+    .retry {
+      text-decoration: underline;
+      color: #60a9fe;
+      cursor: pointer;
+    }
+  }
+</style>
diff --git a/frontend/image-tool/src/package/image-ui/components/MainView/index.vue b/frontend/image-tool/src/package/image-ui/components/MainView/index.vue
new file mode 100644
index 00000000..1a16ea04
--- /dev/null
+++ b/frontend/image-tool/src/package/image-ui/components/MainView/index.vue
@@ -0,0 +1,52 @@
+<template>
+  <div class="image-editor-wrap">
+    <div class="editor-render" ref="dom"></div>
+    <div class="editor-components">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { onMounted, ref } from 'vue';
+  import { Editor } from '../../../image-editor';
+  import { useProvideEditor, useInjectEditor } from '../../context';
+
+  let editor = useInjectEditor();
+  if (!editor) {
+    editor = new Editor();
+    useProvideEditor(editor);
+  }
+
+  const dom = ref();
+  onMounted(() => {
+    editor.init(dom.value as any, {
+      actions: ['zoom-move', 'select-hover'],
+    });
+  });
+</script>
+
+<style lang="less">
+  .image-editor-wrap {
+    position: absolute;
+    right: 0;
+    left: 0;
+    height: 100%;
+
+    .editor-render {
+      height: 100%;
+      background: #6a6a6a;
+    }
+
+    .editor-components {
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      overflow: hidden;
+
+      > * {
+        pointer-events: visible;
+      }
+    }
+  }
+</style>
diff --git a/frontend/image-tool/src/package/image-ui/components/Modal/Confirm.ts b/frontend/image-tool/src/package/image-ui/components/Modal/Confirm.ts
new file mode 100644
index 00000000..48644605
--- /dev/null
+++ b/frontend/image-tool/src/package/image-ui/components/Modal/Confirm.ts
@@ -0,0 +1,49 @@
+import { Editor, IConfirmOption, StatusType } from '../../../image-editor';
+import { Modal } from 'ant-design-vue';
+import { createVNode } from 'vue';
+
+export default function injectConfirm(editor: Editor) {
+  editor.showConfirm = (config = {} as IConfirmOption) => {
+    const { title = '', subTitle = '', okText, okDanger, cancelText } = config;
+    editor.state.status = StatusType.Confirm;
+    return new Promise<void>((resolve, reject) => {
+      Modal.confirm({
+        // title: () => title,
+        title: () =>
+          createVNode(
+            'div',
+            {
+              style: 'white-space:pre-wrap;color:#e5e5e5',
+            },
+            title,
+          ),
+        okText,
+        cancelText,
+        cancelButtonProps: config.cancelButtonProps,
+        okButtonProps: {
+          danger: okDanger,
+        },
+        content: () =>
+          createVNode(
+            'div',
+            {
+              style: {
+                fontSize: '12px',
+                color: 'rgb(161 161 161)',
+                whiteSpace: 'pre-wrap',
+              },
+            },
+            subTitle,
+          ),
+        onOk() {
+          editor.state.status = StatusType.Default;
+          resolve();
+        },
+        onCancel() {
+          editor.state.status = StatusType.Default;
+          reject();
+        },
+      });
+    });
+  };
+}
diff --git a/frontend/image-tool/src/package/image-ui/components/Modal/CustomMessage.vue b/frontend/image-tool/src/package/image-ui/components/Modal/CustomMessage.vue
new file mode 100644
index 00000000..9cc465c4
--- /dev/null
+++ b/frontend/image-tool/src/package/image-ui/components/Modal/CustomMessage.vue
@@ -0,0 +1,43 @@
+<template>
+  <div v-show="state.editorMessage.visible">
+    <div class="custom-message">
+      <div class="custom-message-notice">
+        <div class="custom-message-content">
+          <span>{{ state.editorMessage.messgae }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { useInjectEditor } from '../../context';
+
+  const editor = useInjectEditor();
+  const { state } = editor;
+</script>
+<style lang="less" scoped>
+  .custom-message {
+    margin: 0;
+    padding: 0;
+    position: fixed;
+    top: 35px;
+    left: 0;
+    z-index: 1010;
+    width: 100%;
+    pointer-events: none;
+  }
+  .custom-message-notice {
+    padding: 8px;
+    text-align: center;
+  }
+  .custom-message-content {
+    display: inline-block;
+    padding: 10px 16px;
+    background: #647dff;
+    border-radius: 15px 0;
+    box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.48);
+    pointer-events: all;
+    user-select: none;
+  }
+</style>
diff --git a/frontend/image-tool/src/package/image-ui/components/Modal/Message.ts b/frontend/image-tool/src/package/image-ui/components/Modal/Message.ts
new file mode 100644
index 00000000..2e08693d
--- /dev/null
+++ b/frontend/image-tool/src/package/image-ui/components/Modal/Message.ts
@@ -0,0 +1,15 @@
+import { Editor, MsgType } from '../../../image-editor';
+import { message } from 'ant-design-vue';
+
+const defaultConfig = {
+  maxCount: 1,
+  duration: 3,
+};
+message.config(defaultConfig);
+
+export default function injectMessage(editor: Editor) {
+  editor.showMsg = (type: MsgType, msg: string, config?: Object) => {
+    message.config({ ...defaultConfig, ...config });
+    message[type](msg);
+  };
+}
diff --git a/frontend/image-tool/src/package/image-ui/components/Modal/index.vue b/frontend/image-tool/src/package/image-ui/components/Modal/index.vue
new file mode 100644
index 00000000..696a0836
--- /dev/null
+++ b/frontend/image-tool/src/package/image-ui/components/Modal/index.vue
@@ -0,0 +1,147 @@
+<template>
+  <a-modal
+    wrapClassName="base-modal"
+    v-model:visible="state.visible"
+    :title="state.title"
+    :footer="false"
+    :destroyOnClose="true"
+    v-bind="state.option"
+    @cancel="onModalCancel"
+  >
+    <component
+      v-if="state.modalName && modals[state.modalName]"
+      :is="modals[state.modalName]"
+      :data="state.modalData"
+      @ok="onOk"
+      @cancel="onCancel"
+      ref="child"
+    ></component>
+  </a-modal>
+</template>
+
+<script setup lang="ts">
+  import { reactive, ref } from 'vue';
+  import type { Component } from 'vue';
+  import { StatusType } from '../../../image-editor';
+  import { useInjectEditor } from '../../context';
+  import injectConfirm from './Confirm';
+  import injectMessage from './Message';
+  import { isBoolean } from 'lodash';
+
+  const modals: Record<string, Component> = {};
+  // ***************Props and Emits***************
+  // const emit = defineEmits(['close']);
+  // let props = defineProps(['data']);
+  // *********************************************
+
+  interface IChild {
+    valid: () => Promise<boolean>;
+    getData: () => any;
+  }
+
+  const editor = useInjectEditor();
+  let okCallBack: any = undefined;
+  let cancelCallBack: any = undefined;
+  // let modalData: any = undefined;
+  const child = ref<IChild>({} as IChild);
+  const state = reactive({
+    visible: false,
+    title: '',
+    modalName: '',
+    modalData: undefined as any,
+    banOther: false,
+    option: {
+      width: 520,
+      closable: true,
+      mask: true,
+      maskClosable: true,
+      zIndex: 1000,
+    },
+  });
+
+  injectConfirm(editor);
+  injectMessage(editor);
+
+  function onOk() {
+    console.log('onOk');
+    okCallBack && okCallBack();
+  }
+
+  function onModalCancel() {
+    console.log('onModalCancel');
+    cancelCallBack && cancelCallBack();
+  }
+
+  function onCancel() {
+    console.log('onCancel');
+    cancelCallBack && cancelCallBack();
+  }
+
+  function close() {
+    state.visible = false;
+    state.banOther = false;
+  }
+
+  function show() {
+    state.visible = true;
+  }
+  editor.registerModal = (name: string, modal: Component) => {
+    modals[name] = modal;
+  };
+
+  editor.showModal = (name: any, option = { title: '' }) => {
+    if (state.banOther) return Promise.reject();
+    if (name === false) {
+      state.visible = false;
+      return Promise.resolve();
+    }
+
+    const modal = modals[name];
+
+    editor.state.status = StatusType.Modal;
+    return new Promise((resolve, reject) => {
+      if (!modal) return reject({ msg: ` modal ${name} not exist` });
+
+      state.banOther = option.banOther;
+      state.modalData = option.data;
+      state.modalName = name;
+      state.title = option.title;
+      state.option.width = option.width || 520;
+      state.option.closable = isBoolean(option.closable) ? option.closable : true;
+      state.option.mask = isBoolean(option.mask) ? option.mask : true;
+      state.option.maskClosable = isBoolean(option.maskClosable) ? option.maskClosable : true;
+      state.option.zIndex = option.zIndex ?? 1000;
+
+      show();
+      okCallBack = async () => {
+        let data = undefined;
+        let valid = false;
+
+        try {
+          valid = await child.value.valid();
+        } catch (e) {
+          console.log(e);
+          valid = false;
+        }
+
+        if (valid) {
+          try {
+            data = child.value.getData();
+          } catch (e) {
+            console.log(e);
+            return;
+          }
+          editor.state.status = StatusType.Default;
+          close();
+          resolve(data);
+        }
+      };
+      cancelCallBack = () => {
+        state.modalName = '';
+        close();
+        editor.state.status = StatusType.Default;
+        reject({ msg: 'cancel' });
+      };
+    });
+  };
+</script>
diff --git a/frontend/image-tool/src/package/image-ui/components/MouseHelp/HelpLine.vue b/frontend/image-tool/src/package/image-ui/components/MouseHelp/HelpLine.vue
new file mode 100644
index 00000000..e3e563c7
--- /dev/null
+++ b/frontend/image-tool/src/package/image-ui/components/MouseHelp/HelpLine.vue
@@ -0,0 +1,65 @@
+<template>
+  <div class="help-line" :style="helpStyle">
+    <div v-show="lineData.showLine">
+      <div class="help-line vertical" :style="{ borderColor: lineData.lineColor }"></div>
+      <div class="help-line horizontal" :style="{ borderColor: lineData.lineColor }"></div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { computed, inject } from 'vue';
+  import { useInjectEditor } from '../../context';
+  import { IHelpLine } from '../../../image-editor';
+
+  interface IProp {
+    mousePos: { elementX: number; elementY: number };
+    zoom: number;
+  }
+
+  // ***************Props and Emits***************
+  const props = defineProps<IProp>();
+
+  const w: number = inject('ToolWidth') || 0;
+  const h: number = inject('HeaderHight') || 0;
+
+  const editor = useInjectEditor();
+  const lineData: IHelpLine = editor.state.config.helperLine;
+  const helpStyle = computed(() => {
+    return {
+      left: props.mousePos.elementX - w + 'px',
+      top: props.mousePos.elementY - h + 'px',
+    };
+  });
+</script>
+
+<style lang="less" scoped>
+  .help-line {
+    position: absolute;
+    pointer-events: none;
+
+    p {
+      transform: translateY(-100%);
+      text-align: left;
+    }
+
+    &.vertical {
+      width: 1px;
+      height: 200vh;
+      border-right: 1px solid #ffffff;
+      transform: translateY(-50%);
+    }
+
+    &.horizontal {
+      width: 200vw;
+      height: 1px;
+      border-top: 1px solid #ffffff;
+      transform: translateX(-50%);
+    }
+
+    &.circle {
+      border: 1px solid #ffffff;
+      transform: translate(-50%, -50%);
+    }
+  }
+</style>
diff --git a/frontend/image-tool/src/package/image-ui/components/MouseHelp/SizeInfo.vue b/frontend/image-tool/src/package/image-ui/components/MouseHelp/SizeInfo.vue
new file mode 100644
index 00000000..5f1f8f60
--- /dev/null
+++ b/frontend/image-tool/src/package/image-ui/components/MouseHelp/SizeInfo.vue
@@ -0,0 +1,64 @@
+<template>
+  <teleport to="body">
+    <div
+      v-show="editor.state.config.showSizeTips && showTips"
+      class="help-size"
+      :style="{
+        left: props.mousePos.elementX + 'px',
+        top: props.mousePos.elementY + 'px',
+      }"
+    >
+      <span class="size-item"> {{ sizeInfo }}</span>
+    </div>
+  </teleport>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { Event, Shape, AnnotateModeEnum } from '../../../image-editor';
+  import { useInjectEditor } from '../../context';
+  import { ShapeTool } from '../../../image-editor/ImageView';
+
+  // ***************Props and Emits***************
+  const props = defineProps<{ mousePos: { elementX: number; elementY: number } }>();
+
+  const editor = useInjectEditor();
+  editor.on(Event.TOOL_DRAW, (type: string, object: Shape, tool: ShapeTool) => {
+    updateSizeInfo('draw', type, object, tool);
+  });
+  editor.on(Event.TOOL_Edit, (type: string, object: Shape, tool: ShapeTool) => {
+    updateSizeInfo('edit', type, object, tool);
+  });
+
+  const showTips = ref(false);
+  const sizeInfo = ref('');
+  function updateSizeInfo(drawEdit: string, type: string, object: Shape, tool: ShapeTool) {
+    if (!editor.state.config.showSizeTips) return;
+    // console.log('tool info:', drawEdit, type, tool);
+    if (type === 'end' || tool.toolMode === AnnotateModeEnum.SEGMENTATION) {
+      showTips.value = false;
+      return;
+    }
+    sizeInfo.value = tool.drawInfo();
+    showTips.value = !!sizeInfo.value;
+  }
+</script>
+
+<style lang="less" scoped>
+  .help-size {
+    display: block;
+    position: absolute;
+    padding: 2px 4px;
+    border-radius: 4px;
+    z-index: 999;
+    background-color: rgb(0 0 0 / 49.8%);
+    white-space: nowrap;
+    color: #ffffff;
+    pointer-events: none;
+
+    .size-item {
+      display: inline-block;
+      margin-right: 5px;
+    }
+  }
+</style>
diff --git a/frontend/image-tool/src/package/image-ui/components/MouseHelp/index.vue b/frontend/image-tool/src/package/image-ui/components/MouseHelp/index.vue
new file mode 100644
index 00000000..9b64a65a
--- /dev/null
+++ b/frontend/image-tool/src/package/image-ui/components/MouseHelp/index.vue
@@ -0,0 +1,63 @@
+<template>
+  <div id="useMouseElement">
+    <HelpLine :mousePos="mousePos" :zoom="zoom"></HelpLine>
+    <HelpSizeInfo :mousePos="mousePos"></HelpSizeInfo>
+    <div v-show="zoomTxt" class="help-zoom">{{ zoomTxt }}</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { provide, ref, onMounted } from 'vue';
+
+  import HelpLine from './HelpLine.vue';
+  import HelpSizeInfo from './SizeInfo.vue';
+
+  import { useInjectEditor } from '../../context';
+  import { Event } from '../../../image-editor';
+
+  const editor = useInjectEditor();
+  editor.once(Event.INIT, initThis);
+
+  provide('HeaderHight', 54);
+  provide('ToolWidth', 50);
+
+  const mousePos = ref<{ elementX: number; elementY: number }>({ elementX: 0, elementY: 0 });
+  const zoom = ref(0);
+  const zoomTxt = ref('');
+  let zoomTimerId: any;
+
+  function initThis() {
+    editor.mainView.on(Event.ZOOM, (data, showTips = true) => {
+      zoom.value = data;
+      if (!showTips) return;
+      if (zoomTimerId) clearTimeout(zoomTimerId);
+      zoomTxt.value = (data * 100).toFixed(0) + '%';
+      zoomTimerId = setTimeout(() => {
+        zoomTimerId = undefined;
+        zoomTxt.value = '';
+      }, 1000);
+    });
+  }
+  onMounted(() => {
+    document.addEventListener('mousemove', (e) => {
+      mousePos.value = {
+        elementX: e.clientX,
+        elementY: e.clientY,
+      };
+    });
+  });
+</script>
+
+<style lang="less" scoped>
+  .help-zoom {
+    display: block;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    padding: 6px 10px;
+    border-radius: 10px;
+    background-color: rgb(0 0 0 / 49.8%);
+    color: #ffffff;
+    pointer-events: none;
+  }
+</style>
diff --git a/frontend/image-tool/src/package/image-ui/components/ObjectText/class-text.vue b/frontend/image-tool/src/package/image-ui/components/ObjectText/class-text.vue
new file mode 100644
index 00000000..429d4247
--- /dev/null
+++ b/frontend/image-tool/src/package/image-ui/components/ObjectText/class-text.vue
@@ -0,0 +1,28 @@
+<template>
+  <div class="object-title">
+    <div
+      v-for="item in data"
+      :key="item.objectId"
+      class="item"
+      :style="{
+        transform: `translate(${item.x}px, ${item.y}px)`,
+        zIndex: item.zindex ?? 0,
+      }"
+    >
+      <div class="item-class-title" :style="{ background: item.color }">
+        <label v-show="item.trackName"> #{{ item.trackName }}&nbsp; </label>
+        <label>
+          {{ item.className }}
+        </label>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ITextItem } from './type';
+
+  defineProps<{ data: ITextItem[] }>();
+</script>
+
+<style lang="less" scoped></style>
diff --git a/frontend/image-tool/src/package/image-ui/components/ObjectText/index.vue b/frontend/image-tool/src/package/image-ui/components/ObjectText/index.vue
new file mode 100644
index 00000000..082b21cd
--- /dev/null
+++ b/frontend/image-tool/src/package/image-ui/components/ObjectText/index.vue
@@ -0,0 +1,91 @@
+<template>
+  <div :style="getStyleFromStage()" class="all-object-tags">
+    <ClassText :data="classTags" v-show="config.showClassTitle" />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { StyleValue, onMounted, ref } from 'vue';
+  import { Event } from 'image-editor';
+  import { useInjectEditor } from '../../context';
+  import { ITextItem } from './type';
+  import useTags from './useTags';
+
+  //ui
+  import ClassText from './class-text.vue';
+
+  const editor = useInjectEditor();
+  const config = editor.state.config;
+  const classTags = ref<ITextItem[]>([]);
+
+  const { getClassTags } = useTags();
+  onMounted(() => {
+    editor.on(Event.DRAW, update);
+  });
+
+  function update() {
+    const root = editor.mainView.getRoot();
+    if (!root) {
+      classTags.value = [];
+      return;
+    }
+    const { showClassTitle } = config;
+    if (!showClassTitle) return;
+    const objects = root.allObjects.filter((e) => root.renderFilter(e) && e.showVisible);
+
+    const { classTexts } = getClassTags(objects);
+    classTags.value = classTexts;
+    // console.log('=========>>>>>>>>', classTags);
+  }
+  function getStyleFromStage(): StyleValue {
+    if (!editor.mainView) return {};
+    const { stage } = editor.mainView;
+    const stagePos = stage.position();
+    return {
+      left: `${stagePos.x}px`,
+      top: `${stagePos.y}px`,
+      rotate: `${editor.mainView.stage.rotation()}deg`,
+    };
+  }
+</script>
+
+<style lang="less">
+  .all-object-tags {
+    position: absolute;
+    transform-origin: 0 0;
+    // border: '1px solid green',
+  }
+  .object-title {
+    position: absolute;
+    user-select: none;
+    pointer-events: none;
+
+    .item {
+      display: flex;
+      position: absolute;
+      margin-top: -24px;
+      height: 22px;
+      font-size: 12px;
+      white-space: nowrap;
+      color: white;
+      flex-direction: row;
+      gap: 1px;
+      line-height: 22px;
+      pointer-events: none;
+      transform-origin: 0 110%;
+      // opacity: 0.8;
+      &-class-title {
+        padding: 0 6px;
+        border-radius: 4px;
+        background: rgb(255 0 0);
+      }
+
+      &-invalid {
+        padding: 0 6px;
+        border-radius: 4px;
+        background-color: #ffffff;
+        color: #fcb17a;
+      }
+    }
+  }
+</style>
diff --git a/frontend/image-tool/src/package/image-ui/components/ObjectText/type.ts b/frontend/image-tool/src/package/image-ui/components/ObjectText/type.ts
new file mode 100644
index 00000000..5addc415
--- /dev/null
+++ b/frontend/image-tool/src/package/image-ui/components/ObjectText/type.ts
@@ -0,0 +1,9 @@
+export interface ITextItem {
+  objectId: string;
+  x: number;
+  y: number;
+  trackName: string;
+  className: string;
+  color: string;
+  zindex?: number;
+}
diff --git a/frontend/image-tool/src/package/image-ui/components/ObjectText/useTags.ts b/frontend/image-tool/src/package/image-ui/components/ObjectText/useTags.ts
new file mode 100644
index 00000000..e1777548
--- /dev/null
+++ b/frontend/image-tool/src/package/image-ui/components/ObjectText/useTags.ts
@@ -0,0 +1,40 @@
+import { AnnotateObject, utils } from 'image-editor';
+import { useInjectEditor } from '../../context';
+import { ITextItem } from './type';
+
+export default function useTags() {
+  const editor = useInjectEditor();
+  /**
+   * result class tag
+   */
+  function getObjectInfo(obj: AnnotateObject) {
+    const userData = editor.getUserData(obj);
+    const { trackName } = userData;
+    const classConfig = editor.getClassType(userData.classId || '');
+    const isModel = !userData.classId && userData.modelClass;
+
+    const scale = editor.mainView.stage.scaleX();
+    const textPos = utils.getShapeRealPoint(obj, [obj.getTextPosition()])[0];
+    const pos = { x: textPos.x * scale, y: textPos.y * scale };
+    let className = isModel
+      ? userData.modelClass
+      : classConfig?.name || editor.lang('Class Required');
+    let color = isModel ? '#ccc' : classConfig?.color || '#f00';
+    const zindex = obj.state.select ? 9 : 1;
+    const info: ITextItem[] = [{ ...pos, trackName, className, color, zindex, objectId: obj.uuid }];
+
+    return info;
+  }
+  function getClassTags(objs: AnnotateObject[]) {
+    const classTexts: ITextItem[] = [];
+    objs.forEach((obj) => {
+      const info = getObjectInfo(obj);
+      classTexts.push(...info);
+    });
+    return { classTexts };
+  }
+
+  return {
+    getClassTags,
+  };
+}
diff --git a/frontend/image-tool/src/package/image-ui/components/Tools/components/ModelConfig.vue b/frontend/image-tool/src/package/image-ui/components/Tools/components/ModelConfig.vue
new file mode 100644
index 00000000..3445cc3c
--- /dev/null
+++ b/frontend/image-tool/src/package/image-ui/components/Tools/components/ModelConfig.vue
@@ -0,0 +1,227 @@
+<template>
+  <a-tooltip
+    trigger="click"
+    placement="right"
+    v-model:visible="iState.visible"
+    @visibleChange="updateMapClassList()"
+  >
+    <span
+      class="tool-trigger"
+      :style="{
+        color: iState.visible ? 'rgb(23, 125, 220)' : '',
+      }"
+      title="Setting"
+    >
+      <EllipsisOutlined style="font-size: 14px; border-top: 1px solid #4e4e4e" />
+    </span>
+    <template #title>
+      <div ref="containerRef" class="tool-info-tooltip" style="width: 230px; padding: 0 4px">
+        <div
+          style="padding-bottom: 4px; font-size: 14px; color: white; border-bottom: 1px solid gray"
+        >
+          {{ editor.lang('AI Annotation Setting') }}
+        </div>
+        <div class="title2">
+          <span style="vertical-align: middle; margin-right: 10px">
+            {{ editor.lang('Model') }}
+          </span>
+        </div>
+        <div class="title2">
+          <a-select
+            :getPopupContainer="() => containerRef"
+            v-model:value="modelConfig.model"
+            style="width: 100%; font-size: 12px"
+            :options="options"
+            :field-names="{ label: 'name', value: 'name' }"
+          >
+          </a-select>
+        </div>
+        <div class="title2">
+          <a-checkbox v-model:checked="modelConfig.predict">
+            {{ editor.lang('Predict all in Model') }}
+          </a-checkbox>
+        </div>
+        <div v-show="!modelConfig.predict">
+          <div v-show="modelConfig.confidence.length > 1">
+            <div class="title2">{{ editor.lang('Confidence') }}</div>
+            <div class="title2" style="display: flex; flex-direction: row">
+              <div>
+                <a-input-number
+                  v-model:value="modelConfig.confidence[0]"
+                  size="small"
+                  :min="0"
+                  :max="modelConfig.confidence[1]"
+                  :step="0.1"
+                  style="width: 60px"
+                ></a-input-number>
+              </div>
+              <div style="flex: 1">
+                <a-slider
+                  range
+                  style="margin-right: 10px; padding: 0"
+                  v-model:value="modelConfig.confidence"
+                  :min="0"
+                  :max="1"
+                  :step="0.1"
+                />
+              </div>
+              <div>
+                <a-input-number
+                  v-model:value="modelConfig.confidence[1]"
+                  size="small"
+                  :min="modelConfig.confidence[0]"
+                  :max="1"
+                  :step="0.1"
+                  style="width: 60px"
+                />
+              </div>
+            </div>
+          </div>
+          <div class="title2">
+            <span style="margin-right: 10px">{{ editor.lang('Model Classes') }}</span>
+            <a @click.prevent.stop="() => onSelectAll()">
+              {{ flag ? editor.lang('Select all') : editor.lang('Unselect all') }}
+            </a>
+          </div>
+          <div class="title2" style="max-height: 60vh; overflow-y: auto">
+            <a-tag
+              style="user-select: none; cursor: pointer"
+              :color="tag.selected ? '#177ddc' : ''"
+              v-for="tag in curClasses"
+              :key="tag.value"
+              v-show="tag.isShow"
+              @click="() => onTagSwitch(tag)"
+            >
+              {{ tag.label }}
+              <CloseOutlined />
+            </a-tag>
+          </div>
+        </div>
+        <div
+          class="title2"
+          style="margin-top: 10px; padding-top: 6px; text-align: right; border-top: 1px solid gray"
+        >
+          <a-button size="small" @click="onReset" style="margin-right: 10px">
+            {{ editor.lang('Reset') }}
+          </a-button>
+          <a-button :loading="loading" size="small" @click="onModelRun" type="primary">
+            {{ editor.lang('Apply and Run') }}
+          </a-button>
+        </div>
+      </div>
+    </template>
+  </a-tooltip>
+</template>
+<script lang="ts" setup>
+  import { CloseOutlined, EllipsisOutlined } from '@ant-design/icons-vue';
+  import { computed, watch, ref, reactive } from 'vue';
+  import { useInjectEditor } from '../../../context';
+  import { IModel, IModelClass, LoadStatus } from 'image-editor';
+
+  // ***************Props and Emits***************
+  const emit = defineEmits(['cancel', 'ok']);
+
+  const editor = useInjectEditor();
+  const { state } = editor;
+  const containerRef = ref(null);
+  const iState = reactive({
+    visible: false,
+    mapClassList: [] as IModelClass[],
+  });
+  const modelConfig = state.modelConfig;
+  const loading = computed(() => {
+    const frame = editor.getCurrentFrame();
+    return frame?.model?.state === LoadStatus.LOADING;
+  });
+  const options = computed(() => {
+    return state.models;
+  });
+  const updateMapClassList = () => {
+    if (!iState.visible) return;
+    const model = state.models.find((e) => e.name === modelConfig.model) as IModel;
+    let list = [] as IModelClass[];
+    if (model && model.mapClass) {
+      const curClassMap = modelConfig.classes[modelConfig.model];
+      list = Object.values(model.mapClass).map((e) => {
+        const mapClass = e.modelClasses.map((mc: any) => {
+          if (curClassMap[mc.code]) curClassMap[mc.code].isShow = false;
+          return mc.code;
+        });
+        return {
+          label: e.className,
+          value: e.classId,
+          selected: true,
+          isShow: true,
+          mapClass,
+        } as IModelClass;
+      });
+    }
+    iState.mapClassList = list;
+  };
+  watch(
+    () => modelConfig.model,
+    () => {
+      const model = state.models.find((e) => e.name === modelConfig.model) as IModel;
+      modelConfig.code = model?.code || '';
+      modelConfig.confidence = [0.5, 1];
+      const classes = model?.classes || [];
+      if (modelConfig.model && !modelConfig.classes[modelConfig.model]) {
+        const classMap: Record<string, IModelClass> = {};
+        classes.forEach((modelClass) => {
+          classMap[modelClass.code] = {
+            code: modelClass.code,
+            name: modelClass.name,
+            label: modelClass.name,
+            value: modelClass.code,
+            selected: true,
+            isShow: true,
+          };
+        });
+        modelConfig.classes[modelConfig.model] = classMap;
+      }
+      if (model) updateMapClassList();
+    },
+    { immediate: true },
+  );
+  watch(
+    () => [options.value],
+    () => {
+      const model = options.value[0];
+      if (model) modelConfig.model = model.name;
+    },
+    { immediate: true },
+  );
+  /**
+   * model class
+   */
+  const curClasses = computed(() => {
+    return (Object.values(modelConfig.classes[modelConfig.model]) || []) as IModelClass[];
+  });
+  const flag = computed(() => {
+    return !!curClasses.value.find((item) => !item.selected && item.isShow);
+  });
+
+  const onTagSwitch = function (classTag: IModelClass) {
+    if (!classTag.isShow) return;
+    classTag.selected = !classTag.selected;
+    if (classTag.mapClass) {
+      classTag.mapClass.forEach((code) => {
+        const item = modelConfig.classes[modelConfig.model][code];
+        item && (item.selected = classTag.selected);
+      });
+    }
+  };
+  function onSelectAll(selected?: boolean) {
+    const _flag = typeof selected === 'boolean' ? selected : flag.value;
+    Object.values(modelConfig.classes[modelConfig.model]).forEach((item) => {
+      item.isShow && (item.selected = _flag);
+    });
+  }
+  function onReset() {
+    modelConfig.confidence = [0.5, 1];
+    onSelectAll(true);
+  }
+  function onModelRun() {
+    editor.runModel();
+  }
+</script>
diff --git a/frontend/image-tool/src/package/image-ui/components/Tools/components/Rotate.vue b/frontend/image-tool/src/package/image-ui/components/Tools/components/Rotate.vue
new file mode 100644
index 00000000..fe4203ce
--- /dev/null
+++ b/frontend/image-tool/src/package/image-ui/components/Tools/components/Rotate.vue
@@ -0,0 +1,68 @@
+<template>
+  <div class="tool-item" title="" @click="resetScale()">
+    <i class="iconfont icon-reset"></i>
+    <a-tooltip placement="right" trigger="hover">
+      <template #title>
+        <div class="rotate-actions">
+          <div class="actions-item" @click="onRotate(0)">
+            <i class="iconfont icon-reset" />
+          </div>
+          <div class="actions-item" @click="onRotate(-90)">
+            <i class="iconfont icon-rotate270" />
+          </div>
+          <div class="actions-item" @click="onRotate(90)">
+            <i class="iconfont icon-rotate90" />
+          </div>
+        </div>
+      </template>
+      <i class="iconfont icon-transform default-icon"></i>
+    </a-tooltip>
+    <p>{{ `R:${rotateTxt}` }}</p>
+    <p>{{ `Z:${zoomTxt}` }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import { useInjectEditor } from '../../../context';
+  import { Event } from '../../../../image-editor';
+
+  const editor = useInjectEditor();
+  editor.once(Event.INIT, initThis);
+
+  const zoomTxt = ref('');
+  const rotateTxt = ref('0°');
+
+  function initThis() {
+    editor.mainView.on(Event.ZOOM, (data) => {
+      zoomTxt.value = (data * 100).toFixed(0) + '%';
+    });
+    editor.mainView.on(Event.ROTATE, (data) => {
+      rotateTxt.value = data.toFixed(0) + '°';
+    });
+  }
+  function resetScale() {
+    editor.mainView.fitBackgroundAsRatio();
+  }
+  function onRotate(r: number) {
+    if (r !== 0) r += editor.mainView.stage.rotation();
+    r = ((r % 360) + 360) % 360;
+    editor.mainView.rotateAroundCenter(r);
+  }
+</script>
+
+<style lang="less" scoped>
+  .rotate-actions {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+
+    .actions-item {
+      cursor: pointer;
+
+      &:hover {
+        color: #57ccef;
+      }
+    }
+  }
+</style>
diff --git a/frontend/image-tool/src/package/image-ui/components/Tools/components/Setting.vue b/frontend/image-tool/src/package/image-ui/components/Tools/components/Setting.vue
new file mode 100644
index 00000000..309d0296
--- /dev/null
+++ b/frontend/image-tool/src/package/image-ui/components/Tools/components/Setting.vue
@@ -0,0 +1,419 @@
+<template>
+  <div class="setting">
+    <div class="title1 border-bottom">{{ lang('Setting') }}</div>
+    <div class="wrap">
+      <!-- Image -->
+      <div class="title2">
+        <span style="vertical-align: middle; margin-right: 10px">
+          {{ lang('Image') }}
+        </span>
+      </div>
+      <div class="wrap">
+        <a-row class="setting-item">
+          <a-col :span="18" class="title">
+            <span class="item-title">{{ lang('imageSmoothing') }}</span>
+          </a-col>
+          <a-col :span="6">
+            <a-switch
+              v-model:checked="config.imageSmoothing"
+              checked-children="On"
+              un-checked-children="Off"
+            />
+          </a-col>
+        </a-row>
+        <a-row class="setting-item">
+          <a-col :span="9" class="title">
+            <span class="item-title">{{ lang('Brightness') }}</span>
+          </a-col>
+          <a-col :span="15" class="item-value">
+            <a-slider v-model:value="config.brightness" :min="-100" :max="100" :step="1" />
+            <span>{{ config.brightness }}</span>
+          </a-col>
+        </a-row>
+        <a-row class="setting-item">
+          <a-col :span="9" class="title">
+            <span class="item-title">{{ lang('Contrast') }}</span>
+          </a-col>
+          <a-col :span="15" class="item-value">
+            <a-slider v-model:value="config.contrast" :min="-100" :max="100" :step="1" />
+            <span>{{ config.contrast }}</span>
+          </a-col>
+        </a-row>
+      </div>
+      <div class="divider"></div>
+      <!-- Result -->
+      <div class="title2">
+        <span style="vertical-align: middle; margin-right: 10px">{{ lang('Result') }}</span>
+      </div>
+      <div class="wrap">
+        <a-row class="setting-item">
+          <a-col :span="9" class="title">
+            <span class="item-title">{{ lang('Opacity') }}</span>
+          </a-col>
+          <a-col :span="15" class="item-value">
+            <a-slider v-model:value="config.baseFillOpacity" :min="0" :max="1" :step="0.01" />
+            <span> {{ config.baseFillOpacity }}</span>
+          </a-col>
+        </a-row>
+        <a-row class="setting-item">
+          <a-col :span="9" class="title">
+            <span class="item-title">{{ lang('Border Width') }}</span>
+          </a-col>
+          <a-col :span="15" class="item-value">
+            <a-slider v-model:value="config.strokeWidth" :min="1" :max="5" :step="1" />
+            <span> {{ config.strokeWidth }}px</span>
+          </a-col>
+        </a-row>
+
+        <a-row class="setting-item">
+          <a-col :span="18" class="title">
+            <span class="item-title">{{ lang('Show Size') }}</span>
+            <i class="iconfont icon-hotkey item-hotkey"></i>
+            <span>B</span>
+          </a-col>
+          <a-col :span="6">
+            <a-switch
+              v-model:checked="config.showSizeTips"
+              checked-children="On"
+              un-checked-children="Off"
+            />
+          </a-col>
+        </a-row>
+        <a-row class="setting-item">
+          <a-col :span="18" class="title">
+            <span class="item-title">{{ lang('Show Class') }}</span>
+            <i class="iconfont icon-hotkey item-hotkey"></i>
+            <span>M</span>
+          </a-col>
+          <a-col :span="6">
+            <a-switch
+              v-model:checked="config.showClassTitle"
+              checked-children="On"
+              un-checked-children="Off"
+            />
+          </a-col>
+        </a-row>
+      </div>
+      <div class="divider"></div>
+      <!--  Other-->
+      <div class="title2">
+        <span style="vertical-align: middle; margin-right: 10px">{{ lang('Other') }}</span>
+      </div>
+      <div class="wrap">
+        <a-row class="setting-item">
+          <a-col :span="18" class="title">
+            <span class="item-title">{{ lang('Auxiliary Line') }}</span>
+            <i class="item-hotkey iconfont icon-hotkey"></i>
+            <span>Y</span>
+          </a-col>
+          <a-col :span="6">
+            <a-switch
+              v-model:checked="config.helperLine.showLine"
+              checked-children="On"
+              un-checked-children="Off"
+            />
+          </a-col>
+        </a-row>
+        <a-row class="setting-item" v-show="config.helperLine.showLine">
+          <a-col :span="3">
+            <a-tooltip trigger="click">
+              <template #title>
+                <ColorPicker
+                  v-model:pure-color="config.helperLine.lineColor"
+                  format="hex8"
+                  picker-type="chrome"
+                  :isWidget="true"
+                  disableHistory
+                />
+              </template>
+              <div
+                class="color-picker-item"
+                :style="{ backgroundColor: config.helperLine.lineColor }"
+              ></div>
+            </a-tooltip>
+          </a-col>
+          <a-col :span="21">
+            {{ config.helperLine.lineColor }}
+          </a-col>
+        </a-row>
+        <a-row class="setting-item">
+          <a-col :span="18" class="title">
+            <span class="item-title">{{ lang('BisectrixLine') }}</span>
+          </a-col>
+          <a-col :span="6">
+            <a-switch
+              v-model:checked="config.bisectrixLine.enable"
+              checked-children="On"
+              un-checked-children="Off"
+            />
+          </a-col>
+        </a-row>
+        <a-row class="setting-item" v-show="config.bisectrixLine.enable">
+          <a-col :span="12">
+            <span style="margin-right: 4px">{{ lang('horizontal') }}</span>
+            <a-input-number
+              :disabled="!config.bisectrixLine.enable"
+              v-model:value="config.bisectrixLine.horizontal"
+              size="small"
+              :min="2"
+              :step="1"
+              :max="10"
+              style="width: 50px"
+            />
+          </a-col>
+          <a-col :span="12">
+            <span style="margin-right: 4px">{{ lang('vertical') }}</span>
+            <a-input-number
+              :disabled="!config.bisectrixLine.enable"
+              v-model:value="config.bisectrixLine.vertical"
+              size="small"
+              :min="2"
+              :step="1"
+              :max="10"
+              style="width: 50px"
+            />
+          </a-col>
+          <a-col :span="12">
+            <span style="margin-right: 4px">{{ lang('Width') }}</span>
+            <a-input-number
+              v-model:value="config.bisectrixLine.width"
+              size="small"
+              :min="1"
+              :step="1"
+              :max="100"
+              style="width: 50px"
+            />
+            <span>{{ lang('px') }}</span>
+          </a-col>
+          <a-col :span="3">
+            <a-tooltip trigger="click">
+              <template #title>
+                <ColorPicker
+                  v-model:pure-color="config.bisectrixLine.color"
+                  format="hex8"
+                  picker-type="chrome"
+                  :isWidget="true"
+                  disableHistory
+                />
+              </template>
+              <div
+                class="color-picker-item"
+                :style="{ backgroundColor: config.bisectrixLine.color }"
+              ></div>
+            </a-tooltip>
+          </a-col>
+          <a-col :span="9">
+            {{ config.bisectrixLine.color }}
+          </a-col>
+        </a-row>
+        <!-- display mode -->
+        <a-row class="setting-item">
+          <a-col :span="12" class="title">
+            <span class="item-title">{{ lang('Display Mode') }}</span>
+          </a-col>
+          <a-col :span="12">
+            <a-radio-group v-model:value="config.viewType" size="small">
+              <a-radio-button :value="DisplayModeEnum.MARK">Mark</a-radio-button>
+              <a-radio-button :value="DisplayModeEnum.MASK">Mask</a-radio-button>
+            </a-radio-group>
+          </a-col>
+        </a-row>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { watch } from 'vue';
+  import { throttle } from 'lodash';
+  import { ColorPicker } from 'vue3-colorpicker';
+  import 'vue3-colorpicker/style.css';
+  import { useInjectEditor } from '../../../context';
+  import { DisplayModeEnum } from '../../../../image-editor';
+  import { BackgroundGroup } from 'image-editor/ImageView';
+
+  const editor = useInjectEditor();
+  const config = editor.state.config;
+  const lang = editor.lang;
+
+  const update = throttle((type: string) => {
+    switch (type) {
+      case 'canvasStyle': {
+        BackgroundGroup.getInstance().updateBackgroundStyle();
+        break;
+      }
+      case 'imageSmoothing': {
+        editor.mainView.imageSmoothing(config.imageSmoothing);
+        break;
+      }
+      case 'shapeStyle': {
+        config.baseLineWidth = config.strokeWidth - 1;
+        editor.mainView.draw();
+        break;
+      }
+      case 'viewType': {
+        editor.mainView.updateBGDisplayModel();
+        break;
+      }
+      case 'bisectrixLine': {
+        BackgroundGroup.getInstance().updateEquisector();
+        break;
+      }
+    }
+  }, 200);
+
+  watch(
+    () => [config.brightness, config.contrast],
+    () => {
+      update('canvasStyle');
+    },
+  );
+  watch(
+    () => config.imageSmoothing,
+    () => {
+      update('imageSmoothing');
+    },
+  );
+  watch(
+    () => [config.baseFillOpacity, config.strokeWidth],
+    () => {
+      update('shapeStyle');
+    },
+  );
+  watch(
+    () => [config.viewType],
+    () => {
+      update('viewType');
+    },
+  );
+  watch(
+    () => [config.bisectrixLine],
+    () => {
+      update('bisectrixLine');
+    },
+    { deep: true },
+  );
+</script>
+
+<style lang="less">
+  .setting {
+    .divider {
+      margin: 20px 0;
+      border-bottom: 1px solid rgb(122 122 122);
+    }
+
+    .setting-item {
+      display: flex;
+      margin-bottom: 10px;
+      justify-content: space-between;
+      align-items: center;
+
+      .ant-slider {
+        //   width: 100px;
+        margin: 6px;
+        flex: 75% 0 1;
+      }
+
+      .item-value {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      .help-radios {
+        display: flex;
+        margin-bottom: 10px;
+        justify-content: space-around;
+        align-items: center;
+        font-size: 12px;
+        gap: 8px;
+        line-height: 30px;
+
+        .icon {
+          font-size: 16px;
+        }
+
+        .item-inputs {
+          display: flex;
+          gap: 6px;
+        }
+
+        .input-width {
+          max-width: 50px;
+        }
+
+        .item-delete {
+          font-size: 16px;
+          color: rgb(249 112 102);
+          cursor: pointer;
+        }
+      }
+
+      .help-add {
+        display: flex;
+        padding: 0 40px 0 20px;
+        justify-content: space-between;
+        width: 100%;
+        flex-direction: row;
+
+        label {
+          color: #57ccef;
+          cursor: pointer;
+
+          &:hover {
+            color: #177ddc;
+          }
+        }
+      }
+
+      .vc-color-wrap {
+        width: 20px;
+        height: 20px;
+      }
+
+      .color-picker-item {
+        border: 1px solid #000000;
+        width: 20px;
+        height: 20px;
+        cursor: pointer;
+      }
+    }
+
+    .item-help {
+      flex-direction: column;
+      gap: 2px;
+
+      .ant-input-number {
+        height: 24px;
+      }
+
+      .ant-input,
+      .ant-input-number-input {
+        padding: 0 6px;
+        border: 1px solid #717171;
+        height: 24px;
+        font-size: 12px;
+      }
+
+      .ant-radio-wrapper {
+        margin: 0;
+      }
+    }
+
+    .reset {
+      border: 1px solid #6d7278;
+      float: right;
+      font-size: 12px;
+      color: #6d7278;
+    }
+
+    .item-title {
+      white-space: nowrap;
+    }
+
+    .item-hotkey {
+      margin: 3px 5px 0;
+      font-size: 12px;
+    }
+  }
+</style>
diff --git a/frontend/image-tool/src/package/image-ui/components/Tools/components/ToolItem.vue b/frontend/image-tool/src/package/image-ui/components/Tools/components/ToolItem.vue
new file mode 100644
index 00000000..c328d43c
--- /dev/null
+++ b/frontend/image-tool/src/package/image-ui/components/Tools/components/ToolItem.vue
@@ -0,0 +1,144 @@
+<template>
+  <a-tooltip placement="right" trigger="hover">
+    <template #title>
+      <div style="display: flex; align-items: center">
+        <span>{{ item.title }}</span>
+        <i
+          v-if="item.hotkey"
+          style="margin: 3px 5px 0; font-size: 14px"
+          class="iconfont icon-hotkey"
+        ></i>
+        <span>{{ item.hotkey }}</span>
+      </div>
+    </template>
+    <span
+      :class="{
+        active: item.isActive(editor),
+        'tool-item': true,
+        'tool-extra': item.extraClass,
+      }"
+      :loading="true"
+      @click="onTool(item.action)"
+    >
+      <span style="margin: 3px 0 0">
+        <ToolIcon :tool="item.getIcon(editor)" />
+      </span>
+      <i class="msg" v-show="item.hasMsg && item.hasMsg(editor)">+</i>
+    </span>
+  </a-tooltip>
+  <component v-if="item.extra" :is="item.extra(editor)" @callbackOntool="callbackOntool" />
+</template>
+
+<script setup lang="ts">
+  import { useInjectEditor } from '../../../context';
+  import { IToolItemConfig, ToolIcon } from '../../../../image-editor';
+
+  defineProps<{ item: IToolItemConfig }>();
+  const emit = defineEmits(['onItemClick']);
+
+  const editor = useInjectEditor();
+
+  const onTool = (name: string) => {
+    emit('onItemClick', name);
+  };
+  const callbackOntool = (name: string) => {
+    if (editor.state.activeTool === name) return;
+    emit('onItemClick', name);
+  };
+</script>
+
+<style lang="less">
+  .tool-item {
+    display: flex;
+    position: relative;
+    margin: 4px 0;
+    padding: 5px 0;
+    border-radius: 4px;
+    justify-content: center;
+    align-items: center;
+    width: 38px;
+    background: #1e1f22;
+    color: #bec1ca;
+    flex-direction: column;
+    cursor: pointer;
+
+    p {
+      margin: 0;
+      font-size: 10px;
+    }
+
+    .icon-reset {
+      padding: 2px 0;
+      width: 100%;
+    }
+
+    .default-icon {
+      position: absolute;
+      top: 5px;
+      width: 100%;
+      background: #1e1f22;
+      text-align: center;
+
+      &:hover {
+        opacity: 0;
+      }
+    }
+
+    .msg {
+      display: inline-block;
+      position: absolute;
+      top: 2px;
+      right: 2px;
+      border-radius: 30px;
+      width: 14px;
+      height: 14px;
+      background: red;
+      font-size: 16px;
+      font-style: normal;
+      text-align: center;
+      color: white;
+      line-height: 14px;
+    }
+
+    .tool-label {
+      overflow: auto;
+      font-size: 12px;
+    }
+
+    .anticon,
+    .iconfont {
+      font-size: 18px;
+    }
+
+    &:disabled {
+      background: #6d7278;
+    }
+
+    &:hover {
+      .iconfont {
+        color: #57ccef;
+      }
+    }
+
+    &.active {
+      background: #57ccef;
+      color: #dee5eb;
+
+      .iconfont {
+        color: #dee5eb;
+      }
+
+      .interactive {
+        color: #57ccef;
+      }
+    }
+  }
+
+  .tool-extra {
+    margin-top: 4;
+    margin-bottom: 0;
+    padding-bottom: 5px;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+</style>
diff --git a/frontend/image-tool/src/package/image-ui/components/Tools/index.vue b/frontend/image-tool/src/package/image-ui/components/Tools/index.vue
new file mode 100644
index 00000000..4519f4d0
--- /dev/null
+++ b/frontend/image-tool/src/package/image-ui/components/Tools/index.vue
@@ -0,0 +1,385 @@
+<template>
+  <div class="pc-editor-tool tool-top" :class="editor.state.activeTool">
+    <template v-for="item in toolState.fixedItems" :key="item.action">
+      <ToolItem :item="item" @onItemClick="onTool" />
+    </template>
+    <div class="divider" v-show="toolState.toolItems.length > 0"></div>
+    <div
+      ref="container"
+      class="drag-tool-list"
+      @dragover="(e) => e.preventDefault()"
+      @dragend.stop="handleDragend()"
+    >
+      <div
+        v-for="item in toolState.toolItems"
+        :key="item.action"
+        draggable="true"
+        @dragstart.stop="handleDragstart($event, item)"
+        @dragover.stop="onDragOver($event, item)"
+      >
+        <ToolItem :item="item" @onItemClick="onTool" />
+      </div>
+      <div
+        class="drag-line"
+        v-show="state.showDragLine"
+        :style="{ left: '0px', top: state.holderY + 'px' }"
+      ></div>
+    </div>
+    <div class="divider" v-show="toolState.modelItems.length > 0"></div>
+    <template v-for="item in toolState.modelItems" :key="item.action">
+      <ToolItem :item="item" @onItemClick="onTool" />
+    </template>
+    <div class="item-float-content" v-show="state.showTool && !editor.state.activeTool">
+      <span v-show="state.showHollowTool">
+        <a-tooltip trigger="hover" placement="right">
+          <template #title>Hollow out</template>
+          <div class="float-item" @click.stop="onTool('addInterior')">
+            <i class="iconfont icon-hollow" style="font-size: 20px"></i>
+          </div>
+        </a-tooltip>
+      </span>
+      <span v-show="state.showCancelHollow">
+        <a-tooltip trigger="hover" placement="right">
+          <template #title>Cancel the hollow out</template>
+          <div class="float-item" @click.stop="onTool('removeInterior')">
+            <i class="iconfont icon-cancel-hollow" style="font-size: 20px"></i>
+          </div>
+        </a-tooltip>
+      </span>
+
+      <div class="cut-tool-content" v-show="state.showCutTool">
+        <a-tooltip trigger="hover" placement="right">
+          <template #title>
+            <div class="display: flex;align-items: center">
+              <span>Do not crop the first objec</span>
+              <i
+                style="
+                  display: inline-block;
+                  margin: 0 5px;
+                  font-size: 14px;
+                  transform: translateY(1px);
+                "
+                class="iconfont icon-hotkey"
+              ></i>
+              <span>{{ crop1Keyboard }}</span>
+            </div>
+          </template>
+          <div class="float-item" @click.stop="onTool('clipPolygon', false)">
+            <i class="iconfont icon-crop-non-first" style="font-size: 20px"></i>
+            <span class="item-title">Crop1</span>
+          </div>
+        </a-tooltip>
+        <a-tooltip trigger="hover" placement="right">
+          <template #title>
+            <div class="display: flex;align-items: center">
+              <span>Crop the first object</span>
+              <i
+                style="
+                  display: inline-block;
+                  margin: 0 5px;
+                  font-size: 14px;
+                  transform: translateY(1px);
+                "
+                class="iconfont icon-hotkey"
+              ></i>
+              <span>{{ crop2Keyboard }}</span>
+            </div>
+          </template>
+          <div class="float-item" @click.stop="onTool('clipPolygon', true)">
+            <i class="iconfont icon-crop-first" style="font-size: 20px"></i>
+            <span class="item-title">Crop2</span>
+          </div>
+        </a-tooltip>
+      </div>
+    </div>
+  </div>
+  <div class="pc-editor-tool tool-bottom">
+    <a-tooltip placement="rightBottom" trigger="click" overlayClassName="tool-info-tooltip">
+      <template #title>
+        <Setting />
+      </template>
+      <span class="tool-item" title=""><i class="iconfont icon-setting"></i> </span>
+    </a-tooltip>
+    <Rotate />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { reactive, ref } from 'vue';
+  import _, { isNumber } from 'lodash';
+  import { useInjectEditor } from '../../context';
+  import { IToolItemConfig, Event, Polygon, OPType } from '../../../image-editor';
+  import useTool from './useTool';
+
+  import ToolItem from './components/ToolItem.vue';
+  import Setting from './components/Setting.vue';
+  import Rotate from './components/Rotate.vue';
+
+  const editor = useInjectEditor();
+  const { toolState, updateCustomHotkey, onTool } = useTool();
+  const container = ref<HTMLDivElement>();
+
+  const state = reactive({
+    showTool: false,
+    showHollowTool: false,
+    showCancelHollow: false,
+    showCutTool: false,
+    dragItem: undefined as IToolItemConfig | undefined,
+    dropItem: undefined as IToolItemConfig | undefined,
+    position: -1,
+    showDragLine: false,
+    holderY: 0,
+  });
+
+  editor.on(Event.SELECT, (data) => {
+    // if (editor.state.modeConfig.op === OPType.VIEW) {
+    //   state.showTool = false;
+    //   return;
+    // }
+    const selection = editor.selection;
+    const polygons = selection.filter((e) => e instanceof Polygon) as Polygon[];
+    const len = polygons.length;
+    state.showCutTool = len > 1;
+    state.showHollowTool = len > 1;
+    state.showCancelHollow = len === 1 && polygons[0].attrs.innerPoints?.length > 0;
+    state.showTool = state.showCutTool || state.showCancelHollow || state.showHollowTool;
+  });
+
+  const isMac = false;
+  // Title ----------------
+  const crop1Keyboard = 'X';
+  const crop2Keyboard = isMac ? '⌘ + X' : 'Ctrl + X';
+  // drag
+  const throttleConfig = {
+    leading: true,
+    trailing: false,
+  };
+
+  const throttleTm = 100;
+  const handleDragstart = (evt: MouseEvent, item: IToolItemConfig) => {
+    // console.log('dragstart===================:', item);
+    state.dragItem = item;
+  };
+  const handleDragend = () => {
+    // console.log('dragend===================');
+    const { dragItem, dropItem } = state;
+    // console.log(`${dragItem?.name} => ${dropItem?.name}`, position);
+    if (!dragItem || !dropItem) return;
+
+    dragItem.name !== dropItem.name && handleDrop();
+    state.dragItem = undefined;
+    state.dropItem = undefined;
+    state.showDragLine = false;
+  };
+  const onDragOver = _.throttle(
+    (e: MouseEvent, item: IToolItemConfig) => {
+      if (!container.value || !e.currentTarget) return;
+
+      state.dropItem = item;
+      state.showDragLine = true;
+
+      const currentTarget = e.currentTarget as HTMLDivElement;
+      const pRect = container.value.getBoundingClientRect();
+      const rect = currentTarget.getBoundingClientRect();
+      const { clientY } = e;
+      let relativeY = clientY - rect.top;
+
+      relativeY = relativeY / rect.height;
+
+      const topY = rect.top - pRect.top;
+      const bottomY = rect.bottom - pRect.top;
+
+      const position = relativeY < 0.5 ? -1 : 1;
+      const holderY = position === -1 ? topY : bottomY;
+      state.holderY = holderY;
+      state.position = position;
+    },
+    throttleTm,
+    throttleConfig,
+  );
+  function handleDrop() {
+    // console.log(evt);
+    const { dragItem, dropItem } = state;
+    if (!dragItem || !dropItem) return;
+    const dragIdx = isNumber(dragItem.order) ? dragItem.order : -1;
+    const dropIdx = isNumber(dropItem.order) ? dropItem.order : -1;
+    if (dragIdx === -1 || dropIdx === -1) return;
+    toolState.value.toolItems.splice(dragIdx, 1);
+    toolState.value.toolItems.splice(dropIdx, 0, dragItem);
+    updateCustomHotkey(toolState.value.toolItems);
+  }
+</script>
+
+<style lang="less">
+  .pc-editor-tool {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    width: 50px;
+
+    .divider {
+      border-top: 1px dashed #bdbdbd;
+      width: 38px;
+      vertical-align: middle;
+    }
+
+    .drag-tool-list {
+      position: relative;
+
+      .drag-line {
+        position: absolute;
+        top: 10px;
+        right: 0;
+        left: 0;
+        margin-top: -1px;
+        height: 2px;
+        background: #57ccef;
+      }
+    }
+
+    .item-float-content {
+      display: flex;
+      position: absolute;
+      top: 60px;
+      left: 60px;
+      padding: 10px 0;
+      border-radius: 6px;
+      z-index: 1;
+      justify-content: space-around;
+      align-items: center;
+      width: 46px;
+      background-color: #3a3a3e;
+      box-shadow: 0 6px 15px rgb(0 0 0 / 15%);
+      flex-direction: column;
+
+      .cut-tool-content {
+        margin-top: 10px;
+        padding-top: 10px;
+        width: 100%;
+        border-top: 1px solid #a1a1a1;
+      }
+
+      .float-item {
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        flex-direction: column;
+        cursor: pointer;
+
+        &:hover {
+          color: #57ccef;
+
+          .iconfont {
+            color: inherit;
+          }
+        }
+      }
+
+      .item-title {
+        padding: 4px 0;
+        font-size: 12px;
+      }
+
+      .item-img {
+        width: 24px;
+      }
+    }
+
+    .item-float-config {
+      position: absolute;
+      top: 10px;
+      left: 60px;
+      border-radius: 6px;
+      z-index: 1;
+      background-color: #3a3a3e;
+    }
+  }
+
+  .tool-top {
+    overflow-y: auto;
+    max-height: calc(100% - 120px);
+  }
+
+  .tool-bottom {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 120px;
+    flex-direction: column-reverse;
+  }
+
+  .annotation-loading,
+  .annotation-ai1 {
+    height: 24px;
+  }
+
+  .tool-info-tooltip {
+    padding: 4px;
+    border-radius: 4px;
+    overflow-y: auto;
+    width: 300px;
+    max-width: 300px;
+    min-height: 100px;
+    max-height: 95vh;
+    background: #333333;
+    font-size: 12px;
+    color: #bec1ca;
+
+    .ant-slider-handle {
+      border: solid 2px #2e8cf0;
+      background-color: #ffffff;
+    }
+
+    .ant-slider-track {
+      background-color: #2e8cf0;
+    }
+
+    .ant-tooltip-arrow {
+      display: none;
+    }
+
+    .ant-tooltip-content {
+      position: relative;
+
+      .close {
+        position: absolute;
+        top: 6px;
+        right: 6px;
+        font-size: 20px;
+        cursor: pointer;
+      }
+    }
+
+    .wrap {
+      padding-left: 8px;
+    }
+
+    .title1 {
+      // font-weight: bold;
+      font-size: 16px;
+      text-align: center;
+      color: white;
+      line-height: 36px;
+    }
+
+    .title2 {
+      // font-weight: 600;
+      font-size: 12px;
+      line-height: 30px;
+      color: white;
+    }
+
+    .title3 {
+      font-size: 12px;
+      line-height: 26px;
+    }
+  }
+
+  .tool-trigger {
+    display: flex;
+    padding-bottom: 2px;
+    justify-content: center;
+    width: 38px;
+    background-color: #1e1f22;
+  }
+</style>
diff --git a/frontend/image-tool/src/package/image-ui/components/Tools/useTool.ts b/frontend/image-tool/src/package/image-ui/components/Tools/useTool.ts
new file mode 100644
index 00000000..163c4051
--- /dev/null
+++ b/frontend/image-tool/src/package/image-ui/components/Tools/useTool.ts
@@ -0,0 +1,121 @@
+import { ref, watchEffect } from 'vue';
+import { useInjectEditor } from '../../context';
+import { Event, ToolName, toolMap, IToolItemConfig, tools } from '../../../image-editor';
+interface IToolConfig {
+  toolItems: IToolItemConfig[];
+  fixedItems: IToolItemConfig[];
+  modelItems: IToolItemConfig[];
+  polygonItems: IToolItemConfig[];
+}
+
+export default function useTool() {
+  const editor = useInjectEditor();
+  editor.on(Event.TOOL_CHANGE, onToolByHotkey);
+  editor.on(Event.UPDATE_VIEW_MODE, updateItemList);
+  editor.on(Event.CLASS_INITDATA, updateItemList);
+  editor.on(Event.MODEL_LOADED, updateItemList);
+
+  const hotKeyMap = new Map<string, ToolName>();
+  const toolState = ref<IToolConfig>({
+    toolItems: [],
+    fixedItems: [],
+    modelItems: [],
+    polygonItems: [],
+  });
+
+  function updateItemList() {
+    const { fixed, tools, model } = getCurModeTools();
+    hotKeyMap.clear();
+    const config: IToolConfig = {
+      toolItems: [],
+      fixedItems: [],
+      modelItems: [],
+      polygonItems: [],
+    };
+    config.toolItems = filterTools(tools);
+    config.fixedItems = filterTools(fixed);
+    config.modelItems = filterTools(model);
+    config.polygonItems = [] as IToolItemConfig[];
+    const list = [...config.fixedItems, ...config.modelItems, ...config.polygonItems];
+    updateFixedHotkey(list);
+    updateCustomHotkey(config.toolItems);
+    toolState.value = config;
+  }
+  watchEffect(updateItemList);
+  function getCurModeTools() {
+    return (tools as any)[editor.state.annotateMode];
+  }
+  /** filter tool*/
+  function filterTools(list: IToolItemConfig[]) {
+    return list.filter((item) => item.isDisplay(editor));
+  }
+  function updateFixedHotkey(list: IToolItemConfig[]) {
+    list.forEach((item) => {
+      const key = String(item.hotkey).toLocaleLowerCase();
+      key && hotKeyMap.set(key, item.action);
+    });
+  }
+  function updateCustomHotkey(list: IToolItemConfig[]) {
+    list.forEach((item, index) => {
+      const hotkey = ((index + 1) % 10) + '';
+      item.order = index;
+      item.hotkey = hotkey;
+      hotKeyMap.set(hotkey, item.action);
+    });
+  }
+
+  function onToolByHotkey(key: string) {
+    key = key.toLocaleLowerCase();
+    const actionName = hotKeyMap.get(key);
+    if (!actionName || !toolMap[actionName]) return;
+    onTool(actionName);
+  }
+
+  /** Select Tool */
+  function onTool(name: string, args?: any) {
+    // let config = editor.state.config;
+    console.log('select', name);
+    switch (name) {
+      case 'edit': {
+        editor.actionManager.execute('selectTool');
+        break;
+      }
+      case 'rect':
+      case 'polygon':
+      case 'polyline':
+      case 'key-point': {
+        editor.actionManager.execute('drawTool', name);
+        break;
+      }
+      case 'addInterior': {
+        editor.actionManager.execute('holeSelection', name);
+        break;
+      }
+      case 'removeInterior': {
+        editor.actionManager.execute('removeHoleSelection');
+        break;
+      }
+      case 'clipPolygon': {
+        editor.actionManager.execute('clipSelection', args);
+        break;
+      }
+      case 'model': {
+        // if (editor.mainView.currentDrawTool?.doing()) {
+        //   return editor.showMsg('warning', editor.lang('resultNotComplete'));
+        // }
+        // const code = editor.state.modelConfig.code;
+        // if (!code) return;
+        // editor.handleModel(code);
+        break;
+      }
+    }
+  }
+
+  return {
+    toolState,
+    onTool,
+    updateItemList,
+    updateCustomHotkey,
+    // onClaim,
+  };
+}
diff --git a/frontend/image-tool/src/package/image-ui/components/common/Check.vue b/frontend/image-tool/src/package/image-ui/components/common/Check.vue
new file mode 100644
index 00000000..6a4c87d3
--- /dev/null
+++ b/frontend/image-tool/src/package/image-ui/components/common/Check.vue
@@ -0,0 +1,38 @@
+<template>
+  <a-checkbox-group v-model:value="value" size="small" :options="props.options" v-bind="$attrs">
+    <template #label="item">
+      {{ labelKey ? item[labelKey] ?? item.name : item.name }}
+    </template>
+  </a-checkbox-group>
+</template>
+
+<script setup lang="ts">
+  import { computed } from 'vue';
+  type IOption = {
+    value: string;
+    name: string;
+    alias?: string;
+  };
+
+  interface IProps {
+    options: IOption[];
+    labelKey?: string;
+    value: string[];
+    name: string;
+  }
+
+  // ***************Props and Emits***************
+  const emit = defineEmits(['update:value', 'change']);
+  const props = defineProps<IProps>();
+  // *********************************************
+
+  const value = computed({
+    get() {
+      return props.value;
+    },
+    set(value) {
+      emit('update:value', value);
+      emit('change', props.name, value);
+    },
+  });
+</script>
diff --git a/frontend/image-tool/src/package/image-ui/components/common/Radio.vue b/frontend/image-tool/src/package/image-ui/components/common/Radio.vue
new file mode 100644
index 00000000..7a9efd54
--- /dev/null
+++ b/frontend/image-tool/src/package/image-ui/components/common/Radio.vue
@@ -0,0 +1,62 @@
+<template>
+  <a-radio-group v-model:value="value" size="small" v-bind="$attrs">
+    <a-radio v-for="item in props.options" :key="item.value" :value="item.value"
+      >{{ labelKey ? item[labelKey] ?? item.name : item.name }}
+      <span
+        v-if="item.value === value && !$attrs.disabled"
+        class="radio-cancel-button"
+        @click.stop.prevent="onCancel"
+      ></span>
+    </a-radio>
+  </a-radio-group>
+</template>
+<script setup lang="ts">
+  import { computed } from 'vue';
+  type IOption = {
+    value: string;
+    name: string;
+    alias?: string;
+    [k: string]: any;
+  };
+
+  interface IProps {
+    options: IOption[];
+    labelKey?: string;
+    value: string | number;
+    name: string;
+  }
+
+  // ***************Props and Emits***************
+  const emit = defineEmits(['update:value', 'change']);
+  const props = defineProps<IProps>();
+  // *********************************************
+
+  // let instance = getCurrentInstance();
+  // debugger;
+
+  const value = computed({
+    get() {
+      return props.value;
+    },
+    set(value) {
+      emit('update:value', value);
+      emit('change', props.name, value);
+    },
+  });
+  function onCancel() {
+    value.value = '';
+  }
+</script>
+
+<style lang="less">
+  .radio-cancel-button {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    background: transparent;
+  }
+</style>
diff --git a/frontend/image-tool/src/package/image-ui/components/common/Select.vue b/frontend/image-tool/src/package/image-ui/components/common/Select.vue
new file mode 100644
index 00000000..95d9c884
--- /dev/null
+++ b/frontend/image-tool/src/package/image-ui/components/common/Select.vue
@@ -0,0 +1,65 @@
+<template>
+  <a-select size="small" style="width: 220px" v-bind="$attrs" v-model:value="value">
+    <a-select-option v-for="item in props.options" :key="item.value" :value="item.value"
+      >{{ labelKey ? item[labelKey] ?? item.name : item.name
+      }}<span
+        v-if="value === item.value"
+        @click.prevent.stop="onCancel"
+        class="select-cancel-button"
+        ><CheckOutlined /></span
+    ></a-select-option>
+  </a-select>
+</template>
+
+<script setup lang="ts">
+  import { computed } from 'vue';
+  import { CheckOutlined } from '@ant-design/icons-vue';
+  type IOption = {
+    value: string;
+    name: string;
+    alias?: string;
+    [k: string]: any;
+  };
+
+  interface IProps {
+    options: IOption[];
+    value: string | number;
+    labelKey?: string;
+    name: string;
+  }
+
+  // ***************Props and Emits***************
+  const emit = defineEmits(['update:value', 'change']);
+  const props = defineProps<IProps>();
+  // *********************************************
+
+  const value = computed({
+    get() {
+      return props.value;
+    },
+    set(value) {
+      emit('update:value', value);
+      emit('change', props.name, value);
+    },
+  });
+
+  function onCancel() {
+    value.value = '';
+  }
+</script>
+
+<style lang="less">
+  .select-cancel-button {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding-right: 10px;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    background: transparent;
+    text-align: right;
+    line-height: 32px;
+  }
+</style>
diff --git a/frontend/image-tool/src/package/image-ui/components/common/Text.vue b/frontend/image-tool/src/package/image-ui/components/common/Text.vue
new file mode 100644
index 00000000..a986de46
--- /dev/null
+++ b/frontend/image-tool/src/package/image-ui/components/common/Text.vue
@@ -0,0 +1,31 @@
+<template>
+  <a-textarea
+    size="small"
+    placeholder=""
+    v-bind="$attrs"
+    v-model:value="value"
+    style="width: 50%; min-width: 220px"
+  />
+</template>
+
+<script setup lang="ts">
+  import { computed } from 'vue';
+
+  // ***************Props and Emits***************
+  const emit = defineEmits(['update:value', 'change']);
+  const props = defineProps({
+    value: String,
+    name: String,
+  });
+  // *********************************************
+
+  const value = computed({
+    get() {
+      return props.value;
+    },
+    set(value) {
+      emit('update:value', value);
+      emit('change', props.name, value);
+    },
+  });
+</script>
diff --git a/frontend/image-tool/src/package/image-ui/components/index.ts b/frontend/image-tool/src/package/image-ui/components/index.ts
new file mode 100644
index 00000000..7a00619e
--- /dev/null
+++ b/frontend/image-tool/src/package/image-ui/components/index.ts
@@ -0,0 +1,12 @@
+export { default as MainView } from './MainView/index.vue';
+export { default as Tool } from './Tools/index.vue';
+export { default as MouseHelp } from './MouseHelp/index.vue';
+export { default as Modal } from './Modal/index.vue';
+export { default as Loading } from './Loading/index.vue';
+export { default as ObjectText } from './ObjectText/index.vue';
+export { default as Check } from './common/Check.vue';
+export { default as Radio } from './common/Radio.vue';
+export { default as Select } from './common/Select.vue';
+export { default as Text } from './common/Text.vue';
+export { default as EditClass } from './EditClass/index.vue';
+export { default as FrameLine } from './FrameLine/index.vue';
diff --git a/frontend/image-tool/src/package/image-ui/context.ts b/frontend/image-tool/src/package/image-ui/context.ts
new file mode 100644
index 00000000..d201b59e
--- /dev/null
+++ b/frontend/image-tool/src/package/image-ui/context.ts
@@ -0,0 +1,12 @@
+import { provide, inject } from 'vue';
+import { Editor } from '../image-editor';
+
+export const context = Symbol('image-editor');
+
+export function useProvideEditor(editor: Editor) {
+  provide(context, editor);
+}
+
+export function useInjectEditor() {
+  return inject(context) as Editor;
+}
diff --git a/frontend/image-tool/src/package/image-ui/hook/index.ts b/frontend/image-tool/src/package/image-ui/hook/index.ts
new file mode 100644
index 00000000..af1db7db
--- /dev/null
+++ b/frontend/image-tool/src/package/image-ui/hook/index.ts
@@ -0,0 +1 @@
+export { default as useUI } from './useUI';
diff --git a/frontend/image-tool/src/package/image-ui/hook/useUI.ts b/frontend/image-tool/src/package/image-ui/hook/useUI.ts
new file mode 100644
index 00000000..9fc5d5d0
--- /dev/null
+++ b/frontend/image-tool/src/package/image-ui/hook/useUI.ts
@@ -0,0 +1,41 @@
+import { IUIType, OPType, StatusType, AnnotateModeEnum } from '../../image-editor';
+import { useInjectEditor } from '../context';
+
+export default function useUI() {
+  const editor = useInjectEditor();
+  const state = editor.state;
+  function has(name: IUIType | string) {
+    return state.modeConfig.ui[name];
+  }
+  function canEdit() {
+    return state.modeConfig.op === OPType.EDIT || state.modeConfig.name === 'all';
+  }
+  function canAnnotate() {
+    return state.modeConfig.op === OPType.EDIT || state.modeConfig.name === 'all';
+  }
+
+  function canOperate() {
+    return state.status !== StatusType.Create;
+  }
+
+  function isPlay() {
+    return state.status === StatusType.Play;
+  }
+  function isCheck() {
+    return false;
+    // return state.config.showCheckView;
+  }
+  function showCopy() {
+    return canEdit() && editor.state.annotateMode === AnnotateModeEnum.INSTANCE;
+  }
+
+  return {
+    has,
+    canEdit,
+    canAnnotate,
+    canOperate,
+    isPlay,
+    isCheck,
+    showCopy,
+  };
+}
diff --git a/frontend/image-tool/src/package/image-ui/vueEvent.ts b/frontend/image-tool/src/package/image-ui/vueEvent.ts
new file mode 100644
index 00000000..be1eda13
--- /dev/null
+++ b/frontend/image-tool/src/package/image-ui/vueEvent.ts
@@ -0,0 +1,15 @@
+import { onMounted, onBeforeUnmount } from 'vue';
+
+interface IEmitter {
+  on(type: string, listener: (...e: any[]) => void): void;
+  off(type: string, listener: (...e: any[]) => void): void;
+}
+
+export default function vueEvent(emitter: IEmitter, msg: string, listener: (...e: any[]) => void) {
+  onMounted(() => {
+    emitter.on(msg, listener);
+  });
+  onBeforeUnmount(() => {
+    emitter.off(msg, listener);
+  });
+}
diff --git a/frontend/image-tool/src/pages/beijing/App.vue b/frontend/image-tool/src/pages/beijing/App.vue
deleted file mode 100644
index 19fd0a6a..00000000
--- a/frontend/image-tool/src/pages/beijing/App.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-    <ConfigProvider :locale="zhCN">
-        <Editor />
-    </ConfigProvider>
-</template>
-
-<script setup lang="ts">
-    import { ConfigProvider } from 'ant-design-vue';
-    import Editor from '/@/business/beijing/Editor.vue';
-
-    import enUS from 'ant-design-vue/es/locale/en_US';
-
-    import zhCN from 'ant-design-vue/es/locale/zh_CN';
-    // const { getAntdLocale } = useLocale();
-</script>
diff --git a/frontend/image-tool/src/pages/beijing/main.ts b/frontend/image-tool/src/pages/beijing/main.ts
deleted file mode 100644
index 507d5e1e..00000000
--- a/frontend/image-tool/src/pages/beijing/main.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { init } from '../../base';
-import App from './App.vue';
-
-init(App);
diff --git a/frontend/image-tool/src/pages/chengdu/App.vue b/frontend/image-tool/src/pages/chengdu/App.vue
deleted file mode 100644
index c1378a36..00000000
--- a/frontend/image-tool/src/pages/chengdu/App.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<template>
-    <ConfigProvider :locale="enUS">
-        <Editor />
-    </ConfigProvider>
-</template>
-
-<script setup lang="ts">
-    import { ConfigProvider } from 'ant-design-vue';
-    import Editor from '/@/business/chengdu/Editor.vue';
-
-    import enUS from 'ant-design-vue/es/locale/en_US';
-    import zhCN from 'ant-design-vue/es/locale/zh_CN';
-    // const { getAntdLocale } = useLocale();
-</script>
diff --git a/frontend/image-tool/src/pages/chengdu/main.ts b/frontend/image-tool/src/pages/chengdu/main.ts
deleted file mode 100644
index 507d5e1e..00000000
--- a/frontend/image-tool/src/pages/chengdu/main.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { init } from '../../base';
-import App from './App.vue';
-
-init(App);
diff --git a/frontend/image-tool/src/style/ant.less b/frontend/image-tool/src/style/ant.less
index 72923578..c54599d9 100644
--- a/frontend/image-tool/src/style/ant.less
+++ b/frontend/image-tool/src/style/ant.less
@@ -1,91 +1,112 @@
 .ant-input,
 .ant-select-selector {
-    // background: #47474d !important;
-    // outline: none !important;
-    // border: none !important;
+  // background: #47474d !important;
+  // outline: none !important;
+  // border: none !important;
 }
 
 .ant-tooltip-inner {
-    background-color: #333333;
+  background-color: #333333;
 }
 
 .ant-select,
 .ant-select-arrow,
 .ant-input,
 .ant-radio-wrapper {
-    color: #cbcbcb;
+  color: #cbcbcb;
+}
+/* ant-input-number */
+.ant-input-number-input {
+  background: none;
+  text-align: center;
+}
+.ant-input-number-handler-wrap {
+  display: none;
 }
 //
 .ant-collapse {
-    font-family: 'Roboto';
-    font-style: normal;
-    margin-bottom: 10px;
-    background-color: #303036 !important;
-    border: 1px solid #1e1f22 !important;
-    border-radius: 4px;
-    // overflow: auto;
-    .ant-collapse-item {
-        background: #1e1f22;
-        border: none !important;
-        // transition: all 0.2s;
-        &.ant-collapse-item-active {
-            background: #303036;
-            // border-bottom: 1px solid #1e1f22 !important;
-        }
-        .ant-collapse-header {
-            display: flex;
-            align-items: center;
-            height: 40px;
-            font-weight: 600;
-            font-size: 16px;
-            color: #bec1ca;
-            padding: 4px;
-            padding-left: 35px;
-            text-align: left;
-            background: #1e1f22;
-            .ant-collapse-arrow {
-                left: 10px;
-            }
-        }
-        .ant-collapse-content {
-            color: white;
-            border-radius: 0 0 4px 4px;
-            overflow-x: hidden;
-            .ant-collapse-content-box {
-                background: #303036;
-                padding: 0px;
-            }
-        }
+  font-family: 'Roboto';
+  font-style: normal;
+  margin-bottom: 10px;
+  background-color: #303036;
+  border: 1px solid #1e1f22;
+  border-radius: 4px;
+  // overflow: auto;
+  .ant-collapse-item {
+    background: #1e1f22;
+    border: none !important;
+    // transition: all 0.2s;
+    &.ant-collapse-item-active {
+      background: #303036;
+      // border-bottom: 1px solid #1e1f22 !important;
+    }
+    .ant-collapse-header {
+      display: flex;
+      align-items: center;
+      height: 40px;
+      font-weight: 600;
+      font-size: 16px;
+      color: #bec1ca;
+      padding: 4px;
+      padding-left: 10px;
+      text-align: left;
+      background: #1e1f22;
     }
+    .ant-collapse-content {
+      color: white;
+      border-radius: 0 0 4px 4px;
+      overflow-x: hidden;
+      .ant-collapse-content-box {
+        // background: #303036;
+        padding: 0px;
+      }
+    }
+  }
 }
 
 .ant-collapse-borderless {
-    background-color: transparent;
-    .ant-collapse-item {
-        &:last-child {
-            .ant-collapse-header {
-                display: flex;
-                align-items: center;
-                border: 1px solid #1e1f22;
-                border-bottom: 0;
-                border-radius: 0 0 4px 4px;
-            }
-        }
+  background-color: transparent;
+  .ant-collapse-item {
+    &:last-child {
+      .ant-collapse-header {
+        display: flex;
+        align-items: center;
+        border: 1px solid #1e1f22;
+        border-bottom: 0;
+        border-radius: 0 0 4px 4px;
+      }
     }
+  }
 }
 
 .ant-dropdown-menu {
-    background-color: #3a393e;
+  background-color: #3a393e;
 }
 
 // ant-slider
 .ant-slider-track {
-    background-color: #177ddc !important;
+  background-color: #177ddc !important;
 }
 .ant-slider-handle {
-    border-color: #177ddc !important;
+  border-color: #177ddc !important;
 }
 
 .ant-slider-rail {
-    background-color: #404040;
+  background-color: #404040;
+}
+// ant-modal
+.ant-modal-content {
+  border-radius: 14px;
+  overflow: hidden;
+  background: #393c45;
+  box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.15);
+  .ant-modal-header {
+    background: #393c45;
+  }
+  .ant-modal-body {
+    background: #393c45;
+  }
+  .ant-modal-footer {
+    background: #393c45;
+  }
 }
diff --git a/frontend/image-tool/src/style/index.less b/frontend/image-tool/src/style/index.less
index 83d6b6df..98eaa870 100644
--- a/frontend/image-tool/src/style/index.less
+++ b/frontend/image-tool/src/style/index.less
@@ -1,62 +1,67 @@
 @import 'ant.less';
 
 #app {
-    font-family: Avenir, Helvetica, Arial, sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    text-align: center;
-    color: #dee5eb;
-    margin: 0px;
-    height: 100%;
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #dee5eb;
+  margin: 0px;
+  height: 100%;
 }
 
 body {
-    margin: 0px;
-    width: 100%;
-    overflow: hidden;
-    max-width: 100vw;
-    max-height: 100vh;
+  margin: 0px;
+  width: 100%;
+  overflow: hidden;
+  max-width: 100vw;
+  max-height: 100vh;
+  user-select: none;
+  // https://github.com/necolas/normalize.css/issues/665
+  font-family: Roboto, -apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Helvetica Neue, Arial,
+    Noto Sans SC, Noto Sans, sans-serif;
 }
 
 .limit {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 ::-webkit-scrollbar {
-    width: 6px;
-    /* height: 10px; */
-    /**/
+  width: 6px;
+  /* height: 10px; */
+  /**/
 }
 ::-webkit-scrollbar-track {
-    background: rgb(100 100 100);
-    border-radius: 2px;
+  background: rgb(100 100 100);
+  border-radius: 2px;
 }
 ::-webkit-scrollbar-thumb {
-    background: #424242;
-    border-radius: 10px;
+  background: #424242;
+  border-radius: 10px;
 }
 
 .border-bottom {
-    border-bottom: 1px solid #4a4a4a;
+  border-bottom: 1px solid #4a4a4a;
 }
 
 .over-not-allowed {
-    position: absolute;
-    inset: 0px;
-    cursor: not-allowed;
+  position: absolute;
+  inset: 0px;
+  cursor: not-allowed;
+  z-index: 10;
 }
 
 @keyframes loading-360 {
-    0% {
-        transform: rotate(0deg);
-    }
-    100% {
-        transform: rotate(360deg);
-    }
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }
 
 .loading {
-    animation: loading-360 0.8s infinite linear;
+  animation: loading-360 0.8s infinite linear;
 }
diff --git a/frontend/image-tool/tsconfig.json b/frontend/image-tool/tsconfig.json
index 6dab5184..0007d2b8 100644
--- a/frontend/image-tool/tsconfig.json
+++ b/frontend/image-tool/tsconfig.json
@@ -2,7 +2,6 @@
     "compilerOptions": {
         "target": "esnext",
         "useDefineForClassFields": true,
-        "suppressImplicitAnyIndexErrors": true,
         "module": "esnext",
         "moduleResolution": "node",
         "strict": true,
@@ -11,25 +10,17 @@
         "sourceMap": true,
         "resolveJsonModule": true,
         "esModuleInterop": true,
-        "lib": [
-            "esnext",
-            "dom"
-        ],
+        "strictFunctionTypes": false,
+        "lib": ["esnext","dom"],
         "paths": {
-            "editor": [
-                "src/editor"
-            ],
-            "editor/*": [
-                "src/editor/*"
-            ]
+            "@": ["src"],
+            "@/*": ["src/*"],
+            "image-editor": ["src/package/image-editor"],
+            "image-editor/*": ["src/package/image-editor/*"],
+            "image-ui/*": ["src/package/image-ui/*"]
         }
     },
-    "include": [
-        "src/**/*.ts",
-        "src/**/*.d.ts",
-        "src/**/*.tsx",
-        "src/**/*.vue"
-    ],
+    "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
     "references": [
         {
             "path": "./tsconfig.node.json"
diff --git a/frontend/image-tool/vite.config.ts b/frontend/image-tool/vite.config.ts
index ee4e1886..1dbe7a59 100644
--- a/frontend/image-tool/vite.config.ts
+++ b/frontend/image-tool/vite.config.ts
@@ -1,39 +1,50 @@
-const { defineConfig, mergeConfig } = require('vite');
-const vue = require('@vitejs/plugin-vue');
-const path = require('path');
+import { resolve } from 'path';
+import { defineConfig, mergeConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
 const fs = require('fs');
 
-let localConfig = getLocalConfig();
+const localConfig = getLocalConfig();
 
+function pathResolve(dir: string) {
+  return resolve(__dirname, dir);
+}
 const config = defineConfig({
-    server: {
-        open: true,
-        port: 3300,
-        proxy: {
-            '/api': {
-                changeOrigin: true,
-                target: 'http://localhost:8190',
-            },
-        },
+  server: {
+    open: true,
+    port: 3300,
+    proxy: {
+      '/api': {
+        changeOrigin: true,
+        target: 'http://localhost:8190',
+      },
     },
-    plugins: [vue()],
+  },
+  plugins: [vue()],
+  resolve: {
     alias: [
-        { find: 'editor', replacement: path.resolve(__dirname, './src/editor') },
-        { find: 'business', replacement: path.resolve(__dirname, './src/business/chengdu') },
-        { find: /^editor/, replacement: path.resolve(__dirname, './src/editor') },
-        { find: /^\/@\//, replacement: path.resolve(__dirname, './src/') + '/' },
+      { find: /^\/@\//, replacement: pathResolve('src/') + '/' },
+      { find: '@', replacement: pathResolve('src/') + '/' },
+      {
+        find: /^image-editor/,
+        replacement: '/src/package/image-editor',
+      },
+      {
+        find: /^image-ui/,
+        replacement: '/src/package/image-ui',
+      },
     ],
+  },
 });
 
 module.exports = mergeConfig(config, localConfig);
 
 function getLocalConfig() {
-    let file = path.resolve(__dirname, './vite.config.local.js');
-    let config = {};
-    if (fs.existsSync(file)) {
-        try {
-            config = require(file);
-        } catch (e) {}
-    }
-    return config;
+  let file = pathResolve('./vite.config.local.js');
+  let config = {};
+  if (fs.existsSync(file)) {
+    try {
+      config = require(file);
+    } catch (e) {}
+  }
+  return config;
 }
diff --git a/frontend/image-tool/yarn.lock b/frontend/image-tool/yarn.lock
index 38b6a468..80095427 100644
--- a/frontend/image-tool/yarn.lock
+++ b/frontend/image-tool/yarn.lock
@@ -2,122 +2,127 @@
 # yarn lockfile v1
 
 
+"@aesoper/normal-utils@^0.1.5":
+  version "0.1.5"
+  resolved "https://registry.npmmirror.com/@aesoper/normal-utils/-/normal-utils-0.1.5.tgz#82b7c899ab9670c55515f949a3766d24260b8039"
+  integrity sha512-LFF/6y6h5mfwhnJaWqqxuC8zzDaHCG62kMRkd8xhDtq62TQj9dM17A9DhE87W7DhiARJsHLgcina/9P4eNCN1w==
+
 "@ant-design/colors@^6.0.0":
-  "integrity" "sha512-qAZRvPzfdWHtfameEGP2Qvuf838NhergR35o+EuVyB5XvSA98xod5r4utvi4TJ3ywmevm290g9nsCG5MryrdWQ=="
-  "resolved" "https://registry.npmmirror.com/@ant-design/colors/-/colors-6.0.0.tgz"
-  "version" "6.0.0"
+  version "6.0.0"
+  resolved "https://registry.npmmirror.com/@ant-design/colors/-/colors-6.0.0.tgz"
+  integrity sha512-qAZRvPzfdWHtfameEGP2Qvuf838NhergR35o+EuVyB5XvSA98xod5r4utvi4TJ3ywmevm290g9nsCG5MryrdWQ==
   dependencies:
     "@ctrl/tinycolor" "^3.4.0"
 
 "@ant-design/icons-svg@^4.2.1":
-  "integrity" "sha512-EB0iwlKDGpG93hW8f85CTJTs4SvMX7tt5ceupvhALp1IF44SeUFOMhKUOYqpsoYWQKAOuTRDMqn75rEaKDp0Xw=="
-  "resolved" "https://registry.npmmirror.com/@ant-design/icons-svg/-/icons-svg-4.2.1.tgz"
-  "version" "4.2.1"
+  version "4.2.1"
+  resolved "https://registry.npmmirror.com/@ant-design/icons-svg/-/icons-svg-4.2.1.tgz"
+  integrity sha512-EB0iwlKDGpG93hW8f85CTJTs4SvMX7tt5ceupvhALp1IF44SeUFOMhKUOYqpsoYWQKAOuTRDMqn75rEaKDp0Xw==
 
-"@ant-design/icons-vue@^6.0.0", "@ant-design/icons-vue@^6.0.1":
-  "integrity" "sha512-EX6bYm56V+ZrKN7+3MT/ubDkvJ5rK/O2t380WFRflDcVFgsvl3NLH7Wxeau6R8DbrO5jWR6DSTC3B6gYFp77AA=="
-  "resolved" "https://registry.npmmirror.com/@ant-design/icons-vue/-/icons-vue-6.1.0.tgz"
-  "version" "6.1.0"
+"@ant-design/icons-vue@^6.0.1", "@ant-design/icons-vue@^6.1.0":
+  version "6.1.0"
+  resolved "https://registry.npmmirror.com/@ant-design/icons-vue/-/icons-vue-6.1.0.tgz"
+  integrity sha512-EX6bYm56V+ZrKN7+3MT/ubDkvJ5rK/O2t380WFRflDcVFgsvl3NLH7Wxeau6R8DbrO5jWR6DSTC3B6gYFp77AA==
   dependencies:
     "@ant-design/colors" "^6.0.0"
     "@ant-design/icons-svg" "^4.2.1"
 
 "@babel/code-frame@^7.0.0":
-  "integrity" "sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg=="
-  "resolved" "https://registry.npmmirror.com/@babel/code-frame/-/code-frame-7.16.7.tgz"
-  "version" "7.16.7"
+  version "7.16.7"
+  resolved "https://registry.npmmirror.com/@babel/code-frame/-/code-frame-7.16.7.tgz"
+  integrity sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==
   dependencies:
     "@babel/highlight" "^7.16.7"
 
 "@babel/helper-validator-identifier@^7.16.7":
-  "integrity" "sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw=="
-  "resolved" "https://registry.npmmirror.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz"
-  "version" "7.16.7"
+  version "7.16.7"
+  resolved "https://registry.npmmirror.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz"
+  integrity sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==
 
 "@babel/highlight@^7.16.7":
-  "integrity" "sha512-7yykMVF3hfZY2jsHZEEgLc+3x4o1O+fYyULu11GynEUQNwB6lua+IIQn1FiJxNucd5UlyJryrwsOh8PL9Sn8Qg=="
-  "resolved" "https://registry.npmmirror.com/@babel/highlight/-/highlight-7.17.12.tgz"
-  "version" "7.17.12"
+  version "7.17.12"
+  resolved "https://registry.npmmirror.com/@babel/highlight/-/highlight-7.17.12.tgz"
+  integrity sha512-7yykMVF3hfZY2jsHZEEgLc+3x4o1O+fYyULu11GynEUQNwB6lua+IIQn1FiJxNucd5UlyJryrwsOh8PL9Sn8Qg==
   dependencies:
     "@babel/helper-validator-identifier" "^7.16.7"
-    "chalk" "^2.0.0"
-    "js-tokens" "^4.0.0"
+    chalk "^2.0.0"
+    js-tokens "^4.0.0"
 
 "@babel/parser@^7.16.4":
-  "integrity" "sha512-AqDccGC+m5O/iUStSJy3DGRIUFu7WbY/CppZYwrEUB4N0tZlnI8CSTsgL7v5fHVFmUbRv2sd+yy27o8Ydt4MGg=="
-  "resolved" "https://registry.npmmirror.com/@babel/parser/-/parser-7.18.0.tgz"
-  "version" "7.18.0"
+  version "7.18.0"
+  resolved "https://registry.npmmirror.com/@babel/parser/-/parser-7.18.0.tgz"
+  integrity sha512-AqDccGC+m5O/iUStSJy3DGRIUFu7WbY/CppZYwrEUB4N0tZlnI8CSTsgL7v5fHVFmUbRv2sd+yy27o8Ydt4MGg==
 
 "@babel/runtime@^7.10.5":
-  "integrity" "sha512-38Y8f7YUhce/K7RMwTp7m0uCumpv9hZkitCbBClqQIow1qSbCvGkcegKOXpEWCQLfWmevgRiWokZ1GkpfhbZug=="
-  "resolved" "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.18.3.tgz"
-  "version" "7.18.3"
+  version "7.23.6"
+  resolved "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.23.6.tgz#c05e610dc228855dc92ef1b53d07389ed8ab521d"
+  integrity sha512-zHd0eUrf5GZoOWVCXp6koAKQTfZV07eit6bGPmJgnZdnSAvvZee6zniW2XMF7Cmc4ISOOnPy3QaSiIJGJkVEDQ==
   dependencies:
-    "regenerator-runtime" "^0.13.4"
+    regenerator-runtime "^0.14.0"
 
 "@commitlint/cli@^16.2.3":
-  "integrity" "sha512-P+kvONlfsuTMnxSwWE1H+ZcPMY3STFaHb2kAacsqoIkNx66O0T7sTpBxpxkMrFPyhkJiLJnJWMhk4bbvYD3BMA=="
-  "resolved" "https://registry.npmmirror.com/@commitlint/cli/-/cli-16.3.0.tgz"
-  "version" "16.3.0"
+  version "16.3.0"
+  resolved "https://registry.npmmirror.com/@commitlint/cli/-/cli-16.3.0.tgz"
+  integrity sha512-P+kvONlfsuTMnxSwWE1H+ZcPMY3STFaHb2kAacsqoIkNx66O0T7sTpBxpxkMrFPyhkJiLJnJWMhk4bbvYD3BMA==
   dependencies:
     "@commitlint/format" "^16.2.1"
     "@commitlint/lint" "^16.2.4"
     "@commitlint/load" "^16.3.0"
     "@commitlint/read" "^16.2.1"
     "@commitlint/types" "^16.2.1"
-    "lodash" "^4.17.19"
-    "resolve-from" "5.0.0"
-    "resolve-global" "1.0.0"
-    "yargs" "^17.0.0"
+    lodash "^4.17.19"
+    resolve-from "5.0.0"
+    resolve-global "1.0.0"
+    yargs "^17.0.0"
 
 "@commitlint/config-conventional@^16.2.1":
-  "integrity" "sha512-av2UQJa3CuE5P0dzxj/o/B9XVALqYzEViHrMXtDrW9iuflrqCStWBAioijppj9URyz6ONpohJKAtSdgAOE0gkA=="
-  "resolved" "https://registry.npmmirror.com/@commitlint/config-conventional/-/config-conventional-16.2.4.tgz"
-  "version" "16.2.4"
+  version "16.2.4"
+  resolved "https://registry.npmmirror.com/@commitlint/config-conventional/-/config-conventional-16.2.4.tgz"
+  integrity sha512-av2UQJa3CuE5P0dzxj/o/B9XVALqYzEViHrMXtDrW9iuflrqCStWBAioijppj9URyz6ONpohJKAtSdgAOE0gkA==
   dependencies:
-    "conventional-changelog-conventionalcommits" "^4.3.1"
+    conventional-changelog-conventionalcommits "^4.3.1"
 
 "@commitlint/config-validator@^16.2.1":
-  "integrity" "sha512-hogSe0WGg7CKmp4IfNbdNES3Rq3UEI4XRPB8JL4EPgo/ORq5nrGTVzxJh78omibNuB8Ho4501Czb1Er1MoDWpw=="
-  "resolved" "https://registry.npmmirror.com/@commitlint/config-validator/-/config-validator-16.2.1.tgz"
-  "version" "16.2.1"
+  version "16.2.1"
+  resolved "https://registry.npmmirror.com/@commitlint/config-validator/-/config-validator-16.2.1.tgz"
+  integrity sha512-hogSe0WGg7CKmp4IfNbdNES3Rq3UEI4XRPB8JL4EPgo/ORq5nrGTVzxJh78omibNuB8Ho4501Czb1Er1MoDWpw==
   dependencies:
     "@commitlint/types" "^16.2.1"
-    "ajv" "^6.12.6"
+    ajv "^6.12.6"
 
 "@commitlint/ensure@^16.2.1":
-  "integrity" "sha512-/h+lBTgf1r5fhbDNHOViLuej38i3rZqTQnBTk+xEg+ehOwQDXUuissQ5GsYXXqI5uGy+261ew++sT4EA3uBJ+A=="
-  "resolved" "https://registry.npmmirror.com/@commitlint/ensure/-/ensure-16.2.1.tgz"
-  "version" "16.2.1"
+  version "16.2.1"
+  resolved "https://registry.npmmirror.com/@commitlint/ensure/-/ensure-16.2.1.tgz"
+  integrity sha512-/h+lBTgf1r5fhbDNHOViLuej38i3rZqTQnBTk+xEg+ehOwQDXUuissQ5GsYXXqI5uGy+261ew++sT4EA3uBJ+A==
   dependencies:
     "@commitlint/types" "^16.2.1"
-    "lodash" "^4.17.19"
+    lodash "^4.17.19"
 
 "@commitlint/execute-rule@^16.2.1":
-  "integrity" "sha512-oSls82fmUTLM6cl5V3epdVo4gHhbmBFvCvQGHBRdQ50H/690Uq1Dyd7hXMuKITCIdcnr9umyDkr8r5C6HZDF3g=="
-  "resolved" "https://registry.npmmirror.com/@commitlint/execute-rule/-/execute-rule-16.2.1.tgz"
-  "version" "16.2.1"
+  version "16.2.1"
+  resolved "https://registry.npmmirror.com/@commitlint/execute-rule/-/execute-rule-16.2.1.tgz"
+  integrity sha512-oSls82fmUTLM6cl5V3epdVo4gHhbmBFvCvQGHBRdQ50H/690Uq1Dyd7hXMuKITCIdcnr9umyDkr8r5C6HZDF3g==
 
 "@commitlint/format@^16.2.1":
-  "integrity" "sha512-Yyio9bdHWmNDRlEJrxHKglamIk3d6hC0NkEUW6Ti6ipEh2g0BAhy8Od6t4vLhdZRa1I2n+gY13foy+tUgk0i1Q=="
-  "resolved" "https://registry.npmmirror.com/@commitlint/format/-/format-16.2.1.tgz"
-  "version" "16.2.1"
+  version "16.2.1"
+  resolved "https://registry.npmmirror.com/@commitlint/format/-/format-16.2.1.tgz"
+  integrity sha512-Yyio9bdHWmNDRlEJrxHKglamIk3d6hC0NkEUW6Ti6ipEh2g0BAhy8Od6t4vLhdZRa1I2n+gY13foy+tUgk0i1Q==
   dependencies:
     "@commitlint/types" "^16.2.1"
-    "chalk" "^4.0.0"
+    chalk "^4.0.0"
 
 "@commitlint/is-ignored@^16.2.4":
-  "integrity" "sha512-Lxdq9aOAYCOOOjKi58ulbwK/oBiiKz+7Sq0+/SpFIEFwhHkIVugvDvWjh2VRBXmRC/x5lNcjDcYEwS/uYUvlYQ=="
-  "resolved" "https://registry.npmmirror.com/@commitlint/is-ignored/-/is-ignored-16.2.4.tgz"
-  "version" "16.2.4"
+  version "16.2.4"
+  resolved "https://registry.npmmirror.com/@commitlint/is-ignored/-/is-ignored-16.2.4.tgz"
+  integrity sha512-Lxdq9aOAYCOOOjKi58ulbwK/oBiiKz+7Sq0+/SpFIEFwhHkIVugvDvWjh2VRBXmRC/x5lNcjDcYEwS/uYUvlYQ==
   dependencies:
     "@commitlint/types" "^16.2.1"
-    "semver" "7.3.7"
+    semver "7.3.7"
 
 "@commitlint/lint@^16.2.4":
-  "integrity" "sha512-AUDuwOxb2eGqsXbTMON3imUGkc1jRdtXrbbohiLSCSk3jFVXgJLTMaEcr39pR00N8nE9uZ+V2sYaiILByZVmxQ=="
-  "resolved" "https://registry.npmmirror.com/@commitlint/lint/-/lint-16.2.4.tgz"
-  "version" "16.2.4"
+  version "16.2.4"
+  resolved "https://registry.npmmirror.com/@commitlint/lint/-/lint-16.2.4.tgz"
+  integrity sha512-AUDuwOxb2eGqsXbTMON3imUGkc1jRdtXrbbohiLSCSk3jFVXgJLTMaEcr39pR00N8nE9uZ+V2sYaiILByZVmxQ==
   dependencies:
     "@commitlint/is-ignored" "^16.2.4"
     "@commitlint/parse" "^16.2.1"
@@ -125,138 +130,138 @@
     "@commitlint/types" "^16.2.1"
 
 "@commitlint/load@^16.3.0":
-  "integrity" "sha512-3tykjV/iwbkv2FU9DG+NZ/JqmP0Nm3b7aDwgCNQhhKV5P74JAuByULkafnhn+zsFGypG1qMtI5u+BZoa9APm0A=="
-  "resolved" "https://registry.npmmirror.com/@commitlint/load/-/load-16.3.0.tgz"
-  "version" "16.3.0"
+  version "16.3.0"
+  resolved "https://registry.npmmirror.com/@commitlint/load/-/load-16.3.0.tgz"
+  integrity sha512-3tykjV/iwbkv2FU9DG+NZ/JqmP0Nm3b7aDwgCNQhhKV5P74JAuByULkafnhn+zsFGypG1qMtI5u+BZoa9APm0A==
   dependencies:
     "@commitlint/config-validator" "^16.2.1"
     "@commitlint/execute-rule" "^16.2.1"
     "@commitlint/resolve-extends" "^16.2.1"
     "@commitlint/types" "^16.2.1"
     "@types/node" ">=12"
-    "chalk" "^4.0.0"
-    "cosmiconfig" "^7.0.0"
-    "cosmiconfig-typescript-loader" "^2.0.0"
-    "lodash" "^4.17.19"
-    "resolve-from" "^5.0.0"
-    "typescript" "^4.4.3"
+    chalk "^4.0.0"
+    cosmiconfig "^7.0.0"
+    cosmiconfig-typescript-loader "^2.0.0"
+    lodash "^4.17.19"
+    resolve-from "^5.0.0"
+    typescript "^4.4.3"
 
 "@commitlint/message@^16.2.1":
-  "integrity" "sha512-2eWX/47rftViYg7a3axYDdrgwKv32mxbycBJT6OQY/MJM7SUfYNYYvbMFOQFaA4xIVZt7t2Alyqslbl6blVwWw=="
-  "resolved" "https://registry.npmmirror.com/@commitlint/message/-/message-16.2.1.tgz"
-  "version" "16.2.1"
+  version "16.2.1"
+  resolved "https://registry.npmmirror.com/@commitlint/message/-/message-16.2.1.tgz"
+  integrity sha512-2eWX/47rftViYg7a3axYDdrgwKv32mxbycBJT6OQY/MJM7SUfYNYYvbMFOQFaA4xIVZt7t2Alyqslbl6blVwWw==
 
 "@commitlint/parse@^16.2.1":
-  "integrity" "sha512-2NP2dDQNL378VZYioLrgGVZhWdnJO4nAxQl5LXwYb08nEcN+cgxHN1dJV8OLJ5uxlGJtDeR8UZZ1mnQ1gSAD/g=="
-  "resolved" "https://registry.npmmirror.com/@commitlint/parse/-/parse-16.2.1.tgz"
-  "version" "16.2.1"
+  version "16.2.1"
+  resolved "https://registry.npmmirror.com/@commitlint/parse/-/parse-16.2.1.tgz"
+  integrity sha512-2NP2dDQNL378VZYioLrgGVZhWdnJO4nAxQl5LXwYb08nEcN+cgxHN1dJV8OLJ5uxlGJtDeR8UZZ1mnQ1gSAD/g==
   dependencies:
     "@commitlint/types" "^16.2.1"
-    "conventional-changelog-angular" "^5.0.11"
-    "conventional-commits-parser" "^3.2.2"
+    conventional-changelog-angular "^5.0.11"
+    conventional-commits-parser "^3.2.2"
 
 "@commitlint/read@^16.2.1":
-  "integrity" "sha512-tViXGuaxLTrw2r7PiYMQOFA2fueZxnnt0lkOWqKyxT+n2XdEMGYcI9ID5ndJKXnfPGPppD0w/IItKsIXlZ+alw=="
-  "resolved" "https://registry.npmmirror.com/@commitlint/read/-/read-16.2.1.tgz"
-  "version" "16.2.1"
+  version "16.2.1"
+  resolved "https://registry.npmmirror.com/@commitlint/read/-/read-16.2.1.tgz"
+  integrity sha512-tViXGuaxLTrw2r7PiYMQOFA2fueZxnnt0lkOWqKyxT+n2XdEMGYcI9ID5ndJKXnfPGPppD0w/IItKsIXlZ+alw==
   dependencies:
     "@commitlint/top-level" "^16.2.1"
     "@commitlint/types" "^16.2.1"
-    "fs-extra" "^10.0.0"
-    "git-raw-commits" "^2.0.0"
+    fs-extra "^10.0.0"
+    git-raw-commits "^2.0.0"
 
 "@commitlint/resolve-extends@^16.2.1":
-  "integrity" "sha512-NbbCMPKTFf2J805kwfP9EO+vV+XvnaHRcBy6ud5dF35dxMsvdJqke54W3XazXF1ZAxC4a3LBy4i/GNVBAthsEg=="
-  "resolved" "https://registry.npmmirror.com/@commitlint/resolve-extends/-/resolve-extends-16.2.1.tgz"
-  "version" "16.2.1"
+  version "16.2.1"
+  resolved "https://registry.npmmirror.com/@commitlint/resolve-extends/-/resolve-extends-16.2.1.tgz"
+  integrity sha512-NbbCMPKTFf2J805kwfP9EO+vV+XvnaHRcBy6ud5dF35dxMsvdJqke54W3XazXF1ZAxC4a3LBy4i/GNVBAthsEg==
   dependencies:
     "@commitlint/config-validator" "^16.2.1"
     "@commitlint/types" "^16.2.1"
-    "import-fresh" "^3.0.0"
-    "lodash" "^4.17.19"
-    "resolve-from" "^5.0.0"
-    "resolve-global" "^1.0.0"
+    import-fresh "^3.0.0"
+    lodash "^4.17.19"
+    resolve-from "^5.0.0"
+    resolve-global "^1.0.0"
 
 "@commitlint/rules@^16.2.4":
-  "integrity" "sha512-rK5rNBIN2ZQNQK+I6trRPK3dWa0MtaTN4xnwOma1qxa4d5wQMQJtScwTZjTJeallFxhOgbNOgr48AMHkdounVg=="
-  "resolved" "https://registry.npmmirror.com/@commitlint/rules/-/rules-16.2.4.tgz"
-  "version" "16.2.4"
+  version "16.2.4"
+  resolved "https://registry.npmmirror.com/@commitlint/rules/-/rules-16.2.4.tgz"
+  integrity sha512-rK5rNBIN2ZQNQK+I6trRPK3dWa0MtaTN4xnwOma1qxa4d5wQMQJtScwTZjTJeallFxhOgbNOgr48AMHkdounVg==
   dependencies:
     "@commitlint/ensure" "^16.2.1"
     "@commitlint/message" "^16.2.1"
     "@commitlint/to-lines" "^16.2.1"
     "@commitlint/types" "^16.2.1"
-    "execa" "^5.0.0"
+    execa "^5.0.0"
 
 "@commitlint/to-lines@^16.2.1":
-  "integrity" "sha512-9/VjpYj5j1QeY3eiog1zQWY6axsdWAc0AonUUfyZ7B0MVcRI0R56YsHAfzF6uK/g/WwPZaoe4Lb1QCyDVnpVaQ=="
-  "resolved" "https://registry.npmmirror.com/@commitlint/to-lines/-/to-lines-16.2.1.tgz"
-  "version" "16.2.1"
+  version "16.2.1"
+  resolved "https://registry.npmmirror.com/@commitlint/to-lines/-/to-lines-16.2.1.tgz"
+  integrity sha512-9/VjpYj5j1QeY3eiog1zQWY6axsdWAc0AonUUfyZ7B0MVcRI0R56YsHAfzF6uK/g/WwPZaoe4Lb1QCyDVnpVaQ==
 
 "@commitlint/top-level@^16.2.1":
-  "integrity" "sha512-lS6GSieHW9y6ePL73ied71Z9bOKyK+Ib9hTkRsB8oZFAyQZcyRwq2w6nIa6Fngir1QW51oKzzaXfJL94qwImyw=="
-  "resolved" "https://registry.npmmirror.com/@commitlint/top-level/-/top-level-16.2.1.tgz"
-  "version" "16.2.1"
+  version "16.2.1"
+  resolved "https://registry.npmmirror.com/@commitlint/top-level/-/top-level-16.2.1.tgz"
+  integrity sha512-lS6GSieHW9y6ePL73ied71Z9bOKyK+Ib9hTkRsB8oZFAyQZcyRwq2w6nIa6Fngir1QW51oKzzaXfJL94qwImyw==
   dependencies:
-    "find-up" "^5.0.0"
+    find-up "^5.0.0"
 
 "@commitlint/types@^16.2.1":
-  "integrity" "sha512-7/z7pA7BM0i8XvMSBynO7xsB3mVQPUZbVn6zMIlp/a091XJ3qAXRXc+HwLYhiIdzzS5fuxxNIHZMGHVD4HJxdA=="
-  "resolved" "https://registry.npmmirror.com/@commitlint/types/-/types-16.2.1.tgz"
-  "version" "16.2.1"
+  version "16.2.1"
+  resolved "https://registry.npmmirror.com/@commitlint/types/-/types-16.2.1.tgz"
+  integrity sha512-7/z7pA7BM0i8XvMSBynO7xsB3mVQPUZbVn6zMIlp/a091XJ3qAXRXc+HwLYhiIdzzS5fuxxNIHZMGHVD4HJxdA==
   dependencies:
-    "chalk" "^4.0.0"
+    chalk "^4.0.0"
 
 "@cspotcode/source-map-support@^0.8.0":
-  "integrity" "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw=="
-  "resolved" "https://registry.npmmirror.com/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz"
-  "version" "0.8.1"
+  version "0.8.1"
+  resolved "https://registry.npmmirror.com/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz"
+  integrity sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==
   dependencies:
     "@jridgewell/trace-mapping" "0.3.9"
 
 "@ctrl/tinycolor@^3.4.0":
-  "integrity" "sha512-ej5oVy6lykXsvieQtqZxCOaLT+xD4+QNarq78cIYISHmZXshCvROLudpQN3lfL8G0NL7plMSSK+zlyvCaIJ4Iw=="
-  "resolved" "https://registry.npmmirror.com/@ctrl/tinycolor/-/tinycolor-3.4.1.tgz"
-  "version" "3.4.1"
+  version "3.4.1"
+  resolved "https://registry.npmmirror.com/@ctrl/tinycolor/-/tinycolor-3.4.1.tgz"
+  integrity sha512-ej5oVy6lykXsvieQtqZxCOaLT+xD4+QNarq78cIYISHmZXshCvROLudpQN3lfL8G0NL7plMSSK+zlyvCaIJ4Iw==
 
 "@eslint/eslintrc@^1.3.0":
-  "integrity" "sha512-UWW0TMTmk2d7hLcWD1/e2g5HDM/HQ3csaLSqXCfqwh4uNDuNqlaKWXmEsL4Cs41Z0KnILNvwbHAah3C2yt06kw=="
-  "resolved" "https://registry.npmmirror.com/@eslint/eslintrc/-/eslintrc-1.3.0.tgz"
-  "version" "1.3.0"
-  dependencies:
-    "ajv" "^6.12.4"
-    "debug" "^4.3.2"
-    "espree" "^9.3.2"
-    "globals" "^13.15.0"
-    "ignore" "^5.2.0"
-    "import-fresh" "^3.2.1"
-    "js-yaml" "^4.1.0"
-    "minimatch" "^3.1.2"
-    "strip-json-comments" "^3.1.1"
+  version "1.3.0"
+  resolved "https://registry.npmmirror.com/@eslint/eslintrc/-/eslintrc-1.3.0.tgz"
+  integrity sha512-UWW0TMTmk2d7hLcWD1/e2g5HDM/HQ3csaLSqXCfqwh4uNDuNqlaKWXmEsL4Cs41Z0KnILNvwbHAah3C2yt06kw==
+  dependencies:
+    ajv "^6.12.4"
+    debug "^4.3.2"
+    espree "^9.3.2"
+    globals "^13.15.0"
+    ignore "^5.2.0"
+    import-fresh "^3.2.1"
+    js-yaml "^4.1.0"
+    minimatch "^3.1.2"
+    strip-json-comments "^3.1.1"
 
 "@humanwhocodes/config-array@^0.9.2":
-  "integrity" "sha512-ObyMyWxZiCu/yTisA7uzx81s40xR2fD5Cg/2Kq7G02ajkNubJf6BopgDTmDyc3U7sXpNKM8cYOw7s7Tyr+DnCw=="
-  "resolved" "https://registry.npmmirror.com/@humanwhocodes/config-array/-/config-array-0.9.5.tgz"
-  "version" "0.9.5"
+  version "0.9.5"
+  resolved "https://registry.npmmirror.com/@humanwhocodes/config-array/-/config-array-0.9.5.tgz"
+  integrity sha512-ObyMyWxZiCu/yTisA7uzx81s40xR2fD5Cg/2Kq7G02ajkNubJf6BopgDTmDyc3U7sXpNKM8cYOw7s7Tyr+DnCw==
   dependencies:
     "@humanwhocodes/object-schema" "^1.2.1"
-    "debug" "^4.1.1"
-    "minimatch" "^3.0.4"
+    debug "^4.1.1"
+    minimatch "^3.0.4"
 
 "@humanwhocodes/object-schema@^1.2.1":
-  "integrity" "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA=="
-  "resolved" "https://registry.npmmirror.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz"
-  "version" "1.2.1"
+  version "1.2.1"
+  resolved "https://registry.npmmirror.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz"
+  integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
 
 "@interactjs/types@1.10.11":
-  "integrity" "sha512-YRsVFWjL8Gkkvlx3qnjeaxW4fnibSJ9791g8BA7Pv5ANByI64WmtR1vU7A2rXcrOn8XvyCEfY0ss1s8NhZP+MA=="
-  "resolved" "https://registry.npmmirror.com/@interactjs/types/-/types-1.10.11.tgz"
-  "version" "1.10.11"
+  version "1.10.11"
+  resolved "https://registry.npmmirror.com/@interactjs/types/-/types-1.10.11.tgz"
+  integrity sha512-YRsVFWjL8Gkkvlx3qnjeaxW4fnibSJ9791g8BA7Pv5ANByI64WmtR1vU7A2rXcrOn8XvyCEfY0ss1s8NhZP+MA==
 
 "@intlify/core-base@9.1.10":
-  "integrity" "sha512-So9CNUavB/IsZ+zBmk2Cv6McQp6vc2wbGi1S0XQmJ8Vz+UFcNn9MFXAe9gY67PreIHrbLsLxDD0cwo1qsxM1Nw=="
-  "resolved" "https://registry.npmmirror.com/@intlify/core-base/-/core-base-9.1.10.tgz"
-  "version" "9.1.10"
+  version "9.1.10"
+  resolved "https://registry.npmmirror.com/@intlify/core-base/-/core-base-9.1.10.tgz"
+  integrity sha512-So9CNUavB/IsZ+zBmk2Cv6McQp6vc2wbGi1S0XQmJ8Vz+UFcNn9MFXAe9gY67PreIHrbLsLxDD0cwo1qsxM1Nw==
   dependencies:
     "@intlify/devtools-if" "9.1.10"
     "@intlify/message-compiler" "9.1.10"
@@ -266,284 +271,299 @@
     "@intlify/vue-devtools" "9.1.10"
 
 "@intlify/devtools-if@9.1.10":
-  "integrity" "sha512-SHaKoYu6sog3+Q8js1y3oXLywuogbH1sKuc7NSYkN3GElvXSBaMoCzW+we0ZSFqj/6c7vTNLg9nQ6rxhKqYwnQ=="
-  "resolved" "https://registry.npmmirror.com/@intlify/devtools-if/-/devtools-if-9.1.10.tgz"
-  "version" "9.1.10"
+  version "9.1.10"
+  resolved "https://registry.npmmirror.com/@intlify/devtools-if/-/devtools-if-9.1.10.tgz"
+  integrity sha512-SHaKoYu6sog3+Q8js1y3oXLywuogbH1sKuc7NSYkN3GElvXSBaMoCzW+we0ZSFqj/6c7vTNLg9nQ6rxhKqYwnQ==
   dependencies:
     "@intlify/shared" "9.1.10"
 
 "@intlify/message-compiler@9.1.10":
-  "integrity" "sha512-+JiJpXff/XTb0EadYwdxOyRTB0hXNd4n1HaJ/a4yuV960uRmPXaklJsedW0LNdcptd/hYUZtCkI7Lc9J5C1gxg=="
-  "resolved" "https://registry.npmmirror.com/@intlify/message-compiler/-/message-compiler-9.1.10.tgz"
-  "version" "9.1.10"
+  version "9.1.10"
+  resolved "https://registry.npmmirror.com/@intlify/message-compiler/-/message-compiler-9.1.10.tgz"
+  integrity sha512-+JiJpXff/XTb0EadYwdxOyRTB0hXNd4n1HaJ/a4yuV960uRmPXaklJsedW0LNdcptd/hYUZtCkI7Lc9J5C1gxg==
   dependencies:
     "@intlify/message-resolver" "9.1.10"
     "@intlify/shared" "9.1.10"
-    "source-map" "0.6.1"
+    source-map "0.6.1"
 
 "@intlify/message-resolver@9.1.10":
-  "integrity" "sha512-5YixMG/M05m0cn9+gOzd4EZQTFRUu8RGhzxJbR1DWN21x/Z3bJ8QpDYj6hC4FwBj5uKsRfKpJQ3Xqg98KWoA+w=="
-  "resolved" "https://registry.npmmirror.com/@intlify/message-resolver/-/message-resolver-9.1.10.tgz"
-  "version" "9.1.10"
+  version "9.1.10"
+  resolved "https://registry.npmmirror.com/@intlify/message-resolver/-/message-resolver-9.1.10.tgz"
+  integrity sha512-5YixMG/M05m0cn9+gOzd4EZQTFRUu8RGhzxJbR1DWN21x/Z3bJ8QpDYj6hC4FwBj5uKsRfKpJQ3Xqg98KWoA+w==
 
 "@intlify/runtime@9.1.10":
-  "integrity" "sha512-7QsuByNzpe3Gfmhwq6hzgXcMPpxz8Zxb/XFI6s9lQdPLPe5Lgw4U1ovRPZTOs6Y2hwitR3j/HD8BJNGWpJnOFA=="
-  "resolved" "https://registry.npmmirror.com/@intlify/runtime/-/runtime-9.1.10.tgz"
-  "version" "9.1.10"
+  version "9.1.10"
+  resolved "https://registry.npmmirror.com/@intlify/runtime/-/runtime-9.1.10.tgz"
+  integrity sha512-7QsuByNzpe3Gfmhwq6hzgXcMPpxz8Zxb/XFI6s9lQdPLPe5Lgw4U1ovRPZTOs6Y2hwitR3j/HD8BJNGWpJnOFA==
   dependencies:
     "@intlify/message-compiler" "9.1.10"
     "@intlify/message-resolver" "9.1.10"
     "@intlify/shared" "9.1.10"
 
 "@intlify/shared@9.1.10":
-  "integrity" "sha512-Om54xJeo1Vw+K1+wHYyXngE8cAbrxZHpWjYzMR9wCkqbhGtRV5VLhVc214Ze2YatPrWlS2WSMOWXR8JktX/IgA=="
-  "resolved" "https://registry.npmmirror.com/@intlify/shared/-/shared-9.1.10.tgz"
-  "version" "9.1.10"
+  version "9.1.10"
+  resolved "https://registry.npmmirror.com/@intlify/shared/-/shared-9.1.10.tgz"
+  integrity sha512-Om54xJeo1Vw+K1+wHYyXngE8cAbrxZHpWjYzMR9wCkqbhGtRV5VLhVc214Ze2YatPrWlS2WSMOWXR8JktX/IgA==
 
 "@intlify/vue-devtools@9.1.10":
-  "integrity" "sha512-5l3qYARVbkWAkagLu1XbDUWRJSL8br1Dj60wgMaKB0+HswVsrR6LloYZTg7ozyvM621V6+zsmwzbQxbVQyrytQ=="
-  "resolved" "https://registry.npmmirror.com/@intlify/vue-devtools/-/vue-devtools-9.1.10.tgz"
-  "version" "9.1.10"
+  version "9.1.10"
+  resolved "https://registry.npmmirror.com/@intlify/vue-devtools/-/vue-devtools-9.1.10.tgz"
+  integrity sha512-5l3qYARVbkWAkagLu1XbDUWRJSL8br1Dj60wgMaKB0+HswVsrR6LloYZTg7ozyvM621V6+zsmwzbQxbVQyrytQ==
   dependencies:
     "@intlify/message-resolver" "9.1.10"
     "@intlify/runtime" "9.1.10"
     "@intlify/shared" "9.1.10"
 
 "@jridgewell/resolve-uri@^3.0.3":
-  "integrity" "sha512-8cXDaBBHOr2pQ7j77Y6Vp5VDT2sIqWyWQ56TjEq4ih/a4iST3dItRe8Q9fp0rrIl9DoKhWQtUQz/YpOxLkXbNA=="
-  "resolved" "https://registry.npmmirror.com/@jridgewell/resolve-uri/-/resolve-uri-3.0.7.tgz"
-  "version" "3.0.7"
+  version "3.0.7"
+  resolved "https://registry.npmmirror.com/@jridgewell/resolve-uri/-/resolve-uri-3.0.7.tgz"
+  integrity sha512-8cXDaBBHOr2pQ7j77Y6Vp5VDT2sIqWyWQ56TjEq4ih/a4iST3dItRe8Q9fp0rrIl9DoKhWQtUQz/YpOxLkXbNA==
 
 "@jridgewell/sourcemap-codec@^1.4.10":
-  "integrity" "sha512-GryiOJmNcWbovBxTfZSF71V/mXbgcV3MewDe3kIMCLyIh5e7SKAeUZs+rMnJ8jkMolZ/4/VsdBmMrw3l+VdZ3w=="
-  "resolved" "https://registry.npmmirror.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.13.tgz"
-  "version" "1.4.13"
+  version "1.4.13"
+  resolved "https://registry.npmmirror.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.13.tgz"
+  integrity sha512-GryiOJmNcWbovBxTfZSF71V/mXbgcV3MewDe3kIMCLyIh5e7SKAeUZs+rMnJ8jkMolZ/4/VsdBmMrw3l+VdZ3w==
 
 "@jridgewell/trace-mapping@0.3.9":
-  "integrity" "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ=="
-  "resolved" "https://registry.npmmirror.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz"
-  "version" "0.3.9"
+  version "0.3.9"
+  resolved "https://registry.npmmirror.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz"
+  integrity sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==
   dependencies:
     "@jridgewell/resolve-uri" "^3.0.3"
     "@jridgewell/sourcemap-codec" "^1.4.10"
 
 "@nodelib/fs.scandir@2.1.5":
-  "integrity" "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g=="
-  "resolved" "https://registry.npmmirror.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz"
-  "version" "2.1.5"
+  version "2.1.5"
+  resolved "https://registry.npmmirror.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz"
+  integrity sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==
   dependencies:
     "@nodelib/fs.stat" "2.0.5"
-    "run-parallel" "^1.1.9"
+    run-parallel "^1.1.9"
 
-"@nodelib/fs.stat@^2.0.2", "@nodelib/fs.stat@2.0.5":
-  "integrity" "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A=="
-  "resolved" "https://registry.npmmirror.com/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz"
-  "version" "2.0.5"
+"@nodelib/fs.stat@2.0.5", "@nodelib/fs.stat@^2.0.2":
+  version "2.0.5"
+  resolved "https://registry.npmmirror.com/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz"
+  integrity sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==
 
 "@nodelib/fs.walk@^1.2.3":
-  "integrity" "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg=="
-  "resolved" "https://registry.npmmirror.com/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz"
-  "version" "1.2.8"
+  version "1.2.8"
+  resolved "https://registry.npmmirror.com/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz"
+  integrity sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==
   dependencies:
     "@nodelib/fs.scandir" "2.1.5"
-    "fastq" "^1.6.0"
+    fastq "^1.6.0"
+
+"@popperjs/core@^2.11.8":
+  version "2.11.8"
+  resolved "https://registry.npmmirror.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
+  integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
 
 "@simonwep/pickr@~1.8.0":
-  "integrity" "sha512-/l5w8BIkrpP6n1xsetx9MWPWlU6OblN5YgZZphxan0Tq4BByTCETL6lyIeY8lagalS2Nbt4F2W034KHLIiunKA=="
-  "resolved" "https://registry.npmmirror.com/@simonwep/pickr/-/pickr-1.8.2.tgz"
-  "version" "1.8.2"
+  version "1.8.2"
+  resolved "https://registry.npmmirror.com/@simonwep/pickr/-/pickr-1.8.2.tgz#96dc86675940d7cad63d69c22083dd1cbb9797cb"
+  integrity sha512-/l5w8BIkrpP6n1xsetx9MWPWlU6OblN5YgZZphxan0Tq4BByTCETL6lyIeY8lagalS2Nbt4F2W034KHLIiunKA==
   dependencies:
-    "core-js" "^3.15.1"
-    "nanopop" "^2.1.0"
+    core-js "^3.15.1"
+    nanopop "^2.1.0"
 
 "@tsconfig/node10@^1.0.7":
-  "integrity" "sha512-6XFfSQmMgq0CFLY1MslA/CPUfhIL919M1rMsa5lP2P097N2Wd1sSX0tx1u4olM16fLNhtHZpRhedZJphNJqmZg=="
-  "resolved" "https://registry.npmmirror.com/@tsconfig/node10/-/node10-1.0.8.tgz"
-  "version" "1.0.8"
+  version "1.0.8"
+  resolved "https://registry.npmmirror.com/@tsconfig/node10/-/node10-1.0.8.tgz"
+  integrity sha512-6XFfSQmMgq0CFLY1MslA/CPUfhIL919M1rMsa5lP2P097N2Wd1sSX0tx1u4olM16fLNhtHZpRhedZJphNJqmZg==
 
 "@tsconfig/node12@^1.0.7":
-  "integrity" "sha512-/yBMcem+fbvhSREH+s14YJi18sp7J9jpuhYByADT2rypfajMZZN4WQ6zBGgBKp53NKmqI36wFYDb3yaMPurITw=="
-  "resolved" "https://registry.npmmirror.com/@tsconfig/node12/-/node12-1.0.9.tgz"
-  "version" "1.0.9"
+  version "1.0.9"
+  resolved "https://registry.npmmirror.com/@tsconfig/node12/-/node12-1.0.9.tgz"
+  integrity sha512-/yBMcem+fbvhSREH+s14YJi18sp7J9jpuhYByADT2rypfajMZZN4WQ6zBGgBKp53NKmqI36wFYDb3yaMPurITw==
 
 "@tsconfig/node14@^1.0.0":
-  "integrity" "sha512-509r2+yARFfHHE7T6Puu2jjkoycftovhXRqW328PDXTVGKihlb1P8Z9mMZH04ebyajfRY7dedfGynlrFHJUQCg=="
-  "resolved" "https://registry.npmmirror.com/@tsconfig/node14/-/node14-1.0.1.tgz"
-  "version" "1.0.1"
+  version "1.0.1"
+  resolved "https://registry.npmmirror.com/@tsconfig/node14/-/node14-1.0.1.tgz"
+  integrity sha512-509r2+yARFfHHE7T6Puu2jjkoycftovhXRqW328PDXTVGKihlb1P8Z9mMZH04ebyajfRY7dedfGynlrFHJUQCg==
 
 "@tsconfig/node16@^1.0.2":
-  "integrity" "sha512-eZxlbI8GZscaGS7kkc/trHTT5xgrjH3/1n2JDwusC9iahPKWMRvRjJSAN5mCXviuTGQ/lHnhvv8Q1YTpnfz9gA=="
-  "resolved" "https://registry.npmmirror.com/@tsconfig/node16/-/node16-1.0.2.tgz"
-  "version" "1.0.2"
+  version "1.0.2"
+  resolved "https://registry.npmmirror.com/@tsconfig/node16/-/node16-1.0.2.tgz"
+  integrity sha512-eZxlbI8GZscaGS7kkc/trHTT5xgrjH3/1n2JDwusC9iahPKWMRvRjJSAN5mCXviuTGQ/lHnhvv8Q1YTpnfz9gA==
 
 "@tweenjs/tween.js@^18.6.4":
-  "integrity" "sha512-lB9lMjuqjtuJrx7/kOkqQBtllspPIN+96OvTCeJ2j5FEzinoAXTdAMFnDAQT1KVPRlnYfBrqxtqP66vDM40xxQ=="
-  "resolved" "https://registry.npmmirror.com/@tweenjs/tween.js/-/tween.js-18.6.4.tgz"
-  "version" "18.6.4"
+  version "18.6.4"
+  resolved "https://registry.npmmirror.com/@tweenjs/tween.js/-/tween.js-18.6.4.tgz"
+  integrity sha512-lB9lMjuqjtuJrx7/kOkqQBtllspPIN+96OvTCeJ2j5FEzinoAXTdAMFnDAQT1KVPRlnYfBrqxtqP66vDM40xxQ==
 
 "@types/axios@^0.14.0":
-  "integrity" "sha512-KqQnQbdYE54D7oa/UmYVMZKq7CO4l8DEENzOKc4aBRwxCXSlJXGz83flFx5L7AWrOQnmuN3kVsRdt+GZPPjiVQ=="
-  "resolved" "https://registry.npmmirror.com/@types/axios/-/axios-0.14.0.tgz"
-  "version" "0.14.0"
+  version "0.14.0"
+  resolved "https://registry.npmmirror.com/@types/axios/-/axios-0.14.0.tgz"
+  integrity sha512-KqQnQbdYE54D7oa/UmYVMZKq7CO4l8DEENzOKc4aBRwxCXSlJXGz83flFx5L7AWrOQnmuN3kVsRdt+GZPPjiVQ==
   dependencies:
-    "axios" "*"
+    axios "*"
 
 "@types/js-cookie@^3.0.1":
-  "integrity" "sha512-6+0ekgfusHftJNYpihfkMu8BWdeHs9EOJuGcSofErjstGPfPGEu9yTu4t460lTzzAMl2cM5zngQJqPMHbbnvYA=="
-  "resolved" "https://registry.npmmirror.com/@types/js-cookie/-/js-cookie-3.0.2.tgz"
-  "version" "3.0.2"
+  version "3.0.2"
+  resolved "https://registry.npmmirror.com/@types/js-cookie/-/js-cookie-3.0.2.tgz"
+  integrity sha512-6+0ekgfusHftJNYpihfkMu8BWdeHs9EOJuGcSofErjstGPfPGEu9yTu4t460lTzzAMl2cM5zngQJqPMHbbnvYA==
 
 "@types/json-schema@^7.0.9":
-  "integrity" "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ=="
-  "resolved" "https://registry.npmmirror.com/@types/json-schema/-/json-schema-7.0.11.tgz"
-  "version" "7.0.11"
+  version "7.0.11"
+  resolved "https://registry.npmmirror.com/@types/json-schema/-/json-schema-7.0.11.tgz"
+  integrity sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==
 
 "@types/lodash@^4.14.180":
-  "integrity" "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q=="
-  "resolved" "https://registry.npmmirror.com/@types/lodash/-/lodash-4.14.182.tgz"
-  "version" "4.14.182"
+  version "4.14.182"
+  resolved "https://registry.npmmirror.com/@types/lodash/-/lodash-4.14.182.tgz"
+  integrity sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==
 
 "@types/minimist@^1.2.0":
-  "integrity" "sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ=="
-  "resolved" "https://registry.npmmirror.com/@types/minimist/-/minimist-1.2.2.tgz"
-  "version" "1.2.2"
+  version "1.2.2"
+  resolved "https://registry.npmmirror.com/@types/minimist/-/minimist-1.2.2.tgz"
+  integrity sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==
 
-"@types/node@*", "@types/node@>=12":
-  "integrity" "sha512-V3orv+ggDsWVHP99K3JlwtH20R7J4IhI1Kksgc+64q5VxgfRkQG8Ws3MFm/FZOKDYGy9feGFlZ70/HpCNe9QaA=="
-  "resolved" "https://registry.npmmirror.com/@types/node/-/node-17.0.36.tgz"
-  "version" "17.0.36"
+"@types/node@>=12":
+  version "17.0.36"
+  resolved "https://registry.npmmirror.com/@types/node/-/node-17.0.36.tgz"
+  integrity sha512-V3orv+ggDsWVHP99K3JlwtH20R7J4IhI1Kksgc+64q5VxgfRkQG8Ws3MFm/FZOKDYGy9feGFlZ70/HpCNe9QaA==
 
 "@types/normalize-package-data@^2.4.0":
-  "integrity" "sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw=="
-  "resolved" "https://registry.npmmirror.com/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz"
-  "version" "2.4.1"
+  version "2.4.1"
+  resolved "https://registry.npmmirror.com/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz"
+  integrity sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==
 
 "@types/parse-json@^4.0.0":
-  "integrity" "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA=="
-  "resolved" "https://registry.npmmirror.com/@types/parse-json/-/parse-json-4.0.0.tgz"
-  "version" "4.0.0"
+  version "4.0.0"
+  resolved "https://registry.npmmirror.com/@types/parse-json/-/parse-json-4.0.0.tgz"
+  integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
 
 "@types/point-in-polygon@^1.1.1":
-  "integrity" "sha512-DDl4uxqbpRsBYg+youv7AbWsED4eycsPiSD+AaB+NAkFjHKHTuij55K29R8rFgqeoeazi/5syNW5J2uNnpS+Ow=="
-  "resolved" "https://registry.npmmirror.com/@types/point-in-polygon/-/point-in-polygon-1.1.1.tgz"
-  "version" "1.1.1"
+  version "1.1.1"
+  resolved "https://registry.npmmirror.com/@types/point-in-polygon/-/point-in-polygon-1.1.1.tgz"
+  integrity sha512-DDl4uxqbpRsBYg+youv7AbWsED4eycsPiSD+AaB+NAkFjHKHTuij55K29R8rFgqeoeazi/5syNW5J2uNnpS+Ow==
 
 "@types/qs@^6.9.7":
-  "integrity" "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw=="
-  "resolved" "https://registry.npmmirror.com/@types/qs/-/qs-6.9.7.tgz"
-  "version" "6.9.7"
+  version "6.9.7"
+  resolved "https://registry.npmmirror.com/@types/qs/-/qs-6.9.7.tgz"
+  integrity sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==
 
 "@types/three@^0.136.1":
-  "integrity" "sha512-gzTw6RR4dU8sGf+RpLBWWKHRVIJ4gwKVQPk+IFCgha04Efg/itXYUalX6iBcYeSmaDu0qE5M7uTq0XLQpU4FAg=="
-  "resolved" "https://registry.npmmirror.com/@types/three/-/three-0.136.1.tgz"
-  "version" "0.136.1"
+  version "0.136.1"
+  resolved "https://registry.npmmirror.com/@types/three/-/three-0.136.1.tgz"
+  integrity sha512-gzTw6RR4dU8sGf+RpLBWWKHRVIJ4gwKVQPk+IFCgha04Efg/itXYUalX6iBcYeSmaDu0qE5M7uTq0XLQpU4FAg==
 
 "@types/ua-parser-js@^0.7.36":
-  "integrity" "sha512-N1rW+njavs70y2cApeIw1vLMYXRwfBy+7trgavGuuTfOd7j1Yh7QTRc/yqsPl6ncokt72ZXuxEU0PiCp9bSwNQ=="
-  "resolved" "https://registry.npmjs.org/@types/ua-parser-js/-/ua-parser-js-0.7.36.tgz"
-  "version" "0.7.36"
+  version "0.7.36"
+  resolved "https://registry.npmjs.org/@types/ua-parser-js/-/ua-parser-js-0.7.36.tgz"
+  integrity sha512-N1rW+njavs70y2cApeIw1vLMYXRwfBy+7trgavGuuTfOd7j1Yh7QTRc/yqsPl6ncokt72ZXuxEU0PiCp9bSwNQ==
+
+"@types/uuid@^9.0.7":
+  version "9.0.7"
+  resolved "https://registry.npmmirror.com/@types/uuid/-/uuid-9.0.7.tgz#b14cebc75455eeeb160d5fe23c2fcc0c64f724d8"
+  integrity sha512-WUtIVRUZ9i5dYXefDEAI7sh9/O7jGvHg7Df/5O/gtH3Yabe5odI3UWopVR1qbPXQtvOxWu3mM4XxlYeZtMWF4g==
+
+"@types/web-bluetooth@^0.0.20":
+  version "0.0.20"
+  resolved "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz#f066abfcd1cbe66267cdbbf0de010d8a41b41597"
+  integrity sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==
 
 "@typescript-eslint/eslint-plugin@^5.16.0":
-  "integrity" "sha512-DDrIA7GXtmHXr1VCcx9HivA39eprYBIFxbQEHI6NyraRDxCGpxAFiYQAT/1Y0vh1C+o2vfBiy4IuPoXxtTZCAQ=="
-  "resolved" "https://registry.npmmirror.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.27.0.tgz"
-  "version" "5.27.0"
+  version "5.27.0"
+  resolved "https://registry.npmmirror.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.27.0.tgz"
+  integrity sha512-DDrIA7GXtmHXr1VCcx9HivA39eprYBIFxbQEHI6NyraRDxCGpxAFiYQAT/1Y0vh1C+o2vfBiy4IuPoXxtTZCAQ==
   dependencies:
     "@typescript-eslint/scope-manager" "5.27.0"
     "@typescript-eslint/type-utils" "5.27.0"
     "@typescript-eslint/utils" "5.27.0"
-    "debug" "^4.3.4"
-    "functional-red-black-tree" "^1.0.1"
-    "ignore" "^5.2.0"
-    "regexpp" "^3.2.0"
-    "semver" "^7.3.7"
-    "tsutils" "^3.21.0"
-
-"@typescript-eslint/parser@^5.0.0", "@typescript-eslint/parser@^5.17.0":
-  "integrity" "sha512-8oGjQF46c52l7fMiPPvX4It3u3V3JipssqDfHQ2hcR0AeR8Zge+OYyKUCm5b70X72N1qXt0qgHenwN6Gc2SXZA=="
-  "resolved" "https://registry.npmmirror.com/@typescript-eslint/parser/-/parser-5.27.0.tgz"
-  "version" "5.27.0"
+    debug "^4.3.4"
+    functional-red-black-tree "^1.0.1"
+    ignore "^5.2.0"
+    regexpp "^3.2.0"
+    semver "^7.3.7"
+    tsutils "^3.21.0"
+
+"@typescript-eslint/parser@^5.17.0":
+  version "5.27.0"
+  resolved "https://registry.npmmirror.com/@typescript-eslint/parser/-/parser-5.27.0.tgz"
+  integrity sha512-8oGjQF46c52l7fMiPPvX4It3u3V3JipssqDfHQ2hcR0AeR8Zge+OYyKUCm5b70X72N1qXt0qgHenwN6Gc2SXZA==
   dependencies:
     "@typescript-eslint/scope-manager" "5.27.0"
     "@typescript-eslint/types" "5.27.0"
     "@typescript-eslint/typescript-estree" "5.27.0"
-    "debug" "^4.3.4"
+    debug "^4.3.4"
 
 "@typescript-eslint/scope-manager@5.27.0":
-  "integrity" "sha512-VnykheBQ/sHd1Vt0LJ1JLrMH1GzHO+SzX6VTXuStISIsvRiurue/eRkTqSrG0CexHQgKG8shyJfR4o5VYioB9g=="
-  "resolved" "https://registry.npmmirror.com/@typescript-eslint/scope-manager/-/scope-manager-5.27.0.tgz"
-  "version" "5.27.0"
+  version "5.27.0"
+  resolved "https://registry.npmmirror.com/@typescript-eslint/scope-manager/-/scope-manager-5.27.0.tgz"
+  integrity sha512-VnykheBQ/sHd1Vt0LJ1JLrMH1GzHO+SzX6VTXuStISIsvRiurue/eRkTqSrG0CexHQgKG8shyJfR4o5VYioB9g==
   dependencies:
     "@typescript-eslint/types" "5.27.0"
     "@typescript-eslint/visitor-keys" "5.27.0"
 
 "@typescript-eslint/type-utils@5.27.0":
-  "integrity" "sha512-vpTvRRchaf628Hb/Xzfek+85o//zEUotr1SmexKvTfs7czXfYjXVT/a5yDbpzLBX1rhbqxjDdr1Gyo0x1Fc64g=="
-  "resolved" "https://registry.npmmirror.com/@typescript-eslint/type-utils/-/type-utils-5.27.0.tgz"
-  "version" "5.27.0"
+  version "5.27.0"
+  resolved "https://registry.npmmirror.com/@typescript-eslint/type-utils/-/type-utils-5.27.0.tgz"
+  integrity sha512-vpTvRRchaf628Hb/Xzfek+85o//zEUotr1SmexKvTfs7czXfYjXVT/a5yDbpzLBX1rhbqxjDdr1Gyo0x1Fc64g==
   dependencies:
     "@typescript-eslint/utils" "5.27.0"
-    "debug" "^4.3.4"
-    "tsutils" "^3.21.0"
+    debug "^4.3.4"
+    tsutils "^3.21.0"
 
 "@typescript-eslint/types@5.27.0":
-  "integrity" "sha512-lY6C7oGm9a/GWhmUDOs3xAVRz4ty/XKlQ2fOLr8GAIryGn0+UBOoJDWyHer3UgrHkenorwvBnphhP+zPmzmw0A=="
-  "resolved" "https://registry.npmmirror.com/@typescript-eslint/types/-/types-5.27.0.tgz"
-  "version" "5.27.0"
+  version "5.27.0"
+  resolved "https://registry.npmmirror.com/@typescript-eslint/types/-/types-5.27.0.tgz"
+  integrity sha512-lY6C7oGm9a/GWhmUDOs3xAVRz4ty/XKlQ2fOLr8GAIryGn0+UBOoJDWyHer3UgrHkenorwvBnphhP+zPmzmw0A==
 
 "@typescript-eslint/typescript-estree@5.27.0":
-  "integrity" "sha512-QywPMFvgZ+MHSLRofLI7BDL+UczFFHyj0vF5ibeChDAJgdTV8k4xgEwF0geFhVlPc1p8r70eYewzpo6ps+9LJQ=="
-  "resolved" "https://registry.npmmirror.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.27.0.tgz"
-  "version" "5.27.0"
+  version "5.27.0"
+  resolved "https://registry.npmmirror.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.27.0.tgz"
+  integrity sha512-QywPMFvgZ+MHSLRofLI7BDL+UczFFHyj0vF5ibeChDAJgdTV8k4xgEwF0geFhVlPc1p8r70eYewzpo6ps+9LJQ==
   dependencies:
     "@typescript-eslint/types" "5.27.0"
     "@typescript-eslint/visitor-keys" "5.27.0"
-    "debug" "^4.3.4"
-    "globby" "^11.1.0"
-    "is-glob" "^4.0.3"
-    "semver" "^7.3.7"
-    "tsutils" "^3.21.0"
+    debug "^4.3.4"
+    globby "^11.1.0"
+    is-glob "^4.0.3"
+    semver "^7.3.7"
+    tsutils "^3.21.0"
 
 "@typescript-eslint/utils@5.27.0":
-  "integrity" "sha512-nZvCrkIJppym7cIbP3pOwIkAefXOmfGPnCM0LQfzNaKxJHI6VjI8NC662uoiPlaf5f6ymkTy9C3NQXev2mdXmA=="
-  "resolved" "https://registry.npmmirror.com/@typescript-eslint/utils/-/utils-5.27.0.tgz"
-  "version" "5.27.0"
+  version "5.27.0"
+  resolved "https://registry.npmmirror.com/@typescript-eslint/utils/-/utils-5.27.0.tgz"
+  integrity sha512-nZvCrkIJppym7cIbP3pOwIkAefXOmfGPnCM0LQfzNaKxJHI6VjI8NC662uoiPlaf5f6ymkTy9C3NQXev2mdXmA==
   dependencies:
     "@types/json-schema" "^7.0.9"
     "@typescript-eslint/scope-manager" "5.27.0"
     "@typescript-eslint/types" "5.27.0"
     "@typescript-eslint/typescript-estree" "5.27.0"
-    "eslint-scope" "^5.1.1"
-    "eslint-utils" "^3.0.0"
+    eslint-scope "^5.1.1"
+    eslint-utils "^3.0.0"
 
 "@typescript-eslint/visitor-keys@5.27.0":
-  "integrity" "sha512-46cYrteA2MrIAjv9ai44OQDUoCZyHeGIc4lsjCUX2WT6r4C+kidz1bNiR4017wHOPUythYeH+Sc7/cFP97KEAA=="
-  "resolved" "https://registry.npmmirror.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.27.0.tgz"
-  "version" "5.27.0"
+  version "5.27.0"
+  resolved "https://registry.npmmirror.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.27.0.tgz"
+  integrity sha512-46cYrteA2MrIAjv9ai44OQDUoCZyHeGIc4lsjCUX2WT6r4C+kidz1bNiR4017wHOPUythYeH+Sc7/cFP97KEAA==
   dependencies:
     "@typescript-eslint/types" "5.27.0"
-    "eslint-visitor-keys" "^3.3.0"
+    eslint-visitor-keys "^3.3.0"
 
 "@vitejs/plugin-vue@^2.3.3":
-  "integrity" "sha512-SmQLDyhz+6lGJhPELsBdzXGc+AcaT8stgkbiTFGpXPe8Tl1tJaBw1A6pxDqDuRsVkD8uscrkx3hA7QDOoKYtyw=="
-  "resolved" "https://registry.npmmirror.com/@vitejs/plugin-vue/-/plugin-vue-2.3.3.tgz"
-  "version" "2.3.3"
+  version "2.3.3"
+  resolved "https://registry.npmmirror.com/@vitejs/plugin-vue/-/plugin-vue-2.3.3.tgz"
+  integrity sha512-SmQLDyhz+6lGJhPELsBdzXGc+AcaT8stgkbiTFGpXPe8Tl1tJaBw1A6pxDqDuRsVkD8uscrkx3hA7QDOoKYtyw==
 
 "@volar/code-gen@0.34.16":
-  "integrity" "sha512-ep5us1iF66WlwzCFjTHMIdULIHzu6661228NknkSBGEAh878GPO+AgUqyQn9tY+al0KrsLuDRQVt6pwmeLoqwQ=="
-  "resolved" "https://registry.npmmirror.com/@volar/code-gen/-/code-gen-0.34.16.tgz"
-  "version" "0.34.16"
+  version "0.34.16"
+  resolved "https://registry.npmmirror.com/@volar/code-gen/-/code-gen-0.34.16.tgz"
+  integrity sha512-ep5us1iF66WlwzCFjTHMIdULIHzu6661228NknkSBGEAh878GPO+AgUqyQn9tY+al0KrsLuDRQVt6pwmeLoqwQ==
   dependencies:
     "@volar/source-map" "0.34.16"
 
 "@volar/source-map@0.34.16":
-  "integrity" "sha512-50F1XWcVRzKVXqwO7J39hZ4qd/htzHj62dsywz7FfhZZSOaQ43XT3uEy7cBAVgw7gs+qChFaUJAhM1iHb0FyOQ=="
-  "resolved" "https://registry.npmmirror.com/@volar/source-map/-/source-map-0.34.16.tgz"
-  "version" "0.34.16"
+  version "0.34.16"
+  resolved "https://registry.npmmirror.com/@volar/source-map/-/source-map-0.34.16.tgz"
+  integrity sha512-50F1XWcVRzKVXqwO7J39hZ4qd/htzHj62dsywz7FfhZZSOaQ43XT3uEy7cBAVgw7gs+qChFaUJAhM1iHb0FyOQ==
 
 "@volar/vue-code-gen@0.34.16":
-  "integrity" "sha512-R8OGn26pCQsctXLa6mZi3BIkyXemcrhibTRGrVh1z2TqWMtnCIT/NiAYXR7kAH4UzFEpglOJAIxrjwnodJ7x6w=="
-  "resolved" "https://registry.npmmirror.com/@volar/vue-code-gen/-/vue-code-gen-0.34.16.tgz"
-  "version" "0.34.16"
+  version "0.34.16"
+  resolved "https://registry.npmmirror.com/@volar/vue-code-gen/-/vue-code-gen-0.34.16.tgz"
+  integrity sha512-R8OGn26pCQsctXLa6mZi3BIkyXemcrhibTRGrVh1z2TqWMtnCIT/NiAYXR7kAH4UzFEpglOJAIxrjwnodJ7x6w==
   dependencies:
     "@volar/code-gen" "0.34.16"
     "@volar/source-map" "0.34.16"
@@ -552,9 +572,9 @@
     "@vue/shared" "^3.2.31"
 
 "@volar/vue-typescript@0.34.16":
-  "integrity" "sha512-Jmo19pKRJAIhbAmr/1974knqKws9FZlnYWuCDvvg9wimKHTFosjDhDysORIMVHZ97og/0idK70iIKbcsyDadvw=="
-  "resolved" "https://registry.npmmirror.com/@volar/vue-typescript/-/vue-typescript-0.34.16.tgz"
-  "version" "0.34.16"
+  version "0.34.16"
+  resolved "https://registry.npmmirror.com/@volar/vue-typescript/-/vue-typescript-0.34.16.tgz"
+  integrity sha512-Jmo19pKRJAIhbAmr/1974knqKws9FZlnYWuCDvvg9wimKHTFosjDhDysORIMVHZ97og/0idK70iIKbcsyDadvw==
   dependencies:
     "@volar/code-gen" "0.34.16"
     "@volar/source-map" "0.34.16"
@@ -562,28 +582,28 @@
     "@vue/compiler-sfc" "^3.2.31"
     "@vue/reactivity" "^3.2.31"
 
-"@vue/compiler-core@^3.2.31", "@vue/compiler-core@3.2.36":
-  "integrity" "sha512-bbyZM5hvBicv0PW3KUfVi+x3ylHnfKG7DOn5wM+f2OztTzTjLEyBb/5yrarIYpmnGitVGbjZqDbODyW4iK8hqw=="
-  "resolved" "https://registry.npmmirror.com/@vue/compiler-core/-/compiler-core-3.2.36.tgz"
-  "version" "3.2.36"
+"@vue/compiler-core@3.2.36", "@vue/compiler-core@^3.2.31":
+  version "3.2.36"
+  resolved "https://registry.npmmirror.com/@vue/compiler-core/-/compiler-core-3.2.36.tgz"
+  integrity sha512-bbyZM5hvBicv0PW3KUfVi+x3ylHnfKG7DOn5wM+f2OztTzTjLEyBb/5yrarIYpmnGitVGbjZqDbODyW4iK8hqw==
   dependencies:
     "@babel/parser" "^7.16.4"
     "@vue/shared" "3.2.36"
-    "estree-walker" "^2.0.2"
-    "source-map" "^0.6.1"
+    estree-walker "^2.0.2"
+    source-map "^0.6.1"
 
-"@vue/compiler-dom@^3.2.31", "@vue/compiler-dom@3.2.36":
-  "integrity" "sha512-tcOTAOiW4s24QLnq+ON6J+GRONXJ+A/mqKCORi0LSlIh8XQlNnlm24y8xIL8la+ZDgkdbjarQ9ZqYSvEja6gVA=="
-  "resolved" "https://registry.npmmirror.com/@vue/compiler-dom/-/compiler-dom-3.2.36.tgz"
-  "version" "3.2.36"
+"@vue/compiler-dom@3.2.36", "@vue/compiler-dom@^3.2.31":
+  version "3.2.36"
+  resolved "https://registry.npmmirror.com/@vue/compiler-dom/-/compiler-dom-3.2.36.tgz"
+  integrity sha512-tcOTAOiW4s24QLnq+ON6J+GRONXJ+A/mqKCORi0LSlIh8XQlNnlm24y8xIL8la+ZDgkdbjarQ9ZqYSvEja6gVA==
   dependencies:
     "@vue/compiler-core" "3.2.36"
     "@vue/shared" "3.2.36"
 
-"@vue/compiler-sfc@^3.2.31", "@vue/compiler-sfc@>=3.1.0", "@vue/compiler-sfc@3.2.36":
-  "integrity" "sha512-AvGb4bTj4W8uQ4BqaSxo7UwTEqX5utdRSMyHy58OragWlt8nEACQ9mIeQh3K4di4/SX+41+pJrLIY01lHAOFOA=="
-  "resolved" "https://registry.npmmirror.com/@vue/compiler-sfc/-/compiler-sfc-3.2.36.tgz"
-  "version" "3.2.36"
+"@vue/compiler-sfc@3.2.36", "@vue/compiler-sfc@^3.2.31":
+  version "3.2.36"
+  resolved "https://registry.npmmirror.com/@vue/compiler-sfc/-/compiler-sfc-3.2.36.tgz"
+  integrity sha512-AvGb4bTj4W8uQ4BqaSxo7UwTEqX5utdRSMyHy58OragWlt8nEACQ9mIeQh3K4di4/SX+41+pJrLIY01lHAOFOA==
   dependencies:
     "@babel/parser" "^7.16.4"
     "@vue/compiler-core" "3.2.36"
@@ -591,2473 +611,2616 @@
     "@vue/compiler-ssr" "3.2.36"
     "@vue/reactivity-transform" "3.2.36"
     "@vue/shared" "3.2.36"
-    "estree-walker" "^2.0.2"
-    "magic-string" "^0.25.7"
-    "postcss" "^8.1.10"
-    "source-map" "^0.6.1"
+    estree-walker "^2.0.2"
+    magic-string "^0.25.7"
+    postcss "^8.1.10"
+    source-map "^0.6.1"
 
 "@vue/compiler-ssr@3.2.36":
-  "integrity" "sha512-+KugInUFRvOxEdLkZwE+W43BqHyhBh0jpYXhmqw1xGq2dmE6J9eZ8UUSOKNhdHtQ/iNLWWeK/wPZkVLUf3YGaw=="
-  "resolved" "https://registry.npmmirror.com/@vue/compiler-ssr/-/compiler-ssr-3.2.36.tgz"
-  "version" "3.2.36"
+  version "3.2.36"
+  resolved "https://registry.npmmirror.com/@vue/compiler-ssr/-/compiler-ssr-3.2.36.tgz"
+  integrity sha512-+KugInUFRvOxEdLkZwE+W43BqHyhBh0jpYXhmqw1xGq2dmE6J9eZ8UUSOKNhdHtQ/iNLWWeK/wPZkVLUf3YGaw==
   dependencies:
     "@vue/compiler-dom" "3.2.36"
     "@vue/shared" "3.2.36"
 
 "@vue/devtools-api@^6.0.0", "@vue/devtools-api@^6.0.0-beta.7":
-  "integrity" "sha512-IiA0SvDrJEgXvVxjNkHPFfDx6SXw0b/TUkqMcDZWNg9fnCAHbTpoo59YfJ9QLFkwa3raau5vSlRVzMSLDnfdtQ=="
-  "resolved" "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.1.4.tgz"
-  "version" "6.1.4"
+  version "6.1.4"
+  resolved "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.1.4.tgz"
+  integrity sha512-IiA0SvDrJEgXvVxjNkHPFfDx6SXw0b/TUkqMcDZWNg9fnCAHbTpoo59YfJ9QLFkwa3raau5vSlRVzMSLDnfdtQ==
 
 "@vue/reactivity-transform@3.2.36":
-  "integrity" "sha512-Jk5o2BhpODC9XTA7o4EL8hSJ4JyrFWErLtClG3NH8wDS7ri9jBDWxI7/549T7JY9uilKsaNM+4pJASLj5dtRwA=="
-  "resolved" "https://registry.npmmirror.com/@vue/reactivity-transform/-/reactivity-transform-3.2.36.tgz"
-  "version" "3.2.36"
+  version "3.2.36"
+  resolved "https://registry.npmmirror.com/@vue/reactivity-transform/-/reactivity-transform-3.2.36.tgz"
+  integrity sha512-Jk5o2BhpODC9XTA7o4EL8hSJ4JyrFWErLtClG3NH8wDS7ri9jBDWxI7/549T7JY9uilKsaNM+4pJASLj5dtRwA==
   dependencies:
     "@babel/parser" "^7.16.4"
     "@vue/compiler-core" "3.2.36"
     "@vue/shared" "3.2.36"
-    "estree-walker" "^2.0.2"
-    "magic-string" "^0.25.7"
+    estree-walker "^2.0.2"
+    magic-string "^0.25.7"
 
-"@vue/reactivity@^3.2.31", "@vue/reactivity@3.2.36":
-  "integrity" "sha512-c2qvopo0crh9A4GXi2/2kfGYMxsJW4tVILrqRPydVGZHhq0fnzy6qmclWOhBFckEhmyxmpHpdJtIRYGeKcuhnA=="
-  "resolved" "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.2.36.tgz"
-  "version" "3.2.36"
+"@vue/reactivity@3.2.36", "@vue/reactivity@^3.2.31":
+  version "3.2.36"
+  resolved "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.2.36.tgz"
+  integrity sha512-c2qvopo0crh9A4GXi2/2kfGYMxsJW4tVILrqRPydVGZHhq0fnzy6qmclWOhBFckEhmyxmpHpdJtIRYGeKcuhnA==
   dependencies:
     "@vue/shared" "3.2.36"
 
 "@vue/runtime-core@3.2.36":
-  "integrity" "sha512-PTWBD+Lub+1U3/KhbCExrfxyS14hstLX+cBboxVHaz+kXoiDLNDEYAovPtxeTutbqtClIXtft+wcGdC+FUQ9qQ=="
-  "resolved" "https://registry.npmmirror.com/@vue/runtime-core/-/runtime-core-3.2.36.tgz"
-  "version" "3.2.36"
+  version "3.2.36"
+  resolved "https://registry.npmmirror.com/@vue/runtime-core/-/runtime-core-3.2.36.tgz"
+  integrity sha512-PTWBD+Lub+1U3/KhbCExrfxyS14hstLX+cBboxVHaz+kXoiDLNDEYAovPtxeTutbqtClIXtft+wcGdC+FUQ9qQ==
   dependencies:
     "@vue/reactivity" "3.2.36"
     "@vue/shared" "3.2.36"
 
 "@vue/runtime-dom@3.2.36":
-  "integrity" "sha512-gYPYblm7QXHVuBohqNRRT7Wez0f2Mx2D40rb4fleehrJU9CnkjG0phhcGEZFfGwCmHZRqBCRgbFWE98bPULqkg=="
-  "resolved" "https://registry.npmmirror.com/@vue/runtime-dom/-/runtime-dom-3.2.36.tgz"
-  "version" "3.2.36"
+  version "3.2.36"
+  resolved "https://registry.npmmirror.com/@vue/runtime-dom/-/runtime-dom-3.2.36.tgz"
+  integrity sha512-gYPYblm7QXHVuBohqNRRT7Wez0f2Mx2D40rb4fleehrJU9CnkjG0phhcGEZFfGwCmHZRqBCRgbFWE98bPULqkg==
   dependencies:
     "@vue/runtime-core" "3.2.36"
     "@vue/shared" "3.2.36"
-    "csstype" "^2.6.8"
+    csstype "^2.6.8"
 
 "@vue/server-renderer@3.2.36":
-  "integrity" "sha512-uZE0+jfye6yYXWvAQYeHZv+f50sRryvy16uiqzk3jn8hEY8zTjI+rzlmZSGoE915k+W/Ol9XSw6vxOUD8dGkUg=="
-  "resolved" "https://registry.npmmirror.com/@vue/server-renderer/-/server-renderer-3.2.36.tgz"
-  "version" "3.2.36"
+  version "3.2.36"
+  resolved "https://registry.npmmirror.com/@vue/server-renderer/-/server-renderer-3.2.36.tgz"
+  integrity sha512-uZE0+jfye6yYXWvAQYeHZv+f50sRryvy16uiqzk3jn8hEY8zTjI+rzlmZSGoE915k+W/Ol9XSw6vxOUD8dGkUg==
   dependencies:
     "@vue/compiler-ssr" "3.2.36"
     "@vue/shared" "3.2.36"
 
-"@vue/shared@^3.2.31", "@vue/shared@3.2.36":
-  "integrity" "sha512-JtB41wXl7Au3+Nl3gD16Cfpj7k/6aCroZ6BbOiCMFCMvrOpkg/qQUXTso2XowaNqBbnkuGHurLAqkLBxNGc1hQ=="
-  "resolved" "https://registry.npmmirror.com/@vue/shared/-/shared-3.2.36.tgz"
-  "version" "3.2.36"
+"@vue/shared@3.2.36", "@vue/shared@^3.2.31":
+  version "3.2.36"
+  resolved "https://registry.npmmirror.com/@vue/shared/-/shared-3.2.36.tgz"
+  integrity sha512-JtB41wXl7Au3+Nl3gD16Cfpj7k/6aCroZ6BbOiCMFCMvrOpkg/qQUXTso2XowaNqBbnkuGHurLAqkLBxNGc1hQ==
 
 "@vueuse/components@^8.6.0":
-  "integrity" "sha512-TkRCknGsBk/Zuap4YC9MLf+xpopdAkHugSVcSVFbciyBwqr3LlWVeJ4HHlHKGIBNOWyMQqDW0WFy47xfAPd3WA=="
-  "resolved" "https://registry.npmmirror.com/@vueuse/components/-/components-8.6.0.tgz"
-  "version" "8.6.0"
+  version "8.6.0"
+  resolved "https://registry.npmmirror.com/@vueuse/components/-/components-8.6.0.tgz"
+  integrity sha512-TkRCknGsBk/Zuap4YC9MLf+xpopdAkHugSVcSVFbciyBwqr3LlWVeJ4HHlHKGIBNOWyMQqDW0WFy47xfAPd3WA==
   dependencies:
     "@vueuse/core" "8.6.0"
     "@vueuse/shared" "8.6.0"
-    "vue-demi" "*"
+    vue-demi "*"
 
-"@vueuse/core@^8.6.0", "@vueuse/core@8.6.0":
-  "integrity" "sha512-VirzExCm/N+QdrEWT7J4uSrvJ5hquKIAU9alQ37kUvIJk9XxCLxmfRnmekYc1kz2+6BnoyuKYXVmrMV351CB4w=="
-  "resolved" "https://registry.npmmirror.com/@vueuse/core/-/core-8.6.0.tgz"
-  "version" "8.6.0"
+"@vueuse/core@8.6.0", "@vueuse/core@^8.6.0":
+  version "8.6.0"
+  resolved "https://registry.npmmirror.com/@vueuse/core/-/core-8.6.0.tgz"
+  integrity sha512-VirzExCm/N+QdrEWT7J4uSrvJ5hquKIAU9alQ37kUvIJk9XxCLxmfRnmekYc1kz2+6BnoyuKYXVmrMV351CB4w==
   dependencies:
     "@vueuse/metadata" "8.6.0"
     "@vueuse/shared" "8.6.0"
-    "vue-demi" "*"
+    vue-demi "*"
+
+"@vueuse/core@^10.1.2":
+  version "10.7.0"
+  resolved "https://registry.npmmirror.com/@vueuse/core/-/core-10.7.0.tgz#34f2f02f179dc0dcffc2be70d6b1233e011404b9"
+  integrity sha512-4EUDESCHtwu44ZWK3Gc/hZUVhVo/ysvdtwocB5vcauSV4B7NiGY5972WnsojB3vRNdxvAt7kzJWE2h9h7C9d5w==
+  dependencies:
+    "@types/web-bluetooth" "^0.0.20"
+    "@vueuse/metadata" "10.7.0"
+    "@vueuse/shared" "10.7.0"
+    vue-demi ">=0.14.6"
+
+"@vueuse/metadata@10.7.0":
+  version "10.7.0"
+  resolved "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-10.7.0.tgz#7b05e6cfd376aa9bb339a81e16a89c12f3e88c03"
+  integrity sha512-GlaH7tKP2iBCZ3bHNZ6b0cl9g0CJK8lttkBNUX156gWvNYhTKEtbweWLm9rxCPIiwzYcr/5xML6T8ZUEt+DkvA==
 
 "@vueuse/metadata@8.6.0":
-  "integrity" "sha512-F+CKPvaExsm7QgRr8y+ZNJFwXasn89rs5wth/HeX9lJ1q8XEt+HJ16Q5Sxh4rfG5YSKXrStveVge8TKvPjMjFA=="
-  "resolved" "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-8.6.0.tgz"
-  "version" "8.6.0"
+  version "8.6.0"
+  resolved "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-8.6.0.tgz"
+  integrity sha512-F+CKPvaExsm7QgRr8y+ZNJFwXasn89rs5wth/HeX9lJ1q8XEt+HJ16Q5Sxh4rfG5YSKXrStveVge8TKvPjMjFA==
+
+"@vueuse/shared@10.7.0":
+  version "10.7.0"
+  resolved "https://registry.npmmirror.com/@vueuse/shared/-/shared-10.7.0.tgz#21e425cc5ede421e0cda38ac59a0beee6da86b1b"
+  integrity sha512-kc00uV6CiaTdc3i1CDC4a3lBxzaBE9AgYNtFN87B5OOscqeWElj/uza8qVDmk7/U8JbqoONLbtqiLJ5LGRuqlw==
+  dependencies:
+    vue-demi ">=0.14.6"
 
 "@vueuse/shared@8.6.0":
-  "integrity" "sha512-Y/IVywZo7IfEoSSEtCYpkVEmPV7pU35mEIxV7PbD/D3ly18B3mEsBaPbtDkNM/QP3zAZ5mn4nEkOfddX4uwuIA=="
-  "resolved" "https://registry.npmmirror.com/@vueuse/shared/-/shared-8.6.0.tgz"
-  "version" "8.6.0"
-  dependencies:
-    "vue-demi" "*"
-
-"acorn-jsx@^5.3.2":
-  "integrity" "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ=="
-  "resolved" "https://registry.npmmirror.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz"
-  "version" "5.3.2"
-
-"acorn-walk@^8.1.1":
-  "integrity" "sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA=="
-  "resolved" "https://registry.npmmirror.com/acorn-walk/-/acorn-walk-8.2.0.tgz"
-  "version" "8.2.0"
-
-"acorn@^6.0.0 || ^7.0.0 || ^8.0.0", "acorn@^8.4.1", "acorn@^8.7.1":
-  "integrity" "sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A=="
-  "resolved" "https://registry.npmmirror.com/acorn/-/acorn-8.7.1.tgz"
-  "version" "8.7.1"
-
-"aggregate-error@^3.0.0":
-  "integrity" "sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA=="
-  "resolved" "https://registry.npmmirror.com/aggregate-error/-/aggregate-error-3.1.0.tgz"
-  "version" "3.1.0"
-  dependencies:
-    "clean-stack" "^2.0.0"
-    "indent-string" "^4.0.0"
-
-"ajv@^6.10.0", "ajv@^6.12.4", "ajv@^6.12.6":
-  "integrity" "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g=="
-  "resolved" "https://registry.npmmirror.com/ajv/-/ajv-6.12.6.tgz"
-  "version" "6.12.6"
-  dependencies:
-    "fast-deep-equal" "^3.1.1"
-    "fast-json-stable-stringify" "^2.0.0"
-    "json-schema-traverse" "^0.4.1"
-    "uri-js" "^4.2.2"
-
-"ansi-escapes@^4.3.0":
-  "integrity" "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ=="
-  "resolved" "https://registry.npmmirror.com/ansi-escapes/-/ansi-escapes-4.3.2.tgz"
-  "version" "4.3.2"
-  dependencies:
-    "type-fest" "^0.21.3"
-
-"ansi-regex@^5.0.1":
-  "integrity" "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
-  "resolved" "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz"
-  "version" "5.0.1"
-
-"ansi-regex@^6.0.1":
-  "integrity" "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA=="
-  "resolved" "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-6.0.1.tgz"
-  "version" "6.0.1"
-
-"ansi-styles@^3.2.1":
-  "integrity" "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA=="
-  "resolved" "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-3.2.1.tgz"
-  "version" "3.2.1"
-  dependencies:
-    "color-convert" "^1.9.0"
-
-"ansi-styles@^4.0.0", "ansi-styles@^4.1.0":
-  "integrity" "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg=="
-  "resolved" "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz"
-  "version" "4.3.0"
-  dependencies:
-    "color-convert" "^2.0.1"
-
-"ansi-styles@^6.0.0":
-  "integrity" "sha512-VbqNsoz55SYGczauuup0MFUyXNQviSpFTj1RQtFzmQLk18qbVSpTFFGMT293rmDaQuKCT6InmbuEyUne4mTuxQ=="
-  "resolved" "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-6.1.0.tgz"
-  "version" "6.1.0"
-
-"ant-design-vue@2.2.8":
-  "integrity" "sha512-3graq9/gCfJQs6hznrHV6sa9oDmk/D1H3Oo0vLdVpPS/I61fZPk8NEyNKCHpNA6fT2cx6xx9U3QS63uuyikg/Q=="
-  "resolved" "https://registry.npmmirror.com/ant-design-vue/-/ant-design-vue-2.2.8.tgz"
-  "version" "2.2.8"
-  dependencies:
-    "@ant-design/icons-vue" "^6.0.0"
+  version "8.6.0"
+  resolved "https://registry.npmmirror.com/@vueuse/shared/-/shared-8.6.0.tgz"
+  integrity sha512-Y/IVywZo7IfEoSSEtCYpkVEmPV7pU35mEIxV7PbD/D3ly18B3mEsBaPbtDkNM/QP3zAZ5mn4nEkOfddX4uwuIA==
+  dependencies:
+    vue-demi "*"
+
+JSONStream@^1.0.4:
+  version "1.3.5"
+  resolved "https://registry.npmmirror.com/JSONStream/-/JSONStream-1.3.5.tgz"
+  integrity sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==
+  dependencies:
+    jsonparse "^1.2.0"
+    through ">=2.2.7 <3"
+
+acorn-jsx@^5.3.2:
+  version "5.3.2"
+  resolved "https://registry.npmmirror.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz"
+  integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
+
+acorn-walk@^8.1.1:
+  version "8.2.0"
+  resolved "https://registry.npmmirror.com/acorn-walk/-/acorn-walk-8.2.0.tgz"
+  integrity sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==
+
+acorn@^8.4.1, acorn@^8.7.1:
+  version "8.7.1"
+  resolved "https://registry.npmmirror.com/acorn/-/acorn-8.7.1.tgz"
+  integrity sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A==
+
+aggregate-error@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.npmmirror.com/aggregate-error/-/aggregate-error-3.1.0.tgz"
+  integrity sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==
+  dependencies:
+    clean-stack "^2.0.0"
+    indent-string "^4.0.0"
+
+ajv@^6.10.0, ajv@^6.12.4, ajv@^6.12.6:
+  version "6.12.6"
+  resolved "https://registry.npmmirror.com/ajv/-/ajv-6.12.6.tgz"
+  integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.4.1"
+    uri-js "^4.2.2"
+
+ansi-escapes@^4.3.0:
+  version "4.3.2"
+  resolved "https://registry.npmmirror.com/ansi-escapes/-/ansi-escapes-4.3.2.tgz"
+  integrity sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==
+  dependencies:
+    type-fest "^0.21.3"
+
+ansi-regex@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz"
+  integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
+
+ansi-regex@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-6.0.1.tgz"
+  integrity sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==
+
+ansi-styles@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-3.2.1.tgz"
+  integrity sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==
+  dependencies:
+    color-convert "^1.9.0"
+
+ansi-styles@^4.0.0, ansi-styles@^4.1.0:
+  version "4.3.0"
+  resolved "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz"
+  integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==
+  dependencies:
+    color-convert "^2.0.1"
+
+ansi-styles@^6.0.0:
+  version "6.1.0"
+  resolved "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-6.1.0.tgz"
+  integrity sha512-VbqNsoz55SYGczauuup0MFUyXNQviSpFTj1RQtFzmQLk18qbVSpTFFGMT293rmDaQuKCT6InmbuEyUne4mTuxQ==
+
+ant-design-vue@3.2.19:
+  version "3.2.19"
+  resolved "https://registry.npmmirror.com/ant-design-vue/-/ant-design-vue-3.2.19.tgz#b8f7c2ed81def0b8636fbd53608afb6db9db5831"
+  integrity sha512-weizTa70qNhyj8tOoplTcpt85OkVHpnreK2skdTmORFAGDGvF15zyoqCNg2tByzn2xxf2DloQQvZYKlN/i0CGw==
+  dependencies:
+    "@ant-design/colors" "^6.0.0"
+    "@ant-design/icons-vue" "^6.1.0"
     "@babel/runtime" "^7.10.5"
+    "@ctrl/tinycolor" "^3.4.0"
     "@simonwep/pickr" "~1.8.0"
-    "array-tree-filter" "^2.1.0"
-    "async-validator" "^3.3.0"
-    "dom-align" "^1.12.1"
-    "dom-scroll-into-view" "^2.0.0"
-    "lodash" "^4.17.21"
-    "lodash-es" "^4.17.15"
-    "moment" "^2.27.0"
-    "omit.js" "^2.0.0"
-    "resize-observer-polyfill" "^1.5.1"
-    "scroll-into-view-if-needed" "^2.2.25"
-    "shallow-equal" "^1.0.0"
-    "vue-types" "^3.0.0"
-    "warning" "^4.0.0"
-
-"arg@^4.1.0":
-  "integrity" "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA=="
-  "resolved" "https://registry.npmmirror.com/arg/-/arg-4.1.3.tgz"
-  "version" "4.1.3"
-
-"argparse@^2.0.1":
-  "integrity" "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
-  "resolved" "https://registry.npmmirror.com/argparse/-/argparse-2.0.1.tgz"
-  "version" "2.0.1"
-
-"array-ify@^1.0.0":
-  "integrity" "sha512-c5AMf34bKdvPhQ7tBGhqkgKNUzMr4WUs+WDtC2ZUGOUncbxKMTvqxYctiseW3+L4bA8ec+GcZ6/A/FW4m8ukng=="
-  "resolved" "https://registry.npmmirror.com/array-ify/-/array-ify-1.0.0.tgz"
-  "version" "1.0.0"
-
-"array-tree-filter@^2.1.0":
-  "integrity" "sha512-4ROwICNlNw/Hqa9v+rk5h22KjmzB1JGTMVKP2AKJBOCgb0yL0ASf0+YvCcLNNwquOHNX48jkeZIJ3a+oOQqKcw=="
-  "resolved" "https://registry.npmmirror.com/array-tree-filter/-/array-tree-filter-2.1.0.tgz"
-  "version" "2.1.0"
-
-"array-union@^2.1.0":
-  "integrity" "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw=="
-  "resolved" "https://registry.npmmirror.com/array-union/-/array-union-2.1.0.tgz"
-  "version" "2.1.0"
-
-"arrify@^1.0.1":
-  "integrity" "sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA=="
-  "resolved" "https://registry.npmmirror.com/arrify/-/arrify-1.0.1.tgz"
-  "version" "1.0.1"
-
-"astral-regex@^2.0.0":
-  "integrity" "sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ=="
-  "resolved" "https://registry.npmmirror.com/astral-regex/-/astral-regex-2.0.0.tgz"
-  "version" "2.0.0"
-
-"async-validator@^3.3.0":
-  "integrity" "sha512-8eLCg00W9pIRZSB781UUX/H6Oskmm8xloZfr09lz5bikRpBVDlJ3hRVuxxP1SxcwsEYfJ4IU8Q19Y8/893r3rQ=="
-  "resolved" "https://registry.npmmirror.com/async-validator/-/async-validator-3.5.2.tgz"
-  "version" "3.5.2"
-
-"axios@*", "axios@^0.26.1":
-  "integrity" "sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA=="
-  "resolved" "https://registry.npmmirror.com/axios/-/axios-0.26.1.tgz"
-  "version" "0.26.1"
-  dependencies:
-    "follow-redirects" "^1.14.8"
-
-"balanced-match@^1.0.0":
-  "integrity" "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
-  "resolved" "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz"
-  "version" "1.0.2"
-
-"batch-processor@1.0.0":
-  "integrity" "sha512-xoLQD8gmmR32MeuBHgH0Tzd5PuSZx71ZsbhVxOCRbgktZEPe4SQy7s9Z50uPp0F/f7iw2XmkHN2xkgbMfckMDA=="
-  "resolved" "https://registry.npmmirror.com/batch-processor/-/batch-processor-1.0.0.tgz"
-  "version" "1.0.0"
-
-"boolbase@^1.0.0":
-  "integrity" "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
-  "resolved" "https://registry.npmmirror.com/boolbase/-/boolbase-1.0.0.tgz"
-  "version" "1.0.0"
-
-"brace-expansion@^1.1.7":
-  "integrity" "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA=="
-  "resolved" "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-1.1.11.tgz"
-  "version" "1.1.11"
-  dependencies:
-    "balanced-match" "^1.0.0"
-    "concat-map" "0.0.1"
-
-"braces@^3.0.2":
-  "integrity" "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A=="
-  "resolved" "https://registry.npmmirror.com/braces/-/braces-3.0.2.tgz"
-  "version" "3.0.2"
-  dependencies:
-    "fill-range" "^7.0.1"
-
-"call-bind@^1.0.0":
-  "integrity" "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA=="
-  "resolved" "https://registry.npmmirror.com/call-bind/-/call-bind-1.0.2.tgz"
-  "version" "1.0.2"
-  dependencies:
-    "function-bind" "^1.1.1"
-    "get-intrinsic" "^1.0.2"
-
-"callsites@^3.0.0":
-  "integrity" "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ=="
-  "resolved" "https://registry.npmmirror.com/callsites/-/callsites-3.1.0.tgz"
-  "version" "3.1.0"
-
-"camelcase-keys@^6.2.2":
-  "integrity" "sha512-YrwaA0vEKazPBkn0ipTiMpSajYDSe+KjQfrjhcBMxJt/znbvlHd8Pw/Vamaz5EB4Wfhs3SUR3Z9mwRu/P3s3Yg=="
-  "resolved" "https://registry.npmmirror.com/camelcase-keys/-/camelcase-keys-6.2.2.tgz"
-  "version" "6.2.2"
-  dependencies:
-    "camelcase" "^5.3.1"
-    "map-obj" "^4.0.0"
-    "quick-lru" "^4.0.1"
-
-"camelcase@^5.3.1":
-  "integrity" "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="
-  "resolved" "https://registry.npmmirror.com/camelcase/-/camelcase-5.3.1.tgz"
-  "version" "5.3.1"
-
-"chalk@^2.0.0":
-  "integrity" "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ=="
-  "resolved" "https://registry.npmmirror.com/chalk/-/chalk-2.4.2.tgz"
-  "version" "2.4.2"
-  dependencies:
-    "ansi-styles" "^3.2.1"
-    "escape-string-regexp" "^1.0.5"
-    "supports-color" "^5.3.0"
-
-"chalk@^4.0.0":
-  "integrity" "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA=="
-  "resolved" "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz"
-  "version" "4.1.2"
-  dependencies:
-    "ansi-styles" "^4.1.0"
-    "supports-color" "^7.1.0"
-
-"clean-stack@^2.0.0":
-  "integrity" "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A=="
-  "resolved" "https://registry.npmmirror.com/clean-stack/-/clean-stack-2.2.0.tgz"
-  "version" "2.2.0"
-
-"cli-cursor@^3.1.0":
-  "integrity" "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw=="
-  "resolved" "https://registry.npmmirror.com/cli-cursor/-/cli-cursor-3.1.0.tgz"
-  "version" "3.1.0"
-  dependencies:
-    "restore-cursor" "^3.1.0"
-
-"cli-truncate@^2.1.0":
-  "integrity" "sha512-n8fOixwDD6b/ObinzTrp1ZKFzbgvKZvuz/TvejnLn1aQfC6r52XEx85FmuC+3HI+JM7coBRXUvNqEU2PHVrHpg=="
-  "resolved" "https://registry.npmmirror.com/cli-truncate/-/cli-truncate-2.1.0.tgz"
-  "version" "2.1.0"
-  dependencies:
-    "slice-ansi" "^3.0.0"
-    "string-width" "^4.2.0"
-
-"cli-truncate@^3.1.0":
-  "integrity" "sha512-wfOBkjXteqSnI59oPcJkcPl/ZmwvMMOj340qUIY1SKZCv0B9Cf4D4fAucRkIKQmsIuYK3x1rrgU7MeGRruiuiA=="
-  "resolved" "https://registry.npmmirror.com/cli-truncate/-/cli-truncate-3.1.0.tgz"
-  "version" "3.1.0"
-  dependencies:
-    "slice-ansi" "^5.0.0"
-    "string-width" "^5.0.0"
-
-"clipboard@^2.0.0":
-  "integrity" "sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw=="
-  "resolved" "https://registry.npmmirror.com/clipboard/-/clipboard-2.0.11.tgz"
-  "version" "2.0.11"
-  dependencies:
-    "good-listener" "^1.2.2"
-    "select" "^1.1.2"
-    "tiny-emitter" "^2.0.0"
-
-"cliui@^7.0.2":
-  "integrity" "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ=="
-  "resolved" "https://registry.npmmirror.com/cliui/-/cliui-7.0.4.tgz"
-  "version" "7.0.4"
-  dependencies:
-    "string-width" "^4.2.0"
-    "strip-ansi" "^6.0.0"
-    "wrap-ansi" "^7.0.0"
-
-"color-convert@^1.9.0":
-  "integrity" "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg=="
-  "resolved" "https://registry.npmmirror.com/color-convert/-/color-convert-1.9.3.tgz"
-  "version" "1.9.3"
-  dependencies:
-    "color-name" "1.1.3"
-
-"color-convert@^2.0.1":
-  "integrity" "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ=="
-  "resolved" "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz"
-  "version" "2.0.1"
-  dependencies:
-    "color-name" "~1.1.4"
-
-"color-name@~1.1.4":
-  "integrity" "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
-  "resolved" "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz"
-  "version" "1.1.4"
-
-"color-name@1.1.3":
-  "integrity" "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
-  "resolved" "https://registry.npmmirror.com/color-name/-/color-name-1.1.3.tgz"
-  "version" "1.1.3"
-
-"colord@^2.9.2":
-  "integrity" "sha512-Uqbg+J445nc1TKn4FoDPS6ZZqAvEDnwrH42yo8B40JSOgSLxMZ/gt3h4nmCtPLQeXhjJJkqBx7SCY35WnIixaQ=="
-  "resolved" "https://registry.npmmirror.com/colord/-/colord-2.9.2.tgz"
-  "version" "2.9.2"
-
-"colorette@^2.0.16":
-  "integrity" "sha512-hUewv7oMjCp+wkBv5Rm0v87eJhq4woh5rSR+42YSQJKecCqgIqNkZ6lAlQms/BwHPJA5NKMRlpxPRv0n8HQW6g=="
-  "resolved" "https://registry.npmmirror.com/colorette/-/colorette-2.0.16.tgz"
-  "version" "2.0.16"
-
-"commander@^9.3.0":
-  "integrity" "sha512-hv95iU5uXPbK83mjrJKuZyFM/LBAoCV/XhVGkS5Je6tl7sxr6A0ITMw5WoRV46/UaJ46Nllm3Xt7IaJhXTIkzw=="
-  "resolved" "https://registry.npmmirror.com/commander/-/commander-9.3.0.tgz"
-  "version" "9.3.0"
-
-"compare-func@^2.0.0":
-  "integrity" "sha512-zHig5N+tPWARooBnb0Zx1MFcdfpyJrfTJ3Y5L+IFvUm8rM74hHz66z0gw0x4tijh5CorKkKUCnW82R2vmpeCRA=="
-  "resolved" "https://registry.npmmirror.com/compare-func/-/compare-func-2.0.0.tgz"
-  "version" "2.0.0"
-  dependencies:
-    "array-ify" "^1.0.0"
-    "dot-prop" "^5.1.0"
-
-"compute-scroll-into-view@^1.0.17":
-  "integrity" "sha512-j4dx+Fb0URmzbwwMUrhqWM2BEWHdFGx+qZ9qqASHRPqvTYdqvWnHg0H1hIbcyLnvgnoNAVMlwkepyqM3DaIFUg=="
-  "resolved" "https://registry.npmmirror.com/compute-scroll-into-view/-/compute-scroll-into-view-1.0.17.tgz"
-  "version" "1.0.17"
-
-"concat-map@0.0.1":
-  "integrity" "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
-  "resolved" "https://registry.npmmirror.com/concat-map/-/concat-map-0.0.1.tgz"
-  "version" "0.0.1"
-
-"conventional-changelog-angular@^5.0.11":
-  "integrity" "sha512-i/gipMxs7s8L/QeuavPF2hLnJgH6pEZAttySB6aiQLWcX3puWDL3ACVmvBhJGxnAy52Qc15ua26BufY6KpmrVA=="
-  "resolved" "https://registry.npmmirror.com/conventional-changelog-angular/-/conventional-changelog-angular-5.0.13.tgz"
-  "version" "5.0.13"
-  dependencies:
-    "compare-func" "^2.0.0"
-    "q" "^1.5.1"
-
-"conventional-changelog-conventionalcommits@^4.3.1":
-  "integrity" "sha512-LTTQV4fwOM4oLPad317V/QNQ1FY4Hju5qeBIM1uTHbrnCE+Eg4CdRZ3gO2pUeR+tzWdp80M2j3qFFEDWVqOV4g=="
-  "resolved" "https://registry.npmmirror.com/conventional-changelog-conventionalcommits/-/conventional-changelog-conventionalcommits-4.6.3.tgz"
-  "version" "4.6.3"
-  dependencies:
-    "compare-func" "^2.0.0"
-    "lodash" "^4.17.15"
-    "q" "^1.5.1"
-
-"conventional-commits-parser@^3.2.2":
-  "integrity" "sha512-nK7sAtfi+QXbxHCYfhpZsfRtaitZLIA6889kFIouLvz6repszQDgxBu7wf2WbU+Dco7sAnNCJYERCwt54WPC2Q=="
-  "resolved" "https://registry.npmmirror.com/conventional-commits-parser/-/conventional-commits-parser-3.2.4.tgz"
-  "version" "3.2.4"
-  dependencies:
-    "is-text-path" "^1.0.1"
-    "JSONStream" "^1.0.4"
-    "lodash" "^4.17.15"
-    "meow" "^8.0.0"
-    "split2" "^3.0.0"
-    "through2" "^4.0.0"
-
-"copy-anything@^2.0.1":
-  "integrity" "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw=="
-  "resolved" "https://registry.npmmirror.com/copy-anything/-/copy-anything-2.0.6.tgz"
-  "version" "2.0.6"
-  dependencies:
-    "is-what" "^3.14.1"
-
-"core-js@^3.15.1":
-  "integrity" "sha512-Jt8SReuDKVNZnZEzyEQT5eK6T2RRCXkfTq7Lo09kpm+fHjgGewSbNjV+Wt4yZMhPDdzz2x1ulI5z/w4nxpBseg=="
-  "resolved" "https://registry.npmmirror.com/core-js/-/core-js-3.22.7.tgz"
-  "version" "3.22.7"
-
-"cosmiconfig-typescript-loader@^2.0.0":
-  "integrity" "sha512-B9s6sX/omXq7I6gC6+YgLmrBFMJhPWew7ty/X5Tuwtd2zOSgWaUdXjkuVwbe3qqcdETo60+1nSVMekq//LIXVA=="
-  "resolved" "https://registry.npmmirror.com/cosmiconfig-typescript-loader/-/cosmiconfig-typescript-loader-2.0.1.tgz"
-  "version" "2.0.1"
-  dependencies:
-    "cosmiconfig" "^7"
-    "ts-node" "^10.8.0"
-
-"cosmiconfig@^7", "cosmiconfig@^7.0.0":
-  "integrity" "sha512-a1YWNUV2HwGimB7dU2s1wUMurNKjpx60HxBB6xUM8Re+2s1g1IIfJvFR0/iCF+XHdE0GMTKTuLR32UQff4TEyQ=="
-  "resolved" "https://registry.npmmirror.com/cosmiconfig/-/cosmiconfig-7.0.1.tgz"
-  "version" "7.0.1"
+    array-tree-filter "^2.1.0"
+    async-validator "^4.0.0"
+    dayjs "^1.10.5"
+    dom-align "^1.12.1"
+    dom-scroll-into-view "^2.0.0"
+    lodash "^4.17.21"
+    lodash-es "^4.17.15"
+    resize-observer-polyfill "^1.5.1"
+    scroll-into-view-if-needed "^2.2.25"
+    shallow-equal "^1.0.0"
+    vue-types "^3.0.0"
+    warning "^4.0.0"
+
+arg@^4.1.0:
+  version "4.1.3"
+  resolved "https://registry.npmmirror.com/arg/-/arg-4.1.3.tgz"
+  integrity sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==
+
+argparse@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npmmirror.com/argparse/-/argparse-2.0.1.tgz"
+  integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
+
+array-ify@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmmirror.com/array-ify/-/array-ify-1.0.0.tgz"
+  integrity sha512-c5AMf34bKdvPhQ7tBGhqkgKNUzMr4WUs+WDtC2ZUGOUncbxKMTvqxYctiseW3+L4bA8ec+GcZ6/A/FW4m8ukng==
+
+array-tree-filter@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmmirror.com/array-tree-filter/-/array-tree-filter-2.1.0.tgz#873ac00fec83749f255ac8dd083814b4f6329190"
+  integrity sha512-4ROwICNlNw/Hqa9v+rk5h22KjmzB1JGTMVKP2AKJBOCgb0yL0ASf0+YvCcLNNwquOHNX48jkeZIJ3a+oOQqKcw==
+
+array-union@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmmirror.com/array-union/-/array-union-2.1.0.tgz"
+  integrity sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==
+
+arrify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmmirror.com/arrify/-/arrify-1.0.1.tgz"
+  integrity sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA==
+
+astral-regex@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmmirror.com/astral-regex/-/astral-regex-2.0.0.tgz"
+  integrity sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==
+
+async-validator@^4.0.0:
+  version "4.2.5"
+  resolved "https://registry.npmmirror.com/async-validator/-/async-validator-4.2.5.tgz#c96ea3332a521699d0afaaceed510a54656c6339"
+  integrity sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==
+
+axios@*, axios@^0.26.1:
+  version "0.26.1"
+  resolved "https://registry.npmmirror.com/axios/-/axios-0.26.1.tgz"
+  integrity sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==
+  dependencies:
+    follow-redirects "^1.14.8"
+
+balanced-match@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz"
+  integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
+
+batch-processor@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmmirror.com/batch-processor/-/batch-processor-1.0.0.tgz"
+  integrity sha512-xoLQD8gmmR32MeuBHgH0Tzd5PuSZx71ZsbhVxOCRbgktZEPe4SQy7s9Z50uPp0F/f7iw2XmkHN2xkgbMfckMDA==
+
+boolbase@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmmirror.com/boolbase/-/boolbase-1.0.0.tgz"
+  integrity sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==
+
+brace-expansion@^1.1.7:
+  version "1.1.11"
+  resolved "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-1.1.11.tgz"
+  integrity sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==
+  dependencies:
+    balanced-match "^1.0.0"
+    concat-map "0.0.1"
+
+braces@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.npmmirror.com/braces/-/braces-3.0.2.tgz"
+  integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
+  dependencies:
+    fill-range "^7.0.1"
+
+call-bind@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.npmmirror.com/call-bind/-/call-bind-1.0.2.tgz"
+  integrity sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==
+  dependencies:
+    function-bind "^1.1.1"
+    get-intrinsic "^1.0.2"
+
+callsites@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.npmmirror.com/callsites/-/callsites-3.1.0.tgz"
+  integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
+
+camelcase-keys@^6.2.2:
+  version "6.2.2"
+  resolved "https://registry.npmmirror.com/camelcase-keys/-/camelcase-keys-6.2.2.tgz"
+  integrity sha512-YrwaA0vEKazPBkn0ipTiMpSajYDSe+KjQfrjhcBMxJt/znbvlHd8Pw/Vamaz5EB4Wfhs3SUR3Z9mwRu/P3s3Yg==
+  dependencies:
+    camelcase "^5.3.1"
+    map-obj "^4.0.0"
+    quick-lru "^4.0.1"
+
+camelcase@^5.3.1:
+  version "5.3.1"
+  resolved "https://registry.npmmirror.com/camelcase/-/camelcase-5.3.1.tgz"
+  integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
+
+chalk@^2.0.0:
+  version "2.4.2"
+  resolved "https://registry.npmmirror.com/chalk/-/chalk-2.4.2.tgz"
+  integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
+  dependencies:
+    ansi-styles "^3.2.1"
+    escape-string-regexp "^1.0.5"
+    supports-color "^5.3.0"
+
+chalk@^4.0.0:
+  version "4.1.2"
+  resolved "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz"
+  integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
+clean-stack@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.npmmirror.com/clean-stack/-/clean-stack-2.2.0.tgz"
+  integrity sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==
+
+cli-cursor@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.npmmirror.com/cli-cursor/-/cli-cursor-3.1.0.tgz"
+  integrity sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==
+  dependencies:
+    restore-cursor "^3.1.0"
+
+cli-truncate@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmmirror.com/cli-truncate/-/cli-truncate-2.1.0.tgz"
+  integrity sha512-n8fOixwDD6b/ObinzTrp1ZKFzbgvKZvuz/TvejnLn1aQfC6r52XEx85FmuC+3HI+JM7coBRXUvNqEU2PHVrHpg==
+  dependencies:
+    slice-ansi "^3.0.0"
+    string-width "^4.2.0"
+
+cli-truncate@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.npmmirror.com/cli-truncate/-/cli-truncate-3.1.0.tgz"
+  integrity sha512-wfOBkjXteqSnI59oPcJkcPl/ZmwvMMOj340qUIY1SKZCv0B9Cf4D4fAucRkIKQmsIuYK3x1rrgU7MeGRruiuiA==
+  dependencies:
+    slice-ansi "^5.0.0"
+    string-width "^5.0.0"
+
+clipboard@^2.0.0:
+  version "2.0.11"
+  resolved "https://registry.npmmirror.com/clipboard/-/clipboard-2.0.11.tgz"
+  integrity sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==
+  dependencies:
+    good-listener "^1.2.2"
+    select "^1.1.2"
+    tiny-emitter "^2.0.0"
+
+cliui@^7.0.2:
+  version "7.0.4"
+  resolved "https://registry.npmmirror.com/cliui/-/cliui-7.0.4.tgz"
+  integrity sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==
+  dependencies:
+    string-width "^4.2.0"
+    strip-ansi "^6.0.0"
+    wrap-ansi "^7.0.0"
+
+color-convert@^1.9.0:
+  version "1.9.3"
+  resolved "https://registry.npmmirror.com/color-convert/-/color-convert-1.9.3.tgz"
+  integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
+  dependencies:
+    color-name "1.1.3"
+
+color-convert@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz"
+  integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
+  dependencies:
+    color-name "~1.1.4"
+
+color-name@1.1.3:
+  version "1.1.3"
+  resolved "https://registry.npmmirror.com/color-name/-/color-name-1.1.3.tgz"
+  integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==
+
+color-name@~1.1.4:
+  version "1.1.4"
+  resolved "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz"
+  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
+
+colord@^2.9.2:
+  version "2.9.2"
+  resolved "https://registry.npmmirror.com/colord/-/colord-2.9.2.tgz"
+  integrity sha512-Uqbg+J445nc1TKn4FoDPS6ZZqAvEDnwrH42yo8B40JSOgSLxMZ/gt3h4nmCtPLQeXhjJJkqBx7SCY35WnIixaQ==
+
+colorette@^2.0.16:
+  version "2.0.16"
+  resolved "https://registry.npmmirror.com/colorette/-/colorette-2.0.16.tgz"
+  integrity sha512-hUewv7oMjCp+wkBv5Rm0v87eJhq4woh5rSR+42YSQJKecCqgIqNkZ6lAlQms/BwHPJA5NKMRlpxPRv0n8HQW6g==
+
+commander@^9.3.0:
+  version "9.3.0"
+  resolved "https://registry.npmmirror.com/commander/-/commander-9.3.0.tgz"
+  integrity sha512-hv95iU5uXPbK83mjrJKuZyFM/LBAoCV/XhVGkS5Je6tl7sxr6A0ITMw5WoRV46/UaJ46Nllm3Xt7IaJhXTIkzw==
+
+compare-func@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmmirror.com/compare-func/-/compare-func-2.0.0.tgz"
+  integrity sha512-zHig5N+tPWARooBnb0Zx1MFcdfpyJrfTJ3Y5L+IFvUm8rM74hHz66z0gw0x4tijh5CorKkKUCnW82R2vmpeCRA==
+  dependencies:
+    array-ify "^1.0.0"
+    dot-prop "^5.1.0"
+
+compute-scroll-into-view@^1.0.20:
+  version "1.0.20"
+  resolved "https://registry.npmmirror.com/compute-scroll-into-view/-/compute-scroll-into-view-1.0.20.tgz#1768b5522d1172754f5d0c9b02de3af6be506a43"
+  integrity sha512-UCB0ioiyj8CRjtrvaceBLqqhZCVP+1B8+NWQhmdsm0VXOJtobBCf1dBQmebCCo34qZmUwZfIH2MZLqNHazrfjg==
+
+concat-map@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.npmmirror.com/concat-map/-/concat-map-0.0.1.tgz"
+  integrity sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==
+
+conventional-changelog-angular@^5.0.11:
+  version "5.0.13"
+  resolved "https://registry.npmmirror.com/conventional-changelog-angular/-/conventional-changelog-angular-5.0.13.tgz"
+  integrity sha512-i/gipMxs7s8L/QeuavPF2hLnJgH6pEZAttySB6aiQLWcX3puWDL3ACVmvBhJGxnAy52Qc15ua26BufY6KpmrVA==
+  dependencies:
+    compare-func "^2.0.0"
+    q "^1.5.1"
+
+conventional-changelog-conventionalcommits@^4.3.1:
+  version "4.6.3"
+  resolved "https://registry.npmmirror.com/conventional-changelog-conventionalcommits/-/conventional-changelog-conventionalcommits-4.6.3.tgz"
+  integrity sha512-LTTQV4fwOM4oLPad317V/QNQ1FY4Hju5qeBIM1uTHbrnCE+Eg4CdRZ3gO2pUeR+tzWdp80M2j3qFFEDWVqOV4g==
+  dependencies:
+    compare-func "^2.0.0"
+    lodash "^4.17.15"
+    q "^1.5.1"
+
+conventional-commits-parser@^3.2.2:
+  version "3.2.4"
+  resolved "https://registry.npmmirror.com/conventional-commits-parser/-/conventional-commits-parser-3.2.4.tgz"
+  integrity sha512-nK7sAtfi+QXbxHCYfhpZsfRtaitZLIA6889kFIouLvz6repszQDgxBu7wf2WbU+Dco7sAnNCJYERCwt54WPC2Q==
+  dependencies:
+    JSONStream "^1.0.4"
+    is-text-path "^1.0.1"
+    lodash "^4.17.15"
+    meow "^8.0.0"
+    split2 "^3.0.0"
+    through2 "^4.0.0"
+
+copy-anything@^2.0.1:
+  version "2.0.6"
+  resolved "https://registry.npmmirror.com/copy-anything/-/copy-anything-2.0.6.tgz"
+  integrity sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==
+  dependencies:
+    is-what "^3.14.1"
+
+core-js@^3.15.1:
+  version "3.34.0"
+  resolved "https://registry.npmmirror.com/core-js/-/core-js-3.34.0.tgz#5705e6ad5982678612e96987d05b27c6c7c274a5"
+  integrity sha512-aDdvlDder8QmY91H88GzNi9EtQi2TjvQhpCX6B1v/dAZHU1AuLgHvRh54RiOerpEhEW46Tkf+vgAViB/CWC0ag==
+
+cosmiconfig-typescript-loader@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.npmmirror.com/cosmiconfig-typescript-loader/-/cosmiconfig-typescript-loader-2.0.1.tgz"
+  integrity sha512-B9s6sX/omXq7I6gC6+YgLmrBFMJhPWew7ty/X5Tuwtd2zOSgWaUdXjkuVwbe3qqcdETo60+1nSVMekq//LIXVA==
+  dependencies:
+    cosmiconfig "^7"
+    ts-node "^10.8.0"
+
+cosmiconfig@^7, cosmiconfig@^7.0.0:
+  version "7.0.1"
+  resolved "https://registry.npmmirror.com/cosmiconfig/-/cosmiconfig-7.0.1.tgz"
+  integrity sha512-a1YWNUV2HwGimB7dU2s1wUMurNKjpx60HxBB6xUM8Re+2s1g1IIfJvFR0/iCF+XHdE0GMTKTuLR32UQff4TEyQ==
   dependencies:
     "@types/parse-json" "^4.0.0"
-    "import-fresh" "^3.2.1"
-    "parse-json" "^5.0.0"
-    "path-type" "^4.0.0"
-    "yaml" "^1.10.0"
-
-"create-require@^1.1.0":
-  "integrity" "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ=="
-  "resolved" "https://registry.npmmirror.com/create-require/-/create-require-1.1.1.tgz"
-  "version" "1.1.1"
-
-"cross-env@^7.0.3":
-  "integrity" "sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw=="
-  "resolved" "https://registry.npmmirror.com/cross-env/-/cross-env-7.0.3.tgz"
-  "version" "7.0.3"
-  dependencies:
-    "cross-spawn" "^7.0.1"
-
-"cross-spawn@^7.0.1", "cross-spawn@^7.0.2", "cross-spawn@^7.0.3":
-  "integrity" "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w=="
-  "resolved" "https://registry.npmmirror.com/cross-spawn/-/cross-spawn-7.0.3.tgz"
-  "version" "7.0.3"
-  dependencies:
-    "path-key" "^3.1.0"
-    "shebang-command" "^2.0.0"
-    "which" "^2.0.1"
-
-"cssesc@^3.0.0":
-  "integrity" "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="
-  "resolved" "https://registry.npmmirror.com/cssesc/-/cssesc-3.0.0.tgz"
-  "version" "3.0.0"
-
-"csstype@^2.6.8":
-  "integrity" "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA=="
-  "resolved" "https://registry.npmmirror.com/csstype/-/csstype-2.6.20.tgz"
-  "version" "2.6.20"
-
-"dargs@^7.0.0":
-  "integrity" "sha512-2iy1EkLdlBzQGvbweYRFxmFath8+K7+AKB0TlhHWkNuH+TmovaMH/Wp7V7R4u7f4SnX3OgLsU9t1NI9ioDnUpg=="
-  "resolved" "https://registry.npmmirror.com/dargs/-/dargs-7.0.0.tgz"
-  "version" "7.0.0"
-
-"dayjs@^1.11.1":
-  "integrity" "sha512-F4LXf1OeU9hrSYRPTTj/6FbO4HTjPKXvEIC1P2kcnFurViINCVk3ZV0xAS3XVx9MkMsXbbqlK6hjseaYbgKEHw=="
-  "resolved" "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.2.tgz"
-  "version" "1.11.2"
-
-"debug@^3.2.6":
-  "integrity" "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ=="
-  "resolved" "https://registry.npmmirror.com/debug/-/debug-3.2.7.tgz"
-  "version" "3.2.7"
-  dependencies:
-    "ms" "^2.1.1"
-
-"debug@^4.1.1", "debug@^4.3.2", "debug@^4.3.4":
-  "integrity" "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ=="
-  "resolved" "https://registry.npmmirror.com/debug/-/debug-4.3.4.tgz"
-  "version" "4.3.4"
-  dependencies:
-    "ms" "2.1.2"
-
-"decamelize-keys@^1.1.0":
-  "integrity" "sha512-ocLWuYzRPoS9bfiSdDd3cxvrzovVMZnRDVEzAs+hWIVXGDbHxWMECij2OBuyB/An0FFW/nLuq6Kv1i/YC5Qfzg=="
-  "resolved" "https://registry.npmmirror.com/decamelize-keys/-/decamelize-keys-1.1.0.tgz"
-  "version" "1.1.0"
-  dependencies:
-    "decamelize" "^1.1.0"
-    "map-obj" "^1.0.0"
-
-"decamelize@^1.1.0":
-  "integrity" "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA=="
-  "resolved" "https://registry.npmmirror.com/decamelize/-/decamelize-1.2.0.tgz"
-  "version" "1.2.0"
-
-"decode-uri-component@^0.2.0":
-  "integrity" "sha512-hjf+xovcEn31w/EUYdTXQh/8smFL/dzYjohQGEIgjyNavaJfBY2p5F527Bo1VPATxv0VYTUC2bOcXvqFwk78Og=="
-  "resolved" "https://registry.npmmirror.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz"
-  "version" "0.2.0"
-
-"deep-is@^0.1.3":
-  "integrity" "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ=="
-  "resolved" "https://registry.npmmirror.com/deep-is/-/deep-is-0.1.4.tgz"
-  "version" "0.1.4"
-
-"delegate@^3.1.2":
-  "integrity" "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
-  "resolved" "https://registry.npmmirror.com/delegate/-/delegate-3.2.0.tgz"
-  "version" "3.2.0"
-
-"diff@^4.0.1":
-  "integrity" "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A=="
-  "resolved" "https://registry.npmmirror.com/diff/-/diff-4.0.2.tgz"
-  "version" "4.0.2"
-
-"dir-glob@^3.0.1":
-  "integrity" "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA=="
-  "resolved" "https://registry.npmmirror.com/dir-glob/-/dir-glob-3.0.1.tgz"
-  "version" "3.0.1"
-  dependencies:
-    "path-type" "^4.0.0"
-
-"doctrine@^3.0.0":
-  "integrity" "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w=="
-  "resolved" "https://registry.npmmirror.com/doctrine/-/doctrine-3.0.0.tgz"
-  "version" "3.0.0"
-  dependencies:
-    "esutils" "^2.0.2"
-
-"dom-align@^1.12.1":
-  "integrity" "sha512-Gj9hZN3a07cbR6zviMUBOMPdWxYhbMI+x+WS0NAIu2zFZmbK8ys9R79g+iG9qLnlCwpFoaB+fKy8Pdv470GsPA=="
-  "resolved" "https://registry.npmmirror.com/dom-align/-/dom-align-1.12.3.tgz"
-  "version" "1.12.3"
-
-"dom-scroll-into-view@^2.0.0":
-  "integrity" "sha512-bvVTQe1lfaUr1oFzZX80ce9KLDlZ3iU+XGNE/bz9HnGdklTieqsbmsLHe+rT2XWqopvL0PckkYqN7ksmm5pe3w=="
-  "resolved" "https://registry.npmmirror.com/dom-scroll-into-view/-/dom-scroll-into-view-2.0.1.tgz"
-  "version" "2.0.1"
-
-"dot-prop@^5.1.0":
-  "integrity" "sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q=="
-  "resolved" "https://registry.npmmirror.com/dot-prop/-/dot-prop-5.3.0.tgz"
-  "version" "5.3.0"
-  dependencies:
-    "is-obj" "^2.0.0"
-
-"eastasianwidth@^0.2.0":
-  "integrity" "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="
-  "resolved" "https://registry.npmmirror.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz"
-  "version" "0.2.0"
-
-"element-resize-detector@^1.1.15":
-  "integrity" "sha512-Fl5Ftk6WwXE0wqCgNoseKWndjzZlDCwuPTcoVZfCP9R3EHQF8qUtr3YUPNETegRBOKqQKPW3n4kiIWngGi8tKg=="
-  "resolved" "https://registry.npmmirror.com/element-resize-detector/-/element-resize-detector-1.2.4.tgz"
-  "version" "1.2.4"
-  dependencies:
-    "batch-processor" "1.0.0"
-
-"emoji-regex@^8.0.0":
-  "integrity" "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
-  "resolved" "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz"
-  "version" "8.0.0"
-
-"emoji-regex@^9.2.2":
-  "integrity" "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="
-  "resolved" "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-9.2.2.tgz"
-  "version" "9.2.2"
-
-"errno@^0.1.1":
-  "integrity" "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A=="
-  "resolved" "https://registry.npmmirror.com/errno/-/errno-0.1.8.tgz"
-  "version" "0.1.8"
-  dependencies:
-    "prr" "~1.0.1"
-
-"error-ex@^1.3.1":
-  "integrity" "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g=="
-  "resolved" "https://registry.npmmirror.com/error-ex/-/error-ex-1.3.2.tgz"
-  "version" "1.3.2"
-  dependencies:
-    "is-arrayish" "^0.2.1"
-
-"esbuild-windows-64@0.14.39":
-  "integrity" "sha512-E2wm+5FwCcLpKsBHRw28bSYQw0Ikxb7zIMxw3OPAkiaQhLVr3dnVO8DofmbWhhf6b97bWzg37iSZ45ZDpLw7Ow=="
-  "resolved" "https://registry.npmmirror.com/esbuild-windows-64/-/esbuild-windows-64-0.14.39.tgz"
-  "version" "0.14.39"
-
-"esbuild@^0.14.27":
-  "integrity" "sha512-2kKujuzvRWYtwvNjYDY444LQIA3TyJhJIX3Yo4+qkFlDDtGlSicWgeHVJqMUP/2sSfH10PGwfsj+O2ro1m10xQ=="
-  "resolved" "https://registry.npmmirror.com/esbuild/-/esbuild-0.14.39.tgz"
-  "version" "0.14.39"
+    import-fresh "^3.2.1"
+    parse-json "^5.0.0"
+    path-type "^4.0.0"
+    yaml "^1.10.0"
+
+create-require@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.npmmirror.com/create-require/-/create-require-1.1.1.tgz"
+  integrity sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==
+
+cross-env@^7.0.3:
+  version "7.0.3"
+  resolved "https://registry.npmmirror.com/cross-env/-/cross-env-7.0.3.tgz"
+  integrity sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==
+  dependencies:
+    cross-spawn "^7.0.1"
+
+cross-spawn@^7.0.1, cross-spawn@^7.0.2, cross-spawn@^7.0.3:
+  version "7.0.3"
+  resolved "https://registry.npmmirror.com/cross-spawn/-/cross-spawn-7.0.3.tgz"
+  integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
+  dependencies:
+    path-key "^3.1.0"
+    shebang-command "^2.0.0"
+    which "^2.0.1"
+
+cssesc@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmmirror.com/cssesc/-/cssesc-3.0.0.tgz"
+  integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
+
+csstype@^2.6.8:
+  version "2.6.20"
+  resolved "https://registry.npmmirror.com/csstype/-/csstype-2.6.20.tgz"
+  integrity sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==
+
+dargs@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.npmmirror.com/dargs/-/dargs-7.0.0.tgz"
+  integrity sha512-2iy1EkLdlBzQGvbweYRFxmFath8+K7+AKB0TlhHWkNuH+TmovaMH/Wp7V7R4u7f4SnX3OgLsU9t1NI9ioDnUpg==
+
+dayjs@^1.10.5:
+  version "1.11.10"
+  resolved "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.10.tgz#68acea85317a6e164457d6d6947564029a6a16a0"
+  integrity sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==
+
+dayjs@^1.11.1:
+  version "1.11.2"
+  resolved "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.2.tgz"
+  integrity sha512-F4LXf1OeU9hrSYRPTTj/6FbO4HTjPKXvEIC1P2kcnFurViINCVk3ZV0xAS3XVx9MkMsXbbqlK6hjseaYbgKEHw==
+
+debug@^3.2.6:
+  version "3.2.7"
+  resolved "https://registry.npmmirror.com/debug/-/debug-3.2.7.tgz"
+  integrity sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==
+  dependencies:
+    ms "^2.1.1"
+
+debug@^4.1.1, debug@^4.3.2, debug@^4.3.4:
+  version "4.3.4"
+  resolved "https://registry.npmmirror.com/debug/-/debug-4.3.4.tgz"
+  integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
+  dependencies:
+    ms "2.1.2"
+
+decamelize-keys@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmmirror.com/decamelize-keys/-/decamelize-keys-1.1.0.tgz"
+  integrity sha512-ocLWuYzRPoS9bfiSdDd3cxvrzovVMZnRDVEzAs+hWIVXGDbHxWMECij2OBuyB/An0FFW/nLuq6Kv1i/YC5Qfzg==
+  dependencies:
+    decamelize "^1.1.0"
+    map-obj "^1.0.0"
+
+decamelize@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.npmmirror.com/decamelize/-/decamelize-1.2.0.tgz"
+  integrity sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==
+
+decode-uri-component@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.npmmirror.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz"
+  integrity sha512-hjf+xovcEn31w/EUYdTXQh/8smFL/dzYjohQGEIgjyNavaJfBY2p5F527Bo1VPATxv0VYTUC2bOcXvqFwk78Og==
+
+deep-is@^0.1.3:
+  version "0.1.4"
+  resolved "https://registry.npmmirror.com/deep-is/-/deep-is-0.1.4.tgz"
+  integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
+
+delegate@^3.1.2:
+  version "3.2.0"
+  resolved "https://registry.npmmirror.com/delegate/-/delegate-3.2.0.tgz"
+  integrity sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==
+
+diff@^4.0.1:
+  version "4.0.2"
+  resolved "https://registry.npmmirror.com/diff/-/diff-4.0.2.tgz"
+  integrity sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==
+
+dir-glob@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.npmmirror.com/dir-glob/-/dir-glob-3.0.1.tgz"
+  integrity sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==
+  dependencies:
+    path-type "^4.0.0"
+
+doctrine@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmmirror.com/doctrine/-/doctrine-3.0.0.tgz"
+  integrity sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==
+  dependencies:
+    esutils "^2.0.2"
+
+dom-align@^1.12.1:
+  version "1.12.4"
+  resolved "https://registry.npmmirror.com/dom-align/-/dom-align-1.12.4.tgz#3503992eb2a7cfcb2ed3b2a6d21e0b9c00d54511"
+  integrity sha512-R8LUSEay/68zE5c8/3BDxiTEvgb4xZTF0RKmAHfiEVN3klfIpXfi2/QCoiWPccVQ0J/ZGdz9OjzL4uJEP/MRAw==
+
+dom-scroll-into-view@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.npmmirror.com/dom-scroll-into-view/-/dom-scroll-into-view-2.0.1.tgz#0decc8522801fd8d3f1c6ba355a74d382c5f989b"
+  integrity sha512-bvVTQe1lfaUr1oFzZX80ce9KLDlZ3iU+XGNE/bz9HnGdklTieqsbmsLHe+rT2XWqopvL0PckkYqN7ksmm5pe3w==
+
+dot-prop@^5.1.0:
+  version "5.3.0"
+  resolved "https://registry.npmmirror.com/dot-prop/-/dot-prop-5.3.0.tgz"
+  integrity sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==
+  dependencies:
+    is-obj "^2.0.0"
+
+eastasianwidth@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.npmmirror.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz"
+  integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==
+
+element-resize-detector@^1.1.15:
+  version "1.2.4"
+  resolved "https://registry.npmmirror.com/element-resize-detector/-/element-resize-detector-1.2.4.tgz"
+  integrity sha512-Fl5Ftk6WwXE0wqCgNoseKWndjzZlDCwuPTcoVZfCP9R3EHQF8qUtr3YUPNETegRBOKqQKPW3n4kiIWngGi8tKg==
+  dependencies:
+    batch-processor "1.0.0"
+
+emoji-regex@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz"
+  integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
+
+emoji-regex@^9.2.2:
+  version "9.2.2"
+  resolved "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-9.2.2.tgz"
+  integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==
+
+errno@^0.1.1:
+  version "0.1.8"
+  resolved "https://registry.npmmirror.com/errno/-/errno-0.1.8.tgz"
+  integrity sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==
+  dependencies:
+    prr "~1.0.1"
+
+error-ex@^1.3.1:
+  version "1.3.2"
+  resolved "https://registry.npmmirror.com/error-ex/-/error-ex-1.3.2.tgz"
+  integrity sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==
+  dependencies:
+    is-arrayish "^0.2.1"
+
+esbuild-android-64@0.14.39:
+  version "0.14.39"
+  resolved "https://registry.npmmirror.com/esbuild-android-64/-/esbuild-android-64-0.14.39.tgz#09f12a372eed9743fd77ff6d889ac14f7b340c21"
+  integrity sha512-EJOu04p9WgZk0UoKTqLId9VnIsotmI/Z98EXrKURGb3LPNunkeffqQIkjS2cAvidh+OK5uVrXaIP229zK6GvhQ==
+
+esbuild-android-arm64@0.14.39:
+  version "0.14.39"
+  resolved "https://registry.npmmirror.com/esbuild-android-arm64/-/esbuild-android-arm64-0.14.39.tgz#f608d00ea03fe26f3b1ab92a30f99220390f3071"
+  integrity sha512-+twajJqO7n3MrCz9e+2lVOnFplRsaGRwsq1KL/uOy7xK7QdRSprRQcObGDeDZUZsacD5gUkk6OiHiYp6RzU3CA==
+
+esbuild-darwin-64@0.14.39:
+  version "0.14.39"
+  resolved "https://registry.npmmirror.com/esbuild-darwin-64/-/esbuild-darwin-64-0.14.39.tgz#31528daa75b4c9317721ede344195163fae3e041"
+  integrity sha512-ImT6eUw3kcGcHoUxEcdBpi6LfTRWaV6+qf32iYYAfwOeV+XaQ/Xp5XQIBiijLeo+LpGci9M0FVec09nUw41a5g==
+
+esbuild-darwin-arm64@0.14.39:
+  version "0.14.39"
+  resolved "https://registry.npmmirror.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.39.tgz#247f770d86d90a215fa194f24f90e30a0bd97245"
+  integrity sha512-/fcQ5UhE05OiT+bW5v7/up1bDsnvaRZPJxXwzXsMRrr7rZqPa85vayrD723oWMT64dhrgWeA3FIneF8yER0XTw==
+
+esbuild-freebsd-64@0.14.39:
+  version "0.14.39"
+  resolved "https://registry.npmmirror.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.14.39.tgz#479414d294905055eb396ebe455ed42213284ee0"
+  integrity sha512-oMNH8lJI4wtgN5oxuFP7BQ22vgB/e3Tl5Woehcd6i2r6F3TszpCnNl8wo2d/KvyQ4zvLvCWAlRciumhQg88+kQ==
+
+esbuild-freebsd-arm64@0.14.39:
+  version "0.14.39"
+  resolved "https://registry.npmmirror.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.14.39.tgz#cedeb10357c88533615921ae767a67dc870a474c"
+  integrity sha512-1GHK7kwk57ukY2yI4ILWKJXaxfr+8HcM/r/JKCGCPziIVlL+Wi7RbJ2OzMcTKZ1HpvEqCTBT/J6cO4ZEwW4Ypg==
+
+esbuild-linux-32@0.14.39:
+  version "0.14.39"
+  resolved "https://registry.npmmirror.com/esbuild-linux-32/-/esbuild-linux-32-0.14.39.tgz#d9f008c4322d771f3958f59c1eee5a05cdf92485"
+  integrity sha512-g97Sbb6g4zfRLIxHgW2pc393DjnkTRMeq3N1rmjDUABxpx8SjocK4jLen+/mq55G46eE2TA0MkJ4R3SpKMu7dg==
+
+esbuild-linux-64@0.14.39:
+  version "0.14.39"
+  resolved "https://registry.npmmirror.com/esbuild-linux-64/-/esbuild-linux-64-0.14.39.tgz#ba58d7f66858913aeb1ab5c6bde1bbd824731795"
+  integrity sha512-4tcgFDYWdI+UbNMGlua9u1Zhu0N5R6u9tl5WOM8aVnNX143JZoBZLpCuUr5lCKhnD0SCO+5gUyMfupGrHtfggQ==
+
+esbuild-linux-arm64@0.14.39:
+  version "0.14.39"
+  resolved "https://registry.npmmirror.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.14.39.tgz#708785a30072702b5b1c16b65cf9c25c51202529"
+  integrity sha512-23pc8MlD2D6Px1mV8GMglZlKgwgNKAO8gsgsLLcXWSs9lQsCYkIlMo/2Ycfo5JrDIbLdwgP8D2vpfH2KcBqrDQ==
+
+esbuild-linux-arm@0.14.39:
+  version "0.14.39"
+  resolved "https://registry.npmmirror.com/esbuild-linux-arm/-/esbuild-linux-arm-0.14.39.tgz#4e8b5deaa7ab60d0d28fab131244ef82b40684f4"
+  integrity sha512-t0Hn1kWVx5UpCzAJkKRfHeYOLyFnXwYynIkK54/h3tbMweGI7dj400D1k0Vvtj2u1P+JTRT9tx3AjtLEMmfVBQ==
+
+esbuild-linux-mips64le@0.14.39:
+  version "0.14.39"
+  resolved "https://registry.npmmirror.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.14.39.tgz#6f3bf3023f711084e5a1e8190487d2020f39f0f7"
+  integrity sha512-epwlYgVdbmkuRr5n4es3B+yDI0I2e/nxhKejT9H0OLxFAlMkeQZxSpxATpDc9m8NqRci6Kwyb/SfmD1koG2Zuw==
+
+esbuild-linux-ppc64le@0.14.39:
+  version "0.14.39"
+  resolved "https://registry.npmmirror.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.14.39.tgz#900e718a4ea3f6aedde8424828eeefdd4b48d4b9"
+  integrity sha512-W/5ezaq+rQiQBThIjLMNjsuhPHg+ApVAdTz2LvcuesZFMsJoQAW2hutoyg47XxpWi7aEjJGrkS26qCJKhRn3QQ==
+
+esbuild-linux-riscv64@0.14.39:
+  version "0.14.39"
+  resolved "https://registry.npmmirror.com/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.14.39.tgz#dcbff622fa37047a75d2ff7a1d8d2949d80277e4"
+  integrity sha512-IS48xeokcCTKeQIOke2O0t9t14HPvwnZcy+5baG13Z1wxs9ZrC5ig5ypEQQh4QMKxURD5TpCLHw2W42CLuVZaA==
+
+esbuild-linux-s390x@0.14.39:
+  version "0.14.39"
+  resolved "https://registry.npmmirror.com/esbuild-linux-s390x/-/esbuild-linux-s390x-0.14.39.tgz#3f725a7945b419406c99d93744b28552561dcdfd"
+  integrity sha512-zEfunpqR8sMomqXhNTFEKDs+ik7HC01m3M60MsEjZOqaywHu5e5682fMsqOlZbesEAAaO9aAtRBsU7CHnSZWyA==
+
+esbuild-netbsd-64@0.14.39:
+  version "0.14.39"
+  resolved "https://registry.npmmirror.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.14.39.tgz#e10e40b6a765798b90d4eb85901cc85c8b7ff85e"
+  integrity sha512-Uo2suJBSIlrZCe4E0k75VDIFJWfZy+bOV6ih3T4MVMRJh1lHJ2UyGoaX4bOxomYN3t+IakHPyEoln1+qJ1qYaA==
+
+esbuild-openbsd-64@0.14.39:
+  version "0.14.39"
+  resolved "https://registry.npmmirror.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.39.tgz#935ec143f75ce10bd9cdb1c87fee00287eb0edbc"
+  integrity sha512-secQU+EpgUPpYjJe3OecoeGKVvRMLeKUxSMGHnK+aK5uQM3n1FPXNJzyz1LHFOo0WOyw+uoCxBYdM4O10oaCAA==
+
+esbuild-sunos-64@0.14.39:
+  version "0.14.39"
+  resolved "https://registry.npmmirror.com/esbuild-sunos-64/-/esbuild-sunos-64-0.14.39.tgz#0e7aa82b022a2e6d55b0646738b2582c2d72c3c0"
+  integrity sha512-qHq0t5gePEDm2nqZLb+35p/qkaXVS7oIe32R0ECh2HOdiXXkj/1uQI9IRogGqKkK+QjDG+DhwiUw7QoHur/Rwg==
+
+esbuild-windows-32@0.14.39:
+  version "0.14.39"
+  resolved "https://registry.npmmirror.com/esbuild-windows-32/-/esbuild-windows-32-0.14.39.tgz#3f1538241f31b538545f4b5841b248cac260fa35"
+  integrity sha512-XPjwp2OgtEX0JnOlTgT6E5txbRp6Uw54Isorm3CwOtloJazeIWXuiwK0ONJBVb/CGbiCpS7iP2UahGgd2p1x+Q==
+
+esbuild-windows-64@0.14.39:
+  version "0.14.39"
+  resolved "https://registry.npmmirror.com/esbuild-windows-64/-/esbuild-windows-64-0.14.39.tgz"
+  integrity sha512-E2wm+5FwCcLpKsBHRw28bSYQw0Ikxb7zIMxw3OPAkiaQhLVr3dnVO8DofmbWhhf6b97bWzg37iSZ45ZDpLw7Ow==
+
+esbuild-windows-arm64@0.14.39:
+  version "0.14.39"
+  resolved "https://registry.npmmirror.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.39.tgz#00268517e665b33c89778d61f144e4256b39f631"
+  integrity sha512-sBZQz5D+Gd0EQ09tZRnz/PpVdLwvp/ufMtJ1iDFYddDaPpZXKqPyaxfYBLs3ueiaksQ26GGa7sci0OqFzNs7KA==
+
+esbuild@^0.14.27:
+  version "0.14.39"
+  resolved "https://registry.npmmirror.com/esbuild/-/esbuild-0.14.39.tgz"
+  integrity sha512-2kKujuzvRWYtwvNjYDY444LQIA3TyJhJIX3Yo4+qkFlDDtGlSicWgeHVJqMUP/2sSfH10PGwfsj+O2ro1m10xQ==
   optionalDependencies:
-    "esbuild-android-64" "0.14.39"
-    "esbuild-android-arm64" "0.14.39"
-    "esbuild-darwin-64" "0.14.39"
-    "esbuild-darwin-arm64" "0.14.39"
-    "esbuild-freebsd-64" "0.14.39"
-    "esbuild-freebsd-arm64" "0.14.39"
-    "esbuild-linux-32" "0.14.39"
-    "esbuild-linux-64" "0.14.39"
-    "esbuild-linux-arm" "0.14.39"
-    "esbuild-linux-arm64" "0.14.39"
-    "esbuild-linux-mips64le" "0.14.39"
-    "esbuild-linux-ppc64le" "0.14.39"
-    "esbuild-linux-riscv64" "0.14.39"
-    "esbuild-linux-s390x" "0.14.39"
-    "esbuild-netbsd-64" "0.14.39"
-    "esbuild-openbsd-64" "0.14.39"
-    "esbuild-sunos-64" "0.14.39"
-    "esbuild-windows-32" "0.14.39"
-    "esbuild-windows-64" "0.14.39"
-    "esbuild-windows-arm64" "0.14.39"
-
-"escalade@^3.1.1":
-  "integrity" "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw=="
-  "resolved" "https://registry.npmmirror.com/escalade/-/escalade-3.1.1.tgz"
-  "version" "3.1.1"
-
-"escape-string-regexp@^1.0.5":
-  "integrity" "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg=="
-  "resolved" "https://registry.npmmirror.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz"
-  "version" "1.0.5"
-
-"escape-string-regexp@^4.0.0":
-  "integrity" "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="
-  "resolved" "https://registry.npmmirror.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz"
-  "version" "4.0.0"
-
-"eslint-config-prettier@^8.5.0":
-  "integrity" "sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q=="
-  "resolved" "https://registry.npmmirror.com/eslint-config-prettier/-/eslint-config-prettier-8.5.0.tgz"
-  "version" "8.5.0"
-
-"eslint-define-config@^1.4.1":
-  "integrity" "sha512-3kjqLpYgAjr8XtI0ufInSX7cIWe1rDbiG1AjyOHY+00BgWhce8LZ/xd2BMKpgSsDI6bqd59eMmRcxOZSLme+Mg=="
-  "resolved" "https://registry.npmmirror.com/eslint-define-config/-/eslint-define-config-1.4.1.tgz"
-  "version" "1.4.1"
-
-"eslint-plugin-prettier@^4.0.0":
-  "integrity" "sha512-98MqmCJ7vJodoQK359bqQWaxOE0CS8paAz/GgjaZLyex4TTk3g9HugoO89EqWCrFiOqn9EVvcoo7gZzONCWVwQ=="
-  "resolved" "https://registry.npmmirror.com/eslint-plugin-prettier/-/eslint-plugin-prettier-4.0.0.tgz"
-  "version" "4.0.0"
-  dependencies:
-    "prettier-linter-helpers" "^1.0.0"
-
-"eslint-plugin-vue@^9.0.1":
-  "integrity" "sha512-/w/9/vzz+4bSYtp5UqXgJ0CfycXTMtpp6lkz7/fMp0CcJxPWyRP6Pr88ihhrsNEcVt2ZweMupWRNYa+5Md41LQ=="
-  "resolved" "https://registry.npmmirror.com/eslint-plugin-vue/-/eslint-plugin-vue-9.0.1.tgz"
-  "version" "9.0.1"
-  dependencies:
-    "eslint-utils" "^3.0.0"
-    "natural-compare" "^1.4.0"
-    "nth-check" "^2.0.1"
-    "postcss-selector-parser" "^6.0.9"
-    "semver" "^7.3.5"
-    "vue-eslint-parser" "^9.0.1"
-    "xml-name-validator" "^4.0.0"
-
-"eslint-scope@^5.1.1":
-  "integrity" "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw=="
-  "resolved" "https://registry.npmmirror.com/eslint-scope/-/eslint-scope-5.1.1.tgz"
-  "version" "5.1.1"
-  dependencies:
-    "esrecurse" "^4.3.0"
-    "estraverse" "^4.1.1"
-
-"eslint-scope@^7.1.1":
-  "integrity" "sha512-QKQM/UXpIiHcLqJ5AOyIW7XZmzjkzQXYE54n1++wb0u9V/abW3l9uQnxX8Z5Xd18xyKIMTUAyQ0k1e8pz6LUrw=="
-  "resolved" "https://registry.npmmirror.com/eslint-scope/-/eslint-scope-7.1.1.tgz"
-  "version" "7.1.1"
-  dependencies:
-    "esrecurse" "^4.3.0"
-    "estraverse" "^5.2.0"
-
-"eslint-utils@^3.0.0":
-  "integrity" "sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA=="
-  "resolved" "https://registry.npmmirror.com/eslint-utils/-/eslint-utils-3.0.0.tgz"
-  "version" "3.0.0"
-  dependencies:
-    "eslint-visitor-keys" "^2.0.0"
-
-"eslint-visitor-keys@^2.0.0":
-  "integrity" "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw=="
-  "resolved" "https://registry.npmmirror.com/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz"
-  "version" "2.1.0"
-
-"eslint-visitor-keys@^3.3.0":
-  "integrity" "sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA=="
-  "resolved" "https://registry.npmmirror.com/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz"
-  "version" "3.3.0"
-
-"eslint@*", "eslint@^6.0.0 || ^7.0.0 || ^8.0.0", "eslint@^6.2.0 || ^7.0.0 || ^8.0.0", "eslint@^8.16.0", "eslint@>=5", "eslint@>=6.0.0", "eslint@>=7.0.0", "eslint@>=7.28.0":
-  "integrity" "sha512-MBndsoXY/PeVTDJeWsYj7kLZ5hQpJOfMYLsF6LicLHQWbRDG19lK5jOix4DPl8yY4SUFcE3txy86OzFLWT+yoA=="
-  "resolved" "https://registry.npmmirror.com/eslint/-/eslint-8.16.0.tgz"
-  "version" "8.16.0"
+    esbuild-android-64 "0.14.39"
+    esbuild-android-arm64 "0.14.39"
+    esbuild-darwin-64 "0.14.39"
+    esbuild-darwin-arm64 "0.14.39"
+    esbuild-freebsd-64 "0.14.39"
+    esbuild-freebsd-arm64 "0.14.39"
+    esbuild-linux-32 "0.14.39"
+    esbuild-linux-64 "0.14.39"
+    esbuild-linux-arm "0.14.39"
+    esbuild-linux-arm64 "0.14.39"
+    esbuild-linux-mips64le "0.14.39"
+    esbuild-linux-ppc64le "0.14.39"
+    esbuild-linux-riscv64 "0.14.39"
+    esbuild-linux-s390x "0.14.39"
+    esbuild-netbsd-64 "0.14.39"
+    esbuild-openbsd-64 "0.14.39"
+    esbuild-sunos-64 "0.14.39"
+    esbuild-windows-32 "0.14.39"
+    esbuild-windows-64 "0.14.39"
+    esbuild-windows-arm64 "0.14.39"
+
+escalade@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.npmmirror.com/escalade/-/escalade-3.1.1.tgz"
+  integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==
+
+escape-string-regexp@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.npmmirror.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz"
+  integrity sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==
+
+escape-string-regexp@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmmirror.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz"
+  integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==
+
+eslint-config-prettier@^8.5.0:
+  version "8.5.0"
+  resolved "https://registry.npmmirror.com/eslint-config-prettier/-/eslint-config-prettier-8.5.0.tgz"
+  integrity sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q==
+
+eslint-define-config@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.npmmirror.com/eslint-define-config/-/eslint-define-config-1.4.1.tgz"
+  integrity sha512-3kjqLpYgAjr8XtI0ufInSX7cIWe1rDbiG1AjyOHY+00BgWhce8LZ/xd2BMKpgSsDI6bqd59eMmRcxOZSLme+Mg==
+
+eslint-plugin-prettier@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmmirror.com/eslint-plugin-prettier/-/eslint-plugin-prettier-4.0.0.tgz"
+  integrity sha512-98MqmCJ7vJodoQK359bqQWaxOE0CS8paAz/GgjaZLyex4TTk3g9HugoO89EqWCrFiOqn9EVvcoo7gZzONCWVwQ==
+  dependencies:
+    prettier-linter-helpers "^1.0.0"
+
+eslint-plugin-vue@^9.0.1:
+  version "9.0.1"
+  resolved "https://registry.npmmirror.com/eslint-plugin-vue/-/eslint-plugin-vue-9.0.1.tgz"
+  integrity sha512-/w/9/vzz+4bSYtp5UqXgJ0CfycXTMtpp6lkz7/fMp0CcJxPWyRP6Pr88ihhrsNEcVt2ZweMupWRNYa+5Md41LQ==
+  dependencies:
+    eslint-utils "^3.0.0"
+    natural-compare "^1.4.0"
+    nth-check "^2.0.1"
+    postcss-selector-parser "^6.0.9"
+    semver "^7.3.5"
+    vue-eslint-parser "^9.0.1"
+    xml-name-validator "^4.0.0"
+
+eslint-scope@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.npmmirror.com/eslint-scope/-/eslint-scope-5.1.1.tgz"
+  integrity sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==
+  dependencies:
+    esrecurse "^4.3.0"
+    estraverse "^4.1.1"
+
+eslint-scope@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.npmmirror.com/eslint-scope/-/eslint-scope-7.1.1.tgz"
+  integrity sha512-QKQM/UXpIiHcLqJ5AOyIW7XZmzjkzQXYE54n1++wb0u9V/abW3l9uQnxX8Z5Xd18xyKIMTUAyQ0k1e8pz6LUrw==
+  dependencies:
+    esrecurse "^4.3.0"
+    estraverse "^5.2.0"
+
+eslint-utils@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmmirror.com/eslint-utils/-/eslint-utils-3.0.0.tgz"
+  integrity sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==
+  dependencies:
+    eslint-visitor-keys "^2.0.0"
+
+eslint-visitor-keys@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.npmmirror.com/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz"
+  integrity sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==
+
+eslint-visitor-keys@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.npmmirror.com/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz"
+  integrity sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==
+
+eslint@^8.16.0:
+  version "8.16.0"
+  resolved "https://registry.npmmirror.com/eslint/-/eslint-8.16.0.tgz"
+  integrity sha512-MBndsoXY/PeVTDJeWsYj7kLZ5hQpJOfMYLsF6LicLHQWbRDG19lK5jOix4DPl8yY4SUFcE3txy86OzFLWT+yoA==
   dependencies:
     "@eslint/eslintrc" "^1.3.0"
     "@humanwhocodes/config-array" "^0.9.2"
-    "ajv" "^6.10.0"
-    "chalk" "^4.0.0"
-    "cross-spawn" "^7.0.2"
-    "debug" "^4.3.2"
-    "doctrine" "^3.0.0"
-    "escape-string-regexp" "^4.0.0"
-    "eslint-scope" "^7.1.1"
-    "eslint-utils" "^3.0.0"
-    "eslint-visitor-keys" "^3.3.0"
-    "espree" "^9.3.2"
-    "esquery" "^1.4.0"
-    "esutils" "^2.0.2"
-    "fast-deep-equal" "^3.1.3"
-    "file-entry-cache" "^6.0.1"
-    "functional-red-black-tree" "^1.0.1"
-    "glob-parent" "^6.0.1"
-    "globals" "^13.15.0"
-    "ignore" "^5.2.0"
-    "import-fresh" "^3.0.0"
-    "imurmurhash" "^0.1.4"
-    "is-glob" "^4.0.0"
-    "js-yaml" "^4.1.0"
-    "json-stable-stringify-without-jsonify" "^1.0.1"
-    "levn" "^0.4.1"
-    "lodash.merge" "^4.6.2"
-    "minimatch" "^3.1.2"
-    "natural-compare" "^1.4.0"
-    "optionator" "^0.9.1"
-    "regexpp" "^3.2.0"
-    "strip-ansi" "^6.0.1"
-    "strip-json-comments" "^3.1.0"
-    "text-table" "^0.2.0"
-    "v8-compile-cache" "^2.0.3"
-
-"espree@^9.3.1", "espree@^9.3.2":
-  "integrity" "sha512-D211tC7ZwouTIuY5x9XnS0E9sWNChB7IYKX/Xp5eQj3nFXhqmiUDB9q27y76oFl8jTg3pXcQx/bpxMfs3CIZbA=="
-  "resolved" "https://registry.npmmirror.com/espree/-/espree-9.3.2.tgz"
-  "version" "9.3.2"
-  dependencies:
-    "acorn" "^8.7.1"
-    "acorn-jsx" "^5.3.2"
-    "eslint-visitor-keys" "^3.3.0"
-
-"esquery@^1.4.0":
-  "integrity" "sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w=="
-  "resolved" "https://registry.npmmirror.com/esquery/-/esquery-1.4.0.tgz"
-  "version" "1.4.0"
-  dependencies:
-    "estraverse" "^5.1.0"
-
-"esrecurse@^4.3.0":
-  "integrity" "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag=="
-  "resolved" "https://registry.npmmirror.com/esrecurse/-/esrecurse-4.3.0.tgz"
-  "version" "4.3.0"
-  dependencies:
-    "estraverse" "^5.2.0"
-
-"estraverse@^4.1.1":
-  "integrity" "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw=="
-  "resolved" "https://registry.npmmirror.com/estraverse/-/estraverse-4.3.0.tgz"
-  "version" "4.3.0"
-
-"estraverse@^5.1.0", "estraverse@^5.2.0":
-  "integrity" "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA=="
-  "resolved" "https://registry.npmmirror.com/estraverse/-/estraverse-5.3.0.tgz"
-  "version" "5.3.0"
-
-"estree-walker@^2.0.2":
-  "integrity" "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
-  "resolved" "https://registry.npmmirror.com/estree-walker/-/estree-walker-2.0.2.tgz"
-  "version" "2.0.2"
-
-"esutils@^2.0.2":
-  "integrity" "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g=="
-  "resolved" "https://registry.npmmirror.com/esutils/-/esutils-2.0.3.tgz"
-  "version" "2.0.3"
-
-"eventemitter3@^4.0.7":
-  "integrity" "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="
-  "resolved" "https://registry.npmmirror.com/eventemitter3/-/eventemitter3-4.0.7.tgz"
-  "version" "4.0.7"
-
-"execa@^5.0.0", "execa@^5.1.1":
-  "integrity" "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg=="
-  "resolved" "https://registry.npmmirror.com/execa/-/execa-5.1.1.tgz"
-  "version" "5.1.1"
-  dependencies:
-    "cross-spawn" "^7.0.3"
-    "get-stream" "^6.0.0"
-    "human-signals" "^2.1.0"
-    "is-stream" "^2.0.0"
-    "merge-stream" "^2.0.0"
-    "npm-run-path" "^4.0.1"
-    "onetime" "^5.1.2"
-    "signal-exit" "^3.0.3"
-    "strip-final-newline" "^2.0.0"
-
-"fast-deep-equal@^3.1.1", "fast-deep-equal@^3.1.3":
-  "integrity" "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
-  "resolved" "https://registry.npmmirror.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz"
-  "version" "3.1.3"
-
-"fast-diff@^1.1.2":
-  "integrity" "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w=="
-  "resolved" "https://registry.npmmirror.com/fast-diff/-/fast-diff-1.2.0.tgz"
-  "version" "1.2.0"
-
-"fast-glob@^3.2.9":
-  "integrity" "sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew=="
-  "resolved" "https://registry.npmmirror.com/fast-glob/-/fast-glob-3.2.11.tgz"
-  "version" "3.2.11"
+    ajv "^6.10.0"
+    chalk "^4.0.0"
+    cross-spawn "^7.0.2"
+    debug "^4.3.2"
+    doctrine "^3.0.0"
+    escape-string-regexp "^4.0.0"
+    eslint-scope "^7.1.1"
+    eslint-utils "^3.0.0"
+    eslint-visitor-keys "^3.3.0"
+    espree "^9.3.2"
+    esquery "^1.4.0"
+    esutils "^2.0.2"
+    fast-deep-equal "^3.1.3"
+    file-entry-cache "^6.0.1"
+    functional-red-black-tree "^1.0.1"
+    glob-parent "^6.0.1"
+    globals "^13.15.0"
+    ignore "^5.2.0"
+    import-fresh "^3.0.0"
+    imurmurhash "^0.1.4"
+    is-glob "^4.0.0"
+    js-yaml "^4.1.0"
+    json-stable-stringify-without-jsonify "^1.0.1"
+    levn "^0.4.1"
+    lodash.merge "^4.6.2"
+    minimatch "^3.1.2"
+    natural-compare "^1.4.0"
+    optionator "^0.9.1"
+    regexpp "^3.2.0"
+    strip-ansi "^6.0.1"
+    strip-json-comments "^3.1.0"
+    text-table "^0.2.0"
+    v8-compile-cache "^2.0.3"
+
+espree@^9.3.1, espree@^9.3.2:
+  version "9.3.2"
+  resolved "https://registry.npmmirror.com/espree/-/espree-9.3.2.tgz"
+  integrity sha512-D211tC7ZwouTIuY5x9XnS0E9sWNChB7IYKX/Xp5eQj3nFXhqmiUDB9q27y76oFl8jTg3pXcQx/bpxMfs3CIZbA==
+  dependencies:
+    acorn "^8.7.1"
+    acorn-jsx "^5.3.2"
+    eslint-visitor-keys "^3.3.0"
+
+esquery@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.npmmirror.com/esquery/-/esquery-1.4.0.tgz"
+  integrity sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==
+  dependencies:
+    estraverse "^5.1.0"
+
+esrecurse@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.npmmirror.com/esrecurse/-/esrecurse-4.3.0.tgz"
+  integrity sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==
+  dependencies:
+    estraverse "^5.2.0"
+
+estraverse@^4.1.1:
+  version "4.3.0"
+  resolved "https://registry.npmmirror.com/estraverse/-/estraverse-4.3.0.tgz"
+  integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==
+
+estraverse@^5.1.0, estraverse@^5.2.0:
+  version "5.3.0"
+  resolved "https://registry.npmmirror.com/estraverse/-/estraverse-5.3.0.tgz"
+  integrity sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==
+
+estree-walker@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.npmmirror.com/estree-walker/-/estree-walker-2.0.2.tgz"
+  integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
+
+esutils@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.npmmirror.com/esutils/-/esutils-2.0.3.tgz"
+  integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
+
+eventemitter3@^4.0.7:
+  version "4.0.7"
+  resolved "https://registry.npmmirror.com/eventemitter3/-/eventemitter3-4.0.7.tgz"
+  integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==
+
+execa@^5.0.0, execa@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.npmmirror.com/execa/-/execa-5.1.1.tgz"
+  integrity sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==
+  dependencies:
+    cross-spawn "^7.0.3"
+    get-stream "^6.0.0"
+    human-signals "^2.1.0"
+    is-stream "^2.0.0"
+    merge-stream "^2.0.0"
+    npm-run-path "^4.0.1"
+    onetime "^5.1.2"
+    signal-exit "^3.0.3"
+    strip-final-newline "^2.0.0"
+
+fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.npmmirror.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz"
+  integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
+
+fast-diff@^1.1.2:
+  version "1.2.0"
+  resolved "https://registry.npmmirror.com/fast-diff/-/fast-diff-1.2.0.tgz"
+  integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==
+
+fast-glob@^3.2.9:
+  version "3.2.11"
+  resolved "https://registry.npmmirror.com/fast-glob/-/fast-glob-3.2.11.tgz"
+  integrity sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==
   dependencies:
     "@nodelib/fs.stat" "^2.0.2"
     "@nodelib/fs.walk" "^1.2.3"
-    "glob-parent" "^5.1.2"
-    "merge2" "^1.3.0"
-    "micromatch" "^4.0.4"
-
-"fast-json-stable-stringify@^2.0.0":
-  "integrity" "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="
-  "resolved" "https://registry.npmmirror.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz"
-  "version" "2.1.0"
-
-"fast-levenshtein@^2.0.6":
-  "integrity" "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw=="
-  "resolved" "https://registry.npmmirror.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz"
-  "version" "2.0.6"
-
-"fastq@^1.6.0":
-  "integrity" "sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw=="
-  "resolved" "https://registry.npmmirror.com/fastq/-/fastq-1.13.0.tgz"
-  "version" "1.13.0"
-  dependencies:
-    "reusify" "^1.0.4"
-
-"file-entry-cache@^6.0.1":
-  "integrity" "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg=="
-  "resolved" "https://registry.npmmirror.com/file-entry-cache/-/file-entry-cache-6.0.1.tgz"
-  "version" "6.0.1"
-  dependencies:
-    "flat-cache" "^3.0.4"
-
-"filesize@^9.0.1":
-  "integrity" "sha512-4OpF3eYI7S0O+memD6RetheN3qZYR2gGapwYauB2T2F+Da2uBml8jLcukv/7lJeL7ByC+2nzaHZfUR/bGT/HVQ=="
-  "resolved" "https://registry.npmmirror.com/filesize/-/filesize-9.0.1.tgz"
-  "version" "9.0.1"
-
-"fill-range@^7.0.1":
-  "integrity" "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ=="
-  "resolved" "https://registry.npmmirror.com/fill-range/-/fill-range-7.0.1.tgz"
-  "version" "7.0.1"
-  dependencies:
-    "to-regex-range" "^5.0.1"
-
-"filter-obj@^1.1.0":
-  "integrity" "sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ=="
-  "resolved" "https://registry.npmmirror.com/filter-obj/-/filter-obj-1.1.0.tgz"
-  "version" "1.1.0"
-
-"find-up@^4.1.0":
-  "integrity" "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw=="
-  "resolved" "https://registry.npmmirror.com/find-up/-/find-up-4.1.0.tgz"
-  "version" "4.1.0"
-  dependencies:
-    "locate-path" "^5.0.0"
-    "path-exists" "^4.0.0"
-
-"find-up@^5.0.0":
-  "integrity" "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng=="
-  "resolved" "https://registry.npmmirror.com/find-up/-/find-up-5.0.0.tgz"
-  "version" "5.0.0"
-  dependencies:
-    "locate-path" "^6.0.0"
-    "path-exists" "^4.0.0"
-
-"flat-cache@^3.0.4":
-  "integrity" "sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg=="
-  "resolved" "https://registry.npmmirror.com/flat-cache/-/flat-cache-3.0.4.tgz"
-  "version" "3.0.4"
-  dependencies:
-    "flatted" "^3.1.0"
-    "rimraf" "^3.0.2"
-
-"flatted@^3.1.0":
-  "integrity" "sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg=="
-  "resolved" "https://registry.npmmirror.com/flatted/-/flatted-3.2.5.tgz"
-  "version" "3.2.5"
-
-"follow-redirects@^1.14.8":
-  "integrity" "sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA=="
-  "resolved" "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.1.tgz"
-  "version" "1.15.1"
-
-"fs-extra@^10.0.0":
-  "integrity" "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ=="
-  "resolved" "https://registry.npmmirror.com/fs-extra/-/fs-extra-10.1.0.tgz"
-  "version" "10.1.0"
-  dependencies:
-    "graceful-fs" "^4.2.0"
-    "jsonfile" "^6.0.1"
-    "universalify" "^2.0.0"
-
-"fs.realpath@^1.0.0":
-  "integrity" "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
-  "resolved" "https://registry.npmmirror.com/fs.realpath/-/fs.realpath-1.0.0.tgz"
-  "version" "1.0.0"
-
-"function-bind@^1.1.1":
-  "integrity" "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
-  "resolved" "https://registry.npmmirror.com/function-bind/-/function-bind-1.1.1.tgz"
-  "version" "1.1.1"
-
-"functional-red-black-tree@^1.0.1":
-  "integrity" "sha512-dsKNQNdj6xA3T+QlADDA7mOSlX0qiMINjn0cgr+eGHGsbSHzTabcIogz2+p/iqP1Xs6EP/sS2SbqH+brGTbq0g=="
-  "resolved" "https://registry.npmmirror.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz"
-  "version" "1.0.1"
-
-"get-caller-file@^2.0.5":
-  "integrity" "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="
-  "resolved" "https://registry.npmmirror.com/get-caller-file/-/get-caller-file-2.0.5.tgz"
-  "version" "2.0.5"
-
-"get-intrinsic@^1.0.2":
-  "integrity" "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q=="
-  "resolved" "https://registry.npmmirror.com/get-intrinsic/-/get-intrinsic-1.1.1.tgz"
-  "version" "1.1.1"
-  dependencies:
-    "function-bind" "^1.1.1"
-    "has" "^1.0.3"
-    "has-symbols" "^1.0.1"
-
-"get-stream@^6.0.0":
-  "integrity" "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg=="
-  "resolved" "https://registry.npmmirror.com/get-stream/-/get-stream-6.0.1.tgz"
-  "version" "6.0.1"
-
-"git-raw-commits@^2.0.0":
-  "integrity" "sha512-VnctFhw+xfj8Va1xtfEqCUD2XDrbAPSJx+hSrE5K7fGdjZruW7XV+QOrN7LF/RJyvspRiD2I0asWsxFp0ya26A=="
-  "resolved" "https://registry.npmmirror.com/git-raw-commits/-/git-raw-commits-2.0.11.tgz"
-  "version" "2.0.11"
-  dependencies:
-    "dargs" "^7.0.0"
-    "lodash" "^4.17.15"
-    "meow" "^8.0.0"
-    "split2" "^3.0.0"
-    "through2" "^4.0.0"
-
-"glob-parent@^5.1.2":
-  "integrity" "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="
-  "resolved" "https://registry.npmmirror.com/glob-parent/-/glob-parent-5.1.2.tgz"
-  "version" "5.1.2"
-  dependencies:
-    "is-glob" "^4.0.1"
-
-"glob-parent@^6.0.1":
-  "integrity" "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A=="
-  "resolved" "https://registry.npmmirror.com/glob-parent/-/glob-parent-6.0.2.tgz"
-  "version" "6.0.2"
-  dependencies:
-    "is-glob" "^4.0.3"
-
-"glob@^7.1.3":
-  "integrity" "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q=="
-  "resolved" "https://registry.npmmirror.com/glob/-/glob-7.2.3.tgz"
-  "version" "7.2.3"
-  dependencies:
-    "fs.realpath" "^1.0.0"
-    "inflight" "^1.0.4"
-    "inherits" "2"
-    "minimatch" "^3.1.1"
-    "once" "^1.3.0"
-    "path-is-absolute" "^1.0.0"
-
-"global-dirs@^0.1.1":
-  "integrity" "sha512-NknMLn7F2J7aflwFOlGdNIuCDpN3VGoSoB+aap3KABFWbHVn1TCgFC+np23J8W2BiZbjfEw3BFBycSMv1AFblg=="
-  "resolved" "https://registry.npmmirror.com/global-dirs/-/global-dirs-0.1.1.tgz"
-  "version" "0.1.1"
-  dependencies:
-    "ini" "^1.3.4"
-
-"globals@^13.15.0":
-  "integrity" "sha512-bpzcOlgDhMG070Av0Vy5Owklpv1I6+j96GhUI7Rh7IzDCKLzboflLrrfqMu8NquDbiR4EOQk7XzJwqVJxicxog=="
-  "resolved" "https://registry.npmmirror.com/globals/-/globals-13.15.0.tgz"
-  "version" "13.15.0"
-  dependencies:
-    "type-fest" "^0.20.2"
-
-"globby@^11.1.0":
-  "integrity" "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g=="
-  "resolved" "https://registry.npmmirror.com/globby/-/globby-11.1.0.tgz"
-  "version" "11.1.0"
-  dependencies:
-    "array-union" "^2.1.0"
-    "dir-glob" "^3.0.1"
-    "fast-glob" "^3.2.9"
-    "ignore" "^5.2.0"
-    "merge2" "^1.4.1"
-    "slash" "^3.0.0"
-
-"good-listener@^1.2.2":
-  "integrity" "sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw=="
-  "resolved" "https://registry.npmmirror.com/good-listener/-/good-listener-1.2.2.tgz"
-  "version" "1.2.2"
-  dependencies:
-    "delegate" "^3.1.2"
-
-"graceful-fs@^4.1.2", "graceful-fs@^4.1.6", "graceful-fs@^4.2.0":
-  "integrity" "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA=="
-  "resolved" "https://registry.npmmirror.com/graceful-fs/-/graceful-fs-4.2.10.tgz"
-  "version" "4.2.10"
-
-"hard-rejection@^2.1.0":
-  "integrity" "sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA=="
-  "resolved" "https://registry.npmmirror.com/hard-rejection/-/hard-rejection-2.1.0.tgz"
-  "version" "2.1.0"
-
-"has-flag@^3.0.0":
-  "integrity" "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw=="
-  "resolved" "https://registry.npmmirror.com/has-flag/-/has-flag-3.0.0.tgz"
-  "version" "3.0.0"
-
-"has-flag@^4.0.0":
-  "integrity" "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
-  "resolved" "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz"
-  "version" "4.0.0"
-
-"has-symbols@^1.0.1":
-  "integrity" "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A=="
-  "resolved" "https://registry.npmmirror.com/has-symbols/-/has-symbols-1.0.3.tgz"
-  "version" "1.0.3"
-
-"has@^1.0.3":
-  "integrity" "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw=="
-  "resolved" "https://registry.npmmirror.com/has/-/has-1.0.3.tgz"
-  "version" "1.0.3"
-  dependencies:
-    "function-bind" "^1.1.1"
-
-"hosted-git-info@^2.1.4":
-  "integrity" "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw=="
-  "resolved" "https://registry.npmmirror.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz"
-  "version" "2.8.9"
-
-"hosted-git-info@^4.0.1":
-  "integrity" "sha512-kyCuEOWjJqZuDbRHzL8V93NzQhwIB71oFWSyzVo+KPZI+pnQPPxucdkrOZvkLRnrf5URsQM+IJ09Dw29cRALIA=="
-  "resolved" "https://registry.npmmirror.com/hosted-git-info/-/hosted-git-info-4.1.0.tgz"
-  "version" "4.1.0"
-  dependencies:
-    "lru-cache" "^6.0.0"
-
-"hotkeys-js@^3.8.7":
-  "integrity" "sha512-2zuLt85Ta+gIyvs4N88pCYskNrxf1TFv3LR9t5mdAZIX8BcgQQ48F2opUptvHa6m8zsy5v/a0i9mWzTrlNWU0Q=="
-  "resolved" "https://registry.npmmirror.com/hotkeys-js/-/hotkeys-js-3.9.4.tgz"
-  "version" "3.9.4"
-
-"human-signals@^2.1.0":
-  "integrity" "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw=="
-  "resolved" "https://registry.npmmirror.com/human-signals/-/human-signals-2.1.0.tgz"
-  "version" "2.1.0"
-
-"iconv-lite@^0.4.4":
-  "integrity" "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA=="
-  "resolved" "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.4.24.tgz"
-  "version" "0.4.24"
-  dependencies:
-    "safer-buffer" ">= 2.1.2 < 3"
-
-"ignore@^5.2.0":
-  "integrity" "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ=="
-  "resolved" "https://registry.npmmirror.com/ignore/-/ignore-5.2.0.tgz"
-  "version" "5.2.0"
-
-"image-size@~0.5.0":
-  "integrity" "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ=="
-  "resolved" "https://registry.npmmirror.com/image-size/-/image-size-0.5.5.tgz"
-  "version" "0.5.5"
-
-"import-fresh@^3.0.0", "import-fresh@^3.2.1":
-  "integrity" "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw=="
-  "resolved" "https://registry.npmmirror.com/import-fresh/-/import-fresh-3.3.0.tgz"
-  "version" "3.3.0"
-  dependencies:
-    "parent-module" "^1.0.0"
-    "resolve-from" "^4.0.0"
-
-"imurmurhash@^0.1.4":
-  "integrity" "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA=="
-  "resolved" "https://registry.npmmirror.com/imurmurhash/-/imurmurhash-0.1.4.tgz"
-  "version" "0.1.4"
-
-"indent-string@^4.0.0":
-  "integrity" "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg=="
-  "resolved" "https://registry.npmmirror.com/indent-string/-/indent-string-4.0.0.tgz"
-  "version" "4.0.0"
-
-"inflight@^1.0.4":
-  "integrity" "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA=="
-  "resolved" "https://registry.npmmirror.com/inflight/-/inflight-1.0.6.tgz"
-  "version" "1.0.6"
-  dependencies:
-    "once" "^1.3.0"
-    "wrappy" "1"
-
-"inherits@^2.0.3", "inherits@2":
-  "integrity" "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
-  "resolved" "https://registry.npmmirror.com/inherits/-/inherits-2.0.4.tgz"
-  "version" "2.0.4"
-
-"ini@^1.3.4":
-  "integrity" "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="
-  "resolved" "https://registry.npmmirror.com/ini/-/ini-1.3.8.tgz"
-  "version" "1.3.8"
-
-"interactjs@^1.10.11":
-  "integrity" "sha512-VPUWsGAOPmrZe1YF7Fq/4AIBBZ+3FikZRS8bpzT6VsAfUuhxl/CKJY73IAiZHd3fz9p174CXErn0Qs81XEFICA=="
-  "resolved" "https://registry.npmmirror.com/interactjs/-/interactjs-1.10.11.tgz"
-  "version" "1.10.11"
+    glob-parent "^5.1.2"
+    merge2 "^1.3.0"
+    micromatch "^4.0.4"
+
+fast-json-stable-stringify@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.npmmirror.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz"
+  integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
+
+fast-levenshtein@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.npmmirror.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz"
+  integrity sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==
+
+fastq@^1.6.0:
+  version "1.13.0"
+  resolved "https://registry.npmmirror.com/fastq/-/fastq-1.13.0.tgz"
+  integrity sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==
+  dependencies:
+    reusify "^1.0.4"
+
+file-entry-cache@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.npmmirror.com/file-entry-cache/-/file-entry-cache-6.0.1.tgz"
+  integrity sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==
+  dependencies:
+    flat-cache "^3.0.4"
+
+filesize@^9.0.1:
+  version "9.0.1"
+  resolved "https://registry.npmmirror.com/filesize/-/filesize-9.0.1.tgz"
+  integrity sha512-4OpF3eYI7S0O+memD6RetheN3qZYR2gGapwYauB2T2F+Da2uBml8jLcukv/7lJeL7ByC+2nzaHZfUR/bGT/HVQ==
+
+fill-range@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.npmmirror.com/fill-range/-/fill-range-7.0.1.tgz"
+  integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==
+  dependencies:
+    to-regex-range "^5.0.1"
+
+filter-obj@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmmirror.com/filter-obj/-/filter-obj-1.1.0.tgz"
+  integrity sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ==
+
+find-up@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.npmmirror.com/find-up/-/find-up-4.1.0.tgz"
+  integrity sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==
+  dependencies:
+    locate-path "^5.0.0"
+    path-exists "^4.0.0"
+
+find-up@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.npmmirror.com/find-up/-/find-up-5.0.0.tgz"
+  integrity sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==
+  dependencies:
+    locate-path "^6.0.0"
+    path-exists "^4.0.0"
+
+flat-cache@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.npmmirror.com/flat-cache/-/flat-cache-3.0.4.tgz"
+  integrity sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==
+  dependencies:
+    flatted "^3.1.0"
+    rimraf "^3.0.2"
+
+flatted@^3.1.0:
+  version "3.2.5"
+  resolved "https://registry.npmmirror.com/flatted/-/flatted-3.2.5.tgz"
+  integrity sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==
+
+follow-redirects@^1.14.8:
+  version "1.15.1"
+  resolved "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.1.tgz"
+  integrity sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA==
+
+fs-extra@^10.0.0:
+  version "10.1.0"
+  resolved "https://registry.npmmirror.com/fs-extra/-/fs-extra-10.1.0.tgz"
+  integrity sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==
+  dependencies:
+    graceful-fs "^4.2.0"
+    jsonfile "^6.0.1"
+    universalify "^2.0.0"
+
+fs.realpath@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmmirror.com/fs.realpath/-/fs.realpath-1.0.0.tgz"
+  integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
+
+fsevents@~2.3.2:
+  version "2.3.3"
+  resolved "https://registry.npmmirror.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
+  integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
+
+function-bind@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.npmmirror.com/function-bind/-/function-bind-1.1.1.tgz"
+  integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
+
+functional-red-black-tree@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmmirror.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz"
+  integrity sha512-dsKNQNdj6xA3T+QlADDA7mOSlX0qiMINjn0cgr+eGHGsbSHzTabcIogz2+p/iqP1Xs6EP/sS2SbqH+brGTbq0g==
+
+get-caller-file@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.npmmirror.com/get-caller-file/-/get-caller-file-2.0.5.tgz"
+  integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
+
+get-intrinsic@^1.0.2:
+  version "1.1.1"
+  resolved "https://registry.npmmirror.com/get-intrinsic/-/get-intrinsic-1.1.1.tgz"
+  integrity sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==
+  dependencies:
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-symbols "^1.0.1"
+
+get-stream@^6.0.0:
+  version "6.0.1"
+  resolved "https://registry.npmmirror.com/get-stream/-/get-stream-6.0.1.tgz"
+  integrity sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==
+
+git-raw-commits@^2.0.0:
+  version "2.0.11"
+  resolved "https://registry.npmmirror.com/git-raw-commits/-/git-raw-commits-2.0.11.tgz"
+  integrity sha512-VnctFhw+xfj8Va1xtfEqCUD2XDrbAPSJx+hSrE5K7fGdjZruW7XV+QOrN7LF/RJyvspRiD2I0asWsxFp0ya26A==
+  dependencies:
+    dargs "^7.0.0"
+    lodash "^4.17.15"
+    meow "^8.0.0"
+    split2 "^3.0.0"
+    through2 "^4.0.0"
+
+glob-parent@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.npmmirror.com/glob-parent/-/glob-parent-5.1.2.tgz"
+  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
+  dependencies:
+    is-glob "^4.0.1"
+
+glob-parent@^6.0.1:
+  version "6.0.2"
+  resolved "https://registry.npmmirror.com/glob-parent/-/glob-parent-6.0.2.tgz"
+  integrity sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==
+  dependencies:
+    is-glob "^4.0.3"
+
+glob@^7.1.3:
+  version "7.2.3"
+  resolved "https://registry.npmmirror.com/glob/-/glob-7.2.3.tgz"
+  integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.1.1"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+global-dirs@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.npmmirror.com/global-dirs/-/global-dirs-0.1.1.tgz"
+  integrity sha512-NknMLn7F2J7aflwFOlGdNIuCDpN3VGoSoB+aap3KABFWbHVn1TCgFC+np23J8W2BiZbjfEw3BFBycSMv1AFblg==
+  dependencies:
+    ini "^1.3.4"
+
+globals@^13.15.0:
+  version "13.15.0"
+  resolved "https://registry.npmmirror.com/globals/-/globals-13.15.0.tgz"
+  integrity sha512-bpzcOlgDhMG070Av0Vy5Owklpv1I6+j96GhUI7Rh7IzDCKLzboflLrrfqMu8NquDbiR4EOQk7XzJwqVJxicxog==
+  dependencies:
+    type-fest "^0.20.2"
+
+globby@^11.1.0:
+  version "11.1.0"
+  resolved "https://registry.npmmirror.com/globby/-/globby-11.1.0.tgz"
+  integrity sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==
+  dependencies:
+    array-union "^2.1.0"
+    dir-glob "^3.0.1"
+    fast-glob "^3.2.9"
+    ignore "^5.2.0"
+    merge2 "^1.4.1"
+    slash "^3.0.0"
+
+good-listener@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.npmmirror.com/good-listener/-/good-listener-1.2.2.tgz"
+  integrity sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==
+  dependencies:
+    delegate "^3.1.2"
+
+graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0:
+  version "4.2.10"
+  resolved "https://registry.npmmirror.com/graceful-fs/-/graceful-fs-4.2.10.tgz"
+  integrity sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==
+
+gradient-parser@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmmirror.com/gradient-parser/-/gradient-parser-1.0.2.tgz#d283b80390386e2613c992bb0e5abb259aedf25f"
+  integrity sha512-gR6nY33xC9yJoH4wGLQtZQMXDi6RI3H37ERu7kQCVUzlXjNedpZM7xcA489Opwbq0BSGohtWGsWsntupmxelMg==
+
+hard-rejection@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmmirror.com/hard-rejection/-/hard-rejection-2.1.0.tgz"
+  integrity sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==
+
+has-flag@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmmirror.com/has-flag/-/has-flag-3.0.0.tgz"
+  integrity sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==
+
+has-flag@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz"
+  integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
+
+has-symbols@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.npmmirror.com/has-symbols/-/has-symbols-1.0.3.tgz"
+  integrity sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==
+
+has@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.npmmirror.com/has/-/has-1.0.3.tgz"
+  integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==
+  dependencies:
+    function-bind "^1.1.1"
+
+hosted-git-info@^2.1.4:
+  version "2.8.9"
+  resolved "https://registry.npmmirror.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz"
+  integrity sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==
+
+hosted-git-info@^4.0.1:
+  version "4.1.0"
+  resolved "https://registry.npmmirror.com/hosted-git-info/-/hosted-git-info-4.1.0.tgz"
+  integrity sha512-kyCuEOWjJqZuDbRHzL8V93NzQhwIB71oFWSyzVo+KPZI+pnQPPxucdkrOZvkLRnrf5URsQM+IJ09Dw29cRALIA==
+  dependencies:
+    lru-cache "^6.0.0"
+
+hotkeys-js@^3.8.7:
+  version "3.9.4"
+  resolved "https://registry.npmmirror.com/hotkeys-js/-/hotkeys-js-3.9.4.tgz"
+  integrity sha512-2zuLt85Ta+gIyvs4N88pCYskNrxf1TFv3LR9t5mdAZIX8BcgQQ48F2opUptvHa6m8zsy5v/a0i9mWzTrlNWU0Q==
+
+human-signals@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmmirror.com/human-signals/-/human-signals-2.1.0.tgz"
+  integrity sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==
+
+iconv-lite@^0.4.4:
+  version "0.4.24"
+  resolved "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.4.24.tgz"
+  integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
+  dependencies:
+    safer-buffer ">= 2.1.2 < 3"
+
+ignore@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.npmmirror.com/ignore/-/ignore-5.2.0.tgz"
+  integrity sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==
+
+image-size@~0.5.0:
+  version "0.5.5"
+  resolved "https://registry.npmmirror.com/image-size/-/image-size-0.5.5.tgz"
+  integrity sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==
+
+import-fresh@^3.0.0, import-fresh@^3.2.1:
+  version "3.3.0"
+  resolved "https://registry.npmmirror.com/import-fresh/-/import-fresh-3.3.0.tgz"
+  integrity sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==
+  dependencies:
+    parent-module "^1.0.0"
+    resolve-from "^4.0.0"
+
+imurmurhash@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.npmmirror.com/imurmurhash/-/imurmurhash-0.1.4.tgz"
+  integrity sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==
+
+indent-string@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmmirror.com/indent-string/-/indent-string-4.0.0.tgz"
+  integrity sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==
+
+inflight@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.npmmirror.com/inflight/-/inflight-1.0.6.tgz"
+  integrity sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==
+  dependencies:
+    once "^1.3.0"
+    wrappy "1"
+
+inherits@2, inherits@^2.0.3:
+  version "2.0.4"
+  resolved "https://registry.npmmirror.com/inherits/-/inherits-2.0.4.tgz"
+  integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
+
+ini@^1.3.4:
+  version "1.3.8"
+  resolved "https://registry.npmmirror.com/ini/-/ini-1.3.8.tgz"
+  integrity sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==
+
+interactjs@^1.10.11:
+  version "1.10.11"
+  resolved "https://registry.npmmirror.com/interactjs/-/interactjs-1.10.11.tgz"
+  integrity sha512-VPUWsGAOPmrZe1YF7Fq/4AIBBZ+3FikZRS8bpzT6VsAfUuhxl/CKJY73IAiZHd3fz9p174CXErn0Qs81XEFICA==
   dependencies:
     "@interactjs/types" "1.10.11"
 
-"is-arrayish@^0.2.1":
-  "integrity" "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg=="
-  "resolved" "https://registry.npmmirror.com/is-arrayish/-/is-arrayish-0.2.1.tgz"
-  "version" "0.2.1"
-
-"is-core-module@^2.5.0", "is-core-module@^2.8.1":
-  "integrity" "sha512-+5FPy5PnwmO3lvfMb0AsoPaBG+5KHUI0wYFXOtYPnVVVspTFUuMZNfNaNVRt3FZadstu2c8x23vykRW/NBoU6A=="
-  "resolved" "https://registry.npmmirror.com/is-core-module/-/is-core-module-2.9.0.tgz"
-  "version" "2.9.0"
-  dependencies:
-    "has" "^1.0.3"
-
-"is-extglob@^2.1.1":
-  "integrity" "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ=="
-  "resolved" "https://registry.npmmirror.com/is-extglob/-/is-extglob-2.1.1.tgz"
-  "version" "2.1.1"
-
-"is-fullwidth-code-point@^3.0.0":
-  "integrity" "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg=="
-  "resolved" "https://registry.npmmirror.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz"
-  "version" "3.0.0"
-
-"is-fullwidth-code-point@^4.0.0":
-  "integrity" "sha512-O4L094N2/dZ7xqVdrXhh9r1KODPJpFms8B5sGdJLPy664AgvXsreZUyCQQNItZRDlYug4xStLjNp/sz3HvBowQ=="
-  "resolved" "https://registry.npmmirror.com/is-fullwidth-code-point/-/is-fullwidth-code-point-4.0.0.tgz"
-  "version" "4.0.0"
-
-"is-glob@^4.0.0", "is-glob@^4.0.1", "is-glob@^4.0.3":
-  "integrity" "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg=="
-  "resolved" "https://registry.npmmirror.com/is-glob/-/is-glob-4.0.3.tgz"
-  "version" "4.0.3"
-  dependencies:
-    "is-extglob" "^2.1.1"
-
-"is-number@^7.0.0":
-  "integrity" "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="
-  "resolved" "https://registry.npmmirror.com/is-number/-/is-number-7.0.0.tgz"
-  "version" "7.0.0"
-
-"is-obj@^2.0.0":
-  "integrity" "sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w=="
-  "resolved" "https://registry.npmmirror.com/is-obj/-/is-obj-2.0.0.tgz"
-  "version" "2.0.0"
-
-"is-plain-obj@^1.1.0":
-  "integrity" "sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg=="
-  "resolved" "https://registry.npmmirror.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz"
-  "version" "1.1.0"
-
-"is-plain-object@3.0.1":
-  "integrity" "sha512-Xnpx182SBMrr/aBik8y+GuR4U1L9FqMSojwDQwPMmxyC6bvEqly9UBCxhauBF5vNh2gwWJNX6oDV7O+OM4z34g=="
-  "resolved" "https://registry.npmmirror.com/is-plain-object/-/is-plain-object-3.0.1.tgz"
-  "version" "3.0.1"
-
-"is-stream@^2.0.0":
-  "integrity" "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg=="
-  "resolved" "https://registry.npmmirror.com/is-stream/-/is-stream-2.0.1.tgz"
-  "version" "2.0.1"
-
-"is-text-path@^1.0.1":
-  "integrity" "sha512-xFuJpne9oFz5qDaodwmmG08e3CawH/2ZV8Qqza1Ko7Sk8POWbkRdwIoAWVhqvq0XeUzANEhKo2n0IXUGBm7A/w=="
-  "resolved" "https://registry.npmmirror.com/is-text-path/-/is-text-path-1.0.1.tgz"
-  "version" "1.0.1"
-  dependencies:
-    "text-extensions" "^1.0.0"
-
-"is-what@^3.14.1":
-  "integrity" "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA=="
-  "resolved" "https://registry.npmmirror.com/is-what/-/is-what-3.14.1.tgz"
-  "version" "3.14.1"
-
-"isexe@^2.0.0":
-  "integrity" "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
-  "resolved" "https://registry.npmmirror.com/isexe/-/isexe-2.0.0.tgz"
-  "version" "2.0.0"
-
-"js-cookie@^3.0.1":
-  "integrity" "sha512-+0rgsUXZu4ncpPxRL+lNEptWMOWl9etvPHc/koSRp6MPwpRYAhmk0dUG00J4bxVV3r9uUzfo24wW0knS07SKSw=="
-  "resolved" "https://registry.npmmirror.com/js-cookie/-/js-cookie-3.0.1.tgz"
-  "version" "3.0.1"
-
-"js-tokens@^3.0.0 || ^4.0.0", "js-tokens@^4.0.0":
-  "integrity" "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
-  "resolved" "https://registry.npmmirror.com/js-tokens/-/js-tokens-4.0.0.tgz"
-  "version" "4.0.0"
-
-"js-yaml@^4.1.0":
-  "integrity" "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA=="
-  "resolved" "https://registry.npmmirror.com/js-yaml/-/js-yaml-4.1.0.tgz"
-  "version" "4.1.0"
-  dependencies:
-    "argparse" "^2.0.1"
-
-"json-parse-even-better-errors@^2.3.0":
-  "integrity" "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w=="
-  "resolved" "https://registry.npmmirror.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz"
-  "version" "2.3.1"
-
-"json-schema-traverse@^0.4.1":
-  "integrity" "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
-  "resolved" "https://registry.npmmirror.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz"
-  "version" "0.4.1"
-
-"json-stable-stringify-without-jsonify@^1.0.1":
-  "integrity" "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw=="
-  "resolved" "https://registry.npmmirror.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz"
-  "version" "1.0.1"
-
-"jsonfile@^6.0.1":
-  "integrity" "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ=="
-  "resolved" "https://registry.npmmirror.com/jsonfile/-/jsonfile-6.1.0.tgz"
-  "version" "6.1.0"
-  dependencies:
-    "universalify" "^2.0.0"
+is-arrayish@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.npmmirror.com/is-arrayish/-/is-arrayish-0.2.1.tgz"
+  integrity sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==
+
+is-core-module@^2.5.0, is-core-module@^2.8.1:
+  version "2.9.0"
+  resolved "https://registry.npmmirror.com/is-core-module/-/is-core-module-2.9.0.tgz"
+  integrity sha512-+5FPy5PnwmO3lvfMb0AsoPaBG+5KHUI0wYFXOtYPnVVVspTFUuMZNfNaNVRt3FZadstu2c8x23vykRW/NBoU6A==
+  dependencies:
+    has "^1.0.3"
+
+is-extglob@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.npmmirror.com/is-extglob/-/is-extglob-2.1.1.tgz"
+  integrity sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==
+
+is-fullwidth-code-point@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmmirror.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz"
+  integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
+
+is-fullwidth-code-point@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmmirror.com/is-fullwidth-code-point/-/is-fullwidth-code-point-4.0.0.tgz"
+  integrity sha512-O4L094N2/dZ7xqVdrXhh9r1KODPJpFms8B5sGdJLPy664AgvXsreZUyCQQNItZRDlYug4xStLjNp/sz3HvBowQ==
+
+is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.npmmirror.com/is-glob/-/is-glob-4.0.3.tgz"
+  integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
+  dependencies:
+    is-extglob "^2.1.1"
+
+is-number@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.npmmirror.com/is-number/-/is-number-7.0.0.tgz"
+  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
+
+is-obj@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmmirror.com/is-obj/-/is-obj-2.0.0.tgz"
+  integrity sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==
+
+is-plain-obj@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmmirror.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz"
+  integrity sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==
+
+is-plain-object@3.0.1:
+  version "3.0.1"
+  resolved "https://registry.npmmirror.com/is-plain-object/-/is-plain-object-3.0.1.tgz#662d92d24c0aa4302407b0d45d21f2251c85f85b"
+  integrity sha512-Xnpx182SBMrr/aBik8y+GuR4U1L9FqMSojwDQwPMmxyC6bvEqly9UBCxhauBF5vNh2gwWJNX6oDV7O+OM4z34g==
+
+is-plain-object@5.0.0:
+  version "5.0.0"
+  resolved "https://registry.npmmirror.com/is-plain-object/-/is-plain-object-5.0.0.tgz#4427f50ab3429e9025ea7d52e9043a9ef4159344"
+  integrity sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==
+
+is-stream@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.npmmirror.com/is-stream/-/is-stream-2.0.1.tgz"
+  integrity sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==
+
+is-text-path@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmmirror.com/is-text-path/-/is-text-path-1.0.1.tgz"
+  integrity sha512-xFuJpne9oFz5qDaodwmmG08e3CawH/2ZV8Qqza1Ko7Sk8POWbkRdwIoAWVhqvq0XeUzANEhKo2n0IXUGBm7A/w==
+  dependencies:
+    text-extensions "^1.0.0"
+
+is-what@^3.14.1:
+  version "3.14.1"
+  resolved "https://registry.npmmirror.com/is-what/-/is-what-3.14.1.tgz"
+  integrity sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==
+
+isexe@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmmirror.com/isexe/-/isexe-2.0.0.tgz"
+  integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
+
+js-cookie@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.npmmirror.com/js-cookie/-/js-cookie-3.0.1.tgz"
+  integrity sha512-+0rgsUXZu4ncpPxRL+lNEptWMOWl9etvPHc/koSRp6MPwpRYAhmk0dUG00J4bxVV3r9uUzfo24wW0knS07SKSw==
+
+"js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmmirror.com/js-tokens/-/js-tokens-4.0.0.tgz"
+  integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
+
+js-yaml@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.npmmirror.com/js-yaml/-/js-yaml-4.1.0.tgz"
+  integrity sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==
+  dependencies:
+    argparse "^2.0.1"
+
+json-parse-even-better-errors@^2.3.0:
+  version "2.3.1"
+  resolved "https://registry.npmmirror.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz"
+  integrity sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==
+
+json-schema-traverse@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.npmmirror.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz"
+  integrity sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==
+
+json-stable-stringify-without-jsonify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmmirror.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz"
+  integrity sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==
+
+jsonfile@^6.0.1:
+  version "6.1.0"
+  resolved "https://registry.npmmirror.com/jsonfile/-/jsonfile-6.1.0.tgz"
+  integrity sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==
+  dependencies:
+    universalify "^2.0.0"
   optionalDependencies:
-    "graceful-fs" "^4.1.6"
-
-"jsonparse@^1.2.0":
-  "integrity" "sha512-POQXvpdL69+CluYsillJ7SUhKvytYjW9vG/GKpnf+xP8UWgYEM/RaMzHHofbALDiKbbP1W8UEYmgGl39WkPZsg=="
-  "resolved" "https://registry.npmmirror.com/jsonparse/-/jsonparse-1.3.1.tgz"
-  "version" "1.3.1"
-
-"JSONStream@^1.0.4":
-  "integrity" "sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ=="
-  "resolved" "https://registry.npmmirror.com/JSONStream/-/JSONStream-1.3.5.tgz"
-  "version" "1.3.5"
-  dependencies:
-    "jsonparse" "^1.2.0"
-    "through" ">=2.2.7 <3"
-
-"kind-of@^6.0.3":
-  "integrity" "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw=="
-  "resolved" "https://registry.npmmirror.com/kind-of/-/kind-of-6.0.3.tgz"
-  "version" "6.0.3"
-
-"klona@^2.0.4":
-  "integrity" "sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ=="
-  "resolved" "https://registry.npmmirror.com/klona/-/klona-2.0.5.tgz"
-  "version" "2.0.5"
-
-"konva@^8.3.8":
-  "integrity" "sha512-Y6ckWvsZQEpD2r6catM/O2CKP+ajrP3ijalFZ6TZOwdbx+opb/tXDjGAt5OA2kNOyj8mZgl4ZKkqWRdg7HUKmA=="
-  "resolved" "https://registry.npmmirror.com/konva/-/konva-8.3.8.tgz"
-  "version" "8.3.8"
-
-"less-loader@^10.2.0":
-  "integrity" "sha512-AV5KHWvCezW27GT90WATaDnfXBv99llDbtaj4bshq6DvAihMdNjaPDcUMa6EXKLRF+P2opFenJp89BXg91XLYg=="
-  "resolved" "https://registry.npmmirror.com/less-loader/-/less-loader-10.2.0.tgz"
-  "version" "10.2.0"
-  dependencies:
-    "klona" "^2.0.4"
-
-"less@*", "less@^3.5.0 || ^4.0.0", "less@^4.1.2":
-  "integrity" "sha512-EoQp/Et7OSOVu0aJknJOtlXZsnr8XE8KwuzTHOLeVSEx8pVWUICc8Q0VYRHgzyjX78nMEyC/oztWFbgyhtNfDA=="
-  "resolved" "https://registry.npmmirror.com/less/-/less-4.1.2.tgz"
-  "version" "4.1.2"
-  dependencies:
-    "copy-anything" "^2.0.1"
-    "parse-node-version" "^1.0.1"
-    "tslib" "^2.3.0"
+    graceful-fs "^4.1.6"
+
+jsonparse@^1.2.0:
+  version "1.3.1"
+  resolved "https://registry.npmmirror.com/jsonparse/-/jsonparse-1.3.1.tgz"
+  integrity sha512-POQXvpdL69+CluYsillJ7SUhKvytYjW9vG/GKpnf+xP8UWgYEM/RaMzHHofbALDiKbbP1W8UEYmgGl39WkPZsg==
+
+kind-of@^6.0.3:
+  version "6.0.3"
+  resolved "https://registry.npmmirror.com/kind-of/-/kind-of-6.0.3.tgz"
+  integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
+
+klona@^2.0.4:
+  version "2.0.5"
+  resolved "https://registry.npmmirror.com/klona/-/klona-2.0.5.tgz"
+  integrity sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ==
+
+konva@^9.2.3:
+  version "9.2.3"
+  resolved "https://registry.npmmirror.com/konva/-/konva-9.2.3.tgz#84f0a828a040b4aeb9f90625e89fdfe0662075a2"
+  integrity sha512-oQ6VQ6kUL9IlhOGuEKKhxqnv6g/t8jZpVuWahQQ6hCqAsO8Ydi1zFGv7ef4EOq5GoPNq/d6Fyj/3i5Y/a5NooA==
+
+less-loader@^10.2.0:
+  version "10.2.0"
+  resolved "https://registry.npmmirror.com/less-loader/-/less-loader-10.2.0.tgz"
+  integrity sha512-AV5KHWvCezW27GT90WATaDnfXBv99llDbtaj4bshq6DvAihMdNjaPDcUMa6EXKLRF+P2opFenJp89BXg91XLYg==
+  dependencies:
+    klona "^2.0.4"
+
+less@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.npmmirror.com/less/-/less-4.1.2.tgz"
+  integrity sha512-EoQp/Et7OSOVu0aJknJOtlXZsnr8XE8KwuzTHOLeVSEx8pVWUICc8Q0VYRHgzyjX78nMEyC/oztWFbgyhtNfDA==
+  dependencies:
+    copy-anything "^2.0.1"
+    parse-node-version "^1.0.1"
+    tslib "^2.3.0"
   optionalDependencies:
-    "errno" "^0.1.1"
-    "graceful-fs" "^4.1.2"
-    "image-size" "~0.5.0"
-    "make-dir" "^2.1.0"
-    "mime" "^1.4.1"
-    "needle" "^2.5.2"
-    "source-map" "~0.6.0"
-
-"levn@^0.4.1":
-  "integrity" "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ=="
-  "resolved" "https://registry.npmmirror.com/levn/-/levn-0.4.1.tgz"
-  "version" "0.4.1"
-  dependencies:
-    "prelude-ls" "^1.2.1"
-    "type-check" "~0.4.0"
-
-"lilconfig@2.0.5":
-  "integrity" "sha512-xaYmXZtTHPAw5m+xLN8ab9C+3a8YmV3asNSPOATITbtwrfbwaLJj8h66H1WMIpALCkqsIzK3h7oQ+PdX+LQ9Eg=="
-  "resolved" "https://registry.npmmirror.com/lilconfig/-/lilconfig-2.0.5.tgz"
-  "version" "2.0.5"
-
-"lines-and-columns@^1.1.6":
-  "integrity" "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
-  "resolved" "https://registry.npmmirror.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz"
-  "version" "1.2.4"
-
-"lint-staged@^12.3.7":
-  "integrity" "sha512-eH6SKOmdm/ZwCRMTZAmM3q3dPkpq6vco/BfrOw8iGun4Xs/thYegPD/MLIwKO+iPkzibkLJuQcRhRLXKvaKreg=="
-  "resolved" "https://registry.npmmirror.com/lint-staged/-/lint-staged-12.4.3.tgz"
-  "version" "12.4.3"
-  dependencies:
-    "cli-truncate" "^3.1.0"
-    "colorette" "^2.0.16"
-    "commander" "^9.3.0"
-    "debug" "^4.3.4"
-    "execa" "^5.1.1"
-    "lilconfig" "2.0.5"
-    "listr2" "^4.0.5"
-    "micromatch" "^4.0.5"
-    "normalize-path" "^3.0.0"
-    "object-inspect" "^1.12.2"
-    "pidtree" "^0.5.0"
-    "string-argv" "^0.3.1"
-    "supports-color" "^9.2.2"
-    "yaml" "^1.10.2"
-
-"listr2@^4.0.5":
-  "integrity" "sha512-juGHV1doQdpNT3GSTs9IUN43QJb7KHdF9uqg7Vufs/tG9VTzpFphqF4pm/ICdAABGQxsyNn9CiYA3StkI6jpwA=="
-  "resolved" "https://registry.npmmirror.com/listr2/-/listr2-4.0.5.tgz"
-  "version" "4.0.5"
-  dependencies:
-    "cli-truncate" "^2.1.0"
-    "colorette" "^2.0.16"
-    "log-update" "^4.0.0"
-    "p-map" "^4.0.0"
-    "rfdc" "^1.3.0"
-    "rxjs" "^7.5.5"
-    "through" "^2.3.8"
-    "wrap-ansi" "^7.0.0"
-
-"locate-path@^5.0.0":
-  "integrity" "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g=="
-  "resolved" "https://registry.npmmirror.com/locate-path/-/locate-path-5.0.0.tgz"
-  "version" "5.0.0"
-  dependencies:
-    "p-locate" "^4.1.0"
-
-"locate-path@^6.0.0":
-  "integrity" "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw=="
-  "resolved" "https://registry.npmmirror.com/locate-path/-/locate-path-6.0.0.tgz"
-  "version" "6.0.0"
-  dependencies:
-    "p-locate" "^5.0.0"
-
-"lodash-es@^4.17.15":
-  "integrity" "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
-  "resolved" "https://registry.npmmirror.com/lodash-es/-/lodash-es-4.17.21.tgz"
-  "version" "4.17.21"
-
-"lodash.merge@^4.6.2":
-  "integrity" "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="
-  "resolved" "https://registry.npmmirror.com/lodash.merge/-/lodash.merge-4.6.2.tgz"
-  "version" "4.6.2"
-
-"lodash@^4.17.15", "lodash@^4.17.19", "lodash@^4.17.21":
-  "integrity" "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
-  "resolved" "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz"
-  "version" "4.17.21"
-
-"log-update@^4.0.0":
-  "integrity" "sha512-9fkkDevMefjg0mmzWFBW8YkFP91OrizzkW3diF7CpG+S2EYdy4+TVfGwz1zeF8x7hCx1ovSPTOE9Ngib74qqUg=="
-  "resolved" "https://registry.npmmirror.com/log-update/-/log-update-4.0.0.tgz"
-  "version" "4.0.0"
-  dependencies:
-    "ansi-escapes" "^4.3.0"
-    "cli-cursor" "^3.1.0"
-    "slice-ansi" "^4.0.0"
-    "wrap-ansi" "^6.2.0"
-
-"loose-envify@^1.0.0":
-  "integrity" "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q=="
-  "resolved" "https://registry.npmmirror.com/loose-envify/-/loose-envify-1.4.0.tgz"
-  "version" "1.4.0"
-  dependencies:
-    "js-tokens" "^3.0.0 || ^4.0.0"
-
-"lru-cache@^6.0.0":
-  "integrity" "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA=="
-  "resolved" "https://registry.npmmirror.com/lru-cache/-/lru-cache-6.0.0.tgz"
-  "version" "6.0.0"
-  dependencies:
-    "yallist" "^4.0.0"
-
-"magic-string@^0.25.7":
-  "integrity" "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ=="
-  "resolved" "https://registry.npmmirror.com/magic-string/-/magic-string-0.25.9.tgz"
-  "version" "0.25.9"
-  dependencies:
-    "sourcemap-codec" "^1.4.8"
-
-"make-dir@^2.1.0":
-  "integrity" "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA=="
-  "resolved" "https://registry.npmmirror.com/make-dir/-/make-dir-2.1.0.tgz"
-  "version" "2.1.0"
-  dependencies:
-    "pify" "^4.0.1"
-    "semver" "^5.6.0"
-
-"make-error@^1.1.1":
-  "integrity" "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw=="
-  "resolved" "https://registry.npmmirror.com/make-error/-/make-error-1.3.6.tgz"
-  "version" "1.3.6"
-
-"map-obj@^1.0.0":
-  "integrity" "sha512-7N/q3lyZ+LVCp7PzuxrJr4KMbBE2hW7BT7YNia330OFxIf4d3r5zVpicP2650l7CPN6RM9zOJRl3NGpqSiw3Eg=="
-  "resolved" "https://registry.npmmirror.com/map-obj/-/map-obj-1.0.1.tgz"
-  "version" "1.0.1"
-
-"map-obj@^4.0.0":
-  "integrity" "sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ=="
-  "resolved" "https://registry.npmmirror.com/map-obj/-/map-obj-4.3.0.tgz"
-  "version" "4.3.0"
-
-"meow@^8.0.0":
-  "integrity" "sha512-r85E3NdZ+mpYk1C6RjPFEMSE+s1iZMuHtsHAqY0DT3jZczl0diWUZ8g6oU7h0M9cD2EL+PzaYghhCLzR0ZNn5Q=="
-  "resolved" "https://registry.npmmirror.com/meow/-/meow-8.1.2.tgz"
-  "version" "8.1.2"
+    errno "^0.1.1"
+    graceful-fs "^4.1.2"
+    image-size "~0.5.0"
+    make-dir "^2.1.0"
+    mime "^1.4.1"
+    needle "^2.5.2"
+    source-map "~0.6.0"
+
+levn@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.npmmirror.com/levn/-/levn-0.4.1.tgz"
+  integrity sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==
+  dependencies:
+    prelude-ls "^1.2.1"
+    type-check "~0.4.0"
+
+lilconfig@2.0.5:
+  version "2.0.5"
+  resolved "https://registry.npmmirror.com/lilconfig/-/lilconfig-2.0.5.tgz"
+  integrity sha512-xaYmXZtTHPAw5m+xLN8ab9C+3a8YmV3asNSPOATITbtwrfbwaLJj8h66H1WMIpALCkqsIzK3h7oQ+PdX+LQ9Eg==
+
+lines-and-columns@^1.1.6:
+  version "1.2.4"
+  resolved "https://registry.npmmirror.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz"
+  integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
+
+lint-staged@^12.3.7:
+  version "12.4.3"
+  resolved "https://registry.npmmirror.com/lint-staged/-/lint-staged-12.4.3.tgz"
+  integrity sha512-eH6SKOmdm/ZwCRMTZAmM3q3dPkpq6vco/BfrOw8iGun4Xs/thYegPD/MLIwKO+iPkzibkLJuQcRhRLXKvaKreg==
+  dependencies:
+    cli-truncate "^3.1.0"
+    colorette "^2.0.16"
+    commander "^9.3.0"
+    debug "^4.3.4"
+    execa "^5.1.1"
+    lilconfig "2.0.5"
+    listr2 "^4.0.5"
+    micromatch "^4.0.5"
+    normalize-path "^3.0.0"
+    object-inspect "^1.12.2"
+    pidtree "^0.5.0"
+    string-argv "^0.3.1"
+    supports-color "^9.2.2"
+    yaml "^1.10.2"
+
+listr2@^4.0.5:
+  version "4.0.5"
+  resolved "https://registry.npmmirror.com/listr2/-/listr2-4.0.5.tgz"
+  integrity sha512-juGHV1doQdpNT3GSTs9IUN43QJb7KHdF9uqg7Vufs/tG9VTzpFphqF4pm/ICdAABGQxsyNn9CiYA3StkI6jpwA==
+  dependencies:
+    cli-truncate "^2.1.0"
+    colorette "^2.0.16"
+    log-update "^4.0.0"
+    p-map "^4.0.0"
+    rfdc "^1.3.0"
+    rxjs "^7.5.5"
+    through "^2.3.8"
+    wrap-ansi "^7.0.0"
+
+locate-path@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.npmmirror.com/locate-path/-/locate-path-5.0.0.tgz"
+  integrity sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==
+  dependencies:
+    p-locate "^4.1.0"
+
+locate-path@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.npmmirror.com/locate-path/-/locate-path-6.0.0.tgz"
+  integrity sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==
+  dependencies:
+    p-locate "^5.0.0"
+
+lodash-es@^4.17.15, lodash-es@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.npmmirror.com/lodash-es/-/lodash-es-4.17.21.tgz"
+  integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
+
+lodash.merge@^4.6.2:
+  version "4.6.2"
+  resolved "https://registry.npmmirror.com/lodash.merge/-/lodash.merge-4.6.2.tgz"
+  integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
+
+lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
+log-update@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmmirror.com/log-update/-/log-update-4.0.0.tgz"
+  integrity sha512-9fkkDevMefjg0mmzWFBW8YkFP91OrizzkW3diF7CpG+S2EYdy4+TVfGwz1zeF8x7hCx1ovSPTOE9Ngib74qqUg==
+  dependencies:
+    ansi-escapes "^4.3.0"
+    cli-cursor "^3.1.0"
+    slice-ansi "^4.0.0"
+    wrap-ansi "^6.2.0"
+
+loose-envify@^1.0.0:
+  version "1.4.0"
+  resolved "https://registry.npmmirror.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
+  integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
+  dependencies:
+    js-tokens "^3.0.0 || ^4.0.0"
+
+lru-cache@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.npmmirror.com/lru-cache/-/lru-cache-6.0.0.tgz"
+  integrity sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==
+  dependencies:
+    yallist "^4.0.0"
+
+magic-string@^0.25.7:
+  version "0.25.9"
+  resolved "https://registry.npmmirror.com/magic-string/-/magic-string-0.25.9.tgz"
+  integrity sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==
+  dependencies:
+    sourcemap-codec "^1.4.8"
+
+make-dir@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmmirror.com/make-dir/-/make-dir-2.1.0.tgz"
+  integrity sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==
+  dependencies:
+    pify "^4.0.1"
+    semver "^5.6.0"
+
+make-error@^1.1.1:
+  version "1.3.6"
+  resolved "https://registry.npmmirror.com/make-error/-/make-error-1.3.6.tgz"
+  integrity sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==
+
+map-obj@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.npmmirror.com/map-obj/-/map-obj-1.0.1.tgz"
+  integrity sha512-7N/q3lyZ+LVCp7PzuxrJr4KMbBE2hW7BT7YNia330OFxIf4d3r5zVpicP2650l7CPN6RM9zOJRl3NGpqSiw3Eg==
+
+map-obj@^4.0.0:
+  version "4.3.0"
+  resolved "https://registry.npmmirror.com/map-obj/-/map-obj-4.3.0.tgz"
+  integrity sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==
+
+meow@^8.0.0:
+  version "8.1.2"
+  resolved "https://registry.npmmirror.com/meow/-/meow-8.1.2.tgz"
+  integrity sha512-r85E3NdZ+mpYk1C6RjPFEMSE+s1iZMuHtsHAqY0DT3jZczl0diWUZ8g6oU7h0M9cD2EL+PzaYghhCLzR0ZNn5Q==
   dependencies:
     "@types/minimist" "^1.2.0"
-    "camelcase-keys" "^6.2.2"
-    "decamelize-keys" "^1.1.0"
-    "hard-rejection" "^2.1.0"
-    "minimist-options" "4.1.0"
-    "normalize-package-data" "^3.0.0"
-    "read-pkg-up" "^7.0.1"
-    "redent" "^3.0.0"
-    "trim-newlines" "^3.0.0"
-    "type-fest" "^0.18.0"
-    "yargs-parser" "^20.2.3"
-
-"merge-stream@^2.0.0":
-  "integrity" "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w=="
-  "resolved" "https://registry.npmmirror.com/merge-stream/-/merge-stream-2.0.0.tgz"
-  "version" "2.0.0"
-
-"merge2@^1.3.0", "merge2@^1.4.1":
-  "integrity" "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg=="
-  "resolved" "https://registry.npmmirror.com/merge2/-/merge2-1.4.1.tgz"
-  "version" "1.4.1"
-
-"micromatch@^4.0.4", "micromatch@^4.0.5":
-  "integrity" "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA=="
-  "resolved" "https://registry.npmmirror.com/micromatch/-/micromatch-4.0.5.tgz"
-  "version" "4.0.5"
-  dependencies:
-    "braces" "^3.0.2"
-    "picomatch" "^2.3.1"
-
-"mime@^1.4.1":
-  "integrity" "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg=="
-  "resolved" "https://registry.npmmirror.com/mime/-/mime-1.6.0.tgz"
-  "version" "1.6.0"
-
-"mimic-fn@^2.1.0":
-  "integrity" "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg=="
-  "resolved" "https://registry.npmmirror.com/mimic-fn/-/mimic-fn-2.1.0.tgz"
-  "version" "2.1.0"
-
-"min-indent@^1.0.0":
-  "integrity" "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg=="
-  "resolved" "https://registry.npmmirror.com/min-indent/-/min-indent-1.0.1.tgz"
-  "version" "1.0.1"
-
-"minimatch@^3.0.4", "minimatch@^3.1.1", "minimatch@^3.1.2":
-  "integrity" "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw=="
-  "resolved" "https://registry.npmmirror.com/minimatch/-/minimatch-3.1.2.tgz"
-  "version" "3.1.2"
-  dependencies:
-    "brace-expansion" "^1.1.7"
-
-"minimist-options@4.1.0":
-  "integrity" "sha512-Q4r8ghd80yhO/0j1O3B2BjweX3fiHg9cdOwjJd2J76Q135c+NDxGCqdYKQ1SKBuFfgWbAUzBfvYjPUEeNgqN1A=="
-  "resolved" "https://registry.npmmirror.com/minimist-options/-/minimist-options-4.1.0.tgz"
-  "version" "4.1.0"
-  dependencies:
-    "arrify" "^1.0.1"
-    "is-plain-obj" "^1.1.0"
-    "kind-of" "^6.0.3"
-
-"moment@^2.27.0":
-  "integrity" "sha512-c6YRvhEo//6T2Jz/vVtYzqBzwvPT95JBQ+smCytzf7c50oMZRsR/a4w88aD34I+/QVSfnoAnSBFPJHItlOMJVw=="
-  "resolved" "https://registry.npmmirror.com/moment/-/moment-2.29.3.tgz"
-  "version" "2.29.3"
-
-"ms@^2.1.1", "ms@2.1.2":
-  "integrity" "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
-  "resolved" "https://registry.npmmirror.com/ms/-/ms-2.1.2.tgz"
-  "version" "2.1.2"
-
-"nanoid@^3.3.4":
-  "integrity" "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw=="
-  "resolved" "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.4.tgz"
-  "version" "3.3.4"
-
-"nanopop@^2.1.0":
-  "integrity" "sha512-jGTwpFRexSH+fxappnGQtN9dspgE2ipa1aOjtR24igG0pv6JCxImIAmrLRHX+zUF5+1wtsFVbKyfP51kIGAVNw=="
-  "resolved" "https://registry.npmmirror.com/nanopop/-/nanopop-2.1.0.tgz"
-  "version" "2.1.0"
-
-"natural-compare@^1.4.0":
-  "integrity" "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw=="
-  "resolved" "https://registry.npmmirror.com/natural-compare/-/natural-compare-1.4.0.tgz"
-  "version" "1.4.0"
-
-"needle@^2.5.2":
-  "integrity" "sha512-6R9fqJ5Zcmf+uYaFgdIHmLwNldn5HbK8L5ybn7Uz+ylX/rnOsSp1AHcvQSrCaFN+qNM1wpymHqD7mVasEOlHGQ=="
-  "resolved" "https://registry.npmmirror.com/needle/-/needle-2.9.1.tgz"
-  "version" "2.9.1"
-  dependencies:
-    "debug" "^3.2.6"
-    "iconv-lite" "^0.4.4"
-    "sax" "^1.2.4"
-
-"normalize-package-data@^2.5.0":
-  "integrity" "sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA=="
-  "resolved" "https://registry.npmmirror.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz"
-  "version" "2.5.0"
-  dependencies:
-    "hosted-git-info" "^2.1.4"
-    "resolve" "^1.10.0"
-    "semver" "2 || 3 || 4 || 5"
-    "validate-npm-package-license" "^3.0.1"
-
-"normalize-package-data@^3.0.0":
-  "integrity" "sha512-p2W1sgqij3zMMyRC067Dg16bfzVH+w7hyegmpIvZ4JNjqtGOVAIvLmjBx3yP7YTe9vKJgkoNOPjwQGogDoMXFA=="
-  "resolved" "https://registry.npmmirror.com/normalize-package-data/-/normalize-package-data-3.0.3.tgz"
-  "version" "3.0.3"
-  dependencies:
-    "hosted-git-info" "^4.0.1"
-    "is-core-module" "^2.5.0"
-    "semver" "^7.3.4"
-    "validate-npm-package-license" "^3.0.1"
-
-"normalize-path@^3.0.0":
-  "integrity" "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="
-  "resolved" "https://registry.npmmirror.com/normalize-path/-/normalize-path-3.0.0.tgz"
-  "version" "3.0.0"
-
-"npm-run-path@^4.0.1":
-  "integrity" "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw=="
-  "resolved" "https://registry.npmmirror.com/npm-run-path/-/npm-run-path-4.0.1.tgz"
-  "version" "4.0.1"
-  dependencies:
-    "path-key" "^3.0.0"
-
-"nth-check@^2.0.1":
-  "integrity" "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w=="
-  "resolved" "https://registry.npmmirror.com/nth-check/-/nth-check-2.1.1.tgz"
-  "version" "2.1.1"
-  dependencies:
-    "boolbase" "^1.0.0"
-
-"object-inspect@^1.12.2", "object-inspect@^1.9.0":
-  "integrity" "sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ=="
-  "resolved" "https://registry.npmmirror.com/object-inspect/-/object-inspect-1.12.2.tgz"
-  "version" "1.12.2"
-
-"omit.js@^2.0.0":
-  "integrity" "sha512-hJmu9D+bNB40YpL9jYebQl4lsTW6yEHRTroJzNLqQJYHm7c+NQnJGfZmIWh8S3q3KoaxV1aLhV6B3+0N0/kyJg=="
-  "resolved" "https://registry.npmmirror.com/omit.js/-/omit.js-2.0.2.tgz"
-  "version" "2.0.2"
-
-"once@^1.3.0":
-  "integrity" "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w=="
-  "resolved" "https://registry.npmmirror.com/once/-/once-1.4.0.tgz"
-  "version" "1.4.0"
-  dependencies:
-    "wrappy" "1"
-
-"onetime@^5.1.0", "onetime@^5.1.2":
-  "integrity" "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg=="
-  "resolved" "https://registry.npmmirror.com/onetime/-/onetime-5.1.2.tgz"
-  "version" "5.1.2"
-  dependencies:
-    "mimic-fn" "^2.1.0"
-
-"optionator@^0.9.1":
-  "integrity" "sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw=="
-  "resolved" "https://registry.npmmirror.com/optionator/-/optionator-0.9.1.tgz"
-  "version" "0.9.1"
-  dependencies:
-    "deep-is" "^0.1.3"
-    "fast-levenshtein" "^2.0.6"
-    "levn" "^0.4.1"
-    "prelude-ls" "^1.2.1"
-    "type-check" "^0.4.0"
-    "word-wrap" "^1.2.3"
-
-"p-limit@^2.2.0":
-  "integrity" "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w=="
-  "resolved" "https://registry.npmmirror.com/p-limit/-/p-limit-2.3.0.tgz"
-  "version" "2.3.0"
-  dependencies:
-    "p-try" "^2.0.0"
-
-"p-limit@^3.0.2":
-  "integrity" "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ=="
-  "resolved" "https://registry.npmmirror.com/p-limit/-/p-limit-3.1.0.tgz"
-  "version" "3.1.0"
-  dependencies:
-    "yocto-queue" "^0.1.0"
+    camelcase-keys "^6.2.2"
+    decamelize-keys "^1.1.0"
+    hard-rejection "^2.1.0"
+    minimist-options "4.1.0"
+    normalize-package-data "^3.0.0"
+    read-pkg-up "^7.0.1"
+    redent "^3.0.0"
+    trim-newlines "^3.0.0"
+    type-fest "^0.18.0"
+    yargs-parser "^20.2.3"
+
+merge-stream@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmmirror.com/merge-stream/-/merge-stream-2.0.0.tgz"
+  integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==
+
+merge2@^1.3.0, merge2@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.npmmirror.com/merge2/-/merge2-1.4.1.tgz"
+  integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
+
+micromatch@^4.0.4, micromatch@^4.0.5:
+  version "4.0.5"
+  resolved "https://registry.npmmirror.com/micromatch/-/micromatch-4.0.5.tgz"
+  integrity sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==
+  dependencies:
+    braces "^3.0.2"
+    picomatch "^2.3.1"
+
+mime@^1.4.1:
+  version "1.6.0"
+  resolved "https://registry.npmmirror.com/mime/-/mime-1.6.0.tgz"
+  integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
+
+mimic-fn@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmmirror.com/mimic-fn/-/mimic-fn-2.1.0.tgz"
+  integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
+
+min-indent@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.npmmirror.com/min-indent/-/min-indent-1.0.1.tgz"
+  integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
+
+minimatch@^3.0.4, minimatch@^3.1.1, minimatch@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.npmmirror.com/minimatch/-/minimatch-3.1.2.tgz"
+  integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
+  dependencies:
+    brace-expansion "^1.1.7"
+
+minimist-options@4.1.0:
+  version "4.1.0"
+  resolved "https://registry.npmmirror.com/minimist-options/-/minimist-options-4.1.0.tgz"
+  integrity sha512-Q4r8ghd80yhO/0j1O3B2BjweX3fiHg9cdOwjJd2J76Q135c+NDxGCqdYKQ1SKBuFfgWbAUzBfvYjPUEeNgqN1A==
+  dependencies:
+    arrify "^1.0.1"
+    is-plain-obj "^1.1.0"
+    kind-of "^6.0.3"
+
+ms@2.1.2, ms@^2.1.1:
+  version "2.1.2"
+  resolved "https://registry.npmmirror.com/ms/-/ms-2.1.2.tgz"
+  integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
+
+nanoid@^3.3.4:
+  version "3.3.4"
+  resolved "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.4.tgz"
+  integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==
+
+nanopop@^2.1.0:
+  version "2.3.0"
+  resolved "https://registry.npmmirror.com/nanopop/-/nanopop-2.3.0.tgz#a5f672fba27d45d6ecbd0b59789c040072915123"
+  integrity sha512-fzN+T2K7/Ah25XU02MJkPZ5q4Tj5FpjmIYq4rvoHX4yb16HzFdCO6JxFFn5Y/oBhQ8no8fUZavnyIv9/+xkBBw==
+
+natural-compare@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.npmmirror.com/natural-compare/-/natural-compare-1.4.0.tgz"
+  integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
+
+needle@^2.5.2:
+  version "2.9.1"
+  resolved "https://registry.npmmirror.com/needle/-/needle-2.9.1.tgz"
+  integrity sha512-6R9fqJ5Zcmf+uYaFgdIHmLwNldn5HbK8L5ybn7Uz+ylX/rnOsSp1AHcvQSrCaFN+qNM1wpymHqD7mVasEOlHGQ==
+  dependencies:
+    debug "^3.2.6"
+    iconv-lite "^0.4.4"
+    sax "^1.2.4"
+
+normalize-package-data@^2.5.0:
+  version "2.5.0"
+  resolved "https://registry.npmmirror.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz"
+  integrity sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==
+  dependencies:
+    hosted-git-info "^2.1.4"
+    resolve "^1.10.0"
+    semver "2 || 3 || 4 || 5"
+    validate-npm-package-license "^3.0.1"
+
+normalize-package-data@^3.0.0:
+  version "3.0.3"
+  resolved "https://registry.npmmirror.com/normalize-package-data/-/normalize-package-data-3.0.3.tgz"
+  integrity sha512-p2W1sgqij3zMMyRC067Dg16bfzVH+w7hyegmpIvZ4JNjqtGOVAIvLmjBx3yP7YTe9vKJgkoNOPjwQGogDoMXFA==
+  dependencies:
+    hosted-git-info "^4.0.1"
+    is-core-module "^2.5.0"
+    semver "^7.3.4"
+    validate-npm-package-license "^3.0.1"
+
+normalize-path@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmmirror.com/normalize-path/-/normalize-path-3.0.0.tgz"
+  integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
+
+npm-run-path@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.npmmirror.com/npm-run-path/-/npm-run-path-4.0.1.tgz"
+  integrity sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==
+  dependencies:
+    path-key "^3.0.0"
+
+nth-check@^2.0.1:
+  version "2.1.1"
+  resolved "https://registry.npmmirror.com/nth-check/-/nth-check-2.1.1.tgz"
+  integrity sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==
+  dependencies:
+    boolbase "^1.0.0"
+
+object-inspect@^1.12.2, object-inspect@^1.9.0:
+  version "1.12.2"
+  resolved "https://registry.npmmirror.com/object-inspect/-/object-inspect-1.12.2.tgz"
+  integrity sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==
+
+once@^1.3.0:
+  version "1.4.0"
+  resolved "https://registry.npmmirror.com/once/-/once-1.4.0.tgz"
+  integrity sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==
+  dependencies:
+    wrappy "1"
+
+onetime@^5.1.0, onetime@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.npmmirror.com/onetime/-/onetime-5.1.2.tgz"
+  integrity sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==
+  dependencies:
+    mimic-fn "^2.1.0"
+
+optionator@^0.9.1:
+  version "0.9.1"
+  resolved "https://registry.npmmirror.com/optionator/-/optionator-0.9.1.tgz"
+  integrity sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==
+  dependencies:
+    deep-is "^0.1.3"
+    fast-levenshtein "^2.0.6"
+    levn "^0.4.1"
+    prelude-ls "^1.2.1"
+    type-check "^0.4.0"
+    word-wrap "^1.2.3"
+
+p-limit@^2.2.0:
+  version "2.3.0"
+  resolved "https://registry.npmmirror.com/p-limit/-/p-limit-2.3.0.tgz"
+  integrity sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==
+  dependencies:
+    p-try "^2.0.0"
+
+p-limit@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.npmmirror.com/p-limit/-/p-limit-3.1.0.tgz"
+  integrity sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==
+  dependencies:
+    yocto-queue "^0.1.0"
 
-"p-locate@^4.1.0":
-  "integrity" "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A=="
-  "resolved" "https://registry.npmmirror.com/p-locate/-/p-locate-4.1.0.tgz"
-  "version" "4.1.0"
+p-locate@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.npmmirror.com/p-locate/-/p-locate-4.1.0.tgz"
+  integrity sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==
   dependencies:
-    "p-limit" "^2.2.0"
+    p-limit "^2.2.0"
 
-"p-locate@^5.0.0":
-  "integrity" "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw=="
-  "resolved" "https://registry.npmmirror.com/p-locate/-/p-locate-5.0.0.tgz"
-  "version" "5.0.0"
+p-locate@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.npmmirror.com/p-locate/-/p-locate-5.0.0.tgz"
+  integrity sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==
   dependencies:
-    "p-limit" "^3.0.2"
+    p-limit "^3.0.2"
 
-"p-map@^4.0.0":
-  "integrity" "sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ=="
-  "resolved" "https://registry.npmmirror.com/p-map/-/p-map-4.0.0.tgz"
-  "version" "4.0.0"
+p-map@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmmirror.com/p-map/-/p-map-4.0.0.tgz"
+  integrity sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==
   dependencies:
-    "aggregate-error" "^3.0.0"
+    aggregate-error "^3.0.0"
 
-"p-try@^2.0.0":
-  "integrity" "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ=="
-  "resolved" "https://registry.npmmirror.com/p-try/-/p-try-2.2.0.tgz"
-  "version" "2.2.0"
+p-try@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.npmmirror.com/p-try/-/p-try-2.2.0.tgz"
+  integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
 
-"parent-module@^1.0.0":
-  "integrity" "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g=="
-  "resolved" "https://registry.npmmirror.com/parent-module/-/parent-module-1.0.1.tgz"
-  "version" "1.0.1"
+parent-module@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.npmmirror.com/parent-module/-/parent-module-1.0.1.tgz"
+  integrity sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==
   dependencies:
-    "callsites" "^3.0.0"
+    callsites "^3.0.0"
 
-"parse-json@^5.0.0":
-  "integrity" "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg=="
-  "resolved" "https://registry.npmmirror.com/parse-json/-/parse-json-5.2.0.tgz"
-  "version" "5.2.0"
+parse-json@^5.0.0:
+  version "5.2.0"
+  resolved "https://registry.npmmirror.com/parse-json/-/parse-json-5.2.0.tgz"
+  integrity sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==
   dependencies:
     "@babel/code-frame" "^7.0.0"
-    "error-ex" "^1.3.1"
-    "json-parse-even-better-errors" "^2.3.0"
-    "lines-and-columns" "^1.1.6"
-
-"parse-node-version@^1.0.1":
-  "integrity" "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA=="
-  "resolved" "https://registry.npmmirror.com/parse-node-version/-/parse-node-version-1.0.1.tgz"
-  "version" "1.0.1"
-
-"path-exists@^4.0.0":
-  "integrity" "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w=="
-  "resolved" "https://registry.npmmirror.com/path-exists/-/path-exists-4.0.0.tgz"
-  "version" "4.0.0"
-
-"path-is-absolute@^1.0.0":
-  "integrity" "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg=="
-  "resolved" "https://registry.npmmirror.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz"
-  "version" "1.0.1"
-
-"path-key@^3.0.0", "path-key@^3.1.0":
-  "integrity" "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q=="
-  "resolved" "https://registry.npmmirror.com/path-key/-/path-key-3.1.1.tgz"
-  "version" "3.1.1"
-
-"path-parse@^1.0.7":
-  "integrity" "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
-  "resolved" "https://registry.npmmirror.com/path-parse/-/path-parse-1.0.7.tgz"
-  "version" "1.0.7"
-
-"path-type@^4.0.0":
-  "integrity" "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw=="
-  "resolved" "https://registry.npmmirror.com/path-type/-/path-type-4.0.0.tgz"
-  "version" "4.0.0"
-
-"picocolors@^1.0.0":
-  "integrity" "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
-  "resolved" "https://registry.npmmirror.com/picocolors/-/picocolors-1.0.0.tgz"
-  "version" "1.0.0"
-
-"picomatch@^2.3.1":
-  "integrity" "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="
-  "resolved" "https://registry.npmmirror.com/picomatch/-/picomatch-2.3.1.tgz"
-  "version" "2.3.1"
-
-"pidtree@^0.5.0":
-  "integrity" "sha512-9nxspIM7OpZuhBxPg73Zvyq7j1QMPMPsGKTqRc2XOaFQauDvoNz9fM1Wdkjmeo7l9GXOZiRs97sPkuayl39wjA=="
-  "resolved" "https://registry.npmmirror.com/pidtree/-/pidtree-0.5.0.tgz"
-  "version" "0.5.0"
-
-"pify@^4.0.1":
-  "integrity" "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g=="
-  "resolved" "https://registry.npmmirror.com/pify/-/pify-4.0.1.tgz"
-  "version" "4.0.1"
-
-"point-in-polygon@^1.1.0":
-  "integrity" "sha512-3ojrFwjnnw8Q9242TzgXuTD+eKiutbzyslcq1ydfu82Db2y+Ogbmyrkpv0Hgj31qwT3lbS9+QAAO/pIQM35XRw=="
-  "resolved" "https://registry.npmmirror.com/point-in-polygon/-/point-in-polygon-1.1.0.tgz"
-  "version" "1.1.0"
-
-"polygon-clipping@^0.15.3":
-  "integrity" "sha512-ho0Xx5DLkgxRx/+n4O74XyJ67DcyN3Tu9bGYKsnTukGAW6ssnuak6Mwcyb1wHy9MZc9xsUWqIoiazkZB5weECg=="
-  "resolved" "https://registry.npmmirror.com/polygon-clipping/-/polygon-clipping-0.15.3.tgz"
-  "version" "0.15.3"
-  dependencies:
-    "splaytree" "^3.1.0"
-
-"postcss-selector-parser@^6.0.9":
-  "integrity" "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w=="
-  "resolved" "https://registry.npmmirror.com/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz"
-  "version" "6.0.10"
-  dependencies:
-    "cssesc" "^3.0.0"
-    "util-deprecate" "^1.0.2"
-
-"postcss@^8.1.10", "postcss@^8.4.13":
-  "integrity" "sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig=="
-  "resolved" "https://registry.npmmirror.com/postcss/-/postcss-8.4.14.tgz"
-  "version" "8.4.14"
-  dependencies:
-    "nanoid" "^3.3.4"
-    "picocolors" "^1.0.0"
-    "source-map-js" "^1.0.2"
-
-"prelude-ls@^1.2.1":
-  "integrity" "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g=="
-  "resolved" "https://registry.npmmirror.com/prelude-ls/-/prelude-ls-1.2.1.tgz"
-  "version" "1.2.1"
-
-"prettier-linter-helpers@^1.0.0":
-  "integrity" "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w=="
-  "resolved" "https://registry.npmmirror.com/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz"
-  "version" "1.0.0"
-  dependencies:
-    "fast-diff" "^1.1.2"
-
-"prettier@^2.6.1", "prettier@>=2.0.0":
-  "integrity" "sha512-PkUpF+qoXTqhOeWL9fu7As8LXsIUZ1WYaJiY/a7McAQzxjk82OF0tibkFXVCDImZtWxbvojFjerkiLb0/q8mew=="
-  "resolved" "https://registry.npmmirror.com/prettier/-/prettier-2.6.2.tgz"
-  "version" "2.6.2"
-
-"prr@~1.0.1":
-  "integrity" "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw=="
-  "resolved" "https://registry.npmmirror.com/prr/-/prr-1.0.1.tgz"
-  "version" "1.0.1"
-
-"punycode@^2.1.0":
-  "integrity" "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
-  "resolved" "https://registry.npmmirror.com/punycode/-/punycode-2.1.1.tgz"
-  "version" "2.1.1"
-
-"q@^1.5.1":
-  "integrity" "sha512-kV/CThkXo6xyFEZUugw/+pIOywXcDbFYgSct5cT3gqlbkBE1SJdwy6UQoZvodiWF/ckQLZyDE/Bu1M6gVu5lVw=="
-  "resolved" "https://registry.npmmirror.com/q/-/q-1.5.1.tgz"
-  "version" "1.5.1"
-
-"qs@^6.10.3":
-  "integrity" "sha512-wr7M2E0OFRfIfJZjKGieI8lBKb7fRCH4Fv5KNPEs7gJ8jadvotdsS08PzOKR7opXhZ/Xkjtt3WF9g38drmyRqQ=="
-  "resolved" "https://registry.npmmirror.com/qs/-/qs-6.10.3.tgz"
-  "version" "6.10.3"
-  dependencies:
-    "side-channel" "^1.0.4"
-
-"query-string@^7.1.1":
-  "integrity" "sha512-MplouLRDHBZSG9z7fpuAAcI7aAYjDLhtsiVZsevsfaHWDS2IDdORKbSd1kWUA+V4zyva/HZoSfpwnYMMQDhb0w=="
-  "resolved" "https://registry.npmmirror.com/query-string/-/query-string-7.1.1.tgz"
-  "version" "7.1.1"
-  dependencies:
-    "decode-uri-component" "^0.2.0"
-    "filter-obj" "^1.1.0"
-    "split-on-first" "^1.0.0"
-    "strict-uri-encode" "^2.0.0"
-
-"queue-microtask@^1.2.2":
-  "integrity" "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A=="
-  "resolved" "https://registry.npmmirror.com/queue-microtask/-/queue-microtask-1.2.3.tgz"
-  "version" "1.2.3"
-
-"quick-lru@^4.0.1":
-  "integrity" "sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g=="
-  "resolved" "https://registry.npmmirror.com/quick-lru/-/quick-lru-4.0.1.tgz"
-  "version" "4.0.1"
-
-"read-pkg-up@^7.0.1":
-  "integrity" "sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg=="
-  "resolved" "https://registry.npmmirror.com/read-pkg-up/-/read-pkg-up-7.0.1.tgz"
-  "version" "7.0.1"
-  dependencies:
-    "find-up" "^4.1.0"
-    "read-pkg" "^5.2.0"
-    "type-fest" "^0.8.1"
-
-"read-pkg@^5.2.0":
-  "integrity" "sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg=="
-  "resolved" "https://registry.npmmirror.com/read-pkg/-/read-pkg-5.2.0.tgz"
-  "version" "5.2.0"
+    error-ex "^1.3.1"
+    json-parse-even-better-errors "^2.3.0"
+    lines-and-columns "^1.1.6"
+
+parse-node-version@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmmirror.com/parse-node-version/-/parse-node-version-1.0.1.tgz"
+  integrity sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==
+
+path-exists@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmmirror.com/path-exists/-/path-exists-4.0.0.tgz"
+  integrity sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==
+
+path-is-absolute@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.npmmirror.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz"
+  integrity sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==
+
+path-key@^3.0.0, path-key@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.npmmirror.com/path-key/-/path-key-3.1.1.tgz"
+  integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
+
+path-parse@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.npmmirror.com/path-parse/-/path-parse-1.0.7.tgz"
+  integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
+
+path-type@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmmirror.com/path-type/-/path-type-4.0.0.tgz"
+  integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
+
+picocolors@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmmirror.com/picocolors/-/picocolors-1.0.0.tgz"
+  integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
+
+picomatch@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.npmmirror.com/picomatch/-/picomatch-2.3.1.tgz"
+  integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
+
+pidtree@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.npmmirror.com/pidtree/-/pidtree-0.5.0.tgz"
+  integrity sha512-9nxspIM7OpZuhBxPg73Zvyq7j1QMPMPsGKTqRc2XOaFQauDvoNz9fM1Wdkjmeo7l9GXOZiRs97sPkuayl39wjA==
+
+pify@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.npmmirror.com/pify/-/pify-4.0.1.tgz"
+  integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
+
+point-in-polygon@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmmirror.com/point-in-polygon/-/point-in-polygon-1.1.0.tgz"
+  integrity sha512-3ojrFwjnnw8Q9242TzgXuTD+eKiutbzyslcq1ydfu82Db2y+Ogbmyrkpv0Hgj31qwT3lbS9+QAAO/pIQM35XRw==
+
+polygon-clipping@^0.15.3:
+  version "0.15.3"
+  resolved "https://registry.npmmirror.com/polygon-clipping/-/polygon-clipping-0.15.3.tgz"
+  integrity sha512-ho0Xx5DLkgxRx/+n4O74XyJ67DcyN3Tu9bGYKsnTukGAW6ssnuak6Mwcyb1wHy9MZc9xsUWqIoiazkZB5weECg==
+  dependencies:
+    splaytree "^3.1.0"
+
+postcss-selector-parser@^6.0.9:
+  version "6.0.10"
+  resolved "https://registry.npmmirror.com/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz"
+  integrity sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==
+  dependencies:
+    cssesc "^3.0.0"
+    util-deprecate "^1.0.2"
+
+postcss@^8.1.10, postcss@^8.4.13:
+  version "8.4.14"
+  resolved "https://registry.npmmirror.com/postcss/-/postcss-8.4.14.tgz"
+  integrity sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==
+  dependencies:
+    nanoid "^3.3.4"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
+prelude-ls@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.npmmirror.com/prelude-ls/-/prelude-ls-1.2.1.tgz"
+  integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
+
+prettier-linter-helpers@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmmirror.com/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz"
+  integrity sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==
+  dependencies:
+    fast-diff "^1.1.2"
+
+prettier@^2.6.1:
+  version "2.6.2"
+  resolved "https://registry.npmmirror.com/prettier/-/prettier-2.6.2.tgz"
+  integrity sha512-PkUpF+qoXTqhOeWL9fu7As8LXsIUZ1WYaJiY/a7McAQzxjk82OF0tibkFXVCDImZtWxbvojFjerkiLb0/q8mew==
+
+prr@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmmirror.com/prr/-/prr-1.0.1.tgz"
+  integrity sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==
+
+punycode@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.npmmirror.com/punycode/-/punycode-2.1.1.tgz"
+  integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
+
+q@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.npmmirror.com/q/-/q-1.5.1.tgz"
+  integrity sha512-kV/CThkXo6xyFEZUugw/+pIOywXcDbFYgSct5cT3gqlbkBE1SJdwy6UQoZvodiWF/ckQLZyDE/Bu1M6gVu5lVw==
+
+qs@^6.10.3:
+  version "6.10.3"
+  resolved "https://registry.npmmirror.com/qs/-/qs-6.10.3.tgz"
+  integrity sha512-wr7M2E0OFRfIfJZjKGieI8lBKb7fRCH4Fv5KNPEs7gJ8jadvotdsS08PzOKR7opXhZ/Xkjtt3WF9g38drmyRqQ==
+  dependencies:
+    side-channel "^1.0.4"
+
+query-string@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.npmmirror.com/query-string/-/query-string-7.1.1.tgz"
+  integrity sha512-MplouLRDHBZSG9z7fpuAAcI7aAYjDLhtsiVZsevsfaHWDS2IDdORKbSd1kWUA+V4zyva/HZoSfpwnYMMQDhb0w==
+  dependencies:
+    decode-uri-component "^0.2.0"
+    filter-obj "^1.1.0"
+    split-on-first "^1.0.0"
+    strict-uri-encode "^2.0.0"
+
+queue-microtask@^1.2.2:
+  version "1.2.3"
+  resolved "https://registry.npmmirror.com/queue-microtask/-/queue-microtask-1.2.3.tgz"
+  integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
+
+quick-lru@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.npmmirror.com/quick-lru/-/quick-lru-4.0.1.tgz"
+  integrity sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==
+
+read-pkg-up@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.npmmirror.com/read-pkg-up/-/read-pkg-up-7.0.1.tgz"
+  integrity sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==
+  dependencies:
+    find-up "^4.1.0"
+    read-pkg "^5.2.0"
+    type-fest "^0.8.1"
+
+read-pkg@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.npmmirror.com/read-pkg/-/read-pkg-5.2.0.tgz"
+  integrity sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==
   dependencies:
     "@types/normalize-package-data" "^2.4.0"
-    "normalize-package-data" "^2.5.0"
-    "parse-json" "^5.0.0"
-    "type-fest" "^0.6.0"
-
-"readable-stream@^3.0.0", "readable-stream@3":
-  "integrity" "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA=="
-  "resolved" "https://registry.npmmirror.com/readable-stream/-/readable-stream-3.6.0.tgz"
-  "version" "3.6.0"
-  dependencies:
-    "inherits" "^2.0.3"
-    "string_decoder" "^1.1.1"
-    "util-deprecate" "^1.0.1"
-
-"redent@^3.0.0":
-  "integrity" "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg=="
-  "resolved" "https://registry.npmmirror.com/redent/-/redent-3.0.0.tgz"
-  "version" "3.0.0"
-  dependencies:
-    "indent-string" "^4.0.0"
-    "strip-indent" "^3.0.0"
-
-"regenerator-runtime@^0.13.4":
-  "integrity" "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
-  "resolved" "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz"
-  "version" "0.13.9"
-
-"regexpp@^3.2.0":
-  "integrity" "sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg=="
-  "resolved" "https://registry.npmmirror.com/regexpp/-/regexpp-3.2.0.tgz"
-  "version" "3.2.0"
-
-"require-directory@^2.1.1":
-  "integrity" "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q=="
-  "resolved" "https://registry.npmmirror.com/require-directory/-/require-directory-2.1.1.tgz"
-  "version" "2.1.1"
-
-"resize-observer-polyfill@^1.5.1":
-  "integrity" "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
-  "resolved" "https://registry.npmmirror.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz"
-  "version" "1.5.1"
-
-"resolve-from@^4.0.0":
-  "integrity" "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="
-  "resolved" "https://registry.npmmirror.com/resolve-from/-/resolve-from-4.0.0.tgz"
-  "version" "4.0.0"
-
-"resolve-from@^5.0.0":
-  "integrity" "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw=="
-  "resolved" "https://registry.npmmirror.com/resolve-from/-/resolve-from-5.0.0.tgz"
-  "version" "5.0.0"
-
-"resolve-from@5.0.0":
-  "integrity" "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw=="
-  "resolved" "https://registry.npmmirror.com/resolve-from/-/resolve-from-5.0.0.tgz"
-  "version" "5.0.0"
-
-"resolve-global@^1.0.0", "resolve-global@1.0.0":
-  "integrity" "sha512-zFa12V4OLtT5XUX/Q4VLvTfBf+Ok0SPc1FNGM/z9ctUdiU618qwKpWnd0CHs3+RqROfyEg/DhuHbMWYqcgljEw=="
-  "resolved" "https://registry.npmmirror.com/resolve-global/-/resolve-global-1.0.0.tgz"
-  "version" "1.0.0"
-  dependencies:
-    "global-dirs" "^0.1.1"
-
-"resolve@^1.10.0", "resolve@^1.22.0":
-  "integrity" "sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw=="
-  "resolved" "https://registry.npmmirror.com/resolve/-/resolve-1.22.0.tgz"
-  "version" "1.22.0"
-  dependencies:
-    "is-core-module" "^2.8.1"
-    "path-parse" "^1.0.7"
-    "supports-preserve-symlinks-flag" "^1.0.0"
-
-"restore-cursor@^3.1.0":
-  "integrity" "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA=="
-  "resolved" "https://registry.npmmirror.com/restore-cursor/-/restore-cursor-3.1.0.tgz"
-  "version" "3.1.0"
-  dependencies:
-    "onetime" "^5.1.0"
-    "signal-exit" "^3.0.2"
-
-"reusify@^1.0.4":
-  "integrity" "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw=="
-  "resolved" "https://registry.npmmirror.com/reusify/-/reusify-1.0.4.tgz"
-  "version" "1.0.4"
-
-"rfdc@^1.3.0":
-  "integrity" "sha512-V2hovdzFbOi77/WajaSMXk2OLm+xNIeQdMMuB7icj7bk6zi2F8GGAxigcnDFpJHbNyNcgyJDiP+8nOrY5cZGrA=="
-  "resolved" "https://registry.npmmirror.com/rfdc/-/rfdc-1.3.0.tgz"
-  "version" "1.3.0"
-
-"rimraf@^3.0.2":
-  "integrity" "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA=="
-  "resolved" "https://registry.npmmirror.com/rimraf/-/rimraf-3.0.2.tgz"
-  "version" "3.0.2"
-  dependencies:
-    "glob" "^7.1.3"
-
-"rollup@^2.59.0":
-  "integrity" "sha512-K2zW7kV8Voua5eGkbnBtWYfMIhYhT9Pel2uhBk2WO5eMee161nPze/XRfvEQPFYz7KgrCCnmh2Wy0AMFLGGmMA=="
-  "resolved" "https://registry.npmmirror.com/rollup/-/rollup-2.74.1.tgz"
-  "version" "2.74.1"
+    normalize-package-data "^2.5.0"
+    parse-json "^5.0.0"
+    type-fest "^0.6.0"
+
+readable-stream@3, readable-stream@^3.0.0:
+  version "3.6.0"
+  resolved "https://registry.npmmirror.com/readable-stream/-/readable-stream-3.6.0.tgz"
+  integrity sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==
+  dependencies:
+    inherits "^2.0.3"
+    string_decoder "^1.1.1"
+    util-deprecate "^1.0.1"
+
+redent@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmmirror.com/redent/-/redent-3.0.0.tgz"
+  integrity sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==
+  dependencies:
+    indent-string "^4.0.0"
+    strip-indent "^3.0.0"
+
+regenerator-runtime@^0.14.0:
+  version "0.14.1"
+  resolved "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz#356ade10263f685dda125100cd862c1db895327f"
+  integrity sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==
+
+regexpp@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.npmmirror.com/regexpp/-/regexpp-3.2.0.tgz"
+  integrity sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==
+
+require-directory@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.npmmirror.com/require-directory/-/require-directory-2.1.1.tgz"
+  integrity sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==
+
+resize-observer-polyfill@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.npmmirror.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
+  integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
+
+resolve-from@5.0.0, resolve-from@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.npmmirror.com/resolve-from/-/resolve-from-5.0.0.tgz"
+  integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
+
+resolve-from@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmmirror.com/resolve-from/-/resolve-from-4.0.0.tgz"
+  integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
+
+resolve-global@1.0.0, resolve-global@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmmirror.com/resolve-global/-/resolve-global-1.0.0.tgz"
+  integrity sha512-zFa12V4OLtT5XUX/Q4VLvTfBf+Ok0SPc1FNGM/z9ctUdiU618qwKpWnd0CHs3+RqROfyEg/DhuHbMWYqcgljEw==
+  dependencies:
+    global-dirs "^0.1.1"
+
+resolve@^1.10.0, resolve@^1.22.0:
+  version "1.22.0"
+  resolved "https://registry.npmmirror.com/resolve/-/resolve-1.22.0.tgz"
+  integrity sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==
+  dependencies:
+    is-core-module "^2.8.1"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
+restore-cursor@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.npmmirror.com/restore-cursor/-/restore-cursor-3.1.0.tgz"
+  integrity sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==
+  dependencies:
+    onetime "^5.1.0"
+    signal-exit "^3.0.2"
+
+reusify@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.npmmirror.com/reusify/-/reusify-1.0.4.tgz"
+  integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
+
+rfdc@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.npmmirror.com/rfdc/-/rfdc-1.3.0.tgz"
+  integrity sha512-V2hovdzFbOi77/WajaSMXk2OLm+xNIeQdMMuB7icj7bk6zi2F8GGAxigcnDFpJHbNyNcgyJDiP+8nOrY5cZGrA==
+
+rimraf@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.npmmirror.com/rimraf/-/rimraf-3.0.2.tgz"
+  integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
+  dependencies:
+    glob "^7.1.3"
+
+rollup@^2.59.0:
+  version "2.74.1"
+  resolved "https://registry.npmmirror.com/rollup/-/rollup-2.74.1.tgz"
+  integrity sha512-K2zW7kV8Voua5eGkbnBtWYfMIhYhT9Pel2uhBk2WO5eMee161nPze/XRfvEQPFYz7KgrCCnmh2Wy0AMFLGGmMA==
   optionalDependencies:
-    "fsevents" "~2.3.2"
+    fsevents "~2.3.2"
 
-"run-parallel@^1.1.9":
-  "integrity" "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA=="
-  "resolved" "https://registry.npmmirror.com/run-parallel/-/run-parallel-1.2.0.tgz"
-  "version" "1.2.0"
+run-parallel@^1.1.9:
+  version "1.2.0"
+  resolved "https://registry.npmmirror.com/run-parallel/-/run-parallel-1.2.0.tgz"
+  integrity sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==
   dependencies:
-    "queue-microtask" "^1.2.2"
+    queue-microtask "^1.2.2"
 
-"rxjs@^7.5.5":
-  "integrity" "sha512-sy+H0pQofO95VDmFLzyaw9xNJU4KTRSwQIGM6+iG3SypAtCiLDzpeG8sJrNCWn2Up9km+KhkvTdbkrdy+yzZdw=="
-  "resolved" "https://registry.npmmirror.com/rxjs/-/rxjs-7.5.5.tgz"
-  "version" "7.5.5"
+rxjs@^7.5.5:
+  version "7.5.5"
+  resolved "https://registry.npmmirror.com/rxjs/-/rxjs-7.5.5.tgz"
+  integrity sha512-sy+H0pQofO95VDmFLzyaw9xNJU4KTRSwQIGM6+iG3SypAtCiLDzpeG8sJrNCWn2Up9km+KhkvTdbkrdy+yzZdw==
   dependencies:
-    "tslib" "^2.1.0"
+    tslib "^2.1.0"
 
-"safe-buffer@~5.2.0":
-  "integrity" "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ=="
-  "resolved" "https://registry.npmmirror.com/safe-buffer/-/safe-buffer-5.2.1.tgz"
-  "version" "5.2.1"
+safe-buffer@~5.2.0:
+  version "5.2.1"
+  resolved "https://registry.npmmirror.com/safe-buffer/-/safe-buffer-5.2.1.tgz"
+  integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
 
 "safer-buffer@>= 2.1.2 < 3":
-  "integrity" "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
-  "resolved" "https://registry.npmmirror.com/safer-buffer/-/safer-buffer-2.1.2.tgz"
-  "version" "2.1.2"
-
-"sax@^1.2.4":
-  "integrity" "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw=="
-  "resolved" "https://registry.npmmirror.com/sax/-/sax-1.2.4.tgz"
-  "version" "1.2.4"
-
-"screenfull@^6.0.1":
-  "integrity" "sha512-yzQW+j4zMUBQC51xxWaoDYjxOtl8Kn+xvue3p6v/fv2pIi1jH4AldgVLU8TBfFVgH2x3VXlf3+YiA/AYIPlaew=="
-  "resolved" "https://registry.npmmirror.com/screenfull/-/screenfull-6.0.1.tgz"
-  "version" "6.0.1"
-
-"scroll-into-view-if-needed@^2.2.25":
-  "integrity" "sha512-hxpAR6AN+Gh53AdAimHM6C8oTN1ppwVZITihix+WqalywBeFcQ6LdQP5ABNl26nX8GTEL7VT+b8lKpdqq65wXg=="
-  "resolved" "https://registry.npmmirror.com/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.29.tgz"
-  "version" "2.2.29"
-  dependencies:
-    "compute-scroll-into-view" "^1.0.17"
-
-"select@^1.1.2":
-  "integrity" "sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA=="
-  "resolved" "https://registry.npmmirror.com/select/-/select-1.1.2.tgz"
-  "version" "1.1.2"
-
-"semver@^5.6.0":
-  "integrity" "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ=="
-  "resolved" "https://registry.npmmirror.com/semver/-/semver-5.7.1.tgz"
-  "version" "5.7.1"
-
-"semver@^7.3.4", "semver@^7.3.5", "semver@^7.3.6", "semver@^7.3.7", "semver@7.3.7":
-  "integrity" "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g=="
-  "resolved" "https://registry.npmmirror.com/semver/-/semver-7.3.7.tgz"
-  "version" "7.3.7"
-  dependencies:
-    "lru-cache" "^6.0.0"
-
-"semver@2 || 3 || 4 || 5":
-  "integrity" "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ=="
-  "resolved" "https://registry.npmmirror.com/semver/-/semver-5.7.1.tgz"
-  "version" "5.7.1"
-
-"shallow-equal@^1.0.0":
-  "integrity" "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA=="
-  "resolved" "https://registry.npmmirror.com/shallow-equal/-/shallow-equal-1.2.1.tgz"
-  "version" "1.2.1"
-
-"shebang-command@^2.0.0":
-  "integrity" "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA=="
-  "resolved" "https://registry.npmmirror.com/shebang-command/-/shebang-command-2.0.0.tgz"
-  "version" "2.0.0"
-  dependencies:
-    "shebang-regex" "^3.0.0"
-
-"shebang-regex@^3.0.0":
-  "integrity" "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A=="
-  "resolved" "https://registry.npmmirror.com/shebang-regex/-/shebang-regex-3.0.0.tgz"
-  "version" "3.0.0"
-
-"side-channel@^1.0.4":
-  "integrity" "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw=="
-  "resolved" "https://registry.npmmirror.com/side-channel/-/side-channel-1.0.4.tgz"
-  "version" "1.0.4"
-  dependencies:
-    "call-bind" "^1.0.0"
-    "get-intrinsic" "^1.0.2"
-    "object-inspect" "^1.9.0"
-
-"signal-exit@^3.0.2", "signal-exit@^3.0.3":
-  "integrity" "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ=="
-  "resolved" "https://registry.npmmirror.com/signal-exit/-/signal-exit-3.0.7.tgz"
-  "version" "3.0.7"
-
-"slash@^3.0.0":
-  "integrity" "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q=="
-  "resolved" "https://registry.npmmirror.com/slash/-/slash-3.0.0.tgz"
-  "version" "3.0.0"
-
-"slice-ansi@^3.0.0":
-  "integrity" "sha512-pSyv7bSTC7ig9Dcgbw9AuRNUb5k5V6oDudjZoMBSr13qpLBG7tB+zgCkARjq7xIUgdz5P1Qe8u+rSGdouOOIyQ=="
-  "resolved" "https://registry.npmmirror.com/slice-ansi/-/slice-ansi-3.0.0.tgz"
-  "version" "3.0.0"
-  dependencies:
-    "ansi-styles" "^4.0.0"
-    "astral-regex" "^2.0.0"
-    "is-fullwidth-code-point" "^3.0.0"
-
-"slice-ansi@^4.0.0":
-  "integrity" "sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ=="
-  "resolved" "https://registry.npmmirror.com/slice-ansi/-/slice-ansi-4.0.0.tgz"
-  "version" "4.0.0"
-  dependencies:
-    "ansi-styles" "^4.0.0"
-    "astral-regex" "^2.0.0"
-    "is-fullwidth-code-point" "^3.0.0"
-
-"slice-ansi@^5.0.0":
-  "integrity" "sha512-FC+lgizVPfie0kkhqUScwRu1O/lF6NOgJmlCgK+/LYxDCTk8sGelYaHDhFcDN+Sn3Cv+3VSa4Byeo+IMCzpMgQ=="
-  "resolved" "https://registry.npmmirror.com/slice-ansi/-/slice-ansi-5.0.0.tgz"
-  "version" "5.0.0"
-  dependencies:
-    "ansi-styles" "^6.0.0"
-    "is-fullwidth-code-point" "^4.0.0"
-
-"source-map-js@^1.0.2":
-  "integrity" "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
-  "resolved" "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.0.2.tgz"
-  "version" "1.0.2"
-
-"source-map@^0.6.1", "source-map@~0.6.0", "source-map@0.6.1":
-  "integrity" "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
-  "resolved" "https://registry.npmmirror.com/source-map/-/source-map-0.6.1.tgz"
-  "version" "0.6.1"
-
-"sourcemap-codec@^1.4.8":
-  "integrity" "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
-  "resolved" "https://registry.npmmirror.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz"
-  "version" "1.4.8"
-
-"spdx-correct@^3.0.0":
-  "integrity" "sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w=="
-  "resolved" "https://registry.npmmirror.com/spdx-correct/-/spdx-correct-3.1.1.tgz"
-  "version" "3.1.1"
-  dependencies:
-    "spdx-expression-parse" "^3.0.0"
-    "spdx-license-ids" "^3.0.0"
-
-"spdx-exceptions@^2.1.0":
-  "integrity" "sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A=="
-  "resolved" "https://registry.npmmirror.com/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz"
-  "version" "2.3.0"
-
-"spdx-expression-parse@^3.0.0":
-  "integrity" "sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q=="
-  "resolved" "https://registry.npmmirror.com/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz"
-  "version" "3.0.1"
-  dependencies:
-    "spdx-exceptions" "^2.1.0"
-    "spdx-license-ids" "^3.0.0"
-
-"spdx-license-ids@^3.0.0":
-  "integrity" "sha512-Ctl2BrFiM0X3MANYgj3CkygxhRmr9mi6xhejbdO960nF6EDJApTYpn0BQnDKlnNBULKiCN1n3w9EBkHK8ZWg+g=="
-  "resolved" "https://registry.npmmirror.com/spdx-license-ids/-/spdx-license-ids-3.0.11.tgz"
-  "version" "3.0.11"
-
-"splaytree@^3.1.0":
-  "integrity" "sha512-9FaQ18FF0+sZc/ieEeXHt+Jw2eSpUgUtTLDYB/HXKWvhYVyOc7h1hzkn5MMO3GPib9MmXG1go8+OsBBzs/NMww=="
-  "resolved" "https://registry.npmmirror.com/splaytree/-/splaytree-3.1.1.tgz"
-  "version" "3.1.1"
-
-"split-on-first@^1.0.0":
-  "integrity" "sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw=="
-  "resolved" "https://registry.npmmirror.com/split-on-first/-/split-on-first-1.1.0.tgz"
-  "version" "1.1.0"
-
-"split2@^3.0.0":
-  "integrity" "sha512-9NThjpgZnifTkJpzTZ7Eue85S49QwpNhZTq6GRJwObb6jnLFNGB7Qm73V5HewTROPyxD0C29xqmaI68bQtV+hg=="
-  "resolved" "https://registry.npmmirror.com/split2/-/split2-3.2.2.tgz"
-  "version" "3.2.2"
-  dependencies:
-    "readable-stream" "^3.0.0"
-
-"strict-uri-encode@^2.0.0":
-  "integrity" "sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ=="
-  "resolved" "https://registry.npmmirror.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz"
-  "version" "2.0.0"
-
-"string_decoder@^1.1.1":
-  "integrity" "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA=="
-  "resolved" "https://registry.npmmirror.com/string_decoder/-/string_decoder-1.3.0.tgz"
-  "version" "1.3.0"
-  dependencies:
-    "safe-buffer" "~5.2.0"
-
-"string-argv@^0.3.1":
-  "integrity" "sha512-a1uQGz7IyVy9YwhqjZIZu1c8JO8dNIe20xBmSS6qu9kv++k3JGzCVmprbNN5Kn+BgzD5E7YYwg1CcjuJMRNsvg=="
-  "resolved" "https://registry.npmmirror.com/string-argv/-/string-argv-0.3.1.tgz"
-  "version" "0.3.1"
-
-"string-width@^4.1.0", "string-width@^4.2.0", "string-width@^4.2.3":
-  "integrity" "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g=="
-  "resolved" "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz"
-  "version" "4.2.3"
-  dependencies:
-    "emoji-regex" "^8.0.0"
-    "is-fullwidth-code-point" "^3.0.0"
-    "strip-ansi" "^6.0.1"
-
-"string-width@^5.0.0":
-  "integrity" "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA=="
-  "resolved" "https://registry.npmmirror.com/string-width/-/string-width-5.1.2.tgz"
-  "version" "5.1.2"
-  dependencies:
-    "eastasianwidth" "^0.2.0"
-    "emoji-regex" "^9.2.2"
-    "strip-ansi" "^7.0.1"
-
-"strip-ansi@^6.0.0", "strip-ansi@^6.0.1":
-  "integrity" "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="
-  "resolved" "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz"
-  "version" "6.0.1"
-  dependencies:
-    "ansi-regex" "^5.0.1"
-
-"strip-ansi@^7.0.1":
-  "integrity" "sha512-cXNxvT8dFNRVfhVME3JAe98mkXDYN2O1l7jmcwMnOslDeESg1rF/OZMtK0nRAhiari1unG5cD4jG3rapUAkLbw=="
-  "resolved" "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-7.0.1.tgz"
-  "version" "7.0.1"
-  dependencies:
-    "ansi-regex" "^6.0.1"
-
-"strip-final-newline@^2.0.0":
-  "integrity" "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA=="
-  "resolved" "https://registry.npmmirror.com/strip-final-newline/-/strip-final-newline-2.0.0.tgz"
-  "version" "2.0.0"
-
-"strip-indent@^3.0.0":
-  "integrity" "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ=="
-  "resolved" "https://registry.npmmirror.com/strip-indent/-/strip-indent-3.0.0.tgz"
-  "version" "3.0.0"
-  dependencies:
-    "min-indent" "^1.0.0"
-
-"strip-json-comments@^3.1.0", "strip-json-comments@^3.1.1":
-  "integrity" "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig=="
-  "resolved" "https://registry.npmmirror.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz"
-  "version" "3.1.1"
-
-"supports-color@^5.3.0":
-  "integrity" "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow=="
-  "resolved" "https://registry.npmmirror.com/supports-color/-/supports-color-5.5.0.tgz"
-  "version" "5.5.0"
-  dependencies:
-    "has-flag" "^3.0.0"
-
-"supports-color@^7.1.0":
-  "integrity" "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw=="
-  "resolved" "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz"
-  "version" "7.2.0"
-  dependencies:
-    "has-flag" "^4.0.0"
-
-"supports-color@^9.2.2":
-  "integrity" "sha512-XC6g/Kgux+rJXmwokjm9ECpD6k/smUoS5LKlUCcsYr4IY3rW0XyAympon2RmxGrlnZURMpg5T18gWDP9CsHXFA=="
-  "resolved" "https://registry.npmmirror.com/supports-color/-/supports-color-9.2.2.tgz"
-  "version" "9.2.2"
-
-"supports-preserve-symlinks-flag@^1.0.0":
-  "integrity" "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="
-  "resolved" "https://registry.npmmirror.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz"
-  "version" "1.0.0"
-
-"text-extensions@^1.0.0":
-  "integrity" "sha512-wiBrwC1EhBelW12Zy26JeOUkQ5mRu+5o8rpsJk5+2t+Y5vE7e842qtZDQ2g1NpX/29HdyFeJ4nSIhI47ENSxlQ=="
-  "resolved" "https://registry.npmmirror.com/text-extensions/-/text-extensions-1.9.0.tgz"
-  "version" "1.9.0"
-
-"text-table@^0.2.0":
-  "integrity" "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw=="
-  "resolved" "https://registry.npmmirror.com/text-table/-/text-table-0.2.0.tgz"
-  "version" "0.2.0"
-
-"three@^0.142.0":
-  "integrity" "sha512-ESjPO+3geFr+ZUfVMpMnF/eVU2uJPOh0e2ZpMFqjNca1wApS9lJb7E4MjwGIczgt9iuKd8PEm6Pfgp2bJ92Xtg=="
-  "resolved" "https://registry.npmmirror.com/three/-/three-0.142.0.tgz"
-  "version" "0.142.0"
-
-"through@^2.3.8", "through@>=2.2.7 <3":
-  "integrity" "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg=="
-  "resolved" "https://registry.npmmirror.com/through/-/through-2.3.8.tgz"
-  "version" "2.3.8"
-
-"through2@^4.0.0":
-  "integrity" "sha512-iOqSav00cVxEEICeD7TjLB1sueEL+81Wpzp2bY17uZjZN0pWZPuo4suZ/61VujxmqSGFfgOcNuTZ85QJwNZQpw=="
-  "resolved" "https://registry.npmmirror.com/through2/-/through2-4.0.2.tgz"
-  "version" "4.0.2"
-  dependencies:
-    "readable-stream" "3"
+  version "2.1.2"
+  resolved "https://registry.npmmirror.com/safer-buffer/-/safer-buffer-2.1.2.tgz"
+  integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
+
+sax@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.npmmirror.com/sax/-/sax-1.2.4.tgz"
+  integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
+
+screenfull@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.npmmirror.com/screenfull/-/screenfull-6.0.1.tgz"
+  integrity sha512-yzQW+j4zMUBQC51xxWaoDYjxOtl8Kn+xvue3p6v/fv2pIi1jH4AldgVLU8TBfFVgH2x3VXlf3+YiA/AYIPlaew==
+
+scroll-into-view-if-needed@^2.2.25:
+  version "2.2.31"
+  resolved "https://registry.npmmirror.com/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.31.tgz#d3c482959dc483e37962d1521254e3295d0d1587"
+  integrity sha512-dGCXy99wZQivjmjIqihaBQNjryrz5rueJY7eHfTdyWEiR4ttYpsajb14rn9s5d4DY4EcY6+4+U/maARBXJedkA==
+  dependencies:
+    compute-scroll-into-view "^1.0.20"
+
+select@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.npmmirror.com/select/-/select-1.1.2.tgz"
+  integrity sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA==
+
+"semver@2 || 3 || 4 || 5", semver@^5.6.0:
+  version "5.7.1"
+  resolved "https://registry.npmmirror.com/semver/-/semver-5.7.1.tgz"
+  integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
+
+semver@7.3.7, semver@^7.3.4, semver@^7.3.5, semver@^7.3.6, semver@^7.3.7:
+  version "7.3.7"
+  resolved "https://registry.npmmirror.com/semver/-/semver-7.3.7.tgz"
+  integrity sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==
+  dependencies:
+    lru-cache "^6.0.0"
+
+shallow-equal@^1.0.0:
+  version "1.2.1"
+  resolved "https://registry.npmmirror.com/shallow-equal/-/shallow-equal-1.2.1.tgz#4c16abfa56043aa20d050324efa68940b0da79da"
+  integrity sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==
+
+shebang-command@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmmirror.com/shebang-command/-/shebang-command-2.0.0.tgz"
+  integrity sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==
+  dependencies:
+    shebang-regex "^3.0.0"
+
+shebang-regex@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmmirror.com/shebang-regex/-/shebang-regex-3.0.0.tgz"
+  integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
+
+side-channel@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.npmmirror.com/side-channel/-/side-channel-1.0.4.tgz"
+  integrity sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==
+  dependencies:
+    call-bind "^1.0.0"
+    get-intrinsic "^1.0.2"
+    object-inspect "^1.9.0"
+
+signal-exit@^3.0.2, signal-exit@^3.0.3:
+  version "3.0.7"
+  resolved "https://registry.npmmirror.com/signal-exit/-/signal-exit-3.0.7.tgz"
+  integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==
+
+slash@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmmirror.com/slash/-/slash-3.0.0.tgz"
+  integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
+
+slice-ansi@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmmirror.com/slice-ansi/-/slice-ansi-3.0.0.tgz"
+  integrity sha512-pSyv7bSTC7ig9Dcgbw9AuRNUb5k5V6oDudjZoMBSr13qpLBG7tB+zgCkARjq7xIUgdz5P1Qe8u+rSGdouOOIyQ==
+  dependencies:
+    ansi-styles "^4.0.0"
+    astral-regex "^2.0.0"
+    is-fullwidth-code-point "^3.0.0"
+
+slice-ansi@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmmirror.com/slice-ansi/-/slice-ansi-4.0.0.tgz"
+  integrity sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==
+  dependencies:
+    ansi-styles "^4.0.0"
+    astral-regex "^2.0.0"
+    is-fullwidth-code-point "^3.0.0"
+
+slice-ansi@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.npmmirror.com/slice-ansi/-/slice-ansi-5.0.0.tgz"
+  integrity sha512-FC+lgizVPfie0kkhqUScwRu1O/lF6NOgJmlCgK+/LYxDCTk8sGelYaHDhFcDN+Sn3Cv+3VSa4Byeo+IMCzpMgQ==
+  dependencies:
+    ansi-styles "^6.0.0"
+    is-fullwidth-code-point "^4.0.0"
+
+source-map-js@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.0.2.tgz"
+  integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
+
+source-map@0.6.1, source-map@^0.6.1, source-map@~0.6.0:
+  version "0.6.1"
+  resolved "https://registry.npmmirror.com/source-map/-/source-map-0.6.1.tgz"
+  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
+
+sourcemap-codec@^1.4.8:
+  version "1.4.8"
+  resolved "https://registry.npmmirror.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz"
+  integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
+
+spdx-correct@^3.0.0:
+  version "3.1.1"
+  resolved "https://registry.npmmirror.com/spdx-correct/-/spdx-correct-3.1.1.tgz"
+  integrity sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w==
+  dependencies:
+    spdx-expression-parse "^3.0.0"
+    spdx-license-ids "^3.0.0"
+
+spdx-exceptions@^2.1.0:
+  version "2.3.0"
+  resolved "https://registry.npmmirror.com/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz"
+  integrity sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==
+
+spdx-expression-parse@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.npmmirror.com/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz"
+  integrity sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==
+  dependencies:
+    spdx-exceptions "^2.1.0"
+    spdx-license-ids "^3.0.0"
+
+spdx-license-ids@^3.0.0:
+  version "3.0.11"
+  resolved "https://registry.npmmirror.com/spdx-license-ids/-/spdx-license-ids-3.0.11.tgz"
+  integrity sha512-Ctl2BrFiM0X3MANYgj3CkygxhRmr9mi6xhejbdO960nF6EDJApTYpn0BQnDKlnNBULKiCN1n3w9EBkHK8ZWg+g==
+
+splaytree@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.npmmirror.com/splaytree/-/splaytree-3.1.1.tgz"
+  integrity sha512-9FaQ18FF0+sZc/ieEeXHt+Jw2eSpUgUtTLDYB/HXKWvhYVyOc7h1hzkn5MMO3GPib9MmXG1go8+OsBBzs/NMww==
+
+split-on-first@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.npmmirror.com/split-on-first/-/split-on-first-1.1.0.tgz"
+  integrity sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==
+
+split2@^3.0.0:
+  version "3.2.2"
+  resolved "https://registry.npmmirror.com/split2/-/split2-3.2.2.tgz"
+  integrity sha512-9NThjpgZnifTkJpzTZ7Eue85S49QwpNhZTq6GRJwObb6jnLFNGB7Qm73V5HewTROPyxD0C29xqmaI68bQtV+hg==
+  dependencies:
+    readable-stream "^3.0.0"
+
+strict-uri-encode@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmmirror.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz"
+  integrity sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ==
+
+string-argv@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.npmmirror.com/string-argv/-/string-argv-0.3.1.tgz"
+  integrity sha512-a1uQGz7IyVy9YwhqjZIZu1c8JO8dNIe20xBmSS6qu9kv++k3JGzCVmprbNN5Kn+BgzD5E7YYwg1CcjuJMRNsvg==
+
+string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+  version "4.2.3"
+  resolved "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^5.0.0:
+  version "5.1.2"
+  resolved "https://registry.npmmirror.com/string-width/-/string-width-5.1.2.tgz"
+  integrity sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==
+  dependencies:
+    eastasianwidth "^0.2.0"
+    emoji-regex "^9.2.2"
+    strip-ansi "^7.0.1"
+
+string_decoder@^1.1.1:
+  version "1.3.0"
+  resolved "https://registry.npmmirror.com/string_decoder/-/string_decoder-1.3.0.tgz"
+  integrity sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==
+  dependencies:
+    safe-buffer "~5.2.0"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-7.0.1.tgz"
+  integrity sha512-cXNxvT8dFNRVfhVME3JAe98mkXDYN2O1l7jmcwMnOslDeESg1rF/OZMtK0nRAhiari1unG5cD4jG3rapUAkLbw==
+  dependencies:
+    ansi-regex "^6.0.1"
+
+strip-final-newline@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmmirror.com/strip-final-newline/-/strip-final-newline-2.0.0.tgz"
+  integrity sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==
+
+strip-indent@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmmirror.com/strip-indent/-/strip-indent-3.0.0.tgz"
+  integrity sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==
+  dependencies:
+    min-indent "^1.0.0"
+
+strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.npmmirror.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz"
+  integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
+
+supports-color@^5.3.0:
+  version "5.5.0"
+  resolved "https://registry.npmmirror.com/supports-color/-/supports-color-5.5.0.tgz"
+  integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
+  dependencies:
+    has-flag "^3.0.0"
+
+supports-color@^7.1.0:
+  version "7.2.0"
+  resolved "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz"
+  integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
+  dependencies:
+    has-flag "^4.0.0"
+
+supports-color@^9.2.2:
+  version "9.2.2"
+  resolved "https://registry.npmmirror.com/supports-color/-/supports-color-9.2.2.tgz"
+  integrity sha512-XC6g/Kgux+rJXmwokjm9ECpD6k/smUoS5LKlUCcsYr4IY3rW0XyAympon2RmxGrlnZURMpg5T18gWDP9CsHXFA==
+
+supports-preserve-symlinks-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmmirror.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz"
+  integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
+
+text-extensions@^1.0.0:
+  version "1.9.0"
+  resolved "https://registry.npmmirror.com/text-extensions/-/text-extensions-1.9.0.tgz"
+  integrity sha512-wiBrwC1EhBelW12Zy26JeOUkQ5mRu+5o8rpsJk5+2t+Y5vE7e842qtZDQ2g1NpX/29HdyFeJ4nSIhI47ENSxlQ==
+
+text-table@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.npmmirror.com/text-table/-/text-table-0.2.0.tgz"
+  integrity sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==
+
+three@^0.142.0:
+  version "0.142.0"
+  resolved "https://registry.npmmirror.com/three/-/three-0.142.0.tgz"
+  integrity sha512-ESjPO+3geFr+ZUfVMpMnF/eVU2uJPOh0e2ZpMFqjNca1wApS9lJb7E4MjwGIczgt9iuKd8PEm6Pfgp2bJ92Xtg==
+
+through2@^4.0.0:
+  version "4.0.2"
+  resolved "https://registry.npmmirror.com/through2/-/through2-4.0.2.tgz"
+  integrity sha512-iOqSav00cVxEEICeD7TjLB1sueEL+81Wpzp2bY17uZjZN0pWZPuo4suZ/61VujxmqSGFfgOcNuTZ85QJwNZQpw==
+  dependencies:
+    readable-stream "3"
+
+"through@>=2.2.7 <3", through@^2.3.8:
+  version "2.3.8"
+  resolved "https://registry.npmmirror.com/through/-/through-2.3.8.tgz"
+  integrity sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==
+
+tiny-emitter@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.npmmirror.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz"
+  integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
 
-"tiny-emitter@^2.0.0":
-  "integrity" "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
-  "resolved" "https://registry.npmmirror.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz"
-  "version" "2.1.0"
+tinycolor2@^1.4.2:
+  version "1.6.0"
+  resolved "https://registry.npmmirror.com/tinycolor2/-/tinycolor2-1.6.0.tgz#f98007460169b0263b97072c5ae92484ce02d09e"
+  integrity sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==
 
-"to-regex-range@^5.0.1":
-  "integrity" "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ=="
-  "resolved" "https://registry.npmmirror.com/to-regex-range/-/to-regex-range-5.0.1.tgz"
-  "version" "5.0.1"
-  dependencies:
-    "is-number" "^7.0.0"
+to-regex-range@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.npmmirror.com/to-regex-range/-/to-regex-range-5.0.1.tgz"
+  integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
+  dependencies:
+    is-number "^7.0.0"
 
-"trim-newlines@^3.0.0":
-  "integrity" "sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw=="
-  "resolved" "https://registry.npmmirror.com/trim-newlines/-/trim-newlines-3.0.1.tgz"
-  "version" "3.0.1"
+trim-newlines@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.npmmirror.com/trim-newlines/-/trim-newlines-3.0.1.tgz"
+  integrity sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==
 
-"ts-node@^10.8.0":
-  "integrity" "sha512-/fNd5Qh+zTt8Vt1KbYZjRHCE9sI5i7nqfD/dzBBRDeVXZXS6kToW6R7tTU6Nd4XavFs0mAVCg29Q//ML7WsZYA=="
-  "resolved" "https://registry.npmmirror.com/ts-node/-/ts-node-10.8.0.tgz"
-  "version" "10.8.0"
+ts-node@^10.8.0:
+  version "10.8.0"
+  resolved "https://registry.npmmirror.com/ts-node/-/ts-node-10.8.0.tgz"
+  integrity sha512-/fNd5Qh+zTt8Vt1KbYZjRHCE9sI5i7nqfD/dzBBRDeVXZXS6kToW6R7tTU6Nd4XavFs0mAVCg29Q//ML7WsZYA==
   dependencies:
     "@cspotcode/source-map-support" "^0.8.0"
     "@tsconfig/node10" "^1.0.7"
     "@tsconfig/node12" "^1.0.7"
     "@tsconfig/node14" "^1.0.0"
     "@tsconfig/node16" "^1.0.2"
-    "acorn" "^8.4.1"
-    "acorn-walk" "^8.1.1"
-    "arg" "^4.1.0"
-    "create-require" "^1.1.0"
-    "diff" "^4.0.1"
-    "make-error" "^1.1.1"
-    "v8-compile-cache-lib" "^3.0.1"
-    "yn" "3.1.1"
-
-"tslib@^1.8.1":
-  "integrity" "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
-  "resolved" "https://registry.npmmirror.com/tslib/-/tslib-1.14.1.tgz"
-  "version" "1.14.1"
-
-"tslib@^2.1.0":
-  "integrity" "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
-  "resolved" "https://registry.npmmirror.com/tslib/-/tslib-2.4.0.tgz"
-  "version" "2.4.0"
-
-"tslib@^2.3.0":
-  "integrity" "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
-  "resolved" "https://registry.npmmirror.com/tslib/-/tslib-2.4.0.tgz"
-  "version" "2.4.0"
-
-"tsutils@^3.21.0":
-  "integrity" "sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA=="
-  "resolved" "https://registry.npmmirror.com/tsutils/-/tsutils-3.21.0.tgz"
-  "version" "3.21.0"
-  dependencies:
-    "tslib" "^1.8.1"
-
-"type-check@^0.4.0", "type-check@~0.4.0":
-  "integrity" "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew=="
-  "resolved" "https://registry.npmmirror.com/type-check/-/type-check-0.4.0.tgz"
-  "version" "0.4.0"
-  dependencies:
-    "prelude-ls" "^1.2.1"
-
-"type-fest@^0.18.0":
-  "integrity" "sha512-OIAYXk8+ISY+qTOwkHtKqzAuxchoMiD9Udx+FSGQDuiRR+PJKJHc2NJAXlbhkGwTt/4/nKZxELY1w3ReWOL8mw=="
-  "resolved" "https://registry.npmmirror.com/type-fest/-/type-fest-0.18.1.tgz"
-  "version" "0.18.1"
-
-"type-fest@^0.20.2":
-  "integrity" "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ=="
-  "resolved" "https://registry.npmmirror.com/type-fest/-/type-fest-0.20.2.tgz"
-  "version" "0.20.2"
-
-"type-fest@^0.21.3":
-  "integrity" "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w=="
-  "resolved" "https://registry.npmmirror.com/type-fest/-/type-fest-0.21.3.tgz"
-  "version" "0.21.3"
-
-"type-fest@^0.6.0":
-  "integrity" "sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg=="
-  "resolved" "https://registry.npmmirror.com/type-fest/-/type-fest-0.6.0.tgz"
-  "version" "0.6.0"
-
-"type-fest@^0.8.1":
-  "integrity" "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA=="
-  "resolved" "https://registry.npmmirror.com/type-fest/-/type-fest-0.8.1.tgz"
-  "version" "0.8.1"
-
-"typescript@*", "typescript@^4.4.3", "typescript@^4.5.4", "typescript@>=2.7", "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta", "typescript@>=3":
-  "integrity" "sha512-Mamb1iX2FDUpcTRzltPxgWMKy3fhg0TN378ylbktPGPK/99KbDtMQ4W1hwgsbPAsG3a0xKa1vmw4VKZQbkvz5A=="
-  "resolved" "https://registry.npmmirror.com/typescript/-/typescript-4.7.2.tgz"
-  "version" "4.7.2"
-
-"ua-parser-js@^1.0.2":
-  "integrity" "sha512-00y/AXhx0/SsnI51fTc0rLRmafiGOM4/O+ny10Ps7f+j/b8p/ZY11ytMgznXkOVo4GQ+KwQG5UQLkLGirsACRg=="
-  "resolved" "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.2.tgz"
-  "version" "1.0.2"
-
-"universalify@^2.0.0":
-  "integrity" "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ=="
-  "resolved" "https://registry.npmmirror.com/universalify/-/universalify-2.0.0.tgz"
-  "version" "2.0.0"
-
-"uri-js@^4.2.2":
-  "integrity" "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg=="
-  "resolved" "https://registry.npmmirror.com/uri-js/-/uri-js-4.4.1.tgz"
-  "version" "4.4.1"
-  dependencies:
-    "punycode" "^2.1.0"
-
-"util-deprecate@^1.0.1", "util-deprecate@^1.0.2":
-  "integrity" "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
-  "resolved" "https://registry.npmmirror.com/util-deprecate/-/util-deprecate-1.0.2.tgz"
-  "version" "1.0.2"
-
-"uuid@^3.1.0":
-  "integrity" "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A=="
-  "resolved" "https://registry.npmmirror.com/uuid/-/uuid-3.4.0.tgz"
-  "version" "3.4.0"
-
-"v8-compile-cache-lib@^3.0.1":
-  "integrity" "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg=="
-  "resolved" "https://registry.npmmirror.com/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz"
-  "version" "3.0.1"
-
-"v8-compile-cache@^2.0.3":
-  "integrity" "sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA=="
-  "resolved" "https://registry.npmmirror.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz"
-  "version" "2.3.0"
-
-"validate-npm-package-license@^3.0.1":
-  "integrity" "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew=="
-  "resolved" "https://registry.npmmirror.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz"
-  "version" "3.0.4"
-  dependencies:
-    "spdx-correct" "^3.0.0"
-    "spdx-expression-parse" "^3.0.0"
-
-"vite@^2.5.10", "vite@^2.9.9":
-  "integrity" "sha512-ffaam+NgHfbEmfw/Vuh6BHKKlI/XIAhxE5QSS7gFLIngxg171mg1P3a4LSRME0z2ZU1ScxoKzphkipcYwSD5Ew=="
-  "resolved" "https://registry.npmmirror.com/vite/-/vite-2.9.9.tgz"
-  "version" "2.9.9"
-  dependencies:
-    "esbuild" "^0.14.27"
-    "postcss" "^8.4.13"
-    "resolve" "^1.22.0"
-    "rollup" "^2.59.0"
+    acorn "^8.4.1"
+    acorn-walk "^8.1.1"
+    arg "^4.1.0"
+    create-require "^1.1.0"
+    diff "^4.0.1"
+    make-error "^1.1.1"
+    v8-compile-cache-lib "^3.0.1"
+    yn "3.1.1"
+
+tslib@^1.8.1:
+  version "1.14.1"
+  resolved "https://registry.npmmirror.com/tslib/-/tslib-1.14.1.tgz"
+  integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
+
+tslib@^2.1.0, tslib@^2.3.0:
+  version "2.4.0"
+  resolved "https://registry.npmmirror.com/tslib/-/tslib-2.4.0.tgz"
+  integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
+
+tsutils@^3.21.0:
+  version "3.21.0"
+  resolved "https://registry.npmmirror.com/tsutils/-/tsutils-3.21.0.tgz"
+  integrity sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==
+  dependencies:
+    tslib "^1.8.1"
+
+type-check@^0.4.0, type-check@~0.4.0:
+  version "0.4.0"
+  resolved "https://registry.npmmirror.com/type-check/-/type-check-0.4.0.tgz"
+  integrity sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==
+  dependencies:
+    prelude-ls "^1.2.1"
+
+type-fest@^0.18.0:
+  version "0.18.1"
+  resolved "https://registry.npmmirror.com/type-fest/-/type-fest-0.18.1.tgz"
+  integrity sha512-OIAYXk8+ISY+qTOwkHtKqzAuxchoMiD9Udx+FSGQDuiRR+PJKJHc2NJAXlbhkGwTt/4/nKZxELY1w3ReWOL8mw==
+
+type-fest@^0.20.2:
+  version "0.20.2"
+  resolved "https://registry.npmmirror.com/type-fest/-/type-fest-0.20.2.tgz"
+  integrity sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==
+
+type-fest@^0.21.3:
+  version "0.21.3"
+  resolved "https://registry.npmmirror.com/type-fest/-/type-fest-0.21.3.tgz"
+  integrity sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==
+
+type-fest@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.npmmirror.com/type-fest/-/type-fest-0.6.0.tgz"
+  integrity sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==
+
+type-fest@^0.8.1:
+  version "0.8.1"
+  resolved "https://registry.npmmirror.com/type-fest/-/type-fest-0.8.1.tgz"
+  integrity sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==
+
+typescript@^4.4.3, typescript@^4.5.4:
+  version "4.7.2"
+  resolved "https://registry.npmmirror.com/typescript/-/typescript-4.7.2.tgz"
+  integrity sha512-Mamb1iX2FDUpcTRzltPxgWMKy3fhg0TN378ylbktPGPK/99KbDtMQ4W1hwgsbPAsG3a0xKa1vmw4VKZQbkvz5A==
+
+ua-parser-js@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.2.tgz"
+  integrity sha512-00y/AXhx0/SsnI51fTc0rLRmafiGOM4/O+ny10Ps7f+j/b8p/ZY11ytMgznXkOVo4GQ+KwQG5UQLkLGirsACRg==
+
+universalify@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmmirror.com/universalify/-/universalify-2.0.0.tgz"
+  integrity sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==
+
+uri-js@^4.2.2:
+  version "4.4.1"
+  resolved "https://registry.npmmirror.com/uri-js/-/uri-js-4.4.1.tgz"
+  integrity sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==
+  dependencies:
+    punycode "^2.1.0"
+
+util-deprecate@^1.0.1, util-deprecate@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmmirror.com/util-deprecate/-/util-deprecate-1.0.2.tgz"
+  integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
+
+uuid@^3.1.0:
+  version "3.4.0"
+  resolved "https://registry.npmmirror.com/uuid/-/uuid-3.4.0.tgz"
+  integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
+
+v8-compile-cache-lib@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.npmmirror.com/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz"
+  integrity sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==
+
+v8-compile-cache@^2.0.3:
+  version "2.3.0"
+  resolved "https://registry.npmmirror.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz"
+  integrity sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==
+
+validate-npm-package-license@^3.0.1:
+  version "3.0.4"
+  resolved "https://registry.npmmirror.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz"
+  integrity sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==
+  dependencies:
+    spdx-correct "^3.0.0"
+    spdx-expression-parse "^3.0.0"
+
+vite@^2.9.9:
+  version "2.9.9"
+  resolved "https://registry.npmmirror.com/vite/-/vite-2.9.9.tgz"
+  integrity sha512-ffaam+NgHfbEmfw/Vuh6BHKKlI/XIAhxE5QSS7gFLIngxg171mg1P3a4LSRME0z2ZU1ScxoKzphkipcYwSD5Ew==
+  dependencies:
+    esbuild "^0.14.27"
+    postcss "^8.4.13"
+    resolve "^1.22.0"
+    rollup "^2.59.0"
   optionalDependencies:
-    "fsevents" "~2.3.2"
-
-"vue-clipboard2@^0.3.3":
-  "integrity" "sha512-aNWXIL2DKgJyY/1OOeITwAQz1fHaCIGvUFHf9h8UcoQBG5a74MkdhS/xqoYe7DNZdQmZRL+TAdIbtUs9OyVjbw=="
-  "resolved" "https://registry.npmmirror.com/vue-clipboard2/-/vue-clipboard2-0.3.3.tgz"
-  "version" "0.3.3"
-  dependencies:
-    "clipboard" "^2.0.0"
-
-"vue-demi@*":
-  "integrity" "sha512-xmkJ56koG3ptpLnpgmIzk9/4nFf4CqduSJbUM0OdPoU87NwRuZ6x49OLhjSa/fC15fV+5CbEnrxU4oyE022svg=="
-  "resolved" "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.1.tgz"
-  "version" "0.13.1"
-
-"vue-eslint-parser@^9.0.1":
-  "integrity" "sha512-uCPQwTGjOtAYrwnU+76pYxalhjsh7iFBsHwBqDHiOPTxtICDaraO4Szw54WFTNZTAEsgHHzqFOu1mmnBOBRzDA=="
-  "resolved" "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-9.0.2.tgz"
-  "version" "9.0.2"
-  dependencies:
-    "debug" "^4.3.4"
-    "eslint-scope" "^7.1.1"
-    "eslint-visitor-keys" "^3.3.0"
-    "espree" "^9.3.1"
-    "esquery" "^1.4.0"
-    "lodash" "^4.17.21"
-    "semver" "^7.3.6"
-
-"vue-i18n@^9.1.9":
-  "integrity" "sha512-jpr7gV5KPk4n+sSPdpZT8Qx3XzTcNDWffRlHV/cT2NUyEf+sEgTTmLvnBAibjOFJ0zsUyZlVTAWH5DDnYep+1g=="
-  "resolved" "https://registry.npmmirror.com/vue-i18n/-/vue-i18n-9.1.10.tgz"
-  "version" "9.1.10"
+    fsevents "~2.3.2"
+
+vue-clipboard2@^0.3.3:
+  version "0.3.3"
+  resolved "https://registry.npmmirror.com/vue-clipboard2/-/vue-clipboard2-0.3.3.tgz"
+  integrity sha512-aNWXIL2DKgJyY/1OOeITwAQz1fHaCIGvUFHf9h8UcoQBG5a74MkdhS/xqoYe7DNZdQmZRL+TAdIbtUs9OyVjbw==
+  dependencies:
+    clipboard "^2.0.0"
+
+vue-demi@*:
+  version "0.13.1"
+  resolved "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.1.tgz"
+  integrity sha512-xmkJ56koG3ptpLnpgmIzk9/4nFf4CqduSJbUM0OdPoU87NwRuZ6x49OLhjSa/fC15fV+5CbEnrxU4oyE022svg==
+
+vue-demi@>=0.14.6:
+  version "0.14.6"
+  resolved "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.6.tgz#dc706582851dc1cdc17a0054f4fec2eb6df74c92"
+  integrity sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==
+
+vue-eslint-parser@^9.0.1:
+  version "9.0.2"
+  resolved "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-9.0.2.tgz"
+  integrity sha512-uCPQwTGjOtAYrwnU+76pYxalhjsh7iFBsHwBqDHiOPTxtICDaraO4Szw54WFTNZTAEsgHHzqFOu1mmnBOBRzDA==
+  dependencies:
+    debug "^4.3.4"
+    eslint-scope "^7.1.1"
+    eslint-visitor-keys "^3.3.0"
+    espree "^9.3.1"
+    esquery "^1.4.0"
+    lodash "^4.17.21"
+    semver "^7.3.6"
+
+vue-i18n@^9.1.9:
+  version "9.1.10"
+  resolved "https://registry.npmmirror.com/vue-i18n/-/vue-i18n-9.1.10.tgz"
+  integrity sha512-jpr7gV5KPk4n+sSPdpZT8Qx3XzTcNDWffRlHV/cT2NUyEf+sEgTTmLvnBAibjOFJ0zsUyZlVTAWH5DDnYep+1g==
   dependencies:
     "@intlify/core-base" "9.1.10"
     "@intlify/shared" "9.1.10"
     "@intlify/vue-devtools" "9.1.10"
     "@vue/devtools-api" "^6.0.0-beta.7"
 
-"vue-router@^4.0.14":
-  "integrity" "sha512-xa+pIN9ZqORdIW1MkN2+d9Ui2pCM1b/UMgwYUCZOiFYHAvz/slKKBDha8DLrh5aCG/RibtrpyhKjKOZ85tYyWg=="
-  "resolved" "https://registry.npmmirror.com/vue-router/-/vue-router-4.0.15.tgz"
-  "version" "4.0.15"
+vue-router@^4.0.14:
+  version "4.0.15"
+  resolved "https://registry.npmmirror.com/vue-router/-/vue-router-4.0.15.tgz"
+  integrity sha512-xa+pIN9ZqORdIW1MkN2+d9Ui2pCM1b/UMgwYUCZOiFYHAvz/slKKBDha8DLrh5aCG/RibtrpyhKjKOZ85tYyWg==
   dependencies:
     "@vue/devtools-api" "^6.0.0"
 
-"vue-tsc@^0.34.7":
-  "integrity" "sha512-9tYBQIOyl3Tz8ZrlYUKtftu5m/wXHfxCalyjR22QzSaUJoBJmZeNOoVs/QEllc0z4ideEZxvvU+pBFdoY3O16A=="
-  "resolved" "https://registry.npmmirror.com/vue-tsc/-/vue-tsc-0.34.16.tgz"
-  "version" "0.34.16"
+vue-tsc@^0.34.7:
+  version "0.34.16"
+  resolved "https://registry.npmmirror.com/vue-tsc/-/vue-tsc-0.34.16.tgz"
+  integrity sha512-9tYBQIOyl3Tz8ZrlYUKtftu5m/wXHfxCalyjR22QzSaUJoBJmZeNOoVs/QEllc0z4ideEZxvvU+pBFdoY3O16A==
   dependencies:
     "@volar/vue-typescript" "0.34.16"
 
-"vue-types@^3.0.0":
-  "integrity" "sha512-IwUC0Aq2zwaXqy74h4WCvFCUtoV0iSWr0snWnE9TnU18S66GAQyqQbRf2qfJtUuiFsBf6qp0MEwdonlwznlcrw=="
-  "resolved" "https://registry.npmmirror.com/vue-types/-/vue-types-3.0.2.tgz"
-  "version" "3.0.2"
+vue-types@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.npmmirror.com/vue-types/-/vue-types-3.0.2.tgz#ec16e05d412c038262fc1efa4ceb9647e7fb601d"
+  integrity sha512-IwUC0Aq2zwaXqy74h4WCvFCUtoV0iSWr0snWnE9TnU18S66GAQyqQbRf2qfJtUuiFsBf6qp0MEwdonlwznlcrw==
+  dependencies:
+    is-plain-object "3.0.1"
+
+vue-types@^4.1.0:
+  version "4.2.1"
+  resolved "https://registry.npmmirror.com/vue-types/-/vue-types-4.2.1.tgz#f8f7e5fb42d4a6acda6d92c9736b510e5534c753"
+  integrity sha512-DNQZmJuOvovLUIp0BENRkdnZHbI0V4e2mNvjAZOAXKD56YGvRchtUYOXA/XqTxdv7Ng5SJLZqRKRpAhm5NLaPQ==
+  dependencies:
+    is-plain-object "5.0.0"
+
+vue3-colorpicker@^2.2.3:
+  version "2.2.3"
+  resolved "https://registry.npmmirror.com/vue3-colorpicker/-/vue3-colorpicker-2.2.3.tgz#2199961d2ed1734ae0c638016495dffa3c03ce51"
+  integrity sha512-hGGH3gfXU8nv7FzSy+xCslOGPCH7YgLxsuY+pQ/GN8SwVZYAd5BXDNt1/8DF+A3wihZ8Whow9XIWwrDhAlJW1Q==
   dependencies:
-    "is-plain-object" "3.0.1"
+    "@aesoper/normal-utils" "^0.1.5"
+    "@popperjs/core" "^2.11.8"
+    "@vueuse/core" "^10.1.2"
+    gradient-parser "^1.0.2"
+    lodash-es "^4.17.21"
+    tinycolor2 "^1.4.2"
+    vue-types "^4.1.0"
 
-"vue@^2.6.0 || ^3.2.0", "vue@^3.0.0", "vue@^3.0.0-0 || ^2.6.0", "vue@^3.2.0", "vue@^3.2.25", "vue@>=3.0.3", "vue@>=3.1.0", "vue@3.2.36":
-  "integrity" "sha512-5yTXmrE6gW8IQgttzHW5bfBiFA6mx35ZXHjGLDmKYzW6MMmYvCwuKybANRepwkMYeXw2v1buGg3/lPICY5YlZw=="
-  "resolved" "https://registry.npmmirror.com/vue/-/vue-3.2.36.tgz"
-  "version" "3.2.36"
+vue@^3.2.25:
+  version "3.2.36"
+  resolved "https://registry.npmmirror.com/vue/-/vue-3.2.36.tgz"
+  integrity sha512-5yTXmrE6gW8IQgttzHW5bfBiFA6mx35ZXHjGLDmKYzW6MMmYvCwuKybANRepwkMYeXw2v1buGg3/lPICY5YlZw==
   dependencies:
     "@vue/compiler-dom" "3.2.36"
     "@vue/compiler-sfc" "3.2.36"
@@ -3065,97 +3228,97 @@
     "@vue/server-renderer" "3.2.36"
     "@vue/shared" "3.2.36"
 
-"warning@^4.0.0":
-  "integrity" "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w=="
-  "resolved" "https://registry.npmmirror.com/warning/-/warning-4.0.3.tgz"
-  "version" "4.0.3"
-  dependencies:
-    "loose-envify" "^1.0.0"
-
-"which@^2.0.1":
-  "integrity" "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA=="
-  "resolved" "https://registry.npmmirror.com/which/-/which-2.0.2.tgz"
-  "version" "2.0.2"
-  dependencies:
-    "isexe" "^2.0.0"
-
-"word-wrap@^1.2.3":
-  "integrity" "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ=="
-  "resolved" "https://registry.npmmirror.com/word-wrap/-/word-wrap-1.2.3.tgz"
-  "version" "1.2.3"
-
-"wrap-ansi@^6.2.0":
-  "integrity" "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA=="
-  "resolved" "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-6.2.0.tgz"
-  "version" "6.2.0"
-  dependencies:
-    "ansi-styles" "^4.0.0"
-    "string-width" "^4.1.0"
-    "strip-ansi" "^6.0.0"
-
-"wrap-ansi@^7.0.0":
-  "integrity" "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q=="
-  "resolved" "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz"
-  "version" "7.0.0"
-  dependencies:
-    "ansi-styles" "^4.0.0"
-    "string-width" "^4.1.0"
-    "strip-ansi" "^6.0.0"
-
-"wrappy@1":
-  "integrity" "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
-  "resolved" "https://registry.npmmirror.com/wrappy/-/wrappy-1.0.2.tgz"
-  "version" "1.0.2"
-
-"xml-name-validator@^4.0.0":
-  "integrity" "sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw=="
-  "resolved" "https://registry.npmmirror.com/xml-name-validator/-/xml-name-validator-4.0.0.tgz"
-  "version" "4.0.0"
-
-"y18n@^5.0.5":
-  "integrity" "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA=="
-  "resolved" "https://registry.npmmirror.com/y18n/-/y18n-5.0.8.tgz"
-  "version" "5.0.8"
-
-"yallist@^4.0.0":
-  "integrity" "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
-  "resolved" "https://registry.npmmirror.com/yallist/-/yallist-4.0.0.tgz"
-  "version" "4.0.0"
-
-"yaml@^1.10.0", "yaml@^1.10.2":
-  "integrity" "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg=="
-  "resolved" "https://registry.npmmirror.com/yaml/-/yaml-1.10.2.tgz"
-  "version" "1.10.2"
-
-"yargs-parser@^20.2.3":
-  "integrity" "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w=="
-  "resolved" "https://registry.npmmirror.com/yargs-parser/-/yargs-parser-20.2.9.tgz"
-  "version" "20.2.9"
-
-"yargs-parser@^21.0.0":
-  "integrity" "sha512-9BK1jFpLzJROCI5TzwZL/TU4gqjK5xiHV/RfWLOahrjAko/e4DJkRDZQXfvqAsiZzzYhgAzbgz6lg48jcm4GLg=="
-  "resolved" "https://registry.npmmirror.com/yargs-parser/-/yargs-parser-21.0.1.tgz"
-  "version" "21.0.1"
-
-"yargs@^17.0.0":
-  "integrity" "sha512-t6YAJcxDkNX7NFYiVtKvWUz8l+PaKTLiL63mJYWR2GnHq2gjEWISzsLp9wg3aY36dY1j+gfIEL3pIF+XlJJfbA=="
-  "resolved" "https://registry.npmmirror.com/yargs/-/yargs-17.5.1.tgz"
-  "version" "17.5.1"
-  dependencies:
-    "cliui" "^7.0.2"
-    "escalade" "^3.1.1"
-    "get-caller-file" "^2.0.5"
-    "require-directory" "^2.1.1"
-    "string-width" "^4.2.3"
-    "y18n" "^5.0.5"
-    "yargs-parser" "^21.0.0"
-
-"yn@3.1.1":
-  "integrity" "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q=="
-  "resolved" "https://registry.npmmirror.com/yn/-/yn-3.1.1.tgz"
-  "version" "3.1.1"
-
-"yocto-queue@^0.1.0":
-  "integrity" "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="
-  "resolved" "https://registry.npmmirror.com/yocto-queue/-/yocto-queue-0.1.0.tgz"
-  "version" "0.1.0"
+warning@^4.0.0:
+  version "4.0.3"
+  resolved "https://registry.npmmirror.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
+  integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
+  dependencies:
+    loose-envify "^1.0.0"
+
+which@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.npmmirror.com/which/-/which-2.0.2.tgz"
+  integrity sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==
+  dependencies:
+    isexe "^2.0.0"
+
+word-wrap@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.npmmirror.com/word-wrap/-/word-wrap-1.2.3.tgz"
+  integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==
+
+wrap-ansi@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-6.2.0.tgz"
+  integrity sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.npmmirror.com/wrappy/-/wrappy-1.0.2.tgz"
+  integrity sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==
+
+xml-name-validator@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmmirror.com/xml-name-validator/-/xml-name-validator-4.0.0.tgz"
+  integrity sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==
+
+y18n@^5.0.5:
+  version "5.0.8"
+  resolved "https://registry.npmmirror.com/y18n/-/y18n-5.0.8.tgz"
+  integrity sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==
+
+yallist@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmmirror.com/yallist/-/yallist-4.0.0.tgz"
+  integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
+
+yaml@^1.10.0, yaml@^1.10.2:
+  version "1.10.2"
+  resolved "https://registry.npmmirror.com/yaml/-/yaml-1.10.2.tgz"
+  integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
+
+yargs-parser@^20.2.3:
+  version "20.2.9"
+  resolved "https://registry.npmmirror.com/yargs-parser/-/yargs-parser-20.2.9.tgz"
+  integrity sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==
+
+yargs-parser@^21.0.0:
+  version "21.0.1"
+  resolved "https://registry.npmmirror.com/yargs-parser/-/yargs-parser-21.0.1.tgz"
+  integrity sha512-9BK1jFpLzJROCI5TzwZL/TU4gqjK5xiHV/RfWLOahrjAko/e4DJkRDZQXfvqAsiZzzYhgAzbgz6lg48jcm4GLg==
+
+yargs@^17.0.0:
+  version "17.5.1"
+  resolved "https://registry.npmmirror.com/yargs/-/yargs-17.5.1.tgz"
+  integrity sha512-t6YAJcxDkNX7NFYiVtKvWUz8l+PaKTLiL63mJYWR2GnHq2gjEWISzsLp9wg3aY36dY1j+gfIEL3pIF+XlJJfbA==
+  dependencies:
+    cliui "^7.0.2"
+    escalade "^3.1.1"
+    get-caller-file "^2.0.5"
+    require-directory "^2.1.1"
+    string-width "^4.2.3"
+    y18n "^5.0.5"
+    yargs-parser "^21.0.0"
+
+yn@3.1.1:
+  version "3.1.1"
+  resolved "https://registry.npmmirror.com/yn/-/yn-3.1.1.tgz"
+  integrity sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==
+
+yocto-queue@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.npmmirror.com/yocto-queue/-/yocto-queue-0.1.0.tgz"
+  integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
diff --git a/frontend/main/src/views/datasets/datasetContent/components/ImgCard.vue b/frontend/main/src/views/datasets/datasetContent/components/ImgCard.vue
index 75b5d5a1..15c676a1 100644
--- a/frontend/main/src/views/datasets/datasetContent/components/ImgCard.vue
+++ b/frontend/main/src/views/datasets/datasetContent/components/ImgCard.vue
@@ -26,7 +26,7 @@
           <div class="openBtn">
             <Button type="primary" block border @click.stop="handleOpen"> Open </Button>
           </div>
-          <div class="openBtn" v-if="info?.type != datasetTypeEnum.IMAGE">
+          <div class="openBtn">
             <Button
               type="primary"
               block
@@ -41,7 +41,7 @@
               View
             </Button>
           </div>
-          <div class="openBtn" v-if="info?.type != datasetTypeEnum.IMAGE">
+          <div class="openBtn">
             <Button
               type="primary"
               block
diff --git a/frontend/main/src/views/datasets/datasetContent/components/Tools.vue b/frontend/main/src/views/datasets/datasetContent/components/Tools.vue
index 9c8fbc8c..a3c4136c 100644
--- a/frontend/main/src/views/datasets/datasetContent/components/Tools.vue
+++ b/frontend/main/src/views/datasets/datasetContent/components/Tools.vue
@@ -432,12 +432,12 @@
       }) && data.length > 1;
 
     if (props.datasetType == datasetTypeEnum.IMAGE) {
-      annotateActionFlag.value = data.some((item) => {
-        return item.type == dataTypeEnum.FRAME_SERIES;
-      });
-      modelRunActionFlag.value = data.some((item) => {
-        return item.type == dataTypeEnum.FRAME_SERIES;
-      });
+      // annotateActionFlag.value = data.some((item) => {
+      //   return item.type == dataTypeEnum.FRAME_SERIES;
+      // });
+      // modelRunActionFlag.value = data.some((item) => {
+      //   return item.type == dataTypeEnum.FRAME_SERIES;
+      // });
     }
   });
 
diff --git a/frontend/main/src/views/datasets/datasetContent/components/upload/UploadProgress.vue b/frontend/main/src/views/datasets/datasetContent/components/upload/UploadProgress.vue
index 01107de1..ac6d6c82 100644
--- a/frontend/main/src/views/datasets/datasetContent/components/upload/UploadProgress.vue
+++ b/frontend/main/src/views/datasets/datasetContent/components/upload/UploadProgress.vue
@@ -339,6 +339,9 @@
           fileUrl: props.uploadUrl,
           datasetId: props.id as string,
           source: props.source,
+          resultType: props.resultType as string,
+          modelId: props.modelId as number,
+          dataFormat: props.dataFormat as string,
         };
         // get serialNumbers
         const serialNumbers = await uploadDatasetApi(uploadParams, fileItem.controller.signal);
diff --git a/frontend/main/src/views/datasets/datasetContent/index.vue b/frontend/main/src/views/datasets/datasetContent/index.vue
index 53c2ad94..48e1fb15 100644
--- a/frontend/main/src/views/datasets/datasetContent/index.vue
+++ b/frontend/main/src/views/datasets/datasetContent/index.vue
@@ -841,7 +841,7 @@
       dataIds: [dataId],
       operateItemType: dataTypeEnum.FRAME_SERIES,
     });
-    goToTool({ recordId: res });
+    goToTool({ recordId: res }, info.value?.type);
     // window.location.reload();
   };
   // Open Frame